Replace octopus mascot with XYAI robot pose pack

CHANGELOG.md

@@ -12,6 +12,7 @@
 
 ### 变更
 
+- 用户可见吉祥物从章鱼换成 XYAI 白色机器人姿势包（欢迎 / 空态 / 探头 / 思考 / 打字 / 任务）；桌面启动页与 openXYOS 首页使用同一角色，不再加载章鱼 WebM。
 - 桌面更新通道只跟踪 `github.com/XYAIStudio/FreeOS/releases`。不再读取 PyPI `octop`、腾讯云 COS 或其它 Octop 镜像；当前已是最新 FreeOS `v0.0.1` 时不会误报更新。
 - 默认主题与残留 Octop `rose` 存储一次性迁移为 XYAI 蓝 `#0033FF`（之后仍可手动选玫瑰粉）。
 

dashboard/src/assets/mascot.ts

@@ -1,5 +1,45 @@
 /**
- * Shared empty-state mascot (served from ``dashboard/public``).
- * Prefer ``OctopEmptyMascot`` / ``EmptyState variant="mascot"`` over hardcoding.
+ * Shared XYAI / FreeOS mascot pack (served from ``dashboard/public``).
+ * Prefer ``XyaiMascot`` / ``EmptyState variant="mascot"`` over hardcoding paths.
  */
-export const OCTOP_EMPTY_MASCOT_SRC = "/octop-mascot-empty.png";
+
+export type XyaiMascotPose =
+  | "welcome"
+  | "empty"
+  | "peek"
+  | "think"
+  | "type"
+  | "work"
+  | "tasks"
+  | "success";
+
+const POSE_FILES: Record<XyaiMascotPose, string> = {
+  welcome: "xyai-mascot-welcome.webp",
+  empty: "xyai-mascot-empty.webp",
+  peek: "xyai-mascot-peek.webp",
+  think: "xyai-mascot-think.webp",
+  type: "xyai-mascot-type.webp",
+  work: "xyai-mascot-type.webp",
+  tasks: "xyai-mascot-tasks.webp",
+  success: "xyai-mascot-tasks.webp",
+};
+
+/** Distinct stills for tap-to-switch surfaces (welcome + desktop splash). */
+export const XYAI_MASCOT_SWITCH_POSES = [
+  "welcome",
+  "peek",
+  "think",
+  "type",
+  "tasks",
+] as const satisfies readonly XyaiMascotPose[];
+
+export function xyaiMascotSrc(pose: XyaiMascotPose = "empty"): string {
+  const base = import.meta.env.BASE_URL ?? "/";
+  return `${base}${POSE_FILES[pose]}`;
+}
+
+export function xyaiMascotSwitchSrcs(): string[] {
+  return XYAI_MASCOT_SWITCH_POSES.map((pose) => xyaiMascotSrc(pose));
+}
+
+export const XYAI_EMPTY_MASCOT_SRC = xyaiMascotSrc("empty");

dashboard/src/components/EmptyState/OctopEmptyMascot.tsx → dashboard/src/components/EmptyState/XyaiMascot.tsx

@@ -1,24 +1,27 @@
-import { OCTOP_EMPTY_MASCOT_SRC } from "../../assets/mascot";
+import { xyaiMascotSrc, type XyaiMascotPose } from "../../assets/mascot";
 import styles from "./EmptyState.module.less";
 
-interface OctopEmptyMascotProps {
+interface XyaiMascotProps {
   className?: string;
   /** Square edge in px; default 160. */
   size?: number;
+  /** Pose from the shared XYAI pack; default empty-state. */
+  pose?: XyaiMascotPose;
 }
 
 /**
- * Octop empty-state mascot image with shared sizing.
+ * XYAI / FreeOS mascot image with shared sizing.
  * Use inside custom empty UIs or pass as ``EmptyState`` icon /
  * antd ``Empty`` ``image``.
  */
-export function OctopEmptyMascot({
+export function XyaiMascot({
   className,
   size = 160,
-}: OctopEmptyMascotProps) {
+  pose = "empty",
+}: XyaiMascotProps) {
   return (
     <img
-      src={OCTOP_EMPTY_MASCOT_SRC}
+      src={xyaiMascotSrc(pose)}
       alt=""
       draggable={false}
       className={className ? `${styles.mascot} ${className}` : styles.mascot}

dashboard/src/components/EmptyState/index.tsx

@@ -1,7 +1,7 @@
 import { Button } from "antd";
 import { Inbox, AlertCircle } from "lucide-react";
 import type { ReactNode } from "react";
-import { OctopEmptyMascot } from "./OctopEmptyMascot";
+import { XyaiMascot } from "./XyaiMascot";
 
 interface EmptyStateProps {
   /** Icon element. Overrides the default for the current variant. */
@@ -18,7 +18,7 @@ interface EmptyStateProps {
    * Visual variant:
    * - empty: inbox icon
    * - error: alert icon
-   * - mascot: shared Octop empty mascot (prefer for list/detail empty shells)
+   * - mascot: shared XYAI empty mascot (prefer for list/detail empty shells)
    */
   variant?: "empty" | "error" | "mascot";
   className?: string;
@@ -45,7 +45,7 @@ export function EmptyState({
         style={{ color: "var(--fn-color-danger)" }}
       />
     ) : variant === "mascot" ? (
-      <OctopEmptyMascot />
+      <XyaiMascot />
     ) : (
       <Inbox
         size={40}
@@ -100,5 +100,5 @@ export function EmptyState({
   );
 }
 
-export { OctopEmptyMascot } from "./OctopEmptyMascot";
-export { OCTOP_EMPTY_MASCOT_SRC } from "../../assets/mascot";
+export { XyaiMascot } from "./XyaiMascot";
+export { XYAI_EMPTY_MASCOT_SRC, xyaiMascotSrc } from "../../assets/mascot";

dashboard/src/components/NotFoundPage.tsx

@@ -1,7 +1,7 @@
 import { Button } from "antd";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { OctopEmptyMascot } from "./EmptyState";
+import { XyaiMascot } from "./EmptyState";
 import styles from "./NotFoundPage.module.less";
 
 /** Catch-all placeholder for dashboard paths that do not match any route. */
@@ -11,7 +11,7 @@ export default function NotFoundPage() {
   return (
     <div className={styles.wrap}>
       <div className={styles.inner}>
-        <OctopEmptyMascot size={140} className={styles.mascot} />
+        <XyaiMascot size={140} className={styles.mascot} />
         <h1 className={styles.title}>{t("common.notFound")}</h1>
         <p className={styles.hint}>{t("common.notFoundHint")}</p>
         <Button type="primary" onClick={() => navigate("/chat")}>

dashboard/src/components/StreamConnectingIndicator/index.tsx

@@ -1,7 +1,8 @@
 import type { ReactNode } from "react";
+import { xyaiMascotSrc } from "../../assets/mascot";
 import styles from "./StreamConnectingIndicator.module.less";
 
-const MASCOT_TYPE = `${import.meta.env.BASE_URL}octop-mascot-type.webp`;
+const MASCOT_TYPE = xyaiMascotSrc("work");
 
 interface StreamConnectingIndicatorProps {
   /** Status line under the animation (e.g. 「连接中」). */
@@ -16,7 +17,7 @@ interface StreamConnectingIndicatorProps {
 
 /**
  * Shared connecting / waiting-frame indicator for remote browser & desktop.
- * Uses the same Octop mascot loop as chat thinking bubbles.
+ * Uses the same XYAI typing/work mascot as chat thinking bubbles.
  */
 export default function StreamConnectingIndicator({
   label,

dashboard/src/locales/en.json

@@ -3253,6 +3253,7 @@
   "chatWelcome": {
     "greeting": "Hi! Your personal AI sidekick is here",
     "mascotSwitchHint": "Tap to switch the mascot",
+    "mascotAriaLabel": "XYAI mascot",
     "descriptionWithAgentSuffix": "— share what's on your mind, work or life",
     "description": "Work or life — just tell me what you need, I'll handle it",
     "newChat": "New Chat",

dashboard/src/locales/zh.json

@@ -3250,6 +3250,7 @@
   "chatWelcome": {
     "greeting": "嗨！你专属的智能伙伴来啦～",
     "mascotSwitchHint": "点一下换个表情～",
+    "mascotAriaLabel": "XYAI 吉祥物",
     "descriptionWithAgentSuffix": "无论工作还是生活，说出你的想法",
     "description": "无论工作还是生活，说出你的想法，我来搞定",
     "newChat": "新建对话",

dashboard/src/pages/Admin/Plugins/PluginMarketPanel.tsx

@@ -1,13 +1,13 @@
 import { useTranslation } from "react-i18next";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import styles from "./index.module.less";
 
 /** Placeholder marketplace tab — under construction. */
 export function PluginMarketPanel() {
   const { t } = useTranslation();
   return (
     <div className={styles.marketEmpty}>
-      <OctopEmptyMascot size={180} />
+      <XyaiMascot size={180} />
       <div className={styles.emptyTitle}>{t("plugins.marketTitle")}</div>
       <div className={styles.emptyHint}>{t("plugins.marketHint")}</div>
     </div>

dashboard/src/pages/Admin/Storage/index.tsx

@@ -12,7 +12,7 @@ import { HardDrive, LayoutGrid } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import PageShell from "../../../layouts/PageShell";
 import TabLabel from "../../../components/TabLabel";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import StreamSetupGuide from "../../../components/StreamSetupGuide/StreamSetupGuide";
 import {
   useStorageBackends,
@@ -85,9 +85,7 @@ export default function AdminStoragePage() {
       return (
         <StreamSetupGuide
           wide
-          icon={
-            <OctopEmptyMascot size={120} className={styles.emptyGuideMascot} />
-          }
+          icon={<XyaiMascot size={120} className={styles.emptyGuideMascot} />}
           title={t("storage.emptyGuideTitle")}
           description={t("storage.emptyGuideDesc")}
           steps={[

dashboard/src/pages/Agent/Connectors/index.tsx

@@ -23,7 +23,7 @@ import { useSearchParams } from "react-router-dom";
 import PageShell from "../../../layouts/PageShell";
 import TabBar, { type TabBarItem } from "../../../components/TabLabel/TabBar";
 import StreamSetupGuide from "../../../components/StreamSetupGuide/StreamSetupGuide";
-import { OctopEmptyMascot } from "../../../components/EmptyState/OctopEmptyMascot";
+import { XyaiMascot } from "../../../components/EmptyState";
 import { useCurrentUser } from "../../../hooks/useCurrentUser";
 import { userCan } from "../../../utils/permissions";
 import { apiErrorMessage } from "../../../utils/apiError";
@@ -2214,12 +2214,7 @@ export default function ConnectorsPage() {
         ) : instances.length === 0 ? (
           <StreamSetupGuide
             wide
-            icon={
-              <OctopEmptyMascot
-                size={120}
-                className={styles.emptyGuideMascot}
-              />
-            }
+            icon={<XyaiMascot size={120} className={styles.emptyGuideMascot} />}
             title={t("connectors.emptyGuideTitle")}
             description={t("connectors.emptyGuideDesc")}
             steps={[

dashboard/src/pages/Chat/chatWelcome.partial.less

@@ -75,7 +75,7 @@
 // Mascot image shown above the greeting title
 .welcomeMascot {
   width: 132px;
-  aspect-ratio: 352 / 320;
+  aspect-ratio: 1;
   height: auto;
   object-fit: contain;
   margin-bottom: -12px;

dashboard/src/pages/Chat/components/AgentNotReadyScreen.tsx

@@ -2,7 +2,7 @@ import { Button, Result, Spin } from "antd";
 import { Settings } from "lucide-react";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import type { OctopAgent } from "../../../context/AgentContext";
 import {
   formatAgentError,
@@ -37,7 +37,7 @@ export default function AgentNotReadyScreen({
       <div className={styles.noAgentsEmpty}>
         <div className={styles.noAgentsEmptyInner}>
           <div className={styles.noAgentsEmptyIcon}>
-            <OctopEmptyMascot className={styles.noAgentsEmptyMascot} />
+            <XyaiMascot className={styles.noAgentsEmptyMascot} />
           </div>
           <h1 className={styles.noAgentsEmptyTitle}>
             {t("chat.noAgentsTitle")}

dashboard/src/pages/Chat/components/ThinkingBubble.tsx

@@ -1,4 +1,5 @@
 import { useTranslation } from "react-i18next";
+import { xyaiMascotSrc } from "../../../assets/mascot";
 import { useElapsedSince } from "../../../hooks/useElapsedSeconds";
 import styles from "../index.module.less";
 
@@ -12,7 +13,7 @@ export default function ThinkingBubble({
   startedAt,
 }: ThinkingBubbleProps) {
   const { t } = useTranslation();
-  const typingSrc = `${import.meta.env.BASE_URL}octop-mascot-type.webp`;
+  const typingSrc = xyaiMascotSrc("type");
   const elapsed = useElapsedSince(startedAt);
 
   return (

dashboard/src/pages/Chat/components/WelcomeScreen.tsx

@@ -1,13 +1,11 @@
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { xyaiMascotSrc, xyaiMascotSwitchSrcs } from "../../../assets/mascot";
 import { useWelcomeQuickCardsLayout } from "../hooks/useWelcomeQuickCardsLayout";
 import WelcomeQuickCards, { WelcomeQuickCardProbe } from "./WelcomeQuickCards";
 import styles from "../index.module.less";
 
-// Animated WebP keeps alpha on Safari; VP9 WebM alpha is unreliable there.
-const MASCOT_PEEK = "/octop-mascot-peek.webp";
-const MASCOT_TYPE = "/octop-mascot-type.webp";
-const MASCOT_IMAGES = [MASCOT_PEEK, MASCOT_TYPE];
+const MASCOT_IMAGES = xyaiMascotSwitchSrcs();
 
 function getRandomMascot(current?: string): string {
   if (MASCOT_IMAGES.length <= 1) return MASCOT_IMAGES[0];
@@ -43,7 +41,7 @@ export default function WelcomeScreen({
   hideMascot = false,
 }: WelcomeScreenProps) {
   const { t } = useTranslation();
-  const [mascotSrc, setMascotSrc] = useState(MASCOT_PEEK);
+  const [mascotSrc, setMascotSrc] = useState(() => xyaiMascotSrc("welcome"));
   const {
     welcomeRef,
     headingRef,
@@ -76,7 +74,7 @@ export default function WelcomeScreen({
               role="button"
               tabIndex={0}
               title={t("chatWelcome.mascotSwitchHint")}
-              aria-label="Octop mascot"
+              aria-label={t("chatWelcome.mascotAriaLabel")}
               onKeyDown={(e) => {
                 if (e.key === "Enter" || e.key === " ") {
                   e.preventDefault();

dashboard/src/pages/Control/CronJobs/index.tsx

@@ -16,7 +16,7 @@ import {
 import type { CronJobFormValues } from "./useCronJobs";
 import { useCardTableView } from "../../../hooks/useCardTableView";
 import { showConfirmModal } from "../../../utils/confirmModal";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import { ResizableTable } from "../../../components/ResizableTable";
 import PageShell from "../../../layouts/PageShell";
 import { useAgent } from "../../../context/AgentContext";
@@ -42,7 +42,7 @@ function CronJobsEmptyState({
   return (
     <div className={styles.emptyState}>
       <div className={styles.emptyStateIcon}>
-        <OctopEmptyMascot />
+        <XyaiMascot />
       </div>
       <h2 className={styles.emptyStateTitle}>{t("cronJobs.noJobs")}</h2>
       <p className={styles.emptyStateDesc}>{t("cronJobs.noJobsDesc")}</p>

dashboard/src/pages/Control/RemoteAndroid/RemotePhoneIdleGuide.tsx

@@ -4,7 +4,7 @@ import { Download, PlugZap, RefreshCw } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import StreamSetupGuide from "../../../components/StreamSetupGuide/StreamSetupGuide";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import type { MobileStatusResponse } from "../../../api/modules/mobile";
 import styles from "./index.module.less";
 
@@ -74,7 +74,7 @@ export default function RemotePhoneIdleGuide({
 
   return (
     <StreamSetupGuide
-      icon={<OctopEmptyMascot size={120} className={styles.setupMascot} />}
+      icon={<XyaiMascot size={120} className={styles.setupMascot} />}
       title={
         ready
           ? isShell

dashboard/src/pages/Control/RemoteBrowser/index.tsx

@@ -41,7 +41,7 @@ import { useTranslation } from "react-i18next";
 
 import StreamEdgeControls from "../../../components/StreamEdgeControls/StreamEdgeControls";
 import StreamSetupGuide from "../../../components/StreamSetupGuide/StreamSetupGuide";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import PageShell from "../../../layouts/PageShell";
 import BrowserAiPanel from "../../../components/BrowserAiPanel";
 import SkillRecordGuideModal from "../../../components/SkillRecordGuideModal";
@@ -1467,10 +1467,7 @@ export default function RemoteBrowserPage({
                 ) : (
                   <StreamSetupGuide
                     icon={
-                      <OctopEmptyMascot
-                        size={120}
-                        className={styles.setupMascot}
-                      />
+                      <XyaiMascot size={120} className={styles.setupMascot} />
                     }
                     title={
                       envReady

dashboard/src/pages/Control/RemoteDesktop/DesktopPanel.tsx

@@ -70,7 +70,7 @@ import {
   type DesktopResolution,
 } from "../../../utils/desktopViewport";
 import { sendDesktopAction } from "./desktopShortcuts";
-import { OctopEmptyMascot } from "../../../components/EmptyState";
+import { XyaiMascot } from "../../../components/EmptyState";
 import styles from "./DesktopPanel.module.less";
 
 const RESOLUTION_STORAGE_KEY = "octop:remote-desktop:resolution";
@@ -986,9 +986,7 @@ export default function DesktopPanel({
     "pageShell.desktop.subtitle",
     "查看并操控 Octop 主机操作系统桌面",
   );
-  const setupMascot = (
-    <OctopEmptyMascot size={120} className={styles.setupMascot} />
-  );
+  const setupMascot = <XyaiMascot size={120} className={styles.setupMascot} />;
 
   if (user === null) {
     const loading = (