@elizaos/app-core 2.0.0-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shaw Walters and elizaOS Contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,90 @@
+{
+  "name": "@elizaos/app-core",
+  "version": "2.0.0-alpha.10",
+  "description": "Shared application core for elizaOS shells and white-label apps.",
+  "type": "module",
+  "license": "MIT",
+  "homepage": "https://github.com/elizaOS/eliza",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/elizaOS/eliza.git",
+    "directory": "packages/app-core"
+  },
+  "keywords": [
+    "elizaos",
+    "app-core",
+    "react",
+    "shell"
+  ],
+  "main": "src/index.ts",
+  "scripts": {
+    "clean": "rm -rf dist",
+    "build": "bun run build:dist",
+    "typecheck": "test -f ../ui/dist/index.d.ts || (cd ../ui && bun run build) && tsc --noEmit -p tsconfig.json",
+    "build:dist": "test -f ../ui/dist/index.d.ts || (cd ../ui && bun run build) && rm -rf dist && tsc -p tsconfig.build.json && node ../../scripts/copy-package-assets.mjs packages/app-core src/styles src/i18n/locales && node ../../scripts/prepare-package-dist.mjs packages/app-core",
+    "lint:check": "bunx @biomejs/biome check ./src/App.tsx ./src/actions ./src/api ./src/autonomy ./src/bridge ./src/chat ./src/coding ./src/components ./src/config ./src/events ./src/hooks ./src/i18n ./src/index.ts ./src/navigation ./src/platform ./src/providers ./src/state ./src/types ./src/utils ./src/voice ./src/ambient.d.ts",
+    "pack:dry-run": "cd dist && npm pack --dry-run"
+  },
+  "exports": {
+    ".": "./src/index.ts",
+    "./api": "./src/api/index.ts",
+    "./config": "./src/config/index.ts",
+    "./types": "./src/types/index.ts",
+    "./events": "./src/events/index.ts",
+    "./i18n": "./src/i18n/index.ts",
+    "./navigation": "./src/navigation/index.ts",
+    "./hooks": "./src/hooks/index.ts",
+    "./bridge": "./src/bridge/index.ts",
+    "./bridge/electrobun-rpc": "./src/bridge/electrobun-rpc.ts",
+    "./bridge/electrobun-runtime": "./src/bridge/electrobun-runtime.ts",
+    "./state": "./src/state/index.ts",
+    "./components": "./src/components/index.ts",
+    "./components/*": "./src/components/*",
+    "./components/ChatAvatar": "./src/components/ChatAvatar.tsx",
+    "./components/CompanionSceneHost": "./src/components/CompanionSceneHost.tsx",
+    "./components/VrmStage": "./src/components/VrmStage.tsx",
+    "./utils": "./src/utils/index.ts",
+    "./voice": "./src/voice/index.ts",
+    "./autonomy": "./src/autonomy/index.ts",
+    "./chat": "./src/chat/index.ts",
+    "./platform": "./src/platform/index.ts",
+    "./coding": "./src/coding/index.ts",
+    "./onboarding-config": "./src/onboarding-config.ts",
+    "./providers": "./src/providers/index.ts",
+    "./actions": "./src/actions/index.ts",
+    "./styles/base.css": "./src/styles/base.css",
+    "./styles/xterm.css": "./src/styles/xterm.css",
+    "./styles/anime.css": "./src/styles/anime.css",
+    "./styles/onboarding-game.css": "./src/styles/onboarding-game.css",
+    "./styles/styles.css": "./src/styles/styles.css"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@capacitor/core": "8.0.2",
+    "@capacitor/haptics": "8.0.0",
+    "@capacitor/keyboard": "8.0.0",
+    "@capacitor/preferences": "^8.0.1",
+    "@elizaos/autonomous": "2.0.0-alpha.10",
+    "@elizaos/ui": "2.0.0-alpha.10",
+    "@lifo-sh/core": "0.4.4",
+    "@lifo-sh/ui": "0.4.2",
+    "@pixiv/three-vrm": "^3.4.5",
+    "@sparkjsdev/spark": "^0.1.10",
+    "lucide-react": "^0.575.0",
+    "three": "^0.182.0",
+    "zod": "^4.3.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "@types/three": "^0.182.0",
+    "typescript": "^5.9.3"
+  },
+  "gitHead": "f77b9c9a2906a357415ad9d687ebc75bcf93926d"
+}

package/src/App.tsx

@@ -0,0 +1,472 @@
+/**
+ * Root App component — routing shell.
+ */
+
+import { Keyboard } from "@capacitor/keyboard";
+import {
+  AdvancedPageView,
+  AppsPageView,
+  AvatarLoader,
+  CharacterView,
+  ChatView,
+  ConnectionFailedBanner,
+  ConversationsSidebar,
+  ConnectorsPageView,
+  CompanionShell,
+  CompanionView,
+  CustomActionEditor,
+  CustomActionsPanel,
+  ErrorBoundary,
+  GameViewOverlay,
+  HeartbeatsView,
+  Header,
+  InventoryView,
+  KnowledgeView,
+  OnboardingWizard,
+  PairingView,
+  SaveCommandModal,
+  SettingsView,
+  SharedCompanionScene,
+  ShellOverlays,
+  StartupFailureView,
+  StreamView,
+  SystemWarningBanner,
+} from "./components";
+import {
+  BugReportProvider,
+  useBugReportState,
+  useContextMenu,
+  useStreamPopoutNavigation,
+} from "./hooks";
+import type { Tab } from "./navigation";
+import { APPS_ENABLED, COMPANION_ENABLED } from "./navigation";
+import { isIOS, isLifoPopoutValue, isNative } from "@elizaos/app-core/platform";
+import { useApp } from "./state";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+
+const CHAT_MOBILE_BREAKPOINT_PX = 1024;
+
+/** Check if we're in pop-out mode (StreamView only, no chrome).
+ *  Legacy LIFO popout values are ignored so the normal app shell still loads. */
+function useIsPopout(): boolean {
+  const [popout] = useState(() => {
+    if (typeof window === "undefined") return false;
+    const params = new URLSearchParams(
+      window.location.search || window.location.hash.split("?")[1] || "",
+    );
+    if (!params.has("popout")) return false;
+    return !isLifoPopoutValue(params.get("popout"));
+  });
+  return popout;
+}
+
+function TabScrollView({
+  children,
+  className = "",
+}: {
+  children: ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      data-shell-scroll-region="true"
+      className={`flex-1 min-h-0 min-w-0 w-full overflow-y-auto ${className}`}
+    >
+      {children}
+    </div>
+  );
+}
+
+function TabContentView({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex-1 min-h-0 min-w-0 w-full overflow-hidden">
+      {children}
+    </div>
+  );
+}
+
+function isCharacterTab(tab: Tab): boolean {
+  return tab === "character" || tab === "character-select";
+}
+
+function ViewRouter({
+  characterSceneVisible = false,
+}: {
+  characterSceneVisible?: boolean;
+}) {
+  const { tab } = useApp();
+  const view = (() => {
+    switch (tab) {
+      case "chat":
+        return <ChatView />;
+      case "companion":
+        return COMPANION_ENABLED ? <CompanionView /> : <ChatView />;
+      case "stream":
+        return <StreamView />;
+      case "apps":
+        // Apps disabled in production builds; fall through to chat
+        return APPS_ENABLED ? (
+          <TabScrollView>
+            <AppsPageView />
+          </TabScrollView>
+        ) : (
+          <ChatView />
+        );
+      case "character":
+      case "character-select":
+        return (
+          <TabScrollView>
+            <CharacterView sceneOverlay={characterSceneVisible} />
+          </TabScrollView>
+        );
+      case "wallets":
+        return (
+          <TabScrollView>
+            <InventoryView />
+          </TabScrollView>
+        );
+      case "knowledge":
+        return (
+          <TabScrollView>
+            <KnowledgeView />
+          </TabScrollView>
+        );
+      case "connectors":
+        return (
+          <TabScrollView>
+            <ConnectorsPageView />
+          </TabScrollView>
+        );
+      case "triggers":
+        return (
+          <TabScrollView>
+            <section className="w-full px-4 py-4 lg:px-6">
+              <HeartbeatsView />
+            </section>
+          </TabScrollView>
+        );
+      case "voice":
+        return (
+          <TabScrollView className="settings-scroll-region">
+            <SettingsView key="settings-voice" initialSection="voice" />
+          </TabScrollView>
+        );
+      case "settings":
+        return (
+          <TabScrollView className="settings-scroll-region">
+            <SettingsView key="settings-root" />
+          </TabScrollView>
+        );
+      case "advanced":
+      case "plugins":
+      case "skills":
+      case "actions":
+      case "fine-tuning":
+      case "trajectories":
+      case "runtime":
+      case "database":
+      case "lifo":
+      case "logs":
+      case "security":
+        return (
+          <TabContentView>
+            <AdvancedPageView />
+          </TabContentView>
+        );
+      default:
+        return <ChatView />;
+    }
+  })();
+
+  return <ErrorBoundary>{view}</ErrorBoundary>;
+}
+
+export function App() {
+  const {
+    onboardingLoading,
+    startupPhase,
+    startupError,
+    authRequired,
+    onboardingComplete,
+    retryStartup,
+    tab,
+    setTab,
+    actionNotice,
+    uiShellMode,
+    agentStatus,
+    unreadConversations,
+    activeGameViewerUrl,
+    gameOverlayEnabled,
+  } = useApp();
+
+  const isPopout = useIsPopout();
+  const shellMode =
+    tab === "character" || tab === "character-select"
+      ? "native"
+      : (uiShellMode ?? "companion");
+  const effectiveTab: Tab =
+    shellMode === "companion"
+      ? "companion"
+      : tab === "companion"
+        ? "chat"
+        : tab;
+  const characterSceneVisible =
+    shellMode === "native" &&
+    (isCharacterTab(effectiveTab) || isCharacterTab(tab));
+  const companionShellVisible = shellMode === "companion";
+  const companionSceneActive =
+    COMPANION_ENABLED && (companionShellVisible || characterSceneVisible);
+  const contextMenu = useContextMenu();
+
+  useStreamPopoutNavigation(setTab);
+
+  const [customActionsPanelOpen, setCustomActionsPanelOpen] = useState(false);
+  const [customActionsEditorOpen, setCustomActionsEditorOpen] = useState(false);
+  const [editingAction, setEditingAction] = useState<
+    import("./api").CustomActionDef | null
+  >(null);
+  const [isChatMobileLayout, setIsChatMobileLayout] = useState(() =>
+    typeof window !== "undefined"
+      ? window.innerWidth < CHAT_MOBILE_BREAKPOINT_PX
+      : false,
+  );
+  const [mobileConversationsOpen, setMobileConversationsOpen] = useState(false);
+
+  const isChat = tab === "chat";
+  const unreadCount = unreadConversations?.size ?? 0;
+  const mobileChatControls = isChatMobileLayout ? (
+    <div className="flex items-center gap-2 w-max">
+      <button
+        type="button"
+        className={`inline-flex items-center gap-2 px-3 py-2 border rounded-md text-[12px] font-semibold transition-all cursor-pointer ${
+          mobileConversationsOpen
+            ? "border-accent bg-accent-subtle text-txt"
+            : "border-border bg-card text-txt hover:border-accent hover:text-txt"
+        }`}
+        onClick={() => {
+          setMobileConversationsOpen(true);
+        }}
+        aria-label="Open chats panel"
+      >
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          aria-hidden
+        >
+          <title>Chats</title>
+          <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z" />
+        </svg>
+        Chats
+        {unreadCount > 0 && (
+          <span className="inline-flex min-w-[18px] h-[18px] items-center justify-center rounded-full bg-accent text-accent-fg text-[10px] font-bold px-1">
+            {unreadCount > 99 ? "99+" : unreadCount}
+          </span>
+        )}
+      </button>
+    </div>
+  ) : undefined;
+
+  // Keep hook order stable across onboarding/auth state transitions.
+  // Otherwise React can throw when onboarding completes and the main shell mounts.
+  useEffect(() => {
+    const handler = () => setCustomActionsPanelOpen((v) => !v);
+    window.addEventListener("toggle-custom-actions-panel", handler);
+    return () =>
+      window.removeEventListener("toggle-custom-actions-panel", handler);
+  }, []);
+
+  const handleEditorSave = useCallback(() => {
+    setCustomActionsEditorOpen(false);
+    setEditingAction(null);
+  }, []);
+
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const handleResize = () => {
+      setIsChatMobileLayout(window.innerWidth < CHAT_MOBILE_BREAKPOINT_PX);
+    };
+    handleResize();
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+  useEffect(() => {
+    if (!isChatMobileLayout) {
+      setMobileConversationsOpen(false);
+    }
+  }, [isChatMobileLayout]);
+
+  useEffect(() => {
+    if (!isChat) {
+      setMobileConversationsOpen(false);
+    }
+  }, [isChat]);
+
+  useEffect(() => {
+    if (!isNative || !isIOS) {
+      return;
+    }
+
+    // Disable the iOS WebView scroll only while the companion shell is active.
+    void Keyboard.setScroll({ isDisabled: companionShellVisible }).catch(() => {
+      // Ignore bridge failures so web/electron shells keep working.
+    });
+  }, [companionShellVisible]);
+
+  useEffect(() => {
+    if (!isNative || !isIOS) {
+      return;
+    }
+
+    return () => {
+      void Keyboard.setScroll({ isDisabled: false }).catch(() => {
+        // Ignore cleanup failures when the native bridge is unavailable.
+      });
+    };
+  }, []);
+
+  const bugReport = useBugReportState();
+  const agentStarting = agentStatus?.state === "starting";
+
+  useEffect(() => {
+    const STARTUP_TIMEOUT_MS = 300_000;
+    if ((startupPhase as string) !== "ready" && !startupError) {
+      const timer = setTimeout(() => {
+        retryStartup();
+      }, STARTUP_TIMEOUT_MS);
+      return () => clearTimeout(timer);
+    }
+  }, [startupPhase, startupError, retryStartup]);
+
+  // Pop-out mode — render only StreamView, skip startup gates.
+  // Platform init is skipped in main.tsx; AppProvider hydrates WS in background.
+  if (isPopout) {
+    return (
+      <div className="flex flex-col h-screen w-screen font-body text-txt bg-bg overflow-hidden">
+        <StreamView />
+      </div>
+    );
+  }
+
+  if (startupError) {
+    return <StartupFailureView error={startupError} onRetry={retryStartup} />;
+  }
+
+  if (onboardingLoading || agentStarting) {
+    const loadingLabel = agentStarting
+      ? "Initializing agent"
+      : "Starting systems";
+    return <AvatarLoader label={loadingLabel} fullScreen />;
+  }
+
+  if (authRequired) return <PairingView />;
+  if (!onboardingComplete) return <OnboardingWizard />;
+
+  const shellContent = companionShellVisible ? (
+    <CompanionShell tab={effectiveTab} actionNotice={actionNotice} />
+  ) : tab === "stream" ? (
+    <div className="flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg">
+      <Header />
+      <main className="flex-1 min-h-0 overflow-hidden">
+        <StreamView />
+      </main>
+    </div>
+  ) : isChat ? (
+    <div className="flex flex-col flex-1 min-h-0 w-full font-body text-txt bg-bg">
+      <Header mobileLeft={mobileChatControls} />
+      <div className="flex flex-1 min-h-0 relative">
+        {isChatMobileLayout ? (
+          <>
+            <main className="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-2 px-2">
+              <ChatView />
+            </main>
+
+            {mobileConversationsOpen && (
+              <div className="fixed inset-0 z-[120] bg-bg">
+                <ConversationsSidebar
+                  mobile
+                  onClose={() => setMobileConversationsOpen(false)}
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            <ConversationsSidebar />
+            <main className="flex flex-col flex-1 min-h-0 min-w-0 overflow-hidden pt-3 px-3 xl:px-5">
+              <ChatView />
+            </main>
+          </>
+        )}
+        <CustomActionsPanel
+          open={customActionsPanelOpen}
+          onClose={() => setCustomActionsPanelOpen(false)}
+          onOpenEditor={(action) => {
+            setEditingAction(action ?? null);
+            setCustomActionsEditorOpen(true);
+          }}
+        />
+      </div>
+    </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} />
+      </main>
+    </div>
+  );
+
+  const appShell = COMPANION_ENABLED ? (
+    <SharedCompanionScene
+      active={companionSceneActive}
+      interactive={companionShellVisible}
+    >
+      {shellContent}
+    </SharedCompanionScene>
+  ) : (
+    shellContent
+  );
+
+  return (
+    <BugReportProvider value={bugReport}>
+      {appShell}
+      {/* Persistent game overlay — stays visible across all tabs */}
+      {activeGameViewerUrl && gameOverlayEnabled && tab !== "apps" && (
+        <GameViewOverlay />
+      )}
+      <ShellOverlays actionNotice={actionNotice} />
+      <SaveCommandModal
+        open={contextMenu.saveCommandModalOpen}
+        text={contextMenu.saveCommandText}
+        onSave={contextMenu.confirmSaveCommand}
+        onClose={contextMenu.closeSaveCommandModal}
+      />
+      <CustomActionEditor
+        open={customActionsEditorOpen}
+        action={editingAction}
+        onSave={handleEditorSave}
+        onClose={() => {
+          setCustomActionsEditorOpen(false);
+          setEditingAction(null);
+        }}
+      />
+      <ConnectionFailedBanner />
+      <SystemWarningBanner />
+    </BugReportProvider>
+  );
+}