update frontend

frontend/README.md

@@ -31,6 +31,12 @@ Update `.env.local` if your backend runs elsewhere:
 NEXT_PUBLIC_API_URL=http://localhost:8000
 ```
 
+### Tenant & Role selector
+
+- The navbar widget now stores both the tenant ID and the MCP role (Viewer, Editor, Admin, Owner) in `localStorage`.
+- Every API call automatically includes `x-tenant-id` and `x-user-role` headers so the backend RBAC layer can authorize ingestion, admin rule uploads, analytics, and delete operations.
+- If you see a 403 "insufficient permissions" error, switch the role dropdown to a higher privilege (e.g., Admin) before retrying the action.
+
 ## Features
 
 ### Main Landing Page (`/`)
@@ -49,7 +55,7 @@ NEXT_PUBLIC_API_URL=http://localhost:8000
   - PDF file uploads
   - DOCX file uploads
   - TXT and Markdown file uploads
-- **Document management** with tenant isolation:
+- **Document management** with tenant + role isolation:
   - Delete individual documents by ID
   - Delete all documents for a tenant (with confirmation)
   - Real-time document list updates after operations

frontend/app/admin-rules/page.tsx

@@ -12,8 +12,36 @@ const BACKEND_BASE_URL = process.env.NEXT_PUBLIC_BACKEND_BASE_URL ?? "http://loc
 
 type StatusState = { tone: "info" | "success" | "error"; message: string } | null;
 
+const RBAC_ERROR_HINT =
+  "Insufficient permissions for this action. Switch your role to Admin or Owner in the navbar and try again.";
+
+async function buildErrorMessage(response: Response) {
+  const fallback = `Backend error ${response.status}`;
+  try {
+    const text = await response.text();
+    if (!text) {
+      return response.status === 403 ? RBAC_ERROR_HINT : fallback;
+    }
+    try {
+      const parsed = JSON.parse(text);
+      const detail = parsed.detail || parsed.message;
+      if (response.status === 403) {
+        return detail || RBAC_ERROR_HINT;
+      }
+      return detail || fallback;
+    } catch {
+      if (response.status === 403) {
+        return text || RBAC_ERROR_HINT;
+      }
+      return text || fallback;
+    }
+  } catch {
+    return response.status === 403 ? RBAC_ERROR_HINT : fallback;
+  }
+}
+
 export default function AdminRulesPage() {
-  const { tenantId } = useTenant();
+  const { tenantId, role } = useTenant();
   const [rulesInput, setRulesInput] = useState("");
   const [deleteInput, setDeleteInput] = useState("");
   const [rules, setRules] = useState<string[]>([]);
@@ -33,8 +61,9 @@ export default function AdminRulesPage() {
     return {
       "Content-Type": "application/json",
       "x-tenant-id": tenantId.trim(),
+      "x-user-role": role,
     };
-  }, [tenantId]);
+  }, [tenantId, role]);
 
   const requireTenant = useCallback(() => {
     if (!tenantId.trim()) {
@@ -54,7 +83,7 @@ export default function AdminRulesPage() {
         headers,
       });
       if (!response.ok) {
-        throw new Error(`Backend error ${response.status}`);
+        throw new Error(await buildErrorMessage(response));
       }
       const data = await response.json();
       setRules(data.rules ?? []);
@@ -88,8 +117,7 @@ export default function AdminRulesPage() {
         body: JSON.stringify({ rules: lines }),
       });
       if (!response.ok) {
-        const details = await response.text();
-        throw new Error(details || `Backend error ${response.status}`);
+        throw new Error(await buildErrorMessage(response));
       }
       const data = await response.json();
       await handleRefresh();
@@ -132,15 +160,14 @@ export default function AdminRulesPage() {
 
         // Upload rules via bulk endpoint
         setStatus({ tone: "info", message: `Uploading ${lines.length} rule(s)...` });
-        const response = await fetch(`${BACKEND_BASE_URL}/admin/rules/bulk?enhance=true`, {
+      const response = await fetch(`${BACKEND_BASE_URL}/admin/rules/bulk?enhance=true`, {
           method: "POST",
           headers,
           body: JSON.stringify({ rules: lines }),
         });
 
         if (!response.ok) {
-          const details = await response.text();
-          throw new Error(details || `Backend error ${response.status}`);
+          throw new Error(await buildErrorMessage(response));
         }
 
         const data = await response.json();
@@ -159,13 +186,13 @@ export default function AdminRulesPage() {
         method: "POST",
         headers: {
           "x-tenant-id": tenantId.trim(),
+          "x-user-role": role,
         },
         body: formData,
       });
 
       if (!response.ok) {
-        const details = await response.text();
-        throw new Error(details || `Backend error ${response.status}`);
+        throw new Error(await buildErrorMessage(response));
       }
 
       const data = await response.json();
@@ -238,8 +265,7 @@ export default function AdminRulesPage() {
         }
       );
       if (!response.ok) {
-        const details = await response.text();
-        throw new Error(details || `Backend error ${response.status}`);
+        throw new Error(await buildErrorMessage(response));
       }
       await handleRefresh();
       setDeleteInput("");

frontend/app/knowledge-base/page.tsx

@@ -21,7 +21,7 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export default function KnowledgeBasePage() {
-  const { tenantId, isLoading: tenantLoading } = useTenant();
+  const { tenantId, isLoading: tenantLoading, role } = useTenant();
   const [documents, setDocuments] = useState<Document[]>([]);
   const [total, setTotal] = useState(0);
   const [loading, setLoading] = useState(false);
@@ -43,14 +43,12 @@ export default function KnowledgeBasePage() {
     setError(null);
 
     try {
-      const response = await fetch(
-        `${API_BASE}/rag/list?limit=1000&offset=0`,
-        {
-          headers: {
-            "x-tenant-id": tenantId,
-          },
+      const response = await fetch(`${API_BASE}/rag/list?limit=1000&offset=0`, {
+        headers: {
+          "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
-      );
+      });
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
@@ -155,6 +153,7 @@ export default function KnowledgeBasePage() {
         method: "DELETE",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
 
@@ -193,6 +192,7 @@ export default function KnowledgeBasePage() {
         method: "DELETE",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
 

frontend/components/analytics-panel.tsx

@@ -24,7 +24,7 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export function AnalyticsPanel() {
-  const { tenantId } = useTenant();
+  const { tenantId, role } = useTenant();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [data, setData] = useState<AnalyticsOverview["overview"] | null>(null);
@@ -36,6 +36,7 @@ export function AnalyticsPanel() {
       const res = await fetch(`${API_BASE}/analytics/overview`, {
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
       if (!res.ok) {

frontend/components/knowledge-base-panel.tsx

@@ -22,7 +22,7 @@ const API_BASE =
   process.env.NEXT_PUBLIC_API_URL?.replace(/\/$/, "") || "http://localhost:8000";
 
 export function KnowledgeBasePanel() {
-  const { tenantId, isLoading: tenantLoading } = useTenant();
+  const { tenantId, isLoading: tenantLoading, role } = useTenant();
   const [searchQuery, setSearchQuery] = useState("");
   const [searchResults, setSearchResults] = useState<SearchResult[]>([]);
   const [isSearching, setIsSearching] = useState(false);
@@ -51,6 +51,7 @@ export function KnowledgeBasePanel() {
         headers: {
           "Content-Type": "application/json",
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
         body: JSON.stringify({ query: searchQuery }),
       });
@@ -115,6 +116,7 @@ export function KnowledgeBasePanel() {
         method: "POST",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
         body: formData,
       });
@@ -172,6 +174,7 @@ export function KnowledgeBasePanel() {
         headers: {
           "Content-Type": "application/json",
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
         body: JSON.stringify({
           action: "ingest_document",
@@ -223,6 +226,7 @@ export function KnowledgeBasePanel() {
         method: "GET",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
 
@@ -264,6 +268,7 @@ export function KnowledgeBasePanel() {
         method: "DELETE",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
 
@@ -302,6 +307,7 @@ export function KnowledgeBasePanel() {
         method: "DELETE",
         headers: {
           "x-tenant-id": tenantId,
+          "x-user-role": role,
         },
       });
 

frontend/components/tenant-selector.tsx

@@ -3,17 +3,33 @@
 import { useTenant } from "@/contexts/TenantContext";
 
 export function TenantSelector() {
-  const { tenantId, setTenantId } = useTenant();
+  const { tenantId, setTenantId, role, setRole, availableRoles } = useTenant();
 
   return (
-    <div className="flex items-center gap-3">
-      <label className="text-sm font-semibold text-slate-200">Tenant ID:</label>
-      <input
-        value={tenantId}
-        onChange={(e) => setTenantId(e.target.value)}
-        placeholder="Enter tenant ID"
-        className="rounded-xl border border-white/10 bg-slate-900/50 px-4 py-2 text-sm text-white outline-none focus:border-cyan-400 min-w-[150px]"
-      />
+    <div className="flex flex-col gap-2 text-sm text-slate-200">
+      <div className="flex items-center gap-2">
+        <label className="font-semibold text-slate-200">Tenant ID:</label>
+        <input
+          value={tenantId}
+          onChange={(e) => setTenantId(e.target.value)}
+          placeholder="Enter tenant ID"
+          className="rounded-xl border border-white/10 bg-slate-900/50 px-4 py-2 text-sm text-white outline-none focus:border-cyan-400 min-w-[150px]"
+        />
+      </div>
+      <div className="flex items-center gap-2">
+        <label className="font-semibold text-slate-200">Role:</label>
+        <select
+          value={role}
+          onChange={(e) => setRole(e.target.value as typeof availableRoles[number])}
+          className="rounded-xl border border-white/10 bg-slate-900/50 px-3 py-2 text-sm text-white outline-none focus:border-cyan-400"
+        >
+          {availableRoles.map((roleOption) => (
+            <option key={roleOption} value={roleOption} className="bg-slate-900 text-white">
+              {roleOption.charAt(0).toUpperCase() + roleOption.slice(1)}
+            </option>
+          ))}
+        </select>
+      </div>
     </div>
   );
 }

frontend/contexts/TenantContext.tsx

@@ -1,11 +1,20 @@
 "use client";
 
 import { createContext, useContext, useState, useEffect, ReactNode } from "react";
-import { DEFAULT_TENANT_ID, TENANT_STORAGE_KEY } from "@/lib/constants";
+import {
+  DEFAULT_TENANT_ID,
+  TENANT_STORAGE_KEY,
+  DEFAULT_USER_ROLE,
+  ROLE_STORAGE_KEY,
+  USER_ROLES,
+} from "@/lib/constants";
 
 type TenantContextType = {
   tenantId: string;
   setTenantId: (id: string) => void;
+  role: (typeof USER_ROLES)[number];
+  setRole: (role: (typeof USER_ROLES)[number]) => void;
+  availableRoles: typeof USER_ROLES;
   isLoading: boolean;
 };
 
@@ -13,12 +22,15 @@ const TenantContext = createContext<TenantContextType | undefined>(undefined);
 
 export function TenantProvider({ children }: { children: ReactNode }) {
   const [tenantId, setTenantIdState] = useState("");
+  const [role, setRoleState] = useState<(typeof USER_ROLES)[number]>(DEFAULT_USER_ROLE);
   const [isLoading, setIsLoading] = useState(true);
 
   // Load from localStorage on mount
   useEffect(() => {
-    const saved = localStorage.getItem(TENANT_STORAGE_KEY);
-    setTenantIdState(saved || DEFAULT_TENANT_ID);
+    const savedTenant = localStorage.getItem(TENANT_STORAGE_KEY);
+    const savedRole = localStorage.getItem(ROLE_STORAGE_KEY) as (typeof USER_ROLES)[number] | null;
+    setTenantIdState(savedTenant || DEFAULT_TENANT_ID);
+    setRoleState(savedRole && USER_ROLES.includes(savedRole) ? savedRole : DEFAULT_USER_ROLE);
     setIsLoading(false);
   }, []);
 
@@ -32,8 +44,15 @@ export function TenantProvider({ children }: { children: ReactNode }) {
     }
   };
 
+  const setRole = (newRole: (typeof USER_ROLES)[number]) => {
+    setRoleState(newRole);
+    localStorage.setItem(ROLE_STORAGE_KEY, newRole);
+  };
+
   return (
-    <TenantContext.Provider value={{ tenantId, setTenantId, isLoading }}>
+    <TenantContext.Provider
+      value={{ tenantId, setTenantId, role, setRole, availableRoles: USER_ROLES, isLoading }}
+    >
       {children}
     </TenantContext.Provider>
   );

frontend/lib/constants.ts

@@ -1,3 +1,6 @@
 export const DEFAULT_TENANT_ID = "tenant123";
 export const TENANT_STORAGE_KEY = "integrachat_tenant_id";
+export const DEFAULT_USER_ROLE = "viewer";
+export const ROLE_STORAGE_KEY = "integrachat_user_role";
+export const USER_ROLES = ["viewer", "editor", "admin", "owner"] as const;