@nextclaw/ui 0.12.20-beta.0 → 0.12.20-beta.2

package/src/features/chat/utils/chat-session-preference-governance.utils.ts

@@ -160,37 +160,14 @@ export function resolveRecentSessionPreferredValue<T>(params: {
   return bestValue;
 }
 
-export function resolveRecentSessionPreferredModel(params: {
-  sessions: readonly SessionEntryView[];
-  selectedSessionKey?: string | null;
-  sessionType?: string | null;
-}): string | undefined {
-  const { sessions, selectedSessionKey, sessionType } = params;
-  return resolveRecentSessionPreferredValue<string>({
-    sessions,
-    selectedSessionKey,
-    sessionType,
-    readPreference: (session) => session.preferredModel?.trim() || undefined
-  });
-}
-
-export function resolveRecentSessionPreferredThinking(params: {
-  sessions: readonly SessionEntryView[];
-  selectedSessionKey?: string | null;
-  sessionType?: string | null;
-}): ThinkingLevel | undefined {
-  const { sessions, selectedSessionKey, sessionType } = params;
-  return resolveRecentSessionPreferredValue<ThinkingLevel>({
-    sessions,
-    selectedSessionKey,
-    sessionType,
-    readPreference: (session) => session.preferredThinking ?? undefined
-  });
+function buildSyncKey(parts: unknown[]): string {
+  return parts.map((part) => (part == null ? '' : String(part))).join('\u0002');
 }
 
 type UseSyncSessionPreferenceParams<T> = {
   isPreferenceAvailable: boolean;
   emptyValue: T;
+  syncKey: string;
   selectedSessionKey?: string | null;
   selectedSessionExists?: boolean;
   setValue: Dispatch<SetStateAction<T>>;
@@ -201,6 +178,7 @@ function useSyncSessionPreference<T>(params: UseSyncSessionPreferenceParams<T>)
   const {
     isPreferenceAvailable,
     emptyValue,
+    syncKey,
     selectedSessionKey,
     selectedSessionExists = false,
     setValue,
@@ -208,27 +186,31 @@ function useSyncSessionPreference<T>(params: UseSyncSessionPreferenceParams<T>)
   } = params;
   const previousSessionKeyRef = useRef<string | null | undefined>(undefined);
   const resolveValueRef = useRef(resolveValue);
-
-  useEffect(() => {
-    resolveValueRef.current = resolveValue;
-  }, [resolveValue]);
+  const lastSyncedValueRef = useRef<T>(emptyValue);
+  resolveValueRef.current = resolveValue;
 
   useEffect(() => {
     const sessionChanged = previousSessionKeyRef.current !== selectedSessionKey;
     if (!isPreferenceAvailable) {
       setValue(emptyValue);
+      lastSyncedValueRef.current = emptyValue;
       previousSessionKeyRef.current = selectedSessionKey;
       return;
     }
-    setValue((prev) =>
-      resolveValueRef.current({
-        currentValue: prev,
+    setValue((prev) => {
+      const next = resolveValueRef.current({
+        currentValue:
+          !sessionChanged && Object.is(prev, lastSyncedValueRef.current)
+            ? emptyValue
+            : prev,
         sessionChanged,
         preserveCurrentValueOnSessionChange: sessionChanged && Boolean(selectedSessionKey) && !selectedSessionExists
-      })
-    );
+      });
+      lastSyncedValueRef.current = next;
+      return next;
+    });
     previousSessionKeyRef.current = selectedSessionKey;
-  }, [emptyValue, isPreferenceAvailable, selectedSessionExists, selectedSessionKey, setValue]);
+  }, [emptyValue, isPreferenceAvailable, selectedSessionExists, selectedSessionKey, setValue, syncKey]);
 }
 
 export function useSyncSelectedModel(params: {
@@ -244,6 +226,12 @@ export function useSyncSelectedModel(params: {
   useSyncSessionPreference<string>({
     isPreferenceAvailable: modelOptions.length > 0,
     emptyValue: '',
+    syncKey: buildSyncKey([
+      modelOptions.map((option) => option.value).join('\u0001'),
+      selectedSessionPreferredModel,
+      fallbackPreferredModel,
+      defaultModel
+    ]),
     selectedSessionKey,
     selectedSessionExists,
     setValue: setSelectedModel,
@@ -273,6 +261,12 @@ export function useSyncSelectedThinking(params: {
   useSyncSessionPreference<ThinkingLevel | null>({
     isPreferenceAvailable: supportedThinkingLevels.length > 0,
     emptyValue: null,
+    syncKey: buildSyncKey([
+      supportedThinkingLevels.join('\u0001'),
+      selectedSessionPreferredThinking,
+      fallbackPreferredThinking,
+      defaultThinkingLevel
+    ]),
     selectedSessionKey,
     selectedSessionExists,
     setValue: setSelectedThinkingLevel,

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

@@ -60,7 +60,8 @@ describe('BrandHeader', () => {
     mocks.downloadUpdate.mockReset();
   });
 
-  it('shows update progress next to the product version', () => {
+  it('shows update progress next to the product version', async () => {
+    const user = userEvent.setup();
     useRuntimeUpdateStore.setState({
       supported: true,
       initialized: true,
@@ -96,7 +97,11 @@ describe('BrandHeader', () => {
 
     renderBrandHeader();
 
-    expect(screen.getByText('v0.18.11')).toBeTruthy();
+    const version = screen.getByText('v0.18.11');
+    expect(version).toBeTruthy();
+    expect(screen.getAllByText('v0.18.11')).toHaveLength(1);
+    await user.hover(version);
+    expect(await screen.findAllByText('v0.18.11')).toHaveLength(2);
     expect(screen.getByText('下载 50%')).toBeTruthy();
     expect(screen.queryByRole('button', { name: '更新' })).toBeNull();
   });

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

@@ -1,7 +1,7 @@
 import type { UpdateSnapshot } from '@nextclaw/kernel';
 import { runtimeUpdateManager, useRuntimeUpdateStore } from '@/features/system-status';
 import { useAppMeta } from '@/shared/hooks/use-config';
-import type { ReactNode } from 'react';
+import { type ReactNode, useState } from 'react';
 import { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
 import { cn } from '@/shared/lib/utils';
 import { t } from '@/shared/lib/i18n';
@@ -15,6 +15,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   const { data } = useAppMeta();
   const productName = data?.name ?? 'NextClaw';
   const productVersion = data?.productVersion?.trim();
+  const versionLabel = productVersion ? `v${productVersion}` : null;
   const resolvedSuffix = suffix ?? <RuntimeStatusEntry />;
 
   return (
@@ -22,9 +23,11 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
       <div className="h-7 w-7 rounded-lg overflow-hidden flex items-center justify-center">
         <img src="/logo.svg" alt={productName} className="h-full w-full object-contain" />
       </div>
-      <div className="flex items-baseline gap-2 min-w-0">
-        <span className="truncate text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
-        {productVersion ? <span className="text-[13px] font-medium text-gray-500">v{productVersion}</span> : null}
+      <div className="flex min-w-0 items-baseline gap-2">
+        <div className="flex min-w-0 flex-1 items-baseline gap-2">
+          <span className="shrink-0 text-[15px] font-semibold tracking-[-0.01em] text-gray-800">{productName}</span>
+          {versionLabel ? <BrandVersionLabel versionLabel={versionLabel} /> : null}
+        </div>
         <RuntimeUpdateInlineStatus />
         {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
       </div>
@@ -32,6 +35,33 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   );
 }
 
+function BrandVersionLabel({ versionLabel }: { versionLabel: string }) {
+  const [isTooltipOpen, setIsTooltipOpen] = useState(false);
+
+  return (
+    <span
+      className="relative min-w-0 flex-1"
+      onMouseEnter={() => setIsTooltipOpen(true)}
+      onMouseLeave={() => setIsTooltipOpen(false)}
+      onFocus={() => setIsTooltipOpen(true)}
+      onBlur={() => setIsTooltipOpen(false)}
+    >
+      <span
+        tabIndex={0}
+        aria-label={versionLabel}
+        className="block min-w-0 truncate text-[13px] font-medium text-gray-500 outline-none"
+      >
+        {versionLabel}
+      </span>
+      {isTooltipOpen ? (
+        <span className="pointer-events-none absolute left-0 top-full z-[var(--z-tooltip)] mt-1 w-max max-w-none whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-xs font-medium text-popover-foreground shadow-md">
+          {versionLabel}
+        </span>
+      ) : null}
+    </span>
+  );
+}
+
 function RuntimeUpdateInlineStatus() {
   const { supported, busyAction, snapshot } = useRuntimeUpdateStore();
   if (!supported || !snapshot) {

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

@@ -1,22 +1,22 @@
-export * from './agents';
+export * from './services/agents.service';
 export * from './api-base';
 export * from './auth.types';
-export * from './channel-auth';
+export * from './services/channel-auth.service';
 export * from './channel-auth.types';
 export * from './chat-session-type.types';
-export * from './client';
-export * from './config';
-export * from './marketplace';
-export * from './mcp-marketplace';
-export * from './ncp-attachments';
-export * from './ncp-session';
+export * from './services/client.service';
+export * from './services/config.service';
+export * from './services/marketplace.service';
+export * from './services/mcp-marketplace.service';
+export * from './services/ncp-attachments.service';
+export * from './services/ncp-session.service';
 export * from './ncp-session.types';
 export * from './ncp-session-query-cache';
 export * from './raw-client.utils';
-export * from './remote';
+export * from './services/remote.service';
 export * from './remote.types';
-export * from './runtime-control';
+export * from './services/runtime-control.service';
 export * from './runtime-control.types';
-export * from './runtime-update.service';
-export * from './server-path';
+export * from './services/runtime-update.service';
+export * from './services/server-path.service';
 export * from './types';

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

@@ -1,37 +1,36 @@
-import { fetchNcpSessionSkills } from './ncp-session';
-import { api } from './client';
+import { fetchNcpSessionSkills } from './services/ncp-session.service';
+import { nextclawClient } from './services/client.service';
 
-vi.mock('./client', () => ({
-  api: {
-    get: vi.fn()
+vi.mock('./services/client.service', () => ({
+  nextclawClient: {
+    sessions: {
+      listSkills: vi.fn()
+    }
   }
 }));
 
 describe('api/ncp-session', () => {
   beforeEach(() => {
-    vi.mocked(api.get).mockReset();
-    vi.mocked(api.get).mockResolvedValue({
-      ok: true,
-      data: {
-        sessionId: 'session-1',
-        total: 0,
-        refs: [],
-        records: []
-      }
+    vi.mocked(nextclawClient.sessions.listSkills).mockReset();
+    vi.mocked(nextclawClient.sessions.listSkills).mockResolvedValue({
+      sessionId: 'session-1',
+      total: 0,
+      refs: [],
+      records: []
     });
   });
 
   it('does not send an empty projectRoot query when no override is provided', async () => {
     await fetchNcpSessionSkills('session-1', { projectRoot: null });
 
-    expect(api.get).toHaveBeenCalledWith('/api/ncp/sessions/session-1/skills');
+    expect(nextclawClient.sessions.listSkills).toHaveBeenCalledWith('session-1', { projectRoot: null });
   });
 
   it('sends projectRoot only when the override is non-empty', async () => {
     await fetchNcpSessionSkills('session-1', { projectRoot: ' /tmp/project-alpha ' });
 
-    expect(api.get).toHaveBeenCalledWith(
-      '/api/ncp/sessions/session-1/skills?projectRoot=%2Ftmp%2Fproject-alpha'
-    );
+    expect(nextclawClient.sessions.listSkills).toHaveBeenCalledWith('session-1', {
+      projectRoot: ' /tmp/project-alpha '
+    });
   });
 });

package/src/shared/lib/api/raw-client.utils.ts

@@ -1,132 +1,9 @@
 import { API_BASE } from './api-base';
-import type { ApiResponse } from './types';
-import { systemStatusManager } from '@/features/system-status';
-
-function compactSnippet(text: string) {
-  return text.replace(/\s+/g, ' ').trim().slice(0, 200);
-}
-
-function inferNonJsonHint(endpoint: string, status: number): string | undefined {
-  if (
-    status === 404 &&
-    endpoint.startsWith('/api/config/providers/') &&
-    endpoint.endsWith('/test')
-  ) {
-    return 'Provider test endpoint is missing. This usually means nextclaw runtime version is outdated.';
-  }
-  if (status === 401 || status === 403) {
-    return 'Authentication failed. Check apiKey and custom headers.';
-  }
-  if (status === 429) {
-    return 'Rate limited by upstream provider. Retry later or switch model/provider.';
-  }
-  if (status >= 500) {
-    return 'Upstream service error. Retry later and inspect server logs if it persists.';
-  }
-  return undefined;
-}
-
-function formatUnknownFetchError(error: unknown): {
-  summary: string;
-  details: Record<string, unknown>;
-} {
-  if (error instanceof Error) {
-    const name = error.name?.trim() || 'Error';
-    const message = error.message?.trim() || 'Unknown error';
-    return {
-      summary: `${name}: ${message}`,
-      details: {
-        errorName: name,
-        errorMessage: message,
-        ...(error.stack?.trim() ? { errorStack: error.stack.trim() } : {})
-      }
-    };
-  }
-  return {
-    summary: String(error ?? 'Unknown error'),
-    details: {
-      errorName: 'NonError',
-      errorMessage: String(error ?? 'Unknown error')
-    }
-  };
-}
+import { requestRawApiResponse as requestRawTransportApiResponse } from '@/shared/lib/transport';
 
 export async function requestRawApiResponse<T>(
   endpoint: string,
   options: RequestInit = {}
-): Promise<ApiResponse<T>> {
-  const url = `${API_BASE}${endpoint}`;
-  const method = (options.method || 'GET').toUpperCase();
-
-  let response: Response;
-  try {
-    response = await fetch(url, {
-      credentials: 'include',
-      headers: {
-        'Content-Type': 'application/json',
-        ...options.headers
-      },
-      ...options
-    });
-  } catch (error) {
-    const formatted = formatUnknownFetchError(error);
-    systemStatusManager.reportTransportFailure(formatted.summary);
-    return {
-      ok: false,
-      error: {
-        code: 'NETWORK_ERROR',
-        message: `Fetch failed on ${method} ${endpoint} | ${formatted.summary}`,
-        details: {
-          method,
-          endpoint,
-          url,
-          ...formatted.details
-        }
-      }
-    };
-  }
-
-  const text = await response.text();
-  let data: ApiResponse<T> | null = null;
-  if (text) {
-    try {
-      data = JSON.parse(text) as ApiResponse<T>;
-    } catch {
-      // fall through to build a synthetic error response
-    }
-  }
-
-  if (!data) {
-    const snippet = text ? compactSnippet(text) : '';
-    const hint = inferNonJsonHint(endpoint, response.status);
-    const parts = [`Non-JSON response (${response.status} ${response.statusText}) on ${method} ${endpoint}`];
-    if (snippet) {
-      parts.push(`body=${snippet}`);
-    }
-    if (hint) {
-      parts.push(`hint=${hint}`);
-    }
-    return {
-      ok: false,
-      error: {
-        code: 'INVALID_RESPONSE',
-        message: parts.join(' | '),
-        details: {
-          status: response.status,
-          statusText: response.statusText,
-          method,
-          endpoint,
-          url,
-          bodySnippet: snippet || undefined,
-          hint
-        }
-      }
-    };
-  }
-
-  if (!response.ok) {
-    return data as ApiResponse<T>;
-  }
-
-  return data as ApiResponse<T>;
+) {
+  return await requestRawTransportApiResponse<T>(API_BASE, endpoint, options);
 }

package/src/shared/lib/api/services/agents.service.ts

@@ -0,0 +1,18 @@
+import { nextclawClient } from "./client.service";
+import type { AgentCreateRequest, AgentDeleteResult, AgentProfileView, AgentUpdateRequest } from "@/shared/lib/api/types";
+
+export async function fetchAgents(): Promise<{ agents: AgentProfileView[] }> {
+  return { agents: await nextclawClient.agents.list() };
+}
+
+export async function createAgent(data: AgentCreateRequest): Promise<AgentProfileView> {
+  return await nextclawClient.agents.create(data);
+}
+
+export async function updateAgent(agentId: string, data: AgentUpdateRequest): Promise<AgentProfileView> {
+  return await nextclawClient.agents.update(agentId, data);
+}
+
+export async function deleteAgent(agentId: string): Promise<AgentDeleteResult> {
+  return await nextclawClient.agents.delete(agentId);
+}

package/src/shared/lib/api/services/channel-auth.service.ts

@@ -0,0 +1,21 @@
+import { nextclawClient } from './client.service';
+import type {
+  ChannelAuthPollRequest,
+  ChannelAuthPollResult,
+  ChannelAuthStartRequest,
+  ChannelAuthStartResult
+} from '@/shared/lib/api/channel-auth.types';
+
+export async function startChannelAuth(
+  channel: string,
+  data: ChannelAuthStartRequest = {}
+): Promise<ChannelAuthStartResult> {
+  return await nextclawClient.channelAuth.start(channel, data);
+}
+
+export async function pollChannelAuth(
+  channel: string,
+  data: ChannelAuthPollRequest
+): Promise<ChannelAuthPollResult> {
+  return await nextclawClient.channelAuth.poll(channel, data);
+}

package/src/shared/lib/api/{client.ts → services/client.service.ts}

@@ -1,5 +1,45 @@
+import {
+  createNextClawClient,
+  type NextClawRealtimeEvent,
+  type NextClawTransport,
+  type NextClawTransportRequestInput,
+  type NextClawTransportUploadInput
+} from '@nextclaw/client-sdk';
+import { API_BASE } from '@/shared/lib/api/api-base';
 import { appClient } from '@/shared/lib/transport';
-import type { ApiResponse } from './types';
+import type { ApiResponse } from '@/shared/lib/api/types';
+
+const nextclawUiTransport: NextClawTransport = {
+  request: async <T>({ body, method, path, signal, timeoutMs }: NextClawTransportRequestInput): Promise<T> => {
+    return await appClient.request({
+      method,
+      path,
+      ...(body !== undefined ? { body } : {}),
+      ...(signal ? { signal } : {}),
+      ...(timeoutMs !== undefined ? { timeoutMs } : {})
+    });
+  },
+  upload: async <T>({ formData, headers, path, signal }: NextClawTransportUploadInput): Promise<T> => {
+    const response = await fetch(`${API_BASE}${path}`, {
+      method: 'POST',
+      body: formData,
+      credentials: 'include',
+      ...(headers ? { headers } : {}),
+      ...(signal ? { signal } : {})
+    });
+    const payload = (await response.json()) as ApiResponse<unknown>;
+    if (!response.ok || !payload.ok) {
+      throw new Error(readApiErrorMessage(payload, `Upload failed for ${path}`));
+    }
+    return payload.data as T;
+  },
+  subscribe: (handler: (event: NextClawRealtimeEvent) => void) => appClient.subscribe(handler)
+};
+
+export const nextclawClient = createNextClawClient({
+  baseUrl: API_BASE,
+  transport: nextclawUiTransport
+});
 
 export async function requestApiResponse<T>(
   endpoint: string,
@@ -64,3 +104,7 @@ function parseRequestBody(body: BodyInit | null | undefined): unknown {
   }
   return body;
 }
+
+function readApiErrorMessage(payload: ApiResponse<unknown>, fallback: string): string {
+  return !payload.ok ? payload.error.message : fallback;
+}