@elizaos/app-core 2.0.0-alpha.37

package/src/components/LanguageDropdown.tsx

@@ -0,0 +1,187 @@
+/**
+ * LanguageDropdown — language selector used in the app header and settings.
+ *
+ * Fully props-driven; no app context dependency. Takes the current language
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+
+import { Check, ChevronDown } from "lucide-react";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import type { UiLanguage } from "../i18n/messages";
+
+/** Minimal translator function type. Receive key, return string. */
+export type TranslatorFn = (key: string) => string;
+
+/** Language metadata with flag emoji and native label. */
+export const LANGUAGES: { id: UiLanguage; flag: string; label: string }[] = [
+  { id: "en", flag: "🇺🇸", label: "English" },
+  { id: "zh-CN", flag: "🇨🇳", label: "中文" },
+  { id: "ko", flag: "🇰🇷", label: "한국어" },
+  { id: "es", flag: "🇪🇸", label: "Español" },
+  { id: "pt", flag: "🇧🇷", label: "Português" },
+];
+
+export interface LanguageDropdownProps {
+  uiLanguage: UiLanguage;
+  setUiLanguage: (language: UiLanguage) => void;
+  /** Optional translator for ARIA labels */
+  t?: TranslatorFn;
+  /** Optional extra className on the root */
+  className?: string;
+  /** Optional extra className on the trigger button */
+  triggerClassName?: string;
+  variant?: "native" | "companion";
+  menuPlacement?: "bottom-end" | "top-end";
+}
+
+export function LanguageDropdown({
+  uiLanguage,
+  setUiLanguage,
+  t,
+  className,
+  triggerClassName,
+  variant = "native",
+  menuPlacement = "bottom-end",
+}: LanguageDropdownProps) {
+  const [open, setOpen] = useState(false);
+  const rootRef = useRef<HTMLDivElement>(null);
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const [menuPos, setMenuPos] = useState<{
+    top?: number;
+    bottom?: number;
+    right: number;
+  } | null>(null);
+
+  // Compute dropdown position from trigger button rect (for companion portal)
+  const updateMenuPos = useCallback(() => {
+    if (variant !== "companion" || !triggerRef.current) return;
+    const rect = triggerRef.current.getBoundingClientRect();
+    if (menuPlacement === "top-end") {
+      setMenuPos({
+        bottom: window.innerHeight - rect.top + 4,
+        right: window.innerWidth - rect.right,
+      });
+      return;
+    }
+    setMenuPos({
+      top: rect.bottom + 4,
+      right: window.innerWidth - rect.right,
+    });
+  }, [menuPlacement, variant]);
+
+  // Close on outside click
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: MouseEvent) => {
+      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
+        // Also check if clicked inside the portaled menu
+        const portalMenu = document.getElementById("lang-dropdown-portal");
+        if (portalMenu?.contains(e.target as Node)) return;
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+
+  // Close on Escape
+  useEffect(() => {
+    if (!open) return;
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handler);
+    return () => document.removeEventListener("keydown", handler);
+  }, [open]);
+
+  // Update position when opening
+  useEffect(() => {
+    if (open) updateMenuPos();
+  }, [open, updateMenuPos]);
+
+  const current = LANGUAGES.find((l) => l.id === uiLanguage) ?? LANGUAGES[0];
+  const triggerClass = `inline-flex items-center gap-1.5 h-9 px-2 sm:px-3 border border-border/50 bg-bg/50 backdrop-blur-md text-[11px] sm:text-xs font-medium cursor-pointer transition-all duration-300 text-txt hover:border-accent hover:text-txt rounded-md shadow-sm ${open ? "border-accent text-txt bg-accent/5" : ""} ${triggerClassName ?? ""}`;
+  const optionClass = (selected: boolean) =>
+    `w-full flex items-center justify-between px-3 py-2 text-sm transition-colors hover:bg-bg-hover cursor-pointer ${selected ? "text-txt bg-accent/5 font-medium" : "text-txt"}`;
+  const inlineMenuPositionClass =
+    menuPlacement === "top-end"
+      ? "absolute bottom-full right-0 mb-1 z-50"
+      : "absolute top-full right-0 mt-1 z-50";
+
+  const menuContent = open && (
+    <ul
+      id="lang-dropdown-portal"
+      className={`w-36 rounded-lg bg-bg-elevated border border-border shadow-xl overflow-hidden py-1 ${variant === "companion" ? "fixed" : inlineMenuPositionClass}`}
+      style={
+        variant === "companion" && menuPos
+          ? {
+              ...(menuPos.top !== undefined ? { top: menuPos.top } : {}),
+              ...(menuPos.bottom !== undefined
+                ? { bottom: menuPos.bottom }
+                : {}),
+              right: menuPos.right,
+              zIndex: 10001,
+              backdropFilter: "blur(24px)",
+              boxShadow: "var(--shadow-lg)",
+            }
+          : undefined
+      }
+      aria-label={t?.("settings.language") ?? "Language"}
+    >
+      {LANGUAGES.map((lang) => (
+        <li key={lang.id} role="presentation">
+          <button
+            type="button"
+            role="option"
+            aria-selected={lang.id === uiLanguage}
+            className={optionClass(lang.id === uiLanguage)}
+            onClick={() => {
+              setUiLanguage(lang.id);
+              setOpen(false);
+            }}
+            data-testid={`language-option-${lang.id}`}
+          >
+            <div className="flex items-center gap-2">
+              <span>{lang.flag}</span>
+              <span>{lang.label}</span>
+            </div>
+            {lang.id === uiLanguage && <Check className="w-4 h-4" />}
+          </button>
+        </li>
+      ))}
+    </ul>
+  );
+
+  return (
+    <div
+      ref={rootRef}
+      className={`relative inline-flex shrink-0 ${className ?? ""}`}
+      data-testid="language-dropdown"
+    >
+      <button
+        ref={triggerRef}
+        type="button"
+        className={triggerClass}
+        onClick={() => setOpen((v) => !v)}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        aria-label={t?.("settings.language") ?? "Language"}
+        data-testid="language-dropdown-trigger"
+      >
+        <span className="text-sm leading-none">{current.flag}</span>
+        <span className="hidden sm:inline uppercase tracking-widest opacity-80">
+          {current.id}
+        </span>
+        <ChevronDown
+          className={`w-3.5 h-3.5 opacity-60 transition-transform ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+
+      {variant === "companion" && menuContent
+        ? createPortal(menuContent, document.body)
+        : menuContent}
+    </div>
+  );
+}

package/src/components/LifoMonitorPanel.tsx

@@ -0,0 +1,196 @@
+import { Button } from "@elizaos/ui";
+import type { SandboxBrowserEndpoints, SandboxWindowInfo } from "../api/client";
+import { useApp } from "../state";
+
+interface LifoMonitorPanelProps {
+  monitorOnline: boolean;
+  monitorError: string | null;
+  monitorUpdatedAt: number | null;
+  noVncActive: boolean;
+  safeNoVncEndpoint: string | null;
+  noVncFailed: boolean;
+  setNoVncFailed: React.Dispatch<React.SetStateAction<boolean>>;
+  screenPreviewUrl: string | null;
+  browserEndpoints: SandboxBrowserEndpoints | null;
+  sandboxWindows: SandboxWindowInfo[];
+  noVncEndpoint: string | null;
+  refreshMonitorMeta: () => Promise<void>;
+  refreshScreenPreview: () => Promise<void>;
+  setMonitorOnline: React.Dispatch<React.SetStateAction<boolean>>;
+  setMonitorError: React.Dispatch<React.SetStateAction<string | null>>;
+}
+
+export function LifoMonitorPanel({
+  monitorOnline,
+  monitorError,
+  monitorUpdatedAt,
+  noVncActive,
+  safeNoVncEndpoint,
+  noVncFailed,
+  setNoVncFailed,
+  screenPreviewUrl,
+  browserEndpoints,
+  sandboxWindows,
+  noVncEndpoint,
+  refreshMonitorMeta,
+  refreshScreenPreview,
+  setMonitorOnline,
+  setMonitorError,
+}: LifoMonitorPanelProps) {
+  const { t } = useApp();
+  return (
+    <div className="grid grid-cols-1 xl:grid-cols-[2fr_1fr] gap-3">
+      <div className="rounded-xl border border-border overflow-hidden bg-panel min-h-[320px]">
+        <div className="px-3 py-2 border-b border-border flex items-center justify-between gap-2">
+          <div>
+            <div className="text-xs font-semibold text-txt">
+              {t("lifomonitorpanel.LifoComputerUseSu")}
+            </div>
+            <div className="text-[11px] text-muted">
+              {t("lifomonitorpanel.WatchOnlyDesktopM")}
+            </div>
+          </div>
+          <div className="flex items-center gap-2">
+            <span
+              className={`rounded-full px-2 py-1 text-[11px] font-medium ${
+                monitorOnline ? "bg-ok/20 text-ok" : "bg-warn/20 text-warn"
+              }`}
+            >
+              {monitorOnline ? "live" : "offline"}
+            </span>
+            <Button
+              variant="outline"
+              size="sm"
+              onClick={() => {
+                setNoVncFailed(false);
+                void refreshMonitorMeta();
+                void refreshScreenPreview();
+              }}
+              className="h-7 px-2.5 py-1 text-[11px] shadow-sm hover:border-accent hover:text-txt"
+            >
+              {t("appsview.Refresh")}
+            </Button>
+          </div>
+        </div>
+
+        <div className="h-[320px] bg-black/90 flex items-center justify-center overflow-hidden">
+          {noVncActive && safeNoVncEndpoint ? (
+            <iframe
+              src={safeNoVncEndpoint}
+              title={t("lifomonitorpanel.SandboxLiveNoVNCS")}
+              className="h-full w-full border-0"
+              sandbox="allow-scripts allow-forms allow-pointer-lock"
+              onLoad={() => {
+                setMonitorOnline(true);
+                setMonitorError(null);
+              }}
+              onError={() => {
+                setNoVncFailed(true);
+                setMonitorOnline(false);
+                setMonitorError(
+                  "Live noVNC surface unavailable. Falling back to screenshots.",
+                );
+              }}
+            />
+          ) : screenPreviewUrl ? (
+            <img
+              src={screenPreviewUrl}
+              alt="Sandbox computer-use surface"
+              className="h-full w-full object-contain"
+            />
+          ) : (
+            <p className="px-4 text-center text-xs text-muted">
+              {t("lifomonitorpanel.WaitingForSandbox")}
+            </p>
+          )}
+        </div>
+
+        <div className="px-3 py-2 border-t border-border text-[11px] text-muted">
+          {monitorUpdatedAt
+            ? `Last frame: ${new Date(monitorUpdatedAt).toLocaleTimeString()}`
+            : "No frames captured yet"}
+        </div>
+      </div>
+
+      <div className="rounded-xl border border-border overflow-hidden bg-panel min-h-[320px]">
+        <div className="px-3 py-2 border-b border-border">
+          <div className="text-xs font-semibold text-txt">
+            {t("lifomonitorpanel.BrowserSandboxCo")}
+          </div>
+          <div className="text-[11px] text-muted">
+            {t("lifomonitorpanel.AgentControlsBrows")}
+          </div>
+        </div>
+
+        <div className="p-3 space-y-3 text-[11px]">
+          <div>
+            <div className="text-muted uppercase tracking-wide text-[10px]">
+              {t("lifomonitorpanel.LiveSurface")}
+            </div>
+            <div className="mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all">
+              {noVncEndpoint && !noVncFailed
+                ? "noVNC"
+                : noVncEndpoint
+                  ? "noVNC failed -> screenshot fallback"
+                  : "Screenshot fallback"}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-muted uppercase tracking-wide text-[10px]">
+              {t("lifomonitorpanel.CDPEndpoint")}
+            </div>
+            <div className="mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all">
+              {browserEndpoints?.cdpEndpoint ?? "Unavailable"}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-muted uppercase tracking-wide text-[10px]">
+              {t("lifomonitorpanel.WSEndpoint")}
+            </div>
+            <div className="mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all">
+              {browserEndpoints?.wsEndpoint ?? "Unavailable"}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-muted uppercase tracking-wide text-[10px]">
+              {t("lifomonitorpanel.noVNCEndpoint")}
+            </div>
+            <div className="mt-1 rounded border border-border bg-card px-2 py-1 text-txt break-all">
+              {browserEndpoints?.noVncEndpoint ?? "Unavailable"}
+            </div>
+          </div>
+
+          <div>
+            <div className="text-muted uppercase tracking-wide text-[10px]">
+              {t("lifomonitorpanel.VisibleWindows")}
+              {sandboxWindows.length})
+            </div>
+            <div className="mt-1 max-h-[154px] overflow-auto rounded border border-border bg-card p-2 space-y-1">
+              {sandboxWindows.length > 0 ? (
+                sandboxWindows.slice(0, 20).map((windowInfo) => (
+                  <div key={windowInfo.id} className="text-txt">
+                    <span className="text-muted">{windowInfo.app}:</span>{" "}
+                    {windowInfo.title || "(untitled)"}
+                  </div>
+                ))
+              ) : (
+                <div className="text-muted">
+                  {t("lifomonitorpanel.NoActiveWindowsRe")}
+                </div>
+              )}
+            </div>
+          </div>
+
+          {monitorError && (
+            <div className="rounded border border-danger/40 bg-danger/10 px-2 py-1 text-danger">
+              {monitorError}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}