@creezio/shell-ui 0.22.0

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

@@ -0,0 +1,251 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Profil de connexion desktop : héberger un serveur local vs rejoindre un serveur.
+ * Changer de profil relance l'application Electron.
+ *
+ * Bind LAN (0.0.0.0) : option avancée hôte uniquement — pas au boot.
+ * Accès distant produit = tunnel Cloudflare (config serveur / onboarding).
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Loader2, Network, Server } from "lucide-react";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "../primitives/card";
+import { ServerInstanceCard } from "./server-mode-cards";
+
+type ConnProfile = {
+  mode: "local" | "remote";
+  remoteUrl: string | null;
+  localBind: "127.0.0.1" | "0.0.0.0";
+  chosen: boolean;
+  activeBaseUrl: string | null;
+  serverPort: number | null;
+};
+
+export function DesktopConnectionSettings() {
+  const [desktop, setDesktop] = useState(false);
+  const [profile, setProfile] = useState<ConnProfile | null>(null);
+  const [mode, setMode] = useState<"local" | "remote">("local");
+  const [remoteUrl, setRemoteUrl] = useState("");
+  const [bindLan, setBindLan] = useState(false);
+  const [testing, setTesting] = useState(false);
+  const [saving, setSaving] = useState(false);
+  const [testMsg, setTestMsg] = useState<string | null>(null);
+
+  const refresh = useCallback(async () => {
+    const api = getShellDesktopApi();
+    if (!api?.getConnectionProfile) return;
+    const p = await api.getConnectionProfile();
+    setProfile(p);
+    setMode(p.mode);
+    setRemoteUrl(p.remoteUrl || "");
+    setBindLan(p.localBind === "0.0.0.0");
+  }, []);
+
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.getConnectionProfile) return;
+    setDesktop(true);
+    void refresh();
+  }, [refresh]);
+
+  // Web (serveur headless) : pas de profil Héberger/Rejoindre — carte serveur.
+  if (!desktop) return <ServerInstanceCard />;
+
+  async function onTest() {
+    const api = getShellDesktopApi();
+    if (!api?.testConnection) return;
+    setTesting(true);
+    setTestMsg(null);
+    try {
+      const r = await api.testConnection(remoteUrl);
+      if (r.ok) {
+        setTestMsg(`OK — ${r.baseUrl || remoteUrl}`);
+        if (r.baseUrl) setRemoteUrl(r.baseUrl);
+        toast.success("Serveur joignable");
+      } else {
+        setTestMsg(r.error || "Échec");
+        toast.error(r.error || "Serveur injoignable");
+      }
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : "Erreur";
+      setTestMsg(msg);
+      toast.error(msg);
+    } finally {
+      setTesting(false);
+    }
+  }
+
+  async function onApply() {
+    const api = getShellDesktopApi();
+    if (!api?.applyConnection) return;
+    setSaving(true);
+    try {
+      const r = await api.applyConnection({
+        mode,
+        remoteUrl: mode === "remote" ? remoteUrl : undefined,
+        localBind: mode === "local" ? (bindLan ? "0.0.0.0" : "127.0.0.1") : "127.0.0.1",
+        chosen: true,
+      });
+      if (!r.ok) {
+        toast.error(r.error || "Impossible d'appliquer");
+        return;
+      }
+      toast.success("Profil enregistré — redémarrage…");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const isRemoteSession = profile?.mode === "remote";
+
+  return (
+    <Card>
+      <CardHeader className="pb-2">
+        <CardTitle className="flex items-center gap-2 text-base">
+          <Network className="h-4 w-4" />
+          Connexion serveur
+        </CardTitle>
+        <CardDescription>
+          Héberger le serveur sur ce PC (tunnel d&apos;accès distant inclus dans la config
+          serveur), ou rejoindre un serveur du cabinet via son URL. Un changement relance
+          l&apos;application.
+        </CardDescription>
+      </CardHeader>
+      <CardContent className="space-y-4 text-sm">
+        {profile?.activeBaseUrl && (
+          <p className="rounded-md border bg-muted/40 px-3 py-2 text-muted-foreground">
+            Session actuelle :{" "}
+            <span className="font-medium text-foreground">{profile.activeBaseUrl}</span>
+            {profile.mode === "local" && profile.serverPort != null && (
+              <> (port {profile.serverPort})</>
+            )}
+          </p>
+        )}
+
+        <div className="grid gap-2 sm:grid-cols-2">
+          <button
+            type="button"
+            onClick={() => setMode("local")}
+            className={`rounded-lg border p-3 text-left transition-colors ${
+              mode === "local"
+                ? "border-sky-500 bg-sky-500/5"
+                : "border-border hover:bg-muted/40"
+            }`}
+          >
+            <div className="flex items-center gap-2 font-medium">
+              <Server className="h-4 w-4" />
+              Héberger (serveur local)
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Ce poste démarre la base et l&apos;API. L&apos;accès distant passe par le tunnel
+              configuré avec le serveur (carte Tunnel ci-dessous).
+            </p>
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode("remote")}
+            className={`rounded-lg border p-3 text-left transition-colors ${
+              mode === "remote"
+                ? "border-sky-500 bg-sky-500/5"
+                : "border-border hover:bg-muted/40"
+            }`}
+          >
+            <div className="flex items-center gap-2 font-medium">
+              <Network className="h-4 w-4" />
+              Rejoindre un serveur
+            </div>
+            <p className="mt-1 text-xs text-muted-foreground">
+              Client léger : pas de serveur local — URL tunnel{" "}
+              <code className="text-[11px]">https://….creez.io</code> (ou LAN si
+              activé côté hôte).
+            </p>
+          </button>
+        </div>
+
+        {mode === "local" && (
+          <details className="rounded-md border px-3 py-2 text-xs text-muted-foreground">
+            <summary className="cursor-pointer font-medium text-foreground">
+              Configuration avancée (hôte)
+            </summary>
+            <label className="mt-3 flex items-start gap-2 leading-snug">
+              <input
+                type="checkbox"
+                className="mt-0.5"
+                checked={bindLan}
+                onChange={(e) => setBindLan(e.target.checked)}
+              />
+              <span>
+                Écouter aussi sur le réseau local (<code className="text-[11px]">0.0.0.0</code>)
+                pour un accès HTTP LAN en plus du tunnel. Autoriser le port TCP dans le
+                pare-feu Windows (profil Réseau privé). Les clients utilisent{" "}
+                <code className="text-[11px]">http://&lt;IP-LAN&gt;:&lt;port&gt;</code>.
+                Par défaut produit : accès distant = tunnel uniquement (pas de choix au
+                démarrage).
+              </span>
+            </label>
+          </details>
+        )}
+
+        {mode === "remote" && (
+          <div className="space-y-2">
+            <label className="text-xs text-muted-foreground" htmlFor="remote-url">
+              URL du serveur (tunnel ou LAN)
+            </label>
+            <Input
+              id="remote-url"
+              value={remoteUrl}
+              onChange={(e) => setRemoteUrl(e.target.value)}
+              placeholder="https://cabinet.creez.io ou http://192.168.1.10:18790"
+              spellCheck={false}
+              autoComplete="off"
+            />
+            {testMsg && (
+              <p className="text-xs text-muted-foreground">{testMsg}</p>
+            )}
+            <Button
+              type="button"
+              variant="outline"
+              size="sm"
+              disabled={testing || !remoteUrl.trim()}
+              onClick={() => void onTest()}
+            >
+              {testing ? <Loader2 className="mr-2 h-3.5 w-3.5 animate-spin" /> : null}
+              Tester la connexion
+            </Button>
+          </div>
+        )}
+
+        {isRemoteSession && (
+          <p className="text-xs text-amber-700 dark:text-amber-400">
+            Mode distant : tunnel, clés IA serveur, réindexation Meili et remise à zéro
+            usine concernent uniquement le PC hôte.
+          </p>
+        )}
+
+        <Button type="button" disabled={saving} onClick={() => void onApply()}>
+          {saving ? <Loader2 className="mr-2 h-4 w-4 animate-spin" /> : null}
+          Enregistrer et redémarrer
+        </Button>
+      </CardContent>
+    </Card>
+  );
+}
+
+/** Masque les réglages réservés à l'hôte local quand on est en client distant. */
+export function useIsRemoteDesktopClient(): boolean {
+  const [remote, setRemote] = useState(false);
+  useEffect(() => {
+    const api = getShellDesktopApi();
+    if (!api?.getConnectionProfile) return;
+    void api.getConnectionProfile().then((p: { mode: string }) => setRemote(p.mode === "remote"));
+  }, []);
+  return remote;
+}

package/ui/settings/desktop-embed-env-panel.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import { getShellDesktopApi, getShellUiBrand } from "@creezio/shell-ui";
+
+/**
+ * Panneau variables d’environnement pour n8n / Hermes.
+ * - Locked : visibles, non éditables (OS Creezio)
+ * - Editables + custom : persistées via embed-env:set, puis redémarrage du service
+ */
+
+import { useCallback, useEffect, useState } from "react";
+import { toast } from "sonner";
+import { Loader2, Plus, Save, Trash2 } from "lucide-react";
+import { Button } from "../primitives/button";
+import { Input } from "../primitives/input";
+import { LockedConfigField } from "./locked-config-field";
+
+type EmbedService = "n8n" | "hermes";
+
+type EnvVar = {
+  key: string;
+  label: string;
+  hint?: string;
+  locked: boolean;
+  value: string;
+  kind?: "string" | "boolean" | "number";
+  custom?: boolean;
+};
+
+export function DesktopEmbedEnvPanel(props: { service: EmbedService }) {
+  const [desktop, setDesktop] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [locked, setLocked] = useState<EnvVar[]>([]);
+  const [editable, setEditable] = useState<EnvVar[]>([]);
+  const [customKey, setCustomKey] = useState("");
+  const [customValue, setCustomValue] = useState("");
+
+  const applyPanel = useCallback((vars: EnvVar[]) => {
+    setLocked(vars.filter((v) => v.locked));
+    setEditable(
+      vars
+        .filter((v) => !v.locked)
+        .map((v) => ({ ...v, value: v.value ?? "" })),
+    );
+  }, []);
+
+  const refresh = useCallback(async () => {
+    const api = getShellDesktopApi();
+    if (!api?.getEmbedEnv) return;
+    setLoading(true);
+    try {
+      const panel = await api.getEmbedEnv(props.service);
+      applyPanel(panel.vars as EnvVar[]);
+    } finally {
+      setLoading(false);
+    }
+  }, [applyPanel, props.service]);
+
+  useEffect(() => {
+    if (!getShellDesktopApi()?.getEmbedEnv) return;
+    setDesktop(true);
+    void refresh();
+  }, [refresh]);
+
+  function setEditableValue(key: string, value: string) {
+    setEditable((prev) =>
+      prev.map((v) => (v.key === key ? { ...v, value } : v)),
+    );
+  }
+
+  function removeCustom(key: string) {
+    setEditable((prev) => prev.filter((v) => !(v.custom && v.key === key)));
+  }
+
+  function addCustom() {
+    const key = customKey.trim();
+    if (!/^[A-Za-z_][A-Za-z0-9_]*$/.test(key)) {
+      toast.error("Nom de variable invalide (A-Z, 0-9, _)");
+      return;
+    }
+    if (locked.some((v) => v.key.toUpperCase() === key.toUpperCase())) {
+      toast.error("Cette clé est verrouillée par Creezio");
+      return;
+    }
+    if (editable.some((v) => v.key.toUpperCase() === key.toUpperCase())) {
+      toast.error("Variable déjà présente");
+      return;
+    }
+    setEditable((prev) => [
+      ...prev,
+      {
+        key,
+        label: key,
+        value: customValue,
+        locked: false,
+        custom: true,
+        kind: "string",
+      },
+    ]);
+    setCustomKey("");
+    setCustomValue("");
+  }
+
+  async function onSave() {
+    const api = getShellDesktopApi();
+    if (!api?.setEmbedEnv) return;
+    setSaving(true);
+    try {
+      const values: Record<string, string> = {};
+      for (const v of editable) {
+        const val = String(v.value ?? "").trim();
+        if (val !== "") values[v.key] = val;
+      }
+      const r = await api.setEmbedEnv(props.service, values);
+      applyPanel(r.panel.vars as EnvVar[]);
+      toast.success(r.detail || "Enregistré");
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "Erreur enregistrement");
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  if (!desktop) return null;
+
+  return (
+    <div className="space-y-4 border-t border-slate-200 pt-4">
+      <div>
+        <div className="mb-1 text-xs font-semibold uppercase tracking-wide text-slate-500">
+          Variables d’environnement
+        </div>
+        <p className="text-[11px] leading-snug text-slate-500">
+          Les clés OS Creezio (tunnel, ports, sandbox) sont visibles mais
+          verrouillées. Les autres sont éditables et appliquées au prochain
+          démarrage du service (redémarrage automatique à l’enregistrement).
+        </p>
+      </div>
+
+      {loading ? (
+        <div className="inline-flex items-center gap-2 text-sm text-slate-600">
+          <Loader2 className="h-3.5 w-3.5 animate-spin" /> Chargement des
+          variables…
+        </div>
+      ) : (
+        <>
+          {locked.length > 0 ? (
+            <div>
+              <div className="mb-2 text-xs font-medium text-slate-500">
+                Verrouillées (OS)
+              </div>
+              <div className="grid gap-2 sm:grid-cols-2">
+                {locked.map((v) => (
+                  <LockedConfigField
+                    key={v.key}
+                    label={`${v.label} (${v.key})`}
+                    value={v.value || "—"}
+                    hint={v.hint}
+                  />
+                ))}
+              </div>
+            </div>
+          ) : null}
+
+          <div>
+            <div className="mb-2 text-xs font-medium text-slate-500">
+              Éditables
+            </div>
+            <div className="space-y-2">
+              {editable.map((v) => (
+                <div
+                  key={v.key}
+                  className="rounded-md border border-slate-200 bg-white px-3 py-2"
+                >
+                  <div className="flex items-start justify-between gap-2">
+                    <div className="min-w-0">
+                      <div className="text-xs font-medium text-slate-700">
+                        {v.label}
+                        <span className="ml-1 font-mono text-[11px] text-slate-400">
+                          {v.key}
+                        </span>
+                      </div>
+                      {v.hint ? (
+                        <div className="mt-0.5 text-[11px] text-slate-500">
+                          {v.hint}
+                        </div>
+                      ) : null}
+                    </div>
+                    {v.custom ? (
+                      <Button
+                        type="button"
+                        size="sm"
+                        variant="ghost"
+                        className="h-7 shrink-0 px-2"
+                        onClick={() => removeCustom(v.key)}
+                        aria-label={`Supprimer ${v.key}`}
+                      >
+                        <Trash2 className="h-3.5 w-3.5" />
+                      </Button>
+                    ) : null}
+                  </div>
+                  <Input
+                    className="mt-1.5 font-mono text-xs"
+                    value={v.value}
+                    onChange={(e) => setEditableValue(v.key, e.target.value)}
+                    placeholder={v.kind === "boolean" ? "true | false" : ""}
+                  />
+                </div>
+              ))}
+            </div>
+          </div>
+
+          <div className="rounded-md border border-dashed border-slate-300 px-3 py-2">
+            <div className="mb-2 text-xs font-medium text-slate-600">
+              Ajouter une variable
+            </div>
+            <div className="flex flex-col gap-2 sm:flex-row">
+              <Input
+                className="font-mono text-xs sm:max-w-[220px]"
+                placeholder="NOM_VARIABLE"
+                value={customKey}
+                onChange={(e) => setCustomKey(e.target.value)}
+              />
+              <Input
+                className="font-mono text-xs"
+                placeholder="valeur"
+                value={customValue}
+                onChange={(e) => setCustomValue(e.target.value)}
+              />
+              <Button
+                type="button"
+                size="sm"
+                variant="outline"
+                onClick={addCustom}
+              >
+                <Plus className="mr-1 h-3.5 w-3.5" /> Ajouter
+              </Button>
+            </div>
+          </div>
+
+          <Button
+            size="sm"
+            onClick={() => void onSave()}
+            disabled={saving}
+          >
+            {saving ? (
+              <Loader2 className="mr-1 h-3.5 w-3.5 animate-spin" />
+            ) : (
+              <Save className="mr-1 h-3.5 w-3.5" />
+            )}
+            Enregistrer et redémarrer
+          </Button>
+        </>
+      )}
+    </div>
+  );
+}