@nextclaw/ui 0.17.1 → 0.17.2

package/src/features/chat/features/workspace/components/overview/chat-session-token-usage.tsx

@@ -0,0 +1,171 @@
+import { ChartNoAxesColumn } from 'lucide-react';
+
+import { useNcpSessionTokenUsage } from '@/features/chat/features/ncp/hooks/use-ncp-session-queries';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
+
+function formatTokenCount(value: number | null): string {
+  return value === null ? '—' : new Intl.NumberFormat().format(value);
+}
+
+function formatCacheHitRate(value: number | null): string {
+  return value === null
+    ? '—'
+    : new Intl.NumberFormat(undefined, {
+        style: 'percent',
+        maximumFractionDigits: 1,
+      }).format(value);
+}
+
+function TokenUsageStatusBadge({ status }: { status: 'reported' | 'partial' | 'unavailable' }) {
+  return (
+    <span
+      className={cn(
+        'inline-flex shrink-0 items-center rounded-full px-2 py-0.5 text-[10px] font-semibold',
+        status === 'reported'
+          ? 'bg-emerald-50 text-emerald-700'
+          : status === 'partial'
+            ? 'bg-amber-50 text-amber-700'
+            : 'bg-gray-100 text-gray-500',
+      )}
+    >
+      {t(
+        status === 'reported'
+          ? 'chatWorkspaceTokenUsageReported'
+          : status === 'partial'
+            ? 'chatWorkspaceTokenUsagePartial'
+            : 'chatWorkspaceTokenUsageUnavailable',
+      )}
+    </span>
+  );
+}
+
+function TokenUsageMetric({ label, value }: { label: string; value: string }) {
+  return (
+    <div className="min-w-0 rounded-md bg-gray-50 px-2.5 py-2">
+      <div className="truncate text-[10px] font-medium text-gray-500">{label}</div>
+      <div className="mt-0.5 truncate text-sm font-semibold tabular-nums text-gray-900">
+        {value}
+      </div>
+    </div>
+  );
+}
+
+export function ChatSessionTokenUsage({ sessionKey }: { sessionKey: string | null }) {
+  const usageQuery = useNcpSessionTokenUsage(sessionKey);
+  const usage = usageQuery.data;
+
+  return (
+    <section
+      aria-labelledby="chat-workspace-token-usage-title"
+      className="mt-4 rounded-lg border border-gray-200/80 bg-white p-3"
+    >
+      <div className="flex items-start gap-3">
+        <span className="inline-flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-gray-100 text-gray-600">
+          <ChartNoAxesColumn className="h-4 w-4" />
+        </span>
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center justify-between gap-2">
+            <h3 id="chat-workspace-token-usage-title" className="text-sm font-semibold text-gray-900">
+              {t('chatWorkspaceTokenUsage')}
+            </h3>
+            {usage ? <TokenUsageStatusBadge status={usage.status} /> : null}
+          </div>
+          <p className="mt-0.5 text-xs leading-5 text-gray-500">
+            {t('chatWorkspaceTokenUsageDescription')}
+          </p>
+        </div>
+      </div>
+
+      {usageQuery.isLoading ? (
+        <p className="py-5 text-center text-xs text-gray-500" aria-live="polite">
+          {t('chatWorkspaceTokenUsageLoading')}
+        </p>
+      ) : usageQuery.isError ? (
+        <div className="flex items-center justify-between gap-3 py-4 text-xs text-rose-600" role="alert">
+          <span>{t('chatWorkspaceTokenUsageLoadFailed')}</span>
+          <button
+            type="button"
+            className="shrink-0 rounded px-1.5 py-1 font-semibold text-gray-700 hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25"
+            onClick={() => void usageQuery.refetch()}
+          >
+            {t('chatWorkspaceTokenUsageRetry')}
+          </button>
+        </div>
+      ) : usage && usage.runCount > 0 ? (
+        <div className="mt-3 space-y-3">
+          <div className="grid grid-cols-2 gap-1.5">
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageTotal')}
+              value={formatTokenCount(usage.totals.totalTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageInput')}
+              value={formatTokenCount(usage.totals.inputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageOutput')}
+              value={formatTokenCount(usage.totals.outputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageCachedInput')}
+              value={formatTokenCount(usage.totals.cachedInputTokens)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageCacheHitRate')}
+              value={formatCacheHitRate(usage.totals.cacheHitRate)}
+            />
+            <TokenUsageMetric
+              label={t('chatWorkspaceTokenUsageRuns')}
+              value={String(usage.runCount)}
+            />
+          </div>
+          <div>
+            <div className="mb-1.5 text-[11px] font-medium text-gray-700">
+              {t('chatWorkspaceTokenUsageByModel')}
+            </div>
+            <div className="space-y-1.5">
+              {usage.models.map((modelUsage) => (
+                <div key={modelUsage.model} className="rounded-md border border-gray-200/70 px-2.5 py-2">
+                  <div className="flex min-w-0 items-center justify-between gap-2">
+                    <span className="min-w-0 truncate text-xs font-semibold text-gray-900" title={modelUsage.model}>
+                      {modelUsage.model}
+                    </span>
+                    <TokenUsageStatusBadge status={modelUsage.status} />
+                  </div>
+                  <div className="mt-1 text-[10px] text-gray-500">
+                    {t('chatWorkspaceTokenUsageModelRunCount').replace('{count}', String(modelUsage.runCount))}
+                    {' · '}
+                    {t('chatWorkspaceTokenUsageModelCacheHitRate').replace(
+                      '{rate}',
+                      formatCacheHitRate(modelUsage.cacheHitRate),
+                    )}
+                  </div>
+                  <dl className="mt-2 grid grid-cols-2 gap-x-3 gap-y-1 text-[10px] sm:grid-cols-4">
+                    {[
+                      [t('chatWorkspaceTokenUsageInput'), modelUsage.inputTokens],
+                      [t('chatWorkspaceTokenUsageOutput'), modelUsage.outputTokens],
+                      [t('chatWorkspaceTokenUsageCachedInput'), modelUsage.cachedInputTokens],
+                      [t('chatWorkspaceTokenUsageTotal'), modelUsage.totalTokens],
+                    ].map(([label, value]) => (
+                      <div key={String(label)} className="flex min-w-0 items-center justify-between gap-1 sm:block">
+                        <dt className="truncate text-gray-500">{label}</dt>
+                        <dd className="shrink-0 font-semibold tabular-nums text-gray-800 sm:mt-0.5">
+                          {formatTokenCount(value as number | null)}
+                        </dd>
+                      </div>
+                    ))}
+                  </dl>
+                </div>
+              ))}
+            </div>
+          </div>
+        </div>
+      ) : (
+        <p className="py-5 text-center text-xs leading-5 text-gray-500">
+          {t('chatWorkspaceTokenUsageEmpty')}
+        </p>
+      )}
+    </section>
+  );
+}

package/src/features/chat/types/chat-message.types.ts

@@ -55,6 +55,11 @@ export type ChatMessagePartSource =
         error?: string;
         cancelled?: boolean;
         toolCallId?: string;
+        execution?: {
+          startedAt?: string;
+          endedAt?: string;
+          durationMs?: number;
+        };
       };
     }
   | {

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',