3 周之前 · 4081e41cb8
--- a/.gitignore
+++ b/.gitignore
@@ -0,0 +1,119 @@
 
				+# Dependencies
			
 
				+**/node_modules
			
 
				+.pnpm-store/
			
 
				+
			
 
				+# Build outputs
			
 
				+dist/
			
 
				+build/
			
 
				+*.dist
			
 
				+
			
 
				+# Environment variables
			
 
				+.env
			
 
				+.env.*
			
 
				+.env.local
			
 
				+.env.development.local
			
 
				+.env.test.local
			
 
				+.env.production.local
			
 
				+.env.production
			
 
				+
			
 
				+# IDE and editor files
			
 
				+.vscode/
			
 
				+.idea/
			
 
				+*.swp
			
 
				+*.swo
			
 
				+*~
			
 
				+
			
 
				+# OS generated files
			
 
				+.DS_Store
			
 
				+.DS_Store?
			
 
				+._*
			
 
				+.Spotlight-V100
			
 
				+.Trashes
			
 
				+ehthumbs.db
			
 
				+Thumbs.db
			
 
				+
			
 
				+# Logs
			
 
				+logs
			
 
				+*.log
			
 
				+npm-debug.log*
			
 
				+yarn-debug.log*
			
 
				+yarn-error.log*
			
 
				+pnpm-debug.log*
			
 
				+lerna-debug.log*
			
 
				+
			
 
				+# Runtime data
			
 
				+pids
			
 
				+*.pid
			
 
				+*.seed
			
 
				+*.pid.lock
			
 
				+*.bak
			
 
				+
			
 
				+# Coverage directory used by tools like istanbul
			
 
				+coverage/
			
 
				+*.lcov
			
 
				+
			
 
				+# nyc test coverage
			
 
				+.nyc_output
			
 
				+
			
 
				+# Dependency directories
			
 
				+jspm_packages/
			
 
				+
			
 
				+# TypeScript cache
			
 
				+*.tsbuildinfo
			
 
				+
			
 
				+# Optional npm cache directory
			
 
				+.npm
			
 
				+
			
 
				+# Optional eslint cache
			
 
				+.eslintcache
			
 
				+
			
 
				+# Microbundle cache
			
 
				+.rpt2_cache/
			
 
				+.rts2_cache_cjs/
			
 
				+.rts2_cache_es/
			
 
				+.rts2_cache_umd/
			
 
				+
			
 
				+# Optional REPL history
			
 
				+.node_repl_history
			
 
				+
			
 
				+# Output of 'npm pack'
			
 
				+*.tgz
			
 
				+
			
 
				+# Yarn Integrity file
			
 
				+.yarn-integrity
			
 
				+
			
 
				+# parcel-bundler cache (https://parceljs.org/)
			
 
				+.cache
			
 
				+.parcel-cache
			
 
				+
			
 
				+# Next.js build output
			
 
				+.next
			
 
				+
			
 
				+# Nuxt.js build / generate output
			
 
				+.nuxt
			
 
				+
			
 
				+# Gatsby files
			
 
				+.cache/
			
 
				+
			
 
				+# Storybook build outputs
			
 
				+.out
			
 
				+.storybook-out
			
 
				+
			
 
				+# Temporary folders
			
 
				+tmp/
			
 
				+temp/
			
 
				+
			
 
				+# Database
			
 
				+*.db
			
 
				+*.sqlite
			
 
				+*.sqlite3
			
 
				+
			
 
				+# Webdev artifacts (checkpoint zips, migrations, etc.)
			
 
				+.webdev/
			
 
				+
			
 
				+# Local tool state
			
 
				+.omc/
			
 
				+.claude/
			
 
				+
			
 
				+# Manus version file (auto-generated, not part of source)
			
 
				+client/public/__manus__/version.json
			
--- a/.gitkeep
+++ b/.gitkeep
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,35 @@
 
				+# Dependencies
			
 
				+node_modules/
			
 
				+.pnpm-store/
			
 
				+
			
 
				+# Build outputs
			
 
				+dist/
			
 
				+build/
			
 
				+*.dist
			
 
				+
			
 
				+# Generated files
			
 
				+*.tsbuildinfo
			
 
				+coverage/
			
 
				+
			
 
				+# Package files
			
 
				+package-lock.json
			
 
				+pnpm-lock.yaml
			
 
				+
			
 
				+# Database
			
 
				+*.db
			
 
				+*.sqlite
			
 
				+*.sqlite3
			
 
				+
			
 
				+# Logs
			
 
				+*.log
			
 
				+
			
 
				+# Environment files
			
 
				+.env*
			
 
				+
			
 
				+# IDE files
			
 
				+.vscode/
			
 
				+.idea/
			
 
				+
			
 
				+# OS files
			
 
				+.DS_Store
			
 
				+Thumbs.db
			
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,15 @@
 
				+{
			
 
				+  "semi": true,
			
 
				+  "trailingComma": "es5",
			
 
				+  "singleQuote": false,
			
 
				+  "printWidth": 80,
			
 
				+  "tabWidth": 2,
			
 
				+  "useTabs": false,
			
 
				+  "bracketSpacing": true,
			
 
				+  "bracketSameLine": false,
			
 
				+  "arrowParens": "avoid",
			
 
				+  "endOfLine": "lf",
			
 
				+  "quoteProps": "as-needed",
			
 
				+  "jsxSingleQuote": false,
			
 
				+  "proseWrap": "preserve"
			
 
				+}
			
--- a/client/index.html
+++ b/client/index.html
@@ -0,0 +1,24 @@
 
				+<!doctype html>
			
 
				+<html lang="en">
			
 
				+
			
 
				+  <head>
			
 
				+    <meta charset="UTF-8" />
			
 
				+    <meta
			
 
				+      name="viewport"
			
 
				+      content="width=device-width, initial-scale=1.0, maximum-scale=1" />
			
 
				+    <title>Homelegance Chatbot Integration Demo</title>    
			
 
				+    <link rel="preconnect" href="https://fonts.googleapis.com" />
			
 
				+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
			
 
				+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Fira+Code:wght@400;500&display=swap" rel="stylesheet" />
			
 
				+  </head>
			
 
				+
			
 
				+  <body>
			
 
				+    <div id="root"></div>
			
 
				+    <script type="module" src="/src/main.tsx"></script>
			
 
				+    <script
			
 
				+      defer
			
 
				+      src="%VITE_ANALYTICS_ENDPOINT%/umami"
			
 
				+      data-website-id="%VITE_ANALYTICS_WEBSITE_ID%"></script>
			
 
				+  </body>
			
 
				+
			
 
				+</html>
			
--- a/client/public/.gitkeep
+++ b/client/public/.gitkeep
--- a/client/public/__manus__/debug-collector.js
+++ b/client/public/__manus__/debug-collector.js
@@ -0,0 +1,821 @@
 
				+/**
			
 
				+ * Manus Debug Collector (agent-friendly)
			
 
				+ *
			
 
				+ * Captures:
			
 
				+ * 1) Console logs
			
 
				+ * 2) Network requests (fetch + XHR)
			
 
				+ * 3) User interactions (semantic uiEvents: click/type/submit/nav/scroll/etc.)
			
 
				+ *
			
 
				+ * Data is periodically sent to /__manus__/logs
			
 
				+ * Note: uiEvents are mirrored to sessionEvents for sessionReplay.log
			
 
				+ */
			
 
				+(function () {
			
 
				+  "use strict";
			
 
				+
			
 
				+  // Prevent double initialization
			
 
				+  if (window.__MANUS_DEBUG_COLLECTOR__) return;
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Configuration
			
 
				+  // ==========================================================================
			
 
				+  const CONFIG = {
			
 
				+    reportEndpoint: "/__manus__/logs",
			
 
				+    bufferSize: {
			
 
				+      console: 500,
			
 
				+      network: 200,
			
 
				+      // semantic, agent-friendly UI events
			
 
				+      ui: 500,
			
 
				+    },
			
 
				+    reportInterval: 2000,
			
 
				+    sensitiveFields: [
			
 
				+      "password",
			
 
				+      "token",
			
 
				+      "secret",
			
 
				+      "key",
			
 
				+      "authorization",
			
 
				+      "cookie",
			
 
				+      "session",
			
 
				+    ],
			
 
				+    maxBodyLength: 10240,
			
 
				+    // UI event logging privacy policy:
			
 
				+    // - inputs matching sensitiveFields or type=password are masked by default
			
 
				+    // - non-sensitive inputs log up to 200 chars
			
 
				+    uiInputMaxLen: 200,
			
 
				+    uiTextMaxLen: 80,
			
 
				+    // Scroll throttling: minimum ms between scroll events
			
 
				+    scrollThrottleMs: 500,
			
 
				+  };
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Storage
			
 
				+  // ==========================================================================
			
 
				+  const store = {
			
 
				+    consoleLogs: [],
			
 
				+    networkRequests: [],
			
 
				+    uiEvents: [],
			
 
				+    lastReportTime: Date.now(),
			
 
				+    lastScrollTime: 0,
			
 
				+  };
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Utility Functions
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  function sanitizeValue(value, depth) {
			
 
				+    if (depth === void 0) depth = 0;
			
 
				+    if (depth > 5) return "[Max Depth]";
			
 
				+    if (value === null) return null;
			
 
				+    if (value === undefined) return undefined;
			
 
				+
			
 
				+    if (typeof value === "string") {
			
 
				+      return value.length > 1000 ? value.slice(0, 1000) + "...[truncated]" : value;
			
 
				+    }
			
 
				+
			
 
				+    if (typeof value !== "object") return value;
			
 
				+
			
 
				+    if (Array.isArray(value)) {
			
 
				+      return value.slice(0, 100).map(function (v) {
			
 
				+        return sanitizeValue(v, depth + 1);
			
 
				+      });
			
 
				+    }
			
 
				+
			
 
				+    var sanitized = {};
			
 
				+    for (var k in value) {
			
 
				+      if (Object.prototype.hasOwnProperty.call(value, k)) {
			
 
				+        var isSensitive = CONFIG.sensitiveFields.some(function (f) {
			
 
				+          return k.toLowerCase().indexOf(f) !== -1;
			
 
				+        });
			
 
				+        if (isSensitive) {
			
 
				+          sanitized[k] = "[REDACTED]";
			
 
				+        } else {
			
 
				+          sanitized[k] = sanitizeValue(value[k], depth + 1);
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+    return sanitized;
			
 
				+  }
			
 
				+
			
 
				+  function formatArg(arg) {
			
 
				+    try {
			
 
				+      if (arg instanceof Error) {
			
 
				+        return { type: "Error", message: arg.message, stack: arg.stack };
			
 
				+      }
			
 
				+      if (typeof arg === "object") return sanitizeValue(arg);
			
 
				+      return String(arg);
			
 
				+    } catch (e) {
			
 
				+      return "[Unserializable]";
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  function formatArgs(args) {
			
 
				+    var result = [];
			
 
				+    for (var i = 0; i < args.length; i++) result.push(formatArg(args[i]));
			
 
				+    return result;
			
 
				+  }
			
 
				+
			
 
				+  function pruneBuffer(buffer, maxSize) {
			
 
				+    if (buffer.length > maxSize) buffer.splice(0, buffer.length - maxSize);
			
 
				+  }
			
 
				+
			
 
				+  function tryParseJson(str) {
			
 
				+    if (typeof str !== "string") return str;
			
 
				+    try {
			
 
				+      return JSON.parse(str);
			
 
				+    } catch (e) {
			
 
				+      return str;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Semantic UI Event Logging (agent-friendly)
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  function shouldIgnoreTarget(target) {
			
 
				+    try {
			
 
				+      if (!target || !(target instanceof Element)) return false;
			
 
				+      return !!target.closest(".manus-no-record");
			
 
				+    } catch (e) {
			
 
				+      return false;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  function compactText(s, maxLen) {
			
 
				+    try {
			
 
				+      var t = (s || "").trim().replace(/\s+/g, " ");
			
 
				+      if (!t) return "";
			
 
				+      return t.length > maxLen ? t.slice(0, maxLen) + "…" : t;
			
 
				+    } catch (e) {
			
 
				+      return "";
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  function elText(el) {
			
 
				+    try {
			
 
				+      var t = el.innerText || el.textContent || "";
			
 
				+      return compactText(t, CONFIG.uiTextMaxLen);
			
 
				+    } catch (e) {
			
 
				+      return "";
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  function describeElement(el) {
			
 
				+    if (!el || !(el instanceof Element)) return null;
			
 
				+
			
 
				+    var getAttr = function (name) {
			
 
				+      return el.getAttribute(name);
			
 
				+    };
			
 
				+
			
 
				+    var tag = el.tagName ? el.tagName.toLowerCase() : null;
			
 
				+    var id = el.id || null;
			
 
				+    var name = getAttr("name") || null;
			
 
				+    var role = getAttr("role") || null;
			
 
				+    var ariaLabel = getAttr("aria-label") || null;
			
 
				+
			
 
				+    var dataLoc = getAttr("data-loc") || null;
			
 
				+    var testId =
			
 
				+      getAttr("data-testid") ||
			
 
				+      getAttr("data-test-id") ||
			
 
				+      getAttr("data-test") ||
			
 
				+      null;
			
 
				+
			
 
				+    var type = tag === "input" ? (getAttr("type") || "text") : null;
			
 
				+    var href = tag === "a" ? getAttr("href") || null : null;
			
 
				+
			
 
				+    // a small, stable hint for agents (avoid building full CSS paths)
			
 
				+    var selectorHint = null;
			
 
				+    if (testId) selectorHint = '[data-testid="' + testId + '"]';
			
 
				+    else if (dataLoc) selectorHint = '[data-loc="' + dataLoc + '"]';
			
 
				+    else if (id) selectorHint = "#" + id;
			
 
				+    else selectorHint = tag || "unknown";
			
 
				+
			
 
				+    return {
			
 
				+      tag: tag,
			
 
				+      id: id,
			
 
				+      name: name,
			
 
				+      type: type,
			
 
				+      role: role,
			
 
				+      ariaLabel: ariaLabel,
			
 
				+      testId: testId,
			
 
				+      dataLoc: dataLoc,
			
 
				+      href: href,
			
 
				+      text: elText(el),
			
 
				+      selectorHint: selectorHint,
			
 
				+    };
			
 
				+  }
			
 
				+
			
 
				+  function isSensitiveField(el) {
			
 
				+    if (!el || !(el instanceof Element)) return false;
			
 
				+    var tag = el.tagName ? el.tagName.toLowerCase() : "";
			
 
				+    if (tag !== "input" && tag !== "textarea") return false;
			
 
				+
			
 
				+    var type = (el.getAttribute("type") || "").toLowerCase();
			
 
				+    if (type === "password") return true;
			
 
				+
			
 
				+    var name = (el.getAttribute("name") || "").toLowerCase();
			
 
				+    var id = (el.id || "").toLowerCase();
			
 
				+
			
 
				+    return CONFIG.sensitiveFields.some(function (f) {
			
 
				+      return name.indexOf(f) !== -1 || id.indexOf(f) !== -1;
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  function getInputValueSafe(el) {
			
 
				+    if (!el || !(el instanceof Element)) return null;
			
 
				+    var tag = el.tagName ? el.tagName.toLowerCase() : "";
			
 
				+    if (tag !== "input" && tag !== "textarea" && tag !== "select") return null;
			
 
				+
			
 
				+    var v = "";
			
 
				+    try {
			
 
				+      v = el.value != null ? String(el.value) : "";
			
 
				+    } catch (e) {
			
 
				+      v = "";
			
 
				+    }
			
 
				+
			
 
				+    if (isSensitiveField(el)) return { masked: true, length: v.length };
			
 
				+
			
 
				+    if (v.length > CONFIG.uiInputMaxLen) v = v.slice(0, CONFIG.uiInputMaxLen) + "…";
			
 
				+    return v;
			
 
				+  }
			
 
				+
			
 
				+  function logUiEvent(kind, payload) {
			
 
				+    var entry = {
			
 
				+      timestamp: Date.now(),
			
 
				+      kind: kind,
			
 
				+      url: location.href,
			
 
				+      viewport: { width: window.innerWidth, height: window.innerHeight },
			
 
				+      payload: sanitizeValue(payload),
			
 
				+    };
			
 
				+    store.uiEvents.push(entry);
			
 
				+    pruneBuffer(store.uiEvents, CONFIG.bufferSize.ui);
			
 
				+  }
			
 
				+
			
 
				+  function installUiEventListeners() {
			
 
				+    // Clicks
			
 
				+    document.addEventListener(
			
 
				+      "click",
			
 
				+      function (e) {
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("click", {
			
 
				+          target: describeElement(t),
			
 
				+          x: e.clientX,
			
 
				+          y: e.clientY,
			
 
				+        });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    // Typing "commit" events
			
 
				+    document.addEventListener(
			
 
				+      "change",
			
 
				+      function (e) {
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("change", {
			
 
				+          target: describeElement(t),
			
 
				+          value: getInputValueSafe(t),
			
 
				+        });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    document.addEventListener(
			
 
				+      "focusin",
			
 
				+      function (e) {
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("focusin", { target: describeElement(t) });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    document.addEventListener(
			
 
				+      "focusout",
			
 
				+      function (e) {
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("focusout", {
			
 
				+          target: describeElement(t),
			
 
				+          value: getInputValueSafe(t),
			
 
				+        });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    // Enter/Escape are useful for form flows & modals
			
 
				+    document.addEventListener(
			
 
				+      "keydown",
			
 
				+      function (e) {
			
 
				+        if (e.key !== "Enter" && e.key !== "Escape") return;
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("keydown", { key: e.key, target: describeElement(t) });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    // Form submissions
			
 
				+    document.addEventListener(
			
 
				+      "submit",
			
 
				+      function (e) {
			
 
				+        var t = e.target;
			
 
				+        if (shouldIgnoreTarget(t)) return;
			
 
				+        logUiEvent("submit", { target: describeElement(t) });
			
 
				+      },
			
 
				+      true
			
 
				+    );
			
 
				+
			
 
				+    // Throttled scroll events
			
 
				+    window.addEventListener(
			
 
				+      "scroll",
			
 
				+      function () {
			
 
				+        var now = Date.now();
			
 
				+        if (now - store.lastScrollTime < CONFIG.scrollThrottleMs) return;
			
 
				+        store.lastScrollTime = now;
			
 
				+
			
 
				+        logUiEvent("scroll", {
			
 
				+          scrollX: window.scrollX,
			
 
				+          scrollY: window.scrollY,
			
 
				+          documentHeight: document.documentElement.scrollHeight,
			
 
				+          viewportHeight: window.innerHeight,
			
 
				+        });
			
 
				+      },
			
 
				+      { passive: true }
			
 
				+    );
			
 
				+
			
 
				+    // Navigation tracking for SPAs
			
 
				+    function nav(reason) {
			
 
				+      logUiEvent("navigate", { reason: reason });
			
 
				+    }
			
 
				+
			
 
				+    var origPush = history.pushState;
			
 
				+    history.pushState = function () {
			
 
				+      origPush.apply(this, arguments);
			
 
				+      nav("pushState");
			
 
				+    };
			
 
				+
			
 
				+    var origReplace = history.replaceState;
			
 
				+    history.replaceState = function () {
			
 
				+      origReplace.apply(this, arguments);
			
 
				+      nav("replaceState");
			
 
				+    };
			
 
				+
			
 
				+    window.addEventListener("popstate", function () {
			
 
				+      nav("popstate");
			
 
				+    });
			
 
				+    window.addEventListener("hashchange", function () {
			
 
				+      nav("hashchange");
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Console Interception
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  var originalConsole = {
			
 
				+    log: console.log.bind(console),
			
 
				+    debug: console.debug.bind(console),
			
 
				+    info: console.info.bind(console),
			
 
				+    warn: console.warn.bind(console),
			
 
				+    error: console.error.bind(console),
			
 
				+  };
			
 
				+
			
 
				+  ["log", "debug", "info", "warn", "error"].forEach(function (method) {
			
 
				+    console[method] = function () {
			
 
				+      var args = Array.prototype.slice.call(arguments);
			
 
				+
			
 
				+      var entry = {
			
 
				+        timestamp: Date.now(),
			
 
				+        level: method.toUpperCase(),
			
 
				+        args: formatArgs(args),
			
 
				+        stack: method === "error" ? new Error().stack : null,
			
 
				+      };
			
 
				+
			
 
				+      store.consoleLogs.push(entry);
			
 
				+      pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
			
 
				+
			
 
				+      originalConsole[method].apply(console, args);
			
 
				+    };
			
 
				+  });
			
 
				+
			
 
				+  window.addEventListener("error", function (event) {
			
 
				+    store.consoleLogs.push({
			
 
				+      timestamp: Date.now(),
			
 
				+      level: "ERROR",
			
 
				+      args: [
			
 
				+        {
			
 
				+          type: "UncaughtError",
			
 
				+          message: event.message,
			
 
				+          filename: event.filename,
			
 
				+          lineno: event.lineno,
			
 
				+          colno: event.colno,
			
 
				+          stack: event.error ? event.error.stack : null,
			
 
				+        },
			
 
				+      ],
			
 
				+      stack: event.error ? event.error.stack : null,
			
 
				+    });
			
 
				+    pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
			
 
				+
			
 
				+    // Mark an error moment in UI event stream for agents
			
 
				+    logUiEvent("error", {
			
 
				+      message: event.message,
			
 
				+      filename: event.filename,
			
 
				+      lineno: event.lineno,
			
 
				+      colno: event.colno,
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  window.addEventListener("unhandledrejection", function (event) {
			
 
				+    var reason = event.reason;
			
 
				+    store.consoleLogs.push({
			
 
				+      timestamp: Date.now(),
			
 
				+      level: "ERROR",
			
 
				+      args: [
			
 
				+        {
			
 
				+          type: "UnhandledRejection",
			
 
				+          reason: reason && reason.message ? reason.message : String(reason),
			
 
				+          stack: reason && reason.stack ? reason.stack : null,
			
 
				+        },
			
 
				+      ],
			
 
				+      stack: reason && reason.stack ? reason.stack : null,
			
 
				+    });
			
 
				+    pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
			
 
				+
			
 
				+    logUiEvent("unhandledrejection", {
			
 
				+      reason: reason && reason.message ? reason.message : String(reason),
			
 
				+    });
			
 
				+  });
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Fetch Interception
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  var originalFetch = window.fetch.bind(window);
			
 
				+
			
 
				+  window.fetch = function (input, init) {
			
 
				+    init = init || {};
			
 
				+    var startTime = Date.now();
			
 
				+    // Handle string, Request object, or URL object
			
 
				+    var url = typeof input === "string"
			
 
				+      ? input
			
 
				+      : (input && (input.url || input.href || String(input))) || "";
			
 
				+    var method = init.method || (input && input.method) || "GET";
			
 
				+
			
 
				+    // Don't intercept internal requests
			
 
				+    if (url.indexOf("/__manus__/") === 0) {
			
 
				+      return originalFetch(input, init);
			
 
				+    }
			
 
				+
			
 
				+    // Safely parse headers (avoid breaking if headers format is invalid)
			
 
				+    var requestHeaders = {};
			
 
				+    try {
			
 
				+      if (init.headers) {
			
 
				+        requestHeaders = Object.fromEntries(new Headers(init.headers).entries());
			
 
				+      }
			
 
				+    } catch (e) {
			
 
				+      requestHeaders = { _parseError: true };
			
 
				+    }
			
 
				+
			
 
				+    var entry = {
			
 
				+      timestamp: startTime,
			
 
				+      type: "fetch",
			
 
				+      method: method.toUpperCase(),
			
 
				+      url: url,
			
 
				+      request: {
			
 
				+        headers: requestHeaders,
			
 
				+        body: init.body ? sanitizeValue(tryParseJson(init.body)) : null,
			
 
				+      },
			
 
				+      response: null,
			
 
				+      duration: null,
			
 
				+      error: null,
			
 
				+    };
			
 
				+
			
 
				+    return originalFetch(input, init)
			
 
				+      .then(function (response) {
			
 
				+        entry.duration = Date.now() - startTime;
			
 
				+
			
 
				+        var contentType = (response.headers.get("content-type") || "").toLowerCase();
			
 
				+        var contentLength = response.headers.get("content-length");
			
 
				+
			
 
				+        entry.response = {
			
 
				+          status: response.status,
			
 
				+          statusText: response.statusText,
			
 
				+          headers: Object.fromEntries(response.headers.entries()),
			
 
				+          body: null,
			
 
				+        };
			
 
				+
			
 
				+        // Semantic network hint for agents on failures (sync, no need to wait for body)
			
 
				+        if (response.status >= 400) {
			
 
				+          logUiEvent("network_error", {
			
 
				+            kind: "fetch",
			
 
				+            method: entry.method,
			
 
				+            url: entry.url,
			
 
				+            status: response.status,
			
 
				+            statusText: response.statusText,
			
 
				+          });
			
 
				+        }
			
 
				+
			
 
				+        // Skip body capture for streaming responses (SSE, etc.) to avoid memory leaks
			
 
				+        var isStreaming = contentType.indexOf("text/event-stream") !== -1 ||
			
 
				+                          contentType.indexOf("application/stream") !== -1 ||
			
 
				+                          contentType.indexOf("application/x-ndjson") !== -1;
			
 
				+        if (isStreaming) {
			
 
				+          entry.response.body = "[Streaming response - not captured]";
			
 
				+          store.networkRequests.push(entry);
			
 
				+          pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+          return response;
			
 
				+        }
			
 
				+
			
 
				+        // Skip body capture for large responses to avoid memory issues
			
 
				+        if (contentLength && parseInt(contentLength, 10) > CONFIG.maxBodyLength) {
			
 
				+          entry.response.body = "[Response too large: " + contentLength + " bytes]";
			
 
				+          store.networkRequests.push(entry);
			
 
				+          pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+          return response;
			
 
				+        }
			
 
				+
			
 
				+        // Skip body capture for binary content types
			
 
				+        var isBinary = contentType.indexOf("image/") !== -1 ||
			
 
				+                       contentType.indexOf("video/") !== -1 ||
			
 
				+                       contentType.indexOf("audio/") !== -1 ||
			
 
				+                       contentType.indexOf("application/octet-stream") !== -1 ||
			
 
				+                       contentType.indexOf("application/pdf") !== -1 ||
			
 
				+                       contentType.indexOf("application/zip") !== -1;
			
 
				+        if (isBinary) {
			
 
				+          entry.response.body = "[Binary content: " + contentType + "]";
			
 
				+          store.networkRequests.push(entry);
			
 
				+          pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+          return response;
			
 
				+        }
			
 
				+
			
 
				+        // For text responses, clone and read body in background
			
 
				+        var clonedResponse = response.clone();
			
 
				+
			
 
				+        // Async: read body in background, don't block the response
			
 
				+        clonedResponse
			
 
				+          .text()
			
 
				+          .then(function (text) {
			
 
				+            if (text.length <= CONFIG.maxBodyLength) {
			
 
				+              entry.response.body = sanitizeValue(tryParseJson(text));
			
 
				+            } else {
			
 
				+              entry.response.body = text.slice(0, CONFIG.maxBodyLength) + "...[truncated]";
			
 
				+            }
			
 
				+          })
			
 
				+          .catch(function () {
			
 
				+            entry.response.body = "[Unable to read body]";
			
 
				+          })
			
 
				+          .finally(function () {
			
 
				+            store.networkRequests.push(entry);
			
 
				+            pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+          });
			
 
				+
			
 
				+        // Return response immediately, don't wait for body reading
			
 
				+        return response;
			
 
				+      })
			
 
				+      .catch(function (error) {
			
 
				+        entry.duration = Date.now() - startTime;
			
 
				+        entry.error = { message: error.message, stack: error.stack };
			
 
				+
			
 
				+        store.networkRequests.push(entry);
			
 
				+        pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+
			
 
				+        logUiEvent("network_error", {
			
 
				+          kind: "fetch",
			
 
				+          method: entry.method,
			
 
				+          url: entry.url,
			
 
				+          message: error.message,
			
 
				+        });
			
 
				+
			
 
				+        throw error;
			
 
				+      });
			
 
				+  };
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // XHR Interception
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  var originalXHROpen = XMLHttpRequest.prototype.open;
			
 
				+  var originalXHRSend = XMLHttpRequest.prototype.send;
			
 
				+
			
 
				+  XMLHttpRequest.prototype.open = function (method, url) {
			
 
				+    this._manusData = {
			
 
				+      method: (method || "GET").toUpperCase(),
			
 
				+      url: url,
			
 
				+      startTime: null,
			
 
				+    };
			
 
				+    return originalXHROpen.apply(this, arguments);
			
 
				+  };
			
 
				+
			
 
				+  XMLHttpRequest.prototype.send = function (body) {
			
 
				+    var xhr = this;
			
 
				+
			
 
				+    if (
			
 
				+      xhr._manusData &&
			
 
				+      xhr._manusData.url &&
			
 
				+      xhr._manusData.url.indexOf("/__manus__/") !== 0
			
 
				+    ) {
			
 
				+      xhr._manusData.startTime = Date.now();
			
 
				+      xhr._manusData.requestBody = body ? sanitizeValue(tryParseJson(body)) : null;
			
 
				+
			
 
				+      xhr.addEventListener("load", function () {
			
 
				+        var contentType = (xhr.getResponseHeader("content-type") || "").toLowerCase();
			
 
				+        var responseBody = null;
			
 
				+
			
 
				+        // Skip body capture for streaming responses
			
 
				+        var isStreaming = contentType.indexOf("text/event-stream") !== -1 ||
			
 
				+                          contentType.indexOf("application/stream") !== -1 ||
			
 
				+                          contentType.indexOf("application/x-ndjson") !== -1;
			
 
				+
			
 
				+        // Skip body capture for binary content types
			
 
				+        var isBinary = contentType.indexOf("image/") !== -1 ||
			
 
				+                       contentType.indexOf("video/") !== -1 ||
			
 
				+                       contentType.indexOf("audio/") !== -1 ||
			
 
				+                       contentType.indexOf("application/octet-stream") !== -1 ||
			
 
				+                       contentType.indexOf("application/pdf") !== -1 ||
			
 
				+                       contentType.indexOf("application/zip") !== -1;
			
 
				+
			
 
				+        if (isStreaming) {
			
 
				+          responseBody = "[Streaming response - not captured]";
			
 
				+        } else if (isBinary) {
			
 
				+          responseBody = "[Binary content: " + contentType + "]";
			
 
				+        } else {
			
 
				+          // Safe to read responseText for text responses
			
 
				+          try {
			
 
				+            var text = xhr.responseText || "";
			
 
				+            if (text.length > CONFIG.maxBodyLength) {
			
 
				+              responseBody = text.slice(0, CONFIG.maxBodyLength) + "...[truncated]";
			
 
				+            } else {
			
 
				+              responseBody = sanitizeValue(tryParseJson(text));
			
 
				+            }
			
 
				+          } catch (e) {
			
 
				+            // responseText may throw for non-text responses
			
 
				+            responseBody = "[Unable to read response: " + e.message + "]";
			
 
				+          }
			
 
				+        }
			
 
				+
			
 
				+        var entry = {
			
 
				+          timestamp: xhr._manusData.startTime,
			
 
				+          type: "xhr",
			
 
				+          method: xhr._manusData.method,
			
 
				+          url: xhr._manusData.url,
			
 
				+          request: { body: xhr._manusData.requestBody },
			
 
				+          response: {
			
 
				+            status: xhr.status,
			
 
				+            statusText: xhr.statusText,
			
 
				+            body: responseBody,
			
 
				+          },
			
 
				+          duration: Date.now() - xhr._manusData.startTime,
			
 
				+          error: null,
			
 
				+        };
			
 
				+
			
 
				+        store.networkRequests.push(entry);
			
 
				+        pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+
			
 
				+        if (entry.response && entry.response.status >= 400) {
			
 
				+          logUiEvent("network_error", {
			
 
				+            kind: "xhr",
			
 
				+            method: entry.method,
			
 
				+            url: entry.url,
			
 
				+            status: entry.response.status,
			
 
				+            statusText: entry.response.statusText,
			
 
				+          });
			
 
				+        }
			
 
				+      });
			
 
				+
			
 
				+      xhr.addEventListener("error", function () {
			
 
				+        var entry = {
			
 
				+          timestamp: xhr._manusData.startTime,
			
 
				+          type: "xhr",
			
 
				+          method: xhr._manusData.method,
			
 
				+          url: xhr._manusData.url,
			
 
				+          request: { body: xhr._manusData.requestBody },
			
 
				+          response: null,
			
 
				+          duration: Date.now() - xhr._manusData.startTime,
			
 
				+          error: { message: "Network error" },
			
 
				+        };
			
 
				+
			
 
				+        store.networkRequests.push(entry);
			
 
				+        pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+
			
 
				+        logUiEvent("network_error", {
			
 
				+          kind: "xhr",
			
 
				+          method: entry.method,
			
 
				+          url: entry.url,
			
 
				+          message: "Network error",
			
 
				+        });
			
 
				+      });
			
 
				+    }
			
 
				+
			
 
				+    return originalXHRSend.apply(this, arguments);
			
 
				+  };
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Data Reporting
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  function reportLogs() {
			
 
				+    var consoleLogs = store.consoleLogs.splice(0);
			
 
				+    var networkRequests = store.networkRequests.splice(0);
			
 
				+    var uiEvents = store.uiEvents.splice(0);
			
 
				+
			
 
				+    // Skip if no new data
			
 
				+    if (
			
 
				+      consoleLogs.length === 0 &&
			
 
				+      networkRequests.length === 0 &&
			
 
				+      uiEvents.length === 0
			
 
				+    ) {
			
 
				+      return Promise.resolve();
			
 
				+    }
			
 
				+
			
 
				+    var payload = {
			
 
				+      timestamp: Date.now(),
			
 
				+      consoleLogs: consoleLogs,
			
 
				+      networkRequests: networkRequests,
			
 
				+      // Mirror uiEvents to sessionEvents for sessionReplay.log
			
 
				+      sessionEvents: uiEvents,
			
 
				+      // agent-friendly semantic events
			
 
				+      uiEvents: uiEvents,
			
 
				+    };
			
 
				+
			
 
				+    return originalFetch(CONFIG.reportEndpoint, {
			
 
				+      method: "POST",
			
 
				+      headers: { "Content-Type": "application/json" },
			
 
				+      body: JSON.stringify(payload),
			
 
				+    }).catch(function () {
			
 
				+      // Put data back on failure (but respect limits)
			
 
				+      store.consoleLogs = consoleLogs.concat(store.consoleLogs);
			
 
				+      store.networkRequests = networkRequests.concat(store.networkRequests);
			
 
				+      store.uiEvents = uiEvents.concat(store.uiEvents);
			
 
				+
			
 
				+      pruneBuffer(store.consoleLogs, CONFIG.bufferSize.console);
			
 
				+      pruneBuffer(store.networkRequests, CONFIG.bufferSize.network);
			
 
				+      pruneBuffer(store.uiEvents, CONFIG.bufferSize.ui);
			
 
				+    });
			
 
				+  }
			
 
				+
			
 
				+  // Periodic reporting
			
 
				+  setInterval(reportLogs, CONFIG.reportInterval);
			
 
				+
			
 
				+  // Report on page unload
			
 
				+  window.addEventListener("beforeunload", function () {
			
 
				+    var consoleLogs = store.consoleLogs;
			
 
				+    var networkRequests = store.networkRequests;
			
 
				+    var uiEvents = store.uiEvents;
			
 
				+
			
 
				+    if (
			
 
				+      consoleLogs.length === 0 &&
			
 
				+      networkRequests.length === 0 &&
			
 
				+      uiEvents.length === 0
			
 
				+    ) {
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    var payload = {
			
 
				+      timestamp: Date.now(),
			
 
				+      consoleLogs: consoleLogs,
			
 
				+      networkRequests: networkRequests,
			
 
				+      // Mirror uiEvents to sessionEvents for sessionReplay.log
			
 
				+      sessionEvents: uiEvents,
			
 
				+      uiEvents: uiEvents,
			
 
				+    };
			
 
				+
			
 
				+    if (navigator.sendBeacon) {
			
 
				+      var payloadStr = JSON.stringify(payload);
			
 
				+      // sendBeacon has ~64KB limit, truncate if too large
			
 
				+      var MAX_BEACON_SIZE = 60000; // Leave some margin
			
 
				+      if (payloadStr.length > MAX_BEACON_SIZE) {
			
 
				+        // Prioritize: keep recent events, drop older logs
			
 
				+        var truncatedPayload = {
			
 
				+          timestamp: Date.now(),
			
 
				+          consoleLogs: consoleLogs.slice(-50),
			
 
				+          networkRequests: networkRequests.slice(-20),
			
 
				+          sessionEvents: uiEvents.slice(-100),
			
 
				+          uiEvents: uiEvents.slice(-100),
			
 
				+          _truncated: true,
			
 
				+        };
			
 
				+        payloadStr = JSON.stringify(truncatedPayload);
			
 
				+      }
			
 
				+      navigator.sendBeacon(CONFIG.reportEndpoint, payloadStr);
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+  // ==========================================================================
			
 
				+  // Initialization
			
 
				+  // ==========================================================================
			
 
				+
			
 
				+  // Install semantic UI listeners ASAP
			
 
				+  try {
			
 
				+    installUiEventListeners();
			
 
				+  } catch (e) {
			
 
				+    console.warn("[Manus] Failed to install UI listeners:", e);
			
 
				+  }
			
 
				+
			
 
				+  // Mark as initialized
			
 
				+  window.__MANUS_DEBUG_COLLECTOR__ = {
			
 
				+    version: "2.0-no-rrweb",
			
 
				+    store: store,
			
 
				+    forceReport: reportLogs,
			
 
				+  };
			
 
				+
			
 
				+  console.debug("[Manus] Debug collector initialized (no rrweb, UI events only)");
			
 
				+})();
			
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -0,0 +1,84 @@
 
				+import { Toaster } from "@/components/ui/sonner";
			
 
				+import { TooltipProvider } from "@/components/ui/tooltip";
			
 
				+import NotFound from "@/pages/NotFound";
			
 
				+import { Route, Switch } from "wouter";
			
 
				+import ErrorBoundary from "./components/ErrorBoundary";
			
 
				+import { ThemeProvider } from "./contexts/ThemeContext";
			
 
				+import DashboardLayout from "./components/DashboardLayout";
			
 
				+import Home from "./pages/Home";
			
 
				+import Login from "./pages/Login";
			
 
				+import Register from "./pages/Register";
			
 
				+import ForgotPassword from "./pages/ForgotPassword";
			
 
				+import ResetPassword from "./pages/ResetPassword";
			
 
				+import AgentDashboard from "./pages/AgentDashboard";
			
 
				+import WorkflowDesigner from "./pages/WorkflowDesigner";
			
 
				+import UserManagement from "./pages/UserManagement";
			
 
				+import AcceptInvite from "./pages/AcceptInvite";
			
 
				+import Playground from "./pages/Playground";
			
 
				+import Analytics from "./pages/Analytics";
			
 
				+import DataSources from "./pages/DataSources";
			
 
				+
			
 
				+function Router() {
			
 
				+  return (
			
 
				+    <Switch>
			
 
				+      {/* Public pages */}
			
 
				+      <Route path={"/"} component={Home} />
			
 
				+      <Route path={"/login"} component={Login} />
			
 
				+      <Route path={"/register"} component={Register} />
			
 
				+      <Route path={"/forgot-password"} component={ForgotPassword} />
			
 
				+      <Route path={"/reset-password/:token"} component={ResetPassword} />
			
 
				+      <Route path="/invite/:token" component={AcceptInvite} />
			
 
				+
			
 
				+      {/* Protected pages — DashboardLayout handles auth gating */}
			
 
				+      <Route path={"/dashboard"}>
			
 
				+        <DashboardLayout requiredRole="agent">
			
 
				+          <AgentDashboard />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+      <Route path={"/dashboard/users"}>
			
 
				+        <DashboardLayout requiredRole="admin">
			
 
				+          <UserManagement />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+      <Route path={"/workflow-designer"}>
			
 
				+        <DashboardLayout requiredRole="admin">
			
 
				+          <WorkflowDesigner />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+      <Route path={"/playground"}>
			
 
				+        <DashboardLayout requiredRole="agent">
			
 
				+          <Playground />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+      <Route path={"/analytics"}>
			
 
				+        <DashboardLayout requiredRole="admin">
			
 
				+          <Analytics />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+      <Route path={"/data-sources"}>
			
 
				+        <DashboardLayout requiredRole="admin">
			
 
				+          <DataSources />
			
 
				+        </DashboardLayout>
			
 
				+      </Route>
			
 
				+
			
 
				+      <Route path={"/404"} component={NotFound} />
			
 
				+      {/* Final fallback route */}
			
 
				+      <Route component={NotFound} />
			
 
				+    </Switch>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function App() {
			
 
				+  return (
			
 
				+    <ErrorBoundary>
			
 
				+      <ThemeProvider defaultTheme="light">
			
 
				+        <TooltipProvider>
			
 
				+          <Toaster />
			
 
				+          <Router />
			
 
				+        </TooltipProvider>
			
 
				+      </ThemeProvider>
			
 
				+    </ErrorBoundary>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export default App;
			
--- a/client/src/_core/hooks/useAuth.ts
+++ b/client/src/_core/hooks/useAuth.ts
@@ -0,0 +1,84 @@
 
				+import { getLoginUrl } from "@/const";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { TRPCClientError } from "@trpc/client";
			
 
				+import { useCallback, useEffect, useMemo } from "react";
			
 
				+
			
 
				+type UseAuthOptions = {
			
 
				+  redirectOnUnauthenticated?: boolean;
			
 
				+  redirectPath?: string;
			
 
				+};
			
 
				+
			
 
				+export function useAuth(options?: UseAuthOptions) {
			
 
				+  const { redirectOnUnauthenticated = false, redirectPath = getLoginUrl() } =
			
 
				+    options ?? {};
			
 
				+  const utils = trpc.useUtils();
			
 
				+
			
 
				+  const meQuery = trpc.auth.me.useQuery(undefined, {
			
 
				+    retry: false,
			
 
				+    refetchOnWindowFocus: false,
			
 
				+  });
			
 
				+
			
 
				+  const logoutMutation = trpc.auth.logout.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      utils.auth.me.setData(undefined, null);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const logout = useCallback(async () => {
			
 
				+    try {
			
 
				+      await logoutMutation.mutateAsync();
			
 
				+    } catch (error: unknown) {
			
 
				+      if (
			
 
				+        error instanceof TRPCClientError &&
			
 
				+        error.data?.code === "UNAUTHORIZED"
			
 
				+      ) {
			
 
				+        return;
			
 
				+      }
			
 
				+      throw error;
			
 
				+    } finally {
			
 
				+      utils.auth.me.setData(undefined, null);
			
 
				+      await utils.auth.me.invalidate();
			
 
				+    }
			
 
				+  }, [logoutMutation, utils]);
			
 
				+
			
 
				+  const state = useMemo(() => {
			
 
				+    localStorage.setItem(
			
 
				+      "manus-runtime-user-info",
			
 
				+      JSON.stringify(meQuery.data)
			
 
				+    );
			
 
				+    return {
			
 
				+      user: meQuery.data ?? null,
			
 
				+      loading: meQuery.isLoading || logoutMutation.isPending,
			
 
				+      error: meQuery.error ?? logoutMutation.error ?? null,
			
 
				+      isAuthenticated: Boolean(meQuery.data),
			
 
				+    };
			
 
				+  }, [
			
 
				+    meQuery.data,
			
 
				+    meQuery.error,
			
 
				+    meQuery.isLoading,
			
 
				+    logoutMutation.error,
			
 
				+    logoutMutation.isPending,
			
 
				+  ]);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (!redirectOnUnauthenticated) return;
			
 
				+    if (meQuery.isLoading || logoutMutation.isPending) return;
			
 
				+    if (state.user) return;
			
 
				+    if (typeof window === "undefined") return;
			
 
				+    if (window.location.pathname === redirectPath) return;
			
 
				+
			
 
				+    window.location.href = redirectPath
			
 
				+  }, [
			
 
				+    redirectOnUnauthenticated,
			
 
				+    redirectPath,
			
 
				+    logoutMutation.isPending,
			
 
				+    meQuery.isLoading,
			
 
				+    state.user,
			
 
				+  ]);
			
 
				+
			
 
				+  return {
			
 
				+    ...state,
			
 
				+    refresh: () => meQuery.refetch(),
			
 
				+    logout,
			
 
				+  };
			
 
				+}
			
--- a/client/src/components/AIChatBox.tsx
+++ b/client/src/components/AIChatBox.tsx
@@ -0,0 +1,335 @@
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Textarea } from "@/components/ui/textarea";
			
 
				+import { ScrollArea } from "@/components/ui/scroll-area";
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Loader2, Send, User, Sparkles } from "lucide-react";
			
 
				+import { useState, useEffect, useRef } from "react";
			
 
				+import { Streamdown } from "streamdown";
			
 
				+
			
 
				+/**
			
 
				+ * Message type matching server-side LLM Message interface
			
 
				+ */
			
 
				+export type Message = {
			
 
				+  role: "system" | "user" | "assistant";
			
 
				+  content: string;
			
 
				+};
			
 
				+
			
 
				+export type AIChatBoxProps = {
			
 
				+  /**
			
 
				+   * Messages array to display in the chat.
			
 
				+   * Should match the format used by invokeLLM on the server.
			
 
				+   */
			
 
				+  messages: Message[];
			
 
				+
			
 
				+  /**
			
 
				+   * Callback when user sends a message.
			
 
				+   * Typically you'll call a tRPC mutation here to invoke the LLM.
			
 
				+   */
			
 
				+  onSendMessage: (content: string) => void;
			
 
				+
			
 
				+  /**
			
 
				+   * Whether the AI is currently generating a response
			
 
				+   */
			
 
				+  isLoading?: boolean;
			
 
				+
			
 
				+  /**
			
 
				+   * Placeholder text for the input field
			
 
				+   */
			
 
				+  placeholder?: string;
			
 
				+
			
 
				+  /**
			
 
				+   * Custom className for the container
			
 
				+   */
			
 
				+  className?: string;
			
 
				+
			
 
				+  /**
			
 
				+   * Height of the chat box (default: 600px)
			
 
				+   */
			
 
				+  height?: string | number;
			
 
				+
			
 
				+  /**
			
 
				+   * Empty state message to display when no messages
			
 
				+   */
			
 
				+  emptyStateMessage?: string;
			
 
				+
			
 
				+  /**
			
 
				+   * Suggested prompts to display in empty state
			
 
				+   * Click to send directly
			
 
				+   */
			
 
				+  suggestedPrompts?: string[];
			
 
				+};
			
 
				+
			
 
				+/**
			
 
				+ * A ready-to-use AI chat box component that integrates with the LLM system.
			
 
				+ *
			
 
				+ * Features:
			
 
				+ * - Matches server-side Message interface for seamless integration
			
 
				+ * - Markdown rendering with Streamdown
			
 
				+ * - Auto-scrolls to latest message
			
 
				+ * - Loading states
			
 
				+ * - Uses global theme colors from index.css
			
 
				+ *
			
 
				+ * @example
			
 
				+ * ```tsx
			
 
				+ * const ChatPage = () => {
			
 
				+ *   const [messages, setMessages] = useState<Message[]>([
			
 
				+ *     { role: "system", content: "You are a helpful assistant." }
			
 
				+ *   ]);
			
 
				+ *
			
 
				+ *   const chatMutation = trpc.ai.chat.useMutation({
			
 
				+ *     onSuccess: (response) => {
			
 
				+ *       // Assuming your tRPC endpoint returns the AI response as a string
			
 
				+ *       setMessages(prev => [...prev, {
			
 
				+ *         role: "assistant",
			
 
				+ *         content: response
			
 
				+ *       }]);
			
 
				+ *     },
			
 
				+ *     onError: (error) => {
			
 
				+ *       console.error("Chat error:", error);
			
 
				+ *       // Optionally show error message to user
			
 
				+ *     }
			
 
				+ *   });
			
 
				+ *
			
 
				+ *   const handleSend = (content: string) => {
			
 
				+ *     const newMessages = [...messages, { role: "user", content }];
			
 
				+ *     setMessages(newMessages);
			
 
				+ *     chatMutation.mutate({ messages: newMessages });
			
 
				+ *   };
			
 
				+ *
			
 
				+ *   return (
			
 
				+ *     <AIChatBox
			
 
				+ *       messages={messages}
			
 
				+ *       onSendMessage={handleSend}
			
 
				+ *       isLoading={chatMutation.isPending}
			
 
				+ *       suggestedPrompts={[
			
 
				+ *         "Explain quantum computing",
			
 
				+ *         "Write a hello world in Python"
			
 
				+ *       ]}
			
 
				+ *     />
			
 
				+ *   );
			
 
				+ * };
			
 
				+ * ```
			
 
				+ */
			
 
				+export function AIChatBox({
			
 
				+  messages,
			
 
				+  onSendMessage,
			
 
				+  isLoading = false,
			
 
				+  placeholder = "Type your message...",
			
 
				+  className,
			
 
				+  height = "600px",
			
 
				+  emptyStateMessage = "Start a conversation with AI",
			
 
				+  suggestedPrompts,
			
 
				+}: AIChatBoxProps) {
			
 
				+  const [input, setInput] = useState("");
			
 
				+  const scrollAreaRef = useRef<HTMLDivElement>(null);
			
 
				+  const containerRef = useRef<HTMLDivElement>(null);
			
 
				+  const inputAreaRef = useRef<HTMLFormElement>(null);
			
 
				+  const textareaRef = useRef<HTMLTextAreaElement>(null);
			
 
				+
			
 
				+  // Filter out system messages
			
 
				+  const displayMessages = messages.filter((msg) => msg.role !== "system");
			
 
				+
			
 
				+  // Calculate min-height for last assistant message to push user message to top
			
 
				+  const [minHeightForLastMessage, setMinHeightForLastMessage] = useState(0);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (containerRef.current && inputAreaRef.current) {
			
 
				+      const containerHeight = containerRef.current.offsetHeight;
			
 
				+      const inputHeight = inputAreaRef.current.offsetHeight;
			
 
				+      const scrollAreaHeight = containerHeight - inputHeight;
			
 
				+
			
 
				+      // Reserve space for:
			
 
				+      // - padding (p-4 = 32px top+bottom)
			
 
				+      // - user message: 40px (item height) + 16px (margin-top from space-y-4) = 56px
			
 
				+      // Note: margin-bottom is not counted because it naturally pushes the assistant message down
			
 
				+      const userMessageReservedHeight = 56;
			
 
				+      const calculatedHeight = scrollAreaHeight - 32 - userMessageReservedHeight;
			
 
				+
			
 
				+      setMinHeightForLastMessage(Math.max(0, calculatedHeight));
			
 
				+    }
			
 
				+  }, []);
			
 
				+
			
 
				+  // Scroll to bottom helper function with smooth animation
			
 
				+  const scrollToBottom = () => {
			
 
				+    const viewport = scrollAreaRef.current?.querySelector(
			
 
				+      '[data-radix-scroll-area-viewport]'
			
 
				+    ) as HTMLDivElement;
			
 
				+
			
 
				+    if (viewport) {
			
 
				+      requestAnimationFrame(() => {
			
 
				+        viewport.scrollTo({
			
 
				+          top: viewport.scrollHeight,
			
 
				+          behavior: 'smooth'
			
 
				+        });
			
 
				+      });
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleSubmit = (e: React.FormEvent) => {
			
 
				+    e.preventDefault();
			
 
				+    const trimmedInput = input.trim();
			
 
				+    if (!trimmedInput || isLoading) return;
			
 
				+
			
 
				+    onSendMessage(trimmedInput);
			
 
				+    setInput("");
			
 
				+
			
 
				+    // Scroll immediately after sending
			
 
				+    scrollToBottom();
			
 
				+
			
 
				+    // Keep focus on input
			
 
				+    textareaRef.current?.focus();
			
 
				+  };
			
 
				+
			
 
				+  const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
			
 
				+    if (e.key === "Enter" && !e.shiftKey) {
			
 
				+      e.preventDefault();
			
 
				+      handleSubmit(e);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      ref={containerRef}
			
 
				+      className={cn(
			
 
				+        "flex flex-col bg-card text-card-foreground rounded-lg border shadow-sm",
			
 
				+        className
			
 
				+      )}
			
 
				+      style={{ height }}
			
 
				+    >
			
 
				+      {/* Messages Area */}
			
 
				+      <div ref={scrollAreaRef} className="flex-1 overflow-hidden">
			
 
				+        {displayMessages.length === 0 ? (
			
 
				+          <div className="flex h-full flex-col p-4">
			
 
				+            <div className="flex flex-1 flex-col items-center justify-center gap-6 text-muted-foreground">
			
 
				+              <div className="flex flex-col items-center gap-3">
			
 
				+                <Sparkles className="size-12 opacity-20" />
			
 
				+                <p className="text-sm">{emptyStateMessage}</p>
			
 
				+              </div>
			
 
				+
			
 
				+              {suggestedPrompts && suggestedPrompts.length > 0 && (
			
 
				+                <div className="flex max-w-2xl flex-wrap justify-center gap-2">
			
 
				+                  {suggestedPrompts.map((prompt, index) => (
			
 
				+                    <button
			
 
				+                      key={index}
			
 
				+                      onClick={() => onSendMessage(prompt)}
			
 
				+                      disabled={isLoading}
			
 
				+                      className="rounded-lg border border-border bg-card px-4 py-2 text-sm transition-colors hover:bg-accent disabled:cursor-not-allowed disabled:opacity-50"
			
 
				+                    >
			
 
				+                      {prompt}
			
 
				+                    </button>
			
 
				+                  ))}
			
 
				+                </div>
			
 
				+              )}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        ) : (
			
 
				+          <ScrollArea className="h-full">
			
 
				+            <div className="flex flex-col space-y-4 p-4">
			
 
				+              {displayMessages.map((message, index) => {
			
 
				+                // Apply min-height to last message only if NOT loading (when loading, the loading indicator gets it)
			
 
				+                const isLastMessage = index === displayMessages.length - 1;
			
 
				+                const shouldApplyMinHeight =
			
 
				+                  isLastMessage && !isLoading && minHeightForLastMessage > 0;
			
 
				+
			
 
				+                return (
			
 
				+                  <div
			
 
				+                    key={index}
			
 
				+                    className={cn(
			
 
				+                      "flex gap-3",
			
 
				+                      message.role === "user"
			
 
				+                        ? "justify-end items-start"
			
 
				+                        : "justify-start items-start"
			
 
				+                    )}
			
 
				+                    style={
			
 
				+                      shouldApplyMinHeight
			
 
				+                        ? { minHeight: `${minHeightForLastMessage}px` }
			
 
				+                        : undefined
			
 
				+                    }
			
 
				+                  >
			
 
				+                    {message.role === "assistant" && (
			
 
				+                      <div className="size-8 shrink-0 mt-1 rounded-full bg-primary/10 flex items-center justify-center">
			
 
				+                        <Sparkles className="size-4 text-primary" />
			
 
				+                      </div>
			
 
				+                    )}
			
 
				+
			
 
				+                    <div
			
 
				+                      className={cn(
			
 
				+                        "max-w-[80%] rounded-lg px-4 py-2.5",
			
 
				+                        message.role === "user"
			
 
				+                          ? "bg-primary text-primary-foreground"
			
 
				+                          : "bg-muted text-foreground"
			
 
				+                      )}
			
 
				+                    >
			
 
				+                      {message.role === "assistant" ? (
			
 
				+                        <div className="prose prose-sm dark:prose-invert max-w-none">
			
 
				+                          <Streamdown>{message.content}</Streamdown>
			
 
				+                        </div>
			
 
				+                      ) : (
			
 
				+                        <p className="whitespace-pre-wrap text-sm">
			
 
				+                          {message.content}
			
 
				+                        </p>
			
 
				+                      )}
			
 
				+                    </div>
			
 
				+
			
 
				+                    {message.role === "user" && (
			
 
				+                      <div className="size-8 shrink-0 mt-1 rounded-full bg-secondary flex items-center justify-center">
			
 
				+                        <User className="size-4 text-secondary-foreground" />
			
 
				+                      </div>
			
 
				+                    )}
			
 
				+                  </div>
			
 
				+                );
			
 
				+              })}
			
 
				+
			
 
				+              {isLoading && (
			
 
				+                <div
			
 
				+                  className="flex items-start gap-3"
			
 
				+                  style={
			
 
				+                    minHeightForLastMessage > 0
			
 
				+                      ? { minHeight: `${minHeightForLastMessage}px` }
			
 
				+                      : undefined
			
 
				+                  }
			
 
				+                >
			
 
				+                  <div className="size-8 shrink-0 mt-1 rounded-full bg-primary/10 flex items-center justify-center">
			
 
				+                    <Sparkles className="size-4 text-primary" />
			
 
				+                  </div>
			
 
				+                  <div className="rounded-lg bg-muted px-4 py-2.5">
			
 
				+                    <Loader2 className="size-4 animate-spin text-muted-foreground" />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              )}
			
 
				+            </div>
			
 
				+          </ScrollArea>
			
 
				+        )}
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Input Area */}
			
 
				+      <form
			
 
				+        ref={inputAreaRef}
			
 
				+        onSubmit={handleSubmit}
			
 
				+        className="flex gap-2 p-4 border-t bg-background/50 items-end"
			
 
				+      >
			
 
				+        <Textarea
			
 
				+          ref={textareaRef}
			
 
				+          value={input}
			
 
				+          onChange={(e) => setInput(e.target.value)}
			
 
				+          onKeyDown={handleKeyDown}
			
 
				+          placeholder={placeholder}
			
 
				+          className="flex-1 max-h-32 resize-none min-h-9"
			
 
				+          rows={1}
			
 
				+        />
			
 
				+        <Button
			
 
				+          type="submit"
			
 
				+          size="icon"
			
 
				+          disabled={!input.trim() || isLoading}
			
 
				+          className="shrink-0 h-[38px] w-[38px]"
			
 
				+        >
			
 
				+          {isLoading ? (
			
 
				+            <Loader2 className="size-4 animate-spin" />
			
 
				+          ) : (
			
 
				+            <Send className="size-4" />
			
 
				+          )}
			
 
				+        </Button>
			
 
				+      </form>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/ArchitectureDiagram.tsx
+++ b/client/src/components/ArchitectureDiagram.tsx
@@ -0,0 +1,191 @@
 
				+/**
			
 
				+ * ArchitectureDiagram — System architecture visualization
			
 
				+ * Design: Warm Showroom — forest green, terracotta, cream palette
			
 
				+ * Shows how the chatbot integrates with Homelegance's existing systems
			
 
				+ */
			
 
				+import { motion } from "framer-motion";
			
 
				+import {
			
 
				+  Globe,
			
 
				+  Server,
			
 
				+  Database,
			
 
				+  Brain,
			
 
				+  MessageSquare,
			
 
				+  ShieldCheck,
			
 
				+  Webhook,
			
 
				+  Users,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+interface ArchBlock {
			
 
				+  id: string;
			
 
				+  label: string;
			
 
				+  sublabel: string;
			
 
				+  icon: React.ReactNode;
			
 
				+  color: string;
			
 
				+  tier: "frontend" | "middleware" | "backend" | "external";
			
 
				+}
			
 
				+
			
 
				+const BLOCKS: ArchBlock[] = [
			
 
				+  {
			
 
				+    id: "website",
			
 
				+    label: "homelegance.com",
			
 
				+    sublabel: "Website Frontend",
			
 
				+    icon: <Globe className="w-5 h-5" />,
			
 
				+    color: "#14532D",
			
 
				+    tier: "frontend",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "widget",
			
 
				+    label: "Chat Widget",
			
 
				+    sublabel: "Embedded JS SDK",
			
 
				+    icon: <MessageSquare className="w-5 h-5" />,
			
 
				+    color: "#14532D",
			
 
				+    tier: "frontend",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "gateway",
			
 
				+    label: "API Gateway",
			
 
				+    sublabel: "Auth & Rate Limiting",
			
 
				+    icon: <ShieldCheck className="w-5 h-5" />,
			
 
				+    color: "#78716C",
			
 
				+    tier: "middleware",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "webhook",
			
 
				+    label: "Webhook Router",
			
 
				+    sublabel: "Event Processing",
			
 
				+    icon: <Webhook className="w-5 h-5" />,
			
 
				+    color: "#78716C",
			
 
				+    tier: "middleware",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "nlp",
			
 
				+    label: "NLP Engine",
			
 
				+    sublabel: "Intent & Entity Recognition",
			
 
				+    icon: <Brain className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+    tier: "backend",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "dialog",
			
 
				+    label: "Dialog Manager",
			
 
				+    sublabel: "Conversation State",
			
 
				+    icon: <MessageSquare className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+    tier: "backend",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "crm",
			
 
				+    label: "CRM / ERP",
			
 
				+    sublabel: "Homelegance Systems",
			
 
				+    icon: <Database className="w-5 h-5" />,
			
 
				+    color: "#78716C",
			
 
				+    tier: "external",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "agents",
			
 
				+    label: "Live Agents",
			
 
				+    sublabel: "Human Handoff",
			
 
				+    icon: <Users className="w-5 h-5" />,
			
 
				+    color: "#78716C",
			
 
				+    tier: "external",
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+const TIERS = [
			
 
				+  { key: "frontend", label: "Client Layer", color: "#14532D" },
			
 
				+  { key: "middleware", label: "Middleware", color: "#78716C" },
			
 
				+  { key: "backend", label: "AI & Logic", color: "#C2410C" },
			
 
				+  { key: "external", label: "Integrations", color: "#78716C" },
			
 
				+];
			
 
				+
			
 
				+export default function ArchitectureDiagram() {
			
 
				+  return (
			
 
				+    <div className="w-full">
			
 
				+      <div className="space-y-4">
			
 
				+        {TIERS.map((tier, tierIdx) => {
			
 
				+          const tierBlocks = BLOCKS.filter((b) => b.tier === tier.key);
			
 
				+          return (
			
 
				+            <motion.div
			
 
				+              key={tier.key}
			
 
				+              initial={{ opacity: 0, x: -20 }}
			
 
				+              whileInView={{ opacity: 1, x: 0 }}
			
 
				+              viewport={{ once: true }}
			
 
				+              transition={{ delay: tierIdx * 0.1 }}
			
 
				+            >
			
 
				+              {/* Tier label */}
			
 
				+              <div className="flex items-center gap-3 mb-3">
			
 
				+                <span
			
 
				+                  className="text-xs font-bold uppercase tracking-wider px-3 py-1 rounded-full"
			
 
				+                  style={{
			
 
				+                    background: tier.color + "12",
			
 
				+                    color: tier.color,
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {tier.label}
			
 
				+                </span>
			
 
				+                <div className="flex-1 h-px" style={{ background: tier.color + "20" }} />
			
 
				+              </div>
			
 
				+
			
 
				+              {/* Blocks row */}
			
 
				+              <div className="grid grid-cols-2 gap-3">
			
 
				+                {tierBlocks.map((block, blockIdx) => (
			
 
				+                  <motion.div
			
 
				+                    key={block.id}
			
 
				+                    initial={{ opacity: 0, y: 10 }}
			
 
				+                    whileInView={{ opacity: 1, y: 0 }}
			
 
				+                    viewport={{ once: true }}
			
 
				+                    transition={{ delay: tierIdx * 0.1 + blockIdx * 0.05 }}
			
 
				+                    whileHover={{ y: -3, boxShadow: `0 8px 24px ${block.color}18` }}
			
 
				+                    className="p-4 rounded-xl border transition-all"
			
 
				+                    style={{
			
 
				+                      background: "#fff",
			
 
				+                      borderColor: "#e7e0d5",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <div className="flex items-start gap-3">
			
 
				+                      <div
			
 
				+                        className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0"
			
 
				+                        style={{ background: block.color + "12", color: block.color }}
			
 
				+                      >
			
 
				+                        {block.icon}
			
 
				+                      </div>
			
 
				+                      <div>
			
 
				+                        <h5
			
 
				+                          className="text-sm font-semibold"
			
 
				+                          style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                        >
			
 
				+                          {block.label}
			
 
				+                        </h5>
			
 
				+                        <p className="text-xs mt-0.5" style={{ color: "#a8a29e" }}>
			
 
				+                          {block.sublabel}
			
 
				+                        </p>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </motion.div>
			
 
				+                ))}
			
 
				+              </div>
			
 
				+
			
 
				+              {/* Connector arrows between tiers */}
			
 
				+              {tierIdx < TIERS.length - 1 && (
			
 
				+                <div className="flex justify-center py-2">
			
 
				+                  <div className="flex flex-col items-center">
			
 
				+                    <div className="w-0.5 h-3" style={{ background: "#d6d3d1" }} />
			
 
				+                    <div
			
 
				+                      className="w-0 h-0"
			
 
				+                      style={{
			
 
				+                        borderLeft: "5px solid transparent",
			
 
				+                        borderRight: "5px solid transparent",
			
 
				+                        borderTop: "6px solid #d6d3d1",
			
 
				+                      }}
			
 
				+                    />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              )}
			
 
				+            </motion.div>
			
 
				+          );
			
 
				+        })}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/ChatbotWidget.tsx
+++ b/client/src/components/ChatbotWidget.tsx
@@ -0,0 +1,343 @@
 
				+/**
			
 
				+ * ChatbotWidget — Interactive demo chatbot widget
			
 
				+ * Design: Warm Showroom — forest green header, cream body, terracotta accents
			
 
				+ * Floats in bottom-right corner, exactly as it would appear on homelegance.com
			
 
				+ */
			
 
				+import { useState, useRef, useEffect } from "react";
			
 
				+import { MessageCircle, X, Send, Bot, User } from "lucide-react";
			
 
				+import { motion, AnimatePresence } from "framer-motion";
			
 
				+
			
 
				+interface Message {
			
 
				+  id: number;
			
 
				+  text: string;
			
 
				+  sender: "bot" | "user";
			
 
				+  options?: string[];
			
 
				+}
			
 
				+
			
 
				+const INITIAL_MESSAGES: Message[] = [
			
 
				+  {
			
 
				+    id: 1,
			
 
				+    text: "Welcome to Homelegance! I'm your virtual assistant. How can I help you today?",
			
 
				+    sender: "bot",
			
 
				+    options: [
			
 
				+      "Browse Products",
			
 
				+      "Find a Dealer",
			
 
				+      "Order Status",
			
 
				+      "Parts & Warranty",
			
 
				+      "Talk to Sales Rep",
			
 
				+    ],
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+const BOT_RESPONSES: Record<string, Message> = {
			
 
				+  "Browse Products": {
			
 
				+    id: 0,
			
 
				+    text: "I'd love to help you find the right furniture! Which category are you interested in?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Bedroom", "Dining", "Seating", "Youth", "Accent Chairs", "Office"],
			
 
				+  },
			
 
				+  "Find a Dealer": {
			
 
				+    id: 0,
			
 
				+    text: "I can help you locate an authorized Homelegance dealer near you. Could you share your zip code or city?",
			
 
				+    sender: "bot",
			
 
				+  },
			
 
				+  "Order Status": {
			
 
				+    id: 0,
			
 
				+    text: "To check your order status, please provide your order number or the email address associated with your account.",
			
 
				+    sender: "bot",
			
 
				+  },
			
 
				+  "Parts & Warranty": {
			
 
				+    id: 0,
			
 
				+    text: "Homelegance offers a limited warranty on all products. I can help you with a parts request or warranty claim. What do you need?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Request Replacement Parts", "File Warranty Claim", "View Warranty Policy"],
			
 
				+  },
			
 
				+  "Talk to Sales Rep": {
			
 
				+    id: 0,
			
 
				+    text: "I'll connect you with a sales representative right away. Please hold for a moment while I transfer you to our team.",
			
 
				+    sender: "bot",
			
 
				+  },
			
 
				+  Bedroom: {
			
 
				+    id: 0,
			
 
				+    text: "Great choice! Our bedroom collections include the popular Lofton Collection with modern elegance, and the new Sloane Collection for youth rooms. Would you like to see best sellers or new arrivals?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Best Sellers", "New Arrivals", "View All Bedroom"],
			
 
				+  },
			
 
				+  Dining: {
			
 
				+    id: 0,
			
 
				+    text: "Our dining collections range from traditional to contemporary. The Isla Collection offers versatile modular options. Would you like to explore?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Best Sellers", "New Arrivals", "View All Dining"],
			
 
				+  },
			
 
				+  Seating: {
			
 
				+    id: 0,
			
 
				+    text: "From sofas to accent chairs, we have a wide selection. Our Isla modular seating collection is very popular with dealers. What are you looking for?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Sofas & Sectionals", "Accent Chairs", "Recliners"],
			
 
				+  },
			
 
				+  default: {
			
 
				+    id: 0,
			
 
				+    text: "Thank you for your message! Let me look into that for you. Is there anything else I can help with?",
			
 
				+    sender: "bot",
			
 
				+    options: ["Browse Products", "Find a Dealer", "Talk to Sales Rep"],
			
 
				+  },
			
 
				+};
			
 
				+
			
 
				+export default function ChatbotWidget() {
			
 
				+  const [isOpen, setIsOpen] = useState(false);
			
 
				+  const [messages, setMessages] = useState<Message[]>(INITIAL_MESSAGES);
			
 
				+  const [inputValue, setInputValue] = useState("");
			
 
				+  const [isTyping, setIsTyping] = useState(false);
			
 
				+  const messagesEndRef = useRef<HTMLDivElement>(null);
			
 
				+  const inputRef = useRef<HTMLInputElement>(null);
			
 
				+  let nextId = useRef(2);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
			
 
				+  }, [messages, isTyping]);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (isOpen) {
			
 
				+      setTimeout(() => inputRef.current?.focus(), 300);
			
 
				+    }
			
 
				+  }, [isOpen]);
			
 
				+
			
 
				+  const addBotResponse = (userText: string) => {
			
 
				+    setIsTyping(true);
			
 
				+    setTimeout(() => {
			
 
				+      const response = BOT_RESPONSES[userText] || BOT_RESPONSES["default"];
			
 
				+      const botMsg: Message = {
			
 
				+        ...response,
			
 
				+        id: nextId.current++,
			
 
				+      };
			
 
				+      setMessages((prev) => [...prev, botMsg]);
			
 
				+      setIsTyping(false);
			
 
				+    }, 800 + Math.random() * 600);
			
 
				+  };
			
 
				+
			
 
				+  const handleSend = (text?: string) => {
			
 
				+    const messageText = text || inputValue.trim();
			
 
				+    if (!messageText) return;
			
 
				+
			
 
				+    const userMsg: Message = {
			
 
				+      id: nextId.current++,
			
 
				+      text: messageText,
			
 
				+      sender: "user",
			
 
				+    };
			
 
				+    setMessages((prev) => [...prev, userMsg]);
			
 
				+    setInputValue("");
			
 
				+    addBotResponse(messageText);
			
 
				+  };
			
 
				+
			
 
				+  const handleKeyDown = (e: React.KeyboardEvent) => {
			
 
				+    if (e.key === "Enter") {
			
 
				+      e.preventDefault();
			
 
				+      handleSend();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      {/* Floating trigger button */}
			
 
				+      <AnimatePresence>
			
 
				+        {!isOpen && (
			
 
				+          <motion.button
			
 
				+            initial={{ scale: 0, opacity: 0 }}
			
 
				+            animate={{ scale: 1, opacity: 1 }}
			
 
				+            exit={{ scale: 0, opacity: 0 }}
			
 
				+            whileHover={{ scale: 1.08 }}
			
 
				+            whileTap={{ scale: 0.95 }}
			
 
				+            onClick={() => setIsOpen(true)}
			
 
				+            className="fixed bottom-6 right-6 z-50 w-16 h-16 rounded-full flex items-center justify-center shadow-lg"
			
 
				+            style={{
			
 
				+              background: "linear-gradient(135deg, #14532D 0%, #1a6b3a 100%)",
			
 
				+              boxShadow: "0 8px 32px rgba(20, 83, 45, 0.35), 0 2px 8px rgba(0,0,0,0.1)",
			
 
				+            }}
			
 
				+          >
			
 
				+            <MessageCircle className="w-7 h-7 text-white" />
			
 
				+            {/* Pulse ring */}
			
 
				+            <span className="absolute inset-0 rounded-full animate-ping opacity-20" style={{ background: "#14532D" }} />
			
 
				+          </motion.button>
			
 
				+        )}
			
 
				+      </AnimatePresence>
			
 
				+
			
 
				+      {/* Chat window */}
			
 
				+      <AnimatePresence>
			
 
				+        {isOpen && (
			
 
				+          <motion.div
			
 
				+            initial={{ opacity: 0, y: 20, scale: 0.95 }}
			
 
				+            animate={{ opacity: 1, y: 0, scale: 1 }}
			
 
				+            exit={{ opacity: 0, y: 20, scale: 0.95 }}
			
 
				+            transition={{ type: "spring", damping: 25, stiffness: 300 }}
			
 
				+            className="fixed bottom-6 right-6 z-50 w-[380px] max-w-[calc(100vw-2rem)] rounded-2xl overflow-hidden flex flex-col"
			
 
				+            style={{
			
 
				+              height: "520px",
			
 
				+              boxShadow: "0 20px 60px rgba(20, 83, 45, 0.2), 0 4px 16px rgba(0,0,0,0.08)",
			
 
				+            }}
			
 
				+          >
			
 
				+            {/* Header */}
			
 
				+            <div
			
 
				+              className="px-5 py-4 flex items-center justify-between shrink-0"
			
 
				+              style={{
			
 
				+                background: "linear-gradient(135deg, #14532D 0%, #1a6b3a 100%)",
			
 
				+              }}
			
 
				+            >
			
 
				+              <div className="flex items-center gap-3">
			
 
				+                <div className="w-10 h-10 rounded-full bg-white/15 flex items-center justify-center">
			
 
				+                  <Bot className="w-5 h-5 text-white" />
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <h3 className="text-white font-semibold text-sm" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                    Homelegance Assistant
			
 
				+                  </h3>
			
 
				+                  <div className="flex items-center gap-1.5">
			
 
				+                    <span className="w-2 h-2 rounded-full bg-green-300 animate-pulse" />
			
 
				+                    <span className="text-green-200 text-xs">Online</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <button
			
 
				+                onClick={() => setIsOpen(false)}
			
 
				+                className="w-8 h-8 rounded-full bg-white/10 hover:bg-white/20 flex items-center justify-center transition-colors"
			
 
				+              >
			
 
				+                <X className="w-4 h-4 text-white" />
			
 
				+              </button>
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Messages area */}
			
 
				+            <div
			
 
				+              className="flex-1 overflow-y-auto px-4 py-4 space-y-4"
			
 
				+              style={{ background: "#FFFBEB" }}
			
 
				+            >
			
 
				+              {messages.map((msg) => (
			
 
				+                <motion.div
			
 
				+                  key={msg.id}
			
 
				+                  initial={{ opacity: 0, y: 8 }}
			
 
				+                  animate={{ opacity: 1, y: 0 }}
			
 
				+                  transition={{ duration: 0.3 }}
			
 
				+                  className={`flex gap-2 ${msg.sender === "user" ? "justify-end" : "justify-start"}`}
			
 
				+                >
			
 
				+                  {msg.sender === "bot" && (
			
 
				+                    <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center mt-1" style={{ background: "#14532D" }}>
			
 
				+                      <Bot className="w-3.5 h-3.5 text-white" />
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+                  <div className={`max-w-[75%] ${msg.sender === "user" ? "" : ""}`}>
			
 
				+                    <div
			
 
				+                      className="px-4 py-2.5 rounded-2xl text-sm leading-relaxed"
			
 
				+                      style={
			
 
				+                        msg.sender === "user"
			
 
				+                          ? {
			
 
				+                              background: "#14532D",
			
 
				+                              color: "#fff",
			
 
				+                              borderBottomRightRadius: "6px",
			
 
				+                              fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                            }
			
 
				+                          : {
			
 
				+                              background: "#fff",
			
 
				+                              color: "#292524",
			
 
				+                              borderBottomLeftRadius: "6px",
			
 
				+                              boxShadow: "0 1px 4px rgba(120, 113, 108, 0.1)",
			
 
				+                              fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                            }
			
 
				+                      }
			
 
				+                    >
			
 
				+                      {msg.text}
			
 
				+                    </div>
			
 
				+                    {msg.options && (
			
 
				+                      <div className="flex flex-wrap gap-1.5 mt-2">
			
 
				+                        {msg.options.map((opt) => (
			
 
				+                          <button
			
 
				+                            key={opt}
			
 
				+                            onClick={() => handleSend(opt)}
			
 
				+                            className="px-3 py-1.5 text-xs rounded-full border transition-all hover:shadow-sm"
			
 
				+                            style={{
			
 
				+                              borderColor: "#C2410C",
			
 
				+                              color: "#C2410C",
			
 
				+                              background: "rgba(194, 65, 12, 0.05)",
			
 
				+                              fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                              fontWeight: 500,
			
 
				+                            }}
			
 
				+                            onMouseEnter={(e) => {
			
 
				+                              e.currentTarget.style.background = "#C2410C";
			
 
				+                              e.currentTarget.style.color = "#fff";
			
 
				+                            }}
			
 
				+                            onMouseLeave={(e) => {
			
 
				+                              e.currentTarget.style.background = "rgba(194, 65, 12, 0.05)";
			
 
				+                              e.currentTarget.style.color = "#C2410C";
			
 
				+                            }}
			
 
				+                          >
			
 
				+                            {opt}
			
 
				+                          </button>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    )}
			
 
				+                  </div>
			
 
				+                  {msg.sender === "user" && (
			
 
				+                    <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center mt-1" style={{ background: "#78716C" }}>
			
 
				+                      <User className="w-3.5 h-3.5 text-white" />
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+                </motion.div>
			
 
				+              ))}
			
 
				+
			
 
				+              {/* Typing indicator */}
			
 
				+              {isTyping && (
			
 
				+                <motion.div
			
 
				+                  initial={{ opacity: 0 }}
			
 
				+                  animate={{ opacity: 1 }}
			
 
				+                  className="flex gap-2 items-start"
			
 
				+                >
			
 
				+                  <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center" style={{ background: "#14532D" }}>
			
 
				+                    <Bot className="w-3.5 h-3.5 text-white" />
			
 
				+                  </div>
			
 
				+                  <div className="px-4 py-3 rounded-2xl bg-white" style={{ borderBottomLeftRadius: "6px", boxShadow: "0 1px 4px rgba(120, 113, 108, 0.1)" }}>
			
 
				+                    <div className="flex gap-1">
			
 
				+                      <span className="w-2 h-2 rounded-full bg-stone-400 animate-bounce" style={{ animationDelay: "0ms" }} />
			
 
				+                      <span className="w-2 h-2 rounded-full bg-stone-400 animate-bounce" style={{ animationDelay: "150ms" }} />
			
 
				+                      <span className="w-2 h-2 rounded-full bg-stone-400 animate-bounce" style={{ animationDelay: "300ms" }} />
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </motion.div>
			
 
				+              )}
			
 
				+              <div ref={messagesEndRef} />
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Input area */}
			
 
				+            <div className="px-4 py-3 border-t shrink-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+              <div className="flex items-center gap-2">
			
 
				+                <input
			
 
				+                  ref={inputRef}
			
 
				+                  type="text"
			
 
				+                  value={inputValue}
			
 
				+                  onChange={(e) => setInputValue(e.target.value)}
			
 
				+                  onKeyDown={handleKeyDown}
			
 
				+                  placeholder="Type your message..."
			
 
				+                  className="flex-1 px-4 py-2.5 rounded-full text-sm border-none outline-none"
			
 
				+                  style={{
			
 
				+                    background: "#f5f0e8",
			
 
				+                    color: "#292524",
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  }}
			
 
				+                />
			
 
				+                <button
			
 
				+                  onClick={() => handleSend()}
			
 
				+                  disabled={!inputValue.trim()}
			
 
				+                  className="w-10 h-10 rounded-full flex items-center justify-center transition-all disabled:opacity-40"
			
 
				+                  style={{
			
 
				+                    background: inputValue.trim() ? "#14532D" : "#d6d3d1",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  <Send className="w-4 h-4 text-white" />
			
 
				+                </button>
			
 
				+              </div>
			
 
				+              <p className="text-center text-[10px] mt-2" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                Powered by Homelegance AI
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          </motion.div>
			
 
				+        )}
			
 
				+      </AnimatePresence>
			
 
				+    </>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/ChatbotWidgetLive.tsx
+++ b/client/src/components/ChatbotWidgetLive.tsx
@@ -0,0 +1,315 @@
 
				+/**
			
 
				+ * Live Chatbot Widget — Tidio-inspired greeting with quick-reply buttons
			
 
				+ * Shows: "What can we help you with today?" + Orders, Shipping, Returning, Cancelling buttons
			
 
				+ */
			
 
				+import { useState, useRef, useEffect } from "react";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Bot, X, Send, Loader2, User, Headphones, Sparkles, ChevronDown, MoreVertical } from "lucide-react";
			
 
				+import { Streamdown } from "streamdown";
			
 
				+
			
 
				+const QUICK_REPLIES = [
			
 
				+  { label: "Orders", value: "I need help with my order" },
			
 
				+  { label: "Shipping", value: "I have a shipping question" },
			
 
				+  { label: "Returning", value: "I want to return an item" },
			
 
				+  { label: "Cancelling", value: "I need to cancel my order" },
			
 
				+];
			
 
				+
			
 
				+export default function ChatbotWidgetLive() {
			
 
				+  const [isOpen, setIsOpen] = useState(false);
			
 
				+  const [inputText, setInputText] = useState("");
			
 
				+  const [sessionId, setSessionId] = useState<string | null>(null);
			
 
				+  const [localMessages, setLocalMessages] = useState<Array<{ id: number; sender: string; content: string; createdAt: string }>>([]);
			
 
				+  const [isTyping, setIsTyping] = useState(false);
			
 
				+  const [showQuickReplies, setShowQuickReplies] = useState(true);
			
 
				+  const messagesEndRef = useRef<HTMLDivElement>(null);
			
 
				+
			
 
				+  const startSession = trpc.chat.startSession.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      setSessionId(data.sessionId);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const { data: messagesData } = trpc.chat.getMessages.useQuery(
			
 
				+    { sessionId: sessionId || "" },
			
 
				+    { enabled: !!sessionId, refetchInterval: 3000 }
			
 
				+  );
			
 
				+
			
 
				+  const sendMessage = trpc.chat.sendMessage.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      setIsTyping(false);
			
 
				+    },
			
 
				+    onError: () => {
			
 
				+      setIsTyping(false);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  // Sync server messages to local state
			
 
				+  useEffect(() => {
			
 
				+    if (messagesData?.messages) {
			
 
				+      setLocalMessages(messagesData.messages.map((m: any) => ({
			
 
				+        id: m.id,
			
 
				+        sender: m.sender,
			
 
				+        content: m.content,
			
 
				+        createdAt: m.createdAt?.toString() || new Date().toISOString(),
			
 
				+      })));
			
 
				+    }
			
 
				+  }, [messagesData]);
			
 
				+
			
 
				+  // Auto-scroll
			
 
				+  useEffect(() => {
			
 
				+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
			
 
				+  }, [localMessages, isTyping]);
			
 
				+
			
 
				+  const handleOpen = () => {
			
 
				+    setIsOpen(true);
			
 
				+    if (!sessionId) {
			
 
				+      startSession.mutate({});
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleSend = (text?: string) => {
			
 
				+    const content = text || inputText.trim();
			
 
				+    if (!content || !sessionId || isTyping) return;
			
 
				+    setInputText("");
			
 
				+    setIsTyping(true);
			
 
				+    setShowQuickReplies(false);
			
 
				+
			
 
				+    // Optimistically add user message
			
 
				+    setLocalMessages(prev => [...prev, {
			
 
				+      id: Date.now(),
			
 
				+      sender: "visitor",
			
 
				+      content,
			
 
				+      createdAt: new Date().toISOString(),
			
 
				+    }]);
			
 
				+
			
 
				+    sendMessage.mutate({ sessionId, content });
			
 
				+  };
			
 
				+
			
 
				+  const handleQuickReply = (reply: typeof QUICK_REPLIES[0]) => {
			
 
				+    handleSend(reply.value);
			
 
				+  };
			
 
				+
			
 
				+  const handleKeyDown = (e: React.KeyboardEvent) => {
			
 
				+    if (e.key === "Enter" && !e.shiftKey) {
			
 
				+      e.preventDefault();
			
 
				+      handleSend();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  // Determine if we should show the greeting state (no user messages yet)
			
 
				+  const hasUserMessages = localMessages.some(m => m.sender === "visitor");
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      {/* Chat window */}
			
 
				+      {isOpen && (
			
 
				+        <div
			
 
				+          className="fixed bottom-20 right-4 z-50 w-[380px] max-w-[calc(100vw-2rem)] rounded-2xl shadow-2xl overflow-hidden flex flex-col"
			
 
				+          style={{
			
 
				+            height: "520px",
			
 
				+            background: "#FFFBEB",
			
 
				+            border: "1px solid #e7e0d5",
			
 
				+            boxShadow: "0 20px 60px rgba(0,0,0,0.15)",
			
 
				+          }}
			
 
				+        >
			
 
				+          {/* Header — Tidio-inspired gradient */}
			
 
				+          <div
			
 
				+            className="px-4 py-3 flex items-center justify-between relative"
			
 
				+            style={{
			
 
				+              background: "linear-gradient(135deg, #14532D 0%, #166534 50%, #15803d 100%)",
			
 
				+            }}
			
 
				+          >
			
 
				+            <div className="flex items-center gap-2.5">
			
 
				+              <div className="relative">
			
 
				+                <div className="w-10 h-10 rounded-full flex items-center justify-center overflow-hidden" style={{ background: "rgba(255,255,255,0.2)" }}>
			
 
				+                  <Sparkles className="w-5 h-5 text-white" />
			
 
				+                </div>
			
 
				+                {/* Online indicator */}
			
 
				+                <div className="absolute -bottom-0.5 -right-0.5 w-3.5 h-3.5 rounded-full border-2 border-green-800" style={{ background: "#4ade80" }} />
			
 
				+              </div>
			
 
				+              <div>
			
 
				+                <div className="text-sm font-semibold text-white" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                  Ellie
			
 
				+                </div>
			
 
				+                <div className="flex items-center gap-1">
			
 
				+                  <div className="w-1.5 h-1.5 rounded-full" style={{ background: "#4ade80" }} />
			
 
				+                  <span className="text-[10px] text-green-200">
			
 
				+                    {messagesData?.status === "escalated" ? "Connected to agent" : "Always happy to help"}
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <div className="flex items-center gap-1">
			
 
				+              <button className="p-1.5 rounded-lg hover:bg-white/10 transition-colors">
			
 
				+                <MoreVertical className="w-4 h-4 text-white/70" />
			
 
				+              </button>
			
 
				+              <button onClick={() => setIsOpen(false)} className="p-1.5 rounded-lg hover:bg-white/10 transition-colors">
			
 
				+                <ChevronDown className="w-4 h-4 text-white/70" />
			
 
				+              </button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Messages */}
			
 
				+          <div className="flex-1 overflow-y-auto p-3 space-y-3">
			
 
				+            {startSession.isPending ? (
			
 
				+              <div className="flex items-center justify-center py-8">
			
 
				+                <Loader2 className="w-5 h-5 animate-spin" style={{ color: "#14532D" }} />
			
 
				+                <span className="ml-2 text-sm" style={{ color: "#78716C" }}>Starting conversation...</span>
			
 
				+              </div>
			
 
				+            ) : (
			
 
				+              <>
			
 
				+                {/* Greeting bubble — always shown at top */}
			
 
				+                {!hasUserMessages && (
			
 
				+                  <div className="flex gap-2 justify-start">
			
 
				+                    <div
			
 
				+                      className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1"
			
 
				+                      style={{ background: "#14532D", color: "#fff" }}
			
 
				+                    >
			
 
				+                      <Sparkles className="w-3 h-3" />
			
 
				+                    </div>
			
 
				+                    <div
			
 
				+                      className="max-w-[80%] px-3 py-2.5 rounded-xl text-[13px] leading-relaxed"
			
 
				+                      style={{
			
 
				+                        background: "#f5f0e8",
			
 
				+                        color: "#292524",
			
 
				+                        fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                        borderBottomLeftRadius: "4px",
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      <span>👋 What can we help you with today?</span>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                )}
			
 
				+
			
 
				+                {/* Quick reply buttons — Tidio-style */}
			
 
				+                {showQuickReplies && !hasUserMessages && sessionId && (
			
 
				+                  <div className="flex flex-wrap gap-2 justify-center py-2">
			
 
				+                    {QUICK_REPLIES.map((reply) => (
			
 
				+                      <button
			
 
				+                        key={reply.label}
			
 
				+                        onClick={() => handleQuickReply(reply)}
			
 
				+                        disabled={isTyping}
			
 
				+                        className="px-4 py-2 rounded-full text-[13px] font-medium transition-all hover:shadow-md active:scale-95 disabled:opacity-50"
			
 
				+                        style={{
			
 
				+                          background: "#fff",
			
 
				+                          color: "#0369a1",
			
 
				+                          border: "1.5px solid #0369a1",
			
 
				+                          fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        {reply.label}
			
 
				+                      </button>
			
 
				+                    ))}
			
 
				+                  </div>
			
 
				+                )}
			
 
				+
			
 
				+                {/* Conversation messages */}
			
 
				+                {localMessages.map((msg) => {
			
 
				+                  const isVisitor = msg.sender === "visitor";
			
 
				+                  const isBot = msg.sender === "bot";
			
 
				+                  return (
			
 
				+                    <div key={msg.id} className={`flex gap-2 ${isVisitor ? "justify-end" : "justify-start"}`}>
			
 
				+                      {!isVisitor && (
			
 
				+                        <div
			
 
				+                          className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1"
			
 
				+                          style={{ background: isBot ? "#14532D" : "#C2410C", color: "#fff" }}
			
 
				+                        >
			
 
				+                          {isBot ? <Sparkles className="w-3 h-3" /> : <Headphones className="w-3 h-3" />}
			
 
				+                        </div>
			
 
				+                      )}
			
 
				+                      <div
			
 
				+                        className="max-w-[80%] px-3 py-2 rounded-xl text-[13px] leading-relaxed"
			
 
				+                        style={{
			
 
				+                          background: isVisitor ? "#14532D" : "#f5f0e8",
			
 
				+                          color: isVisitor ? "#fff" : "#292524",
			
 
				+                          fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                          borderBottomRightRadius: isVisitor ? "4px" : undefined,
			
 
				+                          borderBottomLeftRadius: !isVisitor ? "4px" : undefined,
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        {isBot || msg.sender === "agent" ? (
			
 
				+                          <div className="prose prose-sm max-w-none" style={{ color: "inherit" }}>
			
 
				+                            <Streamdown>{msg.content}</Streamdown>
			
 
				+                          </div>
			
 
				+                        ) : (
			
 
				+                          msg.content
			
 
				+                        )}
			
 
				+                      </div>
			
 
				+                      {isVisitor && (
			
 
				+                        <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1" style={{ background: "#78716C20", color: "#78716C" }}>
			
 
				+                          <User className="w-3 h-3" />
			
 
				+                        </div>
			
 
				+                      )}
			
 
				+                    </div>
			
 
				+                  );
			
 
				+                })}
			
 
				+              </>
			
 
				+            )}
			
 
				+            {isTyping && (
			
 
				+              <div className="flex gap-2 items-start">
			
 
				+                <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0" style={{ background: "#14532D", color: "#fff" }}>
			
 
				+                  <Sparkles className="w-3 h-3" />
			
 
				+                </div>
			
 
				+                <div className="px-3 py-2 rounded-xl" style={{ background: "#f5f0e8" }}>
			
 
				+                  <div className="flex gap-1">
			
 
				+                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "0ms" }} />
			
 
				+                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "150ms" }} />
			
 
				+                    <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "300ms" }} />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            )}
			
 
				+            <div ref={messagesEndRef} />
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Input area */}
			
 
				+          <div className="p-3 border-t" style={{ borderColor: "#e7e0d5" }}>
			
 
				+            {showQuickReplies && !hasUserMessages ? (
			
 
				+              <div className="text-center py-1">
			
 
				+                <span className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                  Hit the buttons to respond
			
 
				+                </span>
			
 
				+              </div>
			
 
				+            ) : null}
			
 
				+            <div className="flex gap-2">
			
 
				+              <input
			
 
				+                type="text"
			
 
				+                value={inputText}
			
 
				+                onChange={(e) => setInputText(e.target.value)}
			
 
				+                onKeyDown={handleKeyDown}
			
 
				+                placeholder="Type your message..."
			
 
				+                className="flex-1 px-3 py-2 rounded-xl text-sm border"
			
 
				+                style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif", background: "#fff" }}
			
 
				+                disabled={isTyping || startSession.isPending}
			
 
				+              />
			
 
				+              <button
			
 
				+                onClick={() => handleSend()}
			
 
				+                disabled={!inputText.trim() || isTyping || !sessionId}
			
 
				+                className="w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-40"
			
 
				+                style={{ background: "#14532D", color: "#fff" }}
			
 
				+              >
			
 
				+                <Send className="w-4 h-4" />
			
 
				+              </button>
			
 
				+            </div>
			
 
				+            <div className="text-center mt-2">
			
 
				+              <span className="text-[10px]" style={{ color: "#d6d3d1" }}>Powered by Ellie · Homelegance AI</span>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      )}
			
 
				+
			
 
				+      {/* Floating button */}
			
 
				+      <button
			
 
				+        onClick={handleOpen}
			
 
				+        className="fixed bottom-4 right-4 z-50 w-14 h-14 rounded-full flex items-center justify-center shadow-lg transition-all hover:scale-105"
			
 
				+        style={{
			
 
				+          background: "#14532D",
			
 
				+          color: "#fff",
			
 
				+          boxShadow: "0 4px 20px rgba(20, 83, 45, 0.35)",
			
 
				+        }}
			
 
				+      >
			
 
				+        {isOpen ? <X className="w-5 h-5" /> : <Bot className="w-6 h-6" />}
			
 
				+      </button>
			
 
				+    </>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/CodeSnippet.tsx
+++ b/client/src/components/CodeSnippet.tsx
@@ -0,0 +1,74 @@
 
				+/**
			
 
				+ * CodeSnippet — Styled code block with copy functionality
			
 
				+ * Design: Warm Showroom — dark surface with warm tones
			
 
				+ */
			
 
				+import { useState } from "react";
			
 
				+import { Check, Copy } from "lucide-react";
			
 
				+
			
 
				+interface CodeSnippetProps {
			
 
				+  code: string;
			
 
				+  language: string;
			
 
				+  title?: string;
			
 
				+  filename?: string;
			
 
				+}
			
 
				+
			
 
				+export default function CodeSnippet({ code, language, title, filename }: CodeSnippetProps) {
			
 
				+  const [copied, setCopied] = useState(false);
			
 
				+
			
 
				+  const handleCopy = async () => {
			
 
				+    await navigator.clipboard.writeText(code);
			
 
				+    setCopied(true);
			
 
				+    setTimeout(() => setCopied(false), 2000);
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="rounded-xl overflow-hidden" style={{ border: "1px solid #e7e0d5" }}>
			
 
				+      {/* Header */}
			
 
				+      <div
			
 
				+        className="flex items-center justify-between px-4 py-2.5"
			
 
				+        style={{ background: "#292524" }}
			
 
				+      >
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div className="flex gap-1.5">
			
 
				+            <span className="w-3 h-3 rounded-full" style={{ background: "#C2410C" }} />
			
 
				+            <span className="w-3 h-3 rounded-full" style={{ background: "#EAB308" }} />
			
 
				+            <span className="w-3 h-3 rounded-full" style={{ background: "#14532D" }} />
			
 
				+          </div>
			
 
				+          {(title || filename) && (
			
 
				+            <span className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Fira Code', monospace" }}>
			
 
				+              {filename || title}
			
 
				+            </span>
			
 
				+          )}
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          <span
			
 
				+            className="text-[10px] uppercase tracking-wider px-2 py-0.5 rounded"
			
 
				+            style={{ background: "#3f3f3f", color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            {language}
			
 
				+          </span>
			
 
				+          <button
			
 
				+            onClick={handleCopy}
			
 
				+            className="p-1.5 rounded-md transition-colors hover:bg-white/10"
			
 
				+          >
			
 
				+            {copied ? (
			
 
				+              <Check className="w-3.5 h-3.5 text-green-400" />
			
 
				+            ) : (
			
 
				+              <Copy className="w-3.5 h-3.5" style={{ color: "#a8a29e" }} />
			
 
				+            )}
			
 
				+          </button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Code body */}
			
 
				+      <div
			
 
				+        className="px-5 py-4 overflow-x-auto"
			
 
				+        style={{ background: "#1c1917" }}
			
 
				+      >
			
 
				+        <pre className="text-sm leading-relaxed" style={{ fontFamily: "'Fira Code', monospace" }}>
			
 
				+          <code style={{ color: "#e7e5e4" }}>{code}</code>
			
 
				+        </pre>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/DashboardLayout.tsx
+++ b/client/src/components/DashboardLayout.tsx
@@ -0,0 +1,378 @@
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { Avatar, AvatarFallback } from "@/components/ui/avatar";
			
 
				+import {
			
 
				+  DropdownMenu,
			
 
				+  DropdownMenuContent,
			
 
				+  DropdownMenuItem,
			
 
				+  DropdownMenuSeparator,
			
 
				+  DropdownMenuTrigger,
			
 
				+} from "@/components/ui/dropdown-menu";
			
 
				+import {
			
 
				+  Sidebar,
			
 
				+  SidebarContent,
			
 
				+  SidebarFooter,
			
 
				+  SidebarHeader,
			
 
				+  SidebarInset,
			
 
				+  SidebarMenu,
			
 
				+  SidebarMenuButton,
			
 
				+  SidebarMenuItem,
			
 
				+  SidebarProvider,
			
 
				+  SidebarTrigger,
			
 
				+  useSidebar,
			
 
				+} from "@/components/ui/sidebar";
			
 
				+import { getLoginUrl } from "@/const";
			
 
				+import { useIsMobile } from "@/hooks/useMobile";
			
 
				+import {
			
 
				+  Headphones, LogOut, PanelLeft, MessageSquare,
			
 
				+  GitBranch, Users, Home, Shield,
			
 
				+  Play, BarChart3, Database, Plug,
			
 
				+} from "lucide-react";
			
 
				+import { CSSProperties, useEffect, useMemo, useRef, useState } from "react";
			
 
				+import { useLocation } from "wouter";
			
 
				+import { DashboardLayoutSkeleton } from "./DashboardLayoutSkeleton";
			
 
				+import { Button } from "./ui/button";
			
 
				+
			
 
				+/* ─── Role badge styling ─── */
			
 
				+const ROLE_STYLES: Record<string, { bg: string; text: string; label: string }> = {
			
 
				+  admin: { bg: "#14532D18", text: "#14532D", label: "Admin" },
			
 
				+  agent: { bg: "#0369a118", text: "#0369a1", label: "Agent" },
			
 
				+  user: { bg: "#78716C18", text: "#78716C", label: "User" },
			
 
				+};
			
 
				+
			
 
				+/* ─── Menu items definition ─── */
			
 
				+interface MenuItem {
			
 
				+  icon: React.ComponentType<{ className?: string }>;
			
 
				+  label: string;
			
 
				+  path: string;
			
 
				+  roles: string[]; // which roles can see this item
			
 
				+}
			
 
				+
			
 
				+const ALL_MENU_ITEMS: MenuItem[] = [
			
 
				+  { icon: Home, label: "Home", path: "/", roles: ["admin", "agent", "user"] },
			
 
				+  { icon: MessageSquare, label: "Conversations", path: "/dashboard", roles: ["admin", "agent"] },
			
 
				+  { icon: Play, label: "Playground", path: "/playground", roles: ["admin", "agent"] },
			
 
				+  { icon: GitBranch, label: "Workflow Designer", path: "/workflow-designer", roles: ["admin"] },
			
 
				+  { icon: BarChart3, label: "Analytics", path: "/analytics", roles: ["admin"] },
			
 
				+  { icon: Database, label: "Data Sources", path: "/data-sources", roles: ["admin"] },
			
 
				+  { icon: Users, label: "User Management", path: "/dashboard/users", roles: ["admin"] },
			
 
				+];
			
 
				+
			
 
				+const SIDEBAR_WIDTH_KEY = "sidebar-width";
			
 
				+const DEFAULT_WIDTH = 260;
			
 
				+const MIN_WIDTH = 200;
			
 
				+const MAX_WIDTH = 400;
			
 
				+
			
 
				+export default function DashboardLayout({
			
 
				+  children,
			
 
				+  requiredRole,
			
 
				+}: {
			
 
				+  children: React.ReactNode;
			
 
				+  requiredRole?: "agent" | "admin";
			
 
				+}) {
			
 
				+  const [sidebarWidth, setSidebarWidth] = useState(() => {
			
 
				+    const saved = localStorage.getItem(SIDEBAR_WIDTH_KEY);
			
 
				+    return saved ? parseInt(saved, 10) : DEFAULT_WIDTH;
			
 
				+  });
			
 
				+  const { loading, user } = useAuth();
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    localStorage.setItem(SIDEBAR_WIDTH_KEY, sidebarWidth.toString());
			
 
				+  }, [sidebarWidth]);
			
 
				+
			
 
				+  if (loading) {
			
 
				+    return <DashboardLayoutSkeleton />;
			
 
				+  }
			
 
				+
			
 
				+  if (!user) {
			
 
				+    // Redirect to login page with return URL
			
 
				+    const currentPath = window.location.pathname;
			
 
				+    window.location.href = `/login?returnTo=${encodeURIComponent(currentPath)}`;
			
 
				+    return <DashboardLayoutSkeleton />;
			
 
				+  }
			
 
				+
			
 
				+  // Check role-based access
			
 
				+  if (requiredRole) {
			
 
				+    const hasAccess =
			
 
				+      requiredRole === "admin"
			
 
				+        ? user.role === "admin"
			
 
				+        : user.role === "admin" || user.role === "agent";
			
 
				+
			
 
				+    if (!hasAccess) {
			
 
				+      return (
			
 
				+        <div
			
 
				+          className="flex items-center justify-center min-h-screen"
			
 
				+          style={{ background: "#FFFBEB" }}
			
 
				+        >
			
 
				+          <div className="flex flex-col items-center gap-6 p-8 max-w-md w-full rounded-2xl" style={{ background: "#fff", border: "1px solid #e7e0d5" }}>
			
 
				+            <div className="w-14 h-14 rounded-xl flex items-center justify-center" style={{ background: "#C2410C18", color: "#C2410C" }}>
			
 
				+              <Shield className="w-7 h-7" />
			
 
				+            </div>
			
 
				+            <div className="flex flex-col items-center gap-2">
			
 
				+              <h1
			
 
				+                className="text-xl font-bold text-center"
			
 
				+                style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+              >
			
 
				+                Access Restricted
			
 
				+              </h1>
			
 
				+              <p
			
 
				+                className="text-sm text-center max-w-sm"
			
 
				+                style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+              >
			
 
				+                {requiredRole === "admin"
			
 
				+                  ? "This section requires admin privileges. Contact your administrator to request access."
			
 
				+                  : "This section requires agent or admin privileges. Contact your administrator to request access."}
			
 
				+              </p>
			
 
				+              <div className="mt-2">
			
 
				+                <span
			
 
				+                  className="text-xs font-medium px-3 py-1 rounded-full"
			
 
				+                  style={{
			
 
				+                    background: ROLE_STYLES[user.role]?.bg || ROLE_STYLES.user.bg,
			
 
				+                    color: ROLE_STYLES[user.role]?.text || ROLE_STYLES.user.text,
			
 
				+                  }}
			
 
				+                >
			
 
				+                  Your role: {ROLE_STYLES[user.role]?.label || "User"}
			
 
				+                </span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <Button
			
 
				+              onClick={() => { window.location.href = "/"; }}
			
 
				+              variant="outline"
			
 
				+              className="w-full"
			
 
				+              style={{ borderColor: "#e7e0d5" }}
			
 
				+            >
			
 
				+              Back to Home
			
 
				+            </Button>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      );
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <SidebarProvider
			
 
				+      style={
			
 
				+        {
			
 
				+          "--sidebar-width": `${sidebarWidth}px`,
			
 
				+        } as CSSProperties
			
 
				+      }
			
 
				+    >
			
 
				+      <DashboardLayoutContent setSidebarWidth={setSidebarWidth}>
			
 
				+        {children}
			
 
				+      </DashboardLayoutContent>
			
 
				+    </SidebarProvider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+type DashboardLayoutContentProps = {
			
 
				+  children: React.ReactNode;
			
 
				+  setSidebarWidth: (width: number) => void;
			
 
				+};
			
 
				+
			
 
				+function DashboardLayoutContent({
			
 
				+  children,
			
 
				+  setSidebarWidth,
			
 
				+}: DashboardLayoutContentProps) {
			
 
				+  const { user, logout } = useAuth();
			
 
				+  const [location, setLocation] = useLocation();
			
 
				+  const { state, toggleSidebar } = useSidebar();
			
 
				+  const isCollapsed = state === "collapsed";
			
 
				+  const [isResizing, setIsResizing] = useState(false);
			
 
				+  const sidebarRef = useRef<HTMLDivElement>(null);
			
 
				+  const isMobile = useIsMobile();
			
 
				+
			
 
				+  // Filter menu items based on user role
			
 
				+  const menuItems = useMemo(() => {
			
 
				+    if (!user) return [];
			
 
				+    return ALL_MENU_ITEMS.filter(item => item.roles.includes(user.role));
			
 
				+  }, [user]);
			
 
				+
			
 
				+  const activeMenuItem = menuItems.find(item => item.path === location);
			
 
				+  const roleStyle = ROLE_STYLES[user?.role || "user"] || ROLE_STYLES.user;
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (isCollapsed) {
			
 
				+      setIsResizing(false);
			
 
				+    }
			
 
				+  }, [isCollapsed]);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    const handleMouseMove = (e: MouseEvent) => {
			
 
				+      if (!isResizing) return;
			
 
				+      const sidebarLeft =
			
 
				+        sidebarRef.current?.getBoundingClientRect().left ?? 0;
			
 
				+      const newWidth = e.clientX - sidebarLeft;
			
 
				+      if (newWidth >= MIN_WIDTH && newWidth <= MAX_WIDTH) {
			
 
				+        setSidebarWidth(newWidth);
			
 
				+      }
			
 
				+    };
			
 
				+
			
 
				+    const handleMouseUp = () => {
			
 
				+      setIsResizing(false);
			
 
				+    };
			
 
				+
			
 
				+    if (isResizing) {
			
 
				+      document.addEventListener("mousemove", handleMouseMove);
			
 
				+      document.addEventListener("mouseup", handleMouseUp);
			
 
				+      document.body.style.cursor = "col-resize";
			
 
				+      document.body.style.userSelect = "none";
			
 
				+    }
			
 
				+
			
 
				+    return () => {
			
 
				+      document.removeEventListener("mousemove", handleMouseMove);
			
 
				+      document.removeEventListener("mouseup", handleMouseUp);
			
 
				+      document.body.style.cursor = "";
			
 
				+      document.body.style.userSelect = "";
			
 
				+    };
			
 
				+  }, [isResizing, setSidebarWidth]);
			
 
				+
			
 
				+  return (
			
 
				+    <>
			
 
				+      <div className="relative" ref={sidebarRef}>
			
 
				+        <Sidebar
			
 
				+          collapsible="icon"
			
 
				+          className="border-r-0"
			
 
				+          disableTransition={isResizing}
			
 
				+        >
			
 
				+          <SidebarHeader className="h-16 justify-center">
			
 
				+            <div className="flex items-center gap-3 px-2 transition-all w-full">
			
 
				+              <button
			
 
				+                onClick={toggleSidebar}
			
 
				+                className="h-8 w-8 flex items-center justify-center rounded-lg transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-ring shrink-0"
			
 
				+                style={{ background: "#14532D", color: "#fff" }}
			
 
				+                aria-label="Toggle navigation"
			
 
				+              >
			
 
				+                <PanelLeft className="h-4 w-4" />
			
 
				+              </button>
			
 
				+              {!isCollapsed ? (
			
 
				+                <div className="flex items-center gap-2 min-w-0">
			
 
				+                  <span
			
 
				+                    className="font-bold tracking-tight truncate text-sm"
			
 
				+                    style={{ fontFamily: "'Playfair Display', serif", color: "#14532D" }}
			
 
				+                  >
			
 
				+                    Homelegance
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+              ) : null}
			
 
				+            </div>
			
 
				+          </SidebarHeader>
			
 
				+
			
 
				+          <SidebarContent className="gap-0">
			
 
				+            <SidebarMenu className="px-2 py-1">
			
 
				+              {menuItems.map(item => {
			
 
				+                const isActive = location === item.path;
			
 
				+                return (
			
 
				+                  <SidebarMenuItem key={item.path}>
			
 
				+                    <SidebarMenuButton
			
 
				+                      isActive={isActive}
			
 
				+                      onClick={() => setLocation(item.path)}
			
 
				+                      tooltip={item.label}
			
 
				+                      className="h-10 transition-all font-normal"
			
 
				+                    >
			
 
				+                      <item.icon
			
 
				+                        className={`h-4 w-4`}
			
 
				+                      />
			
 
				+                      <span
			
 
				+                        className="text-sm"
			
 
				+                        style={{
			
 
				+                          fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                          color: isActive ? "#14532D" : "#57534e",
			
 
				+                          fontWeight: isActive ? 600 : 400,
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        {item.label}
			
 
				+                      </span>
			
 
				+                    </SidebarMenuButton>
			
 
				+                  </SidebarMenuItem>
			
 
				+                );
			
 
				+              })}
			
 
				+            </SidebarMenu>
			
 
				+          </SidebarContent>
			
 
				+
			
 
				+          <SidebarFooter className="p-3">
			
 
				+            <DropdownMenu>
			
 
				+              <DropdownMenuTrigger asChild>
			
 
				+                <button className="flex items-center gap-3 rounded-lg px-1 py-1 hover:bg-accent/50 transition-colors w-full text-left group-data-[collapsible=icon]:justify-center focus:outline-none focus-visible:ring-2 focus-visible:ring-ring">
			
 
				+                  <Avatar className="h-9 w-9 border shrink-0">
			
 
				+                    <AvatarFallback
			
 
				+                      className="text-xs font-medium"
			
 
				+                      style={{ background: roleStyle.bg, color: roleStyle.text }}
			
 
				+                    >
			
 
				+                      {user?.name?.charAt(0).toUpperCase() || "?"}
			
 
				+                    </AvatarFallback>
			
 
				+                  </Avatar>
			
 
				+                  <div className="flex-1 min-w-0 group-data-[collapsible=icon]:hidden">
			
 
				+                    <div className="flex items-center gap-2">
			
 
				+                      <p className="text-sm font-medium truncate leading-none">
			
 
				+                        {user?.name || "-"}
			
 
				+                      </p>
			
 
				+                      <span
			
 
				+                        className="text-[10px] font-medium px-1.5 py-0.5 rounded-full shrink-0"
			
 
				+                        style={{ background: roleStyle.bg, color: roleStyle.text }}
			
 
				+                      >
			
 
				+                        {roleStyle.label}
			
 
				+                      </span>
			
 
				+                    </div>
			
 
				+                    <p className="text-xs text-muted-foreground truncate mt-1">
			
 
				+                      {user?.email || "-"}
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                </button>
			
 
				+              </DropdownMenuTrigger>
			
 
				+              <DropdownMenuContent align="end" className="w-52">
			
 
				+                <div className="px-2 py-1.5">
			
 
				+                  <p className="text-xs text-muted-foreground">Signed in as</p>
			
 
				+                  <p className="text-sm font-medium truncate">{user?.name || user?.email}</p>
			
 
				+                  <span
			
 
				+                    className="text-[10px] font-medium px-1.5 py-0.5 rounded-full inline-block mt-1"
			
 
				+                    style={{ background: roleStyle.bg, color: roleStyle.text }}
			
 
				+                  >
			
 
				+                    {roleStyle.label}
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+                <DropdownMenuSeparator />
			
 
				+                <DropdownMenuItem
			
 
				+                  onClick={logout}
			
 
				+                  className="cursor-pointer text-destructive focus:text-destructive"
			
 
				+                >
			
 
				+                  <LogOut className="mr-2 h-4 w-4" />
			
 
				+                  <span>Sign out</span>
			
 
				+                </DropdownMenuItem>
			
 
				+              </DropdownMenuContent>
			
 
				+            </DropdownMenu>
			
 
				+          </SidebarFooter>
			
 
				+        </Sidebar>
			
 
				+        <div
			
 
				+          className={`absolute top-0 right-0 w-1 h-full cursor-col-resize hover:bg-primary/20 transition-colors ${isCollapsed ? "hidden" : ""}`}
			
 
				+          onMouseDown={() => {
			
 
				+            if (isCollapsed) return;
			
 
				+            setIsResizing(true);
			
 
				+          }}
			
 
				+          style={{ zIndex: 50 }}
			
 
				+        />
			
 
				+      </div>
			
 
				+
			
 
				+      <SidebarInset>
			
 
				+        {isMobile && (
			
 
				+          <div className="flex border-b h-14 items-center justify-between bg-background/95 px-2 backdrop-blur supports-[backdrop-filter]:backdrop-blur sticky top-0 z-40">
			
 
				+            <div className="flex items-center gap-2">
			
 
				+              <SidebarTrigger className="h-9 w-9 rounded-lg bg-background" />
			
 
				+              <div className="flex items-center gap-3">
			
 
				+                <div className="flex flex-col gap-1">
			
 
				+                  <span
			
 
				+                    className="tracking-tight text-foreground text-sm"
			
 
				+                    style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                  >
			
 
				+                    {activeMenuItem?.label ?? "Dashboard"}
			
 
				+                  </span>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        )}
			
 
				+        <main className="flex-1 p-4" style={{ background: "#FFFBEB" }}>
			
 
				+          {children}
			
 
				+        </main>
			
 
				+      </SidebarInset>
			
 
				+    </>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/DashboardLayoutSkeleton.tsx
+++ b/client/src/components/DashboardLayoutSkeleton.tsx
@@ -0,0 +1,46 @@
 
				+import { Skeleton } from './ui/skeleton';
			
 
				+
			
 
				+export function DashboardLayoutSkeleton() {
			
 
				+  return (
			
 
				+    <div className="flex min-h-screen bg-background">
			
 
				+      {/* Sidebar skeleton */}
			
 
				+      <div className="w-[280px] border-r border-border bg-background p-4 space-y-6">
			
 
				+        {/* Logo area */}
			
 
				+        <div className="flex items-center gap-3 px-2">
			
 
				+          <Skeleton className="h-8 w-8 rounded-md" />
			
 
				+          <Skeleton className="h-4 w-24" />
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Menu items */}
			
 
				+        <div className="space-y-2 px-2">
			
 
				+          <Skeleton className="h-10 w-full rounded-lg" />
			
 
				+          <Skeleton className="h-10 w-full rounded-lg" />
			
 
				+          <Skeleton className="h-10 w-full rounded-lg" />
			
 
				+        </div>
			
 
				+
			
 
				+        {/* User profile area at bottom */}
			
 
				+        <div className="absolute bottom-4 left-4 right-4">
			
 
				+          <div className="flex items-center gap-3 px-1">
			
 
				+            <Skeleton className="h-9 w-9 rounded-full" />
			
 
				+            <div className="flex-1 space-y-2">
			
 
				+              <Skeleton className="h-3 w-20" />
			
 
				+              <Skeleton className="h-2 w-32" />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Main content skeleton */}
			
 
				+      <div className="flex-1 p-4 space-y-4">
			
 
				+        {/* Content blocks */}
			
 
				+        <Skeleton className="h-12 w-48 rounded-lg" />
			
 
				+        <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
			
 
				+          <Skeleton className="h-32 rounded-xl" />
			
 
				+          <Skeleton className="h-32 rounded-xl" />
			
 
				+          <Skeleton className="h-32 rounded-xl" />
			
 
				+        </div>
			
 
				+        <Skeleton className="h-64 rounded-xl" />
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/ErrorBoundary.tsx
+++ b/client/src/components/ErrorBoundary.tsx
@@ -0,0 +1,62 @@
 
				+import { cn } from "@/lib/utils";
			
 
				+import { AlertTriangle, RotateCcw } from "lucide-react";
			
 
				+import { Component, ReactNode } from "react";
			
 
				+
			
 
				+interface Props {
			
 
				+  children: ReactNode;
			
 
				+}
			
 
				+
			
 
				+interface State {
			
 
				+  hasError: boolean;
			
 
				+  error: Error | null;
			
 
				+}
			
 
				+
			
 
				+class ErrorBoundary extends Component<Props, State> {
			
 
				+  constructor(props: Props) {
			
 
				+    super(props);
			
 
				+    this.state = { hasError: false, error: null };
			
 
				+  }
			
 
				+
			
 
				+  static getDerivedStateFromError(error: Error): State {
			
 
				+    return { hasError: true, error };
			
 
				+  }
			
 
				+
			
 
				+  render() {
			
 
				+    if (this.state.hasError) {
			
 
				+      return (
			
 
				+        <div className="flex items-center justify-center min-h-screen p-8 bg-background">
			
 
				+          <div className="flex flex-col items-center w-full max-w-2xl p-8">
			
 
				+            <AlertTriangle
			
 
				+              size={48}
			
 
				+              className="text-destructive mb-6 flex-shrink-0"
			
 
				+            />
			
 
				+
			
 
				+            <h2 className="text-xl mb-4">An unexpected error occurred.</h2>
			
 
				+
			
 
				+            <div className="p-4 w-full rounded bg-muted overflow-auto mb-6">
			
 
				+              <pre className="text-sm text-muted-foreground whitespace-break-spaces">
			
 
				+                {this.state.error?.stack}
			
 
				+              </pre>
			
 
				+            </div>
			
 
				+
			
 
				+            <button
			
 
				+              onClick={() => window.location.reload()}
			
 
				+              className={cn(
			
 
				+                "flex items-center gap-2 px-4 py-2 rounded-lg",
			
 
				+                "bg-primary text-primary-foreground",
			
 
				+                "hover:opacity-90 cursor-pointer"
			
 
				+              )}
			
 
				+            >
			
 
				+              <RotateCcw size={16} />
			
 
				+              Reload Page
			
 
				+            </button>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      );
			
 
				+    }
			
 
				+
			
 
				+    return this.props.children;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+export default ErrorBoundary;
			
--- a/client/src/components/ManusDialog.tsx
+++ b/client/src/components/ManusDialog.tsx
@@ -0,0 +1,89 @@
 
				+import { useEffect, useState } from "react";
			
 
				+
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import {
			
 
				+  Dialog,
			
 
				+  DialogContent,
			
 
				+  DialogDescription,
			
 
				+  DialogFooter,
			
 
				+  DialogTitle,
			
 
				+} from "@/components/ui/dialog";
			
 
				+
			
 
				+interface ManusDialogProps {
			
 
				+  title?: string;
			
 
				+  logo?: string;
			
 
				+  open?: boolean;
			
 
				+  onLogin: () => void;
			
 
				+  onOpenChange?: (open: boolean) => void;
			
 
				+  onClose?: () => void;
			
 
				+}
			
 
				+
			
 
				+export function ManusDialog({
			
 
				+  title,
			
 
				+  logo,
			
 
				+  open = false,
			
 
				+  onLogin,
			
 
				+  onOpenChange,
			
 
				+  onClose,
			
 
				+}: ManusDialogProps) {
			
 
				+  const [internalOpen, setInternalOpen] = useState(open);
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    if (!onOpenChange) {
			
 
				+      setInternalOpen(open);
			
 
				+    }
			
 
				+  }, [open, onOpenChange]);
			
 
				+
			
 
				+  const handleOpenChange = (nextOpen: boolean) => {
			
 
				+    if (onOpenChange) {
			
 
				+      onOpenChange(nextOpen);
			
 
				+    } else {
			
 
				+      setInternalOpen(nextOpen);
			
 
				+    }
			
 
				+
			
 
				+    if (!nextOpen) {
			
 
				+      onClose?.();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <Dialog
			
 
				+      open={onOpenChange ? open : internalOpen}
			
 
				+      onOpenChange={handleOpenChange}
			
 
				+    >
			
 
				+      <DialogContent className="py-5 bg-[#f8f8f7] rounded-[20px] w-[400px] shadow-[0px_4px_11px_0px_rgba(0,0,0,0.08)] border border-[rgba(0,0,0,0.08)] backdrop-blur-2xl p-0 gap-0 text-center">
			
 
				+        <div className="flex flex-col items-center gap-2 p-5 pt-12">
			
 
				+          {logo ? (
			
 
				+            <div className="w-16 h-16 bg-white rounded-xl border border-[rgba(0,0,0,0.08)] flex items-center justify-center">
			
 
				+              <img
			
 
				+                src={logo}
			
 
				+                alt="Dialog graphic"
			
 
				+                className="w-10 h-10 rounded-md"
			
 
				+              />
			
 
				+            </div>
			
 
				+          ) : null}
			
 
				+
			
 
				+          {/* Title and subtitle */}
			
 
				+          {title ? (
			
 
				+            <DialogTitle className="text-xl font-semibold text-[#34322d] leading-[26px] tracking-[-0.44px]">
			
 
				+              {title}
			
 
				+            </DialogTitle>
			
 
				+          ) : null}
			
 
				+          <DialogDescription className="text-sm text-[#858481] leading-5 tracking-[-0.154px]">
			
 
				+            Please login with Manus to continue
			
 
				+          </DialogDescription>
			
 
				+        </div>
			
 
				+
			
 
				+        <DialogFooter className="px-5 py-5">
			
 
				+          {/* Login button */}
			
 
				+          <Button
			
 
				+            onClick={onLogin}
			
 
				+            className="w-full h-10 bg-[#1a1a19] hover:bg-[#1a1a19]/90 text-white rounded-[10px] text-sm font-medium leading-5 tracking-[-0.154px]"
			
 
				+          >
			
 
				+            Login with Manus
			
 
				+          </Button>
			
 
				+        </DialogFooter>
			
 
				+      </DialogContent>
			
 
				+    </Dialog>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/Map.tsx
+++ b/client/src/components/Map.tsx
@@ -0,0 +1,155 @@
 
				+/**
			
 
				+ * GOOGLE MAPS FRONTEND INTEGRATION - ESSENTIAL GUIDE
			
 
				+ *
			
 
				+ * USAGE FROM PARENT COMPONENT:
			
 
				+ * ======
			
 
				+ *
			
 
				+ * const mapRef = useRef<google.maps.Map | null>(null);
			
 
				+ *
			
 
				+ * <MapView
			
 
				+ *   initialCenter={{ lat: 40.7128, lng: -74.0060 }}
			
 
				+ *   initialZoom={15}
			
 
				+ *   onMapReady={(map) => {
			
 
				+ *     mapRef.current = map; // Store to control map from parent anytime, google map itself is in charge of the re-rendering, not react state.
			
 
				+ * </MapView>
			
 
				+ *
			
 
				+ * ======
			
 
				+ * Available Libraries and Core Features:
			
 
				+ * -------------------------------
			
 
				+ * 📍 MARKER (from `marker` library)
			
 
				+ * - Attaches to map using { map, position }
			
 
				+ * new google.maps.marker.AdvancedMarkerElement({
			
 
				+ *   map,
			
 
				+ *   position: { lat: 37.7749, lng: -122.4194 },
			
 
				+ *   title: "San Francisco",
			
 
				+ * });
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * 🏢 PLACES (from `places` library)
			
 
				+ * - Does not attach directly to map; use data with your map manually.
			
 
				+ * const place = new google.maps.places.Place({ id: PLACE_ID });
			
 
				+ * await place.fetchFields({ fields: ["displayName", "location"] });
			
 
				+ * map.setCenter(place.location);
			
 
				+ * new google.maps.marker.AdvancedMarkerElement({ map, position: place.location });
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * 🧭 GEOCODER (from `geocoding` library)
			
 
				+ * - Standalone service; manually apply results to map.
			
 
				+ * const geocoder = new google.maps.Geocoder();
			
 
				+ * geocoder.geocode({ address: "New York" }, (results, status) => {
			
 
				+ *   if (status === "OK" && results[0]) {
			
 
				+ *     map.setCenter(results[0].geometry.location);
			
 
				+ *     new google.maps.marker.AdvancedMarkerElement({
			
 
				+ *       map,
			
 
				+ *       position: results[0].geometry.location,
			
 
				+ *     });
			
 
				+ *   }
			
 
				+ * });
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * 📐 GEOMETRY (from `geometry` library)
			
 
				+ * - Pure utility functions; not attached to map.
			
 
				+ * const dist = google.maps.geometry.spherical.computeDistanceBetween(p1, p2);
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * 🛣️ ROUTES (from `routes` library)
			
 
				+ * - Combines DirectionsService (standalone) + DirectionsRenderer (map-attached)
			
 
				+ * const directionsService = new google.maps.DirectionsService();
			
 
				+ * const directionsRenderer = new google.maps.DirectionsRenderer({ map });
			
 
				+ * directionsService.route(
			
 
				+ *   { origin, destination, travelMode: "DRIVING" },
			
 
				+ *   (res, status) => status === "OK" && directionsRenderer.setDirections(res)
			
 
				+ * );
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * 🌦️ MAP LAYERS (attach directly to map)
			
 
				+ * - new google.maps.TrafficLayer().setMap(map);
			
 
				+ * - new google.maps.TransitLayer().setMap(map);
			
 
				+ * - new google.maps.BicyclingLayer().setMap(map);
			
 
				+ *
			
 
				+ * -------------------------------
			
 
				+ * ✅ SUMMARY
			
 
				+ * - “map-attached” → AdvancedMarkerElement, DirectionsRenderer, Layers.
			
 
				+ * - “standalone” → Geocoder, DirectionsService, DistanceMatrixService, ElevationService.
			
 
				+ * - “data-only” → Place, Geometry utilities.
			
 
				+ */
			
 
				+
			
 
				+/// <reference types="@types/google.maps" />
			
 
				+
			
 
				+import { useEffect, useRef } from "react";
			
 
				+import { usePersistFn } from "@/hooks/usePersistFn";
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+declare global {
			
 
				+  interface Window {
			
 
				+    google?: typeof google;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+const API_KEY = import.meta.env.VITE_FRONTEND_FORGE_API_KEY;
			
 
				+const FORGE_BASE_URL =
			
 
				+  import.meta.env.VITE_FRONTEND_FORGE_API_URL ||
			
 
				+  "https://forge.butterfly-effect.dev";
			
 
				+const MAPS_PROXY_URL = `${FORGE_BASE_URL}/v1/maps/proxy`;
			
 
				+
			
 
				+function loadMapScript() {
			
 
				+  return new Promise(resolve => {
			
 
				+    const script = document.createElement("script");
			
 
				+    script.src = `${MAPS_PROXY_URL}/maps/api/js?key=${API_KEY}&v=weekly&libraries=marker,places,geocoding,geometry`;
			
 
				+    script.async = true;
			
 
				+    script.crossOrigin = "anonymous";
			
 
				+    script.onload = () => {
			
 
				+      resolve(null);
			
 
				+      script.remove(); // Clean up immediately
			
 
				+    };
			
 
				+    script.onerror = () => {
			
 
				+      console.error("Failed to load Google Maps script");
			
 
				+    };
			
 
				+    document.head.appendChild(script);
			
 
				+  });
			
 
				+}
			
 
				+
			
 
				+interface MapViewProps {
			
 
				+  className?: string;
			
 
				+  initialCenter?: google.maps.LatLngLiteral;
			
 
				+  initialZoom?: number;
			
 
				+  onMapReady?: (map: google.maps.Map) => void;
			
 
				+}
			
 
				+
			
 
				+export function MapView({
			
 
				+  className,
			
 
				+  initialCenter = { lat: 37.7749, lng: -122.4194 },
			
 
				+  initialZoom = 12,
			
 
				+  onMapReady,
			
 
				+}: MapViewProps) {
			
 
				+  const mapContainer = useRef<HTMLDivElement>(null);
			
 
				+  const map = useRef<google.maps.Map | null>(null);
			
 
				+
			
 
				+  const init = usePersistFn(async () => {
			
 
				+    await loadMapScript();
			
 
				+    if (!mapContainer.current) {
			
 
				+      console.error("Map container not found");
			
 
				+      return;
			
 
				+    }
			
 
				+    map.current = new window.google.maps.Map(mapContainer.current, {
			
 
				+      zoom: initialZoom,
			
 
				+      center: initialCenter,
			
 
				+      mapTypeControl: true,
			
 
				+      fullscreenControl: true,
			
 
				+      zoomControl: true,
			
 
				+      streetViewControl: true,
			
 
				+      mapId: "DEMO_MAP_ID",
			
 
				+    });
			
 
				+    if (onMapReady) {
			
 
				+      onMapReady(map.current);
			
 
				+    }
			
 
				+  });
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    init();
			
 
				+  }, [init]);
			
 
				+
			
 
				+  return (
			
 
				+    <div ref={mapContainer} className={cn("w-full h-[500px]", className)} />
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/WorkflowDiagram.tsx
+++ b/client/src/components/WorkflowDiagram.tsx
@@ -0,0 +1,254 @@
 
				+/**
			
 
				+ * WorkflowDiagram — Interactive chatbot conversation flow diagram
			
 
				+ * Design: Warm Showroom — forest green nodes, terracotta accents, cream background
			
 
				+ */
			
 
				+import { useState } from "react";
			
 
				+import { motion } from "framer-motion";
			
 
				+import {
			
 
				+  MessageCircle,
			
 
				+  ShoppingBag,
			
 
				+  MapPin,
			
 
				+  Package,
			
 
				+  Shield,
			
 
				+  Users,
			
 
				+  Bot,
			
 
				+  ArrowRight,
			
 
				+  Sparkles,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+interface FlowNode {
			
 
				+  id: string;
			
 
				+  label: string;
			
 
				+  description: string;
			
 
				+  icon: React.ReactNode;
			
 
				+  color: string;
			
 
				+  children?: string[];
			
 
				+}
			
 
				+
			
 
				+const FLOW_NODES: FlowNode[] = [
			
 
				+  {
			
 
				+    id: "entry",
			
 
				+    label: "User Visits Website",
			
 
				+    description: "A visitor lands on homelegance.com. The chatbot widget appears in the bottom-right corner after a short delay, with a gentle greeting animation.",
			
 
				+    icon: <MessageCircle className="w-5 h-5" />,
			
 
				+    color: "#14532D",
			
 
				+    children: ["greeting"],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "greeting",
			
 
				+    label: "AI Greeting & Intent Detection",
			
 
				+    description: "The chatbot sends a warm welcome message and presents quick-action buttons. Natural Language Processing (NLP) analyzes the user's first message to detect intent.",
			
 
				+    icon: <Bot className="w-5 h-5" />,
			
 
				+    color: "#14532D",
			
 
				+    children: ["products", "dealer", "order", "warranty", "sales"],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "products",
			
 
				+    label: "Product Discovery",
			
 
				+    description: "Guides users through furniture categories (Bedroom, Dining, Seating, etc.), shows best sellers, and helps filter by collection, style, or price range. Can display product images and specs inline.",
			
 
				+    icon: <ShoppingBag className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "dealer",
			
 
				+    label: "Dealer Locator",
			
 
				+    description: "Asks for zip code or city, then queries the dealer database to find authorized Homelegance retailers nearby. Shows results with distance, contact info, and directions link.",
			
 
				+    icon: <MapPin className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "order",
			
 
				+    label: "Order Status Tracking",
			
 
				+    description: "Authenticates the dealer/retailer via order number or account email, then retrieves real-time order status from the fulfillment system. Shows shipping tracking when available.",
			
 
				+    icon: <Package className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "warranty",
			
 
				+    label: "Parts & Warranty",
			
 
				+    description: "Walks users through the warranty claim process: collects product info, purchase date, issue description, and photos. Creates a support ticket automatically.",
			
 
				+    icon: <Shield className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+  },
			
 
				+  {
			
 
				+    id: "sales",
			
 
				+    label: "Live Agent Handoff",
			
 
				+    description: "When the chatbot detects complex queries or the user requests human help, it seamlessly transfers the conversation to a live sales representative with full context.",
			
 
				+    icon: <Users className="w-5 h-5" />,
			
 
				+    color: "#C2410C",
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+export default function WorkflowDiagram() {
			
 
				+  const [activeNode, setActiveNode] = useState<string>("entry");
			
 
				+  const active = FLOW_NODES.find((n) => n.id === activeNode);
			
 
				+
			
 
				+  return (
			
 
				+    <div className="w-full">
			
 
				+      {/* Flow visualization */}
			
 
				+      <div className="relative">
			
 
				+        {/* Entry node */}
			
 
				+        <div className="flex justify-center mb-6">
			
 
				+          <FlowNodeCard
			
 
				+            node={FLOW_NODES[0]}
			
 
				+            isActive={activeNode === "entry"}
			
 
				+            onClick={() => setActiveNode("entry")}
			
 
				+          />
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Connector line down */}
			
 
				+        <div className="flex justify-center mb-2">
			
 
				+          <div className="w-0.5 h-8" style={{ background: "#14532D" }} />
			
 
				+        </div>
			
 
				+
			
 
				+        {/* AI Processing node */}
			
 
				+        <div className="flex justify-center mb-6">
			
 
				+          <FlowNodeCard
			
 
				+            node={FLOW_NODES[1]}
			
 
				+            isActive={activeNode === "greeting"}
			
 
				+            onClick={() => setActiveNode("greeting")}
			
 
				+          />
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Branching connector */}
			
 
				+        <div className="flex justify-center mb-2">
			
 
				+          <div className="relative w-full max-w-3xl h-8">
			
 
				+            <div className="absolute left-1/2 top-0 w-0.5 h-4 -translate-x-1/2" style={{ background: "#14532D" }} />
			
 
				+            <div className="absolute top-4 left-[10%] right-[10%] h-0.5" style={{ background: "#14532D" }} />
			
 
				+            {[10, 28, 50, 72, 90].map((pos) => (
			
 
				+              <div
			
 
				+                key={pos}
			
 
				+                className="absolute top-4 w-0.5 h-4"
			
 
				+                style={{ left: `${pos}%`, transform: "translateX(-50%)", background: "#14532D" }}
			
 
				+              />
			
 
				+            ))}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Branch nodes */}
			
 
				+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-3">
			
 
				+          {FLOW_NODES.slice(2).map((node) => (
			
 
				+            <FlowNodeCard
			
 
				+              key={node.id}
			
 
				+              node={node}
			
 
				+              isActive={activeNode === node.id}
			
 
				+              onClick={() => setActiveNode(node.id)}
			
 
				+              compact
			
 
				+            />
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Detail panel */}
			
 
				+      <motion.div
			
 
				+        key={activeNode}
			
 
				+        initial={{ opacity: 0, y: 10 }}
			
 
				+        animate={{ opacity: 1, y: 0 }}
			
 
				+        transition={{ duration: 0.3 }}
			
 
				+        className="mt-8 p-6 rounded-xl"
			
 
				+        style={{
			
 
				+          background: "#fff",
			
 
				+          boxShadow: "0 4px 20px rgba(120, 113, 108, 0.1)",
			
 
				+          border: "1px solid #e7e0d5",
			
 
				+        }}
			
 
				+      >
			
 
				+        <div className="flex items-start gap-4">
			
 
				+          <div
			
 
				+            className="w-12 h-12 rounded-xl flex items-center justify-center shrink-0"
			
 
				+            style={{ background: active?.color + "15", color: active?.color }}
			
 
				+          >
			
 
				+            {active?.icon}
			
 
				+          </div>
			
 
				+          <div>
			
 
				+            <h4
			
 
				+              className="text-lg font-semibold mb-2"
			
 
				+              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+            >
			
 
				+              {active?.label}
			
 
				+            </h4>
			
 
				+            <p className="text-sm leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              {active?.description}
			
 
				+            </p>
			
 
				+            {active?.children && (
			
 
				+              <div className="flex flex-wrap gap-2 mt-3">
			
 
				+                <span className="text-xs font-medium" style={{ color: "#a8a29e" }}>
			
 
				+                  Leads to:
			
 
				+                </span>
			
 
				+                {active.children.map((childId) => {
			
 
				+                  const child = FLOW_NODES.find((n) => n.id === childId);
			
 
				+                  return (
			
 
				+                    <button
			
 
				+                      key={childId}
			
 
				+                      onClick={() => setActiveNode(childId)}
			
 
				+                      className="flex items-center gap-1 px-2.5 py-1 rounded-full text-xs font-medium transition-colors"
			
 
				+                      style={{
			
 
				+                        background: "rgba(194, 65, 12, 0.08)",
			
 
				+                        color: "#C2410C",
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      {child?.label}
			
 
				+                      <ArrowRight className="w-3 h-3" />
			
 
				+                    </button>
			
 
				+                  );
			
 
				+                })}
			
 
				+              </div>
			
 
				+            )}
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </motion.div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FlowNodeCard({
			
 
				+  node,
			
 
				+  isActive,
			
 
				+  onClick,
			
 
				+  compact,
			
 
				+}: {
			
 
				+  node: FlowNode;
			
 
				+  isActive: boolean;
			
 
				+  onClick: () => void;
			
 
				+  compact?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <motion.button
			
 
				+      whileHover={{ scale: 1.03, y: -2 }}
			
 
				+      whileTap={{ scale: 0.98 }}
			
 
				+      onClick={onClick}
			
 
				+      className={`relative rounded-xl transition-all ${compact ? "p-3 w-full" : "px-6 py-4"}`}
			
 
				+      style={{
			
 
				+        background: isActive ? node.color : "#fff",
			
 
				+        color: isActive ? "#fff" : node.color,
			
 
				+        boxShadow: isActive
			
 
				+          ? `0 8px 24px ${node.color}30`
			
 
				+          : "0 2px 8px rgba(120, 113, 108, 0.1)",
			
 
				+        border: `1.5px solid ${isActive ? node.color : "#e7e0d5"}`,
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className={`flex items-center ${compact ? "flex-col gap-2" : "gap-3"}`}>
			
 
				+        <div
			
 
				+          className={`${compact ? "w-9 h-9" : "w-10 h-10"} rounded-lg flex items-center justify-center`}
			
 
				+          style={{
			
 
				+            background: isActive ? "rgba(255,255,255,0.2)" : node.color + "12",
			
 
				+          }}
			
 
				+        >
			
 
				+          {node.icon}
			
 
				+        </div>
			
 
				+        <span
			
 
				+          className={`font-semibold ${compact ? "text-xs text-center leading-tight" : "text-sm"}`}
			
 
				+          style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          {node.label}
			
 
				+        </span>
			
 
				+      </div>
			
 
				+      {isActive && (
			
 
				+        <motion.div
			
 
				+          layoutId="activeIndicator"
			
 
				+          className="absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rounded-full"
			
 
				+          style={{ background: "#C2410C" }}
			
 
				+        />
			
 
				+      )}
			
 
				+    </motion.button>
			
 
				+  );
			
 
				+}
			
--- a/client/src/components/ui/accordion.tsx
+++ b/client/src/components/ui/accordion.tsx
@@ -0,0 +1,64 @@
 
				+import * as React from "react";
			
 
				+import * as AccordionPrimitive from "@radix-ui/react-accordion";
			
 
				+import { ChevronDownIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Accordion({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
			
 
				+  return <AccordionPrimitive.Root data-slot="accordion" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function AccordionItem({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
			
 
				+  return (
			
 
				+    <AccordionPrimitive.Item
			
 
				+      data-slot="accordion-item"
			
 
				+      className={cn("border-b last:border-b-0", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AccordionTrigger({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <AccordionPrimitive.Header className="flex">
			
 
				+      <AccordionPrimitive.Trigger
			
 
				+        data-slot="accordion-trigger"
			
 
				+        className={cn(
			
 
				+          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
			
 
				+      </AccordionPrimitive.Trigger>
			
 
				+    </AccordionPrimitive.Header>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AccordionContent({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <AccordionPrimitive.Content
			
 
				+      data-slot="accordion-content"
			
 
				+      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <div className={cn("pt-0 pb-4", className)}>{children}</div>
			
 
				+    </AccordionPrimitive.Content>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent };
			
--- a/client/src/components/ui/alert-dialog.tsx
+++ b/client/src/components/ui/alert-dialog.tsx
@@ -0,0 +1,155 @@
 
				+import * as React from "react";
			
 
				+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { buttonVariants } from "@/components/ui/button";
			
 
				+
			
 
				+function AlertDialog({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
			
 
				+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function AlertDialogTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogOverlay({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Overlay
			
 
				+      data-slot="alert-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 AlertDialogContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <AlertDialogPortal>
			
 
				+      <AlertDialogOverlay />
			
 
				+      <AlertDialogPrimitive.Content
			
 
				+        data-slot="alert-dialog-content"
			
 
				+        className={cn(
			
 
				+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </AlertDialogPortal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogHeader({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="alert-dialog-header"
			
 
				+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogFooter({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="alert-dialog-footer"
			
 
				+      className={cn(
			
 
				+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogTitle({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Title
			
 
				+      data-slot="alert-dialog-title"
			
 
				+      className={cn("text-lg font-semibold", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogDescription({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Description
			
 
				+      data-slot="alert-dialog-description"
			
 
				+      className={cn("text-muted-foreground text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogAction({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Action
			
 
				+      className={cn(buttonVariants(), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDialogCancel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
			
 
				+  return (
			
 
				+    <AlertDialogPrimitive.Cancel
			
 
				+      className={cn(buttonVariants({ variant: "outline" }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  AlertDialog,
			
 
				+  AlertDialogPortal,
			
 
				+  AlertDialogOverlay,
			
 
				+  AlertDialogTrigger,
			
 
				+  AlertDialogContent,
			
 
				+  AlertDialogHeader,
			
 
				+  AlertDialogFooter,
			
 
				+  AlertDialogTitle,
			
 
				+  AlertDialogDescription,
			
 
				+  AlertDialogAction,
			
 
				+  AlertDialogCancel,
			
 
				+};
			
--- a/client/src/components/ui/alert.tsx
+++ b/client/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
 
				+import * as React from "react";
			
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+const alertVariants = cva(
			
 
				+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-card text-card-foreground",
			
 
				+        destructive:
			
 
				+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
			
 
				+      },
			
 
				+    },
			
 
				+    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(
			
 
				+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AlertDescription({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="alert-description"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Alert, AlertTitle, AlertDescription };
			
--- a/client/src/components/ui/aspect-ratio.tsx
+++ b/client/src/components/ui/aspect-ratio.tsx
@@ -0,0 +1,9 @@
 
				+import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
			
 
				+
			
 
				+function AspectRatio({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
			
 
				+  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />;
			
 
				+}
			
 
				+
			
 
				+export { AspectRatio };
			
--- a/client/src/components/ui/avatar.tsx
+++ b/client/src/components/ui/avatar.tsx
@@ -0,0 +1,51 @@
 
				+import * as React from "react";
			
 
				+import * as AvatarPrimitive from "@radix-ui/react-avatar";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Avatar({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <AvatarPrimitive.Root
			
 
				+      data-slot="avatar"
			
 
				+      className={cn(
			
 
				+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AvatarImage({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
			
 
				+  return (
			
 
				+    <AvatarPrimitive.Image
			
 
				+      data-slot="avatar-image"
			
 
				+      className={cn("aspect-square size-full", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function AvatarFallback({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
			
 
				+  return (
			
 
				+    <AvatarPrimitive.Fallback
			
 
				+      data-slot="avatar-fallback"
			
 
				+      className={cn(
			
 
				+        "bg-muted flex size-full items-center justify-center rounded-full",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Avatar, AvatarImage, AvatarFallback };
			
--- a/client/src/components/ui/badge.tsx
+++ b/client/src/components/ui/badge.tsx
@@ -0,0 +1,46 @@
 
				+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(
			
 
				+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default:
			
 
				+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
			
 
				+        secondary:
			
 
				+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
			
 
				+        destructive:
			
 
				+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
			
 
				+        outline:
			
 
				+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
			
 
				+      },
			
 
				+    },
			
 
				+    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 };
			
--- a/client/src/components/ui/breadcrumb.tsx
+++ b/client/src/components/ui/breadcrumb.tsx
@@ -0,0 +1,109 @@
 
				+import * as React from "react";
			
 
				+import { Slot } from "@radix-ui/react-slot";
			
 
				+import { ChevronRight, MoreHorizontal } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
			
 
				+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
			
 
				+  return (
			
 
				+    <ol
			
 
				+      data-slot="breadcrumb-list"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot="breadcrumb-item"
			
 
				+      className={cn("inline-flex items-center gap-1.5", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbLink({
			
 
				+  asChild,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"a"> & {
			
 
				+  asChild?: boolean;
			
 
				+}) {
			
 
				+  const Comp = asChild ? Slot : "a";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="breadcrumb-link"
			
 
				+      className={cn("hover:text-foreground transition-colors", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="breadcrumb-page"
			
 
				+      role="link"
			
 
				+      aria-disabled="true"
			
 
				+      aria-current="page"
			
 
				+      className={cn("text-foreground font-normal", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbSeparator({
			
 
				+  children,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"li">) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot="breadcrumb-separator"
			
 
				+      role="presentation"
			
 
				+      aria-hidden="true"
			
 
				+      className={cn("[&>svg]:size-3.5", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children ?? <ChevronRight />}
			
 
				+    </li>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function BreadcrumbEllipsis({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="breadcrumb-ellipsis"
			
 
				+      role="presentation"
			
 
				+      aria-hidden="true"
			
 
				+      className={cn("flex size-9 items-center justify-center", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <MoreHorizontal className="size-4" />
			
 
				+      <span className="sr-only">More</span>
			
 
				+    </span>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Breadcrumb,
			
 
				+  BreadcrumbList,
			
 
				+  BreadcrumbItem,
			
 
				+  BreadcrumbLink,
			
 
				+  BreadcrumbPage,
			
 
				+  BreadcrumbSeparator,
			
 
				+  BreadcrumbEllipsis,
			
 
				+};
			
--- a/client/src/components/ui/button-group.tsx
+++ b/client/src/components/ui/button-group.tsx
@@ -0,0 +1,83 @@
 
				+import { Slot } from "@radix-ui/react-slot";
			
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+
			
 
				+const buttonGroupVariants = cva(
			
 
				+  "flex w-fit items-stretch [&>*]:focus-visible:z-10 [&>*]:focus-visible:relative [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md has-[>[data-slot=button-group]]:gap-2",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      orientation: {
			
 
				+        horizontal:
			
 
				+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
			
 
				+        vertical:
			
 
				+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      orientation: "horizontal",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function ButtonGroup({
			
 
				+  className,
			
 
				+  orientation,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="group"
			
 
				+      data-slot="button-group"
			
 
				+      data-orientation={orientation}
			
 
				+      className={cn(buttonGroupVariants({ orientation }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ButtonGroupText({
			
 
				+  className,
			
 
				+  asChild = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  asChild?: boolean;
			
 
				+}) {
			
 
				+  const Comp = asChild ? Slot : "div";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      className={cn(
			
 
				+        "bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ButtonGroupSeparator({
			
 
				+  className,
			
 
				+  orientation = "vertical",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Separator>) {
			
 
				+  return (
			
 
				+    <Separator
			
 
				+      data-slot="button-group-separator"
			
 
				+      orientation={orientation}
			
 
				+      className={cn(
			
 
				+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ButtonGroup,
			
 
				+  ButtonGroupSeparator,
			
 
				+  ButtonGroupText,
			
 
				+  buttonGroupVariants,
			
 
				+};
			
--- a/client/src/components/ui/button.tsx
+++ b/client/src/components/ui/button.tsx
@@ -0,0 +1,60 @@
 
				+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(
			
 
				+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
			
 
				+        destructive:
			
 
				+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
			
 
				+        outline:
			
 
				+          "border bg-transparent shadow-xs hover:bg-accent dark:bg-transparent dark:border-input dark:hover:bg-input/50",
			
 
				+        secondary:
			
 
				+          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
			
 
				+        ghost:
			
 
				+          "hover:bg-accent dark:hover:bg-accent/50",
			
 
				+        link: "text-primary underline-offset-4 hover:underline",
			
 
				+      },
			
 
				+      size: {
			
 
				+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
			
 
				+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
			
 
				+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
			
 
				+        icon: "size-9",
			
 
				+        "icon-sm": "size-8",
			
 
				+        "icon-lg": "size-10",
			
 
				+      },
			
 
				+    },
			
 
				+    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 };
			
--- a/client/src/components/ui/calendar.tsx
+++ b/client/src/components/ui/calendar.tsx
@@ -0,0 +1,211 @@
 
				+import * as React from "react";
			
 
				+import {
			
 
				+  ChevronDownIcon,
			
 
				+  ChevronLeftIcon,
			
 
				+  ChevronRightIcon,
			
 
				+} from "lucide-react";
			
 
				+import { DayButton, DayPicker, getDefaultClassNames } from "react-day-picker";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Button, buttonVariants } from "@/components/ui/button";
			
 
				+
			
 
				+function Calendar({
			
 
				+  className,
			
 
				+  classNames,
			
 
				+  showOutsideDays = true,
			
 
				+  captionLayout = "label",
			
 
				+  buttonVariant = "ghost",
			
 
				+  formatters,
			
 
				+  components,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DayPicker> & {
			
 
				+  buttonVariant?: React.ComponentProps<typeof Button>["variant"];
			
 
				+}) {
			
 
				+  const defaultClassNames = getDefaultClassNames();
			
 
				+
			
 
				+  return (
			
 
				+    <DayPicker
			
 
				+      showOutsideDays={showOutsideDays}
			
 
				+      className={cn(
			
 
				+        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
			
 
				+        String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
			
 
				+        String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
			
 
				+        className
			
 
				+      )}
			
 
				+      captionLayout={captionLayout}
			
 
				+      formatters={{
			
 
				+        formatMonthDropdown: date =>
			
 
				+          date.toLocaleString("default", { month: "short" }),
			
 
				+        ...formatters,
			
 
				+      }}
			
 
				+      classNames={{
			
 
				+        root: cn("w-fit", defaultClassNames.root),
			
 
				+        months: cn(
			
 
				+          "flex gap-4 flex-col md:flex-row relative",
			
 
				+          defaultClassNames.months
			
 
				+        ),
			
 
				+        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
			
 
				+        nav: cn(
			
 
				+          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
			
 
				+          defaultClassNames.nav
			
 
				+        ),
			
 
				+        button_previous: cn(
			
 
				+          buttonVariants({ variant: buttonVariant }),
			
 
				+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
			
 
				+          defaultClassNames.button_previous
			
 
				+        ),
			
 
				+        button_next: cn(
			
 
				+          buttonVariants({ variant: buttonVariant }),
			
 
				+          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
			
 
				+          defaultClassNames.button_next
			
 
				+        ),
			
 
				+        month_caption: cn(
			
 
				+          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
			
 
				+          defaultClassNames.month_caption
			
 
				+        ),
			
 
				+        dropdowns: cn(
			
 
				+          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
			
 
				+          defaultClassNames.dropdowns
			
 
				+        ),
			
 
				+        dropdown_root: cn(
			
 
				+          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
			
 
				+          defaultClassNames.dropdown_root
			
 
				+        ),
			
 
				+        dropdown: cn(
			
 
				+          "absolute bg-popover inset-0 opacity-0",
			
 
				+          defaultClassNames.dropdown
			
 
				+        ),
			
 
				+        caption_label: cn(
			
 
				+          "select-none font-medium",
			
 
				+          captionLayout === "label"
			
 
				+            ? "text-sm"
			
 
				+            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
			
 
				+          defaultClassNames.caption_label
			
 
				+        ),
			
 
				+        table: "w-full border-collapse",
			
 
				+        weekdays: cn("flex", defaultClassNames.weekdays),
			
 
				+        weekday: cn(
			
 
				+          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
			
 
				+          defaultClassNames.weekday
			
 
				+        ),
			
 
				+        week: cn("flex w-full mt-2", defaultClassNames.week),
			
 
				+        week_number_header: cn(
			
 
				+          "select-none w-(--cell-size)",
			
 
				+          defaultClassNames.week_number_header
			
 
				+        ),
			
 
				+        week_number: cn(
			
 
				+          "text-[0.8rem] select-none text-muted-foreground",
			
 
				+          defaultClassNames.week_number
			
 
				+        ),
			
 
				+        day: cn(
			
 
				+          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
			
 
				+          defaultClassNames.day
			
 
				+        ),
			
 
				+        range_start: cn(
			
 
				+          "rounded-l-md bg-accent",
			
 
				+          defaultClassNames.range_start
			
 
				+        ),
			
 
				+        range_middle: cn("rounded-none", defaultClassNames.range_middle),
			
 
				+        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
			
 
				+        today: cn(
			
 
				+          "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
			
 
				+          defaultClassNames.today
			
 
				+        ),
			
 
				+        outside: cn(
			
 
				+          "text-muted-foreground aria-selected:text-muted-foreground",
			
 
				+          defaultClassNames.outside
			
 
				+        ),
			
 
				+        disabled: cn(
			
 
				+          "text-muted-foreground opacity-50",
			
 
				+          defaultClassNames.disabled
			
 
				+        ),
			
 
				+        hidden: cn("invisible", defaultClassNames.hidden),
			
 
				+        ...classNames,
			
 
				+      }}
			
 
				+      components={{
			
 
				+        Root: ({ className, rootRef, ...props }) => {
			
 
				+          return (
			
 
				+            <div
			
 
				+              data-slot="calendar"
			
 
				+              ref={rootRef}
			
 
				+              className={cn(className)}
			
 
				+              {...props}
			
 
				+            />
			
 
				+          );
			
 
				+        },
			
 
				+        Chevron: ({ className, orientation, ...props }) => {
			
 
				+          if (orientation === "left") {
			
 
				+            return (
			
 
				+              <ChevronLeftIcon className={cn("size-4", className)} {...props} />
			
 
				+            );
			
 
				+          }
			
 
				+
			
 
				+          if (orientation === "right") {
			
 
				+            return (
			
 
				+              <ChevronRightIcon
			
 
				+                className={cn("size-4", className)}
			
 
				+                {...props}
			
 
				+              />
			
 
				+            );
			
 
				+          }
			
 
				+
			
 
				+          return (
			
 
				+            <ChevronDownIcon className={cn("size-4", className)} {...props} />
			
 
				+          );
			
 
				+        },
			
 
				+        DayButton: CalendarDayButton,
			
 
				+        WeekNumber: ({ children, ...props }) => {
			
 
				+          return (
			
 
				+            <td {...props}>
			
 
				+              <div className="flex size-(--cell-size) items-center justify-center text-center">
			
 
				+                {children}
			
 
				+              </div>
			
 
				+            </td>
			
 
				+          );
			
 
				+        },
			
 
				+        ...components,
			
 
				+      }}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CalendarDayButton({
			
 
				+  className,
			
 
				+  day,
			
 
				+  modifiers,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DayButton>) {
			
 
				+  const defaultClassNames = getDefaultClassNames();
			
 
				+
			
 
				+  const ref = React.useRef<HTMLButtonElement>(null);
			
 
				+  React.useEffect(() => {
			
 
				+    if (modifiers.focused) ref.current?.focus();
			
 
				+  }, [modifiers.focused]);
			
 
				+
			
 
				+  return (
			
 
				+    <Button
			
 
				+      ref={ref}
			
 
				+      variant="ghost"
			
 
				+      size="icon"
			
 
				+      data-day={day.date.toLocaleDateString()}
			
 
				+      data-selected-single={
			
 
				+        modifiers.selected &&
			
 
				+        !modifiers.range_start &&
			
 
				+        !modifiers.range_end &&
			
 
				+        !modifiers.range_middle
			
 
				+      }
			
 
				+      data-range-start={modifiers.range_start}
			
 
				+      data-range-end={modifiers.range_end}
			
 
				+      data-range-middle={modifiers.range_middle}
			
 
				+      className={cn(
			
 
				+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
			
 
				+        defaultClassNames.day,
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Calendar, CalendarDayButton };
			
--- a/client/src/components/ui/card.tsx
+++ b/client/src/components/ui/card.tsx
@@ -0,0 +1,92 @@
 
				+import * as React from "react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Card({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card"
			
 
				+      className={cn(
			
 
				+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-header"
			
 
				+      className={cn(
			
 
				+        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-title"
			
 
				+      className={cn("leading-none font-semibold", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-description"
			
 
				+      className={cn("text-muted-foreground text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardAction({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-action"
			
 
				+      className={cn(
			
 
				+        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-content"
			
 
				+      className={cn("px-6", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="card-footer"
			
 
				+      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Card,
			
 
				+  CardHeader,
			
 
				+  CardFooter,
			
 
				+  CardTitle,
			
 
				+  CardAction,
			
 
				+  CardDescription,
			
 
				+  CardContent,
			
 
				+};
			
--- a/client/src/components/ui/carousel.tsx
+++ b/client/src/components/ui/carousel.tsx
@@ -0,0 +1,239 @@
 
				+import * as React from "react";
			
 
				+import useEmblaCarousel, {
			
 
				+  type UseEmblaCarouselType,
			
 
				+} from "embla-carousel-react";
			
 
				+import { ArrowLeft, ArrowRight } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+
			
 
				+type CarouselApi = UseEmblaCarouselType[1];
			
 
				+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
			
 
				+type CarouselOptions = UseCarouselParameters[0];
			
 
				+type CarouselPlugin = UseCarouselParameters[1];
			
 
				+
			
 
				+type CarouselProps = {
			
 
				+  opts?: CarouselOptions;
			
 
				+  plugins?: CarouselPlugin;
			
 
				+  orientation?: "horizontal" | "vertical";
			
 
				+  setApi?: (api: CarouselApi) => void;
			
 
				+};
			
 
				+
			
 
				+type CarouselContextProps = {
			
 
				+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
			
 
				+  api: ReturnType<typeof useEmblaCarousel>[1];
			
 
				+  scrollPrev: () => void;
			
 
				+  scrollNext: () => void;
			
 
				+  canScrollPrev: boolean;
			
 
				+  canScrollNext: boolean;
			
 
				+} & CarouselProps;
			
 
				+
			
 
				+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
			
 
				+
			
 
				+function useCarousel() {
			
 
				+  const context = React.useContext(CarouselContext);
			
 
				+
			
 
				+  if (!context) {
			
 
				+    throw new Error("useCarousel must be used within a <Carousel />");
			
 
				+  }
			
 
				+
			
 
				+  return context;
			
 
				+}
			
 
				+
			
 
				+function Carousel({
			
 
				+  orientation = "horizontal",
			
 
				+  opts,
			
 
				+  setApi,
			
 
				+  plugins,
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & CarouselProps) {
			
 
				+  const [carouselRef, api] = useEmblaCarousel(
			
 
				+    {
			
 
				+      ...opts,
			
 
				+      axis: orientation === "horizontal" ? "x" : "y",
			
 
				+    },
			
 
				+    plugins
			
 
				+  );
			
 
				+  const [canScrollPrev, setCanScrollPrev] = React.useState(false);
			
 
				+  const [canScrollNext, setCanScrollNext] = React.useState(false);
			
 
				+
			
 
				+  const onSelect = React.useCallback((api: CarouselApi) => {
			
 
				+    if (!api) return;
			
 
				+    setCanScrollPrev(api.canScrollPrev());
			
 
				+    setCanScrollNext(api.canScrollNext());
			
 
				+  }, []);
			
 
				+
			
 
				+  const scrollPrev = React.useCallback(() => {
			
 
				+    api?.scrollPrev();
			
 
				+  }, [api]);
			
 
				+
			
 
				+  const scrollNext = React.useCallback(() => {
			
 
				+    api?.scrollNext();
			
 
				+  }, [api]);
			
 
				+
			
 
				+  const handleKeyDown = React.useCallback(
			
 
				+    (event: React.KeyboardEvent<HTMLDivElement>) => {
			
 
				+      if (event.key === "ArrowLeft") {
			
 
				+        event.preventDefault();
			
 
				+        scrollPrev();
			
 
				+      } else if (event.key === "ArrowRight") {
			
 
				+        event.preventDefault();
			
 
				+        scrollNext();
			
 
				+      }
			
 
				+    },
			
 
				+    [scrollPrev, scrollNext]
			
 
				+  );
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (!api || !setApi) return;
			
 
				+    setApi(api);
			
 
				+  }, [api, setApi]);
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    if (!api) return;
			
 
				+    onSelect(api);
			
 
				+    api.on("reInit", onSelect);
			
 
				+    api.on("select", onSelect);
			
 
				+
			
 
				+    return () => {
			
 
				+      api?.off("select", onSelect);
			
 
				+    };
			
 
				+  }, [api, onSelect]);
			
 
				+
			
 
				+  return (
			
 
				+    <CarouselContext.Provider
			
 
				+      value={{
			
 
				+        carouselRef,
			
 
				+        api: api,
			
 
				+        opts,
			
 
				+        orientation:
			
 
				+          orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
			
 
				+        scrollPrev,
			
 
				+        scrollNext,
			
 
				+        canScrollPrev,
			
 
				+        canScrollNext,
			
 
				+      }}
			
 
				+    >
			
 
				+      <div
			
 
				+        onKeyDownCapture={handleKeyDown}
			
 
				+        className={cn("relative", className)}
			
 
				+        role="region"
			
 
				+        aria-roledescription="carousel"
			
 
				+        data-slot="carousel"
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+      </div>
			
 
				+    </CarouselContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  const { carouselRef, orientation } = useCarousel();
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      ref={carouselRef}
			
 
				+      className="overflow-hidden"
			
 
				+      data-slot="carousel-content"
			
 
				+    >
			
 
				+      <div
			
 
				+        className={cn(
			
 
				+          "flex",
			
 
				+          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  const { orientation } = useCarousel();
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="group"
			
 
				+      aria-roledescription="slide"
			
 
				+      data-slot="carousel-item"
			
 
				+      className={cn(
			
 
				+        "min-w-0 shrink-0 grow-0 basis-full",
			
 
				+        orientation === "horizontal" ? "pl-4" : "pt-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CarouselPrevious({
			
 
				+  className,
			
 
				+  variant = "outline",
			
 
				+  size = "icon",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Button>) {
			
 
				+  const { orientation, scrollPrev, canScrollPrev } = useCarousel();
			
 
				+
			
 
				+  return (
			
 
				+    <Button
			
 
				+      data-slot="carousel-previous"
			
 
				+      variant={variant}
			
 
				+      size={size}
			
 
				+      className={cn(
			
 
				+        "absolute size-8 rounded-full",
			
 
				+        orientation === "horizontal"
			
 
				+          ? "top-1/2 -left-12 -translate-y-1/2"
			
 
				+          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
			
 
				+        className
			
 
				+      )}
			
 
				+      disabled={!canScrollPrev}
			
 
				+      onClick={scrollPrev}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ArrowLeft />
			
 
				+      <span className="sr-only">Previous slide</span>
			
 
				+    </Button>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CarouselNext({
			
 
				+  className,
			
 
				+  variant = "outline",
			
 
				+  size = "icon",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Button>) {
			
 
				+  const { orientation, scrollNext, canScrollNext } = useCarousel();
			
 
				+
			
 
				+  return (
			
 
				+    <Button
			
 
				+      data-slot="carousel-next"
			
 
				+      variant={variant}
			
 
				+      size={size}
			
 
				+      className={cn(
			
 
				+        "absolute size-8 rounded-full",
			
 
				+        orientation === "horizontal"
			
 
				+          ? "top-1/2 -right-12 -translate-y-1/2"
			
 
				+          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
			
 
				+        className
			
 
				+      )}
			
 
				+      disabled={!canScrollNext}
			
 
				+      onClick={scrollNext}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ArrowRight />
			
 
				+      <span className="sr-only">Next slide</span>
			
 
				+    </Button>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  type CarouselApi,
			
 
				+  Carousel,
			
 
				+  CarouselContent,
			
 
				+  CarouselItem,
			
 
				+  CarouselPrevious,
			
 
				+  CarouselNext,
			
 
				+};
			
--- a/client/src/components/ui/chart.tsx
+++ b/client/src/components/ui/chart.tsx
@@ -0,0 +1,355 @@
 
				+import * as React from "react";
			
 
				+import * as RechartsPrimitive from "recharts";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+// Format: { THEME_NAME: CSS_SELECTOR }
			
 
				+const THEMES = { light: "", dark: ".dark" } as const;
			
 
				+
			
 
				+export type ChartConfig = {
			
 
				+  [k in string]: {
			
 
				+    label?: React.ReactNode;
			
 
				+    icon?: React.ComponentType;
			
 
				+  } & (
			
 
				+    | { color?: string; theme?: never }
			
 
				+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
			
 
				+  );
			
 
				+};
			
 
				+
			
 
				+type ChartContextProps = {
			
 
				+  config: ChartConfig;
			
 
				+};
			
 
				+
			
 
				+const ChartContext = React.createContext<ChartContextProps | null>(null);
			
 
				+
			
 
				+function useChart() {
			
 
				+  const context = React.useContext(ChartContext);
			
 
				+
			
 
				+  if (!context) {
			
 
				+    throw new Error("useChart must be used within a <ChartContainer />");
			
 
				+  }
			
 
				+
			
 
				+  return context;
			
 
				+}
			
 
				+
			
 
				+function ChartContainer({
			
 
				+  id,
			
 
				+  className,
			
 
				+  children,
			
 
				+  config,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  config: ChartConfig;
			
 
				+  children: React.ComponentProps<
			
 
				+    typeof RechartsPrimitive.ResponsiveContainer
			
 
				+  >["children"];
			
 
				+}) {
			
 
				+  const uniqueId = React.useId();
			
 
				+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
			
 
				+
			
 
				+  return (
			
 
				+    <ChartContext.Provider value={{ config }}>
			
 
				+      <div
			
 
				+        data-slot="chart"
			
 
				+        data-chart={chartId}
			
 
				+        className={cn(
			
 
				+          "[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        <ChartStyle id={chartId} config={config} />
			
 
				+        <RechartsPrimitive.ResponsiveContainer>
			
 
				+          {children}
			
 
				+        </RechartsPrimitive.ResponsiveContainer>
			
 
				+      </div>
			
 
				+    </ChartContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
			
 
				+  const colorConfig = Object.entries(config).filter(
			
 
				+    ([, config]) => config.theme || config.color
			
 
				+  );
			
 
				+
			
 
				+  if (!colorConfig.length) {
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <style
			
 
				+      dangerouslySetInnerHTML={{
			
 
				+        __html: Object.entries(THEMES)
			
 
				+          .map(
			
 
				+            ([theme, prefix]) => `
			
 
				+${prefix} [data-chart=${id}] {
			
 
				+${colorConfig
			
 
				+  .map(([key, itemConfig]) => {
			
 
				+    const color =
			
 
				+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
			
 
				+      itemConfig.color;
			
 
				+    return color ? `  --color-${key}: ${color};` : null;
			
 
				+  })
			
 
				+  .join("\n")}
			
 
				+}
			
 
				+`
			
 
				+          )
			
 
				+          .join("\n"),
			
 
				+      }}
			
 
				+    />
			
 
				+  );
			
 
				+};
			
 
				+
			
 
				+const ChartTooltip = RechartsPrimitive.Tooltip;
			
 
				+
			
 
				+function ChartTooltipContent({
			
 
				+  active,
			
 
				+  payload,
			
 
				+  className,
			
 
				+  indicator = "dot",
			
 
				+  hideLabel = false,
			
 
				+  hideIndicator = false,
			
 
				+  label,
			
 
				+  labelFormatter,
			
 
				+  labelClassName,
			
 
				+  formatter,
			
 
				+  color,
			
 
				+  nameKey,
			
 
				+  labelKey,
			
 
				+}: React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
			
 
				+  React.ComponentProps<"div"> & {
			
 
				+    hideLabel?: boolean;
			
 
				+    hideIndicator?: boolean;
			
 
				+    indicator?: "line" | "dot" | "dashed";
			
 
				+    nameKey?: string;
			
 
				+    labelKey?: string;
			
 
				+  }) {
			
 
				+  const { config } = useChart();
			
 
				+
			
 
				+  const tooltipLabel = React.useMemo(() => {
			
 
				+    if (hideLabel || !payload?.length) {
			
 
				+      return null;
			
 
				+    }
			
 
				+
			
 
				+    const [item] = payload;
			
 
				+    const key = `${labelKey || item?.dataKey || item?.name || "value"}`;
			
 
				+    const itemConfig = getPayloadConfigFromPayload(config, item, key);
			
 
				+    const value =
			
 
				+      !labelKey && typeof label === "string"
			
 
				+        ? config[label as keyof typeof config]?.label || label
			
 
				+        : itemConfig?.label;
			
 
				+
			
 
				+    if (labelFormatter) {
			
 
				+      return (
			
 
				+        <div className={cn("font-medium", labelClassName)}>
			
 
				+          {labelFormatter(value, payload)}
			
 
				+        </div>
			
 
				+      );
			
 
				+    }
			
 
				+
			
 
				+    if (!value) {
			
 
				+      return null;
			
 
				+    }
			
 
				+
			
 
				+    return <div className={cn("font-medium", labelClassName)}>{value}</div>;
			
 
				+  }, [
			
 
				+    label,
			
 
				+    labelFormatter,
			
 
				+    payload,
			
 
				+    hideLabel,
			
 
				+    labelClassName,
			
 
				+    config,
			
 
				+    labelKey,
			
 
				+  ]);
			
 
				+
			
 
				+  if (!active || !payload?.length) {
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  const nestLabel = payload.length === 1 && indicator !== "dot";
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        "border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
			
 
				+        className
			
 
				+      )}
			
 
				+    >
			
 
				+      {!nestLabel ? tooltipLabel : null}
			
 
				+      <div className="grid gap-1.5">
			
 
				+        {payload
			
 
				+          .filter(item => item.type !== "none")
			
 
				+          .map((item, index) => {
			
 
				+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
			
 
				+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
			
 
				+            const indicatorColor = color || item.payload.fill || item.color;
			
 
				+
			
 
				+            return (
			
 
				+              <div
			
 
				+                key={item.dataKey}
			
 
				+                className={cn(
			
 
				+                  "[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5",
			
 
				+                  indicator === "dot" && "items-center"
			
 
				+                )}
			
 
				+              >
			
 
				+                {formatter && item?.value !== undefined && item.name ? (
			
 
				+                  formatter(item.value, item.name, item, index, item.payload)
			
 
				+                ) : (
			
 
				+                  <>
			
 
				+                    {itemConfig?.icon ? (
			
 
				+                      <itemConfig.icon />
			
 
				+                    ) : (
			
 
				+                      !hideIndicator && (
			
 
				+                        <div
			
 
				+                          className={cn(
			
 
				+                            "shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)",
			
 
				+                            {
			
 
				+                              "h-2.5 w-2.5": indicator === "dot",
			
 
				+                              "w-1": indicator === "line",
			
 
				+                              "w-0 border-[1.5px] border-dashed bg-transparent":
			
 
				+                                indicator === "dashed",
			
 
				+                              "my-0.5": nestLabel && indicator === "dashed",
			
 
				+                            }
			
 
				+                          )}
			
 
				+                          style={
			
 
				+                            {
			
 
				+                              "--color-bg": indicatorColor,
			
 
				+                              "--color-border": indicatorColor,
			
 
				+                            } as React.CSSProperties
			
 
				+                          }
			
 
				+                        />
			
 
				+                      )
			
 
				+                    )}
			
 
				+                    <div
			
 
				+                      className={cn(
			
 
				+                        "flex flex-1 justify-between leading-none",
			
 
				+                        nestLabel ? "items-end" : "items-center"
			
 
				+                      )}
			
 
				+                    >
			
 
				+                      <div className="grid gap-1.5">
			
 
				+                        {nestLabel ? tooltipLabel : null}
			
 
				+                        <span className="text-muted-foreground">
			
 
				+                          {itemConfig?.label || item.name}
			
 
				+                        </span>
			
 
				+                      </div>
			
 
				+                      {item.value && (
			
 
				+                        <span className="text-foreground font-mono font-medium tabular-nums">
			
 
				+                          {item.value.toLocaleString()}
			
 
				+                        </span>
			
 
				+                      )}
			
 
				+                    </div>
			
 
				+                  </>
			
 
				+                )}
			
 
				+              </div>
			
 
				+            );
			
 
				+          })}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const ChartLegend = RechartsPrimitive.Legend;
			
 
				+
			
 
				+function ChartLegendContent({
			
 
				+  className,
			
 
				+  hideIcon = false,
			
 
				+  payload,
			
 
				+  verticalAlign = "bottom",
			
 
				+  nameKey,
			
 
				+}: React.ComponentProps<"div"> &
			
 
				+  Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
			
 
				+    hideIcon?: boolean;
			
 
				+    nameKey?: string;
			
 
				+  }) {
			
 
				+  const { config } = useChart();
			
 
				+
			
 
				+  if (!payload?.length) {
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        "flex items-center justify-center gap-4",
			
 
				+        verticalAlign === "top" ? "pb-3" : "pt-3",
			
 
				+        className
			
 
				+      )}
			
 
				+    >
			
 
				+      {payload
			
 
				+        .filter(item => item.type !== "none")
			
 
				+        .map(item => {
			
 
				+          const key = `${nameKey || item.dataKey || "value"}`;
			
 
				+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
			
 
				+
			
 
				+          return (
			
 
				+            <div
			
 
				+              key={item.value}
			
 
				+              className={cn(
			
 
				+                "[&>svg]:text-muted-foreground flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3"
			
 
				+              )}
			
 
				+            >
			
 
				+              {itemConfig?.icon && !hideIcon ? (
			
 
				+                <itemConfig.icon />
			
 
				+              ) : (
			
 
				+                <div
			
 
				+                  className="h-2 w-2 shrink-0 rounded-[2px]"
			
 
				+                  style={{
			
 
				+                    backgroundColor: item.color,
			
 
				+                  }}
			
 
				+                />
			
 
				+              )}
			
 
				+              {itemConfig?.label}
			
 
				+            </div>
			
 
				+          );
			
 
				+        })}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+// Helper to extract item config from a payload.
			
 
				+function getPayloadConfigFromPayload(
			
 
				+  config: ChartConfig,
			
 
				+  payload: unknown,
			
 
				+  key: string
			
 
				+) {
			
 
				+  if (typeof payload !== "object" || payload === null) {
			
 
				+    return undefined;
			
 
				+  }
			
 
				+
			
 
				+  const payloadPayload =
			
 
				+    "payload" in payload &&
			
 
				+    typeof payload.payload === "object" &&
			
 
				+    payload.payload !== null
			
 
				+      ? payload.payload
			
 
				+      : undefined;
			
 
				+
			
 
				+  let configLabelKey: string = key;
			
 
				+
			
 
				+  if (
			
 
				+    key in payload &&
			
 
				+    typeof payload[key as keyof typeof payload] === "string"
			
 
				+  ) {
			
 
				+    configLabelKey = payload[key as keyof typeof payload] as string;
			
 
				+  } else if (
			
 
				+    payloadPayload &&
			
 
				+    key in payloadPayload &&
			
 
				+    typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
			
 
				+  ) {
			
 
				+    configLabelKey = payloadPayload[
			
 
				+      key as keyof typeof payloadPayload
			
 
				+    ] as string;
			
 
				+  }
			
 
				+
			
 
				+  return configLabelKey in config
			
 
				+    ? config[configLabelKey]
			
 
				+    : config[key as keyof typeof config];
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ChartContainer,
			
 
				+  ChartTooltip,
			
 
				+  ChartTooltipContent,
			
 
				+  ChartLegend,
			
 
				+  ChartLegendContent,
			
 
				+  ChartStyle,
			
 
				+};
			
--- a/client/src/components/ui/checkbox.tsx
+++ b/client/src/components/ui/checkbox.tsx
@@ -0,0 +1,30 @@
 
				+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(
			
 
				+        "peer border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <CheckboxPrimitive.Indicator
			
 
				+        data-slot="checkbox-indicator"
			
 
				+        className="flex items-center justify-center text-current transition-none"
			
 
				+      >
			
 
				+        <CheckIcon className="size-3.5" />
			
 
				+      </CheckboxPrimitive.Indicator>
			
 
				+    </CheckboxPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Checkbox };
			
--- a/client/src/components/ui/collapsible.tsx
+++ b/client/src/components/ui/collapsible.tsx
@@ -0,0 +1,31 @@
 
				+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
			
 
				+
			
 
				+function Collapsible({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
			
 
				+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function CollapsibleTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
			
 
				+  return (
			
 
				+    <CollapsiblePrimitive.CollapsibleTrigger
			
 
				+      data-slot="collapsible-trigger"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CollapsibleContent({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
			
 
				+  return (
			
 
				+    <CollapsiblePrimitive.CollapsibleContent
			
 
				+      data-slot="collapsible-content"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
			
--- a/client/src/components/ui/command.tsx
+++ b/client/src/components/ui/command.tsx
@@ -0,0 +1,184 @@
 
				+"use client";
			
 
				+
			
 
				+import * as React from "react";
			
 
				+import { Command as CommandPrimitive } from "cmdk";
			
 
				+import { SearchIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import {
			
 
				+  Dialog,
			
 
				+  DialogContent,
			
 
				+  DialogDescription,
			
 
				+  DialogHeader,
			
 
				+  DialogTitle,
			
 
				+} from "@/components/ui/dialog";
			
 
				+
			
 
				+function Command({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive
			
 
				+      data-slot="command"
			
 
				+      className={cn(
			
 
				+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandDialog({
			
 
				+  title = "Command Palette",
			
 
				+  description = "Search for a command to run...",
			
 
				+  children,
			
 
				+  className,
			
 
				+  showCloseButton = true,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Dialog> & {
			
 
				+  title?: string;
			
 
				+  description?: string;
			
 
				+  className?: string;
			
 
				+  showCloseButton?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <Dialog {...props}>
			
 
				+      <DialogHeader className="sr-only">
			
 
				+        <DialogTitle>{title}</DialogTitle>
			
 
				+        <DialogDescription>{description}</DialogDescription>
			
 
				+      </DialogHeader>
			
 
				+      <DialogContent
			
 
				+        className={cn("overflow-hidden p-0", className)}
			
 
				+        showCloseButton={showCloseButton}
			
 
				+      >
			
 
				+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
			
 
				+          {children}
			
 
				+        </Command>
			
 
				+      </DialogContent>
			
 
				+    </Dialog>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandInput({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="command-input-wrapper"
			
 
				+      className="flex h-9 items-center gap-2 border-b px-3"
			
 
				+    >
			
 
				+      <SearchIcon className="size-4 shrink-0 opacity-50" />
			
 
				+      <CommandPrimitive.Input
			
 
				+        data-slot="command-input"
			
 
				+        className={cn(
			
 
				+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandList({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.List>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive.List
			
 
				+      data-slot="command-list"
			
 
				+      className={cn(
			
 
				+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandEmpty({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive.Empty
			
 
				+      data-slot="command-empty"
			
 
				+      className="py-6 text-center text-sm"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandGroup({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive.Group
			
 
				+      data-slot="command-group"
			
 
				+      className={cn(
			
 
				+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive.Separator
			
 
				+      data-slot="command-separator"
			
 
				+      className={cn("bg-border -mx-1 h-px", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandItem({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
			
 
				+  return (
			
 
				+    <CommandPrimitive.Item
			
 
				+      data-slot="command-item"
			
 
				+      className={cn(
			
 
				+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function CommandShortcut({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="command-shortcut"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground ml-auto text-xs tracking-widest",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Command,
			
 
				+  CommandDialog,
			
 
				+  CommandInput,
			
 
				+  CommandList,
			
 
				+  CommandEmpty,
			
 
				+  CommandGroup,
			
 
				+  CommandItem,
			
 
				+  CommandShortcut,
			
 
				+  CommandSeparator,
			
 
				+};
			
--- a/client/src/components/ui/context-menu.tsx
+++ b/client/src/components/ui/context-menu.tsx
@@ -0,0 +1,250 @@
 
				+import * as React from "react";
			
 
				+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
			
 
				+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function ContextMenu({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
			
 
				+  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function ContextMenuTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSub({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
			
 
				+  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function ContextMenuRadioGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.RadioGroup
			
 
				+      data-slot="context-menu-radio-group"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSubTrigger({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.SubTrigger
			
 
				+      data-slot="context-menu-sub-trigger"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <ChevronRightIcon className="ml-auto" />
			
 
				+    </ContextMenuPrimitive.SubTrigger>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSubContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.SubContent
			
 
				+      data-slot="context-menu-sub-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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Portal>
			
 
				+      <ContextMenuPrimitive.Content
			
 
				+        data-slot="context-menu-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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </ContextMenuPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuItem({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  variant = "default",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
			
 
				+  inset?: boolean;
			
 
				+  variant?: "default" | "destructive";
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Item
			
 
				+      data-slot="context-menu-item"
			
 
				+      data-inset={inset}
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuCheckboxItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  checked,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.CheckboxItem
			
 
				+      data-slot="context-menu-checkbox-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      checked={checked}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <ContextMenuPrimitive.ItemIndicator>
			
 
				+          <CheckIcon className="size-4" />
			
 
				+        </ContextMenuPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </ContextMenuPrimitive.CheckboxItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuRadioItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.RadioItem
			
 
				+      data-slot="context-menu-radio-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <ContextMenuPrimitive.ItemIndicator>
			
 
				+          <CircleIcon className="size-2 fill-current" />
			
 
				+        </ContextMenuPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </ContextMenuPrimitive.RadioItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuLabel({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Label
			
 
				+      data-slot="context-menu-label"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
			
 
				+  return (
			
 
				+    <ContextMenuPrimitive.Separator
			
 
				+      data-slot="context-menu-separator"
			
 
				+      className={cn("bg-border -mx-1 my-1 h-px", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ContextMenuShortcut({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="context-menu-shortcut"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground ml-auto text-xs tracking-widest",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  ContextMenu,
			
 
				+  ContextMenuTrigger,
			
 
				+  ContextMenuContent,
			
 
				+  ContextMenuItem,
			
 
				+  ContextMenuCheckboxItem,
			
 
				+  ContextMenuRadioItem,
			
 
				+  ContextMenuLabel,
			
 
				+  ContextMenuSeparator,
			
 
				+  ContextMenuShortcut,
			
 
				+  ContextMenuGroup,
			
 
				+  ContextMenuPortal,
			
 
				+  ContextMenuSub,
			
 
				+  ContextMenuSubContent,
			
 
				+  ContextMenuSubTrigger,
			
 
				+  ContextMenuRadioGroup,
			
 
				+};
			
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -0,0 +1,209 @@
 
				+import { cn } from "@/lib/utils";
			
 
				+import * as DialogPrimitive from "@radix-ui/react-dialog";
			
 
				+import { XIcon } from "lucide-react";
			
 
				+import * as React from "react";
			
 
				+
			
 
				+// Context to track composition state across dialog children
			
 
				+const DialogCompositionContext = React.createContext<{
			
 
				+  isComposing: () => boolean;
			
 
				+  setComposing: (composing: boolean) => void;
			
 
				+  justEndedComposing: () => boolean;
			
 
				+  markCompositionEnd: () => void;
			
 
				+}>({
			
 
				+  isComposing: () => false,
			
 
				+  setComposing: () => {},
			
 
				+  justEndedComposing: () => false,
			
 
				+  markCompositionEnd: () => {},
			
 
				+});
			
 
				+
			
 
				+export const useDialogComposition = () =>
			
 
				+  React.useContext(DialogCompositionContext);
			
 
				+
			
 
				+function Dialog({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
			
 
				+  const composingRef = React.useRef(false);
			
 
				+  const justEndedRef = React.useRef(false);
			
 
				+  const endTimerRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
			
 
				+
			
 
				+  const contextValue = React.useMemo(
			
 
				+    () => ({
			
 
				+      isComposing: () => composingRef.current,
			
 
				+      setComposing: (composing: boolean) => {
			
 
				+        composingRef.current = composing;
			
 
				+      },
			
 
				+      justEndedComposing: () => justEndedRef.current,
			
 
				+      markCompositionEnd: () => {
			
 
				+        justEndedRef.current = true;
			
 
				+        if (endTimerRef.current) {
			
 
				+          clearTimeout(endTimerRef.current);
			
 
				+        }
			
 
				+        endTimerRef.current = setTimeout(() => {
			
 
				+          justEndedRef.current = false;
			
 
				+        }, 150);
			
 
				+      },
			
 
				+    }),
			
 
				+    []
			
 
				+  );
			
 
				+
			
 
				+  return (
			
 
				+    <DialogCompositionContext.Provider value={contextValue}>
			
 
				+      <DialogPrimitive.Root data-slot="dialog" {...props} />
			
 
				+    </DialogCompositionContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+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}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+DialogOverlay.displayName = "DialogOverlay";
			
 
				+
			
 
				+function DialogContent({
			
 
				+  className,
			
 
				+  children,
			
 
				+  showCloseButton = true,
			
 
				+  onEscapeKeyDown,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
			
 
				+  showCloseButton?: boolean;
			
 
				+}) {
			
 
				+  const { isComposing } = useDialogComposition();
			
 
				+
			
 
				+  const handleEscapeKeyDown = React.useCallback(
			
 
				+    (e: KeyboardEvent) => {
			
 
				+      // Check both the native isComposing property and our context state
			
 
				+      // This handles Safari's timing issues with composition events
			
 
				+      const isCurrentlyComposing = (e as any).isComposing || isComposing();
			
 
				+
			
 
				+      // If IME is composing, prevent dialog from closing
			
 
				+      if (isCurrentlyComposing) {
			
 
				+        e.preventDefault();
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      // Call user's onEscapeKeyDown if provided
			
 
				+      onEscapeKeyDown?.(e);
			
 
				+    },
			
 
				+    [isComposing, onEscapeKeyDown]
			
 
				+  );
			
 
				+
			
 
				+  return (
			
 
				+    <DialogPortal data-slot="dialog-portal">
			
 
				+      <DialogOverlay />
			
 
				+      <DialogPrimitive.Content
			
 
				+        data-slot="dialog-content"
			
 
				+        className={cn(
			
 
				+          "bg-background 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 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
			
 
				+          className
			
 
				+        )}
			
 
				+        onEscapeKeyDown={handleEscapeKeyDown}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+        {showCloseButton && (
			
 
				+          <DialogPrimitive.Close
			
 
				+            data-slot="dialog-close"
			
 
				+            className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
			
 
				+          >
			
 
				+            <XIcon />
			
 
				+            <span className="sr-only">Close</span>
			
 
				+          </DialogPrimitive.Close>
			
 
				+        )}
			
 
				+      </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-left", 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-lg leading-none font-semibold", 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
			
 
				+};
			
 
				+
			
--- a/client/src/components/ui/drawer.tsx
+++ b/client/src/components/ui/drawer.tsx
@@ -0,0 +1,133 @@
 
				+import * as React from "react";
			
 
				+import { Drawer as DrawerPrimitive } from "vaul";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Drawer({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
			
 
				+  return <DrawerPrimitive.Root data-slot="drawer" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DrawerTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
			
 
				+  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DrawerPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
			
 
				+  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DrawerClose({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
			
 
				+  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DrawerOverlay({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
			
 
				+  return (
			
 
				+    <DrawerPrimitive.Overlay
			
 
				+      data-slot="drawer-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 DrawerContent({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <DrawerPortal data-slot="drawer-portal">
			
 
				+      <DrawerOverlay />
			
 
				+      <DrawerPrimitive.Content
			
 
				+        data-slot="drawer-content"
			
 
				+        className={cn(
			
 
				+          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
			
 
				+          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
			
 
				+          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
			
 
				+          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
			
 
				+          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
			
 
				+        {children}
			
 
				+      </DrawerPrimitive.Content>
			
 
				+    </DrawerPortal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="drawer-header"
			
 
				+      className={cn(
			
 
				+        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="drawer-footer"
			
 
				+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DrawerTitle({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
			
 
				+  return (
			
 
				+    <DrawerPrimitive.Title
			
 
				+      data-slot="drawer-title"
			
 
				+      className={cn("text-foreground font-semibold", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DrawerDescription({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
			
 
				+  return (
			
 
				+    <DrawerPrimitive.Description
			
 
				+      data-slot="drawer-description"
			
 
				+      className={cn("text-muted-foreground text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Drawer,
			
 
				+  DrawerPortal,
			
 
				+  DrawerOverlay,
			
 
				+  DrawerTrigger,
			
 
				+  DrawerClose,
			
 
				+  DrawerContent,
			
 
				+  DrawerHeader,
			
 
				+  DrawerFooter,
			
 
				+  DrawerTitle,
			
 
				+  DrawerDescription,
			
 
				+};
			
--- a/client/src/components/ui/dropdown-menu.tsx
+++ b/client/src/components/ui/dropdown-menu.tsx
@@ -0,0 +1,255 @@
 
				+import * as React from "react";
			
 
				+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
			
 
				+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function DropdownMenu({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
			
 
				+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Trigger
			
 
				+      data-slot="dropdown-menu-trigger"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuContent({
			
 
				+  className,
			
 
				+  sideOffset = 4,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Portal>
			
 
				+      <DropdownMenuPrimitive.Content
			
 
				+        data-slot="dropdown-menu-content"
			
 
				+        sideOffset={sideOffset}
			
 
				+        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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </DropdownMenuPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuItem({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  variant = "default",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
			
 
				+  inset?: boolean;
			
 
				+  variant?: "default" | "destructive";
			
 
				+}) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Item
			
 
				+      data-slot="dropdown-menu-item"
			
 
				+      data-inset={inset}
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuCheckboxItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  checked,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.CheckboxItem
			
 
				+      data-slot="dropdown-menu-checkbox-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      checked={checked}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <DropdownMenuPrimitive.ItemIndicator>
			
 
				+          <CheckIcon className="size-4" />
			
 
				+        </DropdownMenuPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </DropdownMenuPrimitive.CheckboxItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuRadioGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.RadioGroup
			
 
				+      data-slot="dropdown-menu-radio-group"
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuRadioItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.RadioItem
			
 
				+      data-slot="dropdown-menu-radio-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <DropdownMenuPrimitive.ItemIndicator>
			
 
				+          <CircleIcon className="size-2 fill-current" />
			
 
				+        </DropdownMenuPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </DropdownMenuPrimitive.RadioItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuLabel({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Label
			
 
				+      data-slot="dropdown-menu-label"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.Separator
			
 
				+      data-slot="dropdown-menu-separator"
			
 
				+      className={cn("bg-border -mx-1 my-1 h-px", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuShortcut({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="dropdown-menu-shortcut"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground ml-auto text-xs tracking-widest",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuSub({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
			
 
				+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuSubTrigger({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.SubTrigger
			
 
				+      data-slot="dropdown-menu-sub-trigger"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <ChevronRightIcon className="ml-auto size-4" />
			
 
				+    </DropdownMenuPrimitive.SubTrigger>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function DropdownMenuSubContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
			
 
				+  return (
			
 
				+    <DropdownMenuPrimitive.SubContent
			
 
				+      data-slot="dropdown-menu-sub-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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  DropdownMenu,
			
 
				+  DropdownMenuPortal,
			
 
				+  DropdownMenuTrigger,
			
 
				+  DropdownMenuContent,
			
 
				+  DropdownMenuGroup,
			
 
				+  DropdownMenuLabel,
			
 
				+  DropdownMenuItem,
			
 
				+  DropdownMenuCheckboxItem,
			
 
				+  DropdownMenuRadioGroup,
			
 
				+  DropdownMenuRadioItem,
			
 
				+  DropdownMenuSeparator,
			
 
				+  DropdownMenuShortcut,
			
 
				+  DropdownMenuSub,
			
 
				+  DropdownMenuSubTrigger,
			
 
				+  DropdownMenuSubContent,
			
 
				+};
			
--- a/client/src/components/ui/empty.tsx
+++ b/client/src/components/ui/empty.tsx
@@ -0,0 +1,104 @@
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Empty({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty"
			
 
				+      className={cn(
			
 
				+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty-header"
			
 
				+      className={cn(
			
 
				+        "flex max-w-sm flex-col items-center gap-2 text-center",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const emptyMediaVariants = cva(
			
 
				+  "flex shrink-0 items-center justify-center mb-2 [&_svg]:pointer-events-none [&_svg]:shrink-0",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-transparent",
			
 
				+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      variant: "default",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function EmptyMedia({
			
 
				+  className,
			
 
				+  variant = "default",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty-icon"
			
 
				+      data-variant={variant}
			
 
				+      className={cn(emptyMediaVariants({ variant, className }))}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty-title"
			
 
				+      className={cn("text-lg font-medium tracking-tight", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty-description"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="empty-content"
			
 
				+      className={cn(
			
 
				+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Empty,
			
 
				+  EmptyHeader,
			
 
				+  EmptyTitle,
			
 
				+  EmptyDescription,
			
 
				+  EmptyContent,
			
 
				+  EmptyMedia,
			
 
				+};
			
--- a/client/src/components/ui/field.tsx
+++ b/client/src/components/ui/field.tsx
@@ -0,0 +1,242 @@
 
				+import { useMemo } from "react";
			
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+
			
 
				+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
			
 
				+  return (
			
 
				+    <fieldset
			
 
				+      data-slot="field-set"
			
 
				+      className={cn(
			
 
				+        "flex flex-col gap-6",
			
 
				+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldLegend({
			
 
				+  className,
			
 
				+  variant = "legend",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
			
 
				+  return (
			
 
				+    <legend
			
 
				+      data-slot="field-legend"
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        "mb-3 font-medium",
			
 
				+        "data-[variant=legend]:text-base",
			
 
				+        "data-[variant=label]:text-sm",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="field-group"
			
 
				+      className={cn(
			
 
				+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const fieldVariants = cva(
			
 
				+  "group/field flex w-full gap-3 data-[invalid=true]:text-destructive",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      orientation: {
			
 
				+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
			
 
				+        horizontal: [
			
 
				+          "flex-row items-center",
			
 
				+          "[&>[data-slot=field-label]]:flex-auto",
			
 
				+          "has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
			
 
				+        ],
			
 
				+        responsive: [
			
 
				+          "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto",
			
 
				+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
			
 
				+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
			
 
				+        ],
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      orientation: "vertical",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function Field({
			
 
				+  className,
			
 
				+  orientation = "vertical",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="group"
			
 
				+      data-slot="field"
			
 
				+      data-orientation={orientation}
			
 
				+      className={cn(fieldVariants({ orientation }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="field-content"
			
 
				+      className={cn(
			
 
				+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldLabel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Label>) {
			
 
				+  return (
			
 
				+    <Label
			
 
				+      data-slot="field-label"
			
 
				+      className={cn(
			
 
				+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
			
 
				+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-4",
			
 
				+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="field-label"
			
 
				+      className={cn(
			
 
				+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium group-data-[disabled=true]/field:opacity-50",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
			
 
				+  return (
			
 
				+    <p
			
 
				+      data-slot="field-description"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground text-sm leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
			
 
				+        "last:mt-0 nth-last-2:-mt-1 [[data-variant=legend]+&]:-mt-1.5",
			
 
				+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldSeparator({
			
 
				+  children,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  children?: React.ReactNode;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="field-separator"
			
 
				+      data-content={!!children}
			
 
				+      className={cn(
			
 
				+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <Separator className="absolute inset-0 top-1/2" />
			
 
				+      {children && (
			
 
				+        <span
			
 
				+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
			
 
				+          data-slot="field-separator-content"
			
 
				+        >
			
 
				+          {children}
			
 
				+        </span>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FieldError({
			
 
				+  className,
			
 
				+  children,
			
 
				+  errors,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  errors?: Array<{ message?: string } | undefined>;
			
 
				+}) {
			
 
				+  const content = useMemo(() => {
			
 
				+    if (children) {
			
 
				+      return children;
			
 
				+    }
			
 
				+
			
 
				+    if (!errors) {
			
 
				+      return null;
			
 
				+    }
			
 
				+
			
 
				+    if (errors?.length === 1 && errors[0]?.message) {
			
 
				+      return errors[0].message;
			
 
				+    }
			
 
				+
			
 
				+    return (
			
 
				+      <ul className="ml-4 flex list-disc flex-col gap-1">
			
 
				+        {errors.map(
			
 
				+          (error, index) =>
			
 
				+            error?.message && <li key={index}>{error.message}</li>
			
 
				+        )}
			
 
				+      </ul>
			
 
				+    );
			
 
				+  }, [children, errors]);
			
 
				+
			
 
				+  if (!content) {
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="alert"
			
 
				+      data-slot="field-error"
			
 
				+      className={cn("text-destructive text-sm font-normal", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {content}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Field,
			
 
				+  FieldLabel,
			
 
				+  FieldDescription,
			
 
				+  FieldError,
			
 
				+  FieldGroup,
			
 
				+  FieldLegend,
			
 
				+  FieldSeparator,
			
 
				+  FieldSet,
			
 
				+  FieldContent,
			
 
				+  FieldTitle,
			
 
				+};
			
--- a/client/src/components/ui/form.tsx
+++ b/client/src/components/ui/form.tsx
@@ -0,0 +1,168 @@
 
				+"use client";
			
 
				+
			
 
				+import * as React from "react";
			
 
				+import * as LabelPrimitive from "@radix-ui/react-label";
			
 
				+import { Slot } from "@radix-ui/react-slot";
			
 
				+import {
			
 
				+  Controller,
			
 
				+  FormProvider,
			
 
				+  useFormContext,
			
 
				+  useFormState,
			
 
				+  type ControllerProps,
			
 
				+  type FieldPath,
			
 
				+  type FieldValues,
			
 
				+} from "react-hook-form";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+
			
 
				+const Form = FormProvider;
			
 
				+
			
 
				+type FormFieldContextValue<
			
 
				+  TFieldValues extends FieldValues = FieldValues,
			
 
				+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
			
 
				+> = {
			
 
				+  name: TName;
			
 
				+};
			
 
				+
			
 
				+const FormFieldContext = React.createContext<FormFieldContextValue>(
			
 
				+  {} as FormFieldContextValue
			
 
				+);
			
 
				+
			
 
				+const FormField = <
			
 
				+  TFieldValues extends FieldValues = FieldValues,
			
 
				+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
			
 
				+>({
			
 
				+  ...props
			
 
				+}: ControllerProps<TFieldValues, TName>) => {
			
 
				+  return (
			
 
				+    <FormFieldContext.Provider value={{ name: props.name }}>
			
 
				+      <Controller {...props} />
			
 
				+    </FormFieldContext.Provider>
			
 
				+  );
			
 
				+};
			
 
				+
			
 
				+const useFormField = () => {
			
 
				+  const fieldContext = React.useContext(FormFieldContext);
			
 
				+  const itemContext = React.useContext(FormItemContext);
			
 
				+  const { getFieldState } = useFormContext();
			
 
				+  const formState = useFormState({ name: fieldContext.name });
			
 
				+  const fieldState = getFieldState(fieldContext.name, formState);
			
 
				+
			
 
				+  if (!fieldContext) {
			
 
				+    throw new Error("useFormField should be used within <FormField>");
			
 
				+  }
			
 
				+
			
 
				+  const { id } = itemContext;
			
 
				+
			
 
				+  return {
			
 
				+    id,
			
 
				+    name: fieldContext.name,
			
 
				+    formItemId: `${id}-form-item`,
			
 
				+    formDescriptionId: `${id}-form-item-description`,
			
 
				+    formMessageId: `${id}-form-item-message`,
			
 
				+    ...fieldState,
			
 
				+  };
			
 
				+};
			
 
				+
			
 
				+type FormItemContextValue = {
			
 
				+  id: string;
			
 
				+};
			
 
				+
			
 
				+const FormItemContext = React.createContext<FormItemContextValue>(
			
 
				+  {} as FormItemContextValue
			
 
				+);
			
 
				+
			
 
				+function FormItem({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  const id = React.useId();
			
 
				+
			
 
				+  return (
			
 
				+    <FormItemContext.Provider value={{ id }}>
			
 
				+      <div
			
 
				+        data-slot="form-item"
			
 
				+        className={cn("grid gap-2", className)}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </FormItemContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FormLabel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
			
 
				+  const { error, formItemId } = useFormField();
			
 
				+
			
 
				+  return (
			
 
				+    <Label
			
 
				+      data-slot="form-label"
			
 
				+      data-error={!!error}
			
 
				+      className={cn("data-[error=true]:text-destructive", className)}
			
 
				+      htmlFor={formItemId}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
			
 
				+  const { error, formItemId, formDescriptionId, formMessageId } =
			
 
				+    useFormField();
			
 
				+
			
 
				+  return (
			
 
				+    <Slot
			
 
				+      data-slot="form-control"
			
 
				+      id={formItemId}
			
 
				+      aria-describedby={
			
 
				+        !error
			
 
				+          ? `${formDescriptionId}`
			
 
				+          : `${formDescriptionId} ${formMessageId}`
			
 
				+      }
			
 
				+      aria-invalid={!!error}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
			
 
				+  const { formDescriptionId } = useFormField();
			
 
				+
			
 
				+  return (
			
 
				+    <p
			
 
				+      data-slot="form-description"
			
 
				+      id={formDescriptionId}
			
 
				+      className={cn("text-muted-foreground text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
			
 
				+  const { error, formMessageId } = useFormField();
			
 
				+  const body = error ? String(error?.message ?? "") : props.children;
			
 
				+
			
 
				+  if (!body) {
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <p
			
 
				+      data-slot="form-message"
			
 
				+      id={formMessageId}
			
 
				+      className={cn("text-destructive text-sm", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {body}
			
 
				+    </p>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  useFormField,
			
 
				+  Form,
			
 
				+  FormItem,
			
 
				+  FormLabel,
			
 
				+  FormControl,
			
 
				+  FormDescription,
			
 
				+  FormMessage,
			
 
				+  FormField,
			
 
				+};
			
--- a/client/src/components/ui/hover-card.tsx
+++ b/client/src/components/ui/hover-card.tsx
@@ -0,0 +1,42 @@
 
				+import * as React from "react";
			
 
				+import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function HoverCard({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
			
 
				+  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function HoverCardTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function HoverCardContent({
			
 
				+  className,
			
 
				+  align = "center",
			
 
				+  sideOffset = 4,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
			
 
				+      <HoverCardPrimitive.Content
			
 
				+        data-slot="hover-card-content"
			
 
				+        align={align}
			
 
				+        sideOffset={sideOffset}
			
 
				+        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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </HoverCardPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { HoverCard, HoverCardTrigger, HoverCardContent };
			
--- a/client/src/components/ui/input-group.tsx
+++ b/client/src/components/ui/input-group.tsx
@@ -0,0 +1,168 @@
 
				+import * as React from "react";
			
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Textarea } from "@/components/ui/textarea";
			
 
				+
			
 
				+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="input-group"
			
 
				+      role="group"
			
 
				+      className={cn(
			
 
				+        "group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none",
			
 
				+        "h-9 min-w-0 has-[>textarea]:h-auto",
			
 
				+
			
 
				+        // Variants based on alignment.
			
 
				+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
			
 
				+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
			
 
				+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
			
 
				+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
			
 
				+
			
 
				+        // Focus state.
			
 
				+        "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]",
			
 
				+
			
 
				+        // Error state.
			
 
				+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
			
 
				+
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const inputGroupAddonVariants = cva(
			
 
				+  "text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      align: {
			
 
				+        "inline-start":
			
 
				+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
			
 
				+        "inline-end":
			
 
				+          "order-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]",
			
 
				+        "block-start":
			
 
				+          "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
			
 
				+        "block-end":
			
 
				+          "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      align: "inline-start",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function InputGroupAddon({
			
 
				+  className,
			
 
				+  align = "inline-start",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="group"
			
 
				+      data-slot="input-group-addon"
			
 
				+      data-align={align}
			
 
				+      className={cn(inputGroupAddonVariants({ align }), className)}
			
 
				+      onClick={e => {
			
 
				+        if ((e.target as HTMLElement).closest("button")) {
			
 
				+          return;
			
 
				+        }
			
 
				+        e.currentTarget.parentElement?.querySelector("input")?.focus();
			
 
				+      }}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const inputGroupButtonVariants = cva(
			
 
				+  "text-sm shadow-none flex gap-2 items-center",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      size: {
			
 
				+        xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
			
 
				+        sm: "h-8 px-2.5 gap-1.5 rounded-md has-[>svg]:px-2.5",
			
 
				+        "icon-xs":
			
 
				+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
			
 
				+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      size: "xs",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function InputGroupButton({
			
 
				+  className,
			
 
				+  type = "button",
			
 
				+  variant = "ghost",
			
 
				+  size = "xs",
			
 
				+  ...props
			
 
				+}: Omit<React.ComponentProps<typeof Button>, "size"> &
			
 
				+  VariantProps<typeof inputGroupButtonVariants>) {
			
 
				+  return (
			
 
				+    <Button
			
 
				+      type={type}
			
 
				+      data-size={size}
			
 
				+      variant={variant}
			
 
				+      className={cn(inputGroupButtonVariants({ size }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputGroupInput({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"input">) {
			
 
				+  return (
			
 
				+    <Input
			
 
				+      data-slot="input-group-control"
			
 
				+      className={cn(
			
 
				+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputGroupTextarea({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"textarea">) {
			
 
				+  return (
			
 
				+    <Textarea
			
 
				+      data-slot="input-group-control"
			
 
				+      className={cn(
			
 
				+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  InputGroup,
			
 
				+  InputGroupAddon,
			
 
				+  InputGroupButton,
			
 
				+  InputGroupText,
			
 
				+  InputGroupInput,
			
 
				+  InputGroupTextarea,
			
 
				+};
			
--- a/client/src/components/ui/input-otp.tsx
+++ b/client/src/components/ui/input-otp.tsx
@@ -0,0 +1,75 @@
 
				+import * as React from "react";
			
 
				+import { OTPInput, OTPInputContext } from "input-otp";
			
 
				+import { MinusIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function InputOTP({
			
 
				+  className,
			
 
				+  containerClassName,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof OTPInput> & {
			
 
				+  containerClassName?: string;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <OTPInput
			
 
				+      data-slot="input-otp"
			
 
				+      containerClassName={cn(
			
 
				+        "flex items-center gap-2 has-disabled:opacity-50",
			
 
				+        containerClassName
			
 
				+      )}
			
 
				+      className={cn("disabled:cursor-not-allowed", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="input-otp-group"
			
 
				+      className={cn("flex items-center", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputOTPSlot({
			
 
				+  index,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  index: number;
			
 
				+}) {
			
 
				+  const inputOTPContext = React.useContext(OTPInputContext);
			
 
				+  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="input-otp-slot"
			
 
				+      data-active={isActive}
			
 
				+      className={cn(
			
 
				+        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {char}
			
 
				+      {hasFakeCaret && (
			
 
				+        <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
			
 
				+          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
			
 
				+        </div>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div data-slot="input-otp-separator" role="separator" {...props}>
			
 
				+      <MinusIcon />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator };
			
--- a/client/src/components/ui/input.tsx
+++ b/client/src/components/ui/input.tsx
@@ -0,0 +1,70 @@
 
				+import { useDialogComposition } from "@/components/ui/dialog";
			
 
				+import { useComposition } from "@/hooks/useComposition";
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import * as React from "react";
			
 
				+
			
 
				+function Input({
			
 
				+  className,
			
 
				+  type,
			
 
				+  onKeyDown,
			
 
				+  onCompositionStart,
			
 
				+  onCompositionEnd,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"input">) {
			
 
				+  // Get dialog composition context if available (will be no-op if not inside Dialog)
			
 
				+  const dialogComposition = useDialogComposition();
			
 
				+
			
 
				+  // Add composition event handlers to support input method editor (IME) for CJK languages.
			
 
				+  const {
			
 
				+    onCompositionStart: handleCompositionStart,
			
 
				+    onCompositionEnd: handleCompositionEnd,
			
 
				+    onKeyDown: handleKeyDown,
			
 
				+  } = useComposition<HTMLInputElement>({
			
 
				+    onKeyDown: (e) => {
			
 
				+      // Check if this is an Enter key that should be blocked
			
 
				+      const isComposing = (e.nativeEvent as any).isComposing || dialogComposition.justEndedComposing();
			
 
				+
			
 
				+      // If Enter key is pressed while composing or just after composition ended,
			
 
				+      // don't call the user's onKeyDown (this blocks the business logic)
			
 
				+      if (e.key === "Enter" && isComposing) {
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      // Otherwise, call the user's onKeyDown
			
 
				+      onKeyDown?.(e);
			
 
				+    },
			
 
				+    onCompositionStart: e => {
			
 
				+      dialogComposition.setComposing(true);
			
 
				+      onCompositionStart?.(e);
			
 
				+    },
			
 
				+    onCompositionEnd: e => {
			
 
				+      // Mark that composition just ended - this helps handle the Enter key that confirms input
			
 
				+      dialogComposition.markCompositionEnd();
			
 
				+      // Delay setting composing to false to handle Safari's event order
			
 
				+      // In Safari, compositionEnd fires before the ESC keydown event
			
 
				+      setTimeout(() => {
			
 
				+        dialogComposition.setComposing(false);
			
 
				+      }, 100);
			
 
				+      onCompositionEnd?.(e);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  return (
			
 
				+    <input
			
 
				+      type={type}
			
 
				+      data-slot="input"
			
 
				+      className={cn(
			
 
				+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
			
 
				+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
			
 
				+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
			
 
				+        className
			
 
				+      )}
			
 
				+      onCompositionStart={handleCompositionStart}
			
 
				+      onCompositionEnd={handleCompositionEnd}
			
 
				+      onKeyDown={handleKeyDown}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Input };
			
--- a/client/src/components/ui/item.tsx
+++ b/client/src/components/ui/item.tsx
@@ -0,0 +1,193 @@
 
				+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";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+
			
 
				+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      role="list"
			
 
				+      data-slot="item-group"
			
 
				+      className={cn("group/item-group flex flex-col", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Separator>) {
			
 
				+  return (
			
 
				+    <Separator
			
 
				+      data-slot="item-separator"
			
 
				+      orientation="horizontal"
			
 
				+      className={cn("my-0", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const itemVariants = cva(
			
 
				+  "group/item flex items-center border border-transparent text-sm rounded-md transition-colors [a]:hover:bg-accent/50 [a]:transition-colors duration-100 flex-wrap outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-transparent",
			
 
				+        outline: "border-border",
			
 
				+        muted: "bg-muted/50",
			
 
				+      },
			
 
				+      size: {
			
 
				+        default: "p-4 gap-4 ",
			
 
				+        sm: "py-3 px-4 gap-2.5",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      variant: "default",
			
 
				+      size: "default",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function Item({
			
 
				+  className,
			
 
				+  variant = "default",
			
 
				+  size = "default",
			
 
				+  asChild = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> &
			
 
				+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
			
 
				+  const Comp = asChild ? Slot : "div";
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="item"
			
 
				+      data-variant={variant}
			
 
				+      data-size={size}
			
 
				+      className={cn(itemVariants({ variant, size, className }))}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const itemMediaVariants = cva(
			
 
				+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none group-has-[[data-slot=item-description]]/item:translate-y-0.5",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-transparent",
			
 
				+        icon: "size-8 border rounded-sm bg-muted [&_svg:not([class*='size-'])]:size-4",
			
 
				+        image:
			
 
				+          "size-10 rounded-sm overflow-hidden [&_img]:size-full [&_img]:object-cover",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      variant: "default",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function ItemMedia({
			
 
				+  className,
			
 
				+  variant = "default",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-media"
			
 
				+      data-variant={variant}
			
 
				+      className={cn(itemMediaVariants({ variant, className }))}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-content"
			
 
				+      className={cn(
			
 
				+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-title"
			
 
				+      className={cn(
			
 
				+        "flex w-fit items-center gap-2 text-sm leading-snug font-medium",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
			
 
				+  return (
			
 
				+    <p
			
 
				+      data-slot="item-description"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground line-clamp-2 text-sm leading-normal font-normal text-balance",
			
 
				+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-actions"
			
 
				+      className={cn("flex items-center gap-2", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-header"
			
 
				+      className={cn(
			
 
				+        "flex basis-full items-center justify-between gap-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="item-footer"
			
 
				+      className={cn(
			
 
				+        "flex basis-full items-center justify-between gap-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Item,
			
 
				+  ItemMedia,
			
 
				+  ItemContent,
			
 
				+  ItemActions,
			
 
				+  ItemGroup,
			
 
				+  ItemSeparator,
			
 
				+  ItemTitle,
			
 
				+  ItemDescription,
			
 
				+  ItemHeader,
			
 
				+  ItemFooter,
			
 
				+};
			
--- a/client/src/components/ui/kbd.tsx
+++ b/client/src/components/ui/kbd.tsx
@@ -0,0 +1,28 @@
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
			
 
				+  return (
			
 
				+    <kbd
			
 
				+      data-slot="kbd"
			
 
				+      className={cn(
			
 
				+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium select-none",
			
 
				+        "[&_svg:not([class*='size-'])]:size-3",
			
 
				+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <kbd
			
 
				+      data-slot="kbd-group"
			
 
				+      className={cn("inline-flex items-center gap-1", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Kbd, KbdGroup };
			
--- a/client/src/components/ui/label.tsx
+++ b/client/src/components/ui/label.tsx
@@ -0,0 +1,22 @@
 
				+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-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Label };
			
--- a/client/src/components/ui/menubar.tsx
+++ b/client/src/components/ui/menubar.tsx
@@ -0,0 +1,274 @@
 
				+import * as React from "react";
			
 
				+import * as MenubarPrimitive from "@radix-ui/react-menubar";
			
 
				+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Menubar({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.Root
			
 
				+      data-slot="menubar"
			
 
				+      className={cn(
			
 
				+        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarMenu({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
			
 
				+  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function MenubarGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Group>) {
			
 
				+  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function MenubarPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
			
 
				+  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function MenubarRadioGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarTrigger({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.Trigger
			
 
				+      data-slot="menubar-trigger"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarContent({
			
 
				+  className,
			
 
				+  align = "start",
			
 
				+  alignOffset = -4,
			
 
				+  sideOffset = 8,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <MenubarPortal>
			
 
				+      <MenubarPrimitive.Content
			
 
				+        data-slot="menubar-content"
			
 
				+        align={align}
			
 
				+        alignOffset={alignOffset}
			
 
				+        sideOffset={sideOffset}
			
 
				+        className={cn(
			
 
				+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </MenubarPortal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarItem({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  variant = "default",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
			
 
				+  inset?: boolean;
			
 
				+  variant?: "default" | "destructive";
			
 
				+}) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.Item
			
 
				+      data-slot="menubar-item"
			
 
				+      data-inset={inset}
			
 
				+      data-variant={variant}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarCheckboxItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  checked,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.CheckboxItem
			
 
				+      data-slot="menubar-checkbox-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      checked={checked}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <MenubarPrimitive.ItemIndicator>
			
 
				+          <CheckIcon className="size-4" />
			
 
				+        </MenubarPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </MenubarPrimitive.CheckboxItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarRadioItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.RadioItem
			
 
				+      data-slot="menubar-radio-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
			
 
				+        <MenubarPrimitive.ItemIndicator>
			
 
				+          <CircleIcon className="size-2 fill-current" />
			
 
				+        </MenubarPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      {children}
			
 
				+    </MenubarPrimitive.RadioItem>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarLabel({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.Label
			
 
				+      data-slot="menubar-label"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.Separator
			
 
				+      data-slot="menubar-separator"
			
 
				+      className={cn("bg-border -mx-1 my-1 h-px", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarShortcut({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      data-slot="menubar-shortcut"
			
 
				+      className={cn(
			
 
				+        "text-muted-foreground ml-auto text-xs tracking-widest",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarSub({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.Sub>) {
			
 
				+  return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function MenubarSubTrigger({
			
 
				+  className,
			
 
				+  inset,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
			
 
				+  inset?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.SubTrigger
			
 
				+      data-slot="menubar-sub-trigger"
			
 
				+      data-inset={inset}
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <ChevronRightIcon className="ml-auto h-4 w-4" />
			
 
				+    </MenubarPrimitive.SubTrigger>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function MenubarSubContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
			
 
				+  return (
			
 
				+    <MenubarPrimitive.SubContent
			
 
				+      data-slot="menubar-sub-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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Menubar,
			
 
				+  MenubarPortal,
			
 
				+  MenubarMenu,
			
 
				+  MenubarTrigger,
			
 
				+  MenubarContent,
			
 
				+  MenubarGroup,
			
 
				+  MenubarSeparator,
			
 
				+  MenubarLabel,
			
 
				+  MenubarItem,
			
 
				+  MenubarShortcut,
			
 
				+  MenubarCheckboxItem,
			
 
				+  MenubarRadioGroup,
			
 
				+  MenubarRadioItem,
			
 
				+  MenubarSub,
			
 
				+  MenubarSubTrigger,
			
 
				+  MenubarSubContent,
			
 
				+};
			
--- a/client/src/components/ui/navigation-menu.tsx
+++ b/client/src/components/ui/navigation-menu.tsx
@@ -0,0 +1,168 @@
 
				+import * as React from "react";
			
 
				+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
			
 
				+import { cva } from "class-variance-authority";
			
 
				+import { ChevronDownIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function NavigationMenu({
			
 
				+  className,
			
 
				+  children,
			
 
				+  viewport = true,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
			
 
				+  viewport?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Root
			
 
				+      data-slot="navigation-menu"
			
 
				+      data-viewport={viewport}
			
 
				+      className={cn(
			
 
				+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      {viewport && <NavigationMenuViewport />}
			
 
				+    </NavigationMenuPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuList({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.List
			
 
				+      data-slot="navigation-menu-list"
			
 
				+      className={cn(
			
 
				+        "group flex flex-1 list-none items-center justify-center gap-1",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuItem({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Item
			
 
				+      data-slot="navigation-menu-item"
			
 
				+      className={cn("relative", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const navigationMenuTriggerStyle = cva(
			
 
				+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
			
 
				+);
			
 
				+
			
 
				+function NavigationMenuTrigger({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Trigger
			
 
				+      data-slot="navigation-menu-trigger"
			
 
				+      className={cn(navigationMenuTriggerStyle(), "group", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}{" "}
			
 
				+      <ChevronDownIcon
			
 
				+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
			
 
				+        aria-hidden="true"
			
 
				+      />
			
 
				+    </NavigationMenuPrimitive.Trigger>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Content
			
 
				+      data-slot="navigation-menu-content"
			
 
				+      className={cn(
			
 
				+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
			
 
				+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuViewport({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      className={cn(
			
 
				+        "absolute top-full left-0 isolate z-50 flex justify-center"
			
 
				+      )}
			
 
				+    >
			
 
				+      <NavigationMenuPrimitive.Viewport
			
 
				+        data-slot="navigation-menu-viewport"
			
 
				+        className={cn(
			
 
				+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuLink({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Link
			
 
				+      data-slot="navigation-menu-link"
			
 
				+      className={cn(
			
 
				+        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function NavigationMenuIndicator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
			
 
				+  return (
			
 
				+    <NavigationMenuPrimitive.Indicator
			
 
				+      data-slot="navigation-menu-indicator"
			
 
				+      className={cn(
			
 
				+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
			
 
				+    </NavigationMenuPrimitive.Indicator>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  NavigationMenu,
			
 
				+  NavigationMenuList,
			
 
				+  NavigationMenuItem,
			
 
				+  NavigationMenuContent,
			
 
				+  NavigationMenuTrigger,
			
 
				+  NavigationMenuLink,
			
 
				+  NavigationMenuIndicator,
			
 
				+  NavigationMenuViewport,
			
 
				+  navigationMenuTriggerStyle,
			
 
				+};
			
--- a/client/src/components/ui/pagination.tsx
+++ b/client/src/components/ui/pagination.tsx
@@ -0,0 +1,127 @@
 
				+import * as React from "react";
			
 
				+import {
			
 
				+  ChevronLeftIcon,
			
 
				+  ChevronRightIcon,
			
 
				+  MoreHorizontalIcon,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Button, buttonVariants } from "@/components/ui/button";
			
 
				+
			
 
				+function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
			
 
				+  return (
			
 
				+    <nav
			
 
				+      role="navigation"
			
 
				+      aria-label="pagination"
			
 
				+      data-slot="pagination"
			
 
				+      className={cn("mx-auto flex w-full justify-center", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PaginationContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"ul">) {
			
 
				+  return (
			
 
				+    <ul
			
 
				+      data-slot="pagination-content"
			
 
				+      className={cn("flex flex-row items-center gap-1", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PaginationItem({ ...props }: React.ComponentProps<"li">) {
			
 
				+  return <li data-slot="pagination-item" {...props} />;
			
 
				+}
			
 
				+
			
 
				+type PaginationLinkProps = {
			
 
				+  isActive?: boolean;
			
 
				+} & Pick<React.ComponentProps<typeof Button>, "size"> &
			
 
				+  React.ComponentProps<"a">;
			
 
				+
			
 
				+function PaginationLink({
			
 
				+  className,
			
 
				+  isActive,
			
 
				+  size = "icon",
			
 
				+  ...props
			
 
				+}: PaginationLinkProps) {
			
 
				+  return (
			
 
				+    <a
			
 
				+      aria-current={isActive ? "page" : undefined}
			
 
				+      data-slot="pagination-link"
			
 
				+      data-active={isActive}
			
 
				+      className={cn(
			
 
				+        buttonVariants({
			
 
				+          variant: isActive ? "outline" : "ghost",
			
 
				+          size,
			
 
				+        }),
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PaginationPrevious({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PaginationLink>) {
			
 
				+  return (
			
 
				+    <PaginationLink
			
 
				+      aria-label="Go to previous page"
			
 
				+      size="default"
			
 
				+      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ChevronLeftIcon />
			
 
				+      <span className="hidden sm:block">Previous</span>
			
 
				+    </PaginationLink>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PaginationNext({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PaginationLink>) {
			
 
				+  return (
			
 
				+    <PaginationLink
			
 
				+      aria-label="Go to next page"
			
 
				+      size="default"
			
 
				+      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="hidden sm:block">Next</span>
			
 
				+      <ChevronRightIcon />
			
 
				+    </PaginationLink>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PaginationEllipsis({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"span">) {
			
 
				+  return (
			
 
				+    <span
			
 
				+      aria-hidden
			
 
				+      data-slot="pagination-ellipsis"
			
 
				+      className={cn("flex size-9 items-center justify-center", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <MoreHorizontalIcon className="size-4" />
			
 
				+      <span className="sr-only">More pages</span>
			
 
				+    </span>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Pagination,
			
 
				+  PaginationContent,
			
 
				+  PaginationLink,
			
 
				+  PaginationItem,
			
 
				+  PaginationPrevious,
			
 
				+  PaginationNext,
			
 
				+  PaginationEllipsis,
			
 
				+};
			
--- a/client/src/components/ui/popover.tsx
+++ b/client/src/components/ui/popover.tsx
@@ -0,0 +1,46 @@
 
				+import * as React from "react";
			
 
				+import * as PopoverPrimitive from "@radix-ui/react-popover";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Popover({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
			
 
				+  return <PopoverPrimitive.Root data-slot="popover" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function PopoverTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
			
 
				+  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function PopoverContent({
			
 
				+  className,
			
 
				+  align = "center",
			
 
				+  sideOffset = 4,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <PopoverPrimitive.Portal>
			
 
				+      <PopoverPrimitive.Content
			
 
				+        data-slot="popover-content"
			
 
				+        align={align}
			
 
				+        sideOffset={sideOffset}
			
 
				+        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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </PopoverPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function PopoverAnchor({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
			
 
				+  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />;
			
 
				+}
			
 
				+
			
 
				+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
			
--- a/client/src/components/ui/progress.tsx
+++ b/client/src/components/ui/progress.tsx
@@ -0,0 +1,29 @@
 
				+import * as React from "react";
			
 
				+import * as ProgressPrimitive from "@radix-ui/react-progress";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Progress({
			
 
				+  className,
			
 
				+  value,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <ProgressPrimitive.Root
			
 
				+      data-slot="progress"
			
 
				+      className={cn(
			
 
				+        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ProgressPrimitive.Indicator
			
 
				+        data-slot="progress-indicator"
			
 
				+        className="bg-primary h-full w-full flex-1 transition-all"
			
 
				+        style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
			
 
				+      />
			
 
				+    </ProgressPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Progress };
			
--- a/client/src/components/ui/radio-group.tsx
+++ b/client/src/components/ui/radio-group.tsx
@@ -0,0 +1,43 @@
 
				+import * as React from "react";
			
 
				+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
			
 
				+import { CircleIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function RadioGroup({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <RadioGroupPrimitive.Root
			
 
				+      data-slot="radio-group"
			
 
				+      className={cn("grid gap-3", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function RadioGroupItem({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
			
 
				+  return (
			
 
				+    <RadioGroupPrimitive.Item
			
 
				+      data-slot="radio-group-item"
			
 
				+      className={cn(
			
 
				+        "border-input text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <RadioGroupPrimitive.Indicator
			
 
				+        data-slot="radio-group-indicator"
			
 
				+        className="relative flex items-center justify-center"
			
 
				+      >
			
 
				+        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
			
 
				+      </RadioGroupPrimitive.Indicator>
			
 
				+    </RadioGroupPrimitive.Item>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { RadioGroup, RadioGroupItem };
			
--- a/client/src/components/ui/resizable.tsx
+++ b/client/src/components/ui/resizable.tsx
@@ -0,0 +1,54 @@
 
				+import * as React from "react";
			
 
				+import { GripVerticalIcon } from "lucide-react";
			
 
				+import * as ResizablePrimitive from "react-resizable-panels";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function ResizablePanelGroup({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
			
 
				+  return (
			
 
				+    <ResizablePrimitive.PanelGroup
			
 
				+      data-slot="resizable-panel-group"
			
 
				+      className={cn(
			
 
				+        "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ResizablePanel({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
			
 
				+  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function ResizableHandle({
			
 
				+  withHandle,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
			
 
				+  withHandle?: boolean;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <ResizablePrimitive.PanelResizeHandle
			
 
				+      data-slot="resizable-handle"
			
 
				+      className={cn(
			
 
				+        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {withHandle && (
			
 
				+        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
			
 
				+          <GripVerticalIcon className="size-2.5" />
			
 
				+        </div>
			
 
				+      )}
			
 
				+    </ResizablePrimitive.PanelResizeHandle>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
			
--- a/client/src/components/ui/scroll-area.tsx
+++ b/client/src/components/ui/scroll-area.tsx
@@ -0,0 +1,56 @@
 
				+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 };
			
--- a/client/src/components/ui/select.tsx
+++ b/client/src/components/ui/select.tsx
@@ -0,0 +1,185 @@
 
				+import * as React from "react";
			
 
				+import * as SelectPrimitive from "@radix-ui/react-select";
			
 
				+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Select({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
			
 
				+  return <SelectPrimitive.Root data-slot="select" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SelectGroup({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
			
 
				+  return <SelectPrimitive.Group data-slot="select-group" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SelectValue({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
			
 
				+  return <SelectPrimitive.Value data-slot="select-value" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SelectTrigger({
			
 
				+  className,
			
 
				+  size = "default",
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
			
 
				+  size?: "sm" | "default";
			
 
				+}) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.Trigger
			
 
				+      data-slot="select-trigger"
			
 
				+      data-size={size}
			
 
				+      className={cn(
			
 
				+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+      <SelectPrimitive.Icon asChild>
			
 
				+        <ChevronDownIcon className="size-4 opacity-50" />
			
 
				+      </SelectPrimitive.Icon>
			
 
				+    </SelectPrimitive.Trigger>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectContent({
			
 
				+  className,
			
 
				+  children,
			
 
				+  position = "popper",
			
 
				+  align = "center",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.Portal>
			
 
				+      <SelectPrimitive.Content
			
 
				+        data-slot="select-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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
			
 
				+          position === "popper" &&
			
 
				+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
			
 
				+          className
			
 
				+        )}
			
 
				+        position={position}
			
 
				+        align={align}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        <SelectScrollUpButton />
			
 
				+        <SelectPrimitive.Viewport
			
 
				+          className={cn(
			
 
				+            "p-1",
			
 
				+            position === "popper" &&
			
 
				+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
			
 
				+          )}
			
 
				+        >
			
 
				+          {children}
			
 
				+        </SelectPrimitive.Viewport>
			
 
				+        <SelectScrollDownButton />
			
 
				+      </SelectPrimitive.Content>
			
 
				+    </SelectPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectLabel({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.Label
			
 
				+      data-slot="select-label"
			
 
				+      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.Item
			
 
				+      data-slot="select-item"
			
 
				+      className={cn(
			
 
				+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
			
 
				+        <SelectPrimitive.ItemIndicator>
			
 
				+          <CheckIcon className="size-4" />
			
 
				+        </SelectPrimitive.ItemIndicator>
			
 
				+      </span>
			
 
				+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
			
 
				+    </SelectPrimitive.Item>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.Separator
			
 
				+      data-slot="select-separator"
			
 
				+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectScrollUpButton({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.ScrollUpButton
			
 
				+      data-slot="select-scroll-up-button"
			
 
				+      className={cn(
			
 
				+        "flex cursor-default items-center justify-center py-1",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ChevronUpIcon className="size-4" />
			
 
				+    </SelectPrimitive.ScrollUpButton>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SelectScrollDownButton({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
			
 
				+  return (
			
 
				+    <SelectPrimitive.ScrollDownButton
			
 
				+      data-slot="select-scroll-down-button"
			
 
				+      className={cn(
			
 
				+        "flex cursor-default items-center justify-center py-1",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ChevronDownIcon className="size-4" />
			
 
				+    </SelectPrimitive.ScrollDownButton>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Select,
			
 
				+  SelectContent,
			
 
				+  SelectGroup,
			
 
				+  SelectItem,
			
 
				+  SelectLabel,
			
 
				+  SelectScrollDownButton,
			
 
				+  SelectScrollUpButton,
			
 
				+  SelectSeparator,
			
 
				+  SelectTrigger,
			
 
				+  SelectValue,
			
 
				+};
			
--- a/client/src/components/ui/separator.tsx
+++ b/client/src/components/ui/separator.tsx
@@ -0,0 +1,26 @@
 
				+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 };
			
--- a/client/src/components/ui/sheet.tsx
+++ b/client/src/components/ui/sheet.tsx
@@ -0,0 +1,139 @@
 
				+"use client";
			
 
				+
			
 
				+import * as React from "react";
			
 
				+import * as SheetPrimitive from "@radix-ui/react-dialog";
			
 
				+import { XIcon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
			
 
				+  return <SheetPrimitive.Root data-slot="sheet" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SheetTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
			
 
				+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SheetClose({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
			
 
				+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SheetPortal({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
			
 
				+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function SheetOverlay({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
			
 
				+  return (
			
 
				+    <SheetPrimitive.Overlay
			
 
				+      data-slot="sheet-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 SheetContent({
			
 
				+  className,
			
 
				+  children,
			
 
				+  side = "right",
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
			
 
				+  side?: "top" | "right" | "bottom" | "left";
			
 
				+}) {
			
 
				+  return (
			
 
				+    <SheetPortal>
			
 
				+      <SheetOverlay />
			
 
				+      <SheetPrimitive.Content
			
 
				+        data-slot="sheet-content"
			
 
				+        className={cn(
			
 
				+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
			
 
				+          side === "right" &&
			
 
				+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
			
 
				+          side === "left" &&
			
 
				+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
			
 
				+          side === "top" &&
			
 
				+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
			
 
				+          side === "bottom" &&
			
 
				+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
			
 
				+          <XIcon className="size-4" />
			
 
				+          <span className="sr-only">Close</span>
			
 
				+        </SheetPrimitive.Close>
			
 
				+      </SheetPrimitive.Content>
			
 
				+    </SheetPortal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sheet-header"
			
 
				+      className={cn("flex flex-col gap-1.5 p-4", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sheet-footer"
			
 
				+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SheetTitle({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
			
 
				+  return (
			
 
				+    <SheetPrimitive.Title
			
 
				+      data-slot="sheet-title"
			
 
				+      className={cn("text-foreground font-semibold", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SheetDescription({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
			
 
				+  return (
			
 
				+    <SheetPrimitive.Description
			
 
				+      data-slot="sheet-description"
			
 
				+      className={cn("text-muted-foreground text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Sheet,
			
 
				+  SheetTrigger,
			
 
				+  SheetClose,
			
 
				+  SheetContent,
			
 
				+  SheetHeader,
			
 
				+  SheetFooter,
			
 
				+  SheetTitle,
			
 
				+  SheetDescription,
			
 
				+};
			
--- a/client/src/components/ui/sidebar.tsx
+++ b/client/src/components/ui/sidebar.tsx
@@ -0,0 +1,734 @@
 
				+"use client";
			
 
				+
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+import {
			
 
				+  Sheet,
			
 
				+  SheetContent,
			
 
				+  SheetDescription,
			
 
				+  SheetHeader,
			
 
				+  SheetTitle,
			
 
				+} from "@/components/ui/sheet";
			
 
				+import { Skeleton } from "@/components/ui/skeleton";
			
 
				+import {
			
 
				+  Tooltip,
			
 
				+  TooltipContent,
			
 
				+  TooltipProvider,
			
 
				+  TooltipTrigger,
			
 
				+} from "@/components/ui/tooltip";
			
 
				+import { useIsMobile } from "@/hooks/useMobile";
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { Slot } from "@radix-ui/react-slot";
			
 
				+import { cva, VariantProps } from "class-variance-authority";
			
 
				+import { PanelLeftIcon } from "lucide-react";
			
 
				+import * as React from "react";
			
 
				+
			
 
				+const SIDEBAR_COOKIE_NAME = "sidebar_state";
			
 
				+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
			
 
				+const SIDEBAR_WIDTH = "16rem";
			
 
				+const SIDEBAR_WIDTH_MOBILE = "18rem";
			
 
				+const SIDEBAR_WIDTH_ICON = "3rem";
			
 
				+const SIDEBAR_KEYBOARD_SHORTCUT = "b";
			
 
				+
			
 
				+type SidebarContextProps = {
			
 
				+  state: "expanded" | "collapsed";
			
 
				+  open: boolean;
			
 
				+  setOpen: (open: boolean) => void;
			
 
				+  openMobile: boolean;
			
 
				+  setOpenMobile: (open: boolean) => void;
			
 
				+  isMobile: boolean;
			
 
				+  toggleSidebar: () => void;
			
 
				+};
			
 
				+
			
 
				+const SidebarContext = React.createContext<SidebarContextProps | null>(null);
			
 
				+
			
 
				+function useSidebar() {
			
 
				+  const context = React.useContext(SidebarContext);
			
 
				+  if (!context) {
			
 
				+    throw new Error("useSidebar must be used within a SidebarProvider.");
			
 
				+  }
			
 
				+
			
 
				+  return context;
			
 
				+}
			
 
				+
			
 
				+function SidebarProvider({
			
 
				+  defaultOpen = true,
			
 
				+  open: openProp,
			
 
				+  onOpenChange: setOpenProp,
			
 
				+  className,
			
 
				+  style,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  defaultOpen?: boolean;
			
 
				+  open?: boolean;
			
 
				+  onOpenChange?: (open: boolean) => void;
			
 
				+}) {
			
 
				+  const isMobile = useIsMobile();
			
 
				+  const [openMobile, setOpenMobile] = React.useState(false);
			
 
				+
			
 
				+  // This is the internal state of the sidebar.
			
 
				+  // We use openProp and setOpenProp for control from outside the component.
			
 
				+  const [_open, _setOpen] = React.useState(defaultOpen);
			
 
				+  const open = openProp ?? _open;
			
 
				+  const setOpen = React.useCallback(
			
 
				+    (value: boolean | ((value: boolean) => boolean)) => {
			
 
				+      const openState = typeof value === "function" ? value(open) : value;
			
 
				+      if (setOpenProp) {
			
 
				+        setOpenProp(openState);
			
 
				+      } else {
			
 
				+        _setOpen(openState);
			
 
				+      }
			
 
				+
			
 
				+      // This sets the cookie to keep the sidebar state.
			
 
				+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
			
 
				+    },
			
 
				+    [setOpenProp, open]
			
 
				+  );
			
 
				+
			
 
				+  // Helper to toggle the sidebar.
			
 
				+  const toggleSidebar = React.useCallback(() => {
			
 
				+    return isMobile ? setOpenMobile(open => !open) : setOpen(open => !open);
			
 
				+  }, [isMobile, setOpen, setOpenMobile]);
			
 
				+
			
 
				+  // Adds a keyboard shortcut to toggle the sidebar.
			
 
				+  React.useEffect(() => {
			
 
				+    const handleKeyDown = (event: KeyboardEvent) => {
			
 
				+      if (
			
 
				+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
			
 
				+        (event.metaKey || event.ctrlKey)
			
 
				+      ) {
			
 
				+        event.preventDefault();
			
 
				+        toggleSidebar();
			
 
				+      }
			
 
				+    };
			
 
				+
			
 
				+    window.addEventListener("keydown", handleKeyDown);
			
 
				+    return () => window.removeEventListener("keydown", handleKeyDown);
			
 
				+  }, [toggleSidebar]);
			
 
				+
			
 
				+  // We add a state so that we can do data-state="expanded" or "collapsed".
			
 
				+  // This makes it easier to style the sidebar with Tailwind classes.
			
 
				+  const state = open ? "expanded" : "collapsed";
			
 
				+
			
 
				+  const contextValue = React.useMemo<SidebarContextProps>(
			
 
				+    () => ({
			
 
				+      state,
			
 
				+      open,
			
 
				+      setOpen,
			
 
				+      isMobile,
			
 
				+      openMobile,
			
 
				+      setOpenMobile,
			
 
				+      toggleSidebar,
			
 
				+    }),
			
 
				+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
			
 
				+  );
			
 
				+
			
 
				+  return (
			
 
				+    <SidebarContext.Provider value={contextValue}>
			
 
				+      <TooltipProvider delayDuration={0}>
			
 
				+        <div
			
 
				+          data-slot="sidebar-wrapper"
			
 
				+          style={
			
 
				+            {
			
 
				+              "--sidebar-width": SIDEBAR_WIDTH,
			
 
				+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
			
 
				+              ...style,
			
 
				+            } as React.CSSProperties
			
 
				+          }
			
 
				+          className={cn(
			
 
				+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
			
 
				+            className
			
 
				+          )}
			
 
				+          {...props}
			
 
				+        >
			
 
				+          {children}
			
 
				+        </div>
			
 
				+      </TooltipProvider>
			
 
				+    </SidebarContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function Sidebar({
			
 
				+  side = "left",
			
 
				+  variant = "sidebar",
			
 
				+  collapsible = "offcanvas",
			
 
				+  disableTransition = false,
			
 
				+  className,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  side?: "left" | "right";
			
 
				+  variant?: "sidebar" | "floating" | "inset";
			
 
				+  collapsible?: "offcanvas" | "icon" | "none";
			
 
				+  disableTransition?: boolean;
			
 
				+}) {
			
 
				+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
			
 
				+
			
 
				+  if (collapsible === "none") {
			
 
				+    return (
			
 
				+      <div
			
 
				+        data-slot="sidebar"
			
 
				+        className={cn(
			
 
				+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  if (isMobile) {
			
 
				+    return (
			
 
				+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
			
 
				+        <SheetContent
			
 
				+          data-sidebar="sidebar"
			
 
				+          data-slot="sidebar"
			
 
				+          data-mobile="true"
			
 
				+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
			
 
				+          style={
			
 
				+            {
			
 
				+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
			
 
				+            } as React.CSSProperties
			
 
				+          }
			
 
				+          side={side}
			
 
				+        >
			
 
				+          <SheetHeader className="sr-only">
			
 
				+            <SheetTitle>Sidebar</SheetTitle>
			
 
				+            <SheetDescription>Displays the mobile sidebar.</SheetDescription>
			
 
				+          </SheetHeader>
			
 
				+          <div className="flex h-full w-full flex-col">{children}</div>
			
 
				+        </SheetContent>
			
 
				+      </Sheet>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="group peer text-sidebar-foreground hidden md:block"
			
 
				+      data-state={state}
			
 
				+      data-collapsible={state === "collapsed" ? collapsible : ""}
			
 
				+      data-variant={variant}
			
 
				+      data-side={side}
			
 
				+      data-slot="sidebar"
			
 
				+    >
			
 
				+      {/* This is what handles the sidebar gap on desktop */}
			
 
				+      <div
			
 
				+        data-slot="sidebar-gap"
			
 
				+        className={cn(
			
 
				+          "relative w-(--sidebar-width) bg-transparent",
			
 
				+          disableTransition
			
 
				+            ? "transition-none"
			
 
				+            : "transition-[width] duration-200 ease-linear",
			
 
				+          "group-data-[collapsible=offcanvas]:w-0",
			
 
				+          "group-data-[side=right]:rotate-180",
			
 
				+          variant === "floating" || variant === "inset"
			
 
				+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
			
 
				+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
			
 
				+        )}
			
 
				+      />
			
 
				+      <div
			
 
				+        data-slot="sidebar-container"
			
 
				+        className={cn(
			
 
				+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) md:flex",
			
 
				+          disableTransition
			
 
				+            ? "transition-none"
			
 
				+            : "transition-[left,right,width] duration-200 ease-linear",
			
 
				+          side === "left"
			
 
				+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
			
 
				+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
			
 
				+          // Adjust the padding for floating and inset variants.
			
 
				+          variant === "floating" || variant === "inset"
			
 
				+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
			
 
				+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        <div
			
 
				+          data-sidebar="sidebar"
			
 
				+          data-slot="sidebar-inner"
			
 
				+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
			
 
				+        >
			
 
				+          {children}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarTrigger({
			
 
				+  className,
			
 
				+  onClick,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Button>) {
			
 
				+  const { toggleSidebar } = useSidebar();
			
 
				+
			
 
				+  return (
			
 
				+    <Button
			
 
				+      data-sidebar="trigger"
			
 
				+      data-slot="sidebar-trigger"
			
 
				+      variant="ghost"
			
 
				+      size="icon"
			
 
				+      className={cn("size-7", className)}
			
 
				+      onClick={event => {
			
 
				+        onClick?.(event);
			
 
				+        toggleSidebar();
			
 
				+      }}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <PanelLeftIcon />
			
 
				+      <span className="sr-only">Toggle Sidebar</span>
			
 
				+    </Button>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
			
 
				+  const { toggleSidebar } = useSidebar();
			
 
				+
			
 
				+  return (
			
 
				+    <button
			
 
				+      data-sidebar="rail"
			
 
				+      data-slot="sidebar-rail"
			
 
				+      aria-label="Toggle Sidebar"
			
 
				+      tabIndex={-1}
			
 
				+      onClick={toggleSidebar}
			
 
				+      title="Toggle Sidebar"
			
 
				+      className={cn(
			
 
				+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
			
 
				+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
			
 
				+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
			
 
				+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
			
 
				+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
			
 
				+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
			
 
				+  return (
			
 
				+    <main
			
 
				+      data-slot="sidebar-inset"
			
 
				+      className={cn(
			
 
				+        "bg-background relative flex w-full flex-1 flex-col",
			
 
				+        "md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarInput({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Input>) {
			
 
				+  return (
			
 
				+    <Input
			
 
				+      data-slot="sidebar-input"
			
 
				+      data-sidebar="input"
			
 
				+      className={cn("bg-background h-8 w-full shadow-none", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-header"
			
 
				+      data-sidebar="header"
			
 
				+      className={cn("flex flex-col gap-2 p-2", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-footer"
			
 
				+      data-sidebar="footer"
			
 
				+      className={cn("flex flex-col gap-2 p-2", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarSeparator({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof Separator>) {
			
 
				+  return (
			
 
				+    <Separator
			
 
				+      data-slot="sidebar-separator"
			
 
				+      data-sidebar="separator"
			
 
				+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-content"
			
 
				+      data-sidebar="content"
			
 
				+      className={cn(
			
 
				+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-group"
			
 
				+      data-sidebar="group"
			
 
				+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarGroupLabel({
			
 
				+  className,
			
 
				+  asChild = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
			
 
				+  const Comp = asChild ? Slot : "div";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="sidebar-group-label"
			
 
				+      data-sidebar="group-label"
			
 
				+      className={cn(
			
 
				+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
			
 
				+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarGroupAction({
			
 
				+  className,
			
 
				+  asChild = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
			
 
				+  const Comp = asChild ? Slot : "button";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="sidebar-group-action"
			
 
				+      data-sidebar="group-action"
			
 
				+      className={cn(
			
 
				+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
			
 
				+        // Increases the hit area of the button on mobile.
			
 
				+        "after:absolute after:-inset-2 md:after:hidden",
			
 
				+        "group-data-[collapsible=icon]:hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarGroupContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-group-content"
			
 
				+      data-sidebar="group-content"
			
 
				+      className={cn("w-full text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
			
 
				+  return (
			
 
				+    <ul
			
 
				+      data-slot="sidebar-menu"
			
 
				+      data-sidebar="menu"
			
 
				+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot="sidebar-menu-item"
			
 
				+      data-sidebar="menu-item"
			
 
				+      className={cn("group/menu-item relative", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+const sidebarMenuButtonVariants = cva(
			
 
				+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
			
 
				+        outline:
			
 
				+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
			
 
				+      },
			
 
				+      size: {
			
 
				+        default: "h-8 text-sm",
			
 
				+        sm: "h-7 text-xs",
			
 
				+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      variant: "default",
			
 
				+      size: "default",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function SidebarMenuButton({
			
 
				+  asChild = false,
			
 
				+  isActive = false,
			
 
				+  variant = "default",
			
 
				+  size = "default",
			
 
				+  tooltip,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"button"> & {
			
 
				+  asChild?: boolean;
			
 
				+  isActive?: boolean;
			
 
				+  tooltip?: string | React.ComponentProps<typeof TooltipContent>;
			
 
				+} & VariantProps<typeof sidebarMenuButtonVariants>) {
			
 
				+  const Comp = asChild ? Slot : "button";
			
 
				+  const { isMobile, state } = useSidebar();
			
 
				+
			
 
				+  const button = (
			
 
				+    <Comp
			
 
				+      data-slot="sidebar-menu-button"
			
 
				+      data-sidebar="menu-button"
			
 
				+      data-size={size}
			
 
				+      data-active={isActive}
			
 
				+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+
			
 
				+  if (!tooltip) {
			
 
				+    return button;
			
 
				+  }
			
 
				+
			
 
				+  if (typeof tooltip === "string") {
			
 
				+    tooltip = {
			
 
				+      children: tooltip,
			
 
				+    };
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <Tooltip>
			
 
				+      <TooltipTrigger asChild>{button}</TooltipTrigger>
			
 
				+      <TooltipContent
			
 
				+        side="right"
			
 
				+        align="center"
			
 
				+        hidden={state !== "collapsed" || isMobile}
			
 
				+        {...tooltip}
			
 
				+      />
			
 
				+    </Tooltip>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuAction({
			
 
				+  className,
			
 
				+  asChild = false,
			
 
				+  showOnHover = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"button"> & {
			
 
				+  asChild?: boolean;
			
 
				+  showOnHover?: boolean;
			
 
				+}) {
			
 
				+  const Comp = asChild ? Slot : "button";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="sidebar-menu-action"
			
 
				+      data-sidebar="menu-action"
			
 
				+      className={cn(
			
 
				+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
			
 
				+        // Increases the hit area of the button on mobile.
			
 
				+        "after:absolute after:-inset-2 md:after:hidden",
			
 
				+        "peer-data-[size=sm]/menu-button:top-1",
			
 
				+        "peer-data-[size=default]/menu-button:top-1.5",
			
 
				+        "peer-data-[size=lg]/menu-button:top-2.5",
			
 
				+        "group-data-[collapsible=icon]:hidden",
			
 
				+        showOnHover &&
			
 
				+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuBadge({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-menu-badge"
			
 
				+      data-sidebar="menu-badge"
			
 
				+      className={cn(
			
 
				+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
			
 
				+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
			
 
				+        "peer-data-[size=sm]/menu-button:top-1",
			
 
				+        "peer-data-[size=default]/menu-button:top-1.5",
			
 
				+        "peer-data-[size=lg]/menu-button:top-2.5",
			
 
				+        "group-data-[collapsible=icon]:hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuSkeleton({
			
 
				+  className,
			
 
				+  showIcon = false,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"div"> & {
			
 
				+  showIcon?: boolean;
			
 
				+}) {
			
 
				+  // Random width between 50 to 90%.
			
 
				+  const width = React.useMemo(() => {
			
 
				+    return `${Math.floor(Math.random() * 40) + 50}%`;
			
 
				+  }, []);
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="sidebar-menu-skeleton"
			
 
				+      data-sidebar="menu-skeleton"
			
 
				+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {showIcon && (
			
 
				+        <Skeleton
			
 
				+          className="size-4 rounded-md"
			
 
				+          data-sidebar="menu-skeleton-icon"
			
 
				+        />
			
 
				+      )}
			
 
				+      <Skeleton
			
 
				+        className="h-4 max-w-(--skeleton-width) flex-1"
			
 
				+        data-sidebar="menu-skeleton-text"
			
 
				+        style={
			
 
				+          {
			
 
				+            "--skeleton-width": width,
			
 
				+          } as React.CSSProperties
			
 
				+        }
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
			
 
				+  return (
			
 
				+    <ul
			
 
				+      data-slot="sidebar-menu-sub"
			
 
				+      data-sidebar="menu-sub"
			
 
				+      className={cn(
			
 
				+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
			
 
				+        "group-data-[collapsible=icon]:hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuSubItem({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"li">) {
			
 
				+  return (
			
 
				+    <li
			
 
				+      data-slot="sidebar-menu-sub-item"
			
 
				+      data-sidebar="menu-sub-item"
			
 
				+      className={cn("group/menu-sub-item relative", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function SidebarMenuSubButton({
			
 
				+  asChild = false,
			
 
				+  size = "md",
			
 
				+  isActive = false,
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"a"> & {
			
 
				+  asChild?: boolean;
			
 
				+  size?: "sm" | "md";
			
 
				+  isActive?: boolean;
			
 
				+}) {
			
 
				+  const Comp = asChild ? Slot : "a";
			
 
				+
			
 
				+  return (
			
 
				+    <Comp
			
 
				+      data-slot="sidebar-menu-sub-button"
			
 
				+      data-sidebar="menu-sub-button"
			
 
				+      data-size={size}
			
 
				+      data-active={isActive}
			
 
				+      className={cn(
			
 
				+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
			
 
				+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
			
 
				+        size === "sm" && "text-xs",
			
 
				+        size === "md" && "text-sm",
			
 
				+        "group-data-[collapsible=icon]:hidden",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Sidebar,
			
 
				+  SidebarContent,
			
 
				+  SidebarFooter,
			
 
				+  SidebarGroup,
			
 
				+  SidebarGroupAction,
			
 
				+  SidebarGroupContent,
			
 
				+  SidebarGroupLabel,
			
 
				+  SidebarHeader,
			
 
				+  SidebarInput,
			
 
				+  SidebarInset,
			
 
				+  SidebarMenu,
			
 
				+  SidebarMenuAction,
			
 
				+  SidebarMenuBadge,
			
 
				+  SidebarMenuButton,
			
 
				+  SidebarMenuItem,
			
 
				+  SidebarMenuSkeleton,
			
 
				+  SidebarMenuSub,
			
 
				+  SidebarMenuSubButton,
			
 
				+  SidebarMenuSubItem,
			
 
				+  SidebarProvider,
			
 
				+  SidebarRail,
			
 
				+  SidebarSeparator,
			
 
				+  SidebarTrigger,
			
 
				+  useSidebar
			
 
				+};
			
 
				+
			
--- a/client/src/components/ui/skeleton.tsx
+++ b/client/src/components/ui/skeleton.tsx
@@ -0,0 +1,13 @@
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="skeleton"
			
 
				+      className={cn("bg-accent animate-pulse rounded-md", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Skeleton };
			
--- a/client/src/components/ui/slider.tsx
+++ b/client/src/components/ui/slider.tsx
@@ -0,0 +1,61 @@
 
				+import * as React from "react";
			
 
				+import * as SliderPrimitive from "@radix-ui/react-slider";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Slider({
			
 
				+  className,
			
 
				+  defaultValue,
			
 
				+  value,
			
 
				+  min = 0,
			
 
				+  max = 100,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SliderPrimitive.Root>) {
			
 
				+  const _values = React.useMemo(
			
 
				+    () =>
			
 
				+      Array.isArray(value)
			
 
				+        ? value
			
 
				+        : Array.isArray(defaultValue)
			
 
				+          ? defaultValue
			
 
				+          : [min, max],
			
 
				+    [value, defaultValue, min, max]
			
 
				+  );
			
 
				+
			
 
				+  return (
			
 
				+    <SliderPrimitive.Root
			
 
				+      data-slot="slider"
			
 
				+      defaultValue={defaultValue}
			
 
				+      value={value}
			
 
				+      min={min}
			
 
				+      max={max}
			
 
				+      className={cn(
			
 
				+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <SliderPrimitive.Track
			
 
				+        data-slot="slider-track"
			
 
				+        className={cn(
			
 
				+          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
			
 
				+        )}
			
 
				+      >
			
 
				+        <SliderPrimitive.Range
			
 
				+          data-slot="slider-range"
			
 
				+          className={cn(
			
 
				+            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
			
 
				+          )}
			
 
				+        />
			
 
				+      </SliderPrimitive.Track>
			
 
				+      {Array.from({ length: _values.length }, (_, index) => (
			
 
				+        <SliderPrimitive.Thumb
			
 
				+          data-slot="slider-thumb"
			
 
				+          key={index}
			
 
				+          className="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
			
 
				+        />
			
 
				+      ))}
			
 
				+    </SliderPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Slider };
			
--- a/client/src/components/ui/sonner.tsx
+++ b/client/src/components/ui/sonner.tsx
@@ -0,0 +1,23 @@
 
				+import { useTheme } from "next-themes";
			
 
				+import { Toaster as Sonner, type ToasterProps } from "sonner";
			
 
				+
			
 
				+const Toaster = ({ ...props }: ToasterProps) => {
			
 
				+  const { theme = "system" } = useTheme();
			
 
				+
			
 
				+  return (
			
 
				+    <Sonner
			
 
				+      theme={theme as ToasterProps["theme"]}
			
 
				+      className="toaster group"
			
 
				+      style={
			
 
				+        {
			
 
				+          "--normal-bg": "var(--popover)",
			
 
				+          "--normal-text": "var(--popover-foreground)",
			
 
				+          "--normal-border": "var(--border)",
			
 
				+        } as React.CSSProperties
			
 
				+      }
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+};
			
 
				+
			
 
				+export { Toaster };
			
--- a/client/src/components/ui/spinner.tsx
+++ b/client/src/components/ui/spinner.tsx
@@ -0,0 +1,16 @@
 
				+import { Loader2Icon } from "lucide-react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
			
 
				+  return (
			
 
				+    <Loader2Icon
			
 
				+      role="status"
			
 
				+      aria-label="Loading"
			
 
				+      className={cn("size-4 animate-spin", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Spinner };
			
--- a/client/src/components/ui/switch.tsx
+++ b/client/src/components/ui/switch.tsx
@@ -0,0 +1,29 @@
 
				+import * as React from "react";
			
 
				+import * as SwitchPrimitive from "@radix-ui/react-switch";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Switch({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <SwitchPrimitive.Root
			
 
				+      data-slot="switch"
			
 
				+      className={cn(
			
 
				+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <SwitchPrimitive.Thumb
			
 
				+        data-slot="switch-thumb"
			
 
				+        className={cn(
			
 
				+          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
			
 
				+        )}
			
 
				+      />
			
 
				+    </SwitchPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Switch };
			
--- a/client/src/components/ui/table.tsx
+++ b/client/src/components/ui/table.tsx
@@ -0,0 +1,114 @@
 
				+import * as React from "react";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Table({ className, ...props }: React.ComponentProps<"table">) {
			
 
				+  return (
			
 
				+    <div
			
 
				+      data-slot="table-container"
			
 
				+      className="relative w-full overflow-x-auto"
			
 
				+    >
			
 
				+      <table
			
 
				+        data-slot="table"
			
 
				+        className={cn("w-full caption-bottom text-sm", className)}
			
 
				+        {...props}
			
 
				+      />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
			
 
				+  return (
			
 
				+    <thead
			
 
				+      data-slot="table-header"
			
 
				+      className={cn("[&_tr]:border-b", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
			
 
				+  return (
			
 
				+    <tbody
			
 
				+      data-slot="table-body"
			
 
				+      className={cn("[&_tr:last-child]:border-0", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
			
 
				+  return (
			
 
				+    <tfoot
			
 
				+      data-slot="table-footer"
			
 
				+      className={cn(
			
 
				+        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
			
 
				+  return (
			
 
				+    <tr
			
 
				+      data-slot="table-row"
			
 
				+      className={cn(
			
 
				+        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableHead({ className, ...props }: React.ComponentProps<"th">) {
			
 
				+  return (
			
 
				+    <th
			
 
				+      data-slot="table-head"
			
 
				+      className={cn(
			
 
				+        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableCell({ className, ...props }: React.ComponentProps<"td">) {
			
 
				+  return (
			
 
				+    <td
			
 
				+      data-slot="table-cell"
			
 
				+      className={cn(
			
 
				+        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TableCaption({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"caption">) {
			
 
				+  return (
			
 
				+    <caption
			
 
				+      data-slot="table-caption"
			
 
				+      className={cn("text-muted-foreground mt-4 text-sm", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export {
			
 
				+  Table,
			
 
				+  TableHeader,
			
 
				+  TableBody,
			
 
				+  TableFooter,
			
 
				+  TableHead,
			
 
				+  TableRow,
			
 
				+  TableCell,
			
 
				+  TableCaption,
			
 
				+};
			
--- a/client/src/components/ui/tabs.tsx
+++ b/client/src/components/ui/tabs.tsx
@@ -0,0 +1,64 @@
 
				+import * as React from "react";
			
 
				+import * as TabsPrimitive from "@radix-ui/react-tabs";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function Tabs({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TabsPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <TabsPrimitive.Root
			
 
				+      data-slot="tabs"
			
 
				+      className={cn("flex flex-col gap-2", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TabsList({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TabsPrimitive.List>) {
			
 
				+  return (
			
 
				+    <TabsPrimitive.List
			
 
				+      data-slot="tabs-list"
			
 
				+      className={cn(
			
 
				+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TabsTrigger({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
			
 
				+  return (
			
 
				+    <TabsPrimitive.Trigger
			
 
				+      data-slot="tabs-trigger"
			
 
				+      className={cn(
			
 
				+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TabsContent({
			
 
				+  className,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TabsPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <TabsPrimitive.Content
			
 
				+      data-slot="tabs-content"
			
 
				+      className={cn("flex-1 outline-none", className)}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Tabs, TabsList, TabsTrigger, TabsContent };
			
--- a/client/src/components/ui/textarea.tsx
+++ b/client/src/components/ui/textarea.tsx
@@ -0,0 +1,67 @@
 
				+import { useDialogComposition } from "@/components/ui/dialog";
			
 
				+import { useComposition } from "@/hooks/useComposition";
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import * as React from "react";
			
 
				+
			
 
				+function Textarea({
			
 
				+  className,
			
 
				+  onKeyDown,
			
 
				+  onCompositionStart,
			
 
				+  onCompositionEnd,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<"textarea">) {
			
 
				+  // Get dialog composition context if available (will be no-op if not inside Dialog)
			
 
				+  const dialogComposition = useDialogComposition();
			
 
				+
			
 
				+  // Add composition event handlers to support input method editor (IME) for CJK languages.
			
 
				+  const {
			
 
				+    onCompositionStart: handleCompositionStart,
			
 
				+    onCompositionEnd: handleCompositionEnd,
			
 
				+    onKeyDown: handleKeyDown,
			
 
				+  } = useComposition<HTMLTextAreaElement>({
			
 
				+    onKeyDown: (e) => {
			
 
				+      // Check if this is an Enter key that should be blocked
			
 
				+      const isComposing = (e.nativeEvent as any).isComposing || dialogComposition.justEndedComposing();
			
 
				+
			
 
				+      // If Enter key is pressed while composing or just after composition ended,
			
 
				+      // don't call the user's onKeyDown (this blocks the business logic)
			
 
				+      // Note: For textarea, Shift+Enter should still work for newlines
			
 
				+      if (e.key === "Enter" && !e.shiftKey && isComposing) {
			
 
				+        return;
			
 
				+      }
			
 
				+
			
 
				+      // Otherwise, call the user's onKeyDown
			
 
				+      onKeyDown?.(e);
			
 
				+    },
			
 
				+    onCompositionStart: e => {
			
 
				+      dialogComposition.setComposing(true);
			
 
				+      onCompositionStart?.(e);
			
 
				+    },
			
 
				+    onCompositionEnd: e => {
			
 
				+      // Mark that composition just ended - this helps handle the Enter key that confirms input
			
 
				+      dialogComposition.markCompositionEnd();
			
 
				+      // Delay setting composing to false to handle Safari's event order
			
 
				+      // In Safari, compositionEnd fires before the ESC keydown event
			
 
				+      setTimeout(() => {
			
 
				+        dialogComposition.setComposing(false);
			
 
				+      }, 100);
			
 
				+      onCompositionEnd?.(e);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  return (
			
 
				+    <textarea
			
 
				+      data-slot="textarea"
			
 
				+      className={cn(
			
 
				+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
			
 
				+        className
			
 
				+      )}
			
 
				+      onCompositionStart={handleCompositionStart}
			
 
				+      onCompositionEnd={handleCompositionEnd}
			
 
				+      onKeyDown={handleKeyDown}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Textarea };
			
--- a/client/src/components/ui/toggle-group.tsx
+++ b/client/src/components/ui/toggle-group.tsx
@@ -0,0 +1,73 @@
 
				+"use client";
			
 
				+
			
 
				+import * as React from "react";
			
 
				+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
			
 
				+import { type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+import { toggleVariants } from "@/components/ui/toggle";
			
 
				+
			
 
				+const ToggleGroupContext = React.createContext<
			
 
				+  VariantProps<typeof toggleVariants>
			
 
				+>({
			
 
				+  size: "default",
			
 
				+  variant: "default",
			
 
				+});
			
 
				+
			
 
				+function ToggleGroup({
			
 
				+  className,
			
 
				+  variant,
			
 
				+  size,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
			
 
				+  VariantProps<typeof toggleVariants>) {
			
 
				+  return (
			
 
				+    <ToggleGroupPrimitive.Root
			
 
				+      data-slot="toggle-group"
			
 
				+      data-variant={variant}
			
 
				+      data-size={size}
			
 
				+      className={cn(
			
 
				+        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      <ToggleGroupContext.Provider value={{ variant, size }}>
			
 
				+        {children}
			
 
				+      </ToggleGroupContext.Provider>
			
 
				+    </ToggleGroupPrimitive.Root>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function ToggleGroupItem({
			
 
				+  className,
			
 
				+  children,
			
 
				+  variant,
			
 
				+  size,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
			
 
				+  VariantProps<typeof toggleVariants>) {
			
 
				+  const context = React.useContext(ToggleGroupContext);
			
 
				+
			
 
				+  return (
			
 
				+    <ToggleGroupPrimitive.Item
			
 
				+      data-slot="toggle-group-item"
			
 
				+      data-variant={context.variant || variant}
			
 
				+      data-size={context.size || size}
			
 
				+      className={cn(
			
 
				+        toggleVariants({
			
 
				+          variant: context.variant || variant,
			
 
				+          size: context.size || size,
			
 
				+        }),
			
 
				+        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
			
 
				+        className
			
 
				+      )}
			
 
				+      {...props}
			
 
				+    >
			
 
				+      {children}
			
 
				+    </ToggleGroupPrimitive.Item>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { ToggleGroup, ToggleGroupItem };
			
--- a/client/src/components/ui/toggle.tsx
+++ b/client/src/components/ui/toggle.tsx
@@ -0,0 +1,45 @@
 
				+import * as React from "react";
			
 
				+import * as TogglePrimitive from "@radix-ui/react-toggle";
			
 
				+import { cva, type VariantProps } from "class-variance-authority";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+const toggleVariants = cva(
			
 
				+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
			
 
				+  {
			
 
				+    variants: {
			
 
				+      variant: {
			
 
				+        default: "bg-transparent",
			
 
				+        outline:
			
 
				+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
			
 
				+      },
			
 
				+      size: {
			
 
				+        default: "h-9 px-2 min-w-9",
			
 
				+        sm: "h-8 px-1.5 min-w-8",
			
 
				+        lg: "h-10 px-2.5 min-w-10",
			
 
				+      },
			
 
				+    },
			
 
				+    defaultVariants: {
			
 
				+      variant: "default",
			
 
				+      size: "default",
			
 
				+    },
			
 
				+  }
			
 
				+);
			
 
				+
			
 
				+function Toggle({
			
 
				+  className,
			
 
				+  variant,
			
 
				+  size,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TogglePrimitive.Root> &
			
 
				+  VariantProps<typeof toggleVariants>) {
			
 
				+  return (
			
 
				+    <TogglePrimitive.Root
			
 
				+      data-slot="toggle"
			
 
				+      className={cn(toggleVariants({ variant, size, className }))}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Toggle, toggleVariants };
			
--- a/client/src/components/ui/tooltip.tsx
+++ b/client/src/components/ui/tooltip.tsx
@@ -0,0 +1,59 @@
 
				+import * as React from "react";
			
 
				+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
			
 
				+
			
 
				+import { cn } from "@/lib/utils";
			
 
				+
			
 
				+function TooltipProvider({
			
 
				+  delayDuration = 0,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
			
 
				+  return (
			
 
				+    <TooltipPrimitive.Provider
			
 
				+      data-slot="tooltip-provider"
			
 
				+      delayDuration={delayDuration}
			
 
				+      {...props}
			
 
				+    />
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function Tooltip({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
			
 
				+  return (
			
 
				+    <TooltipProvider>
			
 
				+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
			
 
				+    </TooltipProvider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function TooltipTrigger({
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
			
 
				+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
			
 
				+}
			
 
				+
			
 
				+function TooltipContent({
			
 
				+  className,
			
 
				+  sideOffset = 0,
			
 
				+  children,
			
 
				+  ...props
			
 
				+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
			
 
				+  return (
			
 
				+    <TooltipPrimitive.Portal>
			
 
				+      <TooltipPrimitive.Content
			
 
				+        data-slot="tooltip-content"
			
 
				+        sideOffset={sideOffset}
			
 
				+        className={cn(
			
 
				+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
			
 
				+          className
			
 
				+        )}
			
 
				+        {...props}
			
 
				+      >
			
 
				+        {children}
			
 
				+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
			
 
				+      </TooltipPrimitive.Content>
			
 
				+    </TooltipPrimitive.Portal>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
			
--- a/client/src/const.ts
+++ b/client/src/const.ts
@@ -0,0 +1,21 @@
 
				+export { COOKIE_NAME, ONE_YEAR_MS } from "@shared/const";
			
 
				+
			
 
				+// Generate login URL at runtime so redirect URI reflects the current origin.
			
 
				+export const getLoginUrl = (returnPath?: string) => {
			
 
				+  const oauthPortalUrl = import.meta.env.VITE_OAUTH_PORTAL_URL;
			
 
				+  const appId = import.meta.env.VITE_APP_ID;
			
 
				+  const redirectUri = `${window.location.origin}/api/oauth/callback`;
			
 
				+  // Encode both the redirect URI and optional return path in state
			
 
				+  const statePayload = returnPath
			
 
				+    ? JSON.stringify({ redirectUri, returnPath })
			
 
				+    : redirectUri;
			
 
				+  const state = btoa(statePayload);
			
 
				+
			
 
				+  const url = new URL(`${oauthPortalUrl}/app-auth`);
			
 
				+  url.searchParams.set("appId", appId);
			
 
				+  url.searchParams.set("redirectUri", redirectUri);
			
 
				+  url.searchParams.set("state", state);
			
 
				+  url.searchParams.set("type", "signIn");
			
 
				+
			
 
				+  return url.toString();
			
 
				+};
			
--- a/client/src/contexts/ThemeContext.tsx
+++ b/client/src/contexts/ThemeContext.tsx
@@ -0,0 +1,64 @@
 
				+import React, { createContext, useContext, useEffect, useState } from "react";
			
 
				+
			
 
				+type Theme = "light" | "dark";
			
 
				+
			
 
				+interface ThemeContextType {
			
 
				+  theme: Theme;
			
 
				+  toggleTheme?: () => void;
			
 
				+  switchable: boolean;
			
 
				+}
			
 
				+
			
 
				+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
			
 
				+
			
 
				+interface ThemeProviderProps {
			
 
				+  children: React.ReactNode;
			
 
				+  defaultTheme?: Theme;
			
 
				+  switchable?: boolean;
			
 
				+}
			
 
				+
			
 
				+export function ThemeProvider({
			
 
				+  children,
			
 
				+  defaultTheme = "light",
			
 
				+  switchable = false,
			
 
				+}: ThemeProviderProps) {
			
 
				+  const [theme, setTheme] = useState<Theme>(() => {
			
 
				+    if (switchable) {
			
 
				+      const stored = localStorage.getItem("theme");
			
 
				+      return (stored as Theme) || defaultTheme;
			
 
				+    }
			
 
				+    return defaultTheme;
			
 
				+  });
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    const root = document.documentElement;
			
 
				+    if (theme === "dark") {
			
 
				+      root.classList.add("dark");
			
 
				+    } else {
			
 
				+      root.classList.remove("dark");
			
 
				+    }
			
 
				+
			
 
				+    if (switchable) {
			
 
				+      localStorage.setItem("theme", theme);
			
 
				+    }
			
 
				+  }, [theme, switchable]);
			
 
				+
			
 
				+  const toggleTheme = switchable
			
 
				+    ? () => {
			
 
				+        setTheme(prev => (prev === "light" ? "dark" : "light"));
			
 
				+      }
			
 
				+    : undefined;
			
 
				+
			
 
				+  return (
			
 
				+    <ThemeContext.Provider value={{ theme, toggleTheme, switchable }}>
			
 
				+      {children}
			
 
				+    </ThemeContext.Provider>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export function useTheme() {
			
 
				+  const context = useContext(ThemeContext);
			
 
				+  if (!context) {
			
 
				+    throw new Error("useTheme must be used within ThemeProvider");
			
 
				+  }
			
 
				+  return context;
			
 
				+}
			
--- a/client/src/hooks/useComposition.ts
+++ b/client/src/hooks/useComposition.ts
@@ -0,0 +1,81 @@
 
				+import { useRef } from "react";
			
 
				+import { usePersistFn } from "./usePersistFn";
			
 
				+
			
 
				+export interface UseCompositionReturn<
			
 
				+  T extends HTMLInputElement | HTMLTextAreaElement,
			
 
				+> {
			
 
				+  onCompositionStart: React.CompositionEventHandler<T>;
			
 
				+  onCompositionEnd: React.CompositionEventHandler<T>;
			
 
				+  onKeyDown: React.KeyboardEventHandler<T>;
			
 
				+  isComposing: () => boolean;
			
 
				+}
			
 
				+
			
 
				+export interface UseCompositionOptions<
			
 
				+  T extends HTMLInputElement | HTMLTextAreaElement,
			
 
				+> {
			
 
				+  onKeyDown?: React.KeyboardEventHandler<T>;
			
 
				+  onCompositionStart?: React.CompositionEventHandler<T>;
			
 
				+  onCompositionEnd?: React.CompositionEventHandler<T>;
			
 
				+}
			
 
				+
			
 
				+type TimerResponse = ReturnType<typeof setTimeout>;
			
 
				+
			
 
				+export function useComposition<
			
 
				+  T extends HTMLInputElement | HTMLTextAreaElement = HTMLInputElement,
			
 
				+>(options: UseCompositionOptions<T> = {}): UseCompositionReturn<T> {
			
 
				+  const {
			
 
				+    onKeyDown: originalOnKeyDown,
			
 
				+    onCompositionStart: originalOnCompositionStart,
			
 
				+    onCompositionEnd: originalOnCompositionEnd,
			
 
				+  } = options;
			
 
				+
			
 
				+  const c = useRef(false);
			
 
				+  const timer = useRef<TimerResponse | null>(null);
			
 
				+  const timer2 = useRef<TimerResponse | null>(null);
			
 
				+
			
 
				+  const onCompositionStart = usePersistFn((e: React.CompositionEvent<T>) => {
			
 
				+    if (timer.current) {
			
 
				+      clearTimeout(timer.current);
			
 
				+      timer.current = null;
			
 
				+    }
			
 
				+    if (timer2.current) {
			
 
				+      clearTimeout(timer2.current);
			
 
				+      timer2.current = null;
			
 
				+    }
			
 
				+    c.current = true;
			
 
				+    originalOnCompositionStart?.(e);
			
 
				+  });
			
 
				+
			
 
				+  const onCompositionEnd = usePersistFn((e: React.CompositionEvent<T>) => {
			
 
				+    // 使用两层 setTimeout 来处理 Safari 浏览器中 compositionEnd 先于 onKeyDown 触发的问题
			
 
				+    timer.current = setTimeout(() => {
			
 
				+      timer2.current = setTimeout(() => {
			
 
				+        c.current = false;
			
 
				+      });
			
 
				+    });
			
 
				+    originalOnCompositionEnd?.(e);
			
 
				+  });
			
 
				+
			
 
				+  const onKeyDown = usePersistFn((e: React.KeyboardEvent<T>) => {
			
 
				+    // 在 composition 状态下，阻止 ESC 和 Enter（非 shift+Enter）事件的冒泡
			
 
				+    if (
			
 
				+      c.current &&
			
 
				+      (e.key === "Escape" || (e.key === "Enter" && !e.shiftKey))
			
 
				+    ) {
			
 
				+      e.stopPropagation();
			
 
				+      return;
			
 
				+    }
			
 
				+    originalOnKeyDown?.(e);
			
 
				+  });
			
 
				+
			
 
				+  const isComposing = usePersistFn(() => {
			
 
				+    return c.current;
			
 
				+  });
			
 
				+
			
 
				+  return {
			
 
				+    onCompositionStart,
			
 
				+    onCompositionEnd,
			
 
				+    onKeyDown,
			
 
				+    isComposing,
			
 
				+  };
			
 
				+}
			
--- a/client/src/hooks/useMobile.tsx
+++ b/client/src/hooks/useMobile.tsx
@@ -0,0 +1,21 @@
 
				+import * as React from "react";
			
 
				+
			
 
				+const MOBILE_BREAKPOINT = 768;
			
 
				+
			
 
				+export function useIsMobile() {
			
 
				+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(
			
 
				+    undefined
			
 
				+  );
			
 
				+
			
 
				+  React.useEffect(() => {
			
 
				+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
			
 
				+    const onChange = () => {
			
 
				+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
			
 
				+    };
			
 
				+    mql.addEventListener("change", onChange);
			
 
				+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
			
 
				+    return () => mql.removeEventListener("change", onChange);
			
 
				+  }, []);
			
 
				+
			
 
				+  return !!isMobile;
			
 
				+}
			
--- a/client/src/hooks/usePersistFn.ts
+++ b/client/src/hooks/usePersistFn.ts
@@ -0,0 +1,20 @@
 
				+import { useRef } from "react";
			
 
				+
			
 
				+type noop = (...args: any[]) => any;
			
 
				+
			
 
				+/**
			
 
				+ * usePersistFn instead of useCallback to reduce cognitive load
			
 
				+ */
			
 
				+export function usePersistFn<T extends noop>(fn: T) {
			
 
				+  const fnRef = useRef<T>(fn);
			
 
				+  fnRef.current = fn;
			
 
				+
			
 
				+  const persistFn = useRef<T>(null);
			
 
				+  if (!persistFn.current) {
			
 
				+    persistFn.current = function (this: unknown, ...args) {
			
 
				+      return fnRef.current!.apply(this, args);
			
 
				+    } as T;
			
 
				+  }
			
 
				+
			
 
				+  return persistFn.current!;
			
 
				+}
			
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -0,0 +1,150 @@
 
				+@import "tailwindcss";
			
 
				+@import "tw-animate-css";
			
 
				+
			
 
				+@custom-variant dark (&:is(.dark *));
			
 
				+
			
 
				+@theme inline {
			
 
				+  --radius-sm: calc(var(--radius) - 4px);
			
 
				+  --radius-md: calc(var(--radius) - 2px);
			
 
				+  --radius-lg: var(--radius);
			
 
				+  --radius-xl: calc(var(--radius) + 4px);
			
 
				+  --color-background: var(--background);
			
 
				+  --color-foreground: var(--foreground);
			
 
				+  --color-card: var(--card);
			
 
				+  --color-card-foreground: var(--card-foreground);
			
 
				+  --color-popover: var(--popover);
			
 
				+  --color-popover-foreground: var(--popover-foreground);
			
 
				+  --color-primary: var(--primary);
			
 
				+  --color-primary-foreground: var(--primary-foreground);
			
 
				+  --color-secondary: var(--secondary);
			
 
				+  --color-secondary-foreground: var(--secondary-foreground);
			
 
				+  --color-muted: var(--muted);
			
 
				+  --color-muted-foreground: var(--muted-foreground);
			
 
				+  --color-accent: var(--accent);
			
 
				+  --color-accent-foreground: var(--accent-foreground);
			
 
				+  --color-destructive: var(--destructive);
			
 
				+  --color-destructive-foreground: var(--destructive-foreground);
			
 
				+  --color-border: var(--border);
			
 
				+  --color-input: var(--input);
			
 
				+  --color-ring: var(--ring);
			
 
				+  --color-chart-1: var(--chart-1);
			
 
				+  --color-chart-2: var(--chart-2);
			
 
				+  --color-chart-3: var(--chart-3);
			
 
				+  --color-chart-4: var(--chart-4);
			
 
				+  --color-chart-5: var(--chart-5);
			
 
				+  --color-sidebar: var(--sidebar);
			
 
				+  --color-sidebar-foreground: var(--sidebar-foreground);
			
 
				+  --color-sidebar-primary: var(--sidebar-primary);
			
 
				+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
			
 
				+  --color-sidebar-accent: var(--sidebar-accent);
			
 
				+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
			
 
				+  --color-sidebar-border: var(--sidebar-border);
			
 
				+  --color-sidebar-ring: var(--sidebar-ring);
			
 
				+  --font-display: 'Playfair Display', Georgia, serif;
			
 
				+  --font-body: 'Source Sans 3', system-ui, sans-serif;
			
 
				+  --font-mono: 'Fira Code', monospace;
			
 
				+  --color-forest: oklch(0.30 0.07 155);
			
 
				+  --color-forest-light: oklch(0.40 0.07 155);
			
 
				+  --color-taupe: oklch(0.55 0.02 60);
			
 
				+  --color-taupe-light: oklch(0.75 0.02 60);
			
 
				+  --color-cream: oklch(0.97 0.01 90);
			
 
				+  --color-cream-dark: oklch(0.93 0.01 90);
			
 
				+  --color-terracotta: oklch(0.55 0.15 35);
			
 
				+  --color-terracotta-light: oklch(0.65 0.12 35);
			
 
				+  --color-linen: oklch(0.95 0.008 80);
			
 
				+}
			
 
				+
			
 
				+:root {
			
 
				+  --primary: oklch(0.30 0.07 155);
			
 
				+  --primary-foreground: oklch(0.97 0.01 90);
			
 
				+  --sidebar-primary: oklch(0.30 0.07 155);
			
 
				+  --sidebar-primary-foreground: oklch(0.97 0.01 90);
			
 
				+  --chart-1: oklch(0.30 0.07 155);
			
 
				+  --chart-2: oklch(0.55 0.15 35);
			
 
				+  --chart-3: oklch(0.55 0.02 60);
			
 
				+  --chart-4: oklch(0.40 0.07 155);
			
 
				+  --chart-5: oklch(0.65 0.12 35);
			
 
				+  --radius: 0.5rem;
			
 
				+  --background: oklch(0.97 0.01 90);
			
 
				+  --foreground: oklch(0.22 0.02 60);
			
 
				+  --card: oklch(0.99 0.005 90);
			
 
				+  --card-foreground: oklch(0.22 0.02 60);
			
 
				+  --popover: oklch(0.99 0.005 90);
			
 
				+  --popover-foreground: oklch(0.22 0.02 60);
			
 
				+  --secondary: oklch(0.95 0.008 80);
			
 
				+  --secondary-foreground: oklch(0.35 0.02 60);
			
 
				+  --muted: oklch(0.93 0.01 90);
			
 
				+  --muted-foreground: oklch(0.50 0.02 60);
			
 
				+  --accent: oklch(0.93 0.01 90);
			
 
				+  --accent-foreground: oklch(0.22 0.02 60);
			
 
				+  --destructive: oklch(0.55 0.15 35);
			
 
				+  --destructive-foreground: oklch(0.97 0.01 90);
			
 
				+  --border: oklch(0.88 0.01 80);
			
 
				+  --input: oklch(0.88 0.01 80);
			
 
				+  --ring: oklch(0.30 0.07 155);
			
 
				+  --sidebar: oklch(0.97 0.01 90);
			
 
				+  --sidebar-foreground: oklch(0.22 0.02 60);
			
 
				+  --sidebar-accent: oklch(0.93 0.01 90);
			
 
				+  --sidebar-accent-foreground: oklch(0.22 0.02 60);
			
 
				+  --sidebar-border: oklch(0.88 0.01 80);
			
 
				+  --sidebar-ring: oklch(0.30 0.07 155);
			
 
				+}
			
 
				+
			
 
				+@layer base {
			
 
				+  * {
			
 
				+    @apply border-border outline-ring/50;
			
 
				+  }
			
 
				+  body {
			
 
				+    @apply bg-background text-foreground;
			
 
				+    font-family: 'Source Sans 3', system-ui, sans-serif;
			
 
				+    font-size: 17px;
			
 
				+    line-height: 1.75;
			
 
				+  }
			
 
				+  h1, h2, h3, h4, h5, h6 {
			
 
				+    font-family: 'Playfair Display', Georgia, serif;
			
 
				+  }
			
 
				+  code, pre {
			
 
				+    font-family: 'Fira Code', monospace;
			
 
				+  }
			
 
				+  button:not(:disabled),
			
 
				+  [role="button"]:not([aria-disabled="true"]),
			
 
				+  [type="button"]:not(:disabled),
			
 
				+  [type="submit"]:not(:disabled),
			
 
				+  [type="reset"]:not(:disabled),
			
 
				+  a[href],
			
 
				+  select:not(:disabled),
			
 
				+  input[type="checkbox"]:not(:disabled),
			
 
				+  input[type="radio"]:not(:disabled) {
			
 
				+    @apply cursor-pointer;
			
 
				+  }
			
 
				+}
			
 
				+
			
 
				+@layer components {
			
 
				+  .container {
			
 
				+    width: 100%;
			
 
				+    margin-left: auto;
			
 
				+    margin-right: auto;
			
 
				+    padding-left: 1rem;
			
 
				+    padding-right: 1rem;
			
 
				+  }
			
 
				+
			
 
				+  .flex {
			
 
				+    min-height: 0;
			
 
				+    min-width: 0;
			
 
				+  }
			
 
				+
			
 
				+  @media (min-width: 640px) {
			
 
				+    .container {
			
 
				+      padding-left: 1.5rem;
			
 
				+      padding-right: 1.5rem;
			
 
				+    }
			
 
				+  }
			
 
				+
			
 
				+  @media (min-width: 1024px) {
			
 
				+    .container {
			
 
				+      padding-left: 2rem;
			
 
				+      padding-right: 2rem;
			
 
				+      max-width: 1280px;
			
 
				+    }
			
 
				+  }
			
 
				+}
			
--- a/client/src/lib/trpc.ts
+++ b/client/src/lib/trpc.ts
@@ -0,0 +1,4 @@
 
				+import { createTRPCReact } from "@trpc/react-query";
			
 
				+import type { AppRouter } from "../../../server/routers";
			
 
				+
			
 
				+export const trpc = createTRPCReact<AppRouter>();
			
--- a/client/src/lib/utils.ts
+++ b/client/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));
			
 
				+}
			
--- a/client/src/main.tsx
+++ b/client/src/main.tsx
@@ -0,0 +1,63 @@
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { UNAUTHED_ERR_MSG } from '@shared/const';
			
 
				+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
			
 
				+import { httpBatchLink, TRPCClientError } from "@trpc/client";
			
 
				+import { createRoot } from "react-dom/client";
			
 
				+import superjson from "superjson";
			
 
				+import App from "./App";
			
 
				+import { getLoginUrl } from "./const";
			
 
				+import "./index.css";
			
 
				+
			
 
				+const queryClient = new QueryClient();
			
 
				+
			
 
				+const redirectToLoginIfUnauthorized = (error: unknown) => {
			
 
				+  if (!(error instanceof TRPCClientError)) return;
			
 
				+  if (typeof window === "undefined") return;
			
 
				+
			
 
				+  const isUnauthorized = error.message === UNAUTHED_ERR_MSG;
			
 
				+
			
 
				+  if (!isUnauthorized) return;
			
 
				+
			
 
				+  // Redirect to our custom login page instead of OAuth
			
 
				+  const currentPath = window.location.pathname;
			
 
				+  window.location.href = `/login?returnTo=${encodeURIComponent(currentPath)}`;
			
 
				+};
			
 
				+
			
 
				+queryClient.getQueryCache().subscribe(event => {
			
 
				+  if (event.type === "updated" && event.action.type === "error") {
			
 
				+    const error = event.query.state.error;
			
 
				+    redirectToLoginIfUnauthorized(error);
			
 
				+    console.error("[API Query Error]", error);
			
 
				+  }
			
 
				+});
			
 
				+
			
 
				+queryClient.getMutationCache().subscribe(event => {
			
 
				+  if (event.type === "updated" && event.action.type === "error") {
			
 
				+    const error = event.mutation.state.error;
			
 
				+    redirectToLoginIfUnauthorized(error);
			
 
				+    console.error("[API Mutation Error]", error);
			
 
				+  }
			
 
				+});
			
 
				+
			
 
				+const trpcClient = trpc.createClient({
			
 
				+  links: [
			
 
				+    httpBatchLink({
			
 
				+      url: "/api/trpc",
			
 
				+      transformer: superjson,
			
 
				+      fetch(input, init) {
			
 
				+        return globalThis.fetch(input, {
			
 
				+          ...(init ?? {}),
			
 
				+          credentials: "include",
			
 
				+        });
			
 
				+      },
			
 
				+    }),
			
 
				+  ],
			
 
				+});
			
 
				+
			
 
				+createRoot(document.getElementById("root")!).render(
			
 
				+  <trpc.Provider client={trpcClient} queryClient={queryClient}>
			
 
				+    <QueryClientProvider client={queryClient}>
			
 
				+      <App />
			
 
				+    </QueryClientProvider>
			
 
				+  </trpc.Provider>
			
 
				+);
			
--- a/client/src/pages/AcceptInvite.tsx
+++ b/client/src/pages/AcceptInvite.tsx
@@ -0,0 +1,213 @@
 
				+/**
			
 
				+ * Accept Invitation Page — Public page where invited users accept their invitation
			
 
				+ */
			
 
				+import { useState, useEffect } from "react";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { getLoginUrl } from "@/const";
			
 
				+import { toast } from "sonner";
			
 
				+import {
			
 
				+  CheckCircle2, XCircle, Clock, Mail, Shield,
			
 
				+  Crown, Headphones, User, LogIn, Loader2,
			
 
				+} from "lucide-react";
			
 
				+import { useRoute, useLocation } from "wouter";
			
 
				+
			
 
				+const ROLE_LABELS: Record<string, { icon: React.ReactNode; label: string; description: string; color: string }> = {
			
 
				+  admin: {
			
 
				+    icon: <Crown className="w-5 h-5" />,
			
 
				+    label: "Admin",
			
 
				+    description: "Full access to conversations, workflow designer, and user management",
			
 
				+    color: "#14532D",
			
 
				+  },
			
 
				+  agent: {
			
 
				+    icon: <Headphones className="w-5 h-5" />,
			
 
				+    label: "Agent",
			
 
				+    description: "Access to the agent dashboard to monitor and reply to conversations",
			
 
				+    color: "#0369a1",
			
 
				+  },
			
 
				+  user: {
			
 
				+    icon: <User className="w-5 h-5" />,
			
 
				+    label: "User",
			
 
				+    description: "Basic access to the platform",
			
 
				+    color: "#78716C",
			
 
				+  },
			
 
				+};
			
 
				+
			
 
				+export default function AcceptInvite() {
			
 
				+  const [, params] = useRoute("/invite/:token");
			
 
				+  const [, navigate] = useLocation();
			
 
				+  const token = params?.token || "";
			
 
				+  const { user, isAuthenticated, loading: authLoading } = useAuth();
			
 
				+  const [accepted, setAccepted] = useState(false);
			
 
				+
			
 
				+  const { data: validation, isLoading: validating, error: validationError } = trpc.invitations.validate.useQuery(
			
 
				+    { token },
			
 
				+    { enabled: !!token }
			
 
				+  );
			
 
				+
			
 
				+  const acceptMutation = trpc.invitations.accept.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      setAccepted(true);
			
 
				+      toast.success(`Welcome! You've been assigned the ${data.role} role.`);
			
 
				+    },
			
 
				+    onError: (error) => {
			
 
				+      toast.error("Failed to accept invitation", { description: error.message });
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const handleAccept = () => {
			
 
				+    if (token) {
			
 
				+      acceptMutation.mutate({ token });
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleGoToDashboard = () => {
			
 
				+    navigate("/dashboard");
			
 
				+  };
			
 
				+
			
 
				+  // Loading state
			
 
				+  if (authLoading || validating) {
			
 
				+    return (
			
 
				+      <div className="min-h-screen flex items-center justify-center" style={{ background: "#FFFBEB" }}>
			
 
				+        <div className="text-center">
			
 
				+          <Loader2 className="w-8 h-8 animate-spin mx-auto" style={{ color: "#14532D" }} />
			
 
				+          <p className="text-sm mt-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Validating invitation...
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  // Invalid or expired invitation
			
 
				+  if (validation && !validation.valid) {
			
 
				+    return (
			
 
				+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: "#FFFBEB" }}>
			
 
				+        <div className="max-w-md w-full p-8 rounded-2xl text-center" style={{ background: "#fff", border: "1px solid #e7e0d5", boxShadow: "0 4px 24px rgba(120, 113, 108, 0.08)" }}>
			
 
				+          <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{ background: "#dc262614" }}>
			
 
				+            <XCircle className="w-8 h-8" style={{ color: "#dc2626" }} />
			
 
				+          </div>
			
 
				+          <h1 className="text-2xl font-bold mb-2" style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+            Invalid Invitation
			
 
				+          </h1>
			
 
				+          <p className="text-sm mb-6" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            {validation.reason}
			
 
				+          </p>
			
 
				+          <Button onClick={() => navigate("/")} variant="outline" style={{ borderColor: "#e7e0d5" }}>
			
 
				+            Go to Home
			
 
				+          </Button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  // Successfully accepted
			
 
				+  if (accepted) {
			
 
				+    return (
			
 
				+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: "#FFFBEB" }}>
			
 
				+        <div className="max-w-md w-full p-8 rounded-2xl text-center" style={{ background: "#fff", border: "1px solid #e7e0d5", boxShadow: "0 4px 24px rgba(120, 113, 108, 0.08)" }}>
			
 
				+          <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{ background: "#16a34a14" }}>
			
 
				+            <CheckCircle2 className="w-8 h-8" style={{ color: "#16a34a" }} />
			
 
				+          </div>
			
 
				+          <h1 className="text-2xl font-bold mb-2" style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+            Welcome Aboard!
			
 
				+          </h1>
			
 
				+          <p className="text-sm mb-6" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Your invitation has been accepted. You now have access to the Homelegance chatbot system.
			
 
				+          </p>
			
 
				+          <Button onClick={handleGoToDashboard} className="text-white" style={{ background: "#14532D" }}>
			
 
				+            Go to Dashboard
			
 
				+          </Button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  // Valid invitation — show details
			
 
				+  if (validation && validation.valid) {
			
 
				+    const roleConfig = ROLE_LABELS[validation.role] || ROLE_LABELS.user;
			
 
				+
			
 
				+    return (
			
 
				+      <div className="min-h-screen flex items-center justify-center p-4" style={{ background: "#FFFBEB" }}>
			
 
				+        <div className="max-w-md w-full p-8 rounded-2xl" style={{ background: "#fff", border: "1px solid #e7e0d5", boxShadow: "0 4px 24px rgba(120, 113, 108, 0.08)" }}>
			
 
				+          <div className="text-center mb-6">
			
 
				+            <div className="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4" style={{ background: "#14532D14" }}>
			
 
				+              <Mail className="w-8 h-8" style={{ color: "#14532D" }} />
			
 
				+            </div>
			
 
				+            <h1 className="text-2xl font-bold mb-1" style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+              You're Invited!
			
 
				+            </h1>
			
 
				+            <p className="text-sm" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              <strong>{validation.invitedBy}</strong> has invited you to join the Homelegance chatbot team.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Invitation Details */}
			
 
				+          <div className="space-y-3 mb-6">
			
 
				+            <div className="p-4 rounded-xl" style={{ background: roleConfig.color + "08", border: `1px solid ${roleConfig.color}20` }}>
			
 
				+              <div className="flex items-center gap-3">
			
 
				+                <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: roleConfig.color + "18", color: roleConfig.color }}>
			
 
				+                  {roleConfig.icon}
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="text-sm font-semibold" style={{ color: roleConfig.color }}>{roleConfig.label} Role</div>
			
 
				+                  <div className="text-xs" style={{ color: "#78716C" }}>{roleConfig.description}</div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="flex items-center gap-2 text-xs" style={{ color: "#78716C" }}>
			
 
				+              <Mail className="w-3.5 h-3.5" />
			
 
				+              <span>Invited: <strong>{validation.email}</strong></span>
			
 
				+            </div>
			
 
				+
			
 
				+            <div className="flex items-center gap-2 text-xs" style={{ color: "#78716C" }}>
			
 
				+              <Clock className="w-3.5 h-3.5" />
			
 
				+              <span>Expires: {validation.expiresAt ? new Date(validation.expiresAt).toLocaleDateString(undefined, { month: "long", day: "numeric", year: "numeric" }) : "—"}</span>
			
 
				+            </div>
			
 
				+
			
 
				+            {validation.message && (
			
 
				+              <div className="p-3 rounded-lg" style={{ background: "#f5f0e8" }}>
			
 
				+                <p className="text-sm italic" style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                  "{validation.message}"
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            )}
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Action */}
			
 
				+          {isAuthenticated ? (
			
 
				+            <Button
			
 
				+              onClick={handleAccept}
			
 
				+              disabled={acceptMutation.isPending}
			
 
				+              className="w-full text-white"
			
 
				+              style={{ background: "#14532D" }}
			
 
				+            >
			
 
				+              {acceptMutation.isPending ? (
			
 
				+                <><Loader2 className="w-4 h-4 animate-spin mr-2" /> Accepting...</>
			
 
				+              ) : (
			
 
				+                <><CheckCircle2 className="w-4 h-4 mr-2" /> Accept Invitation</>
			
 
				+              )}
			
 
				+            </Button>
			
 
				+          ) : (
			
 
				+            <div className="space-y-3">
			
 
				+              <p className="text-xs text-center" style={{ color: "#a8a29e" }}>
			
 
				+                You need to sign in first to accept this invitation.
			
 
				+              </p>
			
 
				+              <a
			
 
				+                href={`/login?returnTo=${encodeURIComponent(`/invite/${token}`)}`}
			
 
				+                className="flex items-center justify-center gap-2 w-full px-4 py-2.5 rounded-xl text-sm font-semibold text-white transition-colors"
			
 
				+                style={{ background: "#14532D" }}
			
 
				+              >
			
 
				+                <LogIn className="w-4 h-4" /> Sign In to Accept
			
 
				+              </a>
			
 
				+            </div>
			
 
				+          )}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  return null;
			
 
				+}
			
--- a/client/src/pages/AgentDashboard.tsx
+++ b/client/src/pages/AgentDashboard.tsx
@@ -0,0 +1,981 @@
 
				+/**
			
 
				+ * Agent Dashboard — Conversations view (wrapped by DashboardLayout)
			
 
				+ * Redesigned for large-volume conversation management with
			
 
				+ * search, filters (status, agent, date), pagination, sorting, and bulk actions.
			
 
				+ */
			
 
				+import { useState, useRef, useEffect, useMemo, useCallback } from "react";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Textarea } from "@/components/ui/textarea";
			
 
				+import { ScrollArea } from "@/components/ui/scroll-area";
			
 
				+import {
			
 
				+  Select,
			
 
				+  SelectContent,
			
 
				+  SelectItem,
			
 
				+  SelectTrigger,
			
 
				+  SelectValue,
			
 
				+} from "@/components/ui/select";
			
 
				+import {
			
 
				+  MessageSquare, CheckCircle2, AlertTriangle, Clock,
			
 
				+  Send, Bot, User, Headphones, ArrowLeft, ArrowUpDown,
			
 
				+  BarChart3, X, Search, Filter, ChevronLeft, ChevronRight,
			
 
				+  Calendar, UserCheck, Trash2, MoreHorizontal, MessageCircle,
			
 
				+  Sparkles, Bell, BellRing,
			
 
				+} from "lucide-react";
			
 
				+import { Streamdown } from "streamdown";
			
 
				+import { toast } from "sonner";
			
 
				+
			
 
				+/* ─── Bot name constant ─── */
			
 
				+const BOT_NAME = "Ellie";
			
 
				+
			
 
				+/* ─── Status badge colors ─── */
			
 
				+const STATUS_STYLES: Record<string, { bg: string; text: string; label: string; dot: string }> = {
			
 
				+  active: { bg: "#14532D12", text: "#14532D", label: "Active", dot: "#22c55e" },
			
 
				+  escalated: { bg: "#C2410C12", text: "#C2410C", label: "Escalated", dot: "#f97316" },
			
 
				+  resolved: { bg: "#0369a112", text: "#0369a1", label: "Resolved", dot: "#3b82f6" },
			
 
				+  closed: { bg: "#78716C12", text: "#78716C", label: "Closed", dot: "#a8a29e" },
			
 
				+};
			
 
				+
			
 
				+/* ─── Stats Card ─── */
			
 
				+function StatCard({ icon, label, value, color, isActive, onClick }: {
			
 
				+  icon: React.ReactNode; label: string; value: number; color: string;
			
 
				+  isActive?: boolean; onClick?: () => void;
			
 
				+}) {
			
 
				+  return (
			
 
				+    <button
			
 
				+      onClick={onClick}
			
 
				+      className="p-3 rounded-xl border transition-all text-left w-full"
			
 
				+      style={{
			
 
				+        background: isActive ? color + "08" : "#fff",
			
 
				+        borderColor: isActive ? color + "40" : "#e7e0d5",
			
 
				+        boxShadow: isActive ? `0 0 0 1px ${color}20` : undefined,
			
 
				+      }}
			
 
				+    >
			
 
				+      <div className="flex items-center gap-2.5">
			
 
				+        <div className="w-9 h-9 rounded-lg flex items-center justify-center" style={{ background: color + "14", color }}>
			
 
				+          {icon}
			
 
				+        </div>
			
 
				+        <div>
			
 
				+          <div className="text-xl font-bold" style={{ color: "#292524", fontFamily: "'Playfair Display', serif" }}>{value}</div>
			
 
				+          <div className="text-[11px]" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>{label}</div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </button>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Conversation Row (table-style for large volumes) ─── */
			
 
				+function ConversationRow({
			
 
				+  conversation,
			
 
				+  isSelected,
			
 
				+  isChecked,
			
 
				+  onClick,
			
 
				+  onCheck,
			
 
				+}: {
			
 
				+  conversation: any;
			
 
				+  isSelected: boolean;
			
 
				+  isChecked: boolean;
			
 
				+  onClick: () => void;
			
 
				+  onCheck: (checked: boolean) => void;
			
 
				+}) {
			
 
				+  const style = STATUS_STYLES[conversation.status] || STATUS_STYLES.active;
			
 
				+  const createdDate = new Date(conversation.createdAt);
			
 
				+  const updatedDate = new Date(conversation.updatedAt);
			
 
				+  const isToday = new Date().toDateString() === updatedDate.toDateString();
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="flex items-center gap-3 px-3 py-2.5 border-b transition-all cursor-pointer hover:bg-stone-50"
			
 
				+      style={{
			
 
				+        background: isSelected ? "#14532D06" : isChecked ? "#fef3c7" : "transparent",
			
 
				+        borderColor: "#f5f0e8",
			
 
				+      }}
			
 
				+    >
			
 
				+      {/* Checkbox */}
			
 
				+      <input
			
 
				+        type="checkbox"
			
 
				+        checked={isChecked}
			
 
				+        onChange={(e) => { e.stopPropagation(); onCheck(e.target.checked); }}
			
 
				+        className="w-4 h-4 rounded border-stone-300 accent-green-800 shrink-0"
			
 
				+      />
			
 
				+
			
 
				+      {/* Main content — clickable */}
			
 
				+      <div className="flex-1 min-w-0 flex items-center gap-3" onClick={onClick}>
			
 
				+        {/* Status dot + visitor */}
			
 
				+        <div className="flex items-center gap-2 min-w-0 w-36 shrink-0">
			
 
				+          <div className="w-2 h-2 rounded-full shrink-0" style={{ background: style.dot }} />
			
 
				+          <span className="text-sm font-medium truncate" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            {conversation.visitorName || "Visitor"}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Customer ID */}
			
 
				+        <div className="w-28 shrink-0 hidden lg:block">
			
 
				+          <span className="text-xs font-mono truncate block" style={{ color: conversation.customerId ? "#14532D" : "#d6d3d1" }}>
			
 
				+            {conversation.customerId || "—"}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Sales Rep */}
			
 
				+        <div className="w-28 shrink-0 hidden lg:block">
			
 
				+          <span className="text-xs truncate block" style={{ color: conversation.salesRep ? "#78716C" : "#d6d3d1" }}>
			
 
				+            {conversation.salesRep || "—"}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Agent Name */}
			
 
				+        <div className="w-28 shrink-0 hidden lg:block">
			
 
				+          <span className="text-xs truncate block" style={{ color: conversation.agentName ? "#0369a1" : "#d6d3d1" }}>
			
 
				+            {conversation.agentName || "—"}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Status badge */}
			
 
				+        <div className="w-24 shrink-0">
			
 
				+          <span
			
 
				+            className="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wider"
			
 
				+            style={{ background: style.bg, color: style.text }}
			
 
				+          >
			
 
				+            {style.label}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Message count */}
			
 
				+        <div className="w-14 shrink-0 flex items-center gap-1">
			
 
				+          <MessageCircle className="w-3 h-3" style={{ color: "#a8a29e" }} />
			
 
				+          <span className="text-xs" style={{ color: "#78716C" }}>{conversation.messageCount || 0}</span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Email / session */}
			
 
				+        <div className="flex-1 min-w-0 hidden xl:block">
			
 
				+          <span className="text-xs truncate block" style={{ color: "#a8a29e" }}>
			
 
				+            {conversation.visitorEmail || `#${conversation.sessionId?.slice(0, 10)}`}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Date */}
			
 
				+        <div className="w-28 shrink-0 text-right hidden md:block">
			
 
				+          <span className="text-xs" style={{ color: "#78716C" }}>
			
 
				+            {isToday
			
 
				+              ? updatedDate.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })
			
 
				+              : updatedDate.toLocaleDateString([], { month: "short", day: "numeric" })}
			
 
				+          </span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Message Bubble ─── */
			
 
				+function MessageBubble({ message }: { message: any }) {
			
 
				+  const isVisitor = message.sender === "visitor";
			
 
				+  const isBot = message.sender === "bot";
			
 
				+
			
 
				+  return (
			
 
				+    <div className={`flex gap-2 ${isVisitor ? "justify-end" : "justify-start"}`}>
			
 
				+      {!isVisitor && (
			
 
				+        <div
			
 
				+          className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-1"
			
 
				+          style={{ background: isBot ? "#14532D" : "#C2410C", color: "#fff" }}
			
 
				+        >
			
 
				+          {isBot ? <Sparkles className="w-3.5 h-3.5" /> : <Headphones className="w-3.5 h-3.5" />}
			
 
				+        </div>
			
 
				+      )}
			
 
				+      <div
			
 
				+        className="max-w-[75%] px-3.5 py-2.5 rounded-xl text-sm leading-relaxed"
			
 
				+        style={{
			
 
				+          background: isVisitor ? "#14532D" : "#f5f0e8",
			
 
				+          color: isVisitor ? "#fff" : "#292524",
			
 
				+          fontFamily: "'Source Sans 3', sans-serif",
			
 
				+          borderBottomRightRadius: isVisitor ? "4px" : undefined,
			
 
				+          borderBottomLeftRadius: !isVisitor ? "4px" : undefined,
			
 
				+        }}
			
 
				+      >
			
 
				+        {!isVisitor && (
			
 
				+          <div className="text-[10px] font-semibold mb-1" style={{ color: isBot ? "#14532D" : "#C2410C" }}>
			
 
				+            {isBot ? BOT_NAME : (message.metadata?.agentName || "Agent")}
			
 
				+          </div>
			
 
				+        )}
			
 
				+        {!isVisitor ? (
			
 
				+          <div className="prose prose-sm max-w-none" style={{ color: "inherit" }}>
			
 
				+            <Streamdown>{message.content}</Streamdown>
			
 
				+          </div>
			
 
				+        ) : (
			
 
				+          message.content
			
 
				+        )}
			
 
				+        <div className="text-[10px] mt-1 opacity-60">
			
 
				+          {new Date(message.createdAt).toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" })}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      {isVisitor && (
			
 
				+        <div className="w-7 h-7 rounded-full flex items-center justify-center shrink-0 mt-1" style={{ background: "#78716C20", color: "#78716C" }}>
			
 
				+          <User className="w-3.5 h-3.5" />
			
 
				+        </div>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Chat Panel ─── */
			
 
				+function ChatPanel({
			
 
				+  conversationId,
			
 
				+  conversation,
			
 
				+  onBack,
			
 
				+}: {
			
 
				+  conversationId: number;
			
 
				+  conversation: any;
			
 
				+  onBack: () => void;
			
 
				+}) {
			
 
				+  const [replyText, setReplyText] = useState("");
			
 
				+  const messagesEndRef = useRef<HTMLDivElement>(null);
			
 
				+  const utils = trpc.useUtils();
			
 
				+
			
 
				+  const { data: messagesData, isLoading } = trpc.agent.messages.useQuery(
			
 
				+    { conversationId },
			
 
				+    { refetchInterval: 3000 }
			
 
				+  );
			
 
				+
			
 
				+  const replyMutation = trpc.agent.reply.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      setReplyText("");
			
 
				+      utils.agent.messages.invalidate({ conversationId });
			
 
				+      utils.agent.conversationsAdvanced.invalidate();
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const statusMutation = trpc.agent.updateStatus.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      utils.agent.conversationsAdvanced.invalidate();
			
 
				+      utils.agent.stats.invalidate();
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  useEffect(() => {
			
 
				+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
			
 
				+  }, [messagesData]);
			
 
				+
			
 
				+  const handleSend = () => {
			
 
				+    if (!replyText.trim()) return;
			
 
				+    replyMutation.mutate({ conversationId, content: replyText.trim() });
			
 
				+  };
			
 
				+
			
 
				+  const handleKeyDown = (e: React.KeyboardEvent) => {
			
 
				+    if (e.key === "Enter" && !e.shiftKey) {
			
 
				+      e.preventDefault();
			
 
				+      handleSend();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const style = STATUS_STYLES[conversation?.status] || STATUS_STYLES.active;
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex flex-col h-full">
			
 
				+      {/* Header */}
			
 
				+      <div className="px-4 py-3 border-b flex items-center justify-between" style={{ borderColor: "#e7e0d5" }}>
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <button onClick={onBack} className="p-1.5 rounded-lg hover:bg-black/5 transition-colors">
			
 
				+            <ArrowLeft className="w-4 h-4" style={{ color: "#78716C" }} />
			
 
				+          </button>
			
 
				+          <div>
			
 
				+            <div className="flex items-center gap-2">
			
 
				+              <span className="text-sm font-bold" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                {conversation?.visitorName || "Visitor"}
			
 
				+              </span>
			
 
				+              <span className="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wider" style={{ background: style.bg, color: style.text }}>
			
 
				+                {style.label}
			
 
				+              </span>
			
 
				+            </div>
			
 
				+            <div className="flex items-center gap-3 flex-wrap">
			
 
				+              <span className="text-xs" style={{ color: "#a8a29e" }}>
			
 
				+                {conversation?.visitorEmail || `Session: ${conversation?.sessionId?.slice(0, 12)}`}
			
 
				+                {conversation?.assignedAgentId && " · Assigned"}
			
 
				+              </span>
			
 
				+              {conversation?.customerId && (
			
 
				+                <span className="text-xs font-mono px-1.5 py-0.5 rounded" style={{ background: "#14532D0a", color: "#14532D" }}>
			
 
				+                  ID: {conversation.customerId}
			
 
				+                </span>
			
 
				+              )}
			
 
				+              {conversation?.salesRep && (
			
 
				+                <span className="text-xs px-1.5 py-0.5 rounded" style={{ background: "#C2410C0a", color: "#C2410C" }}>
			
 
				+                  Rep: {conversation.salesRep}
			
 
				+                </span>
			
 
				+              )}
			
 
				+              {conversation?.agentName && (
			
 
				+                <span className="text-xs px-1.5 py-0.5 rounded" style={{ background: "#0369a10a", color: "#0369a1" }}>
			
 
				+                  Agent: {conversation.agentName}
			
 
				+                </span>
			
 
				+              )}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          {conversation?.status !== "resolved" && (
			
 
				+            <Button
			
 
				+              size="sm" variant="outline"
			
 
				+              onClick={() => statusMutation.mutate({ conversationId, status: "resolved" })}
			
 
				+              className="text-xs" style={{ borderColor: "#14532D40", color: "#14532D" }}
			
 
				+            >
			
 
				+              <CheckCircle2 className="w-3 h-3 mr-1" /> Resolve
			
 
				+            </Button>
			
 
				+          )}
			
 
				+          {conversation?.status !== "closed" && (
			
 
				+            <Button
			
 
				+              size="sm" variant="outline"
			
 
				+              onClick={() => statusMutation.mutate({ conversationId, status: "closed" })}
			
 
				+              className="text-xs" style={{ borderColor: "#78716C40", color: "#78716C" }}
			
 
				+            >
			
 
				+              <X className="w-3 h-3 mr-1" /> Close
			
 
				+            </Button>
			
 
				+          )}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Messages */}
			
 
				+      <ScrollArea className="flex-1 p-4">
			
 
				+        <div className="space-y-3">
			
 
				+          {isLoading ? (
			
 
				+            <div className="text-center py-8 text-sm" style={{ color: "#a8a29e" }}>Loading messages...</div>
			
 
				+          ) : (
			
 
				+            messagesData?.map((msg: any) => <MessageBubble key={msg.id} message={msg} />)
			
 
				+          )}
			
 
				+          <div ref={messagesEndRef} />
			
 
				+        </div>
			
 
				+      </ScrollArea>
			
 
				+
			
 
				+      {/* Reply input */}
			
 
				+      {conversation?.status !== "closed" && (
			
 
				+        <div className="p-4 border-t" style={{ borderColor: "#e7e0d5" }}>
			
 
				+          <div className="flex gap-2">
			
 
				+            <Textarea
			
 
				+              value={replyText}
			
 
				+              onChange={(e) => setReplyText(e.target.value)}
			
 
				+              onKeyDown={handleKeyDown}
			
 
				+              placeholder="Type your reply... (Enter to send, Shift+Enter for new line)"
			
 
				+              className="resize-none text-sm"
			
 
				+              rows={2}
			
 
				+              style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+            />
			
 
				+            <Button
			
 
				+              onClick={handleSend}
			
 
				+              disabled={!replyText.trim() || replyMutation.isPending}
			
 
				+              className="self-end text-white"
			
 
				+              style={{ background: "#14532D" }}
			
 
				+            >
			
 
				+              <Send className="w-4 h-4" />
			
 
				+            </Button>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Pagination Controls ─── */
			
 
				+function PaginationBar({
			
 
				+  page, totalPages, total, pageSize, onPageChange,
			
 
				+}: {
			
 
				+  page: number; totalPages: number; total: number; pageSize: number;
			
 
				+  onPageChange: (p: number) => void;
			
 
				+}) {
			
 
				+  const startItem = (page - 1) * pageSize + 1;
			
 
				+  const endItem = Math.min(page * pageSize, total);
			
 
				+
			
 
				+  // Generate page numbers to show
			
 
				+  const pages: (number | "...")[] = [];
			
 
				+  if (totalPages <= 7) {
			
 
				+    for (let i = 1; i <= totalPages; i++) pages.push(i);
			
 
				+  } else {
			
 
				+    pages.push(1);
			
 
				+    if (page > 3) pages.push("...");
			
 
				+    for (let i = Math.max(2, page - 1); i <= Math.min(totalPages - 1, page + 1); i++) {
			
 
				+      pages.push(i);
			
 
				+    }
			
 
				+    if (page < totalPages - 2) pages.push("...");
			
 
				+    pages.push(totalPages);
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex items-center justify-between px-3 py-2.5 border-t" style={{ borderColor: "#e7e0d5" }}>
			
 
				+      <span className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+        Showing {startItem}–{endItem} of {total} conversations
			
 
				+      </span>
			
 
				+      <div className="flex items-center gap-1">
			
 
				+        <button
			
 
				+          onClick={() => onPageChange(page - 1)}
			
 
				+          disabled={page <= 1}
			
 
				+          className="w-7 h-7 rounded flex items-center justify-center disabled:opacity-30 hover:bg-stone-100 transition-colors"
			
 
				+        >
			
 
				+          <ChevronLeft className="w-4 h-4" style={{ color: "#78716C" }} />
			
 
				+        </button>
			
 
				+        {pages.map((p, i) =>
			
 
				+          p === "..." ? (
			
 
				+            <span key={`e${i}`} className="w-7 h-7 flex items-center justify-center text-xs" style={{ color: "#a8a29e" }}>...</span>
			
 
				+          ) : (
			
 
				+            <button
			
 
				+              key={p}
			
 
				+              onClick={() => onPageChange(p)}
			
 
				+              className="w-7 h-7 rounded text-xs font-medium flex items-center justify-center transition-colors"
			
 
				+              style={{
			
 
				+                background: p === page ? "#14532D" : "transparent",
			
 
				+                color: p === page ? "#fff" : "#78716C",
			
 
				+              }}
			
 
				+            >
			
 
				+              {p}
			
 
				+            </button>
			
 
				+          )
			
 
				+        )}
			
 
				+        <button
			
 
				+          onClick={() => onPageChange(page + 1)}
			
 
				+          disabled={page >= totalPages}
			
 
				+          className="w-7 h-7 rounded flex items-center justify-center disabled:opacity-30 hover:bg-stone-100 transition-colors"
			
 
				+        >
			
 
				+          <ChevronRight className="w-4 h-4" style={{ color: "#78716C" }} />
			
 
				+        </button>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Main Conversations View ─── */
			
 
				+export default function AgentDashboard() {
			
 
				+  const { user, isAuthenticated } = useAuth();
			
 
				+  const utils = trpc.useUtils();
			
 
				+
			
 
				+  // Filters state
			
 
				+  const [page, setPage] = useState(1);
			
 
				+  const [pageSize] = useState(20);
			
 
				+  const [statusFilter, setStatusFilter] = useState<string | undefined>(undefined);
			
 
				+  const [searchQuery, setSearchQuery] = useState("");
			
 
				+  const [debouncedSearch, setDebouncedSearch] = useState("");
			
 
				+  const [agentFilter, setAgentFilter] = useState<number | undefined>(undefined);
			
 
				+  const [dateFrom, setDateFrom] = useState("");
			
 
				+  const [dateTo, setDateTo] = useState("");
			
 
				+  const [sortBy, setSortBy] = useState<"updated" | "created" | "visitor" | "status" | "customerId" | "salesRep" | "agent">("updated");
			
 
				+  const [sortOrder, setSortOrder] = useState<"asc" | "desc">("desc");
			
 
				+  const [showFilters, setShowFilters] = useState(false);
			
 
				+
			
 
				+  // Selection state
			
 
				+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
			
 
				+  const [selectedConversationId, setSelectedConversationId] = useState<number | null>(null);
			
 
				+
			
 
				+  // Notification state
			
 
				+  const [notificationsEnabled, setNotificationsEnabled] = useState(false);
			
 
				+  const [prevMessageCounts, setPrevMessageCounts] = useState<Record<number, number>>({});
			
 
				+  const [notificationPermission, setNotificationPermission] = useState<NotificationPermission>(
			
 
				+    typeof window !== "undefined" && "Notification" in window ? Notification.permission : "default"
			
 
				+  );
			
 
				+
			
 
				+  // Request browser notification permission
			
 
				+  const requestNotificationPermission = useCallback(async () => {
			
 
				+    if (!("Notification" in window)) {
			
 
				+      toast.error("Browser notifications are not supported");
			
 
				+      return;
			
 
				+    }
			
 
				+    const permission = await Notification.requestPermission();
			
 
				+    setNotificationPermission(permission);
			
 
				+    if (permission === "granted") {
			
 
				+      setNotificationsEnabled(true);
			
 
				+      toast.success("Notifications enabled", { description: "You'll be notified when customers send new messages" });
			
 
				+    } else if (permission === "denied") {
			
 
				+      toast.error("Notifications blocked", { description: "Please enable notifications in your browser settings" });
			
 
				+    }
			
 
				+  }, []);
			
 
				+
			
 
				+  // Toggle notifications
			
 
				+  const toggleNotifications = useCallback(() => {
			
 
				+    if (notificationsEnabled) {
			
 
				+      setNotificationsEnabled(false);
			
 
				+      toast.info("Notifications paused");
			
 
				+    } else {
			
 
				+      if (notificationPermission === "granted") {
			
 
				+        setNotificationsEnabled(true);
			
 
				+        toast.success("Notifications enabled");
			
 
				+      } else {
			
 
				+        requestNotificationPermission();
			
 
				+      }
			
 
				+    }
			
 
				+  }, [notificationsEnabled, notificationPermission, requestNotificationPermission]);
			
 
				+
			
 
				+  // Debounce search
			
 
				+  useEffect(() => {
			
 
				+    const timer = setTimeout(() => {
			
 
				+      setDebouncedSearch(searchQuery);
			
 
				+      setPage(1);
			
 
				+    }, 300);
			
 
				+    return () => clearTimeout(timer);
			
 
				+  }, [searchQuery]);
			
 
				+
			
 
				+  // Reset page when filters change
			
 
				+  useEffect(() => { setPage(1); }, [statusFilter, agentFilter, dateFrom, dateTo, sortBy, sortOrder]);
			
 
				+
			
 
				+  // Stabilize query input
			
 
				+  const queryInput = useMemo(() => ({
			
 
				+    page,
			
 
				+    pageSize,
			
 
				+    status: statusFilter,
			
 
				+    search: debouncedSearch || undefined,
			
 
				+    agentId: agentFilter,
			
 
				+    dateFrom: dateFrom || undefined,
			
 
				+    dateTo: dateTo || undefined,
			
 
				+    sortBy,
			
 
				+    sortOrder,
			
 
				+  }), [page, pageSize, statusFilter, debouncedSearch, agentFilter, dateFrom, dateTo, sortBy, sortOrder]);
			
 
				+
			
 
				+  const { data: stats } = trpc.agent.stats.useQuery(undefined, {
			
 
				+    refetchInterval: 10000,
			
 
				+    enabled: isAuthenticated,
			
 
				+  });
			
 
				+
			
 
				+  const { data: convData, isLoading: convsLoading } = trpc.agent.conversationsAdvanced.useQuery(
			
 
				+    queryInput,
			
 
				+    { refetchInterval: 5000, enabled: isAuthenticated }
			
 
				+  );
			
 
				+
			
 
				+  const { data: agentsList } = trpc.agent.agents.useQuery(undefined, {
			
 
				+    enabled: isAuthenticated,
			
 
				+  });
			
 
				+
			
 
				+  const selectedConversation = useMemo(
			
 
				+    () => convData?.conversations?.find((c: any) => c.id === selectedConversationId),
			
 
				+    [convData, selectedConversationId]
			
 
				+  );
			
 
				+
			
 
				+  // Detect new customer messages and trigger notifications
			
 
				+  useEffect(() => {
			
 
				+    if (!notificationsEnabled || !convData?.conversations?.length) return;
			
 
				+
			
 
				+    const currentCounts: Record<number, number> = {};
			
 
				+    for (const conv of convData.conversations) {
			
 
				+      currentCounts[conv.id] = conv.messageCount || 0;
			
 
				+    }
			
 
				+
			
 
				+    // Only check if we have previous data (skip first load)
			
 
				+    if (Object.keys(prevMessageCounts).length > 0) {
			
 
				+      for (const conv of convData.conversations) {
			
 
				+        const prevCount = prevMessageCounts[conv.id] || 0;
			
 
				+        const currentCount = conv.messageCount || 0;
			
 
				+        if (currentCount > prevCount && conv.status !== "closed" && conv.status !== "resolved") {
			
 
				+          const newMsgCount = currentCount - prevCount;
			
 
				+          // In-app toast notification
			
 
				+          toast.info(
			
 
				+            `New message from ${conv.visitorName || "Visitor"}`,
			
 
				+            {
			
 
				+              description: `${newMsgCount} new message${newMsgCount > 1 ? "s" : ""} in conversation #${conv.id}`,
			
 
				+              action: {
			
 
				+                label: "View",
			
 
				+                onClick: () => setSelectedConversationId(conv.id),
			
 
				+              },
			
 
				+              duration: 8000,
			
 
				+            }
			
 
				+          );
			
 
				+
			
 
				+          // Browser notification (only when tab is not focused)
			
 
				+          if (notificationPermission === "granted" && document.hidden) {
			
 
				+            try {
			
 
				+              const notification = new Notification(
			
 
				+                `New message from ${conv.visitorName || "Visitor"}`,
			
 
				+                {
			
 
				+                  body: `${newMsgCount} new message${newMsgCount > 1 ? "s" : ""} in conversation #${conv.id}`,
			
 
				+                  icon: "/favicon.ico",
			
 
				+                  tag: `conv-${conv.id}`,
			
 
				+                }
			
 
				+              );
			
 
				+              notification.onclick = () => {
			
 
				+                window.focus();
			
 
				+                setSelectedConversationId(conv.id);
			
 
				+                notification.close();
			
 
				+              };
			
 
				+            } catch (e) {
			
 
				+              // Browser notification failed silently
			
 
				+            }
			
 
				+          }
			
 
				+        }
			
 
				+      }
			
 
				+    }
			
 
				+
			
 
				+    setPrevMessageCounts(currentCounts);
			
 
				+  }, [convData, notificationsEnabled, notificationPermission]); // eslint-disable-line react-hooks/exhaustive-deps
			
 
				+
			
 
				+  // Bulk actions
			
 
				+  const bulkStatusMutation = trpc.agent.bulkUpdateStatus.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      toast.success(`Updated ${data.updated} conversations`);
			
 
				+      setSelectedIds(new Set());
			
 
				+      utils.agent.conversationsAdvanced.invalidate();
			
 
				+      utils.agent.stats.invalidate();
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const deleteMutation = trpc.agent.deleteConversations.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      toast.success(`Deleted ${data.deleted} conversations`);
			
 
				+      setSelectedIds(new Set());
			
 
				+      setSelectedConversationId(null);
			
 
				+      utils.agent.conversationsAdvanced.invalidate();
			
 
				+      utils.agent.stats.invalidate();
			
 
				+    },
			
 
				+    onError: (err) => {
			
 
				+      toast.error(err.message || "Failed to delete");
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const toggleSelectAll = useCallback(() => {
			
 
				+    if (!convData?.conversations) return;
			
 
				+    const allIds = convData.conversations.map((c: any) => c.id);
			
 
				+    const allSelected = allIds.every((id: number) => selectedIds.has(id));
			
 
				+    if (allSelected) {
			
 
				+      setSelectedIds(new Set());
			
 
				+    } else {
			
 
				+      setSelectedIds(new Set(allIds));
			
 
				+    }
			
 
				+  }, [convData, selectedIds]);
			
 
				+
			
 
				+  const toggleSelect = useCallback((id: number, checked: boolean) => {
			
 
				+    setSelectedIds(prev => {
			
 
				+      const next = new Set(prev);
			
 
				+      if (checked) next.add(id); else next.delete(id);
			
 
				+      return next;
			
 
				+    });
			
 
				+  }, []);
			
 
				+
			
 
				+  const clearFilters = () => {
			
 
				+    setStatusFilter(undefined);
			
 
				+    setSearchQuery("");
			
 
				+    setAgentFilter(undefined);
			
 
				+    setDateFrom("");
			
 
				+    setDateTo("");
			
 
				+    setSortBy("updated");
			
 
				+    setSortOrder("desc");
			
 
				+    setPage(1);
			
 
				+  };
			
 
				+
			
 
				+  const hasActiveFilters = statusFilter || debouncedSearch || agentFilter || dateFrom || dateTo;
			
 
				+
			
 
				+  const toggleSort = (field: typeof sortBy) => {
			
 
				+    if (sortBy === field) {
			
 
				+      setSortOrder(prev => prev === "desc" ? "asc" : "desc");
			
 
				+    } else {
			
 
				+      setSortBy(field);
			
 
				+      setSortOrder("desc");
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  // If a conversation is selected, show the chat panel
			
 
				+  if (selectedConversationId && selectedConversation) {
			
 
				+    return (
			
 
				+      <div className="h-[calc(100vh-4rem)]">
			
 
				+        <div className="h-full rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+          <ChatPanel
			
 
				+            conversationId={selectedConversationId}
			
 
				+            conversation={selectedConversation}
			
 
				+            onBack={() => setSelectedConversationId(null)}
			
 
				+          />
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    );
			
 
				+  }
			
 
				+
			
 
				+  return (
			
 
				+    <div className="space-y-4">
			
 
				+      {/* Header */}
			
 
				+      <div className="flex items-start justify-between">
			
 
				+        <div>
			
 
				+          <h1 className="text-2xl font-bold" style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+            Conversations
			
 
				+          </h1>
			
 
				+          <p className="text-sm mt-1" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Monitor and respond to customer chatbot conversations with {BOT_NAME}.
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <button
			
 
				+          onClick={toggleNotifications}
			
 
				+          className="flex items-center gap-2 px-3 py-2 rounded-lg border text-sm font-medium transition-all"
			
 
				+          style={{
			
 
				+            borderColor: notificationsEnabled ? "#14532D40" : "#e7e0d5",
			
 
				+            background: notificationsEnabled ? "#14532D08" : "transparent",
			
 
				+            color: notificationsEnabled ? "#14532D" : "#78716C",
			
 
				+            fontFamily: "'Source Sans 3', sans-serif",
			
 
				+          }}
			
 
				+          title={notificationsEnabled ? "Notifications are on — click to pause" : "Enable notifications for new customer messages"}
			
 
				+        >
			
 
				+          {notificationsEnabled ? (
			
 
				+            <BellRing className="w-4 h-4" />
			
 
				+          ) : (
			
 
				+            <Bell className="w-4 h-4" />
			
 
				+          )}
			
 
				+          <span className="hidden sm:inline">
			
 
				+            {notificationsEnabled ? "Notifications On" : "Enable Notifications"}
			
 
				+          </span>
			
 
				+        </button>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Stats row — clickable to filter */}
			
 
				+      <div className="grid grid-cols-2 lg:grid-cols-5 gap-3">
			
 
				+        <StatCard
			
 
				+          icon={<MessageSquare className="w-4 h-4" />} label="Total Chats" value={stats?.total || 0} color="#14532D"
			
 
				+          isActive={!statusFilter} onClick={() => setStatusFilter(undefined)}
			
 
				+        />
			
 
				+        <StatCard
			
 
				+          icon={<Clock className="w-4 h-4" />} label="Active" value={stats?.active || 0} color="#0369a1"
			
 
				+          isActive={statusFilter === "active"} onClick={() => setStatusFilter(statusFilter === "active" ? undefined : "active")}
			
 
				+        />
			
 
				+        <StatCard
			
 
				+          icon={<AlertTriangle className="w-4 h-4" />} label="Escalated" value={stats?.escalated || 0} color="#C2410C"
			
 
				+          isActive={statusFilter === "escalated"} onClick={() => setStatusFilter(statusFilter === "escalated" ? undefined : "escalated")}
			
 
				+        />
			
 
				+        <StatCard
			
 
				+          icon={<CheckCircle2 className="w-4 h-4" />} label="Resolved" value={stats?.resolved || 0} color="#14532D"
			
 
				+          isActive={statusFilter === "resolved"} onClick={() => setStatusFilter(statusFilter === "resolved" ? undefined : "resolved")}
			
 
				+        />
			
 
				+        <StatCard
			
 
				+          icon={<BarChart3 className="w-4 h-4" />} label="Closed" value={stats?.closed || 0} color="#78716C"
			
 
				+          isActive={statusFilter === "closed"} onClick={() => setStatusFilter(statusFilter === "closed" ? undefined : "closed")}
			
 
				+        />
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Search & Filter toolbar */}
			
 
				+      <div className="rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <div className="p-3 flex items-center gap-3 flex-wrap">
			
 
				+          {/* Search */}
			
 
				+          <div className="flex-1 min-w-[200px] relative">
			
 
				+            <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "#a8a29e" }} />
			
 
				+            <input
			
 
				+              type="text"
			
 
				+              value={searchQuery}
			
 
				+              onChange={(e) => setSearchQuery(e.target.value)}
			
 
				+              placeholder="Search by name, email, customer ID, sales rep..."
			
 
				+              className="w-full pl-9 pr-3 py-2 rounded-lg text-sm border"
			
 
				+              style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif", background: "#fafaf9" }}
			
 
				+            />
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Toggle filters */}
			
 
				+          <Button
			
 
				+            variant="outline" size="sm"
			
 
				+            onClick={() => setShowFilters(!showFilters)}
			
 
				+            className="text-xs gap-1.5"
			
 
				+            style={{ borderColor: hasActiveFilters ? "#14532D40" : "#e7e0d5", color: hasActiveFilters ? "#14532D" : "#78716C" }}
			
 
				+          >
			
 
				+            <Filter className="w-3.5 h-3.5" />
			
 
				+            Filters
			
 
				+            {hasActiveFilters && (
			
 
				+              <span className="w-4 h-4 rounded-full text-[10px] flex items-center justify-center text-white" style={{ background: "#14532D" }}>
			
 
				+                {[statusFilter, agentFilter, dateFrom, dateTo].filter(Boolean).length}
			
 
				+              </span>
			
 
				+            )}
			
 
				+          </Button>
			
 
				+
			
 
				+          {/* Sort */}
			
 
				+          <Select value={sortBy} onValueChange={(v) => setSortBy(v as any)}>
			
 
				+            <SelectTrigger className="w-[140px] text-xs h-8" style={{ borderColor: "#e7e0d5" }}>
			
 
				+              <ArrowUpDown className="w-3 h-3 mr-1" style={{ color: "#a8a29e" }} />
			
 
				+              <SelectValue />
			
 
				+            </SelectTrigger>
			
 
				+            <SelectContent>
			
 
				+              <SelectItem value="updated">Last Activity</SelectItem>
			
 
				+              <SelectItem value="created">Date Created</SelectItem>
			
 
				+              <SelectItem value="visitor">Visitor Name</SelectItem>
			
 
				+              <SelectItem value="status">Status</SelectItem>
			
 
				+              <SelectItem value="customerId">Customer ID</SelectItem>
			
 
				+              <SelectItem value="salesRep">Sales Rep</SelectItem>
			
 
				+              <SelectItem value="agent">Agent Name</SelectItem>
			
 
				+            </SelectContent>
			
 
				+          </Select>
			
 
				+
			
 
				+          <button
			
 
				+            onClick={() => setSortOrder(prev => prev === "desc" ? "asc" : "desc")}
			
 
				+            className="w-8 h-8 rounded-lg flex items-center justify-center border hover:bg-stone-50 transition-colors"
			
 
				+            style={{ borderColor: "#e7e0d5" }}
			
 
				+            title={sortOrder === "desc" ? "Newest first" : "Oldest first"}
			
 
				+          >
			
 
				+            <ArrowUpDown className="w-3.5 h-3.5" style={{ color: "#78716C", transform: sortOrder === "asc" ? "scaleY(-1)" : undefined }} />
			
 
				+          </button>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Expanded filters */}
			
 
				+        {showFilters && (
			
 
				+          <div className="px-3 pb-3 flex items-center gap-3 flex-wrap border-t pt-3" style={{ borderColor: "#f5f0e8" }}>
			
 
				+            {/* Agent filter */}
			
 
				+            <div className="flex items-center gap-2">
			
 
				+              <UserCheck className="w-3.5 h-3.5" style={{ color: "#a8a29e" }} />
			
 
				+              <Select
			
 
				+                value={agentFilter?.toString() || "all"}
			
 
				+                onValueChange={(v) => setAgentFilter(v === "all" ? undefined : Number(v))}
			
 
				+              >
			
 
				+                <SelectTrigger className="w-[160px] text-xs h-8" style={{ borderColor: "#e7e0d5" }}>
			
 
				+                  <SelectValue placeholder="All Agents" />
			
 
				+                </SelectTrigger>
			
 
				+                <SelectContent>
			
 
				+                  <SelectItem value="all">All Agents</SelectItem>
			
 
				+                  {agentsList?.map((agent: any) => (
			
 
				+                    <SelectItem key={agent.id} value={agent.id.toString()}>
			
 
				+                      {agent.name || agent.email || `Agent #${agent.id}`}
			
 
				+                    </SelectItem>
			
 
				+                  ))}
			
 
				+                </SelectContent>
			
 
				+              </Select>
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Date range */}
			
 
				+            <div className="flex items-center gap-2">
			
 
				+              <Calendar className="w-3.5 h-3.5" style={{ color: "#a8a29e" }} />
			
 
				+              <input
			
 
				+                type="date"
			
 
				+                value={dateFrom}
			
 
				+                onChange={(e) => setDateFrom(e.target.value)}
			
 
				+                className="px-2 py-1 rounded-lg text-xs border h-8"
			
 
				+                style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                placeholder="From"
			
 
				+              />
			
 
				+              <span className="text-xs" style={{ color: "#a8a29e" }}>to</span>
			
 
				+              <input
			
 
				+                type="date"
			
 
				+                value={dateTo}
			
 
				+                onChange={(e) => setDateTo(e.target.value)}
			
 
				+                className="px-2 py-1 rounded-lg text-xs border h-8"
			
 
				+                style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                placeholder="To"
			
 
				+              />
			
 
				+            </div>
			
 
				+
			
 
				+            {hasActiveFilters && (
			
 
				+              <button
			
 
				+                onClick={clearFilters}
			
 
				+                className="text-xs font-medium px-2 py-1 rounded-lg hover:bg-stone-100 transition-colors"
			
 
				+                style={{ color: "#C2410C" }}
			
 
				+              >
			
 
				+                Clear all filters
			
 
				+              </button>
			
 
				+            )}
			
 
				+          </div>
			
 
				+        )}
			
 
				+
			
 
				+        {/* Bulk actions bar */}
			
 
				+        {selectedIds.size > 0 && (
			
 
				+          <div className="px-3 pb-3 flex items-center gap-3 border-t pt-3" style={{ borderColor: "#f5f0e8" }}>
			
 
				+            <span className="text-xs font-medium" style={{ color: "#14532D" }}>
			
 
				+              {selectedIds.size} selected
			
 
				+            </span>
			
 
				+            <Button
			
 
				+              size="sm" variant="outline" className="text-xs h-7"
			
 
				+              style={{ borderColor: "#14532D40", color: "#14532D" }}
			
 
				+              onClick={() => bulkStatusMutation.mutate({ conversationIds: Array.from(selectedIds), status: "resolved" })}
			
 
				+            >
			
 
				+              <CheckCircle2 className="w-3 h-3 mr-1" /> Resolve
			
 
				+            </Button>
			
 
				+            <Button
			
 
				+              size="sm" variant="outline" className="text-xs h-7"
			
 
				+              style={{ borderColor: "#78716C40", color: "#78716C" }}
			
 
				+              onClick={() => bulkStatusMutation.mutate({ conversationIds: Array.from(selectedIds), status: "closed" })}
			
 
				+            >
			
 
				+              <X className="w-3 h-3 mr-1" /> Close
			
 
				+            </Button>
			
 
				+            {user?.role === "admin" && (
			
 
				+              <Button
			
 
				+                size="sm" variant="outline" className="text-xs h-7"
			
 
				+                style={{ borderColor: "#dc262640", color: "#dc2626" }}
			
 
				+                onClick={() => {
			
 
				+                  if (confirm(`Delete ${selectedIds.size} conversation(s)? This cannot be undone.`)) {
			
 
				+                    deleteMutation.mutate({ conversationIds: Array.from(selectedIds) });
			
 
				+                  }
			
 
				+                }}
			
 
				+              >
			
 
				+                <Trash2 className="w-3 h-3 mr-1" /> Delete
			
 
				+              </Button>
			
 
				+            )}
			
 
				+            <button
			
 
				+              onClick={() => setSelectedIds(new Set())}
			
 
				+              className="text-xs ml-auto" style={{ color: "#a8a29e" }}
			
 
				+            >
			
 
				+              Deselect all
			
 
				+            </button>
			
 
				+          </div>
			
 
				+        )}
			
 
				+
			
 
				+        {/* Table header */}
			
 
				+        <div className="flex items-center gap-3 px-3 py-2 border-t text-[11px] font-semibold uppercase tracking-wider" style={{ borderColor: "#f5f0e8", color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+          <input
			
 
				+            type="checkbox"
			
 
				+            checked={convData?.conversations?.length ? convData.conversations.every((c: any) => selectedIds.has(c.id)) : false}
			
 
				+            onChange={toggleSelectAll}
			
 
				+            className="w-4 h-4 rounded border-stone-300 accent-green-800 shrink-0"
			
 
				+          />
			
 
				+          <button onClick={() => toggleSort("visitor")} className="w-36 shrink-0 text-left flex items-center gap-1 hover:text-stone-600">
			
 
				+            Visitor {sortBy === "visitor" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+          <button onClick={() => toggleSort("customerId")} className="w-28 shrink-0 text-left flex items-center gap-1 hover:text-stone-600 hidden lg:flex">
			
 
				+            Customer ID {sortBy === "customerId" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+          <button onClick={() => toggleSort("salesRep")} className="w-28 shrink-0 text-left flex items-center gap-1 hover:text-stone-600 hidden lg:flex">
			
 
				+            Sales Rep {sortBy === "salesRep" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+          <button onClick={() => toggleSort("agent")} className="w-28 shrink-0 text-left flex items-center gap-1 hover:text-stone-600 hidden lg:flex">
			
 
				+            Agent {sortBy === "agent" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+          <button onClick={() => toggleSort("status")} className="w-24 shrink-0 text-left flex items-center gap-1 hover:text-stone-600">
			
 
				+            Status {sortBy === "status" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+          <span className="w-14 shrink-0">Msgs</span>
			
 
				+          <span className="flex-1 hidden xl:block">Contact</span>
			
 
				+          <button onClick={() => toggleSort("updated")} className="w-28 shrink-0 text-right flex items-center gap-1 justify-end hover:text-stone-600 hidden md:flex">
			
 
				+            Last Active {sortBy === "updated" && <ArrowUpDown className="w-3 h-3" />}
			
 
				+          </button>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Conversation rows */}
			
 
				+        <div className="min-h-[200px]">
			
 
				+          {convsLoading ? (
			
 
				+            <div className="text-center py-12 text-sm" style={{ color: "#a8a29e" }}>
			
 
				+              <MessageSquare className="w-6 h-6 mx-auto mb-2 animate-pulse" style={{ color: "#d6d3d1" }} />
			
 
				+              Loading conversations...
			
 
				+            </div>
			
 
				+          ) : !convData?.conversations?.length ? (
			
 
				+            <div className="text-center py-12">
			
 
				+              <MessageSquare className="w-10 h-10 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+              <p className="text-sm font-medium" style={{ color: "#78716C" }}>
			
 
				+                {hasActiveFilters ? "No conversations match your filters" : "No conversations yet"}
			
 
				+              </p>
			
 
				+              <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>
			
 
				+                {hasActiveFilters
			
 
				+                  ? "Try adjusting your search or filter criteria"
			
 
				+                  : `Conversations will appear here when visitors chat with ${BOT_NAME}`}
			
 
				+              </p>
			
 
				+              {hasActiveFilters && (
			
 
				+                <button
			
 
				+                  onClick={clearFilters}
			
 
				+                  className="mt-3 text-xs font-medium px-3 py-1.5 rounded-lg"
			
 
				+                  style={{ background: "#14532D12", color: "#14532D" }}
			
 
				+                >
			
 
				+                  Clear all filters
			
 
				+                </button>
			
 
				+              )}
			
 
				+            </div>
			
 
				+          ) : (
			
 
				+            convData.conversations.map((conv: any) => (
			
 
				+              <ConversationRow
			
 
				+                key={conv.id}
			
 
				+                conversation={conv}
			
 
				+                isSelected={conv.id === selectedConversationId}
			
 
				+                isChecked={selectedIds.has(conv.id)}
			
 
				+                onClick={() => setSelectedConversationId(conv.id)}
			
 
				+                onCheck={(checked) => toggleSelect(conv.id, checked)}
			
 
				+              />
			
 
				+            ))
			
 
				+          )}
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Pagination */}
			
 
				+        {convData && convData.totalPages > 1 && (
			
 
				+          <PaginationBar
			
 
				+            page={convData.page}
			
 
				+            totalPages={convData.totalPages}
			
 
				+            total={convData.total}
			
 
				+            pageSize={convData.pageSize}
			
 
				+            onPageChange={setPage}
			
 
				+          />
			
 
				+        )}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/Analytics.tsx
+++ b/client/src/pages/Analytics.tsx
@@ -0,0 +1,305 @@
 
				+/**
			
 
				+ * Analytics — Track chatbot resolution rate, interactions, and category breakdown
			
 
				+ * Design: Warm Showroom palette with clean dashboard cards
			
 
				+ */
			
 
				+import { useState, useMemo } from "react";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import {
			
 
				+  BarChart3, TrendingUp, CheckCircle2, AlertTriangle,
			
 
				+  Users, MessageSquare, Bot, Headphones, ThumbsUp, ThumbsDown,
			
 
				+  Package, Truck, RotateCw, XCircle, ArrowUpRight, ArrowDownRight,
			
 
				+  Calendar, RefreshCw, MousePointerClick,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+/* ─── Stat Card ─── */
			
 
				+function StatCard({
			
 
				+  label, value, icon, color, subtext, trend,
			
 
				+}: {
			
 
				+  label: string; value: string | number; icon: React.ReactNode; color: string;
			
 
				+  subtext?: string; trend?: { value: number; positive: boolean };
			
 
				+}) {
			
 
				+  return (
			
 
				+    <div className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+      <div className="flex items-start justify-between">
			
 
				+        <div>
			
 
				+          <p className="text-[11px] font-medium uppercase tracking-wider" style={{ color: "#a8a29e" }}>{label}</p>
			
 
				+          <p className="text-2xl font-bold mt-1" style={{ color: "#292524", fontFamily: "'Playfair Display', serif" }}>{value}</p>
			
 
				+          {subtext && <p className="text-[11px] mt-0.5" style={{ color: "#78716C" }}>{subtext}</p>}
			
 
				+          {trend && (
			
 
				+            <div className="flex items-center gap-1 mt-1">
			
 
				+              {trend.positive ? <ArrowUpRight className="w-3 h-3" style={{ color: "#14532D" }} /> : <ArrowDownRight className="w-3 h-3" style={{ color: "#dc2626" }} />}
			
 
				+              <span className="text-[10px] font-medium" style={{ color: trend.positive ? "#14532D" : "#dc2626" }}>
			
 
				+                {trend.value}% vs last period
			
 
				+              </span>
			
 
				+            </div>
			
 
				+          )}
			
 
				+        </div>
			
 
				+        <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: `${color}14`, color }}>
			
 
				+          {icon}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Category Bar ─── */
			
 
				+function CategoryBar({ category, count, resolved, total, icon, color }: {
			
 
				+  category: string; count: number; resolved: number; total: number;
			
 
				+  icon: React.ReactNode; color: string;
			
 
				+}) {
			
 
				+  const pct = total > 0 ? Math.round((count / total) * 100) : 0;
			
 
				+  const resPct = count > 0 ? Math.round((resolved / count) * 100) : 0;
			
 
				+
			
 
				+  return (
			
 
				+    <div className="p-3 rounded-lg border" style={{ borderColor: "#e7e0d5", background: "#fff" }}>
			
 
				+      <div className="flex items-center justify-between mb-2">
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          <div className="w-7 h-7 rounded-md flex items-center justify-center" style={{ background: `${color}14`, color }}>
			
 
				+            {icon}
			
 
				+          </div>
			
 
				+          <div>
			
 
				+            <span className="text-sm font-semibold capitalize" style={{ color: "#292524" }}>{category}</span>
			
 
				+            <span className="text-[10px] ml-2" style={{ color: "#a8a29e" }}>{count} interactions</span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <span className="text-xs font-bold" style={{ color }}>{pct}%</span>
			
 
				+      </div>
			
 
				+      {/* Progress bar */}
			
 
				+      <div className="h-2 rounded-full overflow-hidden" style={{ background: "#f5f0e8" }}>
			
 
				+        <div className="h-full rounded-full transition-all" style={{ width: `${pct}%`, background: color }} />
			
 
				+      </div>
			
 
				+      <div className="flex items-center justify-between mt-1.5">
			
 
				+        <span className="text-[10px]" style={{ color: "#a8a29e" }}>Resolution rate</span>
			
 
				+        <span className="text-[10px] font-medium" style={{ color: resPct >= 70 ? "#14532D" : resPct >= 40 ? "#ca8a04" : "#dc2626" }}>
			
 
				+          {resPct}%
			
 
				+        </span>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Resolution Donut ─── */
			
 
				+function ResolutionDonut({ botRate, agentRate, escalatedRate, abandonedRate }: {
			
 
				+  botRate: number; agentRate: number; escalatedRate: number; abandonedRate: number;
			
 
				+}) {
			
 
				+  const total = botRate + agentRate + escalatedRate + abandonedRate;
			
 
				+  const segments = [
			
 
				+    { label: "Bot Resolved", pct: botRate, color: "#14532D" },
			
 
				+    { label: "Agent Resolved", pct: agentRate, color: "#0369a1" },
			
 
				+    { label: "Escalated", pct: escalatedRate, color: "#ca8a04" },
			
 
				+    { label: "Abandoned", pct: abandonedRate, color: "#dc2626" },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <div className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+      <h3 className="text-xs font-bold uppercase tracking-wider mb-4" style={{ color: "#78716C" }}>Resolution Breakdown</h3>
			
 
				+      <div className="flex items-center gap-6">
			
 
				+        {/* Simple visual bars */}
			
 
				+        <div className="flex-1 space-y-2">
			
 
				+          {segments.map(seg => (
			
 
				+            <div key={seg.label}>
			
 
				+              <div className="flex items-center justify-between mb-0.5">
			
 
				+                <span className="text-[11px] font-medium" style={{ color: "#292524" }}>{seg.label}</span>
			
 
				+                <span className="text-[11px] font-bold" style={{ color: seg.color }}>{seg.pct}%</span>
			
 
				+              </div>
			
 
				+              <div className="h-2.5 rounded-full overflow-hidden" style={{ background: "#f5f0e8" }}>
			
 
				+                <div className="h-full rounded-full transition-all" style={{ width: `${seg.pct}%`, background: seg.color }} />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+        {/* Overall score */}
			
 
				+        <div className="text-center shrink-0">
			
 
				+          <div
			
 
				+            className="w-20 h-20 rounded-full flex items-center justify-center border-4"
			
 
				+            style={{ borderColor: "#14532D", background: "#14532D08" }}
			
 
				+          >
			
 
				+            <div>
			
 
				+              <div className="text-xl font-bold" style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}>
			
 
				+                {botRate + agentRate}%
			
 
				+              </div>
			
 
				+              <div className="text-[8px] uppercase tracking-wider" style={{ color: "#78716C" }}>Resolved</div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+export default function Analytics() {
			
 
				+  const [dateRange, setDateRange] = useState<"7d" | "30d" | "90d" | "all">("30d");
			
 
				+
			
 
				+  const dateFilters = useMemo(() => {
			
 
				+    const now = new Date();
			
 
				+    if (dateRange === "all") return {};
			
 
				+    const days = dateRange === "7d" ? 7 : dateRange === "30d" ? 30 : 90;
			
 
				+    const start = new Date(now.getTime() - days * 24 * 60 * 60 * 1000);
			
 
				+    return { startDate: start.toISOString(), endDate: now.toISOString() };
			
 
				+  }, [dateRange]);
			
 
				+
			
 
				+  const { data: summary, isLoading, refetch } = trpc.analytics.summary.useQuery(dateFilters);
			
 
				+
			
 
				+  const categoryIcons: Record<string, { icon: React.ReactNode; color: string }> = {
			
 
				+    orders: { icon: <Package className="w-3.5 h-3.5" />, color: "#14532D" },
			
 
				+    shipping: { icon: <Truck className="w-3.5 h-3.5" />, color: "#0369a1" },
			
 
				+    returning: { icon: <RotateCw className="w-3.5 h-3.5" />, color: "#ca8a04" },
			
 
				+    cancelling: { icon: <XCircle className="w-3.5 h-3.5" />, color: "#dc2626" },
			
 
				+  };
			
 
				+
			
 
				+  // Compute rates for donut
			
 
				+  const totalOutcomes = summary ? (summary.resolvedByBot + summary.resolvedByAgent + summary.escalated + summary.abandoned) : 0;
			
 
				+  const botRate = totalOutcomes > 0 ? Math.round((summary!.resolvedByBot / totalOutcomes) * 100) : 0;
			
 
				+  const agentRate = totalOutcomes > 0 ? Math.round((summary!.resolvedByAgent / totalOutcomes) * 100) : 0;
			
 
				+  const escalatedRate = totalOutcomes > 0 ? Math.round((summary!.escalated / totalOutcomes) * 100) : 0;
			
 
				+  const abandonedRate = totalOutcomes > 0 ? Math.round((summary!.abandoned / totalOutcomes) * 100) : 0;
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex flex-col" style={{ height: "calc(100vh - 4rem)" }}>
			
 
				+      {/* Top toolbar */}
			
 
				+      <div className="border-b px-4 h-12 flex items-center justify-between shrink-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "#ca8a04" }}>
			
 
				+            <BarChart3 className="w-3.5 h-3.5 text-white" />
			
 
				+          </div>
			
 
				+          <span className="text-sm font-bold" style={{ color: "#ca8a04", fontFamily: "'Playfair Display', serif" }}>Analytics</span>
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          {/* Date range selector */}
			
 
				+          <div className="flex gap-0.5 p-0.5 rounded-lg" style={{ background: "#f5f0e8" }}>
			
 
				+            {(["7d", "30d", "90d", "all"] as const).map(range => (
			
 
				+              <button
			
 
				+                key={range}
			
 
				+                onClick={() => setDateRange(range)}
			
 
				+                className="px-2.5 py-1 rounded-md text-[11px] font-medium transition-colors"
			
 
				+                style={{
			
 
				+                  background: dateRange === range ? "#fff" : "transparent",
			
 
				+                  color: dateRange === range ? "#292524" : "#a8a29e",
			
 
				+                  boxShadow: dateRange === range ? "0 1px 2px rgba(0,0,0,0.05)" : "none",
			
 
				+                }}
			
 
				+              >
			
 
				+                {range === "all" ? "All" : range}
			
 
				+              </button>
			
 
				+            ))}
			
 
				+          </div>
			
 
				+          <Button onClick={() => refetch()} variant="outline" size="sm" className="text-xs">
			
 
				+            <RefreshCw className="w-3 h-3 mr-1" /> Refresh
			
 
				+          </Button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Content */}
			
 
				+      <div className="flex-1 overflow-y-auto p-4 space-y-4" style={{ background: "#FFFBEB" }}>
			
 
				+        {isLoading ? (
			
 
				+          <div className="flex items-center justify-center py-20">
			
 
				+            <RefreshCw className="w-6 h-6 animate-spin" style={{ color: "#ca8a04" }} />
			
 
				+            <span className="ml-3 text-sm" style={{ color: "#78716C" }}>Loading analytics...</span>
			
 
				+          </div>
			
 
				+        ) : !summary ? (
			
 
				+          <div className="text-center py-20">
			
 
				+            <BarChart3 className="w-12 h-12 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+            <p className="text-sm" style={{ color: "#78716C" }}>No analytics data available yet</p>
			
 
				+            <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>Data will appear as customers interact with the chatbot</p>
			
 
				+          </div>
			
 
				+        ) : (
			
 
				+          <>
			
 
				+            {/* Top-level stats */}
			
 
				+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
			
 
				+              <StatCard
			
 
				+                label="Total Sessions"
			
 
				+                value={summary.totalSessions}
			
 
				+                icon={<Users className="w-5 h-5" />}
			
 
				+                color="#14532D"
			
 
				+                subtext={`${summary.totalEvents} total events`}
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Resolution Rate"
			
 
				+                value={`${summary.resolutionRate}%`}
			
 
				+                icon={<CheckCircle2 className="w-5 h-5" />}
			
 
				+                color={summary.resolutionRate >= 70 ? "#14532D" : summary.resolutionRate >= 40 ? "#ca8a04" : "#dc2626"}
			
 
				+                subtext={`${summary.resolvedByBot + summary.resolvedByAgent} resolved`}
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Bot Resolution"
			
 
				+                value={`${summary.botResolutionRate}%`}
			
 
				+                icon={<Bot className="w-5 h-5" />}
			
 
				+                color="#0369a1"
			
 
				+                subtext={`${summary.resolvedByBot} by bot`}
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Escalated"
			
 
				+                value={summary.escalated}
			
 
				+                icon={<Headphones className="w-5 h-5" />}
			
 
				+                color="#C2410C"
			
 
				+                subtext={`${summary.abandoned} abandoned`}
			
 
				+              />
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Second row */}
			
 
				+            <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
			
 
				+              <StatCard
			
 
				+                label="Messages Sent"
			
 
				+                value={summary.messagesSent}
			
 
				+                icon={<MessageSquare className="w-5 h-5" />}
			
 
				+                color="#7c3aed"
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Messages Received"
			
 
				+                value={summary.messagesReceived}
			
 
				+                icon={<MessageSquare className="w-5 h-5" />}
			
 
				+                color="#059669"
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Button Clicks"
			
 
				+                value={summary.buttonClicks}
			
 
				+                icon={<MousePointerClick className="w-5 h-5" />}
			
 
				+                color="#ca8a04"
			
 
				+              />
			
 
				+              <StatCard
			
 
				+                label="Feedback"
			
 
				+                value={`${summary.positiveFeedback}/${summary.negativeFeedback}`}
			
 
				+                icon={summary.positiveFeedback >= summary.negativeFeedback ? <ThumbsUp className="w-5 h-5" /> : <ThumbsDown className="w-5 h-5" />}
			
 
				+                color={summary.positiveFeedback >= summary.negativeFeedback ? "#14532D" : "#dc2626"}
			
 
				+                subtext="Positive / Negative"
			
 
				+              />
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Resolution breakdown */}
			
 
				+            {totalOutcomes > 0 && (
			
 
				+              <ResolutionDonut
			
 
				+                botRate={botRate}
			
 
				+                agentRate={agentRate}
			
 
				+                escalatedRate={escalatedRate}
			
 
				+                abandonedRate={abandonedRate}
			
 
				+              />
			
 
				+            )}
			
 
				+
			
 
				+            {/* Category breakdown */}
			
 
				+            <div>
			
 
				+              <h3 className="text-xs font-bold uppercase tracking-wider mb-3" style={{ color: "#78716C" }}>
			
 
				+                Category Breakdown
			
 
				+              </h3>
			
 
				+              <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
			
 
				+                {summary.categoryBreakdown.map(cat => {
			
 
				+                  const catConfig = categoryIcons[cat.category] || { icon: <Package className="w-3.5 h-3.5" />, color: "#78716C" };
			
 
				+                  return (
			
 
				+                    <CategoryBar
			
 
				+                      key={cat.category}
			
 
				+                      category={cat.category}
			
 
				+                      count={cat.count}
			
 
				+                      resolved={cat.resolved}
			
 
				+                      total={summary.totalEvents}
			
 
				+                      icon={catConfig.icon}
			
 
				+                      color={catConfig.color}
			
 
				+                    />
			
 
				+                  );
			
 
				+                })}
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </>
			
 
				+        )}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/ComponentShowcase.tsx
+++ b/client/src/pages/ComponentShowcase.tsx
@@ -0,0 +1,1437 @@
 
				+import {
			
 
				+  Accordion,
			
 
				+  AccordionContent,
			
 
				+  AccordionItem,
			
 
				+  AccordionTrigger,
			
 
				+} from "@/components/ui/accordion";
			
 
				+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
			
 
				+import { AspectRatio } from "@/components/ui/aspect-ratio";
			
 
				+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
			
 
				+import { Badge } from "@/components/ui/badge";
			
 
				+import {
			
 
				+  Breadcrumb,
			
 
				+  BreadcrumbItem,
			
 
				+  BreadcrumbLink,
			
 
				+  BreadcrumbList,
			
 
				+  BreadcrumbPage,
			
 
				+  BreadcrumbSeparator,
			
 
				+} from "@/components/ui/breadcrumb";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Calendar } from "@/components/ui/calendar";
			
 
				+import {
			
 
				+  Card,
			
 
				+  CardContent,
			
 
				+  CardDescription,
			
 
				+  CardFooter,
			
 
				+  CardHeader,
			
 
				+  CardTitle,
			
 
				+} from "@/components/ui/card";
			
 
				+import {
			
 
				+  Carousel,
			
 
				+  CarouselContent,
			
 
				+  CarouselItem,
			
 
				+  CarouselNext,
			
 
				+  CarouselPrevious,
			
 
				+} from "@/components/ui/carousel";
			
 
				+import { Checkbox } from "@/components/ui/checkbox";
			
 
				+import {
			
 
				+  Collapsible,
			
 
				+  CollapsibleContent,
			
 
				+  CollapsibleTrigger,
			
 
				+} from "@/components/ui/collapsible";
			
 
				+import {
			
 
				+  Command,
			
 
				+  CommandEmpty,
			
 
				+  CommandGroup,
			
 
				+  CommandInput,
			
 
				+  CommandItem,
			
 
				+  CommandList,
			
 
				+} from "@/components/ui/command";
			
 
				+import {
			
 
				+  ContextMenu,
			
 
				+  ContextMenuContent,
			
 
				+  ContextMenuItem,
			
 
				+  ContextMenuTrigger,
			
 
				+} from "@/components/ui/context-menu";
			
 
				+import {
			
 
				+  Dialog,
			
 
				+  DialogContent,
			
 
				+  DialogDescription,
			
 
				+  DialogHeader,
			
 
				+  DialogTitle,
			
 
				+  DialogTrigger,
			
 
				+} from "@/components/ui/dialog";
			
 
				+import {
			
 
				+  Drawer,
			
 
				+  DrawerClose,
			
 
				+  DrawerContent,
			
 
				+  DrawerDescription,
			
 
				+  DrawerFooter,
			
 
				+  DrawerHeader,
			
 
				+  DrawerTitle,
			
 
				+  DrawerTrigger,
			
 
				+} from "@/components/ui/drawer";
			
 
				+import {
			
 
				+  DropdownMenu,
			
 
				+  DropdownMenuContent,
			
 
				+  DropdownMenuItem,
			
 
				+  DropdownMenuLabel,
			
 
				+  DropdownMenuSeparator,
			
 
				+  DropdownMenuTrigger,
			
 
				+} from "@/components/ui/dropdown-menu";
			
 
				+import {
			
 
				+  HoverCard,
			
 
				+  HoverCardContent,
			
 
				+  HoverCardTrigger,
			
 
				+} from "@/components/ui/hover-card";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import {
			
 
				+  InputOTP,
			
 
				+  InputOTPGroup,
			
 
				+  InputOTPSlot,
			
 
				+} from "@/components/ui/input-otp";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import {
			
 
				+  Menubar,
			
 
				+  MenubarContent,
			
 
				+  MenubarItem,
			
 
				+  MenubarMenu,
			
 
				+  MenubarSeparator,
			
 
				+  MenubarTrigger,
			
 
				+} from "@/components/ui/menubar";
			
 
				+import {
			
 
				+  Pagination,
			
 
				+  PaginationContent,
			
 
				+  PaginationItem,
			
 
				+  PaginationLink,
			
 
				+  PaginationNext,
			
 
				+  PaginationPrevious,
			
 
				+} from "@/components/ui/pagination";
			
 
				+import {
			
 
				+  Popover,
			
 
				+  PopoverContent,
			
 
				+  PopoverTrigger,
			
 
				+} from "@/components/ui/popover";
			
 
				+import { Progress } from "@/components/ui/progress";
			
 
				+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
			
 
				+import {
			
 
				+  ResizableHandle,
			
 
				+  ResizablePanel,
			
 
				+  ResizablePanelGroup,
			
 
				+} from "@/components/ui/resizable";
			
 
				+import { ScrollArea } from "@/components/ui/scroll-area";
			
 
				+import {
			
 
				+  Select,
			
 
				+  SelectContent,
			
 
				+  SelectItem,
			
 
				+  SelectTrigger,
			
 
				+  SelectValue,
			
 
				+} from "@/components/ui/select";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+import {
			
 
				+  Sheet,
			
 
				+  SheetContent,
			
 
				+  SheetDescription,
			
 
				+  SheetHeader,
			
 
				+  SheetTitle,
			
 
				+  SheetTrigger,
			
 
				+} from "@/components/ui/sheet";
			
 
				+import { Skeleton } from "@/components/ui/skeleton";
			
 
				+import { Slider } from "@/components/ui/slider";
			
 
				+import { Switch } from "@/components/ui/switch";
			
 
				+import {
			
 
				+  Table,
			
 
				+  TableBody,
			
 
				+  TableCaption,
			
 
				+  TableCell,
			
 
				+  TableHead,
			
 
				+  TableHeader,
			
 
				+  TableRow,
			
 
				+} from "@/components/ui/table";
			
 
				+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
			
 
				+import { Textarea } from "@/components/ui/textarea";
			
 
				+import { Toggle } from "@/components/ui/toggle";
			
 
				+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
			
 
				+import {
			
 
				+  Tooltip,
			
 
				+  TooltipContent,
			
 
				+  TooltipTrigger,
			
 
				+} from "@/components/ui/tooltip";
			
 
				+import { useTheme } from "@/contexts/ThemeContext";
			
 
				+import { format } from "date-fns";
			
 
				+import { zhCN } from "date-fns/locale";
			
 
				+import {
			
 
				+  AlertCircle,
			
 
				+  CalendarIcon,
			
 
				+  Check,
			
 
				+  Clock,
			
 
				+  Moon,
			
 
				+  Sun,
			
 
				+  X,
			
 
				+} from "lucide-react";
			
 
				+import { useState } from "react";
			
 
				+import { toast as sonnerToast } from "sonner";
			
 
				+import { AIChatBox, type Message } from "@/components/AIChatBox";
			
 
				+
			
 
				+export default function ComponentsShowcase() {
			
 
				+  const { theme, toggleTheme } = useTheme();
			
 
				+  const [date, setDate] = useState<Date | undefined>(new Date());
			
 
				+  const [datePickerDate, setDatePickerDate] = useState<Date>();
			
 
				+  const [selectedFruits, setSelectedFruits] = useState<string[]>([]);
			
 
				+  const [progress, setProgress] = useState(33);
			
 
				+  const [currentPage, setCurrentPage] = useState(2);
			
 
				+  const [openCombobox, setOpenCombobox] = useState(false);
			
 
				+  const [selectedFramework, setSelectedFramework] = useState("");
			
 
				+  const [selectedMonth, setSelectedMonth] = useState("");
			
 
				+  const [selectedYear, setSelectedYear] = useState("");
			
 
				+  const [dialogInput, setDialogInput] = useState("");
			
 
				+  const [dialogOpen, setDialogOpen] = useState(false);
			
 
				+
			
 
				+  // AI ChatBox demo state
			
 
				+  const [chatMessages, setChatMessages] = useState<Message[]>([
			
 
				+    { role: "system", content: "You are a helpful assistant." },
			
 
				+  ]);
			
 
				+  const [isChatLoading, setIsChatLoading] = useState(false);
			
 
				+
			
 
				+  const handleDialogSubmit = () => {
			
 
				+    console.log("Dialog submitted with value:", dialogInput);
			
 
				+    sonnerToast.success("Submitted successfully", {
			
 
				+      description: `Input: ${dialogInput}`,
			
 
				+    });
			
 
				+    setDialogInput("");
			
 
				+    setDialogOpen(false);
			
 
				+  };
			
 
				+
			
 
				+  const handleDialogKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
			
 
				+    if (e.key === "Enter" && !e.nativeEvent.isComposing) {
			
 
				+      e.preventDefault();
			
 
				+      handleDialogSubmit();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleChatSend = (content: string) => {
			
 
				+    // Add user message
			
 
				+    const newMessages: Message[] = [...chatMessages, { role: "user", content }];
			
 
				+    setChatMessages(newMessages);
			
 
				+
			
 
				+    // Simulate AI response with delay
			
 
				+    setIsChatLoading(true);
			
 
				+    setTimeout(() => {
			
 
				+      const aiResponse: Message = {
			
 
				+        role: "assistant",
			
 
				+        content: `This is a **demo response**. In a real app, you would call a tRPC mutation here:\n\n\`\`\`typescript\nconst chatMutation = trpc.ai.chat.useMutation({\n  onSuccess: (response) => {\n    setChatMessages(prev => [...prev, {\n      role: "assistant",\n      content: response.choices[0].message.content\n    }]);\n  }\n});\n\nchatMutation.mutate({ messages: newMessages });\n\`\`\`\n\nYour message was: "${content}"`,
			
 
				+      };
			
 
				+      setChatMessages([...newMessages, aiResponse]);
			
 
				+      setIsChatLoading(false);
			
 
				+    }, 1500);
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="min-h-screen bg-background text-foreground">
			
 
				+      <main className="container max-w-6xl mx-auto">
			
 
				+        <div className="space-y-2 justify-between flex">
			
 
				+          <h2 className="text-3xl font-bold tracking-tight mb-6">
			
 
				+            Shadcn/ui Component Library
			
 
				+          </h2>
			
 
				+          <Button variant="outline" size="icon" onClick={toggleTheme}>
			
 
				+            {theme === "light" ? (
			
 
				+              <Moon className="h-5 w-5" />
			
 
				+            ) : (
			
 
				+              <Sun className="h-5 w-5" />
			
 
				+            )}
			
 
				+          </Button>
			
 
				+        </div>
			
 
				+
			
 
				+        <div className="space-y-12">
			
 
				+          {/* Text Colors Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Text Colors</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
			
 
				+                  <div className="space-y-3">
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Foreground (Default)
			
 
				+                      </p>
			
 
				+                      <p className="text-foreground text-lg">
			
 
				+                        Default text color for main content
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Muted Foreground
			
 
				+                      </p>
			
 
				+                      <p className="text-muted-foreground text-lg">
			
 
				+                        Muted text for secondary information
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Primary
			
 
				+                      </p>
			
 
				+                      <p className="text-primary text-lg font-medium">
			
 
				+                        Primary brand color text
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Secondary Foreground
			
 
				+                      </p>
			
 
				+                      <p className="text-secondary-foreground text-lg">
			
 
				+                        Secondary action text color
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div className="space-y-3">
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Accent Foreground
			
 
				+                      </p>
			
 
				+                      <p className="text-accent-foreground text-lg">
			
 
				+                        Accent text for emphasis
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Destructive
			
 
				+                      </p>
			
 
				+                      <p className="text-destructive text-lg font-medium">
			
 
				+                        Error or destructive action text
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Card Foreground
			
 
				+                      </p>
			
 
				+                      <p className="text-card-foreground text-lg">
			
 
				+                        Text color on card backgrounds
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <p className="text-sm text-muted-foreground mb-1">
			
 
				+                        Popover Foreground
			
 
				+                      </p>
			
 
				+                      <p className="text-popover-foreground text-lg">
			
 
				+                        Text color in popovers
			
 
				+                      </p>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Color Combinations Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Color Combinations</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
			
 
				+                  <div className="bg-primary text-primary-foreground rounded-lg p-4">
			
 
				+                    <p className="font-medium mb-1">Primary</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Primary background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-secondary text-secondary-foreground rounded-lg p-4">
			
 
				+                    <p className="font-medium mb-1">Secondary</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Secondary background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-muted text-muted-foreground rounded-lg p-4">
			
 
				+                    <p className="font-medium mb-1">Muted</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Muted background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-accent text-accent-foreground rounded-lg p-4">
			
 
				+                    <p className="font-medium mb-1">Accent</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Accent background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-destructive text-destructive-foreground rounded-lg p-4">
			
 
				+                    <p className="font-medium mb-1">Destructive</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Destructive background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-card text-card-foreground rounded-lg p-4 border">
			
 
				+                    <p className="font-medium mb-1">Card</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Card background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-popover text-popover-foreground rounded-lg p-4 border">
			
 
				+                    <p className="font-medium mb-1">Popover</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Popover background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <div className="bg-background text-foreground rounded-lg p-4 border">
			
 
				+                    <p className="font-medium mb-1">Background</p>
			
 
				+                    <p className="text-sm opacity-90">
			
 
				+                      Default background with foreground text
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Buttons Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Buttons</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="flex flex-wrap gap-4">
			
 
				+                  <Button>Default</Button>
			
 
				+                  <Button variant="secondary">Secondary</Button>
			
 
				+                  <Button variant="destructive">Destructive</Button>
			
 
				+                  <Button variant="outline">Outline</Button>
			
 
				+                  <Button variant="ghost">Ghost</Button>
			
 
				+                  <Button variant="link">Link</Button>
			
 
				+                  <Button size="sm">Small</Button>
			
 
				+                  <Button size="lg">Large</Button>
			
 
				+                  <Button size="icon">
			
 
				+                    <Check className="h-4 w-4" />
			
 
				+                  </Button>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Form Inputs Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Form Inputs</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 space-y-6">
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label htmlFor="email">Email</Label>
			
 
				+                  <Input id="email" type="email" placeholder="Email" />
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label htmlFor="message">Message</Label>
			
 
				+                  <Textarea
			
 
				+                    id="message"
			
 
				+                    placeholder="Type your message here."
			
 
				+                  />
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Select</Label>
			
 
				+                  <Select>
			
 
				+                    <SelectTrigger>
			
 
				+                      <SelectValue placeholder="Select a fruit" />
			
 
				+                    </SelectTrigger>
			
 
				+                    <SelectContent>
			
 
				+                      <SelectItem value="apple">Apple</SelectItem>
			
 
				+                      <SelectItem value="banana">Banana</SelectItem>
			
 
				+                      <SelectItem value="orange">Orange</SelectItem>
			
 
				+                    </SelectContent>
			
 
				+                  </Select>
			
 
				+                </div>
			
 
				+                <div className="flex items-center space-x-2">
			
 
				+                  <Checkbox id="terms" />
			
 
				+                  <Label htmlFor="terms">Accept terms and conditions</Label>
			
 
				+                </div>
			
 
				+                <div className="flex items-center space-x-2">
			
 
				+                  <Switch id="airplane-mode" />
			
 
				+                  <Label htmlFor="airplane-mode">Airplane Mode</Label>
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Radio Group</Label>
			
 
				+                  <RadioGroup defaultValue="option-one">
			
 
				+                    <div className="flex items-center space-x-2">
			
 
				+                      <RadioGroupItem value="option-one" id="option-one" />
			
 
				+                      <Label htmlFor="option-one">Option One</Label>
			
 
				+                    </div>
			
 
				+                    <div className="flex items-center space-x-2">
			
 
				+                      <RadioGroupItem value="option-two" id="option-two" />
			
 
				+                      <Label htmlFor="option-two">Option Two</Label>
			
 
				+                    </div>
			
 
				+                  </RadioGroup>
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Slider</Label>
			
 
				+                  <Slider defaultValue={[50]} max={100} step={1} />
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Input OTP</Label>
			
 
				+                  <InputOTP maxLength={6}>
			
 
				+                    <InputOTPGroup>
			
 
				+                      <InputOTPSlot index={0} />
			
 
				+                      <InputOTPSlot index={1} />
			
 
				+                      <InputOTPSlot index={2} />
			
 
				+                      <InputOTPSlot index={3} />
			
 
				+                      <InputOTPSlot index={4} />
			
 
				+                      <InputOTPSlot index={5} />
			
 
				+                    </InputOTPGroup>
			
 
				+                  </InputOTP>
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Date Time Picker</Label>
			
 
				+                  <Popover>
			
 
				+                    <PopoverTrigger asChild>
			
 
				+                      <Button
			
 
				+                        variant="outline"
			
 
				+                        className={`w-full justify-start text-left font-normal ${
			
 
				+                          !datePickerDate && "text-muted-foreground"
			
 
				+                        }`}
			
 
				+                      >
			
 
				+                        <CalendarIcon className="mr-2 h-4 w-4" />
			
 
				+                        {datePickerDate ? (
			
 
				+                          format(datePickerDate, "PPP HH:mm", { locale: zhCN })
			
 
				+                        ) : (
			
 
				+                          <span>Select date and time</span>
			
 
				+                        )}
			
 
				+                      </Button>
			
 
				+                    </PopoverTrigger>
			
 
				+                    <PopoverContent className="w-auto p-0" align="start">
			
 
				+                      <div className="p-3 space-y-3">
			
 
				+                        <Calendar
			
 
				+                          mode="single"
			
 
				+                          selected={datePickerDate}
			
 
				+                          onSelect={setDatePickerDate}
			
 
				+                        />
			
 
				+                        <div className="border-t pt-3 space-y-2">
			
 
				+                          <Label className="flex items-center gap-2">
			
 
				+                            <Clock className="h-4 w-4" />
			
 
				+                            Time
			
 
				+                          </Label>
			
 
				+                          <div className="flex gap-2">
			
 
				+                            <Input
			
 
				+                              type="time"
			
 
				+                              value={
			
 
				+                                datePickerDate
			
 
				+                                  ? format(datePickerDate, "HH:mm")
			
 
				+                                  : "00:00"
			
 
				+                              }
			
 
				+                              onChange={e => {
			
 
				+                                const [hours, minutes] =
			
 
				+                                  e.target.value.split(":");
			
 
				+                                const newDate = datePickerDate
			
 
				+                                  ? new Date(datePickerDate)
			
 
				+                                  : new Date();
			
 
				+                                newDate.setHours(parseInt(hours));
			
 
				+                                newDate.setMinutes(parseInt(minutes));
			
 
				+                                setDatePickerDate(newDate);
			
 
				+                              }}
			
 
				+                            />
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </PopoverContent>
			
 
				+                  </Popover>
			
 
				+                  {datePickerDate && (
			
 
				+                    <p className="text-sm text-muted-foreground">
			
 
				+                      Selected:{" "}
			
 
				+                      {format(datePickerDate, "yyyy/MM/dd  HH:mm", {
			
 
				+                        locale: zhCN,
			
 
				+                      })}
			
 
				+                    </p>
			
 
				+                  )}
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Searchable Dropdown</Label>
			
 
				+                  <Popover open={openCombobox} onOpenChange={setOpenCombobox}>
			
 
				+                    <PopoverTrigger asChild>
			
 
				+                      <Button
			
 
				+                        variant="outline"
			
 
				+                        role="combobox"
			
 
				+                        aria-expanded={openCombobox}
			
 
				+                        className="w-full justify-between"
			
 
				+                      >
			
 
				+                        {selectedFramework
			
 
				+                          ? [
			
 
				+                              { value: "react", label: "React" },
			
 
				+                              { value: "vue", label: "Vue" },
			
 
				+                              { value: "angular", label: "Angular" },
			
 
				+                              { value: "svelte", label: "Svelte" },
			
 
				+                              { value: "nextjs", label: "Next.js" },
			
 
				+                              { value: "nuxt", label: "Nuxt" },
			
 
				+                              { value: "remix", label: "Remix" },
			
 
				+                            ].find(fw => fw.value === selectedFramework)?.label
			
 
				+                          : "Select framework..."}
			
 
				+                        <CalendarIcon className="ml-2 h-4 w-4 shrink-0 opacity-50" />
			
 
				+                      </Button>
			
 
				+                    </PopoverTrigger>
			
 
				+                    <PopoverContent className="w-full p-0">
			
 
				+                      <Command>
			
 
				+                        <CommandInput placeholder="Search frameworks..." />
			
 
				+                        <CommandList>
			
 
				+                          <CommandEmpty>No framework found</CommandEmpty>
			
 
				+                          <CommandGroup>
			
 
				+                            {[
			
 
				+                              { value: "react", label: "React" },
			
 
				+                              { value: "vue", label: "Vue" },
			
 
				+                              { value: "angular", label: "Angular" },
			
 
				+                              { value: "svelte", label: "Svelte" },
			
 
				+                              { value: "nextjs", label: "Next.js" },
			
 
				+                              { value: "nuxt", label: "Nuxt" },
			
 
				+                              { value: "remix", label: "Remix" },
			
 
				+                            ].map(framework => (
			
 
				+                              <CommandItem
			
 
				+                                key={framework.value}
			
 
				+                                value={framework.value}
			
 
				+                                onSelect={currentValue => {
			
 
				+                                  setSelectedFramework(
			
 
				+                                    currentValue === selectedFramework
			
 
				+                                      ? ""
			
 
				+                                      : currentValue
			
 
				+                                  );
			
 
				+                                  setOpenCombobox(false);
			
 
				+                                }}
			
 
				+                              >
			
 
				+                                <Check
			
 
				+                                  className={`mr-2 h-4 w-4 ${
			
 
				+                                    selectedFramework === framework.value
			
 
				+                                      ? "opacity-100"
			
 
				+                                      : "opacity-0"
			
 
				+                                  }`}
			
 
				+                                />
			
 
				+                                {framework.label}
			
 
				+                              </CommandItem>
			
 
				+                            ))}
			
 
				+                          </CommandGroup>
			
 
				+                        </CommandList>
			
 
				+                      </Command>
			
 
				+                    </PopoverContent>
			
 
				+                  </Popover>
			
 
				+                  {selectedFramework && (
			
 
				+                    <p className="text-sm text-muted-foreground">
			
 
				+                      Selected:{" "}
			
 
				+                      {
			
 
				+                        [
			
 
				+                          { value: "react", label: "React" },
			
 
				+                          { value: "vue", label: "Vue" },
			
 
				+                          { value: "angular", label: "Angular" },
			
 
				+                          { value: "svelte", label: "Svelte" },
			
 
				+                          { value: "nextjs", label: "Next.js" },
			
 
				+                          { value: "nuxt", label: "Nuxt" },
			
 
				+                          { value: "remix", label: "Remix" },
			
 
				+                        ].find(fw => fw.value === selectedFramework)?.label
			
 
				+                      }
			
 
				+                    </p>
			
 
				+                  )}
			
 
				+                </div>
			
 
				+                <div className="space-y-2">
			
 
				+                  <div className="grid grid-cols-2 gap-4">
			
 
				+                    <div className="space-y-2">
			
 
				+                      <Label htmlFor="month" className="text-sm font-medium">
			
 
				+                        Month
			
 
				+                      </Label>
			
 
				+                      <Select
			
 
				+                        value={selectedMonth}
			
 
				+                        onValueChange={setSelectedMonth}
			
 
				+                      >
			
 
				+                        <SelectTrigger id="month">
			
 
				+                          <SelectValue placeholder="MM" />
			
 
				+                        </SelectTrigger>
			
 
				+                        <SelectContent>
			
 
				+                          {Array.from({ length: 12 }, (_, i) => i + 1).map(
			
 
				+                            month => (
			
 
				+                              <SelectItem
			
 
				+                                key={month}
			
 
				+                                value={month.toString().padStart(2, "0")}
			
 
				+                              >
			
 
				+                                {month.toString().padStart(2, "0")}
			
 
				+                              </SelectItem>
			
 
				+                            )
			
 
				+                          )}
			
 
				+                        </SelectContent>
			
 
				+                      </Select>
			
 
				+                    </div>
			
 
				+                    <div className="space-y-2">
			
 
				+                      <Label htmlFor="year" className="text-sm font-medium">
			
 
				+                        Year
			
 
				+                      </Label>
			
 
				+                      <Select
			
 
				+                        value={selectedYear}
			
 
				+                        onValueChange={setSelectedYear}
			
 
				+                      >
			
 
				+                        <SelectTrigger id="year">
			
 
				+                          <SelectValue placeholder="YYYY" />
			
 
				+                        </SelectTrigger>
			
 
				+                        <SelectContent>
			
 
				+                          {Array.from(
			
 
				+                            { length: 10 },
			
 
				+                            (_, i) => new Date().getFullYear() - 5 + i
			
 
				+                          ).map(year => (
			
 
				+                            <SelectItem key={year} value={year.toString()}>
			
 
				+                              {year}
			
 
				+                            </SelectItem>
			
 
				+                          ))}
			
 
				+                        </SelectContent>
			
 
				+                      </Select>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  {selectedMonth && selectedYear && (
			
 
				+                    <p className="text-sm text-muted-foreground">
			
 
				+                      Selected: {selectedYear}/{selectedMonth}/
			
 
				+                    </p>
			
 
				+                  )}
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Data Display Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Data Display</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 space-y-6">
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Badges</Label>
			
 
				+                  <div className="flex flex-wrap gap-2">
			
 
				+                    <Badge>Default</Badge>
			
 
				+                    <Badge variant="secondary">Secondary</Badge>
			
 
				+                    <Badge variant="destructive">Destructive</Badge>
			
 
				+                    <Badge variant="outline">Outline</Badge>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Avatar</Label>
			
 
				+                  <div className="flex gap-4">
			
 
				+                    <Avatar>
			
 
				+                      <AvatarImage src="https://github.com/shadcn.png" />
			
 
				+                      <AvatarFallback>CN</AvatarFallback>
			
 
				+                    </Avatar>
			
 
				+                    <Avatar>
			
 
				+                      <AvatarFallback>AB</AvatarFallback>
			
 
				+                    </Avatar>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Progress</Label>
			
 
				+                  <Progress value={progress} />
			
 
				+                  <div className="flex gap-2">
			
 
				+                    <Button
			
 
				+                      size="sm"
			
 
				+                      onClick={() => setProgress(Math.max(0, progress - 10))}
			
 
				+                    >
			
 
				+                      -10
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      size="sm"
			
 
				+                      onClick={() => setProgress(Math.min(100, progress + 10))}
			
 
				+                    >
			
 
				+                      +10
			
 
				+                    </Button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Skeleton</Label>
			
 
				+                  <div className="space-y-2">
			
 
				+                    <Skeleton className="h-4 w-full" />
			
 
				+                    <Skeleton className="h-4 w-3/4" />
			
 
				+                    <Skeleton className="h-4 w-1/2" />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Pagination</Label>
			
 
				+                  <Pagination>
			
 
				+                    <PaginationContent>
			
 
				+                      <PaginationItem>
			
 
				+                        <PaginationPrevious
			
 
				+                          href="#"
			
 
				+                          onClick={e => {
			
 
				+                            e.preventDefault();
			
 
				+                            setCurrentPage(Math.max(1, currentPage - 1));
			
 
				+                          }}
			
 
				+                        />
			
 
				+                      </PaginationItem>
			
 
				+                      {[1, 2, 3, 4, 5].map(page => (
			
 
				+                        <PaginationItem key={page}>
			
 
				+                          <PaginationLink
			
 
				+                            href="#"
			
 
				+                            isActive={currentPage === page}
			
 
				+                            onClick={e => {
			
 
				+                              e.preventDefault();
			
 
				+                              setCurrentPage(page);
			
 
				+                            }}
			
 
				+                          >
			
 
				+                            {page}
			
 
				+                          </PaginationLink>
			
 
				+                        </PaginationItem>
			
 
				+                      ))}
			
 
				+                      <PaginationItem>
			
 
				+                        <PaginationNext
			
 
				+                          href="#"
			
 
				+                          onClick={e => {
			
 
				+                            e.preventDefault();
			
 
				+                            setCurrentPage(Math.min(5, currentPage + 1));
			
 
				+                          }}
			
 
				+                        />
			
 
				+                      </PaginationItem>
			
 
				+                    </PaginationContent>
			
 
				+                  </Pagination>
			
 
				+                  <p className="text-sm text-muted-foreground text-center">
			
 
				+                    Current page: {currentPage}
			
 
				+                  </p>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Table</Label>
			
 
				+                  <Table>
			
 
				+                    <TableCaption>A list of your recent invoices.</TableCaption>
			
 
				+                    <TableHeader>
			
 
				+                      <TableRow>
			
 
				+                        <TableHead className="w-[100px]">Invoice</TableHead>
			
 
				+                        <TableHead>Status</TableHead>
			
 
				+                        <TableHead>Method</TableHead>
			
 
				+                        <TableHead className="text-right">Amount</TableHead>
			
 
				+                      </TableRow>
			
 
				+                    </TableHeader>
			
 
				+                    <TableBody>
			
 
				+                      <TableRow>
			
 
				+                        <TableCell className="font-medium">INV001</TableCell>
			
 
				+                        <TableCell>Paid</TableCell>
			
 
				+                        <TableCell>Credit Card</TableCell>
			
 
				+                        <TableCell className="text-right">$250.00</TableCell>
			
 
				+                      </TableRow>
			
 
				+                      <TableRow>
			
 
				+                        <TableCell className="font-medium">INV002</TableCell>
			
 
				+                        <TableCell>Pending</TableCell>
			
 
				+                        <TableCell>PayPal</TableCell>
			
 
				+                        <TableCell className="text-right">$150.00</TableCell>
			
 
				+                      </TableRow>
			
 
				+                      <TableRow>
			
 
				+                        <TableCell className="font-medium">INV003</TableCell>
			
 
				+                        <TableCell>Unpaid</TableCell>
			
 
				+                        <TableCell>Bank Transfer</TableCell>
			
 
				+                        <TableCell className="text-right">$350.00</TableCell>
			
 
				+                      </TableRow>
			
 
				+                    </TableBody>
			
 
				+                  </Table>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Menubar</Label>
			
 
				+                  <Menubar>
			
 
				+                    <MenubarMenu>
			
 
				+                      <MenubarTrigger>File</MenubarTrigger>
			
 
				+                      <MenubarContent>
			
 
				+                        <MenubarItem>New Tab</MenubarItem>
			
 
				+                        <MenubarItem>New Window</MenubarItem>
			
 
				+                        <MenubarSeparator />
			
 
				+                        <MenubarItem>Share</MenubarItem>
			
 
				+                        <MenubarSeparator />
			
 
				+                        <MenubarItem>Print</MenubarItem>
			
 
				+                      </MenubarContent>
			
 
				+                    </MenubarMenu>
			
 
				+                    <MenubarMenu>
			
 
				+                      <MenubarTrigger>Edit</MenubarTrigger>
			
 
				+                      <MenubarContent>
			
 
				+                        <MenubarItem>Undo</MenubarItem>
			
 
				+                        <MenubarItem>Redo</MenubarItem>
			
 
				+                      </MenubarContent>
			
 
				+                    </MenubarMenu>
			
 
				+                    <MenubarMenu>
			
 
				+                      <MenubarTrigger>View</MenubarTrigger>
			
 
				+                      <MenubarContent>
			
 
				+                        <MenubarItem>Reload</MenubarItem>
			
 
				+                        <MenubarItem>Force Reload</MenubarItem>
			
 
				+                      </MenubarContent>
			
 
				+                    </MenubarMenu>
			
 
				+                  </Menubar>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Breadcrumb</Label>
			
 
				+                  <Breadcrumb>
			
 
				+                    <BreadcrumbList>
			
 
				+                      <BreadcrumbItem>
			
 
				+                        <BreadcrumbLink href="/">Home</BreadcrumbLink>
			
 
				+                      </BreadcrumbItem>
			
 
				+                      <BreadcrumbSeparator />
			
 
				+                      <BreadcrumbItem>
			
 
				+                        <BreadcrumbLink href="/components">
			
 
				+                          Components
			
 
				+                        </BreadcrumbLink>
			
 
				+                      </BreadcrumbItem>
			
 
				+                      <BreadcrumbSeparator />
			
 
				+                      <BreadcrumbItem>
			
 
				+                        <BreadcrumbPage>Breadcrumb</BreadcrumbPage>
			
 
				+                      </BreadcrumbItem>
			
 
				+                    </BreadcrumbList>
			
 
				+                  </Breadcrumb>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Alerts Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Alerts</h3>
			
 
				+            <div className="space-y-4">
			
 
				+              <Alert>
			
 
				+                <AlertCircle className="h-4 w-4" />
			
 
				+                <AlertTitle>Heads up!</AlertTitle>
			
 
				+                <AlertDescription>
			
 
				+                  You can add components to your app using the cli.
			
 
				+                </AlertDescription>
			
 
				+              </Alert>
			
 
				+              <Alert variant="destructive">
			
 
				+                <X className="h-4 w-4" />
			
 
				+                <AlertTitle>Error</AlertTitle>
			
 
				+                <AlertDescription>
			
 
				+                  Your session has expired. Please log in again.
			
 
				+                </AlertDescription>
			
 
				+              </Alert>
			
 
				+            </div>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Tabs Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Tabs</h3>
			
 
				+            <Tabs defaultValue="account" className="w-full">
			
 
				+              <TabsList className="grid w-full grid-cols-3">
			
 
				+                <TabsTrigger value="account">Account</TabsTrigger>
			
 
				+                <TabsTrigger value="password">Password</TabsTrigger>
			
 
				+                <TabsTrigger value="settings">Settings</TabsTrigger>
			
 
				+              </TabsList>
			
 
				+              <TabsContent value="account">
			
 
				+                <Card>
			
 
				+                  <CardHeader>
			
 
				+                    <CardTitle>Account</CardTitle>
			
 
				+                    <CardDescription>
			
 
				+                      Make changes to your account here.
			
 
				+                    </CardDescription>
			
 
				+                  </CardHeader>
			
 
				+                  <CardContent className="space-y-2">
			
 
				+                    <div className="space-y-1">
			
 
				+                      <Label htmlFor="name">Name</Label>
			
 
				+                      <Input id="name" defaultValue="Pedro Duarte" />
			
 
				+                    </div>
			
 
				+                  </CardContent>
			
 
				+                  <CardFooter>
			
 
				+                    <Button>Save changes</Button>
			
 
				+                  </CardFooter>
			
 
				+                </Card>
			
 
				+              </TabsContent>
			
 
				+              <TabsContent value="password">
			
 
				+                <Card>
			
 
				+                  <CardHeader>
			
 
				+                    <CardTitle>Password</CardTitle>
			
 
				+                    <CardDescription>
			
 
				+                      Change your password here.
			
 
				+                    </CardDescription>
			
 
				+                  </CardHeader>
			
 
				+                  <CardContent className="space-y-2">
			
 
				+                    <div className="space-y-1">
			
 
				+                      <Label htmlFor="current">Current password</Label>
			
 
				+                      <Input id="current" type="password" />
			
 
				+                    </div>
			
 
				+                    <div className="space-y-1">
			
 
				+                      <Label htmlFor="new">New password</Label>
			
 
				+                      <Input id="new" type="password" />
			
 
				+                    </div>
			
 
				+                  </CardContent>
			
 
				+                  <CardFooter>
			
 
				+                    <Button>Save password</Button>
			
 
				+                  </CardFooter>
			
 
				+                </Card>
			
 
				+              </TabsContent>
			
 
				+              <TabsContent value="settings">
			
 
				+                <Card>
			
 
				+                  <CardHeader>
			
 
				+                    <CardTitle>Settings</CardTitle>
			
 
				+                    <CardDescription>
			
 
				+                      Manage your settings here.
			
 
				+                    </CardDescription>
			
 
				+                  </CardHeader>
			
 
				+                  <CardContent>
			
 
				+                    <p className="text-sm text-muted-foreground">
			
 
				+                      Settings content goes here.
			
 
				+                    </p>
			
 
				+                  </CardContent>
			
 
				+                </Card>
			
 
				+              </TabsContent>
			
 
				+            </Tabs>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Accordion Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Accordion</h3>
			
 
				+            <Accordion type="single" collapsible className="w-full">
			
 
				+              <AccordionItem value="item-1">
			
 
				+                <AccordionTrigger>Is it accessible?</AccordionTrigger>
			
 
				+                <AccordionContent>
			
 
				+                  Yes. It adheres to the WAI-ARIA design pattern.
			
 
				+                </AccordionContent>
			
 
				+              </AccordionItem>
			
 
				+              <AccordionItem value="item-2">
			
 
				+                <AccordionTrigger>Is it styled?</AccordionTrigger>
			
 
				+                <AccordionContent>
			
 
				+                  Yes. It comes with default styles that matches the other
			
 
				+                  components' aesthetic.
			
 
				+                </AccordionContent>
			
 
				+              </AccordionItem>
			
 
				+              <AccordionItem value="item-3">
			
 
				+                <AccordionTrigger>Is it animated?</AccordionTrigger>
			
 
				+                <AccordionContent>
			
 
				+                  Yes. It's animated by default, but you can disable it if you
			
 
				+                  prefer.
			
 
				+                </AccordionContent>
			
 
				+              </AccordionItem>
			
 
				+            </Accordion>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Collapsible Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Collapsible</h3>
			
 
				+            <Collapsible>
			
 
				+              <Card>
			
 
				+                <CardHeader>
			
 
				+                  <CollapsibleTrigger asChild>
			
 
				+                    <Button variant="ghost" className="w-full justify-between">
			
 
				+                      <CardTitle>@peduarte starred 3 repositories</CardTitle>
			
 
				+                    </Button>
			
 
				+                  </CollapsibleTrigger>
			
 
				+                </CardHeader>
			
 
				+                <CollapsibleContent>
			
 
				+                  <CardContent>
			
 
				+                    <div className="space-y-2">
			
 
				+                      <div className="rounded-md border px-4 py-3 font-mono text-sm">
			
 
				+                        @radix-ui/primitives
			
 
				+                      </div>
			
 
				+                      <div className="rounded-md border px-4 py-3 font-mono text-sm">
			
 
				+                        @radix-ui/colors
			
 
				+                      </div>
			
 
				+                      <div className="rounded-md border px-4 py-3 font-mono text-sm">
			
 
				+                        @stitches/react
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </CardContent>
			
 
				+                </CollapsibleContent>
			
 
				+              </Card>
			
 
				+            </Collapsible>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Dialog, Sheet, Drawer Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Overlays</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="flex flex-wrap gap-4">
			
 
				+                  <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
			
 
				+                    <DialogTrigger asChild>
			
 
				+                      <Button variant="outline">Open Dialog</Button>
			
 
				+                    </DialogTrigger>
			
 
				+                    <DialogContent>
			
 
				+                      <DialogHeader>
			
 
				+                        <DialogTitle>Test Input</DialogTitle>
			
 
				+                        <DialogDescription>
			
 
				+                          Enter some text below. Press Enter to submit (IME composition supported).
			
 
				+                        </DialogDescription>
			
 
				+                      </DialogHeader>
			
 
				+                      <div className="space-y-4 py-4">
			
 
				+                        <div className="space-y-2">
			
 
				+                          <Label htmlFor="dialog-input">Input</Label>
			
 
				+                          <Input
			
 
				+                            id="dialog-input"
			
 
				+                            placeholder="Type something..."
			
 
				+                            value={dialogInput}
			
 
				+                            onChange={(e) => setDialogInput(e.target.value)}
			
 
				+                            onKeyDown={handleDialogKeyDown}
			
 
				+                            autoFocus
			
 
				+                          />
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div className="flex justify-end gap-2">
			
 
				+                        <Button
			
 
				+                          variant="outline"
			
 
				+                          onClick={() => setDialogOpen(false)}
			
 
				+                        >
			
 
				+                          Cancel
			
 
				+                        </Button>
			
 
				+                        <Button onClick={handleDialogSubmit}>Submit</Button>
			
 
				+                      </div>
			
 
				+                    </DialogContent>
			
 
				+                  </Dialog>
			
 
				+
			
 
				+                  <Sheet>
			
 
				+                    <SheetTrigger asChild>
			
 
				+                      <Button variant="outline">Open Sheet</Button>
			
 
				+                    </SheetTrigger>
			
 
				+                    <SheetContent>
			
 
				+                      <SheetHeader>
			
 
				+                        <SheetTitle>Edit profile</SheetTitle>
			
 
				+                        <SheetDescription>
			
 
				+                          Make changes to your profile here. Click save when
			
 
				+                          you're done.
			
 
				+                        </SheetDescription>
			
 
				+                      </SheetHeader>
			
 
				+                    </SheetContent>
			
 
				+                  </Sheet>
			
 
				+
			
 
				+                  <Drawer>
			
 
				+                    <DrawerTrigger asChild>
			
 
				+                      <Button variant="outline">Open Drawer</Button>
			
 
				+                    </DrawerTrigger>
			
 
				+                    <DrawerContent>
			
 
				+                      <DrawerHeader>
			
 
				+                        <DrawerTitle>Are you absolutely sure?</DrawerTitle>
			
 
				+                        <DrawerDescription>
			
 
				+                          This action cannot be undone.
			
 
				+                        </DrawerDescription>
			
 
				+                      </DrawerHeader>
			
 
				+                      <DrawerFooter>
			
 
				+                        <Button>Submit</Button>
			
 
				+                        <DrawerClose asChild>
			
 
				+                          <Button variant="outline">Cancel</Button>
			
 
				+                        </DrawerClose>
			
 
				+                      </DrawerFooter>
			
 
				+                    </DrawerContent>
			
 
				+                  </Drawer>
			
 
				+
			
 
				+                  <Popover>
			
 
				+                    <PopoverTrigger asChild>
			
 
				+                      <Button variant="outline">Open Popover</Button>
			
 
				+                    </PopoverTrigger>
			
 
				+                    <PopoverContent>
			
 
				+                      <div className="space-y-2">
			
 
				+                        <h4 className="font-medium leading-none">Dimensions</h4>
			
 
				+                        <p className="text-sm text-muted-foreground">
			
 
				+                          Set the dimensions for the layer.
			
 
				+                        </p>
			
 
				+                      </div>
			
 
				+                    </PopoverContent>
			
 
				+                  </Popover>
			
 
				+
			
 
				+                  <Tooltip>
			
 
				+                    <TooltipTrigger asChild>
			
 
				+                      <Button variant="outline">Hover me</Button>
			
 
				+                    </TooltipTrigger>
			
 
				+                    <TooltipContent>
			
 
				+                      <p>Add to library</p>
			
 
				+                    </TooltipContent>
			
 
				+                  </Tooltip>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Menus Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Menus</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="flex flex-wrap gap-4">
			
 
				+                  <DropdownMenu>
			
 
				+                    <DropdownMenuTrigger asChild>
			
 
				+                      <Button variant="outline">Dropdown Menu</Button>
			
 
				+                    </DropdownMenuTrigger>
			
 
				+                    <DropdownMenuContent>
			
 
				+                      <DropdownMenuLabel>My Account</DropdownMenuLabel>
			
 
				+                      <DropdownMenuSeparator />
			
 
				+                      <DropdownMenuItem>Profile</DropdownMenuItem>
			
 
				+                      <DropdownMenuItem>Billing</DropdownMenuItem>
			
 
				+                      <DropdownMenuItem>Team</DropdownMenuItem>
			
 
				+                      <DropdownMenuItem>Subscription</DropdownMenuItem>
			
 
				+                    </DropdownMenuContent>
			
 
				+                  </DropdownMenu>
			
 
				+
			
 
				+                  <ContextMenu>
			
 
				+                    <ContextMenuTrigger asChild>
			
 
				+                      <Button variant="outline">Right Click Me</Button>
			
 
				+                    </ContextMenuTrigger>
			
 
				+                    <ContextMenuContent>
			
 
				+                      <ContextMenuItem>Profile</ContextMenuItem>
			
 
				+                      <ContextMenuItem>Billing</ContextMenuItem>
			
 
				+                      <ContextMenuItem>Team</ContextMenuItem>
			
 
				+                      <ContextMenuItem>Subscription</ContextMenuItem>
			
 
				+                    </ContextMenuContent>
			
 
				+                  </ContextMenu>
			
 
				+
			
 
				+                  <HoverCard>
			
 
				+                    <HoverCardTrigger asChild>
			
 
				+                      <Button variant="outline">Hover Card</Button>
			
 
				+                    </HoverCardTrigger>
			
 
				+                    <HoverCardContent>
			
 
				+                      <div className="space-y-2">
			
 
				+                        <h4 className="text-sm font-semibold">@nextjs</h4>
			
 
				+                        <p className="text-sm">
			
 
				+                          The React Framework – created and maintained by
			
 
				+                          @vercel.
			
 
				+                        </p>
			
 
				+                      </div>
			
 
				+                    </HoverCardContent>
			
 
				+                  </HoverCard>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Calendar Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Calendar</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 flex justify-center">
			
 
				+                <Calendar
			
 
				+                  mode="single"
			
 
				+                  selected={date}
			
 
				+                  onSelect={setDate}
			
 
				+                  className="rounded-md border"
			
 
				+                />
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Carousel Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Carousel</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <Carousel className="w-full max-w-xs mx-auto">
			
 
				+                  <CarouselContent>
			
 
				+                    {Array.from({ length: 5 }).map((_, index) => (
			
 
				+                      <CarouselItem key={index}>
			
 
				+                        <div className="p-1">
			
 
				+                          <Card>
			
 
				+                            <CardContent className="flex aspect-square items-center justify-center p-6">
			
 
				+                              <span className="text-4xl font-semibold">
			
 
				+                                {index + 1}
			
 
				+                              </span>
			
 
				+                            </CardContent>
			
 
				+                          </Card>
			
 
				+                        </div>
			
 
				+                      </CarouselItem>
			
 
				+                    ))}
			
 
				+                  </CarouselContent>
			
 
				+                  <CarouselPrevious />
			
 
				+                  <CarouselNext />
			
 
				+                </Carousel>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Toggle Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Toggle</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 space-y-4">
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Toggle</Label>
			
 
				+                  <div className="flex gap-2">
			
 
				+                    <Toggle aria-label="Toggle italic">
			
 
				+                      <span className="font-bold">B</span>
			
 
				+                    </Toggle>
			
 
				+                    <Toggle aria-label="Toggle italic">
			
 
				+                      <span className="italic">I</span>
			
 
				+                    </Toggle>
			
 
				+                    <Toggle aria-label="Toggle underline">
			
 
				+                      <span className="underline">U</span>
			
 
				+                    </Toggle>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Toggle Group</Label>
			
 
				+                  <ToggleGroup type="multiple">
			
 
				+                    <ToggleGroupItem value="bold" aria-label="Toggle bold">
			
 
				+                      <span className="font-bold">B</span>
			
 
				+                    </ToggleGroupItem>
			
 
				+                    <ToggleGroupItem value="italic" aria-label="Toggle italic">
			
 
				+                      <span className="italic">I</span>
			
 
				+                    </ToggleGroupItem>
			
 
				+                    <ToggleGroupItem
			
 
				+                      value="underline"
			
 
				+                      aria-label="Toggle underline"
			
 
				+                    >
			
 
				+                      <span className="underline">U</span>
			
 
				+                    </ToggleGroupItem>
			
 
				+                  </ToggleGroup>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Aspect Ratio & Scroll Area Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Layout Components</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 space-y-6">
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Aspect Ratio (16/9)</Label>
			
 
				+                  <AspectRatio ratio={16 / 9} className="bg-muted">
			
 
				+                    <div className="flex h-full items-center justify-center">
			
 
				+                      <p className="text-muted-foreground">16:9 Aspect Ratio</p>
			
 
				+                    </div>
			
 
				+                  </AspectRatio>
			
 
				+                </div>
			
 
				+                <Separator />
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Scroll Area</Label>
			
 
				+                  <ScrollArea className="h-[200px] w-full rounded-md border overflow-hidden">
			
 
				+                    <div className="p-4">
			
 
				+                      <div className="space-y-4">
			
 
				+                        {Array.from({ length: 20 }).map((_, i) => (
			
 
				+                          <div key={i} className="text-sm">
			
 
				+                            Item {i + 1}: This is a scrollable content area
			
 
				+                          </div>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </ScrollArea>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Resizable Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Resizable Panels</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <ResizablePanelGroup
			
 
				+                  direction="horizontal"
			
 
				+                  className="min-h-[200px] rounded-lg border"
			
 
				+                >
			
 
				+                  <ResizablePanel defaultSize={50}>
			
 
				+                    <div className="flex h-full items-center justify-center p-6">
			
 
				+                      <span className="font-semibold">Panel One</span>
			
 
				+                    </div>
			
 
				+                  </ResizablePanel>
			
 
				+                  <ResizableHandle />
			
 
				+                  <ResizablePanel defaultSize={50}>
			
 
				+                    <div className="flex h-full items-center justify-center p-6">
			
 
				+                      <span className="font-semibold">Panel Two</span>
			
 
				+                    </div>
			
 
				+                  </ResizablePanel>
			
 
				+                </ResizablePanelGroup>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* Toast Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">Toast</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6 space-y-4">
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label>Sonner Toast</Label>
			
 
				+                  <div className="flex flex-wrap gap-2">
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        sonnerToast.success("Operation successful", {
			
 
				+                          description: "Your changes have been saved",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Success
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        sonnerToast.error("Operation failed", {
			
 
				+                          description:
			
 
				+                            "Cannot complete operation, please try again",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Error
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        sonnerToast.info("Information", {
			
 
				+                          description: "This is an information message",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Info
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        sonnerToast.warning("Warning", {
			
 
				+                          description:
			
 
				+                            "Please note the impact of this operation",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Warning
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        sonnerToast.loading("Loading", {
			
 
				+                          description: "Please wait",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Loading
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      variant="outline"
			
 
				+                      onClick={() => {
			
 
				+                        const promise = new Promise(resolve =>
			
 
				+                          setTimeout(resolve, 2000)
			
 
				+                        );
			
 
				+                        sonnerToast.promise(promise, {
			
 
				+                          loading: "Processing...",
			
 
				+                          success: "Processing complete!",
			
 
				+                          error: "Processing failed",
			
 
				+                        });
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      Promise
			
 
				+                    </Button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+
			
 
				+          {/* AI ChatBox Section */}
			
 
				+          <section className="space-y-4">
			
 
				+            <h3 className="text-2xl font-semibold">AI ChatBox</h3>
			
 
				+            <Card>
			
 
				+              <CardContent className="pt-6">
			
 
				+                <div className="space-y-4">
			
 
				+                  <div className="text-sm text-muted-foreground">
			
 
				+                    <p>
			
 
				+                      A ready-to-use chat interface component that integrates with the LLM system.
			
 
				+                      Features markdown rendering, auto-scrolling, and loading states.
			
 
				+                    </p>
			
 
				+                    <p className="mt-2">
			
 
				+                      This is a demo with simulated responses. In a real app, you'd connect it to a tRPC mutation.
			
 
				+                    </p>
			
 
				+                  </div>
			
 
				+                  <AIChatBox
			
 
				+                    messages={chatMessages}
			
 
				+                    onSendMessage={handleChatSend}
			
 
				+                    isLoading={isChatLoading}
			
 
				+                    placeholder="Try sending a message..."
			
 
				+                    height="500px"
			
 
				+                    emptyStateMessage="How can I help you today?"
			
 
				+                    suggestedPrompts={[
			
 
				+                      "What is React?",
			
 
				+                      "Explain TypeScript",
			
 
				+                      "How to use tRPC?",
			
 
				+                      "Best practices for web development",
			
 
				+                    ]}
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </CardContent>
			
 
				+            </Card>
			
 
				+          </section>
			
 
				+        </div>
			
 
				+      </main>
			
 
				+
			
 
				+      <footer className="border-t py-6 mt-12">
			
 
				+        <div className="container text-center text-sm text-muted-foreground">
			
 
				+          <p>Shadcn/ui Component Showcase</p>
			
 
				+        </div>
			
 
				+      </footer>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/DataSources.tsx
+++ b/client/src/pages/DataSources.tsx
@@ -0,0 +1,652 @@
 
				+/**
			
 
				+ * Data Sources — Lyro-inspired AI Agent knowledge base & API connections
			
 
				+ * Manage URL imports, file uploads, Q&A pairs, and external API connections
			
 
				+ */
			
 
				+import { useState } from "react";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { toast } from "sonner";
			
 
				+import {
			
 
				+  Database, Globe, FileText, MessageCircle, Plug,
			
 
				+  Plus, Trash2, RefreshCw, CheckCircle2, AlertTriangle,
			
 
				+  XCircle, ExternalLink, Play, Settings, ChevronRight,
			
 
				+  Package, Truck, RotateCw, Search, Zap,
			
 
				+  ArrowRight, Code2, TestTube,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+/* ─── Action Templates (Lyro-style) ─── */
			
 
				+const ACTION_TEMPLATES = [
			
 
				+  {
			
 
				+    id: "check_order",
			
 
				+    name: "Check Order Status",
			
 
				+    description: "Look up order status by order number or customer ID",
			
 
				+    category: "orders",
			
 
				+    icon: <Package className="w-4 h-4" />,
			
 
				+    color: "#14532D",
			
 
				+    method: "GET" as const,
			
 
				+    endpoint: "/api/orders/{orderId}/status",
			
 
				+    inputVars: [
			
 
				+      { name: "orderId", type: "string", description: "Order number", required: true },
			
 
				+    ],
			
 
				+    outputVars: [
			
 
				+      { name: "status", type: "string", description: "Current order status" },
			
 
				+      { name: "estimatedDelivery", type: "string", description: "Estimated delivery date" },
			
 
				+      { name: "trackingNumber", type: "string", description: "Shipping tracking number" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "track_shipment",
			
 
				+    name: "Track Shipment",
			
 
				+    description: "Get real-time shipping tracking information",
			
 
				+    category: "shipping",
			
 
				+    icon: <Truck className="w-4 h-4" />,
			
 
				+    color: "#0369a1",
			
 
				+    method: "GET" as const,
			
 
				+    endpoint: "/api/shipping/{trackingNumber}",
			
 
				+    inputVars: [
			
 
				+      { name: "trackingNumber", type: "string", description: "Tracking number", required: true },
			
 
				+    ],
			
 
				+    outputVars: [
			
 
				+      { name: "carrier", type: "string", description: "Shipping carrier" },
			
 
				+      { name: "currentLocation", type: "string", description: "Current package location" },
			
 
				+      { name: "estimatedArrival", type: "string", description: "ETA" },
			
 
				+      { name: "events", type: "array", description: "Tracking event history" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "return_request",
			
 
				+    name: "Submit Return Request",
			
 
				+    description: "Initiate a return for an order item",
			
 
				+    category: "returning",
			
 
				+    icon: <RotateCw className="w-4 h-4" />,
			
 
				+    color: "#ca8a04",
			
 
				+    method: "POST" as const,
			
 
				+    endpoint: "/api/returns",
			
 
				+    inputVars: [
			
 
				+      { name: "orderId", type: "string", description: "Original order number", required: true },
			
 
				+      { name: "itemId", type: "string", description: "Item to return", required: true },
			
 
				+      { name: "reason", type: "string", description: "Return reason", required: true },
			
 
				+    ],
			
 
				+    outputVars: [
			
 
				+      { name: "returnId", type: "string", description: "Return authorization number" },
			
 
				+      { name: "returnLabel", type: "string", description: "Shipping label URL" },
			
 
				+      { name: "refundEstimate", type: "number", description: "Estimated refund amount" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "cancel_order",
			
 
				+    name: "Cancel Order",
			
 
				+    description: "Cancel an order that hasn't shipped yet",
			
 
				+    category: "cancelling",
			
 
				+    icon: <XCircle className="w-4 h-4" />,
			
 
				+    color: "#dc2626",
			
 
				+    method: "POST" as const,
			
 
				+    endpoint: "/api/orders/{orderId}/cancel",
			
 
				+    inputVars: [
			
 
				+      { name: "orderId", type: "string", description: "Order to cancel", required: true },
			
 
				+      { name: "reason", type: "string", description: "Cancellation reason", required: false },
			
 
				+    ],
			
 
				+    outputVars: [
			
 
				+      { name: "cancelled", type: "boolean", description: "Whether cancellation succeeded" },
			
 
				+      { name: "refundAmount", type: "number", description: "Refund amount" },
			
 
				+      { name: "message", type: "string", description: "Status message" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "customer_lookup",
			
 
				+    name: "Customer Lookup",
			
 
				+    description: "Look up customer account details from CRM",
			
 
				+    category: "customer",
			
 
				+    icon: <Search className="w-4 h-4" />,
			
 
				+    color: "#7c3aed",
			
 
				+    method: "GET" as const,
			
 
				+    endpoint: "/api/crm/customers/{customerId}",
			
 
				+    inputVars: [
			
 
				+      { name: "customerId", type: "string", description: "Customer ID or email", required: true },
			
 
				+    ],
			
 
				+    outputVars: [
			
 
				+      { name: "name", type: "string", description: "Customer name" },
			
 
				+      { name: "email", type: "string", description: "Email address" },
			
 
				+      { name: "accountType", type: "string", description: "Account type (dealer/retail)" },
			
 
				+      { name: "territory", type: "string", description: "Sales territory" },
			
 
				+      { name: "assignedRep", type: "string", description: "Assigned sales representative" },
			
 
				+    ],
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+/* ─── Tab type ─── */
			
 
				+type TabId = "sources" | "connections" | "templates";
			
 
				+
			
 
				+/* ─── Source type config ─── */
			
 
				+const SOURCE_TYPES = {
			
 
				+  url: { icon: <Globe className="w-4 h-4" />, color: "#0369a1", label: "URL Import" },
			
 
				+  file: { icon: <FileText className="w-4 h-4" />, color: "#7c3aed", label: "File Upload" },
			
 
				+  qa_pair: { icon: <MessageCircle className="w-4 h-4" />, color: "#14532D", label: "Q&A Pair" },
			
 
				+  api: { icon: <Plug className="w-4 h-4" />, color: "#ca8a04", label: "API Connection" },
			
 
				+};
			
 
				+
			
 
				+const STATUS_STYLES: Record<string, { bg: string; text: string; icon: React.ReactNode }> = {
			
 
				+  active: { bg: "#14532D14", text: "#14532D", icon: <CheckCircle2 className="w-3 h-3" /> },
			
 
				+  inactive: { bg: "#78716C14", text: "#78716C", icon: <XCircle className="w-3 h-3" /> },
			
 
				+  syncing: { bg: "#0369a114", text: "#0369a1", icon: <RefreshCw className="w-3 h-3 animate-spin" /> },
			
 
				+  error: { bg: "#dc262614", text: "#dc2626", icon: <AlertTriangle className="w-3 h-3" /> },
			
 
				+};
			
 
				+
			
 
				+export default function DataSources() {
			
 
				+  const [activeTab, setActiveTab] = useState<TabId>("sources");
			
 
				+  const [showAddSource, setShowAddSource] = useState(false);
			
 
				+  const [showAddConnection, setShowAddConnection] = useState(false);
			
 
				+  const [newSource, setNewSource] = useState<{ name: string; type: "url" | "file" | "qa_pair" | "api"; config: any }>({ name: "", type: "url", config: {} });
			
 
				+  const [newConnection, setNewConnection] = useState<{
			
 
				+    name: string; description: string; category: string; method: "GET" | "POST" | "PUT" | "DELETE";
			
 
				+    endpoint: string; inputVariables: any[]; outputVariables: any[];
			
 
				+  }>({
			
 
				+    name: "", description: "", category: "", method: "GET",
			
 
				+    endpoint: "", inputVariables: [], outputVariables: [],
			
 
				+  });
			
 
				+
			
 
				+  const { data: sources, isLoading: loadingSources } = trpc.dataSources.list.useQuery();
			
 
				+  const { data: connections, isLoading: loadingConnections } = trpc.apiConnections.list.useQuery();
			
 
				+
			
 
				+  const utils = trpc.useUtils();
			
 
				+
			
 
				+  const createSource = trpc.dataSources.create.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("Data source added");
			
 
				+      utils.dataSources.list.invalidate();
			
 
				+      setShowAddSource(false);
			
 
				+      setNewSource({ name: "", type: "url", config: {} });
			
 
				+    },
			
 
				+    onError: (err) => toast.error(err.message),
			
 
				+  });
			
 
				+
			
 
				+  const deleteSource = trpc.dataSources.delete.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("Data source removed");
			
 
				+      utils.dataSources.list.invalidate();
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const createConnection = trpc.apiConnections.create.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("API connection created");
			
 
				+      utils.apiConnections.list.invalidate();
			
 
				+      setShowAddConnection(false);
			
 
				+      setNewConnection({ name: "", description: "", category: "", method: "GET", endpoint: "", inputVariables: [], outputVariables: [] });
			
 
				+    },
			
 
				+    onError: (err) => toast.error(err.message),
			
 
				+  });
			
 
				+
			
 
				+  const deleteConnection = trpc.apiConnections.delete.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("API connection removed");
			
 
				+      utils.apiConnections.list.invalidate();
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const testConnection = trpc.apiConnections.test.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      if (data.success) {
			
 
				+        toast.success(`${data.message} (${data.responseTime}ms)`);
			
 
				+      } else {
			
 
				+        toast.error(data.message);
			
 
				+      }
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const handleUseTemplate = (template: typeof ACTION_TEMPLATES[0]) => {
			
 
				+    setNewConnection({
			
 
				+      name: template.name,
			
 
				+      description: template.description,
			
 
				+      category: template.category,
			
 
				+      method: template.method,
			
 
				+      endpoint: template.endpoint,
			
 
				+      inputVariables: template.inputVars,
			
 
				+      outputVariables: template.outputVars,
			
 
				+    });
			
 
				+    setShowAddConnection(true);
			
 
				+    setActiveTab("connections");
			
 
				+  };
			
 
				+
			
 
				+  const tabs: { id: TabId; label: string; icon: React.ReactNode }[] = [
			
 
				+    { id: "sources", label: "Data Sources", icon: <Database className="w-3.5 h-3.5" /> },
			
 
				+    { id: "connections", label: "API Connections", icon: <Plug className="w-3.5 h-3.5" /> },
			
 
				+    { id: "templates", label: "Action Templates", icon: <Zap className="w-3.5 h-3.5" /> },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex flex-col" style={{ height: "calc(100vh - 4rem)" }}>
			
 
				+      {/* Top toolbar */}
			
 
				+      <div className="border-b px-4 h-12 flex items-center justify-between shrink-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "#059669" }}>
			
 
				+            <Database className="w-3.5 h-3.5 text-white" />
			
 
				+          </div>
			
 
				+          <span className="text-sm font-bold" style={{ color: "#059669", fontFamily: "'Playfair Display', serif" }}>Knowledge & Data</span>
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          {activeTab === "sources" && (
			
 
				+            <Button onClick={() => setShowAddSource(true)} size="sm" className="text-xs text-white" style={{ background: "#059669" }}>
			
 
				+              <Plus className="w-3 h-3 mr-1" /> Add Source
			
 
				+            </Button>
			
 
				+          )}
			
 
				+          {activeTab === "connections" && (
			
 
				+            <Button onClick={() => setShowAddConnection(true)} size="sm" className="text-xs text-white" style={{ background: "#059669" }}>
			
 
				+              <Plus className="w-3 h-3 mr-1" /> Add Connection
			
 
				+            </Button>
			
 
				+          )}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Tabs */}
			
 
				+      <div className="border-b px-4 flex gap-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        {tabs.map(tab => (
			
 
				+          <button
			
 
				+            key={tab.id}
			
 
				+            onClick={() => setActiveTab(tab.id)}
			
 
				+            className="flex items-center gap-1.5 px-4 py-2.5 text-xs font-medium transition-colors border-b-2"
			
 
				+            style={{
			
 
				+              color: activeTab === tab.id ? "#059669" : "#a8a29e",
			
 
				+              borderColor: activeTab === tab.id ? "#059669" : "transparent",
			
 
				+            }}
			
 
				+          >
			
 
				+            {tab.icon} {tab.label}
			
 
				+          </button>
			
 
				+        ))}
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Content */}
			
 
				+      <div className="flex-1 overflow-y-auto p-4" style={{ background: "#FFFBEB" }}>
			
 
				+        {/* ─── Data Sources Tab ─── */}
			
 
				+        {activeTab === "sources" && (
			
 
				+          <div className="space-y-3">
			
 
				+            {/* Add source form */}
			
 
				+            {showAddSource && (
			
 
				+              <div className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                <h3 className="text-sm font-semibold mb-3" style={{ color: "#292524" }}>Add Data Source</h3>
			
 
				+                <div className="space-y-3">
			
 
				+                  <div className="grid grid-cols-4 gap-2">
			
 
				+                    {(Object.entries(SOURCE_TYPES) as [string, any][]).map(([key, config]) => (
			
 
				+                      <button
			
 
				+                        key={key}
			
 
				+                        onClick={() => setNewSource(prev => ({ ...prev, type: key as any }))}
			
 
				+                        className="p-2 rounded-lg border text-center transition-colors"
			
 
				+                        style={{
			
 
				+                          borderColor: newSource.type === key ? config.color : "#e7e0d5",
			
 
				+                          background: newSource.type === key ? `${config.color}08` : "#fff",
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        <div className="flex justify-center mb-1" style={{ color: config.color }}>{config.icon}</div>
			
 
				+                        <span className="text-[10px] font-medium" style={{ color: newSource.type === key ? config.color : "#78716C" }}>{config.label}</span>
			
 
				+                      </button>
			
 
				+                    ))}
			
 
				+                  </div>
			
 
				+                  <input
			
 
				+                    type="text"
			
 
				+                    value={newSource.name}
			
 
				+                    onChange={(e) => setNewSource(prev => ({ ...prev, name: e.target.value }))}
			
 
				+                    placeholder="Source name"
			
 
				+                    className="w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                    style={{ borderColor: "#e7e0d5" }}
			
 
				+                  />
			
 
				+                  {newSource.type === "url" && (
			
 
				+                    <input
			
 
				+                      type="url"
			
 
				+                      value={newSource.config.url || ""}
			
 
				+                      onChange={(e) => setNewSource(prev => ({ ...prev, config: { ...prev.config, url: e.target.value } }))}
			
 
				+                      placeholder="https://www.homelegance.com/faq"
			
 
				+                      className="w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                      style={{ borderColor: "#e7e0d5" }}
			
 
				+                    />
			
 
				+                  )}
			
 
				+                  {newSource.type === "qa_pair" && (
			
 
				+                    <>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        value={newSource.config.question || ""}
			
 
				+                        onChange={(e) => setNewSource(prev => ({ ...prev, config: { ...prev.config, question: e.target.value } }))}
			
 
				+                        placeholder="Question"
			
 
				+                        className="w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                      <textarea
			
 
				+                        value={newSource.config.answer || ""}
			
 
				+                        onChange={(e) => setNewSource(prev => ({ ...prev, config: { ...prev.config, answer: e.target.value } }))}
			
 
				+                        placeholder="Answer"
			
 
				+                        className="w-full px-3 py-2 text-sm rounded-lg border resize-none"
			
 
				+                        rows={3}
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </>
			
 
				+                  )}
			
 
				+                  <div className="flex gap-2 justify-end">
			
 
				+                    <Button variant="outline" size="sm" onClick={() => setShowAddSource(false)}>Cancel</Button>
			
 
				+                    <Button
			
 
				+                      size="sm"
			
 
				+                      className="text-white"
			
 
				+                      style={{ background: "#059669" }}
			
 
				+                      onClick={() => createSource.mutate(newSource)}
			
 
				+                      disabled={!newSource.name || createSource.isPending}
			
 
				+                    >
			
 
				+                      {createSource.isPending ? "Adding..." : "Add Source"}
			
 
				+                    </Button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            )}
			
 
				+
			
 
				+            {/* Sources list */}
			
 
				+            {loadingSources ? (
			
 
				+              <div className="text-center py-12">
			
 
				+                <RefreshCw className="w-5 h-5 animate-spin mx-auto" style={{ color: "#a8a29e" }} />
			
 
				+              </div>
			
 
				+            ) : !sources || sources.length === 0 ? (
			
 
				+              <div className="text-center py-12">
			
 
				+                <Database className="w-10 h-10 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+                <p className="text-sm" style={{ color: "#78716C" }}>No data sources yet</p>
			
 
				+                <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>Add URLs, files, or Q&A pairs to train your chatbot</p>
			
 
				+              </div>
			
 
				+            ) : (
			
 
				+              sources.map((source: any) => {
			
 
				+                const typeConfig = SOURCE_TYPES[source.type as keyof typeof SOURCE_TYPES] || SOURCE_TYPES.url;
			
 
				+                const statusStyle = STATUS_STYLES[source.status] || STATUS_STYLES.active;
			
 
				+                return (
			
 
				+                  <div key={source.id} className="p-3 rounded-xl border flex items-center gap-3" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                    <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style={{ background: `${typeConfig.color}14`, color: typeConfig.color }}>
			
 
				+                      {typeConfig.icon}
			
 
				+                    </div>
			
 
				+                    <div className="flex-1 min-w-0">
			
 
				+                      <div className="flex items-center gap-2">
			
 
				+                        <span className="text-sm font-semibold truncate" style={{ color: "#292524" }}>{source.name}</span>
			
 
				+                        <span className="flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[9px] font-medium" style={{ background: statusStyle.bg, color: statusStyle.text }}>
			
 
				+                          {statusStyle.icon} {source.status}
			
 
				+                        </span>
			
 
				+                      </div>
			
 
				+                      <div className="flex items-center gap-2 mt-0.5">
			
 
				+                        <span className="text-[10px]" style={{ color: "#a8a29e" }}>{typeConfig.label}</span>
			
 
				+                        <span className="text-[10px]" style={{ color: "#a8a29e" }}>· {source.itemCount} items</span>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <button
			
 
				+                      onClick={() => deleteSource.mutate({ id: source.id })}
			
 
				+                      className="p-1.5 rounded-lg hover:bg-red-50 transition-colors"
			
 
				+                    >
			
 
				+                      <Trash2 className="w-3.5 h-3.5" style={{ color: "#dc2626" }} />
			
 
				+                    </button>
			
 
				+                  </div>
			
 
				+                );
			
 
				+              })
			
 
				+            )}
			
 
				+          </div>
			
 
				+        )}
			
 
				+
			
 
				+        {/* ─── API Connections Tab ─── */}
			
 
				+        {activeTab === "connections" && (
			
 
				+          <div className="space-y-3">
			
 
				+            {/* Add connection form */}
			
 
				+            {showAddConnection && (
			
 
				+              <div className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                <h3 className="text-sm font-semibold mb-3" style={{ color: "#292524" }}>
			
 
				+                  {newConnection.name ? `Configure: ${newConnection.name}` : "Add API Connection"}
			
 
				+                </h3>
			
 
				+                <div className="space-y-3">
			
 
				+                  <div className="grid grid-cols-2 gap-3">
			
 
				+                    <div>
			
 
				+                      <label className="text-[11px] font-medium" style={{ color: "#78716C" }}>Name</label>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        value={newConnection.name}
			
 
				+                        onChange={(e) => setNewConnection(prev => ({ ...prev, name: e.target.value }))}
			
 
				+                        placeholder="e.g., Check Order Status"
			
 
				+                        className="mt-1 w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                    <div>
			
 
				+                      <label className="text-[11px] font-medium" style={{ color: "#78716C" }}>Category</label>
			
 
				+                      <select
			
 
				+                        value={newConnection.category}
			
 
				+                        onChange={(e) => setNewConnection(prev => ({ ...prev, category: e.target.value }))}
			
 
				+                        className="mt-1 w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      >
			
 
				+                        <option value="">Select category</option>
			
 
				+                        <option value="orders">Orders</option>
			
 
				+                        <option value="shipping">Shipping</option>
			
 
				+                        <option value="returning">Returning</option>
			
 
				+                        <option value="cancelling">Cancelling</option>
			
 
				+                        <option value="customer">Customer</option>
			
 
				+                      </select>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <div>
			
 
				+                    <label className="text-[11px] font-medium" style={{ color: "#78716C" }}>Description</label>
			
 
				+                    <input
			
 
				+                      type="text"
			
 
				+                      value={newConnection.description}
			
 
				+                      onChange={(e) => setNewConnection(prev => ({ ...prev, description: e.target.value }))}
			
 
				+                      placeholder="What does this API do?"
			
 
				+                      className="mt-1 w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                      style={{ borderColor: "#e7e0d5" }}
			
 
				+                    />
			
 
				+                  </div>
			
 
				+                  <div className="grid grid-cols-4 gap-3">
			
 
				+                    <div>
			
 
				+                      <label className="text-[11px] font-medium" style={{ color: "#78716C" }}>Method</label>
			
 
				+                      <select
			
 
				+                        value={newConnection.method}
			
 
				+                        onChange={(e) => setNewConnection(prev => ({ ...prev, method: e.target.value as any }))}
			
 
				+                        className="mt-1 w-full px-3 py-2 text-sm rounded-lg border"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      >
			
 
				+                        <option value="GET">GET</option>
			
 
				+                        <option value="POST">POST</option>
			
 
				+                        <option value="PUT">PUT</option>
			
 
				+                        <option value="DELETE">DELETE</option>
			
 
				+                      </select>
			
 
				+                    </div>
			
 
				+                    <div className="col-span-3">
			
 
				+                      <label className="text-[11px] font-medium" style={{ color: "#78716C" }}>Endpoint</label>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        value={newConnection.endpoint}
			
 
				+                        onChange={(e) => setNewConnection(prev => ({ ...prev, endpoint: e.target.value }))}
			
 
				+                        placeholder="/api/orders/{orderId}/status"
			
 
				+                        className="mt-1 w-full px-3 py-2 text-sm rounded-lg border font-mono"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+
			
 
				+                  {/* Input variables preview */}
			
 
				+                  {newConnection.inputVariables.length > 0 && (
			
 
				+                    <div className="p-2 rounded-lg" style={{ background: "#f5f0e8" }}>
			
 
				+                      <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#78716C" }}>Input Variables</span>
			
 
				+                      <div className="mt-1 space-y-0.5">
			
 
				+                        {newConnection.inputVariables.map((v: any, i: number) => (
			
 
				+                          <div key={i} className="flex items-center gap-2 text-[11px]">
			
 
				+                            <Code2 className="w-3 h-3" style={{ color: "#0369a1" }} />
			
 
				+                            <span className="font-mono font-medium" style={{ color: "#292524" }}>{v.name}</span>
			
 
				+                            <span style={{ color: "#a8a29e" }}>({v.type})</span>
			
 
				+                            {v.required && <span className="text-[9px] px-1 rounded" style={{ background: "#dc262614", color: "#dc2626" }}>required</span>}
			
 
				+                          </div>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* Output variables preview */}
			
 
				+                  {newConnection.outputVariables.length > 0 && (
			
 
				+                    <div className="p-2 rounded-lg" style={{ background: "#f5f0e8" }}>
			
 
				+                      <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#78716C" }}>Output Variables</span>
			
 
				+                      <div className="mt-1 space-y-0.5">
			
 
				+                        {newConnection.outputVariables.map((v: any, i: number) => (
			
 
				+                          <div key={i} className="flex items-center gap-2 text-[11px]">
			
 
				+                            <ArrowRight className="w-3 h-3" style={{ color: "#14532D" }} />
			
 
				+                            <span className="font-mono font-medium" style={{ color: "#292524" }}>{v.name}</span>
			
 
				+                            <span style={{ color: "#a8a29e" }}>({v.type})</span>
			
 
				+                          </div>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  <div className="flex gap-2 justify-end">
			
 
				+                    <Button variant="outline" size="sm" onClick={() => { setShowAddConnection(false); setNewConnection({ name: "", description: "", category: "", method: "GET", endpoint: "", inputVariables: [], outputVariables: [] }); }}>
			
 
				+                      Cancel
			
 
				+                    </Button>
			
 
				+                    <Button
			
 
				+                      size="sm"
			
 
				+                      className="text-white"
			
 
				+                      style={{ background: "#059669" }}
			
 
				+                      onClick={() => createConnection.mutate(newConnection)}
			
 
				+                      disabled={!newConnection.name || !newConnection.endpoint || createConnection.isPending}
			
 
				+                    >
			
 
				+                      {createConnection.isPending ? "Creating..." : "Create Connection"}
			
 
				+                    </Button>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            )}
			
 
				+
			
 
				+            {/* Connections list */}
			
 
				+            {loadingConnections ? (
			
 
				+              <div className="text-center py-12">
			
 
				+                <RefreshCw className="w-5 h-5 animate-spin mx-auto" style={{ color: "#a8a29e" }} />
			
 
				+              </div>
			
 
				+            ) : !connections || connections.length === 0 ? (
			
 
				+              <div className="text-center py-12">
			
 
				+                <Plug className="w-10 h-10 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+                <p className="text-sm" style={{ color: "#78716C" }}>No API connections yet</p>
			
 
				+                <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>
			
 
				+                  Use Action Templates to quickly set up connections for orders, shipping, returns, and more
			
 
				+                </p>
			
 
				+              </div>
			
 
				+            ) : (
			
 
				+              connections.map((conn: any) => (
			
 
				+                <div key={conn.id} className="p-3 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                  <div className="flex items-center gap-3">
			
 
				+                    <div className="w-9 h-9 rounded-lg flex items-center justify-center shrink-0" style={{ background: "#ca8a0414", color: "#ca8a04" }}>
			
 
				+                      <Plug className="w-4 h-4" />
			
 
				+                    </div>
			
 
				+                    <div className="flex-1 min-w-0">
			
 
				+                      <div className="flex items-center gap-2">
			
 
				+                        <span className="text-sm font-semibold truncate" style={{ color: "#292524" }}>{conn.name}</span>
			
 
				+                        <span className="text-[9px] px-1.5 py-0.5 rounded font-mono font-medium" style={{ background: "#f5f0e8", color: "#78716C" }}>
			
 
				+                          {conn.method}
			
 
				+                        </span>
			
 
				+                        {conn.isActive ? (
			
 
				+                          <span className="flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[9px] font-medium" style={{ background: "#14532D14", color: "#14532D" }}>
			
 
				+                            <CheckCircle2 className="w-2.5 h-2.5" /> Active
			
 
				+                          </span>
			
 
				+                        ) : (
			
 
				+                          <span className="flex items-center gap-0.5 px-1.5 py-0.5 rounded-full text-[9px] font-medium" style={{ background: "#78716C14", color: "#78716C" }}>
			
 
				+                            Inactive
			
 
				+                          </span>
			
 
				+                        )}
			
 
				+                      </div>
			
 
				+                      <p className="text-[10px] font-mono truncate mt-0.5" style={{ color: "#a8a29e" }}>{conn.endpoint}</p>
			
 
				+                      {conn.description && <p className="text-[10px] mt-0.5 truncate" style={{ color: "#78716C" }}>{conn.description}</p>}
			
 
				+                    </div>
			
 
				+                    <div className="flex items-center gap-1 shrink-0">
			
 
				+                      <button
			
 
				+                        onClick={() => testConnection.mutate({ id: conn.id })}
			
 
				+                        disabled={testConnection.isPending}
			
 
				+                        className="p-1.5 rounded-lg hover:bg-green-50 transition-colors"
			
 
				+                        title="Test connection"
			
 
				+                      >
			
 
				+                        <TestTube className="w-3.5 h-3.5" style={{ color: "#059669" }} />
			
 
				+                      </button>
			
 
				+                      <button
			
 
				+                        onClick={() => deleteConnection.mutate({ id: conn.id })}
			
 
				+                        className="p-1.5 rounded-lg hover:bg-red-50 transition-colors"
			
 
				+                      >
			
 
				+                        <Trash2 className="w-3.5 h-3.5" style={{ color: "#dc2626" }} />
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  {conn.executionCount > 0 && (
			
 
				+                    <div className="mt-2 pt-2 border-t flex items-center gap-3" style={{ borderColor: "#f5f0e8" }}>
			
 
				+                      <span className="text-[10px]" style={{ color: "#a8a29e" }}>{conn.executionCount} executions</span>
			
 
				+                      {conn.lastExecutedAt && (
			
 
				+                        <span className="text-[10px]" style={{ color: "#a8a29e" }}>
			
 
				+                          Last: {new Date(conn.lastExecutedAt).toLocaleDateString()}
			
 
				+                        </span>
			
 
				+                      )}
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+                </div>
			
 
				+              ))
			
 
				+            )}
			
 
				+          </div>
			
 
				+        )}
			
 
				+
			
 
				+        {/* ─── Action Templates Tab ─── */}
			
 
				+        {activeTab === "templates" && (
			
 
				+          <div className="space-y-3">
			
 
				+            <div className="p-3 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+              <p className="text-xs" style={{ color: "#78716C" }}>
			
 
				+                Action Templates provide pre-configured API connection patterns for common chatbot operations.
			
 
				+                Click "Use Template" to create a connection with pre-filled settings that you can customize for your specific API endpoints.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+
			
 
				+            {ACTION_TEMPLATES.map(template => (
			
 
				+              <div key={template.id} className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                <div className="flex items-start gap-3">
			
 
				+                  <div className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0" style={{ background: `${template.color}14`, color: template.color }}>
			
 
				+                    {template.icon}
			
 
				+                  </div>
			
 
				+                  <div className="flex-1 min-w-0">
			
 
				+                    <div className="flex items-center gap-2">
			
 
				+                      <span className="text-sm font-semibold" style={{ color: "#292524" }}>{template.name}</span>
			
 
				+                      <span className="text-[9px] px-1.5 py-0.5 rounded font-mono font-medium" style={{ background: "#f5f0e8", color: "#78716C" }}>
			
 
				+                        {template.method}
			
 
				+                      </span>
			
 
				+                      <span className="text-[9px] px-1.5 py-0.5 rounded-full capitalize" style={{ background: `${template.color}14`, color: template.color }}>
			
 
				+                        {template.category}
			
 
				+                      </span>
			
 
				+                    </div>
			
 
				+                    <p className="text-[11px] mt-0.5" style={{ color: "#78716C" }}>{template.description}</p>
			
 
				+                    <p className="text-[10px] font-mono mt-1" style={{ color: "#a8a29e" }}>{template.endpoint}</p>
			
 
				+
			
 
				+                    <div className="flex gap-4 mt-2">
			
 
				+                      <div>
			
 
				+                        <span className="text-[9px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Inputs</span>
			
 
				+                        <div className="flex flex-wrap gap-1 mt-0.5">
			
 
				+                          {template.inputVars.map(v => (
			
 
				+                            <span key={v.name} className="text-[9px] px-1.5 py-0.5 rounded font-mono" style={{ background: "#0369a108", color: "#0369a1", border: "1px solid #0369a120" }}>
			
 
				+                              {v.name}{v.required ? "*" : ""}
			
 
				+                            </span>
			
 
				+                          ))}
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div>
			
 
				+                        <span className="text-[9px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Outputs</span>
			
 
				+                        <div className="flex flex-wrap gap-1 mt-0.5">
			
 
				+                          {template.outputVars.map(v => (
			
 
				+                            <span key={v.name} className="text-[9px] px-1.5 py-0.5 rounded font-mono" style={{ background: "#14532D08", color: "#14532D", border: "1px solid #14532D20" }}>
			
 
				+                              {v.name}
			
 
				+                            </span>
			
 
				+                          ))}
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                  <Button
			
 
				+                    onClick={() => handleUseTemplate(template)}
			
 
				+                    size="sm"
			
 
				+                    className="text-xs text-white shrink-0"
			
 
				+                    style={{ background: template.color }}
			
 
				+                  >
			
 
				+                    <Zap className="w-3 h-3 mr-1" /> Use Template
			
 
				+                  </Button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            ))}
			
 
				+          </div>
			
 
				+        )}
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/ForgotPassword.tsx
+++ b/client/src/pages/ForgotPassword.tsx
@@ -0,0 +1,274 @@
 
				+import { useState } from "react";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import {
			
 
				+  Card,
			
 
				+  CardContent,
			
 
				+  CardDescription,
			
 
				+  CardHeader,
			
 
				+  CardTitle,
			
 
				+} from "@/components/ui/card";
			
 
				+import {
			
 
				+  Bot,
			
 
				+  Loader2,
			
 
				+  Mail,
			
 
				+  AlertCircle,
			
 
				+  ArrowLeft,
			
 
				+  CheckCircle2,
			
 
				+  Copy,
			
 
				+  ExternalLink,
			
 
				+} from "lucide-react";
			
 
				+import { Link } from "wouter";
			
 
				+
			
 
				+export default function ForgotPassword() {
			
 
				+  const [email, setEmail] = useState("");
			
 
				+  const [error, setError] = useState("");
			
 
				+  const [sent, setSent] = useState(false);
			
 
				+  const [resetToken, setResetToken] = useState<string | null>(null);
			
 
				+  const [copied, setCopied] = useState(false);
			
 
				+
			
 
				+  const forgotMutation = trpc.auth.forgotPassword.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      setSent(true);
			
 
				+      // In demo mode, the token is returned for testing
			
 
				+      if (data.resetToken) {
			
 
				+        setResetToken(data.resetToken);
			
 
				+      }
			
 
				+    },
			
 
				+    onError: (err) => {
			
 
				+      setError(err.message || "Something went wrong");
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const handleSubmit = (e: React.FormEvent) => {
			
 
				+    e.preventDefault();
			
 
				+    setError("");
			
 
				+    if (!email) {
			
 
				+      setError("Please enter your email address");
			
 
				+      return;
			
 
				+    }
			
 
				+    forgotMutation.mutate({ email });
			
 
				+  };
			
 
				+
			
 
				+  const copyResetLink = () => {
			
 
				+    if (resetToken) {
			
 
				+      const link = `${window.location.origin}/reset-password/${resetToken}`;
			
 
				+      navigator.clipboard.writeText(link);
			
 
				+      setCopied(true);
			
 
				+      setTimeout(() => setCopied(false), 2000);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const isLoading = forgotMutation.isPending;
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="min-h-screen flex items-center justify-center px-4 py-12 relative"
			
 
				+      style={{ background: "linear-gradient(135deg, #FFFBEB 0%, #f5f0e8 50%, #e8e0d4 100%)" }}
			
 
				+    >
			
 
				+      <div className="absolute top-0 left-0 w-full h-1" style={{ background: "#14532D" }} />
			
 
				+      <div
			
 
				+        className="absolute top-32 right-32 w-48 h-48 rounded-full opacity-10"
			
 
				+        style={{ background: "#C2410C", filter: "blur(60px)" }}
			
 
				+      />
			
 
				+
			
 
				+      <div className="w-full max-w-md relative z-10">
			
 
				+        <Link
			
 
				+          href="/login"
			
 
				+          className="inline-flex items-center gap-1.5 text-sm mb-6 transition-colors hover:opacity-80"
			
 
				+          style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          <ArrowLeft className="w-4 h-4" />
			
 
				+          Back to sign in
			
 
				+        </Link>
			
 
				+
			
 
				+        <Card
			
 
				+          className="border-0 shadow-xl"
			
 
				+          style={{ background: "#fff", boxShadow: "0 20px 60px rgba(120, 113, 108, 0.12)" }}
			
 
				+        >
			
 
				+          <CardHeader className="text-center pb-2">
			
 
				+            <div className="flex justify-center mb-4">
			
 
				+              <div
			
 
				+                className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                style={{
			
 
				+                  background: sent
			
 
				+                    ? "linear-gradient(135deg, #16a34a 0%, #15803d 100%)"
			
 
				+                    : "linear-gradient(135deg, #C2410C 0%, #ea580c 100%)",
			
 
				+                  boxShadow: sent
			
 
				+                    ? "0 4px 16px rgba(22, 163, 74, 0.3)"
			
 
				+                    : "0 4px 16px rgba(194, 65, 12, 0.3)",
			
 
				+                }}
			
 
				+              >
			
 
				+                {sent ? (
			
 
				+                  <CheckCircle2 className="w-7 h-7 text-white" />
			
 
				+                ) : (
			
 
				+                  <Mail className="w-7 h-7 text-white" />
			
 
				+                )}
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <CardTitle
			
 
				+              className="text-2xl"
			
 
				+              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+            >
			
 
				+              {sent ? "Check Your Email" : "Forgot Password?"}
			
 
				+            </CardTitle>
			
 
				+            <CardDescription
			
 
				+              className="text-sm mt-1"
			
 
				+              style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+            >
			
 
				+              {sent
			
 
				+                ? "We've sent password reset instructions to your email"
			
 
				+                : "Enter your email and we'll send you a reset link"}
			
 
				+            </CardDescription>
			
 
				+          </CardHeader>
			
 
				+
			
 
				+          <CardContent className="pt-4">
			
 
				+            {sent ? (
			
 
				+              <div className="space-y-4">
			
 
				+                <div
			
 
				+                  className="p-4 rounded-lg text-sm leading-relaxed"
			
 
				+                  style={{
			
 
				+                    background: "#F0FDF4",
			
 
				+                    color: "#166534",
			
 
				+                    border: "1px solid #BBF7D0",
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  <p className="font-medium mb-1">Reset instructions sent!</p>
			
 
				+                  <p className="text-xs" style={{ color: "#15803d" }}>
			
 
				+                    If an account exists for <strong>{email}</strong>, you'll receive an email with a link to reset your password. The link expires in 1 hour.
			
 
				+                  </p>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Demo mode: show the reset link directly */}
			
 
				+                {resetToken && (
			
 
				+                  <div
			
 
				+                    className="p-4 rounded-lg text-sm"
			
 
				+                    style={{
			
 
				+                      background: "#FFFBEB",
			
 
				+                      border: "1px solid #FDE68A",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <p className="font-medium mb-2" style={{ color: "#92400E" }}>
			
 
				+                      Demo Mode — Reset Link
			
 
				+                    </p>
			
 
				+                    <p className="text-xs mb-3" style={{ color: "#a16207" }}>
			
 
				+                      In production, this link would be sent via email. For testing, you can use it directly:
			
 
				+                    </p>
			
 
				+                    <div className="flex gap-2">
			
 
				+                      <Button
			
 
				+                        size="sm"
			
 
				+                        variant="outline"
			
 
				+                        className="text-xs flex-1"
			
 
				+                        style={{ borderColor: "#FDE68A", color: "#92400E" }}
			
 
				+                        onClick={copyResetLink}
			
 
				+                      >
			
 
				+                        <Copy className="w-3 h-3 mr-1" />
			
 
				+                        {copied ? "Copied!" : "Copy Link"}
			
 
				+                      </Button>
			
 
				+                      <Link href={`/reset-password/${resetToken}`}>
			
 
				+                        <Button
			
 
				+                          size="sm"
			
 
				+                          className="text-xs"
			
 
				+                          style={{ background: "#C2410C" }}
			
 
				+                        >
			
 
				+                          <ExternalLink className="w-3 h-3 mr-1" />
			
 
				+                          Open Reset Page
			
 
				+                        </Button>
			
 
				+                      </Link>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                )}
			
 
				+
			
 
				+                <div className="text-center pt-2">
			
 
				+                  <p
			
 
				+                    className="text-xs mb-3"
			
 
				+                    style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                  >
			
 
				+                    Didn't receive the email? Check your spam folder or
			
 
				+                  </p>
			
 
				+                  <Button
			
 
				+                    variant="outline"
			
 
				+                    size="sm"
			
 
				+                    className="text-xs"
			
 
				+                    style={{ borderColor: "#e7e0d5", color: "#57534e" }}
			
 
				+                    onClick={() => {
			
 
				+                      setSent(false);
			
 
				+                      setResetToken(null);
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    Try again
			
 
				+                  </Button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            ) : (
			
 
				+              <form onSubmit={handleSubmit} className="space-y-4">
			
 
				+                {error && (
			
 
				+                  <div
			
 
				+                    className="flex items-center gap-2 p-3 rounded-lg text-sm"
			
 
				+                    style={{
			
 
				+                      background: "#FEF2F2",
			
 
				+                      color: "#DC2626",
			
 
				+                      border: "1px solid #FECACA",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <AlertCircle className="w-4 h-4 shrink-0" />
			
 
				+                    {error}
			
 
				+                  </div>
			
 
				+                )}
			
 
				+
			
 
				+                <div className="space-y-2">
			
 
				+                  <Label
			
 
				+                    htmlFor="email"
			
 
				+                    className="text-sm font-medium"
			
 
				+                    style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                  >
			
 
				+                    Email Address
			
 
				+                  </Label>
			
 
				+                  <div className="relative">
			
 
				+                    <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                    <Input
			
 
				+                      id="email"
			
 
				+                      type="email"
			
 
				+                      placeholder="you@company.com"
			
 
				+                      value={email}
			
 
				+                      onChange={(e) => setEmail(e.target.value)}
			
 
				+                      className="pl-10 h-11"
			
 
				+                      style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                      disabled={isLoading}
			
 
				+                      autoComplete="email"
			
 
				+                    />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+
			
 
				+                <Button
			
 
				+                  type="submit"
			
 
				+                  className="w-full h-11 text-sm font-semibold"
			
 
				+                  style={{
			
 
				+                    background: "linear-gradient(135deg, #C2410C 0%, #ea580c 100%)",
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    boxShadow: "0 2px 8px rgba(194, 65, 12, 0.25)",
			
 
				+                  }}
			
 
				+                  disabled={isLoading}
			
 
				+                >
			
 
				+                  {isLoading ? (
			
 
				+                    <>
			
 
				+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
			
 
				+                      Sending...
			
 
				+                    </>
			
 
				+                  ) : (
			
 
				+                    "Send Reset Link"
			
 
				+                  )}
			
 
				+                </Button>
			
 
				+              </form>
			
 
				+            )}
			
 
				+          </CardContent>
			
 
				+        </Card>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/Home.tsx
+++ b/client/src/pages/Home.tsx
@@ -0,0 +1,854 @@
 
				+/**
			
 
				+ * Home Page — Homelegance Chatbot Integration Demo
			
 
				+ * Design: Warm Showroom — Scandinavian warmth, editorial magazine layout
			
 
				+ * Playfair Display headings, Source Sans 3 body, forest green + terracotta + cream palette
			
 
				+ */
			
 
				+import { useRef } from "react";
			
 
				+import { motion, useInView } from "framer-motion";
			
 
				+import {
			
 
				+  MessageCircle,
			
 
				+  ArrowDown,
			
 
				+  Zap,
			
 
				+  Clock,
			
 
				+  TrendingUp,
			
 
				+  Shield,
			
 
				+  Code2,
			
 
				+  Layers,
			
 
				+  GitBranch,
			
 
				+  CheckCircle2,
			
 
				+  ExternalLink,
			
 
				+  ChevronRight,
			
 
				+  Bot,
			
 
				+  Workflow,
			
 
				+  Server,
			
 
				+  Puzzle,
			
 
				+} from "lucide-react";
			
 
				+import ChatbotWidgetLive from "@/components/ChatbotWidgetLive";
			
 
				+import WorkflowDiagram from "@/components/WorkflowDiagram";
			
 
				+import ArchitectureDiagram from "@/components/ArchitectureDiagram";
			
 
				+import CodeSnippet from "@/components/CodeSnippet";
			
 
				+
			
 
				+/* ─── Asset URLs ─── */
			
 
				+const HERO_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/hero-showroom-3kpaMXDd6czasp7Qgkfo5b.webp";
			
 
				+const WORKFLOW_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/workflow-bg-fRHbG9vamH9g2W8W8BrAkm.webp";
			
 
				+const CHATBOT_ILLUS = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/chatbot-illustration-BFAPtQzws8tEXvTD9tFm6G.webp";
			
 
				+const INTEGRATION_IMG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/integration-hero-ARBCtGWzCjUdh76eghxiim.webp";
			
 
				+const ARCH_BG = "https://d2xsxph8kpxj0f.cloudfront.net/310519663460016926/j3fMicxd96oQ6qWqevDJt5/architecture-bg-k6ZMJihrNCrLkF6CwRB4Jj.webp";
			
 
				+
			
 
				+/* ─── Code Snippets ─── */
			
 
				+const EMBED_CODE = `<!-- Add before closing </body> tag -->
			
 
				+<script>
			
 
				+  (function() {
			
 
				+    var s = document.createElement('script');
			
 
				+    s.src = 'https://cdn.homelegance.com/chatbot/v2/widget.js';
			
 
				+    s.async = true;
			
 
				+    s.dataset.siteId = 'YOUR_SITE_ID';
			
 
				+    s.dataset.position = 'bottom-right';
			
 
				+    s.dataset.theme = 'forest';
			
 
				+    s.dataset.greeting = 'Welcome to Homelegance!';
			
 
				+    document.body.appendChild(s);
			
 
				+  })();
			
 
				+</script>`;
			
 
				+
			
 
				+const CONFIG_CODE = `// chatbot-config.js
			
 
				+export default {
			
 
				+  // Branding
			
 
				+  brandName: "Homelegance",
			
 
				+  primaryColor: "#14532D",
			
 
				+  accentColor: "#C2410C",
			
 
				+  logoUrl: "/assets/logo.svg",
			
 
				+
			
 
				+  // Behavior
			
 
				+  autoOpen: false,
			
 
				+  openDelay: 5000,        // ms before showing greeting
			
 
				+  position: "bottom-right",
			
 
				+
			
 
				+  // AI Configuration
			
 
				+  model: "gpt-4o-mini",
			
 
				+  temperature: 0.7,
			
 
				+  systemPrompt: \`You are a helpful Homelegance
			
 
				+    furniture assistant. Help dealers find
			
 
				+    products, check orders, and answer FAQs.
			
 
				+    Always be warm and professional.\`,
			
 
				+
			
 
				+  // Integrations
			
 
				+  webhookUrl: "https://api.homelegance.com/chatbot/webhook",
			
 
				+  crmIntegration: "salesforce",
			
 
				+  analyticsId: "UA-XXXXXXXX-X",
			
 
				+
			
 
				+  // Escalation Rules
			
 
				+  escalation: {
			
 
				+    maxBotTurns: 8,
			
 
				+    sentimentThreshold: -0.3,
			
 
				+    keywords: ["speak to human", "representative"],
			
 
				+    transferMessage: "Connecting you with a team member..."
			
 
				+  }
			
 
				+};`;
			
 
				+
			
 
				+const WEBHOOK_CODE = `// server/chatbot-webhook.js
			
 
				+import express from 'express';
			
 
				+const router = express.Router();
			
 
				+
			
 
				+router.post('/webhook', async (req, res) => {
			
 
				+  const { event, sessionId, message, metadata } = req.body;
			
 
				+
			
 
				+  switch (event) {
			
 
				+    case 'message.received':
			
 
				+      // Process incoming user message
			
 
				+      const intent = await detectIntent(message.text);
			
 
				+      const response = await generateResponse(intent, metadata);
			
 
				+      return res.json({ reply: response });
			
 
				+
			
 
				+    case 'escalation.requested':
			
 
				+      // Route to live agent queue
			
 
				+      await notifyAgentTeam(sessionId, metadata);
			
 
				+      return res.json({ status: 'queued' });
			
 
				+
			
 
				+    case 'session.ended':
			
 
				+      // Log conversation for analytics
			
 
				+      await saveConversationLog(sessionId);
			
 
				+      return res.json({ status: 'logged' });
			
 
				+
			
 
				+    default:
			
 
				+      return res.json({ status: 'ok' });
			
 
				+  }
			
 
				+});
			
 
				+
			
 
				+export default router;`;
			
 
				+
			
 
				+const API_CODE = `// Example: Product Search API Integration
			
 
				+async function searchProducts(query, filters) {
			
 
				+  const response = await fetch(
			
 
				+    'https://api.homelegance.com/v2/products/search',
			
 
				+    {
			
 
				+      method: 'POST',
			
 
				+      headers: {
			
 
				+        'Authorization': 'Bearer YOUR_API_KEY',
			
 
				+        'Content-Type': 'application/json'
			
 
				+      },
			
 
				+      body: JSON.stringify({
			
 
				+        query,
			
 
				+        filters: {
			
 
				+          category: filters.category,
			
 
				+          collection: filters.collection,
			
 
				+          priceRange: filters.priceRange,
			
 
				+          inStock: true
			
 
				+        },
			
 
				+        limit: 5,
			
 
				+        include: ['images', 'pricing', 'availability']
			
 
				+      })
			
 
				+    }
			
 
				+  );
			
 
				+  return response.json();
			
 
				+}`;
			
 
				+
			
 
				+/* ─── Section wrapper with scroll animation ─── */
			
 
				+function AnimatedSection({
			
 
				+  children,
			
 
				+  className = "",
			
 
				+  id,
			
 
				+  style,
			
 
				+}: {
			
 
				+  children: React.ReactNode;
			
 
				+  className?: string;
			
 
				+  id?: string;
			
 
				+  style?: React.CSSProperties;
			
 
				+}) {
			
 
				+  const ref = useRef(null);
			
 
				+  const isInView = useInView(ref, { once: true, margin: "-80px" });
			
 
				+  return (
			
 
				+    <motion.section
			
 
				+      ref={ref}
			
 
				+      id={id}
			
 
				+      initial={{ opacity: 0, y: 40 }}
			
 
				+      animate={isInView ? { opacity: 1, y: 0 } : {}}
			
 
				+      transition={{ duration: 0.6, ease: "easeOut" }}
			
 
				+      className={className}
			
 
				+      style={style}
			
 
				+    >
			
 
				+      {children}
			
 
				+    </motion.section>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Navigation ─── */
			
 
				+function Nav() {
			
 
				+  const links = [
			
 
				+    { label: "Workflow", href: "#workflow" },
			
 
				+    { label: "Architecture", href: "#architecture" },
			
 
				+    { label: "Integration", href: "#integration" },
			
 
				+    { label: "Benefits", href: "#benefits" },
			
 
				+
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <nav
			
 
				+      className="fixed top-0 left-0 right-0 z-40 backdrop-blur-md border-b"
			
 
				+      style={{ background: "rgba(255, 251, 235, 0.88)", borderColor: "#e7e0d5" }}
			
 
				+    >
			
 
				+      <div className="container flex items-center justify-between h-16">
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div
			
 
				+            className="w-9 h-9 rounded-lg flex items-center justify-center"
			
 
				+            style={{ background: "#14532D" }}
			
 
				+          >
			
 
				+            <Bot className="w-5 h-5 text-white" />
			
 
				+          </div>
			
 
				+          <div>
			
 
				+            <span
			
 
				+              className="text-sm font-bold tracking-tight"
			
 
				+              style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}
			
 
				+            >
			
 
				+              Homelegance
			
 
				+            </span>
			
 
				+            <span
			
 
				+              className="text-xs block -mt-0.5"
			
 
				+              style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+            >
			
 
				+              Chatbot Integration
			
 
				+            </span>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+        <div className="hidden md:flex items-center gap-1">
			
 
				+          {links.map((link) => (
			
 
				+            <a
			
 
				+              key={link.href}
			
 
				+              href={link.href}
			
 
				+              className="px-3 py-2 rounded-lg text-sm font-medium transition-colors hover:bg-black/5"
			
 
				+              style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+            >
			
 
				+              {link.label}
			
 
				+            </a>
			
 
				+          ))}
			
 
				+          <div className="w-px h-5 mx-1" style={{ background: "#e7e0d5" }} />
			
 
				+          <a
			
 
				+            href="/login"
			
 
				+            className="px-3 py-2 rounded-lg text-sm font-semibold transition-colors"
			
 
				+            style={{
			
 
				+              background: "#14532D",
			
 
				+              color: "#fff",
			
 
				+              fontFamily: "'Source Sans 3', sans-serif",
			
 
				+              borderRadius: "8px",
			
 
				+              padding: "6px 16px",
			
 
				+            }}
			
 
				+          >
			
 
				+            Sign In
			
 
				+          </a>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </nav>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Hero Section ─── */
			
 
				+function HeroSection() {
			
 
				+  return (
			
 
				+    <section className="relative min-h-[92vh] flex items-center pt-16 overflow-hidden">
			
 
				+      {/* Background image */}
			
 
				+      <div className="absolute inset-0">
			
 
				+        <img
			
 
				+          src={HERO_IMG}
			
 
				+          alt="Modern furniture showroom"
			
 
				+          className="w-full h-full object-cover"
			
 
				+        />
			
 
				+        <div
			
 
				+          className="absolute inset-0"
			
 
				+          style={{
			
 
				+            background: "linear-gradient(135deg, rgba(20, 83, 45, 0.82) 0%, rgba(20, 83, 45, 0.65) 40%, rgba(194, 65, 12, 0.3) 100%)",
			
 
				+          }}
			
 
				+        />
			
 
				+      </div>
			
 
				+
			
 
				+      <div className="container relative z-10">
			
 
				+        <div className="max-w-2xl">
			
 
				+          <motion.div
			
 
				+            initial={{ opacity: 0, y: 20 }}
			
 
				+            animate={{ opacity: 1, y: 0 }}
			
 
				+            transition={{ delay: 0.2 }}
			
 
				+            className="inline-flex items-center gap-2 px-4 py-2 rounded-full mb-8"
			
 
				+            style={{ background: "rgba(255,255,255,0.15)", backdropFilter: "blur(8px)" }}
			
 
				+          >
			
 
				+            <Zap className="w-4 h-4 text-amber-300" />
			
 
				+            <span className="text-sm text-white/90" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              AI-Powered Customer Experience
			
 
				+            </span>
			
 
				+          </motion.div>
			
 
				+
			
 
				+          <motion.h1
			
 
				+            initial={{ opacity: 0, y: 30 }}
			
 
				+            animate={{ opacity: 1, y: 0 }}
			
 
				+            transition={{ delay: 0.3 }}
			
 
				+            className="text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6"
			
 
				+            style={{ fontFamily: "'Playfair Display', serif", color: "#fff" }}
			
 
				+          >
			
 
				+            Chatbot Workflow
			
 
				+            <br />
			
 
				+            <span style={{ color: "#fbbf24" }}>& Integration Guide</span>
			
 
				+          </motion.h1>
			
 
				+
			
 
				+          <motion.p
			
 
				+            initial={{ opacity: 0, y: 30 }}
			
 
				+            animate={{ opacity: 1, y: 0 }}
			
 
				+            transition={{ delay: 0.4 }}
			
 
				+            className="text-lg mb-10 max-w-xl leading-relaxed"
			
 
				+            style={{ color: "rgba(255,255,255,0.85)", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            A comprehensive guide to designing, building, and integrating an
			
 
				+            AI-powered chatbot for homelegance.com — from conversation workflows
			
 
				+            to production deployment.
			
 
				+          </motion.p>
			
 
				+
			
 
				+          <motion.div
			
 
				+            initial={{ opacity: 0, y: 30 }}
			
 
				+            animate={{ opacity: 1, y: 0 }}
			
 
				+            transition={{ delay: 0.5 }}
			
 
				+            className="flex flex-wrap gap-4"
			
 
				+          >
			
 
				+            <a
			
 
				+              href="#workflow"
			
 
				+              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all hover:shadow-lg"
			
 
				+              style={{
			
 
				+                background: "#fff",
			
 
				+                color: "#14532D",
			
 
				+                fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                boxShadow: "0 4px 16px rgba(0,0,0,0.1)",
			
 
				+              }}
			
 
				+            >
			
 
				+              <Workflow className="w-4 h-4" />
			
 
				+              Explore Workflow
			
 
				+            </a>
			
 
				+            <a
			
 
				+              href="#integration"
			
 
				+              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all hover:bg-white/20"
			
 
				+              style={{
			
 
				+                background: "rgba(255,255,255,0.12)",
			
 
				+                color: "#fff",
			
 
				+                border: "1px solid rgba(255,255,255,0.25)",
			
 
				+                fontFamily: "'Source Sans 3', sans-serif",
			
 
				+              }}
			
 
				+            >
			
 
				+              <Code2 className="w-4 h-4" />
			
 
				+              Integration Code
			
 
				+            </a>
			
 
				+          </motion.div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Scroll indicator */}
			
 
				+      <motion.div
			
 
				+        animate={{ y: [0, 8, 0] }}
			
 
				+        transition={{ repeat: Infinity, duration: 2 }}
			
 
				+        className="absolute bottom-8 left-1/2 -translate-x-1/2"
			
 
				+      >
			
 
				+        <ArrowDown className="w-5 h-5 text-white/50" />
			
 
				+      </motion.div>
			
 
				+    </section>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Stats Bar ─── */
			
 
				+function StatsBar() {
			
 
				+  const stats = [
			
 
				+    { value: "73%", label: "Queries Resolved by Bot", icon: <CheckCircle2 className="w-5 h-5" /> },
			
 
				+    { value: "< 2s", label: "Average Response Time", icon: <Clock className="w-5 h-5" /> },
			
 
				+    { value: "24/7", label: "Availability", icon: <Shield className="w-5 h-5" /> },
			
 
				+    { value: "40%", label: "Support Cost Reduction", icon: <TrendingUp className="w-5 h-5" /> },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <div style={{ background: "#14532D" }}>
			
 
				+      <div className="container py-10">
			
 
				+        <div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
			
 
				+          {stats.map((stat, i) => (
			
 
				+            <motion.div
			
 
				+              key={stat.label}
			
 
				+              initial={{ opacity: 0, y: 20 }}
			
 
				+              whileInView={{ opacity: 1, y: 0 }}
			
 
				+              viewport={{ once: true }}
			
 
				+              transition={{ delay: i * 0.1 }}
			
 
				+              className="text-center"
			
 
				+            >
			
 
				+              <div className="flex justify-center mb-2">
			
 
				+                <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: "rgba(255,255,255,0.12)", color: "#fbbf24" }}>
			
 
				+                  {stat.icon}
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div className="text-2xl sm:text-3xl font-bold text-white mb-1" style={{ fontFamily: "'Playfair Display', serif" }}>
			
 
				+                {stat.value}
			
 
				+              </div>
			
 
				+              <div className="text-xs text-green-200/70" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                {stat.label}
			
 
				+              </div>
			
 
				+            </motion.div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Workflow Section ─── */
			
 
				+function WorkflowSection() {
			
 
				+  return (
			
 
				+    <AnimatedSection
			
 
				+      id="workflow"
			
 
				+      className="py-20 lg:py-28 relative"
			
 
				+    >
			
 
				+      <div
			
 
				+        className="absolute inset-0 opacity-30"
			
 
				+        style={{
			
 
				+          backgroundImage: `url(${WORKFLOW_BG})`,
			
 
				+          backgroundSize: "cover",
			
 
				+          backgroundPosition: "center",
			
 
				+        }}
			
 
				+      />
			
 
				+      <div className="container relative z-10">
			
 
				+        <div className="max-w-2xl mx-auto text-center mb-14">
			
 
				+          <div
			
 
				+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
			
 
				+            style={{ background: "#14532D12", color: "#14532D" }}
			
 
				+          >
			
 
				+            <GitBranch className="w-4 h-4" />
			
 
				+            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Conversation Flow
			
 
				+            </span>
			
 
				+          </div>
			
 
				+          <h2
			
 
				+            className="text-3xl sm:text-4xl font-bold mb-4"
			
 
				+            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+          >
			
 
				+            Chatbot Workflow Design
			
 
				+          </h2>
			
 
				+          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            The chatbot follows a structured conversation flow that routes users to the right
			
 
				+            information based on their intent. Click on any node below to see how each branch works.
			
 
				+          </p>
			
 
				+        </div>
			
 
				+
			
 
				+        <WorkflowDiagram />
			
 
				+      </div>
			
 
				+    </AnimatedSection>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Architecture Section ─── */
			
 
				+function ArchitectureSection() {
			
 
				+  return (
			
 
				+    <AnimatedSection
			
 
				+      id="architecture"
			
 
				+      className="py-20 lg:py-28"
			
 
				+      style={{ background: "#f5f0e8" }}
			
 
				+    >
			
 
				+      <div className="container">
			
 
				+        <div className="grid lg:grid-cols-2 gap-12 items-start">
			
 
				+          {/* Left: text */}
			
 
				+          <div>
			
 
				+            <div
			
 
				+              className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
			
 
				+              style={{ background: "#C2410C12", color: "#C2410C" }}
			
 
				+            >
			
 
				+              <Server className="w-4 h-4" />
			
 
				+              <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                System Architecture
			
 
				+              </span>
			
 
				+            </div>
			
 
				+            <h2
			
 
				+              className="text-3xl sm:text-4xl font-bold mb-4"
			
 
				+              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+            >
			
 
				+              How It All Connects
			
 
				+            </h2>
			
 
				+            <p className="text-base leading-relaxed mb-8" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              The chatbot architecture is designed as a layered system. The frontend widget communicates
			
 
				+              through a secure API gateway to the AI processing layer, which connects to Homelegance's
			
 
				+              existing CRM and fulfillment systems.
			
 
				+            </p>
			
 
				+
			
 
				+            <div className="space-y-4">
			
 
				+              {[
			
 
				+                {
			
 
				+                  title: "Client Layer",
			
 
				+                  desc: "The chat widget is embedded via a lightweight JavaScript SDK that loads asynchronously. It handles the UI, message rendering, and WebSocket connection for real-time communication.",
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Middleware",
			
 
				+                  desc: "An API gateway handles authentication, rate limiting, and request routing. Webhooks process events like new messages, escalation requests, and session endings.",
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "AI & Logic",
			
 
				+                  desc: "The NLP engine uses a fine-tuned language model to detect user intent and extract entities (product names, order numbers, locations). The dialog manager maintains conversation state.",
			
 
				+                },
			
 
				+                {
			
 
				+                  title: "Integrations",
			
 
				+                  desc: "The chatbot connects to Homelegance's CRM for order data, the product catalog API for search, and the dealer database for location queries. Live agent handoff uses the existing support queue.",
			
 
				+                },
			
 
				+              ].map((item, i) => (
			
 
				+                <motion.div
			
 
				+                  key={item.title}
			
 
				+                  initial={{ opacity: 0, x: -20 }}
			
 
				+                  whileInView={{ opacity: 1, x: 0 }}
			
 
				+                  viewport={{ once: true }}
			
 
				+                  transition={{ delay: i * 0.1 }}
			
 
				+                  className="p-4 rounded-xl"
			
 
				+                  style={{ background: "#fff", border: "1px solid #e7e0d5" }}
			
 
				+                >
			
 
				+                  <h4 className="text-sm font-bold mb-1" style={{ color: "#14532D", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                    {item.title}
			
 
				+                  </h4>
			
 
				+                  <p className="text-sm leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                    {item.desc}
			
 
				+                  </p>
			
 
				+                </motion.div>
			
 
				+              ))}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Right: diagram */}
			
 
				+          <div className="lg:sticky lg:top-24">
			
 
				+            <div className="p-6 rounded-2xl" style={{ background: "#FFFBEB", border: "1px solid #e7e0d5" }}>
			
 
				+              <ArchitectureDiagram />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </AnimatedSection>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Integration Guide Section ─── */
			
 
				+function IntegrationSection() {
			
 
				+  const steps = [
			
 
				+    {
			
 
				+      step: "01",
			
 
				+      title: "Embed the Widget",
			
 
				+      description: "Add a single script tag to your website's HTML. The widget loads asynchronously and won't affect page performance. Configure it with your site ID and preferred settings.",
			
 
				+      code: EMBED_CODE,
			
 
				+      language: "html",
			
 
				+      filename: "index.html",
			
 
				+    },
			
 
				+    {
			
 
				+      step: "02",
			
 
				+      title: "Configure Behavior",
			
 
				+      description: "Customize the chatbot's appearance, AI model, escalation rules, and integration endpoints through a configuration file. This controls everything from colors to conversation flow.",
			
 
				+      code: CONFIG_CODE,
			
 
				+      language: "javascript",
			
 
				+      filename: "chatbot-config.js",
			
 
				+    },
			
 
				+    {
			
 
				+      step: "03",
			
 
				+      title: "Set Up Webhooks",
			
 
				+      description: "Create server-side webhook handlers to process chatbot events. This is where you connect to your CRM, order management system, and live agent queue.",
			
 
				+      code: WEBHOOK_CODE,
			
 
				+      language: "javascript",
			
 
				+      filename: "server/chatbot-webhook.js",
			
 
				+    },
			
 
				+    {
			
 
				+      step: "04",
			
 
				+      title: "Connect Product APIs",
			
 
				+      description: "Integrate the chatbot with Homelegance's product catalog API to enable real-time product search, availability checking, and personalized recommendations within conversations.",
			
 
				+      code: API_CODE,
			
 
				+      language: "javascript",
			
 
				+      filename: "api/product-search.js",
			
 
				+    },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <AnimatedSection id="integration" className="py-20 lg:py-28">
			
 
				+      <div className="container">
			
 
				+        <div className="max-w-2xl mx-auto text-center mb-14">
			
 
				+          <div
			
 
				+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
			
 
				+            style={{ background: "#14532D12", color: "#14532D" }}
			
 
				+          >
			
 
				+            <Code2 className="w-4 h-4" />
			
 
				+            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Step-by-Step Guide
			
 
				+            </span>
			
 
				+          </div>
			
 
				+          <h2
			
 
				+            className="text-3xl sm:text-4xl font-bold mb-4"
			
 
				+            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+          >
			
 
				+            Integration Guide
			
 
				+          </h2>
			
 
				+          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Follow these four steps to integrate the chatbot into homelegance.com.
			
 
				+            Each step includes production-ready code that you can customize to your needs.
			
 
				+          </p>
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Steps */}
			
 
				+        <div className="max-w-4xl mx-auto space-y-16">
			
 
				+          {steps.map((step, i) => (
			
 
				+            <motion.div
			
 
				+              key={step.step}
			
 
				+              initial={{ opacity: 0, y: 30 }}
			
 
				+              whileInView={{ opacity: 1, y: 0 }}
			
 
				+              viewport={{ once: true }}
			
 
				+              transition={{ delay: 0.1 }}
			
 
				+              className="relative"
			
 
				+            >
			
 
				+              {/* Step number + connector */}
			
 
				+              <div className="flex items-start gap-6">
			
 
				+                <div className="shrink-0 hidden sm:flex flex-col items-center">
			
 
				+                  <div
			
 
				+                    className="w-14 h-14 rounded-2xl flex items-center justify-center text-lg font-bold"
			
 
				+                    style={{
			
 
				+                      background: "#14532D",
			
 
				+                      color: "#fff",
			
 
				+                      fontFamily: "'Playfair Display', serif",
			
 
				+                      boxShadow: "0 4px 16px rgba(20, 83, 45, 0.25)",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    {step.step}
			
 
				+                  </div>
			
 
				+                  {i < steps.length - 1 && (
			
 
				+                    <div className="w-0.5 h-16 mt-3" style={{ background: "#e7e0d5" }} />
			
 
				+                  )}
			
 
				+                </div>
			
 
				+
			
 
				+                <div className="flex-1">
			
 
				+                  <h3
			
 
				+                    className="text-xl sm:text-2xl font-bold mb-3"
			
 
				+                    style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+                  >
			
 
				+                    <span className="sm:hidden mr-2" style={{ color: "#C2410C" }}>{step.step}.</span>
			
 
				+                    {step.title}
			
 
				+                  </h3>
			
 
				+                  <p className="text-sm leading-relaxed mb-5" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                    {step.description}
			
 
				+                  </p>
			
 
				+                  <CodeSnippet
			
 
				+                    code={step.code}
			
 
				+                    language={step.language}
			
 
				+                    filename={step.filename}
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            </motion.div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </AnimatedSection>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Benefits Section ─── */
			
 
				+function BenefitsSection() {
			
 
				+  const benefits = [
			
 
				+    {
			
 
				+      icon: <Clock className="w-6 h-6" />,
			
 
				+      title: "24/7 Availability",
			
 
				+      description: "The chatbot never sleeps. Dealers and retailers across time zones can get instant answers to product questions, check order status, and find information at any hour.",
			
 
				+    },
			
 
				+    {
			
 
				+      icon: <TrendingUp className="w-6 h-6" />,
			
 
				+      title: "Increased Engagement",
			
 
				+      description: "Interactive conversation drives deeper product exploration. Dealers discover collections they might have missed, leading to larger and more diverse orders.",
			
 
				+    },
			
 
				+    {
			
 
				+      icon: <Zap className="w-6 h-6" />,
			
 
				+      title: "Faster Resolution",
			
 
				+      description: "Common queries like order status, dealer location, and product specs are answered instantly. This frees up sales reps to focus on complex, high-value conversations.",
			
 
				+    },
			
 
				+    {
			
 
				+      icon: <Shield className="w-6 h-6" />,
			
 
				+      title: "Consistent Experience",
			
 
				+      description: "Every interaction follows the same quality standards. The chatbot delivers accurate product information, current pricing, and up-to-date availability data every time.",
			
 
				+    },
			
 
				+    {
			
 
				+      icon: <Layers className="w-6 h-6" />,
			
 
				+      title: "Scalable Support",
			
 
				+      description: "Handle hundreds of simultaneous conversations without adding headcount. The chatbot scales with your business during peak seasons like market weeks and promotions.",
			
 
				+    },
			
 
				+    {
			
 
				+      icon: <Puzzle className="w-6 h-6" />,
			
 
				+      title: "Seamless Integration",
			
 
				+      description: "Connects with existing CRM, ERP, and order management systems. No need to replace current tools — the chatbot enhances what you already have.",
			
 
				+    },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <AnimatedSection
			
 
				+      id="benefits"
			
 
				+      className="py-20 lg:py-28"
			
 
				+    >
			
 
				+      <div
			
 
				+        className="absolute inset-0 opacity-5"
			
 
				+        style={{
			
 
				+          backgroundImage: `url(${ARCH_BG})`,
			
 
				+          backgroundSize: "cover",
			
 
				+        }}
			
 
				+      />
			
 
				+      <div className="container relative z-10">
			
 
				+        <div className="max-w-2xl mx-auto text-center mb-14">
			
 
				+          <div
			
 
				+            className="inline-flex items-center gap-2 px-4 py-1.5 rounded-full mb-5"
			
 
				+            style={{ background: "#C2410C12", color: "#C2410C" }}
			
 
				+          >
			
 
				+            <Zap className="w-4 h-4" />
			
 
				+            <span className="text-xs font-semibold uppercase tracking-wider" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Why a Chatbot
			
 
				+            </span>
			
 
				+          </div>
			
 
				+          <h2
			
 
				+            className="text-3xl sm:text-4xl font-bold mb-4"
			
 
				+            style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+          >
			
 
				+            Business Benefits
			
 
				+          </h2>
			
 
				+          <p className="text-base leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            An AI chatbot transforms how Homelegance connects with its dealer network,
			
 
				+            delivering measurable improvements across customer experience and operational efficiency.
			
 
				+          </p>
			
 
				+        </div>
			
 
				+
			
 
				+        <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
			
 
				+          {benefits.map((benefit, i) => (
			
 
				+            <motion.div
			
 
				+              key={benefit.title}
			
 
				+              initial={{ opacity: 0, y: 20 }}
			
 
				+              whileInView={{ opacity: 1, y: 0 }}
			
 
				+              viewport={{ once: true }}
			
 
				+              transition={{ delay: i * 0.08 }}
			
 
				+              whileHover={{ y: -4, boxShadow: "0 12px 32px rgba(120, 113, 108, 0.12)" }}
			
 
				+              className="p-6 rounded-xl transition-all"
			
 
				+              style={{
			
 
				+                background: "#fff",
			
 
				+                border: "1px solid #e7e0d5",
			
 
				+                boxShadow: "0 2px 8px rgba(120, 113, 108, 0.06)",
			
 
				+              }}
			
 
				+            >
			
 
				+              <div
			
 
				+                className="w-12 h-12 rounded-xl flex items-center justify-center mb-4"
			
 
				+                style={{ background: "#14532D12", color: "#14532D" }}
			
 
				+              >
			
 
				+                {benefit.icon}
			
 
				+              </div>
			
 
				+              <h3
			
 
				+                className="text-lg font-bold mb-2"
			
 
				+                style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+              >
			
 
				+                {benefit.title}
			
 
				+              </h3>
			
 
				+              <p className="text-sm leading-relaxed" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                {benefit.description}
			
 
				+              </p>
			
 
				+            </motion.div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </AnimatedSection>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── CTA Section ─── */
			
 
				+function CTASection() {
			
 
				+  return (
			
 
				+    <section className="relative py-20 overflow-hidden">
			
 
				+      <div className="absolute inset-0">
			
 
				+        <img
			
 
				+          src={INTEGRATION_IMG}
			
 
				+          alt="Developer workspace"
			
 
				+          className="w-full h-full object-cover"
			
 
				+        />
			
 
				+        <div
			
 
				+          className="absolute inset-0"
			
 
				+          style={{
			
 
				+            background: "linear-gradient(135deg, rgba(20, 83, 45, 0.88) 0%, rgba(20, 83, 45, 0.75) 100%)",
			
 
				+          }}
			
 
				+        />
			
 
				+      </div>
			
 
				+      <div className="container relative z-10 text-center">
			
 
				+        <motion.div
			
 
				+          initial={{ opacity: 0, y: 20 }}
			
 
				+          whileInView={{ opacity: 1, y: 0 }}
			
 
				+          viewport={{ once: true }}
			
 
				+        >
			
 
				+          <h2
			
 
				+            className="text-3xl sm:text-4xl font-bold mb-4 text-white"
			
 
				+            style={{ fontFamily: "'Playfair Display', serif" }}
			
 
				+          >
			
 
				+            Ready to Get Started?
			
 
				+          </h2>
			
 
				+          <p
			
 
				+            className="text-base mb-8 max-w-lg mx-auto"
			
 
				+            style={{ color: "rgba(255,255,255,0.8)", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            Try the live chatbot demo by clicking the green chat icon in the bottom-right corner.
			
 
				+            Experience the conversation flow firsthand.
			
 
				+          </p>
			
 
				+          <div className="flex flex-wrap justify-center gap-4">
			
 
				+            <a
			
 
				+              href="#workflow"
			
 
				+              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all"
			
 
				+              style={{
			
 
				+                background: "#fff",
			
 
				+                color: "#14532D",
			
 
				+                fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                boxShadow: "0 4px 16px rgba(0,0,0,0.15)",
			
 
				+              }}
			
 
				+            >
			
 
				+              Review Workflow
			
 
				+              <ChevronRight className="w-4 h-4" />
			
 
				+            </a>
			
 
				+            <a
			
 
				+              href="#integration"
			
 
				+              className="inline-flex items-center gap-2 px-6 py-3.5 rounded-xl text-sm font-semibold transition-all"
			
 
				+              style={{
			
 
				+                background: "rgba(255,255,255,0.12)",
			
 
				+                color: "#fff",
			
 
				+                border: "1px solid rgba(255,255,255,0.25)",
			
 
				+                fontFamily: "'Source Sans 3', sans-serif",
			
 
				+              }}
			
 
				+            >
			
 
				+              View Integration Code
			
 
				+              <ExternalLink className="w-4 h-4" />
			
 
				+            </a>
			
 
				+          </div>
			
 
				+        </motion.div>
			
 
				+      </div>
			
 
				+    </section>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Footer ─── */
			
 
				+function Footer() {
			
 
				+  return (
			
 
				+    <footer className="py-8 border-t" style={{ borderColor: "#e7e0d5", background: "#FFFBEB" }}>
			
 
				+      <div className="container">
			
 
				+        <div className="flex flex-col sm:flex-row items-center justify-between gap-4">
			
 
				+          <div className="flex items-center gap-2">
			
 
				+            <div className="w-7 h-7 rounded-md flex items-center justify-center" style={{ background: "#14532D" }}>
			
 
				+              <Bot className="w-4 h-4 text-white" />
			
 
				+            </div>
			
 
				+            <span className="text-sm font-semibold" style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}>
			
 
				+              Homelegance Chatbot Demo
			
 
				+            </span>
			
 
				+          </div>
			
 
				+          <p className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Chatbot integration concept for homelegance.com
			
 
				+          </p>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </footer>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Main Page ─── */
			
 
				+export default function Home() {
			
 
				+  return (
			
 
				+    <div className="min-h-screen" style={{ background: "#FFFBEB" }}>
			
 
				+      <Nav />
			
 
				+      <HeroSection />
			
 
				+      <StatsBar />
			
 
				+      <WorkflowSection />
			
 
				+      <ArchitectureSection />
			
 
				+      <IntegrationSection />
			
 
				+      <BenefitsSection />
			
 
				+      <CTASection />
			
 
				+      <Footer />
			
 
				+      <ChatbotWidgetLive />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/Login.tsx
+++ b/client/src/pages/Login.tsx
@@ -0,0 +1,298 @@
 
				+import { useState } from "react";
			
 
				+import { useLocation } from "wouter";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { getLoginUrl } from "@/const";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import {
			
 
				+  Card,
			
 
				+  CardContent,
			
 
				+  CardDescription,
			
 
				+  CardFooter,
			
 
				+  CardHeader,
			
 
				+  CardTitle,
			
 
				+} from "@/components/ui/card";
			
 
				+import { Separator } from "@/components/ui/separator";
			
 
				+import {
			
 
				+  Bot,
			
 
				+  Eye,
			
 
				+  EyeOff,
			
 
				+  Loader2,
			
 
				+  Mail,
			
 
				+  Lock,
			
 
				+  AlertCircle,
			
 
				+  ArrowLeft,
			
 
				+} from "lucide-react";
			
 
				+import { Link } from "wouter";
			
 
				+
			
 
				+export default function Login() {
			
 
				+  const [, navigate] = useLocation();
			
 
				+  const { isAuthenticated, loading: authLoading } = useAuth();
			
 
				+  const [email, setEmail] = useState("");
			
 
				+  const [password, setPassword] = useState("");
			
 
				+  const [showPassword, setShowPassword] = useState(false);
			
 
				+  const [error, setError] = useState("");
			
 
				+
			
 
				+  const loginMutation = trpc.auth.login.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      // Redirect to dashboard after login
			
 
				+      const params = new URLSearchParams(window.location.search);
			
 
				+      const returnTo = params.get("returnTo") || "/dashboard";
			
 
				+      window.location.href = returnTo;
			
 
				+    },
			
 
				+    onError: (err) => {
			
 
				+      setError(err.message || "Invalid email or password");
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  // Redirect if already logged in
			
 
				+  if (!authLoading && isAuthenticated) {
			
 
				+    window.location.href = "/dashboard";
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  const handleSubmit = (e: React.FormEvent) => {
			
 
				+    e.preventDefault();
			
 
				+    setError("");
			
 
				+    if (!email || !password) {
			
 
				+      setError("Please fill in all fields");
			
 
				+      return;
			
 
				+    }
			
 
				+    loginMutation.mutate({ email, password });
			
 
				+  };
			
 
				+
			
 
				+  const isLoading = loginMutation.isPending;
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="min-h-screen flex items-center justify-center px-4 py-12 relative"
			
 
				+      style={{ background: "linear-gradient(135deg, #FFFBEB 0%, #f5f0e8 50%, #e8e0d4 100%)" }}
			
 
				+    >
			
 
				+      {/* Decorative elements */}
			
 
				+      <div className="absolute top-0 left-0 w-full h-1" style={{ background: "#14532D" }} />
			
 
				+      <div
			
 
				+        className="absolute top-20 right-20 w-64 h-64 rounded-full opacity-10"
			
 
				+        style={{ background: "#14532D", filter: "blur(80px)" }}
			
 
				+      />
			
 
				+      <div
			
 
				+        className="absolute bottom-20 left-20 w-48 h-48 rounded-full opacity-10"
			
 
				+        style={{ background: "#C2410C", filter: "blur(60px)" }}
			
 
				+      />
			
 
				+
			
 
				+      <div className="w-full max-w-md relative z-10">
			
 
				+        {/* Back to home */}
			
 
				+        <Link
			
 
				+          href="/"
			
 
				+          className="inline-flex items-center gap-1.5 text-sm mb-6 transition-colors hover:opacity-80"
			
 
				+          style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          <ArrowLeft className="w-4 h-4" />
			
 
				+          Back to home
			
 
				+        </Link>
			
 
				+
			
 
				+        <Card
			
 
				+          className="border-0 shadow-xl"
			
 
				+          style={{ background: "#fff", boxShadow: "0 20px 60px rgba(120, 113, 108, 0.12)" }}
			
 
				+        >
			
 
				+          <CardHeader className="text-center pb-2">
			
 
				+            {/* Logo */}
			
 
				+            <div className="flex justify-center mb-4">
			
 
				+              <div
			
 
				+                className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                style={{
			
 
				+                  background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                  boxShadow: "0 4px 16px rgba(20, 83, 45, 0.3)",
			
 
				+                }}
			
 
				+              >
			
 
				+                <Bot className="w-7 h-7 text-white" />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <CardTitle
			
 
				+              className="text-2xl"
			
 
				+              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+            >
			
 
				+              Welcome Back
			
 
				+            </CardTitle>
			
 
				+            <CardDescription
			
 
				+              className="text-sm mt-1"
			
 
				+              style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+            >
			
 
				+              Sign in to access the Homelegance Dashboard
			
 
				+            </CardDescription>
			
 
				+          </CardHeader>
			
 
				+
			
 
				+          <CardContent className="pt-4">
			
 
				+            <form onSubmit={handleSubmit} className="space-y-4">
			
 
				+              {error && (
			
 
				+                <div
			
 
				+                  className="flex items-center gap-2 p-3 rounded-lg text-sm"
			
 
				+                  style={{
			
 
				+                    background: "#FEF2F2",
			
 
				+                    color: "#DC2626",
			
 
				+                    border: "1px solid #FECACA",
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  <AlertCircle className="w-4 h-4 shrink-0" />
			
 
				+                  {error}
			
 
				+                </div>
			
 
				+              )}
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <Label
			
 
				+                  htmlFor="email"
			
 
				+                  className="text-sm font-medium"
			
 
				+                  style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                >
			
 
				+                  Email Address
			
 
				+                </Label>
			
 
				+                <div className="relative">
			
 
				+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="email"
			
 
				+                    type="email"
			
 
				+                    placeholder="you@company.com"
			
 
				+                    value={email}
			
 
				+                    onChange={(e) => setEmail(e.target.value)}
			
 
				+                    className="pl-10 h-11"
			
 
				+                    style={{
			
 
				+                      borderColor: "#e7e0d5",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="email"
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <div className="flex items-center justify-between">
			
 
				+                  <Label
			
 
				+                    htmlFor="password"
			
 
				+                    className="text-sm font-medium"
			
 
				+                    style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                  >
			
 
				+                    Password
			
 
				+                  </Label>
			
 
				+                  <Link
			
 
				+                    href="/forgot-password"
			
 
				+                    className="text-xs font-medium transition-colors hover:opacity-80"
			
 
				+                    style={{ color: "#C2410C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                  >
			
 
				+                    Forgot your password?
			
 
				+                  </Link>
			
 
				+                </div>
			
 
				+                <div className="relative">
			
 
				+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="password"
			
 
				+                    type={showPassword ? "text" : "password"}
			
 
				+                    placeholder="Enter your password"
			
 
				+                    value={password}
			
 
				+                    onChange={(e) => setPassword(e.target.value)}
			
 
				+                    className="pl-10 pr-10 h-11"
			
 
				+                    style={{
			
 
				+                      borderColor: "#e7e0d5",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="current-password"
			
 
				+                  />
			
 
				+                  <button
			
 
				+                    type="button"
			
 
				+                    onClick={() => setShowPassword(!showPassword)}
			
 
				+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
			
 
				+                  >
			
 
				+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
			
 
				+                  </button>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <Button
			
 
				+                type="submit"
			
 
				+                className="w-full h-11 text-sm font-semibold"
			
 
				+                style={{
			
 
				+                  background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                  fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  boxShadow: "0 2px 8px rgba(20, 83, 45, 0.25)",
			
 
				+                }}
			
 
				+                disabled={isLoading}
			
 
				+              >
			
 
				+                {isLoading ? (
			
 
				+                  <>
			
 
				+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
			
 
				+                    Signing in...
			
 
				+                  </>
			
 
				+                ) : (
			
 
				+                  "Sign In"
			
 
				+                )}
			
 
				+              </Button>
			
 
				+            </form>
			
 
				+
			
 
				+            {/* Divider */}
			
 
				+            <div className="relative my-6">
			
 
				+              <Separator style={{ background: "#e7e0d5" }} />
			
 
				+              <span
			
 
				+                className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 px-3 text-xs"
			
 
				+                style={{
			
 
				+                  background: "#fff",
			
 
				+                  color: "#a8a29e",
			
 
				+                  fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                }}
			
 
				+              >
			
 
				+                or continue with
			
 
				+              </span>
			
 
				+            </div>
			
 
				+
			
 
				+            {/* OAuth login */}
			
 
				+            <Button
			
 
				+              variant="outline"
			
 
				+              className="w-full h-11 text-sm font-medium"
			
 
				+              style={{
			
 
				+                borderColor: "#e7e0d5",
			
 
				+                color: "#57534e",
			
 
				+                fontFamily: "'Source Sans 3', sans-serif",
			
 
				+              }}
			
 
				+              onClick={() => {
			
 
				+                window.location.href = getLoginUrl("/dashboard");
			
 
				+              }}
			
 
				+              disabled={isLoading}
			
 
				+            >
			
 
				+              <svg className="w-4 h-4 mr-2" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
			
 
				+                <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z" fill="#14532D" opacity="0.2"/>
			
 
				+                <path d="M12 6a3 3 0 100 6 3 3 0 000-6zm0 8c-3.31 0-6 1.34-6 3v1h12v-1c0-1.66-2.69-3-6-3z" fill="#14532D"/>
			
 
				+              </svg>
			
 
				+              Sign in with Manus Account
			
 
				+            </Button>
			
 
				+          </CardContent>
			
 
				+
			
 
				+          <CardFooter className="justify-center pb-6">
			
 
				+            <p
			
 
				+              className="text-sm"
			
 
				+              style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+            >
			
 
				+              Don't have an account?{" "}
			
 
				+              <Link
			
 
				+                href="/register"
			
 
				+                className="font-semibold transition-colors hover:opacity-80"
			
 
				+                style={{ color: "#14532D" }}
			
 
				+              >
			
 
				+                Create one
			
 
				+              </Link>
			
 
				+            </p>
			
 
				+          </CardFooter>
			
 
				+        </Card>
			
 
				+
			
 
				+        {/* Footer */}
			
 
				+        <p
			
 
				+          className="text-center text-xs mt-6"
			
 
				+          style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          Homelegance Chatbot Administration Portal
			
 
				+        </p>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/NotFound.tsx
+++ b/client/src/pages/NotFound.tsx
@@ -0,0 +1,52 @@
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Card, CardContent } from "@/components/ui/card";
			
 
				+import { AlertCircle, Home } from "lucide-react";
			
 
				+import { useLocation } from "wouter";
			
 
				+
			
 
				+export default function NotFound() {
			
 
				+  const [, setLocation] = useLocation();
			
 
				+
			
 
				+  const handleGoHome = () => {
			
 
				+    setLocation("/");
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="min-h-screen w-full flex items-center justify-center bg-gradient-to-br from-slate-50 to-slate-100">
			
 
				+      <Card className="w-full max-w-lg mx-4 shadow-lg border-0 bg-white/80 backdrop-blur-sm">
			
 
				+        <CardContent className="pt-8 pb-8 text-center">
			
 
				+          <div className="flex justify-center mb-6">
			
 
				+            <div className="relative">
			
 
				+              <div className="absolute inset-0 bg-red-100 rounded-full animate-pulse" />
			
 
				+              <AlertCircle className="relative h-16 w-16 text-red-500" />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          <h1 className="text-4xl font-bold text-slate-900 mb-2">404</h1>
			
 
				+
			
 
				+          <h2 className="text-xl font-semibold text-slate-700 mb-4">
			
 
				+            Page Not Found
			
 
				+          </h2>
			
 
				+
			
 
				+          <p className="text-slate-600 mb-8 leading-relaxed">
			
 
				+            Sorry, the page you are looking for doesn't exist.
			
 
				+            <br />
			
 
				+            It may have been moved or deleted.
			
 
				+          </p>
			
 
				+
			
 
				+          <div
			
 
				+            id="not-found-button-group"
			
 
				+            className="flex flex-col sm:flex-row gap-3 justify-center"
			
 
				+          >
			
 
				+            <Button
			
 
				+              onClick={handleGoHome}
			
 
				+              className="bg-blue-600 hover:bg-blue-700 text-white px-6 py-2.5 rounded-lg transition-all duration-200 shadow-md hover:shadow-lg"
			
 
				+            >
			
 
				+              <Home className="w-4 h-4 mr-2" />
			
 
				+              Go Home
			
 
				+            </Button>
			
 
				+          </div>
			
 
				+        </CardContent>
			
 
				+      </Card>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/Playground.tsx
+++ b/client/src/pages/Playground.tsx
@@ -0,0 +1,445 @@
 
				+/**
			
 
				+ * Playground — Test the chatbot in a simulated customer view
			
 
				+ * Features: Interactive chatbot preview, flow selection, execution path tracking, reset
			
 
				+ */
			
 
				+import { useState, useRef, useEffect, useMemo } from "react";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { toast } from "sonner";
			
 
				+import {
			
 
				+  Play, RotateCcw, Sparkles, User, Headphones,
			
 
				+  Send, Bot, Loader2, Package, Truck, RotateCw,
			
 
				+  XCircle, ChevronRight, Eye, MessageCircle,
			
 
				+} from "lucide-react";
			
 
				+import { Streamdown } from "streamdown";
			
 
				+
			
 
				+/* ─── Quick-reply options matching the greeting ─── */
			
 
				+const GREETING_OPTIONS = [
			
 
				+  { id: "orders", label: "Orders", icon: <Package className="w-3.5 h-3.5" />, color: "#14532D" },
			
 
				+  { id: "shipping", label: "Shipping", icon: <Truck className="w-3.5 h-3.5" />, color: "#0369a1" },
			
 
				+  { id: "returning", label: "Returning", icon: <RotateCw className="w-3.5 h-3.5" />, color: "#ca8a04" },
			
 
				+  { id: "cancelling", label: "Cancelling", icon: <XCircle className="w-3.5 h-3.5" />, color: "#dc2626" },
			
 
				+];
			
 
				+
			
 
				+interface TestMessage {
			
 
				+  id: number;
			
 
				+  sender: "visitor" | "bot" | "agent" | "system";
			
 
				+  content: string;
			
 
				+  timestamp: string;
			
 
				+  flowStep?: string;
			
 
				+}
			
 
				+
			
 
				+export default function Playground() {
			
 
				+  const [sessionId, setSessionId] = useState<string | null>(null);
			
 
				+  const [messages, setMessages] = useState<TestMessage[]>([]);
			
 
				+  const [inputText, setInputText] = useState("");
			
 
				+  const [isTyping, setIsTyping] = useState(false);
			
 
				+  const [showGreeting, setShowGreeting] = useState(true);
			
 
				+  const [selectedFlow, setSelectedFlow] = useState<string | null>(null);
			
 
				+  const [flowPath, setFlowPath] = useState<string[]>([]);
			
 
				+  const [testMode, setTestMode] = useState<"interactive" | "flow">("interactive");
			
 
				+  const messagesEndRef = useRef<HTMLDivElement>(null);
			
 
				+
			
 
				+  const startSession = trpc.chat.startSession.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      setSessionId(data.sessionId);
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const { data: serverMessages } = trpc.chat.getMessages.useQuery(
			
 
				+    { sessionId: sessionId || "" },
			
 
				+    { enabled: !!sessionId, refetchInterval: 2000 }
			
 
				+  );
			
 
				+
			
 
				+  const sendMessage = trpc.chat.sendMessage.useMutation({
			
 
				+    onSuccess: () => setIsTyping(false),
			
 
				+    onError: () => setIsTyping(false),
			
 
				+  });
			
 
				+
			
 
				+  const trackEvent = trpc.analytics.track.useMutation();
			
 
				+
			
 
				+  // Sync server messages
			
 
				+  useEffect(() => {
			
 
				+    if (serverMessages?.messages) {
			
 
				+      const mapped: TestMessage[] = serverMessages.messages.map((m: any) => ({
			
 
				+        id: m.id,
			
 
				+        sender: m.sender,
			
 
				+        content: m.content,
			
 
				+        timestamp: m.createdAt?.toString() || new Date().toISOString(),
			
 
				+      }));
			
 
				+      setMessages(mapped);
			
 
				+      if (mapped.length > 0) setShowGreeting(false);
			
 
				+    }
			
 
				+  }, [serverMessages]);
			
 
				+
			
 
				+  // Auto-scroll
			
 
				+  useEffect(() => {
			
 
				+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
			
 
				+  }, [messages, isTyping]);
			
 
				+
			
 
				+  const handleStartTest = () => {
			
 
				+    setMessages([]);
			
 
				+    setShowGreeting(true);
			
 
				+    setSelectedFlow(null);
			
 
				+    setFlowPath([]);
			
 
				+    setSessionId(null);
			
 
				+    startSession.mutate({});
			
 
				+  };
			
 
				+
			
 
				+  const handleReset = () => {
			
 
				+    setMessages([]);
			
 
				+    setShowGreeting(true);
			
 
				+    setSelectedFlow(null);
			
 
				+    setFlowPath([]);
			
 
				+    setSessionId(null);
			
 
				+    setInputText("");
			
 
				+    setIsTyping(false);
			
 
				+  };
			
 
				+
			
 
				+  const handleOptionClick = (optionId: string) => {
			
 
				+    if (!sessionId) return;
			
 
				+    setShowGreeting(false);
			
 
				+    setSelectedFlow(optionId);
			
 
				+    setFlowPath(prev => [...prev, `Greeting → ${optionId}`]);
			
 
				+
			
 
				+    trackEvent.mutate({
			
 
				+      sessionId,
			
 
				+      eventType: "button_clicked",
			
 
				+      category: optionId,
			
 
				+      metadata: { source: "playground", button: optionId },
			
 
				+    });
			
 
				+
			
 
				+    // Send the option as a message
			
 
				+    const text = `I need help with ${optionId}`;
			
 
				+    setIsTyping(true);
			
 
				+    setMessages(prev => [...prev, {
			
 
				+      id: Date.now(),
			
 
				+      sender: "visitor",
			
 
				+      content: text,
			
 
				+      timestamp: new Date().toISOString(),
			
 
				+      flowStep: `User selected: ${optionId}`,
			
 
				+    }]);
			
 
				+    sendMessage.mutate({ sessionId, content: text });
			
 
				+  };
			
 
				+
			
 
				+  const handleSend = () => {
			
 
				+    if (!inputText.trim() || !sessionId || isTyping) return;
			
 
				+    const text = inputText.trim();
			
 
				+    setInputText("");
			
 
				+    setIsTyping(true);
			
 
				+    setShowGreeting(false);
			
 
				+
			
 
				+    setMessages(prev => [...prev, {
			
 
				+      id: Date.now(),
			
 
				+      sender: "visitor",
			
 
				+      content: text,
			
 
				+      timestamp: new Date().toISOString(),
			
 
				+    }]);
			
 
				+
			
 
				+    sendMessage.mutate({ sessionId, content: text });
			
 
				+  };
			
 
				+
			
 
				+  const handleKeyDown = (e: React.KeyboardEvent) => {
			
 
				+    if (e.key === "Enter" && !e.shiftKey) {
			
 
				+      e.preventDefault();
			
 
				+      handleSend();
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex flex-col" style={{ height: "calc(100vh - 4rem)" }}>
			
 
				+      {/* Top toolbar */}
			
 
				+      <div className="border-b px-4 h-12 flex items-center justify-between shrink-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "#7c3aed" }}>
			
 
				+            <Play className="w-3.5 h-3.5 text-white" />
			
 
				+          </div>
			
 
				+          <span className="text-sm font-bold" style={{ color: "#7c3aed", fontFamily: "'Playfair Display', serif" }}>Playground</span>
			
 
				+          {sessionId && (
			
 
				+            <span className="text-[10px] px-2 py-0.5 rounded-full font-medium" style={{ background: "#14532D14", color: "#14532D" }}>
			
 
				+              Session active
			
 
				+            </span>
			
 
				+          )}
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          <Button onClick={handleReset} variant="outline" size="sm" className="text-xs">
			
 
				+            <RotateCcw className="w-3 h-3 mr-1" /> Reset
			
 
				+          </Button>
			
 
				+          <Button onClick={handleStartTest} size="sm" className="text-xs text-white" style={{ background: "#7c3aed" }}>
			
 
				+            <Play className="w-3 h-3 mr-1" /> {sessionId ? "Restart" : "Start Test"}
			
 
				+          </Button>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      <div className="flex-1 flex min-h-0">
			
 
				+        {/* Left panel — Flow execution path */}
			
 
				+        <div className="w-64 shrink-0 border-r overflow-y-auto p-3 space-y-3" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+          <h3 className="text-xs font-bold uppercase tracking-wider" style={{ color: "#78716C" }}>
			
 
				+            Test Controls
			
 
				+          </h3>
			
 
				+
			
 
				+          {/* Mode selector */}
			
 
				+          <div className="space-y-1">
			
 
				+            <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Mode</span>
			
 
				+            <div className="flex gap-1">
			
 
				+              {(["interactive", "flow"] as const).map(mode => (
			
 
				+                <button
			
 
				+                  key={mode}
			
 
				+                  onClick={() => setTestMode(mode)}
			
 
				+                  className="flex-1 px-2 py-1.5 rounded-lg text-[11px] font-medium capitalize transition-colors"
			
 
				+                  style={{
			
 
				+                    background: testMode === mode ? "#7c3aed14" : "transparent",
			
 
				+                    color: testMode === mode ? "#7c3aed" : "#a8a29e",
			
 
				+                    border: testMode === mode ? "1px solid #7c3aed30" : "1px solid transparent",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  {mode}
			
 
				+                </button>
			
 
				+              ))}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Quick flow test */}
			
 
				+          {testMode === "flow" && (
			
 
				+            <div className="space-y-1.5">
			
 
				+              <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Test Flow</span>
			
 
				+              {GREETING_OPTIONS.map(opt => (
			
 
				+                <button
			
 
				+                  key={opt.id}
			
 
				+                  onClick={() => {
			
 
				+                    if (sessionId) handleOptionClick(opt.id);
			
 
				+                    else toast.info("Start a test session first");
			
 
				+                  }}
			
 
				+                  className="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-left hover:bg-black/5 transition-colors"
			
 
				+                >
			
 
				+                  <div className="w-6 h-6 rounded-md flex items-center justify-center shrink-0" style={{ background: `${opt.color}14`, color: opt.color }}>
			
 
				+                    {opt.icon}
			
 
				+                  </div>
			
 
				+                  <span className="text-[11px] font-medium" style={{ color: "#292524" }}>{opt.label}</span>
			
 
				+                </button>
			
 
				+              ))}
			
 
				+            </div>
			
 
				+          )}
			
 
				+
			
 
				+          {/* Execution path */}
			
 
				+          <div className="space-y-1.5">
			
 
				+            <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Execution Path</span>
			
 
				+            {flowPath.length === 0 ? (
			
 
				+              <p className="text-[11px] italic" style={{ color: "#d6d3d1" }}>No flow steps recorded yet</p>
			
 
				+            ) : (
			
 
				+              <div className="space-y-1">
			
 
				+                {flowPath.map((step, i) => (
			
 
				+                  <div key={i} className="flex items-center gap-1.5">
			
 
				+                    <div className="w-4 h-4 rounded-full flex items-center justify-center text-[9px] font-bold" style={{ background: "#7c3aed14", color: "#7c3aed" }}>
			
 
				+                      {i + 1}
			
 
				+                    </div>
			
 
				+                    <span className="text-[10px]" style={{ color: "#78716C" }}>{step}</span>
			
 
				+                  </div>
			
 
				+                ))}
			
 
				+              </div>
			
 
				+            )}
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Session info */}
			
 
				+          {sessionId && (
			
 
				+            <div className="p-2 rounded-lg" style={{ background: "#f5f0e8" }}>
			
 
				+              <span className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Session</span>
			
 
				+              <p className="text-[10px] font-mono mt-0.5 truncate" style={{ color: "#78716C" }}>{sessionId}</p>
			
 
				+              <p className="text-[10px] mt-1" style={{ color: "#a8a29e" }}>
			
 
				+                {messages.length} messages · {selectedFlow ? `Flow: ${selectedFlow}` : "No flow selected"}
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          )}
			
 
				+        </div>
			
 
				+
			
 
				+        {/* Center — Chat preview (simulated customer view) */}
			
 
				+        <div className="flex-1 flex items-center justify-center p-6" style={{ background: "#f5f0e8" }}>
			
 
				+          <div
			
 
				+            className="w-[400px] max-w-full rounded-2xl shadow-2xl overflow-hidden flex flex-col"
			
 
				+            style={{
			
 
				+              height: "580px",
			
 
				+              background: "#FFFBEB",
			
 
				+              border: "1px solid #e7e0d5",
			
 
				+              boxShadow: "0 20px 60px rgba(0,0,0,0.12)",
			
 
				+            }}
			
 
				+          >
			
 
				+            {/* Chat header */}
			
 
				+            <div className="px-4 py-3 flex items-center justify-between" style={{ background: "linear-gradient(135deg, #14532D 0%, #166534 100%)" }}>
			
 
				+              <div className="flex items-center gap-2.5">
			
 
				+                <div className="w-9 h-9 rounded-full flex items-center justify-center" style={{ background: "rgba(255,255,255,0.15)" }}>
			
 
				+                  <Sparkles className="w-4.5 h-4.5 text-white" />
			
 
				+                </div>
			
 
				+                <div>
			
 
				+                  <div className="text-sm font-semibold text-white" style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                    Ellie
			
 
				+                  </div>
			
 
				+                  <div className="flex items-center gap-1">
			
 
				+                    <span className="w-1.5 h-1.5 rounded-full bg-green-400" />
			
 
				+                    <span className="text-[10px] text-green-200">Always happy to help</span>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+              <div className="flex items-center gap-1">
			
 
				+                <span className="text-[9px] px-2 py-0.5 rounded-full font-medium" style={{ background: "rgba(255,255,255,0.15)", color: "#fff" }}>
			
 
				+                  TEST MODE
			
 
				+                </span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Messages area */}
			
 
				+            <div className="flex-1 overflow-y-auto p-3 space-y-3">
			
 
				+              {!sessionId ? (
			
 
				+                <div className="flex flex-col items-center justify-center h-full text-center">
			
 
				+                  <div className="w-14 h-14 rounded-full flex items-center justify-center mb-3" style={{ background: "#14532D14" }}>
			
 
				+                    <MessageCircle className="w-7 h-7" style={{ color: "#14532D" }} />
			
 
				+                  </div>
			
 
				+                  <p className="text-sm font-medium" style={{ color: "#292524" }}>Ready to test</p>
			
 
				+                  <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>Click "Start Test" to begin a chatbot session</p>
			
 
				+                </div>
			
 
				+              ) : (
			
 
				+                <>
			
 
				+                  {/* Greeting with options */}
			
 
				+                  {showGreeting && messages.length === 0 && (
			
 
				+                    <div className="space-y-3">
			
 
				+                      <div className="flex gap-2">
			
 
				+                        <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1" style={{ background: "#14532D", color: "#fff" }}>
			
 
				+                          <Sparkles className="w-3 h-3" />
			
 
				+                        </div>
			
 
				+                        <div className="px-3 py-2 rounded-xl text-[13px] leading-relaxed" style={{ background: "#f5f0e8", color: "#292524", borderBottomLeftRadius: "4px" }}>
			
 
				+                          <span role="img" aria-label="wave">👋</span> What can we help you with today?
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div className="flex flex-wrap gap-2 justify-center px-4">
			
 
				+                        {GREETING_OPTIONS.map(opt => (
			
 
				+                          <button
			
 
				+                            key={opt.id}
			
 
				+                            onClick={() => handleOptionClick(opt.id)}
			
 
				+                            className="px-4 py-2 rounded-full text-[12px] font-medium transition-all hover:shadow-md"
			
 
				+                            style={{
			
 
				+                              background: "#fff",
			
 
				+                              color: "#0369a1",
			
 
				+                              border: "1.5px solid #0369a130",
			
 
				+                            }}
			
 
				+                          >
			
 
				+                            {opt.label}
			
 
				+                          </button>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* Message list */}
			
 
				+                  {messages.map((msg) => {
			
 
				+                    const isVisitor = msg.sender === "visitor";
			
 
				+                    const isBot = msg.sender === "bot";
			
 
				+                    return (
			
 
				+                      <div key={msg.id} className={`flex gap-2 ${isVisitor ? "justify-end" : "justify-start"}`}>
			
 
				+                        {!isVisitor && (
			
 
				+                          <div
			
 
				+                            className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1"
			
 
				+                            style={{ background: isBot ? "#14532D" : "#C2410C", color: "#fff" }}
			
 
				+                          >
			
 
				+                            {isBot ? <Sparkles className="w-3 h-3" /> : <Headphones className="w-3 h-3" />}
			
 
				+                          </div>
			
 
				+                        )}
			
 
				+                        <div
			
 
				+                          className="max-w-[80%] px-3 py-2 rounded-xl text-[13px] leading-relaxed"
			
 
				+                          style={{
			
 
				+                            background: isVisitor ? "#14532D" : "#f5f0e8",
			
 
				+                            color: isVisitor ? "#fff" : "#292524",
			
 
				+                            fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                            borderBottomRightRadius: isVisitor ? "4px" : undefined,
			
 
				+                            borderBottomLeftRadius: !isVisitor ? "4px" : undefined,
			
 
				+                          }}
			
 
				+                        >
			
 
				+                          {isBot || msg.sender === "agent" ? (
			
 
				+                            <div className="prose prose-sm max-w-none" style={{ color: "inherit" }}>
			
 
				+                              <Streamdown>{msg.content}</Streamdown>
			
 
				+                            </div>
			
 
				+                          ) : (
			
 
				+                            msg.content
			
 
				+                          )}
			
 
				+                        </div>
			
 
				+                        {isVisitor && (
			
 
				+                          <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0 mt-1" style={{ background: "#78716C20", color: "#78716C" }}>
			
 
				+                            <User className="w-3 h-3" />
			
 
				+                          </div>
			
 
				+                        )}
			
 
				+                      </div>
			
 
				+                    );
			
 
				+                  })}
			
 
				+
			
 
				+                  {/* Typing indicator */}
			
 
				+                  {isTyping && (
			
 
				+                    <div className="flex gap-2 items-start">
			
 
				+                      <div className="w-6 h-6 rounded-full flex items-center justify-center shrink-0" style={{ background: "#14532D", color: "#fff" }}>
			
 
				+                        <Sparkles className="w-3 h-3" />
			
 
				+                      </div>
			
 
				+                      <div className="px-3 py-2 rounded-xl" style={{ background: "#f5f0e8" }}>
			
 
				+                        <div className="flex gap-1">
			
 
				+                          <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "0ms" }} />
			
 
				+                          <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "150ms" }} />
			
 
				+                          <span className="w-1.5 h-1.5 rounded-full animate-bounce" style={{ background: "#a8a29e", animationDelay: "300ms" }} />
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* Greeting options after messages if still in greeting state */}
			
 
				+                  {showGreeting && messages.length > 0 && (
			
 
				+                    <div className="flex flex-wrap gap-2 justify-center px-4">
			
 
				+                      {GREETING_OPTIONS.map(opt => (
			
 
				+                        <button
			
 
				+                          key={opt.id}
			
 
				+                          onClick={() => handleOptionClick(opt.id)}
			
 
				+                          className="px-4 py-2 rounded-full text-[12px] font-medium transition-all hover:shadow-md"
			
 
				+                          style={{ background: "#fff", color: "#0369a1", border: "1.5px solid #0369a130" }}
			
 
				+                        >
			
 
				+                          {opt.label}
			
 
				+                        </button>
			
 
				+                      ))}
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+                </>
			
 
				+              )}
			
 
				+              <div ref={messagesEndRef} />
			
 
				+            </div>
			
 
				+
			
 
				+            {/* Input area */}
			
 
				+            <div className="p-3 border-t" style={{ borderColor: "#e7e0d5" }}>
			
 
				+              {showGreeting && sessionId && messages.length === 0 ? (
			
 
				+                <p className="text-center text-[11px] py-1" style={{ color: "#a8a29e" }}>
			
 
				+                  Hit the buttons to respond
			
 
				+                </p>
			
 
				+              ) : (
			
 
				+                <div className="flex gap-2">
			
 
				+                  <input
			
 
				+                    type="text"
			
 
				+                    value={inputText}
			
 
				+                    onChange={(e) => setInputText(e.target.value)}
			
 
				+                    onKeyDown={handleKeyDown}
			
 
				+                    placeholder="Type your message..."
			
 
				+                    className="flex-1 px-3 py-2 rounded-xl text-sm border"
			
 
				+                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif", background: "#fff" }}
			
 
				+                    disabled={isTyping || !sessionId}
			
 
				+                  />
			
 
				+                  <button
			
 
				+                    onClick={handleSend}
			
 
				+                    disabled={!inputText.trim() || isTyping || !sessionId}
			
 
				+                    className="w-9 h-9 rounded-xl flex items-center justify-center transition-all disabled:opacity-40"
			
 
				+                    style={{ background: "#0369a1", color: "#fff" }}
			
 
				+                  >
			
 
				+                    <Send className="w-4 h-4" />
			
 
				+                  </button>
			
 
				+                </div>
			
 
				+              )}
			
 
				+              <div className="text-center mt-2">
			
 
				+                <span className="text-[10px]" style={{ color: "#d6d3d1" }}>Powered by Ellie · Homelegance AI</span>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/Register.tsx
+++ b/client/src/pages/Register.tsx
@@ -0,0 +1,323 @@
 
				+import { useState } from "react";
			
 
				+import { useLocation } from "wouter";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import {
			
 
				+  Card,
			
 
				+  CardContent,
			
 
				+  CardDescription,
			
 
				+  CardFooter,
			
 
				+  CardHeader,
			
 
				+  CardTitle,
			
 
				+} from "@/components/ui/card";
			
 
				+import {
			
 
				+  Bot,
			
 
				+  Eye,
			
 
				+  EyeOff,
			
 
				+  Loader2,
			
 
				+  Mail,
			
 
				+  Lock,
			
 
				+  User,
			
 
				+  AlertCircle,
			
 
				+  ArrowLeft,
			
 
				+  CheckCircle2,
			
 
				+} from "lucide-react";
			
 
				+import { Link } from "wouter";
			
 
				+
			
 
				+export default function Register() {
			
 
				+  const [, navigate] = useLocation();
			
 
				+  const { isAuthenticated, loading: authLoading } = useAuth();
			
 
				+  const [name, setName] = useState("");
			
 
				+  const [email, setEmail] = useState("");
			
 
				+  const [password, setPassword] = useState("");
			
 
				+  const [confirmPassword, setConfirmPassword] = useState("");
			
 
				+  const [showPassword, setShowPassword] = useState(false);
			
 
				+  const [error, setError] = useState("");
			
 
				+
			
 
				+  const registerMutation = trpc.auth.register.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      window.location.href = "/dashboard";
			
 
				+    },
			
 
				+    onError: (err) => {
			
 
				+      setError(err.message || "Registration failed");
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  // Redirect if already logged in
			
 
				+  if (!authLoading && isAuthenticated) {
			
 
				+    window.location.href = "/dashboard";
			
 
				+    return null;
			
 
				+  }
			
 
				+
			
 
				+  const passwordChecks = [
			
 
				+    { label: "At least 8 characters", met: password.length >= 8 },
			
 
				+    { label: "Contains a number", met: /\d/.test(password) },
			
 
				+    { label: "Contains uppercase letter", met: /[A-Z]/.test(password) },
			
 
				+  ];
			
 
				+
			
 
				+  const handleSubmit = (e: React.FormEvent) => {
			
 
				+    e.preventDefault();
			
 
				+    setError("");
			
 
				+
			
 
				+    if (!name || !email || !password || !confirmPassword) {
			
 
				+      setError("Please fill in all fields");
			
 
				+      return;
			
 
				+    }
			
 
				+    if (password !== confirmPassword) {
			
 
				+      setError("Passwords do not match");
			
 
				+      return;
			
 
				+    }
			
 
				+    if (password.length < 8) {
			
 
				+      setError("Password must be at least 8 characters");
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    registerMutation.mutate({ email, password, name });
			
 
				+  };
			
 
				+
			
 
				+  const isLoading = registerMutation.isPending;
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="min-h-screen flex items-center justify-center px-4 py-12 relative"
			
 
				+      style={{ background: "linear-gradient(135deg, #FFFBEB 0%, #f5f0e8 50%, #e8e0d4 100%)" }}
			
 
				+    >
			
 
				+      {/* Decorative elements */}
			
 
				+      <div className="absolute top-0 left-0 w-full h-1" style={{ background: "#14532D" }} />
			
 
				+      <div
			
 
				+        className="absolute top-20 left-20 w-64 h-64 rounded-full opacity-10"
			
 
				+        style={{ background: "#C2410C", filter: "blur(80px)" }}
			
 
				+      />
			
 
				+      <div
			
 
				+        className="absolute bottom-20 right-20 w-48 h-48 rounded-full opacity-10"
			
 
				+        style={{ background: "#14532D", filter: "blur(60px)" }}
			
 
				+      />
			
 
				+
			
 
				+      <div className="w-full max-w-md relative z-10">
			
 
				+        {/* Back to home */}
			
 
				+        <Link
			
 
				+          href="/"
			
 
				+          className="inline-flex items-center gap-1.5 text-sm mb-6 transition-colors hover:opacity-80"
			
 
				+          style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          <ArrowLeft className="w-4 h-4" />
			
 
				+          Back to home
			
 
				+        </Link>
			
 
				+
			
 
				+        <Card
			
 
				+          className="border-0 shadow-xl"
			
 
				+          style={{ background: "#fff", boxShadow: "0 20px 60px rgba(120, 113, 108, 0.12)" }}
			
 
				+        >
			
 
				+          <CardHeader className="text-center pb-2">
			
 
				+            <div className="flex justify-center mb-4">
			
 
				+              <div
			
 
				+                className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                style={{
			
 
				+                  background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                  boxShadow: "0 4px 16px rgba(20, 83, 45, 0.3)",
			
 
				+                }}
			
 
				+              >
			
 
				+                <Bot className="w-7 h-7 text-white" />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+            <CardTitle
			
 
				+              className="text-2xl"
			
 
				+              style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+            >
			
 
				+              Create Account
			
 
				+            </CardTitle>
			
 
				+            <CardDescription
			
 
				+              className="text-sm mt-1"
			
 
				+              style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+            >
			
 
				+              Join the Homelegance team to manage the chatbot
			
 
				+            </CardDescription>
			
 
				+          </CardHeader>
			
 
				+
			
 
				+          <CardContent className="pt-4">
			
 
				+            <form onSubmit={handleSubmit} className="space-y-4">
			
 
				+              {error && (
			
 
				+                <div
			
 
				+                  className="flex items-center gap-2 p-3 rounded-lg text-sm"
			
 
				+                  style={{
			
 
				+                    background: "#FEF2F2",
			
 
				+                    color: "#DC2626",
			
 
				+                    border: "1px solid #FECACA",
			
 
				+                    fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  }}
			
 
				+                >
			
 
				+                  <AlertCircle className="w-4 h-4 shrink-0" />
			
 
				+                  {error}
			
 
				+                </div>
			
 
				+              )}
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <Label
			
 
				+                  htmlFor="name"
			
 
				+                  className="text-sm font-medium"
			
 
				+                  style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                >
			
 
				+                  Full Name
			
 
				+                </Label>
			
 
				+                <div className="relative">
			
 
				+                  <User className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="name"
			
 
				+                    type="text"
			
 
				+                    placeholder="John Smith"
			
 
				+                    value={name}
			
 
				+                    onChange={(e) => setName(e.target.value)}
			
 
				+                    className="pl-10 h-11"
			
 
				+                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="name"
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <Label
			
 
				+                  htmlFor="email"
			
 
				+                  className="text-sm font-medium"
			
 
				+                  style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                >
			
 
				+                  Email Address
			
 
				+                </Label>
			
 
				+                <div className="relative">
			
 
				+                  <Mail className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="email"
			
 
				+                    type="email"
			
 
				+                    placeholder="you@company.com"
			
 
				+                    value={email}
			
 
				+                    onChange={(e) => setEmail(e.target.value)}
			
 
				+                    className="pl-10 h-11"
			
 
				+                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="email"
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <Label
			
 
				+                  htmlFor="password"
			
 
				+                  className="text-sm font-medium"
			
 
				+                  style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                >
			
 
				+                  Password
			
 
				+                </Label>
			
 
				+                <div className="relative">
			
 
				+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="password"
			
 
				+                    type={showPassword ? "text" : "password"}
			
 
				+                    placeholder="Create a strong password"
			
 
				+                    value={password}
			
 
				+                    onChange={(e) => setPassword(e.target.value)}
			
 
				+                    className="pl-10 pr-10 h-11"
			
 
				+                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="new-password"
			
 
				+                  />
			
 
				+                  <button
			
 
				+                    type="button"
			
 
				+                    onClick={() => setShowPassword(!showPassword)}
			
 
				+                    className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
			
 
				+                  >
			
 
				+                    {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
			
 
				+                  </button>
			
 
				+                </div>
			
 
				+
			
 
				+                {/* Password strength indicators */}
			
 
				+                {password.length > 0 && (
			
 
				+                  <div className="space-y-1 mt-2">
			
 
				+                    {passwordChecks.map((check) => (
			
 
				+                      <div
			
 
				+                        key={check.label}
			
 
				+                        className="flex items-center gap-2 text-xs"
			
 
				+                        style={{
			
 
				+                          color: check.met ? "#16a34a" : "#a8a29e",
			
 
				+                          fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                        }}
			
 
				+                      >
			
 
				+                        <CheckCircle2
			
 
				+                          className="w-3.5 h-3.5"
			
 
				+                          style={{ opacity: check.met ? 1 : 0.4 }}
			
 
				+                        />
			
 
				+                        {check.label}
			
 
				+                      </div>
			
 
				+                    ))}
			
 
				+                  </div>
			
 
				+                )}
			
 
				+              </div>
			
 
				+
			
 
				+              <div className="space-y-2">
			
 
				+                <Label
			
 
				+                  htmlFor="confirmPassword"
			
 
				+                  className="text-sm font-medium"
			
 
				+                  style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                >
			
 
				+                  Confirm Password
			
 
				+                </Label>
			
 
				+                <div className="relative">
			
 
				+                  <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                  <Input
			
 
				+                    id="confirmPassword"
			
 
				+                    type="password"
			
 
				+                    placeholder="Confirm your password"
			
 
				+                    value={confirmPassword}
			
 
				+                    onChange={(e) => setConfirmPassword(e.target.value)}
			
 
				+                    className="pl-10 h-11"
			
 
				+                    style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    disabled={isLoading}
			
 
				+                    autoComplete="new-password"
			
 
				+                  />
			
 
				+                </div>
			
 
				+              </div>
			
 
				+
			
 
				+              <Button
			
 
				+                type="submit"
			
 
				+                className="w-full h-11 text-sm font-semibold"
			
 
				+                style={{
			
 
				+                  background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                  fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                  boxShadow: "0 2px 8px rgba(20, 83, 45, 0.25)",
			
 
				+                }}
			
 
				+                disabled={isLoading}
			
 
				+              >
			
 
				+                {isLoading ? (
			
 
				+                  <>
			
 
				+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
			
 
				+                    Creating account...
			
 
				+                  </>
			
 
				+                ) : (
			
 
				+                  "Create Account"
			
 
				+                )}
			
 
				+              </Button>
			
 
				+            </form>
			
 
				+          </CardContent>
			
 
				+
			
 
				+          <CardFooter className="justify-center pb-6">
			
 
				+            <p
			
 
				+              className="text-sm"
			
 
				+              style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+            >
			
 
				+              Already have an account?{" "}
			
 
				+              <Link
			
 
				+                href="/login"
			
 
				+                className="font-semibold transition-colors hover:opacity-80"
			
 
				+                style={{ color: "#14532D" }}
			
 
				+              >
			
 
				+                Sign in
			
 
				+              </Link>
			
 
				+            </p>
			
 
				+          </CardFooter>
			
 
				+        </Card>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/ResetPassword.tsx
+++ b/client/src/pages/ResetPassword.tsx
@@ -0,0 +1,362 @@
 
				+import { useState } from "react";
			
 
				+import { useParams } from "wouter";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Input } from "@/components/ui/input";
			
 
				+import { Label } from "@/components/ui/label";
			
 
				+import {
			
 
				+  Card,
			
 
				+  CardContent,
			
 
				+  CardDescription,
			
 
				+  CardHeader,
			
 
				+  CardTitle,
			
 
				+} from "@/components/ui/card";
			
 
				+import {
			
 
				+  Loader2,
			
 
				+  Lock,
			
 
				+  Eye,
			
 
				+  EyeOff,
			
 
				+  AlertCircle,
			
 
				+  ArrowLeft,
			
 
				+  CheckCircle2,
			
 
				+  ShieldAlert,
			
 
				+} from "lucide-react";
			
 
				+import { Link } from "wouter";
			
 
				+
			
 
				+export default function ResetPassword() {
			
 
				+  const params = useParams<{ token: string }>();
			
 
				+  const token = params.token || "";
			
 
				+
			
 
				+  const [password, setPassword] = useState("");
			
 
				+  const [confirmPassword, setConfirmPassword] = useState("");
			
 
				+  const [showPassword, setShowPassword] = useState(false);
			
 
				+  const [error, setError] = useState("");
			
 
				+  const [success, setSuccess] = useState(false);
			
 
				+
			
 
				+  // Validate the token
			
 
				+  const validateQuery = trpc.auth.validateResetToken.useQuery(
			
 
				+    { token },
			
 
				+    { enabled: !!token, retry: false }
			
 
				+  );
			
 
				+
			
 
				+  const resetMutation = trpc.auth.resetPassword.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      setSuccess(true);
			
 
				+    },
			
 
				+    onError: (err) => {
			
 
				+      setError(err.message || "Failed to reset password");
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const passwordChecks = [
			
 
				+    { label: "At least 8 characters", met: password.length >= 8 },
			
 
				+    { label: "Contains a number", met: /\d/.test(password) },
			
 
				+    { label: "Contains uppercase letter", met: /[A-Z]/.test(password) },
			
 
				+  ];
			
 
				+
			
 
				+  const handleSubmit = (e: React.FormEvent) => {
			
 
				+    e.preventDefault();
			
 
				+    setError("");
			
 
				+
			
 
				+    if (!password || !confirmPassword) {
			
 
				+      setError("Please fill in all fields");
			
 
				+      return;
			
 
				+    }
			
 
				+    if (password !== confirmPassword) {
			
 
				+      setError("Passwords do not match");
			
 
				+      return;
			
 
				+    }
			
 
				+    if (password.length < 8) {
			
 
				+      setError("Password must be at least 8 characters");
			
 
				+      return;
			
 
				+    }
			
 
				+
			
 
				+    resetMutation.mutate({ token, newPassword: password });
			
 
				+  };
			
 
				+
			
 
				+  const isLoading = resetMutation.isPending;
			
 
				+  const isValidating = validateQuery.isLoading;
			
 
				+  const isValid = validateQuery.data?.valid;
			
 
				+  const validationReason = validateQuery.data && !validateQuery.data.valid
			
 
				+    ? validateQuery.data.reason
			
 
				+    : null;
			
 
				+
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="min-h-screen flex items-center justify-center px-4 py-12 relative"
			
 
				+      style={{ background: "linear-gradient(135deg, #FFFBEB 0%, #f5f0e8 50%, #e8e0d4 100%)" }}
			
 
				+    >
			
 
				+      <div className="absolute top-0 left-0 w-full h-1" style={{ background: "#14532D" }} />
			
 
				+
			
 
				+      <div className="w-full max-w-md relative z-10">
			
 
				+        <Link
			
 
				+          href="/login"
			
 
				+          className="inline-flex items-center gap-1.5 text-sm mb-6 transition-colors hover:opacity-80"
			
 
				+          style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          <ArrowLeft className="w-4 h-4" />
			
 
				+          Back to sign in
			
 
				+        </Link>
			
 
				+
			
 
				+        <Card
			
 
				+          className="border-0 shadow-xl"
			
 
				+          style={{ background: "#fff", boxShadow: "0 20px 60px rgba(120, 113, 108, 0.12)" }}
			
 
				+        >
			
 
				+          {/* Loading state */}
			
 
				+          {isValidating && (
			
 
				+            <>
			
 
				+              <CardHeader className="text-center pb-2">
			
 
				+                <div className="flex justify-center mb-4">
			
 
				+                  <Loader2 className="w-10 h-10 animate-spin" style={{ color: "#14532D" }} />
			
 
				+                </div>
			
 
				+                <CardTitle
			
 
				+                  className="text-xl"
			
 
				+                  style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+                >
			
 
				+                  Validating Reset Link...
			
 
				+                </CardTitle>
			
 
				+              </CardHeader>
			
 
				+            </>
			
 
				+          )}
			
 
				+
			
 
				+          {/* Invalid token */}
			
 
				+          {!isValidating && !isValid && !success && (
			
 
				+            <>
			
 
				+              <CardHeader className="text-center pb-2">
			
 
				+                <div className="flex justify-center mb-4">
			
 
				+                  <div
			
 
				+                    className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #DC2626 0%, #EF4444 100%)",
			
 
				+                      boxShadow: "0 4px 16px rgba(220, 38, 38, 0.3)",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <ShieldAlert className="w-7 h-7 text-white" />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <CardTitle
			
 
				+                  className="text-2xl"
			
 
				+                  style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+                >
			
 
				+                  Invalid Reset Link
			
 
				+                </CardTitle>
			
 
				+                <CardDescription
			
 
				+                  className="text-sm mt-1"
			
 
				+                  style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+                >
			
 
				+                  {validationReason || "This password reset link is not valid"}
			
 
				+                </CardDescription>
			
 
				+              </CardHeader>
			
 
				+              <CardContent className="pt-4 text-center">
			
 
				+                <Link href="/forgot-password">
			
 
				+                  <Button
			
 
				+                    className="text-sm font-semibold"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #C2410C 0%, #ea580c 100%)",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    Request a New Reset Link
			
 
				+                  </Button>
			
 
				+                </Link>
			
 
				+              </CardContent>
			
 
				+            </>
			
 
				+          )}
			
 
				+
			
 
				+          {/* Success state */}
			
 
				+          {success && (
			
 
				+            <>
			
 
				+              <CardHeader className="text-center pb-2">
			
 
				+                <div className="flex justify-center mb-4">
			
 
				+                  <div
			
 
				+                    className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #16a34a 0%, #15803d 100%)",
			
 
				+                      boxShadow: "0 4px 16px rgba(22, 163, 74, 0.3)",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <CheckCircle2 className="w-7 h-7 text-white" />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <CardTitle
			
 
				+                  className="text-2xl"
			
 
				+                  style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+                >
			
 
				+                  Password Reset!
			
 
				+                </CardTitle>
			
 
				+                <CardDescription
			
 
				+                  className="text-sm mt-1"
			
 
				+                  style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+                >
			
 
				+                  Your password has been successfully updated
			
 
				+                </CardDescription>
			
 
				+              </CardHeader>
			
 
				+              <CardContent className="pt-4 text-center">
			
 
				+                <Link href="/login">
			
 
				+                  <Button
			
 
				+                    className="text-sm font-semibold"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                      boxShadow: "0 2px 8px rgba(20, 83, 45, 0.25)",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    Sign In with New Password
			
 
				+                  </Button>
			
 
				+                </Link>
			
 
				+              </CardContent>
			
 
				+            </>
			
 
				+          )}
			
 
				+
			
 
				+          {/* Reset form */}
			
 
				+          {!isValidating && isValid && !success && (
			
 
				+            <>
			
 
				+              <CardHeader className="text-center pb-2">
			
 
				+                <div className="flex justify-center mb-4">
			
 
				+                  <div
			
 
				+                    className="w-14 h-14 rounded-2xl flex items-center justify-center"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                      boxShadow: "0 4px 16px rgba(20, 83, 45, 0.3)",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <Lock className="w-7 h-7 text-white" />
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+                <CardTitle
			
 
				+                  className="text-2xl"
			
 
				+                  style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}
			
 
				+                >
			
 
				+                  Set New Password
			
 
				+                </CardTitle>
			
 
				+                <CardDescription
			
 
				+                  className="text-sm mt-1"
			
 
				+                  style={{ fontFamily: "'Source Sans 3', sans-serif", color: "#78716C" }}
			
 
				+                >
			
 
				+                  {validateQuery.data?.valid && "email" in validateQuery.data
			
 
				+                    ? `Enter a new password for ${validateQuery.data.email}`
			
 
				+                    : "Choose a strong password for your account"}
			
 
				+                </CardDescription>
			
 
				+              </CardHeader>
			
 
				+
			
 
				+              <CardContent className="pt-4">
			
 
				+                <form onSubmit={handleSubmit} className="space-y-4">
			
 
				+                  {error && (
			
 
				+                    <div
			
 
				+                      className="flex items-center gap-2 p-3 rounded-lg text-sm"
			
 
				+                      style={{
			
 
				+                        background: "#FEF2F2",
			
 
				+                        color: "#DC2626",
			
 
				+                        border: "1px solid #FECACA",
			
 
				+                        fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                      }}
			
 
				+                    >
			
 
				+                      <AlertCircle className="w-4 h-4 shrink-0" />
			
 
				+                      {error}
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  <div className="space-y-2">
			
 
				+                    <Label
			
 
				+                      htmlFor="password"
			
 
				+                      className="text-sm font-medium"
			
 
				+                      style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    >
			
 
				+                      New Password
			
 
				+                    </Label>
			
 
				+                    <div className="relative">
			
 
				+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                      <Input
			
 
				+                        id="password"
			
 
				+                        type={showPassword ? "text" : "password"}
			
 
				+                        placeholder="Enter new password"
			
 
				+                        value={password}
			
 
				+                        onChange={(e) => setPassword(e.target.value)}
			
 
				+                        className="pl-10 pr-10 h-11"
			
 
				+                        style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                        disabled={isLoading}
			
 
				+                        autoComplete="new-password"
			
 
				+                      />
			
 
				+                      <button
			
 
				+                        type="button"
			
 
				+                        onClick={() => setShowPassword(!showPassword)}
			
 
				+                        className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-colors"
			
 
				+                      >
			
 
				+                        {showPassword ? <EyeOff className="w-4 h-4" /> : <Eye className="w-4 h-4" />}
			
 
				+                      </button>
			
 
				+                    </div>
			
 
				+
			
 
				+                    {password.length > 0 && (
			
 
				+                      <div className="space-y-1 mt-2">
			
 
				+                        {passwordChecks.map((check) => (
			
 
				+                          <div
			
 
				+                            key={check.label}
			
 
				+                            className="flex items-center gap-2 text-xs"
			
 
				+                            style={{
			
 
				+                              color: check.met ? "#16a34a" : "#a8a29e",
			
 
				+                              fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                            }}
			
 
				+                          >
			
 
				+                            <CheckCircle2
			
 
				+                              className="w-3.5 h-3.5"
			
 
				+                              style={{ opacity: check.met ? 1 : 0.4 }}
			
 
				+                            />
			
 
				+                            {check.label}
			
 
				+                          </div>
			
 
				+                        ))}
			
 
				+                      </div>
			
 
				+                    )}
			
 
				+                  </div>
			
 
				+
			
 
				+                  <div className="space-y-2">
			
 
				+                    <Label
			
 
				+                      htmlFor="confirmPassword"
			
 
				+                      className="text-sm font-medium"
			
 
				+                      style={{ color: "#57534e", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                    >
			
 
				+                      Confirm New Password
			
 
				+                    </Label>
			
 
				+                    <div className="relative">
			
 
				+                      <Lock className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4 text-muted-foreground" />
			
 
				+                      <Input
			
 
				+                        id="confirmPassword"
			
 
				+                        type="password"
			
 
				+                        placeholder="Confirm new password"
			
 
				+                        value={confirmPassword}
			
 
				+                        onChange={(e) => setConfirmPassword(e.target.value)}
			
 
				+                        className="pl-10 h-11"
			
 
				+                        style={{ borderColor: "#e7e0d5", fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+                        disabled={isLoading}
			
 
				+                        autoComplete="new-password"
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+
			
 
				+                  <Button
			
 
				+                    type="submit"
			
 
				+                    className="w-full h-11 text-sm font-semibold"
			
 
				+                    style={{
			
 
				+                      background: "linear-gradient(135deg, #14532D 0%, #166534 100%)",
			
 
				+                      fontFamily: "'Source Sans 3', sans-serif",
			
 
				+                      boxShadow: "0 2px 8px rgba(20, 83, 45, 0.25)",
			
 
				+                    }}
			
 
				+                    disabled={isLoading}
			
 
				+                  >
			
 
				+                    {isLoading ? (
			
 
				+                      <>
			
 
				+                        <Loader2 className="mr-2 h-4 w-4 animate-spin" />
			
 
				+                        Resetting password...
			
 
				+                      </>
			
 
				+                    ) : (
			
 
				+                      "Reset Password"
			
 
				+                    )}
			
 
				+                  </Button>
			
 
				+                </form>
			
 
				+              </CardContent>
			
 
				+            </>
			
 
				+          )}
			
 
				+        </Card>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/UserManagement.tsx
+++ b/client/src/pages/UserManagement.tsx
@@ -0,0 +1,978 @@
 
				+/**
			
 
				+ * User Management — Admin module for managing users, invitations, and activity
			
 
				+ * Design: Warm Showroom palette, tabbed layout
			
 
				+ */
			
 
				+import { useState, useMemo, useCallback } from "react";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { Badge } from "@/components/ui/badge";
			
 
				+import {
			
 
				+  Select,
			
 
				+  SelectContent,
			
 
				+  SelectItem,
			
 
				+  SelectTrigger,
			
 
				+  SelectValue,
			
 
				+} from "@/components/ui/select";
			
 
				+import {
			
 
				+  Dialog,
			
 
				+  DialogContent,
			
 
				+  DialogDescription,
			
 
				+  DialogFooter,
			
 
				+  DialogHeader,
			
 
				+  DialogTitle,
			
 
				+} from "@/components/ui/dialog";
			
 
				+import { ScrollArea } from "@/components/ui/scroll-area";
			
 
				+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
			
 
				+import { toast } from "sonner";
			
 
				+import {
			
 
				+  Users, Shield, Headphones, User, Search, Trash2,
			
 
				+  CheckCircle2, AlertTriangle, Crown, Mail, Send,
			
 
				+  Clock, XCircle, RefreshCw, Download, History,
			
 
				+  MoreHorizontal, UserPlus, CheckSquare, Square,
			
 
				+  ArrowUpDown, Eye, Copy, ExternalLink,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+/* ─── Role config ─── */
			
 
				+const ROLE_CONFIG: Record<string, {
			
 
				+  icon: React.ReactNode;
			
 
				+  color: string;
			
 
				+  bg: string;
			
 
				+  label: string;
			
 
				+  description: string;
			
 
				+}> = {
			
 
				+  admin: {
			
 
				+    icon: <Crown className="w-3.5 h-3.5" />,
			
 
				+    color: "#14532D",
			
 
				+    bg: "#14532D18",
			
 
				+    label: "Admin",
			
 
				+    description: "Full access: conversations, workflow designer, user management",
			
 
				+  },
			
 
				+  agent: {
			
 
				+    icon: <Headphones className="w-3.5 h-3.5" />,
			
 
				+    color: "#0369a1",
			
 
				+    bg: "#0369a118",
			
 
				+    label: "Agent",
			
 
				+    description: "Can view and reply to conversations in the agent dashboard",
			
 
				+  },
			
 
				+  user: {
			
 
				+    icon: <User className="w-3.5 h-3.5" />,
			
 
				+    color: "#78716C",
			
 
				+    bg: "#78716C18",
			
 
				+    label: "User",
			
 
				+    description: "Basic access only, no dashboard or workflow access",
			
 
				+  },
			
 
				+};
			
 
				+
			
 
				+const INVITE_STATUS_CONFIG: Record<string, { color: string; bg: string; icon: React.ReactNode; label: string }> = {
			
 
				+  pending: { color: "#d97706", bg: "#d9770618", icon: <Clock className="w-3 h-3" />, label: "Pending" },
			
 
				+  accepted: { color: "#16a34a", bg: "#16a34a18", icon: <CheckCircle2 className="w-3 h-3" />, label: "Accepted" },
			
 
				+  expired: { color: "#78716C", bg: "#78716C18", icon: <Clock className="w-3 h-3" />, label: "Expired" },
			
 
				+  revoked: { color: "#dc2626", bg: "#dc262618", icon: <XCircle className="w-3 h-3" />, label: "Revoked" },
			
 
				+};
			
 
				+
			
 
				+const AUDIT_ACTION_LABELS: Record<string, { label: string; color: string }> = {
			
 
				+  role_change: { label: "Role Changed", color: "#0369a1" },
			
 
				+  user_deleted: { label: "User Deleted", color: "#dc2626" },
			
 
				+  bulk_role_change: { label: "Bulk Role Change", color: "#7c3aed" },
			
 
				+  bulk_delete: { label: "Bulk Delete", color: "#dc2626" },
			
 
				+  invitation_sent: { label: "Invitation Sent", color: "#16a34a" },
			
 
				+  invitation_resent: { label: "Invitation Resent", color: "#d97706" },
			
 
				+  invitation_revoked: { label: "Invitation Revoked", color: "#dc2626" },
			
 
				+  invitation_accepted: { label: "Invitation Accepted", color: "#16a34a" },
			
 
				+};
			
 
				+
			
 
				+/* ─── Role Badge ─── */
			
 
				+function RoleBadge({ role }: { role: string }) {
			
 
				+  const config = ROLE_CONFIG[role] || ROLE_CONFIG.user;
			
 
				+  return (
			
 
				+    <span
			
 
				+      className="inline-flex items-center gap-1.5 text-xs font-medium px-2.5 py-1 rounded-full"
			
 
				+      style={{ background: config.bg, color: config.color }}
			
 
				+    >
			
 
				+      {config.icon}
			
 
				+      {config.label}
			
 
				+    </span>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+function InviteStatusBadge({ status }: { status: string }) {
			
 
				+  const config = INVITE_STATUS_CONFIG[status] || INVITE_STATUS_CONFIG.pending;
			
 
				+  return (
			
 
				+    <span
			
 
				+      className="inline-flex items-center gap-1 text-xs font-medium px-2.5 py-1 rounded-full"
			
 
				+      style={{ background: config.bg, color: config.color }}
			
 
				+    >
			
 
				+      {config.icon}
			
 
				+      {config.label}
			
 
				+    </span>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Stats Cards ─── */
			
 
				+function RoleStats({ users, invitations }: { users: any[]; invitations: any[] }) {
			
 
				+  const counts = useMemo(() => {
			
 
				+    const c = { total: users.length, admin: 0, agent: 0, user: 0, pendingInvites: 0 };
			
 
				+    users.forEach(u => {
			
 
				+      if (u.role in c) c[u.role as keyof typeof c]++;
			
 
				+    });
			
 
				+    c.pendingInvites = invitations.filter(i => i.status === "pending").length;
			
 
				+    return c;
			
 
				+  }, [users, invitations]);
			
 
				+
			
 
				+  const stats = [
			
 
				+    { label: "Total Users", value: counts.total, icon: <Users className="w-5 h-5" />, iconBg: "#14532D14", iconColor: "#14532D" },
			
 
				+    { label: "Admins", value: counts.admin, icon: <Crown className="w-5 h-5" />, iconBg: "#14532D18", iconColor: "#14532D" },
			
 
				+    { label: "Agents", value: counts.agent, icon: <Headphones className="w-5 h-5" />, iconBg: "#0369a118", iconColor: "#0369a1" },
			
 
				+    { label: "Pending Invites", value: counts.pendingInvites, icon: <Mail className="w-5 h-5" />, iconBg: "#d9770618", iconColor: "#d97706" },
			
 
				+  ];
			
 
				+
			
 
				+  return (
			
 
				+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
			
 
				+      {stats.map(s => (
			
 
				+        <div key={s.label} className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+          <div className="flex items-center gap-3">
			
 
				+            <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: s.iconBg, color: s.iconColor }}>
			
 
				+              {s.icon}
			
 
				+            </div>
			
 
				+            <div>
			
 
				+              <div className="text-2xl font-bold" style={{ color: "#292524", fontFamily: "'Playfair Display', serif" }}>{s.value}</div>
			
 
				+              <div className="text-xs" style={{ color: "#a8a29e", fontFamily: "'Source Sans 3', sans-serif" }}>{s.label}</div>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      ))}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Send Invitation Dialog ─── */
			
 
				+function SendInviteDialog({ open, onOpenChange }: { open: boolean; onOpenChange: (open: boolean) => void }) {
			
 
				+  const [email, setEmail] = useState("");
			
 
				+  const [role, setRole] = useState<string>("agent");
			
 
				+  const [message, setMessage] = useState("");
			
 
				+  const utils = trpc.useUtils();
			
 
				+
			
 
				+  const sendMutation = trpc.invitations.send.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      toast.success("Invitation sent!", {
			
 
				+        description: `Invitation sent to ${data.email} as ${ROLE_CONFIG[data.role]?.label || data.role}.`,
			
 
				+      });
			
 
				+      utils.invitations.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+      setEmail("");
			
 
				+      setRole("agent");
			
 
				+      setMessage("");
			
 
				+      onOpenChange(false);
			
 
				+    },
			
 
				+    onError: (error) => {
			
 
				+      toast.error("Failed to send invitation", { description: error.message });
			
 
				+    },
			
 
				+  });
			
 
				+
			
 
				+  const handleSend = () => {
			
 
				+    if (!email.trim()) { toast.error("Email is required"); return; }
			
 
				+    sendMutation.mutate({ email: email.trim(), role: role as "user" | "agent" | "admin", message: message.trim() || undefined });
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <Dialog open={open} onOpenChange={onOpenChange}>
			
 
				+      <DialogContent style={{ borderColor: "#e7e0d5" }}>
			
 
				+        <DialogHeader>
			
 
				+          <DialogTitle style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+            Send Invitation
			
 
				+          </DialogTitle>
			
 
				+          <DialogDescription style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Invite a new team member to join the Homelegance chatbot system. They will receive a link to accept the invitation.
			
 
				+          </DialogDescription>
			
 
				+        </DialogHeader>
			
 
				+
			
 
				+        <div className="space-y-4 py-2">
			
 
				+          <div>
			
 
				+            <label className="text-sm font-medium block mb-1.5" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Email Address *
			
 
				+            </label>
			
 
				+            <input
			
 
				+              type="email"
			
 
				+              placeholder="colleague@homelegance.com"
			
 
				+              value={email}
			
 
				+              onChange={(e) => setEmail(e.target.value)}
			
 
				+              className="w-full px-3 py-2.5 rounded-xl border text-sm"
			
 
				+              style={{ borderColor: "#e7e0d5", background: "#fff", fontFamily: "'Source Sans 3', sans-serif", color: "#292524" }}
			
 
				+            />
			
 
				+          </div>
			
 
				+
			
 
				+          <div>
			
 
				+            <label className="text-sm font-medium block mb-1.5" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Role
			
 
				+            </label>
			
 
				+            <Select value={role} onValueChange={setRole}>
			
 
				+              <SelectTrigger style={{ borderColor: "#e7e0d5", background: "#fff" }}>
			
 
				+                <SelectValue />
			
 
				+              </SelectTrigger>
			
 
				+              <SelectContent>
			
 
				+                <SelectItem value="admin">
			
 
				+                  <div className="flex items-center gap-2">
			
 
				+                    <Crown className="w-3.5 h-3.5" style={{ color: "#14532D" }} />
			
 
				+                    <span>Admin — Full access</span>
			
 
				+                  </div>
			
 
				+                </SelectItem>
			
 
				+                <SelectItem value="agent">
			
 
				+                  <div className="flex items-center gap-2">
			
 
				+                    <Headphones className="w-3.5 h-3.5" style={{ color: "#0369a1" }} />
			
 
				+                    <span>Agent — Dashboard access</span>
			
 
				+                  </div>
			
 
				+                </SelectItem>
			
 
				+                <SelectItem value="user">
			
 
				+                  <div className="flex items-center gap-2">
			
 
				+                    <User className="w-3.5 h-3.5" style={{ color: "#78716C" }} />
			
 
				+                    <span>User — Basic access</span>
			
 
				+                  </div>
			
 
				+                </SelectItem>
			
 
				+              </SelectContent>
			
 
				+            </Select>
			
 
				+          </div>
			
 
				+
			
 
				+          <div>
			
 
				+            <label className="text-sm font-medium block mb-1.5" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              Personal Message (optional)
			
 
				+            </label>
			
 
				+            <textarea
			
 
				+              placeholder="Welcome to the team! We'd love to have you help manage our chatbot..."
			
 
				+              value={message}
			
 
				+              onChange={(e) => setMessage(e.target.value)}
			
 
				+              rows={3}
			
 
				+              className="w-full px-3 py-2.5 rounded-xl border text-sm resize-none"
			
 
				+              style={{ borderColor: "#e7e0d5", background: "#fff", fontFamily: "'Source Sans 3', sans-serif", color: "#292524" }}
			
 
				+            />
			
 
				+          </div>
			
 
				+
			
 
				+          <div className="p-3 rounded-lg" style={{ background: "#14532D08", border: "1px solid #14532D18" }}>
			
 
				+            <p className="text-xs" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              The invitation link will be valid for <strong>7 days</strong>. The invitee will need to sign in to accept the invitation and receive their assigned role.
			
 
				+            </p>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+
			
 
				+        <DialogFooter>
			
 
				+          <Button variant="outline" onClick={() => onOpenChange(false)} style={{ borderColor: "#e7e0d5" }}>
			
 
				+            Cancel
			
 
				+          </Button>
			
 
				+          <Button
			
 
				+            onClick={handleSend}
			
 
				+            disabled={sendMutation.isPending || !email.trim()}
			
 
				+            className="text-white"
			
 
				+            style={{ background: "#14532D" }}
			
 
				+          >
			
 
				+            {sendMutation.isPending ? (
			
 
				+              <><RefreshCw className="w-4 h-4 animate-spin mr-2" /> Sending...</>
			
 
				+            ) : (
			
 
				+              <><Send className="w-4 h-4 mr-2" /> Send Invitation</>
			
 
				+            )}
			
 
				+          </Button>
			
 
				+        </DialogFooter>
			
 
				+      </DialogContent>
			
 
				+    </Dialog>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Users Tab ─── */
			
 
				+function UsersTab() {
			
 
				+  const { user: currentUser } = useAuth();
			
 
				+  const [searchQuery, setSearchQuery] = useState("");
			
 
				+  const [roleFilter, setRoleFilter] = useState<string>("all");
			
 
				+  const [selectedIds, setSelectedIds] = useState<Set<number>>(new Set());
			
 
				+  const [confirmDialog, setConfirmDialog] = useState<{
			
 
				+    open: boolean; type: "role" | "delete" | "bulkRole" | "bulkDelete";
			
 
				+    userId?: number; userName?: string; currentRole?: string; newRole?: string;
			
 
				+  }>({ open: false, type: "role" });
			
 
				+
			
 
				+  const utils = trpc.useUtils();
			
 
				+  const { data: usersList, isLoading } = trpc.users.list.useQuery();
			
 
				+
			
 
				+  const updateRoleMutation = trpc.users.updateRole.useMutation({
			
 
				+    onSuccess: (data) => {
			
 
				+      toast.success(`Role updated to ${ROLE_CONFIG[data.role]?.label || data.role}`);
			
 
				+      utils.users.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+      setConfirmDialog(prev => ({ ...prev, open: false }));
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Failed to update role", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const deleteMutation = trpc.users.delete.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("User deleted successfully");
			
 
				+      utils.users.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+      setConfirmDialog(prev => ({ ...prev, open: false }));
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Failed to delete user", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const bulkRoleMutation = trpc.users.bulkUpdateRole.useMutation({
			
 
				+    onSuccess: (results) => {
			
 
				+      const successes = results.filter(r => r.success).length;
			
 
				+      toast.success(`${successes} user(s) updated`);
			
 
				+      utils.users.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+      setSelectedIds(new Set());
			
 
				+      setConfirmDialog(prev => ({ ...prev, open: false }));
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Bulk update failed", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const bulkDeleteMutation = trpc.users.bulkDelete.useMutation({
			
 
				+    onSuccess: (results) => {
			
 
				+      const successes = results.filter(r => r.success).length;
			
 
				+      toast.success(`${successes} user(s) deleted`);
			
 
				+      utils.users.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+      setSelectedIds(new Set());
			
 
				+      setConfirmDialog(prev => ({ ...prev, open: false }));
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Bulk delete failed", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const exportCsvQuery = trpc.users.exportCsv.useQuery(undefined, { enabled: false });
			
 
				+
			
 
				+  const filteredUsers = useMemo(() => {
			
 
				+    if (!usersList) return [];
			
 
				+    return usersList.filter((u: any) => {
			
 
				+      const matchesSearch = !searchQuery ||
			
 
				+        u.name?.toLowerCase().includes(searchQuery.toLowerCase()) ||
			
 
				+        u.email?.toLowerCase().includes(searchQuery.toLowerCase());
			
 
				+      const matchesRole = roleFilter === "all" || u.role === roleFilter;
			
 
				+      return matchesSearch && matchesRole;
			
 
				+    });
			
 
				+  }, [usersList, searchQuery, roleFilter]);
			
 
				+
			
 
				+  const toggleSelect = (id: number) => {
			
 
				+    setSelectedIds(prev => {
			
 
				+      const next = new Set(prev);
			
 
				+      if (next.has(id)) next.delete(id); else next.add(id);
			
 
				+      return next;
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  const toggleSelectAll = () => {
			
 
				+    if (selectedIds.size === filteredUsers.filter((u: any) => u.id !== currentUser?.id).length) {
			
 
				+      setSelectedIds(new Set());
			
 
				+    } else {
			
 
				+      setSelectedIds(new Set(filteredUsers.filter((u: any) => u.id !== currentUser?.id).map((u: any) => u.id)));
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const handleExportCsv = async () => {
			
 
				+    const result = await exportCsvQuery.refetch();
			
 
				+    if (result.data) {
			
 
				+      const blob = new Blob([result.data.csv], { type: "text/csv" });
			
 
				+      const url = URL.createObjectURL(blob);
			
 
				+      const a = document.createElement("a");
			
 
				+      a.href = url;
			
 
				+      a.download = `homelegance-users-${new Date().toISOString().split("T")[0]}.csv`;
			
 
				+      a.click();
			
 
				+      URL.revokeObjectURL(url);
			
 
				+      toast.success(`Exported ${result.data.count} users`);
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const confirmAction = () => {
			
 
				+    const d = confirmDialog;
			
 
				+    if (d.type === "role" && d.userId && d.newRole) {
			
 
				+      updateRoleMutation.mutate({ userId: d.userId, role: d.newRole as "user" | "agent" | "admin" });
			
 
				+    } else if (d.type === "delete" && d.userId) {
			
 
				+      deleteMutation.mutate({ userId: d.userId });
			
 
				+    } else if (d.type === "bulkRole" && d.newRole) {
			
 
				+      bulkRoleMutation.mutate({ userIds: Array.from(selectedIds), role: d.newRole as "user" | "agent" | "admin" });
			
 
				+    } else if (d.type === "bulkDelete") {
			
 
				+      bulkDeleteMutation.mutate({ userIds: Array.from(selectedIds) });
			
 
				+    }
			
 
				+  };
			
 
				+
			
 
				+  const isPending = updateRoleMutation.isPending || deleteMutation.isPending || bulkRoleMutation.isPending || bulkDeleteMutation.isPending;
			
 
				+
			
 
				+  return (
			
 
				+    <div className="space-y-4">
			
 
				+      {/* Toolbar */}
			
 
				+      <div className="flex flex-col sm:flex-row gap-3">
			
 
				+        <div className="relative flex-1">
			
 
				+          <Search className="absolute left-3 top-1/2 -translate-y-1/2 w-4 h-4" style={{ color: "#a8a29e" }} />
			
 
				+          <input
			
 
				+            type="text"
			
 
				+            placeholder="Search by name or email..."
			
 
				+            value={searchQuery}
			
 
				+            onChange={(e) => setSearchQuery(e.target.value)}
			
 
				+            className="w-full pl-10 pr-4 py-2.5 rounded-xl border text-sm"
			
 
				+            style={{ borderColor: "#e7e0d5", background: "#fff", fontFamily: "'Source Sans 3', sans-serif", color: "#292524" }}
			
 
				+          />
			
 
				+        </div>
			
 
				+        <Select value={roleFilter} onValueChange={setRoleFilter}>
			
 
				+          <SelectTrigger className="w-full sm:w-40" style={{ borderColor: "#e7e0d5", background: "#fff" }}>
			
 
				+            <SelectValue placeholder="Filter by role" />
			
 
				+          </SelectTrigger>
			
 
				+          <SelectContent>
			
 
				+            <SelectItem value="all">All Roles</SelectItem>
			
 
				+            <SelectItem value="admin">Admin</SelectItem>
			
 
				+            <SelectItem value="agent">Agent</SelectItem>
			
 
				+            <SelectItem value="user">User</SelectItem>
			
 
				+          </SelectContent>
			
 
				+        </Select>
			
 
				+        <Button variant="outline" onClick={handleExportCsv} className="gap-2" style={{ borderColor: "#e7e0d5" }}>
			
 
				+          <Download className="w-4 h-4" /> Export CSV
			
 
				+        </Button>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Bulk Actions Bar */}
			
 
				+      {selectedIds.size > 0 && (
			
 
				+        <div className="flex items-center gap-3 p-3 rounded-xl border" style={{ background: "#14532D08", borderColor: "#14532D30" }}>
			
 
				+          <span className="text-sm font-medium" style={{ color: "#14532D" }}>
			
 
				+            {selectedIds.size} selected
			
 
				+          </span>
			
 
				+          <div className="flex gap-2 ml-auto">
			
 
				+            <Select onValueChange={(role) => setConfirmDialog({ open: true, type: "bulkRole", newRole: role })}>
			
 
				+              <SelectTrigger className="w-40 h-8 text-xs" style={{ borderColor: "#14532D30", background: "#fff" }}>
			
 
				+                <SelectValue placeholder="Change role to..." />
			
 
				+              </SelectTrigger>
			
 
				+              <SelectContent>
			
 
				+                <SelectItem value="admin">Admin</SelectItem>
			
 
				+                <SelectItem value="agent">Agent</SelectItem>
			
 
				+                <SelectItem value="user">User</SelectItem>
			
 
				+              </SelectContent>
			
 
				+            </Select>
			
 
				+            <Button
			
 
				+              variant="outline"
			
 
				+              size="sm"
			
 
				+              className="text-red-600 border-red-200 hover:bg-red-50"
			
 
				+              onClick={() => setConfirmDialog({ open: true, type: "bulkDelete" })}
			
 
				+            >
			
 
				+              <Trash2 className="w-3.5 h-3.5 mr-1" /> Delete
			
 
				+            </Button>
			
 
				+            <Button variant="ghost" size="sm" onClick={() => setSelectedIds(new Set())}>
			
 
				+              Clear
			
 
				+            </Button>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      )}
			
 
				+
			
 
				+      {/* Users Table */}
			
 
				+      <div className="rounded-xl border overflow-hidden" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <ScrollArea className="max-h-[500px]">
			
 
				+          <table className="w-full">
			
 
				+            <thead>
			
 
				+              <tr style={{ background: "#f5f0e8" }}>
			
 
				+                <th className="text-left px-3 py-3 w-10">
			
 
				+                  <button onClick={toggleSelectAll} className="flex items-center justify-center">
			
 
				+                    {selectedIds.size > 0 && selectedIds.size === filteredUsers.filter((u: any) => u.id !== currentUser?.id).length ? (
			
 
				+                      <CheckSquare className="w-4 h-4" style={{ color: "#14532D" }} />
			
 
				+                    ) : (
			
 
				+                      <Square className="w-4 h-4" style={{ color: "#a8a29e" }} />
			
 
				+                    )}
			
 
				+                  </button>
			
 
				+                </th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>User</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Role</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3 hidden md:table-cell" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Joined</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3 hidden md:table-cell" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Last Active</th>
			
 
				+                <th className="text-right text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Actions</th>
			
 
				+              </tr>
			
 
				+            </thead>
			
 
				+            <tbody>
			
 
				+              {isLoading ? (
			
 
				+                <tr>
			
 
				+                  <td colSpan={6} className="text-center py-12">
			
 
				+                    <div className="animate-spin w-6 h-6 border-2 rounded-full mx-auto" style={{ borderColor: "#14532D", borderTopColor: "transparent" }} />
			
 
				+                    <p className="text-sm mt-2" style={{ color: "#a8a29e" }}>Loading users...</p>
			
 
				+                  </td>
			
 
				+                </tr>
			
 
				+              ) : filteredUsers.length === 0 ? (
			
 
				+                <tr>
			
 
				+                  <td colSpan={6} className="text-center py-12">
			
 
				+                    <Users className="w-8 h-8 mx-auto mb-2" style={{ color: "#d6d3d1" }} />
			
 
				+                    <p className="text-sm" style={{ color: "#a8a29e" }}>No users found</p>
			
 
				+                  </td>
			
 
				+                </tr>
			
 
				+              ) : (
			
 
				+                filteredUsers.map((u: any) => {
			
 
				+                  const isSelf = u.id === currentUser?.id;
			
 
				+                  const isSelected = selectedIds.has(u.id);
			
 
				+                  return (
			
 
				+                    <tr key={u.id} className="border-t transition-colors hover:bg-black/[0.02]" style={{ borderColor: "#e7e0d5", background: isSelected ? "#14532D06" : undefined }}>
			
 
				+                      <td className="px-3 py-3">
			
 
				+                        {isSelf ? (
			
 
				+                          <div className="w-4 h-4" />
			
 
				+                        ) : (
			
 
				+                          <button onClick={() => toggleSelect(u.id)} className="flex items-center justify-center">
			
 
				+                            {isSelected ? (
			
 
				+                              <CheckSquare className="w-4 h-4" style={{ color: "#14532D" }} />
			
 
				+                            ) : (
			
 
				+                              <Square className="w-4 h-4" style={{ color: "#d6d3d1" }} />
			
 
				+                            )}
			
 
				+                          </button>
			
 
				+                        )}
			
 
				+                      </td>
			
 
				+                      <td className="px-4 py-3">
			
 
				+                        <div className="flex items-center gap-3">
			
 
				+                          <div
			
 
				+                            className="w-9 h-9 rounded-full flex items-center justify-center shrink-0 text-xs font-medium"
			
 
				+                            style={{ background: ROLE_CONFIG[u.role]?.bg || "#78716C18", color: ROLE_CONFIG[u.role]?.color || "#78716C" }}
			
 
				+                          >
			
 
				+                            {u.name?.charAt(0).toUpperCase() || "?"}
			
 
				+                          </div>
			
 
				+                          <div>
			
 
				+                            <div className="flex items-center gap-2">
			
 
				+                              <span className="text-sm font-medium" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                                {u.name || "Unnamed"}
			
 
				+                              </span>
			
 
				+                              {isSelf && (
			
 
				+                                <span className="text-[10px] px-1.5 py-0.5 rounded-full font-medium" style={{ background: "#14532D14", color: "#14532D" }}>You</span>
			
 
				+                              )}
			
 
				+                            </div>
			
 
				+                            <span className="text-xs" style={{ color: "#a8a29e" }}>{u.email || "No email"}</span>
			
 
				+                          </div>
			
 
				+                        </div>
			
 
				+                      </td>
			
 
				+                      <td className="px-4 py-3"><RoleBadge role={u.role} /></td>
			
 
				+                      <td className="px-4 py-3 hidden md:table-cell">
			
 
				+                        <span className="text-xs" style={{ color: "#78716C" }}>
			
 
				+                          {u.createdAt ? new Date(u.createdAt).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "—"}
			
 
				+                        </span>
			
 
				+                      </td>
			
 
				+                      <td className="px-4 py-3 hidden md:table-cell">
			
 
				+                        <span className="text-xs" style={{ color: "#78716C" }}>
			
 
				+                          {u.lastSignedIn ? new Date(u.lastSignedIn).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "Never"}
			
 
				+                        </span>
			
 
				+                      </td>
			
 
				+                      <td className="px-4 py-3 text-right">
			
 
				+                        {isSelf ? (
			
 
				+                          <span className="text-xs italic" style={{ color: "#a8a29e" }}>Cannot edit self</span>
			
 
				+                        ) : (
			
 
				+                          <div className="flex items-center gap-1 justify-end">
			
 
				+                            <Select
			
 
				+                              value={u.role}
			
 
				+                              onValueChange={(newRole) => setConfirmDialog({ open: true, type: "role", userId: u.id, userName: u.name || "this user", currentRole: u.role, newRole })}
			
 
				+                            >
			
 
				+                              <SelectTrigger className="w-28 h-8 text-xs" style={{ borderColor: "#e7e0d5" }}>
			
 
				+                                <SelectValue />
			
 
				+                              </SelectTrigger>
			
 
				+                              <SelectContent>
			
 
				+                                <SelectItem value="admin"><div className="flex items-center gap-2"><Crown className="w-3 h-3" style={{ color: "#14532D" }} /> Admin</div></SelectItem>
			
 
				+                                <SelectItem value="agent"><div className="flex items-center gap-2"><Headphones className="w-3 h-3" style={{ color: "#0369a1" }} /> Agent</div></SelectItem>
			
 
				+                                <SelectItem value="user"><div className="flex items-center gap-2"><User className="w-3 h-3" style={{ color: "#78716C" }} /> User</div></SelectItem>
			
 
				+                              </SelectContent>
			
 
				+                            </Select>
			
 
				+                            <Button
			
 
				+                              variant="ghost"
			
 
				+                              size="sm"
			
 
				+                              className="h-8 w-8 p-0 text-red-400 hover:text-red-600 hover:bg-red-50"
			
 
				+                              onClick={() => setConfirmDialog({ open: true, type: "delete", userId: u.id, userName: u.name || u.email || "this user" })}
			
 
				+                            >
			
 
				+                              <Trash2 className="w-3.5 h-3.5" />
			
 
				+                            </Button>
			
 
				+                          </div>
			
 
				+                        )}
			
 
				+                      </td>
			
 
				+                    </tr>
			
 
				+                  );
			
 
				+                })
			
 
				+              )}
			
 
				+            </tbody>
			
 
				+          </table>
			
 
				+        </ScrollArea>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Confirmation Dialog */}
			
 
				+      <Dialog open={confirmDialog.open} onOpenChange={(open) => setConfirmDialog(prev => ({ ...prev, open }))}>
			
 
				+        <DialogContent style={{ borderColor: "#e7e0d5" }}>
			
 
				+          <DialogHeader>
			
 
				+            <DialogTitle style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+              {confirmDialog.type === "delete" ? "Delete User" :
			
 
				+               confirmDialog.type === "bulkDelete" ? `Delete ${selectedIds.size} Users` :
			
 
				+               confirmDialog.type === "bulkRole" ? `Change Role for ${selectedIds.size} Users` :
			
 
				+               "Confirm Role Change"}
			
 
				+            </DialogTitle>
			
 
				+            <DialogDescription style={{ fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+              {confirmDialog.type === "delete" ? (
			
 
				+                <>Are you sure you want to delete <strong>{confirmDialog.userName}</strong>? This action cannot be undone.</>
			
 
				+              ) : confirmDialog.type === "bulkDelete" ? (
			
 
				+                <>Are you sure you want to delete <strong>{selectedIds.size} users</strong>? This action cannot be undone.</>
			
 
				+              ) : confirmDialog.type === "bulkRole" ? (
			
 
				+                <>Change the role of <strong>{selectedIds.size} users</strong> to <RoleBadge role={confirmDialog.newRole || "user"} />?</>
			
 
				+              ) : (
			
 
				+                <>Change the role for <strong>{confirmDialog.userName}</strong>.</>
			
 
				+              )}
			
 
				+            </DialogDescription>
			
 
				+          </DialogHeader>
			
 
				+
			
 
				+          {confirmDialog.type === "role" && (
			
 
				+            <div className="space-y-3 py-2">
			
 
				+              <div className="flex items-center gap-3">
			
 
				+                <span className="text-sm" style={{ color: "#78716C", minWidth: 50 }}>From:</span>
			
 
				+                <RoleBadge role={confirmDialog.currentRole || "user"} />
			
 
				+              </div>
			
 
				+              <div className="flex items-center gap-3">
			
 
				+                <span className="text-sm" style={{ color: "#78716C", minWidth: 50 }}>To:</span>
			
 
				+                <RoleBadge role={confirmDialog.newRole || "user"} />
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          )}
			
 
				+
			
 
				+          {(confirmDialog.type === "delete" || confirmDialog.type === "bulkDelete") && (
			
 
				+            <div className="flex items-start gap-2 p-3 rounded-lg" style={{ background: "#dc262610", border: "1px solid #dc262630" }}>
			
 
				+              <AlertTriangle className="w-4 h-4 shrink-0 mt-0.5" style={{ color: "#dc2626" }} />
			
 
				+              <p className="text-xs" style={{ color: "#dc2626" }}>
			
 
				+                This will permanently remove the user(s) and their access. This cannot be undone.
			
 
				+              </p>
			
 
				+            </div>
			
 
				+          )}
			
 
				+
			
 
				+          <DialogFooter>
			
 
				+            <Button variant="outline" onClick={() => setConfirmDialog(prev => ({ ...prev, open: false }))} style={{ borderColor: "#e7e0d5" }}>
			
 
				+              Cancel
			
 
				+            </Button>
			
 
				+            <Button
			
 
				+              onClick={confirmAction}
			
 
				+              disabled={isPending}
			
 
				+              className="text-white"
			
 
				+              style={{ background: confirmDialog.type === "delete" || confirmDialog.type === "bulkDelete" ? "#dc2626" : "#14532D" }}
			
 
				+            >
			
 
				+              {isPending ? "Processing..." : confirmDialog.type === "delete" || confirmDialog.type === "bulkDelete" ? "Delete" : "Confirm"}
			
 
				+            </Button>
			
 
				+          </DialogFooter>
			
 
				+        </DialogContent>
			
 
				+      </Dialog>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Invitations Tab ─── */
			
 
				+function InvitationsTab() {
			
 
				+  const [statusFilter, setStatusFilter] = useState<string>("all");
			
 
				+  const utils = trpc.useUtils();
			
 
				+  const { data: invitationsList, isLoading } = trpc.invitations.list.useQuery();
			
 
				+
			
 
				+  const resendMutation = trpc.invitations.resend.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("Invitation resent with a new link");
			
 
				+      utils.invitations.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Failed to resend", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const revokeMutation = trpc.invitations.revoke.useMutation({
			
 
				+    onSuccess: () => {
			
 
				+      toast.success("Invitation revoked");
			
 
				+      utils.invitations.list.invalidate();
			
 
				+      utils.auditLogs.list.invalidate();
			
 
				+    },
			
 
				+    onError: (error) => toast.error("Failed to revoke", { description: error.message }),
			
 
				+  });
			
 
				+
			
 
				+  const filteredInvitations = useMemo(() => {
			
 
				+    if (!invitationsList) return [];
			
 
				+    if (statusFilter === "all") return invitationsList;
			
 
				+    return invitationsList.filter((i: any) => i.status === statusFilter);
			
 
				+  }, [invitationsList, statusFilter]);
			
 
				+
			
 
				+  const copyInviteLink = (token: string) => {
			
 
				+    const link = `${window.location.origin}/invite/${token}`;
			
 
				+    navigator.clipboard.writeText(link);
			
 
				+    toast.success("Invite link copied to clipboard");
			
 
				+  };
			
 
				+
			
 
				+  return (
			
 
				+    <div className="space-y-4">
			
 
				+      <div className="flex items-center gap-3">
			
 
				+        <Select value={statusFilter} onValueChange={setStatusFilter}>
			
 
				+          <SelectTrigger className="w-40" style={{ borderColor: "#e7e0d5", background: "#fff" }}>
			
 
				+            <SelectValue placeholder="Filter status" />
			
 
				+          </SelectTrigger>
			
 
				+          <SelectContent>
			
 
				+            <SelectItem value="all">All Status</SelectItem>
			
 
				+            <SelectItem value="pending">Pending</SelectItem>
			
 
				+            <SelectItem value="accepted">Accepted</SelectItem>
			
 
				+            <SelectItem value="expired">Expired</SelectItem>
			
 
				+            <SelectItem value="revoked">Revoked</SelectItem>
			
 
				+          </SelectContent>
			
 
				+        </Select>
			
 
				+        <span className="text-sm" style={{ color: "#a8a29e" }}>
			
 
				+          {filteredInvitations.length} invitation{filteredInvitations.length !== 1 ? "s" : ""}
			
 
				+        </span>
			
 
				+      </div>
			
 
				+
			
 
				+      <div className="rounded-xl border overflow-hidden" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <ScrollArea className="max-h-[500px]">
			
 
				+          <table className="w-full">
			
 
				+            <thead>
			
 
				+              <tr style={{ background: "#f5f0e8" }}>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Email</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Role</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Status</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3 hidden md:table-cell" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Sent By</th>
			
 
				+                <th className="text-left text-xs font-semibold px-4 py-3 hidden md:table-cell" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Expires</th>
			
 
				+                <th className="text-right text-xs font-semibold px-4 py-3" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>Actions</th>
			
 
				+              </tr>
			
 
				+            </thead>
			
 
				+            <tbody>
			
 
				+              {isLoading ? (
			
 
				+                <tr>
			
 
				+                  <td colSpan={6} className="text-center py-12">
			
 
				+                    <div className="animate-spin w-6 h-6 border-2 rounded-full mx-auto" style={{ borderColor: "#14532D", borderTopColor: "transparent" }} />
			
 
				+                    <p className="text-sm mt-2" style={{ color: "#a8a29e" }}>Loading invitations...</p>
			
 
				+                  </td>
			
 
				+                </tr>
			
 
				+              ) : filteredInvitations.length === 0 ? (
			
 
				+                <tr>
			
 
				+                  <td colSpan={6} className="text-center py-12">
			
 
				+                    <Mail className="w-8 h-8 mx-auto mb-2" style={{ color: "#d6d3d1" }} />
			
 
				+                    <p className="text-sm" style={{ color: "#a8a29e" }}>No invitations found</p>
			
 
				+                  </td>
			
 
				+                </tr>
			
 
				+              ) : (
			
 
				+                filteredInvitations.map((inv: any) => (
			
 
				+                  <tr key={inv.id} className="border-t transition-colors hover:bg-black/[0.02]" style={{ borderColor: "#e7e0d5" }}>
			
 
				+                    <td className="px-4 py-3">
			
 
				+                      <div className="flex items-center gap-2">
			
 
				+                        <Mail className="w-4 h-4 shrink-0" style={{ color: "#a8a29e" }} />
			
 
				+                        <div>
			
 
				+                          <span className="text-sm font-medium block" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                            {inv.email}
			
 
				+                          </span>
			
 
				+                          {inv.message && (
			
 
				+                            <span className="text-xs block truncate max-w-[200px]" style={{ color: "#a8a29e" }}>
			
 
				+                              "{inv.message}"
			
 
				+                            </span>
			
 
				+                          )}
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </td>
			
 
				+                    <td className="px-4 py-3"><RoleBadge role={inv.role} /></td>
			
 
				+                    <td className="px-4 py-3"><InviteStatusBadge status={inv.status} /></td>
			
 
				+                    <td className="px-4 py-3 hidden md:table-cell">
			
 
				+                      <span className="text-xs" style={{ color: "#78716C" }}>{inv.invitedByName || "—"}</span>
			
 
				+                    </td>
			
 
				+                    <td className="px-4 py-3 hidden md:table-cell">
			
 
				+                      <span className="text-xs" style={{ color: inv.status === "pending" && new Date(inv.expiresAt) < new Date() ? "#dc2626" : "#78716C" }}>
			
 
				+                        {inv.expiresAt ? new Date(inv.expiresAt).toLocaleDateString(undefined, { month: "short", day: "numeric", year: "numeric" }) : "—"}
			
 
				+                      </span>
			
 
				+                    </td>
			
 
				+                    <td className="px-4 py-3 text-right">
			
 
				+                      <div className="flex items-center gap-1 justify-end">
			
 
				+                        {inv.status === "pending" && (
			
 
				+                          <>
			
 
				+                            <Button variant="ghost" size="sm" className="h-7 text-xs gap-1" onClick={() => copyInviteLink(inv.token)}>
			
 
				+                              <Copy className="w-3 h-3" /> Copy Link
			
 
				+                            </Button>
			
 
				+                            <Button
			
 
				+                              variant="ghost" size="sm" className="h-7 text-xs gap-1"
			
 
				+                              onClick={() => resendMutation.mutate({ invitationId: inv.id })}
			
 
				+                              disabled={resendMutation.isPending}
			
 
				+                            >
			
 
				+                              <RefreshCw className="w-3 h-3" /> Resend
			
 
				+                            </Button>
			
 
				+                            <Button
			
 
				+                              variant="ghost" size="sm" className="h-7 text-xs gap-1 text-red-500 hover:text-red-700"
			
 
				+                              onClick={() => revokeMutation.mutate({ invitationId: inv.id })}
			
 
				+                              disabled={revokeMutation.isPending}
			
 
				+                            >
			
 
				+                              <XCircle className="w-3 h-3" /> Revoke
			
 
				+                            </Button>
			
 
				+                          </>
			
 
				+                        )}
			
 
				+                        {(inv.status === "expired") && (
			
 
				+                          <Button
			
 
				+                            variant="ghost" size="sm" className="h-7 text-xs gap-1"
			
 
				+                            onClick={() => resendMutation.mutate({ invitationId: inv.id })}
			
 
				+                            disabled={resendMutation.isPending}
			
 
				+                          >
			
 
				+                            <RefreshCw className="w-3 h-3" /> Resend
			
 
				+                          </Button>
			
 
				+                        )}
			
 
				+                        {inv.status === "accepted" && (
			
 
				+                          <span className="text-xs" style={{ color: "#16a34a" }}>
			
 
				+                            {inv.acceptedAt ? `Accepted ${new Date(inv.acceptedAt).toLocaleDateString(undefined, { month: "short", day: "numeric" })}` : "Accepted"}
			
 
				+                          </span>
			
 
				+                        )}
			
 
				+                        {inv.status === "revoked" && (
			
 
				+                          <span className="text-xs italic" style={{ color: "#a8a29e" }}>Revoked</span>
			
 
				+                        )}
			
 
				+                      </div>
			
 
				+                    </td>
			
 
				+                  </tr>
			
 
				+                ))
			
 
				+              )}
			
 
				+            </tbody>
			
 
				+          </table>
			
 
				+        </ScrollArea>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Activity Log Tab ─── */
			
 
				+function ActivityLogTab() {
			
 
				+  const { data: logs, isLoading } = trpc.auditLogs.list.useQuery({ limit: 100 });
			
 
				+
			
 
				+  return (
			
 
				+    <div className="space-y-4">
			
 
				+      <div className="rounded-xl border overflow-hidden" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <ScrollArea className="max-h-[600px]">
			
 
				+          {isLoading ? (
			
 
				+            <div className="text-center py-12">
			
 
				+              <div className="animate-spin w-6 h-6 border-2 rounded-full mx-auto" style={{ borderColor: "#14532D", borderTopColor: "transparent" }} />
			
 
				+              <p className="text-sm mt-2" style={{ color: "#a8a29e" }}>Loading activity...</p>
			
 
				+            </div>
			
 
				+          ) : !logs || logs.length === 0 ? (
			
 
				+            <div className="text-center py-12">
			
 
				+              <History className="w-8 h-8 mx-auto mb-2" style={{ color: "#d6d3d1" }} />
			
 
				+              <p className="text-sm" style={{ color: "#a8a29e" }}>No activity recorded yet</p>
			
 
				+            </div>
			
 
				+          ) : (
			
 
				+            <div className="divide-y" style={{ borderColor: "#e7e0d5" }}>
			
 
				+              {logs.map((log: any) => {
			
 
				+                const actionConfig = AUDIT_ACTION_LABELS[log.action] || { label: log.action, color: "#78716C" };
			
 
				+                const details = log.details as Record<string, any> | null;
			
 
				+                return (
			
 
				+                  <div key={log.id} className="px-4 py-3 hover:bg-black/[0.02] transition-colors">
			
 
				+                    <div className="flex items-start gap-3">
			
 
				+                      <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style={{ background: actionConfig.color + "14", color: actionConfig.color }}>
			
 
				+                        <History className="w-4 h-4" />
			
 
				+                      </div>
			
 
				+                      <div className="flex-1 min-w-0">
			
 
				+                        <div className="flex items-center gap-2 flex-wrap">
			
 
				+                          <span className="text-xs font-semibold px-2 py-0.5 rounded-full" style={{ background: actionConfig.color + "14", color: actionConfig.color }}>
			
 
				+                            {actionConfig.label}
			
 
				+                          </span>
			
 
				+                          <span className="text-xs" style={{ color: "#a8a29e" }}>
			
 
				+                            {log.createdAt ? new Date(log.createdAt).toLocaleString(undefined, { month: "short", day: "numeric", hour: "2-digit", minute: "2-digit" }) : ""}
			
 
				+                          </span>
			
 
				+                        </div>
			
 
				+                        <p className="text-sm mt-1" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+                          <strong>{log.actorName || "System"}</strong>
			
 
				+                          {log.action === "role_change" && details && (
			
 
				+                            <> changed <strong>{log.targetName}</strong>'s role from {details.previousRole} to {details.newRole}</>
			
 
				+                          )}
			
 
				+                          {log.action === "user_deleted" && (
			
 
				+                            <> deleted user <strong>{log.targetName}</strong></>
			
 
				+                          )}
			
 
				+                          {log.action === "invitation_sent" && details && (
			
 
				+                            <> invited <strong>{log.targetName}</strong> as {details.role}</>
			
 
				+                          )}
			
 
				+                          {log.action === "invitation_resent" && (
			
 
				+                            <> resent invitation to <strong>{log.targetName}</strong></>
			
 
				+                          )}
			
 
				+                          {log.action === "invitation_revoked" && (
			
 
				+                            <> revoked invitation for <strong>{log.targetName}</strong></>
			
 
				+                          )}
			
 
				+                          {log.action === "invitation_accepted" && (
			
 
				+                            <> accepted invitation for <strong>{log.targetName}</strong></>
			
 
				+                          )}
			
 
				+                          {log.action === "bulk_role_change" && details && (
			
 
				+                            <> changed {details.userIds?.length} users to {details.newRole}</>
			
 
				+                          )}
			
 
				+                          {log.action === "bulk_delete" && details && (
			
 
				+                            <> deleted {details.userIds?.length} users</>
			
 
				+                          )}
			
 
				+                        </p>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                );
			
 
				+              })}
			
 
				+            </div>
			
 
				+          )}
			
 
				+        </ScrollArea>
			
 
				+      </div>
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Main Component ─── */
			
 
				+export default function UserManagement() {
			
 
				+  const [inviteDialogOpen, setInviteDialogOpen] = useState(false);
			
 
				+  const { data: usersList } = trpc.users.list.useQuery();
			
 
				+  const { data: invitationsList } = trpc.invitations.list.useQuery();
			
 
				+
			
 
				+  return (
			
 
				+    <div className="space-y-6">
			
 
				+      {/* Header */}
			
 
				+      <div className="flex items-start justify-between">
			
 
				+        <div>
			
 
				+          <h1 className="text-2xl font-bold" style={{ fontFamily: "'Playfair Display', serif", color: "#292524" }}>
			
 
				+            User Management
			
 
				+          </h1>
			
 
				+          <p className="text-sm mt-1" style={{ color: "#78716C", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+            Manage users, send invitations, and track team activity.
			
 
				+          </p>
			
 
				+        </div>
			
 
				+        <Button onClick={() => setInviteDialogOpen(true)} className="text-white gap-2" style={{ background: "#14532D" }}>
			
 
				+          <UserPlus className="w-4 h-4" /> Invite Member
			
 
				+        </Button>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Stats */}
			
 
				+      <RoleStats users={usersList || []} invitations={invitationsList || []} />
			
 
				+
			
 
				+      {/* Role Legend */}
			
 
				+      <div className="p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <h3 className="text-sm font-semibold mb-3" style={{ color: "#292524", fontFamily: "'Source Sans 3', sans-serif" }}>
			
 
				+          Role Permissions
			
 
				+        </h3>
			
 
				+        <div className="grid sm:grid-cols-3 gap-3">
			
 
				+          {Object.entries(ROLE_CONFIG).map(([key, config]) => (
			
 
				+            <div key={key} className="flex items-start gap-3 p-3 rounded-lg" style={{ background: config.bg }}>
			
 
				+              <div className="w-8 h-8 rounded-lg flex items-center justify-center shrink-0 mt-0.5" style={{ background: config.color + "20", color: config.color }}>
			
 
				+                {config.icon}
			
 
				+              </div>
			
 
				+              <div>
			
 
				+                <div className="text-sm font-semibold" style={{ color: config.color }}>{config.label}</div>
			
 
				+                <div className="text-xs mt-0.5" style={{ color: "#78716C" }}>{config.description}</div>
			
 
				+              </div>
			
 
				+            </div>
			
 
				+          ))}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* Tabs */}
			
 
				+      <Tabs defaultValue="users" className="w-full">
			
 
				+        <TabsList className="w-full justify-start border-b rounded-none bg-transparent p-0 h-auto" style={{ borderColor: "#e7e0d5" }}>
			
 
				+          <TabsTrigger
			
 
				+            value="users"
			
 
				+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-[#14532D] data-[state=active]:text-[#14532D] data-[state=active]:shadow-none px-4 py-2.5 text-sm"
			
 
				+            style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            <Users className="w-4 h-4 mr-2" /> Users
			
 
				+          </TabsTrigger>
			
 
				+          <TabsTrigger
			
 
				+            value="invitations"
			
 
				+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-[#14532D] data-[state=active]:text-[#14532D] data-[state=active]:shadow-none px-4 py-2.5 text-sm"
			
 
				+            style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            <Mail className="w-4 h-4 mr-2" /> Invitations
			
 
				+          </TabsTrigger>
			
 
				+          <TabsTrigger
			
 
				+            value="activity"
			
 
				+            className="rounded-none border-b-2 border-transparent data-[state=active]:border-[#14532D] data-[state=active]:text-[#14532D] data-[state=active]:shadow-none px-4 py-2.5 text-sm"
			
 
				+            style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+          >
			
 
				+            <History className="w-4 h-4 mr-2" /> Activity Log
			
 
				+          </TabsTrigger>
			
 
				+        </TabsList>
			
 
				+
			
 
				+        <TabsContent value="users" className="mt-4">
			
 
				+          <UsersTab />
			
 
				+        </TabsContent>
			
 
				+        <TabsContent value="invitations" className="mt-4">
			
 
				+          <InvitationsTab />
			
 
				+        </TabsContent>
			
 
				+        <TabsContent value="activity" className="mt-4">
			
 
				+          <ActivityLogTab />
			
 
				+        </TabsContent>
			
 
				+      </Tabs>
			
 
				+
			
 
				+      {/* Send Invitation Dialog */}
			
 
				+      <SendInviteDialog open={inviteDialogOpen} onOpenChange={setInviteDialogOpen} />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/client/src/pages/WorkflowDesigner.tsx
+++ b/client/src/pages/WorkflowDesigner.tsx
@@ -0,0 +1,945 @@
 
				+/**
			
 
				+ * Workflow Designer — Tidio-inspired flow builder with categories & sub-categories
			
 
				+ * Categories: Support Flows, Leads Flows, Sales Flows, Others
			
 
				+ * Sub-categories: Deflect, Self Service, Orders, Shipping, Returning, Cancelling
			
 
				+ */
			
 
				+import { useState, useRef, useCallback, useEffect, useMemo } from "react";
			
 
				+import { useAuth } from "@/_core/hooks/useAuth";
			
 
				+import { trpc } from "@/lib/trpc";
			
 
				+import { Button } from "@/components/ui/button";
			
 
				+import { toast } from "sonner";
			
 
				+import {
			
 
				+  GitBranch, Zap, Save, Trash2, X, Square,
			
 
				+  MessageCircle, Bot, Users, HelpCircle,
			
 
				+  Database, ShoppingCart, ShieldAlert, Sparkles,
			
 
				+  Check, Clock, XCircle, RefreshCw, ChevronDown, ChevronUp,
			
 
				+  UserCheck, FileText, AlertTriangle, Plus,
			
 
				+  Headphones, TrendingUp, Megaphone, MoreHorizontal,
			
 
				+  Package, Truck, RotateCw, ArrowRight, Layers,
			
 
				+  Play, Eye, Copy, ChevronRight, FolderOpen,
			
 
				+  Shield, Filter, Search, Settings,
			
 
				+} from "lucide-react";
			
 
				+
			
 
				+/* ─── Types ─── */
			
 
				+type NodeType = "greeting" | "intent" | "response" | "condition" | "escalation" | "action" | "end" | "customer_data" | "sales_order" | "guardrail";
			
 
				+
			
 
				+interface FlowNode {
			
 
				+  id: string;
			
 
				+  type: NodeType;
			
 
				+  label: string;
			
 
				+  config: Record<string, any>;
			
 
				+  x: number;
			
 
				+  y: number;
			
 
				+}
			
 
				+
			
 
				+interface FlowEdge {
			
 
				+  id: string;
			
 
				+  sourceId: string;
			
 
				+  targetId: string;
			
 
				+  label?: string;
			
 
				+}
			
 
				+
			
 
				+/* ─── Flow Category & Template Types ─── */
			
 
				+interface FlowSubCategory {
			
 
				+  id: string;
			
 
				+  label: string;
			
 
				+  icon: React.ReactNode;
			
 
				+  color: string;
			
 
				+  description: string;
			
 
				+}
			
 
				+
			
 
				+interface FlowCategory {
			
 
				+  id: string;
			
 
				+  label: string;
			
 
				+  icon: React.ReactNode;
			
 
				+  color: string;
			
 
				+  description: string;
			
 
				+  subCategories: FlowSubCategory[];
			
 
				+}
			
 
				+
			
 
				+interface FlowTemplate {
			
 
				+  id: string;
			
 
				+  name: string;
			
 
				+  description: string;
			
 
				+  category: string;
			
 
				+  subCategory: string;
			
 
				+  tags: string[];
			
 
				+  nodes: FlowNode[];
			
 
				+  edges: FlowEdge[];
			
 
				+  isActive: boolean;
			
 
				+}
			
 
				+
			
 
				+/* ─── Node type config ─── */
			
 
				+const NODE_TYPES: Record<NodeType, { icon: React.ReactNode; color: string; bgColor: string; description: string }> = {
			
 
				+  greeting: { icon: <MessageCircle className="w-4 h-4" />, color: "#14532D", bgColor: "#14532D14", description: "Welcome message with quick-reply buttons" },
			
 
				+  intent: { icon: <HelpCircle className="w-4 h-4" />, color: "#0369a1", bgColor: "#0369a114", description: "Detect user intent from message" },
			
 
				+  response: { icon: <Bot className="w-4 h-4" />, color: "#7c3aed", bgColor: "#7c3aed14", description: "Send a response to the user" },
			
 
				+  condition: { icon: <GitBranch className="w-4 h-4" />, color: "#ca8a04", bgColor: "#ca8a0414", description: "Branch based on a condition" },
			
 
				+  escalation: { icon: <Users className="w-4 h-4" />, color: "#C2410C", bgColor: "#C2410C14", description: "Transfer to a human agent" },
			
 
				+  action: { icon: <Zap className="w-4 h-4" />, color: "#059669", bgColor: "#05966914", description: "Perform an action (API call)" },
			
 
				+  end: { icon: <Square className="w-4 h-4" />, color: "#78716C", bgColor: "#78716C14", description: "End the conversation flow" },
			
 
				+  customer_data: { icon: <Database className="w-4 h-4" />, color: "#7c3aed", bgColor: "#7c3aed14", description: "Look up customer data from CRM" },
			
 
				+  sales_order: { icon: <ShoppingCart className="w-4 h-4" />, color: "#0891b2", bgColor: "#0891b214", description: "Query sales order data" },
			
 
				+  guardrail: { icon: <ShieldAlert className="w-4 h-4" />, color: "#dc2626", bgColor: "#dc262614", description: "Block sensitive topics" },
			
 
				+};
			
 
				+
			
 
				+/* ─── Flow Categories (Tidio-inspired) ─── */
			
 
				+const FLOW_CATEGORIES: FlowCategory[] = [
			
 
				+  {
			
 
				+    id: "support",
			
 
				+    label: "Support Flows",
			
 
				+    icon: <Headphones className="w-5 h-5" />,
			
 
				+    color: "#14532D",
			
 
				+    description: "Handle customer support inquiries and resolve issues",
			
 
				+    subCategories: [
			
 
				+      { id: "orders", label: "Orders", icon: <Package className="w-4 h-4" />, color: "#14532D", description: "Order status, tracking, modifications" },
			
 
				+      { id: "shipping", label: "Shipping", icon: <Truck className="w-4 h-4" />, color: "#0369a1", description: "Shipping inquiries, delivery updates" },
			
 
				+      { id: "returning", label: "Returning", icon: <RotateCw className="w-4 h-4" />, color: "#ca8a04", description: "Return requests, refund processing" },
			
 
				+      { id: "cancelling", label: "Cancelling", icon: <XCircle className="w-4 h-4" />, color: "#dc2626", description: "Order cancellation requests" },
			
 
				+      { id: "deflect", label: "Deflect", icon: <Shield className="w-4 h-4" />, color: "#7c3aed", description: "Deflect common questions with self-service" },
			
 
				+      { id: "self_service", label: "Self Service", icon: <Search className="w-4 h-4" />, color: "#059669", description: "Enable customers to solve issues themselves" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "leads",
			
 
				+    label: "Leads Flows",
			
 
				+    icon: <TrendingUp className="w-5 h-5" />,
			
 
				+    color: "#0369a1",
			
 
				+    description: "Capture and qualify leads from website visitors",
			
 
				+    subCategories: [
			
 
				+      { id: "capture", label: "Lead Capture", icon: <UserCheck className="w-4 h-4" />, color: "#0369a1", description: "Collect visitor information" },
			
 
				+      { id: "qualify", label: "Qualify", icon: <Filter className="w-4 h-4" />, color: "#7c3aed", description: "Qualify leads based on criteria" },
			
 
				+      { id: "nurture", label: "Nurture", icon: <MessageCircle className="w-4 h-4" />, color: "#059669", description: "Engage and nurture leads" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "sales",
			
 
				+    label: "Sales Flows",
			
 
				+    icon: <Megaphone className="w-5 h-5" />,
			
 
				+    color: "#ca8a04",
			
 
				+    description: "Drive sales through guided product discovery",
			
 
				+    subCategories: [
			
 
				+      { id: "product_search", label: "Product Search", icon: <Search className="w-4 h-4" />, color: "#ca8a04", description: "Help customers find products" },
			
 
				+      { id: "recommendations", label: "Recommendations", icon: <Sparkles className="w-4 h-4" />, color: "#7c3aed", description: "AI-powered product suggestions" },
			
 
				+      { id: "dealer_locator", label: "Dealer Locator", icon: <Users className="w-4 h-4" />, color: "#14532D", description: "Find nearby dealers" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "others",
			
 
				+    label: "Others",
			
 
				+    icon: <MoreHorizontal className="w-5 h-5" />,
			
 
				+    color: "#78716C",
			
 
				+    description: "Custom flows and miscellaneous automations",
			
 
				+    subCategories: [
			
 
				+      { id: "faq", label: "FAQ", icon: <HelpCircle className="w-4 h-4" />, color: "#78716C", description: "Frequently asked questions" },
			
 
				+      { id: "feedback", label: "Feedback", icon: <FileText className="w-4 h-4" />, color: "#0891b2", description: "Collect customer feedback" },
			
 
				+      { id: "custom", label: "Custom", icon: <Settings className="w-4 h-4" />, color: "#a8a29e", description: "Build your own flow" },
			
 
				+    ],
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+/* ─── Pre-built Flow Templates ─── */
			
 
				+const FLOW_TEMPLATES: FlowTemplate[] = [
			
 
				+  {
			
 
				+    id: "order_status",
			
 
				+    name: "Check Order Status",
			
 
				+    description: "Let customers check their order status by providing an order number",
			
 
				+    category: "support",
			
 
				+    subCategory: "orders",
			
 
				+    tags: ["popular", "self-service"],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Greeting", config: { message: "👋 What can we help you with today?", quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"], detectCustomerId: true, customerIdSource: "session" }, x: 300, y: 50 },
			
 
				+      { id: "g2", type: "guardrail", label: "Content Filter", config: { blockedTopics: ["overall revenue", "profit margin", "internal pricing", "employee data"], blockedMessage: "I'm sorry, I can't share that information." }, x: 600, y: 50 },
			
 
				+      { id: "i1", type: "intent", label: "Detect Intent", config: { intents: ["order_status", "track_order", "modify_order"] }, x: 300, y: 180 },
			
 
				+      { id: "cd1", type: "customer_data", label: "Customer Lookup", config: { apiEndpoint: "/api/crm/customer", lookupField: "customerId", returnFields: ["name", "email", "accountType"] }, x: 100, y: 310 },
			
 
				+      { id: "so1", type: "sales_order", label: "Order Lookup", config: { apiEndpoint: "/api/orders", lookupField: "orderId", returnFields: ["status", "estimatedDelivery", "trackingNumber"] }, x: 500, y: 310 },
			
 
				+      { id: "r1", type: "response", label: "Order Status Reply", config: { message: "Your order {{orderId}} is currently {{status}}. Estimated delivery: {{estimatedDelivery}}" }, x: 300, y: 440 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 560 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e_g1_i1", sourceId: "g1", targetId: "i1" },
			
 
				+      { id: "e_i1_cd1", sourceId: "i1", targetId: "cd1", label: "order_status" },
			
 
				+      { id: "e_i1_so1", sourceId: "i1", targetId: "so1", label: "track_order" },
			
 
				+      { id: "e_cd1_r1", sourceId: "cd1", targetId: "r1" },
			
 
				+      { id: "e_so1_r1", sourceId: "so1", targetId: "r1" },
			
 
				+      { id: "e_r1_e1", sourceId: "r1", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "shipping_tracking",
			
 
				+    name: "Track Shipment",
			
 
				+    description: "Help customers track their shipment with real-time updates",
			
 
				+    category: "support",
			
 
				+    subCategory: "shipping",
			
 
				+    tags: ["popular"],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Greeting", config: { message: "👋 What can we help you with today?", quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"], detectCustomerId: true, customerIdSource: "session" }, x: 300, y: 50 },
			
 
				+      { id: "r1", type: "response", label: "Ask Tracking #", config: { message: "Please provide your tracking number and I'll look up the latest status." }, x: 300, y: 180 },
			
 
				+      { id: "a1", type: "action", label: "Track Shipment API", config: { apiEndpoint: "/api/shipping/track", method: "GET" }, x: 300, y: 310 },
			
 
				+      { id: "r2", type: "response", label: "Tracking Result", config: { message: "Your package is currently {{currentLocation}}. Estimated arrival: {{estimatedArrival}}" }, x: 300, y: 440 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 560 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "r1" },
			
 
				+      { id: "e2", sourceId: "r1", targetId: "a1" },
			
 
				+      { id: "e3", sourceId: "a1", targetId: "r2" },
			
 
				+      { id: "e4", sourceId: "r2", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "return_request",
			
 
				+    name: "Submit Return Request",
			
 
				+    description: "Guide customers through the return process step by step",
			
 
				+    category: "support",
			
 
				+    subCategory: "returning",
			
 
				+    tags: ["self-service"],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Greeting", config: { message: "👋 What can we help you with today?", quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"], detectCustomerId: true, customerIdSource: "session" }, x: 300, y: 50 },
			
 
				+      { id: "r1", type: "response", label: "Ask Order #", config: { message: "I'll help you with your return. Please provide your order number." }, x: 300, y: 180 },
			
 
				+      { id: "cd1", type: "customer_data", label: "Verify Customer", config: { apiEndpoint: "/api/crm/customer", lookupField: "customerId" }, x: 100, y: 310 },
			
 
				+      { id: "c1", type: "condition", label: "Return Eligible?", config: { condition: "order.daysOld <= 30 && order.status === 'delivered'" }, x: 300, y: 310 },
			
 
				+      { id: "a1", type: "action", label: "Create Return", config: { apiEndpoint: "/api/returns", method: "POST" }, x: 150, y: 440 },
			
 
				+      { id: "r2", type: "response", label: "Not Eligible", config: { message: "Unfortunately, this order is not eligible for return. Would you like to speak with an agent?" }, x: 450, y: 440 },
			
 
				+      { id: "esc1", type: "escalation", label: "Transfer to Agent", config: { priority: "normal", department: "returns" }, x: 450, y: 560 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 560 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "r1" },
			
 
				+      { id: "e2", sourceId: "r1", targetId: "c1" },
			
 
				+      { id: "e3", sourceId: "c1", targetId: "a1", label: "eligible" },
			
 
				+      { id: "e4", sourceId: "c1", targetId: "r2", label: "not eligible" },
			
 
				+      { id: "e5", sourceId: "r2", targetId: "esc1" },
			
 
				+      { id: "e6", sourceId: "a1", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "cancel_order",
			
 
				+    name: "Cancel Order",
			
 
				+    description: "Process order cancellation requests with eligibility checks",
			
 
				+    category: "support",
			
 
				+    subCategory: "cancelling",
			
 
				+    tags: [],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Greeting", config: { message: "👋 What can we help you with today?", quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"], detectCustomerId: true, customerIdSource: "session" }, x: 300, y: 50 },
			
 
				+      { id: "r1", type: "response", label: "Ask Order #", config: { message: "I can help you cancel an order. Please provide the order number." }, x: 300, y: 180 },
			
 
				+      { id: "so1", type: "sales_order", label: "Check Order", config: { apiEndpoint: "/api/orders", lookupField: "orderId" }, x: 300, y: 310 },
			
 
				+      { id: "c1", type: "condition", label: "Can Cancel?", config: { condition: "order.status === 'pending' || order.status === 'processing'" }, x: 300, y: 440 },
			
 
				+      { id: "a1", type: "action", label: "Cancel Order", config: { apiEndpoint: "/api/orders/cancel", method: "POST" }, x: 150, y: 560 },
			
 
				+      { id: "r2", type: "response", label: "Cannot Cancel", config: { message: "This order has already shipped and cannot be cancelled. Would you like to initiate a return instead?" }, x: 450, y: 560 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 680 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "r1" },
			
 
				+      { id: "e2", sourceId: "r1", targetId: "so1" },
			
 
				+      { id: "e3", sourceId: "so1", targetId: "c1" },
			
 
				+      { id: "e4", sourceId: "c1", targetId: "a1", label: "yes" },
			
 
				+      { id: "e5", sourceId: "c1", targetId: "r2", label: "no" },
			
 
				+      { id: "e6", sourceId: "a1", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "deflect_faq",
			
 
				+    name: "FAQ Deflection",
			
 
				+    description: "Answer common questions automatically to reduce agent workload",
			
 
				+    category: "support",
			
 
				+    subCategory: "deflect",
			
 
				+    tags: ["popular"],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Greeting", config: { message: "👋 What can we help you with today?", quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"], detectCustomerId: true, customerIdSource: "session" }, x: 300, y: 50 },
			
 
				+      { id: "gr1", type: "guardrail", label: "Content Filter", config: { blockedTopics: ["overall revenue", "profit margin", "internal pricing"] }, x: 600, y: 50 },
			
 
				+      { id: "i1", type: "intent", label: "Detect FAQ", config: { intents: ["warranty_info", "delivery_time", "payment_methods", "store_hours"] }, x: 300, y: 180 },
			
 
				+      { id: "r1", type: "response", label: "FAQ Answer", config: { message: "Here's the information you requested: {{faqAnswer}}" }, x: 300, y: 310 },
			
 
				+      { id: "r2", type: "response", label: "Ask Satisfaction", config: { message: "Did that answer your question?" }, x: 300, y: 440 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 560 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "i1" },
			
 
				+      { id: "e2", sourceId: "i1", targetId: "r1" },
			
 
				+      { id: "e3", sourceId: "r1", targetId: "r2" },
			
 
				+      { id: "e4", sourceId: "r2", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "lead_capture",
			
 
				+    name: "Lead Capture",
			
 
				+    description: "Capture visitor information for follow-up by sales team",
			
 
				+    category: "leads",
			
 
				+    subCategory: "capture",
			
 
				+    tags: [],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Welcome", config: { message: "Welcome to Homelegance! Are you a dealer or looking for furniture for your home?" }, x: 300, y: 50 },
			
 
				+      { id: "r1", type: "response", label: "Ask Contact", config: { message: "I'd love to help! Could you share your name and email so our team can follow up?" }, x: 300, y: 180 },
			
 
				+      { id: "a1", type: "action", label: "Save Lead", config: { apiEndpoint: "/api/leads", method: "POST" }, x: 300, y: 310 },
			
 
				+      { id: "r2", type: "response", label: "Confirm", config: { message: "Thank you! A member of our team will reach out shortly." }, x: 300, y: 440 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 560 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "r1" },
			
 
				+      { id: "e2", sourceId: "r1", targetId: "a1" },
			
 
				+      { id: "e3", sourceId: "a1", targetId: "r2" },
			
 
				+      { id: "e4", sourceId: "r2", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+  {
			
 
				+    id: "product_finder",
			
 
				+    name: "Product Finder",
			
 
				+    description: "Guide customers to find the right furniture with smart questions",
			
 
				+    category: "sales",
			
 
				+    subCategory: "product_search",
			
 
				+    tags: ["popular"],
			
 
				+    isActive: false,
			
 
				+    nodes: [
			
 
				+      { id: "g1", type: "greeting", label: "Welcome", config: { message: "Looking for furniture? I can help you find the perfect piece!" }, x: 300, y: 50 },
			
 
				+      { id: "r1", type: "response", label: "Ask Category", config: { message: "What type of furniture are you looking for? (Bedroom, Living Room, Dining, etc.)" }, x: 300, y: 180 },
			
 
				+      { id: "r2", type: "response", label: "Ask Style", config: { message: "What style do you prefer? (Modern, Traditional, Transitional)" }, x: 300, y: 310 },
			
 
				+      { id: "a1", type: "action", label: "Search Products", config: { apiEndpoint: "/api/products/search", method: "POST" }, x: 300, y: 440 },
			
 
				+      { id: "r3", type: "response", label: "Show Results", config: { message: "Here are some options that match your preferences:" }, x: 300, y: 560 },
			
 
				+      { id: "e1", type: "end", label: "End", config: {}, x: 300, y: 680 },
			
 
				+    ],
			
 
				+    edges: [
			
 
				+      { id: "e1", sourceId: "g1", targetId: "r1" },
			
 
				+      { id: "e2", sourceId: "r1", targetId: "r2" },
			
 
				+      { id: "e3", sourceId: "r2", targetId: "a1" },
			
 
				+      { id: "e4", sourceId: "a1", targetId: "r3" },
			
 
				+      { id: "e5", sourceId: "r3", targetId: "e1" },
			
 
				+    ],
			
 
				+  },
			
 
				+];
			
 
				+
			
 
				+/* ─── View modes ─── */
			
 
				+type ViewMode = "gallery" | "editor";
			
 
				+
			
 
				+/* ─── Flow Node Component ─── */
			
 
				+function FlowNodeCard({
			
 
				+  node, isSelected, onSelect, onDragStart,
			
 
				+}: {
			
 
				+  node: FlowNode; isSelected: boolean;
			
 
				+  onSelect: () => void; onDragStart: (e: React.MouseEvent) => void;
			
 
				+}) {
			
 
				+  const typeConfig = NODE_TYPES[node.type];
			
 
				+  return (
			
 
				+    <div
			
 
				+      className="absolute cursor-move select-none"
			
 
				+      style={{ left: node.x, top: node.y, zIndex: isSelected ? 20 : 10 }}
			
 
				+      onMouseDown={(e) => { e.stopPropagation(); onDragStart(e); onSelect(); }}
			
 
				+    >
			
 
				+      <div
			
 
				+        className="w-44 rounded-xl border-2 shadow-sm transition-shadow hover:shadow-md overflow-hidden"
			
 
				+        style={{
			
 
				+          borderColor: isSelected ? typeConfig.color : "#e7e0d5",
			
 
				+          background: "#fff",
			
 
				+          boxShadow: isSelected ? `0 0 0 2px ${typeConfig.color}30` : undefined,
			
 
				+        }}
			
 
				+      >
			
 
				+        <div className="px-3 py-2 flex items-center gap-2" style={{ background: typeConfig.bgColor }}>
			
 
				+          <div style={{ color: typeConfig.color }}>{typeConfig.icon}</div>
			
 
				+          <span className="text-[11px] font-bold truncate" style={{ color: typeConfig.color }}>{node.label}</span>
			
 
				+        </div>
			
 
				+        <div className="px-3 py-1.5">
			
 
				+          <span className="text-[10px] capitalize" style={{ color: "#a8a29e" }}>{node.type.replace("_", " ")}</span>
			
 
				+        </div>
			
 
				+      </div>
			
 
				+      {/* Connection dots */}
			
 
				+      <div className="absolute -top-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full border-2 bg-white" style={{ borderColor: typeConfig.color }} />
			
 
				+      <div className="absolute -bottom-1.5 left-1/2 -translate-x-1/2 w-3 h-3 rounded-full border-2 bg-white" style={{ borderColor: typeConfig.color }} />
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Edge SVG ─── */
			
 
				+function FlowEdgeLine({ edge, nodes }: { edge: FlowEdge; nodes: FlowNode[] }) {
			
 
				+  const source = nodes.find(n => n.id === edge.sourceId);
			
 
				+  const target = nodes.find(n => n.id === edge.targetId);
			
 
				+  if (!source || !target) return null;
			
 
				+
			
 
				+  const x1 = source.x + 88;
			
 
				+  const y1 = source.y + 58;
			
 
				+  const x2 = target.x + 88;
			
 
				+  const y2 = target.y;
			
 
				+  const midY = (y1 + y2) / 2;
			
 
				+
			
 
				+  return (
			
 
				+    <g>
			
 
				+      <path
			
 
				+        d={`M ${x1} ${y1} C ${x1} ${midY}, ${x2} ${midY}, ${x2} ${y2}`}
			
 
				+        fill="none"
			
 
				+        stroke="#d6d3d1"
			
 
				+        strokeWidth={2}
			
 
				+      />
			
 
				+      {edge.label && (
			
 
				+        <text
			
 
				+          x={(x1 + x2) / 2}
			
 
				+          y={midY - 6}
			
 
				+          textAnchor="middle"
			
 
				+          className="text-[9px] fill-stone-400"
			
 
				+          style={{ fontFamily: "'Source Sans 3', sans-serif" }}
			
 
				+        >
			
 
				+          {edge.label}
			
 
				+        </text>
			
 
				+      )}
			
 
				+    </g>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── AI Suggestions Panel ─── */
			
 
				+function AISuggestionsPanel() {
			
 
				+  const { data: suggestions, isLoading } = trpc.workflow.getSuggestions.useQuery({ workflowId: "default" });
			
 
				+  const generateMut = trpc.workflow.generateSuggestions.useMutation({
			
 
				+    onSuccess: () => toast.success("Suggestions generated"),
			
 
				+    onError: (err) => toast.error(err.message),
			
 
				+  });
			
 
				+  const reviewMut = trpc.workflow.reviewSuggestion.useMutation({
			
 
				+    onSuccess: () => toast.success("Suggestion updated"),
			
 
				+  });
			
 
				+
			
 
				+  const pending = suggestions?.filter((s: any) => s.status === "pending" || s.status === "waiting") || [];
			
 
				+
			
 
				+  return (
			
 
				+    <div className="p-3 space-y-2">
			
 
				+      <div className="flex items-center justify-between">
			
 
				+        <span className="text-[10px] font-bold uppercase tracking-wider" style={{ color: "#78716C" }}>AI Suggestions</span>
			
 
				+        <button
			
 
				+          onClick={() => generateMut.mutate({ workflowId: "default" })}
			
 
				+          disabled={generateMut.isPending}
			
 
				+          className="text-[10px] font-medium px-2 py-0.5 rounded-md transition-colors"
			
 
				+          style={{ color: "#7c3aed", background: "#7c3aed14" }}
			
 
				+        >
			
 
				+          {generateMut.isPending ? "Analyzing..." : "Generate"}
			
 
				+        </button>
			
 
				+      </div>
			
 
				+      {pending.length === 0 ? (
			
 
				+        <p className="text-[10px] italic" style={{ color: "#d6d3d1" }}>No pending suggestions</p>
			
 
				+      ) : (
			
 
				+        pending.map((s: any) => (
			
 
				+          <div key={s.id} className="p-2 rounded-lg border" style={{ borderColor: "#e7e0d5", background: "#fff" }}>
			
 
				+            <div className="flex items-center gap-1.5">
			
 
				+              <Sparkles className="w-3 h-3" style={{ color: "#7c3aed" }} />
			
 
				+              <span className="text-[11px] font-medium truncate" style={{ color: "#292524" }}>{s.label}</span>
			
 
				+            </div>
			
 
				+            <p className="text-[9px] mt-0.5" style={{ color: "#a8a29e" }}>{s.description}</p>
			
 
				+            <div className="flex gap-1 mt-1.5">
			
 
				+              <button
			
 
				+                onClick={() => reviewMut.mutate({ suggestionId: s.id, status: "approved" })}
			
 
				+                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-medium"
			
 
				+                style={{ background: "#14532D14", color: "#14532D" }}
			
 
				+              >
			
 
				+                <Check className="w-2.5 h-2.5" /> Approve
			
 
				+              </button>
			
 
				+              <button
			
 
				+                onClick={() => reviewMut.mutate({ suggestionId: s.id, status: "waiting" })}
			
 
				+                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-medium"
			
 
				+                style={{ background: "#ca8a0414", color: "#ca8a04" }}
			
 
				+              >
			
 
				+                <Clock className="w-2.5 h-2.5" /> Wait
			
 
				+              </button>
			
 
				+              <button
			
 
				+                onClick={() => reviewMut.mutate({ suggestionId: s.id, status: "declined" })}
			
 
				+                className="flex items-center gap-0.5 px-1.5 py-0.5 rounded text-[9px] font-medium"
			
 
				+                style={{ background: "#dc262614", color: "#dc2626" }}
			
 
				+              >
			
 
				+                <XCircle className="w-2.5 h-2.5" /> Decline
			
 
				+              </button>
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        ))
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
 
				+
			
 
				+/* ─── Main Component ─── */
			
 
				+export default function WorkflowDesigner() {
			
 
				+  const { user } = useAuth();
			
 
				+  const [viewMode, setViewMode] = useState<ViewMode>("gallery");
			
 
				+  const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
			
 
				+  const [selectedSubCategory, setSelectedSubCategory] = useState<string | null>(null);
			
 
				+  const [activeTemplate, setActiveTemplate] = useState<FlowTemplate | null>(null);
			
 
				+
			
 
				+  // Editor state
			
 
				+  const [nodes, setNodes] = useState<FlowNode[]>([]);
			
 
				+  const [edges, setEdges] = useState<FlowEdge[]>([]);
			
 
				+  const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
			
 
				+  const [dragState, setDragState] = useState<{ nodeId: string; offsetX: number; offsetY: number } | null>(null);
			
 
				+  const canvasRef = useRef<HTMLDivElement>(null);
			
 
				+
			
 
				+  const saveWorkflow = trpc.workflow.save.useMutation({
			
 
				+    onSuccess: () => toast.success("Workflow saved"),
			
 
				+    onError: (err) => toast.error(err.message),
			
 
				+  });
			
 
				+
			
 
				+  // Load workflow from server
			
 
				+  const { data: savedWorkflow } = trpc.workflow.load.useQuery({ workflowId: "default" });
			
 
				+
			
 
				+  // Drag handlers
			
 
				+  const handleDragStart = useCallback((nodeId: string, e: React.MouseEvent) => {
			
 
				+    const node = nodes.find(n => n.id === nodeId);
			
 
				+    if (!node) return;
			
 
				+    setDragState({ nodeId, offsetX: e.clientX - node.x, offsetY: e.clientY - node.y });
			
 
				+  }, [nodes]);
			
 
				+
			
 
				+  const handleMouseMove = useCallback((e: React.MouseEvent) => {
			
 
				+    if (!dragState) return;
			
 
				+    setNodes(prev => prev.map(n =>
			
 
				+      n.id === dragState.nodeId ? { ...n, x: e.clientX - dragState.offsetX, y: e.clientY - dragState.offsetY } : n
			
 
				+    ));
			
 
				+  }, [dragState]);
			
 
				+
			
 
				+  const handleMouseUp = useCallback(() => setDragState(null), []);
			
 
				+
			
 
				+  const addNode = (type: NodeType) => {
			
 
				+    const newNode: FlowNode = {
			
 
				+      id: `n_${Date.now()}`,
			
 
				+      type,
			
 
				+      label: type.replace("_", " ").replace(/\b\w/g, c => c.toUpperCase()),
			
 
				+      config: type === "greeting" ? {
			
 
				+        message: "👋 What can we help you with today?",
			
 
				+        quickReplies: ["Orders", "Shipping", "Returning", "Cancelling"],
			
 
				+        detectCustomerId: true,
			
 
				+        customerIdSource: "session",
			
 
				+      } : type === "guardrail" ? {
			
 
				+        blockedTopics: ["overall revenue", "profit margin", "internal pricing", "employee data"],
			
 
				+        blockedMessage: "I'm sorry, I can't share that information.",
			
 
				+      } : {},
			
 
				+      x: 300 + Math.random() * 100,
			
 
				+      y: 100 + nodes.length * 80,
			
 
				+    };
			
 
				+    setNodes(prev => [...prev, newNode]);
			
 
				+    setSelectedNodeId(newNode.id);
			
 
				+  };
			
 
				+
			
 
				+  const deleteNode = (nodeId: string) => {
			
 
				+    setNodes(prev => prev.filter(n => n.id !== nodeId));
			
 
				+    setEdges(prev => prev.filter(e => e.sourceId !== nodeId && e.targetId !== nodeId));
			
 
				+    if (selectedNodeId === nodeId) setSelectedNodeId(null);
			
 
				+  };
			
 
				+
			
 
				+  const workflowId = activeTemplate?.id || "default";
			
 
				+
			
 
				+  const handleSave = () => {
			
 
				+    saveWorkflow.mutate({
			
 
				+      workflowId,
			
 
				+      nodes: nodes.map(n => ({
			
 
				+        workflowId,
			
 
				+        nodeId: n.id,
			
 
				+        type: n.type,
			
 
				+        label: n.label,
			
 
				+        config: n.config,
			
 
				+        positionX: n.x,
			
 
				+        positionY: n.y,
			
 
				+      })),
			
 
				+      edges: edges.map(e => ({
			
 
				+        workflowId,
			
 
				+        sourceNodeId: e.sourceId,
			
 
				+        targetNodeId: e.targetId,
			
 
				+        label: e.label,
			
 
				+      })),
			
 
				+    });
			
 
				+  };
			
 
				+
			
 
				+  const loadTemplate = (template: FlowTemplate) => {
			
 
				+    setNodes(template.nodes);
			
 
				+    setEdges(template.edges);
			
 
				+    setActiveTemplate(template);
			
 
				+    setViewMode("editor");
			
 
				+  };
			
 
				+
			
 
				+  // Filter templates
			
 
				+  const filteredTemplates = useMemo(() => {
			
 
				+    let templates = FLOW_TEMPLATES;
			
 
				+    if (selectedCategory) templates = templates.filter(t => t.category === selectedCategory);
			
 
				+    if (selectedSubCategory) templates = templates.filter(t => t.subCategory === selectedSubCategory);
			
 
				+    return templates;
			
 
				+  }, [selectedCategory, selectedSubCategory]);
			
 
				+
			
 
				+  const selectedCategoryObj = FLOW_CATEGORIES.find(c => c.id === selectedCategory);
			
 
				+
			
 
				+  return (
			
 
				+    <div className="flex flex-col" style={{ height: "calc(100vh - 4rem)" }}>
			
 
				+      {/* Top toolbar */}
			
 
				+      <div className="border-b px-4 h-12 flex items-center justify-between shrink-0" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+        <div className="flex items-center gap-3">
			
 
				+          <div className="w-7 h-7 rounded-lg flex items-center justify-center" style={{ background: "#14532D" }}>
			
 
				+            <GitBranch className="w-3.5 h-3.5 text-white" />
			
 
				+          </div>
			
 
				+          <span className="text-sm font-bold" style={{ color: "#14532D", fontFamily: "'Playfair Display', serif" }}>Workflow Designer</span>
			
 
				+          {activeTemplate && viewMode === "editor" && (
			
 
				+            <>
			
 
				+              <ChevronRight className="w-3 h-3" style={{ color: "#a8a29e" }} />
			
 
				+              <span className="text-xs font-medium" style={{ color: "#78716C" }}>{activeTemplate.name}</span>
			
 
				+            </>
			
 
				+          )}
			
 
				+        </div>
			
 
				+        <div className="flex items-center gap-2">
			
 
				+          {viewMode === "editor" && (
			
 
				+            <>
			
 
				+              <Button onClick={() => { setViewMode("gallery"); setActiveTemplate(null); }} variant="outline" size="sm" className="text-xs">
			
 
				+                <FolderOpen className="w-3 h-3 mr-1" /> Templates
			
 
				+              </Button>
			
 
				+              <Button onClick={handleSave} size="sm" className="text-xs text-white" style={{ background: "#14532D" }} disabled={saveWorkflow.isPending}>
			
 
				+                <Save className="w-3 h-3 mr-1" /> {saveWorkflow.isPending ? "Saving..." : "Save"}
			
 
				+              </Button>
			
 
				+            </>
			
 
				+          )}
			
 
				+          {viewMode === "gallery" && (
			
 
				+            <Button onClick={() => { setNodes([]); setEdges([]); setActiveTemplate(null); setViewMode("editor"); }} size="sm" className="text-xs text-white" style={{ background: "#14532D" }}>
			
 
				+              <Plus className="w-3 h-3 mr-1" /> New Flow
			
 
				+            </Button>
			
 
				+          )}
			
 
				+        </div>
			
 
				+      </div>
			
 
				+
			
 
				+      {/* ─── Gallery View ─── */}
			
 
				+      {viewMode === "gallery" && (
			
 
				+        <div className="flex-1 flex min-h-0">
			
 
				+          {/* Left sidebar — Categories */}
			
 
				+          <div className="w-56 shrink-0 border-r overflow-y-auto" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+            <div className="p-3">
			
 
				+              <h3 className="text-[10px] font-bold uppercase tracking-wider mb-2" style={{ color: "#a8a29e" }}>Categories</h3>
			
 
				+              <button
			
 
				+                onClick={() => { setSelectedCategory(null); setSelectedSubCategory(null); }}
			
 
				+                className="w-full flex items-center gap-2 px-2 py-2 rounded-lg text-left mb-1 transition-colors"
			
 
				+                style={{
			
 
				+                  background: !selectedCategory ? "#14532D0A" : "transparent",
			
 
				+                  color: !selectedCategory ? "#14532D" : "#78716C",
			
 
				+                }}
			
 
				+              >
			
 
				+                <Layers className="w-4 h-4" />
			
 
				+                <span className="text-[12px] font-medium">All Flows</span>
			
 
				+                <span className="ml-auto text-[10px] px-1.5 py-0.5 rounded-full" style={{ background: "#f5f0e8", color: "#a8a29e" }}>
			
 
				+                  {FLOW_TEMPLATES.length}
			
 
				+                </span>
			
 
				+              </button>
			
 
				+
			
 
				+              {FLOW_CATEGORIES.map(cat => (
			
 
				+                <div key={cat.id}>
			
 
				+                  <button
			
 
				+                    onClick={() => { setSelectedCategory(cat.id); setSelectedSubCategory(null); }}
			
 
				+                    className="w-full flex items-center gap-2 px-2 py-2 rounded-lg text-left mb-0.5 transition-colors"
			
 
				+                    style={{
			
 
				+                      background: selectedCategory === cat.id ? `${cat.color}0A` : "transparent",
			
 
				+                      color: selectedCategory === cat.id ? cat.color : "#78716C",
			
 
				+                    }}
			
 
				+                  >
			
 
				+                    <div style={{ color: cat.color }}>{cat.icon}</div>
			
 
				+                    <span className="text-[12px] font-medium">{cat.label}</span>
			
 
				+                    <span className="ml-auto text-[10px] px-1.5 py-0.5 rounded-full" style={{ background: "#f5f0e8", color: "#a8a29e" }}>
			
 
				+                      {FLOW_TEMPLATES.filter(t => t.category === cat.id).length}
			
 
				+                    </span>
			
 
				+                  </button>
			
 
				+
			
 
				+                  {/* Sub-categories */}
			
 
				+                  {selectedCategory === cat.id && (
			
 
				+                    <div className="ml-4 mb-1 space-y-0.5">
			
 
				+                      {cat.subCategories.map(sub => (
			
 
				+                        <button
			
 
				+                          key={sub.id}
			
 
				+                          onClick={() => setSelectedSubCategory(selectedSubCategory === sub.id ? null : sub.id)}
			
 
				+                          className="w-full flex items-center gap-1.5 px-2 py-1.5 rounded-md text-left transition-colors"
			
 
				+                          style={{
			
 
				+                            background: selectedSubCategory === sub.id ? `${sub.color}0A` : "transparent",
			
 
				+                            color: selectedSubCategory === sub.id ? sub.color : "#a8a29e",
			
 
				+                          }}
			
 
				+                        >
			
 
				+                          <div style={{ color: sub.color }}>{sub.icon}</div>
			
 
				+                          <span className="text-[11px] font-medium">{sub.label}</span>
			
 
				+                        </button>
			
 
				+                      ))}
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+                </div>
			
 
				+              ))}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Right — Template cards */}
			
 
				+          <div className="flex-1 overflow-y-auto p-4" style={{ background: "#FFFBEB" }}>
			
 
				+            {/* Category header */}
			
 
				+            {selectedCategoryObj && (
			
 
				+              <div className="mb-4 p-4 rounded-xl border" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                <div className="flex items-center gap-3">
			
 
				+                  <div className="w-10 h-10 rounded-lg flex items-center justify-center" style={{ background: `${selectedCategoryObj.color}14`, color: selectedCategoryObj.color }}>
			
 
				+                    {selectedCategoryObj.icon}
			
 
				+                  </div>
			
 
				+                  <div>
			
 
				+                    <h2 className="text-base font-bold" style={{ color: "#292524", fontFamily: "'Playfair Display', serif" }}>{selectedCategoryObj.label}</h2>
			
 
				+                    <p className="text-xs" style={{ color: "#78716C" }}>{selectedCategoryObj.description}</p>
			
 
				+                  </div>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            )}
			
 
				+
			
 
				+            {/* Template grid */}
			
 
				+            <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
			
 
				+              {filteredTemplates.map(template => {
			
 
				+                const cat = FLOW_CATEGORIES.find(c => c.id === template.category);
			
 
				+                const sub = cat?.subCategories.find(s => s.id === template.subCategory);
			
 
				+                return (
			
 
				+                  <div key={template.id} className="p-4 rounded-xl border transition-shadow hover:shadow-md" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                    <div className="flex items-start gap-3">
			
 
				+                      <div className="w-10 h-10 rounded-lg flex items-center justify-center shrink-0" style={{ background: sub ? `${sub.color}14` : "#f5f0e8", color: sub?.color || "#78716C" }}>
			
 
				+                        {sub?.icon || <GitBranch className="w-4 h-4" />}
			
 
				+                      </div>
			
 
				+                      <div className="flex-1 min-w-0">
			
 
				+                        <h3 className="text-sm font-semibold" style={{ color: "#292524" }}>{template.name}</h3>
			
 
				+                        <p className="text-[11px] mt-0.5" style={{ color: "#78716C" }}>{template.description}</p>
			
 
				+                        <div className="flex items-center gap-1.5 mt-2">
			
 
				+                          {sub && (
			
 
				+                            <span className="text-[9px] px-1.5 py-0.5 rounded-full capitalize" style={{ background: `${sub.color}14`, color: sub.color }}>
			
 
				+                              {sub.label}
			
 
				+                            </span>
			
 
				+                          )}
			
 
				+                          {template.tags.map(tag => (
			
 
				+                            <span key={tag} className="text-[9px] px-1.5 py-0.5 rounded-full capitalize" style={{ background: "#f5f0e8", color: "#a8a29e" }}>
			
 
				+                              {tag}
			
 
				+                            </span>
			
 
				+                          ))}
			
 
				+                          <span className="text-[9px]" style={{ color: "#d6d3d1" }}>{template.nodes.length} nodes</span>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                    </div>
			
 
				+                    <div className="flex gap-2 mt-3 pt-3 border-t" style={{ borderColor: "#f5f0e8" }}>
			
 
				+                      <Button onClick={() => loadTemplate(template)} size="sm" className="flex-1 text-xs text-white" style={{ background: sub?.color || "#14532D" }}>
			
 
				+                        <Play className="w-3 h-3 mr-1" /> Use Template
			
 
				+                      </Button>
			
 
				+                      <Button onClick={() => { setActiveTemplate(template); setViewMode("editor"); setNodes(template.nodes); setEdges(template.edges); }} variant="outline" size="sm" className="text-xs">
			
 
				+                        <Eye className="w-3 h-3 mr-1" /> Preview
			
 
				+                      </Button>
			
 
				+                    </div>
			
 
				+                  </div>
			
 
				+                );
			
 
				+              })}
			
 
				+
			
 
				+              {filteredTemplates.length === 0 && (
			
 
				+                <div className="col-span-2 text-center py-12">
			
 
				+                  <FolderOpen className="w-10 h-10 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+                  <p className="text-sm" style={{ color: "#78716C" }}>No templates in this category yet</p>
			
 
				+                  <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>Create a new flow or select a different category</p>
			
 
				+                </div>
			
 
				+              )}
			
 
				+            </div>
			
 
				+          </div>
			
 
				+        </div>
			
 
				+      )}
			
 
				+
			
 
				+      {/* ─── Editor View ─── */}
			
 
				+      {viewMode === "editor" && (
			
 
				+        <div className="flex-1 flex min-h-0">
			
 
				+          {/* Left sidebar — Node palette & AI suggestions */}
			
 
				+          <div className="w-56 shrink-0 border-r overflow-y-auto" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+            <div className="p-3">
			
 
				+              <h3 className="text-[10px] font-bold uppercase tracking-wider mb-2" style={{ color: "#a8a29e" }}>Add Node</h3>
			
 
				+              <div className="space-y-1">
			
 
				+                {(Object.entries(NODE_TYPES) as [NodeType, typeof NODE_TYPES[NodeType]][]).map(([type, config]) => (
			
 
				+                  <button
			
 
				+                    key={type}
			
 
				+                    onClick={() => addNode(type)}
			
 
				+                    className="w-full flex items-center gap-2 px-2 py-1.5 rounded-lg text-left hover:bg-black/5 transition-colors"
			
 
				+                  >
			
 
				+                    <div className="w-6 h-6 rounded-md flex items-center justify-center" style={{ background: config.bgColor, color: config.color }}>
			
 
				+                      {config.icon}
			
 
				+                    </div>
			
 
				+                    <div className="min-w-0">
			
 
				+                      <span className="text-[11px] font-medium capitalize block" style={{ color: "#292524" }}>{type.replace("_", " ")}</span>
			
 
				+                    </div>
			
 
				+                  </button>
			
 
				+                ))}
			
 
				+              </div>
			
 
				+            </div>
			
 
				+
			
 
				+            {/* AI Suggestions */}
			
 
				+            <div className="border-t" style={{ borderColor: "#e7e0d5" }}>
			
 
				+              <AISuggestionsPanel />
			
 
				+            </div>
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Canvas */}
			
 
				+          <div
			
 
				+            ref={canvasRef}
			
 
				+            className="flex-1 relative overflow-auto cursor-crosshair"
			
 
				+            style={{ background: "#FFFBEB", backgroundImage: "radial-gradient(circle, #e7e0d5 1px, transparent 1px)", backgroundSize: "24px 24px" }}
			
 
				+            onMouseMove={handleMouseMove}
			
 
				+            onMouseUp={handleMouseUp}
			
 
				+            onMouseLeave={handleMouseUp}
			
 
				+            onClick={() => setSelectedNodeId(null)}
			
 
				+          >
			
 
				+            {/* Edges SVG */}
			
 
				+            <svg className="absolute inset-0 w-full h-full pointer-events-none" style={{ minWidth: 1200, minHeight: 800 }}>
			
 
				+              {edges.map(edge => (
			
 
				+                <FlowEdgeLine key={edge.id} edge={edge} nodes={nodes} />
			
 
				+              ))}
			
 
				+            </svg>
			
 
				+
			
 
				+            {/* Nodes */}
			
 
				+            {nodes.map(node => (
			
 
				+              <FlowNodeCard
			
 
				+                key={node.id}
			
 
				+                node={node}
			
 
				+                isSelected={selectedNodeId === node.id}
			
 
				+                onSelect={() => setSelectedNodeId(node.id)}
			
 
				+                onDragStart={(e) => handleDragStart(node.id, e)}
			
 
				+              />
			
 
				+            ))}
			
 
				+
			
 
				+            {nodes.length === 0 && (
			
 
				+              <div className="absolute inset-0 flex items-center justify-center">
			
 
				+                <div className="text-center">
			
 
				+                  <GitBranch className="w-12 h-12 mx-auto mb-3" style={{ color: "#d6d3d1" }} />
			
 
				+                  <p className="text-sm" style={{ color: "#78716C" }}>Empty canvas</p>
			
 
				+                  <p className="text-xs mt-1" style={{ color: "#a8a29e" }}>Add nodes from the sidebar or load a template</p>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            )}
			
 
				+          </div>
			
 
				+
			
 
				+          {/* Right sidebar — Node properties */}
			
 
				+          {selectedNodeId && (() => {
			
 
				+            const node = nodes.find(n => n.id === selectedNodeId);
			
 
				+            if (!node) return null;
			
 
				+            const typeConfig = NODE_TYPES[node.type];
			
 
				+            return (
			
 
				+              <div className="w-64 shrink-0 border-l overflow-y-auto" style={{ background: "#fff", borderColor: "#e7e0d5" }}>
			
 
				+                <div className="p-3 border-b flex items-center justify-between" style={{ borderColor: "#e7e0d5" }}>
			
 
				+                  <div className="flex items-center gap-2">
			
 
				+                    <div style={{ color: typeConfig.color }}>{typeConfig.icon}</div>
			
 
				+                    <span className="text-xs font-bold" style={{ color: "#292524" }}>{node.label}</span>
			
 
				+                  </div>
			
 
				+                  <button onClick={() => deleteNode(node.id)} className="p-1 rounded hover:bg-red-50">
			
 
				+                    <Trash2 className="w-3 h-3" style={{ color: "#dc2626" }} />
			
 
				+                  </button>
			
 
				+                </div>
			
 
				+                <div className="p-3 space-y-3">
			
 
				+                  {/* Label */}
			
 
				+                  <div>
			
 
				+                    <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Label</label>
			
 
				+                    <input
			
 
				+                      type="text"
			
 
				+                      value={node.label}
			
 
				+                      onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, label: e.target.value } : n))}
			
 
				+                      className="mt-1 w-full px-2 py-1.5 text-xs rounded-lg border"
			
 
				+                      style={{ borderColor: "#e7e0d5" }}
			
 
				+                    />
			
 
				+                  </div>
			
 
				+
			
 
				+                  {/* Greeting-specific: Quick Replies */}
			
 
				+                  {node.type === "greeting" && (
			
 
				+                    <>
			
 
				+                      <div>
			
 
				+                        <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Message</label>
			
 
				+                        <textarea
			
 
				+                          value={node.config.message || ""}
			
 
				+                          onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, message: e.target.value } } : n))}
			
 
				+                          className="mt-1 w-full px-2 py-1.5 text-xs rounded-lg border resize-none"
			
 
				+                          rows={2}
			
 
				+                          style={{ borderColor: "#e7e0d5" }}
			
 
				+                        />
			
 
				+                      </div>
			
 
				+                      <div>
			
 
				+                        <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Quick Reply Buttons</label>
			
 
				+                        <div className="mt-1 space-y-1">
			
 
				+                          {(node.config.quickReplies || []).map((reply: string, i: number) => (
			
 
				+                            <div key={i} className="flex items-center gap-1">
			
 
				+                              <input
			
 
				+                                type="text"
			
 
				+                                value={reply}
			
 
				+                                onChange={(e) => {
			
 
				+                                  const updated = [...(node.config.quickReplies || [])];
			
 
				+                                  updated[i] = e.target.value;
			
 
				+                                  setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, quickReplies: updated } } : n));
			
 
				+                                }}
			
 
				+                                className="flex-1 px-2 py-1 text-[11px] rounded border"
			
 
				+                                style={{ borderColor: "#e7e0d5" }}
			
 
				+                              />
			
 
				+                              <button
			
 
				+                                onClick={() => {
			
 
				+                                  const updated = (node.config.quickReplies || []).filter((_: any, idx: number) => idx !== i);
			
 
				+                                  setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, quickReplies: updated } } : n));
			
 
				+                                }}
			
 
				+                                className="p-0.5 rounded hover:bg-red-50"
			
 
				+                              >
			
 
				+                                <X className="w-3 h-3" style={{ color: "#dc2626" }} />
			
 
				+                              </button>
			
 
				+                            </div>
			
 
				+                          ))}
			
 
				+                          <button
			
 
				+                            onClick={() => {
			
 
				+                              const updated = [...(node.config.quickReplies || []), "New Option"];
			
 
				+                              setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, quickReplies: updated } } : n));
			
 
				+                            }}
			
 
				+                            className="text-[10px] font-medium px-2 py-1 rounded-md"
			
 
				+                            style={{ color: "#14532D", background: "#14532D14" }}
			
 
				+                          >
			
 
				+                            + Add Button
			
 
				+                          </button>
			
 
				+                        </div>
			
 
				+                      </div>
			
 
				+                      <div className="flex items-center gap-2">
			
 
				+                        <input
			
 
				+                          type="checkbox"
			
 
				+                          checked={node.config.detectCustomerId || false}
			
 
				+                          onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, detectCustomerId: e.target.checked } } : n))}
			
 
				+                          className="rounded"
			
 
				+                        />
			
 
				+                        <span className="text-[11px]" style={{ color: "#292524" }}>Auto-detect Customer ID</span>
			
 
				+                      </div>
			
 
				+                    </>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* Guardrail-specific */}
			
 
				+                  {node.type === "guardrail" && (
			
 
				+                    <div>
			
 
				+                      <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Blocked Topics</label>
			
 
				+                      <textarea
			
 
				+                        value={(node.config.blockedTopics || []).join("\n")}
			
 
				+                        onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, blockedTopics: e.target.value.split("\n").filter(Boolean) } } : n))}
			
 
				+                        className="mt-1 w-full px-2 py-1.5 text-xs rounded-lg border resize-none"
			
 
				+                        rows={4}
			
 
				+                        placeholder="One topic per line"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* Response message */}
			
 
				+                  {(node.type === "response" || node.type === "escalation") && (
			
 
				+                    <div>
			
 
				+                      <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>Message</label>
			
 
				+                      <textarea
			
 
				+                        value={node.config.message || ""}
			
 
				+                        onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, message: e.target.value } } : n))}
			
 
				+                        className="mt-1 w-full px-2 py-1.5 text-xs rounded-lg border resize-none"
			
 
				+                        rows={3}
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  {/* API endpoint for data nodes */}
			
 
				+                  {(node.type === "customer_data" || node.type === "sales_order" || node.type === "action") && (
			
 
				+                    <div>
			
 
				+                      <label className="text-[10px] font-semibold uppercase tracking-wider" style={{ color: "#a8a29e" }}>API Endpoint</label>
			
 
				+                      <input
			
 
				+                        type="text"
			
 
				+                        value={node.config.apiEndpoint || ""}
			
 
				+                        onChange={(e) => setNodes(prev => prev.map(n => n.id === node.id ? { ...n, config: { ...n.config, apiEndpoint: e.target.value } } : n))}
			
 
				+                        className="mt-1 w-full px-2 py-1.5 text-xs rounded-lg border font-mono"
			
 
				+                        style={{ borderColor: "#e7e0d5" }}
			
 
				+                      />
			
 
				+                    </div>
			
 
				+                  )}
			
 
				+
			
 
				+                  <p className="text-[10px] italic" style={{ color: "#d6d3d1" }}>{typeConfig.description}</p>
			
 
				+                </div>
			
 
				+              </div>
			
 
				+            );
			
 
				+          })()}
			
 
				+        </div>
			
 
				+      )}
			
 
				+    </div>
			
 
				+  );
			
 
				+}
			
--- a/components.json
+++ b/components.json
@@ -0,0 +1,19 @@
 
				+{
			
 
				+  "$schema": "https://ui.shadcn.com/schema.json",
			
 
				+  "style": "new-york",
			
 
				+  "rsc": false,
			
 
				+  "tsx": true,
			
 
				+  "tailwind": {
			
 
				+    "css": "client/src/index.css",
			
 
				+    "baseColor": "neutral",
			
 
				+    "cssVariables": true,
			
 
				+    "prefix": ""
			
 
				+  },
			
 
				+  "aliases": {
			
 
				+    "components": "@/components",
			
 
				+    "utils": "@/lib/utils",
			
 
				+    "ui": "@/components/ui",
			
 
				+    "lib": "@/lib",
			
 
				+    "hooks": "@/hooks"
			
 
				+  }
			
 
				+}
			
--- a/drizzle.config.ts
+++ b/drizzle.config.ts
@@ -0,0 +1,15 @@
 
				+import { defineConfig } from "drizzle-kit";
			
 
				+
			
 
				+const connectionString = process.env.DATABASE_URL;
			
 
				+if (!connectionString) {
			
 
				+  throw new Error("DATABASE_URL is required to run drizzle commands");
			
 
				+}
			
 
				+
			
 
				+export default defineConfig({
			
 
				+  schema: "./drizzle/schema.ts",
			
 
				+  out: "./drizzle",
			
 
				+  dialect: "postgresql",
			
 
				+  dbCredentials: {
			
 
				+    url: connectionString,
			
 
				+  },
			
 
				+});
			
--- a/drizzle/0000_stormy_crystal.sql
+++ b/drizzle/0000_stormy_crystal.sql
@@ -0,0 +1,13 @@
 
				+CREATE TABLE `users` (
			
 
				+	`id` int AUTO_INCREMENT NOT NULL,
			
 
				+	`openId` varchar(64) NOT NULL,
			
 
				+	`name` text,
			
 
				+	`email` varchar(320),
			
 
				+	`loginMethod` varchar(64),
			
 
				+	`role` enum('user','admin') NOT NULL DEFAULT 'user',
			
 
				+	`createdAt` timestamp NOT NULL DEFAULT (now()),
			
 
				+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
			
 
				+	`lastSignedIn` timestamp NOT NULL DEFAULT (now()),
			
 
				+	CONSTRAINT `users_id` PRIMARY KEY(`id`),
			
 
				+	CONSTRAINT `users_openId_unique` UNIQUE(`openId`)
			
 
				+);
			
--- a/drizzle/0001_huge_sway.sql
+++ b/drizzle/0001_huge_sway.sql
@@ -0,0 +1,48 @@
 
				+CREATE TABLE `conversations` (
			
 
				+	`id` int AUTO_INCREMENT NOT NULL,
			
 
				+	`sessionId` varchar(64) NOT NULL,
			
 
				+	`visitorName` varchar(255),
			
 
				+	`visitorEmail` varchar(320),
			
 
				+	`status` enum('active','escalated','resolved','closed') NOT NULL DEFAULT 'active',
			
 
				+	`assignedAgentId` int,
			
 
				+	`metadata` json,
			
 
				+	`createdAt` timestamp NOT NULL DEFAULT (now()),
			
 
				+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
			
 
				+	CONSTRAINT `conversations_id` PRIMARY KEY(`id`),
			
 
				+	CONSTRAINT `conversations_sessionId_unique` UNIQUE(`sessionId`)
			
 
				+);
			
 
				+--> statement-breakpoint
			
 
				+CREATE TABLE `messages` (
			
 
				+	`id` int AUTO_INCREMENT NOT NULL,
			
 
				+	`conversationId` int NOT NULL,
			
 
				+	`sender` enum('visitor','bot','agent') NOT NULL,
			
 
				+	`content` text NOT NULL,
			
 
				+	`metadata` json,
			
 
				+	`createdAt` timestamp NOT NULL DEFAULT (now()),
			
 
				+	CONSTRAINT `messages_id` PRIMARY KEY(`id`)
			
 
				+);
			
 
				+--> statement-breakpoint
			
 
				+CREATE TABLE `workflow_edges` (
			
 
				+	`id` int AUTO_INCREMENT NOT NULL,
			
 
				+	`workflowId` varchar(64) NOT NULL,
			
 
				+	`sourceNodeId` varchar(64) NOT NULL,
			
 
				+	`targetNodeId` varchar(64) NOT NULL,
			
 
				+	`label` varchar(255),
			
 
				+	`condition` json,
			
 
				+	`createdAt` timestamp NOT NULL DEFAULT (now()),
			
 
				+	CONSTRAINT `workflow_edges_id` PRIMARY KEY(`id`)
			
 
				+);
			
 
				+--> statement-breakpoint
			
 
				+CREATE TABLE `workflow_nodes` (
			
 
				+	`id` int AUTO_INCREMENT NOT NULL,
			
 
				+	`workflowId` varchar(64) NOT NULL,
			
 
				+	`nodeId` varchar(64) NOT NULL,
			
 
				+	`type` enum('greeting','intent','response','condition','escalation','action','end') NOT NULL,
			
 
				+	`label` varchar(255) NOT NULL,
			
 
				+	`config` json,
			
 
				+	`positionX` int NOT NULL DEFAULT 0,
			
 
				+	`positionY` int NOT NULL DEFAULT 0,
			
 
				+	`createdAt` timestamp NOT NULL DEFAULT (now()),
			
 
				+	`updatedAt` timestamp NOT NULL DEFAULT (now()) ON UPDATE CURRENT_TIMESTAMP,
			
 
				+	CONSTRAINT `workflow_nodes_id` PRIMARY KEY(`id`)
			
 
				+);