@nextclaw/ui 0.12.0 → 0.12.2

package/src/components/agents/AgentsPage.tsx

@@ -1,39 +1,29 @@
 import { useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { useCreateAgent, useDeleteAgent, useAgents } from '@/hooks/agents/useAgents';
+import { useCreateAgent, useDeleteAgent, useAgents, useUpdateAgent } from '@/hooks/agents/useAgents';
+import { useConfig, useConfigMeta } from '@/hooks/useConfig';
+import type { AgentProfileView } from '@/api/types';
+import {
+  AgentCreateDialog,
+  AgentEditDialog,
+  type AgentCreateFormState,
+  type AgentEditFormState
+} from '@/components/agents/AgentDialogs';
+import {
+  buildSessionTypeOptions,
+  normalizeSessionType,
+  resolveSessionTypeLabel
+} from '@/components/chat/useChatSessionTypeState';
 import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { AgentAvatar } from '@/components/common/AgentAvatar';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent } from '@/components/ui/card';
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle
-} from '@/components/ui/dialog';
-import { Input } from '@/components/ui/input';
+import { useNcpChatSessionTypes } from '@/hooks/use-ncp-chat-session-types';
 import { PageLayout } from '@/components/layout/page-layout';
 import { t } from '@/lib/i18n';
+import { buildProviderModelCatalog } from '@/lib/provider-models';
 import { cn } from '@/lib/utils';
-import { Bot, House, MessageCircle, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
-
-type CreateFormState = {
-  id: string;
-  displayName: string;
-  description: string;
-  avatar: string;
-  home: string;
-};
-
-const EMPTY_FORM: CreateFormState = {
-  id: '',
-  displayName: '',
-  description: '',
-  avatar: '',
-  home: ''
-};
+import { Bot, House, MessageCircle, Pencil, Plus, ShieldCheck, Sparkles, Trash2 } from 'lucide-react';
 
 const CARD_TONES = [
   {
@@ -63,10 +53,14 @@ function resolveAgentTone(index: number, builtIn: boolean) {
 export function AgentsPage() {
   const navigate = useNavigate();
   const agentsQuery = useAgents();
+  const configQuery = useConfig();
+  const configMetaQuery = useConfigMeta();
+  const sessionTypesQuery = useNcpChatSessionTypes();
   const createAgent = useCreateAgent();
+  const updateAgent = useUpdateAgent();
   const deleteAgent = useDeleteAgent();
   const [isCreateDialogOpen, setIsCreateDialogOpen] = useState(false);
-  const [form, setForm] = useState<CreateFormState>(EMPTY_FORM);
+  const [editingAgent, setEditingAgent] = useState<AgentProfileView | null>(null);
   const setSessionListSnapshot = useChatSessionListStore((state) => state.setSnapshot);
 
   const agents = useMemo(() => agentsQuery.data?.agents ?? [], [agentsQuery.data?.agents]);
@@ -79,21 +73,56 @@ export function AgentsPage() {
       ),
     [agents]
   );
+  const providerCatalog = useMemo(
+    () => buildProviderModelCatalog({ config: configQuery.data, meta: configMetaQuery.data, onlyConfigured: true }),
+    [configMetaQuery.data, configQuery.data]
+  );
+  const runtimeOptions = useMemo(
+    () => buildSessionTypeOptions(sessionTypesQuery.data?.options ?? []),
+    [sessionTypesQuery.data?.options]
+  );
+  const defaultRuntime = useMemo(
+    () => normalizeSessionType(sessionTypesQuery.data?.defaultType ?? 'native'),
+    [sessionTypesQuery.data?.defaultType]
+  );
+  const defaultRuntimeLabel = useMemo(
+    () => runtimeOptions.find((option) => option.value === defaultRuntime)?.label ?? resolveSessionTypeLabel(defaultRuntime),
+    [defaultRuntime, runtimeOptions]
+  );
 
-  const handleCreate = async () => {
+  const handleCreate = async (form: AgentCreateFormState) => {
     await createAgent.mutateAsync({
       data: {
         id: form.id,
         ...(form.displayName.trim() ? { displayName: form.displayName.trim() } : {}),
         ...(form.description.trim() ? { description: form.description.trim() } : {}),
         ...(form.avatar.trim() ? { avatar: form.avatar.trim() } : {}),
-        ...(form.home.trim() ? { home: form.home.trim() } : {})
+        ...(form.home.trim() ? { home: form.home.trim() } : {}),
+        ...(form.model.trim() ? { model: form.model.trim() } : {}),
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : {})
       }
     });
-    setForm(EMPTY_FORM);
     setIsCreateDialogOpen(false);
   };
 
+  const handleStartEdit = (agent: AgentProfileView) => {
+    setEditingAgent(agent);
+  };
+
+  const handleUpdate = async (agentId: string, form: AgentEditFormState) => {
+    await updateAgent.mutateAsync({
+      agentId,
+      data: {
+        displayName: form.displayName,
+        description: form.description,
+        avatar: form.avatar,
+        model: form.model,
+        ...(form.runtime.trim() ? { runtime: form.runtime.trim() } : { runtime: "" })
+      }
+    });
+    setEditingAgent(null);
+  };
+
   const startChatWithAgent = (agentId: string) => {
     setSessionListSnapshot({
       selectedAgentId: agentId,
@@ -178,6 +207,11 @@ export function AgentsPage() {
         ) : (
           sortedAgents.map((agent, index) => {
             const tone = resolveAgentTone(index, Boolean(agent.builtIn));
+            const runtimeValue = agent.runtime?.trim() || agent.engine?.trim() || '';
+            const runtimeLabel = runtimeValue
+              ? runtimeOptions.find((option) => option.value === normalizeSessionType(runtimeValue))?.label ??
+                resolveSessionTypeLabel(runtimeValue)
+              : defaultRuntimeLabel;
             return (
               <Card
                 key={agent.id}
@@ -223,6 +257,16 @@ export function AgentsPage() {
                   </p>
 
                   <div className="mt-auto flex flex-col gap-4">
+                    <div>
+                      <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
+                        <Sparkles className="h-3.5 w-3.5" />
+                        {t('agentsCardRuntimeLabel')}
+                      </div>
+                      <div className="mt-1.5 text-sm leading-6 text-[#475569]">
+                        {runtimeLabel}
+                      </div>
+                    </div>
+
                     <div className="border-t border-gray-100 pt-3">
                       <div className="flex items-center gap-2 text-[11px] font-semibold uppercase tracking-[0.18em] text-[#94a3b8]">
                         <House className="h-3.5 w-3.5" />
@@ -242,6 +286,16 @@ export function AgentsPage() {
                         <MessageCircle className="mr-2 h-4 w-4" />
                         {t('agentsCardStartChat')}
                       </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        className="h-8 rounded-xl px-3 text-xs text-[#7b8794] hover:bg-[#f3f4f6] hover:text-[#475569]"
+                        onClick={() => handleStartEdit(agent)}
+                        disabled={updateAgent.isPending}
+                      >
+                        <Pencil className="mr-1.5 h-3.5 w-3.5" />
+                        {t('agentsEditAction')}
+                      </Button>
                       {!agent.builtIn ? (
                         <Button
                           type="button"
@@ -263,91 +317,29 @@ export function AgentsPage() {
         )}
       </div>
 
-      <Dialog
+      <AgentCreateDialog
         open={isCreateDialogOpen}
+        pending={createAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
+        onOpenChange={setIsCreateDialogOpen}
+        onSubmit={handleCreate}
+      />
+
+      <AgentEditDialog
+        agent={editingAgent}
+        pending={updateAgent.isPending}
+        providerCatalog={providerCatalog}
+        runtimeOptions={runtimeOptions}
+        defaultRuntime={defaultRuntime}
         onOpenChange={(open) => {
-          setIsCreateDialogOpen(open);
-          if (!open && !createAgent.isPending) {
-            setForm(EMPTY_FORM);
+          if (!open && !updateAgent.isPending) {
+            setEditingAgent(null);
           }
         }}
-      >
-        <DialogContent className="overflow-hidden border-none bg-[linear-gradient(180deg,#fff9f1_0%,#ffffff_24%)] p-0 sm:max-w-xl">
-          <div className="border-b border-[#f0e2c8] px-6 py-6">
-            <DialogHeader className="text-left">
-              <DialogTitle>{t('agentsCreateDialogTitle')}</DialogTitle>
-              <DialogDescription>{t('agentsCreateDialogDescription')}</DialogDescription>
-            </DialogHeader>
-          </div>
-          <div className="space-y-4 px-6 py-6">
-            <div className="grid gap-4 md:grid-cols-2">
-              <Input
-                value={form.id}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, id: event.target.value }))
-                }
-                placeholder={t('agentsFormIdPlaceholder')}
-              />
-              <Input
-                value={form.displayName}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    displayName: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormNamePlaceholder')}
-              />
-              <Input
-                value={form.description}
-                onChange={(event) =>
-                  setForm((prev) => ({
-                    ...prev,
-                    description: event.target.value
-                  }))
-                }
-                placeholder={t('agentsFormDescriptionPlaceholder')}
-              />
-              <Input
-                value={form.avatar}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, avatar: event.target.value }))
-                }
-                placeholder={t('agentsFormAvatarPlaceholder')}
-              />
-              <Input
-                value={form.home}
-                onChange={(event) =>
-                  setForm((prev) => ({ ...prev, home: event.target.value }))
-                }
-                placeholder={t('agentsFormHomePlaceholder')}
-              />
-            </div>
-            <div className="rounded-2xl border border-[#efe3ca] bg-[#fff9ef] px-4 py-3 text-xs leading-6 text-[#7a6246]">
-              {t('agentsCreateDialogHint')}
-            </div>
-          </div>
-          <DialogFooter className="border-t border-[#f1e7d4] px-6 py-5">
-            <Button
-              type="button"
-              variant="ghost"
-              onClick={() => setIsCreateDialogOpen(false)}
-              disabled={createAgent.isPending}
-            >
-              {t('cancel')}
-            </Button>
-            <Button
-              type="button"
-              className="rounded-2xl bg-[#1f5c4d] px-5 text-white hover:bg-[#184d40]"
-              onClick={() => void handleCreate()}
-              disabled={createAgent.isPending || form.id.trim().length === 0}
-            >
-              <Plus className="mr-2 h-4 w-4" />
-              {t('agentsCreateAction')}
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
+        onSubmit={handleUpdate}
+      />
     </PageLayout>
   );
 }

package/src/components/chat/ChatConversationPanel.test.tsx

@@ -104,6 +104,8 @@ describe('ChatConversationPanel', () => {
         sessionTypeLabel: 'Codex',
         sessionKey: 'draft-session-1',
         sessionDisplayName: undefined,
+        agentId: null,
+        agentDisplayName: null,
         sessionProjectRoot: null,
         sessionProjectName: null,
         canDeleteSession: false,
@@ -146,6 +148,35 @@ describe('ChatConversationPanel', () => {
     expect(screen.getByText('project-alpha')).toBeTruthy();
     expect(screen.getByLabelText('More actions')).toBeTruthy();
   });
+
+  it('does not show a header agent marker for the main agent', () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        agentId: 'main',
+        agentDisplayName: 'Main',
+      }
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.queryByTestId('agent-avatar')).toBeNull();
+  });
+
+  it('shows only a lightweight avatar marker for a specialist agent', () => {
+    useChatThreadStore.setState({
+      snapshot: {
+        ...useChatThreadStore.getState().snapshot,
+        agentId: 'engineer',
+        agentDisplayName: 'Engineer',
+      }
+    });
+
+    render(<ChatConversationPanel />);
+
+    expect(screen.getByTestId('agent-avatar').textContent).toBe('engineer');
+    expect(screen.queryByText('Engineer')).toBeNull();
+  });
 });
 
 describe('ChatChildSessionPanel', () => {

package/src/components/chat/ChatConversationPanel.tsx

@@ -63,6 +63,10 @@ export function ChatConversationPanel() {
     snapshot.sessionDisplayName ||
     (snapshot.canDeleteSession && snapshot.sessionKey ? snapshot.sessionKey : null) ||
     t("chatSidebarNewTask");
+  const normalizedAgentId = snapshot.agentId?.trim() ?? "";
+  const shouldShowHeaderAgentAvatar =
+    normalizedAgentId.length > 0 &&
+    normalizedAgentId.toLowerCase() !== "main";
 
   const showWelcome =
     !snapshot.canDeleteSession &&
@@ -119,17 +123,14 @@ export function ChatConversationPanel() {
           )}
         >
           <div className="min-w-0 flex-1 flex items-center gap-2">
-            {snapshot.agentId ? (
-              <div className="inline-flex items-center gap-2 shrink-0 rounded-full border border-gray-200 bg-white/80 px-2 py-1">
+            {shouldShowHeaderAgentAvatar ? (
+              <div className="inline-flex shrink-0 items-center">
                 <AgentAvatar
-                  agentId={snapshot.agentId}
+                  agentId={normalizedAgentId}
                   displayName={snapshot.agentDisplayName}
                   avatarUrl={snapshot.agentAvatarUrl}
                   className="h-5 w-5"
                 />
-                <span className="max-w-[120px] truncate text-xs font-medium text-gray-700">
-                  {snapshot.agentDisplayName?.trim() || snapshot.agentId}
-                </span>
               </div>
             ) : null}
             <span className="text-sm font-medium text-gray-700 truncate">

package/src/components/chat/ChatSidebar.test.tsx

@@ -12,6 +12,7 @@ const mocks = vi.hoisted(() => ({
   selectSession: vi.fn(),
   docOpen: vi.fn(),
   updateNcpSession: vi.fn(),
+  agents: [] as Array<{ id: string; displayName?: string; avatarUrl?: string | null }>,
   sessionItems: [] as NcpSessionListItemView[],
   isLoading: false
 }));
@@ -74,7 +75,7 @@ vi.mock('@/components/common/StatusBadge', () => ({
 vi.mock('@/hooks/agents/useAgents', () => ({
   useAgents: () => ({
     data: {
-      agents: []
+      agents: mocks.agents
     }
   })
 }));
@@ -106,6 +107,7 @@ describe('ChatSidebar', () => {
     mocks.docOpen.mockReset();
     mocks.updateNcpSession.mockReset();
     mocks.updateNcpSession.mockResolvedValue({});
+    mocks.agents = [];
     mocks.sessionItems = [];
     mocks.isLoading = false;
 
@@ -254,6 +256,44 @@ describe('ChatSidebar', () => {
     expect(screen.queryByText('Native')).toBeNull();
   });
 
+  it('hides the sidebar agent avatar for the main agent but keeps specialist avatars', () => {
+    mocks.agents = [
+      { id: 'main', displayName: 'Main' },
+      { id: 'engineer', displayName: 'Engineer' }
+    ];
+    mocks.sessionItems = [
+      createSessionItem({
+        key: 'session:main-1',
+        createdAt: '2026-03-19T09:00:00.000Z',
+        updatedAt: '2026-03-19T09:05:00.000Z',
+        label: 'Main Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1,
+        agentId: 'main'
+      }),
+      createSessionItem({
+        key: 'session:engineer-1',
+        createdAt: '2026-03-19T10:00:00.000Z',
+        updatedAt: '2026-03-19T10:05:00.000Z',
+        label: 'Engineer Task',
+        sessionType: 'native',
+        sessionTypeMutable: false,
+        messageCount: 1,
+        agentId: 'engineer'
+      })
+    ];
+
+    render(
+      <MemoryRouter>
+        <ChatSidebar />
+      </MemoryRouter>
+    );
+
+    expect(screen.queryByLabelText('Main')).toBeNull();
+    expect(screen.getByLabelText('Engineer')).not.toBeNull();
+  });
+
   it('edits the session label inline and saves through the ncp session api by default', async () => {
     mocks.sessionItems = [
       createSessionItem({

package/src/components/chat/ChatWelcome.test.tsx

@@ -1,9 +1,10 @@
-import { fireEvent, render, screen } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import { fireEvent } from '@testing-library/react';
 import { describe, expect, it, vi } from 'vitest';
 import { ChatWelcome } from '@/components/chat/ChatWelcome';
 
 describe('ChatWelcome', () => {
-  it('renders draft agent choices and allows switching', () => {
+  it('renders a lightweight draft agent select and allows switching', () => {
     const onCreateSession = vi.fn();
     const onSelectAgent = vi.fn();
 
@@ -19,7 +20,11 @@ describe('ChatWelcome', () => {
       />
     );
 
+    const trigger = screen.getByRole('combobox', { name: 'Draft agent' });
+    fireEvent.keyDown(trigger, { key: 'ArrowDown' });
     fireEvent.click(screen.getByText('Engineer'));
+
     expect(onSelectAgent).toHaveBeenCalledWith('engineer');
+    expect(screen.queryByText('Current Agent:')).toBeNull();
   });
 });

package/src/components/chat/ChatWelcome.tsx

@@ -1,5 +1,6 @@
 import type { AgentProfileView } from '@/api/types';
 import { AgentAvatar } from '@/components/common/AgentAvatar';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 import { t } from '@/lib/i18n';
 import { Bot, BrainCircuit, AlarmClock, MessageCircle } from 'lucide-react';
 
@@ -43,43 +44,45 @@ export function ChatWelcome({ onCreateSession, agents, selectedAgentId, onSelect
         <h2 className="text-xl font-semibold text-gray-900 mb-2">{t('chatWelcomeTitle')}</h2>
         <p className="text-sm text-gray-500 mb-8">{t('chatWelcomeSubtitle')}</p>
 
-        <div className="mb-8 rounded-2xl border border-gray-200 bg-white/90 p-4 text-left shadow-card">
-          <div className="text-sm font-semibold text-gray-900">{t('chatDraftAgentTitle')}</div>
-          <p className="mt-1 text-xs text-gray-500">{t('chatDraftAgentDescription')}</p>
-          <div className="mt-4 flex flex-wrap gap-2">
-            {agents.map((agent) => {
-              const active = agent.id === selectedAgentId;
-              return (
-                <button
-                  key={agent.id}
-                  type="button"
-                  onClick={() => onSelectAgent(agent.id)}
-                  className={[
-                    'inline-flex items-center gap-2 rounded-full border px-3 py-2 text-left transition-colors',
-                    active
-                      ? 'border-gray-900 bg-gray-900 text-white'
-                      : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
-                  ].join(' ')}
-                >
+        <div className="mb-6 flex items-center justify-center gap-2.5">
+          <span className="text-[13px] font-medium text-gray-500">
+            {t('chatDraftAgentTitle')}
+          </span>
+          <Select value={selectedAgentId} onValueChange={onSelectAgent}>
+            <SelectTrigger
+              aria-label={t('chatDraftAgentTitle')}
+              className="h-auto w-auto gap-1 rounded-full border-0 bg-transparent px-1.5 py-1 text-gray-500 shadow-none hover:bg-white/70 hover:text-gray-800 focus:ring-0"
+            >
+              <span className="sr-only">{t('chatDraftAgentTitle')}</span>
+              <div className="flex items-center gap-1.5">
+                {selectedAgent ? (
                   <AgentAvatar
-                    agentId={agent.id}
-                    displayName={agent.displayName}
-                    avatarUrl={agent.avatarUrl}
-                    className="h-6 w-6"
+                    agentId={selectedAgent.id}
+                    displayName={selectedAgent.displayName}
+                    avatarUrl={selectedAgent.avatarUrl}
+                    className="h-7 w-7 shrink-0"
                   />
-                  <span className="text-xs font-medium">
-                    {agent.displayName?.trim() || agent.id}
-                  </span>
-                </button>
-              );
-            })}
-          </div>
-          {selectedAgent ? (
-            <div className="mt-4 flex items-center gap-2 text-xs text-gray-500">
-              <span>{t('chatDraftAgentCurrent')}:</span>
-              <span className="font-medium text-gray-700">{selectedAgent.displayName?.trim() || selectedAgent.id}</span>
-            </div>
-          ) : null}
+                ) : null}
+              </div>
+            </SelectTrigger>
+            <SelectContent className="rounded-xl border-gray-200/80 shadow-lg">
+              {agents.map((agent) => (
+                <SelectItem key={agent.id} value={agent.id} className="rounded-lg pr-10">
+                  <div className="flex min-w-0 items-center gap-2">
+                    <AgentAvatar
+                      agentId={agent.id}
+                      displayName={agent.displayName}
+                      avatarUrl={agent.avatarUrl}
+                      className="h-5 w-5 shrink-0"
+                    />
+                    <span className="truncate text-sm font-medium text-gray-700">
+                      {agent.displayName?.trim() || agent.id}
+                    </span>
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
         </div>
 
         {/* Capability cards */}

package/src/components/chat/chat-page-runtime.test.ts

@@ -6,6 +6,7 @@ import {
   resolveSelectedModelValue,
   resolveSelectedThinkingLevelValue
 } from '@/components/chat/chat-session-preference-governance';
+import { shouldRefreshDraftSessionId } from '@/components/chat/ncp/NcpChatPage';
 
 const modelOptions = [
   {
@@ -154,6 +155,35 @@ describe('resolveSelectedModelValue', () => {
   });
 });
 
+describe('shouldRefreshDraftSessionId', () => {
+  it('does not replace the initial draft session id on first mount', () => {
+    expect(
+      shouldRefreshDraftSessionId({
+        previousSelectedSessionKey: undefined,
+        nextSelectedSessionKey: null
+      })
+    ).toBe(false);
+  });
+
+  it('replaces the draft session id after leaving an existing session', () => {
+    expect(
+      shouldRefreshDraftSessionId({
+        previousSelectedSessionKey: 'session-1',
+        nextSelectedSessionKey: null
+      })
+    ).toBe(true);
+  });
+
+  it('does not replace the draft session id while staying on the same session', () => {
+    expect(
+      shouldRefreshDraftSessionId({
+        previousSelectedSessionKey: 'session-1',
+        nextSelectedSessionKey: 'session-1'
+      })
+    ).toBe(false);
+  });
+});
+
 describe('resolveRecentSessionPreferredModel', () => {
   it('returns the most recent preferred model from the same runtime', () => {
     const sessions = [

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

@@ -50,6 +50,10 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
   } = props;
 
   const iconTone = active ? 'text-gray-700' : 'text-gray-500';
+  const normalizedAgentId = agentId?.trim() ?? '';
+  const shouldShowAgentAvatar = Boolean(
+    normalizedAgentId && normalizedAgentId.toLowerCase() !== 'main',
+  );
 
   return (
     <div
@@ -112,9 +116,9 @@ export function ChatSidebarSessionItem(props: ChatSidebarSessionItemProps) {
           <button type="button" onClick={onSelect} className="w-full text-left">
             <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5 pr-8">
               <span className="flex min-w-0 items-center gap-1.5">
-                {agentId ? (
+                {shouldShowAgentAvatar ? (
                   <AgentAvatar
-                    agentId={agentId}
+                    agentId={normalizedAgentId}
                     displayName={agentLabel}
                     avatarUrl={agentAvatarUrl}
                     className="h-5 w-5 shrink-0"

package/src/components/chat/ncp/NcpChatPage.tsx

@@ -57,6 +57,7 @@ export function buildNcpSendMetadata(payload: {
   }
   if (payload.sessionType?.trim()) {
     metadata.session_type = payload.sessionType.trim();
+    metadata.runtime = payload.sessionType.trim();
   }
   if (payload.agentId?.trim()) {
     metadata.agent_id = payload.agentId.trim();
@@ -78,6 +79,17 @@ export function buildNcpSendMetadata(payload: {
   return metadata;
 }
 
+export function shouldRefreshDraftSessionId(params: {
+  previousSelectedSessionKey: string | null | undefined;
+  nextSelectedSessionKey: string | null;
+}): boolean {
+  return (
+    params.nextSelectedSessionKey === null &&
+    params.previousSelectedSessionKey !== undefined &&
+    params.previousSelectedSessionKey !== null
+  );
+}
+
 export function NcpChatPage({ view }: ChatPageProps) {
   const [presenter] = useState(() => new NcpChatPresenter());
   const [draftSessionId, setDraftSessionId] = useState(() =>
@@ -111,6 +123,9 @@ export function NcpChatPage({ view }: ChatPageProps) {
   }>();
   const threadRef = useRef<HTMLDivElement | null>(null);
   const selectedSessionKeyRef = useRef<string | null>(selectedSessionKey);
+  const previousSelectedSessionKeyRef = useRef<string | null | undefined>(
+    undefined,
+  );
   const routeSessionKey = useMemo(
     () => parseSessionKeyFromRoute(routeSessionIdParam),
     [routeSessionIdParam],
@@ -153,11 +168,18 @@ export function NcpChatPage({ view }: ChatPageProps) {
   }, [draftSessionId, presenter]);
 
   useEffect(() => {
-    if (selectedSessionKey === null) {
+    if (
+      shouldRefreshDraftSessionId({
+        previousSelectedSessionKey:
+          previousSelectedSessionKeyRef.current,
+        nextSelectedSessionKey: selectedSessionKey,
+      })
+    ) {
       const nextDraftSessionId = createNcpSessionId();
       setDraftSessionId(nextDraftSessionId);
       presenter.setDraftSessionId(nextDraftSessionId);
     }
+    previousSelectedSessionKeyRef.current = selectedSessionKey;
   }, [presenter, selectedSessionKey]);
 
   const effectiveSessionProjectRoot = hasSessionProjectRootOverride