console

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;