@elizaos/app-core 2.0.0-alpha.10

package/src/components/SystemWarningBanner.tsx

@@ -0,0 +1,71 @@
+import { useEffect, useRef } from "react";
+import { useApp } from "../state";
+
+const AUTO_DISMISS_MS = 20_000;
+
+/**
+ * Renders amber warning banners for system-level warnings
+ * broadcast via WebSocket `system-warning` events.
+ */
+export function SystemWarningBanner() {
+  const { systemWarnings, dismissSystemWarning, backendConnection } = useApp();
+  const timersRef = useRef<Map<string, ReturnType<typeof setTimeout>>>(
+    new Map(),
+  );
+
+  useEffect(() => {
+    if (!systemWarnings?.length) return;
+    const timers = timersRef.current;
+    for (const message of systemWarnings) {
+      if (!timers.has(message)) {
+        const timer = setTimeout(() => {
+          timers.delete(message);
+          dismissSystemWarning(message);
+        }, AUTO_DISMISS_MS);
+        timers.set(message, timer);
+      }
+    }
+    for (const [msg, timer] of timers) {
+      if (!systemWarnings.includes(msg)) {
+        clearTimeout(timer);
+        timers.delete(msg);
+      }
+    }
+  }, [systemWarnings, dismissSystemWarning]);
+
+  useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      for (const timer of timers.values()) clearTimeout(timer);
+      timers.clear();
+    };
+  }, []);
+
+  if (!systemWarnings?.length) return null;
+
+  const connectionBannerVisible =
+    backendConnection?.state === "reconnecting" ||
+    backendConnection?.state === "failed";
+  const baseTop = connectionBannerVisible ? 36 : 0;
+
+  return (
+    <>
+      {systemWarnings.map((message, index) => (
+        <div
+          key={message}
+          className="fixed left-0 right-0 z-[9998] flex items-center justify-between gap-3 bg-amber-500 px-4 py-2 text-[13px] font-medium text-white shadow-lg"
+          style={{ top: `${baseTop + index * 36}px` }}
+        >
+          <span className="truncate">{message}</span>
+          <button
+            type="button"
+            onClick={() => dismissSystemWarning(message)}
+            className="rounded px-2 py-0.5 text-[12px] text-amber-100 hover:bg-amber-600 transition-colors cursor-pointer shrink-0"
+          >
+            x
+          </button>
+        </div>
+      ))}
+    </>
+  );
+}

package/src/components/ThemeToggle.tsx

@@ -0,0 +1,100 @@
+/**
+ * ThemeToggle — day/night switch for light/dark theme.
+ *
+ * Fully props-driven; no app context dependency. Takes the current theme
+ * and a setter from the caller. Works in both "native" and "companion"
+ * visual variants.
+ */
+
+import { useCallback } from "react";
+import type { UiTheme } from "../state/persistence";
+
+/** Minimal translator function type. */
+export type ThemeTranslatorFn = (key: string) => string;
+
+export interface ThemeToggleProps {
+  uiTheme: UiTheme;
+  setUiTheme: (theme: UiTheme) => void;
+  /** Optional translator for ARIA labels */
+  t?: ThemeTranslatorFn;
+  /** Optional extra className on the root */
+  className?: string;
+  variant?: "native" | "companion";
+}
+
+/** Sun icon SVG for light mode indicator */
+function SunIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="12" r="5" />
+      <line x1="12" y1="1" x2="12" y2="3" />
+      <line x1="12" y1="21" x2="12" y2="23" />
+      <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+      <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+      <line x1="1" y1="12" x2="3" y2="12" />
+      <line x1="21" y1="12" x2="23" y2="12" />
+      <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+      <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+    </svg>
+  );
+}
+
+/** Moon icon SVG for dark mode indicator */
+function MoonIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+    </svg>
+  );
+}
+
+export function ThemeToggle({
+  uiTheme,
+  setUiTheme,
+  t: _t,
+  className,
+  variant: _variant = "native",
+}: ThemeToggleProps) {
+  const isDark = uiTheme === "dark";
+
+  const handleToggle = useCallback(() => {
+    setUiTheme(isDark ? "light" : "dark");
+  }, [isDark, setUiTheme]);
+
+  return (
+    <button
+      type="button"
+      onClick={handleToggle}
+      className={`inline-flex items-center justify-center w-11 h-11 min-w-[44px] min-h-[44px] border border-border/50 bg-bg/50 backdrop-blur-md cursor-pointer text-sm leading-none hover:border-accent hover:text-txt font-medium hover:-translate-y-0.5 transition-all duration-300 hover:shadow-[0_0_15px_rgba(var(--accent),0.5)] active:scale-95 rounded-xl text-txt shadow-sm ${className ?? ""}`}
+      data-testid="theme-toggle"
+    >
+      {isDark ? (
+        <SunIcon className="w-5 h-5" />
+      ) : (
+        <MoonIcon className="w-5 h-5" />
+      )}
+    </button>
+  );
+}

package/src/components/TrajectoriesView.tsx

@@ -0,0 +1,526 @@
+/**
+ * TrajectoriesView — view and analyze LLM call trajectories.
+ *
+ * Shows all captured LLM interactions with token counts, latency, and context.
+ * Supports filtering, search, export, and clearing trajectories.
+ */
+
+import {
+  client,
+  type TrajectoryConfig,
+  type TrajectoryListResult,
+  type TrajectoryRecord,
+  type TrajectoryStats,
+} from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { confirmDesktopAction } from "@elizaos/app-core/utils";
+import {
+  Button,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Input,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import {
+  formatTrajectoryDuration,
+  formatTrajectoryTimestamp,
+  formatTrajectoryTokenCount,
+} from "./trajectory-format";
+
+type StatusFilter = "" | "active" | "completed" | "error";
+
+const STATUS_COLORS: Record<string, { bg: string; fg: string }> = {
+  active: { bg: "rgba(59, 130, 246, 0.15)", fg: "rgb(59, 130, 246)" },
+  completed: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
+  error: { bg: "rgba(239, 68, 68, 0.15)", fg: "rgb(239, 68, 68)" },
+};
+
+const SOURCE_COLORS: Record<string, { bg: string; fg: string }> = {
+  chat: { bg: "rgba(99, 102, 241, 0.15)", fg: "rgb(99, 102, 241)" },
+  autonomy: { bg: "rgba(245, 158, 11, 0.15)", fg: "rgb(245, 158, 11)" },
+  telegram: { bg: "rgba(34, 197, 94, 0.15)", fg: "rgb(34, 197, 94)" },
+  discord: { bg: "rgba(88, 101, 242, 0.15)", fg: "rgb(88, 101, 242)" },
+  api: { bg: "rgba(156, 163, 175, 0.15)", fg: "rgb(156, 163, 175)" },
+  orchestrator: { bg: "rgba(168, 85, 247, 0.15)", fg: "rgb(168, 85, 247)" },
+};
+
+interface TrajectoriesViewProps {
+  onSelectTrajectory?: (id: string) => void;
+}
+
+export function TrajectoriesView({
+  onSelectTrajectory,
+}: TrajectoriesViewProps) {
+  const { t } = useApp();
+  const [loading, setLoading] = useState(true);
+  const [result, setResult] = useState<TrajectoryListResult | null>(null);
+  const [stats, setStats] = useState<TrajectoryStats | null>(null);
+  const [config, setConfig] = useState<TrajectoryConfig | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  // Filters
+  const [statusFilter, setStatusFilter] = useState<StatusFilter>("");
+  const [sourceFilter, setSourceFilter] = useState("");
+  const [searchQuery, setSearchQuery] = useState("");
+  const [page, setPage] = useState(0);
+  const pageSize = 50;
+
+  // Actions
+  const [exporting, setExporting] = useState(false);
+  const [clearing, setClearing] = useState(false);
+  const [updatingLogging, setUpdatingLogging] = useState(false);
+
+  const loadTrajectories = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [trajResult, statsResult, configResult] = await Promise.all([
+        client.getTrajectories({
+          limit: pageSize,
+          offset: page * pageSize,
+          status: statusFilter || undefined,
+          source: sourceFilter || undefined,
+          search: searchQuery || undefined,
+        }),
+        client.getTrajectoryStats(),
+        client.getTrajectoryConfig(),
+      ]);
+      setResult(trajResult);
+      setStats(statsResult);
+      setConfig(configResult);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : t("trajectoriesview.FailedToLoad"),
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [page, statusFilter, sourceFilter, searchQuery, t]);
+
+  useEffect(() => {
+    void loadTrajectories();
+  }, [loadTrajectories]);
+
+  const handleToggleLogging = async () => {
+    if (!config) return;
+    setUpdatingLogging(true);
+    try {
+      const updated = await client.updateTrajectoryConfig({
+        enabled: !config.enabled,
+      });
+      setConfig(updated);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("trajectoriesview.FailedToUpdateConfig"),
+      );
+    } finally {
+      setUpdatingLogging(false);
+    }
+  };
+
+  const handleExport = async (
+    format: "json" | "csv" | "zip",
+    includePrompts: boolean,
+  ) => {
+    setExporting(true);
+    try {
+      const blob = await client.exportTrajectories({ format, includePrompts });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `trajectories-${new Date().toISOString().split("T")[0]}.${format}`;
+      a.click();
+      URL.revokeObjectURL(url);
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("trajectoriesview.FailedToExport"),
+      );
+    } finally {
+      setExporting(false);
+    }
+  };
+
+  const handleClearAll = async () => {
+    const confirmed = await confirmDesktopAction({
+      title: t("trajectoriesview.DeleteAllTitle"),
+      message: t("trajectoriesview.DeleteAllMessage"),
+      detail: t("trajectoriesview.DeleteAllDetail"),
+      confirmLabel: t("common.deleteAll"),
+      cancelLabel: t("common.cancel"),
+      type: "warning",
+    });
+    if (!confirmed) {
+      return;
+    }
+    setClearing(true);
+    try {
+      await client.clearAllTrajectories();
+      void loadTrajectories();
+    } catch (err) {
+      setError(
+        err instanceof Error
+          ? err.message
+          : t("trajectoriesview.FailedToClear"),
+      );
+    } finally {
+      setClearing(false);
+    }
+  };
+
+  const handleClearFilters = () => {
+    setStatusFilter("");
+    setSourceFilter("");
+    setSearchQuery("");
+    setPage(0);
+  };
+
+  const hasActiveFilters =
+    statusFilter !== "" || sourceFilter !== "" || searchQuery !== "";
+  const trajectories = result?.trajectories ?? [];
+  const total = result?.total ?? 0;
+  const totalPages = Math.ceil(total / pageSize);
+
+  const sources = stats?.bySource ? Object.keys(stats.bySource) : [];
+
+  return (
+    <div className="flex flex-col h-full gap-3">
+      {/* Stats summary */}
+      {stats && (
+        <div className="flex flex-wrap gap-4 text-xs">
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted">{t("trajectoriesview.Total")}</span>
+            <span className="font-semibold">
+              {stats.totalTrajectories.toLocaleString()}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted">{t("trajectoriesview.LLMCalls")}</span>
+            <span className="font-semibold">
+              {stats.totalLlmCalls.toLocaleString()}
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted">{t("trajectoriesview.Tokens")}</span>
+            <span className="font-semibold text-txt">
+              {formatTrajectoryTokenCount(
+                stats.totalPromptTokens + stats.totalCompletionTokens,
+                { emptyLabel: "0" },
+              )}
+            </span>
+            <span className="text-muted text-[10px]">
+              (
+              {formatTrajectoryTokenCount(stats.totalPromptTokens, {
+                emptyLabel: "0",
+              })}
+              ↑{" "}
+              {formatTrajectoryTokenCount(stats.totalCompletionTokens, {
+                emptyLabel: "0",
+              })}
+              ↓)
+            </span>
+          </div>
+          <div className="flex items-center gap-1.5">
+            <span className="text-muted">
+              {t("trajectoriesview.AvgDuration")}
+            </span>
+            <span className="font-semibold">
+              {formatTrajectoryDuration(stats.averageDurationMs)}
+            </span>
+          </div>
+          <div className="ml-auto flex items-center gap-2">
+            <div className="flex items-center gap-1.5">
+              <span className="text-muted">
+                {t("trajectoriesview.Logging")}
+              </span>
+              <Button
+                variant="outline"
+                size="sm"
+                className={`h-6 px-2 py-0.5 text-[11px] shadow-sm ${
+                  config?.enabled
+                    ? "bg-success/20 border-success text-success hover:bg-success/30"
+                    : "bg-warn/20 border-warn text-warn hover:bg-warn/30"
+                }`}
+                onClick={handleToggleLogging}
+                disabled={!config || updatingLogging}
+                aria-pressed={config?.enabled ?? false}
+              >
+                {config?.enabled ? t("common.on") : t("common.off")}
+              </Button>
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* Filters row */}
+      <div className="flex flex-wrap gap-1.5 items-center">
+        <Input
+          type="text"
+          placeholder={t("trajectoriesview.Search")}
+          className="h-8 px-3 py-1.5 text-xs bg-card border-border w-48 shadow-sm"
+          value={searchQuery}
+          onChange={(e) => {
+            setSearchQuery(e.target.value);
+            setPage(0);
+          }}
+        />
+
+        <Select
+          value={statusFilter === "" ? "all" : statusFilter}
+          onValueChange={(val) => {
+            setStatusFilter(val === "all" ? "" : (val as StatusFilter));
+            setPage(0);
+          }}
+        >
+          <SelectTrigger className="h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36">
+            <SelectValue placeholder={t("trajectoriesview.AllStatuses")} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">
+              {t("trajectoriesview.AllStatuses")}
+            </SelectItem>
+            <SelectItem value="active">{t("appsview.Active")}</SelectItem>
+            <SelectItem value="completed">
+              {t("trajectoriesview.Completed")}
+            </SelectItem>
+            <SelectItem value="error">{t("logsview.Error")}</SelectItem>
+          </SelectContent>
+        </Select>
+
+        {sources.length > 0 && (
+          <Select
+            value={sourceFilter === "" ? "all" : sourceFilter}
+            onValueChange={(val) => {
+              setSourceFilter(val === "all" ? "" : val);
+              setPage(0);
+            }}
+          >
+            <SelectTrigger className="h-8 px-3 py-1.5 text-xs bg-card border-border shadow-sm w-36">
+              <SelectValue placeholder={t("logsview.AllSources")} />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t("logsview.AllSources")}</SelectItem>
+              {sources.map((s) => (
+                <SelectItem key={s} value={s}>
+                  {s}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        )}
+
+        {hasActiveFilters && (
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left"
+            onClick={handleClearFilters}
+          >
+            {t("logsview.ClearFilters")}
+          </Button>
+        )}
+
+        <div className="ml-auto flex gap-1.5">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left"
+            onClick={() => void loadTrajectories()}
+            disabled={loading}
+          >
+            {loading
+              ? t("common.loading", { defaultValue: "Loading..." })
+              : t("common.refresh", { defaultValue: "Refresh" })}
+          </Button>
+
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                className="h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-txt hover:text-txt shadow-sm text-left"
+                disabled={exporting || trajectories.length === 0}
+              >
+                {exporting ? t("common.exporting") : t("common.export")}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <DropdownMenuItem onClick={() => handleExport("json", true)}>
+                {t("trajectoriesview.JSONWithPrompts")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExport("json", false)}>
+                {t("trajectoriesview.JSONRedacted")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExport("csv", false)}>
+                {t("trajectoriesview.CSVSummaryOnly")}
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => handleExport("zip", true)}>
+                {t("trajectoriesview.ZIPFolders")}
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
+
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-auto min-h-[2rem] whitespace-normal break-words px-3 py-1.5 text-xs bg-card text-danger border-danger/50 hover:bg-danger/10 hover:border-danger shadow-sm text-left"
+            onClick={handleClearAll}
+            disabled={clearing || stats?.totalTrajectories === 0}
+          >
+            {clearing ? t("common.clearing") : t("common.clearAll")}
+          </Button>
+        </div>
+      </div>
+
+      {/* Error display */}
+      {error && (
+        <div className="text-xs text-danger border border-danger/30 bg-danger/10 px-3 py-2">
+          {error}
+        </div>
+      )}
+
+      {/* Trajectories list */}
+      <div className="flex-1 min-h-0 overflow-y-auto border border-border bg-card">
+        {loading && trajectories.length === 0 ? (
+          <div className="text-center py-8 text-muted">
+            {t("trajectoriesview.LoadingTrajectories")}
+          </div>
+        ) : trajectories.length === 0 ? (
+          <div className="text-center py-8 text-muted">
+            {hasActiveFilters
+              ? t("trajectoriesview.NoTrajectoriesMatchingFilters")
+              : t("trajectoriesview.NoTrajectoriesYet")}
+            {!config?.enabled && (
+              <div className="mt-2 text-warn text-[11px]">
+                {t("trajectoriesview.LoggingHelp")}
+              </div>
+            )}
+          </div>
+        ) : (
+          <table className="w-full text-xs">
+            <thead className="bg-muted/10 sticky top-0">
+              <tr>
+                <th className="text-left px-2 py-1.5 font-medium">
+                  {t("trajectoriesview.Time")}
+                </th>
+                <th className="text-left px-2 py-1.5 font-medium">
+                  {t("trajectoriesview.Source")}
+                </th>
+                <th className="text-left px-2 py-1.5 font-medium">
+                  {t("finetuningview.Status")}
+                </th>
+                <th className="text-right px-2 py-1.5 font-medium">
+                  {t("trajectoriesview.Calls")}
+                </th>
+                <th className="text-right px-2 py-1.5 font-medium">
+                  {t("trajectoriesview.Tokens1")}
+                </th>
+                <th className="text-right px-2 py-1.5 font-medium">
+                  {t("trajectoriesview.Duration")}
+                </th>
+              </tr>
+            </thead>
+            <tbody>
+              {trajectories.map((traj: TrajectoryRecord) => {
+                const statusColor =
+                  STATUS_COLORS[traj.status] ?? STATUS_COLORS.completed;
+                const sourceColor =
+                  SOURCE_COLORS[traj.source] ?? SOURCE_COLORS.api;
+                return (
+                  <tr
+                    key={traj.id}
+                    className="border-t border-border hover:bg-muted/5 cursor-pointer"
+                    onClick={() => onSelectTrajectory?.(traj.id)}
+                  >
+                    <td className="px-2 py-1.5 text-muted whitespace-nowrap">
+                      {formatTrajectoryTimestamp(traj.createdAt, "smart")}
+                    </td>
+                    <td className="px-2 py-1.5">
+                      <span
+                        className="inline-block text-[10px] px-1.5 py-px rounded"
+                        style={{
+                          background: sourceColor.bg,
+                          color: sourceColor.fg,
+                        }}
+                      >
+                        {traj.source}
+                      </span>
+                    </td>
+                    <td className="px-2 py-1.5">
+                      <span
+                        className="inline-block text-[10px] px-1.5 py-px rounded"
+                        style={{
+                          background: statusColor.bg,
+                          color: statusColor.fg,
+                        }}
+                      >
+                        {traj.status}
+                      </span>
+                    </td>
+                    <td className="px-2 py-1.5 text-right font-mono">
+                      {traj.llmCallCount}
+                    </td>
+                    <td className="px-2 py-1.5 text-right font-mono">
+                      <span className="text-txt">
+                        {formatTrajectoryTokenCount(
+                          traj.totalPromptTokens + traj.totalCompletionTokens,
+                          { emptyLabel: "0" },
+                        )}
+                      </span>
+                    </td>
+                    <td className="px-2 py-1.5 text-right text-muted font-mono">
+                      {formatTrajectoryDuration(traj.durationMs)}
+                    </td>
+                  </tr>
+                );
+              })}
+            </tbody>
+          </table>
+        )}
+      </div>
+
+      {/* Pagination */}
+      {totalPages > 1 && (
+        <div className="flex items-center justify-between text-xs">
+          <span className="text-muted">
+            {t("trajectoriesview.ShowingRange", {
+              start: page * pageSize + 1,
+              end: Math.min((page + 1) * pageSize, total),
+              total,
+            })}
+          </span>
+          <div className="flex gap-1">
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-auto min-h-[1.75rem] px-2 py-1 text-xs bg-card disabled:opacity-50 shadow-sm"
+              onClick={() => setPage((p) => Math.max(0, p - 1))}
+              disabled={page === 0}
+            >
+              {t("databaseview.Prev")}
+            </Button>
+            <Button
+              variant="outline"
+              size="sm"
+              className="h-auto min-h-[1.75rem] px-2 py-1 text-xs bg-card disabled:opacity-50 shadow-sm"
+              onClick={() => setPage((p) => p + 1)}
+              disabled={page >= totalPages - 1}
+            >
+              {t("databaseview.Next")}
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}