@nextclaw/ui 0.12.9 → 0.12.11

package/src/components/chat/ncp/ncp-chat-page.tsx

@@ -22,7 +22,10 @@ import {
 } from "@/components/chat/chat-session-route";
 import { useNcpChatPageData } from "@/components/chat/ncp/ncp-chat-page-data";
 import { NcpChatPresenter } from "@/components/chat/ncp/ncp-chat.presenter";
-import { useNcpSessionConversation } from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
+import {
+  isNcpAgentStartupUnavailableErrorMessage,
+  useNcpSessionConversation,
+} from "@/components/chat/ncp/session-conversation/use-ncp-session-conversation";
 import { useNcpChatDerivedState, useNcpChatSnapshotSync } from "@/components/chat/ncp/page/ncp-chat-derived-state";
 import { ChatPresenterProvider } from "@/components/chat/presenter/chat-presenter-context";
 import type { ResumeRunParams } from "@/components/chat/chat-stream/types";
@@ -31,6 +34,10 @@ import { useChatSessionListStore } from "@/components/chat/stores/chat-session-l
 import { useConfirmDialog } from "@/hooks/useConfirmDialog";
 import { useAgents } from "@/hooks/agents/useAgents";
 import { normalizeRequestedSkills } from "@/lib/chat-runtime-utils";
+import {
+  systemStatusManager,
+  useChatRuntimeAvailability,
+} from "@/features/system-status";
 import {
   getSessionProjectName,
   normalizeSessionProjectRootValue,
@@ -119,6 +126,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const pendingProjectRootSessionKey = useChatInputStore(
     (state) => state.snapshot.pendingProjectRootSessionKey,
   );
+  const runtimeAvailability = useChatRuntimeAvailability();
   const agentsQuery = useAgents();
   const currentSelectedModel = useChatInputStore(
     (state) => state.snapshot.selectedModel,
@@ -182,8 +190,19 @@ export function NcpChatPage({ view }: ChatPageProps) {
   const isAwaitingAssistantOutput = agent.isRunning;
   const canStopCurrentRun = agent.isRunning;
   const stopDisabledReason = agent.isRunning ? null : "__preparing__";
-  const lastSendError =
+  const rawLastSendError =
     agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const filteredLastSendError =
+    runtimeAvailability.phase === "ready" &&
+    isNcpAgentStartupUnavailableErrorMessage(rawLastSendError)
+      ? null
+      : rawLastSendError;
+  const lastSendError =
+    runtimeAvailability.isBlocked
+      ? null
+      : runtimeAvailability.phase === "ready"
+      ? filteredLastSendError
+      : systemStatusManager.getDisplayMessage(filteredLastSendError);
 
   useEffect(() => {
     presenter.chatStreamActionsManager.bind({
@@ -304,6 +323,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     currentAgent,
     parentSession,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     currentChildSessionTabs,
   } = useNcpChatDerivedState({
     sessionKey,
@@ -340,6 +360,7 @@ export function NcpChatPage({ view }: ChatPageProps) {
     isSkillsLoading: sessionSkillsQuery.isLoading,
     sessionTypeUnavailableMessage,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     sessionKey,
     currentAgentId,
     currentAgent,

package/src/components/chat/ncp/ncp-session-adapter.test.ts

@@ -316,6 +316,7 @@ describe('adaptNcpMessageToUiMessage tool rendering', () => {
       },
     });
   });
+
 });
 
 describe('readNcpSessionPreferredThinking', () => {

package/src/components/chat/ncp/ncp-session-adapter.ts

@@ -151,6 +151,9 @@ function parseSessionContext(sessionKey: string): { channel?: string; type?: str
 }
 
 function mapToolStatus(part: Extract<NcpMessagePart, { type: 'tool-invocation' }>): ToolInvocationStatus {
+  if (part.state === 'cancelled') {
+    return ToolInvocationStatus.CANCELLED;
+  }
   if (part.state === 'result') {
     return ToolInvocationStatus.RESULT;
   }

package/src/components/chat/ncp/page/ncp-chat-derived-state.ts

@@ -11,6 +11,7 @@ import type { NcpChatPresenter } from '@/components/chat/ncp/ncp-chat.presenter'
 import type { UseHydratedNcpAgentResult } from '@nextclaw/ncp-react';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import type { ChatChildSessionTab } from '@/components/chat/stores/chat-thread.store';
+import type { ChatSessionTypeOption } from '@/components/chat/useChatSessionTypeState';
 import { resolveSessionTypeLabel } from '@/components/chat/useChatSessionTypeState';
 
 function buildChildSessionTabs(params: {
@@ -40,7 +41,7 @@ export function useNcpChatDerivedState(params: {
   parentSessionId: string | null;
   sessionSummaries: NcpSessionSummaryView[];
   selectedSessionType: string;
-  sessionTypeOptions: Array<{ value: string; label: string }>;
+  sessionTypeOptions: ChatSessionTypeOption[];
 }) {
   const {
     availableAgents,
@@ -68,9 +69,11 @@ export function useNcpChatDerivedState(params: {
       ) ?? null;
     return parentSummary ? adaptNcpSessionSummary(parentSummary) : null;
   }, [parentSessionId, sessionSummaries]);
+  const currentSessionTypeOption =
+    sessionTypeOptions.find((option) => option.value === selectedSessionType) ?? null;
   const currentSessionTypeLabel =
-    sessionTypeOptions.find((option) => option.value === selectedSessionType)
-      ?.label ?? resolveSessionTypeLabel(selectedSessionType);
+    currentSessionTypeOption?.label ?? resolveSessionTypeLabel(selectedSessionType);
+  const currentSessionTypeIcon = currentSessionTypeOption?.icon ?? null;
   const currentChildSessionTabs = useMemo(
     () =>
       buildChildSessionTabs({
@@ -86,6 +89,7 @@ export function useNcpChatDerivedState(params: {
     currentAgent,
     parentSession,
     currentSessionTypeLabel,
+    currentSessionTypeIcon,
     currentChildSessionTabs,
   };
 }
@@ -99,7 +103,7 @@ export function useNcpChatSnapshotSync(params: {
   lastSendError: string | null;
   isSending: boolean;
   modelOptions: ChatModelOption[];
-  sessionTypeOptions: Array<{ value: string; label: string }>;
+  sessionTypeOptions: ChatSessionTypeOption[];
   selectedSessionType: string;
   canEditSessionType: boolean;
   sessionTypeUnavailable: boolean;
@@ -107,6 +111,7 @@ export function useNcpChatSnapshotSync(params: {
   isSkillsLoading: boolean;
   sessionTypeUnavailableMessage: string | null;
   currentSessionTypeLabel: string;
+  currentSessionTypeIcon: ChatSessionTypeOption['icon'];
   sessionKey: string;
   currentAgentId: string;
   currentAgent: AgentProfileView | null;
@@ -145,6 +150,7 @@ export function useNcpChatSnapshotSync(params: {
       sessionTypeUnavailable: params.sessionTypeUnavailable,
       sessionTypeUnavailableMessage: params.sessionTypeUnavailableMessage,
       sessionTypeLabel: params.currentSessionTypeLabel,
+      sessionTypeIcon: params.currentSessionTypeIcon,
       sessionKey: params.sessionKey,
       agentId: params.currentAgentId,
       agentDisplayName: params.currentAgent?.displayName ?? null,

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.test.tsx

@@ -1,16 +1,20 @@
-import { renderHook } from "@testing-library/react";
+import { act, renderHook, waitFor } from "@testing-library/react";
 import { beforeEach, describe, expect, it, vi } from "vitest";
 import { fetchNcpSessionConversationSeed, useNcpSessionConversation } from "./use-ncp-session-conversation";
 
 const mocks = vi.hoisted(() => ({
   fetchNcpSessionMessages: vi.fn(),
-  hydratedCalls: [] as Array<{ client: unknown }>,
+  hydratedCalls: [] as Array<{ client: unknown; loadSeed: unknown }>,
+  runtimeAvailability: {
+    phase: "cold-starting" as "cold-starting" | "ready",
+    lastReadyAt: null as number | null,
+  },
   useHydratedNcpAgent: vi.fn(() => ({
     snapshot: {
       messages: [],
       streamingMessage: null,
       activeRun: null,
-      error: null,
+      error: null as Error | null,
     },
     visibleMessages: [],
     activeRunId: null,
@@ -30,7 +34,7 @@ vi.mock("@/api/ncp-session", () => ({
 }));
 
 vi.mock("@nextclaw/ncp-react", () => ({
-  useHydratedNcpAgent: vi.fn((params: { client: unknown }) => {
+  useHydratedNcpAgent: vi.fn((params: { client: unknown; loadSeed: unknown }) => {
     mocks.hydratedCalls.push(params);
     return mocks.useHydratedNcpAgent();
   }),
@@ -42,12 +46,18 @@ vi.mock("@nextclaw/ncp-http-agent-client", () => ({
   }),
 }));
 
+vi.mock("@/features/system-status", () => ({
+  useChatRuntimeAvailability: vi.fn(() => mocks.runtimeAvailability),
+}));
+
 describe("useNcpSessionConversation", () => {
   beforeEach(() => {
     mocks.fetchNcpSessionMessages.mockReset();
     mocks.useHydratedNcpAgent.mockClear();
     mocks.hydratedCalls.length = 0;
     mocks.clientInstances.length = 0;
+    mocks.runtimeAvailability.phase = "cold-starting";
+    mocks.runtimeAvailability.lastReadyAt = null;
   });
 
   it("hydrates seed from the shared session messages endpoint payload", async () => {
@@ -98,4 +108,38 @@ describe("useNcpSessionConversation", () => {
     expect(mocks.hydratedCalls[0]?.client).toBe(mocks.clientInstances[0]);
     expect(mocks.hydratedCalls[1]?.client).toBe(mocks.clientInstances[1]);
   });
+
+  it("retries hydration once the runtime becomes ready after a startup placeholder error", async () => {
+    mocks.useHydratedNcpAgent.mockImplementation(() => ({
+      snapshot: {
+        messages: [],
+        streamingMessage: null,
+        activeRun: null,
+        error: new Error("ncp agent unavailable during startup") as Error | null,
+      },
+      visibleMessages: [],
+      activeRunId: null,
+      isRunning: false,
+      isSending: false,
+      send: vi.fn(),
+      abort: vi.fn(),
+      streamRun: vi.fn(),
+      isHydrating: false,
+      hydrateError: null,
+    }));
+
+    const { rerender } = renderHook(() => useNcpSessionConversation("session-a"));
+    const initialLoadSeed = mocks.hydratedCalls[0]?.loadSeed;
+
+    act(() => {
+      mocks.runtimeAvailability.phase = "ready";
+      mocks.runtimeAvailability.lastReadyAt = 123;
+    });
+    rerender();
+
+    await waitFor(() => {
+      expect(mocks.hydratedCalls.length).toBeGreaterThan(2);
+    });
+    expect(mocks.hydratedCalls[mocks.hydratedCalls.length - 1]?.loadSeed).not.toBe(initialLoadSeed);
+  });
 });

package/src/components/chat/ncp/session-conversation/use-ncp-session-conversation.ts

@@ -1,11 +1,13 @@
-import { useCallback, useState } from "react";
+import { useCallback, useEffect, useRef, useState } from "react";
 import { NcpHttpAgentClientEndpoint } from "@nextclaw/ncp-http-agent-client";
 import { useHydratedNcpAgent, type NcpConversationSeed } from "@nextclaw/ncp-react";
 import { API_BASE } from "@/api/api-base";
 import { fetchNcpSessionMessages } from "@/api/ncp-session";
 import { createNcpAppClientFetch } from "@/components/chat/ncp/ncp-app-client-fetch";
+import { useChatRuntimeAvailability } from "@/features/system-status";
 
 const DEFAULT_MESSAGE_LIMIT = 300;
+const NCP_AGENT_UNAVAILABLE_DURING_STARTUP = "ncp agent unavailable during startup";
 
 type UseNcpSessionConversationOptions = {
   messageLimit?: number;
@@ -18,6 +20,15 @@ function isMissingNcpSessionError(error: unknown): boolean {
   return error.message.includes("ncp session not found:");
 }
 
+export function isNcpAgentStartupUnavailableErrorMessage(
+  message: string | null | undefined,
+): boolean {
+  return (
+    message?.trim().toLowerCase().includes(NCP_AGENT_UNAVAILABLE_DURING_STARTUP) ??
+    false
+  );
+}
+
 export function createNcpSessionConversationClient(): NcpHttpAgentClientEndpoint {
   return new NcpHttpAgentClientEndpoint({
     baseUrl: API_BASE,
@@ -57,16 +68,43 @@ export function useNcpSessionConversation(
   options: UseNcpSessionConversationOptions = {},
 ) {
   const [client] = useState(() => createNcpSessionConversationClient());
+  const runtimeAvailability = useChatRuntimeAvailability();
+  const [hydrationRetryNonce, setHydrationRetryNonce] = useState(0);
+  const retriedReadySignatureRef = useRef<string | null>(null);
   const messageLimit = options.messageLimit ?? DEFAULT_MESSAGE_LIMIT;
   const loadSeed = useCallback(
-    (targetSessionId: string, signal: AbortSignal) =>
-      fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit),
-    [messageLimit],
+    (targetSessionId: string, signal: AbortSignal) => {
+      void hydrationRetryNonce;
+      return fetchNcpSessionConversationSeed(targetSessionId, signal, messageLimit);
+    },
+    [hydrationRetryNonce, messageLimit],
   );
 
-  return useHydratedNcpAgent({
+  const agent = useHydratedNcpAgent({
     sessionId,
     client,
     loadSeed,
   });
+
+  const currentAgentError =
+    agent.hydrateError?.message ?? agent.snapshot.error?.message ?? null;
+  const readyRetrySignature =
+    runtimeAvailability.phase === "ready" &&
+    isNcpAgentStartupUnavailableErrorMessage(currentAgentError)
+      ? `${sessionId}:${runtimeAvailability.lastReadyAt ?? 0}`
+      : null;
+
+  useEffect(() => {
+    if (!readyRetrySignature) {
+      retriedReadySignatureRef.current = null;
+      return;
+    }
+    if (retriedReadySignatureRef.current === readyRetrySignature) {
+      return;
+    }
+    retriedReadySignatureRef.current = readyRetrySignature;
+    setHydrationRetryNonce((current) => current + 1);
+  }, [readyRetrySignature]);
+
+  return agent;
 }

package/src/components/chat/ncp/tests/ncp-chat-input.manager.test.ts

@@ -4,6 +4,7 @@ import { NcpChatInputManager } from '@/components/chat/ncp/ncp-chat-input.manage
 import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { useChatThreadStore } from '@/components/chat/stores/chat-thread.store';
+import { useSystemStatusStore } from '@/features/system-status';
 
 describe('NcpChatInputManager', () => {
   beforeEach(() => {
@@ -15,8 +16,23 @@ describe('NcpChatInputManager', () => {
         attachments: [],
         selectedSkills: [],
         selectedSessionType: 'native',
-        selectedModel: '',
+        selectedModel: 'gpt-5',
         selectedThinkingLevel: null,
+        isProviderStateResolved: true,
+        modelOptions: [
+          {
+            value: 'gpt-5',
+            modelLabel: 'GPT-5',
+            providerLabel: 'OpenAI',
+            thinkingCapability: null,
+          },
+        ],
+      },
+    });
+    useSystemStatusStore.setState({
+      state: {
+        ...useSystemStatusStore.getState().state,
+        lifecyclePhase: 'ready',
       },
     });
     useChatSessionListStore.setState({
@@ -96,4 +112,38 @@ describe('NcpChatInputManager', () => {
     );
     expect(sessionListManager.promoteRootDraftSessionRoute).toHaveBeenCalledWith('draft-root-session');
   });
+
+  it('does not send while the runtime is still blocked during startup', async () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        isProviderStateResolved: false,
+        modelOptions: [],
+      },
+    });
+    useSystemStatusStore.setState({
+      state: {
+        ...useSystemStatusStore.getState().state,
+        lifecyclePhase: 'cold-starting',
+      },
+    });
+    const streamActionsManager = {
+      sendMessage: vi.fn().mockResolvedValue(undefined),
+      stopCurrentRun: vi.fn().mockResolvedValue(undefined),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[1];
+    const sessionListManager = {
+      ensureDraftSession: vi.fn(() => 'draft-session'),
+      promoteRootDraftSessionRoute: vi.fn(),
+    } as unknown as ConstructorParameters<typeof NcpChatInputManager>[2];
+    const manager = new NcpChatInputManager(
+      {} as ConstructorParameters<typeof NcpChatInputManager>[0],
+      streamActionsManager,
+      sessionListManager,
+    );
+
+    await manager.send();
+
+    expect(streamActionsManager.sendMessage).not.toHaveBeenCalled();
+    expect(sessionListManager.promoteRootDraftSessionRoute).not.toHaveBeenCalled();
+  });
 });

package/src/components/chat/stores/chat-input.store.ts

@@ -1,7 +1,7 @@
 import { create } from 'zustand';
 import type { ChatComposerNode } from '@nextclaw/agent-chat-ui';
 import type { NcpDraftAttachment } from '@nextclaw/ncp-react';
-import type { SessionSkillEntryView, ThinkingLevel } from '@/api/types';
+import type { SessionSkillEntryView, SessionTypeIconView, ThinkingLevel } from '@/api/types';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
 import { createInitialChatComposerNodes } from '@/components/chat/chat-composer-state';
 
@@ -24,6 +24,7 @@ export type ChatInputSnapshot = {
   sessionTypeOptions: Array<{
     value: string;
     label: string;
+    icon?: SessionTypeIconView | null;
     ready?: boolean;
     reason?: string | null;
     reasonMessage?: string | null;

package/src/components/chat/stores/chat-thread.store.ts

@@ -3,7 +3,7 @@ import type { MutableRefObject } from 'react';
 import type { NcpMessage } from '@nextclaw/ncp';
 import type { ChatFileOperationLineViewModel } from '@nextclaw/agent-chat-ui';
 import type { ChatModelOption } from '@/components/chat/chat-input.types';
-import type { AgentProfileView } from '@/api/types';
+import type { AgentProfileView, SessionTypeIconView } from '@/api/types';
 
 export type ChatChildSessionTab = {
   sessionKey: string;
@@ -35,6 +35,7 @@ export type ChatThreadSnapshot = {
   sessionTypeUnavailable: boolean;
   sessionTypeUnavailableMessage?: string | null;
   sessionTypeLabel?: string | null;
+  sessionTypeIcon?: SessionTypeIconView | null;
   sessionKey: string | null;
   agentId?: string | null;
   agentDisplayName?: string | null;
@@ -70,6 +71,7 @@ const initialSnapshot: ChatThreadSnapshot = {
   sessionTypeUnavailable: false,
   sessionTypeUnavailableMessage: null,
   sessionTypeLabel: null,
+  sessionTypeIcon: null,
   sessionKey: null,
   agentId: null,
   agentDisplayName: null,

package/src/components/chat/useChatSessionTypeState.ts

@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useRef } from 'react';
 import type { Dispatch, SetStateAction } from 'react';
-import type { AgentProfileView, ChatSessionTypeOptionView, SessionEntryView } from '@/api/types';
+import type {
+  AgentProfileView,
+  ChatSessionTypeOptionView,
+  SessionEntryView,
+  SessionTypeIconView
+} from '@/api/types';
 import { t } from '@/lib/i18n';
 
 export const DEFAULT_SESSION_TYPE = 'native';
@@ -8,6 +13,7 @@ export const DEFAULT_SESSION_TYPE = 'native';
 export type ChatSessionTypeOption = {
   value: string;
   label: string;
+  icon: SessionTypeIconView | null;
   ready: boolean;
   reason?: string | null;
   reasonMessage?: string | null;
@@ -71,6 +77,7 @@ export function buildSessionTypeOptions(
     deduped.set(value, {
       value,
       label: option.label?.trim() || resolveSessionTypeLabel(value),
+      icon: option.icon ?? null,
       ready: option.ready ?? true,
       reason: option.reason ?? null,
       reasonMessage: option.reasonMessage ?? null,
@@ -83,6 +90,7 @@ export function buildSessionTypeOptions(
     deduped.set(DEFAULT_SESSION_TYPE, {
       value: DEFAULT_SESSION_TYPE,
       label: resolveSessionTypeLabel(DEFAULT_SESSION_TYPE),
+      icon: null,
       ready: true,
       reason: null,
       reasonMessage: null,
@@ -129,6 +137,7 @@ export function useChatSessionTypeState(params: UseChatSessionTypeStateParams):
       options.push({
         value: currentSessionType,
         label: resolveSessionTypeLabel(currentSessionType),
+        icon: null,
         ready: true,
         reason: null,
         reasonMessage: null,

package/src/components/chat/workspace/chat-session-workspace-file-breadcrumbs.tsx

@@ -0,0 +1,86 @@
+import { Fragment } from "react";
+import { ChevronRight, FileCode2, FolderTree } from "lucide-react";
+import type { WorkspaceFileBreadcrumbViewModel } from "@/lib/session-project/workspace-file-breadcrumb";
+import { t } from "@/lib/i18n";
+import { cn } from "@/lib/utils";
+
+function WorkspaceBreadcrumbMetaChip({
+  tone = "neutral",
+  value,
+}: {
+  tone?: "neutral" | "warning";
+  value: string;
+}) {
+  return (
+    <span
+      className={cn(
+        "inline-flex h-5 items-center rounded-sm border px-1.5 text-[10px] font-medium leading-none",
+        tone === "warning"
+          ? "border-amber-200 bg-amber-50 text-amber-700"
+          : "border-gray-200 bg-gray-50 text-gray-500",
+      )}
+    >
+      {value}
+    </span>
+  );
+}
+
+export function ChatSessionWorkspaceFileBreadcrumbs({
+  breadcrumb,
+}: {
+  breadcrumb: WorkspaceFileBreadcrumbViewModel;
+}) {
+  return (
+    <div
+      data-testid="workspace-file-breadcrumbs"
+      title={breadcrumb.fullPath}
+      className="workspace-horizontal-scrollbar overflow-x-auto overflow-y-hidden border-b border-gray-200/80 bg-gray-50/55"
+    >
+      <div
+        data-testid="workspace-file-breadcrumb-scroll"
+        className="flex min-w-max items-center gap-2.5 px-3 py-1.5"
+      >
+        <div className="flex min-w-0 flex-1 items-center gap-1 pr-1">
+          {breadcrumb.segments.map((segment, index) => (
+            <Fragment key={segment.key}>
+              <span
+                className={cn(
+                  "inline-flex h-5 items-center gap-1 rounded-sm px-1 text-[11px] leading-none",
+                  segment.kind === "workspace"
+                    ? "bg-primary/8 text-primary"
+                    : segment.isCurrent
+                      ? "bg-gray-200/70 text-gray-900"
+                      : "text-gray-500",
+                )}
+              >
+                {segment.kind === "workspace" ? (
+                  <FolderTree className="h-3 w-3 shrink-0" />
+                ) : segment.isCurrent ? (
+                  <FileCode2 className="h-3 w-3 shrink-0" />
+                ) : null}
+                <span>{segment.label}</span>
+              </span>
+              {index < breadcrumb.segments.length - 1 ? (
+                <ChevronRight className="h-3 w-3 shrink-0 text-gray-300" />
+              ) : null}
+            </Fragment>
+          ))}
+        </div>
+
+        {breadcrumb.locationLabel || breadcrumb.truncated ? (
+          <div className="flex shrink-0 flex-wrap items-center justify-end gap-1">
+            {breadcrumb.locationLabel ? (
+              <WorkspaceBreadcrumbMetaChip value={breadcrumb.locationLabel} />
+            ) : null}
+            {breadcrumb.truncated ? (
+              <WorkspaceBreadcrumbMetaChip
+                tone="warning"
+                value={t("chatWorkspacePreviewTruncated")}
+              />
+            ) : null}
+          </div>
+        ) : null}
+      </div>
+    </div>
+  );
+}

package/src/components/common/BrandHeader.tsx

@@ -1,5 +1,6 @@
 import { useAppMeta } from '@/hooks/useConfig';
 import type { ReactNode } from 'react';
+import { RuntimeStatusEntry } from '@/components/layout/runtime-status-entry';
 
 type BrandHeaderProps = {
   className?: string;
@@ -10,6 +11,7 @@ export function BrandHeader({ className, suffix }: BrandHeaderProps) {
   const { data } = useAppMeta();
   const productName = data?.name ?? 'NextClaw';
   const productVersion = data?.productVersion?.trim();
+  const resolvedSuffix = suffix ?? <RuntimeStatusEntry />;
 
   return (
     <div className={className ?? 'flex items-center gap-2.5'}>
@@ -19,7 +21,7 @@ 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}
-        {suffix ? <span className="inline-flex items-center shrink-0">{suffix}</span> : null}
+        {resolvedSuffix ? <span className="inline-flex items-center shrink-0">{resolvedSuffix}</span> : null}
       </div>
     </div>
   );

package/src/components/common/session-context-icon.tsx

@@ -1,4 +1,5 @@
 import { type SessionContextIcon } from '@/lib/session-context.utils';
+import { resolveAppResourceUri } from '@/lib/app-resource-uri';
 import { LogoBadge } from '@/components/common/LogoBadge';
 import { getChannelLogo } from '@/lib/logos';
 import { cn } from '@/lib/utils';
@@ -8,6 +9,18 @@ export function SessionContextIconNode({ icon, className }: { icon: SessionConte
   if (icon.kind === 'channel-logo') {
     return <ChannelLogoIcon channel={icon.channel} className={className} />;
   }
+  if (icon.kind === 'runtime-image') {
+    const runtimeIconSrc = resolveAppResourceUri(icon.src);
+    return (
+      <LogoBadge
+        name={icon.name?.trim() || icon.alt?.trim() || 'runtime'}
+        src={runtimeIconSrc ?? undefined}
+        className={cn('h-[1.125rem] w-[1.125rem]', className)}
+        imgClassName="h-full w-full object-contain"
+        fallback={<Bot className={cn('h-3 w-3 text-gray-500', className)} />}
+      />
+    );
+  }
   if (icon.icon === 'heartbeat') {
     return <HeartPulse className={cn('h-3.5 w-3.5', className)} />;
   }
@@ -22,8 +35,8 @@ function ChannelLogoIcon(
     <LogoBadge
       name={channel}
       src={logoSrc}
-      className={cn('h-4 w-4 rounded-[4px] border border-gray-200/80 bg-white', className)}
-      imgClassName="h-3 w-3 object-contain"
+      className={cn('h-[1.125rem] w-[1.125rem]', className)}
+      imgClassName="h-full w-full object-contain"
       fallback={<Bot className="h-3 w-3 text-gray-500" />}
     />
   );