@nextclaw/ui 0.17.0 → 0.17.2

package/src/features/service-apps/components/service-app-list-item.tsx

@@ -7,6 +7,7 @@ import type {
 } from "@nextclaw/client-sdk";
 import {
   AlertTriangle,
+  Boxes,
   CheckCircle2,
   ChevronDown,
   CircleDashed,
@@ -51,6 +52,7 @@ export function ServiceAppListItem({
   isDiscovering,
   onActionsOpenChange,
   onDiscover,
+  onManagePackage,
   onDelete,
   onResetDelete,
   onRestart,
@@ -67,6 +69,7 @@ export function ServiceAppListItem({
   isDiscovering: boolean;
   onActionsOpenChange: (open: boolean) => void;
   onDiscover: (appId: string) => void;
+  onManagePackage: (packageId: string) => void;
   onDelete: (appId: string, purgeData: boolean, onSuccess: () => void) => void;
   onResetDelete: () => void;
   onRestart: (appId: string) => void;
@@ -76,10 +79,9 @@ export function ServiceAppListItem({
   const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
   const [isDiagnosticsOpen, setIsDiagnosticsOpen] = useState(false);
   const [purgeData, setPurgeData] = useState(false);
-  const canConnectAndDiscover =
-    app.status !== "starting" && app.status !== "stopped";
-  const canDisconnectRuntime =
-    app.status === "running" || app.status === "failed";
+  const canConnectAndDiscover = app.status !== "starting" && app.status !== "stopped";
+  const canDisconnectRuntime = app.status === "running" || app.status === "failed";
+  const managedPackageId = app.sourceKind === "package" ? app.packageId : undefined;
   const diagnostics = getServiceAppDiagnostics(app);
   const openDeleteDialog = () => {
     setIsMenuOpen(false);
@@ -87,7 +89,6 @@ export function ServiceAppListItem({
     onResetDelete();
     setIsDeleteDialogOpen(true);
   };
-
   return (
     <TooltipProvider delayDuration={250}>
       <section className="group bg-card transition-colors hover:bg-muted/25">
@@ -168,13 +169,24 @@ export function ServiceAppListItem({
                     onRestart(app.id);
                   }}
                 />
-                <ServiceAppMenuItem
-                  destructive
-                  disabled={deletePending}
-                  icon={Trash2}
-                  label={t("serviceAppsDelete")}
-                  onClick={openDeleteDialog}
-                />
+                {managedPackageId ? (
+                  <ServiceAppMenuItem
+                    icon={Boxes}
+                    label={t("serviceAppsManagePackage")}
+                    onClick={() => {
+                      setIsMenuOpen(false);
+                      onManagePackage(managedPackageId);
+                    }}
+                  />
+                ) : (
+                  <ServiceAppMenuItem
+                    destructive
+                    disabled={deletePending}
+                    icon={Trash2}
+                    label={t("serviceAppsDelete")}
+                    onClick={openDeleteDialog}
+                  />
+                )}
               </PopoverContent>
             </Popover>
           </div>
@@ -245,6 +257,7 @@ export function ServiceAppListItem({
           ) : null}
         </div>
 
+      {app.sourceKind !== "package" ? (
         <ServiceAppDeleteDialog
           appId={app.id}
           appTitle={app.title}
@@ -258,6 +271,7 @@ export function ServiceAppListItem({
           onOpenChange={setIsDeleteDialogOpen}
           onPurgeDataChange={setPurgeData}
         />
+      ) : null}
       </section>
     </TooltipProvider>
   );

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -27,7 +27,11 @@ import { t } from "@/shared/lib/i18n";
 
 type ServiceActionView = ServiceActionListView["actions"][number];
 
-export function ServiceAppsPanel() {
+export function ServiceAppsPanel({
+  onManagePackage,
+}: {
+  onManagePackage: (packageId: string) => void;
+}) {
   const serviceApps = useServiceApps();
   const appData = useAppData();
   const serviceActions = useServiceActions();
@@ -77,6 +81,7 @@ export function ServiceAppsPanel() {
   }
 
   const apps: ServiceAppRecordView[] = serviceApps.data?.entries ?? [];
+  const diagnostics = serviceApps.data?.diagnostics ?? [];
   const actions: ServiceActionView[] = serviceActions.data?.actions ?? [];
   const grants: ServiceActionGrantView[] =
     serviceActionGrants.data?.grants ?? [];
@@ -115,6 +120,22 @@ export function ServiceAppsPanel() {
         </TooltipProvider>
       </div>
 
+      {diagnostics.length > 0 ? (
+        <div
+          role="alert"
+          className="mx-3 mt-3 rounded-xl border border-destructive/20 bg-destructive/5 px-3 py-2.5 text-xs text-destructive sm:mx-4"
+        >
+          <div className="font-medium">{t("serviceAppsLoadFailed")}</div>
+          <ul className="mt-1 space-y-1">
+            {diagnostics.map((diagnostic) => (
+              <li key={diagnostic.stagedPath} className="break-words">
+                {diagnostic.appId}: {diagnostic.message}
+              </li>
+            ))}
+          </ul>
+        </div>
+      ) : null}
+
       {apps.length === 0 ? (
         <div className="flex flex-1 items-center justify-center px-6 py-8 text-center">
           <div className="w-full max-w-xs">
@@ -154,6 +175,7 @@ export function ServiceAppsPanel() {
                   }))
                 }
                 onDiscover={discover}
+                onManagePackage={onManagePackage}
                 onDelete={(appId, purgeData, onSuccess) => void deleteServiceApp.mutate(
                   { appId, purgeData },
                   { onSuccess },

package/src/shared/components/doc-browser/__tests__/doc-browser-tab-strip.test.tsx

@@ -0,0 +1,78 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { describe, expect, it, vi } from "vitest";
+import { DocBrowserTabStrip } from "@/shared/components/doc-browser/doc-browser-tab-strip";
+import type { DocBrowserTab } from "@/shared/components/doc-browser/doc-browser-context";
+
+const docsTab: DocBrowserTab = {
+  id: "docs",
+  kind: "docs",
+  title: "Docs",
+  currentUrl: "nextclaw://docs",
+  history: ["nextclaw://docs"],
+  historyIndex: 0,
+  navVersion: 0,
+};
+
+function renderTabStrip(tabs: DocBrowserTab[]) {
+  return render(
+    <DocBrowserTabStrip
+      tabs={tabs}
+      activeTabId={tabs[0]?.id ?? ""}
+      canGoBack={false}
+      canGoForward={false}
+      isDocked={true}
+      isFullscreen={false}
+      onGoBack={vi.fn()}
+      onGoForward={vi.fn()}
+      onOpenNewTab={vi.fn()}
+      onSetActiveTab={vi.fn()}
+      onCloseTab={vi.fn()}
+      onClose={vi.fn()}
+      onDragStart={vi.fn()}
+      onToggleMode={vi.fn()}
+    />,
+  );
+}
+
+describe("DocBrowserTabStrip", () => {
+  it("keeps content-sized tabs and renders each tab's own icon", () => {
+    renderTabStrip([
+      docsTab,
+      {
+        ...docsTab,
+        id: "marketplace",
+        kind: "content",
+        title: "Marketplace",
+        currentUrl: "nextclaw://marketplace",
+        dockIcon: { type: "url", url: "/marketplace-icon.png" },
+      },
+    ]);
+
+    expect(
+      screen.getByRole("button", { name: "Docs" })
+        .querySelector(".lucide-book-open"),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Marketplace" })
+        .querySelector('img[src="/marketplace-icon.png"]'),
+    ).toBeTruthy();
+
+    const marketplaceTab = screen.getByRole("button", { name: "Marketplace" })
+      .closest("[data-compact-tab-item]");
+    expect(marketplaceTab?.className).toContain("max-w-[220px]");
+    expect(marketplaceTab?.className).not.toContain("min-w-[");
+
+    fireEvent.error(
+      screen.getByRole("button", { name: "Marketplace" })
+        .querySelector('img[src="/marketplace-icon.png"]')!,
+    );
+    expect(
+      screen.getByRole("button", { name: "Marketplace" })
+        .querySelector(".lucide-app-window"),
+    ).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Marketplace" })
+        .querySelector("img"),
+    ).toBeNull();
+  });
+});

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -1,13 +1,18 @@
-import type { PointerEvent } from "react";
+import { useState, type PointerEvent } from "react";
 import {
+  AppWindow,
   ArrowLeft,
   ArrowRight,
+  BookOpen,
+  Boxes,
+  Github,
   PanelRightOpen,
   PictureInPicture2,
   Pin,
   PinOff,
   Plus,
   X,
+  type LucideIcon,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
 import type { ContextMenuGroup } from "@/shared/components/ui/context-menu/context-menu";
@@ -39,6 +44,68 @@ type DocBrowserTabStripProps = {
   getTabMenuGroups?: (tab: DocBrowserTab) => readonly ContextMenuGroup[] | undefined;
 };
 
+const DOC_BROWSER_BUILTIN_TAB_ICONS: Record<string, LucideIcon> = {
+  apps: Boxes,
+  docs: BookOpen,
+  github: Github,
+  "new-tab": Plus,
+  "panel-app": AppWindow,
+  "service-apps": AppWindow,
+};
+
+function DocBrowserUrlTabIcon({
+  fallbackIcon: FallbackIcon,
+  url,
+}: {
+  fallbackIcon: LucideIcon;
+  url: string;
+}) {
+  const [loadFailed, setLoadFailed] = useState(false);
+  return loadFailed ? (
+    <FallbackIcon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />
+  ) : (
+    <img
+      src={url}
+      alt=""
+      className="h-3.5 w-3.5 rounded-sm object-cover"
+      onError={() => setLoadFailed(true)}
+    />
+  );
+}
+
+function DocBrowserTabIcon({ tab }: { tab: DocBrowserTab }) {
+  const { dockIcon } = tab;
+  const fallbackIcon = tab.kind === "docs"
+    ? BookOpen
+    : tab.kind === "home"
+      ? Plus
+      : tab.kind === "apps"
+        ? Boxes
+        : AppWindow;
+  const Icon = dockIcon?.type === "builtin"
+    ? (DOC_BROWSER_BUILTIN_TAB_ICONS[dockIcon.name] ?? fallbackIcon)
+      : fallbackIcon;
+
+  if (dockIcon?.type === "url") {
+    return (
+      <DocBrowserUrlTabIcon
+        key={dockIcon.url}
+        fallbackIcon={fallbackIcon}
+        url={dockIcon.url}
+      />
+    );
+  }
+  if (dockIcon?.type === "text") {
+    return (
+      <span className="max-w-3.5 truncate text-[10px] font-semibold leading-none" aria-hidden="true">
+        {dockIcon.value}
+      </span>
+    );
+  }
+
+  return <Icon className="h-3.5 w-3.5 text-muted-foreground" aria-hidden="true" />;
+}
+
 function shouldBlockHeaderDrag(target: EventTarget | null): boolean {
   return target instanceof Element && Boolean(
     target.closest("button, a, input, textarea, select, [data-compact-tab-item]"),
@@ -80,8 +147,9 @@ export function DocBrowserTabStrip({
     label: tab.title || t("docBrowserTabUntitled"),
     active: tab.id === activeTabId,
     tooltip: tab.title,
+    leadingIcon: <DocBrowserTabIcon tab={tab} />,
     closeLabel: closeTabLabel,
-    closePlacement: "trailing",
+    closePlacement: "leading-hover",
     onSelect: () => onSetActiveTab(tab.id),
     onClose: () => onCloseTab(tab.id),
     menuLabel: t("docBrowserTabMoreActions"),
@@ -132,7 +200,7 @@ export function DocBrowserTabStrip({
       tabsClassName="items-center gap-0.5"
       actionsClassName="h-full items-center gap-0.5"
       actionButtonClassName="rounded-md p-1.5 text-muted-foreground hover:bg-muted/60 hover:text-foreground disabled:opacity-50"
-      tabBaseClassName="group inline-flex min-w-0 cursor-pointer items-center gap-0.5 h-7 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
+      tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
       activeTabClassName="bg-muted/80 text-foreground"
       inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"

package/src/shared/components/ui/tab-strip/__tests__/compact-tab-strip.test.tsx

@@ -113,7 +113,7 @@ describe("CompactTabStrip", () => {
             active: false,
             closeLabel: "Close preview",
             closePlacement: "leading-hover",
-            leadingIcon: <span />,
+            leadingIcon: <span data-testid="preview-tab-icon" />,
             onClose,
             onSelect,
           },
@@ -126,6 +126,83 @@ describe("CompactTabStrip", () => {
 
     expect(onClose).toHaveBeenCalledTimes(1);
     expect(onSelect).not.toHaveBeenCalled();
+    expect(
+      screen.getByTestId("preview-tab-icon").parentElement?.className,
+    ).toContain("group-hover:opacity-0");
+  });
+
+  it("overlays the close action at the start without changing the tab width on hover", () => {
+    render(
+      <CompactTabStrip
+        tabs={[
+          {
+            key: "marketplace",
+            label: "NextClaw Marketplace",
+            active: true,
+            closeLabel: "Close tab",
+            closePlacement: "leading-hover",
+            menuLabel: "More tab actions",
+            menuGroups: [{ key: "tab", items: [{ key: "close", label: "Close", onSelect: vi.fn() }] }],
+            onClose: vi.fn(),
+            onSelect: vi.fn(),
+          },
+        ]}
+        actions={[]}
+      />,
+    );
+
+    const tabItem = screen.getByRole("button", { name: "NextClaw Marketplace" })
+      .closest("[data-compact-tab-item]");
+    const leadingActions = tabItem?.querySelector(
+      '[data-compact-tab-leading-actions=""]',
+    );
+    const trailingActions = tabItem?.querySelector(
+      '[data-compact-tab-trailing-actions=""]',
+    );
+    const trailingSpacer = tabItem?.querySelector(
+      '[data-compact-tab-trailing-spacer=""]',
+    );
+    const leadingSlot = tabItem?.querySelector(
+      '[data-compact-tab-leading-slot=""]',
+    );
+
+    expect(tabItem?.className).toContain("relative");
+    expect(tabItem?.className).toContain("max-w-[180px]");
+    expect(tabItem?.className).not.toContain("min-w-[");
+    expect(leadingSlot?.className).toContain("w-3.5");
+    expect(leadingSlot?.className).toContain("shrink-0");
+    expect(leadingActions?.className).toContain("absolute");
+    expect(leadingActions?.className).toContain("left-1");
+    expect(leadingActions?.className).toContain("opacity-0");
+    expect(leadingActions?.className).toContain("pointer-events-none");
+    expect(leadingActions?.className).not.toContain("bg-inherit");
+    expect(leadingActions?.className).toContain("group-hover:opacity-100");
+    expect(leadingActions?.className).toContain("group-focus-within:opacity-100");
+    expect(trailingActions?.className).toContain("absolute");
+    expect(trailingActions?.className).toContain("opacity-0");
+    expect(trailingActions?.className).toContain("pointer-events-none");
+    expect(trailingActions?.className).not.toContain("bg-inherit");
+    expect(trailingActions?.className).toContain("group-hover:opacity-100");
+    expect(trailingActions?.className).toContain("group-focus-within:opacity-100");
+    expect(trailingActions?.className).not.toContain("w-0");
+    expect(trailingActions?.className).not.toContain("transition-[width");
+    expect(trailingSpacer?.className).toContain("w-6");
+    expect(trailingSpacer?.className).toContain("shrink-0");
+    const closeButton = leadingActions?.querySelector<HTMLButtonElement>(
+      '[aria-label="Close tab"]',
+    );
+    const menuButton = trailingActions?.querySelector<HTMLButtonElement>(
+      '[aria-label="More tab actions"]',
+    );
+    expect(closeButton).toBeTruthy();
+    expect(menuButton).toBeTruthy();
+    expect(closeButton?.className).toBe(menuButton?.className);
+    expect(closeButton?.className).toContain("h-6");
+    expect(closeButton?.className).toContain("w-6");
+    expect(closeButton?.className).toContain("rounded-md");
+    expect(
+      trailingActions?.querySelector('[aria-label="Close tab"]'),
+    ).toBeNull();
   });
 
   it("opens a tab action menu without selecting the tab or restoring stale focus after an action", async () => {

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -1,6 +1,9 @@
 import * as React from "react";
 import { MoreVertical, X } from "lucide-react";
-import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import {
+  IconActionButton,
+  type IconActionButtonProps,
+} from "@/shared/components/ui/actions/icon-action-button";
 import {
   ContextMenu,
   ContextMenuTrigger,
@@ -63,28 +66,94 @@ function closeCompactTab(event: React.MouseEvent<HTMLButtonElement>, onClose: ()
   onClose();
 }
 
+function CompactTabActionButton(props: IconActionButtonProps) {
+  return <IconActionButton {...props} size="sm" tone="strong" />;
+}
+
 function CompactTabMenu({ tab }: { tab: CompactTabStripTab }) {
   if (!tab.menuGroups?.some((group) => group.items.length > 0)) {
     return null;
   }
 
   const menuLabel = tab.menuLabel ?? tab.label;
+  return (
+    <div className="flex shrink-0">
+      <ContextMenuTrigger>
+        <CompactTabActionButton
+          icon={<MoreVertical className="h-3.5 w-3.5" />}
+          label={menuLabel}
+        />
+      </ContextMenuTrigger>
+    </div>
+  );
+}
+
+function CompactTabTrailingActions({ tab }: { tab: CompactTabStripTab }) {
+  const hasMenu = tab.menuGroups?.some((group) => group.items.length > 0) ?? false;
+  const hasTrailingClose = Boolean(
+    tab.onClose && tab.closePlacement !== "leading-hover",
+  );
+  const close = hasTrailingClose ? (
+    <CompactTabActionButton
+      icon={<X className="h-3.5 w-3.5" />}
+      label={tab.closeLabel ?? ""}
+      tooltip={tab.closeLabel ?? null}
+      onClick={(event) => closeCompactTab(event, tab.onClose!)}
+    />
+  ) : null;
+
+  if (!hasMenu && !hasTrailingClose) {
+    return null;
+  }
+
+  return (
+    <>
+      <span
+        aria-hidden="true"
+        data-compact-tab-trailing-spacer=""
+        className={cn(
+          "shrink-0",
+          hasMenu && hasTrailingClose
+            ? "w-[50px]"
+            : hasMenu
+              ? "w-6"
+              : "w-6",
+        )}
+      />
+      <div
+        data-compact-tab-trailing-actions=""
+        className={cn(
+          "pointer-events-none absolute inset-y-0 right-1 z-10 flex items-center gap-0.5 opacity-0",
+          "group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100",
+          "group-data-[context-menu-open]:pointer-events-auto group-data-[context-menu-open]:opacity-100",
+        )}
+      >
+        {hasMenu ? <CompactTabMenu tab={tab} /> : null}
+        {close}
+      </div>
+    </>
+  );
+}
+
+function CompactTabLeadingCloseOverlay({ tab }: { tab: CompactTabStripTab }) {
+  if (!tab.onClose || tab.closePlacement !== "leading-hover") {
+    return null;
+  }
+
   return (
     <div
+      data-compact-tab-leading-actions=""
       className={cn(
-        "-ml-1.5 flex w-0 shrink-0 overflow-hidden opacity-0 transition-[width,margin,opacity] group-hover:ml-0 group-hover:w-5 group-hover:opacity-100 group-focus-within:ml-0 group-focus-within:w-5 group-focus-within:opacity-100",
-        "group-data-[context-menu-open]:ml-0 group-data-[context-menu-open]:w-5 group-data-[context-menu-open]:opacity-100",
+        "pointer-events-none absolute inset-y-0 left-1 z-10 flex items-center opacity-0",
+        "group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100",
       )}
     >
-      <ContextMenuTrigger>
-        <button
-          type="button"
-          aria-label={menuLabel}
-          className="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700 focus-visible:bg-gray-200 focus-visible:text-gray-700 focus-visible:outline-none"
-        >
-          <MoreVertical className="h-3.5 w-3.5" />
-        </button>
-      </ContextMenuTrigger>
+      <CompactTabActionButton
+        icon={<X className="h-3.5 w-3.5" />}
+        label={tab.closeLabel ?? ""}
+        tooltip={tab.closeLabel ?? null}
+        onClick={(event) => closeCompactTab(event, tab.onClose!)}
+      />
     </div>
   );
 }
@@ -96,9 +165,9 @@ function CompactTabLabelButton({
   labelClassName?: string;
   tab: CompactTabStripTab;
 }) {
-  const leadingIcon = tab.onClose && tab.closePlacement === "leading-hover"
-    ? null
-    : tab.leadingIcon;
+  const hasLeadingClose = Boolean(
+    tab.onClose && tab.closePlacement === "leading-hover",
+  );
   const button = (
     <button
       type="button"
@@ -106,9 +175,15 @@ function CompactTabLabelButton({
       aria-label={tab.label}
       className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
     >
-      {leadingIcon ? (
-        <span className="inline-flex shrink-0 items-center justify-center">
-          {leadingIcon}
+      {tab.leadingIcon || hasLeadingClose ? (
+        <span
+          data-compact-tab-leading-slot=""
+          className={cn(
+            "inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center",
+            hasLeadingClose && "group-hover:opacity-0 group-focus-within:opacity-0",
+          )}
+        >
+          {tab.leadingIcon}
         </span>
       ) : null}
       <span className={cn("min-w-0 truncate text-[12px] font-medium", labelClassName, tab.labelClassName)}>
@@ -150,7 +225,6 @@ function CompactTabItem({
   | "labelClassName"
   | "tabBaseClassName"
 > & { itemRef?: React.Ref<HTMLDivElement>; tab: CompactTabStripTab }) {
-  const leadingClose = tab.onClose && tab.closePlacement === "leading-hover";
   const item = (
     <div
       ref={itemRef}
@@ -158,38 +232,17 @@ function CompactTabItem({
       onClick={(event) => event.target === event.currentTarget && tab.onSelect()}
       className={cn(
         tabBaseClassName ??
-          "group flex max-w-[180px] min-w-0 cursor-pointer items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+          "flex max-w-[180px] cursor-pointer items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+        "group relative",
         tab.active
           ? (activeTabClassName ?? "border-b-primary bg-white text-gray-900")
           : (inactiveTabClassName ??
             "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100"),
       )}
     >
-      {leadingClose ? (
-        <button
-          type="button"
-          onClick={(event) => closeCompactTab(event, tab.onClose!)}
-          className="relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700"
-          aria-label={tab.closeLabel}
-        >
-          <span className="flex items-center justify-center group-hover:hidden">
-            {tab.leadingIcon}
-          </span>
-          <X className="hidden h-3.5 w-3.5 group-hover:block" />
-        </button>
-      ) : null}
       <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />
-      <CompactTabMenu tab={tab} />
-      {tab.onClose && tab.closePlacement !== "leading-hover" ? (
-        <IconActionButton
-          size="sm"
-          tone="strong"
-          icon={<X className="h-3 w-3" />}
-          label={tab.closeLabel ?? ""}
-          tooltip={tab.closeLabel ?? null}
-          onClick={(event) => closeCompactTab(event, tab.onClose!)}
-        />
-      ) : null}
+      <CompactTabLeadingCloseOverlay tab={tab} />
+      <CompactTabTrailingActions tab={tab} />
     </div>
   );
 

package/src/shared/lib/api/__tests__/ncp-session-query-cache.utils.test.ts

@@ -183,6 +183,7 @@ describe('ncp-session-query-cache', () => {
   it('applies realtime upsert/delete events to every ncp-sessions query cache entry', () => {
     const queryClient = new QueryClient();
     queryClient.setQueryData(['ncp-sessions', 200], createSessionsList());
+    queryClient.setQueryData(['ncp-session-token-usage', 'session-3'], { runCount: 1 });
 
     applyNcpSessionRealtimeEvent(queryClient, {
       type: 'session.run-status',
@@ -212,6 +213,7 @@ describe('ncp-session-query-cache', () => {
     expect(
       queryClient.getQueryData<NcpSessionsListView>(['ncp-sessions', 200])?.sessions.map((session) => session.sessionId)
     ).toEqual(['session-3', 'session-1', 'session-2']);
+    expect(queryClient.getQueryState(['ncp-session-token-usage', 'session-3'])?.isInvalidated).toBe(true);
 
     applyNcpSessionRealtimeEvent(queryClient, {
       type: 'session.summary.delete',

package/src/shared/lib/api/ncp-session-query-cache.utils.ts

@@ -155,6 +155,10 @@ export function applyNcpSessionRealtimeEvent(
   }
   if (event.type === 'session.summary.upsert') {
     upsertNcpSessionSummaryInQueryClient(queryClient, event.payload.summary);
+    void queryClient?.invalidateQueries({
+      queryKey: ['ncp-session-token-usage', event.payload.summary.sessionId],
+      exact: true,
+    });
     return;
   }
 

package/src/shared/lib/api/ncp-session.types.ts

@@ -4,6 +4,7 @@ import type {
   NcpSessionStatus,
   NcpSessionSummary,
 } from "@nextclaw/ncp";
+import type { UiNcpSessionTokenUsageView } from "@nextclaw/client-sdk";
 import type { ThinkingLevel } from "./types";
 
 export type SessionTypeIconView = {
@@ -114,3 +115,5 @@ export type NcpSessionMessagesView = {
   total: number;
   pageInfo: NcpSessionMessagePageInfo;
 };
+
+export type NcpSessionTokenUsageView = UiNcpSessionTokenUsageView;

package/src/shared/lib/api/types.ts

@@ -24,6 +24,7 @@ export type {
   NcpSessionsListView,
   NcpMessageView,
   NcpSessionMessagesView,
+  NcpSessionTokenUsageView,
   SessionContextWindowView,
 } from './ncp-session.types';