Compact automation filter menus

apps/app/src/components/plugin/PluginsOverview.test.tsx

@@ -552,8 +552,12 @@ describe("PluginsOverview", () => {
     expect(officialPills[0]?.parentElement?.className).toContain("px-2");
     expect(officialPills[0]?.parentElement?.className).toContain("py-1");
 
-    fireEvent.pointerDown(screen.getByRole("button", { name: "Sort" }));
-    fireEvent.click(screen.getByRole("menuitem", { name: "Plugin name" }));
+    const sortTrigger = screen.getByRole("button", {
+      name: "Sort: Plugin name, ascending",
+    });
+    expect(sortTrigger.querySelector('[data-icon="ArrowUpDown"]')).toBeTruthy();
+    fireEvent.pointerDown(sortTrigger);
+    fireEvent.click(screen.getByRole("menuitemradio", { name: "Plugin name" }));
     expect(
       [...document.querySelectorAll('[data-testid^="plugin-row-"]')].map(
         (row) => row.getAttribute("data-testid"),
@@ -566,9 +570,12 @@ describe("PluginsOverview", () => {
       "plugin-row-inactive-local",
     ]);
 
-    fireEvent.keyDown(screen.getByRole("menu", { name: "Sort" }), {
-      key: "Escape",
-    });
+    fireEvent.keyDown(
+      screen.getByRole("menu", {
+        name: "Sort: Plugin name, descending",
+      }),
+      { key: "Escape" },
+    );
     fireEvent.click(screen.getByRole("tab", { name: "Browse" }));
     await screen.findByText("GitHub");
     fireEvent.click(screen.getByRole("tab", { name: "Installed, 5 plugins" }));

apps/app/src/components/plugin/management/BrowsePluginsTab.test.tsx

@@ -125,8 +125,12 @@ describe("BrowsePluginsTab", () => {
       "Open Zulu details",
     ]);
 
-    fireEvent.pointerDown(screen.getByRole("button", { name: "Sort" }));
-    fireEvent.click(screen.getByRole("menuitem", { name: "Plugin name" }));
+    const sortTrigger = screen.getByRole("button", {
+      name: "Sort: Plugin name, ascending",
+    });
+    expect(sortTrigger.querySelector('[data-icon="ArrowUpDown"]')).toBeTruthy();
+    fireEvent.pointerDown(sortTrigger);
+    fireEvent.click(screen.getByRole("menuitemradio", { name: "Plugin name" }));
     expect(cardOrder()).toEqual([
       "Open Zulu details",
       "Open Middle details",
@@ -362,7 +366,17 @@ describe("BrowsePluginsTab", () => {
     expect(installed.querySelector('[data-icon="Check"]')).toBeNull();
     expect(installed.className).toContain("border-success/40");
     expect(installed.className).toContain("bg-success/15");
-    expect(installed.className).toContain("text-success-foreground");
+    expect(installed.className).toContain(
+      "text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))]",
+    );
+    expect(installed.className).not.toContain("text-success-foreground");
+    expect(installed.className).toContain(
+      "hover:text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))]",
+    );
+    expect(installed.className).toContain(
+      "focus-visible:text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))]",
+    );
+    expect(installed.className).not.toContain("hover:text-foreground");
     expect(installed.className).toContain("hover:bg-success/25");
     expect(screen.queryByRole("button", { name: "Install" })).toBeNull();
     fireEvent.click(installed);

apps/app/src/components/plugin/management/BrowsePluginsTab.tsx

@@ -197,7 +197,7 @@ function BrowseCard({
         pending={uninstall.isPending}
         presentation="icon"
         tooltip={`Uninstall ${entry.displayName}`}
-        className="border-success/40 bg-success/15 text-success-foreground hover:border-success/55 hover:bg-success/25 hover:text-success-foreground focus-visible:border-success/55 focus-visible:bg-success/25 focus-visible:text-success-foreground"
+        className="border-success/40 bg-success/15 text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))] hover:border-success/55 hover:bg-success/25 hover:text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))] focus-visible:border-success/55 focus-visible:bg-success/25 focus-visible:text-[color:color-mix(in_oklab,var(--success)_72%,var(--ink))]"
         onAction={() => setConfirmingUninstall(true)}
       />
     ) : (

apps/app/src/components/secondary-panel/SecondaryPanelTabStrip.test.ts

@@ -1,29 +1,90 @@
+// @vitest-environment jsdom
+
+import { act, cleanup, render } from "@testing-library/react";
+import { createElement } from "react";
+import { afterEach, vi } from "vitest";
 import { describe, expect, it } from "vitest";
 import {
-  getTabStripChevronEdgeClass,
-  getTabStripChevronVisibilityClass,
+  SecondaryPanelTabStrip,
   SECONDARY_PANEL_TAB_STRIP_FADE_TONE,
 } from "./SecondaryPanelTabStrip";
 
+afterEach(() => {
+  cleanup();
+  vi.unstubAllGlobals();
+});
+
 describe("secondary panel tab-strip edge fades", () => {
-  it("uses one opaque themed edge fade and no second caret gradient", () => {
+  it("uses the themed edge fade without overlay scroll controls", () => {
     expect(SECONDARY_PANEL_TAB_STRIP_FADE_TONE).toBe("sidebar");
-    expect(getTabStripChevronEdgeClass("left")).toBe(
-      "left-0 justify-start",
-    );
-    expect(getTabStripChevronEdgeClass("right")).toBe(
-      "right-0 justify-end",
-    );
   });
 
-  it("keeps an available scroll control visible without requiring hover", () => {
-    const visibleClass = getTabStripChevronVisibilityClass(true);
+  it("observes the intrinsic tab row so async title changes refresh overflow", () => {
+    const observed: Element[] = [];
+    let resizeCallback: ResizeObserverCallback | undefined;
+    vi.stubGlobal(
+      "ResizeObserver",
+      class {
+        constructor(callback: ResizeObserverCallback) {
+          resizeCallback = callback;
+        }
+        observe(element: Element) {
+          observed.push(element);
+        }
+        disconnect() {}
+      },
+    );
+
+    const { container } = render(
+      createElement(SecondaryPanelTabStrip, {
+        fileTabs: [
+          {
+            id: "browser",
+            filename: "Browser",
+            isActive: true,
+            isPinned: false,
+            leadingVisual: null,
+            statusLabel: null,
+            onSelect: vi.fn(),
+            onClose: vi.fn(),
+          },
+        ],
+        onReorderTab: vi.fn(),
+        usesDesktopChrome: false,
+      }),
+    );
 
-    expect(visibleClass).toContain("pointer-events-auto");
-    expect(visibleClass).toContain("opacity-100");
-    expect(visibleClass).not.toContain("hover:");
-    expect(getTabStripChevronVisibilityClass(false)).toBe(
-      "pointer-events-none opacity-0",
+    const viewport = container.querySelector(".no-scrollbar");
+    const content = container.querySelector(
+      "[data-secondary-panel-tab-content]",
     );
+    expect(content).not.toBeNull();
+    expect(observed).toContain(viewport);
+    expect(observed).toContain(content);
+    expect(resizeCallback).toBeDefined();
+    expect(container.querySelectorAll("[data-overflow-fade]")).toHaveLength(2);
+    expect(
+      container
+        .querySelector("[data-overflow-fade='left']")
+        ?.classList.contains("w-6"),
+    ).toBe(true);
+    expect(
+      container.querySelector('[aria-label="Scroll tabs left"]'),
+    ).toBeNull();
+    expect(
+      container.querySelector('[aria-label="Scroll tabs right"]'),
+    ).toBeNull();
+
+    const rightFade = container.querySelector("[data-overflow-fade='right']");
+    expect(rightFade?.classList.contains("opacity-0")).toBe(true);
+    Object.defineProperties(viewport!, {
+      clientWidth: { configurable: true, value: 120 },
+      scrollWidth: { configurable: true, value: 240 },
+      scrollLeft: { configurable: true, value: 0, writable: true },
+    });
+    act(() => {
+      resizeCallback?.([], {} as ResizeObserver);
+    });
+    expect(rightFade?.classList.contains("opacity-100")).toBe(true);
   });
 });