@swarmclawai/swarmclaw 1.2.1 → 1.2.3

package/src/app/api/projects/[id]/route.ts

@@ -1,65 +1,26 @@
 import { NextResponse } from 'next/server'
-import { loadProjects, saveProjects, deleteProject, loadAgents, saveAgents, loadTasks, saveTasks, loadSchedules, saveSchedules, loadSkills, saveSkills, loadSecrets, saveSecrets } from '@/lib/server/storage'
-import { mutateItem, deleteItem, notFound, type CollectionOps } from '@/lib/server/collection-helpers'
-import { ensureProjectWorkspace, normalizeProjectPatchInput } from '@/lib/server/project-utils'
-import { notify } from '@/lib/server/ws-hub'
+import { notFound } from '@/lib/server/collection-helpers'
+import { deleteProjectAndDetachReferences, getProject, updateProject } from '@/lib/server/projects/project-service'
 import { safeParseBody } from '@/lib/server/safe-parse-body'
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const ops: CollectionOps<any> = { load: loadProjects, save: saveProjects, deleteFn: deleteProject, topic: 'projects' }
-
 export async function GET(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  const projects = loadProjects()
-  if (!projects[id]) return notFound()
-  return NextResponse.json(projects[id])
+  const project = getProject(id)
+  if (!project) return notFound()
+  return NextResponse.json(project)
 }
 
 export async function PUT(req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
   const { data: body, error } = await safeParseBody<Record<string, unknown>>(req)
   if (error) return error
-  const result = mutateItem(ops, id, (project) => {
-    const patch = normalizeProjectPatchInput(body && typeof body === 'object' ? body as Record<string, unknown> : {})
-    Object.assign(project, patch, { updatedAt: Date.now() })
-    delete (project as Record<string, unknown>).id
-    project.id = id
-    return project
-  })
+  const result = updateProject(id, body && typeof body === 'object' ? body : {})
   if (!result) return notFound()
-  ensureProjectWorkspace(id, result.name)
   return NextResponse.json(result)
 }
 
 export async function DELETE(_req: Request, { params }: { params: Promise<{ id: string }> }) {
   const { id } = await params
-  if (!deleteItem(ops, id)) return notFound()
-
-  // Clear projectId from referencing entities
-  const clearProjectId = (load: () => Record<string, Record<string, unknown>>, save: (d: Record<string, Record<string, unknown>>) => void, topic: string) => {
-    const items = load()
-    let changed = false
-    for (const item of Object.values(items)) {
-      if (item.projectId === id) {
-        item.projectId = undefined
-        changed = true
-      }
-    }
-    if (changed) {
-      save(items)
-      notify(topic)
-    }
-  }
-
-  clearProjectId(
-    loadAgents as unknown as () => Record<string, Record<string, unknown>>,
-    saveAgents as unknown as (data: Record<string, Record<string, unknown>>) => void,
-    'agents',
-  )
-  clearProjectId(loadTasks as unknown as () => Record<string, Record<string, unknown>>, saveTasks as unknown as (data: Record<string, Record<string, unknown>>) => void, 'tasks')
-  clearProjectId(loadSchedules as unknown as () => Record<string, Record<string, unknown>>, saveSchedules as unknown as (data: Record<string, Record<string, unknown>>) => void, 'schedules')
-  clearProjectId(loadSkills as unknown as () => Record<string, Record<string, unknown>>, saveSkills as unknown as (data: Record<string, Record<string, unknown>>) => void, 'skills')
-  clearProjectId(loadSecrets as unknown as () => Record<string, Record<string, unknown>>, saveSecrets as unknown as (data: Record<string, Record<string, unknown>>) => void, 'secrets')
-
+  if (!deleteProjectAndDetachReferences(id)) return notFound()
   return NextResponse.json({ ok: true })
 }

package/src/cli/server-cmd.test.js

@@ -136,6 +136,80 @@ test('prepareBuildWorkspace copies the package tree and links node_modules outsi
   fs.rmSync(externalNodeModules, { recursive: true, force: true })
 })
 
+test('syncStandaloneRuntimeAssets copies .next/static and public into a direct standalone runtime', () => {
+  const homeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-home-'))
+  const pkgRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-pkg-'))
+  const serverCmd = loadServerCmdForHome(homeDir)
+  const runtimeDir = path.join(pkgRoot, '.next', 'standalone')
+
+  fs.mkdirSync(path.join(pkgRoot, '.next', 'static', 'chunks'), { recursive: true })
+  fs.mkdirSync(path.join(pkgRoot, 'public', 'branding'), { recursive: true })
+  fs.writeFileSync(path.join(pkgRoot, '.next', 'static', 'chunks', 'app.js'), 'chunk\n', 'utf8')
+  fs.writeFileSync(path.join(pkgRoot, 'public', 'branding', 'logo.svg'), '<svg />\n', 'utf8')
+
+  const result = serverCmd.syncStandaloneRuntimeAssets({
+    sourceRoot: pkgRoot,
+    runtimeDir,
+    force: true,
+  })
+
+  assert.deepEqual(result, { staticCopied: true, publicCopied: true })
+  assert.equal(fs.readFileSync(path.join(runtimeDir, '.next', 'static', 'chunks', 'app.js'), 'utf8'), 'chunk\n')
+  assert.equal(fs.readFileSync(path.join(runtimeDir, 'public', 'branding', 'logo.svg'), 'utf8'), '<svg />\n')
+
+  fs.rmSync(homeDir, { recursive: true, force: true })
+  fs.rmSync(pkgRoot, { recursive: true, force: true })
+})
+
+test('syncStandaloneRuntimeAssets targets the resolved nested runtime directory', () => {
+  const homeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-home-'))
+  const pkgRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-pkg-'))
+  const serverCmd = loadServerCmdForHome(homeDir)
+  const serverJs = path.join(pkgRoot, '.next', 'standalone', 'Users', 'wayde', 'Dev', 'swarmclaw', 'server.js')
+  const runtimeDir = serverCmd.resolveStandaloneRuntimeDir(serverJs)
+
+  fs.mkdirSync(path.dirname(serverJs), { recursive: true })
+  fs.writeFileSync(serverJs, 'console.log("ok")\n', 'utf8')
+  fs.mkdirSync(path.join(pkgRoot, '.next', 'static', 'css'), { recursive: true })
+  fs.writeFileSync(path.join(pkgRoot, '.next', 'static', 'css', 'app.css'), 'body{}\n', 'utf8')
+
+  const result = serverCmd.syncStandaloneRuntimeAssets({
+    sourceRoot: pkgRoot,
+    runtimeDir,
+  })
+
+  assert.deepEqual(result, { staticCopied: true, publicCopied: false })
+  assert.equal(fs.readFileSync(path.join(runtimeDir, '.next', 'static', 'css', 'app.css'), 'utf8'), 'body{}\n')
+  assert.equal(fs.existsSync(path.join(runtimeDir, 'public')), false)
+
+  fs.rmSync(homeDir, { recursive: true, force: true })
+  fs.rmSync(pkgRoot, { recursive: true, force: true })
+})
+
+test('syncStandaloneRuntimeAssets repairs missing assets without overwriting an existing target by default', () => {
+  const homeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-home-'))
+  const pkgRoot = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-pkg-'))
+  const serverCmd = loadServerCmdForHome(homeDir)
+  const runtimeDir = path.join(pkgRoot, '.next', 'standalone')
+
+  fs.mkdirSync(path.join(pkgRoot, '.next', 'static', 'chunks'), { recursive: true })
+  fs.writeFileSync(path.join(pkgRoot, '.next', 'static', 'chunks', 'main.js'), 'fresh\n', 'utf8')
+  fs.mkdirSync(path.join(runtimeDir, 'public'), { recursive: true })
+  fs.writeFileSync(path.join(runtimeDir, 'public', 'keep.txt'), 'keep\n', 'utf8')
+
+  const result = serverCmd.syncStandaloneRuntimeAssets({
+    sourceRoot: pkgRoot,
+    runtimeDir,
+  })
+
+  assert.deepEqual(result, { staticCopied: true, publicCopied: false })
+  assert.equal(fs.readFileSync(path.join(runtimeDir, '.next', 'static', 'chunks', 'main.js'), 'utf8'), 'fresh\n')
+  assert.equal(fs.readFileSync(path.join(runtimeDir, 'public', 'keep.txt'), 'utf8'), 'keep\n')
+
+  fs.rmSync(homeDir, { recursive: true, force: true })
+  fs.rmSync(pkgRoot, { recursive: true, force: true })
+})
+
 test('resolveReadyCheckHost maps wildcard bind hosts to loopback', () => {
   const homeDir = fs.mkdtempSync(path.join(os.tmpdir(), 'swarmclaw-server-home-'))
   const serverCmd = loadServerCmdForHome(homeDir)

package/src/components/chat/chat-area.tsx

@@ -27,6 +27,7 @@ import { ConfirmDialog } from '@/components/shared/confirm-dialog'
 import { speak } from '@/lib/tts'
 import { api } from '@/lib/app/api-client'
 import { messagesDiffer } from '@/lib/chat/chat-streaming-state'
+import { createAssistantRenderId } from '@/lib/chat/assistant-render-id'
 import { getSessionLastMessage } from '@/lib/chat/session-summary'
 import { getEnabledCapabilityIds, getEnabledToolIds } from '@/lib/capability-selection'
 
@@ -71,6 +72,36 @@ export function ChatArea() {
   const setPreviewContent = useChatStore((s) => s.setPreviewContent)
   const isDesktop = useMediaQuery('(min-width: 768px)')
 
+  const markSessionLocallyIdle = useCallback((targetSessionId: string) => {
+    const appState = useAppStore.getState()
+    const existing = appState.sessions[targetSessionId]
+    if (!existing) return
+    appState.updateSessionInStore({
+      ...existing,
+      active: false,
+      currentRunId: null,
+    })
+  }, [])
+
+  const startServerStreamingPlaceholder = useCallback((targetSessionId: string, phase: 'queued' | 'thinking' | 'connecting' = 'thinking') => {
+    useChatStore.setState((state) => {
+      const sameServerStream = state.streaming
+        && state.streamSource === 'server'
+        && state.streamingSessionId === targetSessionId
+
+      return {
+        streaming: true,
+        streamingSessionId: targetSessionId,
+        streamSource: 'server',
+        streamPhase: sameServerStream ? state.streamPhase : phase,
+        streamText: '',
+        displayText: '',
+        assistantRenderId: sameServerStream && state.assistantRenderId ? state.assistantRenderId : createAssistantRenderId(),
+        thinkingStartTime: sameServerStream && state.thinkingStartTime > 0 ? state.thinkingStartTime : Date.now(),
+      }
+    })
+  }, [])
+
   const currentAgent = useAppStore((s) => {
     const agentId = session?.agentId
     return agentId ? s.agents[agentId] ?? null : null
@@ -178,14 +209,12 @@ export function ChatArea() {
     })
 
     const sessionAtLoad = useAppStore.getState().sessions[requestedSessionId]
-    if (sessionAtLoad?.active) {
-      useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamSource: 'server', streamText: '' })
-    }
+    if (sessionAtLoad?.active) startServerStreamingPlaceholder(requestedSessionId)
 
     return () => {
       cancelled = true
     }
-  }, [loadQueuedMessages, refreshSession, sessionId, setDevServer, setMessages])
+  }, [loadQueuedMessages, refreshSession, sessionId, setDevServer, setMessages, startServerStreamingPlaceholder])
 
   useEffect(() => {
     if (!sessionId || messagesLoading) return
@@ -195,9 +224,7 @@ export function ChatArea() {
       void refreshSession(requestedSessionId).then(() => {
         if (cancelled || selectActiveSessionId(useAppStore.getState()) !== requestedSessionId) return
         const refreshed = useAppStore.getState().sessions[requestedSessionId]
-        if (refreshed?.active) {
-          useChatStore.setState({ streaming: true, streamingSessionId: requestedSessionId, streamSource: 'server', streamText: '' })
-        }
+        if (refreshed?.active) startServerStreamingPlaceholder(requestedSessionId)
       }).catch((err) => console.error('Failed to refresh session:', err))
 
       void devServer(requestedSessionId, 'status').then((r) => {
@@ -213,7 +240,7 @@ export function ChatArea() {
       cancelled = true
       window.clearTimeout(timer)
     }
-  }, [messagesLoading, refreshSession, sessionId, setDevServer])
+  }, [messagesLoading, refreshSession, sessionId, setDevServer, startServerStreamingPlaceholder])
 
   useEffect(() => {
     if (!sessionId || messagesLoading) return
@@ -292,19 +319,12 @@ export function ChatArea() {
         && !chatState.streaming
         && chatState.streamingSessionId !== sessionId
       ) {
-        useChatStore.setState({
-          streaming: true,
-          streamingSessionId: sessionId,
-          streamSource: 'server',
-          streamPhase: 'thinking',
-          streamText: '',
-          thinkingStartTime: Date.now(),
-        })
+        startServerStreamingPlaceholder(sessionId)
       }
     } catch (err) {
       console.error('Failed to refresh queue:', err)
     }
-  }, [loadQueuedMessages, sessionId])
+  }, [loadQueuedMessages, sessionId, startServerStreamingPlaceholder])
 
   // Subscribe to WS messages for this session — always subscribe when session exists,
   // only enable fallback polling when actively needed
@@ -316,7 +336,7 @@ export function ChatArea() {
   useWs(
     sessionId ? 'runs' : '',
     refreshQueue,
-    sessionId && (isServerActive || queuedCount > 0) ? 10_000 : undefined,
+    sessionId && (isServerActive || queuedCount > 0) ? 2_500 : undefined,
   )
 
   // Listen for stream-end signal from the server — clears streaming state
@@ -325,11 +345,12 @@ export function ChatArea() {
     if (!sessionId) return
     const state = useChatStore.getState()
     if (state.streamSource === 'server' && state.streamingSessionId === sessionId) {
-      useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', displayText: '', streamPhase: 'thinking', streamToolName: '', thinkingText: '', thinkingStartTime: 0 })
+      markSessionLocallyIdle(sessionId)
+      useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', displayText: '', assistantRenderId: null, streamPhase: 'thinking', streamToolName: '', thinkingText: '', thinkingStartTime: 0 })
       void refreshMessages()
       void refreshSession(sessionId)
     }
-  }, [sessionId, refreshMessages, refreshSession])
+  }, [markSessionLocallyIdle, sessionId, refreshMessages, refreshSession])
   useWs(sessionId ? `stream-end:${sessionId}` : '', handleStreamEnd)
 
   // Keep the local typing indicator aligned with the server's active state
@@ -338,7 +359,7 @@ export function ChatArea() {
     const state = useChatStore.getState()
     if (isServerActive) {
       if (!state.streaming && !state.streamText) {
-        useChatStore.setState({ streaming: true, streamingSessionId: sessionId, streamSource: 'server', streamText: '' })
+        startServerStreamingPlaceholder(sessionId)
       }
       return
     }
@@ -349,9 +370,10 @@ export function ChatArea() {
     ) {
       // Server finished — clear all streaming state and fetch final messages
       fetchMessages(sessionId).then(setMessages).catch(() => {})
-      useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', displayText: '', streamPhase: 'thinking', streamToolName: '', thinkingText: '', thinkingStartTime: 0 })
+      markSessionLocallyIdle(sessionId)
+      useChatStore.setState({ streaming: false, streamingSessionId: null, streamSource: null, streamText: '', displayText: '', assistantRenderId: null, streamPhase: 'thinking', streamToolName: '', thinkingText: '', thinkingStartTime: 0 })
     }
-  }, [isServerActive, sessionId, setMessages])
+  }, [isServerActive, markSessionLocallyIdle, sessionId, setMessages, startServerStreamingPlaceholder])
 
   // Poll browser status while session has browser tools
   const hasBrowserTool = getEnabledToolIds(session).includes('browser')

package/src/components/chat/message-bubble.test.ts

@@ -37,6 +37,41 @@ describe('MessageBubble', () => {
     assert.doesNotMatch(html, /streaming-cursor/)
   })
 
+  it('falls back to persisted streaming content when the live stream payload is temporarily empty', async () => {
+    const messageBubbleModule = await import('./message-bubble') as Record<string, unknown>
+    const MessageBubble = (
+      messageBubbleModule.MessageBubble
+      || (messageBubbleModule.default as { MessageBubble?: unknown } | undefined)?.MessageBubble
+      || (messageBubbleModule['module.exports'] as { MessageBubble?: unknown } | undefined)?.MessageBubble
+    ) as typeof import('./message-bubble').MessageBubble | undefined
+    assert.ok(MessageBubble)
+
+    const html = renderToStaticMarkup(
+      React.createElement(MessageBubble, {
+        message: {
+          role: 'assistant',
+          text: 'Recovered persisted partial text',
+          time: Date.now(),
+          kind: 'chat',
+          streaming: true,
+        },
+        assistantName: 'Hal2k-3',
+        agentName: 'Hal2k-3',
+        liveStream: {
+          active: true,
+          phase: 'responding',
+          toolName: '',
+          text: '',
+          thinking: '',
+          toolEvents: [],
+        },
+      }),
+    )
+
+    assert.match(html, /Recovered persisted partial text/)
+    assert.match(html, /streaming-cursor/)
+  })
+
   it('renders upload-linked screenshots inline without duplicating them at the bottom', async () => {
     const messageBubbleModule = await import('./message-bubble') as Record<string, unknown>
     const MessageBubble = (

package/src/components/chat/message-bubble.tsx

@@ -367,12 +367,14 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   const toolEvents = message.toolEvents ?? emptyToolEvents
   const toolEventsForMedia = useMemo(
     () => (liveStreamActive
-      ? liveToolEvents.map((event) => ({
-          name: event.name,
-          input: event.input,
-          output: event.output,
-          error: event.status === 'error' || undefined,
-        }))
+      ? (liveToolEvents.length > 0
+          ? liveToolEvents.map((event) => ({
+              name: event.name,
+              input: event.input,
+              output: event.output,
+              error: event.status === 'error' || undefined,
+            }))
+          : toolEvents)
       : toolEvents),
     [liveStreamActive, liveToolEvents, toolEvents],
   )
@@ -383,7 +385,15 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
   )
   const displayToolEvents = useMemo(
     () => (liveStreamActive
-      ? liveToolEvents.filter((ev) => ev.name !== 'send_file' || ev.status === 'error')
+      ? (liveToolEvents.length > 0
+          ? liveToolEvents.filter((ev) => ev.name !== 'send_file' || ev.status === 'error')
+          : persistedToolEvents.map((ev, i) => ({
+              id: ev.toolCallId || `${message.time}-${ev.name}-${i}`,
+              name: ev.name,
+              input: ev.input,
+              output: ev.output,
+              status: ev.error ? 'error' as const : 'done' as const,
+            })))
       : persistedToolEvents.map((ev, i) => ({
           id: ev.toolCallId || `${message.time}-${ev.name}-${i}`,
           name: ev.name,
@@ -419,11 +429,11 @@ export const MessageBubble = memo(function MessageBubble({ message, assistantNam
     ? (liveStreamActive ? (liveStream?.thinking?.trim() ? liveStream.thinking : undefined) : message.thinking)
     : undefined
 
-  const sourceText = liveStreamActive ? (liveStream?.text || '') : message.text
+  const sourceText = liveStreamActive ? (liveStream?.text || message.text || '') : message.text
   const connectorDeliveryTranscript = !isUser && message.kind === 'connector-delivery'
     ? (message.source?.deliveryTranscript?.trim() || '')
     : ''
-  const copySourceText = connectorDeliveryTranscript || (liveStreamActive ? (liveStream?.text || '') : message.text)
+  const copySourceText = connectorDeliveryTranscript || (liveStreamActive ? (liveStream?.text || message.text || '') : message.text)
 
   // Extract ALL media from ALL tool events for inline display after the message text.
   // Covers send_file, browser screenshots, file tool outputs — everything.

package/src/components/chat/message-list.tsx

@@ -188,6 +188,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   const snapUntilRef = useRef(0)
   const prevSessionIdRef = useRef<string | null>(null)
   const assistantRenderId = useChatStore((s) => s.assistantRenderId)
+  const thinkingStartTime = useChatStore((s) => s.thinkingStartTime)
   const hasLiveArtifacts = useChatStore(selectHasLiveArtifacts)
   const setMessages = useChatStore((s) => s.setMessages)
   const retryLastMessage = useChatStore((s) => s.retryLastMessage)
@@ -297,13 +298,46 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
     return dedupeMessagesForDisplay(displayedMessages)
   }, [messages, showAlerts, showOk])
 
+  const latestPersistedStreamingMessage = useMemo(() => {
+    for (let i = baseDisplayedMessages.length - 1; i >= 0; i -= 1) {
+      const candidate = baseDisplayedMessages[i]
+      if (candidate.role === 'assistant' && candidate.streaming === true) {
+        return candidate
+      }
+    }
+    return null
+  }, [baseDisplayedMessages])
+
+  const currentRunHasCompletedAssistant = useMemo(
+    () => (
+      streaming
+      && thinkingStartTime > 0
+      && baseDisplayedMessages.some((message) => (
+        message.role === 'assistant'
+        && message.streaming !== true
+        && message.kind !== 'system'
+        && message.kind !== 'heartbeat'
+        && typeof message.time === 'number'
+        && message.time >= thinkingStartTime
+      ))
+    ),
+    [baseDisplayedMessages, streaming, thinkingStartTime],
+  )
+
+  const showLiveStreamRow = streaming
+    && !!assistantRenderId
+    && !currentRunHasCompletedAssistant
+    && (hasLiveArtifacts || !!latestPersistedStreamingMessage)
+
   const streamingAwareMessages = useMemo(() => (
     buildStreamingAwareMessageList(baseDisplayedMessages, {
       localStreaming: streaming,
       hasLiveArtifacts,
       assistantRenderId,
+      showLiveRow: showLiveStreamRow,
+      syntheticAssistant: latestPersistedStreamingMessage,
     })
-  ), [assistantRenderId, baseDisplayedMessages, hasLiveArtifacts, streaming])
+  ), [assistantRenderId, baseDisplayedMessages, hasLiveArtifacts, latestPersistedStreamingMessage, showLiveStreamRow, streaming])
 
   const filteredMessages = useMemo(() => {
     let nextMessages = bookmarkFilter
@@ -623,7 +657,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
   }, [searchOpen])
 
   return (
-    <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden" data-testid="message-list">
+    <div className="relative flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden isolate" data-testid="message-list">
       <div className="shrink-0 px-4 md:px-12 lg:px-16 pt-3">
         <div className="flex flex-wrap items-center gap-2 rounded-[14px] border border-white/[0.06] bg-surface/55 px-3 py-2 backdrop-blur-sm">
           <button
@@ -853,7 +887,7 @@ export function MessageList({ messages, streaming, connectorFilter = null, loadi
           {transcriptNodes}
           <ApprovalCards agentId={agent?.id} />
           <LiveThinkingLane
-            show={streaming && !hasLiveArtifacts && !hasVisiblePersistedStreamingMessage}
+            show={streaming && !showLiveStreamRow && !hasLiveArtifacts && !hasVisiblePersistedStreamingMessage}
             assistantName={assistantName}
             agentAvatarSeed={agent?.avatarSeed}
             agentAvatarUrl={agent?.avatarUrl}

package/src/components/input/chat-input.tsx

@@ -50,6 +50,10 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
   const streamPhase = useChatStore((s) => s.streamPhase)
   const streamToolName = useChatStore((s) => s.streamToolName)
   const visibleQueuedMessages = listQueuedMessagesForSession(queuedMessages, sessionId)
+  const sendingQueuedMessages = visibleQueuedMessages.filter((item) => item.sending)
+  const pendingQueuedMessages = visibleQueuedMessages.filter((item) => !item.sending)
+  const displayedQueuedMessages = [...sendingQueuedMessages, ...pendingQueuedMessages]
+  const nextPendingRunId = pendingQueuedMessages[0]?.runId ?? null
   const shouldQueue = !!sessionId && (busy || visibleQueuedMessages.length > 0)
 
   useEffect(() => {
@@ -178,6 +182,8 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
   const hasContent = value.trim().length > 0 || pendingFiles.length > 0
   const queueStatusLabel = !busy
     ? 'Queue ready'
+    : sendingQueuedMessages.length > 0 && pendingQueuedMessages.length === 0
+      ? 'Sending now'
     : streamPhase === 'queued'
       ? 'Queued'
       : streamPhase === 'tool' && streamToolName
@@ -191,6 +197,8 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
               : 'Working'
   const queueStatusDetail = !busy
     ? 'Queued messages are ready and will dispatch automatically.'
+    : sendingQueuedMessages.length > 0 && pendingQueuedMessages.length === 0
+      ? 'The queued message has been accepted and should appear in the transcript shortly.'
     : 'Queued messages will send automatically when the current turn finishes.'
 
   return (
@@ -229,9 +237,16 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
                     <span className={`relative inline-flex h-2.5 w-2.5 rounded-full ${busy ? 'bg-amber-300' : 'bg-white/[0.45]'}`} />
                   </span>
                   <span className="label-mono text-amber-300/80">Message queue</span>
-                  <span className="rounded-pill border border-amber-400/15 bg-amber-400/10 px-2 py-0.5 text-[10px] font-600 text-amber-200">
-                    {visibleQueuedMessages.length}
-                  </span>
+                  {pendingQueuedMessages.length > 0 && (
+                    <span className="rounded-pill border border-amber-400/15 bg-amber-400/10 px-2 py-0.5 text-[10px] font-600 text-amber-200">
+                      {pendingQueuedMessages.length}
+                    </span>
+                  )}
+                  {sendingQueuedMessages.length > 0 && (
+                    <span className="rounded-pill border border-sky-300/15 bg-sky-300/10 px-2 py-0.5 text-[10px] font-600 text-sky-200">
+                      {sendingQueuedMessages.length} sending
+                    </span>
+                  )}
                   <span className={`rounded-pill border px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] ${
                     busy
                       ? 'border-amber-300/20 bg-amber-300/10 text-amber-100'
@@ -256,7 +271,7 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
                     Stop
                   </button>
                 )}
-                {sessionId && visibleQueuedMessages.length > 1 && (
+                {sessionId && pendingQueuedMessages.length > 0 && (
                   <button
                     type="button"
                     onClick={() => { void clearQueuedMessagesForSession(sessionId) }}
@@ -268,21 +283,26 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
               </div>
             </div>
             <div className="max-h-[184px] space-y-1.5 overflow-y-auto px-2.5 py-2.5">
-              {visibleQueuedMessages.map((item, index) => (
+              {displayedQueuedMessages.map((item, index) => (
                 <div
                   key={item.runId}
                   className={`group flex items-start gap-3 rounded-[12px] border px-3 py-2.5 transition-all ${
-                    index === 0
-                      ? 'border-amber-300/20 bg-amber-300/[0.07]'
-                      : 'border-white/[0.05] bg-white/[0.02]'
+                    item.sending
+                      ? 'border-sky-300/15 bg-sky-300/[0.06]'
+                      : item.runId === nextPendingRunId
+                        ? 'border-amber-300/20 bg-amber-300/[0.07]'
+                        : 'border-white/[0.05] bg-white/[0.02]'
                   }`}
                 >
                   <div className={`mt-0.5 flex h-6 min-w-6 items-center justify-center rounded-[8px] px-2 text-[10px] font-700 ${
-                    index === 0
-                      ? 'bg-amber-300/15 text-amber-100'
-                      : 'bg-white/[0.06] text-text-3'
-                  }`}>
-                    {index + 1}
+                    item.sending
+                      ? 'bg-sky-300/15 text-sky-100'
+                      : item.runId === nextPendingRunId
+                        ? 'bg-amber-300/15 text-amber-100'
+                      : 'border-white/[0.05] bg-white/[0.02]'
+                  }`}
+                >
+                    {item.sending ? '>' : pendingQueuedMessages.findIndex((candidate) => candidate.runId === item.runId) + 1}
                   </div>
                   <div className="min-w-0 flex-1">
                     <div className="flex flex-wrap items-center gap-2">
@@ -290,7 +310,7 @@ export function ChatInput({ streaming, busy, onSend, onStop, extensionChatAction
                         <span className="rounded-pill border border-sky-300/15 bg-sky-300/10 px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-sky-200 animate-pulse">
                           Sending
                         </span>
-                      ) : index === 0 && (
+                      ) : item.runId === nextPendingRunId && (
                         <span className="rounded-pill border border-amber-300/15 bg-amber-300/10 px-2 py-0.5 text-[10px] font-700 uppercase tracking-[0.12em] text-amber-100">
                           Next
                         </span>

package/src/components/openclaw/openclaw-deploy-panel.tsx

@@ -851,6 +851,8 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
               <label className="block text-[11px] font-700 uppercase tracking-[0.08em] text-text-3/70 mb-2">Port</label>
               <input
                 type="number"
+                min={1024}
+                max={65535}
                 value={localPort}
                 onChange={(e) => setLocalPort(Number.parseInt(e.target.value, 10) || 18789)}
                 className="w-full rounded-[12px] border border-white/[0.08] bg-bg px-3 py-3 text-[13px] text-text outline-none focus:border-accent-bright/30"
@@ -1168,6 +1170,8 @@ export function OpenClawDeployPanel(props: OpenClawDeployPanelProps) {
                   />
                   <input
                     type="number"
+                    min={1}
+                    max={65535}
                     value={sshPort}
                     onChange={(e) => setSshPort(Number.parseInt(e.target.value, 10) || 22)}
                     placeholder="22"

package/src/instrumentation.ts

@@ -1,10 +1,10 @@
 import { hmrSingleton } from '@/lib/shared-utils'
-import { log } from '@/lib/server/logger'
 
 const TAG = 'instrumentation'
 
 export async function register() {
   if (process.env.NEXT_RUNTIME === 'nodejs') {
+    const { log } = await import('@/lib/server/logger')
     const isWorkerOnly = process.env.SWARMCLAW_WORKER_ONLY === '1'
     const { initWsServer, closeWsServer } = await import('./lib/server/ws-hub')
     const { ensureDaemonStarted } = await import('@/lib/server/runtime/daemon-state')

package/src/lib/chat/assistant-render-id.ts

@@ -0,0 +1,3 @@
+export function createAssistantRenderId(): string {
+  return `assistant-${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 8)}`
+}