diff --git a/.github/workflows/platform-smoke.yml b/.github/workflows/platform-smoke.yml
index 13f867e3..9da0cde0 100644
--- a/.github/workflows/platform-smoke.yml
+++ b/.github/workflows/platform-smoke.yml
@@ -10,7 +10,7 @@ on:
       - "scripts/native-deps-smoke.mjs"
       - "scripts/verify-libsql-vector.mjs"
       - "scripts/smoke-test.mjs"
-      - "scripts/copy-web-assets.mjs"
+      - "web/**"
       - ".github/workflows/platform-smoke.yml"
   workflow_dispatch:
 
@@ -40,6 +40,10 @@ jobs:
       - name: Install source dependencies
         run: bun install
 
+      - name: Install web dependencies
+        working-directory: web
+        run: bun install
+
       - name: Typecheck source
         run: bun run typecheck
 
diff --git a/SECURITY_AUDIT.md b/SECURITY_AUDIT.md
index bef5050b..58aa0da2 100644
--- a/SECURITY_AUDIT.md
+++ b/SECURITY_AUDIT.md
@@ -2,6 +2,8 @@
 
 **Scope:** `tickernelz/opencode-mem` @ commit `0998c69` (main). Local HTTP API, CORS policy, secret handling, SQLite layer, web UI, config/JSONC parsing, migration/cleanup services, dependencies. Read-only audit followed by targeted fixes for the three highest-severity findings.
 
+**Note (GUI rewrite):** The Memory Explorer UI is now a Vite-bundled React 19 app under `web/` (served from `dist/web`). The previous CDN-loaded vanilla UI (`src/web/*`) and the interim Svelte UI are gone. Findings 3–4 below describe the pre-rewrite UI; current mitigations are noted under each.
+
 ## Findings
 
 ### 1. CRITICAL — Path traversal via unauthenticated `containerTag` (fixed)
@@ -16,21 +18,21 @@ A request such as `POST /api/memories {"content":"x","containerTag":"project_x_.
 
 CORS was being used as a substitute for authentication in `src/services/cors.ts`, but `isAllowedBrowserOrigin()` returned `true` whenever no `Origin` header was present — which is the case for `curl`, other local processes, and any non-browser client. Every `/api/*` handler (read/write/delete memories, full user-profile CRUD, migrations) had no session/token check at all. If `webServerHost` is set to `0.0.0.0` (a documented config option), this is reachable from the whole LAN with no auth.
 
-**Fix:** added `src/services/auth-token.ts` — a random 256-bit token generated on first run, persisted to `~/.opencode-mem/.auth-token` (mode `0600`), required via the `x-opencode-mem-token` header on every `/api/*` request in both `web-server.ts` and `web-server-worker.ts`. The token is injected into the server-rendered `index.html` (`window.__OPENCODE_MEM_TOKEN__`) so the bundled web UI keeps working transparently (`app.js:fetchAPI` now sends the header), while a malicious cross-origin web page cannot read it (opaque/no-cors responses). The internal `checkServerAvailable()` health-check call was updated to send the token too, so the existing takeover/health-check logic still works.
+**Fix:** added `src/services/auth-token.ts` — a random 256-bit token generated on first run, persisted to `~/.opencode-mem/.auth-token` (mode `0600`), required via the `x-opencode-mem-token` header on every `/api/*` request in `web-server.ts`. The token is injected into the server-rendered `index.html` (`window.__OPENCODE_MEM_TOKEN__`) so the bundled web UI keeps working transparently (`web/src/lib/api.ts` sends the header), while a malicious cross-origin web page cannot read it (opaque/no-cors responses). The internal `checkServerAvailable()` health-check call was updated to send the token too, so the existing takeover/health-check logic still works.
 
 This does not fully replace a "don't expose to `0.0.0.0` without more" warning — see recommendation below — but it closes the CSRF-style "any web page or generic local process can drive the API" gap the CORS check alone did not.
 
-### 3. HIGH — Stored XSS via unescaped `profile.displayName` (fixed)
+### 3. HIGH — Stored XSS via unescaped `profile.displayName` (fixed; superseded by React UI)
 
-`renderUserProfile()` in `src/web/app.js` injected `profile.displayName` into `innerHTML` with no `escapeHtml()` call, unlike every other user-influenced field rendered elsewhere in the same file. `displayName` originates from `userNameOverride` in a project's `.opencode/opencode-mem.jsonc`, which is loaded automatically, with no confirmation, whenever that project is opened — so a malicious repo can plant a payload that later executes in the local Web UI when the profile tab is viewed, with same-origin `fetch()` access to the (now-authenticated, but still same-origin) API.
+Historically, `renderUserProfile()` in the vanilla UI injected `profile.displayName` into `innerHTML` with no escaping. `displayName` originates from `userNameOverride` in a project's `.opencode/opencode-mem.jsonc`.
 
-The existing `tests/web-memorytype-xss.test.ts` covers a different field (`memoryType`) that was already escaped correctly; it did not cover this sink.
+**Current mitigation:** React JSX text nodes auto-escape; shared `escapeHtml()` in `web/src/lib/html.ts` covers any HTML string sinks. Markdown content goes through DOMPurify. Regression tests: `tests/web-userprofile-xss.test.ts`, `tests/web-memorytype-xss.test.ts`.
 
-**Fix:** wrapped the value in `escapeHtml()`. Regression test: `tests/web-userprofile-xss.test.ts` (fails against the pre-fix code, passes after).
+### 4. MEDIUM — Unpinned, non-SRI third-party scripts (fixed by bundling)
 
-### 4. MEDIUM — Unpinned, non-SRI third-party scripts (not fixed — recommendation only)
+Historically, the vanilla `index.html` loaded scripts from CDNs (`unpkg` / `jsdelivr`) without SRI.
 
-`src/web/index.html` loads `lucide@latest` and `jsonrepair@latest` (no version pin) plus two pinned-but-no-`integrity` scripts from `unpkg.com`/`cdn.jsdelivr.net`. Recommend pinning exact versions and adding Subresource Integrity hashes, or self-hosting alongside the already-vendored `app.js`/`i18n.js`/`styles.css`.
+**Current mitigation:** UI dependencies are installed and bundled by Vite into `dist/web` (no runtime CDN scripts).
 
 ### 5. LOW / informational — Gemini API key in URL query string (not fixed)
 
@@ -46,11 +48,9 @@ The existing `tests/web-memorytype-xss.test.ts` covers a different field (`memor
 
 ## Remaining recommendations (not implemented in this patch)
 
-- Pin and add SRI to the CDN-loaded scripts in `src/web/index.html` (Finding 4).
 - Consider warning (or refusing) at startup when `webServerHost` is set to a non-loopback address without additional network-level protection, since the token-based fix here raises the bar but a determined local/LAN attacker who can read `~/.opencode-mem/.auth-token` (or intercept the injected `<script>` in `index.html` over the LAN) still obtains it.
-- Broader sweep of `src/web/app.js` for any other unescaped `innerHTML` sinks beyond the ones checked here, the same way `web-memorytype-xss.test.ts` covered `memoryType`.
 
 ## Verification performed
 
 - `bun install && bunx tsc --noEmit` — no type errors introduced.
-- `bun test` — all pre-existing passing tests remain green; the two new regression test files (7 test cases) pass against the patched code and were confirmed to fail against the pre-patch code. Unrelated failures in this sandbox (`EPERM` on `~/.opencode-mem/opencode-mem.log`, and `dist/plugin.js`-dependent tests requiring `bun run build`) are pre-existing environment conditions, not caused by this patch — verified by running the full suite on an unpatched `git stash` checkout, which showed the same failures.
+- `bun test` — all pre-existing passing tests remain green; the two new regression test files pass against the patched code and were confirmed to fail against the pre-patch code. Unrelated failures in this sandbox (`EPERM` on `~/.opencode-mem/opencode-mem.log`, and `dist/plugin.js`-dependent tests requiring `bun run build`) are pre-existing environment conditions, not caused by this patch — verified by running the full suite on an unpatched `git stash` checkout, which showed the same failures.
diff --git a/bun.lock b/bun.lock
index 3be9b8f5..c29d7406 100644
--- a/bun.lock
+++ b/bun.lock
@@ -10,6 +10,7 @@
         "@opencode-ai/plugin": "^1.18.4",
         "@opencode-ai/sdk": "^1.18.4",
         "franc-min": "^6.2.0",
+        "hono": "^4.12.32",
         "iso-639-3": "^3.0.1",
         "zod": "^4.4.3",
       },
@@ -244,6 +245,8 @@
 
     "has-property-descriptors": ["has-property-descriptors@1.0.2", "", { "dependencies": { "es-define-property": "^1.0.0" } }, "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg=="],
 
+    "hono": ["hono@4.12.32", "", {}, "sha512-XcuyW9qE2kJn07PkecMOBd5Vq/hMy7mmGw+idz1yblbg9N17ijJODrvPkn7/dwL3Kulj8LcRJ69DLOWf91dRUg=="],
+
     "husky": ["husky@9.1.7", "", { "bin": { "husky": "bin.js" } }, "sha512-5gs5ytaNjBrh5Ow3zrvdUUY+0VxIuWVL4i9irt6friV+BqdCfmV11CQTWMiBYWHbXhco+J1kHfTOUkePhCDvMA=="],
 
     "ini": ["ini@7.0.0", "", {}, "sha512-ifK0CgjALofS5bkrcTy4RaQ9Vx2Knf/eLeIO+NaswQEpH1UblrtTSCIvN71qQDMq0PeQ/SSPojvEJp9vvvfr+w=="],
diff --git a/package.json b/package.json
index 7d1b01e1..864be49b 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,14 @@
     }
   },
   "scripts": {
-    "build": "rm -rf dist && bunx tsc && bun scripts/copy-web-assets.mjs",
+    "build": "rm -rf dist && bunx tsc && bun run web:build",
+    "web:dev": "cd web && bun run dev",
+    "web:build": "cd web && bun run build",
     "dev": "tsc --watch",
     "test": "bun test",
     "typecheck": "tsc --noEmit",
-    "format": "prettier --write \"src/**/*.{ts,js,css,html}\"",
-    "format:check": "prettier --check \"src/**/*.{ts,js,css,html}\"",
+    "format": "prettier --write \"src/**/*.{ts,js,css,html}\" \"web/src/**/*.{ts,tsx,js,jsx,css,html}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,js,css,html}\" \"web/src/**/*.{ts,tsx,js,jsx,css,html}\"",
     "prepare": "husky"
   },
   "keywords": [
@@ -53,6 +55,7 @@
     "@opencode-ai/plugin": "^1.18.4",
     "@opencode-ai/sdk": "^1.18.4",
     "franc-min": "^6.2.0",
+    "hono": "^4.12.32",
     "iso-639-3": "^3.0.1",
     "zod": "^4.4.3"
   },
diff --git a/scripts/copy-web-assets.mjs b/scripts/copy-web-assets.mjs
deleted file mode 100644
index 3b7948b4..00000000
--- a/scripts/copy-web-assets.mjs
+++ /dev/null
@@ -1,4 +0,0 @@
-import { cpSync, mkdirSync } from "node:fs";
-
-mkdirSync("dist/web", { recursive: true });
-cpSync("src/web", "dist/web", { recursive: true });
diff --git a/src/services/web-server.ts b/src/services/web-server.ts
index 13da40b2..9fceb8f8 100644
--- a/src/services/web-server.ts
+++ b/src/services/web-server.ts
@@ -1,7 +1,7 @@
-import { readFileSync } from "node:fs";
+import { existsSync, readFileSync } from "node:fs";
 import { createServer, type IncomingMessage, type ServerResponse } from "node:http";
 import { Readable } from "node:stream";
-import { join, dirname } from "node:path";
+import { join, dirname, extname, normalize, sep } from "node:path";
 import { fileURLToPath } from "node:url";
 import { log } from "./logger.js";
 import { corsPreflightResponse, disallowedCorsResponse, isAllowedBrowserOrigin } from "./cors.js";
@@ -369,22 +369,21 @@ export class WebServer {
         return this.serveStaticFile("index.html", "text/html");
       }
 
-      if (path === "/styles.css") {
-        return this.serveStaticFile("styles.css", "text/css");
-      }
-
-      if (path === "/app.js") {
-        return this.serveStaticFile("app.js", "application/javascript");
-      }
-
-      if (path === "/i18n.js") {
-        return this.serveStaticFile("i18n.js", "application/javascript");
-      }
-
       if (path === "/favicon.ico") {
         return this.serveStaticFile("favicon.ico", "image/x-icon");
       }
 
+      // Vite production assets (hashed JS/CSS/fonts) and other static files.
+      if (method === "GET" && !path.startsWith("/api/")) {
+        const relative = path.replace(/^\/+/, "");
+        if (relative && !relative.includes("..")) {
+          const staticResponse = this.serveStaticFile(relative, this.contentTypeFor(relative));
+          if (staticResponse.status !== 404) {
+            return staticResponse;
+          }
+        }
+      }
+
       if (path === "/api/tags" && method === "GET") {
         const result = await handleListTags();
         return this.jsonResponse(result);
@@ -585,6 +584,11 @@ export class WebServer {
         return this.jsonResponse(result);
       }
 
+      // SPA fallback for client routes (e.g. /profile) — serve the app shell.
+      if (method === "GET" && !path.startsWith("/api/") && !extname(path)) {
+        return this.serveStaticFile("index.html", "text/html");
+      }
+
       return new Response("Not Found", { status: 404 });
     } catch (error) {
       return this.jsonResponse(
@@ -597,24 +601,82 @@ export class WebServer {
     }
   }
 
+  private contentTypeFor(filename: string): string {
+    switch (extname(filename).toLowerCase()) {
+      case ".html":
+        return "text/html";
+      case ".js":
+      case ".mjs":
+        return "application/javascript";
+      case ".css":
+        return "text/css";
+      case ".ico":
+        return "image/x-icon";
+      case ".svg":
+        return "image/svg+xml";
+      case ".png":
+        return "image/png";
+      case ".jpg":
+      case ".jpeg":
+        return "image/jpeg";
+      case ".woff":
+        return "font/woff";
+      case ".woff2":
+        return "font/woff2";
+      case ".ttf":
+        return "font/ttf";
+      case ".json":
+        return "application/json";
+      case ".map":
+        return "application/json";
+      default:
+        return "application/octet-stream";
+    }
+  }
+
   private serveStaticFile(filename: string, contentType: string): Response {
     try {
-      const webDir = join(__dirname, "..", "web");
-      const filePath = join(webDir, filename);
+      const webDir = [
+        join(__dirname, "..", "web"),
+        join(__dirname, "..", "..", "dist", "web"),
+      ].find((candidate) => existsSync(candidate));
+      if (!webDir) {
+        return new Response("File not found", { status: 404 });
+      }
 
-      if (contentType.startsWith("image/")) {
+      const filePath = normalize(join(webDir, filename));
+      const normalizedWebDir = normalize(webDir);
+      if (filePath !== normalizedWebDir && !filePath.startsWith(`${normalizedWebDir}${sep}`)) {
+        return new Response("File not found", { status: 404 });
+      }
+      if (!existsSync(filePath)) {
+        return new Response("File not found", { status: 404 });
+      }
+
+      const cacheControl =
+        filename.startsWith("assets/") || contentType.startsWith("font/")
+          ? "public, max-age=31536000, immutable"
+          : contentType.startsWith("image/")
+            ? "public, max-age=86400"
+            : "no-cache";
+
+      if (
+        contentType.startsWith("image/") ||
+        contentType.startsWith("font/") ||
+        contentType === "application/octet-stream"
+      ) {
         const content = readFileSync(filePath);
         return new Response(content, {
           headers: {
             "Content-Type": contentType,
-            "Cache-Control": "public, max-age=86400",
+            "Cache-Control": cacheControl,
           },
         });
       }
 
       let content = readFileSync(filePath, "utf-8");
 
-      if (filename === "index.html") {
+      if (filename === "index.html" || filename.endsWith("/index.html")) {
         const token = getOrCreateAuthToken();
         content = content.replace(
           "</head>",
@@ -625,7 +687,7 @@ export class WebServer {
       return new Response(content, {
         headers: {
           "Content-Type": contentType,
-          "Cache-Control": "no-cache",
+          "Cache-Control": cacheControl,
         },
       });
     } catch (error) {
diff --git a/src/shared/api/index.ts b/src/shared/api/index.ts
new file mode 100644
index 00000000..4d725e37
--- /dev/null
+++ b/src/shared/api/index.ts
@@ -0,0 +1,36 @@
+export {
+  AddMemoryRequestSchema,
+  AICleanupRequestSchema,
+  ApiResultSchema,
+  ApplyCleanupRequestSchema,
+  BulkIdsRequestSchema,
+  CleanupChangesSchema,
+  MemoryItemSchema,
+  PaginatedMemoriesSchema,
+  PendingCleanupSchema,
+  ProfileDataSchema,
+  ProfileItemSchema,
+  TagInfoSchema,
+  UpdateMemoryRequestSchema,
+  UpdateProfileItemRequestSchema,
+  UserProfileSchema,
+} from "./schemas.js";
+
+export type {
+  AddMemoryRequest,
+  AICleanupRequest,
+  ApiResult,
+  ApplyCleanupRequest,
+  BulkIdsRequest,
+  CleanupChanges,
+  MemoryGroup,
+  MemoryItem,
+  PaginatedMemories,
+  PendingCleanup,
+  ProfileData,
+  ProfileItem,
+  TagInfo,
+  UpdateMemoryRequest,
+  UpdateProfileItemRequest,
+  UserProfile,
+} from "./types.js";
diff --git a/src/shared/api/schemas.ts b/src/shared/api/schemas.ts
new file mode 100644
index 00000000..cb3440e1
--- /dev/null
+++ b/src/shared/api/schemas.ts
@@ -0,0 +1,152 @@
+import { z } from "zod";
+
+/** Envelope used by all JSON API responses. */
+export const ApiResultSchema = z.object({
+  success: z.boolean(),
+  data: z.unknown().optional(),
+  error: z.string().optional(),
+  message: z.string().optional(),
+});
+
+export const TagInfoSchema = z.object({
+  tag: z.string(),
+  tags: z.array(z.string()).optional(),
+  displayName: z.string().optional(),
+  userName: z.string().optional(),
+  userEmail: z.string().optional(),
+  projectPath: z.string().optional(),
+  projectName: z.string().optional(),
+  gitRepoUrl: z.string().optional(),
+});
+
+export const MemoryItemSchema = z.object({
+  id: z.string(),
+  type: z.enum(["memory", "prompt"]),
+  content: z.string(),
+  createdAt: z.string(),
+  updatedAt: z.string().optional(),
+  displayName: z.string().optional(),
+  projectPath: z.string().optional(),
+  projectName: z.string().optional(),
+  gitRepoUrl: z.string().optional(),
+  userName: z.string().optional(),
+  userEmail: z.string().optional(),
+  memoryType: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  isPinned: z.boolean().optional(),
+  linkedPromptId: z.string().optional(),
+  linkedMemoryId: z.string().optional(),
+  sessionId: z.string().optional(),
+  similarity: z.number().optional(),
+  isContext: z.boolean().optional(),
+  metadata: z.record(z.string(), z.unknown()).optional(),
+});
+
+export const PaginatedMemoriesSchema = z.object({
+  items: z.array(MemoryItemSchema),
+  total: z.number(),
+  page: z.number(),
+  pageSize: z.number(),
+  totalPages: z.number(),
+});
+
+export const ProfileItemSchema = z.object({
+  category: z.string().optional(),
+  description: z.string().optional(),
+  confidence: z.number().optional(),
+  frequency: z.number().optional(),
+  evidence: z.union([z.array(z.string()), z.string()]).optional(),
+  steps: z.array(z.string()).optional(),
+});
+
+export const ProfileDataSchema = z.object({
+  preferences: z.array(ProfileItemSchema).optional(),
+  patterns: z.array(ProfileItemSchema).optional(),
+  workflows: z.array(ProfileItemSchema).optional(),
+});
+
+export const UserProfileSchema = z.object({
+  exists: z.boolean(),
+  message: z.string().optional(),
+  id: z.string().optional(),
+  userId: z.string().optional(),
+  displayName: z.string().optional(),
+  userName: z.string().optional(),
+  userEmail: z.string().optional(),
+  version: z.number().optional(),
+  totalPromptsAnalyzed: z.number().optional(),
+  lastAnalyzedAt: z.string().optional(),
+  createdAt: z.string().optional(),
+  profileData: ProfileDataSchema.optional(),
+});
+
+export const CleanupChangesSchema = z.object({
+  merged: z
+    .array(
+      z.object({
+        ids: z.array(z.string()),
+        result: z.string().optional(),
+      })
+    )
+    .optional(),
+  removed: z
+    .array(
+      z.object({
+        id: z.string(),
+        reason: z.string(),
+      })
+    )
+    .optional(),
+  kept: z.array(z.string()).optional(),
+});
+
+export const PendingCleanupSchema = z.object({
+  old: ProfileDataSchema.optional(),
+  new: ProfileDataSchema.optional(),
+  changes: CleanupChangesSchema,
+});
+
+export const AICleanupRequestSchema = z.object({
+  userId: z.string().optional(),
+  includeIds: z.array(z.string()).optional(),
+});
+
+export const ApplyCleanupRequestSchema = z.object({
+  userId: z.string().optional(),
+  profile: ProfileDataSchema.optional(),
+  acceptedMerged: z.array(z.array(z.string())).optional(),
+  acceptedRemoved: z.array(z.string()).optional(),
+});
+
+export const UpdateProfileItemRequestSchema = z.object({
+  type: z.enum(["preferences", "patterns", "workflows"]),
+  index: z.number().int().nonnegative(),
+  action: z.enum(["edit", "delete"]),
+  category: z.string().optional(),
+  description: z.string().optional(),
+  steps: z.array(z.string()).optional(),
+});
+
+export const AddMemoryRequestSchema = z.object({
+  content: z.string().min(1),
+  containerTag: z.string().min(1),
+  type: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+  displayName: z.string().optional(),
+  userName: z.string().optional(),
+  userEmail: z.string().optional(),
+  projectPath: z.string().optional(),
+  projectName: z.string().optional(),
+  gitRepoUrl: z.string().optional(),
+});
+
+export const UpdateMemoryRequestSchema = z.object({
+  content: z.string().optional(),
+  type: z.string().optional(),
+  tags: z.array(z.string()).optional(),
+});
+
+export const BulkIdsRequestSchema = z.object({
+  ids: z.array(z.string()).min(1),
+  cascade: z.boolean().optional(),
+});
diff --git a/src/shared/api/types.ts b/src/shared/api/types.ts
new file mode 100644
index 00000000..a66f3a29
--- /dev/null
+++ b/src/shared/api/types.ts
@@ -0,0 +1,43 @@
+import type { z } from "zod";
+import type {
+  AddMemoryRequestSchema,
+  AICleanupRequestSchema,
+  ApiResultSchema,
+  ApplyCleanupRequestSchema,
+  BulkIdsRequestSchema,
+  CleanupChangesSchema,
+  MemoryItemSchema,
+  PaginatedMemoriesSchema,
+  PendingCleanupSchema,
+  ProfileDataSchema,
+  ProfileItemSchema,
+  TagInfoSchema,
+  UpdateMemoryRequestSchema,
+  UpdateProfileItemRequestSchema,
+  UserProfileSchema,
+} from "./schemas.js";
+
+export type ApiResult<T = unknown> = Omit<z.infer<typeof ApiResultSchema>, "data"> & {
+  data?: T;
+};
+
+export type TagInfo = z.infer<typeof TagInfoSchema>;
+export type MemoryItem = z.infer<typeof MemoryItemSchema>;
+export type PaginatedMemories = z.infer<typeof PaginatedMemoriesSchema>;
+
+export type MemoryGroup =
+  | { isPair: true; memory: MemoryItem; prompt: MemoryItem }
+  | { isPair: false; type: "memory" | "prompt"; item: MemoryItem };
+
+export type ProfileItem = z.infer<typeof ProfileItemSchema>;
+export type ProfileData = z.infer<typeof ProfileDataSchema>;
+export type UserProfile = z.infer<typeof UserProfileSchema>;
+export type CleanupChanges = z.infer<typeof CleanupChangesSchema>;
+export type PendingCleanup = z.infer<typeof PendingCleanupSchema>;
+
+export type AICleanupRequest = z.infer<typeof AICleanupRequestSchema>;
+export type ApplyCleanupRequest = z.infer<typeof ApplyCleanupRequestSchema>;
+export type UpdateProfileItemRequest = z.infer<typeof UpdateProfileItemRequestSchema>;
+export type AddMemoryRequest = z.infer<typeof AddMemoryRequestSchema>;
+export type UpdateMemoryRequest = z.infer<typeof UpdateMemoryRequestSchema>;
+export type BulkIdsRequest = z.infer<typeof BulkIdsRequestSchema>;
diff --git a/src/web/app.js b/src/web/app.js
deleted file mode 100644
index 3fa7c2dc..00000000
--- a/src/web/app.js
+++ /dev/null
@@ -1,2022 +0,0 @@
-const API_BASE = "";
-
-function resolveApiToken() {
-  try {
-    const params = new URLSearchParams(window.location.search);
-    const fromQuery = params.get("apiToken") || params.get("token");
-    if (fromQuery) {
-      sessionStorage.setItem("opencode-mem-api-token", fromQuery);
-      return fromQuery;
-    }
-    return sessionStorage.getItem("opencode-mem-api-token") || "";
-  } catch {
-    return "";
-  }
-}
-
-const API_TOKEN = resolveApiToken();
-
-const state = {
-  tags: { project: [] },
-  memories: [],
-  currentPage: 1,
-  pageSize: 20,
-  totalPages: 1,
-  totalItems: 0,
-  selectedTag: "",
-  currentView: "project",
-  searchQuery: "",
-  isSearching: false,
-  selectedMemories: new Set(),
-  autoRefreshInterval: null,
-  userProfile: null,
-  profilePages: { pref: 1, pat: 1, wf: 1 },
-};
-
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-  headerIds: false,
-  mangle: false,
-});
-
-function renderMarkdown(markdown) {
-  const html = marked.parse(markdown);
-  return DOMPurify.sanitize(html);
-}
-
-async function fetchAPI(endpoint, options = {}) {
-  try {
-    const controller = new AbortController();
-    const timeoutMs =
-      options.timeout ||
-      (options.method === "POST" && endpoint.includes("/ai-cleanup") ? 300000 : 60000);
-    const { timeout: _, headers: extraHeaders, ...fetchOptions } = options;
-    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
-    const headers = new Headers(extraHeaders || {});
-    if (API_TOKEN) {
-      headers.set("Authorization", `Bearer ${API_TOKEN}`);
-      headers.set("X-Opencode-Mem-Token", API_TOKEN);
-    }
-    if (window.__OPENCODE_MEM_TOKEN__) {
-      headers.set("X-Opencode-Mem-Token", window.__OPENCODE_MEM_TOKEN__);
-    }
-    const response = await fetch(API_BASE + endpoint, {
-      ...fetchOptions,
-      headers,
-      signal: controller.signal,
-    });
-    clearTimeout(timeoutId);
-    const data = await response.json();
-    return data;
-  } catch (error) {
-    console.error("API Error:", error);
-    return { success: false, error: error.message };
-  }
-}
-
-async function loadTags() {
-  const result = await fetchAPI("/api/tags");
-  if (result.success) {
-    state.tags = result.data;
-    populateTagDropdowns();
-  }
-}
-
-function populateTagDropdowns() {
-  const tagFilter = document.getElementById("tag-filter");
-  const addTag = document.getElementById("add-tag");
-
-  tagFilter.innerHTML = `<option value="">${t("opt-all-tags")}</option>`;
-  addTag.innerHTML = `<option value="">${t("opt-select-tag")}</option>`;
-
-  const scopeTags = state.tags.project;
-
-  scopeTags.forEach((tagInfo) => {
-    const displayText = tagInfo.displayName || tagInfo.tag;
-    const shortDisplay =
-      displayText.length > 50 ? displayText.substring(0, 50) + "..." : displayText;
-
-    const option1 = document.createElement("option");
-    option1.value = tagInfo.tag;
-    option1.textContent = shortDisplay;
-    tagFilter.appendChild(option1);
-
-    const option2 = document.createElement("option");
-    option2.value = tagInfo.tag;
-    option2.textContent = shortDisplay;
-    addTag.appendChild(option2);
-  });
-}
-
-function renderMemories() {
-  const container = document.getElementById("memories-list");
-
-  if (state.memories.length === 0) {
-    container.innerHTML = `<div class="empty-state">${t("empty-memories")}</div>`;
-    return;
-  }
-
-  container.innerHTML = groupMemories(state.memories)
-    .map((group) => {
-      if (group.isPair) {
-        return renderCombinedCard(group);
-      } else if (group.type === "prompt") {
-        return renderPromptCard(group.item);
-      } else {
-        return renderMemoryCard(group.item);
-      }
-    })
-    .join("");
-
-  document.querySelectorAll(".memory-checkbox").forEach((checkbox) => {
-    checkbox.addEventListener("change", handleCheckboxChange);
-  });
-
-  lucide.createIcons();
-}
-
-function groupMemories(items) {
-  const map = new Map();
-  const pairs = [];
-  const processed = new Set();
-
-  items.forEach((item) => map.set(item.id, item));
-
-  items.forEach((item) => {
-    if (processed.has(item.id)) return;
-
-    if (item.type === "memory" && item.linkedPromptId && map.has(item.linkedPromptId)) {
-      const prompt = map.get(item.linkedPromptId);
-      pairs.push({ isPair: true, memory: item, prompt: prompt });
-      processed.add(item.id);
-      processed.add(prompt.id);
-    } else if (item.type === "prompt" && item.linkedMemoryId && map.has(item.linkedMemoryId)) {
-      const memory = map.get(item.linkedMemoryId);
-      pairs.push({ isPair: true, memory: memory, prompt: item });
-      processed.add(item.id);
-      processed.add(memory.id);
-    } else {
-      pairs.push({ isPair: false, type: item.type, item: item });
-      processed.add(item.id);
-    }
-  });
-
-  return pairs.sort((a, b) => {
-    const timeA = a.isPair ? a.memory.createdAt : a.item.createdAt;
-    const timeB = b.isPair ? b.memory.createdAt : b.item.createdAt;
-    return new Date(timeB) - new Date(timeA);
-  });
-}
-
-function renderCombinedCard(pair) {
-  const { memory, prompt } = pair;
-  const isSelected = state.selectedMemories.has(memory.id);
-  const isPinned = memory.isPinned || false;
-  const similarityHtml =
-    memory.similarity !== undefined
-      ? `<span class="similarity-score">${Math.round(memory.similarity * 100)}%</span>`
-      : "";
-
-  const tagsHtml =
-    memory.tags && memory.tags.length > 0
-      ? `<div class="tags-list">${memory.tags.map((t) => `<span class="tag-badge">${escapeHtml(t)}</span>`).join("")}</div>`
-      : "";
-
-  const pinButton = isPinned
-    ? `<button class="btn-pin pinned" onclick="unpinMemory('${memory.id}')" title="Unpin"><i data-lucide="pin" class="icon icon-filled"></i></button>`
-    : `<button class="btn-pin" onclick="pinMemory('${memory.id}')" title="Pin"><i data-lucide="pin" class="icon"></i></button>`;
-
-  const createdDate = formatDate(memory.createdAt);
-  const updatedDate =
-    memory.updatedAt && memory.updatedAt !== memory.createdAt ? formatDate(memory.updatedAt) : null;
-
-  const dateInfo = updatedDate
-    ? `<span>${t("date-created")} ${createdDate}</span><span>${t("date-updated")} ${updatedDate}</span>`
-    : `<span>${t("date-created")} ${createdDate}</span>`;
-  return `
-    <div class="combined-card ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}" data-id="${memory.id}">
-      <div class="combined-prompt-section">
-        <div class="combined-header">
-          <span class="badge badge-prompt">${t("badge-prompt")}</span>
-          <span class="prompt-date">${formatDate(prompt.createdAt)}</span>
-        </div>
-        <div class="prompt-content">${escapeHtml(prompt.content)}</div>
-      </div>
-      
-      <div class="combined-divider">
-        <i data-lucide="arrow-down" class="divider-icon"></i>
-      </div>
-
-      <div class="combined-memory-section">
-        <div class="memory-header">
-          <div class="meta">
-            <input type="checkbox" class="memory-checkbox" data-id="${memory.id}" ${isSelected ? "checked" : ""} />
-            <span class="badge badge-memory">${t("badge-memory")}</span>
-            ${memory.memoryType ? `<span class="badge badge-type">${escapeHtml(memory.memoryType)}</span>` : ""}
-            ${similarityHtml}
-            ${isPinned ? `<span class="badge badge-pinned">${t("badge-pinned")}</span>` : ""}
-            <span class="memory-display-name">${escapeHtml(memory.displayName || memory.id)}</span>
-          </div>
-          <div class="memory-actions">
-            ${pinButton}
-            <button class="btn-edit" onclick="editMemory('${memory.id}')"><i data-lucide="edit-3" class="icon"></i></button>
-            <button class="btn-delete" onclick="deleteMemoryWithLink('${memory.id}', true)">
-              <i data-lucide="trash-2" class="icon"></i> ${t("btn-delete-pair")}
-            </button>
-          </div>
-        </div>
-        ${tagsHtml}
-        <div class="memory-content markdown-content">${renderMarkdown(memory.content)}</div>
-        <div class="memory-footer">
-          ${dateInfo}
-          <span>ID: ${memory.id}</span>
-        </div>
-      </div>
-    </div>
-  `;
-}
-
-function renderPromptCard(prompt) {
-  const isLinked = !!prompt.linkedMemoryId;
-  const isSelected = state.selectedMemories.has(prompt.id);
-  const promptDate = formatDate(prompt.createdAt);
-
-  return `
-    <div class="prompt-card ${isSelected ? "selected" : ""}" data-id="${prompt.id}">
-      <div class="prompt-header">
-        <div class="meta">
-          <input type="checkbox" class="memory-checkbox" data-id="${prompt.id}" ${isSelected ? "checked" : ""} />
-          <i data-lucide="message-circle" class="icon"></i>
-          <span class="badge badge-prompt">${t("badge-prompt")}</span>
-          ${isLinked ? `<span class="badge badge-linked"><i data-lucide="link" class="icon-sm"></i> ${t("badge-linked")}</span>` : ""}
-          <span class="prompt-date">${promptDate}</span>
-        </div>
-        <div class="prompt-actions">
-          <button class="btn-delete" onclick="deletePromptWithLink('${prompt.id}', ${isLinked})">
-            <i data-lucide="trash-2" class="icon"></i>
-            ${isLinked ? t("btn-delete-pair") : t("btn-delete")}
-          </button>
-        </div>
-      </div>
-      <div class="prompt-content">
-        ${escapeHtml(prompt.content)}
-      </div>
-      ${isLinked ? `<div class="link-indicator"><i data-lucide="arrow-down" class="icon-sm"></i> ${t("text-generated-above")} <i data-lucide="arrow-up" class="icon-sm"></i></div>` : ""}
-    </div>
-  `;
-}
-
-function renderMemoryCard(memory) {
-  const isSelected = state.selectedMemories.has(memory.id);
-  const isPinned = memory.isPinned || false;
-  const isLinked = !!memory.linkedPromptId;
-  const similarityHtml =
-    memory.similarity !== undefined
-      ? `<span class="similarity-score">${memory.similarity}%</span>`
-      : "";
-
-  let displayInfo = memory.displayName || memory.id;
-  if (memory.projectPath) {
-    const pathParts = memory.projectPath
-      .replace(/\\/g, "/")
-      .split("/")
-      .filter((p) => p);
-    displayInfo = pathParts[pathParts.length - 1] || memory.projectPath;
-  }
-
-  let subtitle = "";
-  if (memory.projectPath) {
-    subtitle = `<span class="memory-subtitle">${escapeHtml(memory.projectPath)}</span>`;
-  }
-
-  const pinButton = isPinned
-    ? `<button class="btn-pin pinned" onclick="unpinMemory('${memory.id}')" title="Unpin"><i data-lucide="pin" class="icon icon-filled"></i></button>`
-    : `<button class="btn-pin" onclick="pinMemory('${memory.id}')" title="Pin"><i data-lucide="pin" class="icon"></i></button>`;
-
-  const createdDate = formatDate(memory.createdAt);
-  const updatedDate =
-    memory.updatedAt && memory.updatedAt !== memory.createdAt ? formatDate(memory.updatedAt) : null;
-
-  const dateInfo = updatedDate
-    ? `<span>${t("date-created")} ${createdDate}</span><span>${t("date-updated")} ${updatedDate}</span>`
-    : `<span>${t("date-created")} ${createdDate}</span>`;
-  const tagsHtml =
-    memory.tags && memory.tags.length > 0
-      ? `<div class="tags-list">${memory.tags.map((t) => `<span class="tag-badge">${escapeHtml(t)}</span>`).join("")}</div>`
-      : "";
-
-  return `
-    <div class="memory-card ${isSelected ? "selected" : ""} ${isPinned ? "pinned" : ""}" data-id="${memory.id}">
-      <div class="memory-header">
-        <div class="meta">
-          <input type="checkbox" class="memory-checkbox" data-id="${memory.id}" ${isSelected ? "checked" : ""} />
-          ${memory.memoryType ? `<span class="badge badge-type">${escapeHtml(memory.memoryType)}</span>` : ""}
-          ${isLinked ? `<span class="badge badge-linked"><i data-lucide="link" class="icon-sm"></i> ${t("badge-linked")}</span>` : ""}
-          ${similarityHtml}
-          ${isPinned ? `<span class="badge badge-pinned">${t("badge-pinned")}</span>` : ""}
-          <span class="memory-display-name">${escapeHtml(displayInfo)}</span>
-          ${subtitle}
-        </div>
-        <div class="memory-actions">
-          ${pinButton}
-          <button class="btn-edit" onclick="editMemory('${memory.id}')"><i data-lucide="edit-3" class="icon"></i></button>
-          <button class="btn-delete" onclick="deleteMemoryWithLink('${memory.id}', ${isLinked})">
-            <i data-lucide="trash-2" class="icon"></i>
-            ${isLinked ? t("btn-delete-pair") : t("btn-delete")}
-          </button>
-        </div>
-      </div>
-      ${tagsHtml}
-      <div class="memory-content markdown-content">${renderMarkdown(memory.content)}</div>
-      ${isLinked ? `<div class="link-indicator"><i data-lucide="arrow-up" class="icon-sm"></i> ${t("text-from-below")} <i data-lucide="arrow-down" class="icon-sm"></i></div>` : ""}
-      <div class="memory-footer">
-        ${dateInfo}
-        <span>ID: ${memory.id}</span>
-      </div>
-    </div>
-  `;
-}
-
-function handleCheckboxChange(e) {
-  const id = e.target.dataset.id;
-  if (e.target.checked) {
-    state.selectedMemories.add(id);
-  } else {
-    state.selectedMemories.delete(id);
-  }
-  updateBulkActions();
-  updateCardSelection(id, e.target.checked);
-}
-
-function updateCardSelection(id, selected) {
-  const card = document.querySelector(
-    `.memory-card[data-id="${id}"], .prompt-card[data-id="${id}"]`
-  );
-  if (card) {
-    if (selected) {
-      card.classList.add("selected");
-    } else {
-      card.classList.remove("selected");
-    }
-  }
-}
-
-function updateBulkActions() {
-  const bulkActions = document.getElementById("bulk-actions");
-  const selectedCount = document.getElementById("selected-count");
-
-  if (state.selectedMemories.size > 0) {
-    bulkActions.classList.remove("hidden");
-    selectedCount.textContent = t("text-selected", { count: state.selectedMemories.size });
-  } else {
-    bulkActions.classList.add("hidden");
-  }
-}
-
-function updatePagination() {
-  const pageInfo = t("text-page", { current: state.currentPage, total: state.totalPages });
-  document.getElementById("page-info-top").textContent = pageInfo;
-  document.getElementById("page-info-bottom").textContent = pageInfo;
-  const hasPrev = state.currentPage > 1;
-  const hasNext = state.currentPage < state.totalPages;
-
-  document.getElementById("prev-page-top").disabled = !hasPrev;
-  document.getElementById("next-page-top").disabled = !hasNext;
-  document.getElementById("prev-page-bottom").disabled = !hasPrev;
-  document.getElementById("next-page-bottom").disabled = !hasNext;
-}
-
-function updateSectionTitle() {
-  const title = state.isSearching
-    ? `└─ SEARCH RESULTS (${state.totalItems}) ──`
-    : t("section-project", { count: state.totalItems });
-  document.getElementById("section-title").textContent = title;
-}
-
-async function loadStats() {
-  const result = await fetchAPI("/api/stats");
-  if (result.success) {
-    document.getElementById("stats-total").textContent = t("text-total", {
-      count: result.data.total,
-    });
-  }
-}
-
-async function addMemory(e) {
-  e.preventDefault();
-
-  const content = document.getElementById("add-content").value.trim();
-  const containerTag = document.getElementById("add-tag").value;
-  const type = document.getElementById("add-type").value;
-  const tagsStr = document.getElementById("add-tags").value.trim();
-  const tags = tagsStr
-    ? tagsStr
-        .split(",")
-        .map((t) => t.trim())
-        .filter((t) => t)
-    : [];
-
-  if (!content || !containerTag) {
-    showToast(t("toast-add-error"), "error");
-    return;
-  }
-
-  const result = await fetchAPI("/api/memories", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ content, containerTag, type: type || undefined, tags }),
-  });
-
-  if (result.success) {
-    showToast(t("toast-add-success"), "success");
-    document.getElementById("add-form").reset();
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-add-failed"), "error");
-  }
-}
-
-async function loadMemories() {
-  showRefreshIndicator(true);
-
-  let endpoint = `/api/memories?page=${state.currentPage}&pageSize=${state.pageSize}&includePrompts=true`;
-
-  if (state.isSearching) {
-    endpoint = `/api/search?q=${encodeURIComponent(state.searchQuery || "")}&page=${state.currentPage}&pageSize=${state.pageSize}`;
-    if (state.selectedTag) {
-      endpoint += `&tag=${encodeURIComponent(state.selectedTag)}`;
-    }
-  } else {
-    if (state.selectedTag) {
-      endpoint += `&tag=${encodeURIComponent(state.selectedTag)}`;
-    }
-  }
-
-  const result = await fetchAPI(endpoint);
-
-  showRefreshIndicator(false);
-
-  if (result.success) {
-    state.memories = result.data.items;
-    state.totalPages = result.data.totalPages;
-    state.totalItems = result.data.total;
-    state.currentPage = result.data.page;
-
-    renderMemories();
-    updatePagination();
-    updateSectionTitle();
-  } else {
-    showError(result.error || t("toast-update-failed"));
-  }
-}
-
-async function deleteMemoryWithLink(id, isLinked) {
-  const message = isLinked ? t("confirm-delete-pair") : t("confirm-delete");
-  if (!confirm(message)) return;
-
-  const result = await fetchAPI(`/api/memories/${id}?cascade=true`, {
-    method: "DELETE",
-  });
-
-  if (result.success) {
-    showToast(t("toast-delete-success"), "success");
-
-    state.selectedMemories.delete(id);
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-delete-failed"), "error");
-  }
-}
-
-async function deletePromptWithLink(id, isLinked) {
-  const message = isLinked ? t("confirm-delete-prompt") : t("confirm-delete");
-  if (!confirm(message)) return;
-
-  const result = await fetchAPI(`/api/prompts/${id}?cascade=true`, {
-    method: "DELETE",
-  });
-
-  if (result.success) {
-    showToast(t("toast-delete-success"), "success");
-
-    state.selectedMemories.delete(id);
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-delete-failed"), "error");
-  }
-}
-
-async function bulkDelete() {
-  if (state.selectedMemories.size === 0) return;
-
-  const message = t("confirm-bulk-delete", { count: state.selectedMemories.size });
-  if (!confirm(message)) return;
-
-  const ids = Array.from(state.selectedMemories);
-
-  const promptIds = ids.filter((id) => id.startsWith("prompt_"));
-  const memoryIds = ids.filter((id) => !id.startsWith("prompt_"));
-
-  let deletedCount = 0;
-
-  if (promptIds.length > 0) {
-    const result = await fetchAPI("/api/prompts/bulk-delete", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ ids: promptIds, cascade: true }),
-    });
-    if (result.success) deletedCount += result.data.deleted;
-  }
-
-  if (memoryIds.length > 0) {
-    const result = await fetchAPI("/api/memories/bulk-delete", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ ids: memoryIds, cascade: true }),
-    });
-    if (result.success) deletedCount += result.data.deleted;
-  }
-
-  showToast(t("toast-bulk-delete-success"), "success");
-  state.selectedMemories.clear();
-  await loadMemories();
-  await loadStats();
-  updateBulkActions();
-}
-
-function deselectAll() {
-  state.selectedMemories.clear();
-  document.querySelectorAll(".memory-checkbox").forEach((cb) => (cb.checked = false));
-  document
-    .querySelectorAll(".memory-card, .prompt-card")
-    .forEach((card) => card.classList.remove("selected"));
-  updateBulkActions();
-}
-
-function selectAllCurrentPage() {
-  const checkboxes = document.querySelectorAll(".memory-checkbox");
-  if (checkboxes.length === 0) return;
-
-  checkboxes.forEach((cb) => {
-    cb.checked = true;
-    if (cb.dataset.id) {
-      state.selectedMemories.add(cb.dataset.id);
-      updateCardSelection(cb.dataset.id, true);
-    }
-  });
-
-  updateBulkActions();
-}
-
-function editMemory(id) {
-  const memory = state.memories.find((m) => m.id === id && m.type === "memory");
-  if (!memory) return;
-
-  document.getElementById("edit-id").value = memory.id;
-  document.getElementById("edit-content").value = memory.content;
-
-  document.getElementById("edit-modal").classList.remove("hidden");
-}
-
-async function saveEdit(e) {
-  e.preventDefault();
-
-  const id = document.getElementById("edit-id").value;
-  const content = document.getElementById("edit-content").value.trim();
-
-  if (!content) {
-    showToast(t("toast-add-error"), "error");
-    return;
-  }
-
-  const result = await fetchAPI(`/api/memories/${id}`, {
-    method: "PUT",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ content }),
-  });
-
-  if (result.success) {
-    showToast(t("toast-update-success"), "success");
-    closeModal();
-    await loadMemories();
-  } else {
-    showToast(result.error || t("toast-update-failed"), "error");
-  }
-}
-
-function closeModal() {
-  document.getElementById("edit-modal").classList.add("hidden");
-}
-
-function performSearch() {
-  const query = document.getElementById("search-input").value.trim();
-
-  if (!query) {
-    clearSearch();
-    return;
-  }
-
-  state.searchQuery = query;
-  state.isSearching = true;
-  state.currentPage = 1;
-
-  document.getElementById("clear-search-btn").classList.remove("hidden");
-
-  loadMemories();
-}
-
-function clearSearch() {
-  state.searchQuery = "";
-  state.isSearching = false;
-  state.currentPage = 1;
-
-  document.getElementById("search-input").value = "";
-  document.getElementById("clear-search-btn").classList.add("hidden");
-
-  loadMemories();
-}
-
-function changePage(delta) {
-  const newPage = state.currentPage + delta;
-  if (newPage < 1 || newPage > state.totalPages) return;
-
-  state.currentPage = newPage;
-  loadMemories();
-}
-
-function showToast(message, type = "success") {
-  const toast = document.getElementById("toast");
-  toast.textContent = message;
-  toast.className = `toast ${type}`;
-  toast.classList.remove("hidden");
-
-  setTimeout(() => {
-    toast.classList.add("hidden");
-  }, 3000);
-}
-
-function showError(message) {
-  const container = document.getElementById("memories-list");
-  container.innerHTML = `<div class="error-state">Error: ${escapeHtml(message)}</div>`;
-}
-
-function showRefreshIndicator(show) {
-  const indicator = document.getElementById("refresh-indicator");
-  if (show) {
-    indicator.classList.remove("hidden");
-  } else {
-    indicator.classList.add("hidden");
-  }
-}
-
-function formatDate(isoString) {
-  const date = new Date(isoString);
-  const lang = getLanguage();
-  const locale = lang === "zh" ? "zh-CN" : lang === "ar" ? "ar-SA" : "en-US";
-  return date.toLocaleString(locale, {
-    year: "numeric",
-    month: "short",
-    day: "numeric",
-    hour: "2-digit",
-    minute: "2-digit",
-  });
-}
-
-async function pinMemory(id) {
-  const result = await fetchAPI(`/api/memories/${id}/pin`, { method: "POST" });
-
-  if (result.success) {
-    showToast(t("toast-update-success"), "success");
-    await loadMemories();
-  } else {
-    showToast(result.error || t("toast-update-failed"), "error");
-  }
-}
-
-async function unpinMemory(id) {
-  const result = await fetchAPI(`/api/memories/${id}/unpin`, { method: "POST" });
-
-  if (result.success) {
-    showToast(t("toast-update-success"), "success");
-    await loadMemories();
-  } else {
-    showToast(result.error || t("toast-update-failed"), "error");
-  }
-}
-
-async function runCleanup() {
-  if (!confirm(t("confirm-cleanup"))) return;
-
-  showToast(t("status-cleanup"), "info");
-  const result = await fetchAPI("/api/cleanup", { method: "POST" });
-
-  if (result.success) {
-    showToast(t("toast-cleanup-success"), "success");
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-cleanup-failed"), "error");
-  }
-}
-
-async function runDeduplication() {
-  if (!confirm(t("confirm-dedup"))) return;
-
-  showToast(t("status-dedup"), "info");
-  const result = await fetchAPI("/api/deduplicate", { method: "POST" });
-
-  if (result.success) {
-    showToast(t("toast-dedup-success"), "success");
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-dedup-failed"), "error");
-  }
-}
-
-function startAutoRefresh() {
-  if (state.autoRefreshInterval) {
-    clearInterval(state.autoRefreshInterval);
-  }
-
-  state.autoRefreshInterval = setInterval(() => {
-    loadStats();
-    if (!state.isSearching) {
-      loadMemories();
-    }
-  }, 30000);
-}
-
-async function checkMigrationStatus() {
-  const result = await fetchAPI("/api/migration/detect");
-  if (result.success && result.data.needsMigration) {
-    showMigrationWarning(result.data);
-  }
-
-  const tagResult = await fetchAPI("/api/migration/tags/detect");
-  if (tagResult.success && tagResult.data.needsMigration) {
-    showTagMigrationModal(tagResult.data.count);
-  }
-}
-
-function showTagMigrationModal(count) {
-  const overlay = document.getElementById("tag-migration-overlay");
-  const status = document.getElementById("tag-migration-status");
-  status.textContent = t("migration-found-tags", { count });
-
-  document.getElementById("start-tag-migration-btn").onclick = runTagMigration;
-}
-
-async function runTagMigration() {
-  const actions = document.getElementById("tag-migration-actions");
-  const status = document.getElementById("tag-migration-status");
-  const progress = document.getElementById("tag-migration-progress");
-
-  actions.classList.add("hidden");
-  status.textContent = t("status-migration-init");
-  progress.style.width = "0%";
-
-  let totalProcessed = 0;
-  let hasMore = true;
-  let attempts = 0;
-  const maxAttempts = 1000;
-
-  while (hasMore && attempts < maxAttempts) {
-    attempts++;
-    const result = await fetchAPI("/api/migration/tags/run-batch", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({ batchSize: 3 }),
-    });
-
-    if (!result.success) {
-      status.textContent = t("toast-migration-failed") + ": " + result.error;
-      return;
-    }
-
-    totalProcessed = result.data.processed;
-    hasMore = result.data.hasMore;
-    const total = result.data.total;
-    const percent = total > 0 ? Math.round((totalProcessed / total) * 100) : 0;
-
-    progress.style.width = percent + "%";
-    status.textContent = t("status-migration-progress", { current: totalProcessed, total: total });
-    if (hasMore) {
-      await new Promise((resolve) => setTimeout(resolve, 100));
-    }
-  }
-
-  if (attempts >= maxAttempts) {
-    status.textContent = t("migration-stopped");
-    return;
-  }
-
-  progress.style.width = "100%";
-  status.textContent = t("toast-migration-success");
-  showToast(t("toast-migration-success"), "success");
-  setTimeout(() => {
-    document.getElementById("tag-migration-overlay").classList.add("hidden");
-    loadMemories();
-    loadStats();
-  }, 2000);
-}
-
-function showMigrationWarning(data) {
-  const section = document.getElementById("migration-section");
-  const message = document.getElementById("migration-message");
-
-  const shardInfo =
-    data.shardMismatches.length > 0
-      ? t("migration-shards-mismatch", { count: data.shardMismatches.length })
-      : t("migration-dimension-mismatch");
-
-  message.textContent = t("migration-mismatch-details", {
-    configDimensions: data.configDimensions,
-    configModel: data.configModel,
-    shardInfo,
-  });
-
-  lucide.createIcons();
-}
-
-function toggleMigrationButtons() {
-  const checkbox = document.getElementById("migration-confirm-checkbox");
-  const freshBtn = document.getElementById("migration-fresh-btn");
-  const reembedBtn = document.getElementById("migration-reembed-btn");
-
-  freshBtn.disabled = !checkbox.checked;
-  reembedBtn.disabled = !checkbox.checked;
-}
-
-async function runMigration(strategy) {
-  const checkbox = document.getElementById("migration-confirm-checkbox");
-
-  if (!checkbox.checked) {
-    showToast(t("toast-migration-failed"), "error");
-    return;
-  }
-
-  const strategyName =
-    strategy === "fresh-start" ? "Fresh Start (Delete All)" : "Re-embed (Preserve Data)";
-
-  if (
-    !confirm(
-      `Run ${strategyName} migration?\n\n${strategy === "fresh-start" ? "- Remove all existing memories from the active store\n- Archive old shards as .fresh-start-*.bak files" : "- Re-embed all memories with the new model\n- Stage and verify replacement shards before swapping\n- Keep previous shards as .pre-reembed-*.bak files\n- This may take several minutes"}\n\nContinue?`
-    )
-  ) {
-    return;
-  }
-
-  showToast(t("status-migration-init"), "info");
-  const result = await fetchAPI("/api/migration/run", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ strategy }),
-  });
-
-  if (result.success) {
-    const data = result.data;
-    let message = `Migration complete! `;
-
-    if (strategy === "fresh-start") {
-      message += `Deleted ${data.deletedShards} shard(s). Duration: ${(data.duration / 1000).toFixed(2)}s`;
-    } else {
-      message += `Re-embedded ${data.reEmbeddedMemories} memories. Duration: ${(data.duration / 1000).toFixed(2)}s`;
-    }
-
-    showToast(t("toast-migration-success"), "success");
-    document.getElementById("migration-section").classList.add("hidden");
-    document.getElementById("migration-confirm-checkbox").checked = false;
-
-    await loadMemories();
-    await loadStats();
-  } else {
-    showToast(result.error || t("toast-migration-failed"), "error");
-  }
-}
-
-async function loadUserProfile() {
-  const result = await fetchAPI("/api/user-profile");
-  if (result.success) {
-    state.userProfile = result.data;
-    renderUserProfile();
-  } else {
-    showError(result.error || t("toast-update-failed"));
-  }
-}
-
-function renderUserProfile() {
-  const container = document.getElementById("profile-content");
-  const profile = state.userProfile;
-
-  if (!profile.exists) {
-    container.innerHTML = `
-      <div class="empty-state">
-        <i data-lucide="user-x" class="icon-large"></i>
-        <p>${profile.message}</p>
-      </div>
-    `;
-    lucide.createIcons();
-    return;
-  }
-
-  let data = profile.profileData;
-  if (typeof data === "string") {
-    try {
-      data = JSON.parse(data);
-    } catch (e) {
-      console.error("Failed to parse profileData string", e);
-    }
-  }
-
-  const parseField = (field) => {
-    if (!field) return [];
-    let result = field;
-    let lastResult = null;
-    while (typeof result === "string" && result !== lastResult) {
-      lastResult = result;
-      try {
-        result = JSON.parse(typeof jsonrepair === "function" ? jsonrepair(result) : result);
-      } catch {
-        break;
-      }
-    }
-    if (!Array.isArray(result)) return [];
-    const flattened = [];
-    const walk = (item) => {
-      if (Array.isArray(item)) item.forEach(walk);
-      else if (item && typeof item === "object") flattened.push(item);
-    };
-    walk(result);
-    return flattened;
-  };
-
-  const PAGE_SIZE = 20;
-  function paginate(items, page, type) {
-    const total = items.length;
-    const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
-    const start = (page - 1) * PAGE_SIZE;
-    const pageItems = items.slice(start, start + PAGE_SIZE);
-    if (total <= PAGE_SIZE) return { items: pageItems, controls: "" };
-    if (page > totalPages) page = totalPages;
-    const pages = [];
-    for (let i = 1; i <= totalPages; i++) {
-      pages.push(
-        `<button class="btn-page${i === page ? " active" : ""}" data-page-type="${type}" data-page="${i}">${i}</button>`
-      );
-    }
-    const controls = `
-        <div class="pagination-bar">
-          <span class="pagination-info">${start + 1}-${Math.min(start + PAGE_SIZE, total)} / ${total}</span>
-          ${pages.join("")}
-        </div>`;
-    return { items: pageItems, controls };
-  }
-
-  const preferences = parseField(data.preferences);
-  const patterns = parseField(data.patterns);
-  const workflows = parseField(data.workflows);
-
-  if (!state.profilePages) {
-    state.profilePages = { pref: 1, pat: 1, wf: 1 };
-  }
-  const pp = paginate(preferences, state.profilePages.pref, "pref");
-  const pt = paginate(patterns, state.profilePages.pat, "pat");
-  const pw = paginate(workflows, state.profilePages.wf, "wf");
-
-  container.innerHTML = `
-    <div class="profile-header">
-      <div class="profile-info">
-        <h3>${escapeHtml(profile.displayName || profile.userId)}</h3>
-        <div class="profile-stats">
-          <div class="stat-pill">
-            <span class="label">${t("profile-version")}</span>
-            <span class="value">${profile.version}</span>
-          </div>
-          <div class="stat-pill">
-            <span class="label">${t("profile-prompts")}</span>
-            <span class="value">${profile.totalPromptsAnalyzed}</span>
-          </div>
-          <div class="stat-pill">
-            <span class="label">${t("profile-updated")}</span>
-            <span class="value">${formatDate(profile.lastAnalyzedAt)}</span>
-          </div>
-        </div>
-      </div>
-      <button id="view-changelog-btn" class="btn-secondary compact">
-        <i data-lucide="history" class="icon"></i> History
-      </button>
-    </div>
-
-    <div class="dashboard-grid">
-      <div class="dashboard-section preferences-section">
-        <h4><i data-lucide="heart" class="icon"></i> ${t("profile-preferences")} <span class="count">${preferences.length}</span></h4>
-        ${
-          preferences.length === 0
-            ? `<p class="empty-text">${t("empty-preferences")}</p>`
-            : `
-          <div class="cards-grid">
-            ${pp.items
-              .map(
-                (p) => `
-              <div class="compact-card preference-card">
-                <div class="card-top">
-                  <span class="category-tag">${escapeHtml(p.category || "General")}</span>
-                  <div class="card-actions">
-                    <button class="btn-icon btn-edit-profile-item" data-type="preferences" data-index="${preferences.indexOf(p)}" title="${t("btn-edit") || "Edit"}"><i data-lucide="pencil" class="icon-xs"></i></button>
-                    <button class="btn-icon btn-delete-profile-item" data-type="preferences" data-index="${preferences.indexOf(p)}" title="${t("btn-delete") || "Delete"}"><i data-lucide="trash-2" class="icon-xs"></i></button>
-                  </div>
-                  <div class="confidence-ring" style="--p:${Math.round((p.confidence || 0) * 1000) / 10}">
-                    <span>${Math.round((p.confidence || 0) * 1000) / 10}%</span>
-                  </div>
-                </div>
-                <div class="card-body">
-                  <p class="card-text">${escapeHtml(p.description || "")}</p>
-                </div>
-                  ${
-                    p.evidence || p.frequency
-                      ? `
-                <div class="card-footer">
-                  <span class="evidence-count" title="${t("label-evidence-tooltip", { count: p.frequency || 1 })}">🎯 ${p.frequency || 1}</span>
-                  ${
-                    p.evidence && p.evidence.length > 0
-                      ? `
-                  <span class="evidence-sep">·</span>
-                  <span class="evidence-toggle" title="${escapeHtml(Array.isArray(p.evidence) ? p.evidence.join("\n") : p.evidence)}">
-                    <i data-lucide="info" class="icon-xs"></i> ${Array.isArray(p.evidence) ? p.evidence.length : 1} evidence
-                  </span>`
-                      : ""
-                  }
-                </div>`
-                      : ""
-                  }
-              </div>
-            `
-              )
-              .join("")}
-          </div>
-          ${pp.controls}
-        `
-        }
-      </div>
-
-      <div class="dashboard-section patterns-section">
-        <h4><i data-lucide="activity" class="icon"></i> ${t("profile-patterns")} <span class="count">${patterns.length}</span></h4>
-        ${
-          patterns.length === 0
-            ? `<p class="empty-text">${t("empty-patterns")}</p>`
-            : `
-          <div class="cards-grid">
-            ${pt.items
-              .map(
-                (p) => `
-              <div class="compact-card pattern-card">
-                <div class="card-top">
-                  <span class="category-tag">${escapeHtml(p.category || "General")}</span>
-                  <div class="card-actions">
-                    <button class="btn-icon btn-edit-profile-item" data-type="patterns" data-index="${patterns.indexOf(p)}" title="${t("btn-edit") || "Edit"}"><i data-lucide="pencil" class="icon-xs"></i></button>
-                    <button class="btn-icon btn-delete-profile-item" data-type="patterns" data-index="${patterns.indexOf(p)}" title="${t("btn-delete") || "Delete"}"><i data-lucide="trash-2" class="icon-xs"></i></button>
-                  </div>
-                  <div class="confidence-ring" style="--p:${Math.round((p.confidence || 0) * 1000) / 10}">
-                    <span>${Math.round((p.confidence || 0) * 1000) / 10}%</span>
-                  </div>
-                </div>
-                <div class="card-body">
-                  <p class="card-text">${escapeHtml(p.description || "")}</p>
-                </div>
-                <div class="card-footer">
-                  <span class="evidence-count" title="${t("label-evidence-tooltip", { count: p.frequency || 1 })}">🎯 ${p.frequency || 1}</span>
-                  ${
-                    p.evidence && p.evidence.length > 0
-                      ? `
-                  <span class="evidence-sep">·</span>
-                  <span class="evidence-toggle" title="${escapeHtml(Array.isArray(p.evidence) ? p.evidence.join("\n") : p.evidence)}">
-                    <i data-lucide="info" class="icon-xs"></i> ${Array.isArray(p.evidence) ? p.evidence.length : 1} evidence
-                  </span>`
-                      : ""
-                  }
-                </div>
-              </div>
-            `
-              )
-              .join("")}
-          </div>
-          ${pt.controls}
-        `
-        }
-      </div>
-
-      <div class="dashboard-section workflows-section full-width">
-        <h4><i data-lucide="workflow" class="icon"></i> ${t("profile-workflows")} <span class="count">${workflows.length}</span></h4>
-        ${
-          workflows.length === 0
-            ? `<p class="empty-text">${t("empty-workflows")}</p>`
-            : `
-          <div class="workflows-grid">
-            ${pw.items
-              .sort((a, b) => (b.frequency || 0) - (a.frequency || 0))
-              .map(
-                (w) => `
-              <div class="workflow-row">
-                <div class="workflow-header">
-                  <div class="workflow-title">${escapeHtml(w.description || "")}</div>
-                  <div class="card-actions">
-                    <button class="btn-icon btn-edit-profile-item" data-type="workflows" data-index="${workflows.indexOf(w)}" title="${t("btn-edit") || "Edit"}"><i data-lucide="pencil" class="icon-xs"></i></button>
-                    <button class="btn-icon btn-delete-profile-item" data-type="workflows" data-index="${workflows.indexOf(w)}" title="${t("btn-delete") || "Delete"}"><i data-lucide="trash-2" class="icon-xs"></i></button>
-                  </div>
-                  <div class="confidence-ring" style="--p:${Math.round((w.confidence || 0) * 1000) / 10}">
-                    <span>${Math.round((w.confidence || 0) * 1000) / 10}%</span>
-                  </div>
-                </div>
-                <div class="workflow-steps-horizontal">
-                  ${(w.steps || [])
-                    .map(
-                      (step, i) => `
-                    <div class="step-node">
-                      <span class="step-idx">${i + 1}</span>
-                      <span class="step-content">${escapeHtml(step)}</span>
-                    </div>
-                    ${i < (w.steps || []).length - 1 ? '<i data-lucide="arrow-right" class="step-arrow"></i>' : ""}
-                  `
-                    )
-                    .join("")}
-                </div>
-                <div class="workflow-footer">
-                  <span class="evidence-count" title="${t("label-evidence-tooltip", { count: w.frequency || 1 })}">🎯 ${w.frequency || 1}</span>
-                  ${
-                    w.evidence && w.evidence.length > 0
-                      ? `
-                  <span class="evidence-sep">·</span>
-                  <span class="evidence-toggle" title="${escapeHtml(Array.isArray(w.evidence) ? w.evidence.join("\n") : w.evidence)}">
-                    <i data-lucide="info" class="icon-xs"></i> ${Array.isArray(w.evidence) ? w.evidence.length : 1} evidence
-                  </span>`
-                      : ""
-                  }
-                </div>
-              </div>
-            `
-              )
-              .join("")}
-          </div>
-          ${pw.controls}
-        `
-        }
-      </div>
-    </div>
-  `;
-
-  document.getElementById("view-changelog-btn")?.addEventListener("click", showChangelog);
-  lucide.createIcons();
-}
-
-async function showChangelog() {
-  const modal = document.getElementById("changelog-modal");
-  const list = document.getElementById("changelog-list");
-
-  modal.classList.remove("hidden");
-  list.innerHTML = `<div class="loading">${t("loading-changelog")}</div>`;
-  const result = await fetchAPI(
-    `/api/user-profile/changelog?profileId=${state.userProfile.id}&limit=10`
-  );
-
-  if (result.success && result.data.length > 0) {
-    list.innerHTML = result.data
-      .map(
-        (c) => `
-      <div class="changelog-item">
-        <div class="changelog-header">
-          <span class="changelog-version">v${c.version}</span>
-          <span class="changelog-type">${c.changeType}</span>
-          <span class="changelog-date">${formatDate(c.createdAt)}</span>
-        </div>
-        <p class="changelog-summary">${escapeHtml(c.changeSummary)}</p>
-      </div>
-    `
-      )
-      .join("");
-  } else {
-    list.innerHTML = `<div class="empty-state">${t("empty-changelog")}</div>`;
-  }
-}
-
-async function refreshProfile() {
-  showToast(t("loading-profile"), "info");
-  const result = await fetchAPI("/api/user-profile/refresh", {
-    method: "POST",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({}),
-  });
-
-  if (result.success) {
-    showToast(result.data.message, "success");
-    await loadUserProfile();
-  } else {
-    showToast(result.error || t("toast-update-failed"), "error");
-  }
-}
-async function showAICleanup() {
-  const modal = document.getElementById("ai-cleanup-modal");
-  const loading = document.getElementById("cleanup-loading");
-  const diffV2 = document.getElementById("cleanup-diff-v2");
-  const applyBtn = document.getElementById("cleanup-apply-btn");
-  const sections = document.getElementById("cleanup-sections");
-
-  modal.classList.remove("hidden");
-  loading.classList.add("hidden");
-  diffV2.classList.remove("hidden");
-  diffV2.style.cssText = "display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden;";
-  applyBtn.classList.add("hidden");
-  document.getElementById("cleanup-toolbar")?.classList.add("hidden");
-  document.getElementById("cleanup-kept-section")?.classList.add("hidden");
-
-  if (!state.userProfile?.profileData) {
-    showToast("No profile data loaded", "error");
-    modal.classList.add("hidden");
-    return;
-  }
-
-  const pd = state.userProfile.profileData;
-  const allItems = [
-    ...(pd.preferences || []).map((p, i) => ({ ...p, _id: `pref_${i}`, _type: "pref" })),
-    ...(pd.patterns || []).map((p, i) => ({ ...p, _id: `pat_${i}`, _type: "pat" })),
-    ...(pd.workflows || []).map((w, i) => ({ ...w, _id: `wf_${i}`, _type: "wf" })),
-  ];
-
-  let html = `<div class="cleanup-select-header">
-    <h3>${t("label-ai-cleanup-select")}</h3>
-    <div class="cleanup-select-actions">
-      <button class="btn btn-secondary" id="sel-all">${t("label-ai-cleanup-select-all")}</button>
-      <button class="btn btn-secondary" id="sel-none">${t("label-ai-cleanup-deselect-all")}</button>
-      <button class="btn btn-secondary" id="sel-low">${t("label-ai-cleanup-select-low")}</button>
-      <button class="btn btn-secondary" id="sel-same-cat">${t("label-ai-cleanup-select-same-cat")}</button>
-    </div>
-  </div>`;
-
-  const cats = {};
-  for (const it of allItems) {
-    const cat = it.category || "(none)";
-    if (!cats[cat]) cats[cat] = { pref: [], pat: [], wf: [] };
-    cats[cat][it._type === "wf" ? "wf" : it._type === "pat" ? "pat" : "pref"].push(it);
-  }
-
-  html += `<div class="cleanup-select-grid">`;
-  for (const cat of Object.keys(cats).sort()) {
-    const items = [...cats[cat].pref, ...cats[cat].pat, ...cats[cat].wf];
-    html += `<div class="cleanup-cat-group">
-      <div class="cleanup-cat-header">
-        <span class="category-tag">${escapeHtml(cat)}</span>
-        <span class="cat-count">${items.length} items</span>
-      </div>`;
-    for (const it of items) {
-      const freq = it.frequency || 0;
-      const conf = it.confidence;
-      html += `<label class="cleanup-item-row">
-        <input type="checkbox" class="cleanup-sel-item" data-id="${it._id}" ${freq <= 3 ? "checked" : ""}>
-        <span class="cleanup-item-type">${it._type === "pref" ? "P" : it._type === "pat" ? "T" : "W"}</span>
-        <span class="cleanup-item-desc">${escapeHtml((it.description || "").substring(0, 80))}</span>
-        <span class="cleanup-item-stats">🎯${freq}${conf != null ? " | " + Math.round(conf * 100) + "%" : ""}</span>
-      </label>`;
-    }
-    html += `</div>`;
-  }
-  html += `</div>
-  <div class="cleanup-select-footer">
-    <span id="cleanup-sel-count">${t("label-ai-cleanup-selected", { count: allItems.filter((it) => (it.frequency || 0) <= 3).length })}</span>
-    <button class="btn btn-primary" id="sel-analyze">${t("label-ai-cleanup-analyze")}</button>
-  </div>`;
-
-  sections.innerHTML = html;
-
-  const getSelected = () =>
-    [...document.querySelectorAll(".cleanup-sel-item:checked")].map((cb) => cb.dataset.id);
-
-  const updateCount = () => {
-    document.getElementById("cleanup-sel-count").textContent = t("label-ai-cleanup-selected", {
-      count: getSelected().length,
-    });
-  };
-
-  sections.addEventListener("change", (e) => {
-    if (e.target.classList.contains("cleanup-sel-item")) updateCount();
-  });
-
-  document.getElementById("sel-all").addEventListener("click", () => {
-    document.querySelectorAll(".cleanup-sel-item").forEach((cb) => {
-      cb.checked = true;
-    });
-    updateCount();
-  });
-  document.getElementById("sel-none").addEventListener("click", () => {
-    document.querySelectorAll(".cleanup-sel-item").forEach((cb) => {
-      cb.checked = false;
-    });
-    updateCount();
-  });
-  document.getElementById("sel-low").addEventListener("click", () => {
-    document.querySelectorAll(".cleanup-sel-item").forEach((cb) => {
-      const it = allItems.find((x) => x._id === cb.dataset.id);
-      cb.checked = it && (it.frequency || 0) <= 3;
-    });
-    updateCount();
-  });
-  document.getElementById("sel-same-cat").addEventListener("click", () => {
-    document.querySelectorAll(".cleanup-sel-item").forEach((cb) => {
-      cb.checked = false;
-    });
-    // Select items from categories with 3+ items
-    for (const cat of Object.keys(cats)) {
-      const count = [...cats[cat].pref, ...cats[cat].pat, ...cats[cat].wf].length;
-      if (count >= 3) {
-        [...cats[cat].pref, ...cats[cat].pat, ...cats[cat].wf].forEach((it) => {
-          const cb = document.querySelector(`.cleanup-sel-item[data-id="${it._id}"]`);
-          if (cb) cb.checked = true;
-        });
-      }
-    }
-    updateCount();
-  });
-
-  document.getElementById("sel-analyze").addEventListener("click", async () => {
-    const ids = getSelected();
-    if (ids.length === 0) {
-      showToast("No items selected", "warn");
-      return;
-    }
-    sections.innerHTML = "";
-    loading.classList.remove("hidden");
-    try {
-      const result = await fetchAPI("/api/user-profile/ai-cleanup", {
-        method: "POST",
-        headers: { "Content-Type": "application/json" },
-        body: JSON.stringify({ includeIds: ids }),
-        timeout: 300000,
-      });
-      loading.classList.add("hidden");
-      if (!result.success) {
-        showToast(result.error || "Cleanup failed", "error");
-        return;
-      }
-      renderCleanupDiffV2(result.data);
-      diffV2.classList.remove("hidden");
-      state.pendingCleanup = result.data;
-    } catch (e) {
-      loading.classList.add("hidden");
-      showToast("Cleanup failed: " + e.message, "error");
-    }
-  });
-
-  setTimeout(() => applyLanguage?.(), 0);
-  lucide?.createIcons?.();
-}
-
-function renderCleanupDiffV2(data) {
-  const changes = data.changes;
-  const sections = document.getElementById("cleanup-sections");
-  const diffV2 = document.getElementById("cleanup-diff-v2");
-  diffV2.style.cssText = "";
-  sections.style.cssText = "";
-
-  let html = renderMergeSection(changes.merged || [], data.old);
-  html += renderRemoveSection(changes.removed || [], data.old);
-  sections.innerHTML = html;
-
-  renderKeptSection(changes.kept || []);
-  bindCleanupToolbar();
-
-  const applyBtn = document.getElementById("cleanup-apply-btn");
-  applyBtn.classList.remove("hidden");
-  applyBtn.textContent = t("label-ai-cleanup-apply") || "Apply Changes";
-
-  setTimeout(() => applyLanguage?.(), 0);
-  lucide?.createIcons?.();
-}
-
-function renderMergeSection(merged, old) {
-  if (merged.length === 0) return "";
-
-  let html = `<h4 class="section-divider"><i data-lucide="git-merge" class="icon-xs"></i> ${t("label-ai-cleanup-merged-header", { count: merged.length })}</h4>`;
-
-  merged.forEach((m, mi) => {
-    const mainId = m.ids[0];
-    const mergedFrom = m.ids.slice(1);
-    const mainDesc = m.result || "";
-    const mainSteps = findStepsById(mainId, old);
-    const mergedDescs = mergedFrom
-      .map((id) => {
-        const desc = findDescById(id, old);
-        const typeLabel = getTypeLabel(id);
-        const steps = findStepsById(id, old);
-        return desc ? { desc, typeLabel, steps } : null;
-      })
-      .filter(Boolean);
-
-    const stepsAfter = mainSteps?.length
-      ? `<div class="cleanup-steps">${renderStepsInline(mainSteps)}</div>`
-      : "";
-
-    html += `<div class="diff-card merge-card" data-group="${mi}">
-        <label class="diff-card-check">
-          <input type="checkbox" class="diff-checkbox" data-type="merged" data-index="${mi}" checked>
-          <span class="check-label">${t("label-ai-cleanup-merge-check")}</span>
-        </label>
-        <div class="merge-body">
-          <div class="merge-before">
-            ${mergedDescs
-              .map((d) => {
-                const stepsHtml = d.steps?.length
-                  ? `<div class="cleanup-steps">${renderStepsInline(d.steps)}</div>`
-                  : "";
-                return `<div class="merge-source"><span class="type-badge">${d.typeLabel}</span> ${escapeHtml(d.desc.substring(0, 80))}${d.desc.length > 80 ? "..." : ""}${stepsHtml}</div>`;
-              })
-              .join("")}
-          </div>
-          <div class="merge-arrow">▶</div>
-          <div class="merge-after">${escapeHtml(mainDesc.substring(0, 120))}${mainDesc.length > 120 ? "..." : ""}${stepsAfter}</div>
-        </div>
-      </div>`;
-  });
-
-  return html;
-}
-
-function renderRemoveSection(removed, old) {
-  if (removed.length === 0) return "";
-
-  let html = `<h4 class="section-divider"><i data-lucide="trash-2" class="icon-xs"></i> ${t("label-ai-cleanup-removed-header", { count: removed.length })}</h4>`;
-
-  removed.forEach((r, ri) => {
-    const desc = findDescById(r.id, old);
-    const steps = findStepsById(r.id, old);
-    const stepsHtml = steps?.length
-      ? `<div class="cleanup-steps">${renderStepsInline(steps)}</div>`
-      : "";
-    html += `<div class="diff-card remove-card" data-group="${ri}">
-        <label class="diff-card-check">
-          <input type="checkbox" class="diff-checkbox" data-type="removed" data-index="${ri}" checked>
-          <span class="check-label">${t("label-ai-cleanup-remove-check")}</span>
-        </label>
-        <div class="remove-body">
-          <div class="remove-desc">${escapeHtml(desc || r.id)}${stepsHtml}</div>
-          <div class="remove-reason">${escapeHtml(r.reason)}</div>
-        </div>
-      </div>`;
-  });
-
-  return html;
-}
-
-function renderKeptSection(kept) {
-  const keptCount = document.getElementById("cleanup-kept-count");
-  const keptList = document.getElementById("cleanup-kept-list");
-  const keptItems = kept || [];
-
-  keptCount.textContent = `(${keptItems.length})`;
-  keptList.innerHTML = keptItems
-    .map((k) => `<div class="kept-item">${escapeHtml(k)}</div>`)
-    .join("");
-
-  if (keptItems.length === 0) {
-    document.getElementById("cleanup-kept-section").classList.add("hidden");
-  } else {
-    document.getElementById("cleanup-kept-section").classList.remove("hidden");
-    keptList.classList.add("hidden");
-  }
-
-  document.getElementById("cleanup-kept-toggle").onclick = () => {
-    keptList.classList.toggle("hidden");
-    const icon = document.getElementById("cleanup-kept-toggle").querySelector("i");
-    if (icon) {
-      icon.setAttribute(
-        "data-lucide",
-        keptList.classList.contains("hidden") ? "chevron-down" : "chevron-up"
-      );
-    }
-    lucide?.createIcons?.();
-  };
-}
-
-function bindCleanupToolbar() {
-  document.querySelectorAll(".diff-checkbox").forEach((cb) => {
-    cb.addEventListener("change", updateCleanupStats);
-  });
-
-  updateCleanupStats();
-
-  document.getElementById("cleanup-select-all").onclick = () => {
-    document.querySelectorAll(".diff-checkbox").forEach((cb) => {
-      cb.checked = true;
-    });
-    updateCleanupStats();
-  };
-  document.getElementById("cleanup-deselect-all").onclick = () => {
-    document.querySelectorAll(".diff-checkbox").forEach((cb) => {
-      cb.checked = false;
-    });
-    updateCleanupStats();
-  };
-}
-
-function getTypeLabel(id) {
-  if (typeof id !== "string" || !id.includes("_")) return "?";
-  const prefix = id.split("_")[0];
-  if (prefix === "pref") return t("profile-type-pref") || "Pref";
-  if (prefix === "pat") return t("profile-type-pat") || "Pat";
-  if (prefix === "wf") return t("profile-type-wf") || "Wf";
-  return "?";
-}
-
-function findDescById(id, profileData) {
-  if (!profileData) return null;
-  if (typeof id === "string" && id.includes("_")) {
-    const parts = id.split("_");
-    const prefix = parts[0];
-    const idx = parseInt(parts[1], 10);
-    if (!isNaN(idx)) {
-      if (prefix === "pref" && profileData.preferences?.[idx]) {
-        return profileData.preferences[idx].description;
-      }
-      if (prefix === "pat" && profileData.patterns?.[idx]) {
-        return profileData.patterns[idx].description;
-      }
-      if (prefix === "wf" && profileData.workflows?.[idx]) {
-        return profileData.workflows[idx].description;
-      }
-    }
-  }
-  return null;
-}
-
-function findStepsById(id, profileData) {
-  if (!profileData || typeof id !== "string" || !id.includes("_")) return null;
-  const parts = id.split("_");
-  const idx = parseInt(parts[1], 10);
-  if (isNaN(idx) || parts[0] !== "wf") return null;
-  return profileData.workflows?.[idx]?.steps || null;
-}
-
-function renderStepsInline(steps) {
-  return steps
-    .map(
-      (s, i) =>
-        `<span class="step-inline"><span class="step-inline-num">${i + 1}</span> ${escapeHtml(s)}</span>`
-    )
-    .join('<span class="step-arrow-inline">→</span>');
-}
-
-function updateCleanupStats() {
-  const checkboxes = document.querySelectorAll(".diff-checkbox");
-  let selected = 0;
-  checkboxes.forEach((cb) => {
-    if (cb.checked) selected++;
-  });
-  const total = checkboxes.length;
-  document.getElementById("cleanup-stats").textContent = t("label-ai-cleanup-changes-selected", {
-    selected,
-    total,
-  });
-  const btn = document.getElementById("cleanup-apply-btn");
-  if (btn) {
-    btn.textContent =
-      selected > 0
-        ? `${t("label-ai-cleanup-apply")} (${selected})`
-        : t("label-ai-cleanup-apply") || "Apply";
-    btn.disabled = selected === 0;
-  }
-}
-
-async function applyAICleanup() {
-  const applyBtn = document.getElementById("cleanup-apply-btn");
-  applyBtn.disabled = true;
-
-  const acceptedMerged = [];
-  const acceptedRemoved = [];
-  document.querySelectorAll(".diff-checkbox").forEach((cb) => {
-    if (!cb.checked) return;
-    if (cb.dataset.type === "merged") {
-      const mi = parseInt(cb.dataset.index, 10);
-      const change = state.pendingCleanup?.changes?.merged?.[mi];
-      if (change) acceptedMerged.push(change.ids);
-    } else if (cb.dataset.type === "removed") {
-      const ri = parseInt(cb.dataset.index, 10);
-      const change = state.pendingCleanup?.changes?.removed?.[ri];
-      if (change) acceptedRemoved.push(change.id);
-    }
-  });
-
-  try {
-    const result = await fetchAPI("/api/user-profile/ai-cleanup/apply", {
-      method: "POST",
-      headers: { "Content-Type": "application/json" },
-      body: JSON.stringify({
-        profile: state.pendingCleanup?.new,
-        acceptedMerged,
-        acceptedRemoved,
-      }),
-    });
-
-    if (result.success) {
-      showToast(t("toast-cleanup-success"), "success");
-      closeCleanupModal();
-      delete state.pendingCleanup;
-      await loadUserProfile();
-    } else {
-      showToast(result.error || t("toast-cleanup-apply-failed"), "error");
-    }
-  } catch (e) {
-    showToast(t("toast-cleanup-apply-failed") + ": " + e.message, "error");
-  }
-
-  applyBtn.disabled = false;
-}
-
-function closeCleanupModal() {
-  document.getElementById("ai-cleanup-modal").classList.add("hidden");
-  delete state.pendingCleanup;
-}
-
-function showProfileItemModal(type, index, action) {
-  const current = getCurrentItem(type, index);
-  if (!current) return;
-
-  const isEdit = action === "edit";
-  const isWorkflow = type === "workflows";
-  const modal = document.getElementById("profile-item-modal");
-
-  document.getElementById("profile-item-modal-title").textContent = isEdit
-    ? t("btn-edit") || "Edit Item"
-    : t("confirm-delete") || "Delete Item?";
-  document.getElementById("profile-item-category").value = current.category || "";
-  document.getElementById("profile-item-category").disabled = !isEdit;
-  document.getElementById("profile-item-description").value = current.description || "";
-  document.getElementById("profile-item-description").disabled = !isEdit;
-  document.getElementById("profile-item-category").closest(".form-group").style.display = isWorkflow
-    ? "none"
-    : "block";
-  document.getElementById("profile-item-save").textContent = isEdit
-    ? t("btn-save") || "Save"
-    : t("btn-delete") || "Delete";
-
-  const stepsSection = document.getElementById("steps-section");
-  if (isWorkflow && isEdit) {
-    stepsSection.style.display = "block";
-    renderStepsEditor(current.steps || []);
-  } else {
-    stepsSection.style.display = "none";
-  }
-
-  const saveBtn = document.getElementById("profile-item-save");
-  if (isEdit) saveBtn.classList.remove("danger");
-  else saveBtn.classList.add("danger");
-
-  modal.dataset.deleteStep = "1";
-  modal.classList.remove("hidden");
-  modal._profileAction = { type, index, action };
-}
-
-async function editProfileItem(type, index) {
-  showProfileItemModal(type, index, "edit");
-}
-
-async function deleteProfileItem(type, index) {
-  showProfileItemModal(type, index, "delete");
-}
-
-function submitProfileItemForm(e) {
-  e.preventDefault();
-  const modal = document.getElementById("profile-item-modal");
-  const { type, index, action } = modal._profileAction || {};
-  if (!type) return;
-
-  if (action === "edit") {
-    submitProfileEdit(type, index);
-  } else if (action === "delete") {
-    if (modal.dataset.deleteStep === "2") {
-      submitProfileDelete(type, index);
-    } else {
-      showDeleteConfirmation();
-    }
-  }
-}
-
-async function submitProfileEdit(type, index) {
-  const isWorkflow = type === "workflows";
-  const category = isWorkflow ? undefined : document.getElementById("profile-item-category").value;
-  const description = document.getElementById("profile-item-description").value;
-  const body = { type, index, action: "edit", category, description };
-
-  if (type === "workflows") {
-    body.steps = collectSteps();
-  }
-
-  const result = await fetchAPI("/api/user-profile/item", {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify(body),
-  });
-
-  if (result.success) {
-    showToast(t("toast-update-success") || "Item updated", "success");
-    closeProfileItemModal();
-    await loadUserProfile();
-  } else {
-    showToast(result.error || t("toast-update-failed") || "Update failed", "error");
-  }
-}
-
-function showDeleteConfirmation() {
-  document.getElementById("profile-item-modal-title").textContent =
-    t("confirm-delete-title") || "Confirm Delete";
-  document.getElementById("profile-item-category").closest(".form-group").style.display = "none";
-  document.getElementById("profile-item-description").closest(".form-group").style.display = "none";
-  document.getElementById("profile-item-save").textContent = t("btn-delete") || "Delete";
-  document.getElementById("profile-item-save").classList.add("danger");
-  document.getElementById("profile-item-modal").dataset.deleteStep = "2";
-}
-
-async function submitProfileDelete(type, index) {
-  const result = await fetchAPI("/api/user-profile/item", {
-    method: "PATCH",
-    headers: { "Content-Type": "application/json" },
-    body: JSON.stringify({ type, index, action: "delete" }),
-  });
-
-  if (result.success) {
-    showToast(t("toast-delete-success") || "Item deleted", "success");
-    closeProfileItemModal();
-    await loadUserProfile();
-  } else {
-    showToast(result.error || t("toast-delete-failed") || "Delete failed", "error");
-  }
-}
-
-function closeProfileItemModal() {
-  const modal = document.getElementById("profile-item-modal");
-  modal.classList.add("hidden");
-  document.getElementById("profile-item-category").disabled = false;
-  document.getElementById("profile-item-category").closest(".form-group").style.display = "block";
-  document.getElementById("profile-item-description").disabled = false;
-  document.getElementById("profile-item-description").closest(".form-group").style.display =
-    "block";
-  document.getElementById("steps-section").style.display = "none";
-  const saveBtn = document.getElementById("profile-item-save");
-  saveBtn.classList.remove("danger");
-  modal.dataset.deleteStep = "1";
-  delete modal._profileAction;
-}
-
-function getCurrentItem(type, index) {
-  if (!state.userProfile?.profileData) return null;
-  return state.userProfile.profileData[type]?.[index] || null;
-}
-
-function renderStepsEditor(steps) {
-  const container = document.getElementById("steps-container");
-  container.innerHTML = "";
-  (steps || []).forEach((step, i) => addStepRow(step, i));
-  if (!steps?.length) addStepRow("");
-}
-
-function addStepRow(text = "") {
-  const container = document.getElementById("steps-container");
-  const i = container.children.length;
-  const row = document.createElement("div");
-  row.className = "step-row";
-  row.innerHTML = `<span class="step-num">${i + 1}</span>
-    <input type="text" class="step-input" value="${escapeHtml(text)}" placeholder="Step ${i + 1}..." />
-    <button type="button" class="btn-icon btn-remove-step" title="${t("btn-delete") || "Delete"}">×</button>`;
-  row.querySelector(".btn-remove-step").addEventListener("click", () => removeStepRow(row));
-  container.appendChild(row);
-}
-
-function removeStepRow(row) {
-  row.remove();
-  updateStepNumbers();
-}
-
-function updateStepNumbers() {
-  const rows = document.querySelectorAll("#steps-container .step-row");
-  rows.forEach((row, i) => {
-    row.querySelector(".step-num").textContent = i + 1;
-    row.querySelector(".step-input").placeholder = `Step ${i + 1}...`;
-  });
-}
-
-function collectSteps() {
-  return [...document.querySelectorAll("#steps-container .step-input")]
-    .map((el) => el.value.trim())
-    .filter(Boolean);
-}
-
-function switchView(view) {
-  state.currentView = view;
-
-  document.querySelectorAll(".tab-btn").forEach((btn) => btn.classList.remove("active"));
-
-  if (view === "project") {
-    document.getElementById("tab-project").classList.add("active");
-    document.getElementById("project-section").classList.remove("hidden");
-    document.getElementById("profile-section").classList.add("hidden");
-    document.querySelector(".controls").classList.remove("hidden");
-    document.querySelector(".add-section").classList.remove("hidden");
-  } else if (view === "profile") {
-    document.getElementById("tab-profile").classList.add("active");
-    document.getElementById("project-section").classList.add("hidden");
-    document.getElementById("profile-section").classList.remove("hidden");
-    document.querySelector(".controls").classList.add("hidden");
-    document.querySelector(".add-section").classList.add("hidden");
-    loadUserProfile();
-  }
-}
-
-function escapeHtml(text) {
-  const div = document.createElement("div");
-  div.textContent = text;
-  return div.innerHTML;
-}
-
-const LOOPBACK_HOSTS = new Set(["localhost", "127.0.0.1", "[::1]", "::1"]);
-
-function isLoopbackHostname(hostname) {
-  if (!hostname) return false;
-  if (LOOPBACK_HOSTS.has(hostname.toLowerCase())) return true;
-  // IPv4-mapped IPv6 loopback (e.g. "::ffff:127.0.0.1") and friends.
-  if (hostname.startsWith("::ffff:")) {
-    return isLoopbackHostname(hostname.slice(7));
-  }
-  return false;
-}
-
-async function checkAuthWarning() {
-  const banner = document.getElementById("auth-warning");
-  if (!banner) return;
-
-  // Trust the server's report of auth state over guessing from a possibly
-  // proxied Host header. The /api/health endpoint is intentionally
-  // unauthenticated and exempt from CORS so this fetch is always cheap.
-  let authEnabled = false;
-  try {
-    const response = await fetch("/api/health", { credentials: "same-origin" });
-    if (response.ok) {
-      const data = await response.json();
-      authEnabled = data && data.authEnabled === true;
-    }
-  } catch {
-    // If the probe fails the warning is moot — the UI is unusable anyway.
-    return;
-  }
-
-  if (authEnabled) {
-    banner.classList.add("hidden");
-    return;
-  }
-
-  if (isLoopbackHostname(window.location.hostname)) {
-    banner.classList.add("hidden");
-    return;
-  }
-
-  banner.classList.remove("hidden");
-}
-
-document.addEventListener("DOMContentLoaded", async () => {
-  document.getElementById("tab-project").addEventListener("click", () => switchView("project"));
-  document.getElementById("tab-profile").addEventListener("click", () => switchView("profile"));
-  document.getElementById("refresh-profile-btn")?.addEventListener("click", refreshProfile);
-  document.getElementById("changelog-close")?.addEventListener("click", () => {
-    document.getElementById("changelog-modal").classList.add("hidden");
-  });
-
-  document.getElementById("lang-toggle").addEventListener("click", () => {
-    const langCycle = ["en", "zh", "ar"];
-    const currentLang = getLanguage();
-    const currentIndex = langCycle.indexOf(currentLang);
-    const newLang = langCycle[(currentIndex + 1) % langCycle.length];
-    setLanguage(newLang);
-    document.getElementById("lang-toggle").textContent = newLang.toUpperCase();
-    loadMemories();
-    loadStats();
-    if (state.currentView === "profile") loadUserProfile();
-  });
-
-  document.getElementById("lang-toggle").textContent = getLanguage().toUpperCase();
-  setLanguage(getLanguage());
-
-  document.getElementById("tag-filter").addEventListener("change", () => {
-    state.selectedTag = document.getElementById("tag-filter").value;
-    state.currentPage = 1;
-    state.isSearching = false;
-    state.searchQuery = "";
-    document.getElementById("search-input").value = "";
-    document.getElementById("clear-search-btn").classList.add("hidden");
-    loadMemories();
-  });
-
-  document.getElementById("search-btn").addEventListener("click", performSearch);
-  document.getElementById("clear-search-btn").addEventListener("click", clearSearch);
-  document.getElementById("search-input").addEventListener("keypress", (e) => {
-    if (e.key === "Enter") performSearch();
-  });
-
-  document.getElementById("add-form").addEventListener("submit", addMemory);
-  document.getElementById("edit-form").addEventListener("submit", saveEdit);
-  document.getElementById("modal-close").addEventListener("click", closeModal);
-  document.getElementById("cancel-edit").addEventListener("click", closeModal);
-
-  document.getElementById("prev-page-top").addEventListener("click", () => changePage(-1));
-  document.getElementById("next-page-top").addEventListener("click", () => changePage(1));
-  document.getElementById("prev-page-bottom").addEventListener("click", () => changePage(-1));
-  document.getElementById("next-page-bottom").addEventListener("click", () => changePage(1));
-
-  document.getElementById("bulk-delete-btn").addEventListener("click", bulkDelete);
-  document.getElementById("select-all-btn").addEventListener("click", selectAllCurrentPage);
-  document.getElementById("deselect-all-btn").addEventListener("click", deselectAll);
-
-  document.getElementById("cleanup-btn").addEventListener("click", runCleanup);
-  document.getElementById("deduplicate-btn").addEventListener("click", runDeduplication);
-
-  document
-    .getElementById("migration-confirm-checkbox")
-    .addEventListener("change", toggleMigrationButtons);
-  document
-    .getElementById("migration-fresh-btn")
-    .addEventListener("click", () => runMigration("fresh-start"));
-  document
-    .getElementById("migration-reembed-btn")
-    .addEventListener("click", () => runMigration("re-embed"));
-
-  document.getElementById("edit-modal").addEventListener("click", (e) => {
-    if (e.target.id === "edit-modal") closeModal();
-  });
-
-  document.getElementById("ai-cleanup-btn")?.addEventListener("click", showAICleanup);
-  document.getElementById("cleanup-modal-close")?.addEventListener("click", closeCleanupModal);
-  document.getElementById("cleanup-cancel-btn")?.addEventListener("click", closeCleanupModal);
-  document.getElementById("cleanup-apply-btn")?.addEventListener("click", applyAICleanup);
-
-  // Re-render diff on language change if visible
-  document.addEventListener("langchange", () => {
-    if (
-      state.pendingCleanup &&
-      !document.getElementById("ai-cleanup-modal").classList.contains("hidden")
-    ) {
-      const diffV2 = document.getElementById("cleanup-diff-v2");
-      if (!diffV2.classList.contains("hidden")) {
-        // Save checkbox states
-        const checkedStates = [];
-        document.querySelectorAll(".diff-checkbox").forEach((cb, i) => {
-          checkedStates[i] = cb.checked;
-        });
-        renderCleanupDiffV2(state.pendingCleanup);
-        // Restore checkbox states
-        document.querySelectorAll(".diff-checkbox").forEach((cb, i) => {
-          if (checkedStates[i] !== undefined) cb.checked = checkedStates[i];
-        });
-        updateCleanupStats();
-      }
-    }
-  });
-
-  document.getElementById("profile-item-form")?.addEventListener("submit", submitProfileItemForm);
-  document
-    .getElementById("profile-item-modal-close")
-    ?.addEventListener("click", closeProfileItemModal);
-  document.getElementById("profile-item-cancel")?.addEventListener("click", closeProfileItemModal);
-  document.getElementById("btn-add-step")?.addEventListener("click", () => addStepRow(""));
-
-  // Event delegation for dynamically generated profile edit/delete buttons
-  document.getElementById("profile-content").addEventListener("click", (e) => {
-    const editBtn = e.target.closest(".btn-edit-profile-item");
-    const deleteBtn = e.target.closest(".btn-delete-profile-item");
-    const pageBtn = e.target.closest(".btn-page");
-    if (editBtn) {
-      const type = editBtn.dataset.type;
-      const index = parseInt(editBtn.dataset.index, 10);
-      editProfileItem(type, index);
-    }
-    if (deleteBtn) {
-      const type = deleteBtn.dataset.type;
-      const index = parseInt(deleteBtn.dataset.index, 10);
-      deleteProfileItem(type, index);
-    }
-    if (pageBtn && !pageBtn.disabled) {
-      const pageType = pageBtn.dataset.pageType;
-      const page = parseInt(pageBtn.dataset.page, 10);
-      state.profilePages[pageType] = page;
-      refreshProfile();
-    }
-  });
-
-  await loadTags();
-  await loadMemories();
-  await loadStats();
-  await checkMigrationStatus();
-  await checkAuthWarning();
-
-  startAutoRefresh();
-
-  lucide.createIcons();
-});
diff --git a/src/web/index.html b/src/web/index.html
deleted file mode 100644
index 930040a0..00000000
--- a/src/web/index.html
+++ /dev/null
@@ -1,402 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>OpenCode Memory Explorer</title>
-    <link rel="stylesheet" href="/styles.css" />
-    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
-    <script src="https://unpkg.com/lucide@latest"></script>
-    <script src="https://cdn.jsdelivr.net/npm/marked@17.0.1/lib/marked.umd.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.2.2/dist/purify.min.js"></script>
-    <script src="https://cdn.jsdelivr.net/npm/jsonrepair@latest/lib/umd/jsonrepair.min.js"></script>
-    <script src="/i18n.js"></script>
-  </head>
-  <body>
-    <div class="container">
-      <div id="auth-warning" class="auth-warning hidden" role="alert">
-        <div class="auth-warning-icon"><i data-lucide="alert-triangle"></i></div>
-        <div class="auth-warning-body">
-          <span class="auth-warning-text" data-i18n="auth-warning-text">
-            Cross-origin editing disabled. Set webServerAuthPassword to enable.
-          </span>
-        </div>
-      </div>
-
-      <header class="header">
-        <div class="header-top">
-          <h1 class="title" data-i18n="title">┌─ OPENCODE MEMORY EXPLORER ─┐</h1>
-          <button id="lang-toggle" class="lang-toggle" title="Switch Language">EN</button>
-          <a
-            href="https://github.com/tickernelz/opencode-mem"
-            target="_blank"
-            rel="noopener noreferrer"
-            class="github-link"
-            title="View on GitHub"
-          >
-            <i data-lucide="github" class="icon"></i>
-          </a>
-        </div>
-        <div class="stats-bar">
-          <span id="stats-total">Total: 0</span>
-          <span id="refresh-indicator" class="hidden"
-            ><i data-lucide="rotate-cw" class="icon icon-spin"></i
-          ></span>
-        </div>
-      </header>
-
-      <div class="scope-tabs">
-        <button id="tab-project" class="tab-btn active" data-i18n="tab-project">
-          <i data-lucide="folder" class="icon"></i>
-          PROJECT MEMORIES
-        </button>
-        <button id="tab-profile" class="tab-btn" data-i18n="tab-profile">
-          <i data-lucide="user" class="icon"></i>
-          USER PROFILE
-        </button>
-      </div>
-
-      <div class="controls">
-        <div class="filter-group">
-          <label data-i18n="label-tag">Tag:</label>
-          <select id="tag-filter">
-            <option value="" data-i18n="opt-all-tags">All Tags</option>
-          </select>
-        </div>
-
-        <div class="search-group">
-          <input
-            type="text"
-            id="search-input"
-            data-i18n-placeholder="placeholder-search"
-            placeholder="Search memories..."
-          />
-          <button id="search-btn"><i data-lucide="search" class="icon"></i></button>
-          <button id="clear-search-btn" class="hidden"><i data-lucide="x" class="icon"></i></button>
-        </div>
-
-        <div class="maintenance-actions">
-          <button id="cleanup-btn" class="btn-maintenance" data-i18n="btn-cleanup">
-            <i data-lucide="trash" class="icon"></i> Cleanup
-          </button>
-          <button id="deduplicate-btn" class="btn-maintenance" data-i18n="btn-deduplicate">
-            <i data-lucide="refresh-cw" class="icon"></i> Deduplicate
-          </button>
-        </div>
-
-        <div class="bulk-actions hidden" id="bulk-actions">
-          <span id="selected-count" data-i18n="text-selected">0 selected</span>
-          <button id="select-all-btn" data-i18n="btn-select-all">
-            <i data-lucide="check-square" class="icon"></i> Select Page
-          </button>
-          <button id="bulk-delete-btn" data-i18n="btn-delete-selected">
-            <i data-lucide="trash-2" class="icon"></i> Delete Selected
-          </button>
-          <button id="deselect-all-btn" data-i18n="btn-deselect-all">
-            <i data-lucide="x" class="icon"></i> Deselect All
-          </button>
-        </div>
-      </div>
-
-      <div class="migration-section hidden" id="migration-section">
-        <div class="migration-warning">
-          <i data-lucide="alert-triangle" class="icon"></i>
-          <span id="migration-message" data-i18n="migration-mismatch"
-            >Model dimension mismatch detected!</span
-          >
-        </div>
-        <div class="migration-info">
-          <label>
-            <input type="checkbox" id="migration-confirm-checkbox" />
-            <span data-i18n="migration-understand"
-              >I understand this operation is irreversible and will affect all stored memories</span
-            >
-          </label>
-        </div>
-        <div class="migration-actions">
-          <button
-            id="migration-fresh-btn"
-            class="btn-migration"
-            disabled
-            data-i18n="btn-fresh-start"
-          >
-            <i data-lucide="trash" class="icon"></i> Fresh Start (Delete All)
-          </button>
-          <button id="migration-reembed-btn" class="btn-migration" disabled data-i18n="btn-reembed">
-            <i data-lucide="refresh-cw" class="icon"></i> Re-embed (Preserve Data)
-          </button>
-        </div>
-      </div>
-
-      <div class="memories-section" id="project-section">
-        <div class="section-header">
-          <h2 id="section-title" data-i18n="section-project">└─ PROJECT MEMORIES (0) ──</h2>
-          <div class="pagination" id="pagination-top">
-            <button id="prev-page-top" disabled>
-              <i data-lucide="chevron-left" class="icon"></i>
-            </button>
-            <span id="page-info-top" data-i18n="text-page">Page 1 of 1</span>
-            <button id="next-page-top" disabled>
-              <i data-lucide="chevron-right" class="icon"></i>
-            </button>
-          </div>
-        </div>
-
-        <div id="memories-list" class="memories-list">
-          <div class="loading" data-i18n="loading-init">Initializing...</div>
-        </div>
-
-        <div class="pagination" id="pagination-bottom">
-          <button id="prev-page-bottom" disabled>
-            <i data-lucide="chevron-left" class="icon"></i>
-          </button>
-          <span id="page-info-bottom" data-i18n="text-page">Page 1 of 1</span>
-          <button id="next-page-bottom" disabled>
-            <i data-lucide="chevron-right" class="icon"></i>
-          </button>
-        </div>
-      </div>
-
-      <div class="profile-section hidden" id="profile-section">
-        <div class="section-header">
-          <h2 data-i18n="section-profile">└─ USER PROFILE ──</h2>
-          <div class="profile-actions">
-            <button
-              id="ai-cleanup-btn"
-              class="btn-maintenance"
-              data-i18n="btn-ai-cleanup"
-              title="AI Cleanup"
-            >
-              <i data-lucide="sparkles" class="icon"></i> AI Cleanup
-            </button>
-            <button id="refresh-profile-btn" class="btn-secondary" data-i18n="btn-refresh">
-              <i data-lucide="refresh-cw" class="icon"></i> Refresh
-            </button>
-          </div>
-        </div>
-
-        <div id="profile-content" class="profile-content">
-          <div class="loading" data-i18n="loading-profile">Loading profile...</div>
-        </div>
-      </div>
-
-      <div class="add-section">
-        <h2 data-i18n="section-add">└─ ADD NEW MEMORY ──</h2>
-        <form id="add-form">
-          <div class="form-row">
-            <div class="form-group">
-              <label data-i18n="label-tag">Tag:</label>
-              <select id="add-tag" required>
-                <option value="" data-i18n="opt-select-tag">Select tag</option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label data-i18n="label-type">Type:</label>
-              <select id="add-type">
-                <option value="" data-i18n="opt-other">other</option>
-                <option value="feature" data-i18n="opt-feature">feature</option>
-                <option value="bug-fix" data-i18n="opt-bug-fix">bug-fix</option>
-                <option value="refactor" data-i18n="opt-refactor">refactor</option>
-                <option value="architecture" data-i18n="opt-architecture">architecture</option>
-                <option value="rule" data-i18n="opt-rule">rule</option>
-                <option value="documentation" data-i18n="opt-documentation">documentation</option>
-                <option value="discussion" data-i18n="opt-discussion">discussion</option>
-                <option value="analysis" data-i18n="opt-analysis">analysis</option>
-                <option value="configuration" data-i18n="opt-configuration">configuration</option>
-              </select>
-            </div>
-
-            <div class="form-group">
-              <label data-i18n="label-tags">Tags:</label>
-              <input
-                type="text"
-                id="add-tags"
-                data-i18n-placeholder="placeholder-tags"
-                placeholder="react, hooks, auth (comma separated)"
-              />
-            </div>
-          </div>
-
-          <div class="form-group">
-            <label data-i18n="label-content">Content:</label>
-            <textarea
-              id="add-content"
-              rows="4"
-              data-i18n-placeholder="placeholder-content"
-              placeholder="Enter memory content..."
-              required
-            ></textarea>
-          </div>
-
-          <button type="submit" class="btn-primary" data-i18n="btn-add-memory">
-            <i data-lucide="plus" class="icon"></i> Add Memory
-          </button>
-        </form>
-      </div>
-    </div>
-
-    <div id="edit-modal" class="modal hidden">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3 data-i18n="modal-edit-title">Edit Memory</h3>
-          <button class="modal-close" id="modal-close"><i data-lucide="x" class="icon"></i></button>
-        </div>
-        <form id="edit-form">
-          <input type="hidden" id="edit-id" />
-          <div class="form-group">
-            <label data-i18n="label-content">Content:</label>
-            <textarea id="edit-content" rows="6" required></textarea>
-          </div>
-          <div class="modal-actions">
-            <button type="button" class="btn-secondary" id="cancel-edit" data-i18n="btn-cancel">
-              <i data-lucide="x" class="icon"></i> Cancel
-            </button>
-            <button type="submit" class="btn-primary" data-i18n="btn-save">
-              <i data-lucide="check" class="icon"></i> Save Changes
-            </button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <div id="toast" class="toast hidden"></div>
-
-    <div id="tag-migration-overlay" class="modal hidden">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3 data-i18n="modal-migration-title">Memory Tagging Migration</h3>
-        </div>
-        <div class="migration-progress-body">
-          <p id="tag-migration-status" data-i18n="status-migration-init">
-            Initializing migration...
-          </p>
-          <div class="progress-bar-container">
-            <div id="tag-migration-progress" class="progress-bar" style="width: 0%"></div>
-          </div>
-          <p class="migration-note" data-i18n="migration-note">
-            Please don't close the browser. This will re-vectorize your memories with technical tags
-            to improve search accuracy.
-          </p>
-        </div>
-        <div class="modal-actions" id="tag-migration-actions">
-          <button id="start-tag-migration-btn" class="btn-primary" data-i18n="btn-start-migration">
-            <i data-lucide="play" class="icon"></i> Start Migration
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <div id="changelog-modal" class="modal hidden">
-      <div class="modal-content">
-        <div class="modal-header">
-          <h3 data-i18n="modal-changelog-title">Profile Version History</h3>
-          <button class="modal-close" id="changelog-close">
-            <i data-lucide="x" class="icon"></i>
-          </button>
-        </div>
-        <div id="changelog-list" class="changelog-list">
-          <div class="loading" data-i18n="loading-changelog">Loading changelog...</div>
-        </div>
-      </div>
-    </div>
-
-    <div id="profile-item-modal" class="modal hidden">
-      <div class="modal-content profile-item-modal-content">
-        <div class="modal-header">
-          <h3 id="profile-item-modal-title" data-i18n="btn-edit">Edit Item</h3>
-          <button class="modal-close" id="profile-item-modal-close">
-            <i data-lucide="x" class="icon"></i>
-          </button>
-        </div>
-        <form id="profile-item-form">
-          <div class="form-group">
-            <label data-i18n="label-category">Category</label>
-            <input type="text" id="profile-item-category" />
-          </div>
-          <div class="form-group">
-            <label data-i18n="label-description">Description</label>
-            <textarea id="profile-item-description" rows="4"></textarea>
-          </div>
-          <div class="form-group" id="steps-section" style="display: none">
-            <label data-i18n="label-steps">Steps</label>
-            <div id="steps-container"></div>
-            <button
-              type="button"
-              class="btn-secondary btn-sm"
-              id="btn-add-step"
-              data-i18n="btn-add-step"
-            >
-              + Add Step
-            </button>
-          </div>
-          <div class="modal-actions">
-            <button
-              type="button"
-              class="btn-secondary"
-              id="profile-item-cancel"
-              data-i18n="btn-cancel"
-            >
-              Cancel
-            </button>
-            <button type="submit" class="btn-primary" id="profile-item-save">Save</button>
-          </div>
-        </form>
-      </div>
-    </div>
-
-    <div id="ai-cleanup-modal" class="modal hidden">
-      <div class="modal-content cleanup-modal-content">
-        <div class="modal-header">
-          <h3 data-i18n="label-ai-cleanup-title">AI Profile Cleanup</h3>
-          <button class="modal-close" id="cleanup-modal-close">
-            <i data-lucide="x" class="icon"></i>
-          </button>
-        </div>
-        <div id="cleanup-loading" class="cleanup-loading hidden">
-          <i data-lucide="loader" class="icon icon-spin"></i>
-          <span data-i18n="label-ai-cleanup-loading">AI is analyzing profile...</span>
-        </div>
-        <div id="cleanup-diff-v2" class="cleanup-diff-v2 hidden">
-          <div id="cleanup-toolbar" class="cleanup-toolbar">
-            <span id="cleanup-stats"></span>
-            <div class="toolbar-actions">
-              <button
-                class="btn-link"
-                id="cleanup-select-all"
-                data-i18n="label-ai-cleanup-select-all"
-              >
-                Select All
-              </button>
-              <button
-                class="btn-link"
-                id="cleanup-deselect-all"
-                data-i18n="label-ai-cleanup-deselect-all"
-              >
-                Deselect All
-              </button>
-            </div>
-          </div>
-          <div id="cleanup-sections"></div>
-          <div id="cleanup-kept-section" class="cleanup-section">
-            <h4 data-i18n="label-ai-cleanup-kept" class="collapse-header" id="cleanup-kept-toggle">
-              Remaining <span id="cleanup-kept-count"></span>
-              <i data-lucide="chevron-down" class="icon-xs"></i>
-            </h4>
-            <div id="cleanup-kept-list" class="cleanup-kept-list hidden"></div>
-          </div>
-        </div>
-        <div class="modal-actions" id="cleanup-actions">
-          <button id="cleanup-cancel-btn" class="btn-secondary" data-i18n="btn-cancel">
-            <i data-lucide="x" class="icon"></i> Cancel
-          </button>
-          <button id="cleanup-apply-btn" class="btn-primary hidden" data-i18n="btn-apply">
-            <i data-lucide="check" class="icon"></i> Apply
-          </button>
-        </div>
-      </div>
-    </div>
-
-    <script src="/app.js"></script>
-  </body>
-</html>
diff --git a/src/web/styles.css b/src/web/styles.css
deleted file mode 100644
index 4e71d14d..00000000
--- a/src/web/styles.css
+++ /dev/null
@@ -1,2310 +0,0 @@
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-body {
-  font-family: "JetBrains Mono", "Fira Code", "Consolas", monospace;
-  background: #0a0a0a;
-  color: #e0e0e0;
-  line-height: 1.6;
-  padding: 20px;
-  font-size: 14px;
-}
-
-.container {
-  max-width: 1400px;
-  margin: 0 auto;
-}
-
-.header {
-  border: 1px solid #333;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: #111;
-}
-
-.header-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-}
-
-.title {
-  color: #00ff00;
-  font-size: 18px;
-  font-weight: normal;
-  letter-spacing: 1px;
-  margin: 0;
-}
-
-.github-link {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 8px;
-  border: 1px solid #333;
-  background: #0a0a0a;
-  color: #00ff00;
-  text-decoration: none;
-  transition: all 0.2s;
-}
-
-.github-link:hover {
-  background: #00ff00;
-  color: #0a0a0a;
-  border-color: #00ff00;
-}
-
-.github-link .icon {
-  width: 20px;
-  height: 20px;
-}
-
-.stats-bar {
-  display: flex;
-  gap: 20px;
-  font-size: 12px;
-  color: #888;
-  margin-top: 10px;
-}
-
-.stats-bar span {
-  padding: 4px 8px;
-  border: 1px solid #333;
-}
-
-.controls {
-  border: 1px solid #333;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: #111;
-  display: flex;
-  flex-wrap: wrap;
-  gap: 15px;
-  align-items: flex-end;
-}
-
-.filter-group,
-.search-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.filter-group label {
-  font-size: 11px;
-  color: #888;
-  text-transform: uppercase;
-}
-
-select,
-input[type="text"],
-textarea {
-  background: #0a0a0a;
-  border: 1px solid #333;
-  color: #e0e0e0;
-  padding: 8px 12px;
-  font-family: inherit;
-  font-size: 13px;
-  outline: none;
-  transition: border-color 0.2s;
-}
-
-select:focus,
-input[type="text"]:focus,
-textarea:focus {
-  border-color: #00ff00;
-}
-
-select {
-  cursor: pointer;
-  min-width: 150px;
-}
-
-.search-group {
-  flex: 1;
-  min-width: 300px;
-}
-
-.search-group input {
-  width: 100%;
-}
-
-.search-group {
-  flex-direction: row;
-  align-items: stretch;
-}
-
-.search-group input {
-  flex: 1;
-  border-right: none;
-}
-
-button {
-  background: #0a0a0a;
-  border: 1px solid #333;
-  color: #00ff00;
-  padding: 8px 16px;
-  font-family: inherit;
-  font-size: 13px;
-  cursor: pointer;
-  transition: all 0.2s;
-}
-
-button:hover:not(:disabled) {
-  background: #00ff00;
-  color: #0a0a0a;
-  border-color: #00ff00;
-}
-
-button:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.btn-primary {
-  background: #00ff00;
-  color: #0a0a0a;
-  border-color: #00ff00;
-}
-
-.btn-primary:hover {
-  background: #00cc00;
-  border-color: #00cc00;
-}
-
-.btn-secondary {
-  background: #333;
-  color: #e0e0e0;
-}
-
-.btn-secondary:hover {
-  background: #444;
-}
-
-.bulk-actions {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  padding: 10px;
-  border: 1px solid #ff4444;
-  background: rgba(255, 68, 68, 0.1);
-}
-
-.bulk-actions span {
-  color: #ff4444;
-  font-size: 12px;
-}
-
-.bulk-actions button {
-  border-color: #ff4444;
-  color: #ff4444;
-}
-
-.bulk-actions button:hover {
-  background: #ff4444;
-  color: #0a0a0a;
-}
-
-.maintenance-actions {
-  display: flex;
-  gap: 10px;
-}
-
-.btn-maintenance {
-  border-color: #ffaa00;
-  color: #ffaa00;
-  padding: 8px 16px;
-  font-size: 12px;
-}
-
-.btn-maintenance:hover {
-  background: #ffaa00;
-  color: #0a0a0a;
-}
-
-.migration-section {
-  border: 2px solid #ff4444;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: rgba(255, 68, 68, 0.05);
-  border-radius: 4px;
-}
-
-.migration-warning {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: #ff4444;
-  font-weight: bold;
-  margin-bottom: 15px;
-  font-size: 14px;
-}
-
-.migration-warning .icon {
-  width: 20px;
-  height: 20px;
-  flex-shrink: 0;
-}
-
-.migration-info {
-  margin-bottom: 15px;
-  padding: 12px;
-  background: rgba(0, 0, 0, 0.3);
-  border: 1px solid #333;
-  border-radius: 4px;
-}
-
-.migration-info label {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  color: #e0e0e0;
-  font-size: 13px;
-  cursor: pointer;
-  user-select: none;
-}
-
-.migration-info input[type="checkbox"] {
-  width: 18px;
-  height: 18px;
-  cursor: pointer;
-  accent-color: #ff4444;
-  flex-shrink: 0;
-}
-
-.migration-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.btn-migration {
-  flex: 1;
-  padding: 12px 16px;
-  background: #0a0a0a;
-  border: 1px solid #ff4444;
-  color: #ff4444;
-  cursor: pointer;
-  border-radius: 4px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  font-size: 13px;
-  font-weight: bold;
-  transition: all 0.2s;
-}
-
-.btn-migration:hover:not(:disabled) {
-  background: #ff4444;
-  color: #0a0a0a;
-  border-color: #ff4444;
-}
-
-.btn-migration:disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-.btn-migration .icon {
-  width: 16px;
-  height: 16px;
-}
-
-.combined-card {
-  border: 1px solid #333;
-  margin-bottom: 20px;
-  background: #0a0a0a;
-}
-
-.combined-card.selected {
-  border-color: #00ff00;
-}
-
-.combined-prompt-section {
-  padding: 15px;
-  background: rgba(0, 204, 255, 0.05);
-  border-bottom: 1px dashed #333;
-}
-
-.combined-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 10px;
-}
-
-.combined-divider {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 20px;
-  background: #111;
-  border-top: 1px solid #222;
-  border-bottom: 1px solid #222;
-}
-
-.divider-icon {
-  width: 14px;
-  height: 14px;
-  color: #666;
-}
-
-.combined-memory-section {
-  padding: 15px;
-  background: rgba(0, 255, 0, 0.02);
-}
-
-.badge-memory {
-  color: #00ff00;
-  border-color: #00ff00;
-  font-weight: bold;
-}
-
-.memories-section {
-  border: 1px solid #333;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: #111;
-}
-
-.section-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 15px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid #333;
-}
-
-.section-header h2 {
-  color: #00ff00;
-  font-size: 14px;
-  font-weight: normal;
-}
-
-.pagination {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.pagination span {
-  font-size: 12px;
-  color: #888;
-  min-width: 100px;
-  text-align: center;
-}
-
-.pagination button {
-  padding: 4px 12px;
-  font-size: 12px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 36px;
-}
-
-#pagination-bottom {
-  margin-top: 15px;
-  padding-top: 15px;
-  border-top: 1px solid #333;
-  justify-content: center;
-}
-
-.pagination-bar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  margin-top: 10px;
-  padding-top: 8px;
-  border-top: 1px solid var(--border, #333);
-}
-
-.pagination-bar .pagination-info {
-  font-size: 11px;
-  color: var(--text-secondary, #888);
-  margin-right: 4px;
-}
-
-.pagination-bar .btn-page {
-  background: var(--bg-secondary, #2a2a2a);
-  border: 1px solid var(--border, #444);
-  color: var(--text-primary, #eee);
-  font-size: 12px;
-  padding: 2px 8px;
-  border-radius: 4px;
-  cursor: pointer;
-}
-
-.pagination-bar .btn-page:hover:not([disabled]) {
-  background: var(--accent, #4a90d9);
-  color: #fff;
-}
-
-.pagination-bar .btn-page[disabled] {
-  opacity: 0.35;
-  cursor: default;
-}
-
-.pagination-bar .btn-page.active {
-  background: var(--accent, #4a90d9);
-  color: #fff;
-  border-color: var(--accent, #4a90d9);
-}
-
-.memories-list {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 200px;
-  max-height: 600px;
-  overflow-y: auto;
-  padding-right: 10px;
-}
-
-.memories-list::-webkit-scrollbar {
-  width: 8px;
-}
-
-.memories-list::-webkit-scrollbar-track {
-  background: #0a0a0a;
-}
-
-.memories-list::-webkit-scrollbar-thumb {
-  background: #333;
-  border-radius: 4px;
-}
-
-.memories-list::-webkit-scrollbar-thumb:hover {
-  background: #444;
-}
-
-.memory-card {
-  border: 1px solid #333;
-  padding: 15px;
-  background: #0a0a0a;
-  transition: border-color 0.2s;
-  position: relative;
-}
-
-.memory-card:hover {
-  border-color: #00ff00;
-}
-
-.memory-card.selected {
-  border-color: #00ff00;
-  background: rgba(0, 255, 0, 0.05);
-}
-
-.tags-list {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin: 8px 0;
-}
-
-.tag-badge {
-  background: rgba(0, 255, 0, 0.1);
-  color: #00ff00;
-  border: 1px solid rgba(0, 255, 0, 0.3);
-  padding: 2px 8px;
-  font-size: 11px;
-  border-radius: 12px;
-  white-space: nowrap;
-}
-
-.migration-progress-body {
-  padding: 20px;
-}
-
-.progress-bar-container {
-  width: 100%;
-  height: 8px;
-  background: #222;
-  border-radius: 4px;
-  margin: 15px 0;
-  overflow: hidden;
-}
-
-.progress-bar {
-  height: 100%;
-  background: #00ff00;
-  transition: width 0.3s ease;
-}
-
-.migration-note {
-  font-size: 12px;
-  color: #888;
-  margin-top: 10px;
-}
-
-#tag-migration-actions {
-  padding: 20px;
-  border-top: 1px solid #333;
-}
-
-.memory-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 10px;
-  flex-wrap: wrap;
-  gap: 10px;
-}
-
-.memory-meta {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.memory-display-name {
-  color: #00ff00;
-  font-weight: bold;
-  font-size: 13px;
-}
-
-.memory-subtitle {
-  color: #888;
-  font-size: 11px;
-  margin-left: 5px;
-}
-
-.memory-checkbox {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  accent-color: #00ff00;
-}
-
-.badge {
-  font-size: 10px;
-  padding: 3px 8px;
-  border: 1px solid #333;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.badge-user {
-  color: #00ccff;
-  border-color: #00ccff;
-}
-
-.badge-project {
-  color: #ffaa00;
-  border-color: #ffaa00;
-}
-
-.badge-type {
-  color: #888;
-}
-
-.badge-pinned {
-  color: #ff00ff;
-  border-color: #ff00ff;
-  font-weight: bold;
-}
-
-.memory-card.pinned {
-  border-left: 3px solid #ff00ff;
-}
-
-.memory-content {
-  color: #e0e0e0;
-  margin: 10px 0;
-  word-wrap: break-word;
-}
-
-.memory-footer {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-top: 10px;
-  padding-top: 10px;
-  border-top: 1px solid #222;
-  font-size: 11px;
-  color: #666;
-}
-
-.memory-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.memory-actions button {
-  padding: 4px 10px;
-  font-size: 11px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.btn-edit {
-  border-color: #00ccff;
-  color: #00ccff;
-}
-
-.btn-edit:hover {
-  background: #00ccff;
-  color: #0a0a0a;
-}
-
-.btn-delete {
-  border-color: #ff4444;
-  color: #ff4444;
-}
-
-.btn-delete:hover {
-  background: #ff4444;
-  color: #0a0a0a;
-}
-
-.btn-pin {
-  border-color: #ff00ff;
-  color: #ff00ff;
-  font-size: 14px;
-  padding: 4px 8px;
-  min-width: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.btn-pin:hover {
-  background: #ff00ff;
-  color: #0a0a0a;
-}
-
-.btn-pin.pinned {
-  background: #ff00ff;
-  color: #0a0a0a;
-}
-
-.btn-pin.pinned .icon {
-  fill: #0a0a0a;
-}
-
-.btn-edit,
-.btn-delete {
-  min-width: 32px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-}
-
-.similarity-score {
-  color: #00ff00;
-  font-weight: bold;
-}
-
-.loading,
-.empty-state,
-.error-state {
-  text-align: center;
-  padding: 40px;
-  color: #666;
-  font-size: 13px;
-}
-
-.error-state {
-  color: #ff4444;
-}
-
-.add-section {
-  border: 1px solid #333;
-  padding: 20px;
-  background: #111;
-}
-
-.add-section h2 {
-  color: #00ff00;
-  font-size: 14px;
-  font-weight: normal;
-  margin-bottom: 15px;
-}
-
-.form-row {
-  display: flex;
-  gap: 15px;
-  margin-bottom: 15px;
-  flex-wrap: wrap;
-}
-
-.form-group {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-  flex: 1;
-  min-width: 200px;
-}
-
-.form-group label {
-  font-size: 11px;
-  color: #888;
-  text-transform: uppercase;
-}
-
-textarea {
-  resize: vertical;
-  min-height: 80px;
-}
-
-.modal {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: rgba(0, 0, 0, 0.9);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 1000;
-}
-
-.modal-content {
-  background: #111;
-  border: 1px solid #00ff00;
-  padding: 0;
-  max-width: 600px;
-  width: 90%;
-  max-height: 80vh;
-  overflow-y: auto;
-}
-
-.modal-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 20px;
-  border-bottom: 1px solid #333;
-}
-
-.modal-header h3 {
-  color: #00ff00;
-  font-size: 16px;
-  font-weight: normal;
-}
-
-.modal-close {
-  background: none;
-  border: 1px solid #ff4444;
-  color: #ff4444;
-  font-size: 20px;
-  padding: 0;
-  width: 30px;
-  height: 30px;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal-close .icon {
-  width: 18px;
-  height: 18px;
-}
-
-.modal-close:hover {
-  color: #fff;
-  background: #ff4444;
-}
-
-.modal form {
-  padding: 20px;
-}
-
-.modal-actions {
-  display: flex;
-  gap: 10px;
-  justify-content: flex-end;
-  margin-top: 20px;
-}
-
-.toast {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  background: #111;
-  border: 1px solid #00ff00;
-  color: #e0e0e0;
-  padding: 15px 20px;
-  font-size: 13px;
-  z-index: 2000;
-  animation: slideIn 0.3s ease;
-  max-width: 400px;
-}
-
-.toast.error {
-  border-color: #ff4444;
-}
-
-.toast.success {
-  border-color: #00ff00;
-}
-
-@keyframes slideIn {
-  from {
-    transform: translateX(400px);
-    opacity: 0;
-  }
-  to {
-    transform: translateX(0);
-    opacity: 1;
-  }
-}
-
-.hidden {
-  display: none !important;
-}
-
-#refresh-indicator {
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.icon {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-  stroke-width: 2;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-  fill: none;
-  vertical-align: middle;
-  display: inline-block;
-}
-
-.icon-sm {
-  width: 14px;
-  height: 14px;
-}
-
-.icon-md {
-  width: 16px;
-  height: 16px;
-}
-
-.icon-lg {
-  width: 20px;
-  height: 20px;
-}
-
-.icon-spin {
-  animation: spin 1s linear infinite;
-}
-
-.icon-filled {
-  fill: currentColor;
-}
-
-button .icon {
-  margin-right: 4px;
-}
-
-button:only-child .icon,
-.btn-pin .icon,
-.btn-edit .icon,
-.btn-delete .icon,
-.modal-close .icon,
-#search-btn .icon,
-#clear-search-btn .icon,
-.pagination button .icon {
-  margin-right: 0;
-}
-
-@media (max-width: 768px) {
-  body {
-    padding: 10px;
-    font-size: 12px;
-  }
-
-  .header-top {
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .title {
-    font-size: 14px;
-  }
-
-  .github-link {
-    padding: 6px;
-  }
-
-  .github-link .icon {
-    width: 18px;
-    height: 18px;
-  }
-
-  .controls {
-    flex-direction: column;
-    align-items: stretch;
-  }
-
-  .filter-group,
-  .search-group {
-    width: 100%;
-  }
-
-  .section-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 10px;
-  }
-
-  .pagination {
-    width: 100%;
-    justify-content: center;
-  }
-
-  .form-row {
-    flex-direction: column;
-  }
-
-  .memory-header {
-    flex-direction: column;
-    gap: 10px;
-  }
-
-  .memory-footer {
-    flex-direction: column;
-    gap: 10px;
-    align-items: flex-start;
-  }
-}
-
-.scope-tabs {
-  display: flex;
-  gap: 0;
-  margin-bottom: 20px;
-  border: 1px solid #333;
-  background: #111;
-}
-
-.tab-btn {
-  flex: 1;
-  padding: 15px 20px;
-  background: #0a0a0a;
-  border: none;
-  border-right: 1px solid #333;
-  color: #666;
-  font-size: 13px;
-  font-weight: bold;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 8px;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.tab-btn:last-child {
-  border-right: none;
-}
-
-.tab-btn:hover {
-  background: #111;
-  color: #888;
-}
-
-.tab-btn.active {
-  background: #00ff00;
-  color: #0a0a0a;
-  border-color: #00ff00;
-}
-
-.tab-btn .icon {
-  width: 18px;
-  height: 18px;
-}
-
-.badge-linked {
-  color: #ff00ff;
-  border-color: #ff00ff;
-  font-weight: bold;
-  animation: pulse 2s infinite;
-}
-
-@keyframes pulse {
-  0%,
-  100% {
-    opacity: 1;
-  }
-  50% {
-    opacity: 0.6;
-  }
-}
-
-.link-indicator {
-  text-align: center;
-  padding: 8px;
-  margin-top: 10px;
-  border-top: 1px dashed #ff00ff;
-  color: #ff00ff;
-  font-size: 11px;
-  font-weight: bold;
-  letter-spacing: 1px;
-}
-
-.prompt-card {
-  border: 1px solid #333;
-  border-left: 3px solid #00ccff;
-  padding: 15px;
-  background: rgba(0, 204, 255, 0.03);
-  transition: all 0.2s;
-  position: relative;
-}
-
-.prompt-card:hover {
-  border-color: #00ccff;
-  background: rgba(0, 204, 255, 0.08);
-}
-
-.prompt-card.selected {
-  border-color: #00ccff;
-  background: rgba(0, 204, 255, 0.1);
-}
-
-.prompt-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 10px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid rgba(0, 204, 255, 0.2);
-}
-
-.prompt-header .meta {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  flex-wrap: wrap;
-}
-
-.badge-prompt {
-  color: #00ccff;
-  border-color: #00ccff;
-  font-weight: bold;
-  font-size: 10px;
-}
-
-.prompt-content {
-  color: #ccc;
-  font-style: italic;
-  line-height: 1.6;
-  padding: 10px 0;
-  font-size: 13px;
-  word-wrap: break-word;
-}
-
-.prompt-date {
-  font-size: 11px;
-  color: #666;
-}
-
-.prompt-actions {
-  display: flex;
-  gap: 5px;
-}
-
-.prompt-actions button {
-  padding: 4px 10px;
-  font-size: 11px;
-  white-space: nowrap;
-}
-
-.memory-card {
-  border-left: 3px solid #00ff00;
-}
-
-.markdown-content {
-  line-height: 1.8;
-  color: #e0e0e0;
-}
-
-.markdown-content h1,
-.markdown-content h2,
-.markdown-content h3 {
-  color: #00ff00;
-  font-weight: bold;
-  margin: 16px 0 8px 0;
-  border-bottom: 1px solid #333;
-  padding-bottom: 4px;
-}
-
-.markdown-content h1 {
-  font-size: 18px;
-}
-.markdown-content h2 {
-  font-size: 16px;
-}
-.markdown-content h3 {
-  font-size: 14px;
-}
-
-.markdown-content p {
-  margin: 8px 0;
-}
-
-.markdown-content ul,
-.markdown-content ol {
-  margin: 8px 0;
-  padding-left: 24px;
-}
-
-.markdown-content li {
-  margin: 4px 0;
-}
-
-.markdown-content code {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  padding: 2px 6px;
-  border-radius: 3px;
-  font-family: "JetBrains Mono", monospace;
-  font-size: 12px;
-  color: #00ccff;
-}
-
-.markdown-content pre {
-  background: #1a1a1a;
-  border: 1px solid #333;
-  padding: 12px;
-  border-radius: 4px;
-  overflow-x: auto;
-  margin: 12px 0;
-}
-
-.markdown-content pre code {
-  background: none;
-  border: none;
-  padding: 0;
-  color: #e0e0e0;
-}
-
-.markdown-content blockquote {
-  border-left: 3px solid #00ff00;
-  padding-left: 12px;
-  margin: 12px 0;
-  color: #888;
-  font-style: italic;
-}
-
-.markdown-content table {
-  border-collapse: collapse;
-  width: 100%;
-  margin: 12px 0;
-}
-
-.markdown-content th,
-.markdown-content td {
-  border: 1px solid #333;
-  padding: 8px 12px;
-  text-align: left;
-}
-
-.markdown-content th {
-  background: #1a1a1a;
-  color: #00ff00;
-  font-weight: bold;
-}
-
-.markdown-content a {
-  color: #00ccff;
-  text-decoration: none;
-  border-bottom: 1px dotted #00ccff;
-}
-
-.markdown-content a:hover {
-  color: #00ff00;
-  border-bottom-color: #00ff00;
-}
-
-.markdown-content strong {
-  color: #00ff00;
-  font-weight: bold;
-}
-
-.markdown-content em {
-  color: #ffaa00;
-  font-style: italic;
-}
-
-.markdown-content del {
-  color: #666;
-  text-decoration: line-through;
-}
-
-.markdown-content hr {
-  border: none;
-  border-top: 1px solid #333;
-  margin: 16px 0;
-}
-
-html {
-  scroll-behavior: smooth;
-}
-
-button:focus-visible,
-input:focus-visible,
-select:focus-visible,
-textarea:focus-visible {
-  outline: 2px solid #00ff00;
-  outline-offset: 2px;
-}
-
-.memory-card::before,
-.prompt-card::before {
-  content: "";
-  position: absolute;
-  top: 0;
-  left: -100%;
-  width: 100%;
-  height: 100%;
-  background: linear-gradient(90deg, transparent, rgba(0, 255, 0, 0.05), transparent);
-  transition: left 0.5s;
-}
-
-.memory-card:hover::before {
-  left: 100%;
-}
-
-.prompt-card::before {
-  background: linear-gradient(90deg, transparent, rgba(0, 204, 255, 0.05), transparent);
-}
-
-.prompt-card:hover::before {
-  left: 100%;
-}
-
-.toast {
-  animation: slideInBounce 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
-}
-
-@keyframes slideInBounce {
-  0% {
-    transform: translateX(400px);
-    opacity: 0;
-  }
-  60% {
-    transform: translateX(-20px);
-    opacity: 1;
-  }
-  80% {
-    transform: translateX(10px);
-  }
-  100% {
-    transform: translateX(0);
-  }
-}
-
-.profile-section {
-  border: 1px solid #333;
-  padding: 20px;
-  margin-bottom: 20px;
-  background: #111;
-}
-
-.profile-content {
-  min-height: 300px;
-}
-
-.profile-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 15px;
-  margin-bottom: 20px;
-  border: 1px solid #333;
-  background: #111;
-  border-left: 3px solid #00ccff;
-}
-
-.profile-info h3 {
-  color: #00ccff;
-  font-size: 16px;
-  margin: 0 0 10px 0;
-  letter-spacing: 0.5px;
-}
-
-.profile-stats {
-  display: flex;
-  gap: 15px;
-}
-
-.stat-pill {
-  display: flex;
-  flex-direction: column;
-}
-
-.stat-pill .label {
-  font-size: 9px;
-  color: #666;
-  text-transform: uppercase;
-}
-
-.stat-pill .value {
-  font-size: 12px;
-  color: #ccc;
-  font-family: monospace;
-}
-
-.dashboard-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-}
-
-.dashboard-section {
-  background: #111;
-  border: 1px solid #333;
-  padding: 15px;
-  display: flex;
-  flex-direction: column;
-}
-
-.dashboard-section.full-width {
-  width: 100%;
-}
-
-.dashboard-section h4 {
-  color: #888;
-  font-size: 11px;
-  margin-bottom: 15px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid #222;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  letter-spacing: 1px;
-}
-
-.dashboard-section h4 .count {
-  background: #222;
-  color: #ccc;
-  padding: 1px 6px;
-  border-radius: 10px;
-  font-size: 9px;
-  margin-left: auto;
-}
-
-.cards-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 10px;
-}
-
-.compact-card {
-  background: #0a0a0a;
-  border: 1px solid #2a2a2a;
-  padding: 10px;
-  transition: all 0.2s ease;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-
-.compact-card:hover {
-  border-color: #444;
-  transform: translateY(-1px);
-}
-
-.preference-card {
-  border-top: 2px solid #00ccff;
-}
-
-.pattern-card {
-  border-top: 2px solid #ffaa00;
-}
-
-.card-top {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-  margin-bottom: 8px;
-}
-
-.category-tag {
-  font-size: 9px;
-  text-transform: uppercase;
-  color: #666;
-  background: #161616;
-  padding: 2px 6px;
-  border-radius: 2px;
-  border: 1px solid #222;
-}
-
-.confidence-ring {
-  font-size: 9px;
-  color: #00ccff;
-  font-weight: bold;
-}
-
-.card-body {
-  margin-bottom: 8px;
-}
-
-.card-text {
-  font-size: 12px;
-  color: #d0d0d0;
-  line-height: 1.4;
-}
-
-.card-footer {
-  border-top: 1px solid #1a1a1a;
-  padding-top: 6px;
-  margin-top: auto;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: #555;
-}
-.workflow-footer {
-  border-top: 1px solid #1a1a1a;
-  padding-top: 6px;
-  margin-top: 8px;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  font-size: 11px;
-  color: #555;
-}
-
-.evidence-count {
-  display: inline-flex;
-  align-items: center;
-  cursor: help;
-  color: #666;
-  font-size: 11px;
-}
-
-.evidence-sep {
-  color: #444;
-}
-
-.evidence-toggle {
-  font-size: 11px;
-  color: #555;
-  cursor: help;
-  display: inline-flex;
-  align-items: center;
-  gap: 3px;
-}
-
-.evidence-toggle:hover {
-  color: #888;
-}
-
-.evidence-count:hover {
-  color: #888;
-}
-
-.workflows-grid {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.workflow-row {
-  background: #0a0a0a;
-  border: 1px solid #2a2a2a;
-  padding: 12px;
-}
-
-.workflow-title {
-  font-size: 12px;
-  color: #ffcc00;
-  font-weight: bold;
-  margin-bottom: 10px;
-}
-
-.workflow-steps-horizontal {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 8px;
-}
-
-.step-node {
-  display: flex;
-  align-items: center;
-  background: #111;
-  border: 1px solid #333;
-  border-radius: 4px;
-  padding: 4px 8px;
-  gap: 6px;
-}
-
-.step-idx {
-  font-size: 9px;
-  background: #222;
-  color: #888;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
-
-.step-content {
-  font-size: 11px;
-  color: #bbb;
-}
-
-.step-arrow {
-  width: 12px;
-  height: 12px;
-  color: #444;
-}
-
-.icon-xs {
-  width: 10px;
-  height: 10px;
-}
-
-.changelog-list {
-  padding: 20px;
-  max-height: 500px;
-  overflow-y: auto;
-}
-
-.changelog-item {
-  border: 1px solid #333;
-  padding: 15px;
-  margin-bottom: 10px;
-  background: #0a0a0a;
-  transition: border-color 0.2s;
-}
-
-.changelog-item:hover {
-  border-color: #00ccff;
-}
-
-.changelog-header {
-  display: flex;
-  gap: 10px;
-  align-items: center;
-  margin-bottom: 8px;
-  flex-wrap: wrap;
-}
-
-.changelog-version {
-  background: #00ccff;
-  color: #0a0a0a;
-  padding: 4px 10px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: bold;
-}
-
-.changelog-type {
-  color: #888;
-  font-size: 11px;
-  text-transform: uppercase;
-  border: 1px solid #333;
-  padding: 4px 8px;
-}
-
-.changelog-date {
-  color: #666;
-  font-size: 11px;
-  margin-left: auto;
-}
-
-.changelog-summary {
-  color: #ccc;
-  font-size: 12px;
-  line-height: 1.6;
-}
-
-.icon-large {
-  width: 48px;
-  height: 48px;
-  margin-bottom: 15px;
-  opacity: 0.5;
-}
-
-/* Profile item actions */
-.card-actions {
-  display: flex;
-  gap: 2px;
-  margin-right: 8px;
-}
-
-.btn-icon {
-  background: none;
-  border: none;
-  cursor: pointer;
-  padding: 2px 4px;
-  border-radius: 3px;
-  color: #666;
-  transition:
-    color 0.15s,
-    background 0.15s;
-}
-
-.btn-icon:hover {
-  color: #00ff00;
-  background: rgba(0, 255, 0, 0.08);
-}
-
-.btn-delete-profile-item:hover {
-  color: #ff4444;
-  background: rgba(255, 50, 50, 0.08);
-}
-
-.card-top {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.workflow-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 8px;
-}
-
-.workflow-header .card-actions {
-  flex-shrink: 0;
-}
-
-@media (max-width: 768px) {
-  .profile-header {
-    flex-direction: column;
-    gap: 15px;
-  }
-
-  .skill-level {
-    grid-template-columns: 1fr;
-  }
-
-  .workflow-step {
-    flex-direction: column;
-    align-items: flex-start;
-  }
-}
-
-.profile-meta .separator {
-  margin: 0 8px;
-  color: #666;
-}
-
-.badge .icon-sm {
-  width: 12px;
-  height: 12px;
-  margin-right: 4px;
-  vertical-align: middle;
-}
-
-.link-indicator .icon-sm {
-  width: 14px;
-  height: 14px;
-  vertical-align: middle;
-}
-
-.category-badge {
-  background: #00ccff;
-  color: #0a0a0a;
-  padding: 4px 10px;
-  border-radius: 3px;
-  font-size: 11px;
-  font-weight: bold;
-}
-
-.lang-toggle {
-  background: #0a0a0a;
-  border: 1px solid #00ff00;
-  color: #00ff00;
-  padding: 4px 12px;
-  font-family: inherit;
-  font-size: 12px;
-  font-weight: bold;
-  cursor: pointer;
-  transition: all 0.2s;
-  letter-spacing: 1px;
-}
-.lang-toggle:hover {
-  background: #00ff00;
-  color: #0a0a0a;
-}
-
-/* AI Cleanup Modal */
-.cleanup-modal-content {
-  max-width: 700px;
-  max-height: 80vh;
-  display: flex;
-  flex-direction: column;
-  overflow: hidden;
-}
-
-.cleanup-loading {
-  text-align: center;
-  padding: 40px;
-  color: #888;
-}
-
-.cleanup-loading i {
-  display: block;
-  margin-bottom: 10px;
-}
-
-.cleanup-summary {
-  padding: 12px 16px;
-  background: #1a1a2e;
-  border-radius: 6px;
-  margin-bottom: 16px;
-  color: #00ff00;
-  font-weight: 600;
-}
-
-.cleanup-section {
-  margin-bottom: 16px;
-}
-
-.cleanup-section h4 {
-  color: #888;
-  margin-bottom: 8px;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-}
-
-.diff-group {
-  margin-bottom: 12px;
-  border-bottom: 1px solid #2a2a4a;
-  padding-bottom: 8px;
-}
-
-.diff-item {
-  padding: 6px 10px;
-  border-radius: 4px;
-  font-size: 0.85rem;
-  line-height: 1.5;
-}
-
-.diff-marker {
-  font-weight: 700;
-  margin-right: 6px;
-}
-
-.kept-item {
-  background: rgba(0, 255, 0, 0.05);
-}
-
-.kept-item .diff-marker {
-  color: #00ff00;
-}
-
-.removed-item {
-  background: rgba(255, 50, 50, 0.05);
-  color: #999;
-  text-decoration: line-through;
-}
-
-.removed-item .diff-marker {
-  color: #ff3232;
-}
-
-/* Profile item modal */
-.profile-item-modal-content {
-  max-width: 480px;
-}
-
-#profile-item-form .form-group {
-  margin-bottom: 12px;
-}
-
-#profile-item-form label {
-  display: block;
-  font-size: 0.8rem;
-  color: #888;
-  margin-bottom: 4px;
-}
-
-#profile-item-form input,
-#profile-item-form textarea {
-  width: 100%;
-  background: #1a1a2e;
-  border: 1px solid #333;
-  color: #c0e0c0;
-  padding: 8px;
-  border-radius: 4px;
-  font-family: inherit;
-}
-
-#profile-item-form input:disabled,
-#profile-item-form textarea:disabled {
-  opacity: 0.6;
-}
-
-#steps-container {
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-  margin-bottom: 8px;
-}
-
-.step-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.step-num {
-  color: var(--text-secondary);
-  font-size: 12px;
-  width: 20px;
-  text-align: center;
-  flex-shrink: 0;
-}
-
-.step-input {
-  flex: 1;
-  padding: 6px 8px;
-  font-size: 13px;
-  border: 1px solid var(--border-light);
-  border-radius: 4px;
-  background: var(--bg-input);
-  color: var(--text-primary);
-  font-family: inherit;
-}
-
-.step-input:focus {
-  outline: none;
-  border-color: var(--accent-blue);
-}
-
-.btn-remove-step {
-  background: none;
-  border: none;
-  color: var(--text-muted);
-  font-size: 16px;
-  cursor: pointer;
-  padding: 0 4px;
-  line-height: 1;
-}
-
-.btn-remove-step:hover {
-  color: #cc2222;
-}
-
-.btn-primary.danger {
-  background: #cc2222;
-  border-color: #ff4444;
-  color: #fff;
-}
-
-.btn-primary.danger:hover {
-  background: #dd3333;
-}
-
-.diff-reason {
-  display: block;
-  color: #666;
-  font-size: 0.75rem;
-  margin-top: 2px;
-  text-decoration: none;
-}
-
-.profile-actions {
-  display: flex;
-  gap: 8px;
-}
-
-/* V2 Diff Layout */
-.cleanup-diff-v2 {
-  overflow-y: auto;
-  max-height: 55vh;
-}
-
-.cleanup-toolbar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-bottom: 1px solid #2a2a4a;
-  margin-bottom: 12px;
-  font-size: 0.85rem;
-  color: #aaa;
-  position: sticky;
-  top: 0;
-  background: #0d0d1a;
-  z-index: 1;
-}
-
-.toolbar-actions {
-  display: flex;
-  gap: 12px;
-}
-
-.btn-link {
-  background: none;
-  border: none;
-  color: #00ff00;
-  cursor: pointer;
-  font-size: 0.8rem;
-  padding: 2px 0;
-}
-.btn-link:hover {
-  text-decoration: underline;
-}
-
-.section-divider {
-  font-size: 0.8rem;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin: 16px 0 8px;
-  padding-bottom: 6px;
-  border-bottom: 1px solid #1a1a2e;
-}
-.section-divider i {
-  vertical-align: middle;
-  margin-right: 4px;
-}
-
-.diff-card {
-  border-radius: 6px;
-  padding: 12px;
-  margin-bottom: 10px;
-}
-
-.merge-card {
-  border-left: 3px solid #00ff00;
-  background: rgba(0, 255, 0, 0.02);
-}
-
-.remove-card {
-  border-left: 3px solid #ff4444;
-  background: rgba(255, 50, 50, 0.02);
-}
-
-.diff-card-check {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 10px;
-  cursor: pointer;
-}
-
-.diff-card-check input[type="checkbox"] {
-  accent-color: #00ff00;
-  width: 16px;
-  height: 16px;
-}
-
-.remove-card .diff-card-check input[type="checkbox"] {
-  accent-color: #ff4444;
-}
-
-.check-label {
-  font-size: 0.8rem;
-  font-weight: 600;
-  color: #00ff00;
-}
-
-.remove-card .check-label {
-  color: #ff4444;
-}
-
-.merge-body {
-  display: grid;
-  grid-template-columns: 1fr auto 1fr;
-  gap: 10px;
-  align-items: flex-start;
-}
-
-.merge-before,
-.merge-after {
-  background: #111122;
-  border-radius: 4px;
-  padding: 8px;
-  font-size: 0.8rem;
-  line-height: 1.5;
-  color: #c0e0c0;
-}
-
-.merge-source {
-  padding: 4px 0;
-  border-bottom: 1px solid #1a1a2e;
-  color: #999;
-  text-decoration: line-through;
-}
-.merge-source:last-child {
-  border-bottom: none;
-}
-
-.type-badge {
-  display: inline-block;
-  background: #1a1a2e;
-  color: #888;
-  font-size: 0.65rem;
-  font-weight: 600;
-  padding: 1px 5px;
-  border-radius: 3px;
-  margin-right: 4px;
-  vertical-align: middle;
-  text-decoration: none;
-  text-transform: uppercase;
-}
-
-.merge-arrow {
-  align-self: center;
-  color: #00ff00;
-  font-size: 0.9rem;
-  padding-top: 12px;
-}
-
-.remove-body {
-  margin-left: 26px;
-}
-
-.remove-desc {
-  color: #c0e0c0;
-  font-size: 0.85rem;
-  text-decoration: line-through;
-  margin-bottom: 4px;
-}
-
-.remove-reason {
-  color: #ff8888;
-  font-size: 0.7rem;
-}
-
-.collapse-header {
-  cursor: pointer;
-  font-size: 0.8rem;
-  color: #888;
-  text-transform: uppercase;
-  letter-spacing: 1px;
-  margin-top: 12px;
-  user-select: none;
-}
-.collapse-header:hover {
-  color: #aaa;
-}
-.collapse-header i {
-  vertical-align: middle;
-  margin-left: 4px;
-  transition: transform 0.2s;
-}
-
-.cleanup-kept-list {
-  margin-top: 4px;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 4px;
-}
-
-.kept-item {
-  background: rgba(0, 255, 0, 0.03);
-  padding: 6px 8px;
-  border-radius: 3px;
-  font-size: 0.78rem;
-  color: #aaa;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.kept-item::before {
-  content: "✓ ";
-  color: #00ff00;
-  font-weight: 700;
-}
-
-/* Inline steps in AI cleanup diff */
-.cleanup-steps {
-  margin-top: 4px;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 2px;
-}
-
-.step-inline {
-  display: inline-flex;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.06);
-  border-radius: 3px;
-  padding: 1px 5px 1px 2px;
-  font-size: 0.7rem;
-  color: #aaa;
-}
-
-.step-inline-num {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 14px;
-  height: 14px;
-  border-radius: 50%;
-  background: rgba(255, 255, 255, 0.1);
-  font-size: 0.6rem;
-  margin-right: 3px;
-  flex-shrink: 0;
-}
-
-.step-arrow-inline {
-  color: #555;
-  font-size: 0.7rem;
-  margin: 0 1px;
-}
-
-/* ============================================
-   AI Cleanup selection UI
-   ============================================ */
-.cleanup-select-header {
-  flex-shrink: 0;
-  padding: 12px 0 8px;
-}
-.cleanup-select-header h3 {
-  font-size: 14px;
-  margin-bottom: 8px;
-  color: var(--text-primary, #eee);
-}
-.cleanup-select-actions {
-  display: flex;
-  gap: 6px;
-  flex-wrap: wrap;
-  margin-bottom: 8px;
-}
-.cleanup-select-actions .btn {
-  font-size: 11px;
-  padding: 3px 10px;
-}
-.cleanup-select-grid {
-  flex: 1;
-  overflow-y: auto;
-  border: 1px solid var(--border, #333);
-  border-radius: 6px;
-  padding: 4px;
-  min-height: 0;
-}
-
-#cleanup-sections {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  overflow: hidden;
-}
-.cleanup-cat-group {
-  margin-bottom: 4px;
-}
-.cleanup-cat-header {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 4px 8px;
-  background: var(--bg-secondary, #222);
-  border-radius: 4px;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-.cleanup-cat-header .cat-count {
-  font-size: 11px;
-  color: var(--text-secondary, #888);
-}
-.cleanup-item-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 3px 8px;
-  cursor: pointer;
-  font-size: 12px;
-  border-radius: 3px;
-}
-.cleanup-item-row:hover {
-  background: var(--bg-hover, #2a2a2a);
-}
-.cleanup-item-row input[type="checkbox"] {
-  flex-shrink: 0;
-}
-.cleanup-item-type {
-  font-size: 10px;
-  font-weight: 600;
-  color: var(--accent, #4a90d9);
-  width: 14px;
-  text-align: center;
-  flex-shrink: 0;
-}
-.cleanup-item-desc {
-  flex: 1;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--text-primary, #ddd);
-}
-.cleanup-item-stats {
-  font-size: 10px;
-  color: var(--text-secondary, #888);
-  flex-shrink: 0;
-  white-space: nowrap;
-}
-.cleanup-select-footer {
-  flex-shrink: 0;
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 10px 0 0;
-}
-.cleanup-select-footer span {
-  font-size: 12px;
-  color: var(--text-secondary, #888);
-}
-
-.auth-warning {
-  display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  border: 1px solid #ffcc00;
-  background: rgba(255, 204, 0, 0.08);
-  color: #ffcc00;
-  padding: 12px 16px;
-  margin-bottom: 16px;
-  font-size: 12px;
-  line-height: 1.5;
-}
-.auth-warning.hidden {
-  display: none;
-}
-.auth-warning-icon {
-  font-size: 18px;
-  line-height: 1;
-  flex-shrink: 0;
-}
-.auth-warning-icon svg {
-  width: 18px;
-  height: 18px;
-  stroke: #ffcc00;
-}
-.auth-warning-body {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.auth-warning-text {
-  color: #e0e0e0;
-}
diff --git a/tests/shared-api-types.test.ts b/tests/shared-api-types.test.ts
new file mode 100644
index 00000000..68b567cb
--- /dev/null
+++ b/tests/shared-api-types.test.ts
@@ -0,0 +1,38 @@
+import { describe, expect, it } from "bun:test";
+import {
+  ApiResultSchema,
+  MemoryItemSchema,
+  UserProfileSchema,
+  type ApiResult,
+  type MemoryItem,
+  type UserProfile,
+} from "../src/shared/api/index.js";
+
+describe("shared API contracts", () => {
+  it("parses ApiResult envelope", () => {
+    const parsed = ApiResultSchema.parse({ success: true, data: { ok: 1 } });
+    expect(parsed.success).toBe(true);
+    const typed: ApiResult<{ ok: number }> = { success: true, data: { ok: 1 } };
+    expect(typed.data?.ok).toBe(1);
+  });
+
+  it("accepts MemoryItem shape used by the web UI", () => {
+    const item: MemoryItem = {
+      id: "m1",
+      type: "memory",
+      content: "hello",
+      createdAt: new Date().toISOString(),
+      isPinned: true,
+    };
+    expect(MemoryItemSchema.parse(item).id).toBe("m1");
+  });
+
+  it("accepts UserProfile shape used by the web UI", () => {
+    const profile: UserProfile = {
+      exists: true,
+      userId: "u@example.com",
+      profileData: { preferences: [{ description: "prefers TS" }] },
+    };
+    expect(UserProfileSchema.parse(profile).exists).toBe(true);
+  });
+});
diff --git a/tests/web-memorytype-xss.test.ts b/tests/web-memorytype-xss.test.ts
index 863a1ea4..084b1980 100644
--- a/tests/web-memorytype-xss.test.ts
+++ b/tests/web-memorytype-xss.test.ts
@@ -1,125 +1,18 @@
 import { describe, expect, it } from "bun:test";
-import { readFileSync } from "node:fs";
-import { Script, createContext } from "node:vm";
-
-type RenderMemoryCard = (memory: MemoryFixture) => string;
-type RenderCombinedCard = (pair: CombinedCardFixture) => string;
-
-type MemoryFixture = {
-  id: string;
-  content: string;
-  memoryType: string;
-  tags: readonly string[];
-  createdAt: string;
-  displayName: string;
-  isPinned: boolean;
-};
-
-type PromptFixture = {
-  id: string;
-  content: string;
-  createdAt: string;
-};
-
-type CombinedCardFixture = {
-  memory: MemoryFixture;
-  prompt: PromptFixture;
-};
-
-type RenderHarness = {
-  renderMemoryCard: RenderMemoryCard;
-  renderCombinedCard: RenderCombinedCard;
-};
+import { escapeHtml } from "../web/src/lib/html.ts";
 
 const MALICIOUS_MEMORY_TYPE = '</span><img src=x onerror="window.__xssFired=true"><span>';
 
-function loadRenderHarness(): RenderHarness {
-  const source = readFileSync(new URL("../src/web/app.js", import.meta.url), "utf-8");
-  const context = createContext({
-    console,
-    DOMPurify: { sanitize: (html: string) => html },
-    getLanguage: () => "en",
-    lucide: { createIcons: () => undefined },
-    marked: { parse: (markdown: string) => markdown, setOptions: () => undefined },
-    t: (key: string) => key,
-    document: {
-      addEventListener: () => undefined,
-      createElement: () => {
-        let text = "";
-        return {
-          set textContent(value: string) {
-            text = value;
-          },
-          get innerHTML() {
-            return text
-              .replace(/&/g, "&amp;")
-              .replace(/</g, "&lt;")
-              .replace(/>/g, "&gt;")
-              .replace(/\"/g, "&quot;")
-              .replace(/'/g, "&#039;");
-          },
-        };
-      },
-    },
-  });
-
-  new Script(
-    `${source}\n;globalThis.__renderMemoryCard = renderMemoryCard;\n;globalThis.__renderCombinedCard = renderCombinedCard;`
-  ).runInContext(context);
-
-  return {
-    renderMemoryCard: context.__renderMemoryCard as RenderMemoryCard,
-    renderCombinedCard: context.__renderCombinedCard as RenderCombinedCard,
-  };
-}
-
-function createMemory(): MemoryFixture {
-  return {
-    id: "mem_xss_repro",
-    content: "benign content",
-    memoryType: MALICIOUS_MEMORY_TYPE,
-    tags: [],
-    createdAt: "2026-06-22T20:21:11.419Z",
-    displayName: "XSS repro memory",
-    isPinned: false,
-  };
-}
-
-function expectEscapedMemoryType(html: string): void {
-  expect(html).not.toContain("<img src=x");
-  expect(html).not.toContain('onerror="');
-  expect(html).toContain("&lt;/span&gt;&lt;img src=x");
-}
-
-describe("web memoryType rendering", () => {
-  it("escapes memoryType in standalone memory cards", () => {
+describe("web memoryType XSS helpers", () => {
+  it("escapes memoryType HTML event-handler payloads", () => {
     // Given: a stored memory with an HTML event-handler payload in memoryType.
-    const { renderMemoryCard } = loadRenderHarness();
-    const memory = createMemory();
-
-    // When: the Web UI renders the standalone memory card.
-    const html = renderMemoryCard(memory);
-
-    // Then: the payload is displayed as badge text, not parsed as executable HTML.
-    expectEscapedMemoryType(html);
-  });
-
-  it("escapes memoryType in combined prompt-memory cards", () => {
-    // Given: a stored memory linked to a prompt with an HTML payload in memoryType.
-    const { renderCombinedCard } = loadRenderHarness();
-    const memory = createMemory();
-
-    // When: the Web UI renders the combined prompt-memory card.
-    const html = renderCombinedCard({
-      memory,
-      prompt: {
-        id: "prompt_xss_repro",
-        content: "remember this",
-        createdAt: "2026-06-22T20:20:00.000Z",
-      },
-    });
+    // The React MemoryCard renders memoryType as text (JSX-escaped); escapeHtml
+    // is the shared defense for any HTML string sinks.
+    const escaped = escapeHtml(MALICIOUS_MEMORY_TYPE);
 
     // Then: the payload is displayed as badge text, not parsed as executable HTML.
-    expectEscapedMemoryType(html);
+    expect(escaped).not.toContain("<img src=x");
+    expect(escaped).not.toContain('onerror="');
+    expect(escaped).toContain("&lt;/span&gt;&lt;img src=x");
   });
 });
diff --git a/tests/web-userprofile-xss.test.ts b/tests/web-userprofile-xss.test.ts
index 3baab61d..7f480f99 100644
--- a/tests/web-userprofile-xss.test.ts
+++ b/tests/web-userprofile-xss.test.ts
@@ -1,91 +1,19 @@
 import { describe, expect, it } from "bun:test";
-import { readFileSync } from "node:fs";
-import { Script, createContext } from "node:vm";
+import { escapeHtml } from "../web/src/lib/html.ts";
 
 const MALICIOUS_DISPLAY_NAME = '<img src=x onerror="window.__xssFired=true">';
 
-function loadRenderHarness(): {
-  renderUserProfile: () => void;
-  state: { userProfile: unknown };
-  getHtml: () => string;
-} {
-  const source = readFileSync(new URL("../src/web/app.js", import.meta.url), "utf-8");
-
-  let capturedHtml = "";
-  const profileContainer = {
-    set innerHTML(value: string) {
-      capturedHtml = value;
-    },
-    get innerHTML() {
-      return capturedHtml;
-    },
-  };
-
-  const escapingDiv = () => {
-    let text = "";
-    return {
-      set textContent(value: string) {
-        text = value;
-      },
-      get innerHTML() {
-        return text
-          .replace(/&/g, "&amp;")
-          .replace(/</g, "&lt;")
-          .replace(/>/g, "&gt;")
-          .replace(/\"/g, "&quot;")
-          .replace(/'/g, "&#039;");
-      },
-    };
-  };
-
-  const context = createContext({
-    console,
-    DOMPurify: { sanitize: (html: string) => html },
-    getLanguage: () => "en",
-    lucide: { createIcons: () => undefined },
-    jsonrepair: undefined,
-    marked: { parse: (markdown: string) => markdown, setOptions: () => undefined },
-    t: (key: string) => key,
-    document: {
-      addEventListener: () => undefined,
-      getElementById: (id: string) => (id === "profile-content" ? profileContainer : undefined),
-      createElement: () => escapingDiv(),
-    },
-  });
-
-  new Script(
-    `${source}\n;globalThis.__renderUserProfile = renderUserProfile;\n;globalThis.__state = state;`
-  ).runInContext(context);
-
-  return {
-    renderUserProfile: context.__renderUserProfile as () => void,
-    state: context.__state as { userProfile: unknown },
-    getHtml: () => capturedHtml,
-  };
-}
-
-describe("web user-profile rendering", () => {
-  it("escapes displayName in the profile header", () => {
+describe("web user-profile XSS helpers", () => {
+  it("escapes displayName HTML event-handler payloads", () => {
     // Given: a stored user profile whose displayName came from an untrusted
     // per-project userNameOverride and contains an HTML event-handler payload.
-    const { renderUserProfile, state, getHtml } = loadRenderHarness();
-    state.userProfile = {
-      exists: true,
-      version: 1,
-      totalPromptsAnalyzed: 0,
-      lastAnalyzedAt: "2026-06-22T20:21:11.419Z",
-      userId: "user_xss_repro",
-      displayName: MALICIOUS_DISPLAY_NAME,
-      profileData: {},
-    };
-
-    // When: the Web UI renders the User Profile tab.
-    renderUserProfile();
-
-    // Then: the payload is displayed as header text, not parsed as executable HTML.
-    const html = getHtml();
-    expect(html).not.toContain("<img src=x");
-    expect(html).not.toContain('onerror="');
-    expect(html).toContain("&lt;img src=x");
+    // The React ProfileView renders displayName as text (JSX-escaped); escapeHtml
+    // is the shared defense for any HTML string sinks.
+    const escaped = escapeHtml(MALICIOUS_DISPLAY_NAME);
+
+    // Then: the payload is displayed as text, not parsed as executable HTML.
+    expect(escaped).not.toContain("<img src=x");
+    expect(escaped).not.toContain('onerror="');
+    expect(escaped).toContain("&lt;img src=x");
   });
 });
diff --git a/tsconfig.json b/tsconfig.json
index 888d707b..2c36be83 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -29,5 +29,5 @@
     "noPropertyAccessFromIndexSignature": false
   },
   "include": ["src/**/*"],
-  "exclude": ["node_modules", "dist"]
+  "exclude": ["node_modules", "dist", "src/v2"]
 }
diff --git a/web/.gitignore b/web/.gitignore
new file mode 100644
index 00000000..a547bf36
--- /dev/null
+++ b/web/.gitignore
@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/web/.vscode/extensions.json b/web/.vscode/extensions.json
new file mode 100644
index 00000000..99e242bb
--- /dev/null
+++ b/web/.vscode/extensions.json
@@ -0,0 +1,3 @@
+{
+  "recommendations": ["bradlc.vscode-tailwindcss"]
+}
diff --git a/web/bun.lock b/web/bun.lock
new file mode 100644
index 00000000..7d3e3b04
--- /dev/null
+++ b/web/bun.lock
@@ -0,0 +1,411 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "web",
+      "dependencies": {
+        "dompurify": "^3.4.12",
+        "jsonrepair": "^3.15.0",
+        "marked": "^18.0.7",
+        "zod": "^4.4.3",
+      },
+      "devDependencies": {
+        "@fontsource-variable/jetbrains-mono": "^5.3.0",
+        "@radix-ui/react-checkbox": "^1.3.3",
+        "@radix-ui/react-dialog": "^1.1.15",
+        "@radix-ui/react-label": "^2.1.8",
+        "@radix-ui/react-scroll-area": "^1.2.10",
+        "@radix-ui/react-separator": "^1.1.7",
+        "@radix-ui/react-slot": "^1.2.3",
+        "@tailwindcss/vite": "^4.3.3",
+        "@types/node": "^26.1.1",
+        "@types/react": "^19.1.8",
+        "@types/react-dom": "^19.1.6",
+        "@vitejs/plugin-react": "^5.0.0",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "lucide-react": "^0.525.0",
+        "react": "^19.1.0",
+        "react-dom": "^19.1.0",
+        "sonner": "^2.0.6",
+        "tailwind-merge": "^3.6.0",
+        "tailwindcss": "^4.3.3",
+        "tw-animate-css": "^1.4.0",
+        "typescript": "~6.0.3",
+        "vite": "^8.1.5",
+      },
+    },
+  },
+  "packages": {
+    "@babel/code-frame": ["@babel/code-frame@7.29.7", "", { "dependencies": { "@babel/helper-validator-identifier": "^7.29.7", "js-tokens": "^4.0.0", "picocolors": "^1.1.1" } }, "sha512-Aup7aUOfpbAUg2ROOJN6Iw5f9DMBlzu0mIkm/malLQFN/YQgO48wCj0Kxa3sEHJvPVFg7siR+qRInwXd2qhQKw=="],
+
+    "@babel/compat-data": ["@babel/compat-data@7.29.7", "", {}, "sha512-locTkQyKvwIEgBzVrn8693ebc97F2U8ZHjbXwDXJ5Fn2TCpNwTlKcaKLkdHop5c/icOFE7qt7Q9JC5hnKNa6Gg=="],
+
+    "@babel/core": ["@babel/core@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-compilation-targets": "^7.29.7", "@babel/helper-module-transforms": "^7.29.7", "@babel/helpers": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/remapping": "^2.3.5", "convert-source-map": "^2.0.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.2", "json5": "^2.2.3", "semver": "^6.3.1" } }, "sha512-RgHBCvtjbOK2gXSNBNIkNoEc9qoVEtau3hj8gEqKQuL3HZAibKarWFEI3Lfm6EYKkLalOh8eSrj9b+ch9H/VBA=="],
+
+    "@babel/generator": ["@babel/generator@7.29.7", "", { "dependencies": { "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7", "@jridgewell/gen-mapping": "^0.3.12", "@jridgewell/trace-mapping": "^0.3.28", "jsesc": "^3.0.2" } }, "sha512-DkXD5OJQaAQIdZ1bt3UZdEnHAn9Imd3IVBdX03UFe+ony9Ojw5pzr9YVKGDY1jt+Gcn/FnGkNf8r+Vj5NOJWtQ=="],
+
+    "@babel/helper-compilation-targets": ["@babel/helper-compilation-targets@7.29.7", "", { "dependencies": { "@babel/compat-data": "^7.29.7", "@babel/helper-validator-option": "^7.29.7", "browserslist": "^4.24.0", "lru-cache": "^5.1.1", "semver": "^6.3.1" } }, "sha512-wem6WaBj4NaVYVdNhLPPVacES6ZJ+KBBfSkTMD3YZxbP3rm3Di85tJU5ljaUNhaOynt+Aj0xruhYuzQBt8n71g=="],
+
+    "@babel/helper-globals": ["@babel/helper-globals@7.29.7", "", {}, "sha512-3nQVUAtvkKH9zahfWgw96Jc/uFOmjACE1kQz82E2lqWmHBgjzbNlsC22nuQTfahmWeQtTq5nQ/4Nnd2A1wj4zA=="],
+
+    "@babel/helper-module-imports": ["@babel/helper-module-imports@7.29.7", "", { "dependencies": { "@babel/traverse": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-ejHwrQQYcm9xnTivShn2IDOlIzInN34AXskvq9QicvCtEzq1Vzclu/tKF8Jq1Cg8JG2GL6/EmjgsCT7lXepE3g=="],
+
+    "@babel/helper-module-transforms": ["@babel/helper-module-transforms@7.29.7", "", { "dependencies": { "@babel/helper-module-imports": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7", "@babel/traverse": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0" } }, "sha512-UPUVSyXbOh627KiCIGQSgwWzGeBKLkaJ9PJEdrngIwMSzxLR4jS4+f1f1jb7VzBbg8nFLaYotvVPFCTqdrmTAg=="],
+
+    "@babel/helper-plugin-utils": ["@babel/helper-plugin-utils@7.29.7", "", {}, "sha512-G7sHYigPY17oO5SYWnfD/0MTBwVR781S/JI643e/JhUYgVgWE/61SoW3NH9KWUKyKq5LVh3npif99Wkt6j86Jw=="],
+
+    "@babel/helper-string-parser": ["@babel/helper-string-parser@7.29.7", "", {}, "sha512-Pb5ijPrZ89GDH8223L4UP8i6QApWxs04RbPQJTeWDV0/keR2E36MeKnyr6LYmUUvqRRI+Iv87SuF1W6ErINzYw=="],
+
+    "@babel/helper-validator-identifier": ["@babel/helper-validator-identifier@7.29.7", "", {}, "sha512-qehxGkRj55h/ff8EMaJ+cYhyaKlHIxqYDn682wQD7RNp9UujOQsHog2uS0r2vzr4pW+sXf90NeeayjcNaX3fFg=="],
+
+    "@babel/helper-validator-option": ["@babel/helper-validator-option@7.29.7", "", {}, "sha512-N9ZErrD+yW5geCDtBqnOoxmR8+tNKiGuxKlDpuJxfsqpa2dFcexaziGAE/qoHLiDDreVNMupxGmSoNlyvsA3gw=="],
+
+    "@babel/helpers": ["@babel/helpers@7.29.7", "", { "dependencies": { "@babel/template": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-1k2lAGRMfHTcwuNYcCNUmaUffmQv8KWMfh2iJUUeRlwlwH4FdNG7mfPI10NPfLHJFThE4Tyr4mv7kTNZOiPuBg=="],
+
+    "@babel/parser": ["@babel/parser@7.29.7", "", { "dependencies": { "@babel/types": "^7.29.7" }, "bin": "./bin/babel-parser.js" }, "sha512-hnORnjP/1P/zFEndoeX+n+t1RwWRJiJpM/jO7FW32Kn9r5+sJB2JWOdYo4L6k78j15eCwY3Gm/7364B1EMwtNg=="],
+
+    "@babel/plugin-transform-react-jsx-self": ["@babel/plugin-transform-react-jsx-self@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-TL0hMc9xzy86VD31nUiwzd5otRAcyEPcsegCxolO0PvcXuH1v0kECe/UIznYFihpkvU5wg/jk4v0TTEFfm53fw=="],
+
+    "@babel/plugin-transform-react-jsx-source": ["@babel/plugin-transform-react-jsx-source@7.29.7", "", { "dependencies": { "@babel/helper-plugin-utils": "^7.29.7" }, "peerDependencies": { "@babel/core": "^7.0.0-0" } }, "sha512-06IyK09H3wi4cGbhDBwp5gUGo0IKtnYa8tyTiephirPCK6fbobVGiXMMI5zLQ4aKEYP3wZ3ArU44o+8KMrSG/Q=="],
+
+    "@babel/template": ["@babel/template@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/types": "^7.29.7" } }, "sha512-puq+Gf35oI24FeN11LkoUQFqv9uwNeWpxXZi/Ji3rRIoKAzKnxRaZ+Gkj0vKS9ZCiTESfng1N9LyOyXvo+m+Gg=="],
+
+    "@babel/traverse": ["@babel/traverse@7.29.7", "", { "dependencies": { "@babel/code-frame": "^7.29.7", "@babel/generator": "^7.29.7", "@babel/helper-globals": "^7.29.7", "@babel/parser": "^7.29.7", "@babel/template": "^7.29.7", "@babel/types": "^7.29.7", "debug": "^4.3.1" } }, "sha512-EhlfNQtZ+NK22w5BM61ciuiq1m58ed33Wr1Xan//ZRTy6hgjnwyCffRYwzsGXdASJSUJ1guZILsErh1eQcl+zw=="],
+
+    "@babel/types": ["@babel/types@7.29.7", "", { "dependencies": { "@babel/helper-string-parser": "^7.29.7", "@babel/helper-validator-identifier": "^7.29.7" } }, "sha512-4zBIxpPzowiZpusoFkyGVwakdRJUyuH5PxQ/PrqghfdFWWasvnCdPfQXHrenDai+gyLARulZjZowCOj6fjT4pA=="],
+
+    "@emnapi/core": ["@emnapi/core@1.11.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" } }, "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ=="],
+
+    "@emnapi/runtime": ["@emnapi/runtime@1.11.1", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw=="],
+
+    "@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
+
+    "@fontsource-variable/jetbrains-mono": ["@fontsource-variable/jetbrains-mono@5.3.0", "", {}, "sha512-F32xpS2NsGYoQi2ADSkKTgpJj7ozajsGgDJ8woTnqjmIB+dxDIqImjl4pXZVEExu8UFZ2ndhmX18EBS/hdz3Lw=="],
+
+    "@jridgewell/gen-mapping": ["@jridgewell/gen-mapping@0.3.13", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.0", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA=="],
+
+    "@jridgewell/remapping": ["@jridgewell/remapping@2.3.5", "", { "dependencies": { "@jridgewell/gen-mapping": "^0.3.5", "@jridgewell/trace-mapping": "^0.3.24" } }, "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
+
+    "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.0", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^2.0.0-alpha.3", "@emnapi/runtime": "^2.0.0-alpha.3" } }, "sha512-kDoONqMa+VnZ4vvvu/ZUurpJ4gkZU57e7g69qpNgWhYcZFPUHZM2CEMKm+cG6ufDVALbjMvfmMjFVqaK7uEMnA=="],
+
+    "@oxc-project/types": ["@oxc-project/types@0.139.0", "", {}, "sha512-r9gHphtCs+1M7J0pw6Sn/hh/Wpa/iQrOOkrNAlVLF/gHq+/CJmHIWKKUUhdWjcD6CIa8idarspCsASiXCXvFUw=="],
+
+    "@radix-ui/number": ["@radix-ui/number@1.1.3", "", {}, "sha512-Road2bidD0uu/1BGDOWNdPI06g0lIRy6IF9GZcIrDK2KGItfor8IQwQa+yM2ERgHM1MmHxaxpTzk0/Jp42lNfA=="],
+
+    "@radix-ui/primitive": ["@radix-ui/primitive@1.1.7", "", {}, "sha512-rqWnm76nYT8HoNNqEjpgJ7Pw/DrBj5iBTrmEPo6HTX5+VJyBNOqTdv4g89G63HuR5g0AaENoAcH7Is5fF2kZ8Q=="],
+
+    "@radix-ui/react-checkbox": ["@radix-ui/react-checkbox@1.3.11", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-size": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Gnptr9pDDQxD3hgq2dtPbtrp/c2qH1mBwIzw3X/ivrMb2e1t0jMTi606fVEqFPaQR1ggXIVQWKj3P2WW9v7zGQ=="],
+
+    "@radix-ui/react-compose-refs": ["@radix-ui/react-compose-refs@1.1.5", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-+48PbAAbq3didjJxa+OaWY2ZwgAKsNiRGyeHKszblZMQ+kcpd9pAaT11cMkGEie0vsOi3QdeTE6d5Fe3Gn61kA=="],
+
+    "@radix-ui/react-context": ["@radix-ui/react-context@1.2.2", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RHCUGwKHDr0hDGg4X7ma4JG4/+12qxw8rkh5QKdDldlCvtja6nUx1Ef/8HVrJze81lEsgLQlqjzjGNHantgnQA=="],
+
+    "@radix-ui/react-dialog": ["@radix-ui/react-dialog@1.1.23", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-dismissable-layer": "1.1.19", "@radix-ui/react-focus-guards": "1.1.6", "@radix-ui/react-focus-scope": "1.1.16", "@radix-ui/react-id": "1.1.4", "@radix-ui/react-portal": "1.1.17", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-slot": "1.3.3", "@radix-ui/react-use-controllable-state": "1.2.6", "@radix-ui/react-use-layout-effect": "1.1.4", "aria-hidden": "^1.2.4", "react-remove-scroll": "^2.7.2" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Ksw4WeROkO4rC9k/onilX/Ao2Cr1ku1unMNH+XSCcP4jSXYu7HDsg9n4ojMjVb22XpYjAQ9qfrFlVbru1vXDUA=="],
+
+    "@radix-ui/react-direction": ["@radix-ui/react-direction@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-5pzg4FGQNpExhnhT2zlrP1wZFaYCd1K0nYWoFAdcYoYK868IEigqMX3B3f8yIoRlAhAeDWciLI6ZdCKHF9P4Vg=="],
+
+    "@radix-ui/react-dismissable-layer": ["@radix-ui/react-dismissable-layer@1.1.19", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-effect-event": "0.0.5" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-8g4pfOL9HoKKLWGiypT+dphVqjFfmcXO5GBnhsG6zI+lxAx/8feQpr+1LSN8Re3hiZ+XkLNS4O9ztK11/LzQ6w=="],
+
+    "@radix-ui/react-focus-guards": ["@radix-ui/react-focus-guards@1.1.6", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-RNOJjfZMTyBM6xYmV3IVGXkPjIhcBAuv48POevAXwrGJhkWZ9p1rFoIS1JFooPuT193AZmRsCPhpoVJxx6OPoQ=="],
+
+    "@radix-ui/react-focus-scope": ["@radix-ui/react-focus-scope@1.1.16", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-wmRZ2WWLvmt6KHy2rNPOdPUjwq5xOHY02+m+udwJTn0aNIox/rkskAvJTyTLGhPK6KgrUjlJUJpgmx/+wFiFIQ=="],
+
+    "@radix-ui/react-id": ["@radix-ui/react-id@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-TMQp2llA+RYn7JcjnrMnz7wN4pcVttPZnRZo52PLQsoLVKzNlVwUeHmfePgTgRluXFvlD3GD5g5MOVVTJCO0qA=="],
+
+    "@radix-ui/react-label": ["@radix-ui/react-label@2.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-o/rdYEwZTTo5tjknnPeyQFU45kUC4i/XyeDPP+HGyi6XqpOP6Zf5Ya5vh/Yfe9Id5JiuWnnAx2XqIeD3UYZt0g=="],
+
+    "@radix-ui/react-portal": ["@radix-ui/react-portal@1.1.17", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-vKQLcWypUnwZVvfV7UkGahH2g6ySe8M8R+zYBwPrv5byZ9QAW6cQVvNKo7GgmD+p8aYb6D9JBuvy8/WhOno2wQ=="],
+
+    "@radix-ui/react-presence": ["@radix-ui/react-presence@1.1.10", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-3wyzCQ6+ubRA+D4uv9m95JYLXxmOHp05qjrkjeA7uKHHtjpPggQzc6DAb0URl7j67oR0K2foO4ip27TiX037Bw=="],
+
+    "@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.10", "", { "dependencies": { "@radix-ui/react-slot": "1.3.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-MucOnzh6hR5mid6VpkbglRAMYMjKLqRnGBbjXkzjK52fuQDd1qbkx78a5P40mkcnVXJdEVxm26E9OPAiUq7nBg=="],
+
+    "@radix-ui/react-scroll-area": ["@radix-ui/react-scroll-area@1.2.18", "", { "dependencies": { "@radix-ui/number": "1.1.3", "@radix-ui/primitive": "1.1.7", "@radix-ui/react-compose-refs": "1.1.5", "@radix-ui/react-context": "1.2.2", "@radix-ui/react-direction": "1.1.4", "@radix-ui/react-presence": "1.1.10", "@radix-ui/react-primitive": "2.1.10", "@radix-ui/react-use-callback-ref": "1.1.4", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-Zn5Cd171wxsO3Dfg8HaW6RifTb9CYTKQJHs/G4+LN1GfmJpaQMZQyQxMprVPHpaz7QY4l9BxK2JwQuzHsXC8nA=="],
+
+    "@radix-ui/react-separator": ["@radix-ui/react-separator@1.1.15", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.10" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-jOLO4lssEzWpoDu7G+Ze4VjwMRUBt291pnZD0gmalREZipnTX3wadQo7Fy48GCTfe14/YRN6rw/rOJqrE85Wxw=="],
+
+    "@radix-ui/react-slot": ["@radix-ui/react-slot@1.3.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.5" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-qx7oqnYbxnK9kYI9m317qmFmEgo6ywqWvbTogdj7cL9p3/yx4M48p7Rnw5z3H890cL/ow/EeWJsuTykeZVXP5Q=="],
+
+    "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-R6OUY2e2fA6Yn6s+VSx5KBV6Nx8LQEhu+cz7LCej18rQ1HLyg9PSC9jP/ZNx0o6FAIK9c0F1kHylzSxKsdlkrQ=="],
+
+    "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.6", "", { "dependencies": { "@radix-ui/primitive": "1.1.7", "@radix-ui/react-use-effect-event": "0.0.5", "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-uEQJGT97ZA/TgP/Hydw47lHu+/vQj6z/0jA+WeTbK1o9Rx45GImjpD0tc3W5ad3D6XTSR6e1yEO0FvGq6WQfVQ=="],
+
+    "@radix-ui/react-use-effect-event": ["@radix-ui/react-use-effect-event@0.0.5", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-7cshFL8HGS/7HEiHH+9kL9HBwp2sa9yX18Knwek6KYWmXwM7pegMgta2AXMQKI+rq3JnfSj9x8wYqFMTdG1Jgg=="],
+
+    "@radix-ui/react-use-layout-effect": ["@radix-ui/react-use-layout-effect@1.1.4", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-K20DkRkUwDnxEYMBPcg3Y6voLkEy5p5QQmszZgLngKKiC7dzBR/aEuK3w1qlx2JWDUNH6FluahYdgR3BP+QbYw=="],
+
+    "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.4", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.4" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-D3anSY15EJoxrihpsXI6SMrmmonnQtR2ni7arO+Lfdg3O95b9hNXxONk8jA5C8ANdF/h5HMAxejgs8PWJ6rlhw=="],
+
+    "@rolldown/binding-android-arm64": ["@rolldown/binding-android-arm64@1.1.5", "", { "os": "android", "cpu": "arm64" }, "sha512-lZg8fqIv2v7FF237bwMgzGZEJvGL79/s5knJ/i6FmsGF4XXlzccZ4jb+TrFIxtSSxFtIpdsgrPZeMk1I9AFcyQ=="],
+
+    "@rolldown/binding-darwin-arm64": ["@rolldown/binding-darwin-arm64@1.1.5", "", { "os": "darwin", "cpu": "arm64" }, "sha512-51Bnx9pNiMRKSUNtBfySkNJ9vMU9Hh3I1ozDd6gyPPYzaXCfnptUcEZxXGYFn+ul2dtcMUiqGR1Yai2K10uoTw=="],
+
+    "@rolldown/binding-darwin-x64": ["@rolldown/binding-darwin-x64@1.1.5", "", { "os": "darwin", "cpu": "x64" }, "sha512-Tm+gbfC0aHu1tBA/JvKQh32S0K6YgCHkiAF4/W6xX0K0RmNuc94VeK419dJoE65R5aRxmo+noZQSWrAMF6yb6g=="],
+
+    "@rolldown/binding-freebsd-x64": ["@rolldown/binding-freebsd-x64@1.1.5", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JMzDKCCXq93YccG5gz3hvOs1oXRKAf0XYpfOS88e+wZrC8Iugj6j68867vrYZkvpDDpKn/KoKORThmchMpF6TA=="],
+
+    "@rolldown/binding-linux-arm-gnueabihf": ["@rolldown/binding-linux-arm-gnueabihf@1.1.5", "", { "os": "linux", "cpu": "arm" }, "sha512-uML21j2K5TfPGutKxub+M+nLjZIrWjXQ5Grx4lCe/nimTj9B4L63zHpjXLl4y0L3mcm2htEQIb06oCG/szerNw=="],
+
+    "@rolldown/binding-linux-arm64-gnu": ["@rolldown/binding-linux-arm64-gnu@1.1.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-navSiuTMogvnQoZoM/v+l3ZWo50/NTwSHSzheABx/RCnmUPaKwq9qSo4Br2OYRs21+Fz8uFqITZM3H4opOB0/Q=="],
+
+    "@rolldown/binding-linux-arm64-musl": ["@rolldown/binding-linux-arm64-musl@1.1.5", "", { "os": "linux", "cpu": "arm64" }, "sha512-lAryqH7IteztmCXQXk0etKj4wBQ7Gx5S6LjKhsgp9zb8I5bsuvU/2llH1hDQcjsFeqIsovMVN339/8pUDDBXxA=="],
+
+    "@rolldown/binding-linux-ppc64-gnu": ["@rolldown/binding-linux-ppc64-gnu@1.1.5", "", { "os": "linux", "cpu": "ppc64" }, "sha512-fsK/sNBnxzBlL4O1JNrZakVQxPspqpED5dLtNsZS9oOKmtSpdNIzxH2kkol5HYTWJN47sE20ztMJPxfZ89qGOg=="],
+
+    "@rolldown/binding-linux-s390x-gnu": ["@rolldown/binding-linux-s390x-gnu@1.1.5", "", { "os": "linux", "cpu": "s390x" }, "sha512-gLYb4BIadlfTOYT5gO503n8zQjXflgzpD0FcyKh0Mzx3rqCZKnHoJWV9xe1KXUJ5lx2JfcSHr/mhzS0PC/McAA=="],
+
+    "@rolldown/binding-linux-x64-gnu": ["@rolldown/binding-linux-x64-gnu@1.1.5", "", { "os": "linux", "cpu": "x64" }, "sha512-FjcpEKUyJygHgs1o50VYNvkt5+7Le/VEdYt0AkRpkL33MnyQfwr8l5mXwMmfmTbyMPr5vJLC+8/Gd9gXnwU1QQ=="],
+
+    "@rolldown/binding-linux-x64-musl": ["@rolldown/binding-linux-x64-musl@1.1.5", "", { "os": "linux", "cpu": "x64" }, "sha512-Me+PfPI2TMeOQk0gYWfLQZtTktrmzbr8cDboqX83XKc7UrgAi55gF+2dUkWdxd19n55Essp2yeca+O9N5rBxHg=="],
+
+    "@rolldown/binding-openharmony-arm64": ["@rolldown/binding-openharmony-arm64@1.1.5", "", { "os": "none", "cpu": "arm64" }, "sha512-yc5WrLzXks6zCQfn9Oxr8pORKyl/pF+QjHmW/Qx3qu0oyrrNC+y2JLTU1E2rcWYAmzlnqngWXHQjy51VzW70Vw=="],
+
+    "@rolldown/binding-wasm32-wasi": ["@rolldown/binding-wasm32-wasi@1.1.5", "", { "dependencies": { "@emnapi/core": "1.11.1", "@emnapi/runtime": "1.11.1", "@napi-rs/wasm-runtime": "^1.1.6" }, "cpu": "none" }, "sha512-VbQGPX2b4r48TAMIM2cjgluIM1HYutm4pcTEJsle7iEP7sB1dFqtPLBVbdLAZCxy1txCcPxf4QFf4v8uvltPqA=="],
+
+    "@rolldown/binding-win32-arm64-msvc": ["@rolldown/binding-win32-arm64-msvc@1.1.5", "", { "os": "win32", "cpu": "arm64" }, "sha512-gHv82k63z4qpV5+Q1y/12KrK0ltWBukVDI8nZcbT7Tt/ZlOIVwppazneq0F93oDxTo3IgAMEDIoQh3E2n6mVsw=="],
+
+    "@rolldown/binding-win32-x64-msvc": ["@rolldown/binding-win32-x64-msvc@1.1.5", "", { "os": "win32", "cpu": "x64" }, "sha512-tTZuDBPw85tEN5PQi1pnEBzDy0Z49HtScLAbD5t6hyeU92A95pRWaSMw1GZZi/RwgSgUIl0xrSlXIT/9QzvYSA=="],
+
+    "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-rc.3", "", {}, "sha512-eybk3TjzzzV97Dlj5c+XrBFW57eTNhzod66y9HrBlzJ6NsCrWCp/2kaPS3K9wJmurBC0Tdw4yPjXKZqlznim3Q=="],
+
+    "@tailwindcss/node": ["@tailwindcss/node@4.3.3", "", { "dependencies": { "@jridgewell/remapping": "^2.3.5", "enhanced-resolve": "^5.24.1", "jiti": "^2.7.0", "lightningcss": "1.32.0", "magic-string": "^0.30.21", "source-map-js": "^1.2.1", "tailwindcss": "4.3.3" } }, "sha512-/T8IKEsf9VTU6tLjgC7+sv2mOPtQxzE2jMw7u4Tt40Tx+QSZxpzh95/H6cMKoja9XuW7iMdLJYBB0o9G1CaAgg=="],
+
+    "@tailwindcss/oxide": ["@tailwindcss/oxide@4.3.3", "", { "optionalDependencies": { "@tailwindcss/oxide-android-arm64": "4.3.3", "@tailwindcss/oxide-darwin-arm64": "4.3.3", "@tailwindcss/oxide-darwin-x64": "4.3.3", "@tailwindcss/oxide-freebsd-x64": "4.3.3", "@tailwindcss/oxide-linux-arm-gnueabihf": "4.3.3", "@tailwindcss/oxide-linux-arm64-gnu": "4.3.3", "@tailwindcss/oxide-linux-arm64-musl": "4.3.3", "@tailwindcss/oxide-linux-x64-gnu": "4.3.3", "@tailwindcss/oxide-linux-x64-musl": "4.3.3", "@tailwindcss/oxide-wasm32-wasi": "4.3.3", "@tailwindcss/oxide-win32-arm64-msvc": "4.3.3", "@tailwindcss/oxide-win32-x64-msvc": "4.3.3" } }, "sha512-krXjAikiaFSPaK/FkAQT5UTx3VormQaiZ5hBFlJZ9UFQGB/rwg1MZIhHAG9smMQRTdyJxP6Qt5MwMtdyU5FWrA=="],
+
+    "@tailwindcss/oxide-android-arm64": ["@tailwindcss/oxide-android-arm64@4.3.3", "", { "os": "android", "cpu": "arm64" }, "sha512-Y85A2gmPSkl5Ve5qR86GL4HT509cFqQh1aes9p3sSkyTPwt0Pppf3GkwGe4JPACcRYjgJIEhQgM6dBClnr0NYw=="],
+
+    "@tailwindcss/oxide-darwin-arm64": ["@tailwindcss/oxide-darwin-arm64@4.3.3", "", { "os": "darwin", "cpu": "arm64" }, "sha512-BiaWatpBcERQFDlOjRDpIVXuFK5PJez5SA4JMg6VYZdBYU+qKfV/vqjcIs+IYmtitf1xYQZTwXvU/8y4lfZUGw=="],
+
+    "@tailwindcss/oxide-darwin-x64": ["@tailwindcss/oxide-darwin-x64@4.3.3", "", { "os": "darwin", "cpu": "x64" }, "sha512-fAeUqfV5ndhxRwai8cXGzdLvul9utWOmeTkv69unv4ZXixjn61Z+p9lCWdwOwA3TYboG3BwdVuN/RDjhBRl0mw=="],
+
+    "@tailwindcss/oxide-freebsd-x64": ["@tailwindcss/oxide-freebsd-x64@4.3.3", "", { "os": "freebsd", "cpu": "x64" }, "sha512-iyf5bV6+wnAlflVeEy7R25dupxTNECZN5QMI0qNT6eT+EgaGdZcKhGkr5SdoaWiLJ3spLqIY9VCeSGrwmtg4kw=="],
+
+    "@tailwindcss/oxide-linux-arm-gnueabihf": ["@tailwindcss/oxide-linux-arm-gnueabihf@4.3.3", "", { "os": "linux", "cpu": "arm" }, "sha512-aAYUprJAJQWWbRrPvtjdroZ56Md+JM8pMiopS6xGEwDfLhqj+2ver2p4nU4Mb3CRqcMmNBjo8KkUgcxhkzVQGQ=="],
+
+    "@tailwindcss/oxide-linux-arm64-gnu": ["@tailwindcss/oxide-linux-arm64-gnu@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-nDxldcEENOxZRzC2uu9jrutZdAAQtb+8WWDCSnWL1zvBk1+FN+x6MtDViPB5AJMfttVCUhehGWus3XBPgatM/w=="],
+
+    "@tailwindcss/oxide-linux-arm64-musl": ["@tailwindcss/oxide-linux-arm64-musl@4.3.3", "", { "os": "linux", "cpu": "arm64" }, "sha512-Md44bD6veX/PC5iyF8cDVnw4HBIANZepRZZ7a8DQOvkfo5WUBwcp6iAuCUz23u+4SUkhJlD3eL7hNdW8ezd/kA=="],
+
+    "@tailwindcss/oxide-linux-x64-gnu": ["@tailwindcss/oxide-linux-x64-gnu@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-tx7us1muwOKAKWao2v/GaafFeQboE6aj88vC6ziN2NCGcRm8gWUhwjzg+YdVB1e4boAtdtma4L43onunI6NS4w=="],
+
+    "@tailwindcss/oxide-linux-x64-musl": ["@tailwindcss/oxide-linux-x64-musl@4.3.3", "", { "os": "linux", "cpu": "x64" }, "sha512-SJxX60smvHgasZoBy11dX6YRjXJFovwWBoedhbQPOBzgFWBHGB+TVPWB9BxzR7TTxU8FQZAI2AyiNCMzFm8Img=="],
+
+    "@tailwindcss/oxide-wasm32-wasi": ["@tailwindcss/oxide-wasm32-wasi@4.3.3", "", { "dependencies": { "@emnapi/core": "^1.11.1", "@emnapi/runtime": "^1.11.1", "@emnapi/wasi-threads": "^1.2.2", "@napi-rs/wasm-runtime": "^1.1.4", "@tybys/wasm-util": "^0.10.2", "tslib": "^2.8.1" }, "cpu": "none" }, "sha512-jx1+rPhY/5Ympkktd656HBWEBLxP7dH06losBLjjf5vgCODXvi9KhtftWcMIwTFIDqBr7cRnQkdLnAG+IOlGvQ=="],
+
+    "@tailwindcss/oxide-win32-arm64-msvc": ["@tailwindcss/oxide-win32-arm64-msvc@4.3.3", "", { "os": "win32", "cpu": "arm64" }, "sha512-3rc292Ca2ceK6Ulcc/bAVnTs/3nDtoPhyEKlgPv+yQJQi/JS/AMJlqzxvlDacL1nekbrcf6bTqp/jV4qgnPxNQ=="],
+
+    "@tailwindcss/oxide-win32-x64-msvc": ["@tailwindcss/oxide-win32-x64-msvc@4.3.3", "", { "os": "win32", "cpu": "x64" }, "sha512-yJ0pwIVc/nYeGoV02WtsN8KYyLQv7kyI2wDnkezyJlGGjkd4QLwDGAwl47YpPJeuI0M0ObaXGSPjvWDPeTPggw=="],
+
+    "@tailwindcss/vite": ["@tailwindcss/vite@4.3.3", "", { "dependencies": { "@tailwindcss/node": "4.3.3", "@tailwindcss/oxide": "4.3.3", "tailwindcss": "4.3.3" }, "peerDependencies": { "vite": "^5.2.0 || ^6 || ^7 || ^8" } }, "sha512-yYU8cogLeSh/ms2jh8Fj7jaba/EWa7Ja6GoUqYZaraEuCI5YS6ms6ObZgjjedm+jm6XZjdNRWBpPP6Z86oOxcw=="],
+
+    "@tybys/wasm-util": ["@tybys/wasm-util@0.10.3", "", { "dependencies": { "tslib": "^2.4.0" } }, "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg=="],
+
+    "@types/babel__core": ["@types/babel__core@7.20.5", "", { "dependencies": { "@babel/parser": "^7.20.7", "@babel/types": "^7.20.7", "@types/babel__generator": "*", "@types/babel__template": "*", "@types/babel__traverse": "*" } }, "sha512-qoQprZvz5wQFJwMDqeseRXWv3rqMvhgpbXFfVyWhbx9X47POIA6i/+dXefEmZKoAgOaTdaIgNSMqMIU61yRyzA=="],
+
+    "@types/babel__generator": ["@types/babel__generator@7.27.0", "", { "dependencies": { "@babel/types": "^7.0.0" } }, "sha512-ufFd2Xi92OAVPYsy+P4n7/U7e68fex0+Ee8gSG9KX7eo084CWiQ4sdxktvdl0bOPupXtVJPY19zk6EwWqUQ8lg=="],
+
+    "@types/babel__template": ["@types/babel__template@7.4.4", "", { "dependencies": { "@babel/parser": "^7.1.0", "@babel/types": "^7.0.0" } }, "sha512-h/NUaSyG5EyxBIp8YRxo4RMe2/qQgvyowRwVMzhYhBCONbW8PUsg4lkFMrhgZhUe5z3L3MiLDuvyJ/CaPa2A8A=="],
+
+    "@types/babel__traverse": ["@types/babel__traverse@7.28.0", "", { "dependencies": { "@babel/types": "^7.28.2" } }, "sha512-8PvcXf70gTDZBgt9ptxJ8elBeBjcLOAcOtoO/mPJjtji1+CdGbHgm77om1GrsPxsiE+uXIpNSK64UYaIwQXd4Q=="],
+
+    "@types/node": ["@types/node@26.1.2", "", { "dependencies": { "undici-types": "~8.3.0" } }, "sha512-Vu4a5UFA9rIIFJ7rB/Vaafh9lrCQszopTCx6KjFboXTGQbPNasehVR5TEiithSDGyd1DEiUByggTZsg8jukeIg=="],
+
+    "@types/react": ["@types/react@19.2.17", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
+    "@vitejs/plugin-react": ["@vitejs/plugin-react@5.2.0", "", { "dependencies": { "@babel/core": "^7.29.0", "@babel/plugin-transform-react-jsx-self": "^7.27.1", "@babel/plugin-transform-react-jsx-source": "^7.27.1", "@rolldown/pluginutils": "1.0.0-rc.3", "@types/babel__core": "^7.20.5", "react-refresh": "^0.18.0" }, "peerDependencies": { "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0" } }, "sha512-YmKkfhOAi3wsB1PhJq5Scj3GXMn3WvtQ/JC0xoopuHoXSdmtdStOpFrYaT1kie2YgFBcIe64ROzMYRjCrYOdYw=="],
+
+    "aria-hidden": ["aria-hidden@1.2.6", "", { "dependencies": { "tslib": "^2.0.0" } }, "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA=="],
+
+    "baseline-browser-mapping": ["baseline-browser-mapping@2.11.5", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-xJo6a6YZnwZfnyGmQKWMbVOcii7XRibjOskRh+WJ9UHQoX16xrQrcIgAMQOzfvs8XiLMx6ih/fsLPF73iY2D1A=="],
+
+    "browserslist": ["browserslist@4.28.7", "", { "dependencies": { "baseline-browser-mapping": "^2.10.44", "caniuse-lite": "^1.0.30001806", "electron-to-chromium": "^1.5.393", "node-releases": "^2.0.51", "update-browserslist-db": "^1.2.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-JxV13hNrFxqjOc8alRbq9dK1MM79NEXYpma2B2J4wAtpWS5zIEIKqWPGCl7N4o7Uc7B7itylh7SuDujATRyyTw=="],
+
+    "caniuse-lite": ["caniuse-lite@1.0.30001806", "", {}, "sha512-72Cuvd95zbSYPKq6Fhg8eDJRlzgWDf7/mtoZv6Qe/DYNCEBdNxoA3+rZAU2ZhGCpZlns3EssFavaZomckT5Uuw=="],
+
+    "class-variance-authority": ["class-variance-authority@0.7.1", "", { "dependencies": { "clsx": "^2.1.1" } }, "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg=="],
+
+    "clsx": ["clsx@2.1.1", "", {}, "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA=="],
+
+    "convert-source-map": ["convert-source-map@2.0.0", "", {}, "sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg=="],
+
+    "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "debug": ["debug@4.4.3", "", { "dependencies": { "ms": "^2.1.3" }, "peerDependencies": { "supports-color": "*" }, "optionalPeers": ["supports-color"] }, "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA=="],
+
+    "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
+
+    "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="],
+
+    "dompurify": ["dompurify@3.4.12", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-zQvGet8Z2sWbQhCmfFz/T5QWH2oBmjnqK3qvOjaqaNLrLEF912WamU+ohnTp0TCep/MFVHpdJuCZEdFOdTnEFg=="],
+
+    "electron-to-chromium": ["electron-to-chromium@1.5.397", "", {}, "sha512-khGTy9U9x02KEtsKM8vx5A62BsRmcOsIgDpWr1ImE32Ax8GxHGPHZf+Eu9H8zOOyHJnB0jTbseyTHbq2XCT8yw=="],
+
+    "enhanced-resolve": ["enhanced-resolve@5.24.3", "", { "dependencies": { "graceful-fs": "^4.2.4", "tapable": "^2.3.3" } }, "sha512-PwKooW9JUzh5chmYfHM3IQl5OkK2u2Nm011MgeZrss3JmFraUx/fqrf78kk8GUMYoibx/14MdwTl/1WKkG7TpQ=="],
+
+    "escalade": ["escalade@3.2.0", "", {}, "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA=="],
+
+    "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
+
+    "fsevents": ["fsevents@2.3.3", "", { "os": "darwin" }, "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw=="],
+
+    "gensync": ["gensync@1.0.0-beta.2", "", {}, "sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg=="],
+
+    "get-nonce": ["get-nonce@1.0.1", "", {}, "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q=="],
+
+    "graceful-fs": ["graceful-fs@4.2.11", "", {}, "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ=="],
+
+    "jiti": ["jiti@2.7.0", "", { "bin": { "jiti": "lib/jiti-cli.mjs" } }, "sha512-AC/7JofJvZGrrneWNaEnJeOLUx+JlGt7tNa0wZiRPT4MY1wmfKjt2+6O2p2uz2+skll8OZZmJMNqeke7kKbNgQ=="],
+
+    "js-tokens": ["js-tokens@4.0.0", "", {}, "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="],
+
+    "jsesc": ["jsesc@3.1.0", "", { "bin": { "jsesc": "bin/jsesc" } }, "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA=="],
+
+    "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
+
+    "jsonrepair": ["jsonrepair@3.15.0", "", { "bin": { "jsonrepair": "bin/cli.js" } }, "sha512-wy8OTjwsJwQRnQJkKnMJJ9vcytRdBPAgIF/Hy6+s1dAj42BHMKiyL8JzEieIl3JY7idt8eyHwBWTO8mh/+mtwA=="],
+
+    "lightningcss": ["lightningcss@1.33.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.33.0", "lightningcss-darwin-arm64": "1.33.0", "lightningcss-darwin-x64": "1.33.0", "lightningcss-freebsd-x64": "1.33.0", "lightningcss-linux-arm-gnueabihf": "1.33.0", "lightningcss-linux-arm64-gnu": "1.33.0", "lightningcss-linux-arm64-musl": "1.33.0", "lightningcss-linux-x64-gnu": "1.33.0", "lightningcss-linux-x64-musl": "1.33.0", "lightningcss-win32-arm64-msvc": "1.33.0", "lightningcss-win32-x64-msvc": "1.33.0" } }, "sha512-WkUDrojuJs0xkgGf2udWxa3yGBRxPtxUkB79i6aCZLRgc7PM8fZe9TosfPDcvEpQZbuFASnHYmRLBLUbmLOIIA=="],
+
+    "lightningcss-android-arm64": ["lightningcss-android-arm64@1.33.0", "", { "os": "android", "cpu": "arm64" }, "sha512-gEpRTalKdosp4Bb8qWtc2iOgE5SeIHlpS1up9bFq2wAyYhl1UdTObYiHe98zEM9SQvSoqQZ1IQD0JNpg3Ml5pg=="],
+
+    "lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.33.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-Sciaz8eenNTKn9b3t7+xr0ipTp9YxKQY4npwQ3mrRuL0BAVHBLyZxofhaKBAVtzmtRZ/zTyo0/to4B1uWG/Djg=="],
+
+    "lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.33.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-Z5UPAxzrjlWNNyGy6i65cJzzvgJ5D3T6wMvs+gWpY9d7qRhANrxqAp6LhxIgZhWEw18RfJTGcRxjuLIBr+m8XQ=="],
+
+    "lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.33.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-QQM/Ti/hQajJwCY+RiWuCZ9sdtI/XQk7nDK5vC8kkdwixezOlDgvDx7+RT+QjK6FcFT4MpsuoBnHIo/O3StRRg=="],
+
+    "lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.33.0", "", { "os": "linux", "cpu": "arm" }, "sha512-N7FVBe6iS24MlM6R/4RBTxGhQheZGs7tiQ9U32UtF75NzP5Q7xWPRqLBCKxlRQRk3rY1jCIPLzx7WzOhuUIRLQ=="],
+
+    "lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-j2v/itmy4HlNxlc6voKXYgBqNi0Ng2LShg4z7GufpEgs05P+2suBVyi9I6YHq5uoVFx9ETin3eCEhLVyXGQnKg=="],
+
+    "lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.33.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-yiO5ROMuYQgXbC60yjZU5CYSFZGKXL0HFATXt9mHJn1+zW55oCtMI9NfcVhYLMFDL7gV7oBPon/EmMMGg2OvtQ=="],
+
+    "lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-ar+Ju7LmcN0Jo4FpL4hpFybwNG9/3A/Br5KW2n2jyODg3MEZXaDYADdemoNS+BDNfMgKvylJLj4S5tyRActuAg=="],
+
+    "lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.33.0", "", { "os": "linux", "cpu": "x64" }, "sha512-RYiYbkokw0trfKqqzfF55lginwEPrD3OJDfTuJzFs1MK6iFnDenaz1fqLLtX4ITG3OktJQXOeTaw1awrBAlZPw=="],
+
+    "lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.33.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-1K+MPfLSFVpphzpdbfkhlWk6wBrTObBzS2T6db10PNOZgR9GoVsAWzwNyuhUYYbTp23j+4RrncfujZ4uAzXvwA=="],
+
+    "lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.33.0", "", { "os": "win32", "cpu": "x64" }, "sha512-OlEICDx/Xl0FqSp4bry8zFnCvGpig3Gl4gCquvYwHuqJKEC1+n9NgDniFvqHGmMv1ZkqDJrDqKKSykTDX+ehuA=="],
+
+    "lru-cache": ["lru-cache@5.1.1", "", { "dependencies": { "yallist": "^3.0.2" } }, "sha512-KpNARQA3Iwv+jTA0utUVVbrh+Jlrr1Fv0e56GGzAFOXN7dk/FviaDW8LHmK52DlcH4WP2n6gI8vN1aesBFgo9w=="],
+
+    "lucide-react": ["lucide-react@0.525.0", "", { "peerDependencies": { "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Tm1txJ2OkymCGkvwoHt33Y2JpN5xucVq1slHcgE6Lk0WjDfjgKWor5CdVER8U6DvcfMwh4M8XxmpTiyzfmfDYQ=="],
+
+    "magic-string": ["magic-string@0.30.21", "", { "dependencies": { "@jridgewell/sourcemap-codec": "^1.5.5" } }, "sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ=="],
+
+    "marked": ["marked@18.0.7", "", { "bin": { "marked": "bin/marked.js" } }, "sha512-iDVQ5ldaiKXn6b2JroX5kgRfmwgqolW7NpaEzTl1k/2Zh1njIEN9yniyLV/mOvWwtsE8OGgkjsCYvijuPk1dtA=="],
+
+    "ms": ["ms@2.1.3", "", {}, "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="],
+
+    "nanoid": ["nanoid@3.3.16", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-bzlKTyNJ7+LdGIIwy8ijFpIqEQIvafahV7eYykJ8Cvh42EdJeODoJ6gUJXpQJvej1BddH8OqTXZNE/KfbWAu8Q=="],
+
+    "node-releases": ["node-releases@2.0.51", "", {}, "sha512-wRNIrw4DmVLKQlbgOMdkMx27Wrpzes2hh5Jtbi2bjPd+4wJstWIqP5A+lscnqbm0xxmT5Bpg8Lec5ItEBwx6BQ=="],
+
+    "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
+
+    "picomatch": ["picomatch@4.0.5", "", {}, "sha512-RvwwcruNjI1ncT5xRakeyS9Lf8lcItv34KD+aif+VH9kduAyfYBipGh12274xtenIPZ119/R9BdTBa8gAwSh0A=="],
+
+    "postcss": ["postcss@8.5.24", "", { "dependencies": { "nanoid": "^3.3.16", "picocolors": "^1.1.1", "source-map-js": "^1.2.1" } }, "sha512-8RyVklq0owXUTa4xlpzu4l9AaVKIdQvAcOHZWaMh98HgySsUtxRVf/chRe3dsSLqb6i40BzGRzEUddRaI+9TSw=="],
+
+    "react": ["react@19.2.8", "", {}, "sha512-PWaYA1L/q9u2u7xYQi+Y3L3Yfnie7XyLeaJICV1MGD6LprsBxcAqGjYyr0eY3p+QdsA+x/Irkt4Qif8D63+Sbw=="],
+
+    "react-dom": ["react-dom@19.2.8", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.8" } }, "sha512-rVprimfGBG3DR+Tq0IQG2DT5PxKth1WIGDmj5yPmlzr4YBe7uyE+Du4oVqTDXZSHGGGXRtTJEGSSePyQCMBglQ=="],
+
+    "react-refresh": ["react-refresh@0.18.0", "", {}, "sha512-QgT5//D3jfjJb6Gsjxv0Slpj23ip+HtOpnNgnb2S5zU3CB26G/IDPGoy4RJB42wzFE46DRsstbW6tKHoKbhAxw=="],
+
+    "react-remove-scroll": ["react-remove-scroll@2.7.2", "", { "dependencies": { "react-remove-scroll-bar": "^2.3.7", "react-style-singleton": "^2.2.3", "tslib": "^2.1.0", "use-callback-ref": "^1.3.3", "use-sidecar": "^1.1.3" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Iqb9NjCCTt6Hf+vOdNIZGdTiH1QSqr27H/Ek9sv/a97gfueI/5h1s3yRi1nngzMUaOOToin5dI1dXKdXiF+u0Q=="],
+
+    "react-remove-scroll-bar": ["react-remove-scroll-bar@2.3.8", "", { "dependencies": { "react-style-singleton": "^2.2.2", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" }, "optionalPeers": ["@types/react"] }, "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q=="],
+
+    "react-style-singleton": ["react-style-singleton@2.2.3", "", { "dependencies": { "get-nonce": "^1.0.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ=="],
+
+    "rolldown": ["rolldown@1.1.5", "", { "dependencies": { "@oxc-project/types": "=0.139.0", "@rolldown/pluginutils": "^1.0.0" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.1.5", "@rolldown/binding-darwin-arm64": "1.1.5", "@rolldown/binding-darwin-x64": "1.1.5", "@rolldown/binding-freebsd-x64": "1.1.5", "@rolldown/binding-linux-arm-gnueabihf": "1.1.5", "@rolldown/binding-linux-arm64-gnu": "1.1.5", "@rolldown/binding-linux-arm64-musl": "1.1.5", "@rolldown/binding-linux-ppc64-gnu": "1.1.5", "@rolldown/binding-linux-s390x-gnu": "1.1.5", "@rolldown/binding-linux-x64-gnu": "1.1.5", "@rolldown/binding-linux-x64-musl": "1.1.5", "@rolldown/binding-openharmony-arm64": "1.1.5", "@rolldown/binding-wasm32-wasi": "1.1.5", "@rolldown/binding-win32-arm64-msvc": "1.1.5", "@rolldown/binding-win32-x64-msvc": "1.1.5" }, "bin": { "rolldown": "./bin/cli.mjs" } }, "sha512-t9z29cJjXf/vxQ8dyhCSpt6H6aSwHTk8cT5I3iy6SMXuFpk5mB6PL6XfC8PCwrPTx93udwKUm9HRteAlTGBLiA=="],
+
+    "scheduler": ["scheduler@0.27.0", "", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "semver": ["semver@6.3.1", "", { "bin": { "semver": "bin/semver.js" } }, "sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA=="],
+
+    "sonner": ["sonner@2.0.7", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w=="],
+
+    "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
+
+    "tailwind-merge": ["tailwind-merge@3.6.0", "", {}, "sha512-uxL7qAVQriqRQPAyK3pj66VqskWqoZ37PW94jwOTwNfq/z9oyu1V+eqrZqtR2+fCiXdYOZe/Modt8GtvqNzu+w=="],
+
+    "tailwindcss": ["tailwindcss@4.3.3", "", {}, "sha512-gOhV3P7ufE62QDGg1zVaTgCR+EtPv92k2nIhVcVKcLmxT1sUBsQGhnZj175j+MqRt4zLF7ic+sCYjfhxMxj7YQ=="],
+
+    "tapable": ["tapable@2.3.3", "", {}, "sha512-uxc/zpqFg6x7C8vOE7lh6Lbda8eEL9zmVm/PLeTPBRhh1xCgdWaQ+J1CUieGpIfm2HdtsUpRv+HshiasBMcc6A=="],
+
+    "tinyglobby": ["tinyglobby@0.2.17", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.4" } }, "sha512-wXR/dYpcqKmfWpEdZjiKJOwCNFndD0DMnrW/cYjVGttEkBfVgcLFHoNrlj47mjOVic9yyNu65alsgF4NQyTa2g=="],
+
+    "tslib": ["tslib@2.8.1", "", {}, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "tw-animate-css": ["tw-animate-css@1.4.0", "", {}, "sha512-7bziOlRqH0hJx80h/3mbicLW7o8qLsH5+RaLR2t+OHM3D0JlWGODQKQ4cxbK7WlvmUxpcj6Kgu6EKqjrGFe3QQ=="],
+
+    "typescript": ["typescript@6.0.3", "", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
+
+    "undici-types": ["undici-types@8.3.0", "", {}, "sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ=="],
+
+    "update-browserslist-db": ["update-browserslist-db@1.2.3", "", { "dependencies": { "escalade": "^3.2.0", "picocolors": "^1.1.1" }, "peerDependencies": { "browserslist": ">= 4.21.0" }, "bin": { "update-browserslist-db": "cli.js" } }, "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w=="],
+
+    "use-callback-ref": ["use-callback-ref@1.3.3", "", { "dependencies": { "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg=="],
+
+    "use-sidecar": ["use-sidecar@1.1.3", "", { "dependencies": { "detect-node-es": "^1.1.0", "tslib": "^2.0.0" }, "peerDependencies": { "@types/react": "*", "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Fedw0aZvkhynoPYlA5WXrMCAMm+nSWdZt6lzJQ7Ok8S6Q+VsHmHpRWndVRJ8Be0ZbkfPc5LRYH+5XrzXcEeLRQ=="],
+
+    "vite": ["vite@8.1.5", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.5", "postcss": "^8.5.17", "rolldown": "~1.1.5", "tinyglobby": "^0.2.17" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.3.0", "esbuild": "^0.27.0 || ^0.28.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-7ULLwsCdYx/nRyrpiEwvqb5TFHrMVZyBt+rg/OAXT7rgj/z+DtTDyKFeLAdDkubDVDKD8jOsndmy7m55XcfUsw=="],
+
+    "yallist": ["yallist@3.1.1", "", {}, "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g=="],
+
+    "zod": ["zod@4.4.3", "", {}, "sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ=="],
+
+    "@tailwindcss/node/lightningcss": ["lightningcss@1.32.0", "", { "dependencies": { "detect-libc": "^2.0.3" }, "optionalDependencies": { "lightningcss-android-arm64": "1.32.0", "lightningcss-darwin-arm64": "1.32.0", "lightningcss-darwin-x64": "1.32.0", "lightningcss-freebsd-x64": "1.32.0", "lightningcss-linux-arm-gnueabihf": "1.32.0", "lightningcss-linux-arm64-gnu": "1.32.0", "lightningcss-linux-arm64-musl": "1.32.0", "lightningcss-linux-x64-gnu": "1.32.0", "lightningcss-linux-x64-musl": "1.32.0", "lightningcss-win32-arm64-msvc": "1.32.0", "lightningcss-win32-x64-msvc": "1.32.0" } }, "sha512-NXYBzinNrblfraPGyrbPoD19C1h9lfI/1mzgWYvXUTe414Gz/X1FD2XBZSZM7rRTrMA8JL3OtAaGifrIKhQ5yQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.11.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.2.2", "tslib": "^2.4.0" }, "bundled": true }, "sha512-RSvbQmHzdKzNsLYa/wHrbc3KN4sYLKAdPZxqiM2HATqv/SBk2/ENSHpvXGaLOMcsAyz0poEGqkmmKYG3OWiJEQ=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.11.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-vgj7R3y3Wgx24IQaGPA/R6YFXLHVMOZ0uVEyIQPaWs+rd1AzfEMXlAC22FYwO1XkKR6NPsq7mUandH8oIRdZFw=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@emnapi/wasi-threads": ["@emnapi/wasi-threads@1.2.2", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-c95qOXkHdydNKhscBTebqEC1CVAZpyqOfVfBzQ1qgzyl3gfeldUjIggDbIZgDKsHLgnsM+igH7TJ/eAasaVuMA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.2.0", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^2.0.0-alpha.3", "@emnapi/runtime": "^2.0.0-alpha.3" }, "bundled": true }, "sha512-kDoONqMa+VnZ4vvvu/ZUurpJ4gkZU57e7g69qpNgWhYcZFPUHZM2CEMKm+cG6ufDVALbjMvfmMjFVqaK7uEMnA=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/@tybys/wasm-util": ["@tybys/wasm-util@0.10.3", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-F3fo1MYrRJYL3zER0OUOmkutjr1Vp23m7OsSgp7nq4SP6OqX6C/56XFIPAl5bt3zaBRjmW7SGz3u/6LwFpYcOg=="],
+
+    "@tailwindcss/oxide-wasm32-wasi/tslib": ["tslib@2.8.1", "", { "bundled": true }, "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w=="],
+
+    "rolldown/@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.1", "", {}, "sha512-2j9bGt5Jh8hj+vPtgzPtl72j0yRxHAyumoo6TNfAjsLB04UtpSvPbPcDcBMxz7n+9CYB0c1GxQFxYRg2jimqGw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-android-arm64": ["lightningcss-android-arm64@1.32.0", "", { "os": "android", "cpu": "arm64" }, "sha512-YK7/ClTt4kAK0vo6w3X+Pnm0D2cf2vPHbhOXdoNti1Ga0al1P4TBZhwjATvjNwLEBCnKvjJc2jQgHXH0NEwlAg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-arm64": ["lightningcss-darwin-arm64@1.32.0", "", { "os": "darwin", "cpu": "arm64" }, "sha512-RzeG9Ju5bag2Bv1/lwlVJvBE3q6TtXskdZLLCyfg5pt+HLz9BqlICO7LZM7VHNTTn/5PRhHFBSjk5lc4cmscPQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-darwin-x64": ["lightningcss-darwin-x64@1.32.0", "", { "os": "darwin", "cpu": "x64" }, "sha512-U+QsBp2m/s2wqpUYT/6wnlagdZbtZdndSmut/NJqlCcMLTWp5muCrID+K5UJ6jqD2BFshejCYXniPDbNh73V8w=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-freebsd-x64": ["lightningcss-freebsd-x64@1.32.0", "", { "os": "freebsd", "cpu": "x64" }, "sha512-JCTigedEksZk3tHTTthnMdVfGf61Fky8Ji2E4YjUTEQX14xiy/lTzXnu1vwiZe3bYe0q+SpsSH/CTeDXK6WHig=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm-gnueabihf": ["lightningcss-linux-arm-gnueabihf@1.32.0", "", { "os": "linux", "cpu": "arm" }, "sha512-x6rnnpRa2GL0zQOkt6rts3YDPzduLpWvwAF6EMhXFVZXD4tPrBkEFqzGowzCsIWsPjqSK+tyNEODUBXeeVHSkw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-gnu": ["lightningcss-linux-arm64-gnu@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-0nnMyoyOLRJXfbMOilaSRcLH3Jw5z9HDNGfT/gwCPgaDjnx0i8w7vBzFLFR1f6CMLKF8gVbebmkUN3fa/kQJpQ=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-arm64-musl": ["lightningcss-linux-arm64-musl@1.32.0", "", { "os": "linux", "cpu": "arm64" }, "sha512-UpQkoenr4UJEzgVIYpI80lDFvRmPVg6oqboNHfoH4CQIfNA+HOrZ7Mo7KZP02dC6LjghPQJeBsvXhJod/wnIBg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-gnu": ["lightningcss-linux-x64-gnu@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-V7Qr52IhZmdKPVr+Vtw8o+WLsQJYCTd8loIfpDaMRWGUZfBOYEJeyJIkqGIDMZPwPx24pUMfwSxxI8phr/MbOA=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-linux-x64-musl": ["lightningcss-linux-x64-musl@1.32.0", "", { "os": "linux", "cpu": "x64" }, "sha512-bYcLp+Vb0awsiXg/80uCRezCYHNg1/l3mt0gzHnWV9XP1W5sKa5/TCdGWaR/zBM2PeF/HbsQv/j2URNOiVuxWg=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-arm64-msvc": ["lightningcss-win32-arm64-msvc@1.32.0", "", { "os": "win32", "cpu": "arm64" }, "sha512-8SbC8BR40pS6baCM8sbtYDSwEVQd4JlFTOlaD3gWGHfThTcABnNDBda6eTZeqbofalIJhFx0qKzgHJmcPTnGdw=="],
+
+    "@tailwindcss/node/lightningcss/lightningcss-win32-x64-msvc": ["lightningcss-win32-x64-msvc@1.32.0", "", { "os": "win32", "cpu": "x64" }, "sha512-Amq9B/SoZYdDi1kFrojnoqPLxYhQ4Wo5XiL8EVJrVsB8ARoC1PWW6VGtT0WKCemjy8aC+louJnjS7U18x3b06Q=="],
+  }
+}
diff --git a/web/components.json b/web/components.json
new file mode 100644
index 00000000..753a2f0c
--- /dev/null
+++ b/web/components.json
@@ -0,0 +1,21 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/app.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "$lib/components",
+    "utils": "$lib/utils",
+    "ui": "$lib/components/ui",
+    "lib": "$lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
+}
diff --git a/web/index.html b/web/index.html
new file mode 100644
index 00000000..a4404e36
--- /dev/null
+++ b/web/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>OpenCode Memory Explorer</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/web/package.json b/web/package.json
new file mode 100644
index 00000000..12a8690f
--- /dev/null
+++ b/web/package.json
@@ -0,0 +1,43 @@
+{
+  "name": "web",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "preview": "vite preview",
+    "check": "tsc -b --pretty false"
+  },
+  "dependencies": {
+    "dompurify": "^3.4.12",
+    "jsonrepair": "^3.15.0",
+    "marked": "^18.0.7",
+    "zod": "^4.4.3"
+  },
+  "devDependencies": {
+    "@fontsource-variable/jetbrains-mono": "^5.3.0",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-separator": "^1.1.7",
+    "@radix-ui/react-slot": "^1.2.3",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.1.1",
+    "@types/react": "^19.1.8",
+    "@types/react-dom": "^19.1.6",
+    "@vitejs/plugin-react": "^5.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.525.0",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "sonner": "^2.0.6",
+    "tailwind-merge": "^3.6.0",
+    "tailwindcss": "^4.3.3",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "~6.0.3",
+    "vite": "^8.1.5"
+  }
+}
diff --git a/src/web/favicon.ico b/web/public/favicon.ico
similarity index 100%
rename from src/web/favicon.ico
rename to web/public/favicon.ico
diff --git a/web/public/opencode-mem-icon.png b/web/public/opencode-mem-icon.png
new file mode 100644
index 00000000..665a2d98
Binary files /dev/null and b/web/public/opencode-mem-icon.png differ
diff --git a/web/src/App.tsx b/web/src/App.tsx
new file mode 100644
index 00000000..3a16d331
--- /dev/null
+++ b/web/src/App.tsx
@@ -0,0 +1,379 @@
+import { useEffect, useState, type MouseEvent } from "react";
+import { AlertTriangle, Loader, Menu, Plus, RefreshCw, Search, Trash, X } from "lucide-react";
+import { useMemoriesExplorer } from "@/hooks/useMemoriesExplorer";
+import { useUserProfile } from "@/hooks/useUserProfile";
+import { AiCleanupDialog } from "$lib/components/explorer/AiCleanupDialog";
+import { AppSidebar } from "$lib/components/explorer/AppSidebar";
+import { EditMemoryDialog } from "$lib/components/explorer/EditMemoryDialog";
+import { MemoryList } from "$lib/components/explorer/MemoryList";
+import { ProfileView } from "$lib/components/explorer/ProfileView";
+import { TagMigrationDialog } from "$lib/components/explorer/TagMigrationDialog";
+import { Alert, AlertDescription } from "$lib/components/ui/alert";
+import { Button } from "$lib/components/ui/button";
+import { Checkbox } from "$lib/components/ui/checkbox";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
+import { Toaster } from "$lib/components/ui/sonner";
+import { Textarea } from "$lib/components/ui/textarea";
+import { cycleLanguage, getLanguage, useI18n } from "$lib/i18n";
+import { initRouter, navigate, ROUTES, useAppView } from "$lib/router";
+
+const MEMORY_TYPES = [
+  "",
+  "feature",
+  "bug-fix",
+  "refactor",
+  "architecture",
+  "rule",
+  "documentation",
+  "discussion",
+  "analysis",
+  "configuration",
+] as const;
+
+export default function App() {
+  const { t } = useI18n();
+  const currentView = useAppView();
+  const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [langLabel, setLangLabel] = useState(getLanguage().toUpperCase());
+
+  const explorer = useMemoriesExplorer();
+  const profile = useUserProfile();
+
+  useEffect(() => {
+    const stopRouter = initRouter();
+    void (async () => {
+      await explorer.loadTags();
+      await explorer.loadMemories();
+      await explorer.loadStats();
+      await explorer.checkMigrationStatus();
+      await explorer.checkAuthWarning();
+    })();
+    const refreshTimer = setInterval(() => {
+      void explorer.loadStats();
+      if (!explorer.isSearching && currentView === "project") {
+        void explorer.loadMemories();
+      }
+    }, 30000);
+    return () => {
+      stopRouter();
+      clearInterval(refreshTimer);
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- mount-only init
+  }, []);
+
+  useEffect(() => {
+    if (currentView === "profile") {
+      void profile.loadUserProfile();
+    }
+  }, [currentView, profile.loadUserProfile]);
+
+  function onLangToggle() {
+    setLangLabel(cycleLanguage().toUpperCase());
+    void explorer.loadMemories();
+    void explorer.loadStats();
+    if (currentView === "profile") void profile.loadUserProfile();
+  }
+
+  function onHomeClick(event: MouseEvent) {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    navigate(ROUTES.home);
+  }
+
+  return (
+    <>
+      <Toaster richColors position="bottom-right" />
+
+      <div className="flex min-h-svh bg-background text-foreground">
+        <AppSidebar
+          open={sidebarOpen}
+          onOpenChange={setSidebarOpen}
+          currentView={currentView}
+          brand={t("brand")}
+          projectLabel={t("tab-project")}
+          profileLabel={t("tab-profile")}
+          langLabel={langLabel}
+          languageLabel={t("nav-language")}
+          themeLabel={t("nav-theme")}
+          closeLabel={t("nav-close")}
+          onLangToggle={onLangToggle}
+        />
+
+        <div className="flex min-w-0 flex-1 flex-col">
+          <div className="sticky top-0 z-30 flex items-center gap-2 border-b border-border bg-background/95 px-3 py-2 backdrop-blur md:hidden">
+            <Button
+              variant="ghost"
+              size="icon-sm"
+              onClick={() => setSidebarOpen(true)}
+              aria-label={t("nav-menu")}
+            >
+              <Menu className="size-4" />
+            </Button>
+            <a
+              href={ROUTES.home}
+              className="truncate text-sm tracking-wide text-primary"
+              onClick={onHomeClick}
+            >
+              {t("brand")}
+            </a>
+          </div>
+
+          <div className="mx-auto w-full max-w-6xl flex-1 space-y-4 p-4 md:p-6">
+            {explorer.showAuthWarning ? (
+              <Alert variant="destructive">
+                <AlertTriangle />
+                <AlertDescription>{t("auth-warning-text")}</AlertDescription>
+              </Alert>
+            ) : null}
+
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h1 className="text-base tracking-wide text-primary">
+                {currentView === "project" ? t("tab-project") : t("tab-profile")}
+              </h1>
+              {currentView === "project" ? (
+                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                  <span>{t("text-total", { count: explorer.statsTotal })}</span>
+                  {explorer.refreshing ? <Loader className="size-3.5 animate-spin" /> : null}
+                </div>
+              ) : null}
+            </div>
+
+            {currentView === "project" ? (
+              <>
+                <div className="flex flex-wrap items-end gap-3 rounded-xl border border-border bg-card p-3">
+                  <div className="space-y-1">
+                    <Label htmlFor="tag-filter">{t("label-tag")}</Label>
+                    <select
+                      id="tag-filter"
+                      className="flex h-8 min-w-48 rounded-lg border border-border bg-background px-2 text-sm"
+                      value={explorer.selectedTag}
+                      onChange={(e) => explorer.onTagFilterChange(e.currentTarget.value)}
+                    >
+                      <option value="">{t("opt-all-tags")}</option>
+                      {explorer.tags.map((tag) => (
+                        <option key={tag.tag} value={tag.tag}>
+                          {tag.displayName || tag.tag}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="flex flex-1 items-end gap-1.5 min-w-56">
+                    <div className="flex-1 space-y-1">
+                      <Label htmlFor="search-input" className="sr-only">
+                        {t("placeholder-search")}
+                      </Label>
+                      <Input
+                        id="search-input"
+                        placeholder={t("placeholder-search")}
+                        value={explorer.searchInput}
+                        onChange={(e) => explorer.setSearchInput(e.target.value)}
+                        onKeyDown={(e) => e.key === "Enter" && explorer.performSearch()}
+                      />
+                    </div>
+                    <Button variant="outline" size="icon" onClick={explorer.performSearch}>
+                      <Search className="size-4" />
+                    </Button>
+                    {explorer.isSearching ? (
+                      <Button variant="outline" size="icon" onClick={explorer.clearSearch}>
+                        <X className="size-4" />
+                      </Button>
+                    ) : null}
+                  </div>
+
+                  <div className="flex flex-wrap gap-1.5">
+                    <Button variant="outline" size="sm" onClick={explorer.runCleanup}>
+                      <Trash className="size-3.5" />
+                      {t("btn-cleanup")}
+                    </Button>
+                    <Button variant="outline" size="sm" onClick={explorer.runDeduplication}>
+                      <RefreshCw className="size-3.5" />
+                      {t("btn-deduplicate")}
+                    </Button>
+                  </div>
+
+                  {explorer.selectedIds.size > 0 ? (
+                    <div className="flex w-full flex-wrap items-center gap-2 border-t border-border pt-3">
+                      <span className="text-xs text-muted-foreground">
+                        {t("text-selected", { count: explorer.selectedIds.size })}
+                      </span>
+                      <Button variant="secondary" size="xs" onClick={explorer.selectAllCurrentPage}>
+                        {t("btn-select-all")}
+                      </Button>
+                      <Button variant="destructive" size="xs" onClick={explorer.bulkDelete}>
+                        {t("btn-delete-selected")}
+                      </Button>
+                      <Button variant="ghost" size="xs" onClick={explorer.deselectAll}>
+                        {t("btn-deselect-all")}
+                      </Button>
+                    </div>
+                  ) : null}
+                </div>
+
+                {explorer.migrationNeeded ? (
+                  <Alert variant="destructive" className="space-y-3">
+                    <AlertTriangle />
+                    <AlertDescription className="space-y-3">
+                      <p>{explorer.migrationMessage || t("migration-mismatch")}</p>
+                      <label className="flex items-start gap-2 text-sm">
+                        <Checkbox
+                          checked={explorer.migrationConfirmed}
+                          onCheckedChange={(v) => explorer.setMigrationConfirmed(v === true)}
+                          className="mt-0.5"
+                        />
+                        <span>{t("migration-understand")}</span>
+                      </label>
+                      <div className="flex flex-wrap gap-2">
+                        <Button
+                          variant="destructive"
+                          size="sm"
+                          disabled={!explorer.migrationConfirmed}
+                          onClick={() => explorer.runMigration("fresh-start")}
+                        >
+                          {t("btn-fresh-start")}
+                        </Button>
+                        <Button
+                          variant="secondary"
+                          size="sm"
+                          disabled={!explorer.migrationConfirmed}
+                          onClick={() => explorer.runMigration("re-embed")}
+                        >
+                          {t("btn-reembed")}
+                        </Button>
+                      </div>
+                    </AlertDescription>
+                  </Alert>
+                ) : null}
+
+                <MemoryList
+                  memories={explorer.memories}
+                  selectedIds={explorer.selectedIds}
+                  currentPage={explorer.currentPage}
+                  totalPages={explorer.totalPages}
+                  totalItems={explorer.totalItems}
+                  isSearching={explorer.isSearching}
+                  loading={explorer.loadingMemories}
+                  error={explorer.memoriesError}
+                  onSelect={explorer.onSelect}
+                  onPageChange={(delta) => {
+                    const next = explorer.currentPage + delta;
+                    explorer.setCurrentPage(next);
+                    void explorer.loadMemories({ page: next });
+                  }}
+                  onPin={explorer.pinMemory}
+                  onUnpin={explorer.unpinMemory}
+                  onEdit={explorer.openEdit}
+                  onDeleteMemory={explorer.deleteMemory}
+                  onDeletePrompt={explorer.deletePrompt}
+                />
+
+                <section className="rounded-xl border border-border bg-card p-4 space-y-3">
+                  <h2 className="text-sm text-muted-foreground">{t("section-add")}</h2>
+                  <form className="space-y-3" onSubmit={explorer.addMemory}>
+                    <div className="grid gap-3 md:grid-cols-3">
+                      <div className="space-y-1">
+                        <Label htmlFor="add-tag">{t("label-tag")}</Label>
+                        <select
+                          id="add-tag"
+                          required
+                          className="flex h-8 w-full rounded-lg border border-border bg-background px-2 text-sm"
+                          value={explorer.addTag}
+                          onChange={(e) => explorer.setAddTag(e.target.value)}
+                        >
+                          <option value="">{t("opt-select-tag")}</option>
+                          {explorer.tags.map((tag) => (
+                            <option key={tag.tag} value={tag.tag}>
+                              {tag.displayName || tag.tag}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label htmlFor="add-type">{t("label-type")}</Label>
+                        <select
+                          id="add-type"
+                          className="flex h-8 w-full rounded-lg border border-border bg-background px-2 text-sm"
+                          value={explorer.addType}
+                          onChange={(e) => explorer.setAddType(e.target.value)}
+                        >
+                          {MEMORY_TYPES.map((type) => (
+                            <option key={type || "other"} value={type}>
+                              {t(type ? `opt-${type}` : "opt-other")}
+                            </option>
+                          ))}
+                        </select>
+                      </div>
+                      <div className="space-y-1">
+                        <Label htmlFor="add-tags">{t("label-tags")}</Label>
+                        <Input
+                          id="add-tags"
+                          placeholder={t("placeholder-tags")}
+                          value={explorer.addTags}
+                          onChange={(e) => explorer.setAddTags(e.target.value)}
+                        />
+                      </div>
+                    </div>
+                    <div className="space-y-1">
+                      <Label htmlFor="add-content">{t("label-content")}</Label>
+                      <Textarea
+                        id="add-content"
+                        rows={4}
+                        required
+                        placeholder={t("placeholder-content")}
+                        value={explorer.addContent}
+                        onChange={(e) => explorer.setAddContent(e.target.value)}
+                      />
+                    </div>
+                    <Button type="submit">
+                      <Plus className="size-3.5" />
+                      {t("btn-add-memory")}
+                    </Button>
+                  </form>
+                </section>
+              </>
+            ) : (
+              <ProfileView
+                profile={profile.userProfile}
+                loading={profile.loadingProfile}
+                onRefresh={profile.refreshProfile}
+                onCleanup={() => profile.setAiCleanupOpen(true)}
+              />
+            )}
+          </div>
+        </div>
+      </div>
+
+      <EditMemoryDialog
+        open={explorer.editOpen}
+        onOpenChange={explorer.setEditOpen}
+        content={explorer.editContent}
+        onSave={explorer.saveEdit}
+      />
+      <TagMigrationDialog
+        open={explorer.tagMigrationOpen}
+        onOpenChange={explorer.setTagMigrationOpen}
+        count={explorer.tagMigrationCount}
+        onComplete={() => {
+          void explorer.loadMemories();
+          void explorer.loadStats();
+        }}
+      />
+      <AiCleanupDialog
+        open={profile.aiCleanupOpen}
+        onOpenChange={profile.setAiCleanupOpen}
+        profile={profile.userProfile}
+        onApplied={profile.loadUserProfile}
+      />
+    </>
+  );
+}
diff --git a/web/src/app.css b/web/src/app.css
new file mode 100644
index 00000000..acdd0b4d
--- /dev/null
+++ b/web/src/app.css
@@ -0,0 +1,172 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/jetbrains-mono";
+
+@custom-variant dark (&:is(.dark *));
+
+/* Light tokens — matrix-adjacent green accent */
+:root {
+  --background: #f3f5f3;
+  --foreground: #141814;
+  --card: #ffffff;
+  --card-foreground: #141814;
+  --popover: #ffffff;
+  --popover-foreground: #141814;
+  --primary: #0a8a0a;
+  --primary-foreground: #f5fff5;
+  --secondary: #e6ebe6;
+  --secondary-foreground: #141814;
+  --muted: #e6ebe6;
+  --muted-foreground: #5c665c;
+  --accent: #e6ebe6;
+  --accent-foreground: #0a8a0a;
+  --destructive: #d32f2f;
+  --border: #c9d0c9;
+  --input: #dce2dc;
+  --ring: #0a8a0a;
+  --chart-1: #0a8a0a;
+  --chart-2: #2aa02a;
+  --chart-3: #4caf50;
+  --chart-4: #087008;
+  --chart-5: #055505;
+  --radius: 0.45rem;
+  --sidebar: #e9eee9;
+  --sidebar-foreground: #141814;
+  --sidebar-primary: #0a8a0a;
+  --sidebar-primary-foreground: #f5fff5;
+  --sidebar-accent: #dce4dc;
+  --sidebar-accent-foreground: #0a8a0a;
+  --sidebar-border: #c9d0c9;
+  --sidebar-ring: #0a8a0a;
+  color-scheme: light;
+}
+
+/* Matrix / dark-terminal tokens (OpenCode-adjacent) */
+.dark {
+  --background: #0a0a0a;
+  --foreground: #e0e0e0;
+  --card: #111111;
+  --card-foreground: #e0e0e0;
+  --popover: #111111;
+  --popover-foreground: #e0e0e0;
+  --primary: #00ff00;
+  --primary-foreground: #0a0a0a;
+  --secondary: #1a1a1a;
+  --secondary-foreground: #e0e0e0;
+  --muted: #1a1a1a;
+  --muted-foreground: #888888;
+  --accent: #1a1a1a;
+  --accent-foreground: #00ff00;
+  --destructive: #ff4444;
+  --border: #333333;
+  --input: #222222;
+  --ring: #00ff00;
+  --chart-1: #00ff00;
+  --chart-2: #33ff66;
+  --chart-3: #66ff99;
+  --chart-4: #00cc00;
+  --chart-5: #009900;
+  --radius: 0.45rem;
+  --sidebar: #111111;
+  --sidebar-foreground: #e0e0e0;
+  --sidebar-primary: #00ff00;
+  --sidebar-primary-foreground: #0a0a0a;
+  --sidebar-accent: #1a1a1a;
+  --sidebar-accent-foreground: #00ff00;
+  --sidebar-border: #333333;
+  --sidebar-ring: #00ff00;
+  color-scheme: dark;
+}
+
+@theme inline {
+  --font-mono: "JetBrains Mono Variable", "JetBrains Mono", "Fira Code", ui-monospace, monospace;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground font-mono text-sm antialiased;
+    margin: 0;
+  }
+  html {
+    @apply font-mono;
+  }
+}
+
+.markdown-content {
+  line-height: 1.6;
+  word-break: break-word;
+}
+.markdown-content pre {
+  overflow-x: auto;
+  padding: 0.75rem;
+  background: var(--muted);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+}
+.markdown-content code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+}
+.markdown-content p {
+  margin: 0.4em 0;
+}
+
+.confidence-ring {
+  --p: 0;
+  width: 2.25rem;
+  height: 2.25rem;
+  border-radius: 9999px;
+  display: grid;
+  place-items: center;
+  font-size: 0.65rem;
+  background: conic-gradient(var(--primary) calc(var(--p) * 1%), #333 0);
+}
+.confidence-ring span {
+  background: var(--card);
+  width: 1.75rem;
+  height: 1.75rem;
+  border-radius: 9999px;
+  display: grid;
+  place-items: center;
+}
diff --git a/web/src/hooks/useMemoriesExplorer.ts b/web/src/hooks/useMemoriesExplorer.ts
new file mode 100644
index 00000000..25891376
--- /dev/null
+++ b/web/src/hooks/useMemoriesExplorer.ts
@@ -0,0 +1,463 @@
+import { useCallback, useRef, useState, type FormEvent } from "react";
+import { toast } from "sonner";
+import { fetchAPI } from "$lib/api";
+import { t } from "$lib/i18n";
+import type { MemoryItem, TagInfo } from "$lib/types";
+
+export function useMemoriesExplorer() {
+  const [tags, setTags] = useState<TagInfo[]>([]);
+  const [memories, setMemories] = useState<MemoryItem[]>([]);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [selectedTag, setSelectedTag] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [searchInput, setSearchInput] = useState("");
+  const [isSearching, setIsSearching] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalItems, setTotalItems] = useState(0);
+  const [statsTotal, setStatsTotal] = useState(0);
+  const [loadingMemories, setLoadingMemories] = useState(true);
+  const [memoriesError, setMemoriesError] = useState<string | null>(null);
+  const [refreshing, setRefreshing] = useState(false);
+  const [showAuthWarning, setShowAuthWarning] = useState(false);
+  const [migrationNeeded, setMigrationNeeded] = useState(false);
+  const [migrationMessage, setMigrationMessage] = useState("");
+  const [migrationConfirmed, setMigrationConfirmed] = useState(false);
+  const [tagMigrationOpen, setTagMigrationOpen] = useState(false);
+  const [tagMigrationCount, setTagMigrationCount] = useState(0);
+  const [editOpen, setEditOpen] = useState(false);
+  const [editId, setEditId] = useState("");
+  const [editContent, setEditContent] = useState("");
+  const [addTag, setAddTag] = useState("");
+  const [addType, setAddType] = useState("");
+  const [addTags, setAddTags] = useState("");
+  const [addContent, setAddContent] = useState("");
+
+  const stateRef = useRef({
+    currentPage,
+    isSearching,
+    searchQuery,
+    selectedTag,
+  });
+  stateRef.current = { currentPage, isSearching, searchQuery, selectedTag };
+
+  const setSelected = useCallback((next: Set<string>) => {
+    setSelectedIds(new Set(next));
+  }, []);
+
+  const loadTags = useCallback(async () => {
+    const result = await fetchAPI<{ project: TagInfo[] }>("/api/tags");
+    if (result.success && result.data) {
+      setTags(result.data.project || []);
+    }
+  }, []);
+
+  const loadStats = useCallback(async () => {
+    const result = await fetchAPI<{ total: number }>("/api/stats");
+    if (result.success && result.data) {
+      setStatsTotal(result.data.total);
+    }
+  }, []);
+
+  const loadMemories = useCallback(
+    async (overrides?: {
+      page?: number;
+      isSearching?: boolean;
+      searchQuery?: string;
+      selectedTag?: string;
+    }) => {
+      const {
+        currentPage: page,
+        isSearching: searching,
+        searchQuery: query,
+        selectedTag: tag,
+      } = {
+        ...stateRef.current,
+        ...overrides,
+        currentPage: overrides?.page ?? stateRef.current.currentPage,
+      };
+
+      setRefreshing(true);
+      setMemoriesError(null);
+      let endpoint = `/api/memories?page=${page}&pageSize=20&includePrompts=true`;
+      if (searching) {
+        endpoint = `/api/search?q=${encodeURIComponent(query)}&page=${page}&pageSize=20`;
+        if (tag) endpoint += `&tag=${encodeURIComponent(tag)}`;
+      } else if (tag) {
+        endpoint += `&tag=${encodeURIComponent(tag)}`;
+      }
+
+      const result = await fetchAPI<{
+        items: MemoryItem[];
+        totalPages: number;
+        total: number;
+        page: number;
+      }>(endpoint);
+      setRefreshing(false);
+      setLoadingMemories(false);
+
+      if (result.success && result.data) {
+        setMemories(result.data.items);
+        setTotalPages(result.data.totalPages);
+        setTotalItems(result.data.total);
+        setCurrentPage(result.data.page);
+      } else {
+        setMemoriesError(result.error || t("toast-update-failed"));
+      }
+    },
+    []
+  );
+
+  const checkMigrationStatus = useCallback(async () => {
+    const result = await fetchAPI<{
+      needsMigration: boolean;
+      configDimensions: number;
+      configModel: string;
+      shardMismatches: unknown[];
+    }>("/api/migration/detect");
+    if (result.success && result.data?.needsMigration) {
+      const shardInfo =
+        result.data.shardMismatches.length > 0
+          ? t("migration-shards-mismatch", { count: result.data.shardMismatches.length })
+          : t("migration-dimension-mismatch");
+      setMigrationMessage(
+        t("migration-mismatch-details", {
+          configDimensions: result.data.configDimensions,
+          configModel: result.data.configModel,
+          shardInfo,
+        })
+      );
+      setMigrationNeeded(true);
+    }
+
+    const tagResult = await fetchAPI<{ needsMigration: boolean; count: number }>(
+      "/api/migration/tags/detect"
+    );
+    if (tagResult.success && tagResult.data?.needsMigration) {
+      setTagMigrationCount(tagResult.data.count);
+      setTagMigrationOpen(true);
+    }
+  }, []);
+
+  const checkAuthWarning = useCallback(async () => {
+    try {
+      const response = await fetch("/api/health", { credentials: "same-origin" });
+      if (!response.ok) return;
+      const data = await response.json();
+      const authEnabled = data?.authEnabled === true;
+      if (authEnabled) {
+        setShowAuthWarning(false);
+        return;
+      }
+      const host = window.location.hostname.toLowerCase();
+      const loopback =
+        host === "localhost" ||
+        host === "127.0.0.1" ||
+        host === "[::1]" ||
+        host === "::1" ||
+        (host.startsWith("::ffff:") && host.endsWith("127.0.0.1"));
+      setShowAuthWarning(!loopback);
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  function performSearch() {
+    const query = searchInput.trim();
+    if (!query) {
+      clearSearch();
+      return;
+    }
+    setSearchQuery(query);
+    setIsSearching(true);
+    setCurrentPage(1);
+    void loadMemories({
+      page: 1,
+      isSearching: true,
+      searchQuery: query,
+    });
+  }
+
+  function clearSearch() {
+    setSearchQuery("");
+    setSearchInput("");
+    setIsSearching(false);
+    setCurrentPage(1);
+    void loadMemories({
+      page: 1,
+      isSearching: false,
+      searchQuery: "",
+    });
+  }
+
+  function onTagFilterChange(value: string) {
+    setSelectedTag(value);
+    setCurrentPage(1);
+    setIsSearching(false);
+    setSearchQuery("");
+    setSearchInput("");
+    void loadMemories({
+      page: 1,
+      isSearching: false,
+      searchQuery: "",
+      selectedTag: value,
+    });
+  }
+
+  function onSelect(id: string, selected: boolean) {
+    const next = new Set(selectedIds);
+    if (selected) next.add(id);
+    else next.delete(id);
+    setSelected(next);
+  }
+
+  function selectAllCurrentPage() {
+    const next = new Set(selectedIds);
+    for (const m of memories) next.add(m.id);
+    setSelected(next);
+  }
+
+  function deselectAll() {
+    setSelected(new Set());
+  }
+
+  async function addMemory(e: FormEvent) {
+    e.preventDefault();
+    const content = addContent.trim();
+    if (!content || !addTag) {
+      toast.error(t("toast-add-error"));
+      return;
+    }
+    const tagsList = addTags
+      .split(",")
+      .map((x) => x.trim())
+      .filter(Boolean);
+    const result = await fetchAPI("/api/memories", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        content,
+        containerTag: addTag,
+        type: addType || undefined,
+        tags: tagsList,
+      }),
+    });
+    if (result.success) {
+      toast.success(t("toast-add-success"));
+      setAddContent("");
+      setAddTags("");
+      setAddType("");
+      await loadMemories();
+      await loadStats();
+    } else {
+      toast.error(result.error || t("toast-add-failed"));
+    }
+  }
+
+  function openEdit(id: string) {
+    const memory = memories.find((m) => m.id === id && m.type === "memory");
+    if (!memory) return;
+    setEditId(id);
+    setEditContent(memory.content);
+    setEditOpen(true);
+  }
+
+  async function saveEdit(content: string) {
+    const result = await fetchAPI(`/api/memories/${editId}`, {
+      method: "PUT",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ content }),
+    });
+    if (result.success) {
+      toast.success(t("toast-update-success"));
+      setEditOpen(false);
+      await loadMemories();
+    } else {
+      toast.error(result.error || t("toast-update-failed"));
+    }
+  }
+
+  async function deleteMemory(id: string, isLinked: boolean) {
+    if (!confirm(isLinked ? t("confirm-delete-pair") : t("confirm-delete"))) return;
+    const result = await fetchAPI(`/api/memories/${id}?cascade=true`, {
+      method: "DELETE",
+    });
+    if (result.success) {
+      toast.success(t("toast-delete-success"));
+      const next = new Set(selectedIds);
+      next.delete(id);
+      setSelected(next);
+      await loadMemories();
+      await loadStats();
+    } else {
+      toast.error(result.error || t("toast-delete-failed"));
+    }
+  }
+
+  async function deletePrompt(id: string, isLinked: boolean) {
+    if (!confirm(isLinked ? t("confirm-delete-prompt") : t("confirm-delete"))) return;
+    const result = await fetchAPI(`/api/prompts/${id}?cascade=true`, {
+      method: "DELETE",
+    });
+    if (result.success) {
+      toast.success(t("toast-delete-success"));
+      const next = new Set(selectedIds);
+      next.delete(id);
+      setSelected(next);
+      await loadMemories();
+      await loadStats();
+    } else {
+      toast.error(result.error || t("toast-delete-failed"));
+    }
+  }
+
+  async function bulkDelete() {
+    if (selectedIds.size === 0) return;
+    if (!confirm(t("confirm-bulk-delete", { count: selectedIds.size }))) return;
+    const ids = Array.from(selectedIds);
+    const promptIds = ids.filter((id) => id.startsWith("prompt_"));
+    const memoryIds = ids.filter((id) => !id.startsWith("prompt_"));
+    if (promptIds.length > 0) {
+      await fetchAPI("/api/prompts/bulk-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: promptIds, cascade: true }),
+      });
+    }
+    if (memoryIds.length > 0) {
+      await fetchAPI("/api/memories/bulk-delete", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ ids: memoryIds, cascade: true }),
+      });
+    }
+    toast.success(t("toast-bulk-delete-success"));
+    setSelected(new Set());
+    await loadMemories();
+    await loadStats();
+  }
+
+  async function pinMemory(id: string) {
+    const result = await fetchAPI(`/api/memories/${id}/pin`, { method: "POST" });
+    if (result.success) {
+      toast.success(t("toast-update-success"));
+      await loadMemories();
+    } else toast.error(result.error || t("toast-update-failed"));
+  }
+
+  async function unpinMemory(id: string) {
+    const result = await fetchAPI(`/api/memories/${id}/unpin`, { method: "POST" });
+    if (result.success) {
+      toast.success(t("toast-update-success"));
+      await loadMemories();
+    } else toast.error(result.error || t("toast-update-failed"));
+  }
+
+  async function runCleanup() {
+    if (!confirm(t("confirm-cleanup"))) return;
+    toast.info(t("status-cleanup"));
+    const result = await fetchAPI("/api/cleanup", { method: "POST" });
+    if (result.success) {
+      toast.success(t("toast-cleanup-success"));
+      await loadMemories();
+      await loadStats();
+    } else toast.error(result.error || t("toast-cleanup-failed"));
+  }
+
+  async function runDeduplication() {
+    if (!confirm(t("confirm-dedup"))) return;
+    toast.info(t("status-dedup"));
+    const result = await fetchAPI("/api/deduplicate", { method: "POST" });
+    if (result.success) {
+      toast.success(t("toast-dedup-success"));
+      await loadMemories();
+      await loadStats();
+    } else toast.error(result.error || t("toast-dedup-failed"));
+  }
+
+  async function runMigration(strategy: "fresh-start" | "re-embed") {
+    if (!migrationConfirmed) {
+      toast.error(t("toast-migration-failed"));
+      return;
+    }
+    const strategyName =
+      strategy === "fresh-start" ? "Fresh Start (Delete All)" : "Re-embed (Preserve Data)";
+    if (
+      !confirm(`Run ${strategyName} migration?\n\nThis operation is IRREVERSIBLE.\n\nContinue?`)
+    ) {
+      return;
+    }
+    toast.info(t("status-migration-init"));
+    const result = await fetchAPI("/api/migration/run", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ strategy }),
+    });
+    if (result.success) {
+      toast.success(t("toast-migration-success"));
+      setMigrationNeeded(false);
+      setMigrationConfirmed(false);
+      await loadMemories();
+      await loadStats();
+    } else toast.error(result.error || t("toast-migration-failed"));
+  }
+
+  return {
+    tags,
+    memories,
+    selectedIds,
+    selectedTag,
+    searchInput,
+    setSearchInput,
+    isSearching,
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    totalItems,
+    statsTotal,
+    loadingMemories,
+    memoriesError,
+    refreshing,
+    showAuthWarning,
+    migrationNeeded,
+    migrationMessage,
+    migrationConfirmed,
+    setMigrationConfirmed,
+    tagMigrationOpen,
+    setTagMigrationOpen,
+    tagMigrationCount,
+    editOpen,
+    setEditOpen,
+    editContent,
+    addTag,
+    setAddTag,
+    addType,
+    setAddType,
+    addTags,
+    setAddTags,
+    addContent,
+    setAddContent,
+    loadTags,
+    loadStats,
+    loadMemories,
+    checkMigrationStatus,
+    checkAuthWarning,
+    performSearch,
+    clearSearch,
+    onTagFilterChange,
+    onSelect,
+    selectAllCurrentPage,
+    deselectAll,
+    addMemory,
+    openEdit,
+    saveEdit,
+    deleteMemory,
+    deletePrompt,
+    bulkDelete,
+    pinMemory,
+    unpinMemory,
+    runCleanup,
+    runDeduplication,
+    runMigration,
+  };
+}
diff --git a/web/src/hooks/useUserProfile.ts b/web/src/hooks/useUserProfile.ts
new file mode 100644
index 00000000..6a33b8cc
--- /dev/null
+++ b/web/src/hooks/useUserProfile.ts
@@ -0,0 +1,46 @@
+import { useCallback, useState } from "react";
+import { toast } from "sonner";
+import { fetchAPI } from "$lib/api";
+import { t } from "$lib/i18n";
+import type { UserProfile } from "$lib/types";
+
+export function useUserProfile() {
+  const [userProfile, setUserProfile] = useState<UserProfile | null>(null);
+  const [loadingProfile, setLoadingProfile] = useState(false);
+  const [aiCleanupOpen, setAiCleanupOpen] = useState(false);
+
+  const loadUserProfile = useCallback(async () => {
+    setLoadingProfile(true);
+    const result = await fetchAPI<UserProfile>("/api/user-profile");
+    setLoadingProfile(false);
+    if (result.success && result.data) {
+      setUserProfile(result.data);
+    } else {
+      toast.error(result.error || t("toast-update-failed"));
+    }
+  }, []);
+
+  const refreshProfile = useCallback(async () => {
+    toast.info(t("loading-profile"));
+    const result = await fetchAPI("/api/user-profile/refresh", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({}),
+    });
+    if (result.success) {
+      toast.success((result.data as { message?: string })?.message || t("toast-update-success"));
+      await loadUserProfile();
+    } else {
+      toast.error(result.error || t("toast-update-failed"));
+    }
+  }, [loadUserProfile]);
+
+  return {
+    userProfile,
+    loadingProfile,
+    aiCleanupOpen,
+    setAiCleanupOpen,
+    loadUserProfile,
+    refreshProfile,
+  };
+}
diff --git a/web/src/lib/api.ts b/web/src/lib/api.ts
new file mode 100644
index 00000000..f981e5f3
--- /dev/null
+++ b/web/src/lib/api.ts
@@ -0,0 +1,36 @@
+import type { ApiResult } from "$shared/api";
+
+export type { ApiResult };
+
+declare global {
+  interface Window {
+    __OPENCODE_MEM_TOKEN__?: string;
+  }
+}
+
+export async function fetchAPI<T = unknown>(
+  endpoint: string,
+  options: RequestInit & { timeout?: number } = {}
+): Promise<ApiResult<T>> {
+  try {
+    const controller = new AbortController();
+    const timeoutMs =
+      options.timeout ||
+      (options.method === "POST" && endpoint.includes("/ai-cleanup") ? 180000 : 60000);
+    const { timeout: _timeout, headers: extraHeaders, ...fetchOptions } = options;
+    const timeoutId = setTimeout(() => controller.abort(), timeoutMs);
+    const response = await fetch(endpoint, {
+      ...fetchOptions,
+      headers: {
+        ...(extraHeaders as Record<string, string>),
+        "x-opencode-mem-token": window.__OPENCODE_MEM_TOKEN__ || "",
+      },
+      signal: controller.signal,
+    });
+    clearTimeout(timeoutId);
+    return (await response.json()) as ApiResult<T>;
+  } catch (error) {
+    console.error("API Error:", error);
+    return { success: false, error: error instanceof Error ? error.message : String(error) };
+  }
+}
diff --git a/web/src/lib/components/explorer/AiCleanupDialog.tsx b/web/src/lib/components/explorer/AiCleanupDialog.tsx
new file mode 100644
index 00000000..2e0edd48
--- /dev/null
+++ b/web/src/lib/components/explorer/AiCleanupDialog.tsx
@@ -0,0 +1,538 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import {
+  ArrowRight,
+  ChevronDown,
+  ChevronRight,
+  ChevronUp,
+  GitMerge,
+  Loader,
+  Target,
+  Trash2,
+} from "lucide-react";
+import { toast } from "sonner";
+import { fetchAPI } from "$lib/api";
+import { Button } from "$lib/components/ui/button";
+import { Checkbox } from "$lib/components/ui/checkbox";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "$lib/components/ui/dialog";
+import { useI18n } from "$lib/i18n";
+import { findDescById, findStepsById } from "$lib/profile-utils";
+import type { PendingCleanup, ProfileItem, UserProfile } from "$lib/types";
+
+type CleanupItem = ProfileItem & { _id: string; _type: "pref" | "pat" | "wf" };
+
+type Props = {
+  open?: boolean;
+  profile?: UserProfile | null;
+  onOpenChange?: (open: boolean) => void;
+  onApplied?: () => void;
+};
+
+function truncate(text: string, max: number) {
+  return text.length > max ? text.substring(0, max) + "..." : text;
+}
+
+export function AiCleanupDialog({ open = false, profile = null, onOpenChange, onApplied }: Props) {
+  const { t } = useI18n();
+  const [phase, setPhase] = useState<"select" | "loading" | "diff">("select");
+  const [allItems, setAllItems] = useState<CleanupItem[]>([]);
+  const [selectedIds, setSelectedIds] = useState<Set<string>>(new Set());
+  const [pendingCleanup, setPendingCleanup] = useState<PendingCleanup | null>(null);
+  const [acceptedMerged, setAcceptedMerged] = useState<Set<number>>(new Set());
+  const [acceptedRemoved, setAcceptedRemoved] = useState<Set<number>>(new Set());
+  const [keptOpen, setKeptOpen] = useState(false);
+  const [applying, setApplying] = useState(false);
+  const wasOpen = useRef(false);
+
+  const cats = useMemo(() => {
+    const map: Record<string, { pref: CleanupItem[]; pat: CleanupItem[]; wf: CleanupItem[] }> = {};
+    for (const it of allItems) {
+      const cat = it.category || "(none)";
+      if (!map[cat]) map[cat] = { pref: [], pat: [], wf: [] };
+      map[cat][it._type].push(it);
+    }
+    return map;
+  }, [allItems]);
+
+  const sortedCatKeys = useMemo(() => Object.keys(cats).sort(), [cats]);
+  const selectedCount = selectedIds.size;
+  const diffSelectedCount = acceptedMerged.size + acceptedRemoved.size;
+  const diffTotalCount =
+    (pendingCleanup?.changes.merged?.length || 0) + (pendingCleanup?.changes.removed?.length || 0);
+
+  function initSelect() {
+    const pd = profile?.profileData;
+    if (!pd) {
+      toast.error("No profile data loaded");
+      handleOpenChange(false);
+      return;
+    }
+
+    const prefs = (pd.preferences || []).map((p, i) => ({
+      ...p,
+      _id: `pref_${i}`,
+      _type: "pref" as const,
+    }));
+    const pats = (pd.patterns || []).map((p, i) => ({
+      ...p,
+      _id: `pat_${i}`,
+      _type: "pat" as const,
+    }));
+    const wfs = (pd.workflows || []).map((w, i) => ({
+      ...w,
+      _id: `wf_${i}`,
+      _type: "wf" as const,
+    }));
+    const items = [...prefs, ...pats, ...wfs];
+    setAllItems(items);
+    setSelectedIds(new Set(items.filter((it) => (it.frequency || 0) <= 3).map((it) => it._id)));
+    setPhase("select");
+    setPendingCleanup(null);
+    setKeptOpen(false);
+  }
+
+  useEffect(() => {
+    if (open && !wasOpen.current) {
+      initSelect();
+    } else if (!open && wasOpen.current) {
+      setPhase("select");
+      setPendingCleanup(null);
+      setApplying(false);
+    }
+    wasOpen.current = open;
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- only re-init on dialog open edge
+  }, [open]);
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange?.(next);
+  }
+
+  function toggleId(id: string, checked: boolean) {
+    setSelectedIds((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(id);
+      else next.delete(id);
+      return next;
+    });
+  }
+
+  function selectAll() {
+    setSelectedIds(new Set(allItems.map((it) => it._id)));
+  }
+
+  function selectNone() {
+    setSelectedIds(new Set());
+  }
+
+  function selectLow() {
+    setSelectedIds(new Set(allItems.filter((it) => (it.frequency || 0) <= 3).map((it) => it._id)));
+  }
+
+  function selectSameCat() {
+    const next = new Set<string>();
+    for (const cat of Object.keys(cats)) {
+      const items = [...cats[cat].pref, ...cats[cat].pat, ...cats[cat].wf];
+      if (items.length >= 3) {
+        for (const it of items) next.add(it._id);
+      }
+    }
+    setSelectedIds(next);
+  }
+
+  async function analyze() {
+    const ids = [...selectedIds];
+    if (ids.length === 0) {
+      toast.warning("No items selected");
+      return;
+    }
+    setPhase("loading");
+    const result = await fetchAPI<PendingCleanup>("/api/user-profile/ai-cleanup", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ includeIds: ids }),
+      timeout: 180000,
+    });
+    if (!result.success || !result.data) {
+      setPhase("select");
+      toast.error(result.error || t("toast-ai-cleanup-failed"));
+      return;
+    }
+    setPendingCleanup(result.data);
+    setAcceptedMerged(new Set((result.data.changes.merged || []).map((_, i) => i)));
+    setAcceptedRemoved(new Set((result.data.changes.removed || []).map((_, i) => i)));
+    setPhase("diff");
+  }
+
+  function typeLabel(id: string) {
+    if (!id.includes("_")) return "?";
+    const prefix = id.split("_")[0];
+    if (prefix === "pref") return t("profile-type-pref") || "Pref";
+    if (prefix === "pat") return t("profile-type-pat") || "Pat";
+    if (prefix === "wf") return t("profile-type-wf") || "Wf";
+    return "?";
+  }
+
+  function toggleMerged(i: number, checked: boolean) {
+    setAcceptedMerged((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(i);
+      else next.delete(i);
+      return next;
+    });
+  }
+
+  function toggleRemoved(i: number, checked: boolean) {
+    setAcceptedRemoved((prev) => {
+      const next = new Set(prev);
+      if (checked) next.add(i);
+      else next.delete(i);
+      return next;
+    });
+  }
+
+  function selectAllDiff() {
+    setAcceptedMerged(new Set((pendingCleanup?.changes.merged || []).map((_, i) => i)));
+    setAcceptedRemoved(new Set((pendingCleanup?.changes.removed || []).map((_, i) => i)));
+  }
+
+  function deselectAllDiff() {
+    setAcceptedMerged(new Set());
+    setAcceptedRemoved(new Set());
+  }
+
+  async function apply() {
+    if (!pendingCleanup || diffSelectedCount === 0) return;
+    setApplying(true);
+    const acceptedMergedIds = [...acceptedMerged]
+      .map((mi) => pendingCleanup?.changes.merged?.[mi]?.ids)
+      .filter((ids): ids is string[] => !!ids);
+    const acceptedRemovedIds = [...acceptedRemoved]
+      .map((ri) => pendingCleanup?.changes.removed?.[ri]?.id)
+      .filter((id): id is string => !!id);
+
+    const result = await fetchAPI("/api/user-profile/ai-cleanup/apply", {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        profile: pendingCleanup.new,
+        acceptedMerged: acceptedMergedIds,
+        acceptedRemoved: acceptedRemovedIds,
+      }),
+    });
+    setApplying(false);
+
+    if (result.success) {
+      toast.success(t("toast-ai-cleanup-success"));
+      handleOpenChange(false);
+      onApplied?.();
+    } else {
+      toast.error(result.error || t("toast-cleanup-apply-failed"));
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="grid! sm:max-w-2xl max-h-[90vh] grid-rows-[auto_minmax(0,1fr)_auto] overflow-hidden gap-4">
+        <DialogHeader>
+          <DialogTitle>{t("label-ai-cleanup-title")}</DialogTitle>
+        </DialogHeader>
+
+        {phase === "loading" ? (
+          <div className="flex flex-col items-center gap-3 py-10 text-muted-foreground">
+            <Loader className="size-6 animate-spin" />
+            <span className="text-sm">{t("label-ai-cleanup-loading")}</span>
+          </div>
+        ) : phase === "select" ? (
+          <div className="flex min-h-0 flex-col gap-3 overflow-hidden">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <h3 className="text-sm font-medium">{t("label-ai-cleanup-select")}</h3>
+              <div className="flex flex-wrap gap-1.5">
+                <Button variant="secondary" size="xs" onClick={selectAll}>
+                  {t("label-ai-cleanup-select-all")}
+                </Button>
+                <Button variant="secondary" size="xs" onClick={selectNone}>
+                  {t("label-ai-cleanup-deselect-all")}
+                </Button>
+                <Button variant="secondary" size="xs" onClick={selectLow}>
+                  {t("label-ai-cleanup-select-low")}
+                </Button>
+                <Button variant="secondary" size="xs" onClick={selectSameCat}>
+                  {t("label-ai-cleanup-select-same-cat")}
+                </Button>
+              </div>
+            </div>
+            <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+              {sortedCatKeys.map((cat) => {
+                const items = [...cats[cat].pref, ...cats[cat].pat, ...cats[cat].wf];
+                return (
+                  <div key={cat} className="space-y-1.5">
+                    <div className="flex items-center gap-2">
+                      <span className="text-xs rounded-full bg-muted px-2 py-0.5">{cat}</span>
+                      <span className="text-xs text-muted-foreground">{items.length} items</span>
+                    </div>
+                    {items.map((it) => {
+                      const checked = selectedIds.has(it._id);
+                      return (
+                        <div
+                          key={it._id}
+                          className="flex items-center gap-2 rounded-lg border border-border/60 px-2 py-1.5 text-sm cursor-pointer hover:bg-muted/40"
+                          role="checkbox"
+                          aria-checked={checked}
+                          tabIndex={0}
+                          onClick={() => toggleId(it._id, !checked)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              toggleId(it._id, !checked);
+                            }
+                          }}
+                        >
+                          <span className="pointer-events-none inline-flex">
+                            <Checkbox checked={checked} tabIndex={-1} />
+                          </span>
+                          <span className="text-[10px] font-medium text-muted-foreground w-4">
+                            {it._type === "pref" ? "P" : it._type === "pat" ? "T" : "W"}
+                          </span>
+                          <span className="flex-1 truncate">
+                            {(it.description || "").substring(0, 80)}
+                          </span>
+                          <span className="inline-flex items-center gap-1 text-xs text-muted-foreground shrink-0">
+                            <Target className="size-3" />
+                            {it.frequency || 0}
+                            {it.confidence != null ? ` | ${Math.round(it.confidence * 100)}%` : ""}
+                          </span>
+                        </div>
+                      );
+                    })}
+                  </div>
+                );
+              })}
+            </div>
+            <div className="flex items-center justify-between gap-2 pt-1">
+              <span className="text-xs text-muted-foreground">
+                {t("label-ai-cleanup-selected", { count: selectedCount })}
+              </span>
+              <Button onClick={analyze}>{t("label-ai-cleanup-analyze")}</Button>
+            </div>
+          </div>
+        ) : phase === "diff" && pendingCleanup ? (
+          <div className="flex min-h-0 flex-col gap-3 overflow-hidden">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <span className="text-xs text-muted-foreground">
+                {t("label-ai-cleanup-changes-selected", {
+                  selected: diffSelectedCount,
+                  total: diffTotalCount,
+                })}
+              </span>
+              <div className="flex gap-2">
+                <Button variant="link" size="xs" onClick={selectAllDiff}>
+                  {t("label-ai-cleanup-select-all")}
+                </Button>
+                <Button variant="link" size="xs" onClick={deselectAllDiff}>
+                  {t("label-ai-cleanup-deselect-all")}
+                </Button>
+              </div>
+            </div>
+            <div className="min-h-0 flex-1 space-y-4 overflow-y-auto pr-1">
+              {(pendingCleanup.changes.merged || []).length > 0 ? (
+                <div className="space-y-2">
+                  <h4 className="flex items-center gap-1.5 text-sm font-medium">
+                    <GitMerge className="size-3.5" />
+                    {t("label-ai-cleanup-merged-header", {
+                      count: pendingCleanup.changes.merged?.length || 0,
+                    })}
+                  </h4>
+                  {(pendingCleanup.changes.merged || []).map((m, mi) => {
+                    const mergedFrom = m.ids.slice(1);
+                    const mainDesc = m.result || "";
+                    const mainSteps = findStepsById(m.ids[0], pendingCleanup.old);
+                    const mergeChecked = acceptedMerged.has(mi);
+                    return (
+                      <div key={mi} className="rounded-xl border border-border p-3 space-y-2">
+                        <div
+                          className="flex items-center gap-2 text-sm cursor-pointer"
+                          role="checkbox"
+                          aria-checked={mergeChecked}
+                          tabIndex={0}
+                          onClick={() => toggleMerged(mi, !mergeChecked)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              toggleMerged(mi, !mergeChecked);
+                            }
+                          }}
+                        >
+                          <span className="pointer-events-none inline-flex">
+                            <Checkbox checked={mergeChecked} tabIndex={-1} />
+                          </span>
+                          <span>{t("label-ai-cleanup-merge-check")}</span>
+                        </div>
+                        <div className="grid gap-2 sm:grid-cols-[1fr_auto_1fr] items-start text-sm">
+                          <div className="space-y-1.5">
+                            {mergedFrom.map((id) => {
+                              const desc = findDescById(id, pendingCleanup.old);
+                              const steps = findStepsById(id, pendingCleanup.old);
+                              if (!desc) return null;
+                              return (
+                                <div key={id} className="rounded-lg bg-muted/50 p-2 space-y-1">
+                                  <div>
+                                    <span className="text-[10px] rounded bg-muted px-1.5 py-0.5">
+                                      {typeLabel(id)}
+                                    </span>{" "}
+                                    {truncate(desc, 80)}
+                                  </div>
+                                  {steps?.length ? (
+                                    <div className="flex flex-wrap gap-1 text-xs text-muted-foreground">
+                                      {steps.map((s, si) => (
+                                        <span key={si} className="contents">
+                                          <span>
+                                            {si + 1}. {s}
+                                          </span>
+                                          {si < steps.length - 1 ? (
+                                            <ArrowRight className="size-3 inline" />
+                                          ) : null}
+                                        </span>
+                                      ))}
+                                    </div>
+                                  ) : null}
+                                </div>
+                              );
+                            })}
+                          </div>
+                          <div className="text-muted-foreground self-center grid place-items-center">
+                            <ChevronRight className="size-4" />
+                          </div>
+                          <div className="rounded-lg bg-primary/10 p-2 space-y-1">
+                            <div>{truncate(mainDesc, 120)}</div>
+                            {mainSteps?.length ? (
+                              <div className="flex flex-wrap gap-1 text-xs text-muted-foreground">
+                                {mainSteps.map((s, si) => (
+                                  <span key={si} className="contents">
+                                    <span>
+                                      {si + 1}. {s}
+                                    </span>
+                                    {si < mainSteps.length - 1 ? (
+                                      <ArrowRight className="size-3 inline" />
+                                    ) : null}
+                                  </span>
+                                ))}
+                              </div>
+                            ) : null}
+                          </div>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : null}
+
+              {(pendingCleanup.changes.removed || []).length > 0 ? (
+                <div className="space-y-2">
+                  <h4 className="flex items-center gap-1.5 text-sm font-medium">
+                    <Trash2 className="size-3.5" />
+                    {t("label-ai-cleanup-removed-header", {
+                      count: pendingCleanup.changes.removed?.length || 0,
+                    })}
+                  </h4>
+                  {(pendingCleanup.changes.removed || []).map((r, ri) => {
+                    const desc = findDescById(r.id, pendingCleanup.old);
+                    const steps = findStepsById(r.id, pendingCleanup.old);
+                    const removeChecked = acceptedRemoved.has(ri);
+                    return (
+                      <div key={ri} className="rounded-xl border border-border p-3 space-y-2">
+                        <div
+                          className="flex items-center gap-2 text-sm cursor-pointer"
+                          role="checkbox"
+                          aria-checked={removeChecked}
+                          tabIndex={0}
+                          onClick={() => toggleRemoved(ri, !removeChecked)}
+                          onKeyDown={(e) => {
+                            if (e.key === "Enter" || e.key === " ") {
+                              e.preventDefault();
+                              toggleRemoved(ri, !removeChecked);
+                            }
+                          }}
+                        >
+                          <span className="pointer-events-none inline-flex">
+                            <Checkbox checked={removeChecked} tabIndex={-1} />
+                          </span>
+                          <span>{t("label-ai-cleanup-remove-check")}</span>
+                        </div>
+                        <div className="text-sm">{desc || r.id}</div>
+                        {steps?.length ? (
+                          <div className="flex flex-wrap gap-1 text-xs text-muted-foreground">
+                            {steps.map((s, si) => (
+                              <span key={si} className="contents">
+                                <span>
+                                  {si + 1}. {s}
+                                </span>
+                                {si < steps.length - 1 ? (
+                                  <ArrowRight className="size-3 inline" />
+                                ) : null}
+                              </span>
+                            ))}
+                          </div>
+                        ) : null}
+                        <div className="text-xs text-muted-foreground">{r.reason}</div>
+                      </div>
+                    );
+                  })}
+                </div>
+              ) : null}
+
+              {(pendingCleanup.changes.kept || []).length > 0 ? (
+                <div className="space-y-2">
+                  <button
+                    type="button"
+                    className="flex items-center gap-1.5 text-sm font-medium"
+                    onClick={() => setKeptOpen((v) => !v)}
+                  >
+                    {t("label-ai-cleanup-kept")}
+                    <span className="text-muted-foreground">
+                      ({pendingCleanup.changes.kept?.length || 0})
+                    </span>
+                    {keptOpen ? (
+                      <ChevronUp className="size-3.5" />
+                    ) : (
+                      <ChevronDown className="size-3.5" />
+                    )}
+                  </button>
+                  {keptOpen ? (
+                    <div className="space-y-1">
+                      {(pendingCleanup.changes.kept || []).map((k, ki) => (
+                        <div
+                          key={ki}
+                          className="text-xs text-muted-foreground rounded bg-muted/40 px-2 py-1"
+                        >
+                          {k}
+                        </div>
+                      ))}
+                    </div>
+                  ) : null}
+                </div>
+              ) : null}
+            </div>
+          </div>
+        ) : null}
+
+        <DialogFooter>
+          <Button variant="secondary" onClick={() => handleOpenChange(false)}>
+            {t("btn-cancel")}
+          </Button>
+          {phase === "diff" ? (
+            <Button disabled={diffSelectedCount === 0 || applying} onClick={apply}>
+              {diffSelectedCount > 0
+                ? `${t("label-ai-cleanup-apply")} (${diffSelectedCount})`
+                : t("label-ai-cleanup-apply") || "Apply"}
+            </Button>
+          ) : null}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/lib/components/explorer/AppSidebar.tsx b/web/src/lib/components/explorer/AppSidebar.tsx
new file mode 100644
index 00000000..f8ef4521
--- /dev/null
+++ b/web/src/lib/components/explorer/AppSidebar.tsx
@@ -0,0 +1,179 @@
+import type { MouseEvent } from "react";
+import { Folder, Languages, Moon, Sun, User, X } from "lucide-react";
+import { GithubIcon } from "$lib/components/icons/GithubIcon";
+import { Button } from "$lib/components/ui/button";
+import { Separator } from "$lib/components/ui/separator";
+import { navigate, ROUTES, type AppView } from "$lib/router";
+import { toggleTheme, useTheme } from "$lib/theme";
+import { cn } from "$lib/utils";
+
+type Props = {
+  open?: boolean;
+  currentView: AppView;
+  brand: string;
+  projectLabel: string;
+  profileLabel: string;
+  langLabel: string;
+  languageLabel: string;
+  themeLabel: string;
+  closeLabel: string;
+  onOpenChange?: (open: boolean) => void;
+  onLangToggle?: () => void;
+};
+
+export function AppSidebar({
+  open = false,
+  currentView,
+  brand,
+  projectLabel,
+  profileLabel,
+  langLabel,
+  languageLabel,
+  themeLabel,
+  closeLabel,
+  onOpenChange,
+  onLangToggle,
+}: Props) {
+  const theme = useTheme();
+  const isDark = theme === "dark";
+
+  function setOpen(next: boolean) {
+    onOpenChange?.(next);
+  }
+
+  function onNavClick(event: MouseEvent, to: string) {
+    if (
+      event.defaultPrevented ||
+      event.button !== 0 ||
+      event.metaKey ||
+      event.ctrlKey ||
+      event.shiftKey ||
+      event.altKey
+    ) {
+      return;
+    }
+    event.preventDefault();
+    navigate(to);
+    setOpen(false);
+  }
+
+  function navClass(active: boolean) {
+    return cn(
+      "flex w-full items-center gap-2.5 rounded-xl px-3 py-2 text-sm transition-colors",
+      active
+        ? "bg-sidebar-accent text-sidebar-accent-foreground"
+        : "text-sidebar-foreground/80 hover:bg-sidebar-accent/70 hover:text-sidebar-accent-foreground"
+    );
+  }
+
+  return (
+    <>
+      {open ? (
+        <button
+          type="button"
+          className="fixed inset-0 z-40 bg-black/50 md:hidden"
+          aria-label={closeLabel}
+          onClick={() => setOpen(false)}
+        />
+      ) : null}
+
+      <aside
+        className={cn(
+          "inset-y-0 start-0 z-50 flex h-svh w-64 shrink-0 flex-col border-e border-sidebar-border bg-sidebar text-sidebar-foreground transition-transform duration-200",
+          "fixed md:sticky md:top-0 md:translate-x-0!",
+          open ? "translate-x-0" : "max-md:-translate-x-full max-md:rtl:translate-x-full"
+        )}
+      >
+        <div className="flex items-center gap-2 px-4 py-4">
+          <a
+            href={ROUTES.home}
+            className="flex min-w-0 flex-1 items-center gap-2 rounded-lg transition-colors hover:opacity-90"
+            onClick={(e) => onNavClick(e, ROUTES.home)}
+          >
+            <img
+              src="/opencode-mem-icon.png"
+              alt=""
+              width={20}
+              height={20}
+              className="size-5 shrink-0 rounded-sm"
+            />
+            <span className="truncate text-sm font-medium tracking-wide text-sidebar-primary">
+              {brand}
+            </span>
+          </a>
+          <Button
+            variant="ghost"
+            size="icon-sm"
+            className="md:hidden shrink-0"
+            onClick={() => setOpen(false)}
+            aria-label={closeLabel}
+          >
+            <X className="size-4" />
+          </Button>
+        </div>
+
+        <Separator className="bg-sidebar-border" />
+
+        <nav className="flex flex-1 flex-col gap-1 p-3" aria-label="Main">
+          <a
+            href={ROUTES.project}
+            className={navClass(currentView === "project")}
+            aria-current={currentView === "project" ? "page" : undefined}
+            onClick={(e) => onNavClick(e, ROUTES.project)}
+          >
+            <Folder className="size-4 shrink-0" />
+            <span className="truncate text-start">{projectLabel}</span>
+          </a>
+          <a
+            href={ROUTES.profile}
+            className={navClass(currentView === "profile")}
+            aria-current={currentView === "profile" ? "page" : undefined}
+            onClick={(e) => onNavClick(e, ROUTES.profile)}
+          >
+            <User className="size-4 shrink-0" />
+            <span className="truncate text-start">{profileLabel}</span>
+          </a>
+        </nav>
+
+        <div className="mt-auto p-3">
+          <div className="flex w-full items-center rounded-lg border border-sidebar-border/80 bg-card/70">
+            <button
+              type="button"
+              className="group flex min-w-0 flex-1 items-center gap-2 rounded-s-lg px-2.5 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={onLangToggle}
+              aria-label={languageLabel}
+              title={languageLabel}
+            >
+              <Languages className="size-3.5 shrink-0" />
+              <span className="truncate">{languageLabel}</span>
+              <span className="ms-auto text-xs tabular-nums">{langLabel}</span>
+            </button>
+            <button
+              type="button"
+              className="inline-flex items-center self-stretch border-s border-sidebar-border px-1.5 text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              onClick={() => toggleTheme()}
+              aria-label={themeLabel}
+              title={themeLabel}
+            >
+              {isDark ? (
+                <Moon className="size-4 rounded-md p-0.5" />
+              ) : (
+                <Sun className="size-4 rounded-md p-0.5" />
+              )}
+            </button>
+            <a
+              href="https://github.com/tickernelz/opencode-mem"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="inline-flex items-center self-stretch rounded-e-lg border-s border-sidebar-border px-1.5 text-muted-foreground transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground"
+              title="GitHub"
+              aria-label="GitHub"
+            >
+              <GithubIcon className="size-4" />
+            </a>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}
diff --git a/web/src/lib/components/explorer/ChangelogDialog.tsx b/web/src/lib/components/explorer/ChangelogDialog.tsx
new file mode 100644
index 00000000..8d7816de
--- /dev/null
+++ b/web/src/lib/components/explorer/ChangelogDialog.tsx
@@ -0,0 +1,84 @@
+import { useEffect, useState } from "react";
+import { fetchAPI } from "$lib/api";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "$lib/components/ui/dialog";
+import { ScrollArea } from "$lib/components/ui/scroll-area";
+import { formatDate } from "$lib/format";
+import { useI18n } from "$lib/i18n";
+
+type ChangelogEntry = {
+  version: number;
+  changeType: string;
+  createdAt: string;
+  changeSummary: string;
+};
+
+type Props = {
+  open?: boolean;
+  profileId?: string;
+  onOpenChange?: (open: boolean) => void;
+};
+
+export function ChangelogDialog({ open = false, profileId = "", onOpenChange }: Props) {
+  const { t } = useI18n();
+  const [loading, setLoading] = useState(false);
+  const [entries, setEntries] = useState<ChangelogEntry[]>([]);
+
+  useEffect(() => {
+    if (open && profileId) {
+      void loadChangelog(profileId);
+    }
+  }, [open, profileId]);
+
+  async function loadChangelog(id: string) {
+    setLoading(true);
+    setEntries([]);
+    const result = await fetchAPI<ChangelogEntry[]>(
+      `/api/user-profile/changelog?profileId=${encodeURIComponent(id)}&limit=10`
+    );
+    setLoading(false);
+    if (result.success && result.data) {
+      setEntries(result.data);
+    } else {
+      setEntries([]);
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("modal-changelog-title")}</DialogTitle>
+        </DialogHeader>
+        <ScrollArea className="max-h-80">
+          {loading ? (
+            <div className="text-sm text-muted-foreground py-6 text-center">
+              {t("loading-changelog")}
+            </div>
+          ) : entries.length === 0 ? (
+            <div className="text-sm text-muted-foreground py-6 text-center">
+              {t("empty-changelog")}
+            </div>
+          ) : (
+            <div className="space-y-3 pr-3">
+              {entries.map((entry, i) => (
+                <div
+                  key={`${entry.version}-${i}`}
+                  className="rounded-lg border border-border p-3 space-y-1"
+                >
+                  <div className="flex flex-wrap items-center gap-2 text-xs">
+                    <span className="font-medium">v{entry.version}</span>
+                    <span className="text-muted-foreground">{entry.changeType}</span>
+                    <span className="text-muted-foreground ml-auto">
+                      {formatDate(entry.createdAt)}
+                    </span>
+                  </div>
+                  <p className="text-sm">{entry.changeSummary}</p>
+                </div>
+              ))}
+            </div>
+          )}
+        </ScrollArea>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/lib/components/explorer/EditMemoryDialog.tsx b/web/src/lib/components/explorer/EditMemoryDialog.tsx
new file mode 100644
index 00000000..b6e2b1a5
--- /dev/null
+++ b/web/src/lib/components/explorer/EditMemoryDialog.tsx
@@ -0,0 +1,67 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { Button } from "$lib/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "$lib/components/ui/dialog";
+import { Label } from "$lib/components/ui/label";
+import { Textarea } from "$lib/components/ui/textarea";
+import { useI18n } from "$lib/i18n";
+
+type Props = {
+  open?: boolean;
+  content?: string;
+  onOpenChange?: (open: boolean) => void;
+  onSave?: (content: string) => void;
+};
+
+export function EditMemoryDialog({ open = false, content = "", onOpenChange, onSave }: Props) {
+  const { t } = useI18n();
+  const [draft, setDraft] = useState("");
+
+  useEffect(() => {
+    if (open) setDraft(content);
+  }, [open, content]);
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange?.(next);
+  }
+
+  function submit(e: FormEvent) {
+    e.preventDefault();
+    const value = draft.trim();
+    if (!value) return;
+    onSave?.(value);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("modal-edit-title")}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={submit}>
+          <div className="space-y-2">
+            <Label htmlFor="edit-content">{t("label-content")}</Label>
+            <Textarea
+              id="edit-content"
+              rows={6}
+              value={draft}
+              onChange={(e) => setDraft(e.target.value)}
+              required
+            />
+          </div>
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => handleOpenChange(false)}>
+              {t("btn-cancel")}
+            </Button>
+            <Button type="submit">{t("btn-save")}</Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/lib/components/explorer/MemoryCard.tsx b/web/src/lib/components/explorer/MemoryCard.tsx
new file mode 100644
index 00000000..1c59824e
--- /dev/null
+++ b/web/src/lib/components/explorer/MemoryCard.tsx
@@ -0,0 +1,308 @@
+import {
+  ArrowDown,
+  ArrowUp,
+  Edit3,
+  Link as LinkIcon,
+  MessageCircle,
+  Pin,
+  Trash2,
+} from "lucide-react";
+import { Badge } from "$lib/components/ui/badge";
+import { Button } from "$lib/components/ui/button";
+import { Checkbox } from "$lib/components/ui/checkbox";
+import { formatDate } from "$lib/format";
+import { useI18n } from "$lib/i18n";
+import { renderMarkdown } from "$lib/markdown";
+import type { MemoryItem } from "$lib/types";
+
+type Props = {
+  variant: "memory" | "prompt" | "pair";
+  item?: MemoryItem;
+  memory?: MemoryItem;
+  prompt?: MemoryItem;
+  selected?: boolean;
+  onSelect?: (id: string, selected: boolean) => void;
+  onPin?: (id: string) => void;
+  onUnpin?: (id: string) => void;
+  onEdit?: (id: string) => void;
+  onDeleteMemory?: (id: string, isLinked: boolean) => void;
+  onDeletePrompt?: (id: string, isLinked: boolean) => void;
+};
+
+function displayInfo(m: MemoryItem): string {
+  if (m.projectPath) {
+    const pathParts = m.projectPath
+      .replace(/\\/g, "/")
+      .split("/")
+      .filter((p) => p);
+    return pathParts[pathParts.length - 1] || m.projectPath;
+  }
+  return m.displayName || m.id;
+}
+
+function dateInfo(m: MemoryItem) {
+  const createdDate = formatDate(m.createdAt);
+  const updatedDate = m.updatedAt && m.updatedAt !== m.createdAt ? formatDate(m.updatedAt) : null;
+  return { createdDate, updatedDate };
+}
+
+function similarityLabel(m: MemoryItem, asFraction: boolean): string | null {
+  if (m.similarity === undefined) return null;
+  if (asFraction) return `${Math.round(m.similarity * 100)}%`;
+  return `${m.similarity}%`;
+}
+
+export function MemoryCard({
+  variant,
+  item,
+  memory,
+  prompt,
+  selected = false,
+  onSelect,
+  onPin,
+  onUnpin,
+  onEdit,
+  onDeleteMemory,
+  onDeletePrompt,
+}: Props) {
+  const { t } = useI18n();
+
+  if (variant === "pair" && memory && prompt) {
+    const pinned = memory.isPinned || false;
+    const dates = dateInfo(memory);
+    const sim = similarityLabel(memory, true);
+    return (
+      <div
+        className={`rounded-xl border border-border bg-card/60 p-3 space-y-3 ${
+          selected ? "ring-1 ring-primary/50" : ""
+        } ${pinned ? "border-primary/40" : ""}`}
+        data-id={memory.id}
+      >
+        <div className="space-y-2 rounded-lg bg-muted/40 p-3">
+          <div className="flex items-center justify-between gap-2">
+            <Badge variant="secondary">{t("badge-prompt")}</Badge>
+            <span className="text-xs text-muted-foreground">{formatDate(prompt.createdAt)}</span>
+          </div>
+          <p className="text-sm whitespace-pre-wrap break-words">{prompt.content}</p>
+        </div>
+
+        <div className="flex justify-center text-muted-foreground">
+          <ArrowDown className="size-4" />
+        </div>
+
+        <div className="space-y-2">
+          <div className="flex flex-wrap items-start justify-between gap-2">
+            <div className="flex flex-wrap items-center gap-1.5 min-w-0">
+              <Checkbox
+                checked={selected}
+                onCheckedChange={(v) => onSelect?.(memory.id, v === true)}
+              />
+              <Badge>{t("badge-memory")}</Badge>
+              {memory.memoryType ? <Badge variant="outline">{memory.memoryType}</Badge> : null}
+              {sim ? <span className="text-xs text-primary">{sim}</span> : null}
+              {pinned ? <Badge variant="secondary">{t("badge-pinned")}</Badge> : null}
+              <span className="text-xs text-muted-foreground truncate">
+                {memory.displayName || memory.id}
+              </span>
+            </div>
+            <div className="flex items-center gap-1 shrink-0">
+              {pinned ? (
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  title="Unpin"
+                  onClick={() => onUnpin?.(memory.id)}
+                >
+                  <Pin className="size-3.5 fill-current" />
+                </Button>
+              ) : (
+                <Button
+                  variant="ghost"
+                  size="icon-xs"
+                  title="Pin"
+                  onClick={() => onPin?.(memory.id)}
+                >
+                  <Pin className="size-3.5" />
+                </Button>
+              )}
+              <Button variant="ghost" size="icon-xs" onClick={() => onEdit?.(memory.id)}>
+                <Edit3 className="size-3.5" />
+              </Button>
+              <Button
+                variant="destructive"
+                size="xs"
+                onClick={() => onDeleteMemory?.(memory.id, true)}
+              >
+                <Trash2 className="size-3.5" />
+                {t("btn-delete-pair")}
+              </Button>
+            </div>
+          </div>
+          {memory.tags?.length ? (
+            <div className="flex flex-wrap gap-1">
+              {memory.tags.map((tag) => (
+                <Badge key={tag} variant="outline" className="font-normal">
+                  {tag}
+                </Badge>
+              ))}
+            </div>
+          ) : null}
+          <div
+            className="markdown-content text-sm prose-invert max-w-none"
+            dangerouslySetInnerHTML={{ __html: renderMarkdown(memory.content) }}
+          />
+          <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
+            <span>
+              {t("date-created")} {dates.createdDate}
+            </span>
+            {dates.updatedDate ? (
+              <span>
+                {t("date-updated")} {dates.updatedDate}
+              </span>
+            ) : null}
+            <span>ID: {memory.id}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  if (variant === "prompt" && item) {
+    const isLinked = !!item.linkedMemoryId;
+    return (
+      <div
+        className={`rounded-xl border border-border bg-card/60 p-3 space-y-2 ${
+          selected ? "ring-1 ring-primary/50" : ""
+        }`}
+        data-id={item.id}
+      >
+        <div className="flex flex-wrap items-start justify-between gap-2">
+          <div className="flex flex-wrap items-center gap-1.5">
+            <Checkbox checked={selected} onCheckedChange={(v) => onSelect?.(item.id, v === true)} />
+            <MessageCircle className="size-3.5 text-muted-foreground" />
+            <Badge variant="secondary">{t("badge-prompt")}</Badge>
+            {isLinked ? (
+              <Badge variant="outline">
+                <LinkIcon className="size-3" />
+                {t("badge-linked")}
+              </Badge>
+            ) : null}
+            <span className="text-xs text-muted-foreground">{formatDate(item.createdAt)}</span>
+          </div>
+          <Button
+            variant="destructive"
+            size="xs"
+            onClick={() => onDeletePrompt?.(item.id, isLinked)}
+          >
+            <Trash2 className="size-3.5" />
+            {isLinked ? t("btn-delete-pair") : t("btn-delete")}
+          </Button>
+        </div>
+        <p className="text-sm whitespace-pre-wrap break-words">{item.content}</p>
+        {isLinked ? (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <ArrowDown className="size-3" />
+            {t("text-generated-above")}
+            <ArrowUp className="size-3" />
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (variant === "memory" && item) {
+    const pinned = item.isPinned || false;
+    const isLinked = !!item.linkedPromptId;
+    const dates = dateInfo(item);
+    const sim = similarityLabel(item, false);
+    return (
+      <div
+        className={`rounded-xl border border-border bg-card/60 p-3 space-y-2 ${
+          selected ? "ring-1 ring-primary/50" : ""
+        } ${pinned ? "border-primary/40" : ""}`}
+        data-id={item.id}
+      >
+        <div className="flex flex-wrap items-start justify-between gap-2">
+          <div className="flex flex-wrap items-center gap-1.5 min-w-0">
+            <Checkbox checked={selected} onCheckedChange={(v) => onSelect?.(item.id, v === true)} />
+            {item.memoryType ? <Badge variant="outline">{item.memoryType}</Badge> : null}
+            {isLinked ? (
+              <Badge variant="outline">
+                <LinkIcon className="size-3" />
+                {t("badge-linked")}
+              </Badge>
+            ) : null}
+            {sim ? <span className="text-xs text-primary">{sim}</span> : null}
+            {pinned ? <Badge variant="secondary">{t("badge-pinned")}</Badge> : null}
+            <span className="text-xs text-muted-foreground truncate">{displayInfo(item)}</span>
+            {item.projectPath ? (
+              <span className="text-xs text-muted-foreground/70 truncate w-full">
+                {item.projectPath}
+              </span>
+            ) : null}
+          </div>
+          <div className="flex items-center gap-1 shrink-0">
+            {pinned ? (
+              <Button
+                variant="ghost"
+                size="icon-xs"
+                title="Unpin"
+                onClick={() => onUnpin?.(item.id)}
+              >
+                <Pin className="size-3.5 fill-current" />
+              </Button>
+            ) : (
+              <Button variant="ghost" size="icon-xs" title="Pin" onClick={() => onPin?.(item.id)}>
+                <Pin className="size-3.5" />
+              </Button>
+            )}
+            <Button variant="ghost" size="icon-xs" onClick={() => onEdit?.(item.id)}>
+              <Edit3 className="size-3.5" />
+            </Button>
+            <Button
+              variant="destructive"
+              size="xs"
+              onClick={() => onDeleteMemory?.(item.id, isLinked)}
+            >
+              <Trash2 className="size-3.5" />
+              {isLinked ? t("btn-delete-pair") : t("btn-delete")}
+            </Button>
+          </div>
+        </div>
+        {item.tags?.length ? (
+          <div className="flex flex-wrap gap-1">
+            {item.tags.map((tag) => (
+              <Badge key={tag} variant="outline" className="font-normal">
+                {tag}
+              </Badge>
+            ))}
+          </div>
+        ) : null}
+        <div
+          className="markdown-content text-sm prose-invert max-w-none"
+          dangerouslySetInnerHTML={{ __html: renderMarkdown(item.content) }}
+        />
+        {isLinked ? (
+          <div className="flex items-center gap-1 text-xs text-muted-foreground">
+            <ArrowUp className="size-3" />
+            {t("text-from-below")}
+            <ArrowDown className="size-3" />
+          </div>
+        ) : null}
+        <div className="flex flex-wrap gap-3 text-xs text-muted-foreground">
+          <span>
+            {t("date-created")} {dates.createdDate}
+          </span>
+          {dates.updatedDate ? (
+            <span>
+              {t("date-updated")} {dates.updatedDate}
+            </span>
+          ) : null}
+          <span>ID: {item.id}</span>
+        </div>
+      </div>
+    );
+  }
+
+  return null;
+}
diff --git a/web/src/lib/components/explorer/MemoryList.tsx b/web/src/lib/components/explorer/MemoryList.tsx
new file mode 100644
index 00000000..f82e3ed3
--- /dev/null
+++ b/web/src/lib/components/explorer/MemoryList.tsx
@@ -0,0 +1,121 @@
+import { useMemo } from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { MemoryCard } from "./MemoryCard";
+import { Button } from "$lib/components/ui/button";
+import { groupMemories } from "$lib/group-memories";
+import { useI18n } from "$lib/i18n";
+import type { MemoryItem } from "$lib/types";
+
+type Props = {
+  memories: MemoryItem[];
+  selectedIds: Set<string>;
+  currentPage: number;
+  totalPages: number;
+  totalItems: number;
+  isSearching: boolean;
+  loading?: boolean;
+  error?: string | null;
+  onSelect: (id: string, selected: boolean) => void;
+  onPageChange: (delta: number) => void;
+  onPin: (id: string) => void;
+  onUnpin: (id: string) => void;
+  onEdit: (id: string) => void;
+  onDeleteMemory: (id: string, isLinked: boolean) => void;
+  onDeletePrompt: (id: string, isLinked: boolean) => void;
+};
+
+export function MemoryList({
+  memories,
+  selectedIds,
+  currentPage,
+  totalPages,
+  loading = false,
+  error = null,
+  onSelect,
+  onPageChange,
+  onPin,
+  onUnpin,
+  onEdit,
+  onDeleteMemory,
+  onDeletePrompt,
+}: Props) {
+  const { t } = useI18n();
+  const groups = useMemo(() => groupMemories(memories), [memories]);
+  const pageInfo = t("text-page", { current: currentPage, total: totalPages });
+  const hasPrev = currentPage > 1;
+  const hasNext = currentPage < totalPages;
+
+  const pagination = (
+    <div className="flex items-center gap-2">
+      <Button variant="outline" size="icon-xs" disabled={!hasPrev} onClick={() => onPageChange(-1)}>
+        <ChevronLeft className="size-3.5" />
+      </Button>
+      <span className="text-xs text-muted-foreground tabular-nums">{pageInfo}</span>
+      <Button variant="outline" size="icon-xs" disabled={!hasNext} onClick={() => onPageChange(1)}>
+        <ChevronRight className="size-3.5" />
+      </Button>
+    </div>
+  );
+
+  return (
+    <div className="space-y-3">
+      <div className="space-y-3 min-h-32">
+        {loading && memories.length === 0 ? (
+          <div className="text-sm text-muted-foreground py-8 text-center">{t("loading-init")}</div>
+        ) : error ? (
+          <div className="text-sm text-destructive py-8 text-center">Error: {error}</div>
+        ) : groups.length === 0 ? (
+          <div className="text-sm text-muted-foreground py-8 text-center">
+            {t("empty-memories")}
+          </div>
+        ) : (
+          groups.map((group) =>
+            group.isPair ? (
+              <MemoryCard
+                key={group.memory.id}
+                variant="pair"
+                memory={group.memory}
+                prompt={group.prompt}
+                selected={selectedIds.has(group.memory.id)}
+                onSelect={onSelect}
+                onPin={onPin}
+                onUnpin={onUnpin}
+                onEdit={onEdit}
+                onDeleteMemory={onDeleteMemory}
+                onDeletePrompt={onDeletePrompt}
+              />
+            ) : group.type === "prompt" ? (
+              <MemoryCard
+                key={group.item.id}
+                variant="prompt"
+                item={group.item}
+                selected={selectedIds.has(group.item.id)}
+                onSelect={onSelect}
+                onPin={onPin}
+                onUnpin={onUnpin}
+                onEdit={onEdit}
+                onDeleteMemory={onDeleteMemory}
+                onDeletePrompt={onDeletePrompt}
+              />
+            ) : (
+              <MemoryCard
+                key={group.item.id}
+                variant="memory"
+                item={group.item}
+                selected={selectedIds.has(group.item.id)}
+                onSelect={onSelect}
+                onPin={onPin}
+                onUnpin={onUnpin}
+                onEdit={onEdit}
+                onDeleteMemory={onDeleteMemory}
+                onDeletePrompt={onDeletePrompt}
+              />
+            )
+          )
+        )}
+      </div>
+
+      <div className="flex justify-end">{pagination}</div>
+    </div>
+  );
+}
diff --git a/web/src/lib/components/explorer/ProfileItemDialog.tsx b/web/src/lib/components/explorer/ProfileItemDialog.tsx
new file mode 100644
index 00000000..ea9825c2
--- /dev/null
+++ b/web/src/lib/components/explorer/ProfileItemDialog.tsx
@@ -0,0 +1,212 @@
+import { useEffect, useState, type FormEvent } from "react";
+import { toast } from "sonner";
+import { fetchAPI } from "$lib/api";
+import { Button } from "$lib/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "$lib/components/ui/dialog";
+import { Input } from "$lib/components/ui/input";
+import { Label } from "$lib/components/ui/label";
+import { Textarea } from "$lib/components/ui/textarea";
+import { useI18n } from "$lib/i18n";
+import type { ProfileItem } from "$lib/types";
+
+type ProfileField = "preferences" | "patterns" | "workflows";
+
+type Props = {
+  open?: boolean;
+  type?: ProfileField | null;
+  index?: number;
+  action?: "edit" | "delete";
+  item?: ProfileItem | null;
+  onOpenChange?: (open: boolean) => void;
+  onSaved?: () => void;
+};
+
+export function ProfileItemDialog({
+  open = false,
+  type = null,
+  index = 0,
+  action = "edit",
+  item = null,
+  onOpenChange,
+  onSaved,
+}: Props) {
+  const { t } = useI18n();
+  const [category, setCategory] = useState("");
+  const [description, setDescription] = useState("");
+  const [steps, setSteps] = useState<string[]>([""]);
+  const [deleteStep, setDeleteStep] = useState<"1" | "2">("1");
+  const [saving, setSaving] = useState(false);
+
+  const isEdit = action === "edit";
+  const isWorkflow = type === "workflows";
+
+  useEffect(() => {
+    if (open && item) {
+      setCategory(item.category || "");
+      setDescription(item.description || "");
+      setSteps(item.steps?.length ? [...item.steps] : [""]);
+      setDeleteStep("1");
+    }
+  }, [open, item]);
+
+  const title = isEdit
+    ? t("btn-edit") || "Edit Item"
+    : deleteStep === "2"
+      ? t("confirm-delete-title") || "Confirm Delete"
+      : t("confirm-delete") || "Delete Item?";
+
+  function handleOpenChange(next: boolean) {
+    onOpenChange?.(next);
+  }
+
+  function addStep() {
+    setSteps((prev) => [...prev, ""]);
+  }
+
+  function removeStep(i: number) {
+    setSteps((prev) => {
+      const next = prev.filter((_, idx) => idx !== i);
+      return next.length === 0 ? [""] : next;
+    });
+  }
+
+  function updateStep(i: number, value: string) {
+    setSteps((prev) => prev.map((s, idx) => (idx === i ? value : s)));
+  }
+
+  async function submit(e: FormEvent) {
+    e.preventDefault();
+    if (!type) return;
+
+    if (action === "delete") {
+      if (deleteStep === "1") {
+        setDeleteStep("2");
+        return;
+      }
+      setSaving(true);
+      const result = await fetchAPI("/api/user-profile/item", {
+        method: "PATCH",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ type, index, action: "delete" }),
+      });
+      setSaving(false);
+      if (result.success) {
+        toast.success(t("toast-delete-success") || "Item deleted");
+        handleOpenChange(false);
+        onSaved?.();
+      } else {
+        toast.error(result.error || t("toast-delete-failed") || "Delete failed");
+      }
+      return;
+    }
+
+    setSaving(true);
+    const body: Record<string, unknown> = {
+      type,
+      index,
+      action: "edit",
+      category: isWorkflow ? undefined : category,
+      description,
+    };
+    if (type === "workflows") {
+      body.steps = steps.map((s) => s.trim()).filter(Boolean);
+    }
+
+    const result = await fetchAPI("/api/user-profile/item", {
+      method: "PATCH",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify(body),
+    });
+    setSaving(false);
+
+    if (result.success) {
+      toast.success(t("toast-update-success") || "Item updated");
+      handleOpenChange(false);
+      onSaved?.();
+    } else {
+      toast.error(result.error || t("toast-update-failed") || "Update failed");
+    }
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+        </DialogHeader>
+        <form className="space-y-4" onSubmit={submit}>
+          {isEdit || deleteStep === "1" ? (
+            <>
+              {!isWorkflow ? (
+                <div className="space-y-2">
+                  <Label htmlFor="profile-item-category">{t("label-category")}</Label>
+                  <Input
+                    id="profile-item-category"
+                    value={category}
+                    onChange={(e) => setCategory(e.target.value)}
+                    disabled={!isEdit}
+                  />
+                </div>
+              ) : null}
+              <div className="space-y-2">
+                <Label htmlFor="profile-item-description">{t("label-description")}</Label>
+                <Textarea
+                  id="profile-item-description"
+                  rows={4}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  disabled={!isEdit}
+                />
+              </div>
+              {isWorkflow && isEdit ? (
+                <div className="space-y-2">
+                  <Label>{t("label-steps")}</Label>
+                  <div className="space-y-2">
+                    {steps.map((step, i) => (
+                      <div key={i} className="flex items-center gap-2">
+                        <span className="text-xs text-muted-foreground w-5 tabular-nums">
+                          {i + 1}
+                        </span>
+                        <Input
+                          value={step}
+                          placeholder={`Step ${i + 1}...`}
+                          onChange={(e) => updateStep(i, e.target.value)}
+                        />
+                        <Button
+                          type="button"
+                          variant="ghost"
+                          size="icon-xs"
+                          onClick={() => removeStep(i)}
+                        >
+                          ×
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                  <Button type="button" variant="secondary" size="sm" onClick={addStep}>
+                    {t("btn-add-step")}
+                  </Button>
+                </div>
+              ) : null}
+            </>
+          ) : null}
+
+          <DialogFooter>
+            <Button type="button" variant="secondary" onClick={() => handleOpenChange(false)}>
+              {t("btn-cancel")}
+            </Button>
+            <Button type="submit" variant={isEdit ? "default" : "destructive"} disabled={saving}>
+              {isEdit ? t("btn-save") || "Save" : t("btn-delete") || "Delete"}
+            </Button>
+          </DialogFooter>
+        </form>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/lib/components/explorer/ProfileView.tsx b/web/src/lib/components/explorer/ProfileView.tsx
new file mode 100644
index 00000000..baa921ef
--- /dev/null
+++ b/web/src/lib/components/explorer/ProfileView.tsx
@@ -0,0 +1,426 @@
+import { useMemo, useState } from "react";
+import {
+  Activity,
+  ArrowRight,
+  Heart,
+  History,
+  Info,
+  Pencil,
+  RefreshCw,
+  Sparkles,
+  Target,
+  Trash2,
+  UserX,
+  Workflow,
+} from "lucide-react";
+import { ChangelogDialog } from "./ChangelogDialog";
+import { ProfileItemDialog } from "./ProfileItemDialog";
+import { Badge } from "$lib/components/ui/badge";
+import { Button } from "$lib/components/ui/button";
+import { formatDate } from "$lib/format";
+import { useI18n } from "$lib/i18n";
+import { parseProfileField } from "$lib/profile-utils";
+import type { ProfileItem, UserProfile } from "$lib/types";
+
+type ProfileField = "preferences" | "patterns" | "workflows";
+
+type Props = {
+  profile: UserProfile | null;
+  loading?: boolean;
+  onRefresh?: () => void;
+  onCleanup?: () => void;
+};
+
+const PAGE_SIZE = 20;
+
+function pageSlice<T>(items: T[], page: number) {
+  const total = items.length;
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+  const safePage = Math.min(page, totalPages);
+  const start = (safePage - 1) * PAGE_SIZE;
+  return {
+    items: items.slice(start, start + PAGE_SIZE),
+    total,
+    totalPages,
+    page: safePage,
+    start,
+  };
+}
+
+function confidencePct(item: ProfileItem) {
+  return Math.round((item.confidence || 0) * 1000) / 10;
+}
+
+function evidenceTitle(item: ProfileItem) {
+  if (!item.evidence) return "";
+  return Array.isArray(item.evidence) ? item.evidence.join("\n") : item.evidence;
+}
+
+function evidenceCount(item: ProfileItem) {
+  if (!item.evidence) return 0;
+  return Array.isArray(item.evidence) ? item.evidence.length : 1;
+}
+
+export function ProfileView({ profile, loading = false, onRefresh, onCleanup }: Props) {
+  const { t } = useI18n();
+  const [profilePages, setProfilePages] = useState({ pref: 1, pat: 1, wf: 1 });
+  const [changelogOpen, setChangelogOpen] = useState(false);
+  const [itemDialogOpen, setItemDialogOpen] = useState(false);
+  const [itemType, setItemType] = useState<ProfileField | null>(null);
+  const [itemIndex, setItemIndex] = useState(0);
+  const [itemAction, setItemAction] = useState<"edit" | "delete">("edit");
+  const [itemData, setItemData] = useState<ProfileItem | null>(null);
+
+  const profileData = useMemo(() => {
+    if (!profile?.exists || !profile.profileData) return null;
+    let data = profile.profileData;
+    if (typeof data === "string") {
+      try {
+        data = JSON.parse(data);
+      } catch {
+        return null;
+      }
+    }
+    return data as NonNullable<UserProfile["profileData"]>;
+  }, [profile]);
+
+  const preferences = useMemo(() => parseProfileField(profileData?.preferences), [profileData]);
+  const patterns = useMemo(() => parseProfileField(profileData?.patterns), [profileData]);
+  const workflowsRaw = useMemo(() => parseProfileField(profileData?.workflows), [profileData]);
+  const workflows = useMemo(
+    () =>
+      workflowsRaw
+        .map((item, index) => ({ item, index }))
+        .sort((a, b) => (b.item.frequency || 0) - (a.item.frequency || 0)),
+    [workflowsRaw]
+  );
+
+  const prefPage = pageSlice(preferences, profilePages.pref);
+  const patPage = pageSlice(patterns, profilePages.pat);
+  const wfPage = pageSlice(workflows, profilePages.wf);
+  const workflowsCount = workflowsRaw.length;
+
+  function openItem(type: ProfileField, index: number, action: "edit" | "delete") {
+    const list =
+      type === "preferences" ? preferences : type === "patterns" ? patterns : workflowsRaw;
+    const current = list[index];
+    if (!current) return;
+    setItemType(type);
+    setItemIndex(index);
+    setItemAction(action);
+    setItemData(current);
+    setItemDialogOpen(true);
+  }
+
+  function indexOfItem(list: ProfileItem[], item: ProfileItem) {
+    return list.indexOf(item);
+  }
+
+  function Pager({
+    page,
+    pageKey,
+  }: {
+    page: { total: number; totalPages: number; page: number; start: number };
+    pageKey: "pref" | "pat" | "wf";
+  }) {
+    if (page.total <= PAGE_SIZE) return null;
+    return (
+      <div className="flex flex-wrap items-center gap-1.5 pt-2">
+        <span className="text-xs text-muted-foreground mr-2">
+          {page.start + 1}-{Math.min(page.start + PAGE_SIZE, page.total)} / {page.total}
+        </span>
+        {Array.from({ length: page.totalPages }, (_, i) => i + 1).map((p) => (
+          <Button
+            key={p}
+            size="xs"
+            variant={p === page.page ? "default" : "outline"}
+            onClick={() => setProfilePages((prev) => ({ ...prev, [pageKey]: p }))}
+          >
+            {p}
+          </Button>
+        ))}
+      </div>
+    );
+  }
+
+  function ItemCard({
+    item,
+    type,
+    fullList,
+  }: {
+    item: ProfileItem;
+    type: ProfileField;
+    fullList: ProfileItem[];
+  }) {
+    const idx = indexOfItem(fullList, item);
+    const pct = confidencePct(item);
+    return (
+      <div className="rounded-xl border border-border bg-card/50 p-3 space-y-2">
+        <div className="flex items-start gap-2">
+          <Badge variant="outline">{item.category || "General"}</Badge>
+          <div className="flex items-center gap-0.5 ml-auto">
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              title={t("btn-edit") || "Edit"}
+              onClick={() => openItem(type, idx, "edit")}
+            >
+              <Pencil className="size-3" />
+            </Button>
+            <Button
+              variant="ghost"
+              size="icon-xs"
+              title={t("btn-delete") || "Delete"}
+              onClick={() => openItem(type, idx, "delete")}
+            >
+              <Trash2 className="size-3" />
+            </Button>
+          </div>
+          <div
+            className="size-9 rounded-full border border-border grid place-items-center text-[10px] tabular-nums shrink-0"
+            title={`${pct}%`}
+          >
+            {pct}%
+          </div>
+        </div>
+        <p className="text-sm">{item.description || ""}</p>
+        {item.evidence || item.frequency ? (
+          <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+            <span
+              className="inline-flex items-center gap-1"
+              title={t("label-evidence-tooltip", { count: item.frequency || 1 })}
+            >
+              <Target className="size-3" />
+              {item.frequency || 1}
+            </span>
+            {evidenceCount(item) > 0 ? (
+              <>
+                <span>·</span>
+                <span className="inline-flex items-center gap-1" title={evidenceTitle(item)}>
+                  <Info className="size-3" />
+                  {evidenceCount(item)} evidence
+                </span>
+              </>
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    );
+  }
+
+  if (loading && !profile) {
+    return (
+      <div className="text-sm text-muted-foreground py-8 text-center">{t("loading-profile")}</div>
+    );
+  }
+
+  if (!profile?.exists) {
+    return (
+      <div className="flex flex-col items-center gap-2 py-10 text-muted-foreground">
+        <UserX className="size-8" />
+        <p className="text-sm">{profile?.message || t("empty-preferences")}</p>
+      </div>
+    );
+  }
+
+  if (!profileData) return null;
+
+  return (
+    <>
+      <div className="space-y-6">
+        <div className="space-y-2">
+          <h3 className="text-base font-medium">{profile.displayName || profile.userId}</h3>
+          <div className="flex flex-wrap items-center gap-2">
+            <span className="rounded-full bg-muted px-2.5 py-1 text-xs">
+              <span className="text-muted-foreground">{t("profile-version")}</span>
+              <span className="ml-1">{profile.version}</span>
+            </span>
+            <span className="rounded-full bg-muted px-2.5 py-1 text-xs">
+              <span className="text-muted-foreground">{t("profile-prompts")}</span>
+              <span className="ml-1">{profile.totalPromptsAnalyzed}</span>
+            </span>
+            <span className="rounded-full bg-muted px-2.5 py-1 text-xs">
+              <span className="text-muted-foreground">{t("profile-updated")}</span>
+              <span className="ml-1">
+                {profile.lastAnalyzedAt ? formatDate(profile.lastAnalyzedAt) : "—"}
+              </span>
+            </span>
+            <div className="ms-auto flex flex-wrap items-center gap-1.5">
+              <Button variant="outline" size="sm" onClick={() => onCleanup?.()}>
+                <Sparkles className="size-3.5" />
+                {t("btn-ai-cleanup")}
+              </Button>
+              <Button variant="secondary" size="sm" onClick={() => onRefresh?.()}>
+                <RefreshCw className="size-3.5" />
+                {t("btn-refresh")}
+              </Button>
+              <Button variant="secondary" size="sm" onClick={() => setChangelogOpen(true)}>
+                <History className="size-3.5" />
+                History
+              </Button>
+            </div>
+          </div>
+        </div>
+
+        <div className="grid gap-6 lg:grid-cols-2">
+          <section className="space-y-3">
+            <h4 className="flex items-center gap-2 text-sm font-medium">
+              <Heart className="size-4" />
+              {t("profile-preferences")}
+              <span className="text-muted-foreground">{preferences.length}</span>
+            </h4>
+            {preferences.length === 0 ? (
+              <p className="text-sm text-muted-foreground">{t("empty-preferences")}</p>
+            ) : (
+              <>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {prefPage.items.map((item) => (
+                    <ItemCard
+                      key={indexOfItem(preferences, item)}
+                      item={item}
+                      type="preferences"
+                      fullList={preferences}
+                    />
+                  ))}
+                </div>
+                <Pager page={prefPage} pageKey="pref" />
+              </>
+            )}
+          </section>
+
+          <section className="space-y-3">
+            <h4 className="flex items-center gap-2 text-sm font-medium">
+              <Activity className="size-4" />
+              {t("profile-patterns")}
+              <span className="text-muted-foreground">{patterns.length}</span>
+            </h4>
+            {patterns.length === 0 ? (
+              <p className="text-sm text-muted-foreground">{t("empty-patterns")}</p>
+            ) : (
+              <>
+                <div className="grid gap-2 sm:grid-cols-2">
+                  {patPage.items.map((item) => (
+                    <ItemCard
+                      key={indexOfItem(patterns, item)}
+                      item={item}
+                      type="patterns"
+                      fullList={patterns}
+                    />
+                  ))}
+                </div>
+                <Pager page={patPage} pageKey="pat" />
+              </>
+            )}
+          </section>
+
+          <section className="space-y-3 lg:col-span-2">
+            <h4 className="flex items-center gap-2 text-sm font-medium">
+              <Workflow className="size-4" />
+              {t("profile-workflows")}
+              <span className="text-muted-foreground">{workflowsCount}</span>
+            </h4>
+            {workflowsCount === 0 ? (
+              <p className="text-sm text-muted-foreground">{t("empty-workflows")}</p>
+            ) : (
+              <>
+                <div className="space-y-2">
+                  {wfPage.items.map((entry) => {
+                    const item = entry.item;
+                    const idx = entry.index;
+                    const pct = confidencePct(item);
+                    return (
+                      <div
+                        key={entry.index}
+                        className="rounded-xl border border-border bg-card/50 p-3 space-y-2"
+                      >
+                        <div className="flex items-start gap-2">
+                          <div className="text-sm font-medium flex-1">{item.description || ""}</div>
+                          <div className="flex items-center gap-0.5">
+                            <Button
+                              variant="ghost"
+                              size="icon-xs"
+                              onClick={() => openItem("workflows", idx, "edit")}
+                            >
+                              <Pencil className="size-3" />
+                            </Button>
+                            <Button
+                              variant="ghost"
+                              size="icon-xs"
+                              onClick={() => openItem("workflows", idx, "delete")}
+                            >
+                              <Trash2 className="size-3" />
+                            </Button>
+                          </div>
+                          <div className="size-9 rounded-full border border-border grid place-items-center text-[10px] tabular-nums shrink-0">
+                            {pct}%
+                          </div>
+                        </div>
+                        {item.steps?.length ? (
+                          <div className="flex flex-wrap items-center gap-1.5">
+                            {item.steps.map((step, i) => (
+                              <div key={i} className="contents">
+                                <div className="inline-flex items-center gap-1.5 rounded-lg bg-muted px-2 py-1 text-xs">
+                                  <span className="text-muted-foreground tabular-nums">
+                                    {i + 1}
+                                  </span>
+                                  <span>{step}</span>
+                                </div>
+                                {i < (item.steps?.length || 0) - 1 ? (
+                                  <ArrowRight className="size-3 text-muted-foreground" />
+                                ) : null}
+                              </div>
+                            ))}
+                          </div>
+                        ) : null}
+                        <div className="flex items-center gap-1.5 text-xs text-muted-foreground">
+                          <span
+                            className="inline-flex items-center gap-1"
+                            title={t("label-evidence-tooltip", {
+                              count: item.frequency || 1,
+                            })}
+                          >
+                            <Target className="size-3" />
+                            {item.frequency || 1}
+                          </span>
+                          {evidenceCount(item) > 0 ? (
+                            <>
+                              <span>·</span>
+                              <span
+                                className="inline-flex items-center gap-1"
+                                title={evidenceTitle(item)}
+                              >
+                                <Info className="size-3" />
+                                {evidenceCount(item)} evidence
+                              </span>
+                            </>
+                          ) : null}
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+                <Pager page={wfPage} pageKey="wf" />
+              </>
+            )}
+          </section>
+        </div>
+      </div>
+
+      <ChangelogDialog
+        open={changelogOpen}
+        onOpenChange={setChangelogOpen}
+        profileId={profile?.id || ""}
+      />
+
+      <ProfileItemDialog
+        open={itemDialogOpen}
+        onOpenChange={setItemDialogOpen}
+        type={itemType}
+        index={itemIndex}
+        action={itemAction}
+        item={itemData}
+        onSaved={onRefresh}
+      />
+    </>
+  );
+}
diff --git a/web/src/lib/components/explorer/TagMigrationDialog.tsx b/web/src/lib/components/explorer/TagMigrationDialog.tsx
new file mode 100644
index 00000000..606f8dfb
--- /dev/null
+++ b/web/src/lib/components/explorer/TagMigrationDialog.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useState } from "react";
+import { Play } from "lucide-react";
+import { toast } from "sonner";
+import { fetchAPI } from "$lib/api";
+import { Button } from "$lib/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "$lib/components/ui/dialog";
+import { useI18n } from "$lib/i18n";
+
+type Props = {
+  open?: boolean;
+  count?: number;
+  onOpenChange?: (open: boolean) => void;
+  onComplete?: () => void;
+};
+
+export function TagMigrationDialog({ open = false, count = 0, onOpenChange, onComplete }: Props) {
+  const { t } = useI18n();
+  const [running, setRunning] = useState(false);
+  const [status, setStatus] = useState("");
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    if (open && !running) {
+      setStatus(t("migration-found-tags", { count }));
+      setProgress(0);
+    }
+  }, [open, running, count, t]);
+
+  function handleOpenChange(next: boolean) {
+    if (running && !next) return;
+    onOpenChange?.(next);
+  }
+
+  async function runTagMigration() {
+    setRunning(true);
+    setStatus(t("status-migration-init"));
+    setProgress(0);
+
+    let totalProcessed = 0;
+    let hasMore = true;
+    let attempts = 0;
+    const maxAttempts = 1000;
+
+    while (hasMore && attempts < maxAttempts) {
+      attempts++;
+      const result = await fetchAPI<{
+        processed: number;
+        hasMore: boolean;
+        total: number;
+      }>("/api/migration/tags/run-batch", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ batchSize: 3 }),
+      });
+
+      if (!result.success || !result.data) {
+        setStatus(t("toast-migration-failed") + ": " + (result.error || ""));
+        setRunning(false);
+        return;
+      }
+
+      totalProcessed = result.data.processed;
+      hasMore = result.data.hasMore;
+      const total = result.data.total;
+      setProgress(total > 0 ? Math.round((totalProcessed / total) * 100) : 0);
+      setStatus(t("status-migration-progress", { current: totalProcessed, total }));
+      if (hasMore) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+    }
+
+    if (attempts >= maxAttempts) {
+      setStatus(t("migration-stopped"));
+      setRunning(false);
+      return;
+    }
+
+    setProgress(100);
+    setStatus(t("toast-migration-success"));
+    toast.success(t("toast-migration-success"));
+    setTimeout(() => {
+      setRunning(false);
+      handleOpenChange(false);
+      onComplete?.();
+    }, 2000);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent className="sm:max-w-md" showCloseButton={!running}>
+        <DialogHeader>
+          <DialogTitle>{t("modal-migration-title")}</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-3">
+          <p className="text-sm text-muted-foreground">{status}</p>
+          <div className="h-2 rounded-full bg-muted overflow-hidden">
+            <div
+              className="h-full bg-primary transition-all duration-200"
+              style={{ width: `${progress}%` }}
+            />
+          </div>
+          <p className="text-xs text-muted-foreground">{t("migration-note")}</p>
+        </div>
+        {!running ? (
+          <DialogFooter>
+            <Button onClick={runTagMigration}>
+              <Play className="size-3.5" />
+              {t("btn-start-migration")}
+            </Button>
+          </DialogFooter>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/web/src/lib/components/icons/GithubIcon.tsx b/web/src/lib/components/icons/GithubIcon.tsx
new file mode 100644
index 00000000..0f3b7133
--- /dev/null
+++ b/web/src/lib/components/icons/GithubIcon.tsx
@@ -0,0 +1,17 @@
+import type { SVGProps } from "react";
+import { cn } from "$lib/utils";
+
+export function GithubIcon({ className, ...props }: SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      aria-hidden="true"
+      className={cn("size-4 shrink-0", className)}
+      {...props}
+    >
+      <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+    </svg>
+  );
+}
diff --git a/web/src/lib/components/ui/alert.tsx b/web/src/lib/components/ui/alert.tsx
new file mode 100644
index 00000000..17a254cf
--- /dev/null
+++ b/web/src/lib/components/ui/alert.tsx
@@ -0,0 +1,62 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "$lib/utils";
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-2xl border px-4 py-3 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.5 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 group/alert relative w-full",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card *: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 tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn("text-muted-foreground text-sm [&_p]:leading-relaxed col-start-2", className)}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div data-slot="alert-action" className={cn("absolute top-3 end-3", className)} {...props} />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction, alertVariants };
diff --git a/web/src/lib/components/ui/badge.tsx b/web/src/lib/components/ui/badge.tsx
new file mode 100644
index 00000000..bf181ba4
--- /dev/null
+++ b/web/src/lib/components/ui/badge.tsx
@@ -0,0 +1,38 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "$lib/utils";
+
+const badgeVariants = cva(
+  "h-5 gap-1 rounded-2xl border border-transparent px-2 py-0.5 text-xs font-medium transition-all has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&>svg]:size-3! focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive group/badge inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-colors focus-visible:ring-[3px] [&>svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        secondary: "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
+        destructive:
+          "bg-destructive/10 [a]:hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 text-destructive dark:bg-destructive/20",
+        outline: "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
+        ghost: "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> & VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span";
+  return (
+    <Comp data-slot="badge" className={cn(badgeVariants({ variant }), className)} {...props} />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/web/src/lib/components/ui/button.tsx b/web/src/lib/components/ui/button.tsx
new file mode 100644
index 00000000..01f1a7d3
--- /dev/null
+++ b/web/src/lib/components/ui/button.tsx
@@ -0,0 +1,61 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "$lib/utils";
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-2xl border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 active:not-aria-[haspopup]:translate-y-px aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 group/button inline-flex shrink-0 items-center justify-center whitespace-nowrap transition-all outline-none select-none disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground dark:hover:bg-input/30 aria-expanded:bg-muted aria-expanded:text-foreground dark:bg-transparent",
+        secondary:
+          "bg-secondary text-secondary-foreground aria-expanded:bg-secondary aria-expanded:text-secondary-foreground hover:bg-[color-mix(in_oklch,var(--secondary),var(--foreground)_5%)]",
+        ghost:
+          "hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground",
+        destructive:
+          "bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-3 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5",
+        xs: "h-6 gap-1 px-2.5 text-xs has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        lg: "h-9 gap-1.5 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
+        icon: "size-8",
+        "icon-xs": "size-6 [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm": "size-7",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };
diff --git a/web/src/lib/components/ui/checkbox.tsx b/web/src/lib/components/ui/checkbox.tsx
new file mode 100644
index 00000000..13b58a18
--- /dev/null
+++ b/web/src/lib/components/ui/checkbox.tsx
@@ -0,0 +1,26 @@
+import * as React from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { CheckIcon } from "lucide-react";
+import { cn } from "$lib/utils";
+
+function Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/30 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="grid place-content-center text-current"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };
diff --git a/web/src/lib/components/ui/dialog.tsx b/web/src/lib/components/ui/dialog.tsx
new file mode 100644
index 00000000..103a7ef8
--- /dev/null
+++ b/web/src/lib/components/ui/dialog.tsx
@@ -0,0 +1,126 @@
+import * as React from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { XIcon } from "lucide-react";
+import { Button } from "$lib/components/ui/button";
+import { cn } from "$lib/utils";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 ring-foreground/5 dark:ring-foreground/10 grid max-w-[calc(100%-2rem)] gap-6 rounded-[min(var(--radius-4xl),24px)] p-6 text-sm shadow-xl ring-1 duration-100 sm:max-w-md fixed top-1/2 left-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 outline-none",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton ? (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button variant="ghost" className="bg-secondary absolute top-4 right-4" size="icon-sm">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        ) : null}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-start", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-base font-medium leading-none", className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/web/src/lib/components/ui/input.tsx b/web/src/lib/components/ui/input.tsx
new file mode 100644
index 00000000..d0cc45d5
--- /dev/null
+++ b/web/src/lib/components/ui/input.tsx
@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "$lib/utils";
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 flex h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-sm shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/web/src/lib/components/ui/label.tsx b/web/src/lib/components/ui/label.tsx
new file mode 100644
index 00000000..93f6243f
--- /dev/null
+++ b/web/src/lib/components/ui/label.tsx
@@ -0,0 +1,18 @@
+import * as React from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { cn } from "$lib/utils";
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "flex items-center gap-2 text-xs 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
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/web/src/lib/components/ui/scroll-area.tsx b/web/src/lib/components/ui/scroll-area.tsx
new file mode 100644
index 00000000..22052b24
--- /dev/null
+++ b/web/src/lib/components/ui/scroll-area.tsx
@@ -0,0 +1,53 @@
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "$lib/utils";
+
+function ScrollArea({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
+  return (
+    <ScrollAreaPrimitive.Root
+      data-slot="scroll-area"
+      className={cn("relative", className)}
+      {...props}
+    >
+      <ScrollAreaPrimitive.Viewport
+        data-slot="scroll-area-viewport"
+        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
+      >
+        {children}
+      </ScrollAreaPrimitive.Viewport>
+      <ScrollBar />
+      <ScrollAreaPrimitive.Corner />
+    </ScrollAreaPrimitive.Root>
+  );
+}
+
+function ScrollBar({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
+  return (
+    <ScrollAreaPrimitive.ScrollAreaScrollbar
+      data-slot="scroll-area-scrollbar"
+      orientation={orientation}
+      className={cn(
+        "flex touch-none p-px transition-colors select-none",
+        orientation === "vertical" && "h-full w-2.5 border-l border-l-transparent",
+        orientation === "horizontal" && "h-2.5 flex-col border-t border-t-transparent",
+        className
+      )}
+      {...props}
+    >
+      <ScrollAreaPrimitive.ScrollAreaThumb
+        data-slot="scroll-area-thumb"
+        className="bg-border relative flex-1 rounded-full"
+      />
+    </ScrollAreaPrimitive.ScrollAreaScrollbar>
+  );
+}
+
+export { ScrollArea, ScrollBar };
diff --git a/web/src/lib/components/ui/separator.tsx b/web/src/lib/components/ui/separator.tsx
new file mode 100644
index 00000000..1f85a49d
--- /dev/null
+++ b/web/src/lib/components/ui/separator.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "$lib/utils";
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Separator };
diff --git a/web/src/lib/components/ui/sonner.tsx b/web/src/lib/components/ui/sonner.tsx
new file mode 100644
index 00000000..731dc061
--- /dev/null
+++ b/web/src/lib/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import type { CSSProperties } from "react";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import { useTheme } from "$lib/theme";
+
+function Toaster({ ...props }: ToasterProps) {
+  const theme = useTheme();
+
+  return (
+    <Sonner
+      theme={theme}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--color-popover)",
+          "--normal-text": "var(--color-popover-foreground)",
+          "--normal-border": "var(--color-border)",
+        } as CSSProperties
+      }
+      icons={{
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+        success: <CircleCheckIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+
+export { Toaster };
diff --git a/web/src/lib/components/ui/textarea.tsx b/web/src/lib/components/ui/textarea.tsx
new file mode 100644
index 00000000..25d6fab8
--- /dev/null
+++ b/web/src/lib/components/ui/textarea.tsx
@@ -0,0 +1,19 @@
+import * as React from "react";
+import { cn } from "$lib/utils";
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:cursor-not-allowed disabled:opacity-50",
+        "focus-visible:border-ring focus-visible:ring-ring/30 focus-visible:ring-3",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };
diff --git a/web/src/lib/format.ts b/web/src/lib/format.ts
new file mode 100644
index 00000000..7aaaea06
--- /dev/null
+++ b/web/src/lib/format.ts
@@ -0,0 +1,14 @@
+import { getLanguage } from "./i18n";
+
+export function formatDate(isoString: string): string {
+  const date = new Date(isoString);
+  const lang = getLanguage();
+  const locale = lang === "zh" ? "zh-CN" : lang === "ar" ? "ar-SA" : "en-US";
+  return date.toLocaleString(locale, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+}
diff --git a/web/src/lib/group-memories.ts b/web/src/lib/group-memories.ts
new file mode 100644
index 00000000..820239cc
--- /dev/null
+++ b/web/src/lib/group-memories.ts
@@ -0,0 +1,32 @@
+import type { MemoryGroup, MemoryItem } from "./types";
+
+export function groupMemories(items: MemoryItem[]): MemoryGroup[] {
+  const map = new Map(items.map((item) => [item.id, item]));
+  const pairs: MemoryGroup[] = [];
+  const processed = new Set<string>();
+
+  for (const item of items) {
+    if (processed.has(item.id)) continue;
+
+    if (item.type === "memory" && item.linkedPromptId && map.has(item.linkedPromptId)) {
+      const prompt = map.get(item.linkedPromptId)!;
+      pairs.push({ isPair: true, memory: item, prompt });
+      processed.add(item.id);
+      processed.add(prompt.id);
+    } else if (item.type === "prompt" && item.linkedMemoryId && map.has(item.linkedMemoryId)) {
+      const memory = map.get(item.linkedMemoryId)!;
+      pairs.push({ isPair: true, memory, prompt: item });
+      processed.add(item.id);
+      processed.add(memory.id);
+    } else {
+      pairs.push({ isPair: false, type: item.type, item });
+      processed.add(item.id);
+    }
+  }
+
+  return pairs.sort((a, b) => {
+    const timeA = a.isPair ? a.memory.createdAt : a.item.createdAt;
+    const timeB = b.isPair ? b.memory.createdAt : b.item.createdAt;
+    return new Date(timeB).getTime() - new Date(timeA).getTime();
+  });
+}
diff --git a/web/src/lib/html.ts b/web/src/lib/html.ts
new file mode 100644
index 00000000..f99ef66c
--- /dev/null
+++ b/web/src/lib/html.ts
@@ -0,0 +1,9 @@
+/** Escape text for safe HTML interpolation (XSS defense for any {@html} sinks). */
+export function escapeHtml(text: string): string {
+  return text
+    .replace(/&/g, "&amp;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#039;");
+}
diff --git a/web/src/lib/i18n/index.ts b/web/src/lib/i18n/index.ts
new file mode 100644
index 00000000..deba563b
--- /dev/null
+++ b/web/src/lib/i18n/index.ts
@@ -0,0 +1,127 @@
+import {
+  createContext,
+  createElement,
+  useContext,
+  useMemo,
+  useSyncExternalStore,
+  type ReactNode,
+} from "react";
+import { translations, type Lang, type TranslationKey } from "./translations";
+
+const LANGS: Lang[] = ["en", "zh", "ar"];
+
+export type TranslateFn = (
+  key: TranslationKey | string,
+  params?: Record<string, string | number>
+) => string;
+
+function readLang(): Lang {
+  if (typeof window === "undefined") return "en";
+  const stored = localStorage.getItem("opencode-mem-lang");
+  if (stored === "en" || stored === "zh" || stored === "ar") return stored;
+  return "en";
+}
+
+let currentLang: Lang = readLang();
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function applyLang(lang: Lang) {
+  currentLang = lang;
+  if (typeof document !== "undefined") {
+    localStorage.setItem("opencode-mem-lang", lang);
+    document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
+    document.documentElement.lang = lang;
+  }
+  emit();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot() {
+  return currentLang;
+}
+
+function getServerSnapshot(): Lang {
+  return "en";
+}
+
+export function getLanguage(): Lang {
+  return currentLang;
+}
+
+export function setLanguage(lang: Lang) {
+  applyLang(lang);
+}
+
+export function cycleLanguage(): Lang {
+  const next = LANGS[(LANGS.indexOf(getLanguage()) + 1) % LANGS.length];
+  setLanguage(next);
+  return next;
+}
+
+export function t(
+  key: TranslationKey | string,
+  params: Record<string, string | number> = {},
+  lang: Lang = getLanguage()
+): string {
+  let text =
+    (translations[lang] as Record<string, string>)[key] ||
+    (translations.en as Record<string, string>)[key] ||
+    key;
+
+  for (const [k, v] of Object.entries(params)) {
+    text = text.replace(new RegExp(`\\{${k}\\}`, "g"), String(v));
+  }
+  return text;
+}
+
+type I18nContextValue = {
+  language: Lang;
+  t: TranslateFn;
+};
+
+const I18nContext = createContext<I18nContextValue | null>(null);
+
+function useLanguageStore(): Lang {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  const language = useLanguageStore();
+  const value = useMemo<I18nContextValue>(
+    () => ({
+      language,
+      t: (key, params = {}) => t(key, params, language),
+    }),
+    [language]
+  );
+
+  return createElement(I18nContext.Provider, { value }, children);
+}
+
+export function useI18n(): I18nContextValue {
+  const ctx = useContext(I18nContext);
+  const language = useLanguageStore();
+  return useMemo(
+    () =>
+      ctx ?? {
+        language,
+        t: (key, params = {}) => t(key, params, language),
+      },
+    [ctx, language]
+  );
+}
+
+if (typeof document !== "undefined") {
+  document.documentElement.dir = currentLang === "ar" ? "rtl" : "ltr";
+  document.documentElement.lang = currentLang;
+}
diff --git a/src/web/i18n.js b/web/src/lib/i18n/translations.ts
similarity index 88%
rename from src/web/i18n.js
rename to web/src/lib/i18n/translations.ts
index 78e04ff5..5d7127dc 100644
--- a/src/web/i18n.js
+++ b/web/src/lib/i18n/translations.ts
@@ -1,8 +1,15 @@
-const translations = {
+export const translations = {
   en: {
-    title: "┌─ OPENCODE MEMORY EXPLORER ─┐",
+    title: "OpenCode Memory Explorer",
+    brand: "opencode-mem",
     "tab-project": "PROJECT MEMORIES",
     "tab-profile": "USER PROFILE",
+    "nav-menu": "Menu",
+    "nav-close": "Close menu",
+    "nav-language": "Language",
+    "nav-theme": "Theme",
+    "theme-dark": "Dark",
+    "theme-light": "Light",
     "label-tag": "Tag:",
     "label-type": "Type:",
     "label-tags": "Tags:",
@@ -13,9 +20,9 @@ const translations = {
     "btn-select-all": "Select Page",
     "btn-deselect-all": "Deselect All",
     "btn-add-memory": "Add Memory",
-    "section-project": "└─ PROJECT MEMORIES ({count}) ──",
-    "section-profile": "└─ USER PROFILE ──",
-    "section-add": "└─ ADD NEW MEMORY ──",
+    "section-project": "Project Memories ({count})",
+    "section-profile": "User Profile",
+    "section-add": "Add New Memory",
     "opt-all-tags": "All Tags",
     "opt-select-tag": "Select tag",
     "opt-other": "other",
@@ -100,7 +107,6 @@ const translations = {
     "empty-patterns": "No patterns detected yet",
     "empty-workflows": "No workflows identified yet",
     "btn-delete-pair": "Delete Pair",
-    "btn-save": "Save",
     "btn-edit": "Edit",
     "btn-delete": "Delete",
     "label-category": "Category",
@@ -126,9 +132,8 @@ const translations = {
     "label-ai-cleanup-merged-header": "Merged ({count} groups)",
     "label-ai-cleanup-removed-header": "Removed ({count} items)",
     "btn-apply": "Apply",
-    "btn-cancel": "Cancel",
-    "toast-cleanup-success": "Profile cleanup completed",
-    "toast-cleanup-failed": "AI cleanup failed",
+    "toast-ai-cleanup-success": "Profile cleanup completed",
+    "toast-ai-cleanup-failed": "AI cleanup failed",
     "toast-cleanup-apply-failed": "Apply cleanup failed",
     "label-ai-cleanup-select": "Select items for cleanup analysis",
     "label-ai-cleanup-select-low": "Low Freq (≤3)",
@@ -144,9 +149,16 @@ const translations = {
     "auth-warning-text": "Cross-origin editing disabled. Set webServerAuthPassword to enable.",
   },
   zh: {
-    title: "┌─ OPENCODE MEMORY EXPLORER ─┐",
+    title: "OpenCode Memory Explorer",
+    brand: "opencode-mem",
     "tab-project": "项目记忆",
     "tab-profile": "用户画像",
+    "nav-menu": "菜单",
+    "nav-close": "关闭菜单",
+    "nav-language": "语言",
+    "nav-theme": "主题",
+    "theme-dark": "深色",
+    "theme-light": "浅色",
     "label-tag": "标签:",
     "label-type": "类型:",
     "label-tags": "标签:",
@@ -157,9 +169,9 @@ const translations = {
     "btn-select-all": "全选当前页",
     "btn-deselect-all": "取消全选",
     "btn-add-memory": "添加记忆",
-    "section-project": "└─ 项目记忆 ({count}) ──",
-    "section-profile": "└─ 用户画像 ──",
-    "section-add": "└─ 添加新记忆 ──",
+    "section-project": "项目记忆 ({count})",
+    "section-profile": "用户画像",
+    "section-add": "添加新记忆",
     "opt-all-tags": "所有标签",
     "opt-select-tag": "选择标签",
     "opt-other": "其他 (other)",
@@ -242,7 +254,6 @@ const translations = {
     "empty-patterns": "尚未检测到行为模式",
     "empty-workflows": "尚未识别出工作流程",
     "btn-delete-pair": "删除组合",
-    "btn-save": "保存",
     "btn-edit": "编辑",
     "btn-delete": "删除",
     "label-category": "类别",
@@ -268,9 +279,8 @@ const translations = {
     "label-ai-cleanup-merged-header": "合并 ({count} 组)",
     "label-ai-cleanup-removed-header": "删除 ({count} 项)",
     "btn-apply": "确认替换",
-    "btn-cancel": "取消",
-    "toast-cleanup-success": "画像清理完成",
-    "toast-cleanup-failed": "AI 清理失败",
+    "toast-ai-cleanup-success": "画像清理完成",
+    "toast-ai-cleanup-failed": "AI 清理失败",
     "toast-cleanup-apply-failed": "应用清理失败",
     "label-ai-cleanup-select": "选择需要清理分析的条目",
     "label-ai-cleanup-select-low": "低频 (≤3)",
@@ -287,9 +297,16 @@ const translations = {
     "auth-warning-text": "跨源编辑已禁用. 设置 webServerAuthPassword 即可启用.",
   },
   ar: {
-    title: "┌─ مستكشف ذاكرة OpenCode ─┐",
+    title: "مستكشف ذاكرة OpenCode",
+    brand: "opencode-mem",
     "tab-project": "ذكريات المشروع",
     "tab-profile": "ملف المستخدم",
+    "nav-menu": "القائمة",
+    "nav-close": "إغلاق القائمة",
+    "nav-language": "اللغة",
+    "nav-theme": "المظهر",
+    "theme-dark": "داكن",
+    "theme-light": "فاتح",
 
     "label-tag": "الوسم:",
     "label-type": "النوع:",
@@ -303,9 +320,9 @@ const translations = {
     "btn-deselect-all": "إلغاء التحديد",
     "btn-add-memory": "إضافة ذكرى",
 
-    "section-project": "└─ ذكريات المشروع ({count}) ──",
-    "section-profile": "└─ ملف المستخدم ──",
-    "section-add": "└─ إضافة ذكرى جديدة ──",
+    "section-project": "ذكريات المشروع ({count})",
+    "section-profile": "ملف المستخدم",
+    "section-add": "إضافة ذكرى جديدة",
 
     "opt-all-tags": "جميع الوسوم",
     "opt-select-tag": "اختر وسمًا",
@@ -418,7 +435,6 @@ const translations = {
     "empty-workflows": "لم يتم التعرف على أي سير عمل بعد",
 
     "btn-delete-pair": "حذف الزوج",
-    "btn-save": "حفظ",
     "btn-edit": "تعديل",
     "btn-delete": "حذف",
     "label-category": "الفئة",
@@ -446,9 +462,8 @@ const translations = {
     "label-ai-cleanup-merged-header": "دمج ({count} مجموعة)",
     "label-ai-cleanup-removed-header": "حذف ({count} عنصر)",
     "btn-apply": "تأكيد الاستبدال",
-    "btn-cancel": "إلغاء",
-    "toast-cleanup-success": "اكتمل تنظيف الملف الشخصي",
-    "toast-cleanup-failed": "فشل تنظيف الملف الشخصي",
+    "toast-ai-cleanup-success": "اكتمل تنظيف الملف الشخصي",
+    "toast-ai-cleanup-failed": "فشل تنظيف الملف الشخصي",
     "toast-cleanup-apply-failed": "فشل تطبيق التنظيف",
     "label-ai-cleanup-select": "حدد العناصر للتحليل",
     "label-ai-cleanup-select-low": "تردد منخفض (≤3)",
@@ -469,63 +484,6 @@ const translations = {
 
     "auth-warning-text": "التحرير عبر المصادر معطّل. قم بتعيين webServerAuthPassword لتفعيله.",
   },
-};
-
-function getLanguage() {
-  return localStorage.getItem("opencode-mem-lang") || "en";
-}
-
-function setLanguage(lang) {
-  localStorage.setItem("opencode-mem-lang", lang);
-
-  document.documentElement.dir = lang === "ar" ? "rtl" : "ltr";
-
-  document.documentElement.lang = lang;
-
-  applyLanguage();
-  document.dispatchEvent(new CustomEvent("langchange"));
-}
-
-function t(key, params = {}) {
-  const lang = getLanguage();
-  let text = translations[lang][key] || translations["en"][key] || key;
-
-  for (const [k, v] of Object.entries(params)) {
-    text = text.replace(new RegExp(`\\{${k}\\}`, "g"), v);
-  }
-
-  return text;
-}
-
-function applyLanguage() {
-  document.querySelectorAll("[data-i18n]").forEach((el) => {
-    const key = el.getAttribute("data-i18n");
-    const translated = t(key);
-
-    // If element has child nodes (like icons), we need to replace only the text nodes
-    if (el.children.length > 0) {
-      let textNodeFound = false;
-      for (const node of el.childNodes) {
-        if (node.nodeType === Node.TEXT_NODE && node.textContent.trim() !== "") {
-          node.textContent = " " + translated + " ";
-          textNodeFound = true;
-        }
-      }
-      if (!textNodeFound) {
-        el.appendChild(document.createTextNode(" " + translated));
-      }
-    } else {
-      el.textContent = translated;
-    }
-  });
-
-  document.querySelectorAll("[data-i18n-placeholder]").forEach((el) => {
-    const key = el.getAttribute("data-i18n-placeholder");
-    el.setAttribute("placeholder", t(key));
-  });
-}
-
-window.t = t;
-window.getLanguage = getLanguage;
-window.setLanguage = setLanguage;
-window.applyLanguage = applyLanguage;
+} as const;
+export type Lang = keyof typeof translations;
+export type TranslationKey = keyof typeof translations.en;
diff --git a/web/src/lib/markdown.ts b/web/src/lib/markdown.ts
new file mode 100644
index 00000000..0311ce49
--- /dev/null
+++ b/web/src/lib/markdown.ts
@@ -0,0 +1,12 @@
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+export function renderMarkdown(markdown: string): string {
+  const html = marked.parse(markdown, { async: false }) as string;
+  return DOMPurify.sanitize(html);
+}
diff --git a/web/src/lib/profile-utils.ts b/web/src/lib/profile-utils.ts
new file mode 100644
index 00000000..f3335b43
--- /dev/null
+++ b/web/src/lib/profile-utils.ts
@@ -0,0 +1,49 @@
+import { jsonrepair } from "jsonrepair";
+import type { ProfileItem } from "./types";
+
+export function parseProfileField(field: unknown): ProfileItem[] {
+  if (!field) return [];
+  let result: unknown = field;
+  let lastResult: unknown = null;
+  while (typeof result === "string" && result !== lastResult) {
+    lastResult = result;
+    try {
+      result = JSON.parse(jsonrepair(result));
+    } catch {
+      break;
+    }
+  }
+  if (!Array.isArray(result)) return [];
+  const flattened: ProfileItem[] = [];
+  const walk = (item: unknown) => {
+    if (Array.isArray(item)) item.forEach(walk);
+    else if (item && typeof item === "object") flattened.push(item as ProfileItem);
+  };
+  walk(result);
+  return flattened;
+}
+
+export function findDescById(
+  id: string,
+  profileData?: { preferences?: ProfileItem[]; patterns?: ProfileItem[]; workflows?: ProfileItem[] }
+): string | null {
+  if (!profileData || !id.includes("_")) return null;
+  const [prefix, idxStr] = id.split("_");
+  const idx = parseInt(idxStr, 10);
+  if (Number.isNaN(idx)) return null;
+  if (prefix === "pref") return profileData.preferences?.[idx]?.description ?? null;
+  if (prefix === "pat") return profileData.patterns?.[idx]?.description ?? null;
+  if (prefix === "wf") return profileData.workflows?.[idx]?.description ?? null;
+  return null;
+}
+
+export function findStepsById(
+  id: string,
+  profileData?: { preferences?: ProfileItem[]; patterns?: ProfileItem[]; workflows?: ProfileItem[] }
+): string[] | null {
+  if (!profileData || !id.includes("_")) return null;
+  const [prefix, idxStr] = id.split("_");
+  const idx = parseInt(idxStr, 10);
+  if (Number.isNaN(idx) || prefix !== "wf") return null;
+  return profileData.workflows?.[idx]?.steps || null;
+}
diff --git a/web/src/lib/router.ts b/web/src/lib/router.ts
new file mode 100644
index 00000000..55d2d8dc
--- /dev/null
+++ b/web/src/lib/router.ts
@@ -0,0 +1,85 @@
+import { useSyncExternalStore } from "react";
+import {
+  normalizePath,
+  pathForView,
+  resolveAppPath,
+  ROUTES,
+  type AppView,
+  viewFromPath,
+} from "./routes";
+
+let currentPath = resolveAppPath(
+  typeof window !== "undefined" ? window.location.pathname : ROUTES.project
+);
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function setPath(next: string) {
+  if (currentPath === next) return;
+  currentPath = next;
+  emit();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot() {
+  return currentPath;
+}
+
+function getServerSnapshot() {
+  return ROUTES.project;
+}
+
+export function navigate(to: string, replace = false) {
+  const next = resolveAppPath(to);
+  if (normalizePath(window.location.pathname) === next) {
+    setPath(next);
+    return;
+  }
+  if (replace) window.history.replaceState({}, "", next);
+  else window.history.pushState({}, "", next);
+  setPath(next);
+}
+
+export function navigateView(view: AppView, replace = false) {
+  navigate(pathForView(view), replace);
+}
+
+export function currentView(): AppView {
+  return viewFromPath(window.location.pathname);
+}
+
+/** Sync store with history; `/` and unknown paths resolve to project memories. */
+export function initRouter(): () => void {
+  const sync = () => {
+    const current = normalizePath(window.location.pathname);
+    const resolved = resolveAppPath(current);
+    if (current !== resolved) {
+      window.history.replaceState({}, "", resolved);
+    }
+    setPath(resolved);
+  };
+
+  sync();
+  window.addEventListener("popstate", sync);
+  return () => window.removeEventListener("popstate", sync);
+}
+
+export function usePath(): string {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+export function useAppView(): AppView {
+  return viewFromPath(usePath());
+}
+
+export { ROUTES, pathForView, viewFromPath };
+export type { AppView };
diff --git a/web/src/lib/routes.ts b/web/src/lib/routes.ts
new file mode 100644
index 00000000..7396effe
--- /dev/null
+++ b/web/src/lib/routes.ts
@@ -0,0 +1,33 @@
+export const ROUTES = {
+  home: "/",
+  project: "/project-memories",
+  profile: "/user-profile",
+} as const;
+
+export type AppView = "project" | "profile";
+
+export function normalizePath(pathname: string): string {
+  const path = pathname.replace(/\/+$/, "") || "/";
+  return path.startsWith("/") ? path : `/${path}`;
+}
+
+export function viewFromPath(pathname: string): AppView {
+  return normalizePath(pathname) === ROUTES.profile ? "profile" : "project";
+}
+
+export function pathForView(view: AppView): string {
+  return view === "profile" ? ROUTES.profile : ROUTES.project;
+}
+
+export function isAppPath(pathname: string): boolean {
+  const path = normalizePath(pathname);
+  return path === ROUTES.home || path === ROUTES.project || path === ROUTES.profile;
+}
+
+/** Canonical app path — `/` redirects to project memories. */
+export function resolveAppPath(pathname: string): string {
+  const path = normalizePath(pathname);
+  if (path === ROUTES.home) return ROUTES.project;
+  if (path === ROUTES.project || path === ROUTES.profile) return path;
+  return ROUTES.project;
+}
diff --git a/web/src/lib/theme.ts b/web/src/lib/theme.ts
new file mode 100644
index 00000000..4012739d
--- /dev/null
+++ b/web/src/lib/theme.ts
@@ -0,0 +1,70 @@
+import { useSyncExternalStore } from "react";
+
+export type Theme = "dark" | "light";
+
+const STORAGE_KEY = "opencode-mem-theme";
+
+function readTheme(): Theme {
+  if (typeof window === "undefined") return "dark";
+  const stored = localStorage.getItem(STORAGE_KEY);
+  if (stored === "light" || stored === "dark") return stored;
+  return "dark";
+}
+
+let currentTheme: Theme = readTheme();
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+function applyTheme(theme: Theme) {
+  currentTheme = theme;
+  if (typeof document !== "undefined") {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+    localStorage.setItem(STORAGE_KEY, theme);
+  }
+  emit();
+}
+
+function subscribe(listener: () => void) {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+function getSnapshot() {
+  return currentTheme;
+}
+
+function getServerSnapshot(): Theme {
+  return "dark";
+}
+
+export function getTheme(): Theme {
+  return currentTheme;
+}
+
+export function setTheme(theme: Theme) {
+  applyTheme(theme);
+}
+
+export function toggleTheme(): Theme {
+  const next: Theme = currentTheme === "dark" ? "light" : "dark";
+  setTheme(next);
+  return next;
+}
+
+export function initTheme(): void {
+  applyTheme(readTheme());
+}
+
+export function useTheme(): Theme {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// Apply on module load so first paint matches stored preference.
+if (typeof document !== "undefined") {
+  applyTheme(currentTheme);
+}
diff --git a/web/src/lib/types.ts b/web/src/lib/types.ts
new file mode 100644
index 00000000..1d714037
--- /dev/null
+++ b/web/src/lib/types.ts
@@ -0,0 +1,9 @@
+export type {
+  CleanupChanges,
+  MemoryGroup,
+  MemoryItem,
+  PendingCleanup,
+  ProfileItem,
+  TagInfo,
+  UserProfile,
+} from "$shared/api";
diff --git a/web/src/lib/utils.ts b/web/src/lib/utils.ts
new file mode 100644
index 00000000..a5ef1935
--- /dev/null
+++ b/web/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
new file mode 100644
index 00000000..08cddb93
--- /dev/null
+++ b/web/src/main.tsx
@@ -0,0 +1,21 @@
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import "./app.css";
+import App from "./App";
+import { I18nProvider } from "$lib/i18n";
+import { initTheme } from "$lib/theme";
+
+initTheme();
+
+const root = document.getElementById("app");
+if (!root) {
+  throw new Error("Root element #app not found");
+}
+
+createRoot(root).render(
+  <StrictMode>
+    <I18nProvider>
+      <App />
+    </I18nProvider>
+  </StrictMode>
+);
diff --git a/web/src/vite-env.d.ts b/web/src/vite-env.d.ts
new file mode 100644
index 00000000..11f02fe2
--- /dev/null
+++ b/web/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/web/tsconfig.app.json b/web/tsconfig.app.json
new file mode 100644
index 00000000..15a6227c
--- /dev/null
+++ b/web/tsconfig.app.json
@@ -0,0 +1,32 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true,
+    "ignoreDeprecations": "6.0",
+    "baseUrl": ".",
+    "paths": {
+      "$lib": ["./src/lib"],
+      "$lib/*": ["./src/lib/*"],
+      "$shared": ["../src/shared"],
+      "$shared/*": ["../src/shared/*"],
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}
diff --git a/web/tsconfig.json b/web/tsconfig.json
new file mode 100644
index 00000000..d32ff682
--- /dev/null
+++ b/web/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "files": [],
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
+}
diff --git a/web/tsconfig.node.json b/web/tsconfig.node.json
new file mode 100644
index 00000000..b2c9fe8d
--- /dev/null
+++ b/web/tsconfig.node.json
@@ -0,0 +1,22 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "types": ["node"],
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "moduleResolution": "bundler",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
diff --git a/web/vite.config.ts b/web/vite.config.ts
new file mode 100644
index 00000000..fb766487
--- /dev/null
+++ b/web/vite.config.ts
@@ -0,0 +1,30 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+const webRoot = import.meta.dirname;
+
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      $lib: path.resolve(webRoot, "src/lib"),
+      $shared: path.resolve(webRoot, "../src/shared"),
+      "@": path.resolve(webRoot, "src"),
+    },
+  },
+  server: {
+    proxy: {
+      "/api": {
+        target: "http://127.0.0.1:4747",
+        changeOrigin: true,
+      },
+    },
+  },
+  build: {
+    outDir: path.resolve(webRoot, "../dist/web"),
+    emptyOutDir: true,
+  },
+  base: "/",
+});