feat: implement role-based access control UI - hide/show features based on user role (viewer/editor/admin/owner)

backend/tests/README_RETRY_TESTS.md

@@ -262,3 +262,4 @@ For more information, see `TESTING_GUIDE.md` in the project root.
 
 
 
+

frontend/app/admin-rules/page.tsx

@@ -7,6 +7,7 @@ import { AdminRulesPanel } from "@/components/admin-rules-panel";
 import { Footer } from "@/components/footer";
 import { useTenant } from "@/contexts/TenantContext";
 import { TenantSelector } from "@/components/tenant-selector";
+import { canManageRules } from "@/lib/permissions";
 
 const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL ?? "http://localhost:8000";
 
@@ -51,6 +52,44 @@ export default function AdminRulesPage() {
   const [lastUpdated, setLastUpdated] = useState<string>("");
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  // Check permissions early
+  if (!canManageRules(role)) {
+    return (
+      <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
+        <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3 text-base font-semibold">
+              <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
+                IC
+              </span>
+              IntegraChat · Admin Rules
+            </div>
+            <div className="flex items-center gap-4">
+              <TenantSelector />
+              <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+                ← Back Home
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <div className="rounded-2xl border border-red-500/50 bg-red-500/10 p-8 text-center">
+          <h2 className="text-2xl font-bold text-red-300 mb-2">Access Denied</h2>
+          <p className="text-slate-300 mb-4">
+            You need <strong>Admin</strong> or <strong>Owner</strong> role to manage rules.
+          </p>
+          <p className="text-sm text-slate-400">
+            Your current role: <strong className="text-slate-200">{role.charAt(0).toUpperCase() + role.slice(1)}</strong>
+          </p>
+          <p className="text-sm text-slate-400 mt-2">
+            Please switch your role using the dropdown in the header.
+          </p>
+        </div>
+        <Footer />
+      </main>
+    );
+  }
+
   // Set initial time only on client side to avoid hydration mismatch
   useEffect(() => {
     setLastUpdated(new Date().toLocaleTimeString());

frontend/app/analytics/page.tsx

@@ -1,10 +1,53 @@
+"use client";
+
 import Link from "next/link";
 
 import { AnalyticsPanel } from "@/components/analytics-panel";
 import { Footer } from "@/components/footer";
 import { TenantSelector } from "@/components/tenant-selector";
+import { useTenant } from "@/contexts/TenantContext";
+import { canViewAnalytics } from "@/lib/permissions";
 
 export default function AnalyticsPage() {
+  const { role } = useTenant();
+
+  if (!canViewAnalytics(role)) {
+    return (
+      <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
+        <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3 text-base font-semibold">
+              <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
+                IC
+              </span>
+              IntegraChat · Analytics
+            </div>
+            <div className="flex items-center gap-4">
+              <TenantSelector />
+              <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+                ← Back Home
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <div className="rounded-2xl border border-red-500/50 bg-red-500/10 p-8 text-center">
+          <h2 className="text-2xl font-bold text-red-300 mb-2">Access Denied</h2>
+          <p className="text-slate-300 mb-4">
+            You need <strong>Admin</strong> or <strong>Owner</strong> role to view analytics.
+          </p>
+          <p className="text-sm text-slate-400">
+            Your current role: <strong className="text-slate-200">{role.charAt(0).toUpperCase() + role.slice(1)}</strong>
+          </p>
+          <p className="text-sm text-slate-400 mt-2">
+            Please switch your role using the dropdown in the header.
+          </p>
+        </div>
+        <Footer />
+      </main>
+    );
+  }
+
   return (
     <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">

frontend/app/ingestion/page.tsx

@@ -1,10 +1,53 @@
+"use client";
+
 import Link from "next/link";
 
 import { KnowledgeBasePanel } from "@/components/knowledge-base-panel";
 import { Footer } from "@/components/footer";
 import { TenantSelector } from "@/components/tenant-selector";
+import { useTenant } from "@/contexts/TenantContext";
+import { canIngestDocuments } from "@/lib/permissions";
 
 export default function IngestionPage() {
+  const { role } = useTenant();
+
+  if (!canIngestDocuments(role)) {
+    return (
+      <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
+        <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
+          <div className="flex items-center justify-between gap-3">
+            <div className="flex items-center gap-3 text-base font-semibold">
+              <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
+                IC
+              </span>
+              IntegraChat · Data Ingestion
+            </div>
+            <div className="flex items-center gap-4">
+              <TenantSelector />
+              <Link href="/" className="text-xs font-semibold uppercase tracking-[0.3em] text-cyan-300 hover:text-white">
+                ← Back Home
+              </Link>
+            </div>
+          </div>
+        </header>
+
+        <div className="rounded-2xl border border-red-500/50 bg-red-500/10 p-8 text-center">
+          <h2 className="text-2xl font-bold text-red-300 mb-2">Access Denied</h2>
+          <p className="text-slate-300 mb-4">
+            You need <strong>Editor</strong>, <strong>Admin</strong>, or <strong>Owner</strong> role to ingest documents.
+          </p>
+          <p className="text-sm text-slate-400">
+            Your current role: <strong className="text-slate-200">{role.charAt(0).toUpperCase() + role.slice(1)}</strong>
+          </p>
+          <p className="text-sm text-slate-400 mt-2">
+            Please switch your role using the dropdown in the header.
+          </p>
+        </div>
+        <Footer />
+      </main>
+    );
+  }
+
   return (
     <main className="mx-auto flex min-h-screen max-w-5xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-4 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">

frontend/app/page.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 
 import { AdminRulesPanel } from "@/components/admin-rules-panel";
@@ -8,41 +10,71 @@ import { Footer } from "@/components/footer";
 import { Hero } from "@/components/hero";
 import { KnowledgeBasePanel } from "@/components/knowledge-base-panel";
 import { TenantSelector } from "@/components/tenant-selector";
+import { useTenant } from "@/contexts/TenantContext";
+import {
+  canManageRules,
+  canViewAnalytics,
+  canIngestDocuments,
+} from "@/lib/permissions";
+
+function Navigation() {
+  const { role } = useTenant();
+
+  const navItems = [
+    {
+      label: "Data Ingestion",
+      href: "/ingestion",
+      visible: canIngestDocuments(role),
+    },
+    { label: "Chat Bot", href: "/chat", visible: true }, // Chat is available to all
+    {
+      label: "Analytics",
+      href: "/analytics",
+      visible: canViewAnalytics(role),
+    },
+    {
+      label: "Admin Rule Ingestion",
+      href: "/admin-rules",
+      visible: canManageRules(role),
+    },
+  ];
+
+  const visibleNavItems = navItems.filter((item) => item.visible);
 
-const navItems = [
-  { label: "Data Ingestion", href: "/ingestion" },
-  { label: "Chat Bot", href: "/chat" },
-  { label: "Analytics", href: "/analytics" },
-  { label: "Admin Rule Ingestion", href: "/admin-rules" },
-];
+  return (
+    <nav className="flex flex-wrap gap-2">
+      {visibleNavItems.map((item) => (
+        <Link
+          key={item.href}
+          href={item.href}
+          className="rounded-full border border-white/15 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-cyan-400 hover:text-white"
+        >
+          {item.label}
+        </Link>
+      ))}
+    </nav>
+  );
+}
 
 export default function Home() {
+  const { role } = useTenant();
+
   return (
     <main className="mx-auto flex min-h-screen max-w-6xl flex-col gap-10 px-4 pb-16 pt-12 sm:px-6 lg:px-8">
       <header className="flex flex-col gap-6 rounded-2xl border border-white/10 bg-white/5 px-6 py-6 text-slate-100 shadow-lg shadow-slate-950/40">
         <div className="flex flex-wrap items-center justify-between gap-3 text-sm">
-        <div className="flex items-center gap-3 text-base font-semibold">
-          <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
-            IC
-          </span>
-          IntegraChat Operator Console
-        </div>
-        <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.4em] text-slate-400">
-          FastAPI · MCP Servers · Celery · Next.js
-        </div>
+          <div className="flex items-center gap-3 text-base font-semibold">
+            <span className="inline-flex h-10 w-10 items-center justify-center rounded-2xl bg-gradient-to-br from-sky-400 to-cyan-500 text-slate-950">
+              IC
+            </span>
+            IntegraChat Operator Console
+          </div>
+          <div className="flex flex-wrap items-center gap-3 text-xs uppercase tracking-[0.4em] text-slate-400">
+            FastAPI · MCP Servers · Celery · Next.js
+          </div>
         </div>
         <div className="flex flex-wrap items-center justify-between gap-4">
-          <nav className="flex flex-wrap gap-2">
-            {navItems.map((item) => (
-              <Link
-                key={item.href}
-                href={item.href}
-                className="rounded-full border border-white/15 px-4 py-2 text-xs font-semibold uppercase tracking-[0.2em] text-slate-200 transition hover:border-cyan-400 hover:text-white"
-              >
-                {item.label}
-              </Link>
-            ))}
-          </nav>
+          <Navigation />
           <TenantSelector />
         </div>
       </header>
@@ -50,21 +82,27 @@ export default function Home() {
       <Hero />
       <FeatureGrid />
 
-      <section id="data-ingestion" className="scroll-mt-28">
-      <KnowledgeBasePanel />
-      </section>
+      {canIngestDocuments(role) && (
+        <section id="data-ingestion" className="scroll-mt-28">
+          <KnowledgeBasePanel />
+        </section>
+      )}
 
       <section id="chat-bot" className="scroll-mt-28">
-      <ChatPanel />
+        <ChatPanel />
       </section>
 
-      <section id="analytics" className="scroll-mt-28">
-      <AnalyticsPanel />
-      </section>
+      {canViewAnalytics(role) && (
+        <section id="analytics" className="scroll-mt-28">
+          <AnalyticsPanel />
+        </section>
+      )}
 
-      <section id="admin-rules" className="scroll-mt-28">
-        <AdminRulesPanel />
-      </section>
+      {canManageRules(role) && (
+        <section id="admin-rules" className="scroll-mt-28">
+          <AdminRulesPanel />
+        </section>
+      )}
 
       <Footer />
     </main>

frontend/components/analytics-panel.tsx

@@ -40,6 +40,12 @@ export function AnalyticsPanel() {
         },
       });
       if (!res.ok) {
+        if (res.status === 403) {
+          const errorData = await res.json().catch(() => ({}));
+          throw new Error(
+            errorData.detail || "Access denied. You need Admin or Owner role to view analytics."
+          );
+        }
         throw new Error(`Analytics endpoint returned ${res.status}`);
       }
       const payload: AnalyticsOverview = await res.json();

frontend/components/knowledge-base-panel.tsx

@@ -3,6 +3,7 @@
 import { useState, useRef, useEffect } from "react";
 import Link from "next/link";
 import { useTenant } from "@/contexts/TenantContext";
+import { canDeleteDocuments } from "@/lib/permissions";
 
 type SearchResult = {
   text: string;
@@ -23,6 +24,7 @@ const API_BASE =
 
 export function KnowledgeBasePanel() {
   const { tenantId, isLoading: tenantLoading, role } = useTenant();
+  const canDelete = canDeleteDocuments(role);
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -537,7 +539,7 @@ export function KnowledgeBasePanel() {
               >
                 {isLoadingDocs ? "Loading…" : "Refresh"}
               </button>
-              {documents.length > 0 && (
+              {canDelete && documents.length > 0 && (
                 <button
                   onClick={handleDeleteAll}
                   disabled={isDeletingAll}
@@ -583,13 +585,15 @@ export function KnowledgeBasePanel() {
                         : doc.text}
                     </p>
                   </div>
-                  <button
-                    onClick={() => handleDeleteDocument(doc.id)}
-                    disabled={isDeleting === doc.id}
-                    className="flex-shrink-0 rounded-lg border border-red-500/50 bg-red-500/10 px-3 py-1.5 text-xs font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
-                  >
-                    {isDeleting === doc.id ? "Deleting…" : "Delete"}
-                  </button>
+                  {canDelete && (
+                    <button
+                      onClick={() => handleDeleteDocument(doc.id)}
+                      disabled={isDeleting === doc.id}
+                      className="flex-shrink-0 rounded-lg border border-red-500/50 bg-red-500/10 px-3 py-1.5 text-xs font-semibold text-red-300 transition hover:bg-red-500/20 disabled:opacity-60"
+                    >
+                      {isDeleting === doc.id ? "Deleting…" : "Delete"}
+                    </button>
+                  )}
                 </div>
               ))}
             </div>

frontend/lib/permissions.ts

@@ -0,0 +1,76 @@
+/**
+ * Permission utilities for role-based access control
+ * Maps frontend roles to backend permission actions
+ */
+
+export type UserRole = "viewer" | "editor" | "admin" | "owner";
+
+/**
+ * Permission actions that match backend definitions
+ */
+type PermissionAction = 
+  | "manage_rules"      // Admin/Owner only
+  | "ingest_documents"  // Editor/Admin/Owner
+  | "delete_documents"  // Admin/Owner only
+  | "view_analytics";   // Admin/Owner only
+
+/**
+ * Permission matrix matching backend access_control.py
+ */
+const PERMISSIONS: Record<PermissionAction, UserRole[]> = {
+  manage_rules: ["admin", "owner"],
+  ingest_documents: ["editor", "admin", "owner"],
+  delete_documents: ["admin", "owner"],
+  view_analytics: ["admin", "owner"],
+};
+
+/**
+ * Check if a role has permission for an action
+ */
+export function hasPermission(role: UserRole, action: PermissionAction): boolean {
+  const allowedRoles = PERMISSIONS[action];
+  return allowedRoles.includes(role);
+}
+
+/**
+ * Check if user can manage rules (admin/owner only)
+ */
+export function canManageRules(role: UserRole): boolean {
+  return hasPermission(role, "manage_rules");
+}
+
+/**
+ * Check if user can ingest documents (editor/admin/owner)
+ */
+export function canIngestDocuments(role: UserRole): boolean {
+  return hasPermission(role, "ingest_documents");
+}
+
+/**
+ * Check if user can delete documents (admin/owner only)
+ */
+export function canDeleteDocuments(role: UserRole): boolean {
+  return hasPermission(role, "delete_documents");
+}
+
+/**
+ * Check if user can view analytics (admin/owner only)
+ */
+export function canViewAnalytics(role: UserRole): boolean {
+  return hasPermission(role, "view_analytics");
+}
+
+/**
+ * Check if user has admin-level access (admin or owner)
+ */
+export function isAdminOrOwner(role: UserRole): boolean {
+  return role === "admin" || role === "owner";
+}
+
+/**
+ * Check if user has editor-level access or higher
+ */
+export function isEditorOrAbove(role: UserRole): boolean {
+  return role === "editor" || role === "admin" || role === "owner";
+}
+