@nextclaw/ui 0.13.12 → 0.14.0

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/host-capabilities/__tests__/host-capability.manager.test.ts

@@ -0,0 +1,50 @@
+import { HostCapabilityManager } from "@/shared/lib/host-capabilities";
+
+describe("HostCapabilityManager", () => {
+  it("uses the desktop host bridge when available", async () => {
+    const openExternalUrl = vi.fn(async () => ({ opened: true as const }));
+    const manager = new HostCapabilityManager(() => ({
+      open: vi.fn(),
+      nextclawDesktop: {
+        host: { openExternalUrl }
+      }
+    } as unknown as Window));
+
+    await expect(manager.openExternalUrl("https://skillhub.cn")).resolves.toEqual({ opened: true });
+    expect(openExternalUrl).toHaveBeenCalledWith("https://skillhub.cn/");
+  });
+
+  it("falls back to window.open outside the desktop host", async () => {
+    const open = vi.fn(() => ({ closed: false }));
+    const manager = new HostCapabilityManager(() => ({
+      open
+    } as unknown as Window));
+
+    await expect(manager.openExternalUrl("https://skillhub.cn")).resolves.toEqual({ opened: true });
+    expect(open).toHaveBeenCalledWith("https://skillhub.cn/", "_blank", "noopener,noreferrer");
+  });
+
+  it("reports unsupported URLs without opening them", async () => {
+    const open = vi.fn();
+    const manager = new HostCapabilityManager(() => ({
+      open
+    } as unknown as Window));
+
+    await expect(manager.openExternalUrl("javascript:alert(1)")).resolves.toEqual({
+      opened: false,
+      reason: "unsupported-url"
+    });
+    expect(open).not.toHaveBeenCalled();
+  });
+
+  it("reports popup-blocked when the web fallback cannot open a window", async () => {
+    const manager = new HostCapabilityManager(() => ({
+      open: vi.fn(() => null)
+    } as unknown as Window));
+
+    await expect(manager.openExternalUrl("https://skillhub.cn")).resolves.toEqual({
+      opened: false,
+      reason: "popup-blocked"
+    });
+  });
+});

package/src/shared/lib/host-capabilities/host-capability.manager.ts

@@ -0,0 +1,62 @@
+export type OpenExternalUrlFailureReason =
+  | "unsupported-url"
+  | "popup-blocked"
+  | "bridge-failed";
+
+export type OpenExternalUrlResult =
+  | { opened: true }
+  | { opened: false; reason: OpenExternalUrlFailureReason };
+
+type HostWindow = Pick<Window, "open"> & {
+  nextclawDesktop?: {
+    host?: {
+      openExternalUrl?: (url: string) => Promise<OpenExternalUrlResult>;
+    };
+  };
+};
+
+export class HostCapabilityManager {
+  constructor(private readonly getWindow = (): HostWindow | null => {
+    return typeof window === "undefined" ? null : window;
+  }) {}
+
+  openExternalUrl = async (rawUrl: string): Promise<OpenExternalUrlResult> => {
+    const url = normalizeExternalHttpUrl(rawUrl);
+    if (!url) {
+      return { opened: false, reason: "unsupported-url" };
+    }
+
+    const hostWindow = this.getWindow();
+    if (!hostWindow) {
+      return { opened: false, reason: "bridge-failed" };
+    }
+
+    try {
+      const desktopOpen = hostWindow.nextclawDesktop?.host?.openExternalUrl;
+      if (desktopOpen) {
+        return await desktopOpen(url);
+      }
+      const openedWindow = hostWindow.open(url, "_blank", "noopener,noreferrer");
+      if (!openedWindow) {
+        return { opened: false, reason: "popup-blocked" };
+      }
+      return { opened: true };
+    } catch {
+      return { opened: false, reason: "bridge-failed" };
+    }
+  };
+}
+
+export const hostCapabilityManager = new HostCapabilityManager();
+
+function normalizeExternalHttpUrl(rawUrl: string): string | null {
+  try {
+    const url = new URL(rawUrl);
+    if (url.protocol !== "https:" && url.protocol !== "http:") {
+      return null;
+    }
+    return url.toString();
+  } catch {
+    return null;
+  }
+}

package/src/shared/lib/host-capabilities/index.ts

@@ -0,0 +1 @@
+export * from './host-capability.manager';

package/src/shared/lib/i18n/README.md

@@ -1,7 +1,20 @@
 # i18n owner
 
-This directory temporarily keeps domain label owner modules next to the i18n runtime entrypoint.
+This module owns the NextClaw UI language runtime and locale catalogs.
 
-## 目录预算豁免
+## 文案维护方式
 
-- 原因：i18n 文案正在从单一超大 `index.ts` 逐步拆到领域 owner 文件，当前新增 cron 文案先落到独立 owner，避免继续膨胀入口文件；后续应迁移为每个语言独立 JSON，由 runtime 统一加载。
+- User-visible labels live in `locales/<locale>/*.json`.
+- `index.ts` only owns catalog assembly, formatting helpers, and the stable `t(key)` API.
+- Keep current flat keys when moving existing labels; semantic nested keys can migrate by domain during future feature work.
+- When adding or editing copy, update both `zh-CN` and `en-US`.
+
+## 验证
+
+Run:
+
+```bash
+node scripts/smoke/i18n/nextclaw-ui-i18n-check.mjs
+```
+
+The check verifies that both locales have the same JSON files, the same message keys, and matching `{placeholder}` names.