ClawdDotNet/src/ClawdDotNet.Manager.Web/wwwroot/views/info.js

// ClawdDotNet — System-Info & Status
//
// Shows application version, instance ID, subsystems, and OpenRouter credits.

import { api, holeAktiveInstanz } from "../modules/api.js";
import { t } from "../modules/i18n.js";
import {
  erstelleElement,
  erstelleKarte,
  erstellePlakette
} from "../modules/dom.js";

export async function rendereInfo() {
  const container = document.getElementById("ansicht-inhalt");
  if (!container) return;
  container.replaceChildren();

  const layout = erstelleElement("div", { klasse: "info-ansicht" });
  layout.append(erstelleElement("h1", { text: t("info.title") }));

  const gitter = erstelleElement("div", { klasse: "info-gitter" });
  layout.append(gitter);
  container.append(layout);

  if (!holeAktiveInstanz()) {
    gitter.append(
      erstelleKarte(t("info.noInstanceSelected"), [
        erstelleElement("p", {
          klasse: "hinweis",
          text: t("info.noInstanceHint")
        })
      ])
    );
    return;
  }

  gitter.append(
    erstelleElement("div", { klasse: "hinweis-zentriert", text: t("info.loading") })
  );

  try {
    const [info, status] = await Promise.all([
      api("/info").catch(() => null),
      api("/status").catch(() => null)
    ]);

    gitter.replaceChildren();

    // 1. Instanz & Version
    if (info) {
      const dlInstanz = erstelleElement("dl", { klasse: "datenliste" });
      dlInstanz.append(
        erstelleElement("dt", { text: t("info.instanceName") }),
        erstelleElement("dd", {}, erstelleElement("strong", { text: info.instanceName })),
        erstelleElement("dt", { text: t("info.instanceId") }),
        erstelleElement("dd", {}, erstelleElement("code", { text: info.instanceId })),
        erstelleElement("dt", { text: t("info.version") }),
        erstelleElement("dd", { text: info.appVersion }),
        erstelleElement("dt", { text: t("info.build") }),
        erstelleElement("dd", { text: info.buildSummary })
      );
      gitter.append(erstelleKarte(t("info.instanceAndVersion"), [dlInstanz]));

      // 2. Teilsysteme
      const dlSysteme = erstelleElement("dl", { klasse: "datenliste" });
      dlSysteme.append(
        erstelleElement("dt", { text: t("info.agentEngine") }),
        erstelleElement("dd", {}, erstellePlakette(info.engineActive ? (t("status.running")) : (t("status.stopped")), info.engineActive ? "erfolg" : "neutral")),
        erstelleElement("dt", { text: t("info.scheduler") }),
        erstelleElement("dd", {}, erstellePlakette(info.schedulerActive ? (t("status.running")) : (t("status.stopped")), info.schedulerActive ? "erfolg" : "neutral")),
        erstelleElement("dt", { text: t("nav.staging") }),
        erstelleElement("dd", {}, erstellePlakette(info.stagingActive ? (t("status.running")) : (t("status.stopped")), info.stagingActive ? "erfolg" : "neutral")),
        erstelleElement("dt", { text: "Deploymentcenter" }),
        erstelleElement("dd", {}, erstellePlakette(info.deploymentcenterActive ? "OK" : "—", info.deploymentcenterActive ? "erfolg" : "neutral"))
      );
      gitter.append(erstelleKarte(t("info.subsystems"), [dlSysteme]));
    }

    // 3. OpenRouter / API-Status
    const dlStatus = erstelleElement("dl", { klasse: "datenliste" });
    if (status) {
      dlStatus.append(
        erstelleElement("dt", { text: "API" }),
        erstelleElement("dd", {}, erstellePlakette(status.apiReachable ? t("info.apiOk") : t("info.apiOffline"), status.apiReachable ? "erfolg" : "gefahr")),
        erstelleElement("dt", { text: t("common.status") }),
        erstelleElement("dd", { text: status.statusText || "—" }),
        erstelleElement("dt", { text: t("info.credits") }),
        erstelleElement("dd", {}, erstelleElement("strong", { text: status.creditsText || "—" }))
      );
    } else {
      dlStatus.append(
        erstelleElement("dt", { text: "OpenRouter" }),
        erstelleElement("dd", { klasse: "gedaempft", text: "—" })
      );
    }
    gitter.append(erstelleKarte(t("info.openRouterStatus"), [dlStatus]));

  } catch (err) {
    gitter.replaceChildren(
      erstelleElement("div", { klasse: "fehler-zentriert", text: err.message })
    );
  }
}