@nextclaw/ui 0.12.19 → 0.12.20-beta.1

package/src/platforms/desktop/types/desktop-update.types.ts

@@ -1,29 +1,31 @@
-export type DesktopUpdateStatus =
-  | 'idle'
-  | 'checking'
-  | 'update-available'
-  | 'downloading'
-  | 'downloaded'
-  | 'up-to-date'
-  | 'failed';
+import type {
+  InstallationKind,
+  UpdateBlockReason,
+  UpdatePreferences,
+  UpdateProgress,
+  UpdateSnapshot,
+  UpdateStatus,
+} from '@nextclaw/kernel';
+
+export type DesktopUpdateStatus = Extract<
+  UpdateStatus,
+  'idle' | 'checking' | 'update-available' | 'downloading' | 'downloaded' | 'blocked' | 'up-to-date' | 'failed'
+>;
 
 export type DesktopReleaseChannel = 'stable' | 'beta';
 
-export type DesktopUpdatePreferences = {
-  automaticChecks: boolean;
-  autoDownload: boolean;
-};
+export type DesktopInstallationKind = InstallationKind;
+
+export type DesktopUpdateBlockReason = UpdateBlockReason;
+
+export type DesktopUpdateProgress = UpdateProgress;
+
+export type DesktopUpdatePreferences = UpdatePreferences;
 
-export type DesktopUpdateSnapshot = {
+export type DesktopUpdateSnapshot = UpdateSnapshot & {
   status: DesktopUpdateStatus;
   channel: DesktopReleaseChannel;
   launcherVersion: string;
-  currentVersion: string | null;
-  availableVersion: string | null;
-  downloadedVersion: string | null;
-  releaseNotesUrl: string | null;
-  lastCheckedAt: string | null;
-  errorMessage: string | null;
   preferences: DesktopUpdatePreferences;
 };
 

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

@@ -0,0 +1,142 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+import { useRuntimeUpdateStore } from '@/features/system-status';
+import { BrandHeader } from '@/shared/components/common/brand-header';
+import { setLanguage } from '@/shared/lib/i18n';
+
+const mocks = vi.hoisted(() => ({
+  applyDownloadedUpdate: vi.fn(),
+  downloadUpdate: vi.fn()
+}));
+
+vi.mock('@/features/system-status', async () => {
+  const actual = await vi.importActual<typeof import('@/features/system-status')>(
+    '@/features/system-status'
+  );
+  return {
+    ...actual,
+    runtimeUpdateManager: {
+      ...actual.runtimeUpdateManager,
+      applyDownloadedUpdate: mocks.applyDownloadedUpdate,
+      downloadUpdate: mocks.downloadUpdate
+    }
+  };
+});
+
+function renderBrandHeader() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: {
+        retry: false
+      }
+    }
+  });
+  queryClient.setQueryData(['app-meta'], {
+    name: 'NextClaw',
+    productVersion: '0.18.11'
+  });
+  return render(
+    <QueryClientProvider client={queryClient}>
+      <MemoryRouter>
+        <BrandHeader suffix={null} />
+      </MemoryRouter>
+    </QueryClientProvider>
+  );
+}
+
+describe('BrandHeader', () => {
+  beforeEach(() => {
+    setLanguage('zh');
+    useRuntimeUpdateStore.setState({
+      supported: false,
+      initialized: false,
+      busyAction: null,
+      snapshot: null
+    });
+    mocks.applyDownloadedUpdate.mockReset();
+    mocks.downloadUpdate.mockReset();
+  });
+
+  it('shows update progress next to the product version', () => {
+    useRuntimeUpdateStore.setState({
+      supported: true,
+      initialized: true,
+      busyAction: null,
+      snapshot: {
+        status: 'downloading',
+        installationKind: 'desktop-bundle',
+        channel: 'stable',
+        hostVersion: '0.0.138',
+        currentVersion: '0.18.11',
+        availableVersion: '0.18.12',
+        downloadedVersion: null,
+        minimumHostVersion: null,
+        releaseNotesUrl: null,
+        lastCheckedAt: null,
+        progress: {
+          downloadedBytes: 50,
+          totalBytes: 100,
+          percent: 50
+        },
+        canAutoDownload: true,
+        canApplyInApp: false,
+        requiresRestart: false,
+        blockReason: null,
+        recoveryCommand: null,
+        errorMessage: null,
+        preferences: {
+          automaticChecks: true,
+          autoDownload: true
+        }
+      }
+    });
+
+    renderBrandHeader();
+
+    expect(screen.getByText('v0.18.11')).toBeTruthy();
+    expect(screen.getByText('下载 50%')).toBeTruthy();
+    expect(screen.queryByRole('button', { name: '更新' })).toBeNull();
+  });
+
+  it('applies the downloaded update from the version-adjacent update button', async () => {
+    const user = userEvent.setup();
+    useRuntimeUpdateStore.setState({
+      supported: true,
+      initialized: true,
+      busyAction: null,
+      snapshot: {
+        status: 'downloaded',
+        installationKind: 'desktop-bundle',
+        channel: 'stable',
+        hostVersion: '0.0.138',
+        currentVersion: '0.18.11',
+        availableVersion: null,
+        downloadedVersion: '0.18.12',
+        minimumHostVersion: null,
+        releaseNotesUrl: null,
+        lastCheckedAt: null,
+        progress: null,
+        canAutoDownload: true,
+        canApplyInApp: true,
+        requiresRestart: false,
+        blockReason: null,
+        recoveryCommand: null,
+        errorMessage: null,
+        preferences: {
+          automaticChecks: true,
+          autoDownload: true
+        }
+      }
+    });
+
+    renderBrandHeader();
+
+    await user.click(screen.getByRole('button', { name: '更新' }));
+
+    expect(mocks.applyDownloadedUpdate).toHaveBeenCalledTimes(1);
+    expect(mocks.downloadUpdate).not.toHaveBeenCalled();
+  });
+});

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

@@ -1,6 +1,10 @@
+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 { RuntimeStatusEntry } from '@/app/components/layout/runtime-status-entry';
+import { cn } from '@/shared/lib/utils';
+import { t } from '@/shared/lib/i18n';
 
 type BrandHeaderProps = {
   className?: string;
@@ -21,8 +25,97 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
       <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}
+        <RuntimeUpdateInlineStatus />
         {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
       </div>
     </div>
   );
 }
+
+function RuntimeUpdateInlineStatus() {
+  const { supported, busyAction, snapshot } = useRuntimeUpdateStore();
+  if (!supported || !snapshot) {
+    return null;
+  }
+  if (snapshot.status === 'downloading' || snapshot.status === 'blocked' || snapshot.status === 'failed') {
+    return <RuntimeUpdateInlineBadge snapshot={snapshot} />;
+  }
+  if (snapshot.status === 'downloaded') {
+    return (
+      <button
+        type="button"
+        className={cn(
+          'inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-semibold leading-none ring-1 transition-colors',
+          resolveInlineUpdateTone(snapshot.status)
+        )}
+        disabled={busyAction === 'applying'}
+        onClick={() => void runtimeUpdateManager.applyDownloadedUpdate()}
+      >
+        {busyAction === 'applying' ? t('desktopUpdatesInlineApplying') : t('desktopUpdatesInlineReady')}
+      </button>
+    );
+  }
+  if (snapshot.status === 'update-available') {
+    return (
+      <button
+        type="button"
+        className={cn(
+          'inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-semibold leading-none ring-1 transition-colors',
+          resolveInlineUpdateTone(snapshot.status)
+        )}
+        disabled={busyAction === 'downloading'}
+        onClick={() => void runtimeUpdateManager.downloadUpdate()}
+      >
+        {busyAction === 'downloading' ? t('desktopUpdatesInlineDownloading') : t('desktopUpdatesInlineDownload')}
+      </button>
+    );
+  }
+  return null;
+}
+
+function RuntimeUpdateInlineBadge({ snapshot }: { snapshot: UpdateSnapshot }) {
+  const label = resolveInlineUpdateLabel(snapshot);
+  if (!label) {
+    return null;
+  }
+  return (
+    <span
+      className={cn(
+        'inline-flex h-5 shrink-0 items-center rounded-full px-2 text-[11px] font-semibold leading-none ring-1 transition-colors',
+        resolveInlineUpdateTone(snapshot.status)
+      )}
+      title={t('updates')}
+    >
+      {label}
+    </span>
+  );
+}
+
+function resolveInlineUpdateLabel(snapshot: UpdateSnapshot): string | null {
+  if (snapshot.status === 'downloading') {
+    const percent = snapshot.progress?.percent;
+    return percent === null || percent === undefined
+      ? t('desktopUpdatesInlineDownloading')
+      : t('desktopUpdatesInlineDownloadingPercent').replace('{percent}', String(percent));
+  }
+  if (snapshot.status === 'downloaded') {
+    return t('desktopUpdatesInlineReady');
+  }
+  if (snapshot.status === 'update-available') {
+    return t('desktopUpdatesInlineDownload');
+  }
+  if (snapshot.status === 'blocked' || snapshot.status === 'failed') {
+    return t('desktopUpdatesInlineAttention');
+  }
+  return null;
+}
+
+function resolveInlineUpdateTone(status: UpdateSnapshot['status']): string {
+  if (status === 'downloaded') {
+    return 'bg-emerald-50 text-emerald-700 ring-emerald-100 hover:bg-emerald-100 disabled:opacity-70';
+  }
+  if (status === 'blocked' || status === 'failed') {
+    return 'bg-red-50 text-red-700 ring-red-100';
+  }
+  return 'bg-amber-50 text-amber-700 ring-amber-100 hover:bg-amber-100 disabled:opacity-70';
+}

package/src/shared/components/cron-config.tsx

@@ -39,7 +39,7 @@ function formatEveryDuration(ms?: number | null): string {
 }
 
 function describeSchedule(job: CronJobView): string {
-  const schedule = job.schedule;
+  const { schedule } = job;
   if (schedule.kind === 'cron') {
     return schedule.expr ? `cron ${schedule.expr}` : 'cron';
   }

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

@@ -83,7 +83,7 @@ describe('DocBrowserProvider dedupe keys', () => {
         title: 'Skill B',
       });
     });
-    const activeTabId = result.current.activeTabId;
+    const { activeTabId } = result.current;
 
     act(() => {
       result.current.open('data:text/html,A-loaded', {

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

@@ -203,7 +203,7 @@ export function DocBrowser({ displayMode = 'desktop' }: DocBrowserProps) {
     e.preventDefault();
     e.stopPropagation();
     setIsResizing(true);
-    const axis = (e.currentTarget as HTMLElement).dataset.axis;
+    const { axis } = (e.currentTarget as HTMLElement).dataset;
     resizeRef.current = {
       startX: e.clientX,
       startY: e.clientY,

package/src/shared/components/search-config.tsx

@@ -179,7 +179,7 @@ function SearchProviderFields(props: {
   const { draft, provider, search, selectedDocsUrl, updateProviderDraft } = props;
 
   if (provider === "bocha") {
-    const bocha = draft.providers.bocha;
+    const { bocha } = draft.providers;
     return (
       <>
         <SearchTextField
@@ -214,7 +214,7 @@ function SearchProviderFields(props: {
   }
 
   if (provider === "tavily") {
-    const tavily = draft.providers.tavily;
+    const { tavily } = draft.providers;
     return (
       <>
         <SearchTextField
@@ -252,7 +252,7 @@ function SearchProviderFields(props: {
     );
   }
 
-  const brave = draft.providers.brave;
+  const { brave } = draft.providers;
   return (
     <>
       <SearchTextField

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

@@ -0,0 +1,3 @@
+## 子树边界豁免
+
+- 原因：`shared/lib/api` 是历史形成的前端 API facade，当前同时承载 client、endpoint wrapper、query cache、transport helper 与 response view types。本次新增 `ncp-session.types.ts` 是为了把会话类型从超大的 `types.ts` 中拆出，实际降低核心类型文件体积；完整子树化需要同步改造大量公共导出和调用方，适合单独结构治理批次推进。

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

@@ -1,20 +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 './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/ncp-session.types.ts

@@ -0,0 +1,92 @@
+import type { NcpMessage, NcpSessionStatus, NcpSessionSummary } from '@nextclaw/ncp';
+import type { ThinkingLevel } from './types';
+
+export type SessionTypeIconView = {
+  kind: "image";
+  src: string;
+  alt?: string | null;
+};
+
+export type RuntimeEntryView = {
+  enabled?: boolean;
+  label?: string;
+  icon?: SessionTypeIconView | null;
+  type: string;
+  config?: Record<string, unknown>;
+};
+
+export type SessionContextWindowView = {
+  usedContextTokens: number;
+  totalContextTokens: number;
+  prunedUsedContextTokens: number;
+  availableContextTokens: number;
+  droppedHistoryCount: number;
+  truncatedToolResultCount: number;
+  truncatedSystemPrompt: boolean;
+  truncatedUserMessage: boolean;
+  compacted: boolean;
+  checkpointId?: string;
+  compactedMessageCount: number;
+  compactedUsedContextTokens?: number;
+  updatedAt: string;
+};
+
+export type SessionEntryView = {
+  key: string;
+  createdAt: string;
+  updatedAt: string;
+  lastMessageAt?: string;
+  readAt?: string;
+  agentId?: string;
+  label?: string;
+  channel?: string;
+  type?: string;
+  preferredModel?: string;
+  preferredThinking?: ThinkingLevel | null;
+  projectRoot?: string | null;
+  projectName?: string | null;
+  sessionType: string;
+  sessionTypeMutable: boolean;
+  isChildSession?: boolean;
+  isPromotedChildSession?: boolean;
+  parentSessionId?: string | null;
+  spawnedByRequestId?: string | null;
+  contextWindow?: SessionContextWindowView | null;
+  messageCount: number;
+  lastRole?: string;
+  lastTimestamp?: string;
+};
+
+export type SessionMessageView = {
+  role: string;
+  content: unknown;
+  timestamp: string;
+  name?: string;
+  tool_call_id?: string;
+  tool_calls?: Array<Record<string, unknown>>;
+  reasoning_content?: string;
+};
+
+export type SessionEventView = {
+  seq: number;
+  type: string;
+  timestamp: string;
+  message?: SessionMessageView;
+};
+
+export type NcpSessionSummaryView = NcpSessionSummary;
+
+export type NcpSessionsListView = {
+  sessions: NcpSessionSummaryView[];
+  total: number;
+};
+
+export type NcpMessageView = NcpMessage;
+
+export type NcpSessionMessagesView = {
+  sessionId: string;
+  status: NcpSessionStatus;
+  messages: NcpMessageView[];
+  contextWindow?: SessionContextWindowView | null;
+  total: number;
+};

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);
 }