diff --git a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
index 05410c9de..dd00aa769 100644
--- a/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
+++ b/frontend/src/app/workspace/agents/[agent_name]/chats/[thread_id]/page.tsx
@@ -36,6 +36,8 @@ import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicato
 import { Tooltip } from "@/components/workspace/tooltip";
 import { useActiveGoal } from "@/components/workspace/use-active-goal";
 import { useAgent } from "@/core/agents";
+import { useAuth } from "@/core/auth/AuthProvider";
+import { hasPermission, PERMISSIONS } from "@/core/auth/permissions";
 import { useBrowserControlEnabled } from "@/core/features";
 import { useI18n } from "@/core/i18n/hooks";
 import {
@@ -63,6 +65,8 @@ import { cn } from "@/lib/utils";
 
 export default function AgentChatPage() {
   const { t } = useI18n();
+  const { user } = useAuth();
+  const canStopStreaming = hasPermission(user, PERMISSIONS.RUNS_CANCEL);
   const router = useRouter();
 
   const { agent_name } = useParams<{
@@ -457,6 +461,7 @@ export default function AgentChatPage() {
                     onGoalChange={setLocalGoal}
                     onSubmit={handleSubmit}
                     onStop={handleStop}
+                    canStopStreaming={canStopStreaming}
                   />
                   {env.NEXT_PUBLIC_STATIC_WEBSITE_ONLY === "true" && (
                     <div className="text-muted-foreground/67 w-full translate-y-12 text-center text-xs">
diff --git a/frontend/src/components/workspace/chats/chat-page.tsx b/frontend/src/components/workspace/chats/chat-page.tsx
index 2b2a16a86..fd6b1895d 100644
--- a/frontend/src/components/workspace/chats/chat-page.tsx
+++ b/frontend/src/components/workspace/chats/chat-page.tsx
@@ -36,6 +36,8 @@ import { TodoList } from "@/components/workspace/todo-list";
 import { TokenUsageIndicator } from "@/components/workspace/token-usage-indicator";
 import { useActiveGoal } from "@/components/workspace/use-active-goal";
 import { Welcome } from "@/components/workspace/welcome";
+import { useAuth } from "@/core/auth/AuthProvider";
+import { hasPermission, PERMISSIONS } from "@/core/auth/permissions";
 import { useBrowserControlEnabled } from "@/core/features";
 import { useI18n } from "@/core/i18n/hooks";
 import {
@@ -71,6 +73,8 @@ import { useThreadChat } from "./use-thread-chat";
 
 export default function ChatPage() {
   const { t } = useI18n();
+  const { user } = useAuth();
+  const canStopStreaming = hasPermission(user, PERMISSIONS.RUNS_CANCEL);
   const router = useRouter();
   const searchParams = useSearchParams();
   const { threadId, setThreadId, isNewThread, setIsNewThread, isMock } =
@@ -549,6 +553,7 @@ export default function ChatPage() {
                       onPrepareThread={ensureProjectThread}
                       onSubmit={handleSubmit}
                       onStop={handleStop}
+                      canStopStreaming={canStopStreaming}
                     />
                   ) : (
                     <div
diff --git a/frontend/src/components/workspace/input-box.tsx b/frontend/src/components/workspace/input-box.tsx
index 4500bc2ed..cf1e9ff31 100644
--- a/frontend/src/components/workspace/input-box.tsx
+++ b/frontend/src/components/workspace/input-box.tsx
@@ -300,6 +300,7 @@ export function InputBox({
   onPrepareThread,
   onSubmit,
   onStop,
+  canStopStreaming = true,
   ...props
 }: Omit<ComponentProps<typeof PromptInput>, "onSubmit"> & {
   assistantId?: string | null;
@@ -356,6 +357,13 @@ export function InputBox({
     options?: InputBoxSubmitOptions,
   ) => void | Promise<void>;
   onStop?: () => void;
+  /**
+   * Whether the caller's role holds `runs:cancel` (RFC #4063 Phase 4).
+   * Defaults to true so callers that don't resolve permissions (pre-Phase-4
+   * backends, storybook) keep today's behavior; the Gateway route guard
+   * stays the enforcement point.
+   */
+  canStopStreaming?: boolean;
 }) {
   const { locale, t } = useI18n();
   const queryClient = useQueryClient();
@@ -1163,6 +1171,14 @@ export function InputBox({
   );
 
   const handleStopStreaming = useCallback(() => {
+    // Roles denied runs:cancel must not interrupt the in-progress turn —
+    // the Gateway would 403 the cancel anyway. The submit-button click is
+    // the only live entry point today (handleSubmit returns early with the
+    // pleaseWaitStreaming toast while streaming), but gate in the handler
+    // as defense-in-depth so any future stop path is covered too.
+    if (!canStopStreaming) {
+      return;
+    }
     // Mark the in-progress turn as user-interrupted so the next
     // streaming->ready transition does not suggest follow-ups for it.
     stoppedByUserRef.current = true;
@@ -1170,7 +1186,7 @@ export function InputBox({
     setFollowupsHidden(true);
     setFollowupsLoading(false);
     onStop?.();
-  }, [onStop]);
+  }, [canStopStreaming, onStop]);
 
   const handleSubmit = useCallback(
     async (message: PromptInputMessage) => {
@@ -1367,6 +1383,9 @@ export function InputBox({
   const isComposerDisabled = disabled === true;
   const isMockThread = isMock === true;
   const composerLocked = isComposerDisabled || polishingInput;
+  // A denied runs:cancel role sees a disabled stop affordance, not a removed
+  // one — the composer must still show that a turn is in flight.
+  const stopDenied = status === "streaming" && !canStopStreaming;
   const inputPolishUndoAvailable =
     !polishingInput &&
     inputPolishUndo !== null &&
@@ -2739,9 +2758,21 @@ export function InputBox({
             </ModelSelector>
             <PromptInputSubmit
               className="rounded-full"
-              disabled={composerLocked}
+              disabled={composerLocked || stopDenied}
               variant="outline"
               status={status}
+              // A bare disabled stop square reads as a broken composer;
+              // explain the permission boundary (native title, since a
+              // Radix tooltip won't fire on a disabled button). Spread
+              // conditionally: an explicitly-undefined aria-label would
+              // clobber PromptInputSubmit's default aria-label="Submit"
+              // and strip the submit control's accessible name.
+              {...(stopDenied
+                ? {
+                    "aria-label": t.inputBox.stopStreamingUnavailable,
+                    title: t.inputBox.stopStreamingUnavailable,
+                  }
+                : {})}
               onClick={(e) => {
                 if (status === "streaming") {
                   e.preventDefault();
diff --git a/frontend/src/components/workspace/recent-chat-list.tsx b/frontend/src/components/workspace/recent-chat-list.tsx
index 15af7cf3e..8bec3278b 100644
--- a/frontend/src/components/workspace/recent-chat-list.tsx
+++ b/frontend/src/components/workspace/recent-chat-list.tsx
@@ -47,6 +47,8 @@ import {
 } from "@/components/ui/sidebar";
 import { resetThreadChatAfterDelete } from "@/components/workspace/chats/use-thread-chat";
 import { getAPIClient } from "@/core/api";
+import { useAuth } from "@/core/auth/AuthProvider";
+import { hasPermission, PERMISSIONS } from "@/core/auth/permissions";
 import { writeTextToClipboard } from "@/core/clipboard";
 import { useI18n } from "@/core/i18n/hooks";
 import { useProjects } from "@/core/projects";
@@ -98,6 +100,8 @@ export function ThreadSidebarItem({
   recentThreadId?: string | undefined;
 }) {
   const { t } = useI18n();
+  const { user } = useAuth();
+  const canDeleteThreads = hasPermission(user, PERMISSIONS.THREADS_DELETE);
   const router = useRouter();
   const pathname = usePathname();
   const { thread_id: threadIdFromPath, agent_name: agentNameFromPath } =
@@ -372,11 +376,15 @@ export function ThreadSidebarItem({
               onNewProject={() => setNewProjectDialogOpen(true)}
               onMoveProject={handleMoveProject}
             />
-            <DropdownMenuSeparator />
-            <DropdownMenuItem onSelect={handleDelete}>
-              <Trash2 className="text-muted-foreground" />
-              <span>{t.common.delete}</span>
-            </DropdownMenuItem>
+            {canDeleteThreads && (
+              <>
+                <DropdownMenuSeparator />
+                <DropdownMenuItem onSelect={handleDelete}>
+                  <Trash2 className="text-muted-foreground" />
+                  <span>{t.common.delete}</span>
+                </DropdownMenuItem>
+              </>
+            )}
           </DropdownMenuContent>
         </DropdownMenu>
       )}
diff --git a/frontend/src/components/workspace/sidecar/sidecar-panel.tsx b/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
index af271fd15..4dcb85068 100644
--- a/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
+++ b/frontend/src/components/workspace/sidecar/sidecar-panel.tsx
@@ -48,6 +48,8 @@ import {
   DropdownMenuGroup,
   DropdownMenuLabel,
 } from "@/components/ui/dropdown-menu";
+import { useAuth } from "@/core/auth/AuthProvider";
+import { hasPermission, PERMISSIONS } from "@/core/auth/permissions";
 import { useI18n } from "@/core/i18n/hooks";
 import {
   buildHumanInputResponseText,
@@ -146,6 +148,8 @@ function promptMessageFiles(message: PromptInputMessage) {
 
 export function SidecarPanel({ className }: { className?: string }) {
   const { t } = useI18n();
+  const { user } = useAuth();
+  const canDeleteThreads = hasPermission(user, PERMISSIONS.THREADS_DELETE);
   const sidecar = useSidecar();
   const { thread: parentThread } = useParentThread();
   const [localSettings] = useLocalSettings();
@@ -539,7 +543,7 @@ export function SidecarPanel({ className }: { className?: string }) {
                 : t.sidecar.noContext}
           </div>
         </div>
-        {hasSidecarThread && (
+        {hasSidecarThread && canDeleteThreads && (
           <Tooltip content={t.sidecar.delete}>
             <Button
               aria-label={t.sidecar.delete}
diff --git a/frontend/src/core/auth/permissions.ts b/frontend/src/core/auth/permissions.ts
new file mode 100644
index 000000000..bae409b67
--- /dev/null
+++ b/frontend/src/core/auth/permissions.ts
@@ -0,0 +1,30 @@
+import type { User } from "./types";
+
+/**
+ * Route permissions surfaced by `GET /api/v1/auth/me` (RFC #4063 Phase 4).
+ * Kept in lockstep with `Permissions` in `backend/app/gateway/authz.py`.
+ */
+export const PERMISSIONS = {
+  THREADS_DELETE: "threads:delete",
+  RUNS_CANCEL: "runs:cancel",
+} as const;
+
+/**
+ * Whether the current user may perform a route-permission-gated action.
+ *
+ * The permission list is advisory UI state, not enforcement: a missing list
+ * (pre-Phase-4 backend, or a credential that never resolved permissions —
+ * serialized as `null`) or a not-yet-loaded user is treated as permissive so
+ * a mixed old-backend/new-frontend deploy never hides actions the caller can
+ * still perform. The Gateway's `@require_permission` route guards remain the
+ * single enforcement point.
+ */
+export function hasPermission(
+  user: Pick<User, "permissions"> | null | undefined,
+  permission: string,
+): boolean {
+  if (user?.permissions == null) {
+    return true;
+  }
+  return user.permissions.includes(permission);
+}
diff --git a/frontend/src/core/auth/types.ts b/frontend/src/core/auth/types.ts
index ef0b8f187..bf45b7611 100644
--- a/frontend/src/core/auth/types.ts
+++ b/frontend/src/core/auth/types.ts
@@ -8,6 +8,11 @@ export const userSchema = z.object({
   system_role: z.enum(["admin", "user"]),
   needs_setup: z.boolean().optional().default(false),
   oauth_provider: z.string().nullable().optional().default(null),
+  // Effective route permissions (RFC #4063 Phase 4). Optional + nullable:
+  // absent = pre-Phase-4 backend, null = credential-creation response that
+  // never resolved them — both are consumed as "permissive, unresolved", see
+  // hasPermission() in ./permissions.
+  permissions: z.array(z.string()).nullable().optional(),
 });
 
 export type User = Omit<z.infer<typeof userSchema>, "oauth_provider"> & {
diff --git a/frontend/src/core/i18n/locales/en-US.ts b/frontend/src/core/i18n/locales/en-US.ts
index 87cec7994..06d1dbee5 100644
--- a/frontend/src/core/i18n/locales/en-US.ts
+++ b/frontend/src/core/i18n/locales/en-US.ts
@@ -327,6 +327,8 @@ export const enUS: Translations = {
       },
     ],
     pleaseWaitStreaming: "Please wait for the current response to finish.",
+    stopStreamingUnavailable:
+      "Stopping the running turn is not permitted for your role.",
   },
 
   // Sidebar
diff --git a/frontend/src/core/i18n/locales/types.ts b/frontend/src/core/i18n/locales/types.ts
index 1bf2dea1a..cec496b41 100644
--- a/frontend/src/core/i18n/locales/types.ts
+++ b/frontend/src/core/i18n/locales/types.ts
@@ -245,6 +245,7 @@ export interface Translations {
         }
     )[];
     pleaseWaitStreaming: string;
+    stopStreamingUnavailable: string;
   };
 
   // Sidebar
diff --git a/frontend/src/core/i18n/locales/zh-CN.ts b/frontend/src/core/i18n/locales/zh-CN.ts
index 37335b87c..300e7003a 100644
--- a/frontend/src/core/i18n/locales/zh-CN.ts
+++ b/frontend/src/core/i18n/locales/zh-CN.ts
@@ -306,6 +306,7 @@ export const zhCN: Translations = {
       },
     ],
     pleaseWaitStreaming: "请等待当前响应完成。",
+    stopStreamingUnavailable: "你的角色无权停止正在运行的回合。",
   },
 
   // Sidebar
diff --git a/frontend/tests/unit/components/workspace/input-box-stop-gating.dom.test.tsx b/frontend/tests/unit/components/workspace/input-box-stop-gating.dom.test.tsx
new file mode 100644
index 000000000..e16c6f5e4
--- /dev/null
+++ b/frontend/tests/unit/components/workspace/input-box-stop-gating.dom.test.tsx
@@ -0,0 +1,135 @@
+import { afterEach, describe, expect, it, rs } from "@rstest/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, fireEvent, render, screen } from "@testing-library/react";
+import type { ReactNode } from "react";
+
+import { PromptInputProvider } from "@/components/ai-elements/prompt-input";
+import { InputBox } from "@/components/workspace/input-box";
+import { ThreadContext } from "@/components/workspace/messages/context";
+import { AuthProvider } from "@/core/auth/AuthProvider";
+import { DEFAULT_LOCALE } from "@/core/i18n";
+import { I18nProvider } from "@/core/i18n/context";
+
+rs.mock("next/navigation", () => ({
+  useRouter: () => ({ push: rs.fn(), replace: rs.fn(), refresh: rs.fn() }),
+  usePathname: () => "/workspace",
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+// The composer's model selector is irrelevant to stop gating; keep the
+// react-query + network machinery out of the way entirely.
+rs.mock("@/core/models/hooks", () => ({
+  useModels: () => ({
+    models: [],
+    tokenUsageEnabled: false,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: rs.fn(),
+  }),
+}));
+
+function getSubmitButton(container: HTMLElement): HTMLButtonElement {
+  const button = container.querySelector('button[type="submit"]');
+  if (!(button instanceof HTMLButtonElement)) {
+    throw new Error("submit button not rendered");
+  }
+  return button;
+}
+
+function renderComposer({
+  canStopStreaming,
+  onStop,
+}: {
+  canStopStreaming?: boolean;
+  onStop: () => void;
+}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  const tree = (onStopProp: () => void): ReactNode => (
+    <I18nProvider initialLocale={DEFAULT_LOCALE}>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider
+          initialUser={{
+            id: "user-1",
+            email: "user@example.test",
+            system_role: "user",
+            needs_setup: false,
+            oauth_provider: null,
+          }}
+        >
+          <ThreadContext.Provider
+            value={{ thread: { messages: [] } as never, isMock: true }}
+          >
+            <PromptInputProvider>
+              <InputBox
+                threadId="thread-1"
+                status="streaming"
+                context={{ mode: "flash" } as never}
+                onStop={onStopProp}
+                canStopStreaming={canStopStreaming}
+              />
+            </PromptInputProvider>
+          </ThreadContext.Provider>
+        </AuthProvider>
+      </QueryClientProvider>
+    </I18nProvider>
+  );
+  return render(tree(onStop));
+}
+
+afterEach(() => {
+  rs.restoreAllMocks();
+  cleanup();
+});
+
+describe("InputBox stop gating (runs:cancel)", () => {
+  it("disables the stop affordance for a denied role and never fires onStop", () => {
+    const onStop = rs.fn();
+    const { container } = renderComposer({ canStopStreaming: false, onStop });
+
+    const submit = getSubmitButton(container);
+    expect(submit.disabled).toBe(true);
+
+    fireEvent.click(submit);
+    expect(onStop).not.toHaveBeenCalled();
+  });
+
+  it("explains the permission boundary on the disabled affordance", () => {
+    const { container } = renderComposer({
+      canStopStreaming: false,
+      onStop: rs.fn(),
+    });
+
+    const submit = getSubmitButton(container);
+    expect(submit.getAttribute("aria-label")).toContain("not permitted");
+    expect(submit.title).toContain("not permitted");
+  });
+
+  it("keeps stop enabled for an unresolved permission list (default)", () => {
+    const onStop = rs.fn();
+    const { container } = renderComposer({ onStop });
+
+    const submit = getSubmitButton(container);
+    expect(submit.disabled).toBe(false);
+
+    fireEvent.click(submit);
+    expect(onStop).toHaveBeenCalledTimes(1);
+  });
+
+  it("keeps the base Submit accessible name when stop is not denied", () => {
+    // Regression: passing an explicitly-undefined aria-label clobbered
+    // PromptInputSubmit's default aria-label="Submit" via JSX spread,
+    // stripping the submit control's accessible name in every
+    // non-denied state (e2e locates the button by that name). Query by
+    // role + name so the assertion resolves the accessible name the
+    // same way e2e and assistive tech do, not via the raw attribute.
+    renderComposer({ onStop: rs.fn() });
+
+    // getByRole throws when no button exposes the "Submit" accessible
+    // name, which is exactly the regression being guarded.
+    const submit = screen.getByRole("button", { name: "Submit" });
+    expect(submit.tagName).toBe("BUTTON");
+  });
+});
diff --git a/frontend/tests/unit/components/workspace/sidecar-delete-gating.dom.test.tsx b/frontend/tests/unit/components/workspace/sidecar-delete-gating.dom.test.tsx
new file mode 100644
index 000000000..0f3f28646
--- /dev/null
+++ b/frontend/tests/unit/components/workspace/sidecar-delete-gating.dom.test.tsx
@@ -0,0 +1,148 @@
+import { afterEach, describe, expect, it, rs } from "@rstest/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { cleanup, render, screen, waitFor } from "@testing-library/react";
+import { useEffect, type ReactNode } from "react";
+
+import { ThreadContext } from "@/components/workspace/messages/context";
+import {
+  SidecarProvider,
+  useSidecar,
+} from "@/components/workspace/sidecar/context";
+import { SidecarPanel } from "@/components/workspace/sidecar/sidecar-panel";
+import { AuthProvider, useAuth } from "@/core/auth/AuthProvider";
+import type { User } from "@/core/auth/types";
+import { DEFAULT_LOCALE } from "@/core/i18n";
+import { I18nProvider } from "@/core/i18n/context";
+
+// AuthProvider and the panel both reach into next/navigation. Keep it inert
+// under happy-dom (banner-test pattern).
+rs.mock("next/navigation", () => ({
+  useRouter: () => ({ push: rs.fn(), replace: rs.fn(), refresh: rs.fn() }),
+  usePathname: () => "/workspace",
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+// The panel's model list is irrelevant to the delete-button gating; keep the
+// react-query machinery out of the way entirely.
+rs.mock("@/core/models/hooks", () => ({
+  useModels: () => ({
+    models: [],
+    tokenUsageEnabled: false,
+    isLoading: false,
+    isFetching: false,
+    error: null,
+    refetch: rs.fn(),
+  }),
+}));
+
+function makeUser(permissions: string[] | null | undefined): User {
+  return {
+    id: "user-1",
+    email: "user@example.test",
+    system_role: "user",
+    needs_setup: false,
+    oauth_provider: null,
+    ...(permissions === undefined ? {} : { permissions }),
+  } as User;
+}
+
+/** Sets the provider's sidecarThreadId so the panel switches out of its
+ * empty state — the delete button only renders for a live sidecar thread. */
+function SidecarThreadProbe() {
+  const sidecar = useSidecar();
+  useEffect(() => {
+    sidecar.setSidecarThreadId("sidecar-thread-1");
+  }, [sidecar]);
+  return null;
+}
+
+/** Replaces the authenticated user in place via the auth context. */
+function FlipUserProbe({ to }: { to: User }) {
+  const { applyUser } = useAuth();
+  useEffect(() => {
+    applyUser(to);
+  }, [applyUser, to]);
+  return null;
+}
+
+function buildTree(
+  initialUser: User,
+  {
+    withFlip = false,
+    flipTo = makeUser(["threads:read"]),
+    queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    }),
+  } = {},
+): ReactNode {
+  return (
+    <I18nProvider initialLocale={DEFAULT_LOCALE}>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider initialUser={initialUser}>
+          {withFlip && <FlipUserProbe to={flipTo} />}
+          <ThreadContext.Provider
+            value={{ thread: { messages: [] } as never, isMock: true }}
+          >
+            <SidecarProvider
+              parentThreadId="parent-1"
+              isMock
+              context={{ thread_id: "parent-1" } as never}
+            >
+              <SidecarThreadProbe />
+              <SidecarPanel />
+            </SidecarProvider>
+          </ThreadContext.Provider>
+        </AuthProvider>
+      </QueryClientProvider>
+    </I18nProvider>
+  );
+}
+
+afterEach(() => {
+  rs.restoreAllMocks();
+  cleanup();
+});
+
+describe("SidecarPanel delete-button permission gating", () => {
+  it("renders the delete button for a role holding threads:delete", async () => {
+    render(buildTree(makeUser(["threads:read", "threads:delete"])));
+    expect(await screen.findByTestId("sidecar-delete-button")).not.toBeNull();
+  });
+
+  it("keeps the delete button for an unresolved permission list (pre-Phase-4 backend)", async () => {
+    render(buildTree(makeUser(undefined)));
+    expect(await screen.findByTestId("sidecar-delete-button")).not.toBeNull();
+  });
+
+  it("hides the delete button once the resolved list denies threads:delete", async () => {
+    // Anchor on presence first, then flip only the permission list in place —
+    // the disappearance is then provably caused by the gating, not by the
+    // sidecar thread never mounting. The shared queryClient keeps the rerender
+    // a true in-place update rather than a provider remount.
+    const queryClient = new QueryClient({
+      defaultOptions: {
+        queries: { retry: false },
+        mutations: { retry: false },
+      },
+    });
+    const { rerender } = render(
+      buildTree(makeUser(["threads:delete"]), { queryClient }),
+    );
+    expect(await screen.findByTestId("sidecar-delete-button")).not.toBeNull();
+
+    rerender(
+      buildTree(makeUser(["threads:delete"]), {
+        withFlip: true,
+        flipTo: makeUser(["threads:read"]),
+        queryClient,
+      }),
+    );
+
+    await waitFor(() => {
+      expect(screen.queryByTestId("sidecar-delete-button")).toBeNull();
+    });
+  });
+});
diff --git a/frontend/tests/unit/components/workspace/thread-sidebar-item-delete-gating.dom.test.tsx b/frontend/tests/unit/components/workspace/thread-sidebar-item-delete-gating.dom.test.tsx
new file mode 100644
index 000000000..68ed68e2d
--- /dev/null
+++ b/frontend/tests/unit/components/workspace/thread-sidebar-item-delete-gating.dom.test.tsx
@@ -0,0 +1,98 @@
+import { afterEach, describe, expect, it, rs } from "@rstest/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import type { ReactNode } from "react";
+
+import { SidebarProvider } from "@/components/ui/sidebar";
+import { ThreadSidebarItem } from "@/components/workspace/recent-chat-list";
+import { AuthProvider } from "@/core/auth/AuthProvider";
+import type { User } from "@/core/auth/types";
+import { DEFAULT_LOCALE } from "@/core/i18n";
+import { I18nProvider } from "@/core/i18n/context";
+
+rs.mock("next/navigation", () => ({
+  useRouter: () => ({ push: rs.fn(), replace: rs.fn(), refresh: rs.fn() }),
+  usePathname: () => "/workspace",
+  useSearchParams: () => new URLSearchParams(),
+  useParams: () => ({}),
+}));
+
+function makeUser(permissions: string[] | undefined): User {
+  return {
+    id: "user-1",
+    email: "user@example.test",
+    system_role: "user",
+    ...(permissions === undefined ? {} : { permissions }),
+  } as User;
+}
+
+function makeThread() {
+  return {
+    thread_id: "thread-1",
+    title: "A thread",
+    updated_at: "2026-01-01T00:00:00Z",
+  } as never;
+}
+
+function renderItem(user: User): ReturnType<typeof render> {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false }, mutations: { retry: false } },
+  });
+  const tree: ReactNode = (
+    <I18nProvider initialLocale={DEFAULT_LOCALE}>
+      <QueryClientProvider client={queryClient}>
+        <AuthProvider initialUser={user}>
+          <SidebarProvider>
+            <ThreadSidebarItem thread={makeThread()} isActive={false} />
+          </SidebarProvider>
+        </AuthProvider>
+      </QueryClientProvider>
+    </I18nProvider>
+  );
+  return render(tree);
+}
+
+/** Opens the row's "more" dropdown — the Delete item lives inside it.
+ * Radix triggers open on pointerdown, not click (verified in happy-dom). */
+async function openRowMenu(): Promise<void> {
+  const trigger = await screen.findByRole("button", { name: /more/i });
+  fireEvent.pointerDown(trigger, { button: 0, pointerType: "mouse" });
+  fireEvent.click(trigger);
+}
+
+afterEach(() => {
+  rs.restoreAllMocks();
+  cleanup();
+});
+
+describe("ThreadSidebarItem delete-menu gating (threads:delete)", () => {
+  it("offers Delete for a role holding threads:delete", async () => {
+    renderItem(makeUser(["threads:read", "threads:delete"]));
+    await openRowMenu();
+    expect(await screen.findByText("Delete")).not.toBeNull();
+  });
+
+  it("omits Delete for a role denied threads:delete, keeping the other menu actions", async () => {
+    renderItem(makeUser(["threads:read"]));
+    await openRowMenu();
+    // Other actions survive the gating…
+    expect(await screen.findByText("Rename")).not.toBeNull();
+    // …and Delete is gone. Anchor via waitFor on Rename first so the menu is
+    // provably open before asserting absence.
+    await waitFor(() => {
+      expect(screen.queryByText("Delete")).toBeNull();
+    });
+  });
+
+  it("offers Delete for an unresolved permission list (pre-Phase-4 backend)", async () => {
+    renderItem(makeUser(undefined));
+    await openRowMenu();
+    expect(await screen.findByText("Delete")).not.toBeNull();
+  });
+});
diff --git a/frontend/tests/unit/core/auth/permissions.test.ts b/frontend/tests/unit/core/auth/permissions.test.ts
new file mode 100644
index 000000000..b507c3155
--- /dev/null
+++ b/frontend/tests/unit/core/auth/permissions.test.ts
@@ -0,0 +1,70 @@
+import { describe, expect, it } from "@rstest/core";
+
+import { hasPermission, PERMISSIONS } from "@/core/auth/permissions";
+import { userSchema } from "@/core/auth/types";
+
+describe("hasPermission", () => {
+  it("grants a permission present in the resolved list", () => {
+    expect(
+      hasPermission(
+        { permissions: ["threads:read", "threads:delete"] },
+        PERMISSIONS.THREADS_DELETE,
+      ),
+    ).toBe(true);
+  });
+
+  it("denies a permission absent from the resolved list", () => {
+    expect(
+      hasPermission(
+        { permissions: ["threads:read"] },
+        PERMISSIONS.THREADS_DELETE,
+      ),
+    ).toBe(false);
+  });
+
+  it("treats an absent permissions field as permissive (pre-Phase-4 backend)", () => {
+    // A mixed old-backend/new-frontend deploy must not hide actions the
+    // caller can still perform — the Gateway route guards stay the
+    // enforcement point, the UI field is advisory only.
+    expect(hasPermission({}, PERMISSIONS.RUNS_CANCEL)).toBe(true);
+  });
+
+  it("treats a null permissions field as permissive", () => {
+    // Credential-creation responses (register/initialize) serialize null;
+    // they never advertise an empty grant set.
+    expect(hasPermission({ permissions: null }, PERMISSIONS.RUNS_CANCEL)).toBe(
+      true,
+    );
+  });
+
+  it("treats a not-yet-loaded user as permissive", () => {
+    expect(hasPermission(null, PERMISSIONS.THREADS_DELETE)).toBe(true);
+    expect(hasPermission(undefined, PERMISSIONS.THREADS_DELETE)).toBe(true);
+  });
+});
+
+describe("userSchema permissions field", () => {
+  const baseUser = {
+    id: "user-1",
+    email: "user@example.test",
+    system_role: "user" as const,
+  };
+
+  it("parses a /me payload that carries effective permissions", () => {
+    const parsed = userSchema.parse({
+      ...baseUser,
+      permissions: ["threads:read", "runs:cancel"],
+    });
+    expect(parsed.permissions).toEqual(["threads:read", "runs:cancel"]);
+  });
+
+  it("parses a /me payload from a pre-Phase-4 backend (field absent)", () => {
+    const parsed = userSchema.parse(baseUser);
+    expect(parsed.permissions).toBeUndefined();
+  });
+
+  it("parses a credential-creation payload that carries null", () => {
+    const parsed = userSchema.parse({ ...baseUser, permissions: null });
+    expect(parsed.permissions).toBeNull();
+  });
+});