@nextclaw/ui 0.6.10 → 0.6.12

package/src/components/chat/ChatSidebar.tsx

@@ -5,27 +5,17 @@ import { BrandHeader } from '@/components/common/BrandHeader';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 import { SessionRunBadge } from '@/components/common/SessionRunBadge';
+import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatRunStatusStore } from '@/components/chat/stores/chat-run-status.store';
+import { useChatSessionListStore } from '@/components/chat/stores/chat-session-list.store';
 import { cn } from '@/lib/utils';
 import { LANGUAGE_OPTIONS, formatDateTime, t, type I18nLanguage } from '@/lib/i18n';
-import type { SessionRunStatus } from '@/lib/session-run-status';
 import { THEME_OPTIONS, type UiTheme } from '@/lib/theme';
 import { useI18n } from '@/components/providers/I18nProvider';
 import { useTheme } from '@/components/providers/ThemeProvider';
 import { NavLink } from 'react-router-dom';
 import { AlarmClock, BrainCircuit, Languages, MessageSquareText, Palette, Plus, Search, Settings } from 'lucide-react';
 
-type ChatSidebarProps = {
-  sessions: SessionEntryView[];
-  sessionRunStatusByKey: ReadonlyMap<string, SessionRunStatus>;
-  selectedSessionKey: string | null;
-  onSelectSession: (key: string) => void;
-  onCreateSession: () => void;
-  sessionTitle: (session: SessionEntryView) => string;
-  isLoading: boolean;
-  query: string;
-  onQueryChange: (value: string) => void;
-};
-
 type DateGroup = {
   label: string;
   sessions: SessionEntryView[];
@@ -63,18 +53,29 @@ function groupSessionsByDate(sessions: SessionEntryView[]): DateGroup[] {
   return groups;
 }
 
+function sessionTitle(session: SessionEntryView): string {
+  if (session.label && session.label.trim()) {
+    return session.label.trim();
+  }
+  const chunks = session.key.split(':');
+  return chunks[chunks.length - 1] || session.key;
+}
+
 const navItems = [
   { target: '/cron', label: () => t('chatSidebarScheduledTasks'), icon: AlarmClock },
   { target: '/skills', label: () => t('chatSidebarSkills'), icon: BrainCircuit },
 ];
 
-export function ChatSidebar(props: ChatSidebarProps) {
+export function ChatSidebar() {
+  const presenter = usePresenter();
+  const listSnapshot = useChatSessionListStore((state) => state.snapshot);
+  const runSnapshot = useChatRunStatusStore((state) => state.snapshot);
   const { language, setLanguage } = useI18n();
   const { theme, setTheme } = useTheme();
   const currentThemeLabel = t(THEME_OPTIONS.find((o) => o.value === theme)?.labelKey ?? 'themeWarm');
   const currentLanguageLabel = LANGUAGE_OPTIONS.find((o) => o.value === language)?.label ?? language;
 
-  const groups = useMemo(() => groupSessionsByDate(props.sessions), [props.sessions]);
+  const groups = useMemo(() => groupSessionsByDate(listSnapshot.sessions), [listSnapshot.sessions]);
 
   const handleLanguageSwitch = (nextLang: I18nLanguage) => {
     if (language === nextLang) return;
@@ -84,33 +85,29 @@ export function ChatSidebar(props: ChatSidebarProps) {
 
   return (
     <aside className="w-[280px] shrink-0 flex flex-col h-full bg-secondary border-r border-gray-200/60">
-      {/* Logo */}
       <div className="px-5 pt-5 pb-3">
         <BrandHeader />
       </div>
 
-      {/* New Task button */}
       <div className="px-4 pb-3">
-        <Button variant="primary" className="w-full rounded-xl" onClick={props.onCreateSession}>
+        <Button variant="primary" className="w-full rounded-xl" onClick={presenter.chatSessionListManager.createSession}>
           <Plus className="h-4 w-4 mr-2" />
           {t('chatSidebarNewTask')}
         </Button>
       </div>
 
-      {/* Search */}
       <div className="px-4 pb-3">
         <div className="relative">
           <Search className="h-3.5 w-3.5 absolute left-3 top-2.5 text-gray-400" />
           <Input
-            value={props.query}
-            onChange={(e) => props.onQueryChange(e.target.value)}
+            value={listSnapshot.query}
+            onChange={(event) => presenter.chatSessionListManager.setQuery(event.target.value)}
             placeholder={t('chatSidebarSearchPlaceholder')}
             className="pl-8 h-9 rounded-lg text-xs"
           />
         </div>
       </div>
 
-      {/* Navigation shortcuts */}
       <div className="px-3 pb-2">
         <ul className="space-y-0.5">
           {navItems.map((item) => {
@@ -142,12 +139,10 @@ export function ChatSidebar(props: ChatSidebarProps) {
         </ul>
       </div>
 
-      {/* Divider */}
       <div className="mx-4 border-t border-gray-200/60" />
 
-      {/* Session history */}
       <div className="flex-1 min-h-0 overflow-y-auto custom-scrollbar px-3 py-2">
-        {props.isLoading ? (
+        {listSnapshot.isLoading ? (
           <div className="text-xs text-gray-500 p-3">{t('sessionsLoading')}</div>
         ) : groups.length === 0 ? (
           <div className="p-4 text-center">
@@ -163,12 +158,12 @@ export function ChatSidebar(props: ChatSidebarProps) {
                 </div>
                 <div className="space-y-0.5">
                   {group.sessions.map((session) => {
-                    const active = props.selectedSessionKey === session.key;
-                    const runStatus = props.sessionRunStatusByKey.get(session.key);
+                    const active = listSnapshot.selectedSessionKey === session.key;
+                    const runStatus = runSnapshot.sessionRunStatusByKey.get(session.key);
                     return (
                       <button
                         key={session.key}
-                        onClick={() => props.onSelectSession(session.key)}
+                        onClick={() => presenter.chatSessionListManager.selectSession(session.key)}
                         className={cn(
                           'w-full rounded-xl px-3 py-2 text-left transition-all text-[13px]',
                           active
@@ -177,7 +172,7 @@ export function ChatSidebar(props: ChatSidebarProps) {
                         )}
                       >
                         <div className="grid grid-cols-[minmax(0,1fr)_0.875rem] items-center gap-1.5">
-                          <span className="truncate font-medium">{props.sessionTitle(session)}</span>
+                          <span className="truncate font-medium">{sessionTitle(session)}</span>
                           <span className="inline-flex h-3.5 w-3.5 shrink-0 items-center justify-center">
                             {runStatus ? <SessionRunBadge status={runStatus} /> : null}
                           </span>
@@ -195,7 +190,6 @@ export function ChatSidebar(props: ChatSidebarProps) {
         )}
       </div>
 
-      {/* Settings footer */}
       <div className="px-3 py-3 border-t border-gray-200/60 space-y-0.5">
         <NavLink
           to="/settings"
@@ -213,7 +207,7 @@ export function ChatSidebar(props: ChatSidebarProps) {
             </>
           )}
         </NavLink>
-        <Select value={theme} onValueChange={(v) => setTheme(v as UiTheme)}>
+        <Select value={theme} onValueChange={(value) => setTheme(value as UiTheme)}>
           <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
             <div className="flex items-center gap-2.5 min-w-0">
               <Palette className="h-4 w-4 text-gray-400" />
@@ -222,12 +216,12 @@ export function ChatSidebar(props: ChatSidebarProps) {
             <span className="ml-auto text-[11px] text-gray-500">{currentThemeLabel}</span>
           </SelectTrigger>
           <SelectContent>
-            {THEME_OPTIONS.map((o) => (
-              <SelectItem key={o.value} value={o.value} className="text-xs">{t(o.labelKey)}</SelectItem>
+            {THEME_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value} className="text-xs">{t(option.labelKey)}</SelectItem>
             ))}
           </SelectContent>
         </Select>
-        <Select value={language} onValueChange={(v) => handleLanguageSwitch(v as I18nLanguage)}>
+        <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
           <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2 text-[13px] font-medium text-gray-600 hover:bg-gray-200/60 focus:ring-0">
             <div className="flex items-center gap-2.5 min-w-0">
               <Languages className="h-4 w-4 text-gray-400" />
@@ -236,8 +230,8 @@ export function ChatSidebar(props: ChatSidebarProps) {
             <span className="ml-auto text-[11px] text-gray-500">{currentLanguageLabel}</span>
           </SelectTrigger>
           <SelectContent>
-            {LANGUAGE_OPTIONS.map((o) => (
-              <SelectItem key={o.value} value={o.value} className="text-xs">{o.label}</SelectItem>
+            {LANGUAGE_OPTIONS.map((option) => (
+              <SelectItem key={option.value} value={option.value} className="text-xs">{option.label}</SelectItem>
             ))}
           </SelectContent>
         </Select>

package/src/components/chat/ChatThread.tsx

@@ -1,13 +1,9 @@
 import { useCallback, useEffect, useMemo, useState, type ReactNode } from 'react';
-import type { SessionEventView, SessionMessageView } from '@/api/types';
+import { type UiMessage, type UiMessageRole } from '@nextclaw/agent-chat';
 import { cn } from '@/lib/utils';
 import {
-  buildChatTimeline,
-  extractMessageText,
-  extractToolCards,
-  normalizeChatRole,
-  type ChatRole,
-  type ChatTimelineAssistantTurnItem,
+  stringifyUnknown,
+  summarizeToolArgs,
   type ToolCard
 } from '@/lib/chat-message';
 import { formatDateTime, t } from '@/lib/i18n';
@@ -16,7 +12,7 @@ import remarkGfm from 'remark-gfm';
 import { Bot, Check, Clock3, Copy, FileSearch, Globe, Search, SendHorizontal, Terminal, User, Wrench } from 'lucide-react';
 
 type ChatThreadProps = {
-  events: SessionEventView[];
+  uiMessages: UiMessage[];
   isSending: boolean;
   className?: string;
 };
@@ -26,9 +22,7 @@ const TOOL_OUTPUT_PREVIEW_MAX = 220;
 const CODE_LANGUAGE_REGEX = /language-([a-z0-9-]+)/i;
 const SAFE_LINK_PROTOCOLS = new Set(['http:', 'https:', 'mailto:', 'tel:']);
 
-type WorkflowToolCard = ToolCard & {
-  _workflowStep?: number;
-};
+type WorkflowToolCard = ToolCard;
 
 function trimMarkdown(value: string): string {
   if (value.length <= MARKDOWN_MAX_CHARS) {
@@ -122,7 +116,7 @@ function MarkdownCodeBlock({ className, children }: { className?: string; childr
   );
 }
 
-function roleTitle(role: ChatRole): string {
+function roleTitle(role: UiMessageRole): string {
   if (role === 'user') return t('chatRoleUser');
   if (role === 'assistant') return t('chatRoleAssistant');
   if (role === 'tool') return t('chatRoleTool');
@@ -153,7 +147,7 @@ function renderToolIcon(name: string) {
   return <Wrench className="h-3.5 w-3.5" />;
 }
 
-function RoleAvatar({ role }: { role: ChatRole }) {
+function RoleAvatar({ role }: { role: UiMessageRole }) {
   if (role === 'user') {
     return (
       <div className="h-8 w-8 rounded-full bg-primary text-white flex items-center justify-center shadow-sm">
@@ -175,7 +169,7 @@ function RoleAvatar({ role }: { role: ChatRole }) {
   );
 }
 
-function MarkdownBlock({ text, role }: { text: string; role: ChatRole }) {
+function MarkdownBlock({ text, role }: { text: string; role: UiMessageRole }) {
   const isUser = role === 'user';
   const markdownComponents = useMemo<Components>(() => ({
     a: ({ href, children, ...props }) => {
@@ -261,9 +255,6 @@ function ToolCardView({ card }: { card: WorkflowToolCard }) {
       <div className="flex flex-wrap items-center gap-2 text-xs text-amber-800 font-semibold">
         {renderToolIcon(card.name)}
         <span>{title}</span>
-        {typeof card._workflowStep === 'number' && (
-          <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-700">#{card._workflowStep + 1}</span>
-        )}
         <span className="font-mono text-[11px] text-amber-900/80">{card.name}</span>
       </div>
       {card.detail && (
@@ -291,35 +282,6 @@ function ToolCardView({ card }: { card: WorkflowToolCard }) {
   );
 }
 
-function ToolWorkflowCard({ cards }: { cards: WorkflowToolCard[] }) {
-  const chain = cards
-    .map((card) => card.name.trim())
-    .filter((name) => name.length > 0)
-    .join(' \u2192 ');
-
-  return (
-    <details className="rounded-xl border border-amber-200/80 bg-amber-50/50 p-3">
-      <summary className="cursor-pointer list-none">
-        <div className="flex flex-wrap items-center gap-2 text-xs text-amber-800 font-semibold">
-          <Wrench className="h-3.5 w-3.5" />
-          <span>{t('chatToolWorkflow')}</span>
-          <span className="font-mono text-[11px] text-amber-900/90">{chain || 'tool'}</span>
-          <span className="rounded-md bg-amber-100 px-1.5 py-0.5 text-[10px] text-amber-700">{cards.length}</span>
-          <span className="text-[11px] font-normal text-amber-700/90">{t('chatToolWorkflowDetails')}</span>
-        </div>
-      </summary>
-      <div className="mt-3 space-y-2">
-        {cards.map((card, index) => (
-          <ToolCardView
-            key={`${card.kind}-${card.callId ?? card.name}-${index}`}
-            card={{ ...card, _workflowStep: index }}
-          />
-        ))}
-      </div>
-    </details>
-  );
-}
-
 function ReasoningBlock({ reasoning, isUser }: { reasoning: string; isUser: boolean }) {
   return (
     <details className="mt-3">
@@ -333,18 +295,65 @@ function ReasoningBlock({ reasoning, isUser }: { reasoning: string; isUser: bool
   );
 }
 
-function MessageCard({ message }: { message: SessionMessageView }) {
-  const role = normalizeChatRole(message);
-  const primaryText = extractMessageText(message.content).trim();
-  const primaryReasoning = typeof message.reasoning_content === 'string' ? message.reasoning_content.trim() : '';
-  const toolCards = extractToolCards(message);
+function resolveUiMessageTimestamp(message: UiMessage): string {
+  const candidate = message.meta?.timestamp;
+  if (candidate && Number.isFinite(Date.parse(candidate))) {
+    return candidate;
+  }
+  return new Date().toISOString();
+}
+
+function MessageCard({ message }: { message: UiMessage }) {
+  const role = message.role;
   const isUser = role === 'user';
-  const shouldRenderPrimaryText = Boolean(primaryText) && !(role === 'tool' && toolCards.length > 0);
+  const renderedParts = message.parts
+    .map((part, index) => {
+      if (part.type === 'text') {
+        const text = part.text.trim();
+        if (!text) {
+          return null;
+        }
+        return <MarkdownBlock key={`text-${index}`} text={text} role={role} />;
+      }
+      if (part.type === 'reasoning') {
+        const reasoning = part.reasoning.trim();
+        if (!reasoning) {
+          return null;
+        }
+        return <ReasoningBlock key={`reasoning-${index}`} reasoning={reasoning} isUser={isUser} />;
+      }
+      if (part.type === 'tool-invocation') {
+        const invocation = part.toolInvocation;
+        const detail = summarizeToolArgs(invocation.parsedArgs ?? invocation.args);
+        const rawResult = typeof invocation.error === 'string' && invocation.error.trim()
+          ? invocation.error.trim()
+          : invocation.result != null
+            ? stringifyUnknown(invocation.result).trim()
+            : '';
+        const hasResult =
+          invocation.status === 'result' || invocation.status === 'error' || invocation.status === 'cancelled';
+        const card: ToolCard = {
+          kind: invocation.status === 'result' && !invocation.args ? 'result' : 'call',
+          name: invocation.toolName,
+          detail,
+          text: rawResult || undefined,
+          callId: invocation.toolCallId || undefined,
+          hasResult
+        };
+        return (
+          <div key={`tool-${invocation.toolCallId || index}`} className="mt-0.5">
+            <ToolCardView card={card} />
+          </div>
+        );
+      }
+      return null;
+    })
+    .filter((node) => node !== null);
 
   return (
     <div
       className={cn(
-        'rounded-2xl border px-4 py-3 shadow-sm',
+        'inline-block w-fit max-w-full rounded-2xl border px-4 py-3 shadow-sm',
         isUser
           ? 'bg-primary text-white border-primary'
           : role === 'assistant'
@@ -352,94 +361,27 @@ function MessageCard({ message }: { message: SessionMessageView }) {
             : 'bg-orange-50/70 text-gray-900 border-orange-200/80'
       )}
     >
-      {shouldRenderPrimaryText && <MarkdownBlock text={primaryText} role={role} />}
-      {primaryReasoning && <ReasoningBlock reasoning={primaryReasoning} isUser={isUser} />}
-      {toolCards.length > 0 && (
-        <div className={cn('space-y-2', (shouldRenderPrimaryText || primaryReasoning) && 'mt-3')}>
-          {toolCards.length > 1 ? (
-            <ToolWorkflowCard cards={toolCards} />
-          ) : (
-            toolCards.map((card, index) => (
-              <ToolCardView
-                key={`${card.kind}-${card.name}-${card.callId ?? index}`}
-                card={{ ...card }}
-              />
-            ))
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
-
-function AssistantTurnCard({ item }: { item: ChatTimelineAssistantTurnItem }) {
-  const renderedSegments: ReactNode[] = [];
-  let index = 0;
-  while (index < item.segments.length) {
-    const segment = item.segments[index];
-    if (!segment) {
-      index += 1;
-      continue;
-    }
-    if (segment.kind === 'assistant_message') {
-      const hasText = Boolean(segment.text);
-      const hasReasoning = Boolean(segment.reasoning);
-      if (hasText || hasReasoning) {
-        renderedSegments.push(
-          <div key={`${segment.key}-${index}`}>
-            {hasText && <MarkdownBlock text={segment.text} role="assistant" />}
-            {hasReasoning && <ReasoningBlock reasoning={segment.reasoning} isUser={false} />}
-          </div>
-        );
-      }
-      index += 1;
-      continue;
-    }
-
-    const groupedCards: WorkflowToolCard[] = [];
-    let cursor = index;
-    while (cursor < item.segments.length) {
-      const current = item.segments[cursor];
-      if (!current || current.kind !== 'tool_card') {
-        break;
-      }
-      groupedCards.push(current.card);
-      cursor += 1;
-    }
-    if (groupedCards.length > 1) {
-      renderedSegments.push(<ToolWorkflowCard key={`workflow-${segment.key}-${index}`} cards={groupedCards} />);
-    } else if (groupedCards.length === 1) {
-      renderedSegments.push(<ToolCardView key={`${segment.key}-${index}`} card={groupedCards[0]} />);
-    }
-    index = cursor;
-  }
-
-  return (
-    <div className="rounded-2xl border px-4 py-3 shadow-sm bg-white text-gray-900 border-gray-200">
-      <div className="space-y-3">{renderedSegments}</div>
+      <div className="space-y-2">{renderedParts}</div>
     </div>
   );
 }
 
-export function ChatThread({ events, isSending, className }: ChatThreadProps) {
-  const timeline = useMemo(() => buildChatTimeline(events), [events]);
+export function ChatThread({ uiMessages, isSending, className }: ChatThreadProps) {
+  const hasStreamingDraft = uiMessages.some((message) => message.meta?.status === 'streaming');
 
   return (
     <div className={cn('space-y-5', className)}>
-      {timeline.map((item) => {
-        const role = item.kind === 'assistant_turn' ? 'assistant' : item.role;
+      {uiMessages.map((message) => {
+        const {role} = message;
         const isUser = role === 'user';
+        const timestamp = resolveUiMessageTimestamp(message);
         return (
-          <div key={item.key} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
+          <div key={message.id} className={cn('flex gap-3', isUser ? 'justify-end' : 'justify-start')}>
             {!isUser && <RoleAvatar role={role} />}
-            <div className={cn('max-w-[92%] min-w-[280px] space-y-2', isUser && 'flex flex-col items-end')}>
-              {item.kind === 'assistant_turn' ? (
-                <AssistantTurnCard item={item} />
-              ) : (
-                <MessageCard message={item.message} />
-              )}
+            <div className={cn('max-w-[92%] w-fit space-y-2', isUser && 'flex flex-col items-end')}>
+              <MessageCard message={message} />
               <div className={cn('text-[11px] px-1', isUser ? 'text-primary-300' : 'text-gray-400')}>
-                {roleTitle(role)} · {formatDateTime(item.timestamp)}
+                {roleTitle(role)} · {formatDateTime(timestamp)}
               </div>
             </div>
             {isUser && <RoleAvatar role={role} />}
@@ -447,7 +389,7 @@ export function ChatThread({ events, isSending, className }: ChatThreadProps) {
         );
       })}
 
-      {isSending && (
+      {isSending && !hasStreamingDraft && (
         <div className="flex gap-3 justify-start">
           <RoleAvatar role="assistant" />
           <div className="rounded-2xl border border-gray-200 bg-white px-4 py-3 text-sm text-gray-500 shadow-sm">

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

@@ -0,0 +1,82 @@
+import { useChatInputBarController } from '@/components/chat/chat-input/useChatInputBarController';
+import { ChatInputBottomToolbar } from '@/components/chat/chat-input/ChatInputBottomToolbar';
+import { ChatInputModelStateHint } from '@/components/chat/chat-input/components/ChatInputModelStateHint';
+import { ChatInputSelectedSkillsSection } from '@/components/chat/chat-input/components/ChatInputSelectedSkillsSection';
+import { ChatInputSlashPanelSection } from '@/components/chat/chat-input/components/ChatInputSlashPanelSection';
+import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { t } from '@/lib/i18n';
+
+export function ChatInputBarView() {
+  const presenter = usePresenter();
+  const snapshot = useChatInputStore((state) => state.snapshot);
+
+  const hasModelOptions = snapshot.modelOptions.length > 0;
+  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
+  const isModelOptionsEmpty = snapshot.isProviderStateResolved && !hasModelOptions;
+  const inputDisabled = ((isModelOptionsLoading || isModelOptionsEmpty) && !snapshot.isSending) || snapshot.sessionTypeUnavailable;
+  const textareaPlaceholder = isModelOptionsLoading
+    ? ''
+    : hasModelOptions
+      ? t('chatInputPlaceholder')
+      : t('chatModelNoOptions');
+
+  const controller = useChatInputBarController({
+    draft: snapshot.draft,
+    onDraftChange: presenter.chatInputManager.setDraft,
+    onSend: presenter.chatInputManager.send,
+    onStop: presenter.chatInputManager.stop,
+    canStopGeneration: snapshot.canStopGeneration,
+    isSending: snapshot.isSending,
+    skillRecords: snapshot.skillRecords,
+    isSkillsLoading: snapshot.isSkillsLoading,
+    selectedSkills: snapshot.selectedSkills,
+    onSelectedSkillsChange: presenter.chatInputManager.selectSkills
+  });
+
+  return (
+    <div className="border-t border-gray-200/80 bg-white p-4">
+      <div className="mx-auto w-full max-w-[min(1120px,100%)]">
+        <div className="rounded-2xl border border-gray-200 bg-white shadow-card overflow-hidden">
+          <div className="relative">
+            <textarea
+              value={snapshot.draft}
+              onChange={(event) => presenter.chatInputManager.setDraft(event.target.value)}
+              disabled={inputDisabled}
+              onKeyDown={controller.onTextareaKeyDown}
+              placeholder={textareaPlaceholder}
+              className="w-full min-h-[68px] max-h-[220px] resize-y bg-transparent outline-none text-sm px-4 py-3 text-gray-800 placeholder:text-gray-400"
+            />
+            <ChatInputSlashPanelSection
+              slashAnchorRef={controller.slashAnchorRef}
+              slashListRef={controller.slashListRef}
+              isSlashPanelOpen={controller.isSlashPanelOpen}
+              isSlashPanelLoading={controller.isSlashPanelLoading}
+              resolvedSlashPanelWidth={controller.resolvedSlashPanelWidth}
+              skillSlashItems={controller.skillSlashItems}
+              activeSlashIndex={controller.activeSlashIndex}
+              activeSlashItem={controller.activeSlashItem}
+              onSelectSlashItem={controller.onSelectSlashItem}
+              onSlashPanelOpenChange={controller.onSlashPanelOpenChange}
+              onSetActiveSlashIndex={controller.onSetActiveSlashIndex}
+            />
+          </div>
+
+          <ChatInputModelStateHint
+            isModelOptionsLoading={isModelOptionsLoading}
+            isModelOptionsEmpty={isModelOptionsEmpty}
+            onGoToProviders={presenter.chatInputManager.goToProviders}
+          />
+
+          <ChatInputSelectedSkillsSection
+            records={controller.selectedSkillRecords}
+            selectedSkills={snapshot.selectedSkills}
+            onSelectedSkillsChange={presenter.chatInputManager.selectSkills}
+          />
+
+          <ChatInputBottomToolbar />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+import { SkillsPicker } from '@/components/chat/SkillsPicker';
+import { usePresenter } from '@/components/chat/presenter/chat-presenter-context';
+import { useChatInputStore } from '@/components/chat/stores/chat-input.store';
+import { ChatInputAttachButton } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputAttachButton';
+import { ChatInputModelSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputModelSelector';
+import { ChatInputSendControls } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSendControls';
+import { ChatInputSessionTypeSelector } from '@/components/chat/chat-input/components/bottom-toolbar/ChatInputSessionTypeSelector';
+import { t } from '@/lib/i18n';
+
+export function ChatInputBottomToolbar() {
+  const presenter = usePresenter();
+  const snapshot = useChatInputStore((state) => state.snapshot);
+
+  const hasModelOptions = snapshot.modelOptions.length > 0;
+  const isModelOptionsLoading = !snapshot.isProviderStateResolved && !hasModelOptions;
+  const selectedModelOption = snapshot.modelOptions.find((option) => option.value === snapshot.selectedModel);
+  const shouldShowSessionTypeSelector =
+    snapshot.canEditSessionType &&
+    (snapshot.sessionTypeOptions.length > 1 ||
+      Boolean(snapshot.selectedSessionType && snapshot.selectedSessionType !== 'native'));
+  const selectedSessionTypeOption =
+    snapshot.sessionTypeOptions.find((option) => option.value === snapshot.selectedSessionType) ??
+    (snapshot.selectedSessionType
+      ? { value: snapshot.selectedSessionType, label: snapshot.selectedSessionType }
+      : null);
+  const resolvedStopHint =
+    snapshot.stopDisabledReason === '__preparing__'
+      ? t('chatStopPreparing')
+      : snapshot.stopDisabledReason?.trim() || t('chatStopUnavailable');
+
+  return (
+    <div className="flex items-center justify-between px-3 pb-3">
+      <div className="flex items-center gap-1">
+        <SkillsPicker
+          records={snapshot.skillRecords}
+          isLoading={snapshot.isSkillsLoading}
+          selectedSkills={snapshot.selectedSkills}
+          onSelectedSkillsChange={presenter.chatInputManager.selectSkills}
+        />
+        <ChatInputSessionTypeSelector
+          shouldShowSessionTypeSelector={shouldShowSessionTypeSelector}
+          selectedSessionType={snapshot.selectedSessionType}
+          selectedSessionTypeOption={selectedSessionTypeOption}
+          sessionTypeOptions={snapshot.sessionTypeOptions}
+          onSelectedSessionTypeChange={presenter.chatInputManager.selectSessionType}
+          canEditSessionType={snapshot.canEditSessionType}
+        />
+        <ChatInputModelSelector
+          modelOptions={snapshot.modelOptions}
+          selectedModel={snapshot.selectedModel}
+          selectedModelOption={selectedModelOption}
+          onSelectedModelChange={presenter.chatInputManager.selectModel}
+          isModelOptionsLoading={isModelOptionsLoading}
+          hasModelOptions={hasModelOptions}
+        />
+        <ChatInputAttachButton />
+      </div>
+      <ChatInputSendControls
+        sendError={snapshot.sendError}
+        draft={snapshot.draft}
+        hasModelOptions={hasModelOptions}
+        sessionTypeUnavailable={snapshot.sessionTypeUnavailable}
+        isSending={snapshot.isSending}
+        canStopGeneration={snapshot.canStopGeneration}
+        resolvedStopHint={resolvedStopHint}
+        onSend={presenter.chatInputManager.send}
+        onStop={presenter.chatInputManager.stop}
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1,39 @@
+import { t } from '@/lib/i18n';
+
+type ChatInputModelStateHintProps = {
+  isModelOptionsLoading: boolean;
+  isModelOptionsEmpty: boolean;
+  onGoToProviders: () => void;
+};
+
+export function ChatInputModelStateHint(props: ChatInputModelStateHintProps) {
+  if (!props.isModelOptionsLoading && !props.isModelOptionsEmpty) {
+    return null;
+  }
+
+  if (props.isModelOptionsLoading) {
+    return (
+      <div className="px-4 pb-2">
+        <div className="inline-flex items-center gap-2 rounded-lg border border-gray-200 bg-gray-50 px-3 py-2">
+          <span className="h-3 w-28 animate-pulse rounded bg-gray-200" />
+          <span className="h-3 w-16 animate-pulse rounded bg-gray-200" />
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="px-4 pb-2">
+      <div className="inline-flex items-center gap-2 rounded-lg border border-amber-200 bg-amber-50 px-3 py-1.5 text-xs text-amber-800">
+        <span>{t('chatModelNoOptions')}</span>
+        <button
+          type="button"
+          onClick={props.onGoToProviders}
+          className="font-semibold text-amber-900 underline-offset-2 hover:underline"
+        >
+          {t('chatGoConfigureProvider')}
+        </button>
+      </div>
+    </div>
+  );
+}