feat: UI 3 volets (Hermes stub, dashboard tuiles, terminal xterm.js)

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

client/src/App.tsx

@@ -0,0 +1,16 @@
+// client/src/App.tsx
+import { useState } from "react";
+import { HermesPanel } from "./panels/HermesPanel.js";
+import { Dashboard } from "./panels/Dashboard.js";
+import { TerminalPanel } from "./panels/TerminalPanel.js";
+
+export function App() {
+  const [selected, setSelected] = useState<string | null>(null);
+  return (
+    <div className="su-layout">
+      <HermesPanel />
+      <Dashboard onSelect={setSelected} />
+      <TerminalPanel machineId={selected} />
+    </div>
+  );
+}

client/src/features/machines/AddMachineModal.tsx

@@ -0,0 +1,42 @@
+// client/src/features/machines/AddMachineModal.tsx
+import { useState } from "react";
+
+interface Props { onClose: () => void; onCreated: () => void; }
+
+export function AddMachineModal({ onClose, onCreated }: Props) {
+  const [form, setForm] = useState({ name: "", hostname: "", port: 22, username: "", password: "", sudoPassword: "" });
+  const [error, setError] = useState<string | null>(null);
+  const [busy, setBusy] = useState(false);
+  const set = (k: string, v: string | number) => setForm({ ...form, [k]: v });
+
+  async function submit() {
+    setBusy(true); setError(null);
+    try {
+      const res = await fetch("/api/machines", {
+        method: "POST", headers: { "content-type": "application/json" },
+        body: JSON.stringify({ ...form, port: Number(form.port), sudoPassword: form.sudoPassword || null }),
+      });
+      if (!res.ok) throw new Error((await res.json()).error ?? "Échec");
+      onCreated(); onClose();
+    } catch (e) { setError((e as Error).message); } finally { setBusy(false); }
+  }
+
+  return (
+    <div style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.5)", display: "grid", placeItems: "center" }}>
+      <div className="glass-strong" style={{ padding: 20, borderRadius: 12, width: 380, display: "grid", gap: 10 }}>
+        <div className="label">AJOUTER UNE MACHINE</div>
+        {(["name", "hostname", "username"] as const).map((k) => (
+          <input key={k} placeholder={k} value={form[k]} onChange={(e) => set(k, e.target.value)} />
+        ))}
+        <input placeholder="port" type="number" value={form.port} onChange={(e) => set("port", e.target.value)} />
+        <input placeholder="password" type="password" value={form.password} onChange={(e) => set("password", e.target.value)} />
+        <input placeholder="sudo password (optionnel)" type="password" value={form.sudoPassword} onChange={(e) => set("sudoPassword", e.target.value)} />
+        {error && <div style={{ color: "var(--err)", fontSize: 12 }}>{error}</div>}
+        <div style={{ display: "flex", gap: 8, justifyContent: "flex-end" }}>
+          <button onClick={onClose}>Annuler</button>
+          <button className="interactive" disabled={busy} onClick={submit}>{busy ? "Test…" : "Ajouter"}</button>
+        </div>
+      </div>
+    </div>
+  );
+}

client/src/features/machines/MachineTile.tsx

@@ -0,0 +1,39 @@
+// client/src/features/machines/MachineTile.tsx
+import type { MachineView } from "@shared/types.js";
+
+interface Props {
+  machine: MachineView;
+  packageCount: number;
+  onSelect: (id: string) => void;
+  onRefresh: (id: string) => void;
+  onUpgrade: (id: string) => void;
+  onReboot: (id: string) => void;
+}
+
+const STATUS_COLOR: Record<string, string> = {
+  ok: "var(--ok)", updates_available: "var(--warn)", error: "var(--err)",
+  running: "var(--info)", unknown: "var(--ink-4)",
+};
+
+export function MachineTile({ machine, packageCount, onSelect, onRefresh, onUpgrade, onReboot }: Props) {
+  return (
+    <div className="glass" style={{ padding: 16, borderRadius: 10 }} onClick={() => onSelect(machine.id)}>
+      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+        <span style={{ width: 10, height: 10, borderRadius: 999, background: STATUS_COLOR[machine.status] }} />
+        <strong>{machine.name}</strong>
+      </div>
+      <div className="mono" style={{ color: "var(--ink-3)", fontSize: 12 }}>
+        {machine.hostname}:{machine.port} · {machine.osFamily}
+      </div>
+      <div style={{ margin: "10px 0", fontSize: 13 }}>
+        <span className="label">UPDATES</span>{" "}
+        <span className="mono">{packageCount}</span>
+      </div>
+      <div style={{ display: "flex", gap: 6, flexWrap: "wrap" }} onClick={(e) => e.stopPropagation()}>
+        <button className="interactive" onClick={() => onRefresh(machine.id)}>Refresh</button>
+        <button className="interactive" onClick={() => onUpgrade(machine.id)}>Upgrade</button>
+        <button className="interactive" onClick={() => onReboot(machine.id)}>Reboot</button>
+      </div>
+    </div>
+  );
+}

client/src/panels/Dashboard.tsx

@@ -0,0 +1,46 @@
+// client/src/panels/Dashboard.tsx
+import { useEffect, useState } from "react";
+import type { MachineView } from "@shared/types.js";
+import { api } from "../lib/api.js";
+import { MachineTile } from "../features/machines/MachineTile.js";
+import { AddMachineModal } from "../features/machines/AddMachineModal.js";
+
+interface Props { onSelect: (id: string) => void; }
+
+export function Dashboard({ onSelect }: Props) {
+  const [machines, setMachines] = useState<MachineView[]>([]);
+  const [counts, setCounts] = useState<Record<string, number>>({});
+  const [adding, setAdding] = useState(false);
+
+  async function load() {
+    const ms = await api.listMachines();
+    setMachines(ms);
+    const entries = await Promise.all(ms.map(async (m) => {
+      try { return [m.id, (await api.snapshot(m.id)).apt.count] as const; }
+      catch { return [m.id, 0] as const; }
+    }));
+    setCounts(Object.fromEntries(entries));
+  }
+  useEffect(() => { void load(); }, []);
+
+  return (
+    <main className="su-center">
+      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 16 }}>
+        <h2 style={{ margin: 0 }}>Machines</h2>
+        <button className="interactive" onClick={() => setAdding(true)}>+ Ajouter</button>
+      </div>
+      {machines.length === 0 && <p style={{ color: "var(--ink-3)" }}>Aucune machine. Clique sur « + Ajouter ».</p>}
+      <div className="su-tiles">
+        {machines.map((m) => (
+          <MachineTile
+            key={m.id} machine={m} packageCount={counts[m.id] ?? 0} onSelect={onSelect}
+            onRefresh={(id) => { onSelect(id); void api.refresh(id).then(load); }}
+            onUpgrade={(id) => { onSelect(id); void api.runAction(id, "apt_full_upgrade"); }}
+            onReboot={(id) => { onSelect(id); void api.runAction(id, "reboot"); }}
+          />
+        ))}
+      </div>
+      {adding && <AddMachineModal onClose={() => setAdding(false)} onCreated={load} />}
+    </main>
+  );
+}

client/src/panels/HermesPanel.tsx

@@ -0,0 +1,12 @@
+// client/src/panels/HermesPanel.tsx
+export function HermesPanel() {
+  return (
+    <aside className="su-hermes">
+      <div className="label" style={{ marginBottom: 12 }}>HERMES</div>
+      <p style={{ color: "var(--ink-3)", fontSize: 13 }}>
+        Copilote d'exploitation — à venir. Analyse des mises à jour, plans et rapports
+        seront disponibles ici dans un prochain jalon.
+      </p>
+    </aside>
+  );
+}

client/src/panels/TerminalPanel.tsx

@@ -0,0 +1,28 @@
+// client/src/panels/TerminalPanel.tsx
+import { useEffect, useRef } from "react";
+import { Terminal } from "@xterm/xterm";
+import { FitAddon } from "@xterm/addon-fit";
+import "@xterm/xterm/css/xterm.css";
+import { connectOutput } from "../lib/ws.js";
+
+export function TerminalPanel({ machineId }: { machineId: string | null }) {
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!ref.current) return;
+    const term = new Terminal({
+      fontFamily: "'Share Tech Mono', monospace", fontSize: 12,
+      theme: { background: "#1d2021", foreground: "#ebdbb2" },
+      convertEol: true,
+    });
+    const fit = new FitAddon();
+    term.loadAddon(fit);
+    term.open(ref.current);
+    fit.fit();
+    term.writeln(machineId ? `# flux ${machineId}` : "# sélectionne une machine");
+    const disconnect = machineId ? connectOutput(machineId, (c) => term.write(c)) : () => {};
+    return () => { disconnect(); term.dispose(); };
+  }, [machineId]);
+
+  return <div className="su-terminal" ref={ref} style={{ padding: 6 }} />;
+}