@creezio/shell-ui 0.22.0

package/ui/settings/ops-diagnostic-settings.tsx

@@ -0,0 +1,242 @@
+"use client";
+
+/**
+ * Diagnostic — boîte noire locale (Configuration → Système).
+ *
+ * Affiche le journal structuré du poste (décisions de boot, durées,
+ * anomalies, erreurs) lu via /api/v1/ops/events. C'est la réponse locale à
+ * « pourquoi l'app a réindexé / mis 3 minutes à démarrer ? » — sans SSH ni
+ * fichier de log à envoyer.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { Activity, Loader2, RefreshCw } from "lucide-react";
+import { Badge } from "../primitives/badge";
+import { Button } from "../primitives/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "../primitives/card";
+
+type OpsEvent = {
+  ts: string;
+  bootId: string;
+  seq: number;
+  source: string;
+  level: "decision" | "event" | "anomaly" | "error" | "crash";
+  kind: string;
+  outcome?: string;
+  reason?: string;
+  durationMs?: number;
+  ctx?: Record<string, unknown>;
+};
+
+type OpsBoot = {
+  bootId: string;
+  startedAt?: string;
+  durationMs?: number;
+  appVersion?: string;
+  decisions?: Record<string, { outcome?: string; reason?: string }>;
+};
+
+type OpsPayload = {
+  available: boolean;
+  events: OpsEvent[];
+  boots: OpsBoot[];
+};
+
+const LEVEL_STYLE: Record<OpsEvent["level"], string> = {
+  decision: "bg-indigo-50 text-indigo-700 border-indigo-200",
+  event: "bg-emerald-50 text-emerald-700 border-emerald-200",
+  anomaly: "bg-amber-50 text-amber-700 border-amber-200",
+  error: "bg-red-50 text-red-700 border-red-200",
+  crash: "bg-red-100 text-red-900 border-red-300",
+};
+
+const FILTERS = [
+  { id: "", label: "Tout" },
+  { id: "decision", label: "Décisions" },
+  { id: "anomaly", label: "Anomalies" },
+  { id: "error", label: "Erreurs" },
+] as const;
+
+function fmtDuration(ms?: number): string | null {
+  if (ms == null) return null;
+  return ms >= 10_000 ? `${Math.round(ms / 1000)}s` : `${ms}ms`;
+}
+
+function fmtTs(ts: string): string {
+  try {
+    return new Date(ts).toLocaleString("fr-FR", {
+      day: "2-digit",
+      month: "2-digit",
+      hour: "2-digit",
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  } catch {
+    return ts;
+  }
+}
+
+export function OpsDiagnosticSettings() {
+  const [data, setData] = useState<OpsPayload | null>(null);
+  const [busy, setBusy] = useState(false);
+  const [level, setLevel] = useState<string>("");
+
+  const load = useCallback(async (lvl: string) => {
+    setBusy(true);
+    try {
+      const qs = lvl ? `&level=${lvl}` : "";
+      // Route kit canonique (owner, journal {dataDir}/ops du harness) puis
+      // route marque historique (TF2_OPS_DIR desktop).
+      let emptyKit: OpsPayload | null = null;
+      for (const base of ["/api/v1/platform/ops/events", "/api/v1/ops/events"]) {
+        try {
+          const res = await fetch(`${base}?limit=120${qs}`, {
+            cache: "no-store",
+          });
+          if (res.ok) {
+            const payload = (await res.json()) as OpsPayload;
+            // Kit OK mais journal vide : la route marque (TF2_OPS_DIR) peut
+            // encore avoir les événements en desktop — on la tente avant de
+            // conclure.
+            if (!payload.available && base.startsWith("/api/v1/platform/")) {
+              emptyKit = payload;
+              continue;
+            }
+            setData(payload);
+            return;
+          }
+        } catch {
+          /* route absente */
+        }
+      }
+      if (emptyKit) setData(emptyKit);
+    } finally {
+      setBusy(false);
+    }
+  }, []);
+
+  useEffect(() => {
+    void load(level);
+  }, [load, level]);
+
+  // Mode serveur pur (Docker) : pas de journal local — section masquée.
+  if (data && !data.available) return null;
+
+  const lastBoot = data?.boots?.[0];
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Activity className="h-4 w-4" /> Diagnostic (boîte noire)
+        </CardTitle>
+        <CardDescription>
+          Journal des décisions et événements du poste : pourquoi la recherche a
+          été réindexée, durée de chaque étape du démarrage, anomalies
+          détectées. Conservé localement (30 derniers démarrages).
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {lastBoot ? (
+          <p className="text-xs text-slate-500">
+            Dernier démarrage : {lastBoot.startedAt ? fmtTs(lastBoot.startedAt) : "?"}
+            {lastBoot.durationMs ? ` · ${fmtDuration(lastBoot.durationMs)}` : ""}
+            {lastBoot.appVersion ? ` · v${lastBoot.appVersion}` : ""}
+            {lastBoot.decisions?.["meili.ready"] ? (
+              <>
+                {" · recherche : "}
+                <span
+                  className={
+                    lastBoot.decisions["meili.ready"].outcome === "skip"
+                      ? "text-emerald-700"
+                      : "font-medium text-amber-700"
+                  }
+                >
+                  {lastBoot.decisions["meili.ready"].outcome === "skip"
+                    ? "index conservé"
+                    : `réindexation (${lastBoot.decisions["meili.ready"].reason || "?"})`}
+                </span>
+              </>
+            ) : null}
+          </p>
+        ) : null}
+
+        <div className="flex flex-wrap items-center gap-2">
+          {FILTERS.map((f) => (
+            <Button
+              key={f.id}
+              type="button"
+              size="sm"
+              variant={level === f.id ? "default" : "outline"}
+              onClick={() => setLevel(f.id)}
+            >
+              {f.label}
+            </Button>
+          ))}
+          <Button
+            type="button"
+            size="sm"
+            variant="ghost"
+            onClick={() => void load(level)}
+            disabled={busy}
+          >
+            {busy ? (
+              <Loader2 className="h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="h-4 w-4" />
+            )}
+          </Button>
+        </div>
+
+        <div className="max-h-80 space-y-1 overflow-y-auto rounded-md border border-slate-100 p-2">
+          {(data?.events || []).map((e) => (
+            <div
+              key={`${e.bootId}-${e.seq}`}
+              className="flex items-start gap-2 rounded px-2 py-1.5 text-xs hover:bg-slate-50"
+            >
+              <Badge
+                variant="outline"
+                className={`shrink-0 ${LEVEL_STYLE[e.level] || ""}`}
+              >
+                {e.level}
+              </Badge>
+              <div className="min-w-0 flex-1">
+                <span className="font-medium text-slate-800">{e.kind}</span>
+                {e.outcome ? (
+                  <span className="text-slate-600"> → {e.outcome}</span>
+                ) : null}
+                {fmtDuration(e.durationMs) ? (
+                  <span className="text-slate-400"> · {fmtDuration(e.durationMs)}</span>
+                ) : null}
+                {e.reason ? (
+                  <div className="truncate text-slate-500" title={e.reason}>
+                    {e.reason}
+                  </div>
+                ) : null}
+              </div>
+              <span className="shrink-0 text-slate-400">
+                {fmtTs(e.ts)}
+                <span className="ml-1 text-[10px] text-slate-300">{e.source}</span>
+              </span>
+            </div>
+          ))}
+          {data && data.events.length === 0 ? (
+            <p className="p-2 text-xs text-slate-400">
+              Aucun événement {level ? `de type « ${level} »` : ""} sur les
+              derniers démarrages.
+            </p>
+          ) : null}
+          {!data ? (
+            <p className="p-2 text-xs text-slate-400">Chargement…</p>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/settings/search-reindex-settings.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Réindexation Meili GED — sans factory-reset.
+ * Desktop uniquement (IPC search:reindex).
+ */
+
+import { useEffect, useState } from "react";
+import { Loader2, RefreshCw, Search } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../primitives/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+
+type HealthPayload = {
+  health?: { ok?: boolean; status?: string; error?: string };
+  coherence?: {
+    stale?: boolean;
+    reason?: string;
+    sql?: Record<string, number>;
+    meili?: Record<string, number>;
+  };
+};
+
+export function SearchReindexSettings() {
+  const [desktop, setDesktop] = useState(false);
+  const [busy, setBusy] = useState(false);
+  const [health, setHealth] = useState<HealthPayload | null>(null);
+  // Web serveur : la réindexation passe par la route kit owner
+  // /api/v1/platform/search/reindex (miroir HTTP de l'IPC desktop).
+  const [httpReindex, setHttpReindex] = useState(false);
+
+  useEffect(() => {
+    setDesktop(Boolean(getShellDesktopApi()?.reindexSearch));
+  }, []);
+
+  const refreshHealth = useCallback(async () => {
+    // Route kit canonique (owner) d'abord, route marque historique ensuite.
+    for (const url of [
+      "/api/v1/platform/search/health",
+      "/api/v1/search/health",
+    ]) {
+      try {
+        const res = await fetch(url, { cache: "no-store" });
+        if (res.ok) {
+          setHealth((await res.json()) as HealthPayload);
+          if (url.startsWith("/api/v1/platform/")) setHttpReindex(true);
+          return;
+        }
+      } catch {
+        /* route absente */
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    void refreshHealth();
+  }, [refreshHealth]);
+
+  if (!desktop && !health) return null;
+
+  async function onReindex() {
+    const api = getShellDesktopApi();
+    setBusy(true);
+    try {
+      if (api?.reindexSearch) {
+        const r = await api.reindexSearch();
+        if (!r.ok) {
+          toast.error(r.error || "Échec de la réindexation");
+          return;
+        }
+        toast.success(
+          r.ready
+            ? "Recherche réindexée"
+            : `Réindexation terminée (${r.reason || "vérifiez le health"})`,
+        );
+      } else if (httpReindex) {
+        const res = await fetch("/api/v1/platform/search/reindex", {
+          method: "POST",
+        });
+        const body = (await res.json()) as { error?: string };
+        if (!res.ok) {
+          toast.error(body.error || "Échec de la réindexation");
+          return;
+        }
+        toast.success("Recherche réindexée");
+      } else {
+        toast.error("Réindexation réservée au compte propriétaire");
+        return;
+      }
+      await refreshHealth();
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Erreur");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  const stale = Boolean(health?.coherence?.stale);
+  const reason = health?.coherence?.reason;
+
+  return (
+    <Card className={stale ? "border-amber-300" : undefined}>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Search className="h-4 w-4" /> Recherche (Meilisearch)
+        </CardTitle>
+        <CardDescription>
+          Recalcule l&apos;index de recherche sans effacer vos données. Utile
+          si Ctrl+K ne trouve plus un élément pourtant présent en base.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        {health?.coherence ? (
+          <p className="text-xs text-slate-500">
+            État :{" "}
+            <span className={stale ? "font-medium text-amber-700" : "text-emerald-700"}>
+              {stale ? `désynchronisé (${reason})` : "cohérent"}
+            </span>
+            {health.coherence.sql ? (
+              <>
+                {" "}
+                · SQL{" "}
+                {Object.entries(health.coherence.sql)
+                  .map(([k, v]) => `${k}=${v ?? "?"}`)
+                  .join(" / ")}
+              </>
+            ) : null}
+          </p>
+        ) : null}
+        <div className="flex flex-wrap gap-2">
+          {desktop || httpReindex ? (
+            <Button type="button" onClick={() => void onReindex()} disabled={busy}>
+              {busy ? (
+                <>
+                  <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Indexation…
+                </>
+              ) : (
+                <>
+                  <RefreshCw className="mr-2 h-4 w-4" /> Réindexer la recherche
+                </>
+              )}
+            </Button>
+          ) : null}
+          <Button
+            type="button"
+            variant="outline"
+            onClick={() => void refreshHealth()}
+            disabled={busy}
+          >
+            Actualiser l&apos;état
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}