Add plugin row actions and detail tabs; fix disable navigation and mobile sidebar access

apps/app/src/components/layout/AppLayout.plugin-panel-header.test.tsx

@@ -210,17 +210,22 @@ describe("AppLayout plugin panel header", () => {
     ).toBe(true);
   });
 
-  it("shows the fixed left trigger only while the compact right panel is closed", () => {
+  it("keeps the fixed left trigger above compact panels", () => {
     viewportState.compact = true;
     renderPluginPanelRoute();
 
     const trigger = screen.getByTestId("app-sidebar-trigger-overlay");
-    expect(trigger.style.zIndex).toBe(String(APP_OVERLAY_LAYER.sidebarTrigger));
+    expect(trigger.style.zIndex).toBe(
+      String(APP_OVERLAY_LAYER.compactSidebarTrigger),
+    );
+    expect(Number(trigger.style.zIndex)).toBeGreaterThan(
+      APP_OVERLAY_LAYER.secondaryPanelFullPage,
+    );
     act(() => setCompactSecondaryPanelPresentation("shelf"));
-    expect(screen.queryByTestId("app-sidebar-trigger-overlay")).toBeNull();
+    expect(screen.getByTestId("app-sidebar-trigger-overlay")).toBe(trigger);
 
     act(() => setCompactSecondaryPanelPresentation("full"));
-    expect(screen.queryByTestId("app-sidebar-trigger-overlay")).toBeNull();
+    expect(screen.getByTestId("app-sidebar-trigger-overlay")).toBe(trigger);
 
     act(() => setCompactSecondaryPanelPresentation("closed"));
     expect(screen.getByTestId("app-sidebar-trigger-overlay")).not.toBeNull();

apps/app/src/components/layout/AppLayout.test.tsx

@@ -15,6 +15,8 @@ import { Link, MemoryRouter, useLocation } from "react-router-dom";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { AppCommandProvider } from "@/components/commands/AppCommandProvider";
 import { AppLayout } from "./AppLayout";
+import { CompactViewportOverrideProvider } from "@bb/shared-ui/hooks/use-compact-viewport";
+import { setCompactSecondaryPanelPresentation } from "@/components/ui/secondary-panel-shelf-visibility";
 
 const SIDEBAR_WIDTH_STORAGE_KEY = "bb.sidebar.width";
 const APP_ROUTE = "/projects/proj_one/threads/thr_one?message=12#event-12";
@@ -198,10 +200,48 @@ beforeEach(() => {
 
 afterEach(() => {
   cleanup();
+  setCompactSecondaryPanelPresentation("closed");
   vi.restoreAllMocks();
   window.localStorage.clear();
 });
 
+describe("mobile workspace sidebar access", () => {
+  it.each([
+    "/plugins",
+    "/plugins/plugin-api-docs",
+    "/plugins/plugin-api-docs/plugin-api",
+    "/settings",
+    "/skills",
+  ])(
+    "opens and collapses the sidebar on %s with a full detail panel",
+    async (route) => {
+      setCompactSecondaryPanelPresentation("full");
+      render(
+        <CompactViewportOverrideProvider isCompactViewport>
+          <MemoryRouter initialEntries={[route]}>
+            <AppCommandProvider>
+              <AppLayout>
+                <div>Workspace content</div>
+              </AppLayout>
+            </AppCommandProvider>
+          </MemoryRouter>
+        </CompactViewportOverrideProvider>,
+      );
+      const toggle = screen.getByRole("button", { name: /^Toggle sidebar/ });
+      expect(toggle.getAttribute("aria-expanded")).toBe("false");
+      fireEvent.click(toggle);
+      await waitFor(() =>
+        expect(toggle.getAttribute("aria-expanded")).toBe("true"),
+      );
+      fireEvent.click(toggle);
+      await waitFor(() =>
+        expect(toggle.getAttribute("aria-expanded")).toBe("false"),
+      );
+      expect(getRoot().hasAttribute("inert")).toBe(false);
+    },
+  );
+});
+
 describe("AppLayout Back to app", () => {
   it.each(SECONDARY_ROUTES)(
     "returns from %s with the remembered query and hash, then releases Escape",

apps/app/src/components/layout/AppLayout.tsx

@@ -1,12 +1,5 @@
 import { type MouseEvent as ReactMouseEvent, type ReactNode } from "react";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-  useSyncExternalStore,
-} from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { atom, useAtom, useAtomValue, useStore } from "jotai";
 import { atomWithStorage } from "jotai/utils";
@@ -48,10 +41,6 @@ import { useRouteState } from "@/hooks/useRouteState";
 import { getThreadDisplayTitle } from "@/lib/thread-title";
 import { cn } from "@bb/shared-ui/lib/utils";
 import { APP_OVERLAY_LAYER } from "@/components/ui/app-overlay-layers";
-import {
-  getCompactSecondaryPanelPresentation,
-  subscribeCompactSecondaryPanelShelfShowing,
-} from "@/components/ui/secondary-panel-shelf-visibility";
 import { ProjectPathDialog } from "@/components/dialogs/ProjectPathDialog";
 import { ProjectActionsMenu } from "@/components/project/ProjectActionsMenu";
 import { ProjectActionsProvider } from "@/components/project/ProjectActionsProvider";
@@ -208,15 +197,7 @@ function SidebarTriggerOverlay({
   usesDesktopChrome,
 }: SidebarTriggerOverlayProps) {
   const isCompactViewport = useIsCompactViewport();
-  const compactSecondaryPanelPresentation = useSyncExternalStore(
-    subscribeCompactSecondaryPanelShelfShowing,
-    getCompactSecondaryPanelPresentation,
-    () => "closed",
-  );
   const shortcut = useAppCommandShortcut("sidebar.toggle");
-  if (isCompactViewport && compactSecondaryPanelPresentation !== "closed") {
-    return null;
-  }
   const triggerProps = {
     "aria-label": shortcut
       ? `Toggle sidebar (${shortcut.label})`
@@ -256,7 +237,11 @@ function SidebarTriggerOverlay({
   return (
     <div
       data-testid="app-sidebar-trigger-overlay"
-      style={{ zIndex: APP_OVERLAY_LAYER.sidebarTrigger }}
+      style={{
+        zIndex: isCompactViewport
+          ? APP_OVERLAY_LAYER.compactSidebarTrigger
+          : APP_OVERLAY_LAYER.sidebarTrigger,
+      }}
       className={cn(
         "fixed top-[env(safe-area-inset-top)] left-[env(safe-area-inset-left)]",
         CHROME_ROW_CLASS,