feat(chat): align command, shell, and subtask UX (#444)

* feat: reload interface after skills operations

- Adds configurable delay before interface reload after skills changes
- Introduces polling to wait for application health after reload
- Updates UI to show reload message when installing or modifying skills

* feat: distinguish skills from commands in UI

- Displays skill badge for commands that are registered skills
- Prevents editing skills through command management interface
- Triggers interface reload after skill operations to reflect changes

* feat(chat): align command and subtask UX with opencode parity

Route commands/shell via parity paths, render delegated subtasks cleanly, and surface child-session permission/question prompts in parent chat.

* fix(ProjectEditDialog): improve layout consistency

* fix: update task icon and session handling in ToolPart

* feat(chat): add shell-mode input and collapse shell bridge output

Switch leading ! to shell mode UX and fold synthetic shell bridge assistant messages into the user shell bubble with inline output actions.

* fix: remove AI agent icon from file mention autocomplete

* fix: remove unused icon import from file mention component

packages/ui/src/components/chat/ChatContainer.tsx

@@ -24,6 +24,49 @@ const EMPTY_PERMISSIONS: PermissionRequest[] = [];
 const EMPTY_QUESTIONS: QuestionRequest[] = [];
 const IDLE_SESSION_STATUS = { type: 'idle' as const };
 
+const collectVisibleSessionIdsForBlockingRequests = (
+    sessions: Array<{ id: string; parentID?: string }> | undefined,
+    currentSessionId: string | null
+): string[] => {
+    if (!currentSessionId) return [];
+    if (!Array.isArray(sessions) || sessions.length === 0) return [currentSessionId];
+
+    const current = sessions.find((session) => session.id === currentSessionId);
+    if (!current) return [currentSessionId];
+
+    // Opencode parity: when viewing a child session, permission/question prompts are handled in parent thread.
+    if (current.parentID) {
+        return [];
+    }
+
+    const childIds = sessions
+        .filter((session) => session.parentID === currentSessionId)
+        .map((session) => session.id);
+
+    return [currentSessionId, ...childIds];
+};
+
+const flattenBlockingRequests = <T extends { id: string }>(
+    source: Map<string, T[]>,
+    sessionIds: string[]
+): T[] => {
+    if (sessionIds.length === 0) return [];
+    const seen = new Set<string>();
+    const result: T[] = [];
+
+    for (const sessionId of sessionIds) {
+        const entries = source.get(sessionId);
+        if (!entries || entries.length === 0) continue;
+        for (const entry of entries) {
+            if (seen.has(entry.id)) continue;
+            seen.add(entry.id);
+            result.push(entry);
+        }
+    }
+
+    return result;
+};
+
 export const ChatContainer: React.FC = () => {
     const {
         currentSessionId,
@@ -67,20 +110,32 @@ export const ChatContainer: React.FC = () => {
         )
     );
 
-    const sessionPermissions = useSessionStore(
-        React.useCallback(
-            (state) => (currentSessionId ? state.permissions.get(currentSessionId) ?? EMPTY_PERMISSIONS : EMPTY_PERMISSIONS),
-            [currentSessionId]
-        )
+    const blockingRequestState = useSessionStore(
+        useShallow((state) => ({
+            sessions: state.sessions,
+            permissions: state.permissions,
+            questions: state.questions,
+        }))
     );
 
-    const sessionQuestions = useSessionStore(
-        React.useCallback(
-            (state) => (currentSessionId ? state.questions.get(currentSessionId) ?? EMPTY_QUESTIONS : EMPTY_QUESTIONS),
-            [currentSessionId]
-        )
+    const scopedSessionIds = React.useMemo(
+        () => collectVisibleSessionIdsForBlockingRequests(
+            blockingRequestState.sessions.map((session) => ({ id: session.id, parentID: session.parentID })),
+            currentSessionId,
+        ),
+        [blockingRequestState.sessions, currentSessionId]
     );
 
+    const sessionPermissions = React.useMemo(() => {
+        if (scopedSessionIds.length === 0) return EMPTY_PERMISSIONS;
+        return flattenBlockingRequests(blockingRequestState.permissions, scopedSessionIds);
+    }, [blockingRequestState.permissions, scopedSessionIds]);
+
+    const sessionQuestions = React.useMemo(() => {
+        if (scopedSessionIds.length === 0) return EMPTY_QUESTIONS;
+        return flattenBlockingRequests(blockingRequestState.questions, scopedSessionIds);
+    }, [blockingRequestState.questions, scopedSessionIds]);
+
     const memoryState = useSessionStore(
         React.useCallback(
             (state) => (currentSessionId ? state.sessionMemoryState.get(currentSessionId) ?? null : null),

packages/ui/src/components/chat/ChatInput.tsx

@@ -20,7 +20,6 @@ import { AttachedFilesList } from './FileAttachment';
 import { QueuedMessageChips } from './QueuedMessageChips';
 import { FileMentionAutocomplete, type FileMentionHandle } from './FileMentionAutocomplete';
 import { CommandAutocomplete, type CommandAutocompleteHandle } from './CommandAutocomplete';
-import { AgentMentionAutocomplete, type AgentMentionAutocompleteHandle } from './AgentMentionAutocomplete';
 import { SkillAutocomplete, type SkillAutocompleteHandle } from './SkillAutocomplete';
 import { cn } from '@/lib/utils';
 import { ServerFilePicker } from './ServerFilePicker';
@@ -77,13 +76,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         }
         return draft;
     });
+    const [inputMode, setInputMode] = React.useState<'normal' | 'shell'>('normal');
     const [isDragging, setIsDragging] = React.useState(false);
     const [showFileMention, setShowFileMention] = React.useState(false);
     const [mentionQuery, setMentionQuery] = React.useState('');
     const [showCommandAutocomplete, setShowCommandAutocomplete] = React.useState(false);
     const [commandQuery, setCommandQuery] = React.useState('');
-    const [showAgentAutocomplete, setShowAgentAutocomplete] = React.useState(false);
-    const [agentQuery, setAgentQuery] = React.useState('');
     const [autocompleteTab, setAutocompleteTab] = React.useState<'commands' | 'agents' | 'files'>('commands');
     const [showSkillAutocomplete, setShowSkillAutocomplete] = React.useState(false);
     const [skillQuery, setSkillQuery] = React.useState('');
@@ -98,7 +96,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     const canAcceptDropRef = React.useRef(false);
     const mentionRef = React.useRef<FileMentionHandle>(null);
     const commandRef = React.useRef<CommandAutocompleteHandle>(null);
-    const agentRef = React.useRef<AgentMentionAutocompleteHandle>(null);
     const skillRef = React.useRef<SkillAutocompleteHandle>(null);
 
     const sendMessage = useSessionStore((state) => state.sendMessage);
@@ -210,6 +207,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     React.useEffect(() => {
         if (prevSessionIdRef.current !== currentSessionId) {
             prevSessionIdRef.current = currentSessionId;
+            setInputMode('normal');
             
             if (!persistChatDraft) {
                 // Clear draft when switching sessions if persist is disabled
@@ -542,9 +540,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             textareaRef.current?.blur();
         }
 
-        // Handle slash commands locally before sending
+        // Handle local slash commands only in normal mode
         const normalizedCommand = primaryText.trimStart();
-        if (normalizedCommand.startsWith('/')) {
+        if (inputMode === 'normal' && normalizedCommand.startsWith('/')) {
             const commandName = normalizedCommand
                 .slice(1)
                 .trim()
@@ -571,28 +569,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                 setMessage('');
                 return; // Don't send to assistant
             }
-            // /compact - call SDK summarize endpoint
-            else if (commandName === 'compact' && currentSessionId) {
-                try {
-                    const { opencodeClient } = await import('@/lib/opencode/client');
-                    const directory = opencodeClient.getDirectory();
-                    const response = await opencodeClient.getApiClient().session.summarize({
-                        sessionID: currentSessionId,
-                        directory: directory || undefined,
-                        providerID: currentProviderId,
-                        modelID: currentModelId,
-                    });
-                    if (response.error) {
-                        throw new Error('Failed to compact session');
-                    }
-                    scrollToBottom?.({ instant: true, force: true });
-                } catch (error) {
-                    console.error('Failed to compact session:', error);
-                    toast.error('Failed to compact session');
-                }
-                setMessage('');
-                return; // Don't send to assistant
-            }
         }
 
         // Collect all attachments for error recovery
@@ -609,7 +585,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             primaryAttachments,
             agentMentionName,
             additionalParts.length > 0 ? additionalParts : undefined,
-            currentVariant
+            currentVariant,
+            inputMode
         ).catch((error: unknown) => {
             const rawMessage =
                 error instanceof Error
@@ -663,13 +640,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
 
     // Primary action for send button - respects queue mode setting
     const handlePrimaryAction = React.useCallback(() => {
-        const canQueue = hasContent && currentSessionId && sessionPhase !== 'idle';
+        const canQueue = inputMode === 'normal' && hasContent && currentSessionId && sessionPhase !== 'idle';
         if (queueModeEnabled && canQueue) {
             handleQueueMessage();
         } else {
             void handleSubmitRef.current();
         }
-    }, [hasContent, currentSessionId, sessionPhase, queueModeEnabled, handleQueueMessage]);
+    }, [inputMode, hasContent, currentSessionId, sessionPhase, queueModeEnabled, handleQueueMessage]);
 
     // Auto-send queued messages when session becomes idle (but not after abort)
     React.useEffect(() => {
@@ -706,6 +683,18 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         // Uses keyCode === 229 fallback for WebKit where compositionend fires before keydown.
         if (isIMECompositionEvent(e)) return;
 
+        if (inputMode === 'shell' && e.key === 'Escape') {
+            e.preventDefault();
+            setInputMode('normal');
+            return;
+        }
+
+        if (inputMode === 'shell' && e.key === 'Backspace' && message.length === 0) {
+            e.preventDefault();
+            setInputMode('normal');
+            return;
+        }
+
         if (showCommandAutocomplete && commandRef.current) {
             if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
                 e.preventDefault();
@@ -714,14 +703,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             }
         }
 
-        if (showAgentAutocomplete && agentRef.current) {
-            if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
-                e.preventDefault();
-                agentRef.current.handleKeyDown(e.key);
-                return;
-            }
-        }
-
         if (showSkillAutocomplete && skillRef.current) {
             if (e.key === 'Enter' || e.key === 'ArrowUp' || e.key === 'ArrowDown' || e.key === 'Escape' || e.key === 'Tab') {
                 e.preventDefault();
@@ -738,7 +719,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             }
         }
 
-        if (e.key === 'Tab' && !showCommandAutocomplete && !showAgentAutocomplete && !showFileMention) {
+        if (e.key === 'Tab' && !showCommandAutocomplete && !showFileMention) {
             e.preventDefault();
             handleCycleAgent();
             return;
@@ -747,7 +728,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         // Handle ArrowUp/ArrowDown for message history navigation
         // ArrowUp: only when cursor at start (position 0) or input is empty
         // ArrowDown: also works when cursor at end (to cycle forward through history)
-        const isAnyAutocompleteOpen = showCommandAutocomplete || showAgentAutocomplete || showSkillAutocomplete || showFileMention;
+        const isAnyAutocompleteOpen = showCommandAutocomplete || showSkillAutocomplete || showFileMention;
         const cursorAtStart = textareaRef.current?.selectionStart === 0 && textareaRef.current?.selectionEnd === 0;
         const cursorAtEnd = textareaRef.current?.selectionStart === message.length && textareaRef.current?.selectionEnd === message.length;
         const canNavigateHistoryUp = !isAnyAutocompleteOpen && (message.length === 0 || cursorAtStart);
@@ -800,7 +781,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             // Normal mode: Enter sends, Ctrl+Enter queues
             // Note: Queueing only works when there's an existing session (currentSessionId)
             // For new sessions (draft), always send immediately
-            const canQueue = hasContent && currentSessionId && sessionPhase !== 'idle';
+            const canQueue = inputMode === 'normal' && hasContent && currentSessionId && sessionPhase !== 'idle';
 
             if (queueModeEnabled) {
                 if (isCtrlEnter || !canQueue) {
@@ -896,6 +877,13 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     }, [adjustTextareaHeight, message, isMobile]);
 
     const updateAutocompleteState = React.useCallback((value: string, cursorPosition: number) => {
+        if (inputMode === 'shell') {
+            setShowCommandAutocomplete(false);
+            setShowFileMention(false);
+            setShowSkillAutocomplete(false);
+            return;
+        }
+
         if (value.startsWith('/')) {
             const firstSpace = value.indexOf(' ');
             const firstNewline = value.indexOf('\n');
@@ -910,7 +898,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                 setAutocompleteTab('commands');
                 setShowCommandAutocomplete(true);
                 setShowFileMention(false);
-                setShowAgentAutocomplete(false);
                 setShowSkillAutocomplete(false);
                 return;
             }
@@ -920,25 +907,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
 
         const textBeforeCursor = value.substring(0, cursorPosition);
 
-        const lastHashSymbol = textBeforeCursor.lastIndexOf('#');
-        if (lastHashSymbol !== -1) {
-            const charBefore = lastHashSymbol > 0 ? textBeforeCursor[lastHashSymbol - 1] : null;
-            const textAfterHash = textBeforeCursor.substring(lastHashSymbol + 1);
-            const hasSeparator = textAfterHash.includes(' ') || textAfterHash.includes('\n');
-            const isWordBoundary = !charBefore || /\s/.test(charBefore);
-
-            if (isWordBoundary && !hasSeparator) {
-                setAgentQuery(textAfterHash);
-                setAutocompleteTab('agents');
-                setShowAgentAutocomplete(true);
-                setShowFileMention(false);
-                return;
-            }
-        }
-
-        setShowAgentAutocomplete(false);
-        setAgentQuery('');
-
         const lastSlashSymbol = textBeforeCursor.lastIndexOf('/');
         if (lastSlashSymbol !== -1) {
             const charBefore = lastSlashSymbol > 0 ? textBeforeCursor[lastSlashSymbol - 1] : null;
@@ -950,7 +918,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                 setSkillQuery(textAfterSlash);
                 setShowSkillAutocomplete(true);
                 setShowFileMention(false);
-                setShowAgentAutocomplete(false);
                 return;
             }
         }
@@ -960,10 +927,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
 
         const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
         if (lastAtSymbol !== -1) {
+            const charBefore = lastAtSymbol > 0 ? textBeforeCursor[lastAtSymbol - 1] : null;
             const textAfterAt = textBeforeCursor.substring(lastAtSymbol + 1);
-            if (!textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
+            const isWordBoundary = !charBefore || /\s/.test(charBefore);
+            if (isWordBoundary && !textAfterAt.includes(' ') && !textAfterAt.includes('\n')) {
                 setMentionQuery(textAfterAt);
-                setAutocompleteTab('files');
+                setAutocompleteTab('agents');
                 setShowFileMention(true);
             } else {
                 setShowFileMention(false);
@@ -971,12 +940,12 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         } else {
             setShowFileMention(false);
         }
-    }, [setAgentQuery, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowAgentAutocomplete, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete, setSkillQuery]);
+    }, [inputMode, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete, setSkillQuery]);
 
-    const applyAutocompletePrefix = React.useCallback((prefix: '/' | '#' | '@') => {
+    const applyAutocompletePrefix = React.useCallback((prefix: '/' | '@') => {
         const nextMessage = message.length === 0
             ? prefix
-            : (message[0] === '/' || message[0] === '#' || message[0] === '@')
+            : (message[0] === '/' || message[0] === '@')
                 ? `${prefix}${message.slice(1)}`
                 : `${prefix}${message}`;
         setMessage(nextMessage);
@@ -1008,22 +977,20 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         }
         setAutocompleteTab(tab);
         setCommandQuery('');
-        setAgentQuery('');
         setMentionQuery('');
         if (tab === 'commands') {
             applyAutocompletePrefix('/');
         }
         if (tab === 'agents') {
-            applyAutocompletePrefix('#');
+            applyAutocompletePrefix('@');
         }
         if (tab === 'files') {
             applyAutocompletePrefix('@');
         }
         setShowSkillAutocomplete(false);
         setShowCommandAutocomplete(tab === 'commands');
-        setShowAgentAutocomplete(tab === 'agents');
-        setShowFileMention(tab === 'files');
-    }, [applyAutocompletePrefix, isMobile, setAgentQuery, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowAgentAutocomplete, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
+        setShowFileMention(tab === 'agents' || tab === 'files');
+    }, [applyAutocompletePrefix, isMobile, setAutocompleteTab, setCommandQuery, setMentionQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
 
     const handleOpenCommandMenu = React.useCallback(() => {
         if (!isMobile) {
@@ -1047,10 +1014,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         setCommandQuery('');
         setAutocompleteTab('commands');
         setShowCommandAutocomplete(true);
-        setShowAgentAutocomplete(false);
         setShowFileMention(false);
         setShowSkillAutocomplete(false);
-    }, [applyAutocompletePrefix, isMobile, setAutocompleteTab, setCommandQuery, setShowAgentAutocomplete, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
+    }, [applyAutocompletePrefix, isMobile, setAutocompleteTab, setCommandQuery, setShowCommandAutocomplete, setShowFileMention, setShowSkillAutocomplete]);
 
     const insertTextAtSelection = React.useCallback((text: string) => {
         if (!text) {
@@ -1087,6 +1053,25 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
     const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         const value = e.target.value;
         const cursorPosition = e.target.selectionStart ?? value.length;
+
+        if (inputMode === 'normal' && value.startsWith('!')) {
+            const shellCommand = value.slice(1);
+            const nextCursor = Math.max(0, cursorPosition - 1);
+            setInputMode('shell');
+            setMessage(shellCommand);
+            adjustTextareaHeight();
+            setShowCommandAutocomplete(false);
+            setShowSkillAutocomplete(false);
+            setShowFileMention(false);
+            requestAnimationFrame(() => {
+                if (textareaRef.current) {
+                    textareaRef.current.selectionStart = nextCursor;
+                    textareaRef.current.selectionEnd = nextCursor;
+                }
+            });
+            return;
+        }
+
         setMessage(value);
         adjustTextareaHeight();
         updateAutocompleteState(value, cursorPosition);
@@ -1186,16 +1171,16 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         const textarea = textareaRef.current;
         const cursorPosition = textarea?.selectionStart ?? message.length;
         const textBeforeCursor = message.substring(0, cursorPosition);
-        const lastHashSymbol = textBeforeCursor.lastIndexOf('#');
+        const lastAtSymbol = textBeforeCursor.lastIndexOf('@');
 
-        if (lastHashSymbol !== -1) {
+        if (lastAtSymbol !== -1) {
             const newMessage =
-                message.substring(0, lastHashSymbol) +
-                `#${agentName} ` +
+                message.substring(0, lastAtSymbol) +
+                `@${agentName} ` +
                 message.substring(cursorPosition);
             setMessage(newMessage);
 
-            const nextCursor = lastHashSymbol + agentName.length + 2;
+            const nextCursor = lastAtSymbol + agentName.length + 2;
             requestAnimationFrame(() => {
                 if (textareaRef.current) {
                     textareaRef.current.selectionStart = nextCursor;
@@ -1207,7 +1192,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         } else if (textareaRef.current) {
             const newMessage =
                 message.substring(0, cursorPosition) +
-                `#${agentName} ` +
+                `@${agentName} ` +
                 message.substring(cursorPosition);
             setMessage(newMessage);
 
@@ -1222,8 +1207,8 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
             });
         }
 
-        setShowAgentAutocomplete(false);
-        setAgentQuery('');
+        setShowFileMention(false);
+        setMentionQuery('');
 
         textareaRef.current?.focus();
     };
@@ -1237,11 +1222,11 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
         if (lastSlashSymbol !== -1) {
             const newMessage =
                 message.substring(0, lastSlashSymbol) +
-                `${skillName} ` +
+                `/${skillName} ` +
                 message.substring(cursorPosition);
             setMessage(newMessage);
 
-            const nextCursor = lastSlashSymbol + skillName.length + 1;
+            const nextCursor = lastSlashSymbol + skillName.length + 2;
             requestAnimationFrame(() => {
                 if (textareaRef.current) {
                     textareaRef.current.selectionStart = nextCursor;
@@ -1914,7 +1899,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                     className={cn(
                         "flex flex-col relative overflow-visible",
                         "border border-border/80",
-                        "focus-within:ring-1 focus-within:ring-primary/50",
+                        "focus-within:ring-1",
+                        inputMode === 'shell'
+                            ? 'focus-within:ring-[var(--status-info)]'
+                            : 'focus-within:ring-primary/50',
                         isDragging && "ring-2 ring-primary ring-offset-2"
                     )}
                     style={{
@@ -1958,18 +1946,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         />
                     )}
                     { }
-                    {showAgentAutocomplete && (
-                        <AgentMentionAutocomplete
-                            ref={agentRef}
-                            searchQuery={agentQuery}
-                            onAgentSelect={handleAgentSelect}
-                            showTabs={isMobile}
-                            activeTab={autocompleteTab}
-                            onTabSelect={handleAutocompleteTabSelect}
-                            onClose={() => setShowAgentAutocomplete(false)}
-                        />
-                    )}
-
                     {showSkillAutocomplete && (
                         <SkillAutocomplete
                             ref={skillRef}
@@ -1985,6 +1961,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                             ref={mentionRef}
                             searchQuery={mentionQuery}
                             onFileSelect={handleFileSelect}
+                            onAgentSelect={handleAgentSelect}
                             showTabs={isMobile}
                             activeTab={autocompleteTab}
                             onTabSelect={handleAutocompleteTabSelect}
@@ -2003,7 +1980,9 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         onDrop={handleDrop}
                         onPointerDownCapture={handleTextareaPointerDownCapture}
                         placeholder={currentSessionId || newSessionDraftOpen
-                            ? "# for agents; @ for files; / for commands"
+                            ? inputMode === 'shell'
+                                ? "Enter shell command..."
+                                : "@ for files/agents; / for commands; ! for shell"
                             : "Select or create a session to start chatting"}
                         disabled={!currentSessionId && !newSessionDraftOpen}
                         autoCorrect={isMobile ? "on" : "off"}
@@ -2012,6 +1991,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({ onOpenSettings, scrollToBo
                         outerClassName="focus-within:ring-0"
                         className={cn(
                             'min-h-[52px] resize-none border-0 px-3 rounded-b-none appearance-none hover:border-transparent bg-transparent',
+                            inputMode === 'shell' && 'font-mono',
                             isMobile ? "py-2.5" : "pt-4 pb-2"
                         )}
                         style={{

packages/ui/src/components/chat/ChatMessage.tsx

@@ -160,6 +160,7 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             const trimmed = text.trim();
             if (trimmed.startsWith('User has requested to enter plan mode')) return true;
             if (trimmed.startsWith('The plan at ')) return true;
+            if (trimmed.startsWith('The following tool was executed by the user')) return true;
             return false;
         };
 
@@ -176,6 +177,12 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
             if (rawPart.type === 'compaction') {
                 return { type: 'text', text: '/compact' } as Part;
             }
+            if (rawPart.type === 'text') {
+                const text = typeof rawPart.text === 'string' ? rawPart.text.trim() : '';
+                if (text.startsWith('The following tool was executed by the user')) {
+                    return { type: 'text', text: '/shell' } as Part;
+                }
+            }
             return part;
         });
     }, [isUser, message.parts]);
@@ -460,10 +467,12 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         }
         const rawValue = partWithName.source && typeof partWithName.source.value === 'string' && partWithName.source.value.trim().length > 0
             ? partWithName.source.value
-            : `#${name}`;
+            : `@${name}`;
         return { name, token: rawValue } satisfies AgentMentionInfo;
     }, [isUser, message.parts]);
 
+    const shouldHideUserMessage = isUser && displayParts.length === 0;
+
     // Message is considered to have an "open step" if info.finish is not yet present
     const hasOpenStep = typeof messageFinish !== 'string';
 
@@ -642,6 +651,30 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
 
     const messageTextContent = React.useMemo(() => {
         if (isUser) {
+            const shellOutputs = displayParts
+                .filter((part): part is Part & { type: 'text'; shellAction?: { output?: unknown } } => part.type === 'text')
+                .map((part) => {
+                    const output = part.shellAction?.output;
+                    return typeof output === 'string' ? output.trim() : '';
+                })
+                .filter((output) => output.length > 0);
+
+            if (shellOutputs.length > 0) {
+                return shellOutputs.join('\n\n');
+            }
+
+            const shellCommands = displayParts
+                .filter((part): part is Part & { type: 'text'; shellAction?: { command?: unknown } } => part.type === 'text')
+                .map((part) => {
+                    const command = part.shellAction?.command;
+                    return typeof command === 'string' ? command.trim() : '';
+                })
+                .filter((command) => command.length > 0);
+
+            if (shellCommands.length > 0) {
+                return shellCommands.join('\n');
+            }
+
             const textParts = displayParts
                 .filter((part): part is Part & { type: 'text'; text?: string; content?: string } => part.type === 'text')
                 .map((part) => {
@@ -885,6 +918,10 @@ const ChatMessage: React.FC<ChatMessageProps> = ({
         };
     }, [allowAnimation, isUser, resolvedAnimationHandlers, shouldReserveAnimationSpace]);
 
+    if (shouldHideUserMessage) {
+        return null;
+    }
+
     return (
         <>
             <div

packages/ui/src/components/chat/CommandAutocomplete.tsx

@@ -3,6 +3,7 @@ import { RiCommandLine, RiFileLine, RiFlashlightLine, RiRefreshLine, RiScissorsL
 import { cn, fuzzyMatch } from '@/lib/utils';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useCommandsStore } from '@/stores/useCommandsStore';
+import { useSkillsStore } from '@/stores/useSkillsStore';
 import { useShallow } from 'zustand/react/shallow';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 
@@ -12,6 +13,7 @@ interface CommandInfo {
   agent?: string;
   model?: string;
   isBuiltIn?: boolean;
+  isSkill?: boolean;
   scope?: string;
 }
 
@@ -53,6 +55,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
   const [commands, setCommands] = React.useState<CommandInfo[]>([]);
   const [loading, setLoading] = React.useState(false);
   const { commands: commandsWithMetadata, loadCommands: refreshCommands } = useCommandsStore();
+  const { skills, loadSkills: refreshSkills } = useSkillsStore();
   const [selectedIndex, setSelectedIndex] = React.useState(0);
   const itemRefs = React.useRef<(HTMLDivElement | null)[]>([]);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
@@ -82,18 +85,21 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
   React.useEffect(() => {
     // Force refresh to get latest project context when mounting
     void refreshCommands();
-  }, [refreshCommands]);
+    void refreshSkills();
+  }, [refreshCommands, refreshSkills]);
 
   React.useEffect(() => {
     const loadCommands = async () => {
       setLoading(true);
       try {
+        const skillNames = new Set(skills.map((skill) => skill.name));
         const customCommands: CommandInfo[] = commandsWithMetadata.map(cmd => ({
           name: cmd.name,
           description: cmd.description,
           agent: cmd.agent ?? undefined,
           model: cmd.model ?? undefined,
           isBuiltIn: cmd.name === 'init' || cmd.name === 'review',
+          isSkill: skillNames.has(cmd.name),
           scope: cmd.scope,
         }));
 
@@ -171,7 +177,7 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
     };
 
     loadCommands();
-  }, [searchQuery, hasMessagesInCurrentSession, hasSession, commandsWithMetadata]);
+  }, [searchQuery, hasMessagesInCurrentSession, hasSession, commandsWithMetadata, skills]);
 
   React.useEffect(() => {
     setSelectedIndex(0);
@@ -356,6 +362,11 @@ export const CommandAutocomplete = React.forwardRef<CommandAutocompleteHandle, C
                   <div className="flex-1 min-w-0">
                     <div className="flex items-center gap-2">
                       <span className="typography-ui-label font-medium">/{command.name}</span>
+                      {command.isSkill ? (
+                        <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-info-background)] text-[var(--status-info)] border-[var(--status-info-border)] px-1.5 py-1 rounded border flex-shrink-0">
+                          skill
+                        </span>
+                      ) : null}
                       {isSystem ? (
                         <span className="text-[10px] leading-none uppercase font-bold tracking-tight bg-[var(--status-warning-background)] text-[var(--status-warning)] border-[var(--status-warning-border)] px-1.5 py-1 rounded border flex-shrink-0">
                           system

packages/ui/src/components/chat/FileMentionAutocomplete.tsx

@@ -4,6 +4,7 @@ import { cn, truncatePathMiddle } from '@/lib/utils';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useFileSearchStore } from '@/stores/useFileSearchStore';
+import { useConfigStore } from '@/stores/useConfigStore';
 import { useDebouncedValue } from '@/hooks/useDebouncedValue';
 import type { ProjectFileSearchHit } from '@/lib/opencode/client';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
@@ -11,6 +12,11 @@ import { useDirectoryShowHidden } from '@/lib/directoryShowHidden';
 import { useFilesViewShowGitignored } from '@/lib/filesViewShowGitignored';
 
 type FileInfo = ProjectFileSearchHit;
+type AgentInfo = {
+  name: string;
+  description?: string;
+  mode?: string | null;
+};
 
 export interface FileMentionHandle {
   handleKeyDown: (key: string) => void;
@@ -21,6 +27,7 @@ type AutocompleteTab = 'commands' | 'agents' | 'files';
 interface FileMentionAutocompleteProps {
   searchQuery: string;
   onFileSelect: (file: FileInfo) => void;
+  onAgentSelect?: (agentName: string) => void;
   onClose: () => void;
   showTabs?: boolean;
   activeTab?: AutocompleteTab;
@@ -30,6 +37,7 @@ interface FileMentionAutocompleteProps {
 export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileMentionAutocompleteProps>(({
   searchQuery,
   onFileSelect,
+  onAgentSelect,
   onClose,
   showTabs,
   activeTab = 'files',
@@ -37,11 +45,13 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
 }, ref) => {
   const { currentDirectory } = useDirectoryStore();
   const { addServerFile } = useSessionStore();
+  const { getVisibleAgents } = useConfigStore();
   const searchFiles = useFileSearchStore((state) => state.searchFiles);
   const debouncedQuery = useDebouncedValue(searchQuery, 180);
   const showHidden = useDirectoryShowHidden();
   const showGitignored = useFilesViewShowGitignored();
   const [files, setFiles] = React.useState<FileInfo[]>([]);
+  const [agents, setAgents] = React.useState<AgentInfo[]>([]);
   const [loading, setLoading] = React.useState(false);
   const [selectedIndex, setSelectedIndex] = React.useState(0);
   const [marqueeWidth, setMarqueeWidth] = React.useState(360);
@@ -52,6 +62,8 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
   const measureRefs = React.useRef<(HTMLSpanElement | null)[]>([]);
   const containerRef = React.useRef<HTMLDivElement | null>(null);
   const ignoreTabClickRef = React.useRef(false);
+  const normalizedSearchQuery = (searchQuery ?? '').trim();
+  const visibleAgents = normalizedSearchQuery.length > 0 ? agents : agents.slice(0, 2);
 
   const fuzzyScore = React.useCallback((query: string, candidate: string): number | null => {
     const q = query.trim().toLowerCase();
@@ -179,11 +191,30 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     };
   }, [currentDirectory, debouncedQuery, fuzzyScore, searchFiles, showHidden, showGitignored]);
 
+  React.useEffect(() => {
+    const visibleAgents = getVisibleAgents();
+    const normalizedQuery = (searchQuery ?? '').trim().toLowerCase();
+    const filtered = visibleAgents
+      .filter((agent) => agent.mode && agent.mode !== 'primary')
+      .filter((agent) => {
+        if (!normalizedQuery) return true;
+        const haystack = `${agent.name} ${agent.description ?? ''}`.toLowerCase();
+        return haystack.includes(normalizedQuery);
+      })
+      .map((agent) => ({
+        name: agent.name,
+        description: agent.description,
+        mode: agent.mode,
+      }))
+      .sort((a, b) => a.name.localeCompare(b.name));
+    setAgents(filtered);
+  }, [getVisibleAgents, searchQuery]);
+
   React.useEffect(() => {
     setSelectedIndex(0);
     setOverflowMap({});
     setMarqueeDurations({});
-  }, [files]);
+  }, [files, visibleAgents.length]);
 
   React.useEffect(() => {
     itemRefs.current[selectedIndex]?.scrollIntoView({
@@ -265,6 +296,10 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
     onFileSelect(file);
   }, [addServerFile, onFileSelect]);
 
+  const handleAgentPick = React.useCallback((agentName: string) => {
+    onAgentSelect?.(agentName);
+  }, [onAgentSelect]);
+
   React.useImperativeHandle(ref, () => ({
     handleKeyDown: (key: string) => {
       if (key === 'Escape') {
@@ -272,7 +307,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
         return;
       }
 
-      const total = files.length;
+      const total = visibleAgents.length + files.length;
       if (total === 0) {
         return;
       }
@@ -289,13 +324,20 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
 
       if (key === 'Enter' || key === 'Tab') {
         const safeIndex = ((selectedIndex % total) + total) % total;
-        const selectedFile = files[safeIndex];
+        if (safeIndex < visibleAgents.length) {
+          const agent = visibleAgents[safeIndex];
+          if (agent) {
+            handleAgentPick(agent.name);
+          }
+          return;
+        }
+        const selectedFile = files[safeIndex - visibleAgents.length];
         if (selectedFile) {
           handleFileSelect(selectedFile);
         }
       }
     }
-  }), [files, selectedIndex, onClose, handleFileSelect]);
+  }), [files, visibleAgents, selectedIndex, onClose, handleFileSelect, handleAgentPick]);
 
   const getFileIcon = (file: FileInfo) => {
     const ext = file.extension?.toLowerCase();
@@ -373,26 +415,52 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
           </div>
         ) : (
           <div className="pb-2">
+            {visibleAgents.map((agent, index) => {
+              const isSelected = selectedIndex === index;
+              return (
+                <div
+                  key={`agent-${agent.name}`}
+                  ref={(el) => { itemRefs.current[index] = el; }}
+                  className={cn(
+                    'flex items-start gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg',
+                    isSelected && 'bg-interactive-selection',
+                  )}
+                  onClick={() => handleAgentPick(agent.name)}
+                  onMouseEnter={() => setSelectedIndex(index)}
+                >
+                  <div className="min-w-0 flex-1">
+                    <div className="font-semibold truncate">@{agent.name}</div>
+                    {agent.description ? (
+                      <div className="typography-meta text-muted-foreground truncate">{agent.description}</div>
+                    ) : null}
+                  </div>
+                </div>
+              );
+            })}
+            {visibleAgents.length > 0 && files.length > 0 && (
+              <div className="my-1 border-t border-border/60" />
+            )}
             {files.map((file, index) => {
+              const rowIndex = visibleAgents.length + index;
               const relativePath = file.relativePath || file.name;
               const displayPath = truncatePathMiddle(relativePath, { maxLength: 45 });
-              const isSelected = selectedIndex === index;
-              const isOverflowing = overflowMap[index] ?? false;
-              const marqueeDuration = marqueeDurations[index] ?? 2.6;
+              const isSelected = selectedIndex === rowIndex;
+              const isOverflowing = overflowMap[rowIndex] ?? false;
+              const marqueeDuration = marqueeDurations[rowIndex] ?? 2.6;
 
               const item = (
                 <div
-                  ref={(el) => { itemRefs.current[index] = el; }}
+                  ref={(el) => { itemRefs.current[rowIndex] = el; }}
                     className={cn(
                       "flex items-center gap-2 px-3 py-1.5 cursor-pointer typography-ui-label rounded-lg",
                       isSelected && "bg-interactive-selection"
                     )}
                   onClick={() => handleFileSelect(file)}
-                  onMouseEnter={() => setSelectedIndex(index)}
+                  onMouseEnter={() => setSelectedIndex(rowIndex)}
                 >
                   {getFileIcon(file)}
                   <span
-                    ref={(el) => { labelRefs.current[index] = el; }}
+                    ref={(el) => { labelRefs.current[rowIndex] = el; }}
                     className="relative flex-1 min-w-0 overflow-hidden file-mention-marquee-container"
                     style={isSelected ? {
                       ['--file-mention-marquee-width' as string]: `${marqueeWidth}px`,
@@ -401,7 +469,7 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                     aria-label={relativePath}
                   >
                     <span
-                      ref={(el) => { measureRefs.current[index] = el; }}
+                      ref={(el) => { measureRefs.current[rowIndex] = el; }}
                       className="absolute invisible whitespace-nowrap pointer-events-none"
                       aria-hidden
                     >
@@ -426,11 +494,14 @@ export const FileMentionAutocomplete = React.forwardRef<FileMentionHandle, FileM
                 </React.Fragment>
               );
             })}
-            {}
-            {files.length > 0 && <div className="h-2" />}
-            {files.length === 0 && (
+            {visibleAgents.length === 2 && normalizedSearchQuery.length === 0 && agents.length > 2 && (
+              <div className="px-3 py-1 typography-meta text-muted-foreground">
+                Type to search more agents
+              </div>
+            )}
+            {files.length === 0 && visibleAgents.length === 0 && (
               <div className="px-3 py-2 typography-ui-label text-muted-foreground">
-                No files found
+                No matches found
               </div>
             )}
           </div>

packages/ui/src/components/chat/MessageList.tsx

@@ -18,6 +18,221 @@ interface ChatMessageEntry {
     parts: Part[];
 }
 
+const USER_SHELL_MARKER = 'The following tool was executed by the user';
+
+const resolveMessageRole = (message: ChatMessageEntry): string | null => {
+    const info = message.info as unknown as { clientRole?: string | null | undefined; role?: string | null | undefined };
+    return (typeof info.clientRole === 'string' ? info.clientRole : null)
+        ?? (typeof info.role === 'string' ? info.role : null)
+        ?? null;
+};
+
+const isUserSubtaskMessage = (message: ChatMessageEntry | undefined): boolean => {
+    if (!message) return false;
+    if (resolveMessageRole(message) !== 'user') return false;
+    return message.parts.some((part) => part?.type === 'subtask');
+};
+
+const getMessageId = (message: ChatMessageEntry | undefined): string | null => {
+    if (!message) return null;
+    const id = (message.info as unknown as { id?: unknown }).id;
+    return typeof id === 'string' && id.trim().length > 0 ? id : null;
+};
+
+const getMessageParentId = (message: ChatMessageEntry): string | null => {
+    const parentID = (message.info as unknown as { parentID?: unknown }).parentID;
+    return typeof parentID === 'string' && parentID.trim().length > 0 ? parentID : null;
+};
+
+const isUserShellMarkerMessage = (message: ChatMessageEntry | undefined): boolean => {
+    if (!message) return false;
+    if (resolveMessageRole(message) !== 'user') return false;
+
+    return message.parts.some((part) => {
+        if (part?.type !== 'text') return false;
+        const text = (part as unknown as { text?: unknown }).text;
+        const synthetic = (part as unknown as { synthetic?: unknown }).synthetic;
+        return synthetic === true && typeof text === 'string' && text.trim().startsWith(USER_SHELL_MARKER);
+    });
+};
+
+type ShellBridgeDetails = {
+    command?: string;
+    output?: string;
+    status?: string;
+};
+
+const getShellBridgeAssistantDetails = (message: ChatMessageEntry, expectedParentId: string | null): { hide: boolean; details: ShellBridgeDetails | null } => {
+    if (resolveMessageRole(message) !== 'assistant') {
+        return { hide: false, details: null };
+    }
+
+    if (expectedParentId && getMessageParentId(message) !== expectedParentId) {
+        return { hide: false, details: null };
+    }
+
+    if (message.parts.length !== 1) {
+        return { hide: false, details: null };
+    }
+
+    const part = message.parts[0] as unknown as {
+        type?: unknown;
+        tool?: unknown;
+        state?: {
+            status?: unknown;
+            input?: { command?: unknown };
+            output?: unknown;
+            metadata?: { output?: unknown };
+        };
+    };
+
+    if (part.type !== 'tool') {
+        return { hide: false, details: null };
+    }
+
+    const toolName = typeof part.tool === 'string' ? part.tool.toLowerCase() : '';
+    if (toolName !== 'bash') {
+        return { hide: false, details: null };
+    }
+
+    const command = typeof part.state?.input?.command === 'string' ? part.state.input.command : undefined;
+    const output =
+        (typeof part.state?.output === 'string' ? part.state.output : undefined)
+        ?? (typeof part.state?.metadata?.output === 'string' ? part.state.metadata.output : undefined);
+    const status = typeof part.state?.status === 'string' ? part.state.status : undefined;
+
+    return {
+        hide: true,
+        details: {
+            command,
+            output,
+            status,
+        },
+    };
+};
+
+const readTaskSessionId = (toolPart: Part): string | null => {
+    const partRecord = toolPart as unknown as {
+        state?: {
+            metadata?: { sessionId?: unknown; sessionID?: unknown };
+            output?: unknown;
+        };
+    };
+    const metadata = partRecord.state?.metadata;
+    const fromMetadata =
+        (typeof metadata?.sessionId === 'string' && metadata.sessionId.trim().length > 0
+            ? metadata.sessionId.trim()
+            : null)
+        ?? (typeof metadata?.sessionID === 'string' && metadata.sessionID.trim().length > 0
+            ? metadata.sessionID.trim()
+            : null);
+    if (fromMetadata) return fromMetadata;
+
+    const output = partRecord.state?.output;
+    if (typeof output === 'string') {
+        const match = output.match(/task_id:\s*([a-zA-Z0-9_]+)/);
+        if (match?.[1]) {
+            return match[1];
+        }
+    }
+
+    return null;
+};
+
+const isSyntheticSubtaskBridgeAssistant = (message: ChatMessageEntry): { hide: boolean; taskSessionId: string | null } => {
+    if (resolveMessageRole(message) !== 'assistant') {
+        return { hide: false, taskSessionId: null };
+    }
+
+    if (message.parts.length !== 1) {
+        return { hide: false, taskSessionId: null };
+    }
+
+    const onlyPart = message.parts[0] as unknown as {
+        type?: unknown;
+        tool?: unknown;
+    };
+
+    if (onlyPart.type !== 'tool') {
+        return { hide: false, taskSessionId: null };
+    }
+
+    const toolName = typeof onlyPart.tool === 'string' ? onlyPart.tool.toLowerCase() : '';
+    if (toolName !== 'task') {
+        return { hide: false, taskSessionId: null };
+    }
+
+    return {
+        hide: true,
+        taskSessionId: readTaskSessionId(message.parts[0]),
+    };
+};
+
+const withSubtaskSessionId = (message: ChatMessageEntry, taskSessionId: string | null): ChatMessageEntry => {
+    if (!taskSessionId) return message;
+    const nextParts = message.parts.map((part) => {
+        if (part?.type !== 'subtask') return part;
+        const existing = (part as unknown as { taskSessionID?: unknown }).taskSessionID;
+        if (typeof existing === 'string' && existing.trim().length > 0) return part;
+        return {
+            ...part,
+            taskSessionID: taskSessionId,
+        } as Part;
+    });
+
+    return {
+        ...message,
+        parts: nextParts,
+    };
+};
+
+const withShellBridgeDetails = (message: ChatMessageEntry, details: ShellBridgeDetails | null): ChatMessageEntry => {
+    const command = typeof details?.command === 'string' ? details.command.trim() : '';
+    const output = typeof details?.output === 'string' ? details.output : '';
+    const status = typeof details?.status === 'string' ? details.status.trim() : '';
+
+    const nextParts: Part[] = [];
+    let injected = false;
+
+    for (const part of message.parts) {
+        if (!injected && part?.type === 'text') {
+            const text = (part as unknown as { text?: unknown }).text;
+            const synthetic = (part as unknown as { synthetic?: unknown }).synthetic;
+            if (synthetic === true && typeof text === 'string' && text.trim().startsWith(USER_SHELL_MARKER)) {
+                nextParts.push({
+                    type: 'text',
+                    text: '/shell',
+                    shellAction: {
+                        ...(command ? { command } : {}),
+                        ...(output ? { output } : {}),
+                        ...(status ? { status } : {}),
+                    },
+                } as unknown as Part);
+                injected = true;
+                continue;
+            }
+        }
+        nextParts.push(part);
+    }
+
+    if (!injected) {
+        nextParts.push({
+            type: 'text',
+            text: '/shell',
+            shellAction: {
+                ...(command ? { command } : {}),
+                ...(output ? { output } : {}),
+                ...(status ? { status } : {}),
+            },
+        } as unknown as Part);
+    }
+
+    return {
+        ...message,
+        parts: nextParts,
+    };
+};
+
 interface MessageListProps {
     messages: ChatMessageEntry[];
     permissions: PermissionRequest[];
@@ -215,7 +430,7 @@ const MessageList: React.FC<MessageListProps> = ({
 
     const baseDisplayMessages = React.useMemo(() => {
         const seenIds = new Set<string>();
-        return messages
+        const normalizedMessages = messages
             .filter((message) => {
                 const messageId = message.info?.id;
                 if (typeof messageId === 'string') {
@@ -238,6 +453,33 @@ const MessageList: React.FC<MessageListProps> = ({
                     parts: filteredParts,
                 };
             });
+
+        const output: ChatMessageEntry[] = [];
+
+        for (let index = 0; index < normalizedMessages.length; index += 1) {
+            const current = normalizedMessages[index];
+            const previous = output.length > 0 ? output[output.length - 1] : undefined;
+
+            if (isUserSubtaskMessage(previous)) {
+                const bridge = isSyntheticSubtaskBridgeAssistant(current);
+                if (bridge.hide) {
+                    output[output.length - 1] = withSubtaskSessionId(previous as ChatMessageEntry, bridge.taskSessionId);
+                    continue;
+                }
+            }
+
+            if (isUserShellMarkerMessage(previous)) {
+                const bridge = getShellBridgeAssistantDetails(current, getMessageId(previous));
+                if (bridge.hide) {
+                    output[output.length - 1] = withShellBridgeDetails(previous as ChatMessageEntry, bridge.details);
+                    continue;
+                }
+            }
+
+            output.push(current);
+        }
+
+        return output;
     }, [messages]);
 
     const activeRetryStatus = useSessionStore(
@@ -266,16 +508,9 @@ const MessageList: React.FC<MessageListProps> = ({
             data: { message: activeRetryStatus.message },
         };
 
-        const resolveRole = (message: ChatMessageEntry): string | null => {
-            const info = message.info as unknown as { clientRole?: string | null | undefined; role?: string | null | undefined };
-            return (typeof info.clientRole === 'string' ? info.clientRole : null)
-                ?? (typeof info.role === 'string' ? info.role : null)
-                ?? null;
-        };
-
         let lastUserIndex = -1;
         for (let index = baseDisplayMessages.length - 1; index >= 0; index -= 1) {
-            if (resolveRole(baseDisplayMessages[index]) === 'user') {
+            if (resolveMessageRole(baseDisplayMessages[index]) === 'user') {
                 lastUserIndex = index;
                 break;
             }
@@ -289,7 +524,7 @@ const MessageList: React.FC<MessageListProps> = ({
         // to avoid rendering a separate header-only placeholder + error block.
         let targetAssistantIndex = -1;
         for (let index = baseDisplayMessages.length - 1; index > lastUserIndex; index -= 1) {
-            if (resolveRole(baseDisplayMessages[index]) === 'assistant') {
+            if (resolveMessageRole(baseDisplayMessages[index]) === 'assistant') {
                 targetAssistantIndex = index;
                 break;
             }

packages/ui/src/components/chat/PermissionCard.tsx

@@ -63,6 +63,14 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
   const [isResponding, setIsResponding] = React.useState(false);
   const [hasResponded, setHasResponded] = React.useState(false);
   const { respondToPermission } = useSessionStore();
+  const isFromSubagent = useSessionStore(
+    React.useCallback((state) => {
+      const currentSessionId = state.currentSessionId;
+      if (!currentSessionId || permission.sessionID === currentSessionId) return false;
+      const sourceSession = state.sessions.find((session) => session.id === permission.sessionID);
+      return Boolean(sourceSession?.parentID && sourceSession.parentID === currentSessionId);
+    }, [permission.sessionID])
+  );
   const { currentTheme } = useThemeSystem();
   const syntaxTheme = React.useMemo(() => generateSyntaxTheme(currentTheme), [currentTheme]);
 
@@ -317,6 +325,11 @@ export const PermissionCard: React.FC<PermissionCardProps> = ({
                 <span className="typography-meta font-medium text-muted-foreground">
                   Permission Required
                 </span>
+                {isFromSubagent ? (
+                  <span className="typography-micro text-muted-foreground px-1.5 py-0.5 rounded bg-foreground/5">
+                    From subagent
+                  </span>
+                ) : null}
               </div>
               <div className="flex items-center gap-1.5">
                 {getToolIcon(toolName)}

packages/ui/src/components/chat/QuestionCard.tsx

@@ -15,6 +15,14 @@ const SUMMARY_TAB = 'summary';
 
 export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
   const { respondToQuestion, rejectQuestion } = useSessionStore();
+  const isFromSubagent = useSessionStore(
+    React.useCallback((state) => {
+      const currentSessionId = state.currentSessionId;
+      if (!currentSessionId || question.sessionID === currentSessionId) return false;
+      const sourceSession = state.sessions.find((session) => session.id === question.sessionID);
+      return Boolean(sourceSession?.parentID && sourceSession.parentID === currentSessionId);
+    }, [question.sessionID])
+  );
   const [activeTab, setActiveTab] = React.useState<TabKey>('0');
   const [isResponding, setIsResponding] = React.useState(false);
   const [hasResponded, setHasResponded] = React.useState(false);
@@ -169,6 +177,11 @@ export const QuestionCard: React.FC<QuestionCardProps> = ({ question }) => {
             <div className="flex items-center gap-2">
               <RiQuestionLine className="h-3.5 w-3.5 text-primary" />
               <span className="typography-meta font-medium text-muted-foreground">Input needed</span>
+              {isFromSubagent ? (
+                <span className="typography-micro text-muted-foreground px-1.5 py-0.5 rounded bg-foreground/5">
+                  From subagent
+                </span>
+              ) : null}
               {activeHeader ? (
                 <span className="ml-auto typography-micro font-medium text-foreground/70 px-1.5 py-0.5 rounded bg-muted/30 border border-border/20">
                   {activeHeader}

packages/ui/src/components/chat/message/MessageBody.tsx

@@ -28,6 +28,235 @@ import { useMessageTTS } from '@/hooks/useMessageTTS';
 import { useConfigStore } from '@/stores/useConfigStore';
 import { TextSelectionMenu } from './TextSelectionMenu';
 
+type SubtaskPartLike = Part & {
+    type: 'subtask';
+    description?: unknown;
+    command?: unknown;
+    agent?: unknown;
+    prompt?: unknown;
+    taskSessionID?: unknown;
+    model?: {
+        providerID?: unknown;
+        modelID?: unknown;
+    };
+};
+
+type ShellActionPartLike = Part & {
+    type: 'text';
+    shellAction?: {
+        command?: unknown;
+        output?: unknown;
+        status?: unknown;
+    };
+};
+
+const isSubtaskPart = (part: Part): part is SubtaskPartLike => {
+    return part.type === 'subtask';
+};
+
+const isShellActionPart = (part: Part): part is ShellActionPartLike => {
+    const textPart = part as unknown as { type?: unknown; shellAction?: unknown };
+    return textPart.type === 'text' && typeof textPart.shellAction === 'object' && textPart.shellAction !== null;
+};
+
+const normalizeSubtaskModel = (model: SubtaskPartLike['model']): string | null => {
+    if (!model || typeof model !== 'object') return null;
+    const providerID = typeof model.providerID === 'string' ? model.providerID.trim() : '';
+    const modelID = typeof model.modelID === 'string' ? model.modelID.trim() : '';
+    if (!providerID || !modelID) return null;
+    return `${providerID}/${modelID}`;
+};
+
+const UserSubtaskPart: React.FC<{ part: SubtaskPartLike }> = ({ part }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const setCurrentSession = useSessionStore((state) => state.setCurrentSession);
+
+    const description = typeof part.description === 'string' ? part.description.trim() : '';
+    const command = typeof part.command === 'string' ? part.command.trim() : '';
+    const agent = typeof part.agent === 'string' ? part.agent.trim() : '';
+    const prompt = typeof part.prompt === 'string' ? part.prompt.trim() : '';
+    const taskSessionID = typeof part.taskSessionID === 'string' ? part.taskSessionID.trim() : '';
+    const model = normalizeSubtaskModel(part.model);
+
+    return (
+        <div className="mt-2">
+            <div className="flex items-center gap-2 flex-wrap">
+                <span className="typography-meta font-semibold text-foreground">Delegated task</span>
+                {command ? (
+                    <span className="inline-flex h-5 items-center rounded px-1.5 text-[11px] leading-none bg-foreground/5 text-muted-foreground">
+                        /{command}
+                    </span>
+                ) : null}
+                {agent ? (
+                    <span className="inline-flex h-5 items-center rounded px-1.5 text-[11px] leading-none bg-foreground/5 text-muted-foreground">
+                        @{agent}
+                    </span>
+                ) : null}
+                {model ? (
+                    <span className="inline-flex h-5 items-center rounded px-1.5 text-[11px] leading-none bg-foreground/5 text-muted-foreground">
+                        {model}
+                    </span>
+                ) : null}
+            </div>
+
+            {description ? (
+                <div className="typography-ui-label text-foreground/90 mt-1.5">
+                    {description}
+                </div>
+            ) : null}
+
+            {prompt ? (
+                <div className="mt-2 border-t border-border/60 pt-1.5">
+                    <button
+                        type="button"
+                        className="typography-meta text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2"
+                        onClick={() => setExpanded((value) => !value)}
+                    >
+                        {expanded ? 'Hide prompt' : 'Show prompt'}
+                    </button>
+                    {expanded ? (
+                        <pre className="typography-meta mt-1.5 overflow-x-auto whitespace-pre-wrap break-words text-foreground/85">
+                            {prompt}
+                        </pre>
+                    ) : null}
+                </div>
+            ) : null}
+
+            {taskSessionID ? (
+                <div className="mt-1.5">
+                    <button
+                        type="button"
+                        className="typography-meta text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2"
+                        onClick={() => {
+                            void setCurrentSession(taskSessionID);
+                        }}
+                    >
+                        Open subtask session
+                    </button>
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
+const UserShellActionPart: React.FC<{ part: ShellActionPartLike }> = ({ part }) => {
+    const [expanded, setExpanded] = React.useState(false);
+    const [copiedOutput, setCopiedOutput] = React.useState(false);
+    const copiedResetTimeoutRef = React.useRef<number | null>(null);
+
+    const command = typeof part.shellAction?.command === 'string' ? part.shellAction.command.trim() : '';
+    const output = typeof part.shellAction?.output === 'string' ? part.shellAction.output : '';
+    const status = typeof part.shellAction?.status === 'string' ? part.shellAction.status.trim().toLowerCase() : '';
+    const hasOutput = output.trim().length > 0;
+
+    const clearCopiedResetTimeout = React.useCallback(() => {
+        if (copiedResetTimeoutRef.current !== null && typeof window !== 'undefined') {
+            window.clearTimeout(copiedResetTimeoutRef.current);
+            copiedResetTimeoutRef.current = null;
+        }
+    }, []);
+
+    React.useEffect(() => {
+        return () => {
+            clearCopiedResetTimeout();
+        };
+    }, [clearCopiedResetTimeout]);
+
+    const copyOutputToClipboard = React.useCallback(async () => {
+        if (!hasOutput) return;
+
+        let succeeded = false;
+
+        if (typeof navigator !== 'undefined' && navigator.clipboard && typeof window !== 'undefined' && window.isSecureContext) {
+            try {
+                await navigator.clipboard.writeText(output);
+                succeeded = true;
+            } catch {
+                succeeded = false;
+            }
+        }
+
+        if (!succeeded && typeof document !== 'undefined') {
+            const textarea = document.createElement('textarea');
+            textarea.value = output;
+            textarea.setAttribute('readonly', '');
+            textarea.style.position = 'fixed';
+            textarea.style.top = '-1000px';
+            textarea.style.left = '-1000px';
+            document.body.appendChild(textarea);
+            textarea.select();
+            textarea.setSelectionRange(0, textarea.value.length);
+            succeeded = document.execCommand('copy');
+            document.body.removeChild(textarea);
+        }
+
+        if (!succeeded) return;
+
+        clearCopiedResetTimeout();
+        setCopiedOutput(true);
+        if (typeof window !== 'undefined') {
+            copiedResetTimeoutRef.current = window.setTimeout(() => {
+                setCopiedOutput(false);
+                copiedResetTimeoutRef.current = null;
+            }, 2000);
+        }
+    }, [clearCopiedResetTimeout, hasOutput, output]);
+
+    return (
+        <div className="mt-2">
+            <div className="flex items-center gap-2 flex-wrap">
+                <span className="typography-meta font-semibold text-foreground">Shell command</span>
+                {status ? (
+                    <span className={cn(
+                        'inline-flex h-5 items-center rounded px-1.5 text-[11px] leading-none',
+                        status === 'error'
+                            ? 'bg-[var(--status-error-background)] text-[var(--status-error)]'
+                            : 'bg-foreground/5 text-muted-foreground'
+                    )}>
+                        {status}
+                    </span>
+                ) : null}
+            </div>
+
+            {command ? (
+                <pre className="typography-meta mt-1.5 overflow-x-auto whitespace-pre-wrap break-words text-foreground/90 font-mono">
+                    {command}
+                </pre>
+            ) : null}
+
+            {hasOutput ? (
+                <div className="mt-2 border-t border-border/60 pt-1.5">
+                    <div className="flex items-center gap-3 flex-wrap">
+                        <button
+                            type="button"
+                            className="typography-meta text-muted-foreground hover:text-foreground transition-colors underline underline-offset-2"
+                            onClick={() => setExpanded((value) => !value)}
+                        >
+                            {expanded ? 'Hide output' : 'Show output'}
+                        </button>
+                        <button
+                            type="button"
+                            className="inline-flex items-center justify-center text-muted-foreground hover:text-foreground transition-colors"
+                            onClick={() => {
+                                void copyOutputToClipboard();
+                            }}
+                            aria-label={copiedOutput ? 'Copied' : 'Copy output'}
+                            title={copiedOutput ? 'Copied' : 'Copy output'}
+                        >
+                            {copiedOutput ? <RiCheckLine className="h-3.5 w-3.5" /> : <RiFileCopyLine className="h-3.5 w-3.5" />}
+                        </button>
+                    </div>
+                    {expanded ? (
+                        <pre className="typography-meta mt-1.5 max-h-56 overflow-auto whitespace-pre-wrap break-words text-foreground/85 font-mono">
+                            {output}
+                        </pre>
+                    ) : null}
+                </div>
+            ) : null}
+        </div>
+    );
+};
+
 const formatTurnDuration = (durationMs: number): string => {
     const totalSeconds = durationMs / 1000;
     if (totalSeconds < 60) {
@@ -94,10 +323,18 @@ const UserMessageBody: React.FC<{
     const [copyHintVisible, setCopyHintVisible] = React.useState(false);
     const copyHintTimeoutRef = React.useRef<number | null>(null);
 
-    const textParts = React.useMemo(() => {
+    const userContentParts = React.useMemo(() => {
         return parts.filter((part) => {
-            if (part.type !== 'text') return false;
-            return !isEmptyTextPart(part);
+            if (part.type === 'text') {
+                return !isEmptyTextPart(part);
+            }
+            if (isSubtaskPart(part)) {
+                return true;
+            }
+            if (isShellActionPart(part)) {
+                return true;
+            }
+            return false;
         });
     }, [parts]);
 
@@ -160,7 +397,23 @@ const UserMessageBody: React.FC<{
             onTouchStart={isTouchContext && canCopyMessage && hasCopyableText ? revealCopyHint : undefined}
         >
             <div className="leading-relaxed overflow-hidden text-foreground/90 text-base">
-                {textParts.map((part, index) => {
+                {userContentParts.map((part, index) => {
+                    if (isSubtaskPart(part)) {
+                        return (
+                            <FadeInOnReveal key={part.id ?? `user-subtask-${index}`}>
+                                <UserSubtaskPart part={part} />
+                            </FadeInOnReveal>
+                        );
+                    }
+
+                    if (isShellActionPart(part)) {
+                        return (
+                            <FadeInOnReveal key={part.id ?? `user-shell-${index}`}>
+                                <UserShellActionPart part={part} />
+                            </FadeInOnReveal>
+                        );
+                    }
+
                     let mentionForPart: AgentMentionInfo | undefined;
                     if (agentMention && mentionToken && !mentionInjected) {
                         const candidateText = extractTextContent(part);
@@ -170,7 +423,7 @@ const UserMessageBody: React.FC<{
                         }
                     }
                     return (
-                        <FadeInOnReveal key={`user-text-${index}`}>
+                        <FadeInOnReveal key={part.id ?? `user-text-${index}`}>
                             <UserTextPart
                                 part={part}
                                 messageId={messageId}

packages/ui/src/components/chat/message/parts/ToolPart.tsx

@@ -1,7 +1,7 @@
 
 import React from 'react';
 import { RuntimeAPIContext } from '@/contexts/runtimeAPIContext';
-import { RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiExternalLinkLine, RiFileEditLine, RiFileList2Line, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiSurveyLine, RiTaskLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
+import { RiAiAgentLine, RiArrowDownSLine, RiArrowRightSLine, RiBookLine, RiExternalLinkLine, RiFileEditLine, RiFileList2Line, RiFileSearchLine, RiFileTextLine, RiFolder6Line, RiGitBranchLine, RiGlobalLine, RiListCheck3, RiMenuSearchLine, RiPencilLine, RiSurveyLine, RiTaskLine, RiTerminalBoxLine, RiToolsLine } from '@remixicon/react';
 import { cn } from '@/lib/utils';
 import { SimpleMarkdownRenderer } from '../../MarkdownRenderer';
 import { getToolMetadata, getLanguageFromExtension, isImageFile, getImageMimeType } from '@/lib/toolHelpers';
@@ -11,6 +11,7 @@ import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
 import { useDirectoryStore } from '@/stores/useDirectoryStore';
 import { useSessionStore } from '@/stores/useSessionStore';
 import { useUIStore } from '@/stores/useUIStore';
+import { opencodeClient } from '@/lib/opencode/client';
 import { ScrollableOverlay } from '@/components/ui/ScrollableOverlay';
 import type { ContentChangeReason } from '@/hooks/useChatScrollManager';
 
@@ -87,6 +88,9 @@ export const getToolIcon = (toolName: string) => {
     if (tool === 'skill') {
         return <RiBookLine className={iconClass} />;
     }
+    if (tool === 'task') {
+        return <RiAiAgentLine className={iconClass} />;
+    }
     if (tool === 'question') {
         return <RiSurveyLine className={iconClass} />;
     }
@@ -277,6 +281,66 @@ type TaskToolSummaryEntry = {
     };
 };
 
+type SessionMessageWithParts = {
+    info?: {
+        role?: string;
+    };
+    parts?: Array<{
+        id?: string;
+        type?: string;
+        tool?: string;
+        state?: {
+            status?: string;
+            title?: string;
+        };
+    }>;
+};
+
+const EMPTY_SESSION_MESSAGES: SessionMessageWithParts[] = [];
+
+const readTaskSessionIdFromOutput = (output: string | undefined): string | undefined => {
+    if (typeof output !== 'string' || output.trim().length === 0) {
+        return undefined;
+    }
+    const parsedMetadata = parseTaskMetadataBlock(output);
+    if (parsedMetadata.sessionId) {
+        return parsedMetadata.sessionId;
+    }
+    const match = output.match(/task_id:\s*([a-zA-Z0-9_]+)/);
+    const candidate = match?.[1];
+    return typeof candidate === 'string' && candidate.trim().length > 0 ? candidate : undefined;
+};
+
+const buildTaskSummaryEntriesFromSession = (messages: SessionMessageWithParts[]): TaskToolSummaryEntry[] => {
+    const entries: TaskToolSummaryEntry[] = [];
+
+    for (const message of messages) {
+        if (message?.info?.role !== 'assistant') {
+            continue;
+        }
+        const parts = Array.isArray(message.parts) ? message.parts : [];
+        for (const part of parts) {
+            if (part?.type !== 'tool') {
+                continue;
+            }
+            const toolName = typeof part.tool === 'string' ? part.tool.toLowerCase() : '';
+            if (!toolName || toolName === 'task' || toolName === 'todowrite' || toolName === 'todoread') {
+                continue;
+            }
+            entries.push({
+                id: part.id,
+                tool: part.tool,
+                state: {
+                    status: part.state?.status,
+                    title: part.state?.title,
+                },
+            });
+        }
+    }
+
+    return entries;
+};
+
 const getTaskSummaryLabel = (entry: TaskToolSummaryEntry): string => {
     const title = entry.state?.title;
     if (typeof title === 'string' && title.trim().length > 0) {
@@ -293,6 +357,97 @@ const stripTaskMetadataFromOutput = (output: string): string => {
     return output.replace(/\n*<task_metadata>[\s\S]*?<\/task_metadata>\s*$/i, '').trimEnd();
 };
 
+const normalizeTaskSummaryEntries = (value: unknown): TaskToolSummaryEntry[] => {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+
+    const normalized: TaskToolSummaryEntry[] = [];
+    for (const entry of value) {
+        if (typeof entry === 'string') {
+            normalized.push({
+                tool: 'tool',
+                state: { status: 'completed', title: entry },
+            });
+            continue;
+        }
+
+        if (!entry || typeof entry !== 'object') {
+            continue;
+        }
+
+        const record = entry as {
+            id?: unknown;
+            tool?: unknown;
+            title?: unknown;
+            status?: unknown;
+            state?: { status?: unknown; title?: unknown };
+        };
+
+        const stateStatus = typeof record.state?.status === 'string' ? record.state.status : undefined;
+        const stateTitle = typeof record.state?.title === 'string' ? record.state.title : undefined;
+        const status = stateStatus ?? (typeof record.status === 'string' ? record.status : undefined);
+        const title = stateTitle ?? (typeof record.title === 'string' ? record.title : undefined);
+
+        normalized.push({
+            id: typeof record.id === 'string' ? record.id : undefined,
+            tool: typeof record.tool === 'string' ? record.tool : 'tool',
+            state: {
+                status,
+                title,
+            },
+        });
+    }
+
+    return normalized;
+};
+
+const parseTaskMetadataBlock = (output: string | undefined): {
+    sessionId?: string;
+    summaryEntries: TaskToolSummaryEntry[];
+} => {
+    if (typeof output !== 'string' || output.trim().length === 0) {
+        return { summaryEntries: [] };
+    }
+
+    const blockMatch = output.match(/<task_metadata>\s*([\s\S]*?)\s*<\/task_metadata>/i);
+    if (!blockMatch?.[1]) {
+        return { summaryEntries: [] };
+    }
+
+    const raw = blockMatch[1].trim();
+    if (!raw) {
+        return { summaryEntries: [] };
+    }
+
+    try {
+        const parsed = JSON.parse(raw) as {
+            sessionId?: unknown;
+            sessionID?: unknown;
+            summary?: unknown;
+            entries?: unknown;
+            tools?: unknown;
+            calls?: unknown;
+        };
+
+        const summaryEntries = normalizeTaskSummaryEntries(
+            parsed.summary ?? parsed.entries ?? parsed.tools ?? parsed.calls
+        );
+
+        const sessionId =
+            (typeof parsed.sessionId === 'string' && parsed.sessionId.trim().length > 0
+                ? parsed.sessionId.trim()
+                : undefined) ??
+            (typeof parsed.sessionID === 'string' && parsed.sessionID.trim().length > 0
+                ? parsed.sessionID.trim()
+                : undefined);
+
+        return { sessionId, summaryEntries };
+    } catch {
+        return { summaryEntries: [] };
+    }
+};
+
 const TaskToolSummary: React.FC<{
     entries: TaskToolSummaryEntry[];
     isExpanded: boolean;
@@ -302,8 +457,9 @@ const TaskToolSummary: React.FC<{
     sessionId?: string;
 }> = ({ entries, isExpanded, hasPrevTool, hasNextTool, output, sessionId }) => {
     const setCurrentSession = useSessionStore((state) => state.setCurrentSession);
-    const completedEntries = React.useMemo(() => {
-        return entries.filter((entry) => entry.state?.status === 'completed');
+    const displayEntries = React.useMemo(() => {
+        const nonPending = entries.filter((entry) => entry.state?.status !== 'pending');
+        return nonPending.length > 0 ? nonPending : entries;
     }, [entries]);
 
     const trimmedOutput = typeof output === 'string'
@@ -319,12 +475,12 @@ const TaskToolSummary: React.FC<{
         }
     };
 
-    if (completedEntries.length === 0 && !hasOutput && !sessionId) {
+    if (displayEntries.length === 0 && !hasOutput && !sessionId) {
         return null;
     }
 
-    const visibleEntries = isExpanded ? completedEntries : completedEntries.slice(-6);
-    const hiddenCount = Math.max(0, completedEntries.length - visibleEntries.length);
+    const visibleEntries = isExpanded ? displayEntries : displayEntries.slice(-6);
+    const hiddenCount = Math.max(0, displayEntries.length - visibleEntries.length);
 
     return (
         <div
@@ -335,7 +491,7 @@ const TaskToolSummary: React.FC<{
                 hasNextTool ? 'before:bottom-[-0.6rem]' : 'before:bottom-0'
             )}
         >
-            {completedEntries.length > 0 ? (
+            {displayEntries.length > 0 ? (
                 <ToolScrollableSection maxHeightClass={isExpanded ? 'max-h-[40vh]' : 'max-h-56'} disableHorizontal>
                     <div className="w-full min-w-0 space-y-1">
                         {hiddenCount > 0 ? (
@@ -345,6 +501,7 @@ const TaskToolSummary: React.FC<{
                         {visibleEntries.map((entry, idx) => {
                             const toolName = typeof entry.tool === 'string' && entry.tool.trim().length > 0 ? entry.tool : 'tool';
                             const label = getTaskSummaryLabel(entry);
+                            const status = entry.state?.status;
 
                             const displayName = getToolMetadata(toolName).displayName;
 
@@ -352,7 +509,10 @@ const TaskToolSummary: React.FC<{
                                 <div key={entry.id ?? `${toolName}-${idx}`} className="flex items-center gap-2 min-w-0">
                                     <span className="flex-shrink-0 text-foreground/80">{getToolIcon(toolName)}</span>
                                     <span className="typography-meta text-foreground/80 flex-shrink-0">{displayName}</span>
-                                    <span className="typography-meta text-muted-foreground/70 truncate">{label}</span>
+                                    <span className={cn(
+                                        'typography-meta truncate',
+                                        status === 'error' ? 'text-[var(--status-error)]' : 'text-muted-foreground/70'
+                                    )}>{label}</span>
                                 </div>
                             );
                         })}
@@ -373,7 +533,7 @@ const TaskToolSummary: React.FC<{
             )}
 
             {hasOutput ? (
-                <div className={cn('space-y-1', (completedEntries.length > 0 || sessionId) && 'pt-1')}
+                <div className={cn('space-y-1', (displayEntries.length > 0 || sessionId) && 'pt-1')}
                 >
                     <button
                         type="button"
@@ -1043,24 +1203,105 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
     const effectiveTimeStart = isTaskTool ? (pinnedTaskTimeRef.current.start ?? time?.start) : time?.start;
     const effectiveTimeEnd = isTaskTool ? (pinnedTaskTimeRef.current.end ?? time?.end) : time?.end;
 
+    const taskOutputString = React.useMemo(() => {
+        return typeof stateWithData.output === 'string' ? stateWithData.output : undefined;
+    }, [stateWithData.output]);
+
+    const parsedTaskMetadata = React.useMemo(() => {
+        return parseTaskMetadataBlock(taskOutputString);
+    }, [taskOutputString]);
+
     const taskSessionId = React.useMemo<string | undefined>(() => {
         if (!isTaskTool) {
             return undefined;
         }
         const candidate = metadata as { sessionId?: string } | undefined;
-        return typeof candidate?.sessionId === 'string' ? candidate.sessionId : undefined;
-    }, [isTaskTool, metadata]);
+        if (typeof candidate?.sessionId === 'string' && candidate.sessionId.trim().length > 0) {
+            return candidate.sessionId;
+        }
+        if (parsedTaskMetadata.sessionId) {
+            return parsedTaskMetadata.sessionId;
+        }
+        return readTaskSessionIdFromOutput(taskOutputString);
+    }, [isTaskTool, metadata, parsedTaskMetadata.sessionId, taskOutputString]);
 
-    const taskSummaryEntries = React.useMemo<TaskToolSummaryEntry[]>(() => {
+    const childSessionMessages = useSessionStore(
+        React.useCallback((store) => {
+            if (!taskSessionId) {
+                return EMPTY_SESSION_MESSAGES;
+            }
+            return (store.messages.get(taskSessionId) as SessionMessageWithParts[] | undefined) ?? EMPTY_SESSION_MESSAGES;
+        }, [taskSessionId])
+    );
+
+    const metadataTaskSummaryEntries = React.useMemo<TaskToolSummaryEntry[]>(() => {
         if (!isTaskTool) {
             return [];
         }
-        const candidate = (metadata as { summary?: unknown } | undefined)?.summary;
-        if (!Array.isArray(candidate)) {
+        const candidateSummary = (metadata as { summary?: unknown; entries?: unknown; tools?: unknown; calls?: unknown } | undefined);
+        const normalized = normalizeTaskSummaryEntries(
+            candidateSummary?.summary ?? candidateSummary?.entries ?? candidateSummary?.tools ?? candidateSummary?.calls
+        );
+
+        if (normalized.length > 0) {
+            return normalized;
+        }
+
+        return parsedTaskMetadata.summaryEntries;
+    }, [isTaskTool, metadata, parsedTaskMetadata.summaryEntries]);
+
+    const childSessionTaskSummaryEntries = React.useMemo<TaskToolSummaryEntry[]>(() => {
+        if (!isTaskTool || !taskSessionId) {
             return [];
         }
-        return candidate.filter((entry): entry is TaskToolSummaryEntry => typeof entry === 'object' && entry !== null) as TaskToolSummaryEntry[];
-    }, [isTaskTool, metadata]);
+        if (!Array.isArray(childSessionMessages) || childSessionMessages.length === 0) {
+            return [];
+        }
+        return buildTaskSummaryEntriesFromSession(childSessionMessages);
+    }, [childSessionMessages, isTaskTool, taskSessionId]);
+
+    const taskSummaryEntries = React.useMemo<TaskToolSummaryEntry[]>(() => {
+        if (childSessionTaskSummaryEntries.length > 0) {
+            return childSessionTaskSummaryEntries;
+        }
+        return metadataTaskSummaryEntries;
+    }, [childSessionTaskSummaryEntries, metadataTaskSummaryEntries]);
+
+    const fetchedTaskSessionsRef = React.useRef<Set<string>>(new Set());
+    React.useEffect(() => {
+        if (!isTaskTool || !taskSessionId) {
+            return;
+        }
+        if (childSessionTaskSummaryEntries.length > 0) {
+            return;
+        }
+        if (fetchedTaskSessionsRef.current.has(taskSessionId)) {
+            return;
+        }
+
+        fetchedTaskSessionsRef.current.add(taskSessionId);
+        let cancelled = false;
+
+        void opencodeClient
+            .getSessionMessages(taskSessionId, 500)
+            .then((messages) => {
+                if (cancelled || !Array.isArray(messages)) {
+                    return;
+                }
+                if (messages.length === 0) {
+                    fetchedTaskSessionsRef.current.delete(taskSessionId);
+                    return;
+                }
+                useSessionStore.getState().syncMessages(taskSessionId, messages);
+            })
+            .catch(() => {
+                fetchedTaskSessionsRef.current.delete(taskSessionId);
+            });
+
+        return () => {
+            cancelled = true;
+        };
+    }, [childSessionTaskSummaryEntries.length, isTaskTool, taskSessionId]);
 
 
     const taskSummaryLenRef = React.useRef<number>(taskSummaryEntries.length);
@@ -1211,7 +1452,7 @@ const ToolPart: React.FC<ToolPartProps> = ({ part, isExpanded, onToggle, syntaxT
                     isExpanded={isExpanded}
                     hasPrevTool={hasPrevTool}
                     hasNextTool={hasNextTool}
-                    output={typeof stateWithData.output === 'string' ? stateWithData.output : undefined}
+                    output={taskOutputString}
                     sessionId={taskSessionId}
                 />
             ) : null}

packages/ui/src/components/layout/ProjectEditDialog.tsx

@@ -54,13 +54,13 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
   return (
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-md">
-        <DialogHeader>
+        <DialogHeader className="min-w-0">
           <DialogTitle>Edit project</DialogTitle>
         </DialogHeader>
 
-        <div className="space-y-5 py-1">
+        <div className="min-w-0 space-y-5 py-1">
           {/* Name */}
-          <div className="space-y-1.5">
+          <div className="min-w-0 space-y-1.5">
             <label className="typography-ui-label font-medium text-foreground">
               Name
             </label>
@@ -76,13 +76,13 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
               }}
               autoFocus
             />
-            <p className="typography-meta text-muted-foreground truncate">
+            <p className="typography-meta text-muted-foreground truncate" title={projectPath}>
               {projectPath}
             </p>
           </div>
 
           {/* Color */}
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <label className="typography-ui-label font-medium text-foreground">
               Color
             </label>
@@ -120,7 +120,7 @@ export const ProjectEditDialog: React.FC<ProjectEditDialogProps> = ({
           </div>
 
           {/* Icon */}
-          <div className="space-y-2">
+          <div className="min-w-0 space-y-2">
             <label className="typography-ui-label font-medium text-foreground">
               Icon
             </label>

packages/ui/src/components/sections/commands/CommandsSidebar.tsx

@@ -19,6 +19,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { RiAddLine, RiTerminalBoxLine, RiMore2Line, RiDeleteBinLine, RiFileCopyLine, RiRestartLine, RiEditLine } from '@remixicon/react';
 import { useCommandsStore, isCommandBuiltIn, type Command } from '@/stores/useCommandsStore';
+import { useSkillsStore } from '@/stores/useSkillsStore';
 import { useUIStore } from '@/stores/useUIStore';
 import { useDeviceInfo } from '@/lib/device';
 import { isVSCodeRuntime } from '@/lib/desktop';
@@ -45,6 +46,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     deleteCommand,
     loadCommands,
   } = useCommandsStore();
+  const { skills, loadSkills } = useSkillsStore();
 
   const { setSidebarOpen } = useUIStore();
   const { isMobile } = useDeviceInfo();
@@ -53,7 +55,24 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
 
   React.useEffect(() => {
     loadCommands();
-  }, [loadCommands]);
+    loadSkills();
+  }, [loadCommands, loadSkills]);
+
+  const skillNames = React.useMemo(() => new Set(skills.map((skill) => skill.name)), [skills]);
+  const commandOnlyItems = React.useMemo(
+    () => commands.filter((command) => !skillNames.has(command.name)),
+    [commands, skillNames],
+  );
+
+  React.useEffect(() => {
+    if (!selectedCommandName) {
+      return;
+    }
+
+    if (skillNames.has(selectedCommandName)) {
+      setSelectedCommand(null);
+    }
+  }, [selectedCommandName, setSelectedCommand, skillNames]);
 
   const bgClass = isVSCode ? 'bg-background' : 'bg-sidebar';
 
@@ -203,14 +222,14 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
     setRenameDialogCommand(null);
   };
 
-  const builtInCommands = commands.filter(isCommandBuiltIn);
-  const customCommands = commands.filter((cmd) => !isCommandBuiltIn(cmd));
+  const builtInCommands = commandOnlyItems.filter(isCommandBuiltIn);
+  const customCommands = commandOnlyItems.filter((cmd) => !isCommandBuiltIn(cmd));
 
   return (
     <div className={cn('flex h-full flex-col', bgClass)}>
       <div className={cn('border-b px-3', isMobile ? 'mt-2 py-3' : 'py-3')}>
         <div className="flex items-center justify-between gap-2">
-          <span className="typography-meta text-muted-foreground">Total {commands.length}</span>
+          <span className="typography-meta text-muted-foreground">Total {commandOnlyItems.length}</span>
           <Button
             type="button"
             variant="ghost"
@@ -224,7 +243,7 @@ export const CommandsSidebar: React.FC<CommandsSidebarProps> = ({ onItemSelect }
       </div>
 
       <ScrollableOverlay outerClassName="flex-1 min-h-0" className="space-y-1 px-3 py-2">
-        {commands.length === 0 ? (
+        {commandOnlyItems.length === 0 ? (
           <div className="py-12 px-4 text-center text-muted-foreground">
             <RiTerminalBoxLine className="mx-auto mb-3 h-10 w-10 opacity-50" />
             <p className="typography-ui-label font-medium">No commands configured</p>