@elizaos/app-core 2.0.0-alpha.37

package/src/App.tsx

@@ -0,0 +1,469 @@
+/**
+ * Root App component — routing shell.
+ */
+
+import { Keyboard } from "@capacitor/keyboard";
+import { isIOS, isLifoPopoutValue, isNative } from "@elizaos/app-core/platform";
+import { type ReactNode, useCallback, useEffect, useState } from "react";
+import {
+  AdvancedPageView,
+  AppsPageView,
+  AvatarLoader,
+  CharacterView,
+  ChatView,
+  CompanionShell,
+  CompanionView,
+  ConnectionFailedBanner,
+  ConnectorsPageView,
+  ConversationsSidebar,
+  CustomActionEditor,
+  CustomActionsPanel,
+  ErrorBoundary,
+  GameViewOverlay,
+  Header,
+  HeartbeatsView,
+  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 { useApp } from "./state";
+
+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 = 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>
+  );
+}

package/src/actions/character.ts

@@ -0,0 +1,113 @@
+/**
+ * Character action helpers — extracted from AppContext.
+ *
+ * Pure functions for character CRUD and draft management.
+ */
+
+import type { CharacterData, MiladyClient } from "../api/client";
+
+export interface CharacterActionContext {
+  client: MiladyClient;
+  setCharacterData: (data: CharacterData | null) => void;
+  setCharacterDraft: (
+    fn: CharacterData | ((prev: CharacterData) => CharacterData),
+  ) => void;
+  setCharacterLoading: (loading: boolean) => void;
+  setCharacterSaving: (saving: boolean) => void;
+  setCharacterSaveError: (error: string | null) => void;
+  setCharacterSaveSuccess: (message: string | null) => void;
+}
+
+export async function loadCharacter(
+  ctx: CharacterActionContext,
+): Promise<void> {
+  ctx.setCharacterLoading(true);
+  ctx.setCharacterSaveError(null);
+  ctx.setCharacterSaveSuccess(null);
+  try {
+    const { character } = await ctx.client.getCharacter();
+    ctx.setCharacterData(character);
+    ctx.setCharacterDraft({
+      name: character.name ?? "",
+      username: character.username ?? "",
+      bio: Array.isArray(character.bio)
+        ? character.bio.join("\n")
+        : (character.bio ?? ""),
+      system: character.system ?? "",
+      adjectives: character.adjectives ?? [],
+      style: {
+        all: character.style?.all ?? [],
+        chat: character.style?.chat ?? [],
+        post: character.style?.post ?? [],
+      },
+      messageExamples: character.messageExamples ?? [],
+      postExamples: character.postExamples ?? [],
+    });
+  } catch {
+    ctx.setCharacterData(null);
+    ctx.setCharacterDraft({});
+  }
+  ctx.setCharacterLoading(false);
+}
+
+export function prepareDraftForSave(
+  draft: CharacterData,
+): Record<string, unknown> {
+  const result = { ...draft };
+  if (typeof result.bio === "string") {
+    const lines = result.bio
+      .split("\n")
+      .map((l: string) => l.trim())
+      .filter((l: string) => l.length > 0);
+    result.bio = lines.length > 0 ? lines : undefined;
+  }
+  if (Array.isArray(result.adjectives) && result.adjectives.length === 0)
+    delete result.adjectives;
+  if (Array.isArray(result.postExamples) && result.postExamples.length === 0)
+    delete result.postExamples;
+  if (
+    Array.isArray(result.messageExamples) &&
+    result.messageExamples.length === 0
+  )
+    delete result.messageExamples;
+  if (result.style) {
+    const s = result.style as Record<string, string[] | undefined>;
+    if (s.all && s.all.length === 0) delete s.all;
+    if (s.chat && s.chat.length === 0) delete s.chat;
+    if (s.post && s.post.length === 0) delete s.post;
+    if (!s.all && !s.chat && !s.post) delete result.style;
+  }
+  if (result.name) result.username = result.name;
+  if (!result.name) delete result.name;
+  if (!result.username) delete result.username;
+  if (!result.system) delete result.system;
+  return result;
+}
+
+export function parseMessageExamplesInput(value: string): Array<{
+  examples: Array<{ name: string; content: { text: string } }>;
+}> {
+  if (!value.trim()) return [];
+  const blocks = value.split(/\n\s*\n/).filter((b) => b.trim().length > 0);
+  return blocks.map((block) => {
+    const lines = block.split("\n").filter((l) => l.trim().length > 0);
+    const examples = lines.map((line) => {
+      const colonIdx = line.indexOf(":");
+      if (colonIdx > 0) {
+        return {
+          name: line.slice(0, colonIdx).trim(),
+          content: { text: line.slice(colonIdx + 1).trim() },
+        };
+      }
+      return { name: "User", content: { text: line.trim() } };
+    });
+    return { examples };
+  });
+}
+
+export function parseArrayInput(value: string): string[] {
+  return value
+    .split("\n")
+    .map((s) => s.trim())
+    .filter((s) => s.length > 0);
+}

package/src/actions/chat-helpers.ts

@@ -0,0 +1,100 @@
+/**
+ * Chat helpers — streaming delta computation, formatting, and common patterns.
+ *
+ * Extracted from AppContext to be reusable across providers.
+ */
+
+import {
+  computeStreamingDelta as computeStreamingDeltaInternal,
+  mergeStreamingText,
+} from "../utils/streaming-text";
+
+export { mergeStreamingText };
+
+/**
+ * Compute the streaming delta between the accumulated text and the new token.
+ * The SSE endpoint may emit the full text so far or just the delta — this
+ * function handles both by returning only the new characters.
+ */
+export function computeStreamingDelta(
+  accumulated: string,
+  token: string,
+): string {
+  return computeStreamingDeltaInternal(accumulated, token);
+}
+
+/**
+ * Determine whether the final stream response text should replace the
+ * accumulated text in the UI. This handles cases where the final text
+ * differs from what was streamed (e.g., post-processing on the server).
+ */
+export function shouldApplyFinalStreamText(
+  streamed: string,
+  final: string,
+): boolean {
+  if (!final) return false;
+  return final !== streamed;
+}
+
+/**
+ * Format a search result section with a label and bullet items.
+ */
+export function formatSearchBullet(label: string, items: string[]): string {
+  if (items.length === 0) return `**${label}**: (none)`;
+  return `**${label}**:\n${items.map((item) => `• ${item}`).join("\n")}`;
+}
+
+/**
+ * Parse slash command input into a command name and raw arguments.
+ */
+export function parseSlashCommandInput(
+  rawText: string,
+): { name: string; argsRaw: string } | null {
+  if (!rawText.startsWith("/")) return null;
+  const rest = rawText.slice(1);
+  const spaceIdx = rest.indexOf(" ");
+  if (spaceIdx < 0) {
+    return { name: rest.toLowerCase(), argsRaw: "" };
+  }
+  return {
+    name: rest.slice(0, spaceIdx).toLowerCase(),
+    argsRaw: rest.slice(spaceIdx + 1),
+  };
+}
+
+/**
+ * Normalize a custom action name for slash command matching.
+ */
+export function normalizeCustomActionName(name: string): string {
+  return name.trim().toLowerCase().replace(/\s+/g, "-");
+}
+
+/**
+ * Parse custom action params from a slash command args string.
+ */
+export function parseCustomActionParams(
+  action: { params?: Array<{ name: string; required?: boolean }> },
+  argsRaw: string,
+): { params: Record<string, string>; missingRequired: string[] } {
+  const params: Record<string, string> = {};
+  const missingRequired: string[] = [];
+
+  if (!action.params || action.params.length === 0) {
+    if (argsRaw.trim()) {
+      params.input = argsRaw.trim();
+    }
+    return { params, missingRequired };
+  }
+
+  const tokens = argsRaw.trim().split(/\s+/);
+  for (let i = 0; i < action.params.length; i++) {
+    const param = action.params[i];
+    if (i < tokens.length && tokens[i]) {
+      params[param.name] = tokens[i];
+    } else if (param.required) {
+      missingRequired.push(param.name);
+    }
+  }
+
+  return { params, missingRequired };
+}