@nextclaw/ui 0.20.1 → 0.20.2

package/src/features/chat/features/session/hooks/use-chat-sidebar-context-counts.ts

@@ -0,0 +1,40 @@
+import { useMemo } from "react";
+import { useCronJobs } from "@/features/cron";
+import type { NcpSessionListItemView } from "@/features/chat/features/ncp/hooks/use-ncp-session-list-view";
+
+export function useChatSidebarContextCounts(
+  allItems: readonly NcpSessionListItemView[],
+) {
+  const cronQuery = useCronJobs({ all: true });
+
+  return useMemo(() => {
+    const projectRootBySessionKey = new Map(
+      allItems.flatMap(({ session }) => {
+        const projectRoot = session.projectRoot?.trim();
+        return projectRoot ? [[session.key, projectRoot] as const] : [];
+      }),
+    );
+    const cronJobCountBySessionKey = new Map<string, number>();
+    const cronJobCountByProjectRoot = new Map<string, number>();
+
+    for (const job of cronQuery.data?.jobs ?? []) {
+      const sessionKey = job.payload.sessionId?.trim();
+      if (!sessionKey) {
+        continue;
+      }
+      cronJobCountBySessionKey.set(
+        sessionKey,
+        (cronJobCountBySessionKey.get(sessionKey) ?? 0) + 1,
+      );
+      const projectRoot = projectRootBySessionKey.get(sessionKey);
+      if (projectRoot) {
+        cronJobCountByProjectRoot.set(
+          projectRoot,
+          (cronJobCountByProjectRoot.get(projectRoot) ?? 0) + 1,
+        );
+      }
+    }
+
+    return { cronJobCountByProjectRoot, cronJobCountBySessionKey };
+  }, [allItems, cronQuery.data?.jobs]);
+}

package/src/features/chat/features/workspace/components/__tests__/chat-session-workspace-file-preview.test.tsx

@@ -1,4 +1,5 @@
 import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import type { ReactNode } from "react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import type {
@@ -123,16 +124,21 @@ function renderWorkspaceFilePreview({
   sessionWorkingDir = "/tmp",
   showBreadcrumbs,
 }: RenderWorkspaceFilePreviewOptions = {}) {
+  const queryClient = new QueryClient({
+    defaultOptions: { queries: { retry: false } },
+  });
   const view = render(
-    <ChatSessionWorkspaceFilePreview
-      file={buildWorkspaceFile(file ?? {})}
-      sessionProjectRoot={sessionProjectRoot}
-      sessionWorkingDir={sessionWorkingDir}
-      refreshVersion={refreshVersion}
-      showBreadcrumbs={showBreadcrumbs}
-      onHtmlContentHeightChange={onHtmlContentHeightChange}
-      onFileOpen={onFileOpen}
-    />,
+    <QueryClientProvider client={queryClient}>
+      <ChatSessionWorkspaceFilePreview
+        file={buildWorkspaceFile(file ?? {})}
+        sessionProjectRoot={sessionProjectRoot}
+        sessionWorkingDir={sessionWorkingDir}
+        refreshVersion={refreshVersion}
+        showBreadcrumbs={showBreadcrumbs}
+        onHtmlContentHeightChange={onHtmlContentHeightChange}
+        onFileOpen={onFileOpen}
+      />
+    </QueryClientProvider>,
   );
   return { ...view, onFileOpen };
 }
@@ -580,6 +586,7 @@ describe("ChatSessionWorkspaceFilePreview text rendering", () => {
 
     expect(screen.queryByTestId("markdown-preview")).toBeNull();
     expect(screen.getByTestId("file-code-surface")).toBeTruthy();
+    expect(screen.queryByRole("button", { name: t("chatWorkspaceMarkdownOutline") })).toBeNull();
   });
 
   it("keeps HTML files in the source preview when preview viewer is automatic", () => {

package/src/features/chat/features/workspace/components/__tests__/workspace-markdown-outline.test.tsx

@@ -0,0 +1,128 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { createRef } from "react";
+import { describe, expect, it, vi } from "vitest";
+import { WorkspaceMarkdownOutline } from "@/features/chat/features/workspace/components/workspace-markdown-outline";
+import { t } from "@/shared/lib/i18n";
+
+describe("WorkspaceMarkdownOutline", () => {
+  it("does not render an outline action when the document has no headings", async () => {
+    const scrollContainerRef = createRef<HTMLDivElement>();
+    render(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="plain fixture"
+          documentKey="notes.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>Plain paragraph</div>
+      </>,
+    );
+
+    await waitFor(() => {
+      expect(
+        screen.queryByRole("button", {
+          name: t("chatWorkspaceMarkdownOutline"),
+        }),
+      ).toBeNull();
+    });
+  });
+
+  it("preserves outline scroll state and instantly jumps to the selected rendered heading", async () => {
+    const scrollContainerRef = createRef<HTMLDivElement>();
+    const scrollTo = vi.fn();
+    const { rerender } = render(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="outline fixture"
+          documentKey="README.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>
+          <h1>Overview</h1>
+          <h3>
+            Install <em>quickly</em>
+          </h3>
+          <h2>Overview</h2>
+        </div>
+      </>,
+    );
+
+    const outlineTrigger = await screen.findByRole("button", {
+      name: t("chatWorkspaceMarkdownOutline"),
+    });
+    const scrollContainer = scrollContainerRef.current!;
+    const headings = screen.getAllByRole("heading");
+    Object.defineProperty(scrollContainer, "scrollTop", {
+      configurable: true,
+      value: 40,
+      writable: true,
+    });
+    Object.defineProperty(scrollContainer, "scrollTo", {
+      configurable: true,
+      value: scrollTo,
+    });
+    vi.spyOn(scrollContainer, "getBoundingClientRect").mockReturnValue({
+      top: 100,
+    } as DOMRect);
+    vi.spyOn(headings[1]!, "getBoundingClientRect").mockReturnValue({
+      top: 420,
+    } as DOMRect);
+
+    fireEvent.click(outlineTrigger);
+
+    expect(
+      screen.getByTestId("workspace-markdown-outline-popover").className,
+    ).toContain("w-[min(20rem,calc(100vw-1.5rem))]");
+    const outlineNavigation = screen.getByRole("navigation");
+    expect(outlineNavigation.className).toContain("max-h-80");
+    expect(screen.getAllByRole("button", { name: "Overview" })).toHaveLength(2);
+    const nestedHeading = screen.getByRole("button", {
+      name: "Install quickly",
+    });
+    expect(nestedHeading.style.paddingInlineStart).toBe("1.25rem");
+
+    outlineNavigation.scrollTop = 176;
+    fireEvent.click(outlineTrigger);
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("workspace-markdown-outline-popover"),
+      ).toBeNull();
+    });
+    fireEvent.click(outlineTrigger);
+    expect((await screen.findByRole("navigation")).scrollTop).toBe(176);
+    fireEvent.click(outlineTrigger);
+    rerender(
+      <>
+        <WorkspaceMarkdownOutline
+          contentKey="outline fixture"
+          documentKey="docs/other.md"
+          scrollContainerRef={scrollContainerRef}
+        />
+        <div ref={scrollContainerRef}>
+          <h1>Overview</h1>
+          <h3>
+            Install <em>quickly</em>
+          </h3>
+          <h2>Overview</h2>
+        </div>
+      </>,
+    );
+    fireEvent.click(outlineTrigger);
+    expect((await screen.findByRole("navigation")).scrollTop).toBe(0);
+
+    fireEvent.click(screen.getByRole("button", { name: "Install quickly" }));
+
+    expect(scrollTo).toHaveBeenCalledWith({ top: 344 });
+    await waitFor(() => {
+      expect(
+        screen.queryByTestId("workspace-markdown-outline-popover"),
+      ).toBeNull();
+    });
+    expect(document.activeElement).toBe(outlineTrigger);
+    expect(
+      document.querySelector(
+        '[role="tooltip"][data-state="delayed-open"], [role="tooltip"][data-state="instant-open"]',
+      ),
+    ).toBeNull();
+  });
+});

package/src/features/chat/features/workspace/components/chat-session-workspace-file-breadcrumbs.tsx

@@ -78,10 +78,12 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
   breadcrumb,
   leading,
   onFileOpen,
+  trailing,
 }: {
   breadcrumb: WorkspaceFileBreadcrumbViewModel;
   leading?: ReactNode;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
+  trailing?: ReactNode;
 }) {
   const scrollRef = useRef<HTMLDivElement>(null);
 
@@ -138,6 +140,7 @@ export function ChatSessionWorkspaceFileBreadcrumbs({
           </div>
         ) : null}
       </div>
+      {trailing ? <div className="flex shrink-0 items-center py-1.5 pr-2 pl-0.5">{trailing}</div> : null}
     </div>
   );
 }

package/src/features/chat/features/workspace/components/chat-session-workspace-file-preview.tsx

@@ -1,4 +1,4 @@
-import { useMemo, type ReactNode } from 'react';
+import { useMemo, useRef, type ReactNode, type RefObject } from 'react';
 import type { ChatFileOpenActionViewModel, ChatFileOperationBlockViewModel } from '@nextclaw/agent-chat-ui';
 import { NextClawClientError } from '@nextclaw/client-sdk';
 import { ChatMessageMarkdown, FileOperationCodeSurface } from '@nextclaw/agent-chat-ui';
@@ -23,6 +23,7 @@ import { t } from '@/shared/lib/i18n';
 import { buildWorkspaceFileBreadcrumb, resolveWorkspaceRelativePath } from '@/shared/lib/session-project';
 import { cn } from '@/shared/lib/utils';
 import { resolveWorkspaceFileViewer } from '@/features/chat/features/workspace/utils/chat-workspace-file-viewer.utils';
+import { WorkspaceMarkdownOutline } from './workspace-markdown-outline';
 
 function inferPreviewKind(params: {
   path: string;
@@ -157,6 +158,7 @@ function WorkspacePreviewBody({
   fileBasePath,
   onFileOpen,
   onHtmlContentHeightChange,
+  markdownScrollRef,
   previewBlock,
   previewKind,
   previewViewer,
@@ -173,6 +175,7 @@ function WorkspacePreviewBody({
   fileBasePath: string | null;
   onFileOpen: (action: ChatFileOpenActionViewModel) => void;
   onHtmlContentHeightChange?: (height: number) => void;
+  markdownScrollRef: RefObject<HTMLDivElement>;
   previewBlock: ChatFileOperationBlockViewModel | null;
   previewKind: 'text' | 'markdown' | 'binary';
   previewViewer: 'source' | 'rendered' | null;
@@ -221,7 +224,7 @@ function WorkspacePreviewBody({
 
   if (previewKind === 'markdown' && previewViewer !== 'source' && previewText) {
     return (
-      <div className="h-full overflow-auto custom-scrollbar px-5 py-4">
+      <div ref={markdownScrollRef} className="h-full overflow-auto custom-scrollbar px-5 py-4">
         <ChatMessageMarkdown
           text={previewText}
           role="assistant"
@@ -266,6 +269,7 @@ export function ChatSessionWorkspaceFilePreview({
   onFileOpen,
   onTextExcerptAdd,
 }: ChatSessionWorkspaceFilePreviewProps) {
+  const markdownScrollRef = useRef<HTMLDivElement>(null);
   const isPreviewMode = file.viewMode === 'preview';
   const suppliedContentUrl = file.contentUrl?.trim() || null;
   const usesServerPath = isPreviewMode && !suppliedContentUrl;
@@ -360,6 +364,7 @@ export function ChatSessionWorkspaceFilePreview({
       fileBasePath={sessionWorkingDir}
       onFileOpen={onFileOpen}
       onHtmlContentHeightChange={onHtmlContentHeightChange}
+      markdownScrollRef={markdownScrollRef}
       previewBlock={previewBlock}
       previewKind={previewKind}
       previewViewer={previewViewer}
@@ -377,6 +382,19 @@ export function ChatSessionWorkspaceFilePreview({
           breadcrumb={breadcrumb}
           leading={breadcrumbLeading}
           onFileOpen={onFileOpen}
+          trailing={
+            isPreviewMode &&
+            previewKind === 'markdown' &&
+            previewViewer !== 'source' &&
+            previewText &&
+            !contentUrl ? (
+              <WorkspaceMarkdownOutline
+                contentKey={previewText}
+                documentKey={resolvedPath}
+                scrollContainerRef={markdownScrollRef}
+              />
+            ) : undefined
+          }
         />
       ) : null}
 

package/src/features/chat/features/workspace/components/workspace-markdown-outline.tsx

@@ -0,0 +1,156 @@
+import {
+  useEffect,
+  useRef,
+  useState,
+  type RefObject,
+} from "react";
+import { ListTree } from "lucide-react";
+import { ChatPopoverContent } from "@/features/chat/components/chat-popover-content";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import { Popover, PopoverTrigger } from "@/shared/components/ui/popover";
+import { t } from "@/shared/lib/i18n";
+
+const HEADING_SELECTOR = "h1, h2, h3, h4, h5, h6";
+const HEADING_INDEX_ATTRIBUTE = "data-workspace-markdown-heading-index";
+const HEADING_TOP_GAP = 16;
+
+type WorkspaceMarkdownOutlineItem = {
+  depth: number;
+  index: number;
+  label: string;
+};
+
+function collectWorkspaceMarkdownOutline(
+  container: HTMLElement,
+): WorkspaceMarkdownOutlineItem[] {
+  const levelStack: number[] = [];
+  const items: WorkspaceMarkdownOutlineItem[] = [];
+
+  container
+    .querySelectorAll<HTMLElement>(HEADING_SELECTOR)
+    .forEach((heading) => {
+      heading.removeAttribute(HEADING_INDEX_ATTRIBUTE);
+      const label = heading.textContent?.replace(/\s+/g, " ").trim();
+      if (!label) return;
+
+      const level = Number(heading.tagName.slice(1));
+      while (
+        levelStack.length > 0 &&
+        levelStack[levelStack.length - 1]! >= level
+      ) {
+        levelStack.pop();
+      }
+
+      const index = items.length;
+      heading.setAttribute(HEADING_INDEX_ATTRIBUTE, String(index));
+      items.push({ depth: levelStack.length, index, label });
+      levelStack.push(level);
+    });
+
+  return items;
+}
+
+export function WorkspaceMarkdownOutline({
+  contentKey,
+  documentKey,
+  scrollContainerRef,
+}: {
+  contentKey: string;
+  documentKey: string;
+  scrollContainerRef: RefObject<HTMLDivElement>;
+}) {
+  const [items, setItems] = useState<WorkspaceMarkdownOutlineItem[]>([]);
+  const [open, setOpen] = useState(false);
+  const outlineScrollRef = useRef<HTMLElement | null>(null);
+  const outlineScrollTopRef = useRef(0);
+
+  useEffect(() => {
+    outlineScrollTopRef.current = 0;
+    setOpen(false);
+    const container = scrollContainerRef.current;
+    if (!container) {
+      setItems([]);
+      return;
+    }
+
+    setItems(collectWorkspaceMarkdownOutline(container));
+    return () => {
+      container
+        .querySelectorAll<HTMLElement>(`[${HEADING_INDEX_ATTRIBUTE}]`)
+        .forEach((heading) => heading.removeAttribute(HEADING_INDEX_ATTRIBUTE));
+    };
+  }, [contentKey, documentKey, scrollContainerRef]);
+
+  if (items.length === 0) return null;
+
+  const label = t("chatWorkspaceMarkdownOutline");
+  const handleOpenChange = (nextOpen: boolean) => {
+    if (!nextOpen && outlineScrollRef.current) {
+      outlineScrollTopRef.current = outlineScrollRef.current.scrollTop;
+    }
+    setOpen(nextOpen);
+  };
+  const handleSelect = (index: number) => {
+    const container = scrollContainerRef.current;
+    const heading = container?.querySelector<HTMLElement>(
+      `[${HEADING_INDEX_ATTRIBUTE}="${index}"]`,
+    );
+    if (!container || !heading) return;
+
+    handleOpenChange(false);
+    const top =
+      container.scrollTop +
+      heading.getBoundingClientRect().top -
+      container.getBoundingClientRect().top;
+    container.scrollTo({
+      top: Math.max(0, top - HEADING_TOP_GAP),
+    });
+  };
+
+  return (
+    <Popover open={open} onOpenChange={handleOpenChange}>
+      <PopoverTrigger asChild>
+        <IconActionButton
+          icon={<ListTree className="h-3.5 w-3.5" />}
+          label={label}
+          size="sm"
+          tone="surface"
+          className="rounded-sm data-[state=open]:bg-gray-200/80 data-[state=open]:text-gray-900"
+        />
+      </PopoverTrigger>
+
+      <ChatPopoverContent
+        align="end"
+        className="w-[min(20rem,calc(100vw-1.5rem))] rounded-lg p-1.5"
+        data-testid="workspace-markdown-outline-popover"
+      >
+        <nav
+          ref={(node) => {
+            outlineScrollRef.current = node;
+            if (node) node.scrollTop = outlineScrollTopRef.current;
+          }}
+          aria-label={label}
+          className="max-h-80 overflow-y-auto custom-scrollbar"
+        >
+          <ul className="space-y-0.5">
+            {items.map((item) => (
+              <li key={item.index}>
+                <button
+                  type="button"
+                  className="block w-full truncate rounded-md py-1.5 pr-2 text-left text-xs leading-4 text-gray-600 transition-colors hover:bg-gray-100 hover:text-gray-950 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-inset focus-visible:ring-border active:bg-gray-200"
+                  style={{
+                    paddingInlineStart: `${0.5 + item.depth * 0.75}rem`,
+                  }}
+                  title={item.label}
+                  onClick={() => handleSelect(item.index)}
+                >
+                  {item.label}
+                </button>
+              </li>
+            ))}
+          </ul>
+        </nav>
+      </ChatPopoverContent>
+    </Popover>
+  );
+}

package/src/features/settings/pages/__tests__/privacy-settings-page.test.tsx

@@ -6,7 +6,16 @@ const mocks = vi.hoisted(() => ({ mutate: vi.fn() }));
 
 vi.mock('@/shared/hooks/use-config', () => ({
   useConfig: () => ({
-    data: { productAnalytics: { enabled: false, audience: 'external' } },
+    data: { productAnalytics: { schemaVersion: 2, enabled: true, audience: 'external' } },
+    isLoading: false
+  }),
+  useProductAnalyticsStatus: () => ({
+    data: {
+      lastAttemptAt: '2026-08-25T12:00:00.000Z',
+      lastSuccessAt: '2026-08-25T12:00:01.000Z',
+      lastError: null,
+      pendingReceiptCount: 0
+    },
     isLoading: false
   }),
   useUpdateProductAnalytics: () => ({
@@ -18,13 +27,13 @@ vi.mock('@/shared/hooks/use-config', () => ({
 describe('PrivacySettingsPage', () => {
   beforeEach(() => mocks.mutate.mockClear());
 
-  it('requires explicit opt-in and saves the selected test audience', () => {
+  it('shows anonymous reporting enabled by default and saves opt-out and test audience', () => {
     render(<PrivacySettingsPage />);
 
-    const shareSwitch = screen.getByRole('switch', { name: 'Share product activity' });
-    expect(shareSwitch.getAttribute('aria-checked')).toBe('false');
+    const shareSwitch = screen.getByRole('switch', { name: 'Send anonymous usage analytics' });
+    expect(shareSwitch.getAttribute('aria-checked')).toBe('true');
     fireEvent.click(shareSwitch);
-    expect(mocks.mutate).toHaveBeenCalledWith({ data: { enabled: true } });
+    expect(mocks.mutate).toHaveBeenCalledWith({ data: { enabled: false } });
 
     fireEvent.click(screen.getByRole('combobox', { name: 'Analytics audience' }));
     fireEvent.click(screen.getByRole('option', { name: 'QA testing' }));

package/src/features/settings/pages/privacy-settings-page.tsx

@@ -2,14 +2,19 @@ import { SettingsPage } from '@/shared/components/settings/settings-page';
 import { SettingRow, SettingsGroup, SettingsSection } from '@/shared/components/settings/setting-row';
 import { Switch } from '@/shared/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/shared/components/ui/select';
-import { useConfig, useUpdateProductAnalytics } from '@/shared/hooks/use-config';
+import {
+  useConfig,
+  useProductAnalyticsStatus,
+  useUpdateProductAnalytics
+} from '@/shared/hooks/use-config';
 import type { ProductAnalyticsAudience } from '@/shared/lib/api';
 import { t } from '@/shared/lib/i18n';
 
 export function PrivacySettingsPage(): JSX.Element {
   const configQuery = useConfig();
+  const statusQuery = useProductAnalyticsStatus();
   const updateMutation = useUpdateProductAnalytics();
-  const enabled = configQuery.data?.productAnalytics.enabled ?? false;
+  const enabled = configQuery.data?.productAnalytics.enabled ?? true;
   const audience = configQuery.data?.productAnalytics.audience ?? 'external';
 
   const updateEnabled = (nextEnabled: boolean) => {
@@ -78,6 +83,37 @@ export function PrivacySettingsPage(): JSX.Element {
           />
         </SettingsGroup>
       </SettingsSection>
+
+      <SettingsSection title={t('productAnalyticsStatusSectionTitle')}>
+        <SettingsGroup>
+          <SettingRow
+            layout='stacked'
+            title={t('productAnalyticsStatusTitle')}
+            description={formatProductAnalyticsStatus(statusQuery.data, statusQuery.isLoading)}
+          />
+          {statusQuery.data?.lastError ? (
+            <SettingRow
+              layout='stacked'
+              title={t('productAnalyticsLastErrorTitle')}
+              description={statusQuery.data.lastError}
+            />
+          ) : null}
+        </SettingsGroup>
+      </SettingsSection>
     </SettingsPage>
   );
 }
+
+function formatProductAnalyticsStatus(
+  status: ReturnType<typeof useProductAnalyticsStatus>['data'],
+  isLoading: boolean,
+): string {
+  if (isLoading) return t('productAnalyticsStatusLoading');
+  if (!status?.lastAttemptAt) return t('productAnalyticsStatusNever');
+  const attemptedAt = new Date(status.lastAttemptAt).toLocaleString();
+  if (!status.lastSuccessAt) {
+    return `${t('productAnalyticsLastAttemptLabel')} ${attemptedAt} · ${status.pendingReceiptCount} ${t('productAnalyticsPendingLabel')}`;
+  }
+  const succeededAt = new Date(status.lastSuccessAt).toLocaleString();
+  return `${t('productAnalyticsLastSuccessLabel')} ${succeededAt} · ${status.pendingReceiptCount} ${t('productAnalyticsPendingLabel')}`;
+}

package/src/shared/components/ui/actions/icon-action-button.tsx

@@ -75,14 +75,7 @@ const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonPro
     return (
       <TooltipProvider delayDuration={250}>
         <Tooltip disableHoverableContent>
-          <TooltipTrigger
-            asChild
-            onFocus={(event) => {
-              if (!event.currentTarget.matches(':focus-visible')) {
-                event.preventDefault();
-              }
-            }}
-          >
+          <TooltipTrigger asChild>
             {disabled ? <span className="inline-flex">{button}</span> : button}
           </TooltipTrigger>
           <TooltipContent side={tooltipSide} className="text-xs">{content}</TooltipContent>

package/src/shared/components/ui/tooltip.tsx

@@ -7,7 +7,22 @@ const TooltipProvider = TooltipPrimitive.Provider;
 
 const Tooltip = TooltipPrimitive.Root;
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+const TooltipTrigger = React.forwardRef<
+    React.ElementRef<typeof TooltipPrimitive.Trigger>,
+    React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>
+>(({ onFocus, ...props }, ref) => (
+    <TooltipPrimitive.Trigger
+        ref={ref}
+        onFocus={(event) => {
+            onFocus?.(event);
+            if (!event.defaultPrevented && !event.currentTarget.matches(':focus-visible')) {
+                event.preventDefault();
+            }
+        }}
+        {...props}
+    />
+));
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
 
 const TooltipContent = React.forwardRef<
     React.ElementRef<typeof TooltipPrimitive.Content>,

package/src/shared/hooks/use-config.ts

@@ -19,6 +19,7 @@ import {
   updateChannel,
   updateRuntime,
   updateProductAnalytics,
+  fetchProductAnalyticsStatus,
   updateSecrets,
   executeConfigAction
 } from '@/shared/lib/api';
@@ -43,6 +44,15 @@ export function useConfigMeta() {
   });
 }
 
+export function useProductAnalyticsStatus() {
+  return useQuery({
+    queryKey: ['product-analytics-status'],
+    queryFn: fetchProductAnalyticsStatus,
+    staleTime: 15_000,
+    refetchOnWindowFocus: true
+  });
+}
+
 export function useProviders() {
   return useQuery({
     queryKey: ['providers'],
@@ -108,6 +118,7 @@ export function useUpdateProductAnalytics() {
       queryClient.setQueryData<ConfigView>(['config'], (current) => current
         ? { ...current, productAnalytics }
         : current);
+      queryClient.invalidateQueries({ queryKey: ['product-analytics-status'] });
       toast.success(t('configSavedApplied'));
     },
     onError: (error: Error) => {

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

@@ -638,6 +638,7 @@ export type SecretsConfigUpdate = {
 export type ProductAnalyticsAudience = 'external' | 'internal' | 'qa';
 
 export type ProductAnalyticsView = {
+  schemaVersion: 2;
   enabled: boolean;
   audience: ProductAnalyticsAudience;
 };
@@ -647,6 +648,13 @@ export type ProductAnalyticsConfigUpdate = {
   audience?: ProductAnalyticsAudience;
 };
 
+export type ProductAnalyticsStatusView = {
+  lastAttemptAt: string | null;
+  lastSuccessAt: string | null;
+  lastError: string | null;
+  pendingReceiptCount: number;
+};
+
 export type ChannelConfigUpdate = Record<string, unknown>;
 
 export type ConfigView = {

package/src/shared/lib/api/utils/config.utils.ts

@@ -31,6 +31,7 @@ import type {
   ProviderCreateResult,
   ProviderDeleteResult,
   ProductAnalyticsConfigUpdate,
+  ProductAnalyticsStatusView,
   ProductAnalyticsView,
   RuntimeConfigUpdate,
   SecretsConfigUpdate,
@@ -178,6 +179,10 @@ export async function updateProductAnalytics(
   return await nextclawClient.config.updateProductAnalytics(data);
 }
 
+export async function fetchProductAnalyticsStatus(): Promise<ProductAnalyticsStatusView> {
+  return await nextclawClient.config.fetchProductAnalyticsStatus();
+}
+
 export async function executeConfigAction(
   actionId: string,
   data: ConfigActionExecuteRequest