Improvement/mascot update

app/config/settings.json

@@ -25,7 +25,7 @@
     "openai": "",
     "anthropic": "",
     "google": "",
-    "byteplus": "62a75ab1-0f00-4d4e-8873-23551e624375",
+    "byteplus": "",
     "openrouter": ""
   },
   "endpoints": {

app/ui_layer/browser/frontend/src/pages/Chat/ChatPage.tsx

@@ -3,11 +3,12 @@ import { X, Loader2, Reply } from 'lucide-react'
 import { useWebSocket } from '../../contexts/WebSocketContext'
 import { IconButton, StatusIndicator } from '../../components/ui'
 import { Chat } from '../../components/Chat'
+import { MascotDisplay } from '@mascot'
 import { getActivePlaceholder } from '../../utils/taskPlaceholder'
 import styles from './ChatPage.module.css'
 
 // Panel width limits
-const DEFAULT_PANEL_WIDTH = 380
+const DEFAULT_PANEL_WIDTH = 460
 const MIN_PANEL_WIDTH = 200
 const MAX_PANEL_WIDTH = 800
 
@@ -93,6 +94,7 @@ export function ChatPage() {
 
       {/* Task/Action Panel */}
       <div className={styles.actionPanel} style={{ width: panelWidth, flexShrink: 0 }}>
+        <MascotDisplay />
         <div className={styles.panelHeader}>
           <h3>Tasks & Actions</h3>
         </div>

app/ui_layer/browser/frontend/src/pages/LivingUI/CreationProgress.tsx

@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import { Lightbulb } from 'lucide-react'
 import type { LivingUITodo } from '../../types'
 import { useRotatingHint } from '../../hooks'
-import { CraftBotPet } from './CraftBotPet'
+import { CraftBotMascot } from '@mascot'
 import styles from './LivingUIPage.module.css'
 
 interface Props {
@@ -76,10 +76,9 @@ export function CreationProgress({ projectName, todos }: Props) {
 
   return (
     <div className={styles.creationProgress}>
-      <CraftBotPet
+      <CraftBotMascot
         state="creating"
         progress={view.progress}
-        indeterminate={view.indeterminate}
         completedCount={view.completed}
       />
       <p className={styles.creationTitle}>Creating {projectName}</p>

app/ui_layer/browser/frontend/src/pages/LivingUI/LivingUIPage.module.css

@@ -156,121 +156,6 @@
   color: var(--text-muted);
 }
 
-/* CraftBot Pet */
-.petWrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-bottom: var(--space-2);
-}
-
-.petFloat {
-  display: inline-flex;
-  transform-origin: 50% 85%;
-}
-
-.petBreathe {
-  transform-origin: 50% 60%;
-}
-
-.petSleepBreathe {
-  transform-origin: 50% 60%;
-}
-
-.petEye {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: petBlink 4.5s infinite;
-}
-
-.petEyeLeft {
-  animation-delay: 0ms;
-}
-
-.petEyeRight {
-  animation-delay: 120ms;
-}
-
-.petEyeClosed {
-  transform-origin: center;
-  transform-box: fill-box;
-  transform: scaleY(0.08);
-}
-
-.petAntennaPulse {
-  transform-origin: center;
-  transform-box: fill-box;
-}
-
-.petBlushPulse {
-}
-
-.petWiggle {
-}
-
-/* Body silhouette is near-white — in light mode it blends into the bg,
-   so stroke a thin outline. Dark mode needs no outline. */
-.petBody {
-  stroke: none;
-}
-
-[data-theme="light"] .petBody {
-  stroke: var(--text-muted, var(--border-secondary));
-  stroke-width: 3;
-  paint-order: stroke fill;
-}
-
-.petSleepZ {
-  transform-origin: center;
-  transform-box: fill-box;
-  animation: petSleepZ 2.4s ease-in-out infinite;
-  opacity: 0;
-}
-
-.petSleepZDelayed {
-  animation-delay: 1.2s;
-}
-
-@keyframes petFloat {
-  0%, 100% { transform: translateY(0); }
-  50% { transform: translateY(-6px); }
-}
-
-@keyframes petBreathe {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.015); }
-}
-
-@keyframes petBlink {
-  0%, 92%, 100% { transform: scaleY(1); }
-  95%, 97% { transform: scaleY(0.05); }
-}
-
-@keyframes petAntennaPulse {
-  0%, 100% { opacity: 0.45; transform: scale(1); }
-  50% { opacity: 1; transform: scale(1.12); }
-}
-
-@keyframes petBlushPulse {
-  0%, 100% { opacity: 0.45; }
-  50% { opacity: 0.9; }
-}
-
-@keyframes petWiggle {
-  0% { transform: translateY(0) rotate(0deg); }
-  20% { transform: translateY(-4px) rotate(-6deg); }
-  45% { transform: translateY(-2px) rotate(6deg); }
-  70% { transform: translateY(-1px) rotate(-3deg); }
-  100% { transform: translateY(0) rotate(0deg); }
-}
-
-@keyframes petSleepZ {
-  0% { opacity: 0; transform: translateY(0); }
-  30% { opacity: 1; }
-  100% { opacity: 0; transform: translateY(-14px); }
-}
-
-
 /* Creation Progress */
 .creationProgress {
   display: flex;

app/ui_layer/browser/frontend/src/pages/LivingUI/LivingUIPage.tsx

@@ -11,7 +11,7 @@ import {
   Maximize2,
   Minimize2,
 } from 'lucide-react'
-import { CraftBotPet } from './CraftBotPet'
+import { CraftBotMascot } from '@mascot'
 import { useWebSocket } from '../../contexts/WebSocketContext'
 import { useFullscreen } from '../../contexts/FullscreenContext'
 import { Button } from '../../components/ui/Button'
@@ -267,7 +267,7 @@ export function LivingUIPage() {
             />
           ) : project.status === 'launching' ? (
             <div className={styles.loading}>
-              <CraftBotPet state="launching" size={96} />
+              <CraftBotMascot state="launching" size={96} />
               <p>Launching Living UI...</p>
               <p className={styles.hint}>Installing dependencies, running tests, starting servers</p>
             </div>
@@ -282,7 +282,7 @@ export function LivingUIPage() {
             </div>
           ) : (
             <div className={styles.stopped}>
-              <CraftBotPet state="stopped" size={96} />
+              <CraftBotMascot state="stopped" size={96} />
               <p>Living UI is not running</p>
               <Button variant="primary" onClick={handleLaunch}>
                 <Play size={16} /> Launch