@nextclaw/ui 0.15.22 → 0.15.24

package/src/shared/components/ui/context-menu/context-menu.tsx

@@ -0,0 +1,263 @@
+import {
+  cloneElement,
+  createContext,
+  useContext,
+  useLayoutEffect,
+  useRef,
+  useState,
+  type MouseEvent,
+  type ReactElement,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { cn } from "@/shared/lib/utils";
+
+export type ContextMenuItem = {
+  key: string;
+  label: string;
+  icon?: ReactNode;
+  disabled?: boolean;
+  restoreFocus?: boolean;
+  onSelect: () => void;
+};
+
+export type ContextMenuGroup = {
+  key: string;
+  items: readonly ContextMenuItem[];
+};
+
+type ContextMenuPosition = {
+  align: "start" | "end";
+  x: number;
+  y: number;
+  trigger: HTMLElement;
+};
+
+type ContextMenuController = {
+  isOpen: boolean;
+  toggleFromButton: (trigger: HTMLElement) => void;
+};
+
+const ContextMenuControllerContext = createContext<ContextMenuController | null>(null);
+
+const CONTEXT_MENU_EDGE_GAP = 8;
+
+function ContextMenuSurface({
+  groups,
+  label,
+  onClose,
+  position,
+}: {
+  groups: readonly ContextMenuGroup[];
+  label: string;
+  onClose: (restoreFocus: boolean) => void;
+  position: ContextMenuPosition;
+}) {
+  const menuRef = useRef<HTMLDivElement | null>(null);
+
+  useLayoutEffect(() => {
+    const menu = menuRef.current;
+    if (!menu) {
+      return;
+    }
+    const rect = menu.getBoundingClientRect();
+    const preferredLeft = position.align === "end"
+      ? position.x - rect.width
+      : position.x;
+    const left = Math.max(
+      CONTEXT_MENU_EDGE_GAP,
+      Math.min(preferredLeft, window.innerWidth - rect.width - CONTEXT_MENU_EDGE_GAP),
+    );
+    const top = Math.max(
+      CONTEXT_MENU_EDGE_GAP,
+      Math.min(position.y, window.innerHeight - rect.height - CONTEXT_MENU_EDGE_GAP),
+    );
+    menu.style.left = `${left}px`;
+    menu.style.top = `${top}px`;
+    menu.querySelector<HTMLButtonElement>('[role="menuitem"]:not(:disabled)')?.focus();
+  }, [position]);
+
+  const moveFocus = (direction: 1 | -1) => {
+    const items = Array.from(
+      menuRef.current?.querySelectorAll<HTMLButtonElement>(
+        '[role="menuitem"]:not(:disabled)',
+      ) ?? [],
+    );
+    if (items.length === 0) {
+      return;
+    }
+    const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);
+    const nextIndex = currentIndex < 0
+      ? 0
+      : (currentIndex + direction + items.length) % items.length;
+    items[nextIndex]?.focus();
+  };
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-[var(--z-tooltip)]"
+      onContextMenu={(event) => event.preventDefault()}
+      onPointerDown={() => onClose(true)}
+    >
+      <div
+        ref={menuRef}
+        role="menu"
+        aria-label={label}
+        className="fixed min-w-52 max-w-72 overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)]"
+        style={{ left: position.x, top: position.y }}
+        onPointerDown={(event) => event.stopPropagation()}
+        onKeyDown={(event) => {
+          if (event.key === "Escape") {
+            event.preventDefault();
+            onClose(true);
+          } else if (event.key === "ArrowDown") {
+            event.preventDefault();
+            moveFocus(1);
+          } else if (event.key === "ArrowUp") {
+            event.preventDefault();
+            moveFocus(-1);
+          } else if (event.key === "Home" || event.key === "End") {
+            event.preventDefault();
+            const items = menuRef.current?.querySelectorAll<HTMLButtonElement>(
+              '[role="menuitem"]:not(:disabled)',
+            );
+            items?.[event.key === "Home" ? 0 : items.length - 1]?.focus();
+          }
+        }}
+      >
+        {groups.map((group, groupIndex) => (
+          <div key={group.key} role="group">
+            {groupIndex > 0 ? <div className="my-1 h-px bg-border" /> : null}
+            {group.items.map((item) => (
+              <button
+                key={item.key}
+                type="button"
+                role="menuitem"
+                disabled={item.disabled}
+                className={cn(
+                  "flex h-8 w-full items-center gap-2 rounded-lg px-2.5 text-left text-[13px] font-medium text-foreground outline-none transition-colors",
+                  "hover:bg-muted focus-visible:bg-muted disabled:pointer-events-none disabled:opacity-45",
+                )}
+                onClick={() => {
+                  item.onSelect();
+                  onClose(item.restoreFocus !== false);
+                }}
+              >
+                {item.icon ? (
+                  <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center text-muted-foreground">
+                    {item.icon}
+                  </span>
+                ) : null}
+                <span className="min-w-0 flex-1 truncate">{item.label}</span>
+              </button>
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export function ContextMenu({
+  children,
+  groups,
+  label,
+}: {
+  children: ReactElement<{
+    "data-context-menu-open"?: string;
+    onContextMenu?: (event: MouseEvent) => void;
+  }>;
+  groups: readonly ContextMenuGroup[];
+  label: string;
+}) {
+  const [position, setPosition] = useState<ContextMenuPosition | null>(null);
+  const visibleGroups = groups.filter((group) => group.items.length > 0);
+  const closeMenu = (restoreFocus: boolean) => {
+    const trigger = position?.trigger;
+    setPosition(null);
+    if (restoreFocus && trigger) {
+      window.setTimeout(() => trigger.isConnected && trigger.focus(), 0);
+    }
+  };
+
+  const toggleFromButton = (trigger: HTMLElement) => {
+    if (position?.trigger === trigger) {
+      closeMenu(true);
+      return;
+    }
+    if (visibleGroups.length === 0) {
+      return;
+    }
+    const bounds = trigger.getBoundingClientRect();
+    setPosition({
+      align: "end",
+      x: bounds.right,
+      y: bounds.bottom,
+      trigger,
+    });
+  };
+
+  const child = cloneElement(children, {
+    "data-context-menu-open": position ? "" : undefined,
+    onContextMenu: (event: MouseEvent) => {
+      children.props.onContextMenu?.(event);
+      if (event.defaultPrevented || visibleGroups.length === 0) {
+        return;
+      }
+      event.preventDefault();
+      const trigger = event.currentTarget as HTMLElement;
+      const bounds = trigger.getBoundingClientRect();
+      setPosition({
+        align: "start",
+        x: event.clientX || bounds.left,
+        y: event.clientY || bounds.bottom,
+        trigger,
+      });
+    },
+  });
+
+  return (
+    <ContextMenuControllerContext.Provider
+      value={{ isOpen: Boolean(position), toggleFromButton }}
+    >
+      {child}
+      {position ? (
+        <ContextMenuSurface
+          groups={visibleGroups}
+          label={label}
+          position={position}
+          onClose={closeMenu}
+        />
+      ) : null}
+    </ContextMenuControllerContext.Provider>
+  );
+}
+
+export function ContextMenuTrigger({
+  children,
+}: {
+  children: ReactElement<{
+    "aria-expanded"?: boolean;
+    "aria-haspopup"?: "menu";
+    onClick?: (event: MouseEvent) => void;
+  }>;
+}) {
+  const controller = useContext(ContextMenuControllerContext);
+  if (!controller) {
+    throw new Error("ContextMenuTrigger must be rendered inside ContextMenu");
+  }
+
+  return cloneElement(children, {
+    "aria-expanded": controller.isOpen,
+    "aria-haspopup": "menu",
+    onClick: (event: MouseEvent) => {
+      children.props.onClick?.(event);
+      if (event.defaultPrevented) {
+        return;
+      }
+      event.stopPropagation();
+      controller.toggleFromButton(event.currentTarget as HTMLElement);
+    },
+  });
+}

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

@@ -141,12 +141,18 @@ describe("CompactTabStrip", () => {
             label: "index.html",
             active: true,
             menuLabel: "File actions",
-            menuActions: [
+            menuGroups: [
               {
-                key: "preview",
-                icon: <span />,
-                label: "Open preview",
-                onClick: onAction,
+                key: "file",
+                items: [
+                  {
+                    key: "preview",
+                    icon: <span />,
+                    label: "Open preview",
+                    restoreFocus: false,
+                    onSelect: onAction,
+                  },
+                ],
               },
             ],
             onSelect,
@@ -160,7 +166,14 @@ describe("CompactTabStrip", () => {
     await user.click(menuTrigger);
     await user.click(screen.getByRole("menuitem", { name: "Open preview" }));
 
-    expect(onAction).toHaveBeenCalledTimes(1);
+    const tabItem = screen
+      .getByRole("button", { name: "index.html" })
+      .closest("[data-compact-tab-item]");
+    expect(tabItem).not.toBeNull();
+    fireEvent.contextMenu(tabItem!);
+    await user.click(screen.getByRole("menuitem", { name: "Open preview" }));
+
+    expect(onAction).toHaveBeenCalledTimes(2);
     expect(onSelect).not.toHaveBeenCalled();
     expect(document.activeElement).not.toBe(menuTrigger);
   });

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

@@ -2,10 +2,10 @@ import * as React from "react";
 import { MoreVertical, X } from "lucide-react";
 import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
 import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/shared/components/ui/popover";
+  ContextMenu,
+  ContextMenuTrigger,
+  type ContextMenuGroup,
+} from "@/shared/components/ui/context-menu/context-menu";
 import {
   Tooltip,
   TooltipContent,
@@ -26,7 +26,7 @@ export type CompactTabStripTab = {
   closeLabel?: string;
   closePlacement?: "leading-hover" | "trailing";
   menuLabel?: string;
-  menuActions?: readonly CompactTabStripAction[];
+  menuGroups?: readonly ContextMenuGroup[];
   onSelect: () => void;
   onClose?: () => void;
 };
@@ -64,73 +64,28 @@ function closeCompactTab(event: React.MouseEvent<HTMLButtonElement>, onClose: ()
 }
 
 function CompactTabMenu({ tab }: { tab: CompactTabStripTab }) {
-  const [open, setOpen] = React.useState(false);
-  const restoreTriggerFocus = React.useRef(true);
-  if (!tab.menuActions?.length) {
+  if (!tab.menuGroups?.some((group) => group.items.length > 0)) {
     return null;
   }
 
   const menuLabel = tab.menuLabel ?? tab.label;
   return (
-    <Popover
-      open={open}
-      onOpenChange={(nextOpen) => {
-        if (nextOpen) {
-          restoreTriggerFocus.current = true;
-        }
-        setOpen(nextOpen);
-      }}
+    <div
+      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",
+      )}
     >
-      <div
-        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",
-          open ? "ml-0 w-5 opacity-100" : null,
-        )}
-      >
-        <PopoverTrigger asChild>
-          <button
-            type="button"
-            aria-label={menuLabel}
-            onClick={(event) => event.stopPropagation()}
-            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>
-        </PopoverTrigger>
-      </div>
-      <PopoverContent
-        align="end"
-        className="w-40 rounded-xl p-1.5"
-        onClick={(event) => event.stopPropagation()}
-        onCloseAutoFocus={(event) => {
-          if (!restoreTriggerFocus.current) {
-            event.preventDefault();
-          }
-        }}
-      >
-        <div role="menu" aria-label={menuLabel}>
-          {tab.menuActions.map((action) => (
-            <button
-              key={action.key}
-              type="button"
-              role="menuitem"
-              disabled={action.disabled}
-              className="flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-xs text-gray-700 transition-colors hover:bg-gray-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:cursor-not-allowed disabled:opacity-45"
-              onClick={() => {
-                restoreTriggerFocus.current = false;
-                setOpen(false);
-                action.onClick();
-              }}
-            >
-              <span className="inline-flex h-4 w-4 shrink-0 items-center justify-center">
-                {action.icon}
-              </span>
-              <span>{action.label}</span>
-            </button>
-          ))}
-        </div>
-      </PopoverContent>
-    </Popover>
+      <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>
+    </div>
   );
 }
 
@@ -196,7 +151,7 @@ function CompactTabItem({
   | "tabBaseClassName"
 > & { itemRef?: React.Ref<HTMLDivElement>; tab: CompactTabStripTab }) {
   const leadingClose = tab.onClose && tab.closePlacement === "leading-hover";
-  return (
+  const item = (
     <div
       ref={itemRef}
       data-compact-tab-item=""
@@ -237,6 +192,12 @@ function CompactTabItem({
       ) : null}
     </div>
   );
+
+  return tab.menuGroups?.some((group) => group.items.length > 0) ? (
+    <ContextMenu groups={tab.menuGroups} label={tab.menuLabel ?? tab.label}>
+      {item}
+    </ContextMenu>
+  ) : item;
 }
 
 export function CompactTabStrip({

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

@@ -4,6 +4,7 @@ import {
   fetchConfigMeta,
   fetchConfigSchema,
   fetchProviders,
+  fetchProviderModelCatalog,
   fetchProviderTemplates,
   updateModel,
   updateSearch,
@@ -11,6 +12,7 @@ import {
   deleteProvider,
   updateProvider,
   testProviderConnection,
+  discoverProviderModels,
   startProviderAuth,
   pollProviderAuth,
   importProviderAuthFromCli,
@@ -21,6 +23,7 @@ import {
 } from '@/shared/lib/api';
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
+import type { ProvidersView } from '@/shared/lib/api';
 
 export function useConfig() {
   return useQuery({
@@ -56,6 +59,20 @@ export function useProviderTemplates() {
   });
 }
 
+export function useProviderModelCatalog(options: {
+  pollWhileRefreshing?: boolean;
+  refreshOnMount?: boolean;
+} = {}) {
+  return useQuery({
+    queryKey: ['provider-model-catalog'],
+    queryFn: fetchProviderModelCatalog,
+    staleTime: 30_000,
+    refetchInterval: (query) => options.pollWhileRefreshing && query.state.data?.refreshing ? 1_000 : false,
+    refetchOnMount: options.refreshOnMount ? 'always' : true,
+    refetchOnWindowFocus: true
+  });
+}
+
 export function useConfigSchema() {
   return useQuery({
     queryKey: ['config-schema'],
@@ -101,7 +118,15 @@ export function useUpdateProvider() {
   return useMutation({
     mutationFn: ({ provider, data }: { provider: string; data: unknown; silentSuccess?: boolean }) =>
       updateProvider(provider, data as Parameters<typeof updateProvider>[1]),
-    onSuccess: (_data, variables) => {
+    onSuccess: (data, variables) => {
+      queryClient.setQueryData<ProvidersView>(['providers'], (current) => current
+        ? {
+            providers: {
+              ...current.providers,
+              [variables.provider]: data,
+            },
+          }
+        : current);
       queryClient.invalidateQueries({ queryKey: ['providers'] });
       queryClient.invalidateQueries({ queryKey: ['config'] });
       if (!variables.silentSuccess) {
@@ -154,6 +179,13 @@ export function useTestProviderConnection() {
   });
 }
 
+export function useDiscoverProviderModels() {
+  return useMutation({
+    mutationFn: ({ provider, data }: { provider: string; data: unknown }) =>
+      discoverProviderModels(provider, data as Parameters<typeof discoverProviderModels>[1])
+  });
+}
+
 export function useStartProviderAuth() {
   return useMutation({
     mutationFn: ({ provider, data }: { provider: string; data?: unknown }) =>

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

@@ -154,6 +154,32 @@ describe('ncp-session-query-cache', () => {
     });
   });
 
+  it.each(['cancelled', 'failed'] as const)(
+    'clears a stale running overlay when a newer %s summary arrives',
+    (state) => {
+      const current = updateNcpSessionRunStatusList(createSessionsList(), {
+        sessionKey: 'session-1',
+        status: 'running'
+      });
+
+      const updated = upsertNcpSessionSummaryList(current, {
+        sessionId: 'session-1',
+        messageCount: 2,
+        createdAt: '2026-03-29T08:00:00.000Z',
+        updatedAt: '2026-03-29T10:01:00.000Z',
+        lastMessageAt: '2026-03-29T10:01:00.000Z',
+        status: 'idle',
+        metadata: { last_activity_preview: { state } }
+      });
+
+      expect(updated?.sessions[0]).toMatchObject({
+        sessionId: 'session-1',
+        messageCount: 2,
+        status: 'idle'
+      });
+    }
+  );
+
   it('applies realtime upsert/delete events to every ncp-sessions query cache entry', () => {
     const queryClient = new QueryClient();
     queryClient.setQueryData(['ncp-sessions', 200], createSessionsList());

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

@@ -5,20 +5,17 @@ function readSessionActivityAt(summary: NcpSessionSummaryView): string {
   return summary.lastMessageAt ?? summary.createdAt ?? summary.updatedAt;
 }
 
+function isSessionActivityRunning(summary: NcpSessionSummaryView): boolean {
+  return (summary.metadata?.last_activity_preview as { state?: unknown } | undefined)?.state === 'running';
+}
+
 function sortSessionSummaries(summaries: readonly NcpSessionSummaryView[]): NcpSessionSummaryView[] {
   return [...summaries].sort((left, right) => readSessionActivityAt(right).localeCompare(readSessionActivityAt(left)));
 }
 
-function shouldReplaceSessionSummary(
-  current: NcpSessionSummaryView,
-  next: NcpSessionSummaryView
-): boolean {
+function shouldReplaceSessionSummary(current: NcpSessionSummaryView, next: NcpSessionSummaryView): boolean {
   const timeOrder = next.updatedAt.localeCompare(current.updatedAt);
-  if (timeOrder !== 0) {
-    return timeOrder > 0;
-  }
-
-  return current.status === next.status || next.status === 'idle';
+  return timeOrder === 0 ? current.status === next.status || next.status === 'idle' : timeOrder > 0;
 }
 
 function queryKeyAcceptsSessionSummary(queryKey: readonly unknown[], summary: NcpSessionSummaryView): boolean {
@@ -44,7 +41,7 @@ export function upsertNcpSessionSummaryList(
           index === existingIndex && shouldReplaceSessionSummary(session, summary)
             ? {
                 ...summary,
-                status: session.status === 'running' && summary.status === 'idle' ? 'running' : summary.status
+                status: summary.status === 'idle' && isSessionActivityRunning(summary) ? session.status : summary.status
               }
             : session
         )

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

@@ -21,8 +21,14 @@ export type RuntimeEntryView = {
 };
 
 export type SessionContextWindowView = {
+  completeInputBudget?: boolean;
   usedContextTokens: number;
   totalContextTokens: number;
+  fixedInputTokens?: number;
+  dynamicInputTokens?: number;
+  reservedContextTokens?: number;
+  triggerContextTokens?: number;
+  availableBeforeCompactionTokens?: number;
   prunedUsedContextTokens: number;
   availableContextTokens: number;
   droppedHistoryCount: number;

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

@@ -102,6 +102,11 @@ export type ProviderConnectionTestRequest = ProviderConfigUpdate & {
   model?: string | null;
 };
 
+export type ProviderModelDiscoveryRequest = Pick<
+  ProviderConfigUpdate,
+  'apiKey' | 'apiBase' | 'extraHeaders'
+>;
+
 export type ProviderCreateRequest = ProviderConfigUpdate & {
   providerId?: string | null;
 };
@@ -135,7 +140,31 @@ export type ProviderConnectionTestResult = {
   hint?: string;
 };
 
-export type SearchProviderName = "bocha" | "tavily" | "brave";
+export type ProviderModelDiscoveryResult = {
+  provider: string;
+  models: string[];
+  source: 'provider' | 'catalog';
+  fetchedAt: string;
+};
+
+export type ProviderModelCatalogView = {
+  refreshIntervalMs: number;
+  refreshing: boolean;
+  lastRefreshStartedAt: string | null;
+  lastRefreshCompletedAt: string | null;
+  providers: Record<string, {
+    providerId: string;
+    models: string[];
+    source: 'provider' | 'catalog' | null;
+    fetchedAt: string | null;
+    lastError: {
+      message: string;
+      occurredAt: string;
+    } | null;
+  }>;
+};
+
+export type SearchProviderName = "bocha" | "tavily" | "brave" | "exa";
 export type BochaFreshnessValue = "noLimit" | "oneDay" | "oneWeek" | "oneMonth" | "oneYear" | string;
 export type TavilySearchDepthValue = "basic" | "advanced";
 
@@ -161,6 +190,7 @@ export type SearchConfigView = {
     bocha: SearchProviderConfigView;
     tavily: SearchProviderConfigView;
     brave: SearchProviderConfigView;
+    exa: SearchProviderConfigView;
   };
 };
 
@@ -188,6 +218,10 @@ export type SearchConfigUpdate = {
       apiKey?: string | null;
       baseUrl?: string | null;
     };
+    exa?: {
+      apiKey?: string | null;
+      baseUrl?: string | null;
+    };
   };
 };
 
@@ -651,6 +685,7 @@ export type ProviderTemplateView = {
     supportsCliImport?: boolean;
   };
   defaultModels?: string[];
+  supportsModelDiscovery?: boolean;
   modelConfig?: Record<string, {
     thinking?: { supported: ThinkingLevel[]; default?: ThinkingLevel | null };
     vision?: boolean;