@elizaos/app-core 2.0.0-alpha.37

package/src/components/RestartBanner.tsx

@@ -0,0 +1,76 @@
+import { useCallback, useState } from "react";
+import { isElectrobunRuntime } from "../bridge";
+import { useApp } from "../state";
+
+export function RestartBanner() {
+  const {
+    pendingRestart,
+    pendingRestartReasons,
+    restartBannerDismissed,
+    dismissRestartBanner,
+    triggerRestart,
+    t,
+  } = useApp();
+
+  const [restarting, setRestarting] = useState(false);
+
+  const handleRestart = useCallback(async () => {
+    setRestarting(true);
+    try {
+      await triggerRestart();
+    } finally {
+      setRestarting(false);
+    }
+  }, [triggerRestart]);
+
+  if (!pendingRestart || restartBannerDismissed) return null;
+
+  const reasons = pendingRestartReasons;
+  const text =
+    reasons.length === 1
+      ? `${reasons[0]} - restart to apply.`
+      : reasons.length > 1
+        ? `${reasons.length} changes pending - restart to apply.`
+        : "Restart required to apply changes.";
+
+  return (
+    <div
+      className="fixed left-0 right-0 z-[9998] flex items-center justify-between gap-3 px-4 py-2 text-[13px] font-medium shadow-lg"
+      style={{
+        top: isElectrobunRuntime() ? 40 : 0,
+        background: "color-mix(in srgb, var(--accent) 15%, var(--bg) 85%)",
+        borderBottom:
+          "1px solid color-mix(in srgb, var(--accent) 30%, transparent)",
+        display: "flex",
+        color: "var(--text)",
+      }}
+    >
+      <span className="truncate">{text}</span>
+      <div className="flex items-center gap-2 shrink-0">
+        <button
+          type="button"
+          onClick={dismissRestartBanner}
+          className="rounded px-3 py-1 text-[12px] transition-colors"
+          style={{ color: "var(--muted)" }}
+          onMouseEnter={(e) => {
+            e.currentTarget.style.background = "var(--bg-hover)";
+          }}
+          onMouseLeave={(e) => {
+            e.currentTarget.style.background = "transparent";
+          }}
+        >
+          {t("restartbanner.Later")}
+        </button>
+        <button
+          type="button"
+          onClick={handleRestart}
+          disabled={restarting}
+          className="rounded px-3 py-1 text-[12px] font-semibold transition-colors disabled:opacity-60"
+          style={{ background: "#f0b232", color: "#000" }}
+        >
+          {restarting ? "Restarting..." : "Restart Now"}
+        </button>
+      </div>
+    </div>
+  );
+}

package/src/components/RuntimeView.tsx

@@ -0,0 +1,460 @@
+/**
+ * RuntimeView — deep runtime state inspector for advanced debugging.
+ *
+ * Shows:
+ * - Full runtime snapshot
+ * - Split sections: actions/providers/plugins/services/evaluators
+ * - Explicit load order metadata
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import {
+  client,
+  type RuntimeDebugSnapshot,
+  type RuntimeOrderItem,
+  type RuntimeServiceOrderItem,
+} from "../api";
+import { useApp } from "../state";
+import { formatDateTime } from "./format";
+
+type RuntimeSectionKey =
+  | "runtime"
+  | "actions"
+  | "providers"
+  | "plugins"
+  | "services"
+  | "evaluators";
+
+const SECTION_TABS: Array<{ key: RuntimeSectionKey; label: string }> = [
+  { key: "runtime", label: "Runtime" },
+  { key: "actions", label: "Actions" },
+  { key: "providers", label: "Providers" },
+  { key: "plugins", label: "Plugins" },
+  { key: "services", label: "Services" },
+  { key: "evaluators", label: "Evaluators" },
+];
+
+function nodeSummary(value: unknown): string {
+  if (value === null) return "null";
+  if (typeof value === "string") {
+    const compact = value.length > 100 ? `${value.slice(0, 100)}...` : value;
+    return JSON.stringify(compact);
+  }
+  if (typeof value === "number" || typeof value === "boolean")
+    return String(value);
+  if (Array.isArray(value)) return `Array(${value.length})`;
+  if (typeof value === "object") {
+    const record = value as Record<string, unknown>;
+    const typeTag = typeof record.__type === "string" ? record.__type : null;
+    if (typeTag === "array" && typeof record.length === "number") {
+      return `Array(${String(record.length)})`;
+    }
+    if (typeTag === "map" && typeof record.size === "number") {
+      return `Map(${String(record.size)})`;
+    }
+    if (typeTag === "set" && typeof record.size === "number") {
+      return `Set(${String(record.size)})`;
+    }
+    if (typeTag === "object") {
+      const className =
+        typeof record.className === "string" ? record.className : "Object";
+      const props =
+        record.properties &&
+        typeof record.properties === "object" &&
+        !Array.isArray(record.properties)
+          ? Object.keys(record.properties as Record<string, unknown>).length
+          : 0;
+      return `${className} {${props}}`;
+    }
+    return `${typeTag ?? "Object"} {${Object.keys(record).length}}`;
+  }
+  return String(value);
+}
+
+function isExpandable(value: unknown): boolean {
+  if (Array.isArray(value)) return value.length > 0;
+  if (!value || typeof value !== "object") return false;
+  return Object.keys(value as Record<string, unknown>).length > 0;
+}
+
+function nodeEntries(
+  value: unknown,
+  path: string,
+): Array<{ key: string; value: unknown; path: string }> {
+  if (Array.isArray(value)) {
+    return value.map((entry, i) => ({
+      key: `[${i}]`,
+      value: entry,
+      path: `${path}[${i}]`,
+    }));
+  }
+  if (!value || typeof value !== "object") return [];
+  return Object.entries(value as Record<string, unknown>).map(
+    ([key, entry]) => ({
+      key,
+      value: entry,
+      path: `${path}.${key}`,
+    }),
+  );
+}
+
+function buildInitialExpanded(rootPath: string, value: unknown): Set<string> {
+  const expanded = new Set<string>([rootPath]);
+  const firstLayer = nodeEntries(value, rootPath).slice(0, 24);
+  for (const entry of firstLayer) expanded.add(entry.path);
+  return expanded;
+}
+
+function orderItemLabel(entry: RuntimeOrderItem): string {
+  const idPart = entry.id ? ` (${entry.id})` : "";
+  return `[${entry.index}] ${entry.name} :: ${entry.className}${idPart}`;
+}
+
+function TreeNode(props: {
+  label: string;
+  value: unknown;
+  path: string;
+  depth: number;
+  expanded: Set<string>;
+  onToggle: (path: string) => void;
+}) {
+  const { label, value, path, depth, expanded, onToggle } = props;
+  const canExpand = isExpandable(value);
+  const open = expanded.has(path);
+  const entries = canExpand ? nodeEntries(value, path) : [];
+
+  return (
+    <div>
+      <div
+        className="flex items-baseline gap-1 text-[11px] font-mono leading-5"
+        style={{ paddingLeft: `${depth * 14}px` }}
+      >
+        {canExpand ? (
+          <button
+            type="button"
+            onClick={() => onToggle(path)}
+            className="w-4 text-left text-[var(--muted)] hover:text-[var(--txt)]"
+            title={open ? "Collapse" : "Expand"}
+          >
+            {open ? "▾" : "▸"}
+          </button>
+        ) : (
+          <span className="inline-block w-4 text-[var(--muted)]">·</span>
+        )}
+        <span className="text-[var(--muted)]">{label}</span>
+        <span className="text-[var(--txt)]">{nodeSummary(value)}</span>
+      </div>
+
+      {canExpand && open && (
+        <div>
+          {entries.map((entry) => (
+            <TreeNode
+              key={entry.path}
+              label={entry.key}
+              value={entry.value}
+              path={entry.path}
+              depth={depth + 1}
+              expanded={expanded}
+              onToggle={onToggle}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+function OrderCard(props: { title: string; entries: RuntimeOrderItem[] }) {
+  const { t } = useApp();
+  const { title, entries } = props;
+  return (
+    <div className="border border-[var(--border)] bg-[var(--card)] rounded-md p-3 min-h-[150px]">
+      <div className="text-xs font-semibold mb-2">
+        {title} ({entries.length})
+      </div>
+      <div className="max-h-[180px] overflow-auto text-[11px] font-mono leading-5">
+        {entries.length === 0 ? (
+          <div className="text-[var(--muted)]">{t("runtimeview.none")}</div>
+        ) : (
+          entries.map((entry) => (
+            <div key={`${title}-${entry.index}`} className="text-[var(--txt)]">
+              {orderItemLabel(entry)}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+function ServicesOrderCard(props: { entries: RuntimeServiceOrderItem[] }) {
+  const { t } = useApp();
+  const { entries } = props;
+  return (
+    <div className="border border-[var(--border)] bg-[var(--card)] rounded-md p-3 min-h-[150px]">
+      <div className="text-xs font-semibold mb-2">
+        {t("runtimeview.Services")}
+        {entries.length} {t("runtimeview.types")}
+      </div>
+      <div className="max-h-[180px] overflow-auto text-[11px] font-mono leading-5">
+        {entries.length === 0 ? (
+          <div className="text-[var(--muted)]">{t("runtimeview.none")}</div>
+        ) : (
+          entries.map((serviceGroup) => (
+            <div
+              key={`${serviceGroup.serviceType}-${serviceGroup.index}`}
+              className="mb-2"
+            >
+              <div className="text-[var(--txt)]">
+                [{serviceGroup.index}] {serviceGroup.serviceType} (
+                {serviceGroup.count})
+              </div>
+              {serviceGroup.instances.map((instance) => (
+                <div
+                  key={`${serviceGroup.serviceType}-${instance.index}`}
+                  className="text-[var(--muted)] pl-4"
+                >
+                  {orderItemLabel(instance)}
+                </div>
+              ))}
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}
+
+export function RuntimeView() {
+  const { t } = useApp();
+  const [snapshot, setSnapshot] = useState<RuntimeDebugSnapshot | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [activeSection, setActiveSection] =
+    useState<RuntimeSectionKey>("runtime");
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(new Set());
+
+  const [depth, setDepth] = useState(10);
+  const [maxArrayLength, setMaxArrayLength] = useState(1000);
+  const [maxObjectEntries, setMaxObjectEntries] = useState(1000);
+
+  const sectionData = snapshot?.sections[activeSection] ?? null;
+  const rootPath = `$${activeSection}`;
+
+  const loadSnapshot = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const next = await client.getRuntimeSnapshot({
+        depth,
+        maxArrayLength,
+        maxObjectEntries,
+      });
+      setSnapshot(next);
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : "Failed to load runtime snapshot",
+      );
+    } finally {
+      setLoading(false);
+    }
+  }, [depth, maxArrayLength, maxObjectEntries]);
+
+  useEffect(() => {
+    void loadSnapshot();
+  }, [loadSnapshot]);
+
+  useEffect(() => {
+    setExpandedPaths(buildInitialExpanded(rootPath, sectionData));
+  }, [rootPath, sectionData]);
+
+  const handleTogglePath = useCallback((path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev);
+      if (next.has(path)) next.delete(path);
+      else next.add(path);
+      return next;
+    });
+  }, []);
+
+  return (
+    <div className="flex flex-col gap-4 h-full">
+      <div className="flex flex-wrap items-end gap-3 border border-[var(--border)] bg-[var(--card)] rounded-md p-3">
+        <label className="text-[11px] text-[var(--muted)] flex items-center gap-1">
+          {t("runtimeview.depth")}
+          <input
+            type="number"
+            min={1}
+            max={24}
+            value={depth}
+            onChange={(e) =>
+              setDepth(Math.max(1, Math.min(24, Number(e.target.value) || 1)))
+            }
+            className="w-16 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm"
+          />
+        </label>
+        <label className="text-[11px] text-[var(--muted)] flex items-center gap-1">
+          {t("runtimeview.arrayCap")}
+          <input
+            type="number"
+            min={1}
+            max={5000}
+            value={maxArrayLength}
+            onChange={(e) =>
+              setMaxArrayLength(
+                Math.max(1, Math.min(5000, Number(e.target.value) || 1)),
+              )
+            }
+            className="w-20 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm"
+          />
+        </label>
+        <label className="text-[11px] text-[var(--muted)] flex items-center gap-1">
+          {t("runtimeview.objectCap")}
+          <input
+            type="number"
+            min={1}
+            max={5000}
+            value={maxObjectEntries}
+            onChange={(e) =>
+              setMaxObjectEntries(
+                Math.max(1, Math.min(5000, Number(e.target.value) || 1)),
+              )
+            }
+            className="w-20 px-1.5 py-0.5 border border-[var(--border)] bg-[var(--bg)] text-[var(--txt)] rounded-sm"
+          />
+        </label>
+        <button
+          type="button"
+          onClick={() => void loadSnapshot()}
+          disabled={loading}
+          className="px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)] disabled:opacity-60"
+        >
+          {loading ? "Refreshing..." : "Refresh"}
+        </button>
+        <button
+          type="button"
+          onClick={() => setExpandedPaths(new Set([rootPath]))}
+          className="px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)]"
+        >
+          {t("runtimeview.Collapse")}
+        </button>
+        <button
+          type="button"
+          onClick={() =>
+            setExpandedPaths(buildInitialExpanded(rootPath, sectionData))
+          }
+          className="px-3 py-1.5 text-xs rounded border border-[var(--border)] bg-[var(--bg)] hover:bg-[var(--bg-hover)]"
+        >
+          {t("runtimeview.ExpandTop")}
+        </button>
+        <div className="text-[11px] text-[var(--muted)] ml-auto">
+          {snapshot
+            ? `Last updated: ${formatDateTime(snapshot.generatedAt, { fallback: "n/a" })}`
+            : "No snapshot loaded"}
+        </div>
+      </div>
+
+      {snapshot && (
+        <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">
+          <OrderCard
+            title={t("runtimeview.Plugins")}
+            entries={snapshot.order.plugins}
+          />
+          <OrderCard
+            title={t("runtimeview.Actions")}
+            entries={snapshot.order.actions}
+          />
+          <OrderCard
+            title={t("runtimeview.Providers")}
+            entries={snapshot.order.providers}
+          />
+          <OrderCard
+            title={t("runtimeview.Evaluators")}
+            entries={snapshot.order.evaluators}
+          />
+          <ServicesOrderCard entries={snapshot.order.services} />
+          <div className="border border-[var(--border)] bg-[var(--card)] rounded-md p-3">
+            <div className="text-xs font-semibold mb-2">
+              {t("runtimeview.Summary")}
+            </div>
+            <div className="text-[11px] font-mono leading-5">
+              <div>
+                {t("runtimeview.runtime")}{" "}
+                {snapshot.runtimeAvailable ? "available" : "offline"}
+              </div>
+              <div>
+                {t("runtimeview.agent")} {snapshot.meta.agentName}
+              </div>
+              <div>
+                {t("runtimeview.state")} {snapshot.meta.agentState}
+              </div>
+              <div>
+                {t("runtimeview.model")} {snapshot.meta.model ?? "n/a"}
+              </div>
+              <div>
+                {t("runtimeview.plugins")} {snapshot.meta.pluginCount}
+              </div>
+              <div>
+                {t("runtimeview.actions")} {snapshot.meta.actionCount}
+              </div>
+              <div>
+                {t("runtimeview.providers")} {snapshot.meta.providerCount}
+              </div>
+              <div>
+                {t("runtimeview.evaluators")} {snapshot.meta.evaluatorCount}
+              </div>
+              <div>
+                {t("runtimeview.services")} {snapshot.meta.serviceCount}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+
+      <div className="flex gap-1 border-b border-[var(--border)]">
+        {SECTION_TABS.map((tab) => {
+          const active = tab.key === activeSection;
+          return (
+            <button
+              key={tab.key}
+              type="button"
+              onClick={() => setActiveSection(tab.key)}
+              className={`px-3 py-2 text-xs font-medium border-b-2 -mb-px ${
+                active
+                  ? "border-accent text-txt"
+                  : "border-transparent text-muted hover:text-txt hover:border-border"
+              }`}
+            >
+              {tab.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="flex-1 min-h-0 border border-[var(--border)] bg-[var(--card)] rounded-md overflow-auto p-2">
+        {error ? (
+          <div className="text-xs text-danger p-3">{error}</div>
+        ) : !snapshot ? (
+          <div className="text-xs text-[var(--muted)] p-3">
+            {loading
+              ? "Loading runtime snapshot..."
+              : "No runtime snapshot available."}
+          </div>
+        ) : !snapshot.runtimeAvailable ? (
+          <div className="text-xs text-[var(--muted)] p-3">
+            {t("runtimeview.AgentRuntimeIsNot")}
+          </div>
+        ) : (
+          <TreeNode
+            label={activeSection}
+            value={sectionData}
+            path={rootPath}
+            depth={0}
+            expanded={expandedPaths}
+            onToggle={handleTogglePath}
+          />
+        )}
+      </div>
+    </div>
+  );
+}