@elizaos/app-core 2.0.0-alpha.37

package/src/components/CustomActionsPanel.tsx

@@ -0,0 +1,288 @@
+import { type CustomActionDef, client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import { confirmDesktopAction } from "@elizaos/app-core/utils";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
+
+interface CustomActionsPanelProps {
+  open: boolean;
+  onClose: () => void;
+  onOpenEditor: (action?: CustomActionDef | null) => void;
+}
+
+const HANDLER_TYPE_COLORS: Record<string, string> = {
+  http: "bg-blue-500/20 text-blue-400",
+  shell: "bg-green-500/20 text-green-400",
+  code: "bg-purple-500/20 text-purple-400",
+};
+
+const HANDLER_TYPE_NAMES: Record<string, string> = {
+  http: "HTTP",
+  shell: "Shell",
+  code: "Code",
+};
+
+export function CustomActionsPanel({
+  open,
+  onClose,
+  onOpenEditor,
+}: CustomActionsPanelProps) {
+  const { t } = useApp();
+  const [actions, setActions] = useState<CustomActionDef[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [search, setSearch] = useState("");
+  const [error, setError] = useState("");
+
+  const loadActions = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError("");
+      const result = await client.listCustomActions();
+      setActions(result || []);
+    } catch (err) {
+      console.error("Failed to load custom actions:", err);
+      setError("Failed to load custom actions. Please retry.");
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    if (open) {
+      void loadActions();
+    }
+  }, [open, loadActions]);
+
+  const filteredActions = useMemo(() => {
+    const searchTerm = search.trim().toLowerCase();
+    if (!searchTerm) return actions;
+
+    return actions.filter((action) => {
+      const hasName = action.name.toLowerCase().includes(searchTerm);
+      const hasDescription =
+        typeof action.description === "string" &&
+        action.description.toLowerCase().includes(searchTerm);
+      const hasAlias = (action.similes ?? []).some((alias) =>
+        alias.toLowerCase().includes(searchTerm),
+      );
+      return hasName || hasDescription || hasAlias;
+    });
+  }, [actions, search]);
+
+  const enabledCount = useMemo(
+    () => actions.filter((action) => action.enabled).length,
+    [actions],
+  );
+
+  const handleToggleEnabled = async (action: CustomActionDef) => {
+    try {
+      const next = !action.enabled;
+      await client.updateCustomAction(action.id, {
+        enabled: next,
+      });
+      setActions((prev) =>
+        prev.map((item) =>
+          item.id === action.id
+            ? {
+                ...item,
+                enabled: next,
+              }
+            : item,
+        ),
+      );
+    } catch (err) {
+      console.error("Failed to toggle action:", err);
+      setError("Failed to update this action. Try again.");
+    }
+  };
+
+  const handleDelete = async (action: CustomActionDef) => {
+    const confirmed = await confirmDesktopAction({
+      title: "Delete Custom Action",
+      message: `Are you sure you want to delete "${action.name}"?`,
+      confirmLabel: "Delete",
+      cancelLabel: "Cancel",
+      type: "warning",
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await client.deleteCustomAction(action.id);
+      setActions((prev) => prev.filter((item) => item.id !== action.id));
+    } catch (err) {
+      console.error("Failed to delete action:", err);
+      setError("Failed to delete action. Try again.");
+    }
+  };
+
+  const handleEdit = (action: CustomActionDef) => {
+    onOpenEditor(action);
+  };
+
+  const handleCreate = () => {
+    onOpenEditor(null);
+  };
+
+  return (
+    <div
+      className={`border-l border-border bg-card flex flex-col transition-all duration-200 ${
+        open ? "w-80" : "w-0 overflow-hidden"
+      }`}
+    >
+      {open && (
+        <>
+          {/* Header */}
+          <div className="flex items-start justify-between p-4 border-b border-border">
+            <div>
+              <h2 className="text-sm font-semibold text-txt">
+                {t("customactionspanel.CustomActions")}
+              </h2>
+              <p className="text-xs text-muted mt-0.5">
+                {actions.length} {t("customactionspanel.action")}
+                {actions.length === 1 ? "" : "s"} · {enabledCount}{" "}
+                {t("customactionspanel.enabled")}
+              </p>
+            </div>
+            <Button
+              variant="ghost"
+              size="icon"
+              onClick={onClose}
+              className="text-muted hover:text-txt h-7 w-7"
+              aria-label="Close panel"
+            >
+              <svg
+                width="16"
+                height="16"
+                viewBox="0 0 16 16"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+              >
+                <title>{t("conversations.closePanel")}</title>
+                <path d="M12 4L4 12M4 4l8 8" />
+              </svg>
+            </Button>
+          </div>
+
+          <div className="space-y-3 p-3 border-b border-border">
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleCreate}
+              className="w-full px-3 py-2 h-9 text-sm font-medium shadow-sm"
+            >
+              {t("customactionspanel.NewCustomAction")}
+            </Button>
+
+            <div className="relative">
+              <Input
+                value={search}
+                onChange={(event) => setSearch(event.target.value)}
+                placeholder={t("customactionspanel.SearchByNameDesc")}
+                className="w-full h-8 bg-surface text-xs placeholder:text-muted/50 shadow-sm focus-visible:ring-1 focus-visible:ring-accent"
+              />
+            </div>
+
+            {error && (
+              <div className="text-xs text-danger bg-danger/10 border border-danger/30 px-2 py-1 rounded">
+                {error}
+              </div>
+            )}
+          </div>
+
+          {/* Action List */}
+          <div className="flex-1 overflow-y-auto p-3 space-y-2">
+            {loading ? (
+              <div className="text-center text-muted text-xs py-8">
+                {t("customactionspanel.LoadingYourActions")}
+              </div>
+            ) : filteredActions.length === 0 ? (
+              <div className="text-center text-muted text-xs py-8">
+                {search
+                  ? "No actions match this search."
+                  : "No custom actions yet. Create one to get started."}
+              </div>
+            ) : (
+              filteredActions.map((action) => (
+                <div
+                  key={action.id}
+                  className="border border-border bg-surface rounded p-2 space-y-2"
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0">
+                      <div className="font-semibold text-xs text-txt truncate">
+                        {action.name}
+                      </div>
+                      <p className="text-[10px] text-muted mt-0.5">
+                        {action.parameters?.length || 0}{" "}
+                        {t("customactionsview.parameter")}
+                        {(action.parameters?.length || 0) === 1 ? "" : "s"}
+                        {action.similes?.length
+                          ? ` • ${action.similes.length} alias`.concat(
+                              action.similes.length === 1 ? "" : "es",
+                            )
+                          : ""}
+                      </p>
+                    </div>
+
+                    <span
+                      className={`text-[10px] px-1.5 py-0.5 rounded whitespace-nowrap ${
+                        HANDLER_TYPE_COLORS[action.handler.type] ||
+                        "bg-surface text-muted"
+                      }`}
+                    >
+                      {HANDLER_TYPE_NAMES[action.handler.type] ??
+                        action.handler.type}
+                    </span>
+                  </div>
+
+                  {action.description && (
+                    <p className="text-xs text-muted line-clamp-2 break-words">
+                      {action.description}
+                    </p>
+                  )}
+
+                  <div className="flex items-center gap-2 pt-1 border-t border-border">
+                    <label className="flex items-center gap-1 cursor-pointer text-xs text-muted">
+                      <input
+                        type="checkbox"
+                        checked={action.enabled}
+                        onChange={() => handleToggleEnabled(action)}
+                        className="w-3 h-3 cursor-pointer accent-accent"
+                      />
+                      <span>{t("customactionsview.Enabled")}</span>
+                    </label>
+
+                    <div className="ml-auto flex items-center gap-2">
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleEdit(action)}
+                        className="h-6 px-2 text-xs text-txt hover:text-txt/80 hover:bg-accent/10"
+                        title={t("customactionspanel.EditAction")}
+                      >
+                        {t("triggersview.Edit")}
+                      </Button>
+                      <Button
+                        variant="ghost"
+                        size="sm"
+                        onClick={() => handleDelete(action)}
+                        className="h-6 px-2 text-xs text-danger hover:text-danger/80 hover:bg-danger/10"
+                        title={t("customactionspanel.DeleteAction")}
+                      >
+                        {t("triggersview.Delete")}
+                      </Button>
+                    </div>
+                  </div>
+                </div>
+              ))
+            )}
+          </div>
+        </>
+      )}
+    </div>
+  );
+}

package/src/components/CustomActionsView.tsx

@@ -0,0 +1,322 @@
+import { type CustomActionDef, client } from "@elizaos/app-core/api";
+import { useApp } from "@elizaos/app-core/state";
+import {
+  alertDesktopMessage,
+  confirmDesktopAction,
+} from "@elizaos/app-core/utils";
+import { Button, Input } from "@elizaos/ui";
+import { useCallback, useEffect, useState } from "react";
+import { CustomActionEditor } from "./CustomActionEditor";
+
+export function CustomActionsView() {
+  const { t } = useApp();
+  const [actions, setActions] = useState<CustomActionDef[]>([]);
+  const [search, setSearch] = useState("");
+  const [editorOpen, setEditorOpen] = useState(false);
+  const [editingAction, setEditingAction] = useState<CustomActionDef | null>(
+    null,
+  );
+  const [loading, setLoading] = useState(true);
+
+  const loadActions = useCallback(async () => {
+    try {
+      setLoading(true);
+      const result = await client.listCustomActions();
+      setActions(result);
+    } catch (error) {
+      console.error("Failed to load custom actions:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    loadActions();
+  }, [loadActions]);
+
+  const handleCreate = useCallback(() => {
+    setEditingAction(null);
+    setEditorOpen(true);
+  }, []);
+
+  const handleEdit = useCallback((action: CustomActionDef) => {
+    setEditingAction(action);
+    setEditorOpen(true);
+  }, []);
+
+  const handleEditorClose = useCallback(() => {
+    setEditorOpen(false);
+    setEditingAction(null);
+  }, []);
+
+  const handleEditorSave = useCallback(async () => {
+    setEditorOpen(false);
+    setEditingAction(null);
+    await loadActions();
+  }, [loadActions]);
+
+  const handleToggleEnabled = useCallback(
+    async (id: string, enabled: boolean) => {
+      try {
+        await client.updateCustomAction(id, { enabled });
+        setActions((prev) =>
+          prev.map((action) =>
+            action.id === id ? { ...action, enabled } : action,
+          ),
+        );
+      } catch (error) {
+        console.error("Failed to toggle action:", error);
+      }
+    },
+    [],
+  );
+
+  const handleDelete = useCallback(async (id: string, name: string) => {
+    const confirmed = await confirmDesktopAction({
+      title: "Delete Custom Action",
+      message: `Are you sure you want to delete "${name}"?`,
+      confirmLabel: "Delete",
+      cancelLabel: "Cancel",
+      type: "warning",
+    });
+    if (!confirmed) {
+      return;
+    }
+
+    try {
+      await client.deleteCustomAction(id);
+      setActions((prev) => prev.filter((action) => action.id !== id));
+    } catch (error) {
+      console.error("Failed to delete action:", error);
+    }
+  }, []);
+
+  const handleImport = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const file = event.target.files?.[0];
+      if (!file) return;
+
+      try {
+        const text = await file.text();
+        const imported = JSON.parse(text);
+        const actionsToImport = Array.isArray(imported) ? imported : [imported];
+
+        for (const action of actionsToImport) {
+          await client.createCustomAction(action);
+        }
+
+        await loadActions();
+        event.target.value = "";
+      } catch (error) {
+        console.error("Failed to import actions:", error);
+        await alertDesktopMessage({
+          title: "Import Failed",
+          message: "Failed to import actions. Please check the file format.",
+          type: "error",
+        });
+      }
+    },
+    [loadActions],
+  );
+
+  const handleExport = useCallback(() => {
+    const dataStr = JSON.stringify(actions, null, 2);
+    const dataBlob = new Blob([dataStr], { type: "application/json" });
+    const url = URL.createObjectURL(dataBlob);
+    const link = document.createElement("a");
+    link.href = url;
+    link.download = "custom-actions.json";
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+    URL.revokeObjectURL(url);
+  }, [actions]);
+
+  const filteredActions = actions.filter((action) => {
+    const searchLower = search.toLowerCase();
+    return (
+      action.name.toLowerCase().includes(searchLower) ||
+      action.description?.toLowerCase().includes(searchLower)
+    );
+  });
+
+  const getBadgeColor = (handlerType: string) => {
+    switch (handlerType) {
+      case "http":
+        return "bg-blue-500/20 text-blue-400";
+      case "shell":
+        return "bg-green-500/20 text-green-400";
+      case "code":
+        return "bg-purple-500/20 text-purple-400";
+      default:
+        return "bg-gray-500/20 text-gray-400";
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex items-center justify-center h-full">
+        <div className="text-muted">
+          {t("customactionsview.LoadingActions")}
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col h-full p-4 space-y-4">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-2">
+          <label className="px-3 py-1.5 text-sm border border-border bg-surface text-muted rounded cursor-pointer hover:bg-card transition-colors">
+            {t("knowledgeview.Import")}
+            <input
+              type="file"
+              accept="application/json"
+              onChange={handleImport}
+              className="hidden"
+            />
+          </label>
+          <Button
+            variant="outline"
+            size="sm"
+            onClick={handleExport}
+            disabled={actions.length === 0}
+            className="px-3 py-1.5 h-8 text-sm text-muted bg-surface hover:bg-card shadow-sm disabled:opacity-50"
+          >
+            {t("customactionsview.Export")}
+          </Button>
+          <Button
+            variant="default"
+            size="sm"
+            onClick={handleCreate}
+            className="px-3 py-1.5 h-8 text-sm shadow-sm font-medium tracking-wide"
+          >
+            {t("customactionsview.CreateAction")}
+          </Button>
+        </div>
+      </div>
+
+      {/* Search Bar */}
+      <div className="flex items-center">
+        <Input
+          type="text"
+          placeholder={t("customactionsview.SearchActionsByNa")}
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          className="flex-1 px-3 py-2 h-9 text-sm bg-surface text-txt shadow-sm"
+        />
+      </div>
+
+      {/* Actions Grid */}
+      {filteredActions.length === 0 ? (
+        <div className="flex flex-col items-center justify-center flex-1 space-y-4">
+          <p className="text-muted text-center">
+            {search
+              ? "No actions match your search."
+              : "No custom actions yet. Create one to get started."}
+          </p>
+          {!search && (
+            <Button
+              variant="default"
+              size="sm"
+              onClick={handleCreate}
+              className="px-4 py-2 text-sm shadow-sm font-medium tracking-wide"
+            >
+              {t("customactionsview.CreateAction")}
+            </Button>
+          )}
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 overflow-auto">
+          {filteredActions.map((action) => (
+            <div
+              key={action.id}
+              className="border border-border bg-card rounded p-4 space-y-3 cursor-pointer hover:border-accent/50 transition-colors"
+            >
+              <button
+                type="button"
+                className="w-full bg-transparent border-0 p-0 m-0 text-left cursor-pointer"
+                onClick={() => handleEdit(action)}
+              >
+                {/* Name and Badge */}
+                <div className="flex items-start justify-between gap-2">
+                  <h3 className="font-bold text-sm text-txt flex-1 break-words">
+                    {action.name}
+                  </h3>
+                  <span
+                    className={`px-2 py-0.5 text-xs rounded ${getBadgeColor(
+                      action.handler.type,
+                    )}`}
+                  >
+                    {action.handler.type}
+                  </span>
+                </div>
+
+                {/* Description */}
+                {action.description && (
+                  <p className="text-xs text-muted line-clamp-3">
+                    {action.description}
+                  </p>
+                )}
+
+                {/* Parameters Count */}
+                <p className="text-xs text-muted">
+                  {action.parameters?.length || 0}{" "}
+                  {t("customactionsview.parameter")}
+                  {action.parameters?.length === 1 ? "" : "s"}
+                </p>
+              </button>
+
+              {/* Actions Row */}
+              <div className="flex items-center justify-between pt-2 border-t border-border">
+                <label className="flex items-center gap-2 cursor-pointer">
+                  <input
+                    type="checkbox"
+                    checked={action.enabled}
+                    onChange={(e) =>
+                      handleToggleEnabled(action.id, e.target.checked)
+                    }
+                    className="cursor-pointer"
+                  />
+                  <span className="text-xs text-muted">
+                    {t("customactionsview.Enabled")}
+                  </span>
+                </label>
+
+                <div className="flex items-center gap-2">
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleEdit(action)}
+                    className="px-2 py-1 h-6 text-xs bg-surface text-muted hover:bg-card shadow-sm"
+                  >
+                    {t("triggersview.Edit")}
+                  </Button>
+                  <Button
+                    variant="outline"
+                    size="sm"
+                    onClick={() => handleDelete(action.id, action.name)}
+                    className="px-2 py-1 h-6 text-xs bg-surface text-danger border-danger/20 hover:bg-danger/10 shadow-sm"
+                  >
+                    {t("triggersview.Delete")}
+                  </Button>
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      {/* Editor Modal */}
+      {editorOpen && (
+        <CustomActionEditor
+          open={editorOpen}
+          action={editingAction}
+          onClose={handleEditorClose}
+          onSave={handleEditorSave}
+        />
+      )}
+    </div>
+  );
+}

package/src/components/DatabasePageView.tsx

@@ -0,0 +1,55 @@
+/**
+ * Databases page — wrapper with Tables / Media / Vectors sub-tabs.
+ */
+
+import { useApp } from "../state";
+import { DatabaseView } from "./DatabaseView";
+import { MediaGalleryView } from "./MediaGalleryView";
+import { VectorBrowserView } from "./VectorBrowserView";
+
+export function DatabasePageView() {
+  const { t, databaseSubTab, setState } = useApp();
+  const dbTabs = [
+    {
+      id: "tables" as const,
+      label: t("databasepageview.Tables"),
+    },
+    {
+      id: "media" as const,
+      label: t("databasepageview.Media"),
+    },
+    {
+      id: "vectors" as const,
+      label: t("databasepageview.Vectors"),
+    },
+  ];
+
+  return (
+    <div className="flex flex-col h-full">
+      {/* Sub-tab bar */}
+      <div className="flex gap-1 border-b border-[var(--border)] mb-5">
+        {dbTabs.map((tab) => (
+          <button
+            type="button"
+            key={tab.id}
+            className={`px-4 py-2 text-[13px] bg-transparent border-0 border-b-2 cursor-pointer transition-colors ${
+              databaseSubTab === tab.id
+                ? "text-[var(--accent)] font-medium border-b-[var(--accent)]"
+                : "text-[var(--muted)] border-b-transparent hover:text-[var(--txt)]"
+            }`}
+            onClick={() => setState("databaseSubTab", tab.id)}
+          >
+            {tab.label}
+          </button>
+        ))}
+      </div>
+
+      {/* Sub-tab content */}
+      <div className="flex-1 min-h-0">
+        {databaseSubTab === "tables" && <DatabaseView />}
+        {databaseSubTab === "media" && <MediaGalleryView />}
+        {databaseSubTab === "vectors" && <VectorBrowserView />}
+      </div>
+    </div>
+  );
+}