fix: precise Claude SDK denial message detection in deriveToolStatus

- Add Queue/QueueItem/QueueItemIndicator/QueueItemContent primitive
- Rewrite TodoList using Queue (clean list, no bordered cards, no priority badges)
- Add ToolStatusBadge component (Running/Completed/Error/Denied)
- Migrate CollapsibleSection from native <details> to Collapsible primitive
- Add badge prop threading through CollapsibleDisplay and CollapsibleSection
- Add status badges to OneLineDisplay and CollapsibleDisplay via ToolRenderer
- Update SubagentContainer: theme tokens + Collapsible for tool history
- Replace hardcoded gray-* colors with theme tokens throughout tool displays

src/components/app/AppContent.tsx

@@ -122,8 +122,28 @@ export default function AppContent() {
     }
   }, [isConnected, selectedSession?.id, sendMessage]);
 
+  // Adjust the app container to stay above the virtual keyboard on iOS Safari.
+  // On Chrome for Android the layout viewport already shrinks when the keyboard opens,
+  // so inset-0 adjusts automatically. On iOS the layout viewport stays full-height and
+  // the keyboard overlays it — we use the Visual Viewport API to track keyboard height
+  // and apply it as a CSS variable that shifts the container's bottom edge up.
+  useEffect(() => {
+    const vv = window.visualViewport;
+    if (!vv) return;
+    const update = () => {
+      // Only resize matters — keyboard open/close changes vv.height.
+      // Do NOT listen to scroll: on iOS Safari, scrolling content changes
+      // vv.offsetTop which would make --keyboard-height fluctuate during
+      // normal scrolling, causing the container to bounce up and down.
+      const kb = Math.max(0, window.innerHeight - vv.height);
+      document.documentElement.style.setProperty('--keyboard-height', `${kb}px`);
+    };
+    vv.addEventListener('resize', update);
+    return () => vv.removeEventListener('resize', update);
+  }, []);
+
   return (
-    <div className="fixed inset-0 flex bg-background">
+    <div className="fixed inset-0 flex bg-background" style={{ bottom: 'var(--keyboard-height, 0px)' }}>
       {!isMobile ? (
         <div className="h-full flex-shrink-0 border-r border-border/50">
           <Sidebar {...sidebarSharedProps} />

src/components/chat/hooks/useChatComposerState.ts

@@ -737,7 +737,7 @@ export function useChatComposerState({
     }
     // Re-run when input changes so restored drafts get the same autosize behavior as typed text.
     textareaRef.current.style.height = 'auto';
-    textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;
+    textareaRef.current.style.height = `${Math.max(22, textareaRef.current.scrollHeight)}px`;
     const lineHeight = parseInt(window.getComputedStyle(textareaRef.current).lineHeight);
     const expanded = textareaRef.current.scrollHeight > lineHeight * 2;
     setIsTextareaExpanded(expanded);
@@ -824,7 +824,7 @@ export function useChatComposerState({
     (event: FormEvent<HTMLTextAreaElement>) => {
       const target = event.currentTarget;
       target.style.height = 'auto';
-      target.style.height = `${target.scrollHeight}px`;
+      target.style.height = `${Math.max(22, target.scrollHeight)}px`;
       setCursorPosition(target.selectionStart);
       syncInputOverlayScroll(target);
 

src/components/chat/tools/ToolRenderer.tsx

@@ -1,8 +1,13 @@
 import React, { memo, useMemo, useCallback } from 'react';
+
 import type { Project } from '../../../types/app';
 import type { SubagentChildTool } from '../types/types';
+
 import { getToolConfig } from './configs/toolConfigs';
 import { OneLineDisplay, CollapsibleDisplay, ToolDiffViewer, MarkdownContent, FileListContent, TodoListContent, TaskListContent, TextContent, QuestionAnswerContent, SubagentContainer } from './components';
+import { PlanDisplay } from './components/PlanDisplay';
+import { ToolStatusBadge } from './components/ToolStatusBadge';
+import type { ToolStatus } from './components/ToolStatusBadge';
 
 type DiffLine = {
   type: string;
@@ -36,12 +41,32 @@ function getToolCategory(toolName: string): string {
   if (toolName === 'Bash') return 'bash';
   if (['TodoWrite', 'TodoRead'].includes(toolName)) return 'todo';
   if (['TaskCreate', 'TaskUpdate', 'TaskList', 'TaskGet'].includes(toolName)) return 'task';
-  if (toolName === 'Task') return 'agent';  // Subagent task
+  if (toolName === 'Task') return 'agent';
   if (toolName === 'exit_plan_mode' || toolName === 'ExitPlanMode') return 'plan';
   if (toolName === 'AskUserQuestion') return 'question';
   return 'default';
 }
 
+// Exact denial messages from server/claude-sdk.js — other providers can't reliably signal denial
+const CLAUDE_DENIAL_MESSAGES = [
+  'user denied tool use',
+  'tool disallowed by settings',
+  'permission request timed out',
+  'permission request cancelled',
+];
+
+function deriveToolStatus(toolResult: any): ToolStatus {
+  if (!toolResult) return 'running';
+  if (toolResult.isError) {
+    const content = String(toolResult.content || '').toLowerCase().trim();
+    if (CLAUDE_DENIAL_MESSAGES.some((msg) => content.includes(msg))) {
+      return 'denied';
+    }
+    return 'error';
+  }
+  return 'completed';
+}
+
 /**
  * Main tool renderer router
  * Routes to OneLineDisplay or CollapsibleDisplay based on tool config
@@ -73,6 +98,12 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
     }
   }, [mode, toolInput, toolResult]);
 
+  // Only derive and show status badge on input renders
+  const toolStatus = useMemo(
+    () => mode === 'input' ? deriveToolStatus(toolResult) : undefined,
+    [mode, toolResult],
+  );
+
   const handleAction = useCallback(() => {
     if (displayConfig?.action === 'open-file' && onFileOpen) {
       const value = displayConfig.getValue?.(parsedData) || '';
@@ -82,9 +113,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
 
   // Route subagent containers to dedicated component (after hooks to satisfy Rules of Hooks)
   if (isSubagentContainer && subagentState) {
-    if (mode === 'result') {
-      return null;
-    }
+    if (mode === 'result') return null;
     return (
       <SubagentContainer
         toolInput={toolInput}
@@ -115,6 +144,34 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
         wrapText={displayConfig.wrapText}
         colorScheme={displayConfig.colorScheme}
         resultId={mode === 'input' ? `tool-result-${toolId}` : undefined}
+        status={toolStatus !== 'completed' ? toolStatus : undefined}
+      />
+    );
+  }
+
+  if (displayConfig.type === 'plan') {
+    const title = typeof displayConfig.title === 'function'
+      ? displayConfig.title(parsedData)
+      : displayConfig.title || 'Plan';
+
+    const contentProps = displayConfig.getContentProps?.(parsedData, {
+      selectedProject,
+      createDiff,
+      onFileOpen
+    }) || {};
+
+    const isStreaming = mode === 'input' && !toolResult;
+
+    return (
+      <PlanDisplay
+        title={title}
+        content={contentProps.content || ''}
+        defaultOpen={displayConfig.defaultOpen ?? autoExpandTools}
+        isStreaming={isStreaming}
+        showRawParameters={mode === 'input' && showRawParameters}
+        rawContent={rawToolInput}
+        toolName={toolName}
+        toolId={toolId}
       />
     );
   }
@@ -134,7 +191,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
       onFileOpen
     }) || {};
 
-    // Build the content component based on contentType
     let contentComponent: React.ReactNode = null;
 
     switch (displayConfig.contentType) {
@@ -211,7 +267,6 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
       }
     }
 
-    // For edit tools, make the title (filename) clickable to open the file
     const handleTitleClick = (toolName === 'Edit' || toolName === 'Write' || toolName === 'ApplyPatch') && contentProps.filePath && onFileOpen
       ? () => onFileOpen(contentProps.filePath, {
           old_string: contentProps.oldContent,
@@ -219,6 +274,8 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
         })
       : undefined;
 
+    const badgeElement = toolStatus && toolStatus !== 'completed' ? <ToolStatusBadge status={toolStatus} /> : undefined;
+
     return (
       <CollapsibleDisplay
         toolName={toolName}
@@ -226,6 +283,7 @@ export const ToolRenderer: React.FC<ToolRendererProps> = memo(({
         title={title}
         defaultOpen={defaultOpen}
         onTitleClick={handleTitleClick}
+        badge={badgeElement}
         showRawParameters={mode === 'input' && showRawParameters}
         rawContent={rawToolInput}
         toolCategory={getToolCategory(toolName)}

src/components/chat/tools/components/CollapsibleDisplay.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
 import { CollapsibleSection } from './CollapsibleSection';
 
 interface CollapsibleDisplayProps {
@@ -7,6 +8,7 @@ interface CollapsibleDisplayProps {
   title: string;
   defaultOpen?: boolean;
   action?: React.ReactNode;
+  badge?: React.ReactNode;
   onTitleClick?: () => void;
   children: React.ReactNode;
   showRawParameters?: boolean;
@@ -17,14 +19,14 @@ interface CollapsibleDisplayProps {
 
 const borderColorMap: Record<string, string> = {
   edit: 'border-l-amber-500 dark:border-l-amber-400',
-  search: 'border-l-gray-400 dark:border-l-gray-500',
+  search: 'border-l-muted-foreground/40',
   bash: 'border-l-green-500 dark:border-l-green-400',
   todo: 'border-l-violet-500 dark:border-l-violet-400',
   task: 'border-l-violet-500 dark:border-l-violet-400',
   agent: 'border-l-purple-500 dark:border-l-purple-400',
   plan: 'border-l-indigo-500 dark:border-l-indigo-400',
   question: 'border-l-blue-500 dark:border-l-blue-400',
-  default: 'border-l-gray-300 dark:border-l-gray-600',
+  default: 'border-l-border',
 };
 
 export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
@@ -32,14 +34,14 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
   title,
   defaultOpen = false,
   action,
+  badge,
   onTitleClick,
   children,
   showRawParameters = false,
   rawContent,
   className = '',
-  toolCategory
+  toolCategory,
 }) => {
-  // Fall back to default styling for unknown/new categories so className never includes "undefined".
   const borderColor = borderColorMap[toolCategory || 'default'] || borderColorMap.default;
 
   return (
@@ -49,15 +51,16 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
         toolName={toolName}
         open={defaultOpen}
         action={action}
+        badge={badge}
         onTitleClick={onTitleClick}
       >
         {children}
 
         {showRawParameters && rawContent && (
-          <details className="group/raw relative mt-2">
-            <summary className="flex cursor-pointer items-center gap-1.5 py-0.5 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+          <Collapsible className="mt-2">
+            <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground">
               <svg
-                className="h-2.5 w-2.5 transition-transform duration-150 group-open/raw:rotate-90"
+                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -65,11 +68,13 @@ export const CollapsibleDisplay: React.FC<CollapsibleDisplayProps> = ({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
               </svg>
               raw params
-            </summary>
-            <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-gray-200/40 bg-gray-50 p-2 font-mono text-[11px] text-gray-600 dark:border-gray-700/40 dark:bg-gray-900/50 dark:text-gray-400">
-              {rawContent}
-            </pre>
-          </details>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-border/40 bg-muted p-2 font-mono text-[11px] text-muted-foreground">
+                {rawContent}
+              </pre>
+            </CollapsibleContent>
+          </Collapsible>
         )}
       </CollapsibleSection>
     </div>

src/components/chat/tools/components/CollapsibleSection.tsx

@@ -1,10 +1,13 @@
 import React from 'react';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
+import { cn } from '../../../../lib/utils';
 
 interface CollapsibleSectionProps {
   title: string;
   toolName?: string;
   open?: boolean;
   action?: React.ReactNode;
+  badge?: React.ReactNode;
   onTitleClick?: () => void;
   children: React.ReactNode;
   className?: string;
@@ -18,44 +21,68 @@ export const CollapsibleSection: React.FC<CollapsibleSectionProps> = ({
   toolName,
   open = false,
   action,
+  badge,
   onTitleClick,
   children,
-  className = ''
+  className = '',
 }) => {
   return (
-    <details className={`group/details relative ${className}`} open={open}>
-      <summary className="flex cursor-pointer select-none items-center gap-1.5 py-0.5 text-xs group-open/details:sticky group-open/details:top-0 group-open/details:z-10 group-open/details:-mx-1 group-open/details:bg-background group-open/details:px-1">
-        <svg
-          className="h-3 w-3 flex-shrink-0 text-gray-400 transition-transform duration-150 group-open/details:rotate-90 dark:text-gray-500"
-          fill="none"
-          stroke="currentColor"
-          viewBox="0 0 24 24"
-        >
-          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-        </svg>
-        {toolName && (
-          <span className="flex-shrink-0 font-medium text-gray-500 dark:text-gray-400">{toolName}</span>
-        )}
-        {toolName && (
-          <span className="flex-shrink-0 text-[10px] text-gray-300 dark:text-gray-600">/</span>
-        )}
-        {onTitleClick ? (
+    <Collapsible defaultOpen={open} className={cn('group/section', className)}>
+      {/* When there's a clickable title (Edit/Write), only the chevron toggles collapse */}
+      {onTitleClick ? (
+        <div className="flex cursor-default select-none items-center gap-1.5 py-0.5 text-xs group-data-[state=open]/section:sticky group-data-[state=open]/section:top-0 group-data-[state=open]/section:z-10 group-data-[state=open]/section:-mx-1 group-data-[state=open]/section:bg-background group-data-[state=open]/section:px-1">
+          <CollapsibleTrigger className="flex flex-shrink-0 items-center p-0.5 text-muted-foreground hover:text-foreground">
+            <svg
+              className="h-3 w-3 transition-transform duration-150 group-data-[state=open]/section:rotate-90"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          </CollapsibleTrigger>
+          {toolName && (
+            <span className="flex-shrink-0 font-medium text-muted-foreground">{toolName}</span>
+          )}
+          {toolName && (
+            <span className="flex-shrink-0 text-[10px] text-muted-foreground/40">/</span>
+          )}
           <button
-            onClick={(e) => { e.preventDefault(); e.stopPropagation(); onTitleClick(); }}
-            className="flex-1 truncate text-left font-mono text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+            onClick={onTitleClick}
+            className="flex-1 truncate text-left font-mono text-primary transition-colors hover:text-primary/80 hover:underline"
           >
             {title}
           </button>
-        ) : (
-          <span className="flex-1 truncate text-gray-600 dark:text-gray-400">
-            {title}
-          </span>
-        )}
-        {action && <span className="ml-1 flex-shrink-0">{action}</span>}
-      </summary>
-      <div className="mt-1.5 pl-[18px]">
-        {children}
-      </div>
-    </details>
+          {badge && <span className="ml-auto flex-shrink-0">{badge}</span>}
+          {action && <span className="ml-1 flex-shrink-0">{action}</span>}
+        </div>
+      ) : (
+        <CollapsibleTrigger className="flex w-full select-none items-center gap-1.5 py-0.5 text-xs text-muted-foreground transition-colors hover:text-foreground group-data-[state=open]/section:sticky group-data-[state=open]/section:top-0 group-data-[state=open]/section:z-10 group-data-[state=open]/section:-mx-1 group-data-[state=open]/section:bg-background group-data-[state=open]/section:px-1">
+          <svg
+            className="h-3 w-3 flex-shrink-0 transition-transform duration-150 group-data-[state=open]/section:rotate-90"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+          </svg>
+          {toolName && (
+            <span className="flex-shrink-0 font-medium">{toolName}</span>
+          )}
+          {toolName && (
+            <span className="flex-shrink-0 text-[10px] text-muted-foreground/40">/</span>
+          )}
+          <span className="flex-1 truncate text-left">{title}</span>
+          {badge && <span className="ml-auto flex-shrink-0">{badge}</span>}
+          {action && <span className="ml-1 flex-shrink-0">{action}</span>}
+        </CollapsibleTrigger>
+      )}
+
+      <CollapsibleContent>
+        <div className="mt-1.5 pl-[18px]">
+          {children}
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
   );
 };

src/components/chat/tools/components/ContentRenderers/TodoList.tsx

@@ -1,114 +1,21 @@
 import { memo, useMemo } from 'react';
-import { CheckCircle2, Circle, Clock, type LucideIcon } from 'lucide-react';
-import { Badge } from '../../../../../shared/view/ui';
-
-type TodoStatus = 'completed' | 'in_progress' | 'pending';
-type TodoPriority = 'high' | 'medium' | 'low';
+import { Queue, QueueItem, QueueItemIndicator, QueueItemContent } from '../../../../../shared/view/ui';
+import type { QueueItemStatus } from '../../../../../shared/view/ui';
 
 export type TodoItem = {
   id?: string;
   content: string;
   status: string;
   priority?: string;
+  activeForm?: string;
 };
 
-type NormalizedTodoItem = {
-  id?: string;
-  content: string;
-  status: TodoStatus;
-  priority: TodoPriority;
-};
-
-type StatusConfig = {
-  icon: LucideIcon;
-  iconClassName: string;
-  badgeClassName: string;
-  textClassName: string;
-};
-
-// Centralized visual config keeps rendering logic compact and easier to scan.
-const STATUS_CONFIG: Record<TodoStatus, StatusConfig> = {
-  completed: {
-    icon: CheckCircle2,
-    iconClassName: 'w-3.5 h-3.5 text-green-500 dark:text-green-400',
-    badgeClassName:
-      'bg-green-100 dark:bg-green-900/30 text-green-800 dark:text-green-200 border-green-200 dark:border-green-800',
-    textClassName: 'line-through text-gray-500 dark:text-gray-400',
-  },
-  in_progress: {
-    icon: Clock,
-    iconClassName: 'w-3.5 h-3.5 text-blue-500 dark:text-blue-400',
-    badgeClassName:
-      'bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 border-blue-200 dark:border-blue-800',
-    textClassName: 'text-gray-900 dark:text-gray-100',
-  },
-  pending: {
-    icon: Circle,
-    iconClassName: 'w-3.5 h-3.5 text-gray-400 dark:text-gray-500',
-    badgeClassName:
-      'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700',
-    textClassName: 'text-gray-900 dark:text-gray-100',
-  },
-};
-
-const PRIORITY_BADGE_CLASS: Record<TodoPriority, string> = {
-  high: 'bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-300 border-red-200 dark:border-red-800',
-  medium:
-    'bg-yellow-100 dark:bg-yellow-900/30 text-yellow-700 dark:text-yellow-300 border-yellow-200 dark:border-yellow-800',
-  low: 'bg-gray-100 dark:bg-gray-800 text-gray-600 dark:text-gray-400 border-gray-200 dark:border-gray-700',
-};
-
-// Incoming tool payloads can vary; normalize to supported UI states.
-const normalizeStatus = (status: string): TodoStatus => {
-  if (status === 'completed' || status === 'in_progress') {
-    return status;
-  }
+const normalizeStatus = (status: string): QueueItemStatus => {
+  if (status === 'completed') return 'completed';
+  if (status === 'in_progress') return 'in_progress';
   return 'pending';
 };
 
-const normalizePriority = (priority?: string): TodoPriority => {
-  if (priority === 'high' || priority === 'medium') {
-    return priority;
-  }
-  return 'low';
-};
-
-const TodoRow = memo(
-  ({ todo }: { todo: NormalizedTodoItem }) => {
-    const statusConfig = STATUS_CONFIG[todo.status];
-    const StatusIcon = statusConfig.icon;
-
-    return (
-      <div className="flex items-start gap-2 rounded border border-gray-200 bg-white p-2 transition-colors dark:border-gray-700 dark:bg-gray-800">
-        <div className="mt-0.5 flex-shrink-0">
-          <StatusIcon className={statusConfig.iconClassName} />
-        </div>
-        <div className="min-w-0 flex-1">
-          <div className="mb-0.5 flex items-start justify-between gap-2">
-            <p className={`text-xs font-medium ${statusConfig.textClassName}`}>
-              {todo.content}
-            </p>
-            <div className="flex flex-shrink-0 gap-1">
-              <Badge
-                variant="outline"
-                className={`px-1.5 py-px text-[10px] ${PRIORITY_BADGE_CLASS[todo.priority]}`}
-              >
-                {todo.priority}
-              </Badge>
-              <Badge
-                variant="outline"
-                className={`px-1.5 py-px text-[10px] ${statusConfig.badgeClassName}`}
-              >
-                {todo.status.replace('_', ' ')}
-              </Badge>
-            </div>
-          </div>
-        </div>
-      </div>
-    );
-  }
-);
-
 const TodoList = memo(
   ({
     todos,
@@ -117,36 +24,33 @@ const TodoList = memo(
     todos: TodoItem[];
     isResult?: boolean;
   }) => {
-    // Memoize normalization to avoid recomputing list metadata on every render.
-    const normalizedTodos = useMemo<NormalizedTodoItem[]>(
-      () =>
-        todos.map((todo) => ({
-          id: todo.id,
-          content: todo.content,
-          status: normalizeStatus(todo.status),
-          priority: normalizePriority(todo.priority),
-        })),
-      [todos]
+    const normalized = useMemo(
+      () => todos.map((todo) => ({ ...todo, queueStatus: normalizeStatus(todo.status) })),
+      [todos],
     );
 
-    if (normalizedTodos.length === 0) {
-      return null;
-    }
+    if (normalized.length === 0) return null;
 
     return (
-      <div className="space-y-1.5">
+      <div>
         {isResult && (
-          <div className="mb-1.5 text-xs font-medium text-gray-600 dark:text-gray-400">
-            Todo List ({normalizedTodos.length}{' '}
-            {normalizedTodos.length === 1 ? 'item' : 'items'})
+          <div className="mb-1.5 text-xs font-medium text-muted-foreground">
+            Todo List ({normalized.length} {normalized.length === 1 ? 'item' : 'items'})
           </div>
         )}
-        {normalizedTodos.map((todo, index) => (
-          <TodoRow key={todo.id ?? `${todo.content}-${index}`} todo={todo} />
-        ))}
+        <Queue>
+          {normalized.map((todo, index) => (
+            <QueueItem key={todo.id ?? `${todo.content}-${index}`} status={todo.queueStatus}>
+              <QueueItemIndicator />
+              <QueueItemContent>{todo.content}</QueueItemContent>
+            </QueueItem>
+          ))}
+        </Queue>
       </div>
     );
-  }
+  },
 );
 
+TodoList.displayName = 'TodoList';
+
 export default TodoList;

src/components/chat/tools/components/OneLineDisplay.tsx

@@ -1,5 +1,7 @@
 import React, { useState } from 'react';
 import { copyTextToClipboard } from '../../../../utils/clipboard';
+import { ToolStatusBadge } from './ToolStatusBadge';
+import type { ToolStatus } from './ToolStatusBadge';
 
 type ActionType = 'copy' | 'open-file' | 'jump-to-results' | 'none';
 
@@ -23,6 +25,7 @@ interface OneLineDisplayProps {
   resultId?: string;
   toolResult?: any;
   toolId?: string;
+  status?: ToolStatus;
 }
 
 /**
@@ -40,14 +43,15 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
   style,
   wrapText = false,
   colorScheme = {
-    primary: 'text-gray-700 dark:text-gray-300',
-    secondary: 'text-gray-500 dark:text-gray-400',
+    primary: 'text-foreground',
+    secondary: 'text-muted-foreground',
     background: '',
-    border: 'border-gray-300 dark:border-gray-600',
-    icon: 'text-gray-500 dark:text-gray-400'
+    border: 'border-border',
+    icon: 'text-muted-foreground',
   },
   toolResult,
-  toolId
+  toolId,
+  status,
 }) => {
   const [copied, setCopied] = useState(false);
   const isTerminal = style === 'terminal';
@@ -55,9 +59,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
   const handleAction = async () => {
     if (action === 'copy' && value) {
       const didCopy = await copyTextToClipboard(value);
-      if (!didCopy) {
-        return;
-      }
+      if (!didCopy) return;
       setCopied(true);
       setTimeout(() => setCopied(false), 2000);
     } else if (onAction) {
@@ -68,7 +70,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
   const renderCopyButton = () => (
     <button
       onClick={handleAction}
-      className="ml-1 flex-shrink-0 text-gray-400 opacity-0 transition-all hover:text-gray-600 group-hover:opacity-100 dark:hover:text-gray-200"
+      className="ml-1 flex-shrink-0 text-muted-foreground/40 opacity-0 transition-all hover:text-muted-foreground group-hover:opacity-100"
       title="Copy to clipboard"
       aria-label="Copy to clipboard"
     >
@@ -84,7 +86,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
     </button>
   );
 
-  // Terminal style: dark pill only around the command
+  // Terminal style: dark pill around the command
   if (isTerminal) {
     return (
       <div className="group my-1">
@@ -100,12 +102,13 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
                 <span className="select-none text-green-600 dark:text-green-500">$ </span>{value}
               </code>
             </div>
+            {status && <ToolStatusBadge status={status} className="mt-0.5" />}
             {action === 'copy' && renderCopyButton()}
           </div>
         </div>
         {secondary && (
           <div className="ml-7 mt-1">
-            <span className="text-[11px] italic text-gray-400 dark:text-gray-500">
+            <span className="text-[11px] italic text-muted-foreground/60">
               {secondary}
             </span>
           </div>
@@ -114,20 +117,21 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
     );
   }
 
-  // File open style - show filename only, full path on hover
+  // File open style
   if (action === 'open-file') {
     const displayName = value.split('/').pop() || value;
     return (
       <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} my-0.5 py-0.5 pl-3`}>
-        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
-        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
+        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
+        <span className="text-[10px] text-muted-foreground/40">/</span>
         <button
           onClick={handleAction}
-          className="truncate font-mono text-xs text-blue-600 transition-colors hover:text-blue-700 hover:underline dark:text-blue-400 dark:hover:text-blue-300"
+          className="truncate font-mono text-xs text-primary transition-colors hover:text-primary/80 hover:underline"
           title={value}
         >
           {displayName}
         </button>
+        {status && <ToolStatusBadge status={status} className="ml-auto" />}
       </div>
     );
   }
@@ -136,20 +140,21 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
   if (action === 'jump-to-results') {
     return (
       <div className={`group flex items-center gap-1.5 border-l-2 ${colorScheme.border} my-0.5 py-0.5 pl-3`}>
-        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
-        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
+        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
+        <span className="text-[10px] text-muted-foreground/40">/</span>
         <span className={`min-w-0 flex-1 truncate font-mono text-xs ${colorScheme.primary}`}>
           {value}
         </span>
         {secondary && (
-          <span className="flex-shrink-0 text-[11px] italic text-gray-400 dark:text-gray-500">
+          <span className="flex-shrink-0 text-[11px] italic text-muted-foreground/60">
             {secondary}
           </span>
         )}
+        {status && <ToolStatusBadge status={status} />}
         {toolResult && (
           <a
             href={`#tool-result-${toolId}`}
-            className="flex flex-shrink-0 items-center gap-0.5 text-[11px] text-blue-600 transition-colors hover:text-blue-700 dark:text-blue-400 dark:hover:text-blue-300"
+            className="flex flex-shrink-0 items-center gap-0.5 text-[11px] text-primary transition-colors hover:text-primary/80"
           >
             <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
@@ -167,10 +172,10 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
         <span className={`${colorScheme.icon} flex-shrink-0 text-xs`}>{icon}</span>
       )}
       {!icon && (label || toolName) && (
-        <span className="flex-shrink-0 text-xs text-gray-500 dark:text-gray-400">{label || toolName}</span>
+        <span className="flex-shrink-0 text-xs text-muted-foreground">{label || toolName}</span>
       )}
       {(icon || label || toolName) && (
-        <span className="text-[10px] text-gray-300 dark:text-gray-600">/</span>
+        <span className="text-[10px] text-muted-foreground/40">/</span>
       )}
       <span className={`font-mono text-xs ${wrapText ? 'whitespace-pre-wrap break-all' : 'truncate'} min-w-0 flex-1 ${colorScheme.primary}`}>
         {value}
@@ -180,6 +185,7 @@ export const OneLineDisplay: React.FC<OneLineDisplayProps> = ({
           {secondary}
         </span>
       )}
+      {status && <ToolStatusBadge status={status} />}
       {action === 'copy' && renderCopyButton()}
     </div>
   );

src/components/chat/tools/components/PlanDisplay.tsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import { ChevronsUpDown, FileText } from 'lucide-react';
+
+import {
+  Card,
+  CardHeader,
+  CardTitle,
+  CardContent,
+  CardFooter,
+  Button,
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+  Shimmer,
+} from '../../../../shared/view/ui';
+import { usePermission } from '../../../../contexts/PermissionContext';
+
+import { MarkdownContent } from './ContentRenderers';
+
+interface PlanDisplayProps {
+  title: string;
+  content: string;
+  defaultOpen?: boolean;
+  isStreaming?: boolean;
+  showRawParameters?: boolean;
+  rawContent?: string;
+  toolName: string;
+  toolId?: string;
+}
+
+export const PlanDisplay: React.FC<PlanDisplayProps> = ({
+  title,
+  content,
+  defaultOpen = false,
+  isStreaming = false,
+  showRawParameters = false,
+  rawContent,
+  toolName: _toolName,
+}) => {
+  const permissionCtx = usePermission();
+
+  const pendingRequest = permissionCtx?.pendingPermissionRequests.find(
+    (r) => r.toolName === 'ExitPlanMode' || r.toolName === 'exit_plan_mode'
+  );
+
+  const handleBuild = () => {
+    if (pendingRequest && permissionCtx) {
+      permissionCtx.handlePermissionDecision(pendingRequest.requestId, { allow: true });
+    }
+  };
+
+  const handleRevise = () => {
+    if (pendingRequest && permissionCtx) {
+      permissionCtx.handlePermissionDecision(pendingRequest.requestId, {
+        allow: false,
+        message: 'User asked to revise the plan',
+      });
+    }
+  };
+
+  return (
+    <Collapsible defaultOpen={defaultOpen}>
+      <Card className="my-1 flex flex-col shadow-none">
+        {/* Header — always visible */}
+        <CardHeader className="flex flex-row items-start justify-between space-y-0 px-4 pb-0 pt-4">
+          <div className="flex items-center gap-2">
+            <FileText className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <CardTitle className="text-sm font-semibold">
+              {isStreaming ? <Shimmer>{title}</Shimmer> : title}
+            </CardTitle>
+          </div>
+          <CollapsibleTrigger className="inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground">
+            <ChevronsUpDown className="h-4 w-4" />
+            <span className="sr-only">Toggle plan</span>
+          </CollapsibleTrigger>
+        </CardHeader>
+
+        {/* Collapsible content */}
+        <CollapsibleContent>
+          <CardContent className="px-4 pb-4 pt-3">
+            {content ? (
+              <MarkdownContent
+                content={content}
+                className="prose prose-sm max-w-none dark:prose-invert"
+              />
+            ) : isStreaming ? (
+              <div className="py-2">
+                <Shimmer>Generating plan...</Shimmer>
+              </div>
+            ) : null}
+
+            {showRawParameters && rawContent && (
+              <Collapsible className="mt-3">
+                <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 text-[11px] text-muted-foreground hover:text-foreground">
+                  <svg
+                    className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                  >
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+                  </svg>
+                  raw params
+                </CollapsibleTrigger>
+                <CollapsibleContent>
+                  <pre className="mt-1 overflow-hidden whitespace-pre-wrap break-words rounded border border-border/40 bg-muted p-2 font-mono text-[11px] text-muted-foreground">
+                    {rawContent}
+                  </pre>
+                </CollapsibleContent>
+              </Collapsible>
+            )}
+          </CardContent>
+        </CollapsibleContent>
+
+        {/* Footer — always visible when permission is pending */}
+        {pendingRequest && (
+          <CardFooter className="justify-end gap-2 border-t border-border/40 px-4 pb-3 pt-3">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleRevise}
+              className="text-muted-foreground"
+            >
+              Revise
+            </Button>
+            <Button size="sm" onClick={handleBuild}>
+              Build{' '}
+              <kbd className="ml-1 rounded bg-primary-foreground/20 px-1 py-0.5 font-mono text-[10px]">
+                ⌘↩
+              </kbd>
+            </Button>
+          </CardFooter>
+        )}
+      </Card>
+    </Collapsible>
+  );
+};

src/components/chat/tools/components/SubagentContainer.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import type { SubagentChildTool } from '../../types/types';
 import { CollapsibleSection } from './CollapsibleSection';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from '../../../../shared/view/ui';
 
 interface SubagentContainerProps {
   toolInput: unknown;
@@ -65,21 +66,21 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
       >
         {/* Prompt/request to the subagent */}
         {prompt && (
-          <div className="mb-2 line-clamp-4 whitespace-pre-wrap break-words text-xs text-gray-600 dark:text-gray-400">
+          <div className="mb-2 line-clamp-4 whitespace-pre-wrap break-words text-xs text-muted-foreground">
             {prompt}
           </div>
         )}
 
         {/* Current tool indicator (while running) */}
         {currentTool && !isComplete && (
-          <div className="mt-1 flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
+          <div className="mt-1 flex items-center gap-1.5 text-xs text-muted-foreground">
             <span className="h-1.5 w-1.5 flex-shrink-0 animate-pulse rounded-full bg-purple-500 dark:bg-purple-400" />
-            <span className="text-gray-400 dark:text-gray-500">Currently:</span>
-            <span className="font-medium text-gray-600 dark:text-gray-300">{currentTool.toolName}</span>
+            <span className="text-muted-foreground/60">Currently:</span>
+            <span className="font-medium text-foreground">{currentTool.toolName}</span>
             {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput) && (
               <>
-                <span className="text-gray-300 dark:text-gray-600">/</span>
-                <span className="truncate font-mono text-gray-500 dark:text-gray-400">
+                <span className="text-muted-foreground/40">/</span>
+                <span className="truncate font-mono text-muted-foreground">
                   {getCompactToolDisplay(currentTool.toolName, currentTool.toolInput)}
                 </span>
               </>
@@ -99,10 +100,10 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
 
         {/* Tool history (collapsed) */}
         {childTools.length > 0 && (
-          <details className="group/history mt-2">
-            <summary className="flex cursor-pointer items-center gap-1 text-[11px] text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300">
+          <Collapsible className="mt-2">
+            <CollapsibleTrigger className="flex items-center gap-1 text-[11px] text-muted-foreground hover:text-foreground">
               <svg
-                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 group-open/history:rotate-90"
+                className="h-2.5 w-2.5 flex-shrink-0 transition-transform duration-150 data-[state=open]:rotate-90"
                 fill="none"
                 stroke="currentColor"
                 viewBox="0 0 24 24"
@@ -110,29 +111,31 @@ export const SubagentContainer: React.FC<SubagentContainerProps> = ({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
               </svg>
               <span>View tool history ({childTools.length})</span>
-            </summary>
-            <div className="mt-1 space-y-0.5 border-l border-gray-200 pl-3 dark:border-gray-700">
-              {childTools.map((child, index) => (
-                <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-gray-500 dark:text-gray-400">
-                  <span className="w-4 flex-shrink-0 text-right text-gray-400 dark:text-gray-500">{index + 1}.</span>
-                  <span className="font-medium">{child.toolName}</span>
-                  {getCompactToolDisplay(child.toolName, child.toolInput) && (
-                    <span className="truncate font-mono text-gray-400 dark:text-gray-500">
-                      {getCompactToolDisplay(child.toolName, child.toolInput)}
-                    </span>
-                  )}
-                  {child.toolResult?.isError && (
-                    <span className="flex-shrink-0 text-red-500">(error)</span>
-                  )}
-                </div>
-              ))}
-            </div>
-          </details>
+            </CollapsibleTrigger>
+            <CollapsibleContent>
+              <div className="mt-1 space-y-0.5 border-l border-border pl-3">
+                {childTools.map((child, index) => (
+                  <div key={child.toolId} className="flex items-center gap-1.5 text-[11px] text-muted-foreground">
+                    <span className="w-4 flex-shrink-0 text-right text-muted-foreground/60">{index + 1}.</span>
+                    <span className="font-medium text-foreground">{child.toolName}</span>
+                    {getCompactToolDisplay(child.toolName, child.toolInput) && (
+                      <span className="truncate font-mono text-muted-foreground/70">
+                        {getCompactToolDisplay(child.toolName, child.toolInput)}
+                      </span>
+                    )}
+                    {child.toolResult?.isError && (
+                      <span className="flex-shrink-0 text-red-500">(error)</span>
+                    )}
+                  </div>
+                ))}
+              </div>
+            </CollapsibleContent>
+          </Collapsible>
         )}
 
         {/* Final result */}
         {isComplete && toolResult && (
-          <div className="mt-2 text-xs text-gray-600 dark:text-gray-400">
+          <div className="mt-2 text-xs text-muted-foreground">
             {(() => {
               let content = toolResult.content;
 

src/components/chat/tools/components/ToolStatusBadge.tsx

@@ -0,0 +1,42 @@
+import { cn } from '../../../../lib/utils';
+
+export type ToolStatus = 'running' | 'completed' | 'error' | 'denied';
+
+const STATUS_CONFIG: Record<ToolStatus, { label: string; className: string }> = {
+  running: {
+    label: 'Running',
+    className: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300',
+  },
+  completed: {
+    label: 'Completed',
+    className: 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300',
+  },
+  error: {
+    label: 'Error',
+    className: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300',
+  },
+  denied: {
+    label: 'Denied',
+    className: 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300',
+  },
+};
+
+interface ToolStatusBadgeProps {
+  status: ToolStatus;
+  className?: string;
+}
+
+export function ToolStatusBadge({ status, className }: ToolStatusBadgeProps) {
+  const config = STATUS_CONFIG[status];
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center rounded px-1.5 py-px text-[10px] font-medium',
+        config.className,
+        className,
+      )}
+    >
+      {config.label}
+    </span>
+  );
+}

src/components/chat/tools/components/index.ts

@@ -5,3 +5,5 @@ export { CollapsibleDisplay } from './CollapsibleDisplay';
 export { SubagentContainer } from './SubagentContainer';
 export * from './ContentRenderers';
 export * from './InteractiveRenderers';
+export { ToolStatusBadge } from './ToolStatusBadge';
+export type { ToolStatus } from './ToolStatusBadge';

src/components/chat/tools/configs/toolConfigs.ts

@@ -5,7 +5,7 @@
 
 export interface ToolDisplayConfig {
   input: {
-    type: 'one-line' | 'collapsible' | 'hidden';
+    type: 'one-line' | 'collapsible' | 'plan' | 'hidden';
     // One-line config
     icon?: string;
     label?: string;
@@ -31,7 +31,7 @@ export interface ToolDisplayConfig {
   result?: {
     hidden?: boolean;
     hideOnSuccess?: boolean;
-    type?: 'one-line' | 'collapsible' | 'special';
+    type?: 'one-line' | 'collapsible' | 'plan' | 'special';
     title?: string | ((result: any) => string);
     defaultOpen?: boolean;
     // Special result handlers
@@ -494,7 +494,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
 
   exit_plan_mode: {
     input: {
-      type: 'collapsible',
+      type: 'plan',
       title: 'Implementation plan',
       defaultOpen: true,
       contentType: 'markdown',
@@ -503,29 +503,14 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
       })
     },
     result: {
-      type: 'collapsible',
-      contentType: 'markdown',
-      getContentProps: (result) => {
-        try {
-          let parsed = result.content;
-          if (typeof parsed === 'string') {
-            parsed = JSON.parse(parsed);
-          }
-          return {
-            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
-          };
-        } catch (e) {
-          console.warn('Failed to parse plan content:', e);
-          return { content: '' };
-        }
-      }
+      hidden: true
     }
   },
 
   // Also register as ExitPlanMode (the actual tool name used by Claude)
   ExitPlanMode: {
     input: {
-      type: 'collapsible',
+      type: 'plan',
       title: 'Implementation plan',
       defaultOpen: true,
       contentType: 'markdown',
@@ -534,22 +519,7 @@ export const TOOL_CONFIGS: Record<string, ToolDisplayConfig> = {
       })
     },
     result: {
-      type: 'collapsible',
-      contentType: 'markdown',
-      getContentProps: (result) => {
-        try {
-          let parsed = result.content;
-          if (typeof parsed === 'string') {
-            parsed = JSON.parse(parsed);
-          }
-          return {
-            content: parsed.plan?.replace(/\\n/g, '\n') || parsed.plan
-          };
-        } catch (e) {
-          console.warn('Failed to parse plan content:', e);
-          return { content: '' };
-        }
-      }
+      hidden: true
     }
   },
 

src/components/chat/view/ChatInterface.tsx

@@ -1,6 +1,8 @@
-import React, { useCallback, useEffect, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+
 import { useTasksSettings } from '../../../contexts/TasksSettingsContext';
+import PermissionContext from '../../../contexts/PermissionContext';
 import { QuickSettingsPanel } from '../../quick-settings-panel';
 import type { ChatInterfaceProps, Provider  } from '../types/types';
 import type { LLMProvider } from '../../../types/app';
@@ -9,6 +11,7 @@ import { useChatSessionState } from '../hooks/useChatSessionState';
 import { useChatRealtimeHandlers } from '../hooks/useChatRealtimeHandlers';
 import { useChatComposerState } from '../hooks/useChatComposerState';
 import { useSessionStore } from '../../../stores/useSessionStore';
+
 import ChatMessagesPane from './subcomponents/ChatMessagesPane';
 import ChatComposer from './subcomponents/ChatComposer';
 
@@ -267,6 +270,11 @@ function ChatInterface({
     };
   }, [resetStreamingState]);
 
+  const permissionContextValue = useMemo(() => ({
+    pendingPermissionRequests,
+    handlePermissionDecision,
+  }), [pendingPermissionRequests, handlePermissionDecision]);
+
   if (!selectedProject) {
     const selectedProviderLabel =
       provider === 'cursor'
@@ -292,7 +300,7 @@ function ChatInterface({
   }
 
   return (
-    <>
+    <PermissionContext.Provider value={permissionContextValue}>
       <div className="flex h-full flex-col">
         <ChatMessagesPane
           scrollContainerRef={scrollContainerRef}
@@ -393,7 +401,6 @@ function ChatInterface({
           onTextareaScrollSync={syncInputOverlayScroll}
           onTextareaInput={handleTextareaInput}
           onInputFocusChange={handleInputFocusChange}
-          isInputFocused={isInputFocused}
           placeholder={t('input.placeholder', {
             provider:
               provider === 'cursor'
@@ -410,7 +417,7 @@ function ChatInterface({
       </div>
 
       <QuickSettingsPanel />
-    </>
+    </PermissionContext.Provider>
   );
 }
 

src/components/chat/view/subcomponents/ChatComposer.tsx

@@ -11,12 +11,24 @@ import type {
   SetStateAction,
   TouchEvent,
 } from 'react';
+import { ImageIcon, MessageSquareIcon, XIcon, ArrowDownIcon } from 'lucide-react';
 import type { PendingPermissionRequest, PermissionMode, Provider } from '../../types/types';
 import CommandMenu from './CommandMenu';
 import ClaudeStatus from './ClaudeStatus';
 import ImageAttachment from './ImageAttachment';
 import PermissionRequestsBanner from './PermissionRequestsBanner';
-import ChatInputControls from './ChatInputControls';
+import ThinkingModeSelector from './ThinkingModeSelector';
+import TokenUsagePie from './TokenUsagePie';
+import {
+  PromptInput,
+  PromptInputHeader,
+  PromptInputBody,
+  PromptInputTextarea,
+  PromptInputFooter,
+  PromptInputTools,
+  PromptInputButton,
+  PromptInputSubmit,
+} from '../../../../shared/view/ui';
 
 interface MentionableFile {
   name: string;
@@ -86,7 +98,6 @@ interface ChatComposerProps {
   onTextareaScrollSync: (target: HTMLTextAreaElement) => void;
   onTextareaInput: (event: FormEvent<HTMLTextAreaElement>) => void;
   onInputFocusChange?: (focused: boolean) => void;
-  isInputFocused?: boolean;
   placeholder: string;
   isTextareaExpanded: boolean;
   sendByCtrlEnter?: boolean;
@@ -142,7 +153,6 @@ export default function ChatComposer({
   onTextareaScrollSync,
   onTextareaInput,
   onInputFocusChange,
-  isInputFocused,
   placeholder,
   isTextareaExpanded,
   sendByCtrlEnter,
@@ -163,81 +173,40 @@ export default function ChatComposer({
   // Hide the thinking/status bar while any permission request is pending
   const hasPendingPermissions = pendingPermissionRequests.length > 0;
 
-  // On mobile, when input is focused, float the input box at the bottom
-  const mobileFloatingClass = isInputFocused
-    ? 'max-sm:fixed max-sm:bottom-0 max-sm:left-0 max-sm:right-0 max-sm:z-50 max-sm:bg-background max-sm:shadow-[0_-4px_20px_rgba(0,0,0,0.15)]'
-    : '';
-
   return (
-    <div className={`flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6 ${mobileFloatingClass}`}>
+    <div className="flex-shrink-0 p-2 pb-2 sm:p-4 sm:pb-4 md:p-4 md:pb-6">
       {!hasPendingPermissions && (
-        <div className="flex-1">
-          <ClaudeStatus
-            status={claudeStatus}
-            isLoading={isLoading}
-            onAbort={onAbortSession}
-            provider={provider}
+        <ClaudeStatus
+          status={claudeStatus}
+          isLoading={isLoading}
+          onAbort={onAbortSession}
+          provider={provider}
+        />
+      )}
+
+      {pendingPermissionRequests.length > 0 && (
+        <div className="mx-auto mb-3 max-w-4xl">
+          <PermissionRequestsBanner
+            pendingPermissionRequests={pendingPermissionRequests}
+            handlePermissionDecision={handlePermissionDecision}
+            handleGrantToolPermission={handleGrantToolPermission}
           />
         </div>
       )}
 
-      <div className="mx-auto mb-3 max-w-4xl">
-        <PermissionRequestsBanner
-          pendingPermissionRequests={pendingPermissionRequests}
-          handlePermissionDecision={handlePermissionDecision}
-          handleGrantToolPermission={handleGrantToolPermission}
-        />
-
-        {!hasQuestionPanel && <ChatInputControls
-          permissionMode={permissionMode}
-          onModeSwitch={onModeSwitch}
-          provider={provider}
-          thinkingMode={thinkingMode}
-          setThinkingMode={setThinkingMode}
-          tokenBudget={tokenBudget}
-          slashCommandsCount={slashCommandsCount}
-          onToggleCommandMenu={onToggleCommandMenu}
-          hasInput={hasInput}
-          onClearInput={onClearInput}
-          isUserScrolledUp={isUserScrolledUp}
-          hasMessages={hasMessages}
-          onScrollToBottom={onScrollToBottom}
-        />}
-      </div>
-
-      {!hasQuestionPanel && <form onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void} className="relative mx-auto max-w-4xl">
-        {isDragActive && (
-          <div className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/15">
-            <div className="rounded-xl border border-border/30 bg-card p-4 shadow-lg">
-              <svg className="mx-auto mb-2 h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
-                />
-              </svg>
-              <p className="text-sm font-medium">Drop images here</p>
-            </div>
+      {!hasQuestionPanel && <div className="relative mx-auto max-w-4xl">
+        {isUserScrolledUp && hasMessages && (
+          <div className="absolute -top-10 left-0 right-0 z-10 flex justify-center">
+            <button
+              type="button"
+              onClick={onScrollToBottom}
+              className="flex h-8 w-8 items-center justify-center rounded-full border border-border/50 bg-card text-muted-foreground shadow-sm transition-all duration-200 hover:bg-accent hover:text-foreground"
+              title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
+            >
+              <ArrowDownIcon className="h-4 w-4" />
+            </button>
           </div>
         )}
-
-        {attachedImages.length > 0 && (
-          <div className="mb-2 rounded-xl bg-muted/40 p-2">
-            <div className="flex flex-wrap gap-2">
-              {attachedImages.map((file, index) => (
-                <ImageAttachment
-                  key={index}
-                  file={file}
-                  onRemove={() => onRemoveImage(index)}
-                  uploadProgress={uploadingImages.get(file.name)}
-                  error={imageErrors.get(file.name)}
-                />
-              ))}
-            </div>
-          </div>
-        )}
-
         {showFileDropdown && filteredFiles.length > 0 && (
           <div className="absolute bottom-full left-0 right-0 z-50 mb-2 max-h-48 overflow-y-auto rounded-xl border border-border/50 bg-card/95 shadow-lg backdrop-blur-md">
             {filteredFiles.map((file, index) => (
@@ -275,21 +244,56 @@ export default function ChatComposer({
           frequentCommands={frequentCommands}
         />
 
-        <div
+        <PromptInput
+          onSubmit={onSubmit as (event: FormEvent<HTMLFormElement>) => void}
+          status={isLoading ? 'streaming' : 'ready'}
+          className={isTextareaExpanded ? 'chat-input-expanded' : ''}
           {...getRootProps()}
-          className={`relative overflow-hidden rounded-2xl border border-border/50 bg-card/80 shadow-sm backdrop-blur-sm transition-all duration-200 focus-within:border-primary/30 focus-within:shadow-md focus-within:ring-1 focus-within:ring-primary/15 ${
-            isTextareaExpanded ? 'chat-input-expanded' : ''
-          }`}
         >
-          <input {...getInputProps()} />
-          <div ref={inputHighlightRef} aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-2xl">
-            <div className="chat-input-placeholder block w-full whitespace-pre-wrap break-words py-1.5 pl-12 pr-20 text-base leading-6 text-transparent sm:py-4 sm:pr-40">
-              {renderInputWithMentions(input)}
+          {isDragActive && (
+            <div className="absolute inset-0 z-50 flex items-center justify-center rounded-2xl border-2 border-dashed border-primary/50 bg-primary/15">
+              <div className="rounded-xl border border-border/30 bg-card p-4 shadow-lg">
+                <svg className="mx-auto mb-2 h-8 w-8 text-primary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                    strokeWidth={2}
+                    d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"
+                  />
+                </svg>
+                <p className="text-sm font-medium">Drop images here</p>
+              </div>
             </div>
-          </div>
+          )}
 
-          <div className="relative z-10">
-            <textarea
+          {attachedImages.length > 0 && (
+            <PromptInputHeader>
+              <div className="rounded-xl bg-muted/40 p-2">
+                <div className="flex flex-wrap gap-2">
+                  {attachedImages.map((file, index) => (
+                    <ImageAttachment
+                      key={index}
+                      file={file}
+                      onRemove={() => onRemoveImage(index)}
+                      uploadProgress={uploadingImages.get(file.name)}
+                      error={imageErrors.get(file.name)}
+                    />
+                  ))}
+                </div>
+              </div>
+            </PromptInputHeader>
+          )}
+
+          <input {...getInputProps()} />
+
+          <PromptInputBody>
+            <div ref={inputHighlightRef} aria-hidden="true" className="pointer-events-none absolute inset-0 overflow-hidden rounded-xl">
+              <div className="chat-input-placeholder block w-full whitespace-pre-wrap break-words px-4 py-2 text-sm leading-6 text-transparent">
+                {renderInputWithMentions(input)}
+              </div>
+            </div>
+
+            <PromptInputTextarea
               ref={textareaRef}
               value={input}
               onChange={onInputChange}
@@ -301,54 +305,110 @@ export default function ChatComposer({
               onBlur={() => onInputFocusChange?.(false)}
               onInput={onTextareaInput}
               placeholder={placeholder}
-              className="chat-input-placeholder block max-h-[40vh] min-h-[50px] w-full resize-none overflow-y-auto rounded-2xl bg-transparent py-1.5 pl-12 pr-20 text-base leading-6 text-foreground placeholder-muted-foreground/50 transition-all duration-200 focus:outline-none sm:max-h-[300px] sm:min-h-[80px] sm:py-4 sm:pr-40"
-              style={{ height: '50px' }}
             />
+        </PromptInputBody>
+
+        <PromptInputFooter>
+          <PromptInputTools>
+            <PromptInputButton
+              tooltip={{ content: t('input.attachImages') }}
+              onClick={openImagePicker}
+            >
+              <ImageIcon />
+            </PromptInputButton>
 
             <button
               type="button"
-              onClick={openImagePicker}
-              className="absolute left-2 top-1/2 -translate-y-1/2 transform rounded-xl p-2 transition-colors hover:bg-accent/60"
-              title={t('input.attachImages')}
+              onClick={onModeSwitch}
+              className={`rounded-lg border px-1.5 py-1 text-xs font-medium transition-all duration-200 sm:px-2.5 ${
+                permissionMode === 'default'
+                  ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
+                  : permissionMode === 'acceptEdits'
+                    ? 'border-green-300/60 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-600/40 dark:bg-green-900/15 dark:text-green-300 dark:hover:bg-green-900/25'
+                    : permissionMode === 'bypassPermissions'
+                      ? 'border-orange-300/60 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-600/40 dark:bg-orange-900/15 dark:text-orange-300 dark:hover:bg-orange-900/25'
+                      : 'border-primary/20 bg-primary/5 text-primary hover:bg-primary/10'
+              }`}
+              title={t('input.clickToChangeMode')}
             >
-              <svg className="h-5 w-5 text-muted-foreground" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                  strokeWidth={2}
-                  d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"
+              <div className="flex items-center gap-1.5">
+                <div
+                  className={`h-2 w-2 rounded-full sm:h-1.5 sm:w-1.5 ${
+                    permissionMode === 'default'
+                      ? 'bg-muted-foreground'
+                      : permissionMode === 'acceptEdits'
+                        ? 'bg-green-500'
+                        : permissionMode === 'bypassPermissions'
+                          ? 'bg-orange-500'
+                          : 'bg-primary'
+                  }`}
                 />
-              </svg>
+                <span className="hidden sm:inline">
+                  {permissionMode === 'default' && t('codex.modes.default')}
+                  {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
+                  {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
+                  {permissionMode === 'plan' && t('codex.modes.plan')}
+                </span>
+              </div>
             </button>
 
-            <button
-              type="submit"
-              disabled={!input.trim() || isLoading}
-              onMouseDown={(event) => {
-                event.preventDefault();
-                onSubmit(event);
-              }}
-              onTouchStart={(event) => {
-                event.preventDefault();
-                onSubmit(event);
-              }}
-              className="absolute right-2 top-1/2 flex h-10 w-10 -translate-y-1/2 transform items-center justify-center rounded-xl bg-primary transition-all duration-200 hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-1 focus:ring-offset-background disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground sm:h-11 sm:w-11"
+            {provider === 'claude' && (
+              <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
+            )}
+
+            <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
+
+            <PromptInputButton
+              tooltip={{ content: t('input.showAllCommands') }}
+              onClick={onToggleCommandMenu}
+              className="relative"
             >
-              <svg className="h-4 w-4 rotate-90 transform text-primary-foreground sm:h-[18px] sm:w-[18px]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.2} d="M12 19l9 2-9-18-9 18 9-2zm0 0v-8" />
-              </svg>
-            </button>
+              <MessageSquareIcon />
+              {slashCommandsCount > 0 && (
+                <span
+                  className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground"
+                >
+                  {slashCommandsCount}
+                </span>
+              )}
+            </PromptInputButton>
 
+            {hasInput && (
+              <PromptInputButton
+                tooltip={{ content: t('input.clearInput', { defaultValue: 'Clear input' }) }}
+                onClick={onClearInput}
+                className="hidden sm:inline-flex"
+              >
+                <XIcon />
+              </PromptInputButton>
+            )}
+
+          </PromptInputTools>
+
+          <div className="flex items-center gap-2">
             <div
-              className={`pointer-events-none absolute bottom-1 left-12 right-14 hidden text-xs text-muted-foreground/50 transition-opacity duration-200 sm:right-40 sm:block ${
+              className={`hidden text-xs text-muted-foreground/50 transition-opacity duration-200 lg:block ${
                 input.trim() ? 'opacity-0' : 'opacity-100'
               }`}
             >
               {sendByCtrlEnter ? t('input.hintText.ctrlEnter') : t('input.hintText.enter')}
             </div>
+            <PromptInputSubmit
+              disabled={!input.trim() || isLoading}
+              className="h-10 w-10 sm:h-10 sm:w-10"
+              onMouseDown={(event) => {
+                event.preventDefault();
+                onSubmit(event as unknown as MouseEvent<HTMLButtonElement>);
+              }}
+              onTouchStart={(event) => {
+                event.preventDefault();
+                onSubmit(event as unknown as TouchEvent<HTMLButtonElement>);
+              }}
+            />
           </div>
-        </div>
-      </form>}
+        </PromptInputFooter>
+      </PromptInput>
+      </div>}
     </div>
   );
 }

src/components/chat/view/subcomponents/ChatInputControls.tsx

@@ -1,137 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import type { PermissionMode, Provider } from '../../types/types';
-import ThinkingModeSelector from './ThinkingModeSelector';
-import TokenUsagePie from './TokenUsagePie';
-
-interface ChatInputControlsProps {
-  permissionMode: PermissionMode | string;
-  onModeSwitch: () => void;
-  provider: Provider | string;
-  thinkingMode: string;
-  setThinkingMode: React.Dispatch<React.SetStateAction<string>>;
-  tokenBudget: { used?: number; total?: number } | null;
-  slashCommandsCount: number;
-  onToggleCommandMenu: () => void;
-  hasInput: boolean;
-  onClearInput: () => void;
-  isUserScrolledUp: boolean;
-  hasMessages: boolean;
-  onScrollToBottom: () => void;
-}
-
-export default function ChatInputControls({
-  permissionMode,
-  onModeSwitch,
-  provider,
-  thinkingMode,
-  setThinkingMode,
-  tokenBudget,
-  slashCommandsCount,
-  onToggleCommandMenu,
-  hasInput,
-  onClearInput,
-  isUserScrolledUp,
-  hasMessages,
-  onScrollToBottom,
-}: ChatInputControlsProps) {
-  const { t } = useTranslation('chat');
-
-  return (
-    <div className="flex flex-wrap items-center justify-center gap-2 sm:gap-3">
-      <button
-        type="button"
-        onClick={onModeSwitch}
-        className={`rounded-lg border px-2.5 py-1 text-sm font-medium transition-all duration-200 sm:px-3 sm:py-1.5 ${
-          permissionMode === 'default'
-            ? 'border-border/60 bg-muted/50 text-muted-foreground hover:bg-muted'
-            : permissionMode === 'acceptEdits'
-              ? 'border-green-300/60 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-600/40 dark:bg-green-900/15 dark:text-green-300 dark:hover:bg-green-900/25'
-              : permissionMode === 'bypassPermissions'
-                ? 'border-orange-300/60 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-600/40 dark:bg-orange-900/15 dark:text-orange-300 dark:hover:bg-orange-900/25'
-                : 'border-primary/20 bg-primary/5 text-primary hover:bg-primary/10'
-        }`}
-        title={t('input.clickToChangeMode')}
-      >
-        <div className="flex items-center gap-1.5">
-          <div
-            className={`h-1.5 w-1.5 rounded-full ${
-              permissionMode === 'default'
-                ? 'bg-muted-foreground'
-                : permissionMode === 'acceptEdits'
-                  ? 'bg-green-500'
-                  : permissionMode === 'bypassPermissions'
-                    ? 'bg-orange-500'
-                    : 'bg-primary'
-            }`}
-          />
-          <span>
-            {permissionMode === 'default' && t('codex.modes.default')}
-            {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
-            {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
-            {permissionMode === 'plan' && t('codex.modes.plan')}
-          </span>
-        </div>
-      </button>
-
-      {provider === 'claude' && (
-        <ThinkingModeSelector selectedMode={thinkingMode} onModeChange={setThinkingMode} onClose={() => {}} className="" />
-      )}
-
-      <TokenUsagePie used={tokenBudget?.used || 0} total={tokenBudget?.total || parseInt(import.meta.env.VITE_CONTEXT_WINDOW) || 160000} />
-
-      <button
-        type="button"
-        onClick={onToggleCommandMenu}
-        className="relative flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent/60 hover:text-foreground sm:h-8 sm:w-8"
-        title={t('input.showAllCommands')}
-      >
-        <svg className="h-4 w-4 sm:h-5 sm:w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path
-            strokeLinecap="round"
-            strokeLinejoin="round"
-            strokeWidth={2}
-            d="M7 8h10M7 12h4m1 8l-4-4H5a2 2 0 01-2-2V6a2 2 0 012-2h14a2 2 0 012 2v8a2 2 0 01-2 2h-3l-4 4z"
-          />
-        </svg>
-        {slashCommandsCount > 0 && (
-          <span
-            className="absolute -right-1 -top-1 flex h-4 w-4 items-center justify-center rounded-full bg-primary text-[10px] font-bold text-primary-foreground sm:h-5 sm:w-5"
-          >
-            {slashCommandsCount}
-          </span>
-        )}
-      </button>
-
-      {hasInput && (
-        <button
-          type="button"
-          onClick={onClearInput}
-          className="group flex h-7 w-7 items-center justify-center rounded-lg border border-border/50 bg-card shadow-sm transition-all duration-200 hover:bg-accent/60 sm:h-8 sm:w-8"
-          title={t('input.clearInput', { defaultValue: 'Clear input' })}
-        >
-          <svg
-            className="h-3.5 w-3.5 text-muted-foreground transition-colors group-hover:text-foreground sm:h-4 sm:w-4"
-            fill="none"
-            stroke="currentColor"
-            viewBox="0 0 24 24"
-          >
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
-          </svg>
-        </button>
-      )}
-
-      {isUserScrolledUp && hasMessages && (
-        <button
-          onClick={onScrollToBottom}
-          className="flex h-7 w-7 items-center justify-center rounded-lg bg-primary text-primary-foreground shadow-sm transition-all duration-200 hover:scale-105 hover:bg-primary/90 sm:h-8 sm:w-8"
-          title={t('input.scrollToBottom', { defaultValue: 'Scroll to bottom' })}
-        >
-          <svg className="h-3.5 w-3.5 sm:h-4 sm:w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 14l-7 7m0 0l-7-7m7 7V3" />
-          </svg>
-        </button>
-      )}
-    </div>
-  );
-}

src/components/chat/view/subcomponents/MessageComponent.tsx

@@ -11,6 +11,7 @@ import { formatUsageLimitText } from '../../utils/chatFormatting';
 import { getClaudePermissionSuggestion } from '../../utils/chatPermissions';
 import type { Project } from '../../../../types/app';
 import { ToolRenderer, shouldHideToolResult } from '../../tools';
+import { Reasoning, ReasoningTrigger, ReasoningContent } from '../../../../shared/view/ui';
 import { Markdown } from './Markdown';
 import MessageCopyControl from './MessageCopyControl';
 
@@ -68,7 +69,8 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
   const shouldShowUserCopyControl = message.type === 'user' && userCopyContent.trim().length > 0;
   const shouldShowAssistantCopyControl = message.type === 'assistant' &&
     assistantCopyContent.trim().length > 0 &&
-    !isCommandOrFileEditToolResponse;
+    !isCommandOrFileEditToolResponse &&
+    !message.isThinking;
 
 
   useEffect(() => {
@@ -378,36 +380,30 @@ const MessageComponent = memo(({ message, prevMessage, createDiff, onFileOpen, o
                 </div>
               </div>
             ) : message.isThinking ? (
-              /* Thinking messages - collapsible by default */
-              <div className="text-sm text-gray-700 dark:text-gray-300">
-                <details className="group">
-                  <summary className="flex cursor-pointer items-center gap-2 font-medium text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200">
-                    <svg className="h-3 w-3 transition-transform group-open:rotate-90" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
-                    </svg>
-                    <span>{t('thinking.emoji')}</span>
-                  </summary>
-                  <div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm text-gray-600 dark:border-gray-600 dark:text-gray-400">
-                    <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
-                      {message.content}
-                    </Markdown>
+              /* Thinking messages — Reasoning component (ai-elements pattern) */
+              <Reasoning defaultOpen={false}>
+                <ReasoningTrigger />
+                <ReasoningContent>
+                  <Markdown className="prose prose-sm prose-gray max-w-none dark:prose-invert">
+                    {message.content}
+                  </Markdown>
+                  <div className="mt-3 flex items-center text-[11px]">
+                    <MessageCopyControl content={String(message.content || '')} messageType="assistant" />
                   </div>
-                </details>
-              </div>
+                </ReasoningContent>
+              </Reasoning>
             ) : (
               <div className="text-sm text-gray-700 dark:text-gray-300">
-                {/* Thinking accordion for reasoning */}
+                {/* Reasoning accordion */}
                 {showThinking && message.reasoning && (
-                  <details className="mb-3">
-                    <summary className="cursor-pointer font-medium text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
-                      {t('thinking.emoji')}
-                    </summary>
-                    <div className="mt-2 border-l-2 border-gray-300 pl-4 text-sm italic text-gray-600 dark:border-gray-600 dark:text-gray-400">
+                  <Reasoning className="mb-3" defaultOpen={false}>
+                    <ReasoningTrigger />
+                    <ReasoningContent>
                       <div className="whitespace-pre-wrap">
                         {message.reasoning}
                       </div>
-                    </div>
-                  </details>
+                    </ReasoningContent>
+                  </Reasoning>
                 )}
 
                 {(() => {

src/components/chat/view/subcomponents/PermissionRequestsBanner.tsx

@@ -1,9 +1,18 @@
 import React from 'react';
+import { ShieldAlertIcon } from 'lucide-react';
+
 import type { PendingPermissionRequest } from '../../types/types';
 import { buildClaudeToolPermissionEntry, formatToolInputForDisplay } from '../../utils/chatPermissions';
 import { getClaudeSettings } from '../../utils/chatStorage';
 import { getPermissionPanel, registerPermissionPanel } from '../../tools/configs/permissionPanelRegistry';
 import { AskUserQuestionPanel } from '../../tools/components/InteractiveRenderers';
+import {
+  Confirmation,
+  ConfirmationTitle,
+  ConfirmationRequest,
+  ConfirmationActions,
+  ConfirmationAction,
+} from '../../../../shared/view/ui';
 
 registerPermissionPanel('AskUserQuestion', AskUserQuestionPanel);
 
@@ -21,13 +30,18 @@ export default function PermissionRequestsBanner({
   handlePermissionDecision,
   handleGrantToolPermission,
 }: PermissionRequestsBannerProps) {
-  if (!pendingPermissionRequests.length) {
+  // Filter out plan tool requests — they are handled inline by PlanDisplay
+  const filteredRequests = pendingPermissionRequests.filter(
+    (r) => r.toolName !== 'ExitPlanMode' && r.toolName !== 'exit_plan_mode'
+  );
+
+  if (!filteredRequests.length) {
     return null;
   }
 
   return (
     <div className="mb-3 space-y-2">
-      {pendingPermissionRequests.map((request) => {
+      {filteredRequests.map((request) => {
         const CustomPanel = getPermissionPanel(request.toolName);
         if (CustomPanel) {
           return (
@@ -54,69 +68,62 @@ export default function PermissionRequestsBanner({
           : [request.requestId];
 
         return (
-          <div
-            key={request.requestId}
-            className="rounded-lg border border-amber-200 bg-amber-50 p-3 shadow-sm dark:border-amber-800 dark:bg-amber-900/20"
-          >
-            <div className="flex flex-wrap items-start justify-between gap-3">
-              <div>
-                <div className="text-sm font-semibold text-amber-900 dark:text-amber-100">Permission required</div>
-                <div className="text-xs text-amber-800 dark:text-amber-200">
-                  Tool: <span className="font-mono">{request.toolName}</span>
+          <Confirmation key={request.requestId} approval="pending">
+            <ConfirmationTitle className="flex items-start gap-3">
+              <ShieldAlertIcon className="mt-0.5 h-4 w-4 shrink-0 text-muted-foreground" />
+              <ConfirmationRequest>
+                <div>
+                  <span className="font-medium text-foreground">Permission required</span>
+                  <span className="ml-2 text-muted-foreground">
+                    Tool: <code className="rounded bg-muted px-1.5 py-0.5 text-xs">{request.toolName}</code>
+                  </span>
                 </div>
-              </div>
-              {permissionEntry && (
-                <div className="text-xs text-amber-700 dark:text-amber-300">
-                  Allow rule: <span className="font-mono">{permissionEntry}</span>
-                </div>
-              )}
-            </div>
+                {permissionEntry && (
+                  <div className="mt-1 text-xs text-muted-foreground">
+                    Allow rule: <code className="rounded bg-muted px-1 py-0.5 text-xs">{permissionEntry}</code>
+                  </div>
+                )}
+              </ConfirmationRequest>
+            </ConfirmationTitle>
 
             {rawInput && (
               <details className="mt-2">
-                <summary className="cursor-pointer text-xs text-amber-800 hover:text-amber-900 dark:text-amber-200 dark:hover:text-amber-100">
+                <summary className="cursor-pointer text-xs text-muted-foreground hover:text-foreground">
                   View tool input
                 </summary>
-                <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border border-amber-200/60 bg-white/80 p-2 text-xs text-amber-900 dark:border-amber-800/60 dark:bg-gray-900/60 dark:text-amber-100">
+                <pre className="mt-2 max-h-40 overflow-auto whitespace-pre-wrap rounded-md border bg-muted/50 p-2 text-xs text-muted-foreground">
                   {rawInput}
                 </pre>
               </details>
             )}
 
-            <div className="mt-3 flex flex-wrap gap-2">
-              <button
-                type="button"
-                onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
-                className="inline-flex items-center gap-2 rounded-md bg-amber-600 px-3 py-1.5 text-xs font-medium text-white transition-colors hover:bg-amber-700"
+            <ConfirmationActions>
+              <ConfirmationAction
+                variant="outline"
+                onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
               >
-                Allow once
-              </button>
-              <button
-                type="button"
+                Deny
+              </ConfirmationAction>
+              <ConfirmationAction
+                variant="outline"
                 onClick={() => {
                   if (permissionEntry && !alreadyAllowed) {
                     handleGrantToolPermission({ entry: permissionEntry, toolName: request.toolName });
                   }
                   handlePermissionDecision(matchingRequestIds, { allow: true, rememberEntry: permissionEntry });
                 }}
-                className={`inline-flex items-center gap-2 rounded-md border px-3 py-1.5 text-xs font-medium transition-colors ${
-                  permissionEntry
-                    ? 'border-amber-300 text-amber-800 hover:bg-amber-100 dark:border-amber-700 dark:text-amber-100 dark:hover:bg-amber-900/30'
-                    : 'cursor-not-allowed border-gray-300 text-gray-400'
-                }`}
                 disabled={!permissionEntry}
               >
                 {rememberLabel}
-              </button>
-              <button
-                type="button"
-                onClick={() => handlePermissionDecision(request.requestId, { allow: false, message: 'User denied tool use' })}
-                className="inline-flex items-center gap-2 rounded-md border border-red-300 px-3 py-1.5 text-xs font-medium text-red-700 transition-colors hover:bg-red-50 dark:border-red-800 dark:text-red-200 dark:hover:bg-red-900/30"
+              </ConfirmationAction>
+              <ConfirmationAction
+                variant="default"
+                onClick={() => handlePermissionDecision(request.requestId, { allow: true })}
               >
-                Deny
-              </button>
-            </div>
-          </div>
+                Allow once
+              </ConfirmationAction>
+            </ConfirmationActions>
+          </Confirmation>
         );
       })}
     </div>

src/components/chat/view/subcomponents/ProviderSelectionEmptyState.tsx

@@ -1,6 +1,7 @@
-import React from "react";
+import React, { useCallback, useMemo, useState } from "react";
 import { Check, ChevronDown } from "lucide-react";
 import { useTranslation } from "react-i18next";
+
 import SessionProviderLogo from "../../../llm-logo-provider/SessionProviderLogo";
 import {
   CLAUDE_MODELS,
@@ -10,6 +11,19 @@ import {
 } from "../../../../../shared/modelConstants";
 import type { ProjectSession, LLMProvider } from "../../../../types/app";
 import { NextTaskBanner } from "../../../task-master";
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogTitle,
+  Command,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  Card,
+} from "../../../../shared/view/ui";
 
 type ProviderSelectionEmptyStateProps = {
   selectedSession: ProjectSession | null;
@@ -31,48 +45,17 @@ type ProviderSelectionEmptyStateProps = {
   setInput: React.Dispatch<React.SetStateAction<string>>;
 };
 
-type ProviderDef = {
+interface ProviderGroup {
   id: LLMProvider;
   name: string;
-  infoKey: string;
-  accent: string;
-  ring: string;
-  check: string;
-};
+  models: { value: string; label: string }[];
+}
 
-const PROVIDERS: ProviderDef[] = [
-  {
-    id: "claude",
-    name: "Claude Code",
-    infoKey: "providerSelection.providerInfo.anthropic",
-    accent: "border-primary",
-    ring: "ring-primary/15",
-    check: "bg-primary text-primary-foreground",
-  },
-  {
-    id: "cursor",
-    name: "Cursor",
-    infoKey: "providerSelection.providerInfo.cursorEditor",
-    accent: "border-violet-500 dark:border-violet-400",
-    ring: "ring-violet-500/15",
-    check: "bg-violet-500 text-white",
-  },
-  {
-    id: "codex",
-    name: "Codex",
-    infoKey: "providerSelection.providerInfo.openai",
-    accent: "border-emerald-600 dark:border-emerald-400",
-    ring: "ring-emerald-600/15",
-    check: "bg-emerald-600 dark:bg-emerald-500 text-white",
-  },
-  {
-    id: "gemini",
-    name: "Gemini",
-    infoKey: "providerSelection.providerInfo.google",
-    accent: "border-blue-500 dark:border-blue-400",
-    ring: "ring-blue-500/15",
-    check: "bg-blue-500 text-white",
-  },
+const PROVIDER_GROUPS: ProviderGroup[] = [
+  { id: "claude", name: "Anthropic", models: CLAUDE_MODELS.OPTIONS },
+  { id: "cursor", name: "Cursor", models: CURSOR_MODELS.OPTIONS },
+  { id: "codex", name: "OpenAI", models: CODEX_MODELS.OPTIONS },
+  { id: "gemini", name: "Google", models: GEMINI_MODELS.OPTIONS },
 ];
 
 function getModelConfig(p: LLMProvider) {
@@ -82,7 +65,7 @@ function getModelConfig(p: LLMProvider) {
   return CURSOR_MODELS;
 }
 
-function getModelValue(
+function getCurrentModel(
   p: LLMProvider,
   c: string,
   cu: string,
@@ -95,6 +78,13 @@ function getModelValue(
   return cu;
 }
 
+function getProviderDisplayName(p: LLMProvider) {
+  if (p === "claude") return "Claude";
+  if (p === "cursor") return "Cursor";
+  if (p === "codex") return "Codex";
+  return "Gemini";
+}
+
 export default function ProviderSelectionEmptyState({
   selectedSession,
   currentSessionId,
@@ -115,34 +105,12 @@ export default function ProviderSelectionEmptyState({
   setInput,
 }: ProviderSelectionEmptyStateProps) {
   const { t } = useTranslation("chat");
+  const [dialogOpen, setDialogOpen] = useState(false);
   const nextTaskPrompt = t("tasks.nextTaskPrompt", {
     defaultValue: "Start the next task",
   });
 
-  const selectProvider = (next: LLMProvider) => {
-    setProvider(next);
-    localStorage.setItem("selected-provider", next);
-    setTimeout(() => textareaRef.current?.focus(), 100);
-  };
-
-  const handleModelChange = (value: string) => {
-    if (provider === "claude") {
-      setClaudeModel(value);
-      localStorage.setItem("claude-model", value);
-    } else if (provider === "codex") {
-      setCodexModel(value);
-      localStorage.setItem("codex-model", value);
-    } else if (provider === "gemini") {
-      setGeminiModel(value);
-      localStorage.setItem("gemini-model", value);
-    } else {
-      setCursorModel(value);
-      localStorage.setItem("cursor-model", value);
-    }
-  };
-
-  const modelConfig = getModelConfig(provider);
-  const currentModel = getModelValue(
+  const currentModel = getCurrentModel(
     provider,
     claudeModel,
     cursorModel,
@@ -150,7 +118,42 @@ export default function ProviderSelectionEmptyState({
     geminiModel,
   );
 
-  /* ── New session — provider picker ── */
+  const currentModelLabel = useMemo(() => {
+    const config = getModelConfig(provider);
+    const found = config.OPTIONS.find(
+      (o: { value: string; label: string }) => o.value === currentModel,
+    );
+    return found?.label || currentModel;
+  }, [provider, currentModel]);
+
+  const handleModelSelect = useCallback(
+    (providerId: LLMProvider, modelValue: string) => {
+      // Set provider
+      setProvider(providerId);
+      localStorage.setItem("selected-provider", providerId);
+
+      // Set model for the correct provider
+      if (providerId === "claude") {
+        setClaudeModel(modelValue);
+        localStorage.setItem("claude-model", modelValue);
+      } else if (providerId === "codex") {
+        setCodexModel(modelValue);
+        localStorage.setItem("codex-model", modelValue);
+      } else if (providerId === "gemini") {
+        setGeminiModel(modelValue);
+        localStorage.setItem("gemini-model", modelValue);
+      } else {
+        setCursorModel(modelValue);
+        localStorage.setItem("cursor-model", modelValue);
+      }
+
+      setDialogOpen(false);
+      setTimeout(() => textareaRef.current?.focus(), 100);
+    },
+    [setProvider, setClaudeModel, setCursorModel, setCodexModel, setGeminiModel, textareaRef],
+  );
+
+  /* ── New session — provider + model picker ── */
   if (!selectedSession && !currentSessionId) {
     return (
       <div className="flex h-full items-center justify-center px-4">
@@ -165,96 +168,100 @@ export default function ProviderSelectionEmptyState({
             </p>
           </div>
 
-          {/* Provider cards — horizontal row, equal width */}
-          <div className="mb-6 grid grid-cols-2 gap-2 sm:grid-cols-4 sm:gap-2.5">
-            {PROVIDERS.map((p) => {
-              const active = provider === p.id;
-              return (
-                <button
-                  key={p.id}
-                  onClick={() => selectProvider(p.id)}
-                  className={`
-                    relative flex flex-col items-center gap-2.5 rounded-xl border-[1.5px] px-2
-                    pb-4 pt-5 transition-all duration-150
-                    active:scale-[0.97]
-                    ${
-                      active
-                        ? `${p.accent} ${p.ring} bg-card shadow-sm ring-2`
-                        : "border-border bg-card/60 hover:border-border/80 hover:bg-card"
-                    }
-                  `}
-                >
+          {/* Model selector trigger — hero card style */}
+          <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+            <DialogTrigger asChild>
+              <Card
+                className="group mx-auto max-w-sm cursor-pointer border-border/60 transition-all duration-150 hover:border-border hover:shadow-md active:scale-[0.99]"
+                role="button"
+                tabIndex={0}
+              >
+                <div className="flex items-center gap-3 p-4">
                   <SessionProviderLogo
-                    provider={p.id}
-                    className={`h-9 w-9 transition-transform duration-150 ${active ? "scale-110" : ""}`}
+                    provider={provider}
+                    className="h-8 w-8 shrink-0"
                   />
-                  <div className="text-center">
-                    <p className="text-[13px] font-semibold leading-none text-foreground">
-                      {p.name}
-                    </p>
-                    <p className="mt-1 text-[10px] leading-tight text-muted-foreground">
-                      {t(p.infoKey)}
+                  <div className="min-w-0 flex-1">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-sm font-semibold text-foreground">
+                        {getProviderDisplayName(provider)}
+                      </span>
+                      <span className="text-xs text-muted-foreground">·</span>
+                      <span className="truncate text-sm text-foreground">
+                        {currentModelLabel}
+                      </span>
+                    </div>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {t("providerSelection.clickToChange", {
+                        defaultValue: "Click to change model",
+                      })}
                     </p>
                   </div>
-                  {/* Check badge */}
-                  {active && (
-                    <div
-                      className={`absolute -right-1 -top-1 h-[18px] w-[18px] rounded-full ${p.check} flex items-center justify-center shadow-sm`}
+                  <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform group-hover:translate-y-0.5" />
+                </div>
+              </Card>
+            </DialogTrigger>
+
+            <DialogContent className="max-w-md overflow-hidden p-0">
+              <DialogTitle>Model Selector</DialogTitle>
+              <Command>
+                <CommandInput placeholder={t("providerSelection.searchModels", { defaultValue: "Search models..." })} />
+                <CommandList className="max-h-[350px]">
+                  <CommandEmpty>
+                    {t("providerSelection.noModelsFound", { defaultValue: "No models found." })}
+                  </CommandEmpty>
+                  {PROVIDER_GROUPS.map((group) => (
+                    <CommandGroup
+                      key={group.id}
+                      heading={
+                        <span className="flex items-center gap-1.5">
+                          <SessionProviderLogo provider={group.id} className="h-3.5 w-3.5 shrink-0" />
+                          {group.name}
+                        </span>
+                      }
                     >
-                      <Check className="h-2.5 w-2.5" strokeWidth={3} />
-                    </div>
-                  )}
-                </button>
-              );
-            })}
-          </div>
+                      {group.models.map((model) => {
+                        const isSelected =
+                          provider === group.id && currentModel === model.value;
+                        return (
+                          <CommandItem
+                            key={`${group.id}-${model.value}`}
+                            value={`${group.name} ${model.label}`}
+                            onSelect={() => handleModelSelect(group.id, model.value)}
+                          >
+                            <span className="flex-1 truncate">{model.label}</span>
+                            {isSelected && (
+                              <Check className="ml-auto h-4 w-4 shrink-0 text-primary" />
+                            )}
+                          </CommandItem>
+                        );
+                      })}
+                    </CommandGroup>
+                  ))}
+                </CommandList>
+              </Command>
+            </DialogContent>
+          </Dialog>
 
-          {/* Model picker — appears after provider is chosen */}
-          <div
-            className={`transition-all duration-200 ${provider ? "translate-y-0 opacity-100" : "pointer-events-none translate-y-1 opacity-0"}`}
-          >
-            <div className="mb-5 flex items-center justify-center gap-2">
-              <span className="text-sm text-muted-foreground">
-                {t("providerSelection.selectModel")}
-              </span>
-              <div className="relative">
-                <select
-                  value={currentModel}
-                  onChange={(e) => handleModelChange(e.target.value)}
-                  tabIndex={-1}
-                  className="cursor-pointer appearance-none rounded-lg border border-border/60 bg-muted/50 py-1.5 pl-3 pr-7 text-sm font-medium text-foreground transition-colors hover:bg-muted focus:outline-none focus:ring-2 focus:ring-primary/20"
-                >
-                  {modelConfig.OPTIONS.map(
-                    ({ value, label }: { value: string; label: string }) => (
-                      <option key={value + label} value={value}>
-                        {label}
-                      </option>
-                    ),
-                  )}
-                </select>
-                <ChevronDown className="pointer-events-none absolute right-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" />
-              </div>
-            </div>
-
-            <p className="text-center text-sm text-muted-foreground/70">
+          {/* Ready prompt */}
+          <p className="mt-4 text-center text-sm text-muted-foreground/70">
+            {
               {
-                {
-                  claude: t("providerSelection.readyPrompt.claude", {
-                    model: claudeModel,
-                  }),
-                  cursor: t("providerSelection.readyPrompt.cursor", {
-                    model: cursorModel,
-                  }),
-                  codex: t("providerSelection.readyPrompt.codex", {
-                    model: codexModel,
-                  }),
-                  gemini: t("providerSelection.readyPrompt.gemini", {
-                    model: geminiModel,
-                  }),
-                }[provider]
-              }
-            </p>
-          </div>
+                claude: t("providerSelection.readyPrompt.claude", {
+                  model: claudeModel,
+                }),
+                cursor: t("providerSelection.readyPrompt.cursor", {
+                  model: cursorModel,
+                }),
+                codex: t("providerSelection.readyPrompt.codex", {
+                  model: codexModel,
+                }),
+                gemini: t("providerSelection.readyPrompt.gemini", {
+                  model: geminiModel,
+                }),
+              }[provider]
+            }
+          </p>
 
           {/* Task banner */}
           {provider && tasksEnabled && isTaskMasterInstalled && (

src/contexts/PermissionContext.tsx

@@ -0,0 +1,19 @@
+import { createContext, useContext } from 'react';
+
+import type { PendingPermissionRequest } from '../components/chat/types/types';
+
+export interface PermissionContextValue {
+  pendingPermissionRequests: PendingPermissionRequest[];
+  handlePermissionDecision: (
+    requestIds: string | string[],
+    decision: { allow?: boolean; message?: string; rememberEntry?: string | null; updatedInput?: unknown },
+  ) => void;
+}
+
+const PermissionContext = createContext<PermissionContextValue | null>(null);
+
+export function usePermission(): PermissionContextValue | null {
+  return useContext(PermissionContext);
+}
+
+export default PermissionContext;

src/shared/view/ui/Alert.tsx

@@ -0,0 +1,64 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../../lib/utils';
+
+const alertVariants = cva(
+  'relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+type AlertProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ className, variant, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="alert"
+      data-slot="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+);
+Alert.displayName = 'Alert';
+
+const AlertTitle = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="alert-title"
+      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+AlertTitle.displayName = 'AlertTitle';
+
+const AlertDescription = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed',
+        className
+      )}
+      {...props}
+    />
+  )
+);
+AlertDescription.displayName = 'AlertDescription';
+
+export { Alert, AlertTitle, AlertDescription, alertVariants };

src/shared/view/ui/Badge.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+
 import { cn } from '../../../lib/utils';
 
 const badgeVariants = cva(

src/shared/view/ui/Button.tsx

@@ -1,10 +1,11 @@
 import * as React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
+
 import { cn } from '../../../lib/utils';
 
 // Keep visual variants centralized so all button usages stay consistent.
 const buttonVariants = cva(
-  'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium touch-manipulation transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+  'inline-flex touch-manipulation items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
   {
     variants: {
       variant: {

src/shared/view/ui/Card.tsx

@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('rounded-xl border bg-card text-card-foreground shadow-sm', className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = 'Card';
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('flex flex-col space-y-1.5 p-4', className)}
+      {...props}
+    />
+  )
+);
+CardHeader.displayName = 'CardHeader';
+
+const CardTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn('font-semibold leading-none tracking-tight', className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = 'CardTitle';
+
+const CardDescription = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
+  ({ className, ...props }, ref) => (
+    <p
+      ref={ref}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  )
+);
+CardDescription.displayName = 'CardDescription';
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('p-4 pt-0', className)} {...props} />
+  )
+);
+CardContent.displayName = 'CardContent';
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('flex items-center p-4 pt-0', className)} {...props} />
+  )
+);
+CardFooter.displayName = 'CardFooter';
+
+/**
+ * Use inside a CardHeader with `className="flex flex-row items-start justify-between"`.
+ * Positions an action (button/icon) at the trailing edge of the header.
+ */
+const CardAction = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn('ml-auto shrink-0', className)}
+      {...props}
+    />
+  )
+);
+CardAction.displayName = 'CardAction';
+
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction };

src/shared/view/ui/Collapsible.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+interface CollapsibleContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const CollapsibleContext = React.createContext<CollapsibleContextValue | null>(null);
+
+function useCollapsible() {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) throw new Error('Collapsible components must be used within <Collapsible>');
+  return ctx;
+}
+
+interface CollapsibleProps extends React.HTMLAttributes<HTMLDivElement> {
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+}
+
+const Collapsible = React.forwardRef<HTMLDivElement, CollapsibleProps>(
+  ({ defaultOpen = false, open: controlledOpen, onOpenChange: controlledOnOpenChange, className, children, ...props }, ref) => {
+    const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const open = isControlled ? controlledOpen : internalOpen;
+    const onOpenChange = React.useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternalOpen(next);
+        controlledOnOpenChange?.(next);
+      },
+      [isControlled, controlledOnOpenChange]
+    );
+
+    const value = React.useMemo(() => ({ open, onOpenChange }), [open, onOpenChange]);
+
+    return (
+      <CollapsibleContext.Provider value={value}>
+        <div ref={ref} data-state={open ? 'open' : 'closed'} className={className} {...props}>
+          {children}
+        </div>
+      </CollapsibleContext.Provider>
+    );
+  }
+);
+Collapsible.displayName = 'Collapsible';
+
+const CollapsibleTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  ({ onClick, children, className, ...props }, ref) => {
+    const { open, onOpenChange } = useCollapsible();
+
+    const handleClick = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        onOpenChange(!open);
+        onClick?.(e);
+      },
+      [open, onOpenChange, onClick]
+    );
+
+    return (
+      <button
+        ref={ref}
+        type="button"
+        aria-expanded={open}
+        data-state={open ? 'open' : 'closed'}
+        onClick={handleClick}
+        className={className}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+CollapsibleTrigger.displayName = 'CollapsibleTrigger';
+
+const CollapsibleContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { open } = useCollapsible();
+
+    return (
+      <div
+        ref={ref}
+        data-state={open ? 'open' : 'closed'}
+        className={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out',
+          open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+          className
+        )}
+        {...props}
+      >
+        <div className="overflow-hidden">
+          {children}
+        </div>
+      </div>
+    );
+  }
+);
+CollapsibleContent.displayName = 'CollapsibleContent';
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent, useCollapsible };

src/shared/view/ui/Command.tsx

@@ -0,0 +1,320 @@
+import * as React from 'react';
+import { Search } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+
+/*
+ * Lightweight command palette — inspired by cmdk but no external deps.
+ *
+ * Architecture:
+ * - Command owns the search string and a flat list of registered item values.
+ * - Items register via context on mount and deregister on unmount.
+ * - Filtering, active index, and keyboard nav happen centrally in Command.
+ * - Items read their "is visible" / "is active" state from context.
+ */
+
+interface ItemEntry {
+  id: string;
+  value: string;       // searchable text (lowercase)
+  onSelect: () => void;
+  element: HTMLElement | null;
+}
+
+interface CommandContextValue {
+  search: string;
+  setSearch: (value: string) => void;
+  /** Set of visible item IDs after filtering (derived state, not a ref). */
+  visibleIds: Set<string>;
+  activeId: string | null;
+  setActiveId: (id: string | null) => void;
+  register: (entry: ItemEntry) => void;
+  unregister: (id: string) => void;
+  updateEntry: (id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => void;
+}
+
+const CommandContext = React.createContext<CommandContextValue | null>(null);
+
+function useCommand() {
+  const ctx = React.useContext(CommandContext);
+  if (!ctx) throw new Error('Command components must be used within <Command>');
+  return ctx;
+}
+
+/* ─── Command (root) ─────────────────────────────────────────────── */
+
+type CommandProps = React.HTMLAttributes<HTMLDivElement>;
+
+const Command = React.forwardRef<HTMLDivElement, CommandProps>(
+  ({ className, children, ...props }, ref) => {
+    const [search, setSearch] = React.useState('');
+    const entriesRef = React.useRef<Map<string, ItemEntry>>(new Map());
+    // Bump this counter whenever the entry set changes so derived state recalculates
+    const [revision, setRevision] = React.useState(0);
+
+    const register = React.useCallback((entry: ItemEntry) => {
+      entriesRef.current.set(entry.id, entry);
+      setRevision(r => r + 1);
+    }, []);
+
+    const unregister = React.useCallback((id: string) => {
+      entriesRef.current.delete(id);
+      setRevision(r => r + 1);
+    }, []);
+
+    const updateEntry = React.useCallback((id: string, patch: Partial<Pick<ItemEntry, 'value' | 'onSelect' | 'element'>>) => {
+      const existing = entriesRef.current.get(id);
+      if (existing) {
+        Object.assign(existing, patch);
+      }
+    }, []);
+
+    // Derive visible IDs from search + entries
+    const visibleIds = React.useMemo(() => {
+      const lowerSearch = search.toLowerCase();
+      const ids = new Set<string>();
+      for (const [id, entry] of entriesRef.current) {
+        if (!lowerSearch || entry.value.includes(lowerSearch)) {
+          ids.add(id);
+        }
+      }
+      return ids;
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [search, revision]);
+
+    // Ordered list of visible entries (preserves DOM order via insertion order)
+    const visibleEntries = React.useMemo(() => {
+      const result: ItemEntry[] = [];
+      for (const [, entry] of entriesRef.current) {
+        if (visibleIds.has(entry.id)) result.push(entry);
+      }
+      return result;
+    }, [visibleIds]);
+
+    // Active item tracking
+    const [activeId, setActiveId] = React.useState<string | null>(null);
+
+    // Reset active to first visible item when search or visible set changes
+    React.useEffect(() => {
+      setActiveId(visibleEntries.length > 0 ? visibleEntries[0].id : null);
+    }, [visibleEntries]);
+
+    const handleKeyDown = React.useCallback((e: React.KeyboardEvent) => {
+      if (e.key === 'ArrowDown' || e.key === 'ArrowUp' || e.key === 'Enter') {
+        e.preventDefault();
+      } else {
+        return;
+      }
+
+      const entries = visibleEntries;
+      if (entries.length === 0) return;
+
+      if (e.key === 'Enter') {
+        const active = entries.find(entry => entry.id === activeId);
+        active?.onSelect();
+        return;
+      }
+
+      const currentIndex = entries.findIndex(entry => entry.id === activeId);
+      let nextIndex: number;
+      if (e.key === 'ArrowDown') {
+        nextIndex = currentIndex < entries.length - 1 ? currentIndex + 1 : 0;
+      } else {
+        nextIndex = currentIndex > 0 ? currentIndex - 1 : entries.length - 1;
+      }
+      const nextId = entries[nextIndex].id;
+      setActiveId(nextId);
+
+      // Scroll the active item into view
+      const nextEntry = entries[nextIndex];
+      nextEntry.element?.scrollIntoView({ block: 'nearest' });
+    }, [visibleEntries, activeId]);
+
+    const value = React.useMemo<CommandContextValue>(
+      () => ({ search, setSearch, visibleIds, activeId, setActiveId, register, unregister, updateEntry }),
+      [search, visibleIds, activeId, register, unregister, updateEntry]
+    );
+
+    return (
+      <CommandContext.Provider value={value}>
+        <div
+          ref={ref}
+          role="combobox"
+          aria-expanded="true"
+          aria-haspopup="listbox"
+          className={cn('flex flex-col', className)}
+          onKeyDown={handleKeyDown}
+          {...props}
+        >
+          {children}
+        </div>
+      </CommandContext.Provider>
+    );
+  }
+);
+Command.displayName = 'Command';
+
+/* ─── CommandInput ───────────────────────────────────────────────── */
+
+type CommandInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'type'>;
+
+const CommandInput = React.forwardRef<HTMLInputElement, CommandInputProps>(
+  ({ className, placeholder = 'Search...', ...props }, ref) => {
+    const { search, setSearch } = useCommand();
+
+    return (
+      <div className="flex items-center border-b px-3" role="presentation">
+        <Search className="mr-2 h-4 w-4 shrink-0 text-muted-foreground" aria-hidden />
+        <input
+          ref={ref}
+          type="text"
+          role="searchbox"
+          aria-autocomplete="list"
+          autoComplete="off"
+          autoCorrect="off"
+          spellCheck={false}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder={placeholder}
+          className={cn(
+            'flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none',
+            'placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',
+            className
+          )}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CommandInput.displayName = 'CommandInput';
+
+/* ─── CommandList ────────────────────────────────────────────────── */
+
+const CommandList = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      role="listbox"
+      className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+      {...props}
+    />
+  )
+);
+CommandList.displayName = 'CommandList';
+
+/* ─── CommandEmpty ───────────────────────────────────────────────── */
+
+const CommandEmpty = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { search, visibleIds } = useCommand();
+
+    // Only show when there's a search term and zero matches
+    if (!search || visibleIds.size > 0) return null;
+
+    return (
+      <div ref={ref} className={cn('py-6 text-center text-sm text-muted-foreground', className)} {...props} />
+    );
+  }
+);
+CommandEmpty.displayName = 'CommandEmpty';
+
+/* ─── CommandGroup ───────────────────────────────────────────────── */
+
+interface CommandGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+  heading?: React.ReactNode;
+}
+
+const CommandGroup = React.forwardRef<HTMLDivElement, CommandGroupProps>(
+  ({ className, heading, children, ...props }, ref) => (
+    <div ref={ref} className={cn('overflow-hidden p-1', className)} role="group" aria-label={typeof heading === 'string' ? heading : undefined} {...props}>
+      {heading && (
+        <div className="px-2 py-1.5 text-xs font-medium text-muted-foreground" role="presentation">
+          {heading}
+        </div>
+      )}
+      {children}
+    </div>
+  )
+);
+CommandGroup.displayName = 'CommandGroup';
+
+/* ─── CommandItem ────────────────────────────────────────────────── */
+
+interface CommandItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  value?: string;
+  onSelect?: () => void;
+  disabled?: boolean;
+}
+
+const CommandItem = React.forwardRef<HTMLDivElement, CommandItemProps>(
+  ({ className, value, onSelect, disabled, children, ...props }, ref) => {
+    const { visibleIds, activeId, setActiveId, register, unregister, updateEntry } = useCommand();
+    const stableId = React.useId();
+    const elementRef = React.useRef<HTMLElement | null>(null);
+    const searchableText = value || (typeof children === 'string' ? children : '');
+
+    // Register on mount, unregister on unmount
+    React.useEffect(() => {
+      register({
+        id: stableId,
+        value: searchableText.toLowerCase(),
+        onSelect: onSelect || (() => {}),
+        element: elementRef.current,
+      });
+      return () => unregister(stableId);
+      // Only re-register when the identity changes, not onSelect
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [stableId, searchableText, register, unregister]);
+
+    // Keep onSelect up-to-date without re-registering
+    React.useEffect(() => {
+      updateEntry(stableId, { onSelect: onSelect || (() => {}) });
+    }, [stableId, onSelect, updateEntry]);
+
+    // Keep element ref up-to-date
+    const setRef = React.useCallback((node: HTMLDivElement | null) => {
+      elementRef.current = node;
+      updateEntry(stableId, { element: node });
+      if (typeof ref === 'function') ref(node);
+      else if (ref) ref.current = node;
+    }, [stableId, updateEntry, ref]);
+
+    // Hidden by filter
+    if (!visibleIds.has(stableId)) return null;
+
+    const isActive = activeId === stableId;
+
+    return (
+      <div
+        ref={setRef}
+        role="option"
+        aria-selected={isActive}
+        aria-disabled={disabled || undefined}
+        data-active={isActive || undefined}
+        className={cn(
+          'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none',
+          isActive && 'bg-accent text-accent-foreground',
+          disabled && 'pointer-events-none opacity-50',
+          className
+        )}
+        onPointerMove={() => { if (!disabled && activeId !== stableId) setActiveId(stableId); }}
+        onClick={() => !disabled && onSelect?.()}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  }
+);
+CommandItem.displayName = 'CommandItem';
+
+/* ─── CommandSeparator ───────────────────────────────────────────── */
+
+const CommandSeparator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn('-mx-1 h-px bg-border', className)} {...props} />
+  )
+);
+CommandSeparator.displayName = 'CommandSeparator';
+
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator };

src/shared/view/ui/Confirmation.tsx

@@ -0,0 +1,139 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+import { Alert } from './Alert';
+import { Button } from './Button';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+type ApprovalState = 'pending' | 'approved' | 'rejected' | undefined;
+
+interface ConfirmationContextValue {
+  approval: ApprovalState;
+}
+
+const ConfirmationContext = React.createContext<ConfirmationContextValue | null>(null);
+
+const useConfirmation = () => {
+  const context = React.useContext(ConfirmationContext);
+  if (!context) {
+    throw new Error('Confirmation components must be used within Confirmation');
+  }
+  return context;
+};
+
+/* ─── Confirmation (root) ────────────────────────────────────────── */
+
+export interface ConfirmationProps extends React.HTMLAttributes<HTMLDivElement> {
+  approval?: ApprovalState;
+}
+
+export const Confirmation: React.FC<ConfirmationProps> = ({
+  className,
+  approval = 'pending',
+  children,
+  ...props
+}) => {
+  const contextValue = React.useMemo(() => ({ approval }), [approval]);
+
+  return (
+    <ConfirmationContext.Provider value={contextValue}>
+      <Alert className={cn('flex flex-col gap-2', className)} {...props}>
+        {children}
+      </Alert>
+    </ConfirmationContext.Provider>
+  );
+};
+Confirmation.displayName = 'Confirmation';
+
+/* ─── ConfirmationTitle ──────────────────────────────────────────── */
+
+export type ConfirmationTitleProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ConfirmationTitle: React.FC<ConfirmationTitleProps> = ({
+  className,
+  ...props
+}) => (
+  <div
+    data-slot="confirmation-title"
+    className={cn('text-muted-foreground inline text-sm', className)}
+    {...props}
+  />
+);
+ConfirmationTitle.displayName = 'ConfirmationTitle';
+
+/* ─── ConfirmationRequest — visible only when pending ────────────── */
+
+export interface ConfirmationRequestProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationRequest: React.FC<ConfirmationRequestProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'pending') return null;
+  return <>{children}</>;
+};
+ConfirmationRequest.displayName = 'ConfirmationRequest';
+
+/* ─── ConfirmationAccepted — visible only when approved ──────────── */
+
+export interface ConfirmationAcceptedProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationAccepted: React.FC<ConfirmationAcceptedProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'approved') return null;
+  return <>{children}</>;
+};
+ConfirmationAccepted.displayName = 'ConfirmationAccepted';
+
+/* ─── ConfirmationRejected — visible only when rejected ──────────── */
+
+export interface ConfirmationRejectedProps {
+  children?: React.ReactNode;
+}
+
+export const ConfirmationRejected: React.FC<ConfirmationRejectedProps> = ({ children }) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'rejected') return null;
+  return <>{children}</>;
+};
+ConfirmationRejected.displayName = 'ConfirmationRejected';
+
+/* ─── ConfirmationActions — visible only when pending ────────────── */
+
+export type ConfirmationActionsProps = React.HTMLAttributes<HTMLDivElement>;
+
+export const ConfirmationActions: React.FC<ConfirmationActionsProps> = ({
+  className,
+  ...props
+}) => {
+  const { approval } = useConfirmation();
+  if (approval !== 'pending') return null;
+
+  return (
+    <div
+      data-slot="confirmation-actions"
+      className={cn('flex items-center justify-end gap-2 self-end', className)}
+      {...props}
+    />
+  );
+};
+ConfirmationActions.displayName = 'ConfirmationActions';
+
+/* ─── ConfirmationAction — styled button ─────────────────────────── */
+
+export type ConfirmationActionProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+  variant?: 'default' | 'outline' | 'ghost' | 'destructive';
+};
+
+export const ConfirmationAction: React.FC<ConfirmationActionProps> = ({
+  variant = 'default',
+  ...props
+}) => (
+  <Button className="h-8 px-3 text-sm" variant={variant} type="button" {...props} />
+);
+ConfirmationAction.displayName = 'ConfirmationAction';
+
+export { useConfirmation };

src/shared/view/ui/DarkModeToggle.tsx

@@ -1,4 +1,5 @@
 import { Moon, Sun } from 'lucide-react';
+
 import { useTheme } from '../../../contexts/ThemeContext';
 import { cn } from '../../../lib/utils';
 

src/shared/view/ui/Dialog.tsx

@@ -0,0 +1,217 @@
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+
+import { cn } from '../../../lib/utils';
+
+interface DialogContextValue {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  triggerRef: React.MutableRefObject<HTMLElement | null>;
+}
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+function useDialog() {
+  const ctx = React.useContext(DialogContext);
+  if (!ctx) throw new Error('Dialog components must be used within <Dialog>');
+  return ctx;
+}
+
+interface DialogProps {
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}
+
+const Dialog: React.FC<DialogProps> = ({ open: controlledOpen, onOpenChange: controlledOnOpenChange, defaultOpen = false, children }) => {
+  const [internalOpen, setInternalOpen] = React.useState(defaultOpen);
+  const triggerRef = React.useRef<HTMLElement | null>(null) as React.MutableRefObject<HTMLElement | null>;
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : internalOpen;
+  const onOpenChange = React.useCallback(
+    (next: boolean) => {
+      if (!isControlled) setInternalOpen(next);
+      controlledOnOpenChange?.(next);
+    },
+    [isControlled, controlledOnOpenChange]
+  );
+
+  const value = React.useMemo(() => ({ open, onOpenChange, triggerRef }), [open, onOpenChange]);
+
+  return <DialogContext.Provider value={value}>{children}</DialogContext.Provider>;
+};
+
+const DialogTrigger = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & { asChild?: boolean }>(
+  ({ onClick, children, asChild, ...props }, ref) => {
+    const { onOpenChange, triggerRef } = useDialog();
+
+    const handleClick = React.useCallback(
+      (e: React.MouseEvent<HTMLButtonElement>) => {
+        onOpenChange(true);
+        onClick?.(e);
+      },
+      [onOpenChange, onClick]
+    );
+
+    // asChild: clone child element and compose onClick + capture ref
+    if (asChild && React.isValidElement(children)) {
+      const child = children as React.ReactElement<any>;
+      return React.cloneElement(child, {
+        onClick: (e: React.MouseEvent<HTMLElement>) => {
+          onOpenChange(true);
+          child.props.onClick?.(e);
+        },
+        ref: (node: HTMLElement | null) => {
+          triggerRef.current = node;
+          // Forward the outer ref
+          if (typeof ref === 'function') ref(node as any);
+          else if (ref) (ref as React.MutableRefObject<any>).current = node;
+        },
+      });
+    }
+
+    return (
+      <button
+        ref={(node) => {
+          triggerRef.current = node;
+          if (typeof ref === 'function') ref(node);
+          else if (ref) ref.current = node;
+        }}
+        type="button"
+        onClick={handleClick}
+        {...props}
+      >
+        {children}
+      </button>
+    );
+  }
+);
+DialogTrigger.displayName = 'DialogTrigger';
+
+interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  onEscapeKeyDown?: () => void;
+  onPointerDownOutside?: () => void;
+}
+
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), input:not([disabled]), textarea:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+
+const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(
+  ({ className, children, onEscapeKeyDown, onPointerDownOutside, ...props }, ref) => {
+    const { open, onOpenChange, triggerRef } = useDialog();
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
+    const previousFocusRef = React.useRef<HTMLElement | null>(null);
+
+    // Save the element that had focus before opening, restore on close
+    React.useEffect(() => {
+      if (open) {
+        previousFocusRef.current = document.activeElement as HTMLElement;
+      } else if (previousFocusRef.current) {
+        // Prefer the trigger, fall back to whatever was focused before
+        const restoreTarget = triggerRef.current || previousFocusRef.current;
+        restoreTarget?.focus();
+        previousFocusRef.current = null;
+      }
+    }, [open, triggerRef]);
+
+    React.useEffect(() => {
+      if (!open) return;
+
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          e.stopPropagation();
+          onEscapeKeyDown?.();
+          onOpenChange(false);
+          return;
+        }
+
+        // Focus trap: Tab / Shift+Tab cycle within the dialog
+        if (e.key === 'Tab' && contentRef.current) {
+          const focusable = Array.from(
+            contentRef.current.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR)
+          );
+          if (focusable.length === 0) return;
+
+          const first = focusable[0];
+          const last = focusable[focusable.length - 1];
+
+          if (e.shiftKey && document.activeElement === first) {
+            e.preventDefault();
+            last.focus();
+          } else if (!e.shiftKey && document.activeElement === last) {
+            e.preventDefault();
+            first.focus();
+          }
+        }
+      };
+
+      document.addEventListener('keydown', handleKeyDown, true);
+
+      // Prevent body scroll
+      const prev = document.body.style.overflow;
+      document.body.style.overflow = 'hidden';
+
+      return () => {
+        document.removeEventListener('keydown', handleKeyDown, true);
+        document.body.style.overflow = prev;
+      };
+    }, [open, onOpenChange, onEscapeKeyDown]);
+
+    // Auto-focus first focusable element on open
+    React.useEffect(() => {
+      if (open && contentRef.current) {
+        // Small delay to let the portal render
+        requestAnimationFrame(() => {
+          const first = contentRef.current?.querySelector<HTMLElement>(FOCUSABLE_SELECTOR);
+          first?.focus();
+        });
+      }
+    }, [open]);
+
+    if (!open) return null;
+
+    return createPortal(
+      <div className="fixed inset-0 z-50">
+        {/* Overlay */}
+        <div
+          className="fixed inset-0 animate-dialog-overlay-show bg-black/50 backdrop-blur-sm"
+          onClick={() => {
+            onPointerDownOutside?.();
+            onOpenChange(false);
+          }}
+          aria-hidden
+        />
+        {/* Content */}
+        <div
+          ref={(node) => {
+            contentRef.current = node;
+            if (typeof ref === 'function') ref(node);
+            else if (ref) (ref as React.MutableRefObject<HTMLDivElement | null>).current = node;
+          }}
+          role="dialog"
+          aria-modal="true"
+          className={cn(
+            'fixed left-1/2 top-1/2 z-50 w-full max-w-lg -translate-x-1/2 -translate-y-1/2',
+            'rounded-xl border bg-popover text-popover-foreground shadow-lg',
+            'animate-dialog-content-show',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </div>,
+      document.body
+    );
+  }
+);
+DialogContent.displayName = 'DialogContent';
+
+const DialogTitle = React.forwardRef<HTMLHeadingElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h2 ref={ref} className={cn('sr-only', className)} {...props} />
+  )
+);
+DialogTitle.displayName = 'DialogTitle';
+
+export { Dialog, DialogTrigger, DialogContent, DialogTitle, useDialog };

src/shared/view/ui/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '../../../lib/utils';
 
 type InputProps = React.InputHTMLAttributes<HTMLInputElement>;

src/shared/view/ui/LanguageSelector.tsx

@@ -2,6 +2,7 @@
 
 import { useTranslation } from 'react-i18next';
 import { Languages } from 'lucide-react';
+
 import { languages } from '../../../i18n/languages';
 
 type LanguageSelectorProps = {

src/shared/view/ui/PillBar.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react';
+
 import { cn } from '../../../lib/utils';
 
 /* ── Container ─────────────────────────────────────────────────── */

src/shared/view/ui/PromptInput.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import * as React from 'react';
+import { SendHorizonalIcon, SquareIcon } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+import { Button } from './Button';
+import Tooltip from './Tooltip';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+type PromptInputStatus = 'ready' | 'submitted' | 'streaming' | 'error';
+
+interface PromptInputContextValue {
+  status: PromptInputStatus;
+}
+
+const PromptInputContext = React.createContext<PromptInputContextValue | null>(null);
+
+const usePromptInput = () => {
+  const context = React.useContext(PromptInputContext);
+  if (!context) {
+    throw new Error('PromptInput components must be used within PromptInput');
+  }
+  return context;
+};
+
+/* ─── PromptInput (root form) ────────────────────────────────────── */
+
+export interface PromptInputProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  status?: PromptInputStatus;
+}
+
+export const PromptInput = React.forwardRef<HTMLFormElement, PromptInputProps>(
+  ({ className, status = 'ready', children, ...props }, ref) => {
+    const contextValue = React.useMemo(() => ({ status }), [status]);
+
+    return (
+      <PromptInputContext.Provider value={contextValue}>
+        <form
+          ref={ref}
+          data-slot="prompt-input"
+          className={cn(
+            'relative overflow-hidden rounded-xl border border-border/50 bg-card/80 shadow-sm backdrop-blur-sm transition-all duration-200 focus-within:border-primary/30 focus-within:shadow-md focus-within:ring-1 focus-within:ring-primary/15',
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </form>
+      </PromptInputContext.Provider>
+    );
+  }
+);
+PromptInput.displayName = 'PromptInput';
+
+/* ─── PromptInputHeader ──────────────────────────────────────────── */
+
+export const PromptInputHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="prompt-input-header"
+    className={cn('px-3 pt-3', className)}
+    {...props}
+  />
+));
+PromptInputHeader.displayName = 'PromptInputHeader';
+
+/* ─── PromptInputBody ────────────────────────────────────────────── */
+
+export const PromptInputBody = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="prompt-input-body"
+    className={cn('relative', className)}
+    {...props}
+  />
+));
+PromptInputBody.displayName = 'PromptInputBody';
+
+/* ─── PromptInputTextarea ────────────────────────────────────────── */
+
+export const PromptInputTextarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    data-slot="prompt-input-textarea"
+    className={cn(
+      'chat-input-placeholder block max-h-[40vh] w-full resize-none overflow-y-auto bg-transparent px-4 py-2 text-sm leading-6 text-foreground placeholder-muted-foreground/50 focus:outline-none sm:max-h-[300px]',
+      className
+    )}
+    {...props}
+  />
+));
+PromptInputTextarea.displayName = 'PromptInputTextarea';
+
+/* ─── PromptInputFooter ──────────────────────────────────────────── */
+
+export const PromptInputFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="prompt-input-footer"
+    className={cn('flex items-center justify-between border-t border-border/30 px-3 py-2', className)}
+    {...props}
+  />
+));
+PromptInputFooter.displayName = 'PromptInputFooter';
+
+/* ─── PromptInputTools ───────────────────────────────────────────── */
+
+export const PromptInputTools = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="prompt-input-tools"
+    className={cn('flex items-center gap-1', className)}
+    {...props}
+  />
+));
+PromptInputTools.displayName = 'PromptInputTools';
+
+/* ─── PromptInputButton ──────────────────────────────────────────── */
+
+export interface PromptInputButtonTooltip {
+  content: React.ReactNode;
+  shortcut?: string;
+  side?: 'top' | 'bottom' | 'left' | 'right';
+}
+
+export interface PromptInputButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  tooltip?: PromptInputButtonTooltip;
+}
+
+export const PromptInputButton = React.forwardRef<HTMLButtonElement, PromptInputButtonProps>(
+  ({ className, tooltip, children, ...props }, ref) => {
+    const button = (
+      <Button
+        ref={ref}
+        type="button"
+        variant="ghost"
+        size="icon"
+        className={cn('h-8 w-8 [&_svg]:size-4', className)}
+        {...props}
+      >
+        {children}
+      </Button>
+    );
+
+    if (tooltip) {
+      return (
+        <Tooltip
+          content={
+            tooltip.shortcut ? (
+              <span className="flex items-center gap-1.5">
+                {tooltip.content}
+                <kbd className="rounded bg-white/20 px-1 text-[10px]">{tooltip.shortcut}</kbd>
+              </span>
+            ) : (
+              tooltip.content
+            )
+          }
+          position={tooltip.side ?? 'top'}
+        >
+          {button}
+        </Tooltip>
+      );
+    }
+
+    return button;
+  }
+);
+PromptInputButton.displayName = 'PromptInputButton';
+
+/* ─── PromptInputSubmit ──────────────────────────────────────────── */
+
+export interface PromptInputSubmitProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  status?: PromptInputStatus;
+}
+
+export const PromptInputSubmit = React.forwardRef<HTMLButtonElement, PromptInputSubmitProps>(
+  ({ className, status: statusProp, children, ...props }, ref) => {
+    const context = React.useContext(PromptInputContext);
+    const status = statusProp ?? context?.status ?? 'ready';
+    const isActive = status === 'submitted' || status === 'streaming';
+
+    return (
+      <Button
+        ref={ref}
+        type={isActive ? 'button' : 'submit'}
+        variant="default"
+        size="icon"
+        className={cn('h-8 w-8 rounded-lg', className)}
+        {...props}
+      >
+        {children ?? (isActive ? (
+          <SquareIcon className="h-3.5 w-3.5 fill-current" />
+        ) : (
+          <SendHorizonalIcon className="h-4 w-4" />
+        ))}
+      </Button>
+    );
+  }
+);
+PromptInputSubmit.displayName = 'PromptInputSubmit';
+
+export { usePromptInput };

src/shared/view/ui/Queue.tsx

@@ -0,0 +1,122 @@
+import * as React from 'react';
+import { cn } from '../../../lib/utils';
+
+/* ─── Types ──────────────────────────────────────────────────────── */
+
+export type QueueItemStatus = 'completed' | 'in_progress' | 'pending';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+interface QueueItemContextValue {
+  status: QueueItemStatus;
+}
+
+const QueueItemContext = React.createContext<QueueItemContextValue | null>(null);
+
+function useQueueItem() {
+  const ctx = React.useContext(QueueItemContext);
+  if (!ctx) throw new Error('QueueItem sub-components must be used within <QueueItem>');
+  return ctx;
+}
+
+/* ─── Queue ──────────────────────────────────────────────────────── */
+
+export const Queue = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="queue"
+      role="list"
+      className={cn('space-y-0.5', className)}
+      {...props}
+    />
+  ),
+);
+Queue.displayName = 'Queue';
+
+/* ─── QueueItem ──────────────────────────────────────────────────── */
+
+export interface QueueItemProps extends React.HTMLAttributes<HTMLDivElement> {
+  status?: QueueItemStatus;
+}
+
+export const QueueItem = React.forwardRef<HTMLDivElement, QueueItemProps>(
+  ({ status = 'pending', className, children, ...props }, ref) => {
+    const value = React.useMemo(() => ({ status }), [status]);
+
+    return (
+      <QueueItemContext.Provider value={value}>
+        <div
+          ref={ref}
+          data-slot="queue-item"
+          data-status={status}
+          role="listitem"
+          className={cn('flex items-start gap-2 py-0.5', className)}
+          {...props}
+        >
+          {children}
+        </div>
+      </QueueItemContext.Provider>
+    );
+  },
+);
+QueueItem.displayName = 'QueueItem';
+
+/* ─── QueueItemIndicator ─────────────────────────────────────────── */
+
+export const QueueItemIndicator = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { status } = useQueueItem();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="queue-item-indicator"
+        aria-hidden="true"
+        className={cn('mt-0.5 flex h-3.5 w-3.5 flex-shrink-0 items-center justify-center', className)}
+        {...props}
+      >
+        {status === 'completed' && (
+          <svg className="h-3.5 w-3.5 text-green-500 dark:text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+          </svg>
+        )}
+        {status === 'in_progress' && (
+          <span className="h-2 w-2 animate-pulse rounded-full bg-blue-500 dark:bg-blue-400" />
+        )}
+        {status === 'pending' && (
+          <svg className="h-3.5 w-3.5 text-muted-foreground/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <circle cx="12" cy="12" r="9" strokeWidth={2} />
+          </svg>
+        )}
+      </div>
+    );
+  },
+);
+QueueItemIndicator.displayName = 'QueueItemIndicator';
+
+/* ─── QueueItemContent ───────────────────────────────────────────── */
+
+export const QueueItemContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    const { status } = useQueueItem();
+
+    return (
+      <div
+        ref={ref}
+        data-slot="queue-item-content"
+        className={cn(
+          'min-w-0 flex-1 text-xs',
+          status === 'completed' && 'text-muted-foreground line-through',
+          status === 'in_progress' && 'font-medium text-foreground',
+          status === 'pending' && 'text-foreground',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
+  },
+);
+QueueItemContent.displayName = 'QueueItemContent';

src/shared/view/ui/Reasoning.tsx

@@ -0,0 +1,198 @@
+"use client";
+
+import * as React from 'react';
+import { BrainIcon, ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../../lib/utils';
+import { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+import { Shimmer } from './Shimmer';
+
+/* ─── Context ────────────────────────────────────────────────────── */
+
+interface ReasoningContextValue {
+  isStreaming: boolean;
+  isOpen: boolean;
+  setIsOpen: (open: boolean) => void;
+  duration: number | undefined;
+}
+
+const ReasoningContext = React.createContext<ReasoningContextValue | null>(null);
+
+export const useReasoning = () => {
+  const context = React.useContext(ReasoningContext);
+  if (!context) {
+    throw new Error('Reasoning components must be used within Reasoning');
+  }
+  return context;
+};
+
+/* ─── Reasoning (root) ───────────────────────────────────────────── */
+
+const AUTO_CLOSE_DELAY = 1000;
+const MS_IN_S = 1000;
+
+export interface ReasoningProps extends React.HTMLAttributes<HTMLDivElement> {
+  isStreaming?: boolean;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  duration?: number;
+}
+
+export const Reasoning = React.memo<ReasoningProps>(
+  ({
+    className,
+    isStreaming = false,
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    duration: durationProp,
+    children,
+    ...props
+  }) => {
+    const resolvedDefaultOpen = defaultOpen ?? isStreaming;
+    const isExplicitlyClosed = defaultOpen === false;
+
+    // Controllable open state
+    const [internalOpen, setInternalOpen] = React.useState(resolvedDefaultOpen);
+    const isControlled = controlledOpen !== undefined;
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const setIsOpen = React.useCallback(
+      (next: boolean) => {
+        if (!isControlled) setInternalOpen(next);
+        onOpenChange?.(next);
+      },
+      [isControlled, onOpenChange]
+    );
+
+    // Duration tracking
+    const [duration, setDuration] = React.useState<number | undefined>(durationProp);
+    const hasEverStreamedRef = React.useRef(isStreaming);
+    const [hasAutoClosed, setHasAutoClosed] = React.useState(false);
+    const startTimeRef = React.useRef<number | null>(null);
+
+    // Sync external duration prop
+    React.useEffect(() => {
+      if (durationProp !== undefined) setDuration(durationProp);
+    }, [durationProp]);
+
+    // Track streaming start/end for duration
+    React.useEffect(() => {
+      if (isStreaming) {
+        hasEverStreamedRef.current = true;
+        if (startTimeRef.current === null) {
+          startTimeRef.current = Date.now();
+        }
+      } else if (startTimeRef.current !== null) {
+        setDuration(Math.ceil((Date.now() - startTimeRef.current) / MS_IN_S));
+        startTimeRef.current = null;
+      }
+    }, [isStreaming]);
+
+    // Auto-open when streaming starts
+    React.useEffect(() => {
+      if (isStreaming && !isOpen && !isExplicitlyClosed) {
+        setIsOpen(true);
+      }
+    }, [isStreaming, isOpen, setIsOpen, isExplicitlyClosed]);
+
+    // Auto-close after streaming ends
+    React.useEffect(() => {
+      if (hasEverStreamedRef.current && !isStreaming && isOpen && !hasAutoClosed) {
+        const timer = setTimeout(() => {
+          setIsOpen(false);
+          setHasAutoClosed(true);
+        }, AUTO_CLOSE_DELAY);
+        return () => clearTimeout(timer);
+      }
+    }, [isStreaming, isOpen, setIsOpen, hasAutoClosed]);
+
+    const contextValue = React.useMemo(
+      () => ({ duration, isOpen, isStreaming, setIsOpen }),
+      [duration, isOpen, isStreaming, setIsOpen]
+    );
+
+    return (
+      <ReasoningContext.Provider value={contextValue}>
+        <Collapsible
+          open={isOpen}
+          onOpenChange={setIsOpen}
+          className={cn('not-prose', className)}
+          {...props}
+        >
+          {children}
+        </Collapsible>
+      </ReasoningContext.Provider>
+    );
+  }
+);
+Reasoning.displayName = 'Reasoning';
+
+/* ─── ReasoningTrigger ───────────────────────────────────────────── */
+
+export interface ReasoningTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  getThinkingMessage?: (isStreaming: boolean, duration?: number) => React.ReactNode;
+}
+
+const defaultGetThinkingMessage = (isStreaming: boolean, duration?: number): React.ReactNode => {
+  if (isStreaming || duration === 0) {
+    return <Shimmer>Thinking...</Shimmer>;
+  }
+  if (duration === undefined) {
+    return <p>Thought for a few seconds</p>;
+  }
+  return <p>Thought for {duration} seconds</p>;
+};
+
+export const ReasoningTrigger = React.memo<ReasoningTriggerProps>(
+  ({
+    className,
+    children,
+    getThinkingMessage = defaultGetThinkingMessage,
+    ...props
+  }) => {
+    const { isStreaming, isOpen, duration } = useReasoning();
+
+    return (
+      <CollapsibleTrigger
+        className={cn(
+          'flex w-full items-center gap-2 text-sm text-muted-foreground transition-colors hover:text-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children ?? (
+          <>
+            <BrainIcon className="h-4 w-4" />
+            {getThinkingMessage(isStreaming, duration)}
+            <ChevronDownIcon
+              className={cn(
+                'h-4 w-4 transition-transform',
+                isOpen ? 'rotate-180' : 'rotate-0'
+              )}
+            />
+          </>
+        )}
+      </CollapsibleTrigger>
+    );
+  }
+);
+ReasoningTrigger.displayName = 'ReasoningTrigger';
+
+/* ─── ReasoningContent ───────────────────────────────────────────── */
+
+export interface ReasoningContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  children: React.ReactNode;
+}
+
+export const ReasoningContent = React.memo<ReasoningContentProps>(
+  ({ className, children, ...props }) => (
+    <CollapsibleContent
+      className={cn('mt-4 text-sm text-muted-foreground', className)}
+      {...props}
+    >
+      {children}
+    </CollapsibleContent>
+  )
+);
+ReasoningContent.displayName = 'ReasoningContent';

src/shared/view/ui/ScrollArea.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+
 import { cn } from '../../../lib/utils';
 
 type ScrollAreaProps = React.HTMLAttributes<HTMLDivElement>;

src/shared/view/ui/Shimmer.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+
+import { cn } from '../../../lib/utils';
+
+interface ShimmerProps {
+  children: string;
+  className?: string;
+  as?: React.ElementType;
+}
+
+const Shimmer = React.memo<ShimmerProps>(({ children, className, as: Component = 'span' }) => {
+  return (
+    <Component
+      className={cn(
+        'animate-shimmer inline-block bg-[length:250%_100%] bg-clip-text text-transparent',
+        'bg-[linear-gradient(90deg,transparent_33%,hsl(var(--foreground))_50%,transparent_67%),linear-gradient(hsl(var(--muted-foreground)),hsl(var(--muted-foreground)))]',
+        className
+      )}
+    >
+      {children}
+    </Component>
+  );
+});
+Shimmer.displayName = 'Shimmer';
+
+export { Shimmer };

src/shared/view/ui/Tooltip.tsx

@@ -1,5 +1,6 @@
 import { type ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
+
 import { cn } from '../../../lib/utils';
 
 type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';

src/shared/view/ui/index.ts

@@ -1,7 +1,18 @@
+export { Alert, AlertTitle, AlertDescription, alertVariants } from './Alert';
 export { Badge, badgeVariants } from './Badge';
 export { Button, buttonVariants } from './Button';
+export { Confirmation, ConfirmationTitle, ConfirmationRequest, ConfirmationAccepted, ConfirmationRejected, ConfirmationActions, ConfirmationAction } from './Confirmation';
+export { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, CardAction } from './Card';
+export { Collapsible, CollapsibleTrigger, CollapsibleContent } from './Collapsible';
+export { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem, CommandSeparator } from './Command';
 export { default as DarkModeToggle } from './DarkModeToggle';
+export { Dialog, DialogTrigger, DialogContent, DialogTitle } from './Dialog';
 export { Input } from './Input';
 export { ScrollArea } from './ScrollArea';
+export { Reasoning, ReasoningTrigger, ReasoningContent, useReasoning } from './Reasoning';
+export { Shimmer } from './Shimmer';
 export { default as Tooltip } from './Tooltip';
+export { PromptInput, PromptInputHeader, PromptInputBody, PromptInputTextarea, PromptInputFooter, PromptInputTools, PromptInputButton, PromptInputSubmit } from './PromptInput';
 export { PillBar, Pill } from './PillBar';
+export { Queue, QueueItem, QueueItemIndicator, QueueItemContent } from './Queue';
+export type { QueueItemStatus } from './Queue';

tailwind.config.js

@@ -58,6 +58,25 @@ export default {
         'safe-area-inset-bottom': 'env(safe-area-inset-bottom)',
         'mobile-nav': 'var(--mobile-nav-total)',
       },
+      keyframes: {
+        shimmer: {
+          '0%': { backgroundPosition: '200% 0' },
+          '100%': { backgroundPosition: '-200% 0' },
+        },
+        'dialog-overlay-show': {
+          from: { opacity: '0' },
+          to: { opacity: '1' },
+        },
+        'dialog-content-show': {
+          from: { opacity: '0', transform: 'translate(-50%, -48%) scale(0.96)' },
+          to: { opacity: '1', transform: 'translate(-50%, -50%) scale(1)' },
+        },
+      },
+      animation: {
+        shimmer: 'shimmer 2s linear infinite',
+        'dialog-overlay-show': 'dialog-overlay-show 150ms ease-out',
+        'dialog-content-show': 'dialog-content-show 150ms ease-out',
+      },
     },
   },
   plugins: [require('@tailwindcss/typography')],