Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+src/app/favicon.ico filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -0,0 +1,50 @@
+# AmaniQuery Frontend - Hugging Face Spaces Dockerfile
+# Next.js frontend
+
+# Build stage
+FROM node:20-alpine AS builder
+
+WORKDIR /app
+
+# Environment for build
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV NODE_ENV=production
+
+# Copy package files
+COPY package*.json ./
+
+# Install dependencies
+RUN npm ci
+
+# Copy source
+COPY . .
+
+# Build Next.js app
+RUN npm run build
+
+# Production stage
+FROM node:20-alpine AS runner
+
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=3000
+
+# Create non-root user
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+# Copy built assets
+COPY --from=builder /app/public ./public
+COPY --from=builder /app/.next/standalone ./
+COPY --from=builder /app/.next/static ./.next/static
+
+USER nextjs
+
+# HF Spaces PORT
+EXPOSE 3000
+
+ENV HOSTNAME="0.0.0.0"
+
+CMD ["node", "server.js"]

README.md

@@ -1,10 +1,26 @@
----
-title: Amaniquery Frontend
-emoji: 📈
-colorFrom: yellow
-colorTo: indigo
-sdk: docker
-pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---
+title: AmaniQuery
+emoji: 🔍
+colorFrom: blue
+colorTo: green
+sdk: docker
+app_port: 3000
+pinned: true
+---
+
+# AmaniQuery Frontend
+
+AI-Powered Legal & Policy Research Assistant for Kenya.
+
+## Features
+
+- 🔍 Natural language search for Kenyan laws and bills
+- 💬 Chat with AI about legal documents
+- 🎤 Voice interface for queries
+- 📊 Research reports and analysis
+- 🔐 User authentication and saved chats
+
+## API Backend
+
+This frontend connects to:
+- Backend API: `https://amaniquery-backend.hf.space`

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/app/globals.css",
+    "baseColor": "zinc",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

jsconfig.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src/**/*"]
+}
+

next.config.ts

@@ -0,0 +1,18 @@
+import type { NextConfig } from "next";
+
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: 'res.cloudinary.com',
+        pathname: '/**',
+      },
+    ],
+  },
+
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,60 @@
+{
+  "name": "frontend",
+  "version": "0.3.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build --webpack",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-label": "^2.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-progress": "^1.1.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@tailwindcss/postcss": "^4.1.17",
+    "@upstash/redis": "^1.35.7",
+    "@vercel/analytics": "^1.6.1",
+    "@vercel/speed-insights": "^1.2.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.23.26",
+    "livekit-client": "^2.16.0",
+    "livekit-server-sdk": "^2.14.2",
+    "lucide-react": "^0.554.0",
+    "next": "16.0.10",
+    "next-themes": "^0.4.6",
+    "react": "19.2.3",
+    "react-diff-viewer-continued": "^3.4.0",
+    "react-dom": "19.2.3",
+    "react-markdown": "^10.1.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^4.1.17"
+  },
+  "devDependencies": {
+    "@types/node": "^22",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "autoprefixer": "^10.4.20",
+    "baseline-browser-mapping": "^2.9.4",
+    "eslint": "^9",
+    "eslint-config-next": "16.0.10",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^4.1.17",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};
+
+export default config;

src/app/admin/agent-monitoring/page.tsx

@@ -0,0 +1,17 @@
+"use client"
+
+import { AgentMonitoring } from "@/components/AgentMonitoring"
+import { AdminSidebar } from "@/components/admin-sidebar"
+
+export default function AgentMonitoringPage() {
+  return (
+    <>
+      <AdminSidebar />
+      <div className="ml-0 md:ml-5 transition-all duration-300">
+        <div className="container mx-auto py-6 px-4">
+          <AgentMonitoring />
+        </div>
+      </div>
+    </>
+  )
+}

src/app/admin/analytics/page.tsx

@@ -0,0 +1,364 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/lib/auth-context"
+import { AdminSidebar } from "@/components/admin-sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "sonner"
+import {
+  Activity,
+  Users,
+  BarChart3,
+  Loader2,
+  Globe,
+  Key,
+} from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+interface AnalyticsData {
+  total_users: number
+  total_integrations: number
+  total_api_keys: number
+  total_requests_today: number
+  total_requests_this_week: number
+  total_requests_this_month: number
+  total_cost_today: number
+  total_cost_this_week: number
+  total_cost_this_month: number
+  top_users: Array<{ user_id: string; email: string; request_count: number }>
+  top_integrations: Array<{ integration_id: string; name: string; request_count: number }>
+  top_endpoints: Array<{ endpoint: string; request_count: number }>
+  requests_over_time: Array<{ date: string; count: number }>
+}
+
+function FeedbackTrainingMetrics() {
+  const [metrics, setMetrics] = useState<any>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchMetrics = async () => {
+      try {
+        const [feedbackRes, trainingRes, clusterRes] = await Promise.all([
+          fetch("/api/v1/feedback/analytics"),
+          fetch("/api/v1/finetuning/stats"),
+          fetch("/api/v1/clusters/stats")
+        ])
+
+        const data = {
+          feedback: feedbackRes.ok ? await feedbackRes.json() : null,
+          training: trainingRes.ok ? await trainingRes.json() : null,
+          clusters: clusterRes.ok ? await clusterRes.json() : null
+        }
+
+        setMetrics(data)
+      } catch (error) {
+        console.error("Failed to fetch continuous learning metrics:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    fetchMetrics()
+  }, [])
+
+  if (loading) {
+    return (
+      <div className="flex justify-center py-6">
+        <Loader2 className="w-6 h-6 animate-spin" />
+      </div>
+    )
+  }
+
+  if (!metrics) return null
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+      <Card className="border-l-4 border-l-blue-500">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Total Feedback</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {metrics.feedback?.feedback_distribution?.total || 0}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {metrics.feedback?.feedback_distribution?.positive_rate?.toFixed(1)}% positive
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-l-4 border-l-green-500">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Training Ready</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {metrics.training?.kept_for_training || 0}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            Avg: {metrics.training?.average_score?.toFixed(2) || "N/A"}
+          </p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-l-4 border-l-orange-500">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Pending Export</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {metrics.training?.awaiting_export || 0}
+          </div>
+          <p className="text-xs text-muted-foreground">Ready for fine-tuning</p>
+        </CardContent>
+      </Card>
+
+      <Card className="border-l-4 border-l-purple-500">
+        <CardHeader className="pb-2">
+          <CardTitle className="text-sm font-medium">Task Clusters</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="text-2xl font-bold">
+            {metrics.clusters?.active_clusters || 0}
+          </div>
+          <p className="text-xs text-muted-foreground">
+            {metrics.clusters?.total_queries_classified || 0} queries classified
+          </p>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+
+export default function AdminAnalyticsPage() {
+  const { isAuthenticated, isAdmin, loading } = useAuth()
+  const router = useRouter()
+  const [analytics, setAnalytics] = useState<AnalyticsData | null>(null)
+  const [loadingAnalytics, setLoadingAnalytics] = useState(true)
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/admin/analytics")
+    } else if (!loading && isAuthenticated && !isAdmin) {
+      router.push("/chat")
+    }
+  }, [isAuthenticated, isAdmin, loading, router])
+
+  useEffect(() => {
+    if (isAuthenticated && isAdmin) {
+      fetchAnalytics()
+    }
+  }, [isAuthenticated, isAdmin])
+
+  const fetchAnalytics = async () => {
+    setLoadingAnalytics(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`/api/cache/admin/analytics`, {
+        headers: {
+          "X-Session-Token": sessionToken || "",
+        },
+      })
+
+      if (response.ok) {
+        const data = await response.json()
+        setAnalytics(data)
+        const cacheStatus = response.headers.get("X-Cache")
+        if (cacheStatus) console.log(`Analytics cache: ${cacheStatus}`)
+      } else {
+        toast.error("Failed to fetch analytics")
+      }
+    } catch {
+      toast.error("Failed to fetch analytics")
+    } finally {
+      setLoadingAnalytics(false)
+    }
+  }
+
+  if (loading || !isAuthenticated || !isAdmin) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <AdminSidebar />
+      <div className="flex-1 ml-0 md:ml-[20px] p-4 md:p-6">
+        <div className="absolute top-4 right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <div className="max-w-7xl mx-auto space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <BarChart3 className="w-8 h-8" />
+              Analytics Dashboard
+            </h1>
+            <p className="text-muted-foreground">System usage and performance metrics</p>
+          </div>
+
+          {loadingAnalytics ? (
+            <div className="flex items-center justify-center py-12">
+              <Loader2 className="w-6 h-6 animate-spin text-primary" />
+            </div>
+          ) : analytics ? (
+            <>
+              {/* AmaniQ Continuous Learning Metrics */}
+              <div className="mb-6">
+                <h2 className="text-xl font-semibold mb-4">AmaniQ Continuous Learning</h2>
+                <FeedbackTrainingMetrics />
+              </div>
+
+              {/* Original System Analytics */}
+              {/* Overview Stats */}
+              <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Total Users</CardTitle>
+                    <Users className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_users}</div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Integrations</CardTitle>
+                    <Globe className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_integrations}</div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">API Keys</CardTitle>
+                    <Key className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_api_keys}</div>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+                    <CardTitle className="text-sm font-medium">Requests Today</CardTitle>
+                    <Activity className="h-4 w-4 text-muted-foreground" />
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_requests_today}</div>
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Request Stats */}
+              <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">This Week</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_requests_this_week}</div>
+                    <p className="text-xs text-muted-foreground">Requests</p>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">This Month</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">{analytics.total_requests_this_month}</div>
+                    <p className="text-xs text-muted-foreground">Requests</p>
+                  </CardContent>
+                </Card>
+
+                <Card>
+                  <CardHeader>
+                    <CardTitle className="text-sm font-medium">Cost This Month</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="text-2xl font-bold">
+                      ${analytics.total_cost_this_month.toFixed(2)}
+                    </div>
+                    <p className="text-xs text-muted-foreground">Total cost</p>
+                  </CardContent>
+                </Card>
+              </div>
+
+              {/* Top Users */}
+              {analytics.top_users && analytics.top_users.length > 0 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Top Users</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      {analytics.top_users.slice(0, 10).map((user, index) => (
+                        <div
+                          key={user.user_id}
+                          className="flex items-center justify-between p-2 rounded-lg hover:bg-accent"
+                        >
+                          <div className="flex items-center gap-3">
+                            <Badge variant="outline">{index + 1}</Badge>
+                            <span className="font-medium">{user.email}</span>
+                          </div>
+                          <span className="text-sm text-muted-foreground">
+                            {user.request_count} requests
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+
+              {/* Top Endpoints */}
+              {analytics.top_endpoints && analytics.top_endpoints.length > 0 && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>Top Endpoints</CardTitle>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="space-y-2">
+                      {analytics.top_endpoints.slice(0, 10).map((endpoint, index) => (
+                        <div
+                          key={endpoint.endpoint}
+                          className="flex items-center justify-between p-2 rounded-lg hover:bg-accent"
+                        >
+                          <div className="flex items-center gap-3">
+                            <Badge variant="outline">{index + 1}</Badge>
+                            <code className="text-sm font-mono">{endpoint.endpoint}</code>
+                          </div>
+                          <span className="text-sm text-muted-foreground">
+                            {endpoint.request_count} requests
+                          </span>
+                        </div>
+                      ))}
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </>
+          ) : (
+            <Card>
+              <CardContent className="py-12 text-center text-muted-foreground">
+                No analytics data available
+              </CardContent>
+            </Card>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/app/admin/blog/page.tsx

@@ -0,0 +1,1007 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { AdminSidebar } from "@/components/admin-sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { BlogEditor } from "@/components/blog-editor"
+import { useAuth } from "@/lib/auth-context"
+import {
+  Plus,
+  Edit,
+  Trash2,
+  Eye,
+  Save,
+  X,
+  Upload,
+  FileText,
+  Tag,
+  Folder,
+} from "lucide-react"
+import Link from "next/link"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+const getAuthHeaders = (): Record<string, string> => {
+  const token = localStorage.getItem("session_token")
+  const headers: Record<string, string> = {}
+  if (token) {
+    headers["X-Session-Token"] = token
+  }
+  return headers
+}
+
+/**
+ * Removes keys with empty string values from the payload.
+ * This ensures optional fields like slug and featured_image_url
+ * are not sent as empty strings, which would fail backend validation.
+ */
+const cleanPostPayload = (payload: Record<string, unknown>): Record<string, unknown> => {
+  const cleaned: Record<string, unknown> = {}
+  for (const [key, value] of Object.entries(payload)) {
+    // Keep the key if it's not an empty string
+    // Arrays are always included (even if empty)
+    if (value !== "" || Array.isArray(value)) {
+      cleaned[key] = value
+    }
+  }
+  return cleaned
+}
+
+interface BlogPost {
+  id: string
+  title: string
+  slug: string
+  markdown_content?: string
+  html_content?: string
+  excerpt?: string
+  post_type: string
+  status: string
+  featured_image_url?: string
+  author: {
+    id: string
+    name?: string
+    email: string
+  }
+  categories: Array<{ id: string; name: string; slug: string }>
+  tags: Array<{ id: string; name: string; slug: string }>
+  published_at?: string
+  created_at: string
+}
+
+interface Category {
+  id: string
+  name: string
+  slug: string
+  description?: string
+}
+
+interface Tag {
+  id: string
+  name: string
+  slug: string
+}
+
+export default function AdminBlogPage() {
+  const { isAuthenticated, isAdmin, loading } = useAuth()
+  const router = useRouter()
+  const [posts, setPosts] = useState<BlogPost[]>([])
+  const [categories, setCategories] = useState<Category[]>([])
+  const [tags, setTags] = useState<Tag[]>([])
+  const [loadingData, setLoadingData] = useState(true)
+  const [activeTab, setActiveTab] = useState<"posts" | "categories" | "tags">("posts")
+  const [editingPost, setEditingPost] = useState<BlogPost | null>(null)
+  const [editingCategory, setEditingCategory] = useState<Category | null>(null)
+  const [editingTag, setEditingTag] = useState<Tag | null>(null)
+  const [showPostForm, setShowPostForm] = useState(false)
+  const [postSubmitting, setPostSubmitting] = useState(false) // loading state for create/update
+
+  // Post form state
+  const [postForm, setPostForm] = useState({
+    title: "",
+    slug: "",
+    markdown_content: "",
+    html_content: "",
+    excerpt: "",
+    post_type: "news",
+    status: "draft",
+    featured_image_url: "",
+    category_ids: [] as string[],
+    tag_ids: [] as string[],
+  })
+
+  // Category form state
+  const [categoryForm, setCategoryForm] = useState({
+    name: "",
+    slug: "",
+    description: "",
+  })
+
+  // Tag form state
+  const [tagForm, setTagForm] = useState({
+    name: "",
+    slug: "",
+  })
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/admin/blog")
+    } else if (!loading && isAuthenticated && !isAdmin) {
+      router.push("/chat")
+    }
+  }, [isAuthenticated, isAdmin, loading, router])
+
+  useEffect(() => {
+    if (isAuthenticated && isAdmin) {
+      fetchPosts()
+      fetchCategories()
+      fetchTags()
+    }
+  }, [isAuthenticated, isAdmin])
+
+  const fetchPosts = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts?page=1&page_size=100`, {
+        headers: getAuthHeaders(),
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setPosts(data.posts || [])
+      }
+    } catch (error) {
+      console.error("Failed to fetch posts:", error)
+    } finally {
+      setLoadingData(false)
+    }
+  }
+
+  const fetchCategories = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/categories`)
+      if (response.ok) {
+        const data = await response.json()
+        setCategories(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error)
+    }
+  }
+
+  const fetchTags = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/tags`)
+      if (response.ok) {
+        const data = await response.json()
+        setTags(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch tags:", error)
+    }
+  }
+
+  const handleCreatePost = async () => {
+    setPostSubmitting(true)
+    try {
+      const cleanedPayload = cleanPostPayload(postForm)
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(cleanedPayload),
+      })
+      if (response.ok) {
+        await fetchPosts()
+        resetPostForm()
+        setShowPostForm(false)
+      } else {
+        const error = await response.json()
+        console.error('Create post error response:', error)
+        alert(`Failed to create post: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to create post:", error)
+      alert("Failed to create post")
+    } finally {
+      setPostSubmitting(false)
+    }
+  }
+
+  const handleUpdatePost = async () => {
+    if (!editingPost) return
+    try {
+      const cleanedPayload = cleanPostPayload(postForm)
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts/${editingPost.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(cleanedPayload),
+      })
+      if (response.ok) {
+        await fetchPosts()
+        setEditingPost(null)
+        resetPostForm()
+      } else {
+        const error = await response.json()
+        alert(`Failed to update post: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to update post:", error)
+      alert("Failed to update post")
+    }
+  }
+
+  const handleDeletePost = async (postId: string) => {
+    if (!confirm("Are you sure you want to delete this post?")) return
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts/${postId}`, {
+        method: "DELETE",
+        headers: getAuthHeaders(),
+      })
+      if (response.ok) {
+        await fetchPosts()
+      } else {
+        alert("Failed to delete post")
+      }
+    } catch (error) {
+      console.error("Failed to delete post:", error)
+      alert("Failed to delete post")
+    }
+  }
+
+  const handleUploadFeaturedImage = async (postId: string, file: File) => {
+    const formData = new FormData()
+    formData.append("file", file)
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts/${postId}/featured-image`, {
+        method: "POST",
+        headers: getAuthHeaders(),
+        body: formData,
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setPostForm({ ...postForm, featured_image_url: data.featured_image_url })
+        await fetchPosts()
+      } else {
+        alert("Failed to upload image")
+      }
+    } catch (error) {
+      console.error("Failed to upload image:", error)
+      alert("Failed to upload image")
+    }
+  }
+
+  const resetPostForm = () => {
+    setPostForm({
+      title: "",
+      slug: "",
+      markdown_content: "",
+      html_content: "",
+      excerpt: "",
+      post_type: "news",
+      status: "draft",
+      featured_image_url: "",
+      category_ids: [],
+      tag_ids: [],
+    })
+  }
+
+  const startEditPost = (post: BlogPost) => {
+    setEditingPost(post)
+    setPostForm({
+      title: post.title,
+      slug: post.slug,
+      markdown_content: post.markdown_content || "",
+      html_content: post.html_content || "",
+      excerpt: post.excerpt || "",
+      post_type: post.post_type,
+      status: post.status,
+      featured_image_url: post.featured_image_url || "",
+      category_ids: post.categories.map((c) => c.id),
+      tag_ids: post.tags.map((t) => t.id),
+    })
+    setShowPostForm(true)
+  }
+
+  const handleCreateCategory = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/categories`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(categoryForm),
+      })
+      if (response.ok) {
+        await fetchCategories()
+        setCategoryForm({ name: "", slug: "", description: "" })
+        setEditingCategory(null)
+      } else {
+        const error = await response.json()
+        alert(`Failed to create category: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to create category:", error)
+      alert("Failed to create category")
+    }
+  }
+
+  const handleUpdateCategory = async () => {
+    if (!editingCategory) return
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/categories/${editingCategory.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(categoryForm),
+      })
+      if (response.ok) {
+        await fetchCategories()
+        setEditingCategory(null)
+        setCategoryForm({ name: "", slug: "", description: "" })
+      } else {
+        const error = await response.json()
+        alert(`Failed to update category: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to update category:", error)
+      alert("Failed to update category")
+    }
+  }
+
+  const handleDeleteCategory = async (categoryId: string) => {
+    if (!confirm("Are you sure you want to delete this category?")) return
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/categories/${categoryId}`, {
+        method: "DELETE",
+        headers: getAuthHeaders(),
+      })
+      if (response.ok) {
+        await fetchCategories()
+      } else {
+        alert("Failed to delete category")
+      }
+    } catch (error) {
+      console.error("Failed to delete category:", error)
+      alert("Failed to delete category")
+    }
+  }
+
+  const handleCreateTag = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/tags`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(tagForm),
+      })
+      if (response.ok) {
+        await fetchTags()
+        setTagForm({ name: "", slug: "" })
+        setEditingTag(null)
+      } else {
+        const error = await response.json()
+        alert(`Failed to create tag: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to create tag:", error)
+      alert("Failed to create tag")
+    }
+  }
+
+  const handleUpdateTag = async () => {
+    if (!editingTag) return
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/tags/${editingTag.id}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders(),
+        },
+        body: JSON.stringify(tagForm),
+      })
+      if (response.ok) {
+        await fetchTags()
+        setEditingTag(null)
+        setTagForm({ name: "", slug: "" })
+      } else {
+        const error = await response.json()
+        alert(`Failed to update tag: ${error.detail || "Unknown error"}`)
+      }
+    } catch (error) {
+      console.error("Failed to update tag:", error)
+      alert("Failed to update tag")
+    }
+  }
+
+  const handleDeleteTag = async (tagId: string) => {
+    if (!confirm("Are you sure you want to delete this tag?")) return
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/tags/${tagId}`, {
+        method: "DELETE",
+        headers: getAuthHeaders(),
+      })
+      if (response.ok) {
+        await fetchTags()
+      } else {
+        alert("Failed to delete tag")
+      }
+    } catch (error) {
+      console.error("Failed to delete tag:", error)
+      alert("Failed to delete tag")
+    }
+  }
+
+  if (loading || !isAuthenticated || !isAdmin) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <AdminSidebar />
+      <div className="flex-1 ml-0 md:ml-[20px] p-4 md:p-6">
+        <div className="absolute top-4 right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <div className="max-w-7xl mx-auto space-y-6">
+          <div className="flex items-center justify-between">
+            <div>
+              <h1 className="text-3xl font-bold">Blog Management</h1>
+              <p className="text-muted-foreground">Manage blog posts, categories, and tags</p>
+            </div>
+            <Link href="/blog">
+              <Button variant="outline">
+                <Eye className="w-4 h-4 mr-2" />
+                View Public Blog
+              </Button>
+            </Link>
+          </div>
+
+          {/* Tabs */}
+          <div className="flex gap-2 border-b">
+            <button
+              onClick={() => setActiveTab("posts")}
+              className={`px-4 py-2 font-medium ${
+                activeTab === "posts"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground"
+              }`}
+            >
+              <FileText className="w-4 h-4 inline mr-2" />
+              Posts
+            </button>
+            <button
+              onClick={() => setActiveTab("categories")}
+              className={`px-4 py-2 font-medium ${
+                activeTab === "categories"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground"
+              }`}
+            >
+              <Folder className="w-4 h-4 inline mr-2" />
+              Categories
+            </button>
+            <button
+              onClick={() => setActiveTab("tags")}
+              className={`px-4 py-2 font-medium ${
+                activeTab === "tags"
+                  ? "border-b-2 border-primary text-primary"
+                  : "text-muted-foreground"
+              }`}
+            >
+              <Tag className="w-4 h-4 inline mr-2" />
+              Tags
+            </button>
+          </div>
+
+          {/* Posts Tab */}
+          {activeTab === "posts" && (
+            <div className="space-y-4">
+              {!showPostForm ? (
+                <>
+                  <div className="flex justify-end">
+                    <Button onClick={() => setShowPostForm(true)}>
+                      <Plus className="w-4 h-4 mr-2" />
+                      New Post
+                    </Button>
+                  </div>
+                  <Card>
+                    <CardContent className="p-0">
+                      <Table>
+                        <TableHeader>
+                          <TableRow>
+                            <TableHead>Title</TableHead>
+                            <TableHead>Type</TableHead>
+                            <TableHead>Status</TableHead>
+                            <TableHead>Author</TableHead>
+                            <TableHead>Published</TableHead>
+                            <TableHead>Actions</TableHead>
+                          </TableRow>
+                        </TableHeader>
+                        <TableBody>
+                          {posts.map((post) => (
+                            <TableRow key={post.id}>
+                              <TableCell className="font-medium">{post.title}</TableCell>
+                              <TableCell>
+                                <Badge variant="outline">{post.post_type}</Badge>
+                              </TableCell>
+                              <TableCell>
+                                <Badge
+                                  variant={post.status === "published" ? "default" : "secondary"}
+                                >
+                                  {post.status}
+                                </Badge>
+                              </TableCell>
+                              <TableCell>{post.author.name || post.author.email}</TableCell>
+                              <TableCell>
+                                {post.published_at
+                                  ? new Date(post.published_at).toLocaleDateString()
+                                  : "-"}
+                              </TableCell>
+                              <TableCell>
+                                <div className="flex gap-2">
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => startEditPost(post)}
+                                  >
+                                    <Edit className="w-4 h-4" />
+                                  </Button>
+                                  <Link href={`/blog/${post.slug}`} target="_blank">
+                                    <Button variant="ghost" size="sm">
+                                      <Eye className="w-4 h-4" />
+                                    </Button>
+                                  </Link>
+                                  <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    onClick={() => handleDeletePost(post.id)}
+                                  >
+                                    <Trash2 className="w-4 h-4 text-destructive" />
+                                  </Button>
+                                </div>
+                              </TableCell>
+                            </TableRow>
+                          ))}
+                        </TableBody>
+                      </Table>
+                    </CardContent>
+                  </Card>
+                </>
+              ) : (
+                <Card>
+                  <CardHeader>
+                    <div className="flex items-center justify-between">
+                      <CardTitle>
+                        {editingPost ? "Edit Post" : "Create New Post"}
+                      </CardTitle>
+                      <Button variant="ghost" onClick={() => {
+                        setShowPostForm(false)
+                        setEditingPost(null)
+                        resetPostForm()
+                      }}>
+                        <X className="w-4 h-4" />
+                      </Button>
+                    </div>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-2 block">Title</label>
+                        <Input
+                          value={postForm.title}
+                          onChange={(e) => setPostForm({ ...postForm, title: e.target.value })}
+                          placeholder="Post title"
+                        />
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-2 block">Slug</label>
+                        <Input
+                          value={postForm.slug}
+                          onChange={(e) => setPostForm({ ...postForm, slug: e.target.value })}
+                          placeholder="url-friendly-slug"
+                        />
+                      </div>
+                    </div>
+                    <div className="grid grid-cols-2 gap-4">
+                      <div>
+                        <label className="text-sm font-medium mb-2 block">Post Type</label>
+                        <select
+                          value={postForm.post_type}
+                          title="Post Type"
+                          onChange={(e) => setPostForm({ ...postForm, post_type: e.target.value })}
+                          className="w-full px-3 py-2 border rounded-md"
+                        >
+                          <option value="news">News</option>
+                          <option value="announcement">Announcement</option>
+                          <option value="update">Update</option>
+                        </select>
+                      </div>
+                      <div>
+                        <label className="text-sm font-medium mb-2 block">Status</label>
+                        <select
+                          value={postForm.status}
+                          title="Status"
+                          onChange={(e) => setPostForm({ ...postForm, status: e.target.value })}
+                          className="w-full px-3 py-2 border rounded-md"
+                        >
+                          <option value="draft">Draft</option>
+                          <option value="published">Published</option>
+                        </select>
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Excerpt</label>
+                      <Textarea
+                        value={postForm.excerpt}
+                        onChange={(e) => setPostForm({ ...postForm, excerpt: e.target.value })}
+                        placeholder="Short excerpt..."
+                        rows={2}
+                      />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Featured Image URL</label>
+                      <div className="flex gap-2">
+                        <Input
+                          value={postForm.featured_image_url}
+                          onChange={(e) =>
+                            setPostForm({ ...postForm, featured_image_url: e.target.value })
+                          }
+                          placeholder="Image URL or upload file"
+                        />
+                        {editingPost && (
+                          <input
+                            type="file"
+                            title="Upload Featured Image"
+                            accept="image/*"
+                            onChange={(e) => {
+                              const file = e.target.files?.[0]
+                              if (file && editingPost) {
+                                handleUploadFeaturedImage(editingPost.id, file)
+                              }
+                            }}
+                            className="hidden"
+                            id="image-upload"
+                          />
+                        )}
+                        {editingPost && (
+                          <Button
+                            variant="outline"
+                            onClick={() => document.getElementById("image-upload")?.click()}
+                          >
+                            <Upload className="w-4 h-4" />
+                          </Button>
+                        )}
+                      </div>
+                    </div>
+                    <BlogEditor
+                      markdownContent={postForm.markdown_content}
+                      htmlContent={postForm.html_content}
+                      onMarkdownChange={(value) =>
+                        setPostForm({ ...postForm, markdown_content: value })
+                      }
+                      onHtmlChange={(value) =>
+                        setPostForm({ ...postForm, html_content: value })
+                      }
+                    />
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Categories</label>
+                      <div className="flex flex-wrap gap-2">
+                        {categories.map((category) => (
+                          <Badge
+                            key={category.id}
+                            variant={
+                              postForm.category_ids.includes(category.id) ? "default" : "outline"
+                            }
+                            className="cursor-pointer"
+                            onClick={() => {
+                              const newIds = postForm.category_ids.includes(category.id)
+                                ? postForm.category_ids.filter((id) => id !== category.id)
+                                : [...postForm.category_ids, category.id]
+                              setPostForm({ ...postForm, category_ids: newIds })
+                            }}
+                          >
+                            {category.name}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Tags</label>
+                      <div className="flex flex-wrap gap-2">
+                        {tags.map((tag) => (
+                          <Badge
+                            key={tag.id}
+                            variant={postForm.tag_ids.includes(tag.id) ? "default" : "outline"}
+                            className="cursor-pointer"
+                            onClick={() => {
+                              const newIds = postForm.tag_ids.includes(tag.id)
+                                ? postForm.tag_ids.filter((id) => id !== tag.id)
+                                : [...postForm.tag_ids, tag.id]
+                              setPostForm({ ...postForm, tag_ids: newIds })
+                            }}
+                          >
+                            {tag.name}
+                          </Badge>
+                        ))}
+                      </div>
+                    </div>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          setShowPostForm(false)
+                          setEditingPost(null)
+                          resetPostForm()
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={editingPost ? handleUpdatePost : handleCreatePost}
+                        disabled={postSubmitting}
+                      >
+                        {postSubmitting ? (
+                          <span className="flex items-center">
+                            <svg className="animate-spin h-4 w-4 mr-2 text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+                              <circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
+                              <path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4l3-3-3-3v4a8 8 0 00-8 8z"></path>
+                            </svg>
+                            {editingPost ? "Updating..." : "Creating..."}
+                          </span>
+                        ) : (
+                          <>
+                            <Save className="w-4 h-4 mr-2" />
+                            {editingPost ? "Update" : "Create"} Post
+                          </>
+                        )}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+            </div>
+          )}
+
+          {/* Categories Tab */}
+          {activeTab === "categories" && (
+            <div className="space-y-4">
+              <div className="flex justify-end">
+                <Button
+                  onClick={() => {
+                    setEditingCategory(null)
+                    setCategoryForm({ name: "", slug: "", description: "" })
+                  }}
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Category
+                </Button>
+              </div>
+              {(editingCategory || (!editingCategory && categoryForm.name)) && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>
+                      {editingCategory ? "Edit Category" : "Create Category"}
+                    </CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Name</label>
+                      <Input
+                        value={categoryForm.name}
+                        onChange={(e) => setCategoryForm({ ...categoryForm, name: e.target.value })}
+                        placeholder="Category name"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Slug</label>
+                      <Input
+                        value={categoryForm.slug}
+                        onChange={(e) => setCategoryForm({ ...categoryForm, slug: e.target.value })}
+                        placeholder="category-slug"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Description</label>
+                      <Textarea
+                        value={categoryForm.description}
+                        onChange={(e) =>
+                          setCategoryForm({ ...categoryForm, description: e.target.value })
+                        }
+                        placeholder="Category description"
+                        rows={3}
+                      />
+                    </div>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          setEditingCategory(null)
+                          setCategoryForm({ name: "", slug: "", description: "" })
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                      <Button
+                        onClick={editingCategory ? handleUpdateCategory : handleCreateCategory}
+                      >
+                        <Save className="w-4 h-4 mr-2" />
+                        {editingCategory ? "Update" : "Create"}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+              <Card>
+                <CardContent className="p-0">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Slug</TableHead>
+                        <TableHead>Description</TableHead>
+                        <TableHead>Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {categories.map((category) => (
+                        <TableRow key={category.id}>
+                          <TableCell className="font-medium">{category.name}</TableCell>
+                          <TableCell>{category.slug}</TableCell>
+                          <TableCell>{category.description || "-"}</TableCell>
+                          <TableCell>
+                            <div className="flex gap-2">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                  setEditingCategory(category)
+                                  setCategoryForm({
+                                    name: category.name,
+                                    slug: category.slug,
+                                    description: category.description || "",
+                                  })
+                                }}
+                              >
+                                <Edit className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleDeleteCategory(category.id)}
+                              >
+                                <Trash2 className="w-4 h-4 text-destructive" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+
+          {/* Tags Tab */}
+          {activeTab === "tags" && (
+            <div className="space-y-4">
+              <div className="flex justify-end">
+                <Button
+                  onClick={() => {
+                    setEditingTag(null)
+                    setTagForm({ name: "", slug: "" })
+                  }}
+                >
+                  <Plus className="w-4 h-4 mr-2" />
+                  New Tag
+                </Button>
+              </div>
+              {(editingTag || (!editingTag && tagForm.name)) && (
+                <Card>
+                  <CardHeader>
+                    <CardTitle>{editingTag ? "Edit Tag" : "Create Tag"}</CardTitle>
+                  </CardHeader>
+                  <CardContent className="space-y-4">
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Name</label>
+                      <Input
+                        value={tagForm.name}
+                        onChange={(e) => setTagForm({ ...tagForm, name: e.target.value })}
+                        placeholder="Tag name"
+                      />
+                    </div>
+                    <div>
+                      <label className="text-sm font-medium mb-2 block">Slug</label>
+                      <Input
+                        value={tagForm.slug}
+                        onChange={(e) => setTagForm({ ...tagForm, slug: e.target.value })}
+                        placeholder="tag-slug"
+                      />
+                    </div>
+                    <div className="flex justify-end gap-2">
+                      <Button
+                        variant="outline"
+                        onClick={() => {
+                          setEditingTag(null)
+                          setTagForm({ name: "", slug: "" })
+                        }}
+                      >
+                        Cancel
+                      </Button>
+                      <Button onClick={editingTag ? handleUpdateTag : handleCreateTag}>
+                        <Save className="w-4 h-4 mr-2" />
+                        {editingTag ? "Update" : "Create"}
+                      </Button>
+                    </div>
+                  </CardContent>
+                </Card>
+              )}
+              <Card>
+                <CardContent className="p-0">
+                  <Table>
+                    <TableHeader>
+                      <TableRow>
+                        <TableHead>Name</TableHead>
+                        <TableHead>Slug</TableHead>
+                        <TableHead>Actions</TableHead>
+                      </TableRow>
+                    </TableHeader>
+                    <TableBody>
+                      {tags.map((tag) => (
+                        <TableRow key={tag.id}>
+                          <TableCell className="font-medium">{tag.name}</TableCell>
+                          <TableCell>{tag.slug}</TableCell>
+                          <TableCell>
+                            <div className="flex gap-2">
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => {
+                                  setEditingTag(tag)
+                                  setTagForm({ name: tag.name, slug: tag.slug })
+                                }}
+                              >
+                                <Edit className="w-4 h-4" />
+                              </Button>
+                              <Button
+                                variant="ghost"
+                                size="sm"
+                                onClick={() => handleDeleteTag(tag.id)}
+                              >
+                                <Trash2 className="w-4 h-4 text-destructive" />
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                      ))}
+                    </TableBody>
+                  </Table>
+                </CardContent>
+              </Card>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/app/admin/knowledge/page.tsx

@@ -0,0 +1,279 @@
+"use client"
+
+/**
+ * Knowledge Base Settings - Admin Page
+ * 
+ * WeKnora-style knowledge base management for admins
+ */
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Textarea } from "@/components/ui/textarea"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Database,
+  Plus,
+  Upload,
+  RefreshCw,
+  Trash2,
+  Edit,
+  FileText,
+  Scale,
+  Newspaper,
+  CheckCircle,
+  XCircle,
+  Clock,
+  Settings,
+  Search
+} from "lucide-react"
+
+
+interface KnowledgeBase {
+  id: string
+  name: string
+  description: string
+  type: 'legal' | 'news' | 'general' | 'custom'
+  documentCount: number
+  lastUpdated: string
+  status: 'active' | 'indexing' | 'error'
+  chunkSize: number
+  embeddingModel: string
+}
+
+const MOCK_KNOWLEDGE_BASES: KnowledgeBase[] = [
+  {
+    id: "kenya_law",
+    name: "Kenya Law",
+    description: "Constitution, Acts, Bills, Case Law from Kenya Law Reports",
+    type: "legal",
+    documentCount: 5420,
+    lastUpdated: "2025-12-14T10:30:00Z",
+    status: "active",
+    chunkSize: 512,
+    embeddingModel: "text-embedding-3-small"
+  },
+  {
+    id: "kenya_news",
+    name: "Kenya News",
+    description: "Current affairs from major Kenyan news outlets",
+    type: "news",
+    documentCount: 12350,
+    lastUpdated: "2025-12-15T08:00:00Z",
+    status: "active",
+    chunkSize: 256,
+    embeddingModel: "text-embedding-3-small"
+  },
+  {
+    id: "parliament",
+    name: "Parliament Records",
+    description: "Bills, Hansard, Committee Reports",
+    type: "legal",
+    documentCount: 2100,
+    lastUpdated: "2025-12-13T14:20:00Z",
+    status: "indexing",
+    chunkSize: 512,
+    embeddingModel: "text-embedding-3-small"
+  }
+]
+
+export default function KnowledgeBaseSettingsPage() {
+  const [knowledgeBases, setKnowledgeBases] = useState(MOCK_KNOWLEDGE_BASES)
+  const [selectedKB, setSelectedKB] = useState<KnowledgeBase | null>(null)
+  const [isCreating, setIsCreating] = useState(false)
+
+  const getTypeIcon = (type: string) => {
+    switch (type) {
+      case 'legal': return <Scale className="h-4 w-4" />
+      case 'news': return <Newspaper className="h-4 w-4" />
+      default: return <Database className="h-4 w-4" />
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'active':
+        return <Badge variant="default" className="bg-green-500"><CheckCircle className="h-3 w-3 mr-1" />Active</Badge>
+      case 'indexing':
+        return <Badge variant="secondary"><Clock className="h-3 w-3 mr-1 animate-spin" />Indexing</Badge>
+      case 'error':
+        return <Badge variant="destructive"><XCircle className="h-3 w-3 mr-1" />Error</Badge>
+      default:
+        return <Badge variant="outline">{status}</Badge>
+    }
+  }
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Knowledge Base Management</h1>
+          <p className="text-muted-foreground">Manage your document collections and search indices</p>
+        </div>
+        <Dialog open={isCreating} onOpenChange={setIsCreating}>
+          <DialogTrigger asChild>
+            <Button>
+              <Plus className="h-4 w-4 mr-2" />
+              New Knowledge Base
+            </Button>
+          </DialogTrigger>
+          <DialogContent className="max-w-2xl">
+            <DialogHeader>
+              <DialogTitle>Create Knowledge Base</DialogTitle>
+              <DialogDescription>
+                Create a new knowledge base for document retrieval
+              </DialogDescription>
+            </DialogHeader>
+            <div className="space-y-4 py-4">
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="name">Name</Label>
+                  <Input id="name" placeholder="e.g., Kenya Law" />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="type">Type</Label>
+                  <select className="w-full p-2 border rounded-md">
+                    <option value="legal">Legal</option>
+                    <option value="news">News</option>
+                    <option value="general">General</option>
+                    <option value="custom">Custom</option>
+                  </select>
+                </div>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="description">Description</Label>
+                <Textarea id="description" placeholder="Describe this knowledge base..." />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <Label htmlFor="chunkSize">Chunk Size</Label>
+                  <Input id="chunkSize" type="number" defaultValue={512} />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="embeddingModel">Embedding Model</Label>
+                  <select className="w-full p-2 border rounded-md">
+                    <option value="text-embedding-3-small">text-embedding-3-small</option>
+                    <option value="text-embedding-3-large">text-embedding-3-large</option>
+                    <option value="text-embedding-ada-002">text-embedding-ada-002</option>
+                  </select>
+                </div>
+              </div>
+            </div>
+            <DialogFooter>
+              <Button variant="outline" onClick={() => setIsCreating(false)}>Cancel</Button>
+              <Button onClick={() => setIsCreating(false)}>Create</Button>
+            </DialogFooter>
+          </DialogContent>
+        </Dialog>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-3">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Knowledge Bases</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{knowledgeBases.length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {knowledgeBases.reduce((sum, kb) => sum + kb.documentCount, 0).toLocaleString()}
+            </div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Active Indices</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">
+              {knowledgeBases.filter(kb => kb.status === 'active').length}
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>Knowledge Bases</CardTitle>
+          <CardDescription>Manage document collections and search indices</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Type</TableHead>
+                <TableHead>Documents</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Last Updated</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {knowledgeBases.map((kb) => (
+                <TableRow key={kb.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {getTypeIcon(kb.type)}
+                      <div>
+                        <div className="font-medium">{kb.name}</div>
+                        <div className="text-xs text-muted-foreground">{kb.description}</div>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{kb.type}</Badge>
+                  </TableCell>
+                  <TableCell>{kb.documentCount.toLocaleString()}</TableCell>
+                  <TableCell>{getStatusBadge(kb.status)}</TableCell>
+                  <TableCell>{new Date(kb.lastUpdated).toLocaleDateString()}</TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Button variant="ghost" size="icon">
+                        <Upload className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon">
+                        <RefreshCw className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon">
+                        <Settings className="h-4 w-4" />
+                      </Button>
+                      <Button variant="ghost" size="icon">
+                        <Trash2 className="h-4 w-4 text-red-500" />
+                      </Button>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/admin/models/page.tsx

@@ -0,0 +1,327 @@
+"use client"
+
+/**
+ * Model Settings - Admin Page
+ * 
+ * WeKnora-style AI model configuration for admins
+ */
+
+import { useState, useEffect, ReactNode } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Slider } from "@/components/ui/slider"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+import {
+  Brain,
+  Sparkles,
+  Zap,
+  Rocket,
+  Plus,
+  Settings,
+  CheckCircle,
+  XCircle,
+  Key,
+  RefreshCw,
+  Loader2
+} from "lucide-react"
+
+interface ModelConfig {
+  apiKey?: string
+  maxTokens?: number
+  topP?: number
+  isDefault?: boolean
+  id: string
+  name: string
+  provider: string
+  enabled: boolean
+  is_default?: boolean
+  status: string
+  temperature: number
+  max_tokens?: number
+  top_p?: number
+}
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export default function ModelSettingsPage() {
+  const [models, setModels] = useState<ModelConfig[]>([])
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState<string | null>(null)
+  const [selectedModel, setSelectedModel] = useState<ModelConfig | null>(null)
+
+  useEffect(() => {
+    fetchModels()
+  }, [])
+
+  const fetchModels = async () => {
+    try {
+      setLoading(true)
+      const response = await fetch(`${API_URL}/api/v1/admin/models`)
+      if (!response.ok) throw new Error("Failed to fetch models")
+      const data = await response.json()
+      setModels(data)
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to load models")
+      // Fallback to default models
+      setModels([
+        {
+            id: "moonshot-v1-8k", name: "Moonshot V1", provider: "Moonshot", enabled: true, is_default: true, status: "connected", temperature: 0.7, max_tokens: 4096,
+            apiKey: undefined,
+            maxTokens: undefined,
+            topP: undefined,
+            isDefault: undefined
+        },
+        {
+            id: "gemini-2.5-flash", name: "Gemini 2.5 Flash", provider: "Google", enabled: true, is_default: false, status: "connected", temperature: 0.7, max_tokens: 4096,
+            apiKey: undefined,
+            maxTokens: undefined,
+            topP: undefined,
+            isDefault: undefined
+        },
+        {
+            id: "gemini-1.5-pro", name: "Gemini 1.5 Pro", provider: "Google", enabled: true, is_default: false, status: "connected", temperature: 0.7, max_tokens: 8192,
+            apiKey: undefined,
+            maxTokens: undefined,
+            topP: undefined,
+            isDefault: undefined
+        },
+        {
+            id: "gpt-4o-mini", name: "GPT-4o Mini", provider: "OpenAI", enabled: false, is_default: false, status: "unconfigured", temperature: 0.7, max_tokens: 4096,
+            apiKey: undefined,
+            maxTokens: undefined,
+            topP: undefined,
+            isDefault: undefined
+        },
+        {
+            id: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", provider: "Anthropic", enabled: false, is_default: false, status: "unconfigured", temperature: 0.7, max_tokens: 4096,
+            apiKey: undefined,
+            maxTokens: undefined,
+            topP: undefined,
+            isDefault: undefined
+        }
+      ])
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const getProviderIcon = (provider: string) => {
+    switch (provider) {
+      case 'Google': return <Sparkles className="h-4 w-4" />
+      case 'Moonshot': return <Zap className="h-4 w-4" />
+      case 'OpenAI': return <Brain className="h-4 w-4" />
+      case 'Anthropic': return <Rocket className="h-4 w-4" />
+      default: return <Brain className="h-4 w-4" />
+    }
+  }
+
+  const getStatusBadge = (status: string) => {
+    switch (status) {
+      case 'connected':
+        return <Badge variant="default" className="bg-green-500"><CheckCircle className="h-3 w-3 mr-1" />Connected</Badge>
+      case 'error':
+        return <Badge variant="destructive"><XCircle className="h-3 w-3 mr-1" />Error</Badge>
+      case 'unconfigured':
+        return <Badge variant="secondary"><Key className="h-3 w-3 mr-1" />Unconfigured</Badge>
+      default:
+        return <Badge variant="outline">{status}</Badge>
+    }
+  }
+
+  const updateModel = (id: string, updates: Partial<ModelConfig>) => {
+    setModels(prev => prev.map(m => m.id === id ? { ...m, ...updates } : m))
+  }
+
+  const setAsDefault = (id: string) => {
+    setModels(prev => prev.map(m => ({ ...m, isDefault: m.id === id })))
+  }
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">Model Settings</h1>
+          <p className="text-muted-foreground">Configure AI models and their parameters</p>
+        </div>
+        <Button variant="outline">
+          <RefreshCw className="h-4 w-4 mr-2" />
+          Test All Connections
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Configured Models</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{models.filter(m => m.status === 'connected').length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Enabled Models</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{models.filter(m => m.enabled).length}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Default Model</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-lg font-bold">{models.find(m => m.isDefault)?.name || 'None'}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Providers</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{new Set(models.map(m => m.provider)).size}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>AI Models</CardTitle>
+          <CardDescription>Configure model access and parameters</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Model</TableHead>
+                <TableHead>Provider</TableHead>
+                <TableHead>Status</TableHead>
+                <TableHead>Enabled</TableHead>
+                <TableHead>Default</TableHead>
+                <TableHead className="text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {models.map((model) => (
+                <TableRow key={model.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {getProviderIcon(model.provider)}
+                      <div>
+                        <div className="font-medium">{model.name}</div>
+                        <div className="text-xs text-muted-foreground font-mono">{model.id}</div>
+                      </div>
+                    </div>
+                  </TableCell>
+                  <TableCell>
+                    <Badge variant="outline">{model.provider}</Badge>
+                  </TableCell>
+                  <TableCell>{getStatusBadge(model.status)}</TableCell>
+                  <TableCell>
+                    <Switch
+                      checked={model.enabled}
+                      onCheckedChange={(checked: any) => updateModel(model.id, { enabled: checked })}
+                      disabled={model.status !== 'connected'}
+                    />
+                  </TableCell>
+                  <TableCell>
+                    <Switch
+                      checked={model.isDefault ?? model.is_default ?? false}
+                      onCheckedChange={() => setAsDefault(model.id)}
+                      disabled={!model.enabled}
+                    />
+                  </TableCell>
+                  <TableCell className="text-right">
+                    <div className="flex justify-end gap-2">
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button 
+                            variant="ghost" 
+                            size="icon"
+                            onClick={() => setSelectedModel(model)}
+                          >
+                            <Settings className="h-4 w-4" />
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent className="max-w-lg">
+                          <DialogHeader>
+                            <DialogTitle>Configure {model.name}</DialogTitle>
+                            <DialogDescription>
+                              Adjust model parameters and API settings
+                            </DialogDescription>
+                          </DialogHeader>
+                          <div className="space-y-4 py-4">
+                            <div className="space-y-2">
+                              <Label htmlFor="apiKey">API Key</Label>
+                              <Input 
+                                id="apiKey" 
+                                type="password"
+                                placeholder="Enter API key..."
+                                defaultValue={model.apiKey}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label>Temperature: {model.temperature}</Label>
+                              <Slider
+                                defaultValue={[model.temperature]}
+                                max={1}
+                                step={0.1}
+                                onValueChange={(v) => updateModel(model.id, { temperature: v[0] })}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label>Max Tokens: {model.maxTokens ?? model.max_tokens ?? 4096}</Label>
+                              <Slider
+                                defaultValue={[model.maxTokens ?? model.max_tokens ?? 4096]}
+                                max={16384}
+                                step={256}
+                                onValueChange={(v) => updateModel(model.id, { maxTokens: v[0] })}
+                              />
+                            </div>
+                            <div className="space-y-2">
+                              <Label>Top P: {model.topP ?? model.top_p ?? 0.7}</Label>
+                              <Slider
+                                defaultValue={[model.topP ?? model.top_p ?? 0.7]}
+                                max={1}
+                                step={0.05}
+                                onValueChange={(v) => updateModel(model.id, { topP: v[0] })}
+                              />
+                            </div>
+                          </div>
+                          <DialogFooter>
+                            <Button>Save Changes</Button>
+                          </DialogFooter>
+                        </DialogContent>
+                      </Dialog>
+                    </div>
+                  </TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}

src/app/admin/page.tsx

@@ -0,0 +1,1144 @@
+"use client"
+
+import React, { useState, useEffect, useCallback, useRef } from "react"
+import { useRouter } from "next/navigation"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import { Input } from "@/components/ui/input"
+import { AdminSidebar } from "@/components/admin-sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { useAuth } from "@/lib/auth-context"
+import { 
+  Database, 
+  Activity, 
+  Clock, 
+  CheckCircle, 
+  XCircle, 
+  Play, 
+  Search,
+  BarChart3,
+  FileText,
+  Globe,
+  RefreshCw,
+  Square
+} from "lucide-react"
+import Link from "next/link"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+// Helper function to get auth headers
+const getAuthHeaders = (): Record<string, string> => {
+  const token = localStorage.getItem("session_token")
+  const headers: Record<string, string> = {}
+  if (token) {
+    headers["X-Session-Token"] = token
+  }
+  return headers
+}
+
+interface Stats {
+  total_chunks: number
+  categories: Record<string, number>
+  sources: string[]
+}
+
+interface Health {
+  status: string
+  database_chunks: number
+  embedding_model: string
+  llm_provider: string
+}
+
+interface Crawler {
+  status: "idle" | "running" | "failed"
+  last_run: string | null
+  logs: string[]
+  pid?: number
+  start_time?: string
+}
+interface CommandResult { 
+  command: string
+  exit_code: number
+  stdout: string
+  stderr: string
+}
+
+interface Document {
+  id: string
+  content: string
+  metadata: {
+    title: string
+    url: string
+    source: string
+    category: string
+    date: string
+    author?: string
+    sentiment_polarity?: number
+    sentiment_label?: string
+  }
+  score: number
+}
+
+interface Database {
+  name: string
+  type: string
+  status: string
+  total_chunks: number
+  categories: Record<string, number>
+  persist_directory: string
+  elasticsearch_docs: number
+  elasticsearch_enabled: boolean
+}
+
+interface DatabaseStorageStats {
+  raw_documents: {
+    total: number
+    processed: number
+    unprocessed: number
+    categories: Record<string, number>
+  }
+  processed_chunks: {
+    total: number
+    categories: Record<string, number>
+  }
+}
+
+interface ConfigData {
+  [key: string]: {
+    has_value: boolean
+    description?: string
+  }
+}
+
+interface DatabaseStats {
+  total_databases: number
+  active_databases: number
+  databases: Database[]
+}
+
+export default function AdminDashboard() {
+  const { isAuthenticated, isAdmin, loading } = useAuth()
+  const router = useRouter()
+  const [stats, setStats] = useState<Stats | null>(null)
+  const [health, setHealth] = useState<Health | null>(null)
+  const [crawlers, setCrawlers] = useState<Record<string, Crawler>>({})
+  const [documents, setDocuments] = useState<Document[]>([])
+  const [searchQuery, setSearchQuery] = useState("")
+  const [command, setCommand] = useState("")
+  const [commandHistory, setCommandHistory] = useState<CommandResult[]>([])
+  const [isExecuting, setIsExecuting] = useState(false)
+  const [configs, setConfigs] = useState<ConfigData>({})
+  const [newConfigKey, setNewConfigKey] = useState("")
+  const [newConfigValue, setNewConfigValue] = useState("")
+  const [newConfigDescription, setNewConfigDescription] = useState("")
+  const [databaseStats, setDatabaseStats] = useState<DatabaseStats | null>(null)
+  const [databaseStorageStats, setDatabaseStorageStats] = useState<DatabaseStorageStats | null>(null)
+  const [selectedCrawler, setSelectedCrawler] = useState<string | null>(null)
+  const [isRefreshing, setIsRefreshing] = useState(false)
+  const isRefreshingRef = useRef(false)
+  const intervalRef = useRef<NodeJS.Timeout | null>(null)
+  const fetchCrawlersRef = useRef<(() => Promise<void>) | null>(null)
+  const intervalSetupRef = useRef(false)
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/admin")
+    } else if (!loading && isAuthenticated && !isAdmin) {
+      router.push("/chat")
+    }
+  }, [isAuthenticated, isAdmin, loading, router])
+
+  const fetchStats = async () => {
+    try {
+      const response = await fetch(`/api/cache/admin/stats`, {
+        headers: getAuthHeaders()
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setStats(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch stats:", error)
+    }
+  }
+
+  const fetchHealth = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/health`)
+      if (response.ok) {
+        const data = await response.json()
+        setHealth(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch health:", error)
+    }
+  }
+
+  // Create a stable fetch function that uses refs for auth state
+  const isAuthenticatedRef = useRef(isAuthenticated)
+  const isAdminRef = useRef(isAdmin)
+  
+  // Update refs when values change
+  useEffect(() => {
+    isAuthenticatedRef.current = isAuthenticated
+    isAdminRef.current = isAdmin
+  }, [isAuthenticated, isAdmin])
+
+  const fetchCrawlers = useCallback(async () => {
+    // Only fetch if authenticated and admin (check refs for latest values)
+    if (!isAuthenticatedRef.current || !isAdminRef.current) {
+      return
+    }
+    
+    // Prevent concurrent fetches
+    if (isRefreshingRef.current) {
+      return
+    }
+    
+    try {
+      isRefreshingRef.current = true
+      setIsRefreshing(true)
+      const response = await fetch(`${API_BASE_URL}/api/admin/crawlers`, {
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setCrawlers(data.crawlers || {})
+      } else {
+        console.error("Failed to fetch crawlers:", response.status)
+        setCrawlers({})
+      }
+    } catch (error) {
+      console.error("Failed to fetch crawlers:", error)
+      setCrawlers({})
+    } finally {
+      isRefreshingRef.current = false
+      setIsRefreshing(false)
+    }
+  }, []) // No dependencies - uses refs for auth state
+
+  // Update the ref whenever fetchCrawlers changes (though it shouldn't change now)
+  useEffect(() => {
+    fetchCrawlersRef.current = fetchCrawlers
+  }, [fetchCrawlers])
+
+  const fetchConfigs = async () => {
+    try {
+      const response = await fetch(`/api/cache/admin/config`, {
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setConfigs(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch configs:", error)
+    }
+  }
+
+  const fetchDatabaseStats = async () => {
+    try {
+      const response = await fetch(`/api/cache/admin/databases`, {
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setDatabaseStats(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch database stats:", error)
+    }
+  }
+
+  const fetchDatabaseStorageStats = async () => {
+    try {
+      const response = await fetch(`/api/cache/admin/database-storage`, {
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setDatabaseStorageStats(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch database storage stats:", error)
+    }
+  }
+
+  const searchDocuments = async () => {
+    try {
+      const params = new URLSearchParams()
+      if (searchQuery) params.append("query", searchQuery)
+      params.append("limit", "100")
+
+      const response = await fetch(`/api/cache/admin/documents?${params}`, {
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setDocuments(data.documents)
+      }
+    } catch (error) {
+      console.error("Failed to search documents:", error)
+    }
+  }
+
+  const executeCommand = async () => {
+    if (!command.trim()) return
+
+    setIsExecuting(true)
+    try {
+      const response = await fetch(`${API_BASE_URL}/admin/execute`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+        body: JSON.stringify({ command }),
+      })
+
+      if (response.ok) {
+        const result: CommandResult = await response.json()
+        setCommandHistory(prev => [result, ...prev.slice(0, 9)]) // Keep last 10
+        setCommand("")
+      }
+    } catch (error) {
+      console.error("Failed to execute command:", error)
+    } finally {
+      setIsExecuting(false)
+    }
+  }
+
+  // Initial data fetch - only runs when auth state stabilizes
+  useEffect(() => {
+    // Only fetch data if authenticated and admin
+    if (!isAuthenticated || !isAdmin || loading) {
+      return
+    }
+
+    fetchStats()
+    fetchHealth()
+    fetchCrawlers() // Now stable, can be called directly
+    fetchConfigs()
+    fetchDatabaseStats()
+    fetchDatabaseStorageStats()
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isAuthenticated, isAdmin, loading])
+
+  // Separate effect for interval - only runs once when component mounts and auth is ready
+  useEffect(() => {
+    // Only set up interval if authenticated and admin
+    if (!isAuthenticated || !isAdmin || loading) {
+      // Clear interval if auth state changes
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+        intervalSetupRef.current = false
+      }
+      return
+    }
+
+    // Prevent multiple interval setups
+    if (intervalSetupRef.current && intervalRef.current) {
+      return
+    }
+
+    // Clear any existing interval before creating a new one (safety check)
+    if (intervalRef.current) {
+      clearInterval(intervalRef.current)
+      intervalRef.current = null
+    }
+    
+    // Auto-refresh crawler status every 10 seconds
+    intervalRef.current = setInterval(() => {
+      // Use the ref to get the latest fetchCrawlers function
+      if (fetchCrawlersRef.current) {
+        fetchCrawlersRef.current()
+      }
+    }, 10000)
+    
+    intervalSetupRef.current = true
+    
+    return () => {
+      if (intervalRef.current) {
+        clearInterval(intervalRef.current)
+        intervalRef.current = null
+        intervalSetupRef.current = false
+      }
+    }
+  }, [isAuthenticated, isAdmin, loading])
+
+  const runCrawler = async (crawlerName: string) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/admin/crawlers/${crawlerName}/start`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      
+      if (response.ok) {
+        const result = await response.json().catch(() => ({}))
+        // Refresh crawler status after a short delay
+        setTimeout(() => {
+          fetchCrawlers()
+        }, 1000)
+        console.log("Crawler started successfully:", result)
+      } else {
+        let errorMessage = `Failed to start crawler: ${response.status} ${response.statusText}`
+        try {
+          const errorData = await response.json()
+          errorMessage = errorData.detail || errorData.message || errorMessage
+        } catch {
+          // If JSON parsing fails, use the default message
+        }
+        console.error("Failed to start crawler:", errorMessage)
+        alert(errorMessage)
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      console.error("Failed to start crawler:", errorMessage)
+      alert(`Failed to start crawler: ${errorMessage}`)
+    }
+  }
+
+  const stopCrawler = async (crawlerName: string) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/admin/crawlers/${crawlerName}/stop`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        setTimeout(() => {
+          fetchCrawlers()
+        }, 1000)
+      } else {
+        let errorMessage = `Failed to stop crawler: ${response.status} ${response.statusText}`
+        try {
+          const errorData = await response.json()
+          errorMessage = errorData.detail || errorData.message || errorMessage
+        } catch {
+          // If JSON parsing fails, use the default message
+        }
+        console.error("Failed to stop crawler:", errorMessage)
+        alert(errorMessage)
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : String(error)
+      console.error("Failed to stop crawler:", errorMessage)
+      alert(`Failed to stop crawler: ${errorMessage}`)
+    }
+  }
+
+  const viewCrawlerLogs = (crawlerName: string) => {
+    setSelectedCrawler(selectedCrawler === crawlerName ? null : crawlerName)
+  }
+
+  const setConfig = async () => {
+    if (!newConfigKey.trim() || !newConfigValue.trim()) return
+
+    try {
+      const response = await fetch(`${API_BASE_URL}/admin/config`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+        body: JSON.stringify({
+          key: newConfigKey,
+          value: newConfigValue,
+          description: newConfigDescription
+        }),
+      })
+      if (response.ok) {
+        // Invalidate cache
+        await fetch(`/api/cache/admin/config`, { method: "DELETE" })
+
+        setNewConfigKey("")
+        setNewConfigValue("")
+        setNewConfigDescription("")
+        fetchConfigs()
+      }
+    } catch (error) {
+      console.error("Failed to set config:", error)
+    }
+  }
+
+  const deleteConfig = async (key: string) => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/admin/config/${key}`, {
+        method: "DELETE",
+        headers: {
+          "Content-Type": "application/json",
+          ...getAuthHeaders()
+        },
+      })
+      if (response.ok) {
+        // Invalidate cache
+        await fetch(`/api/cache/admin/config`, { method: "DELETE" })
+        fetchConfigs()
+      }
+    } catch (error) {
+      console.error("Failed to delete config:", error)
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case "healthy": return "text-green-600"
+      case "running": return "text-blue-600"
+      case "failed": return "text-red-600"
+      default: return "text-gray-600"
+    }
+  }
+
+  const getStatusIcon = (status: string) => {
+    switch (status) {
+      case "healthy": return <CheckCircle className="w-4 h-4" />
+      case "running": return <Activity className="w-4 h-4" />
+      case "failed": return <XCircle className="w-4 h-4" />
+      default: return <Clock className="w-4 h-4" />
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated || !isAdmin) {
+    return null
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <AdminSidebar />
+      <div className="flex-1 ml-0 md:ml-[20px] p-4 md:p-6">
+        <div className="absolute top-4 right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <div className="max-w-7xl mx-auto space-y-4 md:space-y-6">
+          {/* Header */}
+          <div className="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4">
+            <div>
+              <h1 className="text-2xl md:text-3xl font-bold">Admin Dashboard</h1>
+              <p className="text-sm md:text-base text-muted-foreground">Control Panel for AmaniQuery System</p>
+            </div>
+            <Link href="/">
+              <Button variant="outline" className="w-full sm:w-auto min-h-[44px]">
+                <Globe className="w-4 h-4 mr-2" />
+                Back to Home
+              </Button>
+            </Link>
+          </div>
+
+        {/* Stats Cards */}
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4 md:gap-6">
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Total Documents</CardTitle>
+              <FileText className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-xl md:text-2xl font-bold">
+                {stats?.total_chunks || health?.database_chunks || 0}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                Vector database chunks
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">Vector DB Status</CardTitle>
+              <Database className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center space-x-2">
+                {getStatusIcon(health?.status || "unknown")}
+                <span className={`text-sm font-medium ${getStatusColor(health?.status || "unknown")}`}>
+                  {health?.status || "Unknown"}
+                </span>
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {health?.embedding_model || "Loading..."}
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">System Status</CardTitle>
+              <Clock className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            </CardHeader>
+            <CardContent>
+              <div className="text-lg md:text-2xl font-bold">
+                Active
+              </div>
+              <p className="text-xs text-muted-foreground">
+                System operational
+              </p>
+            </CardContent>
+          </Card>
+
+          <Card>
+            <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+              <CardTitle className="text-sm font-medium">API Health</CardTitle>
+              <Activity className="h-4 w-4 text-muted-foreground flex-shrink-0" />
+            </CardHeader>
+            <CardContent>
+              <div className="flex items-center space-x-2">
+                {health ? (
+                  <>
+                    <CheckCircle className="w-4 h-4 text-green-600 flex-shrink-0" />
+                    <span className={`text-sm font-medium ${getStatusColor("healthy")}`}>Online</span>
+                  </>
+                ) : (
+                  <>
+                    <XCircle className="w-4 h-4 text-red-600 flex-shrink-0" />
+                    <span className={`text-sm font-medium ${getStatusColor("failed")}`}>Offline</span>
+                  </>
+                )}
+              </div>
+              <p className="text-xs text-muted-foreground">
+                {health?.llm_provider || "Checking..."}
+              </p>
+            </CardContent>
+          </Card>
+        </div>
+
+        {/* Crawler Management */}
+        <Card>
+          <CardHeader>
+            <div className="flex items-center justify-between">
+              <CardTitle className="flex items-center text-lg md:text-xl">
+                <BarChart3 className="w-5 h-5 mr-2" />
+                Crawler Management
+              </CardTitle>
+              <Button
+                size="sm"
+                variant="outline"
+                onClick={fetchCrawlers}
+                disabled={isRefreshing}
+                className="h-8"
+              >
+                <RefreshCw className={`w-4 h-4 mr-1 ${isRefreshing ? "animate-spin" : ""}`} />
+                {isRefreshing ? "Refreshing..." : "Refresh"}
+              </Button>
+            </div>
+          </CardHeader>
+          <CardContent>
+            <div className="overflow-x-auto">
+              <Table>
+                <TableHeader>
+                  <TableRow>
+                    <TableHead className="min-w-[120px]">Crawler</TableHead>
+                    <TableHead className="min-w-[80px]">Status</TableHead>
+                    <TableHead className="min-w-[120px]">Last Run</TableHead>
+                    <TableHead className="min-w-[80px]">PID</TableHead>
+                    <TableHead className="min-w-[150px]">Actions</TableHead>
+                  </TableRow>
+                </TableHeader>
+                <TableBody>
+                  {crawlers && Object.keys(crawlers).length > 0 ? (
+                    Object.entries(crawlers).map(([name, crawler]) => (
+                      <React.Fragment key={name}>
+                        <TableRow>
+                          <TableCell className="font-medium capitalize text-sm md:text-base">
+                            {name.replace(/_/g, ' ')}
+                          </TableCell>
+                          <TableCell>
+                            <Badge variant={
+                              crawler.status === "running" ? "default" :
+                              crawler.status === "failed" ? "destructive" : "secondary"
+                            } className="text-xs">
+                              {crawler.status}
+                            </Badge>
+                          </TableCell>
+                          <TableCell className="text-xs md:text-sm">
+                            {crawler.last_run ? new Date(crawler.last_run).toLocaleString() : "Never"}
+                          </TableCell>
+                          <TableCell className="text-xs md:text-sm">
+                            {crawler.pid || "-"}
+                          </TableCell>
+                          <TableCell>
+                            <div className="flex space-x-1 md:space-x-2">
+                              <Button
+                                size="sm"
+                                onClick={() => runCrawler(name)}
+                                disabled={crawler.status === "running"}
+                                className="h-8 px-2 md:px-3 text-xs md:text-sm min-w-[60px]"
+                              >
+                                <Play className="w-3 h-3 mr-1" />
+                                Run
+                              </Button>
+                              {crawler.status === "running" && (
+                                <Button
+                                  size="sm"
+                                  variant="destructive"
+                                  onClick={() => stopCrawler(name)}
+                                  className="h-8 px-2 md:px-3 text-xs md:text-sm min-w-[60px]"
+                                >
+                                  <Square className="w-3 h-3 mr-1" />
+                                  Stop
+                                </Button>
+                              )}
+                              <Button
+                                size="sm"
+                                variant="outline"
+                                onClick={() => viewCrawlerLogs(name)}
+                                className="h-8 px-2 md:px-3 text-xs md:text-sm"
+                              >
+                                {selectedCrawler === name ? "Hide" : "Logs"}
+                              </Button>
+                            </div>
+                          </TableCell>
+                        </TableRow>
+                        {selectedCrawler === name && crawler.logs && crawler.logs.length > 0 && (
+                          <TableRow>
+                            <TableCell colSpan={5} className="bg-muted/50">
+                              <div className="max-h-48 overflow-y-auto p-2">
+                                <div className="text-xs font-mono space-y-1">
+                                  {crawler.logs.slice(-20).map((log, idx) => (
+                                    <div key={idx} className="text-muted-foreground">
+                                      {log}
+                                    </div>
+                                  ))}
+                                </div>
+                              </div>
+                            </TableCell>
+                          </TableRow>
+                        )}
+                      </React.Fragment>
+                    ))
+                  ) : (
+                    <TableRow>
+                      <TableCell colSpan={5} className="text-center text-muted-foreground py-6 md:py-8 text-sm">
+                        No crawlers available or loading...
+                      </TableCell>
+                    </TableRow>
+                  )}
+                </TableBody>
+              </Table>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Database Management */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center text-lg md:text-xl">
+              <Database className="w-5 h-5 mr-2" />
+              Database Management
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-blue-600">
+                    {databaseStats?.total_databases || 0}
+                  </div>
+                  <p className="text-sm text-muted-foreground">Total Databases</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-green-600">
+                    {databaseStats?.active_databases || 0}
+                  </div>
+                  <p className="text-sm text-muted-foreground">Active Databases</p>
+                </div>
+                <div className="text-center">
+                  <div className="text-2xl font-bold text-purple-600">
+                    {databaseStats?.databases?.reduce((sum, db) => sum + db.total_chunks, 0) || 0}
+                  </div>
+                  <p className="text-sm text-muted-foreground">Total Chunks</p>
+                </div>
+              </div>
+
+              <div className="space-y-3">
+                {databaseStats?.databases?.map((db) => (
+                  <Card key={`${db.name}-${db.type}`} className="bg-muted/50">
+                    <CardContent className="p-4">
+                      <div className="flex items-center justify-between mb-3">
+                        <div className="flex items-center space-x-3">
+                          <div className={`w-3 h-3 rounded-full ${
+                            db.status === 'active' ? 'bg-green-500' : 'bg-gray-400'
+                          }`} />
+                          <div>
+                            <h4 className="font-medium capitalize">{db.name}</h4>
+                            <p className="text-sm text-muted-foreground capitalize">{db.type} Database</p>
+                          </div>
+                        </div>
+                        <Badge variant={db.status === 'active' ? 'secondary' : 'outline'}>
+                          {db.status}
+                        </Badge>
+                      </div>
+
+                      <div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
+                        <div>
+                          <span className="text-muted-foreground">Chunks:</span>
+                          <div className="font-medium">{db.total_chunks.toLocaleString()}</div>
+                        </div>
+                        {db.elasticsearch_enabled && (
+                          <div>
+                            <span className="text-muted-foreground">ES Docs:</span>
+                            <div className="font-medium">{db.elasticsearch_docs.toLocaleString()}</div>
+                          </div>
+                        )}
+                        <div>
+                          <span className="text-muted-foreground">Categories:</span>
+                          <div className="font-medium">{Object.keys(db.categories).length}</div>
+                        </div>
+                        {db.persist_directory && (
+                          <div>
+                            <span className="text-muted-foreground">Storage:</span>
+                            <div className="font-medium text-xs truncate max-w-24" title={db.persist_directory}>
+                              {db.persist_directory.split('/').pop() || 'Local'}
+                            </div>
+                          </div>
+                        )}
+                      </div>
+
+                      {Object.keys(db.categories).length > 0 && (
+                        <div className="mt-3 pt-3 border-t">
+                          <div className="text-sm text-muted-foreground mb-2">Top Categories:</div>
+                          <div className="flex flex-wrap gap-1">
+                            {Object.entries(db.categories)
+                              .sort(([,a], [,b]) => b - a)
+                              .slice(0, 5)
+                              .map(([category, count]) => (
+                                <Badge key={category} variant="outline" className="text-xs">
+                                  {category}: {count}
+                                </Badge>
+                              ))}
+                          </div>
+                        </div>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Command Shell */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center text-lg md:text-xl">
+              <Activity className="w-5 h-5 mr-2" />
+              Command Shell
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3 md:space-y-4">
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+                <Input
+                  placeholder="Enter command to execute..."
+                  value={command}
+                  onChange={(e) => setCommand(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && executeCommand()}
+                  className="flex-1 font-mono text-sm md:text-base h-10 md:h-11"
+                  disabled={isExecuting}
+                />
+                <Button 
+                  onClick={executeCommand} 
+                  disabled={isExecuting || !command.trim()}
+                  className="w-full sm:w-auto min-h-[44px] px-4 md:px-6"
+                >
+                  {isExecuting ? "Running..." : "Execute"}
+                </Button>
+              </div>
+              
+              <div className="space-y-2 max-h-64 md:max-h-96 overflow-y-auto">
+                {commandHistory.map((result, index) => (
+                  <Card key={index} className="bg-muted">
+                    <CardContent className="p-3 md:p-4">
+                      <div className="flex flex-col sm:flex-row sm:items-center space-y-2 sm:space-y-0 sm:space-x-2 mb-2">
+                        <span className="font-mono text-xs md:text-sm text-muted-foreground">$</span>
+                        <code className="font-mono text-xs md:text-sm flex-1 break-all">{result.command}</code>
+                        <Badge variant={result.exit_code === 0 ? "secondary" : "destructive"} className="text-xs w-fit">
+                          Exit: {result.exit_code}
+                        </Badge>
+                      </div>
+                      {result.stdout && (
+                        <pre className="text-xs font-mono bg-background p-2 rounded border overflow-x-auto whitespace-pre-wrap">
+                          {result.stdout}
+                        </pre>
+                      )}
+                      {result.stderr && (
+                        <pre className="text-xs font-mono bg-destructive/10 text-destructive p-2 rounded border overflow-x-auto whitespace-pre-wrap">
+                          {result.stderr}
+                        </pre>
+                      )}
+                    </CardContent>
+                  </Card>
+                ))}
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Data Explorer */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center text-lg md:text-xl">
+              <Search className="w-5 h-5 mr-2" />
+              Data Explorer
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3 md:space-y-4">
+              <div className="flex flex-col sm:flex-row space-y-2 sm:space-y-0 sm:space-x-2">
+                <Input
+                  placeholder="Search documents by keyword, source, or date..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onKeyPress={(e) => e.key === 'Enter' && searchDocuments()}
+                  className="flex-1 h-10 md:h-11 text-sm md:text-base"
+                />
+                <Button 
+                  onClick={searchDocuments}
+                  className="w-full sm:w-auto min-h-[44px] px-4 md:px-6"
+                >
+                  <Search className="w-4 h-4 mr-2" />
+                  Search
+                </Button>
+              </div>
+              
+              {documents.length > 0 && (
+                <div className="space-y-2">
+                  <p className="text-sm text-muted-foreground">
+                    Found {documents.length} documents
+                  </p>
+                  <div className="max-h-64 md:max-h-96 overflow-y-auto space-y-2">
+                    {documents.slice(0, 20).map((doc) => (
+                      <Card key={doc.id} className="cursor-pointer hover:bg-muted/50">
+                        <CardContent className="p-3 md:p-4">
+                          <div className="flex flex-col sm:flex-row sm:justify-between sm:items-start mb-2 gap-2">
+                            <h4 className="font-medium text-sm md:text-base line-clamp-1">
+                              {doc.metadata.title || "Untitled"}
+                            </h4>
+                            <Badge variant="outline" className="text-xs w-fit flex-shrink-0">
+                              {doc.metadata.category}
+                            </Badge>
+                          </div>
+                          <p className="text-xs md:text-sm text-muted-foreground mb-2 line-clamp-2">
+                            {doc.content.substring(0, 200)}...
+                          </p>
+                          <div className="flex flex-col sm:flex-row sm:justify-between text-xs text-muted-foreground gap-1">
+                            <span className="truncate">{doc.metadata.source}</span>
+                            <span className="flex-shrink-0">{doc.metadata.date}</span>
+                          </div>
+                        </CardContent>
+                      </Card>
+                    ))}
+                  </div>
+                </div>
+              )}
+              
+              <div className="text-xs md:text-sm text-muted-foreground bg-muted/50 p-3 rounded-lg">
+                <div className="grid grid-cols-1 sm:grid-cols-2 gap-2">
+                  <div><strong>Categories:</strong> {stats ? Object.keys(stats.categories).join(", ") : "Loading..."}</div>
+                  <div><strong>Sources:</strong> {stats ? stats.sources.join(", ") : "Loading..."}</div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Database Storage */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center text-lg md:text-xl">
+              <Database className="w-5 h-5 mr-2" />
+              Database Storage
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {databaseStorageStats ? (
+                <>
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-blue-600">
+                        {databaseStorageStats.raw_documents.total}
+                      </div>
+                      <p className="text-sm text-muted-foreground">Raw Documents</p>
+                      <div className="text-xs text-green-600">
+                        {databaseStorageStats.raw_documents.processed} processed
+                      </div>
+                      <div className="text-xs text-orange-600">
+                        {databaseStorageStats.raw_documents.unprocessed} unprocessed
+                      </div>
+                    </div>
+                    <div className="text-center">
+                      <div className="text-2xl font-bold text-purple-600">
+                        {databaseStorageStats.processed_chunks.total}
+                      </div>
+                      <p className="text-sm text-muted-foreground">Processed Chunks</p>
+                    </div>
+                  </div>
+
+                  <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                      <h4 className="font-medium mb-2">Raw Documents by Category</h4>
+                      <div className="space-y-1">
+                        {Object.entries(databaseStorageStats.raw_documents.categories).map(([category, count]) => (
+                          <div key={category} className="flex justify-between text-sm">
+                            <span className="truncate">{category}</span>
+                            <Badge variant="outline" className="text-xs">{count}</Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                    <div>
+                      <h4 className="font-medium mb-2">Processed Chunks by Category</h4>
+                      <div className="space-y-1">
+                        {Object.entries(databaseStorageStats.processed_chunks.categories).map(([category, count]) => (
+                          <div key={category} className="flex justify-between text-sm">
+                            <span className="truncate">{category}</span>
+                            <Badge variant="outline" className="text-xs">{count}</Badge>
+                          </div>
+                        ))}
+                      </div>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <div className="text-center text-muted-foreground py-8">
+                  Database storage stats not available
+                </div>
+              )}
+            </div>
+          </CardContent>
+        </Card>
+
+        {/* Configuration Management */}
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex items-center text-lg md:text-xl">
+              <Database className="w-5 h-5 mr-2" />
+              Configuration Management
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              {/* Add New Config */}
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <Input
+                  placeholder="Config Key (e.g., ELASTICSEARCH_URL)"
+                  value={newConfigKey}
+                  onChange={(e) => setNewConfigKey(e.target.value)}
+                  className="text-sm"
+                />
+                <Input
+                  placeholder="Config Value"
+                  value={newConfigValue}
+                  onChange={(e) => setNewConfigValue(e.target.value)}
+                  type="password"
+                  className="text-sm"
+                />
+                <div className="flex space-x-2">
+                  <Input
+                    placeholder="Description (optional)"
+                    value={newConfigDescription}
+                    onChange={(e) => setNewConfigDescription(e.target.value)}
+                    className="flex-1 text-sm"
+                  />
+                  <Button 
+                    onClick={setConfig}
+                    disabled={!newConfigKey.trim() || !newConfigValue.trim()}
+                    className="px-4"
+                  >
+                    Add
+                  </Button>
+                </div>
+              </div>
+
+              {/* Config List */}
+              <div className="space-y-2">
+                <h4 className="font-medium text-sm">Current Configurations</h4>
+                <div className="max-h-64 overflow-y-auto space-y-2">
+                  {Object.entries(configs).map(([key, config]) => (
+                    <Card key={key} className="bg-muted/50">
+                      <CardContent className="p-3">
+                        <div className="flex items-center justify-between">
+                          <div className="flex-1 min-w-0">
+                            <div className="font-mono text-sm font-medium truncate">{key}</div>
+                            <div className="text-xs text-muted-foreground">{config.description || "No description"}</div>
+                          </div>
+                          <div className="flex items-center space-x-2 ml-4">
+                            <Badge variant={config.has_value ? "secondary" : "outline"} className="text-xs">
+                              {config.has_value ? "Set" : "Empty"}
+                            </Badge>
+                            <Button
+                              size="sm"
+                              variant="destructive"
+                              onClick={() => deleteConfig(key)}
+                              className="h-8 px-2 text-xs"
+                            >
+                              Delete
+                            </Button>
+                          </div>
+                        </div>
+                      </CardContent>
+                    </Card>
+                  ))}
+                  {Object.keys(configs).length === 0 && (
+                    <div className="text-center text-muted-foreground py-4 text-sm">
+                      No configurations found
+                    </div>
+                  )}
+                </div>
+              </div>
+
+              {/* Common Config Templates */}
+              <div className="text-xs text-muted-foreground bg-muted/50 p-3 rounded-lg">
+                <div className="font-medium mb-2">Common Configuration Keys:</div>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-1 text-xs">
+                  <div>• ELASTICSEARCH_URL - Elasticsearch cloud URL</div>
+                  <div>• ELASTICSEARCH_API_KEY - Elasticsearch API key</div>
+                  <div>• UPSTASH_VECTOR_URL - Upstash Vector URL</div>
+                  <div>• UPSTASH_VECTOR_TOKEN - Upstash Vector token</div>
+                  <div>• QDRANT_URL - QDrant cloud URL</div>
+                  <div>• QDRANT_API_KEY - QDrant API key</div>
+                  <div>• UPSTASH_REDIS_URL - Upstash Redis URL</div>
+                  <div>• UPSTASH_REDIS_TOKEN - Upstash Redis token</div>
+                  <div>• LLM_PROVIDER - LLM provider (moonshot, openai, etc.)</div>
+                  <div>• GEMINI_API_KEY - Gemini API key</div>
+                  <div>• OPENAI_API_KEY - OpenAI API key</div>
+                </div>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+        </div>
+      </div>
+    </div>
+  )
+}

src/app/admin/rag/page.tsx

@@ -0,0 +1,344 @@
+"use client"
+
+/**
+ * RAG Settings - Admin Page
+ * 
+ * Configure retrieval-augmented generation pipeline settings
+ */
+
+import { useState } from "react"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import { Switch } from "@/components/ui/switch"
+import { Slider } from "@/components/ui/slider"
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
+import {
+  Search,
+  Zap,
+  Filter,
+  Sparkles,
+  RefreshCw,
+  Database,
+  TrendingUp,
+  Settings,
+  CheckCircle
+} from "lucide-react"
+
+interface RAGConfig {
+  // Retrieval settings
+  topK: number
+  useReranking: boolean
+  rerankTopK: number
+  
+  // Query expansion
+  useHyDE: boolean
+  useMultiQuery: boolean
+  queryVariants: number
+  
+  // Hybrid search
+  useHybridSearch: boolean
+  hybridAlpha: number // 0 = all BM25, 1 = all vector
+  
+  // Caching
+  enableSemanticCache: boolean
+  cacheTTLHours: number
+  
+  // Performance
+  parallelRetrieval: boolean
+  maxNamespaces: number
+}
+
+const DEFAULT_CONFIG: RAGConfig = {
+  topK: 5,
+  useReranking: true,
+  rerankTopK: 5,
+  useHyDE: false,
+  useMultiQuery: false,
+  queryVariants: 3,
+  useHybridSearch: false,
+  hybridAlpha: 0.7,
+  enableSemanticCache: true,
+  cacheTTLHours: 24,
+  parallelRetrieval: true,
+  maxNamespaces: 5
+}
+
+export default function RAGSettingsPage() {
+  const [config, setConfig] = useState<RAGConfig>(DEFAULT_CONFIG)
+  const [isSaving, setIsSaving] = useState(false)
+
+  const updateConfig = <K extends keyof RAGConfig>(key: K, value: RAGConfig[K]) => {
+    setConfig(prev => ({ ...prev, [key]: value }))
+  }
+
+  const handleSave = async () => {
+    setIsSaving(true)
+    // TODO: Save to backend
+    await new Promise(r => setTimeout(r, 1000))
+    setIsSaving(false)
+  }
+
+  return (
+    <div className="container mx-auto py-6 space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-3xl font-bold">RAG Pipeline Settings</h1>
+          <p className="text-muted-foreground">Configure retrieval and generation parameters</p>
+        </div>
+        <Button onClick={handleSave} disabled={isSaving}>
+          {isSaving ? <RefreshCw className="h-4 w-4 mr-2 animate-spin" /> : <CheckCircle className="h-4 w-4 mr-2" />}
+          Save Changes
+        </Button>
+      </div>
+
+      <div className="grid gap-6 md:grid-cols-4">
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Top K</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{config.topK}</div>
+            <p className="text-xs text-muted-foreground">Documents retrieved</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Re-ranking</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{config.useReranking ? "Enabled" : "Disabled"}</div>
+            <p className="text-xs text-muted-foreground">Intelligent filtering</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Hybrid α</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{config.hybridAlpha.toFixed(1)}</div>
+            <p className="text-xs text-muted-foreground">Vector vs BM25 balance</p>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Cache TTL</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">{config.cacheTTLHours}h</div>
+            <p className="text-xs text-muted-foreground">Result caching</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Tabs defaultValue="retrieval" className="space-y-4">
+        <TabsList>
+          <TabsTrigger value="retrieval">
+            <Search className="h-4 w-4 mr-2" />
+            Retrieval
+          </TabsTrigger>
+          <TabsTrigger value="expansion">
+            <Sparkles className="h-4 w-4 mr-2" />
+            Query Expansion
+          </TabsTrigger>
+          <TabsTrigger value="hybrid">
+            <Database className="h-4 w-4 mr-2" />
+            Hybrid Search
+          </TabsTrigger>
+          <TabsTrigger value="performance">
+            <Zap className="h-4 w-4 mr-2" />
+            Performance
+          </TabsTrigger>
+        </TabsList>
+
+        <TabsContent value="retrieval">
+          <Card>
+            <CardHeader>
+              <CardTitle>Retrieval Settings</CardTitle>
+              <CardDescription>Configure document retrieval parameters</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="space-y-2">
+                <Label>Top K: {config.topK}</Label>
+                <Slider
+                  value={[config.topK]}
+                  min={1}
+                  max={20}
+                  step={1}
+                  onValueChange={(v) => updateConfig('topK', v[0])}
+                />
+                <p className="text-xs text-muted-foreground">Number of documents to retrieve</p>
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Intelligent Re-ranking</Label>
+                  <p className="text-xs text-muted-foreground">Use cross-encoder to filter relevant docs</p>
+                </div>
+                <Switch
+                  checked={config.useReranking}
+                  onCheckedChange={(v: boolean) => updateConfig('useReranking', v)}
+                />
+              </div>
+
+              {config.useReranking && (
+                <div className="space-y-2 ml-4 p-4 bg-muted/50 rounded-lg">
+                  <Label>Re-rank Top K: {config.rerankTopK}</Label>
+                  <Slider
+                    value={[config.rerankTopK]}
+                    min={1}
+                    max={10}
+                    step={1}
+                    onValueChange={(v) => updateConfig('rerankTopK', v[0])}
+                  />
+                  <p className="text-xs text-muted-foreground">Documents after re-ranking</p>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="expansion">
+          <Card>
+            <CardHeader>
+              <CardTitle>Query Expansion</CardTitle>
+              <CardDescription>Improve recall with query expansion techniques</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>HyDE (Hypothetical Document Embeddings)</Label>
+                  <p className="text-xs text-muted-foreground">Generate hypothetical answer, then search</p>
+                </div>
+                <Switch
+                  checked={config.useHyDE}
+                  onCheckedChange={(v: boolean) => updateConfig('useHyDE', v)}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Multi-Query</Label>
+                  <p className="text-xs text-muted-foreground">Generate multiple query variants</p>
+                </div>
+                <Switch
+                  checked={config.useMultiQuery}
+                  onCheckedChange={(v: boolean) => updateConfig('useMultiQuery', v)}
+                />
+              </div>
+
+              {config.useMultiQuery && (
+                <div className="space-y-2 ml-4 p-4 bg-muted/50 rounded-lg">
+                  <Label>Query Variants: {config.queryVariants}</Label>
+                  <Slider
+                    value={[config.queryVariants]}
+                    min={2}
+                    max={5}
+                    step={1}
+                    onValueChange={(v) => updateConfig('queryVariants', v[0])}
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="hybrid">
+          <Card>
+            <CardHeader>
+              <CardTitle>Hybrid Search</CardTitle>
+              <CardDescription>Combine vector and keyword search</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Enable Hybrid Search</Label>
+                  <p className="text-xs text-muted-foreground">Combine BM25 + vector similarity</p>
+                </div>
+                <Switch
+                  checked={config.useHybridSearch}
+                  onCheckedChange={(v: boolean) => updateConfig('useHybridSearch', v)}
+                />
+              </div>
+
+              {config.useHybridSearch && (
+                <div className="space-y-2">
+                  <Label>Hybrid Alpha: {config.hybridAlpha.toFixed(2)}</Label>
+                  <Slider
+                    value={[config.hybridAlpha]}
+                    min={0}
+                    max={1}
+                    step={0.05}
+                    onValueChange={(v) => updateConfig('hybridAlpha', v[0])}
+                  />
+                  <div className="flex justify-between text-xs text-muted-foreground">
+                    <span>BM25 (keywords)</span>
+                    <span>Vector (semantic)</span>
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+
+        <TabsContent value="performance">
+          <Card>
+            <CardHeader>
+              <CardTitle>Performance Settings</CardTitle>
+              <CardDescription>Optimize speed and caching</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-6">
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Parallel Retrieval</Label>
+                  <p className="text-xs text-muted-foreground">Query all namespaces simultaneously</p>
+                </div>
+                <Switch
+                  checked={config.parallelRetrieval}
+                  onCheckedChange={(v: boolean) => updateConfig('parallelRetrieval', v)}
+                />
+              </div>
+
+              <div className="space-y-2">
+                <Label>Max Namespaces: {config.maxNamespaces}</Label>
+                <Slider
+                  value={[config.maxNamespaces]}
+                  min={1}
+                  max={10}
+                  step={1}
+                  onValueChange={(v) => updateConfig('maxNamespaces', v[0])}
+                />
+              </div>
+
+              <div className="flex items-center justify-between">
+                <div className="space-y-0.5">
+                  <Label>Semantic Cache</Label>
+                  <p className="text-xs text-muted-foreground">Cache similar query results</p>
+                </div>
+                <Switch
+                  checked={config.enableSemanticCache}
+                  onCheckedChange={(v: boolean) => updateConfig('enableSemanticCache', v)}
+                />
+              </div>
+
+              {config.enableSemanticCache && (
+                <div className="space-y-2 ml-4 p-4 bg-muted/50 rounded-lg">
+                  <Label>Cache TTL: {config.cacheTTLHours} hours</Label>
+                  <Slider
+                    value={[config.cacheTTLHours]}
+                    min={1}
+                    max={168}
+                    step={1}
+                    onValueChange={(v) => updateConfig('cacheTTLHours', v[0])}
+                  />
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </TabsContent>
+      </Tabs>
+    </div>
+  )
+}

src/app/admin/settings/page.tsx

@@ -0,0 +1,303 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/lib/auth-context"
+import { AdminSidebar } from "@/components/admin-sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { toast } from "sonner"
+import {
+  Settings,
+  Plus,
+  Trash2,
+  Loader2,
+  RefreshCw,
+} from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+interface ConfigEntry {
+  key: string
+  value: string
+  description?: string
+}
+
+export default function AdminSettingsPage() {
+  const { isAuthenticated, isAdmin, loading } = useAuth()
+  const router = useRouter()
+  const [configs, setConfigs] = useState<Record<string, ConfigEntry>>({})
+  const [loadingConfigs, setLoadingConfigs] = useState(true)
+  const [newConfig, setNewConfig] = useState({
+    key: "",
+    value: "",
+    description: "",
+  })
+  const [saving, setSaving] = useState(false)
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/admin/settings")
+    } else if (!loading && isAuthenticated && !isAdmin) {
+      router.push("/chat")
+    }
+  }, [isAuthenticated, isAdmin, loading, router])
+
+  useEffect(() => {
+    if (isAuthenticated && isAdmin) {
+      fetchConfigs()
+    }
+  }, [isAuthenticated, isAdmin])
+
+  const fetchConfigs = async () => {
+    setLoadingConfigs(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`${API_URL}/admin/config`, {
+        headers: {
+          "X-Session-Token": sessionToken || "",
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setConfigs(data.configs || {})
+      } else {
+        toast.error("Failed to fetch settings")
+      }
+    } catch {
+      toast.error("Failed to fetch settings")
+    } finally {
+      setLoadingConfigs(false)
+    }
+  }
+
+  const handleSaveConfig = async (key: string, value: string) => {
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`${API_URL}/admin/config/${key}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Session-Token": sessionToken || "",
+        },
+        body: JSON.stringify({ value }),
+      })
+
+      if (response.ok) {
+        toast.success("Setting updated successfully")
+        fetchConfigs()
+      } else {
+        toast.error("Failed to update setting")
+      }
+    } catch {
+      toast.error("Failed to update setting")
+    }
+  }
+
+  const handleAddConfig = async () => {
+    if (!newConfig.key || !newConfig.value) {
+      toast.error("Key and value are required")
+      return
+    }
+
+    setSaving(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`${API_URL}/admin/config/${newConfig.key}`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          "X-Session-Token": sessionToken || "",
+        },
+        body: JSON.stringify({
+          value: newConfig.value,
+          description: newConfig.description,
+        }),
+      })
+
+      if (response.ok) {
+        toast.success("Setting added successfully")
+        setNewConfig({ key: "", value: "", description: "" })
+        fetchConfigs()
+      } else {
+        toast.error("Failed to add setting")
+      }
+    } catch {
+      toast.error("Failed to add setting")
+    } finally {
+      setSaving(false)
+    }
+  }
+
+  const handleDeleteConfig = async (key: string) => {
+    if (!confirm(`Are you sure you want to delete the setting "${key}"?`)) {
+      return
+    }
+
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`${API_URL}/admin/config/${key}`, {
+        method: "DELETE",
+        headers: {
+          "X-Session-Token": sessionToken || "",
+        },
+      })
+
+      if (response.ok) {
+        toast.success("Setting deleted successfully")
+        fetchConfigs()
+      } else {
+        toast.error("Failed to delete setting")
+      }
+    } catch {
+      toast.error("Failed to delete setting")
+    }
+  }
+
+  if (loading || !isAuthenticated || !isAdmin) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <AdminSidebar />
+      <div className="flex-1 ml-0 md:ml-[20px] p-4 md:p-6">
+        <div className="absolute top-4 right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <div className="max-w-4xl mx-auto space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <Settings className="w-8 h-8" />
+              Site Settings
+            </h1>
+            <p className="text-muted-foreground">Manage system configuration and settings</p>
+          </div>
+
+          {/* Add New Config */}
+          <Card>
+            <CardHeader>
+              <CardTitle>Add New Setting</CardTitle>
+              <CardDescription>Create a new configuration entry</CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="space-y-4">
+                <div>
+                  <label className="text-sm font-medium">Key</label>
+                  <Input
+                    placeholder="setting.key"
+                    value={newConfig.key}
+                    onChange={(e) => setNewConfig({ ...newConfig, key: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium">Value</label>
+                  <Input
+                    placeholder="Setting value"
+                    value={newConfig.value}
+                    onChange={(e) => setNewConfig({ ...newConfig, value: e.target.value })}
+                  />
+                </div>
+                <div>
+                  <label className="text-sm font-medium">Description (optional)</label>
+                  <Input
+                    placeholder="What this setting does"
+                    value={newConfig.description}
+                    onChange={(e) => setNewConfig({ ...newConfig, description: e.target.value })}
+                  />
+                </div>
+                <Button onClick={handleAddConfig} disabled={saving}>
+                  {saving ? (
+                    <>
+                      <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                      Adding...
+                    </>
+                  ) : (
+                    <>
+                      <Plus className="mr-2 h-4 w-4" />
+                      Add Setting
+                    </>
+                  )}
+                </Button>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Existing Configs */}
+          <Card>
+            <CardHeader>
+              <div className="flex items-center justify-between">
+                <div>
+                  <CardTitle>System Settings</CardTitle>
+                  <CardDescription>Manage existing configuration entries</CardDescription>
+                </div>
+                <Button variant="outline" size="sm" onClick={fetchConfigs}>
+                  <RefreshCw className="mr-2 h-4 w-4" />
+                  Refresh
+                </Button>
+              </div>
+            </CardHeader>
+            <CardContent>
+              {loadingConfigs ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-primary" />
+                </div>
+              ) : Object.keys(configs).length === 0 ? (
+                <div className="text-center py-12 text-muted-foreground">
+                  No settings configured
+                </div>
+              ) : (
+                <div className="space-y-4">
+                  {Object.entries(configs).map(([key, config]) => (
+                    <div
+                      key={key}
+                      className="flex items-start gap-4 p-4 border rounded-lg hover:bg-accent/50"
+                    >
+                      <div className="flex-1 space-y-2">
+                        <div className="flex items-center gap-2">
+                          <code className="text-sm font-mono font-semibold">{key}</code>
+                          {config.description && (
+                            <Badge variant="outline" className="text-xs">
+                              {config.description}
+                            </Badge>
+                          )}
+                        </div>
+                        <Input
+                          value={config.value}
+                          onChange={(e) => {
+                            setConfigs({
+                              ...configs,
+                              [key]: { ...config, value: e.target.value },
+                            })
+                          }}
+                          onBlur={() => handleSaveConfig(key, config.value)}
+                          className="font-mono text-sm"
+                        />
+                      </div>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDeleteConfig(key)}
+                        className="text-destructive hover:text-destructive"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/app/admin/training/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Database, Download, RefreshCw } from "lucide-react";
+import { AdminSidebar } from "@/components/admin-sidebar";
+
+interface FeedbackAnalytics {
+  feedback_distribution: {
+    total: number;
+    positive: number;
+    negative: number;
+    positive_rate: number;
+  };
+  training_impact: {
+    total_scored: number;
+    training_candidates: number;
+    awaiting_export: number;
+    conversion_rate: string;
+    average_quality_score: number;
+  };
+  score_distribution: {
+    [key: string]: number;
+  };
+}
+
+interface TrainingStats {
+  total_scored: number;
+  kept_for_training: number;
+  exported: number;
+  awaiting_export: number;
+  average_score: number;
+  score_distribution: {
+    [key: string]: number;
+  };
+}
+
+interface ClusterStats {
+  total_clusters: number;
+  active_clusters: number;
+  pending_suggestions: number;
+  total_queries_classified: number;
+}
+
+export default function TrainingMonitorPage() {
+  const [feedbackData, setFeedbackData] = useState<FeedbackAnalytics | null>(null);
+  const [trainingData, setTrainingData] = useState<TrainingStats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
+
+  const fetchAnalytics = async () => {
+    try {
+      setRefreshing(true);
+
+      const feedbackRes = await fetch("/api/v1/feedback/analytics");
+      if (feedbackRes.ok) {
+        setFeedbackData(await feedbackRes.json());
+      }
+
+      const trainingRes = await fetch("/api/v1/finetuning/stats");
+      if (trainingRes.ok) {
+        setTrainingData(await trainingRes.json());
+      }
+    } catch (error) {
+      console.error("Failed to fetch analytics:", error);
+    } finally {
+      setLoading(false);
+      setRefreshing(false);
+    }
+  };
+
+  useEffect(() => {
+    fetchAnalytics();
+    
+    // Auto-refresh every 30 seconds for real-time monitoring
+    const interval = setInterval(() => {
+      fetchAnalytics();
+    }, 30000);
+    
+    return () => clearInterval(interval);
+  }, []);
+
+  const handleExport = async (format: string) => {
+    try {
+      const res = await fetch(`/api/v1/finetuning/export?format=${format}&min_score=4.0`, {
+        method: "POST",
+      });
+      const data = await res.json();
+      alert(`Exported ${data.exported_count} interactions!`);
+      fetchAnalytics(); // Refresh stats
+    } catch (error) {
+      console.error("Export failed:", error);
+      alert("Export failed. Check console.");
+    }
+  };
+
+  const scoreLast7Days = async () => {
+    try {
+      const res = await fetch("/api/v1/finetuning/auto-score-all?days=7", { method: "POST" });
+      const data = await res.json();
+      alert(`Scored ${data.scored} interactions, ${data.saved_for_training} added to training dataset!`);
+      fetchAnalytics();
+    } catch (error) {
+      console.error("Scoring failed:", error);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen">
+        <div className="text-center space-y-4">
+          <RefreshCw className="w-8 h-8 animate-spin mx-auto text-blue-500" />
+          <p className="text-gray-600">Loading training metrics...</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <>
+      <AdminSidebar />
+      <div className="ml-0 md:ml-5 transition-all duration-300">
+        <div className="container mx-auto p-6 space-y-6">
+      <div className="flex justify-between items-center">
+        <div>
+          <h1 className="text-3xl font-bold">Training & Feedback Monitor</h1>
+          <p className="text-gray-500 mt-1">Track model improvement and data quality</p>
+        </div>
+        <div className="flex gap-2">
+          <Button onClick={scoreLast7Days} variant="outline">
+            Score Last 7 Days
+          </Button>
+          <Button onClick={fetchAnalytics} disabled={refreshing} variant="outline">
+            <RefreshCw className={`w-4 h-4 mr-2 ${refreshing ? "animate-spin" : ""}`} />
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      {/* KPI Cards */}
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+        <Card className="border-l-4 border-l-blue-500">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Total Feedback</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{feedbackData?.feedback_distribution.total || 0}</div>
+            <p className="text-xs text-green-600 mt-1">
+              ↑ {feedbackData?.feedback_distribution.positive_rate.toFixed(1)}% positive
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-green-500">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Training Ready</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{feedbackData?.training_impact.training_candidates || 0}</div>
+            <p className="text-xs text-gray-500 mt-1">
+              Score: {feedbackData?.training_impact.average_quality_score.toFixed(2) || "N/A"}
+            </p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-orange-500">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Awaiting Export</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{feedbackData?.training_impact.awaiting_export || 0}</div>
+            <p className="text-xs text-gray-500 mt-1">Ready to fine-tune</p>
+          </CardContent>
+        </Card>
+
+        <Card className="border-l-4 border-l-purple-500">
+          <CardHeader className="pb-2">
+            <CardTitle className="text-sm font-medium">Conversion Rate</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="text-3xl font-bold">{feedbackData?.training_impact.conversion_rate || "0%"}</div>
+            <p className="text-xs text-gray-500 mt-1">Feedback → Training</p>
+          </CardContent>
+        </Card>
+      </div>
+
+      {/* Export Section */}
+      <Card>
+        <CardHeader>
+          <CardTitle className="flex items-center gap-2">
+            <Download className="w-5 h-5" />
+            Export Training Dataset
+          </CardTitle>
+          <CardDescription>
+            Export {feedbackData?.training_impact.awaiting_export || 0} high-quality interactions for fine-tuning
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <div className="flex gap-3">
+            <Button onClick={() => handleExport("alpaca")} className="flex-1" size="lg">
+              <Database className="w-4 h-4 mr-2" />
+              Export Alpaca Format
+            </Button>
+            <Button onClick={() => handleExport("sharegpt")} variant="secondary" className="flex-1" size="lg">
+              <Database className="w-4 h-4 mr-2" />
+              Export ShareGPT Format
+            </Button>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Quality Distribution */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+        <Card>
+          <CardHeader>
+            <CardTitle>Quality Score Distribution</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-3">
+              {feedbackData?.score_distribution && Object.entries(feedbackData.score_distribution).map(([tier, count]) => {
+                const percentage = (count / (feedbackData.training_impact.total_scored || 1)) * 100;
+                return (
+                  <div key={tier}>
+                    <div className="flex justify-between mb-1">
+                      <span className="text-sm capitalize">{tier.replace(/_/g, " ")}</span>
+                      <span className="text-sm font-medium">{count}</span>
+                    </div>
+                    <div className="w-full bg-gray-200 rounded-full h-2 overflow-hidden">
+                      <div
+                        className="bg-blue-500 h-2 rounded-full transition-all duration-300"
+                        style={{ width: `${percentage}%` }}
+                      />
+                    </div>
+                  </div>
+                );
+              })}
+            </div>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle>Training Pipeline Status</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="space-y-4">
+              <div className="flex justify-between items-center p-3 bg-blue-50 rounded">
+                <span className="text-sm">Total Interactions Scored</span>
+                <Badge variant="outline">{trainingData?.total_scored || 0}</Badge>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-green-50 rounded">
+                <span className="text-sm">Approved for Training</span>
+                <Badge className="bg-green-600">{trainingData?.kept_for_training || 0}</Badge>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-gray-50 rounded">
+                <span className="text-sm">Already Exported</span>
+                <Badge variant="secondary">{trainingData?.exported || 0}</Badge>
+              </div>
+              <div className="flex justify-between items-center p-3 bg-orange-50 rounded">
+                <span className="text-sm">Pending Export</span>
+                <Badge className="bg-orange-600">{trainingData?.awaiting_export || 0}</Badge>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/admin/users/page.tsx

@@ -0,0 +1,711 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useRouter } from "next/navigation"
+import { useAuth } from "@/lib/auth-context"
+import { AdminSidebar } from "@/components/admin-sidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Label } from "@/components/ui/label"
+import { toast } from "sonner"
+import {
+  Users,
+  Search,
+  CheckCircle,
+  XCircle,
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
+  MoreVertical,
+  Edit,
+  Trash2,
+  Ban,
+  CheckCheck,
+  ShieldOff,
+  ShieldCheck,
+  Activity,
+  Filter,
+} from "lucide-react"
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+interface User {
+  id: string
+  email: string
+  name: string | null
+  status: string
+  email_verified: boolean
+  last_login: string | null
+  created_at: string
+  updated_at: string
+  roles?: string[]
+}
+
+interface AdminStats {
+  total_users: number
+  active_users: number
+  suspended_users: number
+  verified_users: number
+  unverified_users: number
+}
+
+export default function AdminUsersPage() {
+  const { isAuthenticated, isAdmin, loading } = useAuth()
+  const router = useRouter()
+  const [users, setUsers] = useState<User[]>([])
+  const [stats, setStats] = useState<AdminStats | null>(null)
+  const [loadingUsers, setLoadingUsers] = useState(true)
+  const [searchQuery, setSearchQuery] = useState("")
+  const [statusFilter, setStatusFilter] = useState<string>("all")
+  const [verificationFilter, setVerificationFilter] = useState<string>("all")
+  const [page, setPage] = useState(1)
+  const [total, setTotal] = useState(0)
+  const [pageSize] = useState(20)
+  
+  // Dialog states
+  const [editDialogOpen, setEditDialogOpen] = useState(false)
+  const [deleteDialogOpen, setDeleteDialogOpen] = useState(false)
+  const [selectedUser, setSelectedUser] = useState<User | null>(null)
+  const [editFormData, setEditFormData] = useState({ name: "", email: "", status: "" })
+  const [actionLoading, setActionLoading] = useState(false)
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/admin/users")
+    } else if (!loading && isAuthenticated && !isAdmin) {
+      router.push("/chat")
+    }
+  }, [isAuthenticated, isAdmin, loading, router])
+
+  useEffect(() => {
+    if (isAuthenticated && isAdmin) {
+      fetchUsers()
+      fetchStats()
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [page, statusFilter, verificationFilter, isAuthenticated, isAdmin])
+
+  const fetchStats = async () => {
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(`${API_URL}/api/v1/auth/admin/stats`, {
+        headers: {
+          "X-Session-Token": sessionToken || "",
+        },
+      })
+      if (response.ok) {
+        const data = await response.json()
+        setStats(data)
+      }
+    } catch {
+      // Stats are optional, don't show error
+    }
+  }
+
+  const fetchUsers = async () => {
+    setLoadingUsers(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const params = new URLSearchParams({
+        page: page.toString(),
+        page_size: pageSize.toString(),
+      })
+      
+      if (searchQuery) params.append("search", searchQuery)
+      if (statusFilter !== "all") params.append("status", statusFilter)
+      if (verificationFilter !== "all") params.append("email_verified", verificationFilter)
+      
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users?${params}`,
+        {
+          headers: {
+            "X-Session-Token": sessionToken || "",
+          },
+        }
+      )
+
+      if (response.ok) {
+        const data = await response.json()
+        setUsers(data.users || [])
+        setTotal(data.total || 0)
+      } else {
+        toast.error("Failed to fetch users")
+      }
+    } catch {
+      toast.error("Failed to fetch users")
+    } finally {
+      setLoadingUsers(false)
+    }
+  }
+
+  const handleEditUser = (user: User) => {
+    setSelectedUser(user)
+    setEditFormData({
+      name: user.name || "",
+      email: user.email,
+      status: user.status,
+    })
+    setEditDialogOpen(true)
+  }
+
+  const handleSaveEdit = async () => {
+    if (!selectedUser) return
+    
+    setActionLoading(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users/${selectedUser.id}`,
+        {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+            "X-Session-Token": sessionToken || "",
+          },
+          body: JSON.stringify({
+            name: editFormData.name || null,
+            email: editFormData.email,
+            status: editFormData.status,
+          }),
+        }
+      )
+
+      if (response.ok) {
+        toast.success("User updated successfully")
+        setEditDialogOpen(false)
+        fetchUsers()
+        fetchStats()
+      } else {
+        const error = await response.json()
+        toast.error(error.detail || "Failed to update user")
+      }
+    } catch {
+      toast.error("Failed to update user")
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleVerifyEmail = async (userId: string, verify: boolean) => {
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const endpoint = verify ? "verify-email" : "unverify-email"
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users/${userId}/${endpoint}`,
+        {
+          method: "POST",
+          headers: {
+            "X-Session-Token": sessionToken || "",
+          },
+        }
+      )
+
+      if (response.ok) {
+        toast.success(verify ? "Email verified" : "Email unverified")
+        fetchUsers()
+        fetchStats()
+      } else {
+        toast.error("Failed to update verification status")
+      }
+    } catch {
+      toast.error("Failed to update verification status")
+    }
+  }
+
+  const handleSuspendUser = async (userId: string, suspend: boolean) => {
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const endpoint = suspend ? "suspend" : "activate"
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users/${userId}/${endpoint}`,
+        {
+          method: "POST",
+          headers: {
+            "X-Session-Token": sessionToken || "",
+          },
+        }
+      )
+
+      if (response.ok) {
+        toast.success(suspend ? "User suspended" : "User activated")
+        fetchUsers()
+        fetchStats()
+      } else {
+        toast.error("Failed to update user status")
+      }
+    } catch {
+      toast.error("Failed to update user status")
+    }
+  }
+
+  const handleDeleteUser = async () => {
+    if (!selectedUser) return
+    
+    setActionLoading(true)
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users/${selectedUser.id}`,
+        {
+          method: "DELETE",
+          headers: {
+            "X-Session-Token": sessionToken || "",
+          },
+        }
+      )
+
+      if (response.ok) {
+        toast.success("User deleted successfully")
+        setDeleteDialogOpen(false)
+        fetchUsers()
+        fetchStats()
+      } else {
+        const error = await response.json()
+        toast.error(error.detail || "Failed to delete user")
+      }
+    } catch {
+      toast.error("Failed to delete user")
+    } finally {
+      setActionLoading(false)
+    }
+  }
+
+  const handleRevokeSession = async (userId: string) => {
+    try {
+      const sessionToken = localStorage.getItem("session_token")
+      const response = await fetch(
+        `${API_URL}/api/v1/auth/admin/users/${userId}/revoke-sessions`,
+        {
+          method: "POST",
+          headers: {
+            "X-Session-Token": sessionToken || "",
+          },
+        }
+      )
+
+      if (response.ok) {
+        const data = await response.json()
+        toast.success(`Revoked ${data.sessions_revoked} session(s)`)
+      } else {
+        toast.error("Failed to revoke sessions")
+      }
+    } catch {
+      toast.error("Failed to revoke sessions")
+    }
+  }
+
+
+  const filteredUsers = users.filter(
+    (user) =>
+      user.email.toLowerCase().includes(searchQuery.toLowerCase()) ||
+      (user.name && user.name.toLowerCase().includes(searchQuery.toLowerCase()))
+  )
+
+  const totalPages = Math.ceil(total / pageSize)
+
+  if (loading || !isAuthenticated || !isAdmin) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background flex">
+      <AdminSidebar />
+      <div className="flex-1 ml-0 md:ml-[20px] p-4 md:p-6">
+        <div className="absolute top-4 right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <div className="max-w-7xl mx-auto space-y-6">
+          <div>
+            <h1 className="text-3xl font-bold flex items-center gap-2">
+              <Users className="w-8 h-8" />
+              User Management
+            </h1>
+            <p className="text-muted-foreground">Manage all users in the system</p>
+          </div>
+
+          {/* Search and Filters */}
+          <Card>
+            <CardHeader>
+              <CardTitle className="flex items-center gap-2">
+                <Filter className="w-5 h-5" />
+                Filters & Search
+              </CardTitle>
+              <CardDescription>
+                {stats && (
+                  <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
+                    <div>
+                      <p className="text-sm text-muted-foreground">Total Users</p>
+                      <p className="text-2xl font-bold">{stats.total_users}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Active</p>
+                      <p className="text-2xl font-bold text-green-600">{stats.active_users}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Suspended</p>
+                      <p className="text-2xl font-bold text-red-600">{stats.suspended_users}</p>
+                    </div>
+                    <div>
+                      <p className="text-sm text-muted-foreground">Verified</p>
+                      <p className="text-2xl font-bold text-blue-600">{stats.verified_users}</p>
+                    </div>
+                  </div>
+                )}
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
+                <div className="relative md:col-span-1">
+                  <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                  <Input
+                    placeholder="Search users..."
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    onKeyDown={(e) => e.key === "Enter" && fetchUsers()}
+                    className="pl-10"
+                  />
+                </div>
+                <Select value={statusFilter} onValueChange={setStatusFilter}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Filter by status" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Statuses</SelectItem>
+                    <SelectItem value="active">Active</SelectItem>
+                    <SelectItem value="inactive">Inactive</SelectItem>
+                    <SelectItem value="suspended">Suspended</SelectItem>
+                  </SelectContent>
+                </Select>
+                <Select value={verificationFilter} onValueChange={setVerificationFilter}>
+                  <SelectTrigger>
+                    <SelectValue placeholder="Filter by verification" />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="all">All Users</SelectItem>
+                    <SelectItem value="true">Verified Only</SelectItem>
+                    <SelectItem value="false">Unverified Only</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </CardContent>
+          </Card>
+
+          {/* Users Table */}
+          <Card>
+            <CardHeader>
+              <CardTitle>All Users</CardTitle>
+            </CardHeader>
+            <CardContent>
+              {loadingUsers ? (
+                <div className="flex items-center justify-center py-12">
+                  <Loader2 className="w-6 h-6 animate-spin text-primary" />
+                </div>
+              ) : (
+                <>
+                  <div className="overflow-x-auto">
+                    <Table>
+                      <TableHeader>
+                        <TableRow>
+                          <TableHead>Email</TableHead>
+                          <TableHead>Name</TableHead>
+                          <TableHead>Status</TableHead>
+                          <TableHead>Verified</TableHead>
+                          <TableHead>Roles</TableHead>
+                          <TableHead>Last Login</TableHead>
+                          <TableHead className="text-right">Actions</TableHead>
+                        </TableRow>
+                      </TableHeader>
+                      <TableBody>
+                        {filteredUsers.length === 0 ? (
+                          <TableRow>
+                            <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                              No users found
+                            </TableCell>
+                          </TableRow>
+                        ) : (
+                          filteredUsers.map((user) => (
+                            <TableRow key={user.id}>
+                              <TableCell className="font-medium">{user.email}</TableCell>
+                              <TableCell>{user.name || "—"}</TableCell>
+                              <TableCell>
+                                <Badge
+                                  variant={
+                                    user.status === "active" ? "default" :
+                                    user.status === "suspended" ? "destructive" : 
+                                    "secondary"
+                                  }
+                                >
+                                  {user.status}
+                                </Badge>
+                              </TableCell>
+                              <TableCell>
+                                {user.email_verified ? (
+                                  <CheckCircle className="w-5 h-5 text-green-600" />
+                                ) : (
+                                  <XCircle className="w-5 h-5 text-yellow-600" />
+                                )}
+                              </TableCell>
+                              <TableCell>
+                                {user.roles && user.roles.length > 0 ? (
+                                  <div className="flex gap-1 flex-wrap">
+                                    {user.roles.map((role) => (
+                                      <Badge key={role} variant="outline" className="text-xs">
+                                        {role}
+                                      </Badge>
+                                    ))}
+                                  </div>
+                                ) : (
+                                  <span className="text-muted-foreground text-sm">—</span>
+                                )}
+                              </TableCell>
+                              <TableCell className="text-sm text-muted-foreground">
+                                {user.last_login
+                                  ? new Date(user.last_login).toLocaleDateString()
+                                  : "Never"}
+                              </TableCell>
+                              <TableCell className="text-right">
+                                <DropdownMenu>
+                                  <DropdownMenuTrigger asChild>
+                                    <Button variant="ghost" size="sm">
+                                      <MoreVertical className="w-4 h-4" />
+                                    </Button>
+                                  </DropdownMenuTrigger>
+                                  <DropdownMenuContent align="end" className="w-56">
+                                    <DropdownMenuLabel>User Actions</DropdownMenuLabel>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem onClick={() => handleEditUser(user)}>
+                                      <Edit className="w-4 h-4 mr-2" />
+                                      Edit User
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleVerifyEmail(user.id, !user.email_verified)}>
+                                      {user.email_verified ? (
+                                        <>
+                                          <ShieldOff className="w-4 h-4 mr-2" />
+                                          Unverify Email
+                                        </>
+                                      ) : (
+                                        <>
+                                          <ShieldCheck className="w-4 h-4 mr-2" />
+                                          Verify Email
+                                        </>
+                                      )}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleSuspendUser(user.id, user.status !== "suspended")}>
+                                      {user.status === "suspended" ? (
+                                        <>
+                                          <CheckCheck className="w-4 h-4 mr-2" />
+                                          Activate Account
+                                        </>
+                                      ) : (
+                                        <>
+                                          <Ban className="w-4 h-4 mr-2" />
+                                          Suspend Account
+                                        </>
+                                      )}
+                                    </DropdownMenuItem>
+                                    <DropdownMenuItem onClick={() => handleRevokeSession(user.id)}>
+                                      <Activity className="w-4 h-4 mr-2" />
+                                      Revoke Sessions
+                                    </DropdownMenuItem>
+                                    <DropdownMenuSeparator />
+                                    <DropdownMenuItem
+                                      onClick={() => {
+                                        setSelectedUser(user)
+                                        setDeleteDialogOpen(true)
+                                      }}
+                                      className="text-red-600"
+                                    >
+                                      <Trash2 className="w-4 h-4 mr-2" />
+                                      Delete User
+                                    </DropdownMenuItem>
+                                  </DropdownMenuContent>
+                                </DropdownMenu>
+                              </TableCell>
+                            </TableRow>
+                          ))
+                        )}
+                      </TableBody>
+                    </Table>
+                  </div>
+
+                  {/* Pagination */}
+                  {totalPages > 1 && (
+                    <div className="flex items-center justify-between mt-4">
+                      <div className="text-sm text-muted-foreground">
+                        Page {page} of {totalPages}
+                      </div>
+                      <div className="flex gap-2">
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setPage((p) => Math.max(1, p - 1))}
+                          disabled={page === 1}
+                        >
+                          <ChevronLeft className="w-4 h-4" />
+                          Previous
+                        </Button>
+                        <Button
+                          variant="outline"
+                          size="sm"
+                          onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
+                          disabled={page === totalPages}
+                        >
+                          Next
+                          <ChevronRight className="w-4 h-4" />
+                        </Button>
+                      </div>
+                    </div>
+                  )}
+                </>
+              )}
+            </CardContent>
+          </Card>
+        </div>
+      </div>
+
+      {/* Edit User Dialog */}
+      <Dialog open={editDialogOpen} onOpenChange={setEditDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Edit User</DialogTitle>
+            <DialogDescription>
+              Update user information and account settings.
+            </DialogDescription>
+          </DialogHeader>
+          <div className="space-y-4 py-4">
+            <div className="space-y-2">
+              <Label htmlFor="edit-name">Name</Label>
+              <Input
+                id="edit-name"
+                value={editFormData.name}
+                onChange={(e) => setEditFormData({ ...editFormData, name: e.target.value })}
+                placeholder="User name"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-email">Email</Label>
+              <Input
+                id="edit-email"
+                type="email"
+                value={editFormData.email}
+                onChange={(e) => setEditFormData({ ...editFormData, email: e.target.value })}
+                placeholder="user@example.com"
+              />
+            </div>
+            <div className="space-y-2">
+              <Label htmlFor="edit-status">Status</Label>
+              <Select
+                value={editFormData.status}
+                onValueChange={(value: string) => setEditFormData({ ...editFormData, status: value })}
+              >
+                <SelectTrigger id="edit-status">
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectItem value="active">Active</SelectItem>
+                  <SelectItem value="inactive">Inactive</SelectItem>
+                  <SelectItem value="suspended">Suspended</SelectItem>
+                </SelectContent>
+              </Select>
+            </div>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setEditDialogOpen(false)} disabled={actionLoading}>
+              Cancel
+            </Button>
+            <Button onClick={handleSaveEdit} disabled={actionLoading}>
+              {actionLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Saving...
+                </>
+              ) : (
+                "Save Changes"
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete User Dialog */}
+      <Dialog open={deleteDialogOpen} onOpenChange={setDeleteDialogOpen}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Delete User</DialogTitle>
+            <DialogDescription>
+              Are you sure you want to permanently delete this user? This action cannot be undone.
+            </DialogDescription>
+          </DialogHeader>
+          {selectedUser && (
+            <div className="py-4">
+              <div className="p-4 bg-muted rounded-lg space-y-2">
+                <p className="text-sm">
+                  <span className="font-medium">Email:</span> {selectedUser.email}
+                </p>
+                <p className="text-sm">
+                  <span className="font-medium">Name:</span> {selectedUser.name || "—"}
+                </p>
+                <p className="text-sm">
+                  <span className="font-medium">Status:</span> {selectedUser.status}
+                </p>
+              </div>
+              <p className="text-sm text-red-600 mt-4">
+                ⚠️ All user data, sessions, and associated records will be permanently deleted.
+              </p>
+            </div>
+          )}
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setDeleteDialogOpen(false)} disabled={actionLoading}>
+              Cancel
+            </Button>
+            <Button variant="destructive" onClick={handleDeleteUser} disabled={actionLoading}>
+              {actionLoading ? (
+                <>
+                  <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+                  Deleting...
+                </>
+              ) : (
+                <>
+                  <Trash2 className="w-4 h-4 mr-2" />
+                  Delete User
+                </>
+              )}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  )
+}
+

src/app/api/admin/agent-metrics/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function GET(request: NextRequest) {
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+    
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+    
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(`${API_BASE_URL}/api/admin/agent-metrics`, {
+      headers,
+    })
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to fetch agent metrics" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error fetching agent metrics:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/admin/query-logs/route.ts

@@ -0,0 +1,41 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function GET(request: NextRequest) {
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+    const searchParams = request.nextUrl.searchParams
+    const limit = searchParams.get("limit") || "100"
+    const offset = searchParams.get("offset") || "0"
+    
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+    
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/admin/query-logs?limit=${limit}&offset=${offset}`,
+      { headers }
+    )
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to fetch query logs" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error fetching query logs:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/admin/retrain/route.ts

@@ -0,0 +1,38 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function POST(request: NextRequest) {
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(`${API_BASE_URL}/api/admin/retrain`, {
+      method: "POST",
+      headers,
+    })
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to initiate retraining" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error initiating retrain:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/admin/review-queue/[id]/approve/route.ts

@@ -0,0 +1,45 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/admin/review-queue/${id}/approve`,
+      {
+        method: "POST",
+        headers,
+      }
+    )
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to approve review" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error approving review:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/admin/review-queue/[id]/reject/route.ts

@@ -0,0 +1,47 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function POST(
+  request: NextRequest,
+  { params }: { params: Promise<{ id: string }> }
+) {
+  const { id } = await params
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+    const body = await request.json()
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(
+      `${API_BASE_URL}/api/admin/review-queue/${id}/reject`,
+      {
+        method: "POST",
+        headers,
+        body: JSON.stringify(body),
+      }
+    )
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to reject review" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error rejecting review:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/admin/review-queue/route.ts

@@ -0,0 +1,37 @@
+import { NextRequest, NextResponse } from "next/server"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+export async function GET(request: NextRequest) {
+  try {
+    const sessionToken = request.headers.get("x-session-token")
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+    }
+
+    if (sessionToken) {
+      headers["X-Session-Token"] = sessionToken
+    }
+
+    const response = await fetch(`${API_BASE_URL}/api/admin/review-queue`, {
+      headers,
+    })
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: "Failed to fetch review queue" },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+    return NextResponse.json(data)
+  } catch (error) {
+    console.error("Error fetching review queue:", error)
+    return NextResponse.json(
+      { error: "Internal server error" },
+      { status: 500 }
+    )
+  }
+}

src/app/api/cache/admin/analytics/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_ANALYTICS
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/v1/auth/analytics/dashboard`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch analytics" },
+                { status: response.status }
+            )
+        }
+
+        const analytics = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, analytics, CACHE_TTL.ADMIN_ANALYTICS)
+
+        return NextResponse.json(analytics, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Analytics cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/config/route.ts

@@ -0,0 +1,63 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, deleteCacheKey, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_CONFIG
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/admin/config`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch config" },
+                { status: response.status }
+            )
+        }
+
+        const config = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, config, CACHE_TTL.ADMIN_CONFIG)
+
+        return NextResponse.json(config, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Config cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}
+
+// DELETE: Invalidate config cache
+export async function DELETE() {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_CONFIG
+        await deleteCacheKey(cacheKey)
+        return NextResponse.json({ success: true })
+    } catch (error: any) {
+        console.error("Delete config cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/database-storage/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_DATABASE_STORAGE
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/admin/database-storage`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch database storage" },
+                { status: response.status }
+            )
+        }
+
+        const storage = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, storage, CACHE_TTL.ADMIN_DATABASE_STORAGE)
+
+        return NextResponse.json(storage, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Database storage cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/databases/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_DATABASES
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/admin/databases`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch databases" },
+                { status: response.status }
+            )
+        }
+
+        const databases = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, databases, CACHE_TTL.ADMIN_DATABASES)
+
+        return NextResponse.json(databases, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Databases cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/documents/route.ts

@@ -0,0 +1,51 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL, hashQueryString } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        // Get query string and hash it for cache key
+        const queryString = request.nextUrl.search || ""
+        const queryHash = hashQueryString(queryString)
+        const cacheKey = CACHE_KEYS.ADMIN_DOCUMENTS(queryHash)
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/admin/documents${queryString}`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch documents" },
+                { status: response.status }
+            )
+        }
+
+        const documents = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, documents, CACHE_TTL.ADMIN_DOCUMENTS)
+
+        return NextResponse.json(documents, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Documents cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/stats/route.ts

@@ -0,0 +1,48 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const cacheKey = CACHE_KEYS.ADMIN_STATS
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/stats`, { headers })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch stats" },
+                { status: response.status }
+            )
+        }
+
+        const stats = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, stats, CACHE_TTL.ADMIN_STATS)
+
+        return NextResponse.json(stats, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Stats cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/admin/users/route.ts

@@ -0,0 +1,56 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        // Get page from query params
+        const searchParams = request.nextUrl.searchParams
+        const page = parseInt(searchParams.get("page") || "1")
+        const pageSize = searchParams.get("page_size") || "20"
+
+        const cacheKey = CACHE_KEYS.ADMIN_USERS(page)
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {}
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(
+            `${apiBaseUrl}/api/v1/auth/admin/users?page=${page}&page_size=${pageSize}`,
+            { headers }
+        )
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch users" },
+                { status: response.status }
+            )
+        }
+
+        const users = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, users, CACHE_TTL.ADMIN_USERS)
+
+        return NextResponse.json(users, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Users cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/sessions/[sessionId]/messages/route.ts

@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, deleteCacheKey, CACHE_KEYS, CACHE_TTL } from "@/lib/redis"
+
+export async function GET(
+    request: NextRequest,
+    { params }: { params: Promise<{ sessionId: string }> }
+) {
+    try {
+        const { sessionId } = await params
+        const cacheKey = CACHE_KEYS.SESSION_MESSAGES(sessionId)
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const userToken = request.headers.get("X-Session-Token") || null
+        const headers: Record<string, string> = {
+            "Content-Type": "application/json",
+        }
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(
+            `${apiBaseUrl}/api/v1/chat/sessions/${sessionId}/messages`,
+            { headers }
+        )
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch messages" },
+                { status: response.status }
+            )
+        }
+
+        const messages = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, messages, CACHE_TTL.SESSION_MESSAGES)
+
+        return NextResponse.json(messages, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: unknown) {
+        console.error("Messages cache error:", error)
+        const errorMessage = typeof error === "object" && error !== null && "message" in error ? (error as { message?: string }).message : "Internal server error";
+        return NextResponse.json(
+            { error: errorMessage || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}
+
+// DELETE: Invalidate messages cache for a specific session
+export async function DELETE(
+    request: NextRequest,
+    { params }: { params: Promise<{ sessionId: string }> }
+) {
+    try {
+        const { sessionId } = await params
+        const cacheKey = CACHE_KEYS.SESSION_MESSAGES(sessionId)
+        await deleteCacheKey(cacheKey)
+
+        return NextResponse.json({ success: true })
+    } catch (error: unknown) {
+        console.error("Delete messages cache error:", error)
+        const errorMessage = typeof error === "object" && error !== null && "message" in error ? (error as { message?: string }).message : "Internal server error";
+        return NextResponse.json(
+            { error: errorMessage || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/cache/sessions/route.ts

@@ -0,0 +1,73 @@
+import { NextRequest, NextResponse } from "next/server"
+import { getCached, setCached, CACHE_KEYS, CACHE_TTL, getUserTokenHash } from "@/lib/redis"
+
+export async function GET(request: NextRequest) {
+    try {
+        const userToken = request.headers.get("X-Session-Token") || null
+        const tokenHash = getUserTokenHash(userToken)
+        const cacheKey = CACHE_KEYS.SESSIONS(tokenHash)
+
+        // Try to get from cache first
+        const cached = await getCached(cacheKey)
+        if (cached) {
+            return NextResponse.json(cached, {
+                headers: { "X-Cache": "HIT" },
+            })
+        }
+
+        // Fetch from backend
+        const apiBaseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+        const headers: Record<string, string> = {
+            "Content-Type": "application/json",
+        }
+        if (userToken) {
+            headers["X-Session-Token"] = userToken
+        }
+
+        const response = await fetch(`${apiBaseUrl}/api/v1/chat/sessions`, {
+            headers,
+        })
+
+        if (!response.ok) {
+            return NextResponse.json(
+                { error: "Failed to fetch sessions" },
+                { status: response.status }
+            )
+        }
+
+        const sessions = await response.json()
+
+        // Cache the result
+        await setCached(cacheKey, sessions, CACHE_TTL.SESSIONS)
+
+        return NextResponse.json(sessions, {
+            headers: { "X-Cache": "MISS" },
+        })
+    } catch (error: any) {
+        console.error("Sessions cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}
+
+// DELETE: Invalidate sessions cache
+export async function DELETE(request: NextRequest) {
+    try {
+        const userToken = request.headers.get("X-Session-Token") || null
+        const tokenHash = getUserTokenHash(userToken)
+        const cacheKey = CACHE_KEYS.SESSIONS(tokenHash)
+
+        const { deleteCacheKey } = await import("@/lib/redis")
+        await deleteCacheKey(cacheKey)
+
+        return NextResponse.json({ success: true })
+    } catch (error: any) {
+        console.error("Delete sessions cache error:", error)
+        return NextResponse.json(
+            { error: error.message || "Internal server error" },
+            { status: 500 }
+        )
+    }
+}

src/app/api/livekit-token/route.ts

@@ -0,0 +1,133 @@
+import { NextRequest, NextResponse } from "next/server"
+import { AccessToken } from "livekit-server-sdk"
+
+export async function POST(request: NextRequest) {
+  try {
+    const { roomName, participantName } = await request.json()
+
+    if (!roomName) {
+      return NextResponse.json(
+        { error: "roomName is required" },
+        { status: 400 }
+      )
+    }
+
+    // Use server-side environment variables only (not NEXT_PUBLIC_* which are exposed to client)
+    // These must match the credentials used by your LiveKit server
+    const apiKey = process.env.LIVEKIT_API_KEY
+    const apiSecret = process.env.LIVEKIT_API_SECRET
+
+    if (!apiKey) {
+      return NextResponse.json(
+        { 
+          error: "LIVEKIT_API_KEY not configured",
+          hint: "Set LIVEKIT_API_KEY environment variable (server-side, not NEXT_PUBLIC_*). This must match the API key configured in your LiveKit server. Get it from LiveKit Cloud dashboard (Settings > Keys) or your self-hosted LiveKit config."
+        },
+        { status: 500 }
+      )
+    }
+
+    if (!apiSecret) {
+      return NextResponse.json(
+        { 
+          error: "LIVEKIT_API_SECRET not configured",
+          hint: "Set LIVEKIT_API_SECRET environment variable (server-side). This must match the API secret configured in your LiveKit server.",
+          instructions: [
+            "For LiveKit Cloud:",
+            "  1. Go to Settings > Keys in your LiveKit Cloud dashboard",
+            "  2. Click on your API key row or the menu (three dots) to reveal the secret",
+            "  3. If the secret is not visible, you may need to create a NEW API key",
+            "  4. When creating a new key, copy BOTH the API key AND the secret immediately",
+            "  5. Note: Secrets are only shown once when created - save it securely!",
+            "",
+            "For self-hosted LiveKit:",
+            "  - Check your LiveKit server configuration file (usually livekit.yaml)",
+            "  - Or use the default 'secret' for development mode"
+          ]
+        },
+        { status: 500 }
+      )
+    }
+
+    // Validate API secret format - it should NOT be a JWT token
+    const trimmedSecret = apiSecret.trim()
+    if (trimmedSecret.startsWith('eyJ')) {
+      console.error(`[LiveKit Token] ❌ ERROR: API secret appears to be a JWT token, not a secret key!`)
+      console.error(`[LiveKit Token] The secret starts with 'eyJ' which indicates it's a JWT token.`)
+      console.error(`[LiveKit Token] LiveKit API secret should be a random string, not a token.`)
+      return NextResponse.json(
+        { 
+          error: "Invalid API secret format",
+          hint: "Your LIVEKIT_API_SECRET appears to be a JWT token (starts with 'eyJ'), but it should be the actual secret key. In LiveKit Cloud: Go to Settings > Keys and copy the 'API Secret' (not a token). It should be a long random string, not a JWT token.",
+          details: "The API secret is used to SIGN tokens, not a token itself. Make sure you're using the secret key from your LiveKit dashboard, not a generated token."
+        },
+        { status: 500 }
+      )
+    }
+
+    // Log API key prefix for debugging (without exposing full key or secret)
+    console.log(`[LiveKit Token] Using API key: ${apiKey.substring(0, 8)}...`)
+    console.log(`[LiveKit Token] API secret length: ${trimmedSecret.length} characters`)
+    console.log(`[LiveKit Token] API secret starts with: ${trimmedSecret.substring(0, 4)}...`)
+    
+    // Warn if secret looks suspicious
+    if (trimmedSecret.length < 20) {
+      console.warn(`[LiveKit Token] ⚠️  WARNING: API secret is very short (${trimmedSecret.length} chars). LiveKit secrets are usually much longer.`)
+    }
+
+    const at = new AccessToken(apiKey, trimmedSecret, {
+      identity: participantName || "user",
+    })
+
+    at.addGrant({
+      room: roomName,
+      roomJoin: true,
+      canPublish: true,
+      canSubscribe: true,
+    })
+
+    const token = await at.toJwt()
+    
+    // Decode token to verify it was created correctly (for debugging)
+    const tokenParts = token.split('.')
+    if (tokenParts.length === 3) {
+      try {
+        const payload = JSON.parse(Buffer.from(tokenParts[1], 'base64').toString())
+        console.log(`[LiveKit Token] Generated token details:`)
+        console.log(`  - Room: ${payload.video?.room}`)
+        console.log(`  - Identity: ${payload.sub}`)
+        console.log(`  - Issuer (API Key): ${payload.iss}`)
+        console.log(`  - Expires: ${new Date(payload.exp * 1000).toISOString()}`)
+        console.log(`[LiveKit Token] ⚠️  If token validation fails, verify:`)
+        console.log(`  1. API Key in token (${payload.iss}) matches your LiveKit server's API key`)
+        console.log(`  2. API Secret used to sign token matches your LiveKit server's API secret`)
+        console.log(`  3. Both are set in your Next.js environment variables (not NEXT_PUBLIC_*)`)
+      } catch (e) {
+        // Ignore decode errors
+        console.error(`[LiveKit Token] Failed to decode token payload:`, e)
+      }
+    }
+
+    return NextResponse.json({ token })
+  } catch (error) {
+    console.error("[LiveKit Token] Error generating token:", error)
+    const errorMessage = error instanceof Error ? error.message : "Failed to generate token"
+    
+    // Provide detailed troubleshooting information
+    const troubleshooting = {
+      error: errorMessage,
+      hint: "Token signature verification failed. This means the API secret doesn't match your LiveKit server.",
+      steps: [
+        "1. Verify LIVEKIT_API_KEY matches your LiveKit server's API key",
+        "2. Verify LIVEKIT_API_SECRET matches your LiveKit server's API secret (exactly, including any spaces)",
+        "3. For LiveKit Cloud: Get credentials from Settings > Keys in your dashboard",
+        "4. For self-hosted: Check your LiveKit server configuration file",
+        "5. Ensure environment variables are set in .env.local (not .env) for Next.js",
+        "6. Restart your Next.js dev server after changing environment variables"
+      ]
+    }
+    
+    return NextResponse.json(troubleshooting, { status: 500 })
+  }
+}
+

src/app/auth/forgot-password/page.tsx

@@ -0,0 +1,342 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { apiClient } from "@/lib/api-client"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { OTPInput } from "@/components/ui/otp-input"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+
+export default function ForgotPasswordPage() {
+  const [step, setStep] = useState<"email" | "otp" | "reset">("email")
+  const [loading, setLoading] = useState(false)
+  const [email, setEmail] = useState("")
+  const [phoneNumber, setPhoneNumber] = useState("")
+  const [maskedPhoneNumber, setMaskedPhoneNumber] = useState<string | null>(null)
+  const [otp, setOtp] = useState("")
+  const [resetToken, setResetToken] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const router = useRouter()
+
+  const handleEmailSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      // Request password reset (this will return masked phone number)
+      const response = await apiClient.post<{ message: string; phone_number?: string }>(
+        "/api/v1/auth/password/reset-request",
+        {
+          email: email,
+        }
+      )
+
+      if (response.phone_number) {
+        // Store masked phone number for display
+        setMaskedPhoneNumber(response.phone_number)
+        // Show masked phone number to user - they still need to enter full number for OTP verification
+        toast.success(`${response.message} (ending in ${response.phone_number.slice(-4)})`)
+        setStep("otp")
+      } else {
+        // No phone number found, ask user to enter it
+        setMaskedPhoneNumber(null)
+        toast.success("Please enter your phone number to receive OTP")
+        setStep("otp")
+      }
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to request password reset"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleOTPVerify = async () => {
+    if (otp.length !== 6) {
+      toast.error("Please enter a valid 6-digit OTP")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      // Verify OTP and get password reset token
+      const response = await apiClient.post<{ status: string; message: string; reset_token?: string }>(
+        "/api/v1/auth/phone/verify-otp",
+        {
+          phone_number: phoneNumber,
+          otp: otp,
+          purpose: "password_reset",
+        }
+      )
+
+      if (response.reset_token) {
+        setResetToken(response.reset_token)
+        setStep("reset")
+        toast.success("OTP verified. Please set your new password.")
+      } else {
+        // Fallback: request reset token again if not returned
+        await apiClient.post("/api/v1/auth/password/reset-request", {
+          email: email,
+        })
+        // Note: In production, the token should always come from OTP verification
+        setResetToken("verified")
+        setStep("reset")
+        toast.success("OTP verified. Please set your new password.")
+      }
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "OTP verification failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handlePasswordReset = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      // Reset password with token and OTP verification
+      await apiClient.post("/api/v1/auth/password/reset", {
+        token: resetToken,
+        new_password: newPassword,
+      })
+
+      toast.success("Password reset successfully! Please sign in.")
+      router.push("/auth/signin")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Password reset failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleResendOTP = async () => {
+    setLoading(true)
+    try {
+      await apiClient.post("/api/v1/auth/phone/resend-otp", {
+        phone_number: phoneNumber,
+        purpose: "password_reset",
+      })
+      toast.success("OTP resent successfully")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to resend OTP"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (step === "otp") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Verify OTP</CardTitle>
+            <CardDescription>
+              {maskedPhoneNumber 
+                ? `Enter the 6-digit code sent to ${maskedPhoneNumber}`
+                : phoneNumber 
+                  ? `Enter the 6-digit code sent to ${phoneNumber}`
+                  : "Enter the 6-digit code sent to your phone number"}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            {!maskedPhoneNumber && (
+              <div>
+                <label htmlFor="phone" className="text-sm font-medium">
+                  Phone Number
+                </label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  placeholder="+254712345678 or 0712345678"
+                  value={phoneNumber}
+                  onChange={(e) => setPhoneNumber(e.target.value)}
+                  required
+                  className="mt-1"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Format: +254712345678, +2541XXXXXXX, 0712345678, or 01XXXXXXX
+                </p>
+              </div>
+            )}
+            {maskedPhoneNumber && !phoneNumber && (
+              <div>
+                <label htmlFor="phone" className="text-sm font-medium">
+                  Confirm Phone Number
+                </label>
+                <Input
+                  id="phone"
+                  type="tel"
+                  placeholder={`Enter full number ending in ${maskedPhoneNumber.slice(-4)}`}
+                  value={phoneNumber}
+                  onChange={(e) => setPhoneNumber(e.target.value)}
+                  required
+                  className="mt-1"
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Enter your full phone number to verify
+                </p>
+              </div>
+            )}
+            <OTPInput
+              value={otp}
+              onChange={setOtp}
+              onComplete={handleOTPVerify}
+              disabled={loading}
+            />
+            <Button
+              onClick={handleOTPVerify}
+              disabled={loading || otp.length !== 6 || !phoneNumber}
+              className="w-full"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                "Verify OTP"
+              )}
+            </Button>
+            <div className="text-center">
+              <button
+                onClick={handleResendOTP}
+                disabled={loading}
+                className="text-sm text-primary hover:underline"
+              >
+                Resend OTP
+              </button>
+            </div>
+            <div className="text-center text-sm">
+              <button
+                onClick={() => setStep("email")}
+                className="text-muted-foreground hover:underline"
+              >
+                Back
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  if (step === "reset") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Reset Password</CardTitle>
+            <CardDescription>Enter your new password</CardDescription>
+          </CardHeader>
+          <CardContent>
+            <form onSubmit={handlePasswordReset} className="space-y-4">
+              <div>
+                <label htmlFor="newPassword" className="text-sm font-medium">
+                  New Password
+                </label>
+                <Input
+                  id="newPassword"
+                  type="password"
+                  placeholder="••••••••"
+                  value={newPassword}
+                  onChange={(e) => setNewPassword(e.target.value)}
+                  required
+                  minLength={8}
+                />
+                <p className="text-xs text-muted-foreground mt-1">
+                  Must be at least 8 characters with uppercase, lowercase, and digit
+                </p>
+              </div>
+              <Button type="submit" disabled={loading} className="w-full">
+                {loading ? (
+                  <>
+                    <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                    Resetting...
+                  </>
+                ) : (
+                  "Reset Password"
+                )}
+              </Button>
+            </form>
+            <div className="mt-4 text-center text-sm">
+              <Link href="/auth/signin" className="text-primary hover:underline">
+                Back to sign in
+              </Link>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Forgot Password</CardTitle>
+          <CardDescription>
+            Enter your email and phone number to reset your password
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleEmailSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="phone" className="text-sm font-medium">
+                Phone Number
+              </label>
+              <Input
+                id="phone"
+                type="tel"
+                placeholder="+254712345678 or 0712345678"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+                required
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Format: +254712345678, +2541XXXXXXX, 0712345678, or 01XXXXXXX
+              </p>
+            </div>
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Sending OTP...
+                </>
+              ) : (
+                "Send OTP"
+              )}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            <Link href="/auth/signin" className="text-primary hover:underline">
+              Back to sign in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

src/app/auth/reset-password/page.tsx

@@ -0,0 +1,221 @@
+"use client"
+
+import { useState, useEffect, Suspense } from "react"
+import { useRouter, useSearchParams } from "next/navigation"
+import Link from "next/link"
+import { apiClient } from "@/lib/api-client"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { OTPInput } from "@/components/ui/otp-input"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+
+function ResetPasswordForm() {
+  const [step, setStep] = useState<"otp" | "reset">("otp")
+  const [loading, setLoading] = useState(false)
+  const [token, setToken] = useState("")
+  const [phoneNumber, setPhoneNumber] = useState("")
+  const [otp, setOtp] = useState("")
+  const [newPassword, setNewPassword] = useState("")
+  const router = useRouter()
+  const searchParams = useSearchParams()
+
+  useEffect(() => {
+    const tokenParam = searchParams.get("token")
+    if (tokenParam) {
+      setToken(tokenParam)
+    } else {
+      toast.error("Invalid reset link")
+      router.push("/auth/forgot-password")
+    }
+  }, [searchParams, router])
+
+  const handleOTPVerify = async () => {
+    if (otp.length !== 6) {
+      toast.error("Please enter a valid 6-digit OTP")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      // Verify OTP
+      await apiClient.post("/api/v1/auth/phone/verify-otp", {
+        phone_number: phoneNumber,
+        otp: otp,
+        purpose: "password_reset",
+      })
+
+      setStep("reset")
+      toast.success("OTP verified. Please set your new password.")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "OTP verification failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handlePasswordReset = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      // Reset password with token
+      await apiClient.post("/api/v1/auth/password/reset", {
+        token: token,
+        new_password: newPassword,
+      })
+
+      toast.success("Password reset successfully! Please sign in.")
+      router.push("/auth/signin")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Password reset failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleResendOTP = async () => {
+    setLoading(true)
+    try {
+      await apiClient.post("/api/v1/auth/phone/resend-otp", {
+        phone_number: phoneNumber,
+        purpose: "password_reset",
+      })
+      toast.success("OTP resent successfully")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to resend OTP"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (step === "otp") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Verify OTP</CardTitle>
+            <CardDescription>
+              Enter your phone number and the OTP code sent to you
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <div>
+              <label htmlFor="phone" className="text-sm font-medium">
+                Phone Number
+              </label>
+              <Input
+                id="phone"
+                type="tel"
+                placeholder="+254712345678 or 0712345678"
+                value={phoneNumber}
+                onChange={(e) => setPhoneNumber(e.target.value)}
+                required
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Format: +254712345678, +2541XXXXXXX, 0712345678, or 01XXXXXXX
+              </p>
+            </div>
+            <OTPInput
+              value={otp}
+              onChange={setOtp}
+              onComplete={handleOTPVerify}
+              disabled={loading}
+            />
+            <Button
+              onClick={handleOTPVerify}
+              disabled={loading || otp.length !== 6 || !phoneNumber}
+              className="w-full"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                "Verify OTP"
+              )}
+            </Button>
+            <div className="text-center">
+              <button
+                onClick={handleResendOTP}
+                disabled={loading || !phoneNumber}
+                className="text-sm text-primary hover:underline"
+              >
+                Resend OTP
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Reset Password</CardTitle>
+          <CardDescription>Enter your new password</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handlePasswordReset} className="space-y-4">
+            <div>
+              <label htmlFor="newPassword" className="text-sm font-medium">
+                New Password
+              </label>
+              <Input
+                id="newPassword"
+                type="password"
+                placeholder="••••••••"
+                value={newPassword}
+                onChange={(e) => setNewPassword(e.target.value)}
+                required
+                minLength={8}
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Must be at least 8 characters with uppercase, lowercase, and digit
+              </p>
+            </div>
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Resetting...
+                </>
+              ) : (
+                "Reset Password"
+              )}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            <Link href="/auth/signin" className="text-primary hover:underline">
+              Back to sign in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+
+export default function ResetPasswordPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+        <Card className="w-full max-w-md">
+          <CardContent className="flex items-center justify-center p-6">
+            <Loader2 className="h-8 w-8 animate-spin" />
+          </CardContent>
+        </Card>
+      </div>
+    }>
+      <ResetPasswordForm />
+    </Suspense>
+  )
+}

src/app/auth/signin/page.tsx

@@ -0,0 +1,104 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { useAuth } from "@/lib/auth-context"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+
+export default function SignInPage() {
+  const [email, setEmail] = useState("")
+  const [password, setPassword] = useState("")
+  const [loading, setLoading] = useState(false)
+  const router = useRouter()
+  const { login } = useAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      await login(email, password)
+      toast.success("Signed in successfully")
+      // Navigation handled by auth context
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Sign in failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Sign In</CardTitle>
+          <CardDescription>
+            Enter your credentials to access your account
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                required
+                autoFocus
+              />
+            </div>
+            <div>
+              <label htmlFor="password" className="text-sm font-medium">
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                required
+              />
+            </div>
+            <div className="text-right">
+              <Link
+                href="/auth/forgot-password"
+                className="text-sm text-primary hover:underline"
+              >
+                Forgot password?
+              </Link>
+            </div>
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Signing in...
+                </>
+              ) : (
+                "Sign In"
+              )}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            <span className="text-muted-foreground">Don&apos;t have an account? </span>
+            <Link href="/auth/signup" className="text-primary hover:underline">
+              Sign up
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

src/app/auth/signup/page.tsx

@@ -0,0 +1,255 @@
+"use client"
+
+import { useState } from "react"
+import { useRouter } from "next/navigation"
+import Link from "next/link"
+import { useAuth } from "@/lib/auth-context"
+import { apiClient } from "@/lib/api-client"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
+import { OTPInput } from "@/components/ui/otp-input"
+import { toast } from "sonner"
+import { Loader2 } from "lucide-react"
+
+export default function SignUpPage() {
+  const [step, setStep] = useState<"form" | "otp">("form")
+  const [loading, setLoading] = useState(false)
+  const [formData, setFormData] = useState({
+    email: "",
+    password: "",
+    name: "",
+    phone_number: "",
+  })
+  const [otp, setOtp] = useState("")
+  const [phoneNumber, setPhoneNumber] = useState("")
+  const router = useRouter()
+  const { register } = useAuth()
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault()
+    setLoading(true)
+
+    try {
+      // Register user
+      await register(
+        formData.email,
+        formData.password,
+        formData.name,
+        formData.phone_number
+      )
+
+      // Send OTP
+      await apiClient.post("/api/v1/auth/phone/send-otp", {
+        phone_number: formData.phone_number,
+        purpose: "verification",
+      })
+
+      setPhoneNumber(formData.phone_number)
+      setStep("otp")
+      toast.success("OTP sent to your phone number")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Registration failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleOTPVerify = async () => {
+    if (otp.length !== 6) {
+      toast.error("Please enter a valid 6-digit OTP")
+      return
+    }
+
+    setLoading(true)
+
+    try {
+      // Verify OTP
+      await apiClient.post("/api/v1/auth/phone/verify-otp", {
+        phone_number: phoneNumber,
+        otp: otp,
+        purpose: "verification",
+      })
+
+      toast.success("Phone verified successfully! Please sign in.")
+      router.push("/auth/signin")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "OTP verification failed"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const handleResendOTP = async () => {
+    setLoading(true)
+    try {
+      await apiClient.post("/api/v1/auth/phone/resend-otp", {
+        phone_number: phoneNumber,
+        purpose: "verification",
+      })
+      toast.success("OTP resent successfully")
+    } catch (error: unknown) {
+      const errorMessage = error instanceof Error ? error.message : "Failed to resend OTP"
+      toast.error(errorMessage)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  if (step === "otp") {
+    return (
+      <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+        <Card className="w-full max-w-md">
+          <CardHeader>
+            <CardTitle>Verify Phone Number</CardTitle>
+            <CardDescription>
+              Enter the 6-digit code sent to {phoneNumber}
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="space-y-4">
+            <OTPInput
+              value={otp}
+              onChange={setOtp}
+              onComplete={handleOTPVerify}
+              disabled={loading}
+            />
+            <Button
+              onClick={handleOTPVerify}
+              disabled={loading || otp.length !== 6}
+              className="w-full"
+            >
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Verifying...
+                </>
+              ) : (
+                "Verify OTP"
+              )}
+            </Button>
+            <div className="text-center">
+              <button
+                onClick={handleResendOTP}
+                disabled={loading}
+                className="text-sm text-primary hover:underline"
+              >
+                Resend OTP
+              </button>
+            </div>
+            <div className="text-center text-sm">
+              <button
+                onClick={() => setStep("form")}
+                className="text-muted-foreground hover:underline"
+              >
+                Back to registration
+              </button>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gradient-to-br from-background via-primary/5 to-accent/10 p-4">
+      <Card className="w-full max-w-md">
+        <CardHeader>
+          <CardTitle>Create Account</CardTitle>
+          <CardDescription>
+            Sign up to get started with AmaniQuery
+          </CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit} className="space-y-4">
+            <div>
+              <label htmlFor="name" className="text-sm font-medium">
+                Full Name
+              </label>
+              <Input
+                id="name"
+                type="text"
+                placeholder="John Doe"
+                value={formData.name}
+                onChange={(e) =>
+                  setFormData({ ...formData, name: e.target.value })
+                }
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="email" className="text-sm font-medium">
+                Email
+              </label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="you@example.com"
+                value={formData.email}
+                onChange={(e) =>
+                  setFormData({ ...formData, email: e.target.value })
+                }
+                required
+              />
+            </div>
+            <div>
+              <label htmlFor="phone" className="text-sm font-medium">
+                Phone Number
+              </label>
+              <Input
+                id="phone"
+                type="tel"
+                placeholder="+254712345678 or 0712345678"
+                value={formData.phone_number}
+                onChange={(e) =>
+                  setFormData({ ...formData, phone_number: e.target.value })
+                }
+                required
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Format: +254712345678, +2541XXXXXXX, 0712345678, or 01XXXXXXX
+              </p>
+            </div>
+            <div>
+              <label htmlFor="password" className="text-sm font-medium">
+                Password
+              </label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="••••••••"
+                value={formData.password}
+                onChange={(e) =>
+                  setFormData({ ...formData, password: e.target.value })
+                }
+                required
+                minLength={8}
+              />
+              <p className="text-xs text-muted-foreground mt-1">
+                Must be at least 8 characters with uppercase, lowercase, and digit
+              </p>
+            </div>
+            <Button type="submit" disabled={loading} className="w-full">
+              {loading ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+                  Creating Account...
+                </>
+              ) : (
+                "Create Account"
+              )}
+            </Button>
+          </form>
+          <div className="mt-4 text-center text-sm">
+            <span className="text-muted-foreground">Already have an account? </span>
+            <Link href="/auth/signin" className="text-primary hover:underline">
+              Sign in
+            </Link>
+          </div>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}
+

src/app/blog/[slug]/page.tsx

@@ -0,0 +1,243 @@
+"use client"
+
+import { useState, useEffect } from "react"
+import { useParams, useRouter } from "next/navigation"
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import { Calendar, User, ArrowLeft, Share2 } from "lucide-react"
+import Image from "next/image"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+interface BlogPost {
+  id: string
+  title: string
+  slug: string
+  markdown_content?: string
+  html_content?: string
+  excerpt?: string
+  post_type: string
+  featured_image_url?: string
+  author: {
+    id: string
+    name?: string
+    email: string
+    profile_image_url?: string
+  }
+  categories: Array<{ id: string; name: string; slug: string }>
+  tags: Array<{ id: string; name: string; slug: string }>
+  published_at?: string
+  created_at: string
+  updated_at: string
+}
+
+export default function BlogPostPage() {
+  const params = useParams()
+  const router = useRouter()
+  const slug = params.slug as string
+  const [post, setPost] = useState<BlogPost | null>(null)
+  const [loading, setLoading] = useState(true)
+
+  useEffect(() => {
+    const fetchPost = async () => {
+      setLoading(true)
+      try {
+        const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts/${slug}`)
+        if (response.ok) {
+          const data: BlogPost = await response.json()
+          setPost(data)
+        } else if (response.status === 404) {
+          router.push("/blog")
+        }
+      } catch (error) {
+        console.error("Failed to fetch post:", error)
+      } finally {
+        setLoading(false)
+      }
+    }
+
+    if (slug) {
+      fetchPost()
+    }
+  }, [slug, router])
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString)
+    return date.toLocaleDateString("en-US", {
+      year: "numeric",
+      month: "long",
+      day: "numeric",
+    })
+  }
+
+  const getPostTypeColor = (type: string) => {
+    switch (type) {
+      case "news":
+        return "bg-blue-500/10 text-blue-500"
+      case "announcement":
+        return "bg-yellow-500/10 text-yellow-500"
+      case "update":
+        return "bg-green-500/10 text-green-500"
+      default:
+        return "bg-gray-500/10 text-gray-500"
+    }
+  }
+
+  const handleShare = async () => {
+    if (navigator.share && post) {
+      try {
+        await navigator.share({
+          title: post.title,
+          text: post.excerpt || "",
+          url: window.location.href,
+        })
+      } catch (error) {
+        // User cancelled or error occurred
+        console.log("Share cancelled or failed")
+      }
+    } else {
+      // Fallback: copy to clipboard
+      navigator.clipboard.writeText(window.location.href)
+      alert("Link copied to clipboard!")
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  if (!post) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <Card>
+          <CardContent className="p-12 text-center">
+            <p className="text-muted-foreground mb-4">Post not found</p>
+            <Link href="/blog">
+              <Button>Back to Blog</Button>
+            </Link>
+          </CardContent>
+        </Card>
+      </div>
+    )
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Back Button */}
+        <Link href="/blog">
+          <Button variant="ghost" className="mb-6">
+            <ArrowLeft className="w-4 h-4 mr-2" />
+            Back to Blog
+          </Button>
+        </Link>
+
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center gap-2 mb-4">
+            <Badge className={getPostTypeColor(post.post_type)}>
+              {post.post_type}
+            </Badge>
+            {post.published_at && (
+              <div className="flex items-center text-sm text-muted-foreground">
+                <Calendar className="w-4 h-4 mr-1" />
+                {formatDate(post.published_at)}
+              </div>
+            )}
+          </div>
+          <h1 className="text-4xl font-bold mb-4">{post.title}</h1>
+          {post.excerpt && (
+            <p className="text-xl text-muted-foreground mb-6">{post.excerpt}</p>
+          )}
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-4">
+              <div className="flex items-center text-sm text-muted-foreground">
+                <User className="w-4 h-4 mr-1" />
+                <span>{post.author.name || post.author.email}</span>
+              </div>
+            </div>
+            <Button variant="outline" size="sm" onClick={handleShare}>
+              <Share2 className="w-4 h-4 mr-2" />
+              Share
+            </Button>
+          </div>
+        </div>
+
+        {/* Featured Image */}
+        {post.featured_image_url && (
+          <div className="relative w-full h-96 mb-8 rounded-lg overflow-hidden">
+            <Image
+              src={post.featured_image_url}
+              alt={post.title}
+              fill
+              className="object-cover"
+            />
+          </div>
+        )}
+
+        {/* Content */}
+        <article className="prose prose-lg dark:prose-invert max-w-none mb-8">
+          {post.html_content ? (
+            <div dangerouslySetInnerHTML={{ __html: post.html_content }} />
+          ) : post.markdown_content ? (
+            <div className="whitespace-pre-wrap">{post.markdown_content}</div>
+          ) : (
+            <p className="text-muted-foreground">No content available.</p>
+          )}
+        </article>
+
+        {/* Categories and Tags */}
+        {(post.categories.length > 0 || post.tags.length > 0) && (
+          <Card className="mb-8">
+            <CardContent className="p-6">
+              {post.categories.length > 0 && (
+                <div className="mb-4">
+                  <h3 className="text-sm font-semibold mb-2">Categories</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {post.categories.map((category) => (
+                      <Badge key={category.id} variant="outline">
+                        {category.name}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+              {post.tags.length > 0 && (
+                <div>
+                  <h3 className="text-sm font-semibold mb-2">Tags</h3>
+                  <div className="flex flex-wrap gap-2">
+                    {post.tags.map((tag) => (
+                      <Badge key={tag.id} variant="secondary">
+                        {tag.name}
+                      </Badge>
+                    ))}
+                  </div>
+                </div>
+              )}
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Navigation */}
+        <div className="flex justify-between items-center pt-8 border-t">
+          <Link href="/blog">
+            <Button variant="outline">
+              <ArrowLeft className="w-4 h-4 mr-2" />
+              All Posts
+            </Button>
+          </Link>
+          <Link href="/">
+            <Button variant="ghost">Back to Home</Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+

src/app/blog/page.tsx

@@ -0,0 +1,395 @@
+"use client"
+
+import { useState, useEffect, Suspense } from "react"
+import { useSearchParams, useRouter } from "next/navigation"
+import { BlogPostCard } from "@/components/blog-post-card"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent } from "@/components/ui/card"
+import {
+  Search,
+  Filter,
+  ChevronLeft,
+  ChevronRight,
+  Newspaper,
+  Megaphone,
+  RefreshCw,
+} from "lucide-react"
+import Link from "next/link"
+
+const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8000"
+
+interface BlogPost {
+  id: string
+  title: string
+  slug: string
+  excerpt?: string
+  post_type: string
+  featured_image_url?: string
+  author: {
+    id: string
+    name?: string
+    email: string
+    profile_image_url?: string
+  }
+  categories: Array<{ id: string; name: string; slug: string }>
+  tags: Array<{ id: string; name: string; slug: string }>
+  published_at?: string
+  created_at: string
+}
+
+interface BlogResponse {
+  posts: BlogPost[]
+  total: number
+  page: number
+  page_size: number
+  total_pages: number
+}
+
+interface Category {
+  id: string
+  name: string
+  slug: string
+}
+
+interface Tag {
+  id: string
+  name: string
+  slug: string
+}
+
+function BlogList() {
+  const searchParams = useSearchParams()
+  const router = useRouter()
+  const [posts, setPosts] = useState<BlogPost[]>([])
+  const [categories, setCategories] = useState<Category[]>([])
+  const [tags, setTags] = useState<Tag[]>([])
+  const [loading, setLoading] = useState(true)
+  const [searchQuery, setSearchQuery] = useState(searchParams.get("search") || "")
+  const [selectedPostType, setSelectedPostType] = useState<string | null>(
+    searchParams.get("post_type") || null
+  )
+  const [selectedCategory, setSelectedCategory] = useState<string | null>(
+    searchParams.get("category") || null
+  )
+  const [selectedTag, setSelectedTag] = useState<string | null>(
+    searchParams.get("tag") || null
+  )
+  const [currentPage, setCurrentPage] = useState(
+    parseInt(searchParams.get("page") || "1")
+  )
+  const [pagination, setPagination] = useState({
+    total: 0,
+    page: 1,
+    page_size: 10,
+    total_pages: 1,
+  })
+
+  const fetchPosts = async () => {
+    setLoading(true)
+    try {
+      const params = new URLSearchParams()
+      params.append("page", currentPage.toString())
+      params.append("page_size", "10")
+      if (selectedPostType) params.append("post_type", selectedPostType)
+      if (selectedCategory) params.append("category_slug", selectedCategory)
+      if (selectedTag) params.append("tag_slug", selectedTag)
+      if (searchQuery) params.append("search", searchQuery)
+
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/posts?${params}`)
+      if (response.ok) {
+        const data: BlogResponse = await response.json()
+        setPosts(data.posts)
+        setPagination({
+          total: data.total,
+          page: data.page,
+          page_size: data.page_size,
+          total_pages: data.total_pages,
+        })
+      }
+    } catch (error) {
+      console.error("Failed to fetch posts:", error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  const fetchCategories = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/categories`)
+      if (response.ok) {
+        const data: Category[] = await response.json()
+        setCategories(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch categories:", error)
+    }
+  }
+
+  const fetchTags = async () => {
+    try {
+      const response = await fetch(`${API_BASE_URL}/api/v1/blog/tags`)
+      if (response.ok) {
+        const data: Tag[] = await response.json()
+        setTags(data)
+      }
+    } catch (error) {
+      console.error("Failed to fetch tags:", error)
+    }
+  }
+
+  useEffect(() => {
+    fetchCategories()
+    fetchTags()
+  }, [])
+
+  useEffect(() => {
+    fetchPosts()
+  }, [currentPage, selectedPostType, selectedCategory, selectedTag, searchQuery])
+
+  useEffect(() => {
+    // Update URL with current filters
+    const params = new URLSearchParams()
+    if (selectedPostType) params.append("post_type", selectedPostType)
+    if (selectedCategory) params.append("category", selectedCategory)
+    if (selectedTag) params.append("tag", selectedTag)
+    if (searchQuery) params.append("search", searchQuery)
+    if (currentPage > 1) params.append("page", currentPage.toString())
+
+    router.push(`/blog?${params.toString()}`, { scroll: false })
+  }, [selectedPostType, selectedCategory, selectedTag, searchQuery, currentPage, router])
+
+  const handleSearch = (e: React.FormEvent) => {
+    e.preventDefault()
+    setCurrentPage(1)
+    fetchPosts()
+  }
+
+  const clearFilters = () => {
+    setSelectedPostType(null)
+    setSelectedCategory(null)
+    setSelectedTag(null)
+    setSearchQuery("")
+    setCurrentPage(1)
+  }
+
+  return (
+    <div className="min-h-screen bg-background">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
+        {/* Header */}
+        <div className="mb-8">
+          <div className="flex items-center justify-between mb-4">
+            <div>
+              <h1 className="text-3xl font-bold mb-2">Blog</h1>
+              <p className="text-muted-foreground">
+                News, announcements, and updates from AmaniQuery
+              </p>
+            </div>
+            <Link href="/">
+              <Button variant="outline">Back to Home</Button>
+            </Link>
+          </div>
+
+          {/* Search */}
+          <form onSubmit={handleSearch} className="mb-4">
+            <div className="flex gap-2">
+              <div className="relative flex-1">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+                <Input
+                  type="text"
+                  placeholder="Search posts..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-10"
+                />
+              </div>
+              <Button type="submit">Search</Button>
+            </div>
+          </form>
+        </div>
+
+        <div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
+          {/* Sidebar Filters */}
+          <div className="lg:col-span-1">
+            <Card>
+              <CardContent className="p-4">
+                <div className="flex items-center justify-between mb-4">
+                  <h2 className="font-semibold flex items-center">
+                    <Filter className="w-4 h-4 mr-2" />
+                    Filters
+                  </h2>
+                  {(selectedPostType || selectedCategory || selectedTag) && (
+                    <Button
+                      variant="ghost"
+                      size="sm"
+                      onClick={clearFilters}
+                      className="text-xs"
+                    >
+                      Clear
+                    </Button>
+                  )}
+                </div>
+
+                {/* Post Type Filter */}
+                <div className="mb-4">
+                  <h3 className="text-sm font-medium mb-2">Post Type</h3>
+                  <div className="space-y-2">
+                    {["news", "announcement", "update"].map((type) => (
+                      <button
+                        key={type}
+                        onClick={() => {
+                          setSelectedPostType(
+                            selectedPostType === type ? null : type
+                          )
+                          setCurrentPage(1)
+                        }}
+                        className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
+                          selectedPostType === type
+                            ? "bg-primary text-primary-foreground"
+                            : "hover:bg-accent"
+                        }`}
+                      >
+                        <div className="flex items-center">
+                          {type === "news" && <Newspaper className="w-4 h-4 mr-2" />}
+                          {type === "announcement" && (
+                            <Megaphone className="w-4 h-4 mr-2" />
+                          )}
+                          {type === "update" && (
+                            <RefreshCw className="w-4 h-4 mr-2" />
+                          )}
+                          {type.charAt(0).toUpperCase() + type.slice(1)}
+                        </div>
+                      </button>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Categories Filter */}
+                {categories.length > 0 && (
+                  <div className="mb-4">
+                    <h3 className="text-sm font-medium mb-2">Categories</h3>
+                    <div className="space-y-2 max-h-48 overflow-y-auto">
+                      {categories.map((category) => (
+                        <button
+                          key={category.id}
+                          onClick={() => {
+                            setSelectedCategory(
+                              selectedCategory === category.slug ? null : category.slug
+                            )
+                            setCurrentPage(1)
+                          }}
+                          className={`w-full text-left px-3 py-2 rounded-md text-sm transition-colors ${
+                            selectedCategory === category.slug
+                              ? "bg-primary text-primary-foreground"
+                              : "hover:bg-accent"
+                          }`}
+                        >
+                          {category.name}
+                        </button>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
+                {/* Tags Filter */}
+                {tags.length > 0 && (
+                  <div>
+                    <h3 className="text-sm font-medium mb-2">Tags</h3>
+                    <div className="flex flex-wrap gap-2">
+                      {tags.map((tag) => (
+                        <Badge
+                          key={tag.id}
+                          variant={
+                            selectedTag === tag.slug ? "default" : "outline"
+                          }
+                          className="cursor-pointer"
+                          onClick={() => {
+                            setSelectedTag(
+                              selectedTag === tag.slug ? null : tag.slug
+                            )
+                            setCurrentPage(1)
+                          }}
+                        >
+                          {tag.name}
+                        </Badge>
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* Main Content */}
+          <div className="lg:col-span-3">
+            {loading ? (
+              <div className="flex items-center justify-center py-12">
+                <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+              </div>
+            ) : posts.length === 0 ? (
+              <Card>
+                <CardContent className="p-12 text-center">
+                  <p className="text-muted-foreground">
+                    No posts found. Try adjusting your filters.
+                  </p>
+                </CardContent>
+              </Card>
+            ) : (
+              <>
+                <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8">
+                  {posts.map((post) => (
+                    <BlogPostCard key={post.id} post={post} />
+                  ))}
+                </div>
+
+                {/* Pagination */}
+                {pagination.total_pages > 1 && (
+                  <div className="flex items-center justify-center gap-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+                      disabled={currentPage === 1}
+                    >
+                      <ChevronLeft className="w-4 h-4" />
+                      Previous
+                    </Button>
+                    <span className="text-sm text-muted-foreground">
+                      Page {pagination.page} of {pagination.total_pages}
+                    </span>
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      onClick={() =>
+                        setCurrentPage((p) =>
+                          Math.min(pagination.total_pages, p + 1)
+                        )
+                      }
+                      disabled={currentPage === pagination.total_pages}
+                    >
+                      Next
+                      <ChevronRight className="w-4 h-4" />
+                    </Button>
+                  </div>
+                )}
+              </>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default function BlogPage() {
+  return (
+    <Suspense fallback={
+      <div className="min-h-screen bg-background flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    }>
+      <BlogList />
+    </Suspense>
+  )
+}

src/app/chat/page.tsx

@@ -0,0 +1,145 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import { useRouter } from "next/navigation"
+import { AmaniChat } from "@/components/chat/AmaniChat"
+import { AmaniSidebar } from "@/components/AmaniSidebar"
+import { ThemeToggle } from "@/components/theme-toggle"
+import { useAuth } from "@/lib/auth-context"
+import { cn } from "@/lib/utils"
+import { Menu } from "lucide-react"
+import type { ChatSession } from "@/components/chat/types"
+
+export default function ChatPage() {
+  const { isAuthenticated, loading } = useAuth()
+  const router = useRouter()
+  const [chatHistory, setChatHistory] = useState<ChatSession[]>([])
+  const [currentSessionId, setCurrentSessionId] = useState<string | null>(null)
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true)
+
+
+  // Define loadChatHistory before useEffect to avoid TDZ error
+  const loadChatHistory = async () => {
+    try {
+      const token = localStorage.getItem("session_token")
+      const headers = { "X-Session-Token": token || "" }
+      const response = await fetch("/api/cache/sessions", { headers })
+      if (response.ok) {
+        const sessions = await response.json()
+        setChatHistory(sessions)
+      }
+    } catch (error) {
+      console.error("Failed to load chat history:", error)
+    }
+  }
+
+  // Load chat history on mount
+  useEffect(() => {
+    if (isAuthenticated) {
+      (async () => {
+        await loadChatHistory();
+      })();
+    }
+  }, [isAuthenticated])
+
+  useEffect(() => {
+    if (!loading && !isAuthenticated) {
+      router.push("/auth/signin?redirect=/chat")
+    }
+  }, [isAuthenticated, loading, router])
+
+  if (loading) {
+    return (
+      <div className="min-h-screen flex items-center justify-center">
+        <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-primary"></div>
+      </div>
+    )
+  }
+
+  if (!isAuthenticated) {
+    return null
+  }
+
+  return (
+    <div className="min-h-screen max-h-screen bg-background flex overflow-hidden">
+      {/* New AmaniSidebar with integrated chat history */}
+      <AmaniSidebar
+        chatHistory={chatHistory}
+        currentSessionId={currentSessionId}
+        onSessionSelect={setCurrentSessionId}
+        onNewSession={() => setCurrentSessionId(null)}
+        onDeleteSession={async (sessionId) => {
+          // Handle session deletion
+          setChatHistory(prev => prev.filter(s => s.id !== sessionId))
+          if (currentSessionId === sessionId) {
+            setCurrentSessionId(null)
+          }
+          // Call API to delete session
+          try {
+            const token = localStorage.getItem("session_token")
+            const headers = { "X-Session-Token": token || "" }
+            await fetch(`/api/v1/chat/sessions/${sessionId}`, {
+              method: "DELETE",
+              headers
+            })
+          } catch (error) {
+            console.error("Failed to delete session:", error)
+          }
+        }}
+        onRenameSession={async (sessionId, newTitle) => {
+          // Handle session renaming
+          setChatHistory(prev => prev.map(s => 
+            s.id === sessionId ? { ...s, title: newTitle } : s
+          ))
+          // Call API to rename session
+          try {
+            const token = localStorage.getItem("session_token")
+            const headers = { 
+              "X-Session-Token": token || "",
+              "Content-Type": "application/json"
+            }
+            await fetch(`/api/v1/chat/sessions/${sessionId}`, {
+              method: "PATCH",
+              headers,
+              body: JSON.stringify({ title: newTitle })
+            })
+          } catch (error) {
+            console.error("Failed to rename session:", error)
+          }
+        }}
+        isOpen={isSidebarOpen}
+        onToggle={() => setIsSidebarOpen(!isSidebarOpen)}
+      />
+      
+      {/* Main Chat Area */}
+      <div className={cn(
+        "flex-1 min-w-0 overflow-hidden relative transition-all duration-300",
+        isSidebarOpen ? "md:ml-0" : "md:ml-0"
+      )}>
+        {/* Mobile Menu Button */}
+        <button
+          onClick={() => setIsSidebarOpen(true)}
+          className="md:hidden absolute top-4 left-4 z-10 p-2 bg-card border rounded-lg shadow-sm hover:bg-accent transition-colors"
+          aria-label="Open menu"
+        >
+          <Menu className="w-5 h-5" />
+        </button>
+
+        <div className="absolute top-2 right-2 md:top-4 md:right-4 z-10">
+          <ThemeToggle />
+        </div>
+        <AmaniChat 
+          showWelcomeScreen={true}
+          enableThinkingIndicator={true}
+          showInlineSources={true}
+          enableVoice={false}
+          currentSessionId={currentSessionId}
+          onSessionChange={setCurrentSessionId}
+          chatHistory={chatHistory}
+          onChatHistoryUpdate={setChatHistory}
+          onToggleSidebar={() => setIsSidebarOpen(true)}
+        />
+      </div>
+    </div>
+  )
+}

src/app/developers/constants.ts

@@ -0,0 +1,158 @@
+export const DEVELOPER_KIT_VERSION = "1.0"
+export const LAST_UPDATED = "2025-11-29"
+
+export const MASTER_SYSTEM_PROMPT = `You are AmaniQuery, an expert legal research assistant and systems architect for Kenyan law. Your purpose is to provide accurate, comprehensive, and legally grounded answers in both English and Swahili.
+
+### CORE INSTRUCTIONS
+1. **Output Format**: You must ALWAYS respond using a strict JSON-like structure with two distinct fields:
+   - \`reasoning_content\`: Internal chain-of-thought, planning, and analysis. This is NEVER shown to the user.
+   - \`content\`: The final, polished user-facing response.
+
+2. **Language**: Detect the user's language (English or Swahili) and respond in the SAME language. Maintain identical formatting integrity and professional tone in both languages.
+
+3. **Modes of Operation**: Automatically detect the intent and apply the correct mode:
+   - **Standard Chat**: For casual greetings, general questions, or simple clarifications.
+   - **Hybrid RAG**: For specific legal questions requiring retrieval of cases, statutes, or constitution.
+   - **Research Agent**: For complex, multi-step research tasks or report generation.
+
+### RESPONSE STRUCTURE (JSON-LIKE)
+\`\`\`json
+{
+  "reasoning_content": "Step-by-step analysis, search strategy, and synthesis of information...",
+  "content": "The final formatted response..."
+}
+\`\`\`
+
+### FORMATTING RULES (Apply to 'content' field)
+- **Markdown**: Use generous whitespace. Paragraphs must be ≤80 words.
+- **Headings**: Use max 4 levels (H1-H4).
+- **Styling**: Use **bold** for emphasis, *italics* for definitions/nuance.
+- **Lists**: Use bullet points or numbered lists for readability. Avoid excessive nesting.
+- **Tables**: Use Markdown tables for comparisons and structured data.
+- **Separators**: Use horizontal rules (\`---\`) to visually separate distinct sections.
+- **Blockquotes**: Use \`>\` for quoting legal text or external sources.
+- **Code**: Use code blocks for statutes or specific clauses if needed.
+- **Math**: Use LaTeX \`\\( \\)\` for inline and \`\\[ \\]\` for block equations.`
+
+export const HYBRID_RAG_PROMPT = `You are in Hybrid RAG Mode. Your "content" field MUST follow this precise structure:
+
+## Key Sources
+- [Summary of source 1] (Source Name)
+- [Summary of source 2] (Source Name)
+
+## Analysis & Synthesis
+[Step-by-step explanation of how sources were evaluated, compared, and combined to form the answer.]
+
+## Final Answer
+[A polished, comprehensive answer to the user's query. Every factual claim must be supported by numeric in-line citations like [1][2].]
+
+## References
+1. [Title](URL) - Author/Publication, Date
+2. [Title](URL) - Author/Publication, Date`
+
+export const LEGAL_SPECIALIST_PROMPT = `You are the Legal Content Specialist for AmaniQuery. Your role is to transform legal analysis into professionally formatted, court-ready documents.
+
+### FORMATTING STANDARDS
+1. **Citations**: Use Bluebook (21st Ed.) or standard Kenyan legal citation style (e.g., *Republic v. John Doe* [2025] eKLR).
+   - **Statutes**: *The Constitution of Kenya, 2010, Art. 43(1)(b)*.
+   - **Cases**: *Okiya Omtatah Okoiti v. Cabinet Secretary, National Treasury & 3 Others* [2023] eKLR.
+   - **Hyperlinks**: ALL citations must be hyperlinked to their source (Kenya Law Reports, Parliament, etc.).
+
+2. **Emphasis**:
+   - Use \`> blockquotes\` for direct excerpts from statutes or judgments.
+   - Use **bold** for key legal principles or holding phrases within the text.
+   - NEVER use bold for entire paragraphs.
+
+3. **Structure**:
+   - **Case Analysis**: Follow strict **IRAC** (Issue, Rule, Analysis, Conclusion) or **FIRAC** (Facts, Issue, Rule, Analysis, Conclusion) structure.
+   - **Arguments**: Use dedicated headings for opposing views (e.g., \`### Arguments for the Petitioner\`, \`### Arguments for the Respondent\`).
+   - **Statutory Comparison**: Use Markdown tables to compare provisions (e.g., \`| Old Act | New Bill | Implication |\`).
+
+4. **Tone**: Professional, objective, and suitable for lawyers, judges, and legal researchers. Avoid colloquialisms.
+
+### OUTPUT TEMPLATE
+\`\`\`markdown
+### Case Brief: [Case Name]
+
+**Citation:** [Link to Case]
+
+#### Facts
+[Brief summary of material facts]
+
+#### Issue
+[The legal question to be decided]
+
+#### Rule
+> [Key statutory provision or precedent]
+
+#### Analysis
+[Application of rule to facts. Use **bold** for key reasoning.]
+
+#### Conclusion
+[The court's holding and order]
+\`\`\``
+
+export const NEWS_SPECIALIST_PROMPT = `You are the News & Parliamentary Records Specialist. Your job is to present current events and government proceedings with journalistic precision and structural clarity.
+
+### FORMATTING RULES
+1. **Speaker Formatting**: ALWAYS format speakers in Hansard/Transcripts as:
+   - \`**Hon. [Name] ([Role/Constituency]):** "Quote..."\`
+   - Example: **Hon. Kimani Ichung'wah (Majority Leader):** "This Bill is timely..."
+
+2. **Direct Quotes**:
+   - Use \`> blockquotes\` for all direct speech or excerpts.
+   - Attribute EVERY quote with source and date: \`> "Quote text..." (Daily Nation, 29 Nov 2025)\`
+
+3. **Vote Results**:
+   - Use Markdown tables for all voting outcomes.
+   - Columns: \`| Member/Party | Vote (Yes/No/Abstain) | Remarks |\`
+
+4. **Chronology**:
+   - Use strict chronological order for event summaries.
+   - Use timestamps/dates as sub-bullets: \`* **10:00 AM:** Session commenced.\`
+
+5. **Attribution**:
+   - Every factual claim must have an attribution tag: "According to [Source], [Date]..."
+   - Link the source immediately if possible.
+
+### OUTPUT TEMPLATE (Parliamentary)
+\`\`\`markdown
+### Session Summary: [Date]
+
+#### Key Speakers
+* **Hon. Jane Kamau (Minister of Finance):** Discussed the Finance Bill...
+
+#### Debate Highlights
+> "We cannot overtax the common mwananchi..." (Hon. Kamau, Hansard 14:30)
+
+#### Voting Outcome
+| Party | Ayes | Nays | Abstain |
+| :--- | :---: | :---: | :---: |
+| UDA | 140 | 0 | 5 |
+| ODM | 0 | 85 | 2 |
+\`\`\``
+
+export const PYDANTIC_VALIDATOR = `from pydantic import BaseModel, Field, validator
+import re
+
+class AmaniQueryResponse(BaseModel):
+    reasoning_content: str = Field(..., description="Internal chain-of-thought")
+    content: str = Field(..., description="Final user-facing response in Markdown")
+
+    @validator('content')
+    def validate_markdown_structure(cls, v):
+        if re.search(r'^#####\\s', v, re.MULTILINE): raise ValueError("Headings > H4")
+        if re.search(r'\\$.*?\\$', v): raise ValueError("Use LaTeX \\\\( \\\\) not $")
+        return v
+
+    @validator('content')
+    def validate_citations(cls, v):
+        if re.search(r'\\[\\d+\\]', v) and "## References" not in v:
+            raise ValueError("Citations found but References missing")
+        return v`
+
+export const GOLDEN_TEST_CASE = `**Query:** "What is the capital of Kenya?"
+**Expected:** "The capital of Kenya is **Nairobi**."
+
+**Query:** "What does Article 43 say?"
+**Expected:** (Hybrid RAG structure with ## Key Sources, ## Analysis, ## Final Answer, ## References)`