@nextclaw/ui 0.12.14 → 0.12.16

package/dist/index.html

@@ -78,45 +78,45 @@
     })();
   </script>
   <title>NextClaw</title>
-  <script type="module" crossorigin src="/assets/index-CAYF44Dz.js"></script>
-  <link rel="modulepreload" crossorigin href="/assets/i18n-BnNAQpVM.js">
-  <link rel="modulepreload" crossorigin href="/assets/api-C51456xV.js">
-  <link rel="modulepreload" crossorigin href="/assets/es2015-BlNhrQUG.js">
-  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-C_GFKVuW.js">
-  <link rel="modulepreload" crossorigin href="/assets/select-DRDejPLk.js">
-  <link rel="modulepreload" crossorigin href="/assets/dist-DtBFqZ6_.js">
-  <link rel="modulepreload" crossorigin href="/assets/x-BjMO7v8q.js">
-  <link rel="modulepreload" crossorigin href="/assets/dialog-BHcaU6NE.js">
-  <link rel="modulepreload" crossorigin href="/assets/popover-B8msg2FQ.js">
-  <link rel="modulepreload" crossorigin href="/assets/tooltip-C6VPreZ7.js">
-  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-ptDyT_1C.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-config-DFja1sda.js">
-  <link rel="modulepreload" crossorigin href="/assets/theme-provider-dHqcWU-j.js">
-  <link rel="modulepreload" crossorigin href="/assets/search-DZSNKEGp.js">
-  <link rel="modulepreload" crossorigin href="/assets/book-open-B4mOKdz8.js">
-  <link rel="modulepreload" crossorigin href="/assets/external-link-DP2IJ7AM.js">
-  <link rel="modulepreload" crossorigin href="/assets/folder-BPwc278w.js">
-  <link rel="modulepreload" crossorigin href="/assets/logos-BcELLmYh.js">
-  <link rel="modulepreload" crossorigin href="/assets/loader-circle-C6gg2m2a.js">
-  <link rel="modulepreload" crossorigin href="/assets/plus-BptLViq1.js">
-  <link rel="modulepreload" crossorigin href="/assets/refresh-ccw-CeG203yU.js">
-  <link rel="modulepreload" crossorigin href="/assets/settings-DjvNMJde.js">
-  <link rel="modulepreload" crossorigin href="/assets/sparkles-CyDTgTM4.js">
-  <link rel="modulepreload" crossorigin href="/assets/trash-2-C1cdqL6V.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-Dib9sS83.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-CoKIUCJj.js">
-  <link rel="modulepreload" crossorigin href="/assets/doc-browser-CwgI7ipB.js">
-  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-D-pjxsyz.js">
-  <link rel="modulepreload" crossorigin href="/assets/logo-badge-uB4SwANR.js">
-  <link rel="modulepreload" crossorigin href="/assets/skeleton-5Mg6vZHN.js">
-  <link rel="modulepreload" crossorigin href="/assets/chat-BxA-mw53.js">
-  <link rel="modulepreload" crossorigin href="/assets/key-round-BQXmPSxD.js">
-  <link rel="modulepreload" crossorigin href="/assets/message-square-CLVODA23.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-navigation.config-Dve1W20Y.js">
-  <link rel="modulepreload" crossorigin href="/assets/notice-card-C9PFAR67.js">
-  <link rel="modulepreload" crossorigin href="/assets/status-dot-aQU9Mia4.js">
-  <link rel="modulepreload" crossorigin href="/assets/app-manager-provider-D_cKqqRG.js">
-  <link rel="stylesheet" crossorigin href="/assets/index-mRmSAB-e.css">
+  <script type="module" crossorigin src="/assets/index-mw77my39.js"></script>
+  <link rel="modulepreload" crossorigin href="/assets/i18n-CF_jgT_-.js">
+  <link rel="modulepreload" crossorigin href="/assets/api-BIg--UMJ.js">
+  <link rel="modulepreload" crossorigin href="/assets/es2015-BRVsmfFO.js">
+  <link rel="modulepreload" crossorigin href="/assets/createLucideIcon-DVAlgDOi.js">
+  <link rel="modulepreload" crossorigin href="/assets/select-tRTLG4FK.js">
+  <link rel="modulepreload" crossorigin href="/assets/dist-DWPNydLC.js">
+  <link rel="modulepreload" crossorigin href="/assets/x-BvS2y4e_.js">
+  <link rel="modulepreload" crossorigin href="/assets/dialog-t7OAmObC.js">
+  <link rel="modulepreload" crossorigin href="/assets/popover-CbQxrchk.js">
+  <link rel="modulepreload" crossorigin href="/assets/tooltip-7lsLGcL9.js">
+  <link rel="modulepreload" crossorigin href="/assets/chunk-JZWAC4HX-THqEFwu9.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-config-CXu7dFzw.js">
+  <link rel="modulepreload" crossorigin href="/assets/theme-provider-D6Cgm6i-.js">
+  <link rel="modulepreload" crossorigin href="/assets/search-Bz3Q64sr.js">
+  <link rel="modulepreload" crossorigin href="/assets/book-open-CUd69I2f.js">
+  <link rel="modulepreload" crossorigin href="/assets/external-link-D1Xqff6i.js">
+  <link rel="modulepreload" crossorigin href="/assets/folder-B_fuaX3x.js">
+  <link rel="modulepreload" crossorigin href="/assets/logos-BVCi_7_I.js">
+  <link rel="modulepreload" crossorigin href="/assets/loader-circle-DEz3bHGb.js">
+  <link rel="modulepreload" crossorigin href="/assets/plus-CdYMdiws.js">
+  <link rel="modulepreload" crossorigin href="/assets/refresh-ccw-C-ytTHiq.js">
+  <link rel="modulepreload" crossorigin href="/assets/settings-Cto6z-Ij.js">
+  <link rel="modulepreload" crossorigin href="/assets/sparkles-xZ74eW0P.js">
+  <link rel="modulepreload" crossorigin href="/assets/trash-2-WFSNa5oj.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-context-zXaTjrpA.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-t96ibd-b.js">
+  <link rel="modulepreload" crossorigin href="/assets/doc-browser-DznuT-CU.js">
+  <link rel="modulepreload" crossorigin href="/assets/use-viewport-layout-CWlW5b-T.js">
+  <link rel="modulepreload" crossorigin href="/assets/logo-badge-CRVKkIl9.js">
+  <link rel="modulepreload" crossorigin href="/assets/skeleton-BwfJfVK3.js">
+  <link rel="modulepreload" crossorigin href="/assets/chat-CXrERmQ1.js">
+  <link rel="modulepreload" crossorigin href="/assets/key-round-DFVNXZcD.js">
+  <link rel="modulepreload" crossorigin href="/assets/message-square-CLhDWybk.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-navigation.config-xIjCAn-R.js">
+  <link rel="modulepreload" crossorigin href="/assets/notice-card-CXY09tsa.js">
+  <link rel="modulepreload" crossorigin href="/assets/status-dot-Bobpfutv.js">
+  <link rel="modulepreload" crossorigin href="/assets/app-manager-provider-BfKiVYea.js">
+  <link rel="stylesheet" crossorigin href="/assets/index-DuHqJ8wn.css">
 </head>
 
 <body>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextclaw/ui",
-  "version": "0.12.14",
+  "version": "0.12.16",
   "private": false,
   "type": "module",
   "license": "MIT",
@@ -28,11 +28,11 @@
     "tailwind-merge": "^2.5.4",
     "zod": "^3.23.8",
     "zustand": "^5.0.2",
-    "@nextclaw/agent-chat": "0.1.10",
-    "@nextclaw/agent-chat-ui": "0.3.9",
+    "@nextclaw/agent-chat-ui": "0.3.11",
     "@nextclaw/ncp-http-agent-client": "0.3.17",
     "@nextclaw/ncp-react": "0.4.25",
-    "@nextclaw/ncp": "0.5.5"
+    "@nextclaw/ncp": "0.5.5",
+    "@nextclaw/agent-chat": "0.1.10"
   },
   "devDependencies": {
     "@testing-library/react": "^16.3.0",

package/src/features/chat/components/chat-sidebar-session-item.tsx

@@ -7,7 +7,7 @@ import { Input } from '@/shared/components/ui/input';
 import { type SessionContextView } from '@/features/chat/utils/session-context.utils';
 import type { SessionRunStatus } from '@/features/chat/types/session-run-status.types';
 import { cn } from '@/shared/lib/utils';
-import { formatDateTime, t } from '@/shared/lib/i18n';
+import { formatDateShort, t } from '@/shared/lib/i18n';
 import { Check, GitBranch, Pencil, X } from 'lucide-react';
 
 type ChatSidebarSessionItemProps = {
@@ -115,20 +115,16 @@ function ChatSidebarSessionDisplayView({
   onOpenChildSessions,
   onStartEditing
 }: ChatSidebarSessionDisplayViewProps) {
-  const iconTone = active ? 'text-gray-700' : 'text-gray-500';
-  const normalizedAgentId = agentId?.trim() ?? '';
-  const shouldShowAgentAvatar = Boolean(
-    normalizedAgentId && normalizedAgentId.toLowerCase() !== 'main',
-  );
+  const trailingControlsClassName = childSessionCount > 0 && onOpenChildSessions ? 'pr-16' : 'pr-8';
 
   return (
     <div className="group/session relative">
       <button type="button" onClick={onSelect} className="w-full text-left">
-        <div className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-1.5 pr-8">
+        <div className={cn('grid grid-cols-[minmax(0,1fr)_auto] items-start gap-2', trailingControlsClassName)}>
           <span className="flex min-w-0 items-center gap-1.5">
-            {shouldShowAgentAvatar ? (
+            {agentId?.trim() && agentId.trim().toLowerCase() !== 'main' ? (
               <AgentAvatar
-                agentId={normalizedAgentId}
+                agentId={agentId}
                 displayName={agentLabel}
                 avatarUrl={agentAvatarUrl}
                 className="h-5 w-5 shrink-0"
@@ -149,26 +145,28 @@ function ChatSidebarSessionDisplayView({
             ) : null}
             {context.icon ? (
               <span className="inline-flex h-[1.125rem] w-[1.125rem] shrink-0 items-center justify-center">
-                <SessionContextIconNode icon={context.icon} className={iconTone} />
+                <SessionContextIconNode icon={context.icon} className={active ? 'text-gray-700' : 'text-gray-500'} />
               </span>
             ) : null}
           </span>
-          <span className="inline-flex shrink-0 items-center justify-end gap-1.5">
-            {showUnreadDot ? (
-              <span
-                aria-label={t('chatSessionUnread')}
-                className="h-2 w-2 rounded-full bg-primary"
-              />
-            ) : null}
-            <span className="inline-flex h-3.5 w-3.5 items-center justify-center">
-              {runStatus ? <SessionRunBadge status={runStatus} /> : null}
+          {runStatus ? (
+            <span className="inline-flex shrink-0 items-center justify-end gap-1.5 pt-0.5">
+              <SessionRunBadge status={runStatus} />
             </span>
-          </span>
+          ) : null}
         </div>
-        <div className="mt-0.5 text-[11px] text-gray-400 truncate">
-          <span>
-            {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount} · {formatDateTime(session.updatedAt)}
+        <div className="mt-1 flex items-center gap-2 text-[11px] text-gray-400">
+          <span className="min-w-0 truncate">
+            {agentLabel?.trim() ? `${agentLabel} · ` : ''}{session.messageCount}
           </span>
+          {showUnreadDot ? (
+            <span
+              aria-label={t('chatSessionUnread')}
+              className="ml-auto h-2 w-2 shrink-0 rounded-full bg-primary"
+            />
+          ) : (
+            <span className="ml-auto shrink-0">{formatDateShort(session.updatedAt)}</span>
+          )}
         </div>
       </button>
       {childSessionCount > 0 && onOpenChildSessions ? (
@@ -235,7 +233,7 @@ export function ChatSidebarSessionItem({
   return (
     <div
       className={cn(
-        'w-full rounded-xl px-3 py-2 text-left transition-all text-[13px]',
+        'w-full rounded-xl px-3 py-2.5 text-left transition-all text-[13px]',
         active
           ? 'bg-gray-200 text-gray-900 font-semibold shadow-sm'
           : 'text-gray-700 hover:bg-gray-200/60 hover:text-gray-900'

package/src/features/chat/components/conversation/chat-input-bar.container.tsx

@@ -6,6 +6,7 @@ import type { SessionSkillEntryView } from '@/shared/lib/api';
 import { buildChatSlashItems, buildModelStateHint, buildModelToolbarSelect, buildSkillPickerModel, buildThinkingToolbarSelect, type ChatModelRecord, type ChatSkillRecord, type ChatThinkingLevel } from '@/features/chat/utils/chat-input-bar.utils';
 import { usePresenter } from '@/features/chat/components/providers/chat-presenter.provider';
 import { useI18n } from '@/app/components/i18n-provider';
+import { useViewportLayout } from '@/app/hooks/use-viewport-layout';
 import { useChatInputStore } from '@/features/chat/stores/chat-input.store';
 import { chatRecentModelsManager, CHAT_RECENT_MODELS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-models.manager';
 import { chatRecentSkillsManager, CHAT_RECENT_SKILLS_MIN_OPTIONS } from '@/features/chat/managers/chat-recent-skills.manager';
@@ -203,6 +204,7 @@ function buildSkillPicker(params: { allSkillsLabel: string; presenter: ChatPrese
 export function ChatInputBarContainer() {
   const presenter = usePresenter();
   const { language } = useI18n();
+  const { isMobile } = useViewportLayout();
   const snapshot = useChatInputStore((state) => state.snapshot);
   const runtimeAvailability = useChatRuntimeAvailability();
   const [slashQuery, setSlashQuery] = useState<string | null>(null);
@@ -215,7 +217,9 @@ export function ChatInputBarContainer() {
   const isModelOptionsEmpty = isNcpChatModelOptionsEmpty(snapshot);
   const inputDisabled = isNcpChatComposerDisabled(snapshot);
   const attachmentSupported = typeof presenter.chatInputManager.addAttachments === 'function';
-  const textareaPlaceholder = isModelOptionsEmpty ? t('chatModelNoOptions') : t('chatInputPlaceholder');
+  const textareaPlaceholder = isModelOptionsEmpty
+    ? t('chatModelNoOptions')
+    : t(isMobile ? 'chatInputPlaceholderCompact' : 'chatInputPlaceholder');
   const slashItems = useMemo(
     () => buildChatSlashItems(skillRecords, slashQuery ?? '', labels.slashTexts, recentSkillValues),
     [labels.slashTexts, recentSkillValues, skillRecords, slashQuery]

package/src/features/chat/managers/ncp-chat-input.manager.test.ts

@@ -146,4 +146,33 @@ describe('NcpChatInputManager', () => {
     expect(streamActionsManager.sendMessage).not.toHaveBeenCalled();
     expect(sessionListManager.promoteRootDraftSessionRoute).not.toHaveBeenCalled();
   });
+
+  it('still attempts to send when provider metadata is stale or the session type is marked unavailable', async () => {
+    useChatInputStore.setState({
+      snapshot: {
+        ...useChatInputStore.getState().snapshot,
+        isProviderStateResolved: true,
+        modelOptions: [],
+        sessionTypeUnavailable: true,
+      },
+    });
+    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).toHaveBeenCalledTimes(1);
+    expect(sessionListManager.promoteRootDraftSessionRoute).toHaveBeenCalledWith('current-route-session');
+  });
 });

package/src/features/chat/utils/chat-input-bar.utils.test.ts

@@ -219,6 +219,32 @@ describe('buildModelToolbarSelect', () => {
     });
   });
 
+  it('keeps the full provider/model label in shared state while exposing a compact mobile label', () => {
+    const select = buildModelToolbarSelect({
+      modelOptions: [
+        {
+          value: 'anthropic/claude-sonnet-4-very-long-name',
+          modelLabel: 'claude-sonnet-4-very-long-name',
+          providerLabel: 'Anthropic'
+        }
+      ],
+      recentModelValues: [],
+      selectedModel: 'anthropic/claude-sonnet-4-very-long-name',
+      isModelOptionsLoading: false,
+      hasModelOptions: true,
+      onValueChange: vi.fn(),
+      texts: {
+        modelSelectPlaceholder: 'Select model',
+        modelNoOptionsLabel: 'No models',
+        recentModelsLabel: 'Recent',
+        allModelsLabel: 'All models'
+      }
+    });
+
+    expect(select.selectedLabel).toBe('Anthropic/claude-sonnet-4-very-long-name');
+    expect(select.options[0]?.label).toBe('Anthropic/claude-sonnet-4-very-long-name');
+  });
+
   it('groups recent models ahead of the remaining catalog', () => {
     const select = buildModelToolbarSelect({
       modelOptions: [

package/src/features/chat/utils/chat-input-toolbar.utils.ts

@@ -52,7 +52,9 @@ export function buildModelStateHint(params: {
   };
 }
 
-export function buildModelToolbarSelect(params: {
+export function buildModelToolbarSelect({
+  modelOptions, recentModelValues, selectedModel, isModelOptionsLoading, hasModelOptions, onValueChange, texts,
+}: {
   modelOptions: ChatModelRecord[];
   recentModelValues?: string[];
   selectedModel: string;
@@ -67,22 +69,21 @@ export function buildModelToolbarSelect(params: {
     | "allModelsLabel"
   >;
 }): ChatToolbarSelect {
-  const selectedModelOption = params.modelOptions.find(
-    (option) => option.value === params.selectedModel,
+  const selectedModelOption = modelOptions.find(
+    (option) => option.value === selectedModel,
   );
-  const fallbackModelOption = params.modelOptions[0];
-  const resolvedModelOption = selectedModelOption ?? fallbackModelOption;
-  const resolvedValue = params.hasModelOptions
+  const resolvedModelOption = selectedModelOption ?? modelOptions[0];
+  const resolvedValue = hasModelOptions
     ? resolvedModelOption?.value
     : undefined;
-  const recentValueSet = new Set(params.recentModelValues ?? []);
+  const recentValueSet = new Set(recentModelValues ?? []);
   const modelOptionMap = new Map(
-    params.modelOptions.map((option) => [option.value, option] as const),
+    modelOptions.map((option) => [option.value, option] as const),
   );
-  const recentOptions = (params.recentModelValues ?? [])
+  const recentOptions = (recentModelValues ?? [])
     .map((value) => modelOptionMap.get(value))
     .filter((option): option is ChatModelRecord => Boolean(option));
-  const remainingOptions = params.modelOptions.filter(
+  const remainingOptions = modelOptions.filter(
     (option) => !recentValueSet.has(option.value),
   );
   const optionGroups =
@@ -90,7 +91,7 @@ export function buildModelToolbarSelect(params: {
       ? [
           {
             key: "recent-models",
-            label: params.texts.recentModelsLabel,
+            label: texts.recentModelsLabel,
             options: recentOptions.map((option) => ({
               value: option.value,
               label: formatModelOptionLabel(option),
@@ -98,7 +99,7 @@ export function buildModelToolbarSelect(params: {
           },
           {
             key: "all-models",
-            label: params.texts.allModelsLabel,
+            label: texts.allModelsLabel,
             options: remainingOptions.map((option) => ({
               value: option.value,
               label: formatModelOptionLabel(option),
@@ -110,20 +111,20 @@ export function buildModelToolbarSelect(params: {
   return {
     key: "model",
     value: resolvedValue,
-    placeholder: params.texts.modelSelectPlaceholder,
+    placeholder: texts.modelSelectPlaceholder,
     selectedLabel: resolvedModelOption
       ? formatModelOptionLabel(resolvedModelOption)
       : undefined,
     icon: "sparkles",
-    options: params.modelOptions.map((option) => ({
+    options: modelOptions.map((option) => ({
       value: option.value,
       label: formatModelOptionLabel(option),
     })),
     groups: optionGroups,
-    disabled: !params.hasModelOptions,
-    loading: params.isModelOptionsLoading,
-    emptyLabel: params.texts.modelNoOptionsLabel,
-    onValueChange: params.onValueChange,
+    disabled: !hasModelOptions,
+    loading: isModelOptionsLoading,
+    emptyLabel: texts.modelNoOptionsLabel,
+    onValueChange,
   };
 }
 

package/src/features/chat/utils/ncp-chat-input-availability.utils.test.ts

@@ -41,7 +41,7 @@ function createSnapshot(
 }
 
 describe('ncp-chat-input-availability.utils', () => {
-  it('keeps the composer editable during cold start while send remains blocked', () => {
+  it('keeps the composer editable during cold start while runtime blocking still prevents send', () => {
     const snapshot = createSnapshot({
       isProviderStateResolved: false,
       modelOptions: [],
@@ -60,6 +60,22 @@ describe('ncp-chat-input-availability.utils', () => {
     ).toBe(true);
   });
 
+  it('does not block send only because model options have not loaded yet', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: false,
+      modelOptions: [],
+      sessionTypeUnavailable: false,
+    });
+
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: true,
+        isRuntimeBlocked: false,
+      })
+    ).toBe(false);
+  });
+
   it('marks model options as empty only after provider state resolves', () => {
     const loadingSnapshot = createSnapshot({
       isProviderStateResolved: false,
@@ -74,19 +90,35 @@ describe('ncp-chat-input-availability.utils', () => {
     expect(isNcpChatModelOptionsEmpty(emptySnapshot)).toBe(true);
   });
 
-  it('disables both editing and sending when the session type is unavailable', () => {
+  it('keeps editing and sending available when the selected session type reports unavailable', () => {
     const snapshot = createSnapshot({
       isProviderStateResolved: true,
       sessionTypeUnavailable: true,
     });
 
-    expect(isNcpChatComposerDisabled(snapshot)).toBe(true);
+    expect(isNcpChatComposerDisabled(snapshot)).toBe(false);
     expect(
       isNcpChatSendDisabled({
         snapshot,
         hasSendableDraft: true,
         isRuntimeBlocked: false,
       })
+    ).toBe(false);
+  });
+
+  it('blocks send when there is no sendable draft', () => {
+    const snapshot = createSnapshot({
+      isProviderStateResolved: true,
+      modelOptions: [],
+      sessionTypeUnavailable: true,
+    });
+
+    expect(
+      isNcpChatSendDisabled({
+        snapshot,
+        hasSendableDraft: false,
+        isRuntimeBlocked: false,
+      })
     ).toBe(true);
   });
 });

package/src/features/chat/utils/ncp-chat-input-availability.utils.ts

@@ -24,9 +24,9 @@ export function isNcpChatModelOptionsEmpty(
 }
 
 export function isNcpChatComposerDisabled(
-  snapshot: NcpChatInputAvailabilitySnapshot
+  _snapshot: NcpChatInputAvailabilitySnapshot
 ): boolean {
-  return snapshot.sessionTypeUnavailable;
+  return false;
 }
 
 export function isNcpChatSendDisabled(params: {
@@ -34,12 +34,10 @@ export function isNcpChatSendDisabled(params: {
   snapshot: NcpChatInputAvailabilitySnapshot;
   isRuntimeBlocked: boolean;
 }): boolean {
-  const { hasSendableDraft, isRuntimeBlocked, snapshot } = params;
+  const { hasSendableDraft, isRuntimeBlocked } = params;
 
   return (
     isRuntimeBlocked ||
-    !hasSendableDraft ||
-    !hasNcpChatModelOptions(snapshot) ||
-    snapshot.sessionTypeUnavailable
+    !hasSendableDraft
   );
 }

package/src/index.css

@@ -220,6 +220,16 @@
   --md-code-toolbar-bg: rgba(15, 23, 42, 0.56);
   --md-code-toolbar-border: rgba(148, 163, 184, 0.3);
   --md-code-text: #e5e7eb;
+  --md-code-muted: #9ca3af;
+  --md-code-keyword: #c084fc;
+  --md-code-title: #93c5fd;
+  --md-code-string: #86efac;
+  --md-code-number: #fbbf24;
+  --md-code-comment: #94a3b8;
+  --md-code-attr: #67e8f9;
+  --md-code-meta: #f0abfc;
+  --md-code-deletion: #fca5a5;
+  --md-code-addition: #86efac;
   --md-table-head-bg: rgba(148, 163, 184, 0.14);
 
   color: var(--md-text);
@@ -241,6 +251,16 @@
   --md-code-toolbar-bg: rgba(2, 6, 23, 0.88);
   --md-code-toolbar-border: rgba(191, 219, 254, 0.26);
   --md-code-text: #e2e8f0;
+  --md-code-muted: #a5b4fc;
+  --md-code-keyword: #d8b4fe;
+  --md-code-title: #bfdbfe;
+  --md-code-string: #bbf7d0;
+  --md-code-number: #fde68a;
+  --md-code-comment: #cbd5e1;
+  --md-code-attr: #a5f3fc;
+  --md-code-meta: #f5d0fe;
+  --md-code-deletion: #fecaca;
+  --md-code-addition: #bbf7d0;
   --md-table-head-bg: rgba(191, 219, 254, 0.16);
 }
 
@@ -394,9 +414,12 @@
 .chat-codeblock {
   margin: 0.2rem 0 0.1rem;
   border: 1px solid var(--md-code-toolbar-border);
-  border-radius: 0.78rem;
+  border-radius: 0.5rem;
   overflow: hidden;
-  background: var(--md-code-surface);
+  background:
+    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0)),
+    var(--md-code-surface);
+  box-shadow: 0 12px 34px rgba(15, 23, 42, 0.13);
 }
 
 .chat-codeblock-toolbar {
@@ -426,7 +449,7 @@
   font-weight: 600;
   color: var(--md-code-text);
   border: 1px solid var(--md-code-toolbar-border);
-  border-radius: 0.48rem;
+  border-radius: 0.42rem;
   padding: 0.18rem 0.36rem;
   background: transparent;
   cursor: pointer;
@@ -439,17 +462,86 @@
 
 .chat-codeblock pre {
   margin: 0;
-  padding: 0.75rem 0.82rem 0.8rem;
+  padding: 0.8rem 0.9rem 0.86rem;
   overflow-x: auto;
   background: transparent;
+  scrollbar-color: rgba(148, 163, 184, 0.48) transparent;
+  scrollbar-width: thin;
 }
 
 .chat-codeblock code {
   display: block;
   min-width: max-content;
   white-space: pre;
-  line-height: 1.58;
+  line-height: 1.62;
   color: var(--md-code-text);
+  font-size: 0.79rem;
+  font-variant-ligatures: none;
+  tab-size: 2;
+}
+
+.chat-codeblock .hljs-keyword,
+.chat-codeblock .hljs-built_in,
+.chat-codeblock .hljs-type,
+.chat-codeblock .hljs-literal,
+.chat-codeblock .hljs-selector-tag {
+  color: var(--md-code-keyword);
+}
+
+.chat-codeblock .hljs-title,
+.chat-codeblock .hljs-title.function_,
+.chat-codeblock .hljs-title.class_,
+.chat-codeblock .hljs-section,
+.chat-codeblock .hljs-selector-id {
+  color: var(--md-code-title);
+}
+
+.chat-codeblock .hljs-string,
+.chat-codeblock .hljs-regexp,
+.chat-codeblock .hljs-symbol,
+.chat-codeblock .hljs-bullet {
+  color: var(--md-code-string);
+}
+
+.chat-codeblock .hljs-number,
+.chat-codeblock .hljs-variable,
+.chat-codeblock .hljs-template-variable,
+.chat-codeblock .hljs-params {
+  color: var(--md-code-number);
+}
+
+.chat-codeblock .hljs-comment,
+.chat-codeblock .hljs-quote {
+  color: var(--md-code-comment);
+  font-style: italic;
+}
+
+.chat-codeblock .hljs-attr,
+.chat-codeblock .hljs-attribute,
+.chat-codeblock .hljs-property,
+.chat-codeblock .hljs-name,
+.chat-codeblock .hljs-selector-class {
+  color: var(--md-code-attr);
+}
+
+.chat-codeblock .hljs-meta,
+.chat-codeblock .hljs-doctag,
+.chat-codeblock .hljs-tag {
+  color: var(--md-code-meta);
+}
+
+.chat-codeblock .hljs-subst,
+.chat-codeblock .hljs-punctuation,
+.chat-codeblock .hljs-operator {
+  color: var(--md-code-muted);
+}
+
+.chat-codeblock .hljs-deletion {
+  color: var(--md-code-deletion);
+}
+
+.chat-codeblock .hljs-addition {
+  color: var(--md-code-addition);
 }
 
 .chat-table-wrap {

package/src/shared/components/common/agent-avatar.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import { AgentAvatar } from './agent-avatar';
+
+describe('AgentAvatar', () => {
+  it('uses the configured image for the main agent before fallback', () => {
+    render(
+      <AgentAvatar
+        agentId="main"
+        displayName="Main"
+        avatarUrl="https://example.com/main-avatar.png"
+      />,
+    );
+
+    const avatar = screen.getByRole('img', { name: 'Main' });
+    expect(avatar.getAttribute('src')).toBe('https://example.com/main-avatar.png');
+    expect(avatar.querySelector('svg')).toBeNull();
+  });
+
+  it('uses the bot icon for the main agent fallback', () => {
+    render(<AgentAvatar agentId="main" displayName="Main" />);
+
+    const avatar = screen.getByLabelText('Main');
+    expect(avatar.querySelector('svg')).toBeTruthy();
+    expect(avatar.textContent).not.toContain('M');
+  });
+
+  it('keeps letter fallback avatars for specialist agents', () => {
+    render(<AgentAvatar agentId="engineer" displayName="Engineer" />);
+
+    expect(screen.getByLabelText('Engineer').textContent).toBe('E');
+  });
+});