@nextclaw/ui 0.15.10 → 0.15.12

package/src/shared/components/actions/__tests__/navigation-link.test.tsx

@@ -0,0 +1,47 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { NavigationLink } from "@/shared/components/actions/navigation-link";
+
+const mocks = vi.hoisted(() => ({
+  openExternalUrl: vi.fn(),
+}));
+
+vi.mock("@/shared/lib/host-capabilities", () => ({
+  hostCapabilityManager: {
+    openExternalUrl: mocks.openExternalUrl,
+  },
+}));
+
+describe("NavigationLink", () => {
+  beforeEach(() => {
+    mocks.openExternalUrl.mockReset();
+  });
+
+  it("exposes external destinations as links and delegates normal clicks to the host", () => {
+    render(
+      <NavigationLink href="https://docs.nextclaw.io/" external>
+        View docs
+      </NavigationLink>,
+    );
+
+    const link = screen.getByRole("link", { name: "View docs" });
+    expect(link.getAttribute("href")).toBe("https://docs.nextclaw.io/");
+    expect(link.getAttribute("target")).toBe("_blank");
+    expect(link.getAttribute("rel")).toContain("noopener");
+    expect(screen.queryByRole("button", { name: "View docs" })).toBeNull();
+
+    fireEvent.click(link);
+
+    expect(mocks.openExternalUrl).toHaveBeenCalledWith(
+      "https://docs.nextclaw.io/",
+    );
+  });
+
+  it("keeps same-page links on the browser navigation path", () => {
+    render(<NavigationLink href="/settings">Settings</NavigationLink>);
+
+    const link = screen.getByRole("link", { name: "Settings" });
+    expect(link.getAttribute("target")).toBeNull();
+    expect(mocks.openExternalUrl).not.toHaveBeenCalled();
+  });
+});

package/src/shared/components/actions/navigation-link.tsx

@@ -0,0 +1,116 @@
+import type {
+  ComponentPropsWithoutRef,
+  MouseEvent,
+  ReactNode,
+} from "react";
+import { ExternalLink as ExternalLinkIcon, type LucideIcon } from "lucide-react";
+import { hostCapabilityManager } from "@/shared/lib/host-capabilities";
+import { cn } from "@/shared/lib/utils";
+
+type NavigationLinkProps = Omit<
+  ComponentPropsWithoutRef<"a">,
+  "children" | "href"
+> & {
+  children: ReactNode;
+  external?: boolean;
+  href: string;
+  icon?: LucideIcon | null;
+  iconPosition?: "leading" | "trailing";
+  size?: "xs" | "sm";
+};
+
+const LINK_SIZE_CLASS = {
+  xs: "gap-1.5 text-xs",
+  sm: "gap-1.5 text-sm",
+} as const;
+
+const LINK_ICON_SIZE_CLASS = {
+  xs: "h-3.5 w-3.5",
+  sm: "h-4 w-4",
+} as const;
+
+function shouldUseHostNavigation(event: MouseEvent<HTMLAnchorElement>): boolean {
+  return (
+    event.button === 0 &&
+    !event.altKey &&
+    !event.ctrlKey &&
+    !event.metaKey &&
+    !event.shiftKey
+  );
+}
+
+function resolveExternalRel(rel?: string): string {
+  return Array.from(
+    new Set(`${rel ?? ""} noopener noreferrer`.trim().split(/\s+/)),
+  ).join(" ");
+}
+
+function resolveExternalHttpUrl(href: string): string | null {
+  try {
+    const url = new URL(href, window.location.href);
+    return url.protocol === "http:" || url.protocol === "https:"
+      ? url.toString()
+      : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Shared navigation primitive for visible URL destinations.
+ * External links retain native link semantics while delegating ordinary clicks
+ * to the desktop host when one is available.
+ */
+export function NavigationLink({
+  children,
+  className,
+  external = false,
+  href,
+  icon,
+  iconPosition = "leading",
+  onClick,
+  rel,
+  size = "sm",
+  target,
+  ...props
+}: NavigationLinkProps) {
+  const Icon = icon === undefined && external ? ExternalLinkIcon : icon;
+  const linkIcon = Icon ? (
+    <Icon
+      aria-hidden="true"
+      className={cn("shrink-0", LINK_ICON_SIZE_CLASS[size])}
+    />
+  ) : null;
+
+  return (
+    <a
+      {...props}
+      href={href}
+      target={external ? target ?? "_blank" : target}
+      rel={external ? resolveExternalRel(rel) : rel}
+      className={cn(
+        "inline-flex items-center rounded-sm font-medium text-primary underline-offset-4 transition-colors hover:text-primary-hover hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/25",
+        LINK_SIZE_CLASS[size],
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        const externalHttpUrl = external
+          ? resolveExternalHttpUrl(href)
+          : null;
+        if (
+          externalHttpUrl &&
+          !event.defaultPrevented &&
+          shouldUseHostNavigation(event)
+        ) {
+          event.preventDefault();
+          void hostCapabilityManager.openExternalUrl(externalHttpUrl);
+        }
+      }}
+    >
+      {iconPosition === "leading" ? linkIcon : null}
+      {children}
+      {iconPosition === "trailing" ? linkIcon : null}
+    </a>
+  );
+}

package/src/shared/components/common/__tests__/brand-header.test.tsx

@@ -128,7 +128,7 @@ describe('BrandHeader', () => {
     const downloadProgress = screen.getByText('下载 50%');
     expect(downloadProgress).toBeTruthy();
     expect(screen.queryByRole('button', { name: '更新' })).toBeNull();
-    const progressReleaseNotes = screen.getByRole('button', { name: '查看 v0.18.12 更新说明' });
+    const progressReleaseNotes = screen.getByRole('link', { name: '查看 v0.18.12 更新说明' });
     expect(progressReleaseNotes.parentElement?.className).toContain('invisible');
     expect(progressReleaseNotes.parentElement?.className).toContain('group-hover/update-release-notes:visible');
 
@@ -147,7 +147,7 @@ describe('BrandHeader', () => {
 
     renderBrandHeader({ productVersion: '0.23.0' });
 
-    const version = await screen.findByRole('button', {
+    const version = await screen.findByRole('link', {
       name: '当前版本 v0.23.0，查看 v0.23.0 更新说明'
     });
 
@@ -194,14 +194,14 @@ describe('BrandHeader', () => {
 
     renderBrandHeader();
 
-    const currentVersion = await screen.findByRole('button', {
+    const currentVersion = await screen.findByRole('link', {
       name: '当前版本 v0.18.11，查看 v0.18.11 更新说明'
     });
     await user.click(currentVersion);
     expect(mocks.openExternalUrl).toHaveBeenCalledWith('https://docs.nextclaw.io/zh/notes/2026-07-14-nextclaw-v0-18-11');
 
     const downloadUpdate = screen.getByRole('button', { name: '下载' });
-    const updateReleaseNotes = screen.getByRole('button', { name: '查看 v0.18.12 更新说明' });
+    const updateReleaseNotes = screen.getByRole('link', { name: '查看 v0.18.12 更新说明' });
     expect(updateReleaseNotes.parentElement?.className).toContain('group-hover/update-release-notes:visible');
 
     await user.hover(downloadUpdate);
@@ -241,7 +241,7 @@ describe('BrandHeader', () => {
     renderBrandHeader();
 
     const applyUpdate = screen.getByRole('button', { name: '更新' });
-    const updateReleaseNotes = screen.getByRole('button', { name: '查看 v0.18.12 更新说明' });
+    const updateReleaseNotes = screen.getByRole('link', { name: '查看 v0.18.12 更新说明' });
     expect(updateReleaseNotes.parentElement?.className).toContain('group-focus-within/update-release-notes:visible');
 
     fireEvent.focus(applyUpdate);

package/src/shared/components/common/__tests__/searchable-model-input.test.tsx

@@ -1,9 +1,33 @@
 import { fireEvent, render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { describe, expect, it, vi } from 'vitest';
 import { SearchableModelInput } from '@/shared/components/common/searchable-model-input';
 import { createPopoverAvailableHeightLimit } from '@/shared/components/ui/popover';
 
 describe('SearchableModelInput', () => {
+  it('keeps the option panel open when the focused input is clicked again', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <SearchableModelInput
+        value="model-1"
+        onChange={vi.fn()}
+        options={['model-1', 'model-2']}
+        placeholder="Model"
+        emptyText="No models"
+        createText="Use {value}"
+        toggleLabel="Toggle models"
+      />
+    );
+
+    const input = screen.getByPlaceholderText('Model');
+    await user.click(input);
+    expect(await screen.findByRole('button', { name: 'model-1' })).toBeTruthy();
+
+    await user.click(input);
+    expect(screen.getByRole('button', { name: 'model-1' })).toBeTruthy();
+  });
+
   it('keeps the model option panel bounded with an internal scroll region', async () => {
     render(
       <SearchableModelInput

package/src/shared/components/common/brand-header.tsx

@@ -10,8 +10,8 @@ import {
 import { useAppMeta } from '@/shared/hooks/use-app-meta';
 import type { ReactNode } from 'react';
 import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
+import { NavigationLink } from '@/shared/components/actions/navigation-link';
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/shared/components/ui/tooltip';
-import { hostCapabilityManager } from '@/shared/lib/host-capabilities';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
 
@@ -83,14 +83,15 @@ function BrandVersionLabel({
       ].join('\n')
     : versionLabel;
   const trigger = releaseNotesLink ? (
-    <button
-      type="button"
+    <NavigationLink
+      href={releaseNotesLink.url}
+      external
+      icon={null}
       aria-label={t('desktopUpdatesVersionReleaseNotesLabel').replace('{currentVersion}', versionLabel).replace('{releaseVersion}', releaseNotesLink.versionLabel)}
-      className={cn(triggerClassName, 'border-0 bg-transparent p-0 text-left')}
-      onClick={() => void hostCapabilityManager.openExternalUrl(releaseNotesLink.url)}
+      className={cn(triggerClassName, 'p-0 text-left')}
     >
       {versionLabel}
-    </button>
+    </NavigationLink>
   ) : (
     <span tabIndex={0} aria-label={versionLabel} className={triggerClassName}>
       {versionLabel}
@@ -175,14 +176,15 @@ function RuntimeUpdateReleaseNotesHover({
         data-update-release-notes-hover="true"
         className="invisible pointer-events-none absolute left-1/2 top-full z-[var(--z-tooltip,10150)] -translate-x-1/2 pt-1 opacity-0 transition-opacity group-hover/update-release-notes:visible group-hover/update-release-notes:pointer-events-auto group-hover/update-release-notes:opacity-100 group-focus-within/update-release-notes:visible group-focus-within/update-release-notes:pointer-events-auto group-focus-within/update-release-notes:opacity-100"
       >
-        <button
-          type="button"
+        <NavigationLink
+          href={link.url}
+          external
+          icon={null}
           aria-label={label}
           className="whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-left text-xs font-medium text-popover-foreground shadow-md outline-none transition-colors hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-gray-300"
-          onClick={() => void hostCapabilityManager.openExternalUrl(link.url)}
         >
           {label}
-        </button>
+        </NavigationLink>
       </span>
     </span>
   );

package/src/shared/components/common/searchable-model-input.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { Check, ChevronsUpDown } from 'lucide-react';
 import { Input } from '@/shared/components/ui/input';
 import {
@@ -28,14 +28,7 @@ type SearchableModelInputProps = {
 const SEARCHABLE_MODEL_MENU_MAX_HEIGHT = createPopoverAvailableHeightLimit('15rem');
 
 function normalizeOptions(options: string[]): string[] {
-  const deduped = new Set<string>();
-  for (const option of options) {
-    const trimmed = option.trim();
-    if (trimmed.length > 0) {
-      deduped.add(trimmed);
-    }
-  }
-  return [...deduped];
+  return [...new Set(options.map((option) => option.trim()).filter(Boolean))];
 }
 
 export function SearchableModelInput({
@@ -54,6 +47,7 @@ export function SearchableModelInput({
   onEnter
 }: SearchableModelInputProps) {
   const [open, setOpen] = useState(false);
+  const anchorRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (disabled && open) {
@@ -95,7 +89,7 @@ export function SearchableModelInput({
       onOpenChange={(nextOpen) => setOpen(!disabled && nextOpen)}
     >
       <PopoverAnchor asChild>
-        <div className={cn('relative', className)}>
+        <div ref={anchorRef} className={cn('relative', className)}>
           <Input
             id={id}
             value={value}
@@ -141,6 +135,11 @@ export function SearchableModelInput({
       <PopoverContent
         align="start"
         className="flex w-[var(--radix-popover-trigger-width)] min-w-[12rem] flex-col overflow-hidden rounded-xl border border-gray-200 p-0 shadow-lg"
+        onInteractOutside={(event) => {
+          if (event.target instanceof Node && anchorRef.current?.contains(event.target)) {
+            event.preventDefault();
+          }
+        }}
         onOpenAutoFocus={(event) => event.preventDefault()}
         style={{ maxHeight: SEARCHABLE_MODEL_MENU_MAX_HEIGHT }}
       >

package/src/shared/components/config-split-page.tsx

@@ -1,87 +1,92 @@
-import { Children, type ButtonHTMLAttributes, type HTMLAttributes } from "react";
-import { ArrowLeft, type LucideIcon } from "lucide-react";
-import { t } from "@/shared/lib/i18n";
-import { cn } from "@/shared/lib/utils";
+import { Children, type ButtonHTMLAttributes, type HTMLAttributes, useEffect, useRef, useState } from 'react';
+import { ArrowLeft, type LucideIcon } from 'lucide-react';
+import { t } from '@/shared/lib/i18n';
+import { cn } from '@/shared/lib/utils';
 
-const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-border/75 bg-card text-card-foreground xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
-type DivProps = HTMLAttributes<HTMLDivElement>; type SectionProps = HTMLAttributes<HTMLElement>;
-
-function ConfigSplitPane({ className, ...props }: SectionProps) {
-  return <section className={cn(CARD_CLASS, "flex flex-col", className)} {...props} />;
-}
+const PANE_CLASS = 'min-w-0 overflow-hidden bg-card/70 text-card-foreground md:h-[calc(100vh-180px)] md:max-h-[860px]';
+const SHELL_CLASS = 'min-h-0 overflow-hidden rounded-2xl bg-muted/30 ring-1 ring-border/45';
+const COMPACT_WIDTH = 640;
+type DivProps = HTMLAttributes<HTMLDivElement>;
+type SectionProps = HTMLAttributes<HTMLElement>;
 
 export function ConfigSplitPage({
   className,
   children,
-  mobileView,
+  compactView,
   onMobileBack,
   mobileListLabel,
   ...props
 }: DivProps & {
-  mobileView?: "list" | "detail";
+  compactView?: 'list' | 'detail';
   onMobileBack?: () => void;
   mobileListLabel?: string;
 }) {
+  const rootRef = useRef<HTMLDivElement>(null);
+  const [isCompact, setIsCompact] = useState(false);
   const childArray = Children.toArray(children);
   const [sidebarChild, detailChild, ...remainingChildren] = childArray;
 
-  if (mobileView && sidebarChild && detailChild) {
-    return (
-      <div
-        className={cn("grid min-h-0 grid-cols-1 gap-4", className)}
-        {...props}
-      >
-        {mobileView === "detail" ? (
-          <>
-            <div className="shrink-0">
+  useEffect(() => {
+    const root = rootRef.current;
+    if (!root || !compactView || typeof ResizeObserver === 'undefined') return;
+    const update = () => setIsCompact(root.clientWidth > 0 && root.clientWidth < COMPACT_WIDTH);
+    const observer = new ResizeObserver(update);
+    observer.observe(root);
+    update();
+    return () => observer.disconnect();
+  }, [compactView]);
+
+  const shouldUseCompactView = Boolean(isCompact && compactView && sidebarChild && detailChild);
+
+  return (
+    <div ref={rootRef} className={cn('min-h-0 md:flex-1', className)} {...props}>
+      {shouldUseCompactView ? (
+        <div className='space-y-3'>
+          {compactView === 'detail' ? (
+            <>
               <button
-                type="button"
+                type='button'
                 onClick={onMobileBack}
-                className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
+                className='inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40'
               >
-                <ArrowLeft className="h-4 w-4" />
-                <span>{mobileListLabel ?? t("backToMain")}</span>
+                <ArrowLeft className='h-4 w-4' />
+                <span>{mobileListLabel ?? t('backToMain')}</span>
               </button>
-            </div>
-            {detailChild}
-            {remainingChildren}
-          </>
-        ) : (
-          <>
-            {sidebarChild}
-            {remainingChildren}
-          </>
-        )}
-      </div>
-    );
-  }
-
-  return (
-    <div
-      className={cn(
-        "grid min-h-0 grid-cols-1 gap-5 xl:flex-1 xl:grid-cols-[340px_minmax(0,1fr)]",
-        className,
+              <div className={SHELL_CLASS}>{detailChild}</div>
+            </>
+          ) : (
+            <div className={SHELL_CLASS}>{sidebarChild}</div>
+          )}
+          {remainingChildren}
+        </div>
+      ) : (
+        <div className={cn(SHELL_CLASS, 'grid grid-cols-1 md:grid-cols-[minmax(240px,30%)_minmax(0,1fr)]')}>
+          {children}
+        </div>
       )}
-      {...props}
-    >
-      {children}
     </div>
   );
 }
 
-export { ConfigSplitPane as ConfigSplitSidebar, ConfigSplitPane as ConfigSplitDetailPane };
+export function ConfigSplitSidebar({ className, ...props }: SectionProps) {
+  return <section className={cn(PANE_CLASS, 'flex flex-col md:border-r md:border-border/55', className)} {...props} />;
+}
+
+export function ConfigSplitDetailPane({ className, ...props }: SectionProps) {
+  return <section className={cn(PANE_CLASS, 'flex flex-col', className)} {...props} />;
+}
 
 export function ConfigSplitEmptyPane({ className, ...props }: SectionProps) {
   return (
     <section
-      className={cn(CARD_CLASS, "flex items-center justify-center px-6 py-12 text-center", className)}
+      className={cn(PANE_CLASS, 'flex items-center justify-center px-6 py-12 text-center', className)}
       {...props}
     />
   );
 }
 
 export function ConfigSplitPaneHeader({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-b border-border/70", className)} {...props} />;
+  return <div className={cn('shrink-0 border-b border-border/70', className)} {...props} />;
 }
 
 export function ConfigSplitPaneBody({
@@ -92,9 +97,9 @@ export function ConfigSplitPaneBody({
   return (
     <div
       className={cn(
-        "min-h-0 flex-1",
-        scrollOnDesktop && "overflow-visible xl:overflow-y-auto xl:overscroll-contain",
-        className,
+        'min-h-0 flex-1',
+        scrollOnDesktop && 'overflow-visible md:overflow-y-auto md:overscroll-contain',
+        className
       )}
       {...props}
     />
@@ -102,24 +107,24 @@ export function ConfigSplitPaneBody({
 }
 
 export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-t border-border/70 px-4 py-2.5", className)} {...props} />;
+  return <div className={cn('shrink-0 border-t border-border/70 px-4 py-2.5', className)} {...props} />;
 }
 
 export function ConfigSelectionCard({
   active = false,
   className,
-  type = "button",
+  type = 'button',
   ...props
 }: ButtonHTMLAttributes<HTMLButtonElement> & { active?: boolean }) {
   return (
     <button
       type={type}
       className={cn(
-        "w-full rounded-xl border p-2.5 text-left transition-colors",
+        'w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
         active
-          ? "border-border/70 bg-muted/65 text-foreground"
-          : "border-transparent bg-transparent text-muted-foreground hover:border-border/50 hover:bg-muted/40 hover:text-foreground",
-        className,
+          ? 'bg-background/95 text-foreground shadow-sm'
+          : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground',
+        className
       )}
       {...props}
     />
@@ -140,16 +145,16 @@ export function ConfigSplitEmptyState({
   return (
     <div
       className={cn(
-        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-border/70 bg-muted/35 px-4 py-10 text-center",
-        className,
+        'flex min-h-[220px] flex-col items-center justify-center rounded-xl bg-background/55 px-4 py-10 text-center',
+        className
       )}
       {...props}
     >
-      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-card">
-        <Icon className="h-5 w-5 text-muted-foreground/45" />
+      <div className='mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-card'>
+        <Icon className='h-5 w-5 text-muted-foreground/45' />
       </div>
-      <p className="text-sm font-medium text-foreground">{title}</p>
-      {description ? <p className="mt-2 text-xs text-muted-foreground">{description}</p> : null}
+      <p className='text-sm font-medium text-foreground'>{title}</p>
+      {description ? <p className='mt-2 text-xs text-muted-foreground'>{description}</p> : null}
     </div>
   );
 }

package/src/shared/components/doc-browser/doc-browser-panel-parts.tsx

@@ -1,6 +1,5 @@
 import type { PointerEventHandler, ReactNode, Ref } from 'react';
 import {
-  ExternalLink,
   RefreshCw,
   Search,
 } from 'lucide-react';
@@ -9,6 +8,7 @@ import {
   type DocBrowserTab,
 } from './doc-browser-context';
 import { IconActionButton } from '@/shared/components/ui/actions/icon-action-button';
+import { NavigationLink } from '@/shared/components/actions/navigation-link';
 import { t } from '@/shared/lib/i18n';
 
 type DocBrowserAddressToolbarProps = {
@@ -119,16 +119,15 @@ export function DocBrowserExternalLink({ currentUrl, isVisible }: { currentUrl:
 
   return (
     <div className="flex items-center justify-between border-t border-border/70 bg-muted/55 px-4 py-2 shrink-0">
-      <a
+      <NavigationLink
         href={currentUrl}
-        target="_blank"
-        rel="noopener noreferrer"
+        external
+        iconPosition="trailing"
+        size="xs"
         data-doc-external
-        className="flex items-center gap-1.5 text-xs text-primary hover:text-primary-hover font-medium transition-colors"
       >
         {label}
-        <ExternalLink className="w-3 h-3" />
-      </a>
+      </NavigationLink>
     </div>
   );
 }