GCWing · bobleer · Apr 2, 2026 · Apr 2, 2026
diff --git a/src/crates/core/src/service/config/types.rs b/src/crates/core/src/service/config/types.rs
@@ -104,6 +104,8 @@ pub struct AIExperienceConfig {
     pub enable_welcome_panel_ai_analysis: bool,
     /// Whether to enable visual mode.
     pub enable_visual_mode: bool,
+    /// Whether to show the pixel Agent companion in the collapsed chat input.
+    pub enable_agent_companion: bool,
 }
 
 #[derive(Debug, Clone, Serialize, Deserialize)]
@@ -998,6 +1000,7 @@ impl Default for AIExperienceConfig {
             enable_session_title_generation: true,
             enable_welcome_panel_ai_analysis: false,
             enable_visual_mode: false,
+            enable_agent_companion: false,
         }
     }
 }

diff --git a/src/web-ui/src/app/scenes/settings/settingsConfig.ts b/src/web-ui/src/app/scenes/settings/settingsConfig.ts
@@ -92,6 +92,10 @@ export const SETTINGS_CATEGORIES: ConfigCategoryDef[] = [
           'timeout',
           'confirmation',
           'history',
+          'companion',
+          'agent',
+          'partner',
+          '伙伴',
         ],
       },
       {

diff --git a/src/web-ui/src/flow_chat/components/ChatInput.scss b/src/web-ui/src/flow_chat/components/ChatInput.scss
@@ -54,6 +54,8 @@
     transform: translateY(3px);
 
     .bitfun-chat-input__box {
+      position: relative;
+      overflow: hidden;
       min-height: 42px;
       max-height: 42px;
       padding: 0 18px;
@@ -220,6 +222,96 @@
     &:hover .bitfun-chat-input__space-hint {
       opacity: 0.9;
     }
+
+    &.bitfun-chat-input--pet-visible {
+      .bitfun-chat-input__input-area {
+        z-index: 1;
+      }
+
+      .bitfun-chat-input__actions {
+        z-index: 2;
+      }
+
+      .bitfun-chat-input__space-hint {
+        opacity: 0;
+        transition: opacity 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+
+      &:hover .bitfun-chat-input__space-hint {
+        opacity: 0.88;
+      }
+
+      &.bitfun-chat-input--pet-split-send.bitfun-chat-input--processing {
+        .bitfun-chat-input__actions {
+          z-index: 5;
+        }
+      }
+    }
+
+    &.bitfun-chat-input--pet-replaces-stop.bitfun-chat-input--processing {
+      .bitfun-chat-input__input-area {
+        right: 52px;
+      }
+
+      &.bitfun-chat-input--pet-split-send .bitfun-chat-input__input-area {
+        right: 112px;
+      }
+    }
+
+    .bitfun-chat-input__pet-wrap {
+      position: absolute;
+      inset: 0;
+      z-index: 3;
+      pointer-events: none;
+    }
+
+    /* Full width so flex alignment is relative to the capsule (not the ~40px pet). */
+    .bitfun-chat-input__pet-inner {
+      box-sizing: border-box;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding-left: 0;
+      padding-right: 0;
+      transition:
+        justify-content 0.45s cubic-bezier(0.34, 1.15, 0.64, 1),
+        padding 0.45s cubic-bezier(0.34, 1.15, 0.64, 1);
+    }
+
+    /* Align with former stop control (~same inset as .bitfun-chat-input__actions { right: 14px }). */
+    .bitfun-chat-input__pet-wrap--shift .bitfun-chat-input__pet-inner {
+      justify-content: flex-end;
+      padding-right: 8px;
+    }
+
+    .bitfun-chat-input__pet-wrap--shift.bitfun-chat-input__pet-wrap--split .bitfun-chat-input__pet-inner {
+      padding-right: 42px;
+    }
+
+    .bitfun-chat-input__pet-stop-btn {
+      pointer-events: auto;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+      margin: 0;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      border-radius: 10px;
+      line-height: 0;
+
+      &:hover {
+        filter: brightness(1.08);
+      }
+
+      &:focus-visible {
+        outline: 2px solid var(--color-accent-primary);
+        outline-offset: 2px;
+      }
+    }
   }
 
   &__space-hint {

diff --git a/src/web-ui/src/flow_chat/components/ChatInput.tsx b/src/web-ui/src/flow_chat/components/ChatInput.tsx
@@ -11,7 +11,11 @@ import { useActiveSessionState } from '../hooks/useActiveSessionState';
 import { RichTextInput, type MentionState } from './RichTextInput';
 import { FileMentionPicker } from './FileMentionPicker';
 import { globalEventBus } from '../../infrastructure/event-bus';
-import { useSessionDerivedState, useSessionStateMachineActions } from '../hooks/useSessionStateMachine';
+import {
+  useSessionDerivedState,
+  useSessionStateMachine,
+  useSessionStateMachineActions,
+} from '../hooks/useSessionStateMachine';
 import { SessionExecutionEvent } from '../state-machine/types';
 import TokenUsageIndicator from './TokenUsageIndicator';
 import { ModelSelector } from './ModelSelector';
@@ -39,6 +43,9 @@ import { resolveSessionRelationship } from '../utils/sessionMetadata';
 import { useSceneStore } from '@/app/stores/sceneStore';
 import type { SceneTabId } from '@/app/components/SceneBar/types';
 import type { SkillInfo } from '@/infrastructure/config/types';
+import { aiExperienceConfigService } from '@/infrastructure/config/services/AIExperienceConfigService';
+import { deriveChatInputPetMood } from '../utils/chatInputPetMood';
+import { ChatInputPixelPet } from './ChatInputPixelPet';
 import './ChatInput.scss';
 
 const log = createLogger('ChatInput');
@@ -136,6 +143,22 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     effectiveTargetSessionId,
     inputState.value.trim()
   );
+  const sessionMachineSnapshot = useSessionStateMachine(effectiveTargetSessionId);
+  const petMood = useMemo(
+    () => deriveChatInputPetMood(sessionMachineSnapshot),
+    [sessionMachineSnapshot],
+  );
+  const [agentCompanionEnabled, setAgentCompanionEnabled] = useState(
+    () => aiExperienceConfigService.getSettings().enable_agent_companion,
+  );
+  useEffect(() => {
+    setAgentCompanionEnabled(aiExperienceConfigService.getSettings().enable_agent_companion);
+    return aiExperienceConfigService.addChangeListener(settings => {
+      setAgentCompanionEnabled(settings.enable_agent_companion);
+    });
+  }, []);
+  const showCollapsedPet =
+    agentCompanionEnabled && !inputState.isActive && !inputState.value.trim();
   const { transition, setQueuedInput } = useSessionStateMachineActions(effectiveTargetSessionId);
 
   const { workspace, workspacePath } = useCurrentWorkspace();
@@ -1729,10 +1752,37 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     return () => observer.disconnect();
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
-
+
+  const isCollapsedProcessing = !inputState.isActive && !!derivedState?.isProcessing;
+  const petReplacesStopChrome = agentCompanionEnabled && isCollapsedProcessing;
+  const petStopClickable = petReplacesStopChrome && !!derivedState?.canCancel;
+  const collapsedPetSplitSend =
+    petReplacesStopChrome && derivedState?.sendButtonMode === 'split';
+
   const renderActionButton = () => {
     if (!derivedState) return <IconButton className="bitfun-chat-input__send-button" disabled size="small"><ArrowUp size={11} /></IconButton>;
-
+
+    if (petReplacesStopChrome) {
+      const { sendButtonMode } = derivedState;
+      if (sendButtonMode === 'cancel') {
+        return null;
+      }
+      if (sendButtonMode === 'split') {
+        return (
+          <IconButton
+            className="bitfun-chat-input__send-button"
+            onClick={handleSendOrCancel}
+            disabled={!inputState.value.trim()}
+            data-testid="chat-input-send-btn"
+            tooltip={t('input.sendShortcut')}
+            size="small"
+          >
+            <ArrowUp size={11} />
+          </IconButton>
+        );
+      }
+    }
+
     const { sendButtonMode, hasQueuedInput } = derivedState;
 
     if (sendButtonMode === 'cancel') {
@@ -1805,8 +1855,6 @@ export const ChatInput: React.FC<ChatInputProps> = ({
     );
   };
 
-  const isCollapsedProcessing = !inputState.isActive && !!derivedState?.isProcessing;
-
   return (
     <>
       <ContextDropZone
@@ -1827,7 +1875,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
       >
         <div 
           ref={containerRef}
-          className={`bitfun-chat-input ${inputState.isActive ? 'bitfun-chat-input--active' : 'bitfun-chat-input--collapsed'} ${inputState.isExpanded ? 'bitfun-chat-input--expanded' : ''} ${derivedState?.isProcessing ? 'bitfun-chat-input--processing' : ''} ${className}`}
+          className={`bitfun-chat-input ${inputState.isActive ? 'bitfun-chat-input--active' : 'bitfun-chat-input--collapsed'} ${inputState.isExpanded ? 'bitfun-chat-input--expanded' : ''} ${derivedState?.isProcessing ? 'bitfun-chat-input--processing' : ''} ${showCollapsedPet ? 'bitfun-chat-input--pet-visible' : ''} ${petReplacesStopChrome ? 'bitfun-chat-input--pet-replaces-stop' : ''} ${collapsedPetSplitSend ? 'bitfun-chat-input--pet-split-send' : ''} ${className}`}
           onClick={!inputState.isActive ? handleActivate : undefined}
           data-testid="chat-input-container"
         >
@@ -1840,6 +1888,41 @@ export const ChatInput: React.FC<ChatInputProps> = ({
 
         <div className="bitfun-chat-input__container">
           <div className={`bitfun-chat-input__box ${inputState.isExpanded ? 'bitfun-chat-input__box--expanded' : ''}`}>
+            {showCollapsedPet && (
+              <div
+                className={[
+                  'bitfun-chat-input__pet-wrap',
+                  petReplacesStopChrome ? 'bitfun-chat-input__pet-wrap--shift' : '',
+                  collapsedPetSplitSend ? 'bitfun-chat-input__pet-wrap--split' : '',
+                ]
+                  .filter(Boolean)
+                  .join(' ')}
+              >
+                <div className="bitfun-chat-input__pet-inner">
+                  {petStopClickable ? (
+                    <button
+                      type="button"
+                      className="bitfun-chat-input__pet-stop-btn"
+                      onClick={e => {
+                        e.stopPropagation();
+                        void transition(SessionExecutionEvent.USER_CANCEL);
+                      }}
+                      aria-label={t('input.stopGeneration')}
+                    >
+                      <ChatInputPixelPet
+                        mood={petMood}
+                        layout={petReplacesStopChrome ? 'stopRight' : 'center'}
+                      />
+                    </button>
+                  ) : (
+                    <ChatInputPixelPet
+                      mood={petMood}
+                      layout={petReplacesStopChrome ? 'stopRight' : 'center'}
+                    />
+                  )}
+                </div>
+              </div>
+            )}
             {showTargetSwitcher && (
               <div className="bitfun-chat-input__target-switcher" data-testid="chat-input-target-switcher">
                 <span className="bitfun-chat-input__target-switcher-label">{t('chatInput.conversationTarget')}</span>
@@ -1884,7 +1967,10 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 data-testid="chat-input-textarea"
               />
 
-              {!inputState.isActive && !inputState.value.trim() && (
+              {!inputState.isActive &&
+                !inputState.value.trim() &&
+                !agentCompanionEnabled &&
+                !isCollapsedProcessing && (
                 <span className="bitfun-chat-input__space-hint">
                   <Trans
                     i18nKey="input.spaceToActivate"
@@ -2239,7 +2325,7 @@ export const ChatInput: React.FC<ChatInputProps> = ({
                 )}
               </div>
               <div className="bitfun-chat-input__actions-right">
-                {isCollapsedProcessing && (
+                {isCollapsedProcessing && !petReplacesStopChrome && (
                   <>
                     <span className="bitfun-chat-input__capsule-divider" />
                     <span className="bitfun-chat-input__cancel-shortcut">