console

modules/pi_control/assets/commands.js

@@ -0,0 +1,97 @@
+(() => {
+  const form = document.querySelector('[data-command-form]');
+  const list = document.querySelector('[data-command-list]');
+  if (!form) return;
+
+  const idInput = form.querySelector('input[name="id"]');
+  const labelInput = form.querySelector('input[name="label"]');
+  const commandInput = form.querySelector('textarea[name="command"]');
+  const timeoutInput = form.querySelector('input[name="timeout_sec"]');
+  const adminInput = form.querySelector('input[name="admin_only"]');
+  const submitBtn = form.querySelector('[data-command-submit]');
+  const cancelBtn = form.querySelector('[data-command-cancel]');
+
+  const resetForm = () => {
+    if (idInput) idInput.value = '';
+    if (labelInput) labelInput.value = '';
+    if (commandInput) commandInput.value = '';
+    if (timeoutInput) timeoutInput.value = '';
+    if (adminInput) adminInput.checked = false;
+    if (submitBtn) submitBtn.textContent = 'Speichern';
+  };
+
+  document.querySelectorAll('[data-command-edit]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const item = btn.closest('.command-item');
+      if (!item) return;
+      if (idInput) idInput.value = item.dataset.commandId || '';
+      if (labelInput) labelInput.value = item.dataset.label || '';
+      if (commandInput) commandInput.value = item.dataset.command || '';
+      if (timeoutInput) timeoutInput.value = item.dataset.timeout || '';
+      if (adminInput) adminInput.checked = item.dataset.admin === '1';
+      if (submitBtn) submitBtn.textContent = 'Aktualisieren';
+      const details = btn.closest('details');
+      if (details) details.removeAttribute('open');
+      form.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      resetForm();
+    });
+  }
+
+  if (!list) return;
+
+  let dragging = null;
+
+  list.querySelectorAll('.command-item').forEach((item) => {
+    item.addEventListener('dragstart', () => {
+      dragging = item;
+      item.classList.add('is-dragging');
+    });
+    item.addEventListener('dragend', () => {
+      item.classList.remove('is-dragging');
+      dragging = null;
+      saveOrder();
+    });
+  });
+
+  list.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    if (!dragging) return;
+    const after = getDragAfterElement(list, e.clientY);
+    if (after == null) {
+      list.appendChild(dragging);
+    } else if (after !== dragging) {
+      list.insertBefore(dragging, after);
+    }
+  });
+
+  const getDragAfterElement = (container, y) => {
+    const elements = [...container.querySelectorAll('.command-item:not(.is-dragging)')];
+    return elements.reduce(
+      (closest, child) => {
+        const box = child.getBoundingClientRect();
+        const offset = y - box.top - box.height / 2;
+        if (offset < 0 && offset > closest.offset) {
+          return { offset, element: child };
+        }
+        return closest;
+      },
+      { offset: Number.NEGATIVE_INFINITY, element: null }
+    ).element;
+  };
+
+  const saveOrder = () => {
+    const order = [...list.querySelectorAll('.command-item')].map((el) => el.dataset.commandId);
+    fetch(window.location.pathname + '?reorder_json=1', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ order }),
+      cache: 'no-store',
+    }).catch(() => {});
+  };
+})();

modules/pi_control/assets/hosts.js

@@ -0,0 +1,56 @@
+(() => {
+  const form = document.querySelector('[data-host-form]');
+  if (!form) return;
+
+  const idInput = form.querySelector('input[name="id"]');
+  const nameInput = form.querySelector('input[name="name"]');
+  const hostInput = form.querySelector('input[name="host"]');
+  const portInput = form.querySelector('input[name="port"]');
+  const userInput = form.querySelector('input[name="username"]');
+  const authSelect = form.querySelector('select[name="auth_type"]');
+  const keyInput = form.querySelector('input[name="key_path"]');
+  const passInput = form.querySelector('input[name="password"]');
+  const imageInput = form.querySelector('input[name="image_url"]');
+  const submitBtn = form.querySelector('[data-host-submit]');
+  const cancelBtn = form.querySelector('[data-host-cancel]');
+
+  const resetForm = () => {
+    if (idInput) idInput.value = '';
+    if (nameInput) nameInput.value = '';
+    if (hostInput) hostInput.value = '';
+    if (portInput) portInput.value = '22';
+    if (userInput) userInput.value = '';
+    if (authSelect) authSelect.value = 'key';
+    if (keyInput) keyInput.value = '';
+    if (passInput) passInput.value = '';
+    if (imageInput) imageInput.value = '';
+    if (submitBtn) submitBtn.textContent = 'Speichern';
+  };
+
+  document.querySelectorAll('[data-host-edit]').forEach((btn) => {
+    btn.addEventListener('click', () => {
+      const card = btn.closest('.host-card');
+      if (!card) return;
+      if (idInput) idInput.value = card.dataset.hostId || '';
+      if (nameInput) nameInput.value = card.dataset.name || '';
+      if (hostInput) hostInput.value = card.dataset.host || '';
+      if (portInput) portInput.value = card.dataset.port || '22';
+      if (userInput) userInput.value = card.dataset.username || '';
+      if (authSelect) authSelect.value = card.dataset.auth || 'key';
+      if (keyInput) keyInput.value = card.dataset.keyPath || '';
+      if (passInput) passInput.value = '';
+      if (imageInput) imageInput.value = card.dataset.imageUrl || '';
+      if (submitBtn) submitBtn.textContent = 'Aktualisieren';
+      const details = btn.closest('details');
+      if (details) details.removeAttribute('open');
+      form.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    });
+  });
+
+  if (cancelBtn) {
+    cancelBtn.addEventListener('click', (e) => {
+      e.preventDefault();
+      resetForm();
+    });
+  }
+})();

modules/pi_control/assets/pi_control.css

@@ -73,6 +73,119 @@
   background: #0b0f17;
 }
 
+.host-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: 16px;
+}
+.host-card {
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 16px;
+  overflow: hidden;
+  display: grid;
+  grid-template-rows: 120px 1fr;
+  box-shadow: var(--shadow);
+}
+.host-card-image {
+  background: linear-gradient(135deg, #2b3a67 0%, #3b2f5c 45%, #1c2b3f 100%);
+  background-size: cover;
+  background-position: center;
+  position: relative;
+}
+.host-card-overlay {
+  position: absolute;
+  inset: 0;
+  background: rgba(10, 16, 28, 0.35);
+}
+.host-card-body {
+  padding: 12px 14px 14px;
+  display: grid;
+  gap: 6px;
+}
+.host-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+}
+.host-card-title {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.status-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: 999px;
+  display: inline-block;
+}
+.status-ok { background: #31c48d; }
+.status-auth { background: #fbbf24; }
+.status-down { background: #ef4444; }
+
+.action-menu {
+  position: relative;
+}
+.action-menu summary {
+  list-style: none;
+  cursor: pointer;
+  border-radius: 10px;
+  padding: 2px 6px;
+  border: 1px solid var(--line);
+  background: var(--panel-2);
+}
+.action-menu summary::-webkit-details-marker { display: none; }
+.action-menu[open] summary {
+  background: var(--panel);
+}
+.action-menu-panel {
+  position: absolute;
+  right: 0;
+  top: calc(100% + 6px);
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  padding: 6px;
+  min-width: 160px;
+  display: grid;
+  gap: 4px;
+  z-index: 5;
+  box-shadow: var(--shadow);
+}
+.action-menu-panel form { margin: 0; }
+
+.command-list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: 10px;
+}
+.command-item {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 10px;
+  align-items: start;
+  padding: 10px 12px;
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  background: var(--panel);
+}
+.command-item.is-dragging {
+  opacity: 0.6;
+}
+.command-drag {
+  cursor: grab;
+  color: var(--muted);
+  font-size: 1.1rem;
+  padding-top: 4px;
+}
+.command-body code {
+  display: inline-block;
+  word-break: break-word;
+}
+
 .queue-button {
   display: inline-flex;
   align-items: center;

modules/pi_control/bootstrap.php

@@ -64,6 +64,7 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
             auth_type VARCHAR(20) NOT NULL DEFAULT 'key',
             key_path TEXT NULL,
             password TEXT NULL,
+            image_url TEXT NULL,
             created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
         )");
         $pdo->exec("CREATE TABLE IF NOT EXISTS {$cmdTable} (
@@ -72,6 +73,7 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
             command TEXT NOT NULL,
             admin_only BOOLEAN NOT NULL DEFAULT false,
             timeout_sec INTEGER NULL,
+            sort_order INTEGER NULL,
             created_at TIMESTAMP NOT NULL DEFAULT CURRENT_TIMESTAMP
         )");
         $pdo->exec("CREATE TABLE IF NOT EXISTS {$runTable} (
@@ -110,6 +112,7 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
             auth_type VARCHAR(20) NOT NULL DEFAULT 'key',
             key_path TEXT NULL,
             password TEXT NULL,
+            image_url TEXT NULL,
             created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
         )");
         $pdo->exec("CREATE TABLE IF NOT EXISTS {$cmdTable} (
@@ -118,6 +121,7 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
             command TEXT NOT NULL,
             admin_only INTEGER NOT NULL DEFAULT 0,
             timeout_sec INTEGER NULL,
+            sort_order INTEGER NULL,
             created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP
         )");
         $pdo->exec("CREATE TABLE IF NOT EXISTS {$runTable} (
@@ -150,7 +154,9 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
 
     // Schema migrations for existing tables
     if ($driver === 'pgsql') {
+        $pdo->exec("ALTER TABLE {$hostTable} ADD COLUMN IF NOT EXISTS image_url TEXT NULL");
         $pdo->exec("ALTER TABLE {$cmdTable} ADD COLUMN IF NOT EXISTS timeout_sec INTEGER NULL");
+        $pdo->exec("ALTER TABLE {$cmdTable} ADD COLUMN IF NOT EXISTS sort_order INTEGER NULL");
         $pdo->exec("ALTER TABLE {$runTable} ADD COLUMN IF NOT EXISTS error TEXT NULL");
         $pdo->exec("ALTER TABLE {$runTable} ADD COLUMN IF NOT EXISTS exit_code INTEGER NULL");
         $pdo->exec("ALTER TABLE {$runTable} ADD COLUMN IF NOT EXISTS timeout_sec INTEGER NULL");
@@ -158,6 +164,15 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
         $pdo->exec("ALTER TABLE {$runTable} ADD COLUMN IF NOT EXISTS finished_at TIMESTAMP NULL");
         $pdo->exec("ALTER TABLE {$sessionTable} ADD COLUMN IF NOT EXISTS command_text TEXT NULL");
     } else {
+        $columns = [];
+        $stmt = $pdo->query('PRAGMA table_info(' . $hostTable . ')');
+        foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $col) {
+            $columns[$col['name']] = true;
+        }
+        if (empty($columns['image_url'])) {
+            $pdo->exec("ALTER TABLE {$hostTable} ADD COLUMN image_url TEXT NULL");
+        }
+
         $columns = [];
         $stmt = $pdo->query('PRAGMA table_info(' . $cmdTable . ')');
         foreach ($stmt->fetchAll(PDO::FETCH_ASSOC) as $col) {
@@ -166,6 +181,9 @@ $mm->registerFunction($moduleName, 'ensure_schema', function () use ($moduleName
         if (empty($columns['timeout_sec'])) {
             $pdo->exec("ALTER TABLE {$cmdTable} ADD COLUMN timeout_sec INTEGER NULL");
         }
+        if (empty($columns['sort_order'])) {
+            $pdo->exec("ALTER TABLE {$cmdTable} ADD COLUMN sort_order INTEGER NULL");
+        }
 
         $columns = [];
         $stmt = $pdo->query('PRAGMA table_info(' . $runTable . ')');

modules/pi_control/module.json

@@ -4,10 +4,14 @@
   "description": "Verwaltung und Steuerung von Raspberry Pis (SSH/Commands/Presets).",
   "menu": [
     { "label": "Übersicht", "href": "/module/pi_control" },
-    { "label": "Hosts", "href": "/module/pi_control/hosts" },
-    { "label": "Befehle", "href": "/module/pi_control/commands" },
     { "label": "Konsole", "href": "/module/pi_control/console" },
-    { "label": "Setup", "href": "/modules/setup/pi_control" }
+    {
+      "label": "Settings",
+      "children": [
+        { "label": "Hosts", "href": "/module/pi_control/hosts" },
+        { "label": "Befehle", "href": "/module/pi_control/commands" }
+      ]
+    }
   ],
   "sidebar": {
     "enabled": true,
@@ -15,10 +19,9 @@
     "default": "collapsed",
     "items": [
       { "label": "Übersicht", "href": "/module/pi_control" },
-      { "label": "Hosts", "href": "/module/pi_control/hosts" },
-      { "label": "Befehle", "href": "/module/pi_control/commands" },
       { "label": "Konsole", "href": "/module/pi_control/console" },
-      { "label": "Setup", "href": "/modules/setup/pi_control" }
+      { "label": "Hosts", "href": "/module/pi_control/hosts" },
+      { "label": "Befehle", "href": "/module/pi_control/commands" }
     ]
   },
   "setup": {

modules/pi_control/pages/asset.php

@@ -4,6 +4,8 @@ $base = realpath(__DIR__ . '/../assets');
 $map = [
     'pi_control.css' => $base . '/pi_control.css',
     'console.js' => $base . '/console.js',
+    'hosts.js' => $base . '/hosts.js',
+    'commands.js' => $base . '/commands.js',
 ];
 
 if (!isset($map[$file])) {

modules/pi_control/pages/commands.php

@@ -5,35 +5,79 @@ $table = fn(string $name) => module_fn('pi_control', 'table', $name);
 $assets = app()->assets();
 if ($assets) {
     $assets->addStyle('/module/pi_control/asset?file=pi_control.css');
+    $assets->addScript('/module/pi_control/asset?file=commands.js', 'footer', true);
 }
 
 $notice = null;
 $error = null;
 
+if (isset($_GET['reorder_json'])) {
+    require_admin();
+    $payload = json_decode(file_get_contents('php://input'), true);
+    $order = is_array($payload['order'] ?? null) ? $payload['order'] : [];
+    if ($order) {
+        $stmt = $pdo->prepare('UPDATE ' . $table('commands') . ' SET sort_order = :sort_order WHERE id = :id');
+        $pos = 1;
+        foreach ($order as $id) {
+            $stmt->execute([
+                'sort_order' => $pos++,
+                'id' => (int)$id,
+            ]);
+        }
+    }
+    header('Content-Type: application/json; charset=utf-8');
+    echo json_encode(['ok' => true]);
+    exit;
+}
+
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     require_admin();
+    $deleteId = (int)($_POST['delete_id'] ?? 0);
+    $editId = (int)($_POST['id'] ?? 0);
     $label = trim((string)($_POST['label'] ?? ''));
     $command = trim((string)($_POST['command'] ?? ''));
     $adminOnly = !empty($_POST['admin_only']) ? 1 : 0;
     $timeoutSec = (int)($_POST['timeout_sec'] ?? 0);
 
-    if ($label === '' || $command === '') {
+    if ($deleteId > 0) {
-        $error = 'Bitte Label und Command angeben.';
+        $stmt = $pdo->prepare('DELETE FROM ' . $table('commands') . ' WHERE id = :id');
+        $stmt->execute(['id' => $deleteId]);
+        $notice = 'Befehl gelöscht.';
     } else {
-        $stmt = $pdo->prepare(
+        if ($label === '' || $command === '') {
-            'INSERT INTO ' . $table('commands') . ' (label, command, admin_only, timeout_sec) VALUES (:label, :command, :admin_only, :timeout_sec)'
+            $error = 'Bitte Label und Command angeben.';
-        );
+        } else {
-        $stmt->execute([
+            if ($editId > 0) {
-            'label' => $label,
+                $stmt = $pdo->prepare(
-            'command' => $command,
+                    'UPDATE ' . $table('commands') . ' SET label = :label, command = :command, admin_only = :admin_only, timeout_sec = :timeout_sec WHERE id = :id'
-            'admin_only' => $adminOnly,
+                );
-            'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
+                $stmt->execute([
-        ]);
+                    'id' => $editId,
-        $notice = 'Befehl gespeichert.';
+                    'label' => $label,
+                    'command' => $command,
+                    'admin_only' => $adminOnly,
+                    'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
+                ]);
+                $notice = 'Befehl aktualisiert.';
+            } else {
+                $nextSort = (int)$pdo->query('SELECT COALESCE(MAX(sort_order), 0) + 1 FROM ' . $table('commands'))->fetchColumn();
+                $stmt = $pdo->prepare(
+                    'INSERT INTO ' . $table('commands') . ' (label, command, admin_only, timeout_sec, sort_order) VALUES (:label, :command, :admin_only, :timeout_sec, :sort_order)'
+                );
+                $stmt->execute([
+                    'label' => $label,
+                    'command' => $command,
+                    'admin_only' => $adminOnly,
+                    'timeout_sec' => $timeoutSec > 0 ? $timeoutSec : null,
+                    'sort_order' => $nextSort,
+                ]);
+                $notice = 'Befehl gespeichert.';
+            }
+        }
     }
 }
 
-$commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DESC')->fetchAll(PDO::FETCH_ASSOC);
+$commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY COALESCE(sort_order, id) ASC, id ASC')->fetchAll(PDO::FETCH_ASSOC);
 ?>
 <div class="card">
   <div class="pill">Pi Control</div>
@@ -53,7 +97,8 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DE
   <div class="grid" style="margin-top:1rem;">
     <div class="card" style="background:var(--panel-2);">
       <strong>Neuer Befehl</strong>
-      <form method="post" class="form-grid" style="margin-top:.75rem;">
+      <form method="post" class="form-grid" style="margin-top:.75rem;" data-command-form>
+        <input type="hidden" name="id" value="">
         <input type="text" name="label" placeholder="Label" required>
         <textarea name="command" rows="4" placeholder="Command" required></textarea>
         <input type="number" name="timeout_sec" placeholder="Timeout (Sek., optional)">
@@ -61,39 +106,56 @@ $commands = $pdo->query('SELECT * FROM ' . $table('commands') . ' ORDER BY id DE
           <input type="checkbox" name="admin_only" value="1">
           Nur Admin
         </label>
-        <button class="cta-button" type="submit">Speichern</button>
+        <div style="display:flex; gap:10px; flex-wrap:wrap;">
+          <button class="cta-button" type="submit" data-command-submit>Speichern</button>
+          <button class="nav-link" type="button" data-command-cancel>Zurücksetzen</button>
+        </div>
       </form>
     </div>
 
     <div class="card" style="background:var(--panel-2);">
       <strong>Vorhandene Befehle</strong>
-      <div style="margin-top:.75rem; overflow:auto;">
+      <?php if (!$commands): ?>
-        <table class="table" style="min-width:560px;">
+        <div class="muted" style="margin-top:.75rem;">Keine Befehle vorhanden.</div>
-          <thead>
+      <?php else: ?>
-            <tr>
+        <ul class="command-list" data-command-list style="margin-top:.75rem;">
-              <th>Label</th>
+          <?php foreach ($commands as $c): ?>
-              <th>Command</th>
+            <li class="command-item" draggable="true"
-              <th>Timeout</th>
+                data-command-id="<?= e((string)$c['id']) ?>"
-              <th>Admin</th>
+                data-label="<?= e((string)($c['label'] ?? '')) ?>"
-            </tr>
+                data-command="<?= e((string)($c['command'] ?? '')) ?>"
-          </thead>
+                data-timeout="<?= e((string)($c['timeout_sec'] ?? '')) ?>"
-          <tbody>
+                data-admin="<?= !empty($c['admin_only']) ? '1' : '0' ?>">
-            <?php if (!$commands): ?>
+              <div class="command-drag">⋮⋮</div>
-              <tr><td colspan="4" class="muted">Keine Befehle vorhanden.</td></tr>
+              <div class="command-body">
-            <?php endif; ?>
+                <div class="command-title">
-            <?php foreach ($commands as $c): ?>
+                  <strong><?= e($c['label'] ?? '') ?></strong>
-              <tr>
+                  <?php if (!empty($c['admin_only'])): ?>
-                <td><?= e($c['label'] ?? '') ?></td>
+                    <span class="pill">Admin</span>
-                <td class="muted" style="max-width:360px;">
+                  <?php endif; ?>
+                </div>
+                <div class="muted" style="margin-top:4px;">
                   <code><?= e($c['command'] ?? '') ?></code>
-                </td>
+                </div>
-                <td><?= !empty($c['timeout_sec']) ? e((string)$c['timeout_sec']) . 's' : 'default' ?></td>
+                <div class="muted" style="margin-top:4px;">
-                <td><?= !empty($c['admin_only']) ? 'ja' : 'nein' ?></td>
+                  Timeout: <?= !empty($c['timeout_sec']) ? e((string)$c['timeout_sec']) . 's' : 'default' ?>
-              </tr>
+                </div>
-            <?php endforeach; ?>
+              </div>
-          </tbody>
+              <details class="action-menu">
-        </table>
+                <summary>☰</summary>
-      </div>
+                <div class="action-menu-panel">
+                  <button class="nav-link" type="button" data-command-edit>Bearbeiten</button>
+                  <form method="post" onsubmit="return confirm('Befehl wirklich löschen?')">
+                    <input type="hidden" name="delete_id" value="<?= e((string)$c['id']) ?>">
+                    <button class="nav-link" type="submit">Löschen</button>
+                  </form>
+                </div>
+              </details>
+            </li>
+          <?php endforeach; ?>
+        </ul>
+        <p class="muted" style="margin-top:.5rem;">Reihenfolge per Drag & Drop ändern.</p>
+      <?php endif; ?>
     </div>
   </div>
 </div>

modules/pi_control/pages/hosts.php

@@ -5,6 +5,7 @@ $table = fn(string $name) => module_fn('pi_control', 'table', $name);
 $assets = app()->assets();
 if ($assets) {
     $assets->addStyle('/module/pi_control/asset?file=pi_control.css');
+    $assets->addScript('/module/pi_control/asset?file=hosts.js', 'footer', true);
 }
 
 $notice = null;
@@ -12,6 +13,8 @@ $error = null;
 
 if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     require_admin();
+    $deleteId = (int)($_POST['delete_id'] ?? 0);
+    $editId = (int)($_POST['id'] ?? 0);
     $name = trim((string)($_POST['name'] ?? ''));
     $host = trim((string)($_POST['host'] ?? ''));
     $port = (int)($_POST['port'] ?? 22);
@@ -19,27 +22,137 @@ if ($_SERVER['REQUEST_METHOD'] === 'POST') {
     $authType = trim((string)($_POST['auth_type'] ?? 'key'));
     $keyPath = trim((string)($_POST['key_path'] ?? ''));
     $password = trim((string)($_POST['password'] ?? ''));
+    $imageUrl = trim((string)($_POST['image_url'] ?? ''));
 
-    if ($name === '' || $host === '' || $username === '') {
+    if ($deleteId > 0) {
-        $error = 'Bitte Name, Host und Benutzer angeben.';
+        $stmt = $pdo->prepare('DELETE FROM ' . $table('hosts') . ' WHERE id = :id');
+        $stmt->execute(['id' => $deleteId]);
+        $notice = 'Host gelöscht.';
     } else {
-        $stmt = $pdo->prepare(
+        if ($name === '' || $host === '' || $username === '') {
-            'INSERT INTO ' . $table('hosts') . ' (name, host, port, username, auth_type, key_path, password) VALUES (:name, :host, :port, :username, :auth_type, :key_path, :password)'
+            $error = 'Bitte Name, Host und Benutzer angeben.';
-        );
+        } else {
-        $stmt->execute([
+            if ($editId > 0) {
-            'name' => $name,
+                $stmt = $pdo->prepare('SELECT * FROM ' . $table('hosts') . ' WHERE id = :id LIMIT 1');
-            'host' => $host,
+                $stmt->execute(['id' => $editId]);
-            'port' => $port > 0 ? $port : 22,
+                $existing = $stmt->fetch(PDO::FETCH_ASSOC) ?: [];
-            'username' => $username,
+                $passwordToStore = $password !== '' ? $password : ($existing['password'] ?? null);
-            'auth_type' => $authType !== '' ? $authType : 'key',
+                $stmt = $pdo->prepare(
-            'key_path' => $keyPath !== '' ? $keyPath : null,
+                    'UPDATE ' . $table('hosts') . ' SET name = :name, host = :host, port = :port, username = :username, auth_type = :auth_type, key_path = :key_path, password = :password, image_url = :image_url WHERE id = :id'
-            'password' => $password !== '' ? $password : null,
+                );
-        ]);
+                $stmt->execute([
-        $notice = 'Host gespeichert.';
+                    'id' => $editId,
+                    'name' => $name,
+                    'host' => $host,
+                    'port' => $port > 0 ? $port : 22,
+                    'username' => $username,
+                    'auth_type' => $authType !== '' ? $authType : 'key',
+                    'key_path' => $keyPath !== '' ? $keyPath : null,
+                    'password' => $passwordToStore,
+                    'image_url' => $imageUrl !== '' ? $imageUrl : null,
+                ]);
+                $notice = 'Host aktualisiert.';
+            } else {
+                $stmt = $pdo->prepare(
+                    'INSERT INTO ' . $table('hosts') . ' (name, host, port, username, auth_type, key_path, password, image_url) VALUES (:name, :host, :port, :username, :auth_type, :key_path, :password, :image_url)'
+                );
+                $stmt->execute([
+                    'name' => $name,
+                    'host' => $host,
+                    'port' => $port > 0 ? $port : 22,
+                    'username' => $username,
+                    'auth_type' => $authType !== '' ? $authType : 'key',
+                    'key_path' => $keyPath !== '' ? $keyPath : null,
+                    'password' => $password !== '' ? $password : null,
+                    'image_url' => $imageUrl !== '' ? $imageUrl : null,
+                ]);
+                $notice = 'Host gespeichert.';
+            }
+        }
     }
 }
 
 $hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY id DESC')->fetchAll(PDO::FETCH_ASSOC);
+$settings = modules()->settings('pi_control');
+$strictHostKey = !empty($settings['terminal_strict_hostkey']);
+
+function hostReachable(string $host, int $port): bool
+{
+    $errno = 0;
+    $errstr = '';
+    $fp = @fsockopen($host, $port, $errno, $errstr, 1.2);
+    if ($fp) {
+        fclose($fp);
+        return true;
+    }
+    return false;
+}
+
+function runSshCommand(string $cmd, int $timeoutSec): int
+{
+    $descriptors = [
+        1 => ['pipe', 'w'],
+        2 => ['pipe', 'w'],
+    ];
+    $process = proc_open($cmd, $descriptors, $pipes);
+    if (!is_resource($process)) {
+        return 255;
+    }
+    stream_set_blocking($pipes[1], false);
+    stream_set_blocking($pipes[2], false);
+    $start = time();
+    while (true) {
+        $status = proc_get_status($process);
+        if (!$status['running']) {
+            $code = (int)$status['exitcode'];
+            proc_close($process);
+            return $code;
+        }
+        if (time() - $start > $timeoutSec) {
+            proc_terminate($process, 9);
+            proc_close($process);
+            return 124;
+        }
+        usleep(100000);
+    }
+}
+
+function hostAuthOk(array $host, bool $strictHostKey): bool
+{
+    $hostAddr = (string)($host['host'] ?? '');
+    $user = (string)($host['username'] ?? '');
+    $port = (int)($host['port'] ?? 22);
+    $authType = (string)($host['auth_type'] ?? 'key');
+    $keyPath = (string)($host['key_path'] ?? '');
+    $password = (string)($host['password'] ?? '');
+    if ($hostAddr === '' || $user === '') {
+        return false;
+    }
+
+    $opts = $strictHostKey
+        ? '-o StrictHostKeyChecking=accept-new -o UserKnownHostsFile=/root/.ssh/known_hosts'
+        : '-o StrictHostKeyChecking=no -o UserKnownHostsFile=/dev/null';
+    $opts .= ' -o ConnectTimeout=2 -o NumberOfPasswordPrompts=1';
+
+    $target = escapeshellarg($user . '@' . $hostAddr);
+    $cmd = 'ssh ' . $opts . ' -p ' . (int)$port . ' ';
+    if ($authType === 'key' && $keyPath !== '') {
+        $cmd .= '-i ' . escapeshellarg($keyPath) . ' -o BatchMode=yes ';
+    } elseif ($authType === 'key') {
+        $cmd .= '-o BatchMode=yes ';
+    }
+    $cmd .= $target . ' -- true';
+
+    if ($authType === 'pass') {
+        if ($password === '') {
+            return false;
+        }
+        $cmd = 'sshpass -p ' . escapeshellarg($password) . ' ' . $cmd;
+    }
+
+    $exitCode = runSshCommand($cmd, 3);
+    return $exitCode === 0;
+}
 ?>
 <div class="card">
   <div class="pill">Pi Control</div>
@@ -59,7 +172,8 @@ $hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY id DESC')->
   <div class="grid" style="margin-top:1rem;">
     <div class="card form-card" style="background:var(--panel-2);">
       <strong>Neuer Host</strong>
-      <form method="post" class="form-grid" style="margin-top:.75rem;">
+      <form method="post" class="form-grid" style="margin-top:.75rem;" data-host-form>
+        <input type="hidden" name="id" value="">
         <label class="form-field">
           <span class="muted">Name</span>
           <input type="text" name="name" placeholder="z.B. Wohnzimmer-Pi" required title="Eindeutiger Anzeigename für diesen Pi.">
@@ -91,39 +205,66 @@ $hosts = $pdo->query('SELECT * FROM ' . $table('hosts') . ' ORDER BY id DESC')->
           <span class="muted">Passwort (optional)</span>
           <input type="password" name="password" placeholder="SSH-Passwort" title="Nur nutzen, wenn Auth-Typ = pass.">
         </label>
-        <button class="cta-button" type="submit">Speichern</button>
+        <label class="form-field">
+          <span class="muted">Bild-URL (optional)</span>
+          <input type="text" name="image_url" placeholder="https://..." title="Optionales Bild für die Host-Karte.">
+        </label>
+        <div style="display:flex; gap:10px; flex-wrap:wrap;">
+          <button class="cta-button" type="submit" data-host-submit>Speichern</button>
+          <button class="nav-link" type="button" data-host-cancel>Zurücksetzen</button>
+        </div>
       </form>
     </div>
 
     <div class="card form-card" style="background:var(--panel-2);">
       <strong>Registrierte Hosts</strong>
-      <div style="margin-top:.75rem; overflow:auto;">
+      <?php if (!$hosts): ?>
-        <table class="table" style="min-width:560px;">
+        <div class="muted" style="margin-top:.75rem;">Keine Hosts vorhanden.</div>
-          <thead>
+      <?php else: ?>
-            <tr>
+        <div class="host-grid" style="margin-top:.75rem;">
-              <th>Name</th>
+          <?php foreach ($hosts as $h): ?>
-              <th>Host</th>
+            <?php
-              <th>User</th>
+              $portVal = (int)($h['port'] ?? 22);
-              <th>Port</th>
+              $reachable = hostReachable((string)($h['host'] ?? ''), $portVal);
-              <th>Auth</th>
+              $authOk = $reachable ? hostAuthOk($h, $strictHostKey) : false;
-            </tr>
+              $statusClass = !$reachable ? 'status-down' : ($authOk ? 'status-ok' : 'status-auth');
-          </thead>
+            ?>
-          <tbody>
+            <div class="host-card"
-            <?php if (!$hosts): ?>
+                 data-host-id="<?= e((string)$h['id']) ?>"
-              <tr><td colspan="5" class="muted">Keine Hosts vorhanden.</td></tr>
+                 data-name="<?= e((string)($h['name'] ?? '')) ?>"
-            <?php endif; ?>
+                 data-host="<?= e((string)($h['host'] ?? '')) ?>"
-            <?php foreach ($hosts as $h): ?>
+                 data-port="<?= e((string)($h['port'] ?? 22)) ?>"
-              <tr>
+                 data-username="<?= e((string)($h['username'] ?? '')) ?>"
-                <td><?= e($h['name'] ?? '') ?></td>
+                 data-auth="<?= e((string)($h['auth_type'] ?? 'key')) ?>"
-                <td><?= e($h['host'] ?? '') ?></td>
+                 data-key-path="<?= e((string)($h['key_path'] ?? '')) ?>"
-                <td><?= e($h['username'] ?? '') ?></td>
+                 data-image-url="<?= e((string)($h['image_url'] ?? '')) ?>">
-                <td><?= e((string)($h['port'] ?? 22)) ?></td>
+              <div class="host-card-image"<?= !empty($h['image_url']) ? ' style="background-image:url(' . e((string)$h['image_url']) . ')"' : '' ?>>
-                <td><?= e($h['auth_type'] ?? '') ?></td>
+                <div class="host-card-overlay"></div>
-              </tr>
+              </div>
-            <?php endforeach; ?>
+              <div class="host-card-body">
-          </tbody>
+                <div class="host-card-header">
-        </table>
+                  <div class="host-card-title">
-      </div>
+                    <span class="status-dot <?= $statusClass ?>"></span>
+                    <strong><?= e((string)($h['name'] ?? '')) ?></strong>
+                  </div>
+                  <details class="action-menu">
+                    <summary>☰</summary>
+                    <div class="action-menu-panel">
+                      <button class="nav-link" type="button" data-host-edit>Bearbeiten</button>
+                      <form method="post" onsubmit="return confirm('Host wirklich löschen?')">
+                        <input type="hidden" name="delete_id" value="<?= e((string)$h['id']) ?>">
+                        <button class="nav-link" type="submit">Löschen</button>
+                      </form>
+                    </div>
+                  </details>
+                </div>
+                <div class="muted"><?= e((string)($h['host'] ?? '')) ?>:<?= e((string)($portVal ?: 22)) ?></div>
+                <div class="muted"><?= e((string)($h['username'] ?? '')) ?> · <?= e((string)($h['auth_type'] ?? '')) ?></div>
+              </div>
+            </div>
+          <?php endforeach; ?>
+        </div>
+      <?php endif; ?>
     </div>
   </div>
 </div>

partials/structure/layout_start.php

@@ -71,9 +71,37 @@ $sidebarItems = $moduleSidebar['items'] ?? [];
   <?php if ($moduleMenu): ?>
     <div class="module-subnav card">
       <?php foreach ($moduleMenu as $entry): ?>
-        <a class="nav-link" href="<?= e($entry['href'] ?? '#') ?>">
+        <?php
-          <?= e($entry['label'] ?? 'Link') ?>
+          $href = (string)($entry['href'] ?? '');
-        </a>
+          $label = (string)($entry['label'] ?? 'Link');
+          $children = is_array($entry['children'] ?? null) ? $entry['children'] : [];
+          $isSetup = $href !== '' && str_starts_with($href, '/modules/setup/');
+          if ($isSetup) {
+              continue;
+          }
+        ?>
+        <?php if ($children): ?>
+          <div class="nav-dropdown">
+            <button class="nav-link nav-link-button" type="button"><?= e($label) ?> ▾</button>
+            <div class="nav-dropdown-menu">
+              <?php foreach ($children as $child): ?>
+                <?php
+                  $childHref = (string)($child['href'] ?? '');
+                  if ($childHref !== '' && str_starts_with($childHref, '/modules/setup/')) {
+                      continue;
+                  }
+                ?>
+                <a class="nav-link" href="<?= e($childHref ?: '#') ?>">
+                  <?= e((string)($child['label'] ?? 'Link')) ?>
+                </a>
+              <?php endforeach; ?>
+            </div>
+          </div>
+        <?php else: ?>
+          <a class="nav-link" href="<?= e($href ?: '#') ?>">
+            <?= e($label) ?>
+          </a>
+        <?php endif; ?>
       <?php endforeach; ?>
     </div>
   <?php endif; ?>
@@ -90,7 +118,13 @@ $sidebarItems = $moduleSidebar['items'] ?? [];
         <?php endif; ?>
         <div class="sidebar-items">
           <?php foreach ($sidebarItems as $item): ?>
-            <a class="nav-link" href="<?= e($item['href'] ?? '#') ?>"><?= e($item['label'] ?? 'Item') ?></a>
+            <?php
+              $itemHref = (string)($item['href'] ?? '');
+              if ($itemHref !== '' && str_starts_with($itemHref, '/modules/setup/')) {
+                  continue;
+              }
+            ?>
+            <a class="nav-link" href="<?= e($itemHref ?: '#') ?>"><?= e($item['label'] ?? 'Item') ?></a>
           <?php endforeach; ?>
         </div>
       </aside>

public/assets/css/app.css

@@ -136,7 +136,8 @@ body {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
-  background-color: #ffffff !important;
+  background-color: var(--panel) !important;
+  background: var(--panel) !important;
   background-image: none !important;
   opacity: 1 !important;
   backdrop-filter: none !important;
@@ -147,6 +148,35 @@ body {
 }
 .module-subnav.card { background-color: var(--panel); background-image: none; }
 
+.nav-dropdown {
+  position: relative;
+  display: inline-flex;
+}
+.nav-link-button {
+  border: 1px solid transparent;
+  background: transparent;
+  cursor: pointer;
+}
+.nav-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 6px);
+  left: 0;
+  min-width: 180px;
+  background: var(--panel);
+  border: 1px solid var(--line);
+  border-radius: 12px;
+  box-shadow: var(--shadow);
+  padding: 6px;
+  display: none;
+  z-index: 10;
+}
+.nav-dropdown:hover .nav-dropdown-menu,
+.nav-dropdown:focus-within .nav-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
 .layout-body {
   display: grid;
   grid-template-columns: 1fr;