@nextclaw/ui 0.6.9 → 0.6.11

package/src/hooks/useConfig.ts

@@ -24,6 +24,7 @@ import {
   fetchChatRun,
   fetchChatRuns,
   fetchChatCapabilities,
+  fetchChatSessionTypes,
   fetchCronJobs,
   deleteCronJob,
   setCronJobEnabled,
@@ -139,7 +140,8 @@ export function useTestProviderConnection() {
 
 export function useStartProviderAuth() {
   return useMutation({
-    mutationFn: ({ provider }: { provider: string }) => startProviderAuth(provider)
+    mutationFn: ({ provider, data }: { provider: string; data?: unknown }) =>
+      startProviderAuth(provider, data as Parameters<typeof startProviderAuth>[1])
   });
 }
 
@@ -293,9 +295,26 @@ export function useChatCapabilities(params?: { sessionKey?: string | null; agent
   });
 }
 
-export function useChatRuns(params?: { sessionKey?: string | null; states?: Array<'queued' | 'running' | 'completed' | 'failed' | 'aborted'>; limit?: number }) {
+export function useChatSessionTypes() {
+  return useQuery({
+    queryKey: ['chat-session-types'],
+    queryFn: fetchChatSessionTypes,
+    staleTime: 10_000,
+    retry: false
+  });
+}
+
+export function useChatRuns(params?: {
+  sessionKey?: string | null;
+  states?: Array<'queued' | 'running' | 'completed' | 'failed' | 'aborted'>;
+  limit?: number;
+  syncActiveStates?: boolean;
+  isLocallyRunning?: boolean;
+}) {
   const sessionKey = params?.sessionKey?.trim() || undefined;
   const states = Array.isArray(params?.states) && params.states.length > 0 ? params.states : undefined;
+  const isActiveStatesQuery = Boolean(states?.some((state) => state === 'queued' || state === 'running'));
+  const shouldSyncActiveStates = Boolean(params?.syncActiveStates && isActiveStatesQuery);
   return useQuery({
     queryKey: ['chat-runs', sessionKey ?? null, states ?? null, params?.limit ?? null],
     queryFn: () => fetchChatRuns({
@@ -305,6 +324,18 @@ export function useChatRuns(params?: { sessionKey?: string | null; states?: Arra
     }),
     enabled: Boolean(sessionKey) || Boolean(states),
     staleTime: 5_000,
+    refetchInterval: (query) => {
+      if (!shouldSyncActiveStates) {
+        return false;
+      }
+      if (params?.isLocallyRunning) {
+        return 800;
+      }
+      const data = query.state.data;
+      const hasActiveRuns = Array.isArray(data?.runs) && data.runs.length > 0;
+      return hasActiveRuns ? 800 : false;
+    },
+    refetchIntervalInBackground: false,
     retry: false
   });
 }

package/src/hooks/useObservable.ts

@@ -0,0 +1,20 @@
+import { useEffect, useState } from 'react';
+import type { BehaviorSubject, Observable } from 'rxjs';
+
+export function useValueFromBehaviorSubject<T>(subject: BehaviorSubject<T>): T {
+  const [state, setState] = useState<T>(subject.getValue());
+  useEffect(() => {
+    const subscription = subject.subscribe(setState);
+    return () => subscription.unsubscribe();
+  }, [subject]);
+  return state;
+}
+
+export function useValueFromObservable<T>(observable: Observable<T>, defaultValue: T): T {
+  const [state, setState] = useState<T>(defaultValue);
+  useEffect(() => {
+    const subscription = observable.subscribe(setState);
+    return () => subscription.unsubscribe();
+  }, [observable]);
+  return state;
+}

package/src/hooks/useWebSocket.ts

@@ -38,15 +38,30 @@ export function useWebSocket(queryClient?: QueryClient) {
     })();
     const client = new ConfigWebSocket(wsUrl);
 
+    const invalidateSessionQueries = (sessionKey?: string) => {
+      if (!queryClient) {
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: ['sessions'] });
+      if (sessionKey && sessionKey.trim().length > 0) {
+        queryClient.invalidateQueries({ queryKey: ['session-history', sessionKey.trim()] });
+        return;
+      }
+      queryClient.invalidateQueries({ queryKey: ['session-history'] });
+    };
+
     client.on('connection.open', () => {
       setConnectionStatus('connected');
     });
 
-    client.on('config.updated', () => {
+    client.on('config.updated', (event) => {
       // Trigger refetch of config
       if (queryClient) {
         queryClient.invalidateQueries({ queryKey: ['config'] });
       }
+      if (event.type === 'config.updated' && event.payload.path.startsWith('session')) {
+        invalidateSessionQueries();
+      }
     });
 
     client.on('run.updated', (event) => {
@@ -70,6 +85,13 @@ export function useWebSocket(queryClient?: QueryClient) {
       }
     });
 
+    client.on('session.updated', (event) => {
+      if (event.type !== 'session.updated') {
+        return;
+      }
+      invalidateSessionQueries(event.payload.sessionKey);
+    });
+
     client.on('error', (event) => {
       if (event.type === 'error') {
         console.error('WebSocket error:', event.payload.message);

package/src/lib/chat-message.ts

@@ -11,37 +11,6 @@ export type ToolCard = {
   hasResult?: boolean;
 };
 
-export type ChatTimelineMessageItem = {
-  kind: 'message';
-  key: string;
-  role: ChatRole;
-  timestamp: string;
-  message: SessionMessageView;
-};
-
-export type ChatTimelineAssistantTurnSegment =
-  | {
-      kind: 'assistant_message';
-      key: string;
-      text: string;
-      reasoning: string;
-    }
-  | {
-      kind: 'tool_card';
-      key: string;
-      card: ToolCard;
-    };
-
-export type ChatTimelineAssistantTurnItem = {
-  kind: 'assistant_turn';
-  key: string;
-  role: 'assistant';
-  timestamp: string;
-  segments: ChatTimelineAssistantTurnSegment[];
-};
-
-export type ChatTimelineItem = ChatTimelineMessageItem | ChatTimelineAssistantTurnItem;
-
 const TOOL_DETAIL_FIELDS = ['cmd', 'command', 'query', 'q', 'path', 'url', 'to', 'channel', 'agentId', 'sessionKey'];
 
 function isRecord(value: unknown): value is Record<string, unknown> {
@@ -55,7 +24,7 @@ function truncateText(value: string, maxChars = 2400): string {
   return `${value.slice(0, maxChars)}\n…`;
 }
 
-function stringifyUnknown(value: unknown): string {
+export function stringifyUnknown(value: unknown): string {
   if (typeof value === 'string') {
     return value;
   }
@@ -91,7 +60,7 @@ function parseArgsObject(value: unknown): Record<string, unknown> | null {
   }
 }
 
-function summarizeToolArgs(args: unknown): string | undefined {
+export function summarizeToolArgs(args: unknown): string | undefined {
   const parsed = parseArgsObject(args);
   if (!parsed) {
     const text = stringifyUnknown(args).trim();
@@ -212,20 +181,6 @@ export function extractToolCards(message: SessionMessageView): ToolCard[] {
   return cards;
 }
 
-function normalizeEvent(event: SessionEventView, index: number): SessionEventView & { _idx: number; _seq: number } {
-  const seq = Number.isFinite(event.seq) && event.seq > 0 ? Math.trunc(event.seq) : index + 1;
-  const timestamp =
-    typeof event.timestamp === 'string' && event.timestamp
-      ? event.timestamp
-      : event.message?.timestamp ?? new Date().toISOString();
-  return {
-    ...event,
-    timestamp,
-    _idx: index,
-    _seq: seq
-  };
-}
-
 function inferEventTypeFromMessage(message: SessionMessageView): string {
   const role = normalizeChatRole(message);
   if (role === 'assistant' && hasToolCalls(message)) {
@@ -245,158 +200,3 @@ export function buildFallbackEventsFromMessages(messages: SessionMessageView[]):
     message
   }));
 }
-
-function appendText(base: string, next: string): string {
-  if (!next) {
-    return base;
-  }
-  if (!base) {
-    return next;
-  }
-  return `${base}\n\n${next}`;
-}
-
-export function buildChatTimeline(events: SessionEventView[]): ChatTimelineItem[] {
-  const normalized = events
-    .map((event, index) => normalizeEvent(event, index))
-    .sort((left, right) => {
-      if (left._seq !== right._seq) {
-        return left._seq - right._seq;
-      }
-      const leftTs = Date.parse(left.timestamp);
-      const rightTs = Date.parse(right.timestamp);
-      if (Number.isFinite(leftTs) && Number.isFinite(rightTs) && leftTs !== rightTs) {
-        return leftTs - rightTs;
-      }
-      return left._idx - right._idx;
-    });
-
-  const timeline: ChatTimelineItem[] = [];
-  let activeTurn:
-    | {
-        item: ChatTimelineAssistantTurnItem;
-        cardByCallId: Map<string, ToolCard>;
-      }
-    | null = null;
-
-  const closeActiveTurn = () => {
-    activeTurn = null;
-  };
-
-  const ensureActiveTurn = (eventKey: string, timestamp: string) => {
-    if (activeTurn) {
-      activeTurn.item.timestamp = timestamp;
-      return activeTurn;
-    }
-    const item: ChatTimelineAssistantTurnItem = {
-      kind: 'assistant_turn',
-      key: `turn-${eventKey}`,
-      role: 'assistant',
-      timestamp,
-      segments: []
-    };
-    timeline.push(item);
-    activeTurn = {
-      item,
-      cardByCallId: new Map<string, ToolCard>()
-    };
-    return activeTurn;
-  };
-
-  const pushAssistantMessageSegment = (
-    target: { item: ChatTimelineAssistantTurnItem },
-    eventKey: string,
-    message: SessionMessageView
-  ) => {
-    const text = extractMessageText(message.content).trim();
-    const reasoning =
-      typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
-    if (!text && !reasoning) {
-      return;
-    }
-    target.item.segments.push({
-      kind: 'assistant_message',
-      key: `assistant-${eventKey}-${target.item.segments.length}`,
-      text,
-      reasoning
-    });
-  };
-
-  for (const event of normalized) {
-    const message = event.message;
-    if (!message) {
-      continue;
-    }
-
-    const role = normalizeChatRole(message);
-    const timestamp =
-      typeof message.timestamp === 'string' && message.timestamp
-        ? message.timestamp
-        : event.timestamp;
-    const eventKey = `${event._seq}-${event._idx}`;
-
-    if (role === 'assistant') {
-      const turn = ensureActiveTurn(eventKey, timestamp);
-      pushAssistantMessageSegment(turn, eventKey, message);
-      if (!hasToolCalls(message)) {
-        continue;
-      }
-
-      const toolCards = buildToolCallCards(message);
-      for (const card of toolCards) {
-        turn.item.segments.push({
-          kind: 'tool_card',
-          key: `tool-call-${eventKey}-${turn.item.segments.length}`,
-          card
-        });
-        if (typeof card.callId === 'string' && card.callId.trim()) {
-          turn.cardByCallId.set(card.callId, card);
-        }
-      }
-      continue;
-    }
-
-    if (role === 'tool') {
-      const turn = ensureActiveTurn(eventKey, timestamp);
-      const callId =
-        typeof message.tool_call_id === 'string' && message.tool_call_id.trim()
-          ? message.tool_call_id.trim()
-          : undefined;
-      if (callId && turn.cardByCallId.has(callId)) {
-        const card = turn.cardByCallId.get(callId)!;
-        const resultText = extractMessageText(message.content).trim();
-        card.text = appendText(card.text ?? '', resultText);
-        card.hasResult = true;
-        if (typeof message.name === 'string' && message.name.trim()) {
-          card.name = message.name.trim();
-        }
-        turn.item.timestamp = timestamp;
-        continue;
-      }
-
-      turn.item.segments.push({
-        kind: 'tool_card',
-        key: `tool-result-${eventKey}-${turn.item.segments.length}`,
-        card: {
-          kind: 'result',
-          name: toToolName(message.name),
-          text: extractMessageText(message.content).trim(),
-          callId,
-          hasResult: true
-        }
-      });
-      continue;
-    }
-
-    timeline.push({
-      kind: 'message',
-      key: `message-${event._seq}-${event._idx}`,
-      role,
-      timestamp,
-      message
-    });
-    closeActiveTurn();
-  }
-
-  return timeline;
-}

package/src/lib/chat-runtime-utils.ts

@@ -0,0 +1,250 @@
+import type { SessionMessageView } from '@/api/types';
+import { extractMessageText } from '@/lib/chat-message';
+import { ToolInvocationStatus, type UIMessage } from '@nextclaw/agent-chat';
+
+export { isAbortLikeError, formatSendError, buildLocalAssistantMessage } from '@nextclaw/agent-chat';
+
+export function normalizeRequestedSkills(value: string[] | undefined): string[] {
+  if (!Array.isArray(value)) {
+    return [];
+  }
+  const deduped = new Set<string>();
+  for (const item of value) {
+    const trimmed = item.trim();
+    if (trimmed) {
+      deduped.add(trimmed);
+    }
+  }
+  return [...deduped];
+}
+
+export function buildUiMessagesFromHistoryMessages(messages: SessionMessageView[]): UIMessage[] {
+  const normalizedToolRoles = new Set(['tool', 'tool_result', 'toolresult', 'function']);
+  const output: UIMessage[] = [];
+  let cursor = 0;
+  let assistantIndex = 0;
+  let activeAssistant: UIMessage | null = null;
+
+  const buildId = (role: UIMessage['role'], timestamp: string) => {
+    cursor += 1;
+    return `history-${role}-${timestamp || 'unknown'}-${cursor}`;
+  };
+
+  const parseArgsPayload = (raw: unknown): { args: string; parsedArgs?: unknown } => {
+    const args = typeof raw === 'string' ? raw : JSON.stringify(raw ?? {});
+    try {
+      return { args, parsedArgs: JSON.parse(args) };
+    } catch {
+      return { args };
+    }
+  };
+
+  const findToolPartIndex = (parts: UIMessage['parts'], toolCallId: string): number => {
+    for (let index = parts.length - 1; index >= 0; index -= 1) {
+      const part = parts[index];
+      if (part.type === 'tool-invocation' && part.toolInvocation.toolCallId === toolCallId) {
+        return index;
+      }
+    }
+    return -1;
+  };
+
+  const ensureAssistant = (timestamp: string): UIMessage => {
+    if (activeAssistant) {
+      activeAssistant = {
+        ...activeAssistant,
+        meta: {
+          ...activeAssistant.meta,
+          timestamp
+        }
+      };
+      return activeAssistant;
+    }
+    assistantIndex += 1;
+    activeAssistant = {
+      id: `history-assistant-${assistantIndex}-${timestamp || 'unknown'}`,
+      role: 'assistant',
+      parts: [],
+      meta: {
+        source: 'history',
+        status: 'final',
+        timestamp
+      }
+    };
+    return activeAssistant;
+  };
+
+  const flushAssistant = () => {
+    if (!activeAssistant) {
+      return;
+    }
+    if (activeAssistant.parts.length > 0) {
+      output.push(activeAssistant);
+    }
+    activeAssistant = null;
+  };
+
+  const appendAssistantText = (timestamp: string, text: string) => {
+    if (!text) {
+      return;
+    }
+    const assistant = ensureAssistant(timestamp);
+    assistant.parts = [...assistant.parts, { type: 'text', text }];
+  };
+
+  const appendAssistantReasoning = (timestamp: string, reasoning: string) => {
+    if (!reasoning) {
+      return;
+    }
+    const assistant = ensureAssistant(timestamp);
+    assistant.parts = [...assistant.parts, { type: 'reasoning', reasoning, details: [] }];
+  };
+
+  const appendAssistantToolCall = (params: {
+    timestamp: string;
+    toolCallId: string;
+    toolName: string;
+    args: string;
+    parsedArgs?: unknown;
+  }) => {
+    const assistant = ensureAssistant(params.timestamp);
+    const partIndex = findToolPartIndex(assistant.parts, params.toolCallId);
+    const part = {
+      type: 'tool-invocation' as const,
+      toolInvocation: {
+        status: ToolInvocationStatus.CALL,
+        toolCallId: params.toolCallId,
+        toolName: params.toolName,
+        args: params.args,
+        parsedArgs: params.parsedArgs
+      }
+    };
+    if (partIndex >= 0) {
+      assistant.parts = [...assistant.parts.slice(0, partIndex), part, ...assistant.parts.slice(partIndex + 1)];
+      return;
+    }
+    assistant.parts = [...assistant.parts, part];
+  };
+
+  const appendAssistantToolResult = (params: {
+    timestamp: string;
+    toolCallId: string;
+    toolName: string;
+    result: unknown;
+  }) => {
+    if (!params.toolCallId) {
+      return;
+    }
+    const assistant = ensureAssistant(params.timestamp);
+    const partIndex = findToolPartIndex(assistant.parts, params.toolCallId);
+    if (partIndex < 0) {
+      assistant.parts = [
+        ...assistant.parts,
+        {
+          type: 'tool-invocation',
+          toolInvocation: {
+            status: ToolInvocationStatus.RESULT,
+            toolCallId: params.toolCallId,
+            toolName: params.toolName,
+            args: '{}',
+            parsedArgs: undefined,
+            result: params.result
+          }
+        }
+      ];
+      return;
+    }
+    const part = assistant.parts[partIndex];
+    if (part.type !== 'tool-invocation') {
+      return;
+    }
+    assistant.parts = [
+      ...assistant.parts.slice(0, partIndex),
+      {
+        ...part,
+        toolInvocation: {
+          ...part.toolInvocation,
+          status: ToolInvocationStatus.RESULT,
+          result: params.result
+        }
+      },
+      ...assistant.parts.slice(partIndex + 1)
+    ];
+  };
+
+  for (const message of messages) {
+    const roleValue = message.role?.toLowerCase().trim();
+    if (!roleValue) {
+      continue;
+    }
+    const timestamp = message.timestamp;
+
+    if (roleValue === 'user' || roleValue === 'system' || roleValue === 'data') {
+      flushAssistant();
+      const text = extractMessageText(message.content).trim();
+      if (!text) {
+        continue;
+      }
+      output.push({
+        id: buildId(roleValue as UIMessage['role'], timestamp),
+        role: roleValue as UIMessage['role'],
+        parts: [{ type: 'text', text }],
+        meta: {
+          source: 'history',
+          status: 'final',
+          timestamp
+        }
+      });
+      continue;
+    }
+
+    if (roleValue === 'assistant') {
+      const text = extractMessageText(message.content).trim();
+      if (text) {
+        appendAssistantText(timestamp, text);
+      }
+      if (typeof message.reasoning_content === 'string' && message.reasoning_content.trim()) {
+        appendAssistantReasoning(timestamp, message.reasoning_content.trim());
+      }
+      if (Array.isArray(message.tool_calls)) {
+        for (const call of message.tool_calls) {
+          if (!call || typeof call !== 'object') {
+            continue;
+          }
+          const callRecord = call as Record<string, unknown>;
+          const fnValue = callRecord.function;
+          const fn = typeof fnValue === 'object' && fnValue ? (fnValue as { name?: unknown; arguments?: unknown }) : null;
+          const toolCallId = typeof callRecord.id === 'string' ? callRecord.id.trim() : '';
+          if (!toolCallId) {
+            continue;
+          }
+          const toolName =
+            typeof fn?.name === 'string' ? fn.name : typeof callRecord.name === 'string' ? callRecord.name : 'tool';
+          const payload = parseArgsPayload(fn?.arguments ?? callRecord.arguments ?? '');
+          appendAssistantToolCall({
+            timestamp,
+            toolCallId,
+            toolName,
+            args: payload.args,
+            parsedArgs: payload.parsedArgs
+          });
+        }
+      }
+      continue;
+    }
+
+    if (normalizedToolRoles.has(roleValue)) {
+      const toolCallId = typeof message.tool_call_id === 'string' ? message.tool_call_id.trim() : '';
+      const toolName = typeof message.name === 'string' && message.name.trim() ? message.name.trim() : 'tool';
+      appendAssistantToolResult({
+        timestamp,
+        toolCallId,
+        toolName,
+        result: message.content
+      });
+    }
+  }
+
+  flushAssistant();
+  return output;
+}

package/src/lib/i18n.ts

@@ -263,6 +263,8 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   providerAuthOpenPrompt: { zh: '请在浏览器完成授权，验证码：', en: 'Open browser and complete authorization (code: ' },
   providerAuthOpenPromptSuffix: { zh: '', en: ')' },
   providerAuthStartFailed: { zh: '启动授权失败', en: 'Failed to start authorization' },
+  providerAuthMethodLabel: { zh: '授权区域', en: 'Authorization Region' },
+  providerAuthMethodPlaceholder: { zh: '请选择授权方式', en: 'Select authorization method' },
   providerAuthImportFromCli: { zh: '从 Qwen CLI 导入', en: 'Import From Qwen CLI' },
   providerAuthImporting: { zh: '导入中...', en: 'Importing...' },
   providerAuthImportSuccess: { zh: '已从 CLI 导入凭证。', en: 'Imported provider credentials from CLI.' },
@@ -504,6 +506,14 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatSelectAgent: { zh: '选择 Agent', en: 'Select Agent' },
   chatModelLabel: { zh: '对话模型', en: 'Chat Model' },
   chatSelectModel: { zh: '选择模型', en: 'Select model' },
+  chatSessionTypeLabel: { zh: '会话类型', en: 'Session Type' },
+  chatSessionTypeNative: { zh: '原生', en: 'Native' },
+  chatSessionTypeCodex: { zh: 'Codex', en: 'Codex' },
+  chatSessionTypeClaude: { zh: 'Claude Code', en: 'Claude Code' },
+  chatSessionTypeUnavailableSuffix: {
+    zh: '当前不可用，请启用对应插件或新建 Native 会话。',
+    en: 'is unavailable now. Re-enable the plugin or create a native session.'
+  },
   chatModelNoOptions: { zh: '暂无可用模型，请先配置提供商。', en: 'No available models. Configure a provider first.' },
   chatGoConfigureProvider: { zh: '去配置提供商', en: 'Go to Providers' },
   chatProviderSetupTitle: { zh: '开始前先配置提供商', en: 'Configure a Provider First' },
@@ -537,6 +547,7 @@ export const LABELS: Record<string, { zh: string; en: string }> = {
   chatQueueSend: { zh: '排队发送', en: 'Queue' },
   chatQueuedHintPrefix: { zh: '当前有', en: 'Queued' },
   chatQueuedHintSuffix: { zh: '条消息待发送。', en: 'pending messages.' },
+  chatQueueMoveFirst: { zh: '置顶到下一条', en: 'Move to Next' },
   chatDeleteSession: { zh: '删除会话', en: 'Delete Session' },
   chatDeleteSessionConfirm: { zh: '确认删除当前会话？', en: 'Delete the current session?' },
   chatSendFailed: { zh: '发送消息失败', en: 'Failed to send message' },

package/tsconfig.json

@@ -11,7 +11,8 @@
     "types": ["vite/client"],
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "@nextclaw/agent-chat": ["../nextclaw-agent-chat/src/index.ts"]
     }
   },
   "include": ["src"]

package/vite.config.ts

@@ -9,7 +9,8 @@ export default defineConfig({
   plugins: [react(), splitVendorChunkPlugin()],
   resolve: {
     alias: {
-      '@': path.resolve(__dirname, './src')
+      '@': path.resolve(__dirname, './src'),
+      '@nextclaw/agent-chat': path.resolve(__dirname, '../nextclaw-agent-chat/src/index.ts')
     }
   },
   server: {