Reduce plugin capability name size

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

@@ -270,6 +270,9 @@ describe("PluginsOverview", () => {
     });
     expect(filters.className).toContain("py-2");
     expect(filters.className).toContain("gap-2");
+    expect(all.className).toContain("cursor-pointer");
+    expect(all.className).toContain("hover:border-foreground/20");
+    expect(all.className).toContain("hover:shadow-xs");
     expect(all.className).toContain("data-[state=on]:bg-secondary/70");
     expect(all.className).not.toContain("data-[state=on]:bg-state-active");
     expect(screen.getByRole("tab", { name: "Browse" }).className).toContain(
@@ -549,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"),
@@ -563,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",
@@ -239,6 +243,15 @@ describe("BrowsePluginsTab", () => {
       .closest(".group");
     expect(githubCard?.className).toContain("min-h-20");
     expect(githubCard?.className).toContain("p-2.5");
+    const memoryDescriptions = screen.getAllByText(MEMORY_ENTRY.description);
+    const githubDescription = screen.getByText(GITHUB_ENTRY.description);
+    for (const memoryDescription of memoryDescriptions) {
+      expect(memoryDescription.className).toContain("min-h-[2lh]");
+      expect(memoryDescription.parentElement?.className).toContain(
+        "line-clamp-2",
+      );
+    }
+    expect(githubDescription.className).toContain("min-h-[2lh]");
     expect(
       screen.getByRole("radio", { name: "Context & knowledge" }),
     ).toBeTruthy();
@@ -260,6 +273,7 @@ describe("BrowsePluginsTab", () => {
 
     const install = screen.getByRole("button", { name: "Install Memory" });
     expect(install.className).toContain("w-7");
+    expect(install.querySelector('[data-icon="Download"]')).not.toBeNull();
     fireEvent.pointerMove(install);
     expect((await screen.findByRole("tooltip")).textContent).toBe(
       "Install Memory",
@@ -348,8 +362,28 @@ describe("BrowsePluginsTab", () => {
     expect((await screen.findByRole("tooltip")).textContent).toBe(
       "Uninstall Memory",
     );
-    expect(document.querySelector('[data-icon="Check"]')).not.toBeNull();
+    expect(installed.querySelector('[data-icon="Download"]')).not.toBeNull();
+    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-[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);
+    expect(
+      screen.getByRole("heading", { name: "Uninstall Memory?" }),
+    ).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Cancel" }));
 
     fireEvent.click(
       screen.getByRole("button", { name: "Open Memory details" }),

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

@@ -6,7 +6,6 @@ import {
   ResourceBrowseGrid,
   ResourceCollectionViewport,
   ResourceInstallControl,
-  ResourceInstalledControl,
   ResourceListState,
   ResourceSortMenu,
   ResourceToolbar,
@@ -184,17 +183,21 @@ function BrowseCard({
   );
   const description =
     entry.description.length > 0 ? entry.description : undefined;
+  const descriptionArea = (
+    <span className="block min-h-[2lh]">{description}</span>
+  );
   const byline =
     !entry.compatible && entry.incompatibleReason !== null ? (
       <span className="text-warning-text">{entry.incompatibleReason}</span>
     ) : undefined;
   const headerAction =
     installedPluginId !== null ? (
-      <ResourceInstalledControl
+      <ResourceInstallControl
         accessibleLabel={`Uninstall ${entry.displayName}`}
         pending={uninstall.isPending}
         presentation="icon"
         tooltip={`Uninstall ${entry.displayName}`}
+        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)}
       />
     ) : (
@@ -219,7 +222,7 @@ function BrowseCard({
         className="min-h-20 gap-x-2 gap-y-1.5 p-2.5"
         leading={leading}
         title={entry.displayName}
-        description={description}
+        description={descriptionArea}
         byline={byline}
         headerAction={headerAction}
         openLabel={`Open ${entry.displayName} details`}

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

@@ -1,6 +1,8 @@
 import { ToggleGroup, ToggleGroupItem } from "@bb/shared-ui/toggle-group";
 
 const ALL_CATEGORIES = "all";
+const CATEGORY_FILTER_CLASS =
+  "h-7 min-w-0 cursor-pointer rounded-full border border-border bg-transparent px-3 text-xs text-muted-foreground shadow-none transition-[background-color,border-color,box-shadow,color] duration-150 hover:border-foreground/20 hover:bg-secondary/50 hover:text-foreground hover:shadow-xs data-[state=on]:border-transparent data-[state=on]:bg-secondary/70 data-[state=on]:text-secondary-foreground";
 
 export function PluginCategoryFilterPills({
   categories,
@@ -27,15 +29,15 @@ export function PluginCategoryFilterPills({
       <ToggleGroupItem
         value={ALL_CATEGORIES}
         aria-label="Show all plugin categories"
-        className="h-7 min-w-0 rounded-full border border-border bg-transparent px-3 text-xs text-muted-foreground shadow-none hover:bg-secondary/50 hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-secondary/70 data-[state=on]:text-secondary-foreground"
+        className={CATEGORY_FILTER_CLASS}
       >
         All
       </ToggleGroupItem>
       {categories.map((category) => (
         <ToggleGroupItem
           key={category}
           value={category}
-          className="h-7 min-w-0 rounded-full border border-border bg-transparent px-3 text-xs text-muted-foreground shadow-none hover:bg-secondary/50 hover:text-foreground data-[state=on]:border-transparent data-[state=on]:bg-secondary/70 data-[state=on]:text-secondary-foreground"
+          className={CATEGORY_FILTER_CLASS}
         >
           {category}
         </ToggleGroupItem>

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);
   });
 });