@nextclaw/ui 0.13.13 → 0.14.0

package/src/{shared/components/search-config.test.tsx → features/settings/pages/__tests__/search-config-page.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SearchConfig } from '@/shared/components/search-config';
+import { SearchConfigPage } from '@/features/settings/pages/search-config-page';
 import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
@@ -78,7 +78,7 @@ vi.mock('@/shared/hooks/use-config', () => ({
   })
 }));
 
-describe('SearchConfig', () => {
+describe('SearchConfigPage', () => {
   beforeEach(() => {
     setLanguage('zh');
     mocks.mutate.mockReset();
@@ -96,7 +96,7 @@ describe('SearchConfig', () => {
   it('renders Tavily-specific controls and submits Tavily config through updateSearch', async () => {
     const user = userEvent.setup();
 
-    render(<SearchConfig />);
+    render(<SearchConfigPage />);
 
     expect(screen.getByRole('heading', { name: 'Tavily Search' })).toBeTruthy();
     expect(screen.getByText('搜索深度')).toBeTruthy();

package/src/{shared/components/config/secrets-config.test.tsx → features/settings/pages/__tests__/secrets-config-page.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { SecretsConfig } from '@/shared/components/config/secrets-config';
+import { SecretsConfigPage } from '@/features/settings/pages/secrets-config-page';
 import { setLanguage } from '@/shared/lib/i18n';
 
 const mocks = vi.hoisted(() => ({
@@ -39,7 +39,7 @@ vi.mock('@/shared/hooks/use-config', () => ({
   }),
 }));
 
-describe('SecretsConfig', () => {
+describe('SecretsConfigPage', () => {
   beforeEach(() => {
     setLanguage('zh');
     mocks.mutate.mockReset();
@@ -57,7 +57,7 @@ describe('SecretsConfig', () => {
   it('submits the loaded secrets config through updateSecrets', async () => {
     const user = userEvent.setup();
 
-    render(<SecretsConfig />);
+    render(<SecretsConfigPage />);
 
     expect(screen.getByText('Secret Providers')).toBeTruthy();
     expect(screen.getByDisplayValue('vault-env')).toBeTruthy();

package/src/{shared/components/model-config.tsx → features/settings/pages/model-config-page.tsx}

@@ -83,7 +83,7 @@ function ModelConfigForm(props: {
   );
 }
 
-export function ModelConfig() {
+export function ModelConfigPage() {
   const { data: config, isLoading } = useConfig();
   const { data: providersView } = useProviders();
   const { data: templatesView } = useProviderTemplates();

package/src/{shared/components/config/providers-list.tsx → features/settings/pages/providers-config-page.tsx}

@@ -8,10 +8,10 @@ import { Input } from '@/shared/components/ui/input';
 import { Switch } from '@/shared/components/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/shared/components/ui/popover';
 import { ConfirmDialog } from '@/shared/components/ui/confirm-dialog';
-import { StatusDot } from '@/shared/components/ui/status-dot';
+import { StatusDot } from '@/shared/components/status/status-dot';
 import { t } from '@/shared/lib/i18n';
 import { cn } from '@/shared/lib/utils';
-import { ProviderForm } from '@/shared/components/config/provider-form';
+import { ProviderForm } from '@/features/settings/components/config/provider-form';
 import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import {
   ConfigSplitEmptyState,
@@ -70,7 +70,7 @@ function sortTemplatesForPicker<T extends { providerType: string }>(templates: T
     .map(({ template }) => template);
 }
 
-export function ProvidersList() {
+export function ProvidersConfigPage() {
   const { isMobile } = useViewportLayout();
   const { data: providersView } = useProviders();
   const { data: templatesView } = useProviderTemplates();

package/src/{shared/components/search-config.tsx → features/settings/pages/search-config-page.tsx}

@@ -469,7 +469,7 @@ function SearchConfigForm(props: {
   );
 }
 
-export function SearchConfig() {
+export function SearchConfigPage() {
   const { data: config } = useConfig();
   const { data: meta } = useConfigMeta();
   const updateSearch = useUpdateSearch();

package/src/{shared/components/config/secrets-config.tsx → features/settings/pages/secrets-config-page.tsx}

@@ -1,8 +1,8 @@
 import { useConfig, useUpdateSecrets } from '@/shared/hooks/use-config';
 import { t } from '@/shared/lib/i18n';
-import { buildSecretsFormState, buildSecretsSubmitPayload, SecretsConfigForm } from '@/shared/components/config/secrets-config-form';
+import { buildSecretsFormState, buildSecretsSubmitPayload, SecretsConfigForm } from '@/features/settings/components/config/secrets-config-form';
 
-export function SecretsConfig() {
+export function SecretsConfigPage() {
   const { data: config, isLoading } = useConfig();
   const updateSecrets = useUpdateSecrets();
 

package/src/{shared/components/config/provider-form-support.test.ts → features/settings/utils/__tests__/provider-form-support.utils.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { resolveEditableModels, serializeModelsForSave } from './provider-form-support';
+import { resolveEditableModels, serializeModelsForSave } from '../provider-form-support.utils';
 
 describe('provider form model defaults', () => {
   it('keeps persisted empty models empty', () => {

package/src/features/system-status/components/{runtime-control-card.test.tsx → __tests__/runtime-control-card.test.tsx}

@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import { toast } from 'sonner';
-import { RuntimeControlCard } from './runtime-control-card';
+import { RuntimeControlCard } from '../runtime-control-card';
 import { setLanguage } from '@/shared/lib/i18n';
 
 const baseControlView = {

package/src/features/system-status/components/{runtime-presence-card.test.tsx → __tests__/runtime-presence-card.test.tsx}

@@ -1,7 +1,7 @@
 import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { RuntimePresenceCard } from './runtime-presence-card';
+import { RuntimePresenceCard } from '../runtime-presence-card';
 import { setLanguage } from '@/shared/lib/i18n';
 import { useDesktopPresenceStore } from '@/platforms/desktop';
 

package/src/features/system-status/components/runtime-presence-card.tsx

@@ -6,8 +6,8 @@ import {
   CardHeader,
   CardTitle,
 } from "@/shared/components/ui/card";
-import { NoticeCard } from "@/shared/components/ui/notice-card";
-import { SettingRow } from "@/shared/components/ui/setting-row";
+import { NoticeCard } from "@/shared/components/feedback/notice-card";
+import { SettingRow } from "@/shared/components/settings/setting-row";
 import { Switch } from "@/shared/components/ui/switch";
 import {
   desktopPresenceManager,

package/src/features/system-status/managers/{system-status.manager.bootstrap-polling.test.ts → __tests__/system-status.manager.bootstrap-polling.test.ts}

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { systemStatusManager } from './system-status.manager';
+import { systemStatusManager } from '../system-status.manager';
 import { appQueryClient } from '@/app-query-client';
 import type { BootstrapStatusView } from '@/shared/lib/api';
 

package/src/features/system-status/managers/{system-status.manager.test.ts → __tests__/system-status.manager.test.ts}

@@ -1,7 +1,7 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
 import type { BootstrapStatusView } from '@/shared/lib/api';
 import { appQueryClient } from '@/app-query-client';
-import { systemStatusManager } from './system-status.manager';
+import { systemStatusManager } from '../system-status.manager';
 import { isTransientRuntimeConnectionErrorMessage } from '@/shared/lib/transport';
 import { useSystemStatusStore } from '@/features/system-status/stores/system-status.store';
 

package/src/features/system-status/utils/{system-status.utils.test.ts → __tests__/system-status.utils.test.ts}

@@ -2,7 +2,7 @@ import { describe, expect, it } from 'vitest';
 import {
   resolveSystemConnectionStatus,
   toSystemStatusView,
-} from './system-status.utils';
+} from '../system-status.utils';
 
 describe('resolveSystemConnectionStatus', () => {
   it('maps cold-starting to connecting', () => {

package/src/shared/components/common/{agent-avatar.test.tsx → __tests__/agent-avatar.test.tsx}

@@ -1,6 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import { describe, expect, it } from 'vitest';
-import { AgentAvatar } from './agent-avatar';
+import { AgentAvatar } from '../agent-avatar';
 
 describe('AgentAvatar', () => {
   it('uses the configured image for the main agent before fallback', () => {

package/src/shared/components/common/agent-identity/use-agent-identity.ts

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import type { AgentProfileView } from '@/shared/lib/api';
-import { useChatThreadStore } from '@/features/chat';
 import { useAgents } from '@/shared/hooks/use-agents';
 
 export type ResolvedAgentIdentity = {
@@ -11,11 +10,10 @@ export type ResolvedAgentIdentity = {
 };
 
 function buildAgentProfileMap(
-  scopedAgents: readonly AgentProfileView[],
   queryAgents: readonly AgentProfileView[],
 ): Map<string, AgentProfileView> {
   return new Map(
-    [...queryAgents, ...scopedAgents]
+    queryAgents
       .filter((agent) => typeof agent.id === 'string' && agent.id.trim().length > 0)
       .map((agent) => [agent.id, agent]),
   );
@@ -25,14 +23,11 @@ export function useAgentIdentity(
   agentId?: string | null,
 ): ResolvedAgentIdentity | null {
   const normalizedAgentId = agentId?.trim() ?? '';
-  const scopedAgents = useChatThreadStore(
-    (state) => state.snapshot.availableAgents ?? [],
-  );
   const agentsQuery = useAgents();
 
   const agentById = useMemo(
-    () => buildAgentProfileMap(scopedAgents, agentsQuery.data?.agents ?? []),
-    [agentsQuery.data?.agents, scopedAgents],
+    () => buildAgentProfileMap(agentsQuery.data?.agents ?? []),
+    [agentsQuery.data?.agents],
   );
 
   return useMemo(() => {

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

@@ -1,6 +1,6 @@
 import type { UpdateSnapshot } from '@nextclaw/shared';
 import { runtimeUpdateManager, useRuntimeUpdateStore } from '@/features/system-status';
-import { useAppMeta } from '@/shared/hooks/use-config';
+import { useAppMeta } from '@/shared/hooks/use-app-meta';
 import { type ReactNode, useState } from 'react';
 import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
 import { t } from '@/shared/lib/i18n';

package/src/shared/components/common/tag-input.tsx

@@ -2,7 +2,7 @@ import { useState } from "react";
 import { X } from "lucide-react";
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
-import { TagChip } from "@/shared/components/ui/tag-chip";
+import { TagChip } from "@/shared/components/tags/tag-chip";
 
 interface TagInputProps {
   value: string[];

package/src/shared/components/doc-browser/{doc-browser-context.test.tsx → __tests__/doc-browser-context.test.tsx}

@@ -1,6 +1,6 @@
 import { act, renderHook, waitFor } from '@testing-library/react';
 import type { ReactNode } from 'react';
-import { DocBrowserProvider, useDocBrowser } from './doc-browser-context';
+import { DocBrowserProvider, useDocBrowser } from '../doc-browser-context';
 import { RightPanelResourceRouteResolver } from '@/features/right-panel-resources';
 import { DocBrowserManager } from '@/shared/components/doc-browser/managers/doc-browser.manager';
 import { createDefaultDocBrowserState } from '@/shared/components/doc-browser/utils/doc-browser-state.utils';

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

@@ -1,4 +1,4 @@
-import type { ButtonHTMLAttributes, PointerEvent, ReactElement } from "react";
+import type { PointerEvent } from "react";
 import {
   ArrowLeft,
   ArrowRight,
@@ -10,14 +10,13 @@ import {
   X,
 } from "lucide-react";
 import type { DocBrowserDockState, DocBrowserTab } from "./doc-browser-context";
+import {
+  CompactTabStrip,
+  type CompactTabStripAction,
+  type CompactTabStripTab,
+} from "@/shared/components/ui/tab-strip/compact-tab-strip";
 import { cn } from "@/shared/lib/utils";
 import { t } from "@/shared/lib/i18n";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/shared/components/ui/tooltip";
 
 type DocBrowserTabStripProps = {
   tabs: DocBrowserTab[];
@@ -38,53 +37,6 @@ type DocBrowserTabStripProps = {
   onToggleMode: () => void;
 };
 
-type DocBrowserIconActionButtonProps = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  "children" | "type"
-> & {
-  disabled?: boolean;
-  icon: ReactElement;
-  label: string;
-  variant?: "tab" | "toolbar";
-};
-
-function DocBrowserIconActionButton({
-  className,
-  disabled = false,
-  icon,
-  label,
-  variant = "toolbar",
-  ...buttonProps
-}: DocBrowserIconActionButtonProps) {
-  const button = (
-    <button
-      {...buttonProps}
-      type="button"
-      disabled={disabled}
-      className={cn(
-        variant === "toolbar"
-          ? "rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-700 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent disabled:hover:text-gray-300"
-          : "rounded p-0.5 transition-colors hover:bg-black/10",
-        className,
-      )}
-      aria-label={label}
-    >
-      {icon}
-    </button>
-  );
-
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        {disabled ? <span className="inline-flex">{button}</span> : button}
-      </TooltipTrigger>
-      <TooltipContent side="bottom" className="text-xs">
-        {label}
-      </TooltipContent>
-    </Tooltip>
-  );
-}
-
 export function DocBrowserTabStrip({
   tabs,
   activeTabId,
@@ -112,115 +64,66 @@ export function DocBrowserTabStrip({
       : t("sideDockBuiltInDocked")
     : t("sideDockPinCurrent");
   const forwardLabel = t("docBrowserForward");
-  const modeLabel = isDocked
-    ? t("docBrowserFloatMode")
-    : t("docBrowserDockMode");
+  const modeLabel = isDocked ? t("docBrowserFloatMode") : t("docBrowserDockMode");
   const newTabLabel = t("docBrowserNewTab");
+  const compactTabs: CompactTabStripTab[] = tabs.map((tab) => ({
+    key: tab.id,
+    label: tab.title || t("docBrowserTabUntitled"),
+    active: tab.id === activeTabId,
+    tooltip: tab.title,
+    closeLabel: closeTabLabel,
+    closePlacement: "trailing",
+    onSelect: () => onSetActiveTab(tab.id),
+    onClose: () => onCloseTab(tab.id),
+  }));
+  const actions: CompactTabStripAction[] = [
+    { key: "back", disabled: !canGoBack, icon: <ArrowLeft className="h-3.5 w-3.5" />, label: backLabel, onClick: onGoBack },
+    { key: "forward", disabled: !canGoForward, icon: <ArrowRight className="h-3.5 w-3.5" />, label: forwardLabel, onClick: onGoForward },
+    { key: "new-tab", icon: <Plus className="h-3.5 w-3.5" />, label: newTabLabel, onClick: onOpenNewTab },
+    ...(dockState?.canDock
+      ? [
+          {
+            key: "dock",
+            disabled: dockState.isDocked && !dockState.removable,
+            icon: dockState.isDocked && dockState.removable ? <PinOff className="h-3.5 w-3.5" /> : <Pin className="h-3.5 w-3.5" />,
+            label: dockLabel,
+            onClick: () => onToggleDock?.(),
+          },
+        ]
+      : []),
+    ...(!isFullscreen
+      ? [
+          {
+            key: "mode",
+            icon: isDocked ? <Maximize2 className="h-3.5 w-3.5" /> : <PanelRightOpen className="h-3.5 w-3.5" />,
+            label: modeLabel,
+            onClick: onToggleMode,
+          },
+        ]
+      : []),
+    { key: "close", icon: <X className="h-3.5 w-3.5" />, label: closeLabel, onClick: onClose },
+  ];
 
   return (
-    <TooltipProvider delayDuration={250}>
-      <div
-        data-testid="doc-browser-tab-strip"
-        className={cn(
-          "flex h-11 items-stretch gap-2 px-2.5 bg-background border-b border-[#f1e7d4] shrink-0 select-none",
-          isFullscreen &&
-            "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
-        )}
-        onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
-      >
-        <div
-          className="doc-browser-tab-scrollbar flex h-full min-w-0 flex-1 items-center gap-1.5 overflow-x-auto"
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          {tabs.map((tab) => {
-            const isActive = tab.id === activeTabId;
-            return (
-              <div
-                key={tab.id}
-                className={cn(
-                  "inline-flex items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors",
-                  isActive
-                    ? "bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
-                    : "bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]",
-                )}
-              >
-                <button
-                  type="button"
-                  onClick={() => onSetActiveTab(tab.id)}
-                  className="truncate text-left px-1"
-                  title={tab.title}
-                >
-                  {tab.title || t("docBrowserTabUntitled")}
-                </button>
-                <DocBrowserIconActionButton
-                  icon={<X className="w-3 h-3" />}
-                  label={closeTabLabel}
-                  variant="tab"
-                  onClick={(event) => {
-                    event.stopPropagation();
-                    onCloseTab(tab.id);
-                  }}
-                />
-              </div>
-            );
-          })}
-        </div>
-        <div
-          className="flex h-full items-center gap-1 shrink-0"
-          data-testid="doc-browser-tab-actions"
-          onPointerDown={(event) => event.stopPropagation()}
-        >
-          <DocBrowserIconActionButton
-            disabled={!canGoBack}
-            icon={<ArrowLeft className="w-3.5 h-3.5" />}
-            label={backLabel}
-            onClick={onGoBack}
-          />
-          <DocBrowserIconActionButton
-            disabled={!canGoForward}
-            icon={<ArrowRight className="w-3.5 h-3.5" />}
-            label={forwardLabel}
-            onClick={onGoForward}
-          />
-          <DocBrowserIconActionButton
-            icon={<Plus className="w-3.5 h-3.5" />}
-            label={newTabLabel}
-            onClick={onOpenNewTab}
-          />
-          {dockState?.canDock ? (
-            <DocBrowserIconActionButton
-              disabled={dockState.isDocked && !dockState.removable}
-              icon={
-                dockState.isDocked && dockState.removable ? (
-                  <PinOff className="w-3.5 h-3.5" />
-                ) : (
-                  <Pin className="w-3.5 h-3.5" />
-                )
-              }
-              label={dockLabel}
-              onClick={onToggleDock}
-            />
-          ) : null}
-          {!isFullscreen ? (
-            <DocBrowserIconActionButton
-              icon={
-                isDocked ? (
-                  <Maximize2 className="w-3.5 h-3.5" />
-                ) : (
-                  <PanelRightOpen className="w-3.5 h-3.5" />
-                )
-              }
-              label={modeLabel}
-              onClick={onToggleMode}
-            />
-          ) : null}
-          <DocBrowserIconActionButton
-            icon={<X className="w-3.5 h-3.5" />}
-            label={closeLabel}
-            onClick={onClose}
-          />
-        </div>
-      </div>
-    </TooltipProvider>
+    <CompactTabStrip
+      testId="doc-browser-tab-strip"
+      actionsTestId="doc-browser-tab-actions"
+      tabs={compactTabs}
+      actions={actions}
+      className={cn(
+        "h-11 gap-2 px-2.5 bg-background border-[#f1e7d4] shrink-0 select-none",
+        isFullscreen && "h-[calc(env(safe-area-inset-top,0px)+2.75rem)] pt-[env(safe-area-inset-top,0px)]",
+      )}
+      scrollClassName="doc-browser-tab-scrollbar flex h-full items-center gap-1.5"
+      tabsClassName="items-center gap-1.5"
+      actionsClassName="h-full items-center gap-1"
+      actionButtonClassName="rounded-md p-1.5 hover:text-gray-700 disabled:opacity-60"
+      tabBaseClassName="group inline-flex min-w-0 items-center gap-1 h-7 px-1.5 rounded-lg text-xs border max-w-[220px] shrink-0 transition-colors"
+      activeTabClassName="bg-amber-50/80 border-amber-200 text-amber-900 shadow-[0_1px_2px_rgba(30,20,10,0.04)]"
+      inactiveTabClassName="bg-[#f9f8f5] border-[#eee3d1] text-[#78644d] hover:bg-[#fff7ea] hover:text-[#2f2212]"
+      labelClassName="px-1 text-xs font-normal"
+      onPointerDown={!isDocked && !isFullscreen ? onDragStart : undefined}
+      onScrollPointerDown={(event) => event.stopPropagation()}
+    />
   );
 }

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

@@ -381,19 +381,19 @@ export function DocBrowser({ customTabRenderers = {}, displayMode = 'desktop', d
 
       {!isDocked && !isFullscreen && (
         <>
-          <div className="absolute top-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
+          <div className="absolute top-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors" data-testid="doc-browser-resize-top" onPointerDown={startFloatResize('top')} />
           <div
-            className="absolute top-0 left-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute top-0 left-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-left"
             onPointerDown={startFloatResize('left')}
           />
           <div
-            className="absolute top-0 right-0 w-1.5 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute top-0 right-0 w-3 h-full cursor-ew-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-right"
             onPointerDown={startFloatResize('right')}
           />
           <div
-            className="absolute bottom-0 left-0 h-1.5 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
+            className="absolute bottom-0 left-0 h-3 w-full cursor-ns-resize z-20 hover:bg-primary/10 transition-colors"
             data-testid="doc-browser-resize-bottom"
             onPointerDown={startFloatResize('bottom')}
           />

package/src/shared/components/resizable-right-panel/__tests__/resizable-right-panel.test.tsx

@@ -0,0 +1,66 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { ResizableRightPanel } from "@/shared/components/resizable-right-panel/resizable-right-panel";
+
+function firePointerEvent(
+  target: Window | Document | Node | Element,
+  type: string,
+  point: { clientX: number; pointerId?: number },
+) {
+  const event = new Event(type, { bubbles: true });
+  Object.defineProperties(event, {
+    clientX: { value: point.clientX },
+    pointerId: { value: point.pointerId ?? 1 },
+  });
+  fireEvent(target, event);
+}
+
+describe("ResizableRightPanel", () => {
+  beforeEach(() => {
+    HTMLElement.prototype.setPointerCapture = vi.fn();
+  });
+
+  it("resizes horizontally from the left handle and clamps to max width", () => {
+    render(
+      <ResizableRightPanel
+        data-testid="right-panel"
+        defaultWidth={420}
+        minWidth={320}
+        maxWidth={500}
+      >
+        Content
+      </ResizableRightPanel>,
+    );
+
+    firePointerEvent(
+      screen.getByTestId("resizable-right-panel-handle"),
+      "pointerdown",
+      { clientX: 800, pointerId: 1 },
+    );
+    firePointerEvent(window, "pointermove", { clientX: 600, pointerId: 1 });
+
+    expect(screen.getByTestId("right-panel").style.width).toBe("500px");
+    expect(
+      screen.getByTestId("resizable-right-panel-resize-shield"),
+    ).toBeTruthy();
+
+    firePointerEvent(window, "pointerup", { clientX: 600, pointerId: 1 });
+
+    expect(
+      screen.queryByTestId("resizable-right-panel-resize-shield"),
+    ).toBeNull();
+  });
+
+  it("does not render resize controls in overlay mode", () => {
+    render(
+      <ResizableRightPanel data-testid="right-panel" overlay>
+        Content
+      </ResizableRightPanel>,
+    );
+
+    expect(
+      screen.queryByTestId("resizable-right-panel-handle"),
+    ).toBeNull();
+    expect(screen.getByTestId("right-panel").className).toContain("fixed");
+  });
+});

package/src/shared/components/resizable-right-panel/resizable-right-panel.tsx

@@ -8,13 +8,14 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
   const [isResizing, setIsResizing] = useState(false);
   const [width, setWidth] = useState(defaultWidth);
 
-  const onResizeStart = (event: React.MouseEvent) => {
+  const onResizeStart = (event: React.PointerEvent<HTMLDivElement>) => {
     if (overlay) return;
     event.preventDefault();
     event.stopPropagation();
+    event.currentTarget.setPointerCapture?.(event.pointerId);
     setIsResizing(true);
     resizeRef.current = { startX: event.clientX, startWidth: width };
-    const onMove = (moveEvent: MouseEvent) => {
+    const onMove = (moveEvent: PointerEvent) => {
       const resizing = resizeRef.current;
       if (!resizing) return;
       const nextWidth = resizing.startWidth + resizing.startX - moveEvent.clientX;
@@ -23,11 +24,13 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
     const onUp = () => {
       setIsResizing(false);
       resizeRef.current = null;
-      window.removeEventListener("mousemove", onMove);
-      window.removeEventListener("mouseup", onUp);
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("pointercancel", onUp);
     };
-    window.addEventListener("mousemove", onMove);
-    window.addEventListener("mouseup", onUp);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("pointercancel", onUp);
   };
 
   return (
@@ -37,10 +40,10 @@ export function ResizableRightPanel({ children, className, style, defaultWidth =
       style={overlay ? style : { ...style, width }}
     >
       {!overlay ? (
-        <div className="absolute left-0 top-0 z-20 h-full w-1.5 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onMouseDown={onResizeStart} />
+        <div className="absolute left-0 top-0 z-20 h-full w-3 cursor-ew-resize transition-colors hover:bg-primary/10" data-testid="resizable-right-panel-handle" onPointerDown={onResizeStart} />
       ) : null}
       <div className="flex h-full min-h-0 w-full flex-col overflow-hidden">{children}</div>
-      {isResizing ? <div className="absolute inset-0 z-10" /> : null}
+      {isResizing ? <div className="absolute inset-0 z-10 cursor-ew-resize" data-testid="resizable-right-panel-resize-shield" /> : null}
     </aside>
   );
 }