From 4dafd70c831bdbf0b15dfd00fea04cc2c72dbfd0 Mon Sep 17 00:00:00 2001
From: "Kai (Tam Nhu) Tran" <61256810+kaitranntt@users.noreply.github.com>
Date: Fri, 27 Mar 2026 02:43:25 -0400
Subject: [PATCH] fix(ui): stop logout on method-level UNAUTHORIZED, align TTS
 route guard (#502)

ws-client.ts treated any UNAUTHORIZED WebSocket response as session
invalidation, triggering full logout. This caused clicking the TTS tab
to log users out because config.get requires owner role while the route
only required admin.

- Remove UNAUTHORIZED from onAuthFailure trigger in handleResponse;
  only TENANT_ACCESS_REVOKED forces logout now
- Change TTS route guard from RequireAdmin to RequireOwner (matches
  backend requireOwner on config.get/config.patch)
- Gate TTS sidebar item behind isOwner so non-owners don't see it

Closes #501
---
 ui/web/src/api/ws-client.ts              | 5 ++++-
 ui/web/src/components/layout/sidebar.tsx | 4 +++-
 ui/web/src/routes.tsx                    | 2 +-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/ui/web/src/api/ws-client.ts b/ui/web/src/api/ws-client.ts
index e18d178f..11231ae9 100644
--- a/ui/web/src/api/ws-client.ts
+++ b/ui/web/src/api/ws-client.ts
@@ -282,7 +282,10 @@ export class WsClient {
       pending.resolve(frame.payload);
     } else {
       const err = frame.error as ErrorShape;
-      if (err.code === "UNAUTHORIZED" || err.code === "TENANT_ACCESS_REVOKED") {
+      // Only force logout on tenant revocation (session-level invalidation).
+      // UNAUTHORIZED from a method call means "insufficient permission for this action",
+      // not "session expired" — let the caller handle it via the rejected promise.
+      if (err.code === "TENANT_ACCESS_REVOKED") {
         this.onAuthFailure?.();
       }
       pending.reject(
diff --git a/ui/web/src/components/layout/sidebar.tsx b/ui/web/src/components/layout/sidebar.tsx
index 33fb6d4c..7f47af26 100644
--- a/ui/web/src/components/layout/sidebar.tsx
+++ b/ui/web/src/components/layout/sidebar.tsx
@@ -101,7 +101,9 @@ export function Sidebar({ collapsed, onNavItemClick }: SidebarProps) {
           <SidebarItem to={ROUTES.SKILLS} icon={Zap} label={t("nav.skills")} collapsed={collapsed} />
           <SidebarItem to={ROUTES.BUILTIN_TOOLS} icon={Package} label={t("nav.builtinTools")} collapsed={collapsed} />
           <SidebarItem to={ROUTES.MCP} icon={Plug} label={t("nav.mcpServers")} collapsed={collapsed} />
-          <SidebarItem to={ROUTES.TTS} icon={Volume2} label={t("nav.tts")} collapsed={collapsed} />
+          {isOwner && (
+            <SidebarItem to={ROUTES.TTS} icon={Volume2} label={t("nav.tts")} collapsed={collapsed} />
+          )}
           <SidebarItem to={ROUTES.CRON} icon={Clock} label={t("nav.cron")} collapsed={collapsed} />
         </SidebarGroup>
 
diff --git a/ui/web/src/routes.tsx b/ui/web/src/routes.tsx
index 26dd7b94..f10bb741 100644
--- a/ui/web/src/routes.tsx
+++ b/ui/web/src/routes.tsx
@@ -173,7 +173,7 @@ export function AppRoutes() {
           <Route path={ROUTES.LOGS} element={<RequireAdmin><LogsPage /></RequireAdmin>} />
           <Route path={ROUTES.BUILTIN_TOOLS} element={<RequireAdmin><BuiltinToolsPage /></RequireAdmin>} />
           <Route path={ROUTES.MCP} element={<RequireAdmin><MCPPage /></RequireAdmin>} />
-          <Route path={ROUTES.TTS} element={<RequireAdmin><TtsPage /></RequireAdmin>} />
+          <Route path={ROUTES.TTS} element={<RequireCrossTenant><TtsPage /></RequireCrossTenant>} />
           <Route path={ROUTES.STORAGE} element={<RequireAdmin><StoragePage /></RequireAdmin>} />
           <Route path={ROUTES.PACKAGES} element={<RequireAdmin><PackagesPage /></RequireAdmin>} />
           <Route path={ROUTES.TENANTS} element={<RequireCrossTenant><TenantsAdminPage /></RequireCrossTenant>} />