Merge origin/develop into develop

Author: lalalune

packages/app-core/src/App.tsx

@@ -42,6 +42,7 @@ import {
   StreamView,
   SystemWarningBanner,
 } from "./components";
+import { CompanionHeader } from "./components/companion/CompanionHeader";
 import { DeferredSetupChecklist } from "./components/FlaminaGuide";
 import {
   BugReportProvider,
@@ -241,12 +242,23 @@ export function App() {
     retryStartup,
     tab,
     setTab,
+    setState,
     actionNotice,
     uiShellMode,
+    switchShellView,
+    uiLanguage,
+    setUiLanguage,
+    uiTheme,
+    setUiTheme,
+    chatAgentVoiceMuted,
+    handleSaveCharacter,
+    characterSaving,
+    characterSaveSuccess,
     agentStatus,
     unreadConversations,
     activeGameViewerUrl,
     gameOverlayEnabled,
+    t,
   } = useApp();
 
   const isPopout = useIsPopout();
@@ -534,19 +546,34 @@ export function App() {
         />
       </div>
     </div>
+  ) : characterSceneVisible ? (
+    <div className="relative flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-transparent">
+      <CompanionHeader
+        activeShellView="character"
+        onShellViewChange={(view) => switchShellView(view)}
+        uiLanguage={uiLanguage}
+        setUiLanguage={setUiLanguage}
+        uiTheme={uiTheme}
+        setUiTheme={setUiTheme}
+        t={t}
+        showCompanionControls
+        chatAgentVoiceMuted={chatAgentVoiceMuted}
+        onToggleVoiceMute={() =>
+          setState("chatAgentVoiceMuted", !chatAgentVoiceMuted)
+        }
+        onSave={handleSaveCharacter}
+        isSaving={characterSaving}
+        saveSuccess={Boolean(characterSaveSuccess)}
+      />
+      <main className="flex flex-1 min-h-0 min-w-0 overflow-hidden px-3 xl:px-5 pb-4 pt-2 xl:pb-6">
+        <ViewRouter characterSceneVisible />
+      </main>
+    </div>
   ) : (
-    <div
-      className={`flex flex-col flex-1 min-h-0 w-full font-body text-txt ${
-        characterSceneVisible ? "bg-transparent" : "bg-bg"
-      }`}
-    >
-      <Header transparent={characterSceneVisible} />
-      <main
-        className={`flex flex-1 min-h-0 min-w-0 overflow-hidden px-3 xl:px-5 ${
-          characterSceneVisible ? "pb-4 pt-2 xl:pb-6" : "py-4 xl:py-6"
-        }`}
-      >
-        <ViewRouter characterSceneVisible={characterSceneVisible} />
+    <div className="flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg">
+      <Header />
+      <main className="flex flex-1 min-h-0 min-w-0 overflow-hidden px-3 xl:px-5 py-4 xl:py-6">
+        <ViewRouter />
       </main>
     </div>
   );

packages/app-core/src/components/Header.tsx

@@ -73,6 +73,9 @@ export function Header({
     setUiTheme,
     chatAgentVoiceMuted,
     handleNewConversation,
+    handleSaveCharacter,
+    characterSaving,
+    characterSaveSuccess,
     conversationMessages,
     chatLastUsage,
     t,
@@ -271,7 +274,20 @@ export function Header({
           onToggleVoiceMute={() =>
             setState("chatAgentVoiceMuted", !chatAgentVoiceMuted)
           }
-          onNewChat={() => void handleNewConversation()}
+          onNewChat={
+            activeShellView === "character"
+              ? undefined
+              : () => void handleNewConversation()
+          }
+          onSave={
+            activeShellView === "character" ? handleSaveCharacter : undefined
+          }
+          isSaving={activeShellView === "character" ? characterSaving : false}
+          saveSuccess={
+            activeShellView === "character"
+              ? Boolean(characterSaveSuccess)
+              : false
+          }
           trailingExtras={
             showNavigationMenu ? (
               <Button

packages/app-core/src/components/companion/CompanionHeader.tsx

@@ -17,6 +17,9 @@ export interface CompanionHeaderProps {
   chatAgentVoiceMuted?: boolean;
   onToggleVoiceMute?: () => void;
   onNewChat?: () => void;
+  onSave?: () => void;
+  isSaving?: boolean;
+  saveSuccess?: boolean;
   /** Shown in the shell header right cluster (e.g. inference / cloud alert). */
   rightExtras?: ReactNode;
   rightTrailingExtras?: ReactNode;
@@ -38,6 +41,9 @@ export const CompanionHeader = memo(function CompanionHeader(
     chatAgentVoiceMuted,
     onToggleVoiceMute,
     onNewChat,
+    onSave,
+    isSaving,
+    saveSuccess,
     rightExtras,
     rightTrailingExtras,
   } = props;
@@ -81,6 +87,9 @@ export const CompanionHeader = memo(function CompanionHeader(
             chatAgentVoiceMuted={chatAgentVoiceMuted}
             onToggleVoiceMute={onToggleVoiceMute}
             onNewChat={onNewChat}
+            onSave={onSave}
+            isSaving={isSaving}
+            saveSuccess={saveSuccess}
             rightExtras={rightExtras}
             rightTrailingExtras={rightTrailingExtras}
           >

packages/app-core/src/components/companion/ShellHeaderControls.test.tsx

@@ -28,9 +28,12 @@ vi.mock("@miladyai/ui", () => ({
 }));
 
 vi.mock("lucide-react", () => ({
+  Check: () => React.createElement("span", null, "check"),
+  Loader2: () => React.createElement("span", null, "loader"),
   MessageCirclePlus: () => React.createElement("span", null, "new"),
   Monitor: () => React.createElement("span", null, "desktop"),
   PencilLine: () => React.createElement("span", null, "character"),
+  Save: () => React.createElement("span", null, "save"),
   Smartphone: () => React.createElement("span", null, "phone"),
   UserRound: () => React.createElement("span", null, "companion"),
   Volume2: () => React.createElement("span", null, "voice"),
@@ -194,4 +197,38 @@ describe("ShellHeaderControls", () => {
       null,
     ]);
   });
+
+  it("renders Save button instead of New Chat when onSave is provided", async () => {
+    mockUseMediaQuery.mockReturnValue(false);
+    const onSave = vi.fn();
+    let tree: ReactTestRenderer | undefined;
+    await act(async () => {
+      tree = create(
+        <ShellHeaderControls
+          activeShellView="character"
+          onShellViewChange={() => {}}
+          uiLanguage="en"
+          setUiLanguage={() => {}}
+          uiTheme="dark"
+          setUiTheme={() => {}}
+          t={(k: string) => k}
+          showCompanionControls
+          onSave={onSave}
+        />,
+      );
+    });
+    const buttons = tree!.root.findAll(
+      (node) =>
+        node.type === "button" &&
+        node.props["aria-label"] === "charactereditor.Save",
+    );
+    expect(buttons.length).toBeGreaterThanOrEqual(1);
+    // New Chat should NOT be present
+    const newChatButtons = tree!.root.findAll(
+      (node) =>
+        node.type === "button" &&
+        node.props["aria-label"] === "companion.newChat",
+    );
+    expect(newChatButtons.length).toBe(0);
+  });
 });

packages/app-core/src/components/companion/ShellHeaderControls.tsx

@@ -5,9 +5,12 @@ import type { ShellView, UiTheme } from "@miladyai/app-core/state";
 import { Button } from "@miladyai/ui";
 import {
   type LucideIcon,
+  Check,
+  Loader2,
   MessageCirclePlus,
   Monitor,
   PencilLine,
+  Save,
   Smartphone,
   UserRound,
   Volume2,
@@ -58,6 +61,9 @@ interface ShellHeaderControlsProps {
   chatAgentVoiceMuted?: boolean;
   onToggleVoiceMute?: () => void;
   onNewChat?: () => void;
+  onSave?: () => void;
+  isSaving?: boolean;
+  saveSuccess?: boolean;
 }
 
 export function ShellHeaderControls({
@@ -84,6 +90,9 @@ export function ShellHeaderControls({
   chatAgentVoiceMuted = false,
   onToggleVoiceMute,
   onNewChat,
+  onSave,
+  isSaving = false,
+  saveSuccess = false,
 }: ShellHeaderControlsProps) {
   const isMobileViewport = useMediaQuery(SHELL_MODE_MOBILE_MEDIA_QUERY);
   const shouldSplitCompanionMobileActions =
@@ -170,6 +179,47 @@ export function ShellHeaderControls({
     </Button>
   );
 
+  const renderSaveButton = (compact: boolean) => (
+    <Button
+      size="icon"
+      variant="outline"
+      aria-label={t("charactereditor.Save")}
+      title={t("charactereditor.Save")}
+      className={
+        compact
+          ? compactCompanionActionClassName
+          : expandedCompanionActionClassName
+      }
+      onClick={onSave}
+      disabled={isSaving}
+      onPointerDown={(event) => event.stopPropagation()}
+      style={HEADER_BUTTON_STYLE}
+      data-no-camera-drag="true"
+    >
+      {isSaving ? (
+        <Loader2 className="pointer-events-none h-4 w-4 shrink-0 animate-spin" />
+      ) : saveSuccess ? (
+        <Check className="pointer-events-none h-4 w-4 shrink-0 text-green-400" />
+      ) : (
+        <Save className="pointer-events-none h-4 w-4 shrink-0" />
+      )}
+      <span className="pointer-events-none hidden sm:inline">
+        {isSaving
+          ? t("charactereditor.Saving")
+          : saveSuccess
+            ? t("charactereditor.Saved")
+            : t("charactereditor.Save")}
+      </span>
+    </Button>
+  );
+
+  /** Render the appropriate action button — Save for character, New Chat for companion */
+  const renderActionButton = (compact: boolean) => {
+    if (onSave) return renderSaveButton(compact);
+    if (onNewChat) return renderNewChatButton(compact);
+    return null;
+  };
+
   return (
     <div
       className={`min-w-0 w-full overflow-visible gap-2 ${
@@ -250,7 +300,7 @@ export function ShellHeaderControls({
             >
               <div className="inline-flex items-center gap-2">
                 {renderVoiceButton(false)}
-                {renderNewChatButton(false)}
+                {renderActionButton(false)}
               </div>
             </div>
           )
@@ -276,7 +326,7 @@ export function ShellHeaderControls({
             data-testid="companion-header-desktop-new-chat"
             data-no-camera-drag="true"
           >
-            {renderNewChatButton(false)}
+            {renderActionButton(false)}
           </div>
         ) : null}
         {rightTrailingExtras}
@@ -324,7 +374,7 @@ export function ShellHeaderControls({
             className="flex items-center justify-end"
             data-testid="companion-header-mobile-new-chat"
           >
-            {renderNewChatButton(true)}
+            {renderActionButton(true)}
           </div>
         </div>
       ) : null}

packages/app-core/src/components/companion/companion-header-character.test.ts

@@ -0,0 +1,31 @@
+import { existsSync, readFileSync } from "node:fs";
+import path from "node:path";
+import { describe, expect, it } from "vitest";
+
+/**
+ * Contract test: character editor uses CompanionHeader (glassmorphic bar),
+ * not the native Header.
+ */
+describe("character editor header", () => {
+  it("App.tsx renders CompanionHeader when characterSceneVisible", () => {
+    const appPath = path.resolve(import.meta.dirname, "..", "..", "App.tsx");
+    expect(existsSync(appPath)).toBe(true);
+    const source = readFileSync(appPath, "utf-8");
+
+    // characterSceneVisible path should use CompanionHeader, not Header
+    const charBlock = source.indexOf("characterSceneVisible ?");
+    expect(charBlock).toBeGreaterThan(-1);
+    const after = source.slice(charBlock, charBlock + 800);
+    expect(after).toContain("CompanionHeader");
+    expect(after).toContain('activeShellView="character"');
+    expect(after).toContain("onSave");
+  });
+
+  it("CompanionHeader accepts onSave/isSaving/saveSuccess props", () => {
+    const headerPath = path.resolve(import.meta.dirname, "CompanionHeader.tsx");
+    const source = readFileSync(headerPath, "utf-8");
+    expect(source).toContain("onSave?:");
+    expect(source).toContain("isSaving?:");
+    expect(source).toContain("saveSuccess?:");
+  });
+});

packages/app-core/src/i18n/locales/en.json

@@ -1047,6 +1047,7 @@
   "charactereditor.AddPost": "Add Post",
   "charactereditor.Saving": "saving...",
   "charactereditor.Save": "Save",
+  "charactereditor.Saved": "Saved",
   "charactereditor.SelectBtn": "Select",
   "charactereditor.CustomizeBtn": "Customize",
   "configpageview.ConnectedToElizaCloud": "Connected to Eliza Cloud",