@creezio/shell-ui 0.22.0

package/ui/settings/desktop-tunnel.tsx

@@ -0,0 +1,264 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Tunnel d'accès distant via Cloudflare — app desktop (hôte) uniquement.
+ *
+ * Expose le serveur local en HTTPS (`{slug}.creez.io`) pour :
+ * desktop « Rejoindre un serveur », navigateur, mobile / PWA.
+ * PC éteint ou tunnel arrêté = URL inaccessible.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Copy, Globe, Loader2, Wifi, WifiOff } from "lucide-react";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { ServerTunnelCard } from "./server-mode-cards";
+
+type TunnelPublicUrls = {
+  crm: string;
+  n8n: string;
+  hermes: string;
+};
+
+type TunnelStatus = {
+  configured: boolean;
+  online: boolean;
+  slug: string | null;
+  hostname: string | null;
+  publicUrl: string | null;
+  publicUrls?: TunnelPublicUrls | null;
+  error: string | null;
+  pcMustBeOn: true;
+};
+
+const SLUG_RE = /^[a-z0-9]([a-z0-9-]{0,46}[a-z0-9])$/;
+
+export function DesktopTunnel() {
+  const [desktop, setDesktop] = useState(false);
+  const [status, setStatus] = useState<TunnelStatus | null>(null);
+  const [slug, setSlug] = useState("");
+  const [checking, setChecking] = useState(false);
+  const [reserving, setReserving] = useState(false);
+  const [avail, setAvail] = useState<{ available: boolean; reason?: string } | null>(null);
+
+  const refresh = useCallback(async () => {
+    const api = getShellDesktopApi();
+    if (!api?.getTunnelStatus) return;
+    setStatus(await api.getTunnelStatus());
+  }, []);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.getTunnelStatus) return;
+    setDesktop(true);
+    void refresh();
+    const t = setInterval(() => void refresh(), 5000);
+    return () => clearInterval(t);
+  }, [refresh]);
+
+  // Web (serveur headless) : URLs publiques via /api/v1/os/tunnel/status.
+  if (!desktop) return <ServerTunnelCard />;
+
+  async function checkAvailability() {
+    const api = getShellDesktopApi();
+    if (!api?.checkTunnelSlug) return;
+    const s = slug.trim().toLowerCase();
+    if (!SLUG_RE.test(s)) {
+      setAvail({ available: false, reason: "Slug invalide (a-z, 0-9, tirets, 2–48 car.)" });
+      return;
+    }
+    setChecking(true);
+    setAvail(null);
+    try {
+      const r = await api.checkTunnelSlug(s);
+      setAvail(r);
+    } catch (e) {
+      setAvail({ available: false, reason: e instanceof Error ? e.message : "Erreur réseau" });
+    } finally {
+      setChecking(false);
+    }
+  }
+
+  async function reserve() {
+    const api = getShellDesktopApi();
+    if (!api?.reserveTunnel) return;
+    const s = slug.trim().toLowerCase();
+    if (!SLUG_RE.test(s)) {
+      toast.error("Slug invalide");
+      return;
+    }
+    setReserving(true);
+    try {
+      const r = await api.reserveTunnel(s);
+      if (!r.ok) {
+        toast.error(r.error || "Réservation impossible");
+        return;
+      }
+      toast.success(`Réservé : ${r.hostname}`);
+      setSlug("");
+      setAvail(null);
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur de réservation");
+    } finally {
+      setReserving(false);
+    }
+  }
+
+  async function stopTunnel() {
+    const api = getShellDesktopApi();
+    if (!api?.stopTunnel) return;
+    try {
+      await api.stopTunnel();
+      toast.message("Tunnel arrêté (URL d’accès distant inaccessible)");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur");
+    }
+  }
+
+  async function startTunnel() {
+    const api = getShellDesktopApi();
+    if (!api?.startTunnel) return;
+    try {
+      await api.startTunnel();
+      toast.success("Tunnel d’accès distant démarré");
+      await refresh();
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur de démarrage");
+    }
+  }
+
+  async function copyPublicUrl() {
+    const url = status?.publicUrl;
+    if (!url) return;
+    try {
+      await navigator.clipboard.writeText(url);
+      toast.success("URL copiée — à coller dans « Rejoindre un serveur » sur les autres PC");
+    } catch {
+      toast.error("Impossible de copier l’URL");
+    }
+  }
+
+  const online = status?.online ?? false;
+  const configured = status?.configured ?? false;
+
+  return (
+    <Card className="mt-4">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Globe className="h-4 w-4" /> Tunnel d&apos;accès distant
+        </CardTitle>
+        <CardDescription>
+          Expose ce serveur en HTTPS :{" "}
+          <code className="text-xs">{"{slug}.creez.io"}</code> (CRM) et{" "}
+          <code className="text-xs">{"n8n|hermes.{slug}.creez.io"}</code>{" "}
+          (embeds). Même URL CRM pour « Rejoindre un serveur », navigateur et mobile /
+          PWA. Ce PC doit rester allumé avec le tunnel en ligne.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p
+          className={
+            online
+              ? "flex items-center gap-2 rounded-md border border-emerald-200 bg-emerald-50 px-3 py-2 text-sm text-emerald-800"
+              : "flex items-center gap-2 rounded-md border border-slate-200 bg-slate-50 px-3 py-2 text-sm text-slate-700"
+          }
+        >
+          {online ? <Wifi className="h-4 w-4" /> : <WifiOff className="h-4 w-4" />}
+          {configured
+            ? online
+              ? `En ligne — ${status?.publicUrl}`
+              : `Hors ligne — ${status?.hostname || "tunnel configuré"} (PC éteint ou tunnel arrêté)`
+            : "Aucun sous-domaine réservé"}
+        </p>
+        {configured && status?.publicUrl ? (
+          <div className="space-y-1.5 text-xs text-muted-foreground">
+            <p>
+              Sur les autres postes : Configuration → Connexion serveur →{" "}
+              <strong className="font-medium text-foreground">Rejoindre un serveur</strong>,
+              coller l&apos;URL CRM (ou au premier lancement choisir « Rejoindre »). Les
+              embeds s&apos;ouvrent automatiquement via leurs sous-domaines.
+            </p>
+            {status.publicUrls ? (
+              <ul className="space-y-0.5 font-mono text-[11px] text-foreground/80">
+                <li>CRM · {status.publicUrls.crm}</li>
+                <li>n8n · {status.publicUrls.n8n}</li>
+                <li>Hermes · {status.publicUrls.hermes}</li>
+              </ul>
+            ) : null}
+          </div>
+        ) : null}
+        {status?.error ? (
+          <p className="text-sm text-destructive">{status.error}</p>
+        ) : null}
+
+        {!configured ? (
+          <div className="space-y-2">
+            <div className="flex items-center gap-2">
+              <Input
+                value={slug}
+                onChange={(e) => {
+                  setSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ""));
+                  setAvail(null);
+                }}
+                placeholder="mon-cabinet"
+                className="flex-1"
+                maxLength={48}
+              />
+              <span className="shrink-0 text-sm text-muted-foreground">.creez.io</span>
+            </div>
+            <div className="flex flex-wrap gap-2">
+              <Button size="sm" variant="outline" disabled={checking || !slug} onClick={() => void checkAvailability()}>
+                {checking ? <Loader2 className="h-4 w-4 animate-spin" /> : "Vérifier dispo"}
+              </Button>
+              <Button
+                size="sm"
+                disabled={reserving || !avail?.available}
+                onClick={() => void reserve()}
+              >
+                {reserving ? <Loader2 className="h-4 w-4 animate-spin" /> : "Réserver & activer"}
+              </Button>
+            </div>
+            {avail ? (
+              <p className={avail.available ? "text-sm text-emerald-700" : "text-sm text-amber-800"}>
+                {avail.available
+                  ? `Disponible : ${slug}.creez.io`
+                  : avail.reason || "Indisponible"}
+              </p>
+            ) : null}
+          </div>
+        ) : (
+          <div className="flex flex-wrap gap-2">
+            {online ? (
+              <Button size="sm" variant="outline" onClick={() => void stopTunnel()}>
+                Arrêter le tunnel
+              </Button>
+            ) : (
+              <Button size="sm" onClick={() => void startTunnel()}>
+                Démarrer le tunnel
+              </Button>
+            )}
+            {status?.publicUrl ? (
+              <>
+                <Button size="sm" variant="outline" onClick={() => void copyPublicUrl()}>
+                  <Copy className="mr-1.5 h-3.5 w-3.5" />
+                  Copier l&apos;URL
+                </Button>
+                <Button size="sm" variant="outline" asChild>
+                  <a href={status.publicUrl} target="_blank" rel="noreferrer">
+                    Ouvrir l&apos;URL
+                  </a>
+                </Button>
+              </>
+            ) : null}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}

package/ui/settings/desktop-update-settings.tsx

@@ -0,0 +1,175 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Mise à jour de l'app desktop — Configuration.
+ * Check auto côté main ; téléchargement uniquement après clic.
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { ArrowUpCircle, Loader2, RefreshCw } from "lucide-react";
+import { Button } from "../primitives/button";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import type { DesktopUpdateStatus } from "../desktop-types";
+import { ServerVersionCard } from "./server-mode-cards";
+
+function labelFor(status: DesktopUpdateStatus | null): string {
+  if (!status) return "…";
+  switch (status.state) {
+    case "disabled":
+      return status.error || "Auto-update désactivé";
+    case "checking":
+      return "Recherche d'une mise à jour…";
+    case "available":
+      return `Mise à jour disponible : ${status.availableVersion ?? "?"}`;
+    case "not-available":
+      return "Vous êtes à jour";
+    case "downloading":
+      return `Téléchargement… ${Math.floor(status.percent ?? 0)} %`;
+    case "ready":
+      return `Prêt à installer (${status.availableVersion ?? "?"}) — redémarrage…`;
+    case "error":
+      return status.error || "Erreur de mise à jour";
+    case "idle":
+    default:
+      return status.updateAvailable
+        ? `Mise à jour disponible : ${status.availableVersion ?? "?"}`
+        : "Aucune vérification récente";
+  }
+}
+
+export function DesktopUpdateSettings() {
+  const [desktop, setDesktop] = useState(false);
+  const [status, setStatus] = useState<DesktopUpdateStatus | null>(null);
+  const [busy, setBusy] = useState(false);
+
+  const refresh = useCallback(async () => {
+    const api = getShellDesktopApi();
+    if (!api?.getUpdateStatus) return;
+    setStatus(await api.getUpdateStatus());
+  }, []);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.getUpdateStatus) return;
+    setDesktop(true);
+    void refresh();
+    const unsub = api.onUpdateChanged?.(setStatus);
+    return () => unsub?.();
+  }, [refresh]);
+
+  // Web (serveur headless) : version d'image — updates gérées par la flotte.
+  if (!desktop) return <ServerVersionCard />;
+
+  const canInstall =
+    status?.state === "available" ||
+    status?.state === "ready" ||
+    (status?.updateAvailable && status.state !== "downloading");
+  const downloading = status?.state === "downloading";
+
+  async function onCheck() {
+    const api = getShellDesktopApi();
+    if (!api?.checkForUpdates) return;
+    setBusy(true);
+    try {
+      const s = await api.checkForUpdates();
+      setStatus(s);
+      if (s.state === "not-available") toast.success("Vous êtes à jour");
+      else if (s.state === "available") {
+        toast.message(`Mise à jour ${s.availableVersion} disponible`, {
+          description: "Cliquez sur « Mettre à jour » pour l'installer.",
+        });
+      } else if (s.state === "error") toast.error(s.error || "Erreur");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur de vérification");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function onInstall() {
+    const api = getShellDesktopApi();
+    if (!api?.downloadAndInstallUpdate) return;
+    setBusy(true);
+    try {
+      toast.message("Téléchargement de la mise à jour…", {
+        description: "L'application redémarrera pour terminer l'installation.",
+      });
+      const s = await api.downloadAndInstallUpdate();
+      setStatus(s);
+      if (s.state === "error") toast.error(s.error || "Échec du téléchargement");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Échec de la mise à jour");
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Card>
+      <CardHeader className="pb-3">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <ArrowUpCircle className="h-4 w-4" />
+          Mises à jour
+        </CardTitle>
+        <CardDescription>
+          Version installée {status?.currentVersion ?? "…"}. Les mises à jour
+          ne se téléchargent qu&apos;après votre accord.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-3">
+        <p
+          className={
+            status?.state === "error"
+              ? "text-sm text-red-600"
+              : status?.updateAvailable || status?.state === "available"
+                ? "text-sm font-medium text-amber-700"
+                : "text-sm text-muted-foreground"
+          }
+        >
+          {labelFor(status)}
+        </p>
+        {downloading ? (
+          <div className="h-2 w-full overflow-hidden rounded bg-muted">
+            <div
+              className="h-full bg-amber-500 transition-all"
+              style={{ width: `${Math.min(100, Math.max(0, status?.percent ?? 0))}%` }}
+            />
+          </div>
+        ) : null}
+        <div className="flex flex-wrap gap-2">
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            disabled={busy || downloading}
+            onClick={() => void onCheck()}
+          >
+            {busy && !downloading ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <RefreshCw className="mr-2 h-4 w-4" />
+            )}
+            Vérifier
+          </Button>
+          <Button
+            type="button"
+            size="sm"
+            disabled={!canInstall || busy || downloading || status?.state === "disabled"}
+            onClick={() => void onInstall()}
+          >
+            {downloading ? (
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+            ) : (
+              <ArrowUpCircle className="mr-2 h-4 w-4" />
+            )}
+            Mettre à jour
+            {status?.availableVersion ? ` (${status.availableVersion})` : ""}
+          </Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/settings/factory-reset-settings.tsx

@@ -0,0 +1,89 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Remise à zéro usine — Configuration desktop.
+ * Efface compte, DB, Meili, uploads, tunnel token, cookies CRM + sites externes.
+ */
+
+import { FormEvent, useEffect, useState } from "react";
+import { AlertTriangle, Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { ServerOperatorNotice } from "./server-mode-cards";
+
+export function FactoryResetSettings() {
+  const [confirm, setConfirm] = useState("");
+  const [busy, setBusy] = useState(false);
+  const [desktop, setDesktop] = useState(false);
+
+  useEffect(() => {
+    setDesktop(Boolean(getShellDesktopApi()?.factoryReset));
+  }, []);
+
+  // Web (serveur headless) : wipe = opération opérateur (backup + recreate).
+  if (!desktop)
+    return <ServerOperatorNotice label="la remise à zéro usine" />;
+
+  async function onSubmit(e: FormEvent) {
+    e.preventDefault();
+    if (confirm.trim().toUpperCase() !== "SUPPRIMER") {
+      toast.error('Tapez SUPPRIMER pour confirmer');
+      return;
+    }
+    const api = getShellDesktopApi();
+    if (!api?.factoryReset) return;
+    setBusy(true);
+    try {
+      const r = await api.factoryReset();
+      if (!r.ok) {
+        toast.error(r.error || "Échec de la remise à zéro");
+        setBusy(false);
+        return;
+      }
+      toast.success("Remise à zéro en cours…");
+    } catch (err) {
+      toast.error(err instanceof Error ? err.message : "Erreur");
+      setBusy(false);
+    }
+  }
+
+  return (
+    <Card className="border-rose-200">
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2 text-base text-rose-700">
+          <AlertTriangle className="h-4 w-4" /> Remise à zéro usine
+        </CardTitle>
+        <CardDescription>
+          Efface toutes les données locales de cet ordinateur (compte, base catalogue/métier,
+          index Meili, uploads, token tunnel, cookies CRM et sessions sites externes), puis relance
+          le wizard de premier lancement. Le DNS Cloudflare distant peut rester — vous
+          re-réservez un slug au setup.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        <form onSubmit={(e) => void onSubmit(e)} className="space-y-3">
+          <Input
+            type="text"
+            placeholder='Tapez SUPPRIMER'
+            value={confirm}
+            onChange={(e) => setConfirm(e.target.value)}
+            disabled={busy}
+          />
+          <Button type="submit" variant="destructive" disabled={busy}>
+            {busy ? (
+              <>
+                <Loader2 className="mr-2 h-4 w-4 animate-spin" /> Effacement…
+              </>
+            ) : (
+              "Tout effacer et repartir de zéro"
+            )}
+          </Button>
+        </form>
+      </CardContent>
+    </Card>
+  );
+}

package/ui/settings/host-only-settings.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+/**
+ * Affiche les enfants uniquement en mode serveur local (hôte).
+ * En client distant, tunnel / BYOK / reindex / factory-reset sont gérés par
+ * l'app Serveur : on affiche un encart explicatif (ou rien) à la place.
+ */
+
+import { useEffect, useState, type ReactNode } from "react";
+import { ServerCog } from "lucide-react";
+import { getShellUiBrand } from "@creezio/shell-ui";
+import { getDesktopHostInfo } from "../lib/desktop-host";
+
+/** Encart standard « géré par l'app Serveur » (fallback par défaut). */
+export function HostManagedNotice({
+  label = "cette section",
+}: {
+  label?: string;
+}) {
+  const productName = getShellUiBrand().productName;
+  return (
+    <div className="flex items-start gap-3 rounded-lg border border-slate-200 bg-slate-50 p-4 text-sm text-slate-600">
+      <ServerCog className="mt-0.5 h-5 w-5 shrink-0 text-slate-400" />
+      <div>
+        <p className="font-medium text-slate-700">
+          Géré par l&apos;app {productName} Server
+        </p>
+        <p className="mt-1">
+          Vous êtes connecté à un serveur distant : {label} se configure sur le
+          poste qui héberge le serveur, pas depuis ce client.
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export function HostOnlySettings({
+  children,
+  fallback,
+}: {
+  children: ReactNode;
+  /** Affiché à la place des enfants sur un client distant (défaut : encart). */
+  fallback?: ReactNode;
+}) {
+  // null = résolution en cours : ne rien rendre (pas de flash des contrôles
+  // host-only avant le masquage, cause de rejets IPC au montage).
+  const [host, setHost] = useState<boolean | null>(null);
+
+  useEffect(() => {
+    let alive = true;
+    void getDesktopHostInfo().then((info) => {
+      if (alive) setHost(info.isHost);
+    });
+    return () => {
+      alive = false;
+    };
+  }, []);
+
+  if (host === null) return null;
+  if (!host) return <>{fallback ?? <HostManagedNotice />}</>;
+  return <>{children}</>;
+}

package/ui/settings/locked-config-field.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+/**
+ * Champ de configuration visible mais non modifiable (OS Creezio pré-configuré).
+ */
+
+import { Lock } from "lucide-react";
+
+export function LockedConfigField(props: {
+  label: string;
+  value: string;
+  hint?: string;
+}) {
+  return (
+    <div className="rounded-md border border-slate-200 bg-slate-50 px-3 py-2">
+      <div className="flex items-center gap-1.5 text-xs font-medium text-slate-600">
+        <Lock className="h-3 w-3 shrink-0" />
+        {props.label}
+      </div>
+      <div className="mt-1 break-all font-mono text-xs text-slate-900">
+        {props.value || "—"}
+      </div>
+      {props.hint ? (
+        <div className="mt-1 text-[11px] leading-snug text-slate-500">
+          {props.hint}
+        </div>
+      ) : null}
+    </div>
+  );
+}