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

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
2026-06-05 04:20:13 +02:00
parent 46d27768f3
commit 17134ed1a6
6 changed files with 183 additions and 0 deletions
@@ -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>
+  );
+}