@nextclaw/ui 0.13.13 → 0.14.0

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

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/shared/components/ui/tooltip';
+import { cn } from '@/shared/lib/utils';
+
+type IconActionButtonProps = Omit<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  'children' | 'type'
+> & {
+  icon: React.ReactNode;
+  label: string;
+  tooltip?: string | false | null;
+};
+
+const IconActionButton = React.forwardRef<HTMLButtonElement, IconActionButtonProps>(
+  ({ className, disabled = false, icon, label, tooltip, ...buttonProps }, ref) => {
+    const button = (
+      <button
+        {...buttonProps}
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        aria-label={label}
+        className={cn(
+          'inline-flex h-7 w-7 shrink-0 items-center justify-center rounded-md transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/40 disabled:cursor-not-allowed',
+          'text-gray-500 hover:bg-gray-100 hover:text-gray-900 disabled:text-gray-300 disabled:hover:bg-transparent disabled:hover:text-gray-300',
+          className
+        )}
+      >
+        {icon}
+      </button>
+    );
+    const content = tooltip === false ? null : tooltip ?? label;
+    if (!content) return button;
+    return (
+      <TooltipProvider delayDuration={250}>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            {disabled ? <span className="inline-flex">{button}</span> : button}
+          </TooltipTrigger>
+          <TooltipContent side="bottom" className="text-xs">{content}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+    );
+  }
+);
+IconActionButton.displayName = 'IconActionButton';
+
+export { IconActionButton };

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

@@ -0,0 +1,52 @@
+import { render, screen } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import {
+  CompactTabStrip,
+  type CompactTabStripTab,
+} from "@/shared/components/ui/tab-strip/compact-tab-strip";
+
+const originalScrollIntoView = HTMLElement.prototype.scrollIntoView;
+
+afterEach(() => {
+  HTMLElement.prototype.scrollIntoView = originalScrollIntoView;
+});
+
+function tabs(activeKey: string): CompactTabStripTab[] {
+  return ["first", "second", "third"].map((key) => ({
+    key,
+    label: key,
+    active: key === activeKey,
+    onSelect: vi.fn(),
+  }));
+}
+
+describe("CompactTabStrip", () => {
+  it("scrolls the active tab into the horizontal viewport", () => {
+    const scrollIntoView = vi.fn();
+    HTMLElement.prototype.scrollIntoView = scrollIntoView;
+
+    const { rerender } = render(
+      <CompactTabStrip
+        tabs={tabs("first")}
+        actions={[]}
+        scrollTestId="compact-tabs"
+      />,
+    );
+
+    scrollIntoView.mockClear();
+
+    rerender(
+      <CompactTabStrip
+        tabs={tabs("second")}
+        actions={[]}
+        scrollTestId="compact-tabs"
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "second" })).toBeTruthy();
+    expect(scrollIntoView).toHaveBeenCalledWith({
+      block: "nearest",
+      inline: "nearest",
+    });
+  });
+});

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

@@ -0,0 +1,228 @@
+import * as React from "react";
+import { X } from "lucide-react";
+import { IconActionButton } from "@/shared/components/ui/actions/icon-action-button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/shared/components/ui/tooltip";
+import { cn } from "@/shared/lib/utils";
+
+export type CompactTabStripTab = {
+  key: string;
+  label: string;
+  active: boolean;
+  tooltip?: string | null;
+  leadingIcon?: React.ReactNode;
+  badge?: React.ReactNode;
+  unreadIndicator?: React.ReactNode;
+  closeLabel?: string;
+  closePlacement?: "leading-hover" | "trailing";
+  onSelect: () => void;
+  onClose?: () => void;
+};
+
+export type CompactTabStripAction = {
+  key: string;
+  icon: React.ReactNode;
+  label: string;
+  disabled?: boolean;
+  onClick: () => void;
+};
+
+type CompactTabStripProps = {
+  tabs: readonly CompactTabStripTab[];
+  actions: readonly CompactTabStripAction[];
+  className?: string;
+  scrollClassName?: string;
+  tabsClassName?: string;
+  actionsClassName?: string;
+  actionButtonClassName?: string;
+  tabBaseClassName?: string;
+  activeTabClassName?: string;
+  inactiveTabClassName?: string;
+  labelClassName?: string;
+  testId?: string;
+  scrollTestId?: string;
+  actionsTestId?: string;
+  onPointerDown?: (event: React.PointerEvent<HTMLElement>) => void;
+  onScrollPointerDown?: (event: React.PointerEvent<HTMLDivElement>) => void;
+};
+
+function closeCompactTab(
+  event: React.MouseEvent<HTMLButtonElement>,
+  onClose: () => void,
+) {
+  event.stopPropagation();
+  onClose();
+}
+
+function CompactTabLabelButton({
+  labelClassName,
+  tab,
+}: {
+  labelClassName?: string;
+  tab: CompactTabStripTab;
+}) {
+  const button = (
+    <button
+      type="button"
+      onClick={tab.onSelect}
+      aria-label={tab.label}
+      className="flex min-w-0 flex-1 items-center gap-1.5 text-left"
+    >
+      <span className={cn("min-w-0 truncate text-[12px] font-medium", labelClassName)}>
+        {tab.label}
+      </span>
+      {tab.badge}
+      {tab.unreadIndicator}
+    </button>
+  );
+  const tooltip = tab.tooltip ?? tab.label;
+
+  if (!tooltip) {
+    return button;
+  }
+
+  return (
+    <TooltipProvider delayDuration={250}>
+      <Tooltip>
+        <TooltipTrigger asChild>{button}</TooltipTrigger>
+        <TooltipContent side="bottom" className="text-xs">
+          {tooltip}
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+
+function CompactTabItem({
+  activeTabClassName,
+  inactiveTabClassName,
+  itemRef,
+  labelClassName,
+  tab,
+  tabBaseClassName,
+}: Pick<
+  CompactTabStripProps,
+  | "activeTabClassName"
+  | "inactiveTabClassName"
+  | "labelClassName"
+  | "tabBaseClassName"
+> & { itemRef?: React.Ref<HTMLDivElement>; tab: CompactTabStripTab }) {
+  const leadingClose = tab.onClose && tab.closePlacement === "leading-hover";
+  return (
+    <div
+      ref={itemRef}
+      className={cn(
+        tabBaseClassName ??
+          "group flex max-w-[180px] min-w-0 items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
+        tab.active
+          ? (activeTabClassName ?? "border-b-primary bg-white text-gray-900")
+          : (inactiveTabClassName ??
+            "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100"),
+      )}
+    >
+      {leadingClose ? (
+        <button
+          type="button"
+          onClick={(event) => closeCompactTab(event, tab.onClose!)}
+          className="relative inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md text-gray-400 transition-colors hover:bg-gray-200 hover:text-gray-700"
+          aria-label={tab.closeLabel}
+        >
+          <span className="flex items-center justify-center group-hover:hidden">
+            {tab.leadingIcon}
+          </span>
+          <X className="hidden h-3.5 w-3.5 group-hover:block" />
+        </button>
+      ) : tab.leadingIcon ? (
+        <span className="inline-flex shrink-0 items-center justify-center">
+          {tab.leadingIcon}
+        </span>
+      ) : null}
+      <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />
+      {tab.onClose && tab.closePlacement !== "leading-hover" ? (
+        <IconActionButton
+          icon={<X className="h-3 w-3" />}
+          label={tab.closeLabel ?? ""}
+          tooltip={tab.closeLabel ?? null}
+          onClick={(event) => closeCompactTab(event, tab.onClose!)}
+          className="h-5 w-5 rounded p-0.5 hover:bg-black/10"
+        />
+      ) : null}
+    </div>
+  );
+}
+
+export function CompactTabStrip({
+  actionButtonClassName,
+  actions,
+  actionsClassName,
+  actionsTestId,
+  className,
+  onPointerDown,
+  onScrollPointerDown,
+  scrollClassName,
+  scrollTestId,
+  tabs,
+  tabsClassName,
+  testId,
+  ...tabProps
+}: CompactTabStripProps) {
+  const scrollActiveItemIntoView = React.useCallback((item: HTMLDivElement | null) => {
+    item?.scrollIntoView?.({
+      block: "nearest",
+      inline: "nearest",
+    });
+  }, []);
+
+  return (
+    <div
+      data-testid={testId}
+      className={cn(
+        "flex min-w-0 items-stretch border-b border-gray-200/70 bg-gray-50/85",
+        className,
+      )}
+      onPointerDown={onPointerDown}
+    >
+      <div
+        className={cn(
+          "min-w-0 flex-1 overflow-x-auto overflow-y-hidden",
+          scrollClassName,
+        )}
+        onPointerDown={onScrollPointerDown}
+      >
+        <div
+          data-testid={scrollTestId}
+          className={cn("flex min-w-max items-stretch", tabsClassName)}
+        >
+          {tabs.map((tab) => (
+            <CompactTabItem
+              key={tab.key}
+              itemRef={tab.active ? scrollActiveItemIntoView : undefined}
+              tab={tab}
+              {...tabProps}
+            />
+          ))}
+        </div>
+      </div>
+      <div
+        className={cn("flex shrink-0 items-center gap-1", actionsClassName)}
+        data-testid={actionsTestId}
+        onPointerDown={(event) => event.stopPropagation()}
+      >
+        {actions.map((action) => (
+          <IconActionButton
+            key={action.key}
+            icon={action.icon}
+            label={action.label}
+            disabled={action.disabled}
+            onClick={action.onClick}
+            className={actionButtonClassName}
+          />
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/shared/hooks/use-app-meta.ts

@@ -0,0 +1,10 @@
+import { useQuery } from '@tanstack/react-query';
+import { fetchAppMeta } from '@/shared/lib/api';
+
+export function useAppMeta() {
+  return useQuery({
+    queryKey: ['app-meta'],
+    queryFn: fetchAppMeta,
+    staleTime: Infinity
+  });
+}

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

@@ -1,10 +1,5 @@
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import {
-  deleteNcpSessionSummaryInQueryClient,
-  upsertNcpSessionSummaryInQueryClient
-} from '@/shared/lib/api';
-import {
-  fetchAppMeta,
   fetchConfig,
   fetchConfigMeta,
   fetchConfigSchema,
@@ -22,18 +17,7 @@ import {
   updateChannel,
   updateRuntime,
   updateSecrets,
-  executeConfigAction,
-  fetchCronJobs,
-  deleteCronJob,
-  setCronJobEnabled,
-  runCronJob
-} from '@/shared/lib/api';
-import {
-  deleteNcpSession,
-  fetchNcpSessionMessages,
-  fetchNcpSessionSkills,
-  fetchNcpSessions,
-  updateNcpSession
+  executeConfigAction
 } from '@/shared/lib/api';
 import { toast } from 'sonner';
 import { t } from '@/shared/lib/i18n';
@@ -47,14 +31,6 @@ export function useConfig() {
   });
 }
 
-export function useAppMeta() {
-  return useQuery({
-    queryKey: ['app-meta'],
-    queryFn: fetchAppMeta,
-    staleTime: Infinity
-  });
-}
-
 export function useConfigMeta() {
   return useQuery({
     queryKey: ['config-meta'],
@@ -256,126 +232,3 @@ export function useExecuteConfigAction() {
     }
   });
 }
-
-export function useNcpSessions(params?: { limit?: number; peerId?: string }) {
-  return useQuery({
-    queryKey: ['ncp-sessions', params?.limit ?? null, params?.peerId?.trim() || null],
-    queryFn: () => fetchNcpSessions(params),
-    staleTime: 5_000,
-    retry: false
-  });
-}
-
-export function useNcpSessionMessages(sessionId: string | null, limit = 200) {
-  return useQuery({
-    queryKey: ['ncp-session-messages', sessionId, limit],
-    queryFn: () => fetchNcpSessionMessages(sessionId as string, limit),
-    enabled: Boolean(sessionId),
-    staleTime: 5_000,
-    retry: false
-  });
-}
-
-export function useNcpSessionSkills(params: {
-  sessionId: string | null;
-  projectRoot?: string | null;
-}) {
-  return useQuery({
-    queryKey: ['ncp-session-skills', params.sessionId, params.projectRoot ?? null],
-    queryFn: () =>
-      fetchNcpSessionSkills(params.sessionId as string, {
-        ...(Object.prototype.hasOwnProperty.call(params, 'projectRoot')
-          ? { projectRoot: params.projectRoot ?? null }
-          : {})
-      }),
-    enabled: Boolean(params.sessionId),
-    staleTime: 5_000,
-    retry: false
-  });
-}
-
-export function useDeleteNcpSession() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ sessionId }: { sessionId: string }) => deleteNcpSession(sessionId),
-    onSuccess: (_data, variables) => {
-      deleteNcpSessionSummaryInQueryClient(queryClient, variables.sessionId);
-      queryClient.removeQueries({ queryKey: ['ncp-session-messages', variables.sessionId] });
-      toast.success(t('configSavedApplied'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useUpdateNcpSession() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ sessionId, data }: { sessionId: string; data: Parameters<typeof updateNcpSession>[1] }) =>
-      updateNcpSession(sessionId, data),
-    onSuccess: (data) => {
-      upsertNcpSessionSummaryInQueryClient(queryClient, data);
-      queryClient.invalidateQueries({ queryKey: ['ncp-session-skills', data.sessionId] });
-      toast.success(t('configSavedApplied'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useCronJobs(params: { all?: boolean } = { all: true }) {
-  return useQuery({
-    queryKey: ['cron', params],
-    queryFn: () => fetchCronJobs(params),
-    staleTime: 10_000
-  });
-}
-
-export function useDeleteCronJob() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ id }: { id: string }) => deleteCronJob(id),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['cron'] });
-      toast.success(t('configSavedApplied'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useToggleCronJob() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ id, enabled }: { id: string; enabled: boolean }) => setCronJobEnabled(id, { enabled }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['cron'] });
-      toast.success(t('configSavedApplied'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}
-
-export function useRunCronJob() {
-  const queryClient = useQueryClient();
-
-  return useMutation({
-    mutationFn: ({ id, force }: { id: string; force?: boolean }) => runCronJob(id, { force }),
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['cron'] });
-      toast.success(t('configSavedApplied'));
-    },
-    onError: (error: Error) => {
-      toast.error(t('configSaveFailed') + ': ' + error.message);
-    }
-  });
-}

package/src/shared/lib/api/{ncp-session.test.ts → __tests__/ncp-session.test.ts}

@@ -1,7 +1,7 @@
-import { fetchNcpSessionSkills } from './utils/ncp-session.utils';
-import { nextclawClient } from './managers/client.manager';
+import { fetchNcpSessionSkills } from '../utils/ncp-session.utils';
+import { nextclawClient } from '../managers/client.manager';
 
-vi.mock('./managers/client.manager', () => ({
+vi.mock('../managers/client.manager', () => ({
   nextclawClient: {
     sessions: {
       listSkills: vi.fn()

package/src/shared/lib/api/{raw-client.test.ts → __tests__/raw-client.test.ts}

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import { requestRawApiResponse } from './raw-client.utils';
+import { requestRawApiResponse } from '../raw-client.utils';
 
 const fetchMock = vi.fn<typeof fetch>();
 

package/src/shared/lib/api/chat-session-type.types.ts

@@ -1,3 +1,5 @@
+import type { RuntimeModelSelectionMode } from '@nextclaw/shared';
+
 export type ChatSessionTypeIconView = {
   kind: "image";
   src: string;
@@ -19,6 +21,7 @@ export type ChatSessionTypeOptionView = {
   reasonMessage?: string | null;
   supportedModels?: string[];
   recommendedModel?: string | null;
+  modelSelectionMode?: RuntimeModelSelectionMode;
   cta?: ChatSessionTypeCtaView | null;
 };
 

package/src/shared/lib/cadence/services/{adaptive-cadence.service.test.ts → __tests__/adaptive-cadence.service.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { AdaptiveCadence } from './adaptive-cadence.service';
+import { AdaptiveCadence } from '../adaptive-cadence.service';
 
 function createClock(initialNow = 0) {
   let now = initialNow;

package/src/shared/lib/i18n/locales/en-US/chat.json

@@ -8,6 +8,7 @@
   "chatSelectAgent": "Select Agent",
   "chatModelLabel": "Chat Model",
   "chatSelectModel": "Select model",
+  "chatRuntimeDefaultModel": "Runtime default",
   "chatThinkingLevelOff": "Thinking Off",
   "chatThinkingLevelMinimal": "Thinking Minimal",
   "chatThinkingLevelLow": "Thinking Low",
@@ -127,6 +128,7 @@
   "chatToolStatusCompleted": "Completed",
   "chatToolStatusFailed": "Failed",
   "chatToolStatusCancelled": "Cancelled",
+  "chatShowContentAction": "Show content",
   "chatReasoning": "Reasoning",
   "chatImageAttachment": "Image attachment",
   "chatFileAttachment": "File attachment",

package/src/shared/lib/i18n/locales/en-US/core.json

@@ -11,6 +11,7 @@
   "marketplace": "Marketplace",
   "advanced": "Advanced",
   "settings": "Settings",
+  "settingsMenu": "Settings menu",
   "security": "Security",
   "backToMain": "Back to Main",
   "enabled": "Enabled",

package/src/shared/lib/i18n/locales/zh-CN/chat.json

@@ -8,6 +8,7 @@
   "chatSelectAgent": "选择 Agent",
   "chatModelLabel": "对话模型",
   "chatSelectModel": "选择模型",
+  "chatRuntimeDefaultModel": "运行时默认",
   "chatThinkingLevelOff": "思考关闭",
   "chatThinkingLevelMinimal": "思考 Minimal",
   "chatThinkingLevelLow": "思考 Low",
@@ -127,6 +128,7 @@
   "chatToolStatusCompleted": "已完成",
   "chatToolStatusFailed": "失败",
   "chatToolStatusCancelled": "已取消",
+  "chatShowContentAction": "展示内容",
   "chatReasoning": "推理过程",
   "chatImageAttachment": "图片附件",
   "chatFileAttachment": "文件附件",

package/src/shared/lib/i18n/locales/zh-CN/core.json

@@ -11,6 +11,7 @@
   "marketplace": "市场",
   "advanced": "高级",
   "settings": "设置",
+  "settingsMenu": "设置菜单",
   "security": "安全",
   "backToMain": "返回主界面",
   "enabled": "启用",

package/src/shared/lib/i18n/locales/zh-CN/marketplace.json

@@ -7,7 +7,7 @@
   "marketplaceMcpTabCatalog": "MCP 市场",
   "marketplaceMcpTabInstalled": "已安装 MCP",
   "marketplaceTabInstalledSkills": "已安装技能",
-  "marketplaceExternalSkillSourceTitle": "更多 Skills 访问 SkillHub",
+  "marketplaceExternalSkillSourceTitle": "访问 SkillHub",
   "marketplaceSearchPlaceholderSkills": "搜索技能...",
   "marketplaceMcpSearchPlaceholder": "搜索 MCP servers...",
   "marketplaceFilterSkills": "技能",

package/src/shared/lib/i18n/runtime/{i18n-language-owner.test.ts → __tests__/i18n-language-owner.test.ts}

@@ -1,5 +1,5 @@
 import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
-import type * as I18nRuntimeModule from './i18n-language-owner';
+import type * as I18nRuntimeModule from '../i18n-language-owner';
 
 type I18nRuntimeOwnerModule = typeof I18nRuntimeModule;
 
@@ -21,7 +21,7 @@ declare global {
 
 async function loadOwner(): Promise<I18nRuntimeOwnerModule> {
   vi.resetModules();
-  return await import('./i18n-language-owner');
+  return await import('../i18n-language-owner');
 }
 
 function createMockStorage(): MockStorage {

package/src/shared/lib/navigation-history/{navigation-history.utils.test.ts → __tests__/navigation-history.utils.test.ts}

@@ -3,7 +3,7 @@ import {
   filterNavigationHistoryEntries,
   pushNavigationHistoryEntry,
   stepNavigationHistory,
-} from './navigation-history.utils';
+} from '../navigation-history.utils';
 
 describe('navigation-history utils', () => {
   it('pushes new entries and truncates forward history after stepping back', () => {

package/src/shared/lib/provider-models/{index.test.ts → __tests__/index.test.ts}

@@ -1,5 +1,5 @@
 import { describe, expect, it } from 'vitest';
-import { buildProviderModelCatalog } from './index';
+import { buildProviderModelCatalog } from '../index';
 
 describe('buildProviderModelCatalog', () => {
   it('keeps empty provider models empty', () => {

package/src/shared/lib/transport/{app-client.test.ts → __tests__/app-client.test.ts}

@@ -11,7 +11,7 @@ describe('appClient runtime detection', () => {
   });
 
   it('imports without triggering an API_BASE initialization cycle', async () => {
-    const { appClient } = await import('./app-client.service');
+    const { appClient } = await import('../app-client.service');
 
     expect(appClient).toBeDefined();
   });
@@ -28,7 +28,7 @@ describe('appClient runtime detection', () => {
     vi.stubGlobal('fetch', fetchMock);
 
     const localRequest = vi.fn().mockResolvedValue({ ok: true } as never);
-    vi.doMock('./local-transport.service', () => ({
+    vi.doMock('../local-transport.service', () => ({
       LocalAppTransport: class {
         request = localRequest;
         openStream = vi.fn();
@@ -36,7 +36,7 @@ describe('appClient runtime detection', () => {
       }
     }));
 
-    const { appClient } = await import('./app-client.service');
+    const { appClient } = await import('../app-client.service');
     const result = await appClient.request<{ ok: boolean }>({
       method: 'GET',
       path: '/api/config'