@elizaos/app-core 2.0.0-alpha.74 → 2.0.0-alpha.76

package/src/components/SystemWarningBanner.tsx

@@ -1,71 +0,0 @@
-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

@@ -1,103 +0,0 @@
-/**
- * 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"
-      aria-label="Toggle theme"
-      onClick={handleToggle}
-      onPointerDown={(event) => event.stopPropagation()}
-      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"
-      data-no-camera-drag="true"
-    >
-      {isDark ? (
-        <SunIcon className="w-5 h-5" />
-      ) : (
-        <MoonIcon className="w-5 h-5" />
-      )}
-    </button>
-  );
-}

package/src/components/TrajectoriesView.tsx

@@ -1,526 +0,0 @@
-/**
- * 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" data-testid="trajectories-view">
-      {/* 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>
-  );
-}