@nextclaw/ui 0.5.48 → 0.6.0

package/src/components/chat/useChatStreamController.ts

@@ -1,19 +1,37 @@
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { Dispatch, MutableRefObject, SetStateAction } from 'react';
 import type { SessionEventView } from '@/api/types';
-import { sendChatTurnStream } from '@/api/config';
+import { sendChatTurnStream, stopChatTurn } from '@/api/config';
 
 type PendingChatMessage = {
   id: number;
   message: string;
   sessionKey: string;
   agentId: string;
+  model?: string;
+  requestedSkills?: string[];
+  stopSupported?: boolean;
+  stopReason?: string;
+};
+
+type ActiveRunState = {
+  localRunId: number;
+  sessionKey: string;
+  agentId: string;
+  requestAbortController: AbortController;
+  backendRunId?: string;
+  backendStopSupported: boolean;
+  backendStopReason?: string;
 };
 
 type SendMessageParams = {
   message: string;
   sessionKey: string;
   agentId: string;
+  model?: string;
+  requestedSkills?: string[];
+  stopSupported?: boolean;
+  stopReason?: string;
   restoreDraftOnError?: boolean;
 };
 
@@ -26,6 +44,17 @@ type UseChatStreamControllerParams = {
   refetchHistory: () => Promise<unknown>;
 };
 
+function formatSendError(error: unknown): string {
+  if (error instanceof Error) {
+    const message = error.message.trim();
+    if (message) {
+      return message;
+    }
+  }
+  const raw = String(error ?? '').trim();
+  return raw || 'Failed to send message';
+}
+
 type StreamSetters = {
   setOptimisticUserEvent: Dispatch<SetStateAction<SessionEventView | null>>;
   setStreamingSessionEvents: Dispatch<SetStateAction<SessionEventView[]>>;
@@ -33,6 +62,9 @@ type StreamSetters = {
   setStreamingAssistantTimestamp: Dispatch<SetStateAction<string | null>>;
   setIsSending: Dispatch<SetStateAction<boolean>>;
   setIsAwaitingAssistantOutput: Dispatch<SetStateAction<boolean>>;
+  setCanStopCurrentRun: Dispatch<SetStateAction<boolean>>;
+  setStopDisabledReason: Dispatch<SetStateAction<string | null>>;
+  setLastSendError: Dispatch<SetStateAction<string | null>>;
 };
 
 function clearStreamingState(setters: StreamSetters) {
@@ -42,12 +74,78 @@ function clearStreamingState(setters: StreamSetters) {
   setters.setStreamingAssistantText('');
   setters.setStreamingAssistantTimestamp(null);
   setters.setIsAwaitingAssistantOutput(false);
+  setters.setCanStopCurrentRun(false);
+  setters.setStopDisabledReason(null);
+  setters.setLastSendError(null);
+}
+
+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];
+}
+
+function isAbortLikeError(error: unknown): boolean {
+  if (error instanceof DOMException && error.name === 'AbortError') {
+    return true;
+  }
+  if (error instanceof Error) {
+    if (error.name === 'AbortError') {
+      return true;
+    }
+    const lower = error.message.toLowerCase();
+    if (lower.includes('aborted') || lower.includes('abort')) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function buildLocalAssistantEvent(content: string, eventType = 'message.assistant.local'): SessionEventView {
+  const timestamp = new Date().toISOString();
+  return {
+    seq: Date.now(),
+    type: eventType,
+    timestamp,
+    message: {
+      role: 'assistant',
+      content,
+      timestamp
+    }
+  };
+}
+
+async function refetchIfSessionVisible(params: {
+  selectedSessionKeyRef: MutableRefObject<string | null>;
+  currentSessionKey: string;
+  resultSessionKey?: string;
+  refetchSessions: () => Promise<unknown>;
+  refetchHistory: () => Promise<unknown>;
+}): Promise<void> {
+  await params.refetchSessions();
+  const activeSessionKey = params.selectedSessionKeyRef.current;
+  if (
+    !activeSessionKey ||
+    activeSessionKey === params.currentSessionKey ||
+    (params.resultSessionKey && activeSessionKey === params.resultSessionKey)
+  ) {
+    await params.refetchHistory();
+  }
 }
 
 async function executeSendRun(params: {
   item: PendingChatMessage;
   runId: number;
   runIdRef: MutableRefObject<number>;
+  activeRunRef: MutableRefObject<ActiveRunState | null>;
   nextOptimisticUserSeq: number;
   selectedSessionKeyRef: MutableRefObject<string | null>;
   setSelectedSessionKey: Dispatch<SetStateAction<string | null>>;
@@ -61,6 +159,7 @@ async function executeSendRun(params: {
     item,
     runId,
     runIdRef,
+    activeRunRef,
     nextOptimisticUserSeq,
     selectedSessionKeyRef,
     setSelectedSessionKey,
@@ -71,6 +170,16 @@ async function executeSendRun(params: {
     setters
   } = params;
 
+  const requestAbortController = new AbortController();
+  activeRunRef.current = {
+    localRunId: runId,
+    sessionKey: item.sessionKey,
+    agentId: item.agentId,
+    requestAbortController,
+    backendStopSupported: Boolean(item.stopSupported),
+    ...(item.stopReason ? { backendStopReason: item.stopReason } : {})
+  };
+
   setters.setStreamingSessionEvents([]);
   setters.setStreamingAssistantText('');
   setters.setStreamingAssistantTimestamp(null);
@@ -86,60 +195,94 @@ async function executeSendRun(params: {
   });
   setters.setIsSending(true);
   setters.setIsAwaitingAssistantOutput(true);
+  setters.setCanStopCurrentRun(false);
+  setters.setStopDisabledReason(item.stopSupported ? '__preparing__' : item.stopReason ?? null);
+  setters.setLastSendError(null);
 
+  let streamText = '';
   try {
-    let streamText = '';
+    let hasAssistantSessionEvent = false;
     const streamTimestamp = new Date().toISOString();
     setters.setStreamingAssistantTimestamp(streamTimestamp);
 
-    const result = await sendChatTurnStream({
-      message: item.message,
-      sessionKey: item.sessionKey,
-      agentId: item.agentId,
-      channel: 'ui',
-      chatId: 'web-ui'
-    }, {
-      onReady: (event) => {
-        if (runId !== runIdRef.current) {
-          return;
-        }
-        if (event.sessionKey) {
-          setSelectedSessionKey((prev) => prev === event.sessionKey ? prev : event.sessionKey);
-        }
+    const requestedSkills = normalizeRequestedSkills(item.requestedSkills);
+    const result = await sendChatTurnStream(
+      {
+        message: item.message,
+        sessionKey: item.sessionKey,
+        agentId: item.agentId,
+        ...(item.model ? { model: item.model } : {}),
+        ...(requestedSkills.length > 0
+          ? {
+              metadata: {
+                requested_skills: requestedSkills
+              }
+            }
+          : {}),
+        channel: 'ui',
+        chatId: 'web-ui'
       },
-      onDelta: (event) => {
-        if (runId !== runIdRef.current) {
-          return;
-        }
-        streamText += event.delta;
-        setters.setStreamingAssistantText(streamText);
-        setters.setIsAwaitingAssistantOutput(false);
-      },
-      onSessionEvent: (event) => {
-        if (runId !== runIdRef.current) {
-          return;
-        }
-        if (event.data.message?.role === 'user') {
-          setters.setOptimisticUserEvent(null);
-        }
-        setters.setStreamingSessionEvents((prev) => {
-          const next = [...prev];
-          const hit = next.findIndex((streamEvent) => streamEvent.seq === event.data.seq);
-          if (hit >= 0) {
-            next[hit] = event.data;
-          } else {
-            next.push(event.data);
+      {
+        signal: requestAbortController.signal,
+        onReady: (event) => {
+          if (runId !== runIdRef.current) {
+            return;
           }
-          return next;
-        });
-        if (event.data.message?.role === 'assistant') {
-          // Reset delta accumulator once assistant event lands in session timeline.
-          streamText = '';
-          setters.setStreamingAssistantText('');
+          const activeRun = activeRunRef.current;
+          if (activeRun && activeRun.localRunId === runId) {
+            activeRun.backendRunId = event.runId?.trim() || undefined;
+            if (typeof event.stopSupported === 'boolean') {
+              activeRun.backendStopSupported = event.stopSupported;
+            }
+            if (typeof event.stopReason === 'string' && event.stopReason.trim().length > 0) {
+              activeRun.backendStopReason = event.stopReason.trim();
+            }
+            const canStopNow = Boolean(activeRun.backendStopSupported && activeRun.backendRunId);
+            setters.setCanStopCurrentRun(canStopNow);
+            setters.setStopDisabledReason(
+              canStopNow
+                ? null
+                : activeRun.backendStopReason ?? (activeRun.backendStopSupported ? '__preparing__' : null)
+            );
+          }
+          if (event.sessionKey) {
+            setSelectedSessionKey((prev) => (prev === event.sessionKey ? prev : event.sessionKey));
+          }
+        },
+        onDelta: (event) => {
+          if (runId !== runIdRef.current) {
+            return;
+          }
+          streamText += event.delta;
+          setters.setStreamingAssistantText(streamText);
           setters.setIsAwaitingAssistantOutput(false);
+        },
+        onSessionEvent: (event) => {
+          if (runId !== runIdRef.current) {
+            return;
+          }
+          if (event.data.message?.role === 'user') {
+            setters.setOptimisticUserEvent(null);
+          }
+          setters.setStreamingSessionEvents((prev) => {
+            const next = [...prev];
+            const hit = next.findIndex((streamEvent) => streamEvent.seq === event.data.seq);
+            if (hit >= 0) {
+              next[hit] = event.data;
+            } else {
+              next.push(event.data);
+            }
+            return next;
+          });
+          if (event.data.message?.role === 'assistant') {
+            hasAssistantSessionEvent = true;
+            streamText = '';
+            setters.setStreamingAssistantText('');
+            setters.setIsAwaitingAssistantOutput(false);
+          }
         }
       }
-    });
+    );
     if (runId !== runIdRef.current) {
       return;
     }
@@ -147,24 +290,60 @@ async function executeSendRun(params: {
     if (result.sessionKey !== item.sessionKey) {
       setSelectedSessionKey(result.sessionKey);
     }
-    await refetchSessions();
-    const activeSessionKey = selectedSessionKeyRef.current;
-    if (!activeSessionKey || activeSessionKey === item.sessionKey || activeSessionKey === result.sessionKey) {
-      await refetchHistory();
-    }
-    setters.setStreamingSessionEvents([]);
+
+    const localAssistantText = !hasAssistantSessionEvent ? streamText.trim() : '';
+    await refetchIfSessionVisible({
+      selectedSessionKeyRef,
+      currentSessionKey: item.sessionKey,
+      resultSessionKey: result.sessionKey,
+      refetchSessions,
+      refetchHistory
+    });
+
+    setters.setStreamingSessionEvents(localAssistantText ? [buildLocalAssistantEvent(localAssistantText)] : []);
+
     setters.setStreamingAssistantText('');
     setters.setStreamingAssistantTimestamp(null);
     setters.setIsAwaitingAssistantOutput(false);
     setters.setIsSending(false);
-  } catch {
+    setters.setCanStopCurrentRun(false);
+    setters.setStopDisabledReason(null);
+    setters.setLastSendError(null);
+    activeRunRef.current = null;
+  } catch (error) {
     if (runId !== runIdRef.current) {
       return;
     }
+    const wasAborted = requestAbortController.signal.aborted || isAbortLikeError(error);
     runIdRef.current += 1;
+    if (wasAborted) {
+      const localAssistantText = streamText.trim();
+      setters.setOptimisticUserEvent(null);
+      setters.setStreamingAssistantText('');
+      setters.setStreamingAssistantTimestamp(null);
+      setters.setIsSending(false);
+      setters.setIsAwaitingAssistantOutput(false);
+      setters.setCanStopCurrentRun(false);
+      setters.setStopDisabledReason(null);
+      setters.setLastSendError(null);
+      activeRunRef.current = null;
+      await refetchIfSessionVisible({
+        selectedSessionKeyRef,
+        currentSessionKey: item.sessionKey,
+        refetchSessions,
+        refetchHistory
+      });
+      setters.setStreamingSessionEvents(localAssistantText ? [buildLocalAssistantEvent(localAssistantText)] : []);
+      return;
+    }
+
     clearStreamingState(setters);
+    const sendError = formatSendError(error);
+    setters.setLastSendError(sendError);
+    setters.setStreamingSessionEvents([buildLocalAssistantEvent(sendError, 'message.assistant.error.local')]);
+    activeRunRef.current = null;
     if (restoreDraftOnError) {
-      setDraft((prev) => prev.trim().length === 0 ? item.message : prev);
+      setDraft((prev) => (prev.trim().length === 0 ? item.message : prev));
     }
   }
 }
@@ -177,36 +356,49 @@ export function useChatStreamController(params: UseChatStreamControllerParams) {
   const [isSending, setIsSending] = useState(false);
   const [isAwaitingAssistantOutput, setIsAwaitingAssistantOutput] = useState(false);
   const [queuedMessages, setQueuedMessages] = useState<PendingChatMessage[]>([]);
+  const [canStopCurrentRun, setCanStopCurrentRun] = useState(false);
+  const [stopDisabledReason, setStopDisabledReason] = useState<string | null>(null);
+  const [lastSendError, setLastSendError] = useState<string | null>(null);
 
   const streamRunIdRef = useRef(0);
   const queueIdRef = useRef(0);
+  const activeRunRef = useRef<ActiveRunState | null>(null);
 
   const resetStreamState = useCallback(() => {
     streamRunIdRef.current += 1;
     setQueuedMessages([]);
+    activeRunRef.current?.requestAbortController.abort();
+    activeRunRef.current = null;
     clearStreamingState({
       setOptimisticUserEvent,
       setStreamingSessionEvents,
       setStreamingAssistantText,
       setStreamingAssistantTimestamp,
       setIsSending,
-      setIsAwaitingAssistantOutput
+      setIsAwaitingAssistantOutput,
+      setCanStopCurrentRun,
+      setStopDisabledReason,
+      setLastSendError
     });
   }, []);
 
   useEffect(() => {
     return () => {
       streamRunIdRef.current += 1;
+      activeRunRef.current?.requestAbortController.abort();
+      activeRunRef.current = null;
     };
   }, []);
 
   const runSend = useCallback(
     async (item: PendingChatMessage, options?: { restoreDraftOnError?: boolean }) => {
+      setLastSendError(null);
       streamRunIdRef.current += 1;
       await executeSendRun({
         item,
         runId: streamRunIdRef.current,
         runIdRef: streamRunIdRef,
+        activeRunRef,
         nextOptimisticUserSeq: params.nextOptimisticUserSeq,
         selectedSessionKeyRef: params.selectedSessionKeyRef,
         setSelectedSessionKey: params.setSelectedSessionKey,
@@ -220,7 +412,10 @@ export function useChatStreamController(params: UseChatStreamControllerParams) {
           setStreamingAssistantText,
           setStreamingAssistantTimestamp,
           setIsSending,
-          setIsAwaitingAssistantOutput
+          setIsAwaitingAssistantOutput,
+          setCanStopCurrentRun,
+          setStopDisabledReason,
+          setLastSendError
         }
       });
     },
@@ -238,12 +433,19 @@ export function useChatStreamController(params: UseChatStreamControllerParams) {
 
   const sendMessage = useCallback(
     async (payload: SendMessageParams) => {
+      setLastSendError(null);
       queueIdRef.current += 1;
       const item: PendingChatMessage = {
         id: queueIdRef.current,
         message: payload.message,
         sessionKey: payload.sessionKey,
-        agentId: payload.agentId
+        agentId: payload.agentId,
+        ...(payload.model ? { model: payload.model } : {}),
+        ...(payload.requestedSkills && payload.requestedSkills.length > 0
+          ? { requestedSkills: payload.requestedSkills }
+          : {}),
+        ...(typeof payload.stopSupported === 'boolean' ? { stopSupported: payload.stopSupported } : {}),
+        ...(payload.stopReason ? { stopReason: payload.stopReason } : {})
       };
       if (isSending) {
         setQueuedMessages((prev) => [...prev, item]);
@@ -254,6 +456,31 @@ export function useChatStreamController(params: UseChatStreamControllerParams) {
     [isSending, runSend]
   );
 
+  const stopCurrentRun = useCallback(async () => {
+    const activeRun = activeRunRef.current;
+    if (!activeRun) {
+      return;
+    }
+    if (!activeRun.backendStopSupported) {
+      return;
+    }
+
+    setCanStopCurrentRun(false);
+    setQueuedMessages([]);
+    if (activeRun.backendRunId) {
+      try {
+        await stopChatTurn({
+          runId: activeRun.backendRunId,
+          sessionKey: activeRun.sessionKey,
+          agentId: activeRun.agentId
+        });
+      } catch {
+        // Keep local abort as fallback even if stop API fails.
+      }
+    }
+    activeRun.requestAbortController.abort();
+  }, []);
+
   return {
     optimisticUserEvent,
     streamingSessionEvents,
@@ -262,7 +489,11 @@ export function useChatStreamController(params: UseChatStreamControllerParams) {
     isSending,
     isAwaitingAssistantOutput,
     queuedCount: queuedMessages.length,
+    canStopCurrentRun,
+    stopDisabledReason,
+    lastSendError,
     sendMessage,
+    stopCurrentRun,
     resetStreamState
   };
 }

package/src/components/config/ChannelForm.tsx

@@ -371,7 +371,7 @@ export function ChannelForm({ channelName }: ChannelFormProps) {
       </div>
 
       <form onSubmit={handleSubmit} className="flex min-h-0 flex-1 flex-col">
-        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto px-6 py-5">
+        <div className="min-h-0 flex-1 space-y-6 overflow-y-auto overscroll-contain px-6 py-5">
           {fields.map((field) => {
             const hint = channelName
               ? hintForPath(`channels.${channelName}.${field.name}`, uiHints)

package/src/components/config/ChannelsList.tsx

@@ -74,10 +74,10 @@ export function ChannelsList() {
   }
 
   return (
-    <PageLayout>
+    <PageLayout className="xl:flex xl:h-full xl:min-h-0 xl:flex-col xl:pb-0">
       <PageHeader title={t('channelsPageTitle')} description={t('channelsPageDescription')} />
 
-      <div className={CONFIG_SPLIT_GRID_CLASS}>
+      <div className={cn(CONFIG_SPLIT_GRID_CLASS, 'xl:min-h-0 xl:flex-1')}>
         <section className={CONFIG_SIDEBAR_CARD_CLASS}>
           <div className="border-b border-gray-100 px-4 pt-4">
             <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} className="mb-0" />
@@ -95,7 +95,7 @@ export function ChannelsList() {
             </div>
           </div>
 
-          <div className="min-h-0 flex-1 space-y-2 overflow-y-auto p-3">
+          <div className="min-h-0 flex-1 space-y-2 overflow-y-auto overscroll-contain p-3">
             {filteredChannels.map((channel) => {
               const channelConfig = config.channels[channel.name];
               const enabled = channelConfig?.enabled || false;

package/src/components/config/ModelConfig.tsx

@@ -8,74 +8,17 @@ import { SearchableModelInput } from '@/components/common/SearchableModelInput';
 import { useConfig, useConfigMeta, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
 import { hintForPath } from '@/lib/config-hints';
 import { t } from '@/lib/i18n';
+import {
+  buildProviderModelCatalog,
+  composeProviderModel,
+  findProviderByModel,
+  toProviderLocalModel
+} from '@/lib/provider-models';
 import { PageLayout, PageHeader } from '@/components/layout/page-layout';
 import { DOCS_DEFAULT_BASE_URL } from '@/components/doc-browser/DocBrowserContext';
 import { BookOpen, Folder, Loader2, Sparkles } from 'lucide-react';
 import { useEffect, useMemo, useState } from 'react';
 
-function normalizeStringList(input: string[] | null | undefined): string[] {
-  if (!input || input.length === 0) {
-    return [];
-  }
-  const deduped = new Set<string>();
-  for (const item of input) {
-    const trimmed = item.trim();
-    if (trimmed) {
-      deduped.add(trimmed);
-    }
-  }
-  return [...deduped];
-}
-
-function stripProviderPrefix(model: string, prefix: string): string {
-  const trimmed = model.trim();
-  const cleanPrefix = prefix.trim();
-  if (!trimmed || !cleanPrefix) {
-    return trimmed;
-  }
-  const withSlash = `${cleanPrefix}/`;
-  if (trimmed.startsWith(withSlash)) {
-    return trimmed.slice(withSlash.length);
-  }
-  return trimmed;
-}
-
-function toProviderLocalModel(model: string, aliases: string[]): string {
-  let normalized = model.trim();
-  if (!normalized) {
-    return '';
-  }
-  for (const alias of aliases) {
-    normalized = stripProviderPrefix(normalized, alias);
-  }
-  return normalized.trim();
-}
-
-function findProviderByModel(
-  model: string,
-  providerCatalog: Array<{ name: string; aliases: string[] }>
-): string | null {
-  const trimmed = model.trim();
-  if (!trimmed) {
-    return null;
-  }
-  let bestMatch: { name: string; score: number } | null = null;
-  for (const provider of providerCatalog) {
-    for (const alias of provider.aliases) {
-      const cleanAlias = alias.trim();
-      if (!cleanAlias) {
-        continue;
-      }
-      if (trimmed === cleanAlias || trimmed.startsWith(`${cleanAlias}/`)) {
-        if (!bestMatch || cleanAlias.length > bestMatch.score) {
-          bestMatch = { name: provider.name, score: cleanAlias.length };
-        }
-      }
-    }
-  }
-  return bestMatch?.name ?? null;
-}
-
 export function ModelConfig() {
   const { data: config, isLoading } = useConfig();
   const { data: meta } = useConfigMeta();
@@ -89,25 +32,10 @@ export function ModelConfig() {
   const modelHint = hintForPath('agents.defaults.model', uiHints);
   const workspaceHint = hintForPath('agents.defaults.workspace', uiHints);
 
-  const providerCatalog = useMemo(() => {
-    return (meta?.providers ?? []).map((provider) => {
-      const prefix = (provider.modelPrefix || provider.name || '').trim();
-      const aliases = normalizeStringList([provider.modelPrefix || '', provider.name || '']);
-      const defaultModels = normalizeStringList((provider.defaultModels ?? []).map((model) => toProviderLocalModel(model, aliases)));
-      const customModels = normalizeStringList(
-        (config?.providers?.[provider.name]?.models ?? []).map((model) => toProviderLocalModel(model, aliases))
-      );
-      const allModels = normalizeStringList([...defaultModels, ...customModels]);
-      const configDisplayName = config?.providers?.[provider.name]?.displayName?.trim();
-      return {
-        name: provider.name,
-        displayName: configDisplayName || provider.displayName || provider.name,
-        prefix,
-        aliases,
-        models: allModels
-      };
-    });
-  }, [meta, config]);
+  const providerCatalog = useMemo(
+    () => buildProviderModelCatalog({ meta, config }),
+    [config, meta]
+  );
 
   const providerMap = useMemo(() => new Map(providerCatalog.map((provider) => [provider.name, provider])), [providerCatalog]);
   const selectedProvider = providerMap.get(providerName) ?? providerCatalog[0];
@@ -151,13 +79,7 @@ export function ModelConfig() {
     if (!normalizedModelId) {
       return '';
     }
-    if (!selectedProvider) {
-      return normalizedModelId;
-    }
-    if (!selectedProvider.prefix) {
-      return normalizedModelId;
-    }
-    return `${selectedProvider.prefix}/${normalizedModelId}`;
+    return composeProviderModel(selectedProvider?.prefix ?? '', normalizedModelId);
   }, [modelId, selectedProvider, selectedProviderAliases]);
 
   const modelHelpText = t('modelIdentifierHelp') || modelHint?.help || '';