@nextclaw/ui 0.6.1 → 0.6.3

package/src/api/config.ts

@@ -24,6 +24,9 @@ import type {
   ChatCapabilitiesView,
   ChatTurnStopRequest,
   ChatTurnStopResult,
+  ChatRunListView,
+  ChatRunState,
+  ChatRunView,
   CronListView,
   CronEnableRequest,
   CronRunRequest,
@@ -270,6 +273,39 @@ export async function stopChatTurn(data: ChatTurnStopRequest): Promise<ChatTurnS
   return response.data;
 }
 
+// GET /api/chat/runs
+export async function fetchChatRuns(params?: {
+  sessionKey?: string;
+  states?: ChatRunState[];
+  limit?: number;
+}): Promise<ChatRunListView> {
+  const query = new URLSearchParams();
+  if (params?.sessionKey?.trim()) {
+    query.set('sessionKey', params.sessionKey.trim());
+  }
+  if (Array.isArray(params?.states) && params.states.length > 0) {
+    query.set('states', params.states.join(','));
+  }
+  if (typeof params?.limit === 'number' && Number.isFinite(params.limit)) {
+    query.set('limit', String(Math.max(0, Math.trunc(params.limit))));
+  }
+  const suffix = query.toString();
+  const response = await api.get<ChatRunListView>(suffix ? `/api/chat/runs?${suffix}` : '/api/chat/runs');
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
+// GET /api/chat/runs/:runId
+export async function fetchChatRun(runId: string): Promise<ChatRunView> {
+  const response = await api.get<ChatRunView>(`/api/chat/runs/${encodeURIComponent(runId)}`);
+  if (!response.ok) {
+    throw new Error(response.error.message);
+  }
+  return response.data;
+}
+
 type ChatTurnStreamOptions = {
   signal?: AbortSignal;
   onReady?: (event: ChatTurnStreamReadyEvent) => void;
@@ -304,20 +340,10 @@ function parseSseFrame(frame: string): SseParsedEvent | null {
   };
 }
 
-export async function sendChatTurnStream(
-  data: ChatTurnRequest,
+async function consumeChatTurnSseStream(
+  response: Response,
   options: ChatTurnStreamOptions = {}
 ): Promise<ChatTurnView> {
-  const response = await fetch(`${API_BASE}/api/chat/turn/stream`, {
-    method: 'POST',
-    headers: {
-      'Content-Type': 'application/json',
-      Accept: 'text/event-stream'
-    },
-    body: JSON.stringify(data),
-    signal: options.signal
-  });
-
   if (!response.ok) {
     let message = `chat stream failed (${response.status} ${response.statusText})`;
     try {
@@ -449,6 +475,45 @@ export async function sendChatTurnStream(
   return finalView;
 }
 
+export async function sendChatTurnStream(
+  data: ChatTurnRequest,
+  options: ChatTurnStreamOptions = {}
+): Promise<ChatTurnView> {
+  const response = await fetch(`${API_BASE}/api/chat/turn/stream`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'text/event-stream'
+    },
+    body: JSON.stringify(data),
+    signal: options.signal
+  });
+  return consumeChatTurnSseStream(response, options);
+}
+
+export async function streamChatRun(
+  params: {
+    runId: string;
+    fromEventIndex?: number;
+  },
+  options: ChatTurnStreamOptions = {}
+): Promise<ChatTurnView> {
+  const query = new URLSearchParams();
+  if (typeof params.fromEventIndex === 'number' && Number.isFinite(params.fromEventIndex)) {
+    query.set('fromEventIndex', String(Math.max(0, Math.trunc(params.fromEventIndex))));
+  }
+  const suffix = query.toString();
+  const url = `${API_BASE}/api/chat/runs/${encodeURIComponent(params.runId)}/stream${suffix ? `?${suffix}` : ''}`;
+  const response = await fetch(url, {
+    method: 'GET',
+    headers: {
+      Accept: 'text/event-stream'
+    },
+    signal: options.signal
+  });
+  return consumeChatTurnSseStream(response, options);
+}
+
 // GET /api/cron
 export async function fetchCronJobs(params?: { all?: boolean }): Promise<CronListView> {
   const query = new URLSearchParams();

package/src/api/types.ts

@@ -187,6 +187,29 @@ export type ChatTurnStopResult = {
   reason?: string;
 };
 
+export type ChatRunState = 'queued' | 'running' | 'completed' | 'failed' | 'aborted';
+
+export type ChatRunView = {
+  runId: string;
+  sessionKey: string;
+  agentId?: string;
+  model?: string;
+  state: ChatRunState;
+  requestedAt: string;
+  startedAt?: string;
+  completedAt?: string;
+  stopSupported: boolean;
+  stopReason?: string;
+  error?: string;
+  reply?: string;
+  eventCount: number;
+};
+
+export type ChatRunListView = {
+  runs: ChatRunView[];
+  total: number;
+};
+
 export type ChatTurnStreamReadyEvent = {
   event: "ready";
   sessionKey: string;
@@ -469,6 +492,7 @@ export type ConfigActionExecuteResult = {
 // WebSocket events
 export type WsEvent =
   | { type: 'config.updated'; payload: { path: string } }
+  | { type: 'run.updated'; payload: { run: ChatRunView } }
   | { type: 'config.reload.started'; payload?: Record<string, unknown> }
   | { type: 'config.reload.finished'; payload?: Record<string, unknown> }
   | { type: 'error'; payload: { message: string; code?: string } }

package/src/components/chat/ChatConversationPanel.tsx

@@ -8,6 +8,7 @@ import { t } from '@/lib/i18n';
 import { Trash2 } from 'lucide-react';
 
 type ChatConversationPanelProps = {
+  isProviderStateResolved: boolean;
   modelOptions: ChatModelOption[];
   selectedModel: string;
   onSelectedModelChange: (value: string) => void;
@@ -40,6 +41,7 @@ type ChatConversationPanelProps = {
 };
 
 export function ChatConversationPanel({
+  isProviderStateResolved,
   modelOptions,
   selectedModel,
   onSelectedModelChange,
@@ -72,18 +74,13 @@ export function ChatConversationPanel({
 }: ChatConversationPanelProps) {
   const showWelcome = !selectedSessionKey && mergedEvents.length === 0;
   const hasConfiguredModel = modelOptions.length > 0;
+  const shouldShowProviderHint = isProviderStateResolved && !hasConfiguredModel;
   const hideEmptyHint =
     isHistoryLoading &&
     mergedEvents.length === 0 &&
     !isSending &&
     !isAwaitingAssistantOutput &&
     !streamingAssistantText.trim();
-  const shouldShowProviderSetup =
-    !hasConfiguredModel &&
-    !selectedSessionKey &&
-    mergedEvents.length === 0 &&
-    !hideEmptyHint &&
-    !isSending;
 
   return (
     <section className="flex-1 min-h-0 flex flex-col overflow-hidden bg-gradient-to-b from-gray-50/60 to-white">
@@ -107,7 +104,7 @@ export function ChatConversationPanel({
         </div>
       )}
 
-      {!hasConfiguredModel && !showWelcome && (
+      {shouldShowProviderHint && (
         <div className="px-5 py-2.5 border-b border-amber-200/70 bg-amber-50/70 flex items-center justify-between gap-3 shrink-0">
           <span className="text-xs text-amber-800">{t('chatModelNoOptions')}</span>
           <button
@@ -123,19 +120,7 @@ export function ChatConversationPanel({
       {/* Message thread or welcome */}
       <div ref={threadRef} onScroll={onThreadScroll} className="flex-1 min-h-0 overflow-y-auto custom-scrollbar">
         {showWelcome ? (
-          shouldShowProviderSetup ? (
-            <div className="h-full flex items-center justify-center p-8">
-              <div className="w-full max-w-xl rounded-2xl border border-amber-200 bg-amber-50/70 p-6 text-center">
-                <h2 className="text-lg font-semibold text-amber-900">{t('chatProviderSetupTitle')}</h2>
-                <p className="mt-2 text-sm text-amber-800">{t('chatProviderSetupDescription')}</p>
-                <Button className="mt-4" onClick={onGoToProviders}>
-                  {t('chatGoConfigureProvider')}
-                </Button>
-              </div>
-            </div>
-          ) : (
-            <ChatWelcome onCreateSession={onCreateSession} />
-          )
+          <ChatWelcome onCreateSession={onCreateSession} />
         ) : hideEmptyHint ? (
           <div className="h-full" />
         ) : mergedEvents.length === 0 ? (

package/src/components/chat/ChatPage.tsx

@@ -7,7 +7,8 @@ import {
   useConfigMeta,
   useDeleteSession,
   useSessionHistory,
-  useSessions
+  useSessions,
+  useChatRuns
 } from '@/hooks/useConfig';
 import { useMarketplaceInstalled } from '@/hooks/useMarketplace';
 import { useConfirmDialog } from '@/hooks/useConfirmDialog';
@@ -242,6 +243,9 @@ export function ChatPage({ view }: ChatPageProps) {
 
   const configQuery = useConfig();
   const configMetaQuery = useConfigMeta();
+  const isProviderStateResolved =
+    (configQuery.isFetched || configQuery.isSuccess) &&
+    (configMetaQuery.isFetched || configMetaQuery.isSuccess);
   const sessionsQuery = useSessions({ q: query.trim() || undefined, limit: 120, activeMinutes: 0 });
   const installedSkillsQuery = useMarketplaceInstalled('skill');
   const chatCapabilitiesQuery = useChatCapabilities({
@@ -334,6 +338,8 @@ export function ChatPage({ view }: ChatPageProps) {
     stopDisabledReason,
     lastSendError,
     sendMessage,
+    resumeRun,
+    activeBackendRunId,
     stopCurrentRun,
     resetStreamState
   } = useChatStreamController({
@@ -345,17 +351,51 @@ export function ChatPage({ view }: ChatPageProps) {
     refetchHistory: historyQuery.refetch
   });
 
+  const activeRunsQuery = useChatRuns(
+    selectedSessionKey
+      ? {
+          sessionKey: selectedSessionKey,
+          states: ['queued', 'running'],
+          limit: 5
+        }
+      : undefined
+  );
+  const activeRun = useMemo(() => {
+    const candidates = activeRunsQuery.data?.runs ?? [];
+    if (!selectedSessionKey) {
+      return null;
+    }
+    return candidates.find((entry) => entry.sessionKey === selectedSessionKey) ?? null;
+  }, [activeRunsQuery.data?.runs, selectedSessionKey]);
+
+  useEffect(() => {
+    if (view !== 'chat' || !selectedSessionKey || !activeRun) {
+      return;
+    }
+    if (activeBackendRunId === activeRun.runId) {
+      return;
+    }
+    void resumeRun(activeRun);
+  }, [activeBackendRunId, activeRun, resumeRun, selectedSessionKey, view]);
+
   const mergedEvents = useMemo(() => {
-    const next = [...historyEvents];
+    const bySeq = new Map<number, SessionEventView>();
+    const append = (event: SessionEventView) => {
+      if (!Number.isFinite(event.seq)) {
+        return;
+      }
+      bySeq.set(event.seq, event);
+    };
+
+    historyEvents.forEach(append);
     if (optimisticUserEvent) {
-      next.push(optimisticUserEvent);
+      append(optimisticUserEvent);
     }
-    next.push(...streamingSessionEvents);
+    streamingSessionEvents.forEach(append);
+
+    const next = [...bySeq.values()].sort((left, right) => left.seq - right.seq);
     if (streamingAssistantText.trim()) {
-      const maxSeq = next.reduce((max, event) => {
-        const seq = Number.isFinite(event.seq) ? event.seq : 0;
-        return seq > max ? seq : max;
-      }, 0);
+      const maxSeq = next.reduce((max, event) => (event.seq > max ? event.seq : max), 0);
       next.push({
         seq: maxSeq + 1,
         type: 'stream.assistant_delta',
@@ -483,6 +523,7 @@ export function ChatPage({ view }: ChatPageProps) {
   };
 
   const conversationProps: ComponentProps<typeof ChatConversationPanel> = {
+    isProviderStateResolved,
     modelOptions,
     selectedModel,
     onSelectedModelChange: setSelectedModel,