Phase 2: device registry, dashboard cards, manual lock/unlock, audit

- Device registry: add/edit name, child and platform, persisted in devices.
- Stable per-device topic derived from name + id, unchanged by renames.
- Desired state persisted in state; timed locks expire and are audited.
- Dashboard cards: name, child, platform, status dot, state and time left.
- Manual lock/unlock forms with CSRF; every change appends to audit (FR-15).
- Append-only activity list on the dashboard. No hard deletes (rule 10).
- Store and handler tests; version bumped to 0.2.0-phase2.

Co-Authored-By: Paperclip <noreply@paperclip.ing>

internal/web/static/app.css

@@ -297,6 +297,173 @@ code {
 .login-foot { color: rgba(255, 255, 255, 0.6); }
 .app-foot__sep { opacity: 0.5; }
 
+/* ---------- Flash messages ---------- */
+
+.flash {
+  margin: 0;
+  padding: var(--space-sm) var(--space-md);
+  border-radius: var(--rounded-md);
+  border: 1px solid var(--hairline);
+  border-left-width: 3px;
+  font: var(--type-body-sm);
+}
+.flash--ok {
+  color: var(--sticker-green);
+  border-left-color: var(--sticker-green);
+  background: color-mix(in srgb, var(--sticker-green) 8%, var(--surface));
+}
+.flash--error {
+  color: var(--sticker-red);
+  border-left-color: var(--sticker-red);
+  background: color-mix(in srgb, var(--sticker-red) 8%, var(--surface));
+}
+
+/* ---------- Device cards ---------- */
+
+.section__actions { display: flex; align-items: center; gap: var(--space-sm); }
+
+a.button-primary { text-decoration: none; }
+a.button-primary:hover { text-decoration: none; }
+
+.device-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: var(--space-md);
+}
+
+.device-card {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-lg);
+  padding: var(--space-lg);
+  display: grid;
+  gap: var(--space-sm);
+  align-content: start;
+}
+.device-card__head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-sm);
+}
+.device-card__id { min-width: 0; }
+.device-card__name { font: var(--type-title); }
+.device-card__meta { margin: 2px 0 0; color: var(--ink-muted); font: var(--type-body-sm); }
+.device-card__state { margin: 0; color: var(--ink); font: var(--type-body-md); }
+.device-card__until { margin: 0; color: var(--ink-muted); font: var(--type-caption); }
+
+.device-card__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--space-xs);
+  margin-top: var(--space-xs);
+}
+.inline-form { display: flex; align-items: center; gap: var(--space-xs); margin: 0; }
+.inline-form .button-primary,
+.inline-form .button-utility { padding: 10px 16px; }
+
+.select-input {
+  min-height: 44px;
+  padding: 10px 12px;
+  font: var(--type-body-sm);
+  color: var(--ink);
+  background: var(--surface);
+  border: 1px solid #dddddd;
+  border-radius: var(--rounded-md);
+}
+[data-theme="dark"] .select-input { border-color: var(--hairline); }
+.select-input:focus {
+  outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 25%, transparent);
+}
+
+.device-card__foot {
+  margin: var(--space-xs) 0 0;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: var(--ink-faint);
+  font: var(--type-caption);
+}
+.device-card__presence { display: inline-flex; align-items: center; gap: 6px; }
+.device-card__topic { margin: 0; color: var(--ink-faint); font: var(--type-caption); word-break: break-all; }
+
+/* ---------- Audit list ---------- */
+
+.audit-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-lg);
+  overflow: hidden;
+}
+.audit-item {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: var(--space-xs) var(--space-sm);
+  padding: var(--space-sm) var(--space-md);
+  border-top: 1px solid var(--hairline);
+  font: var(--type-body-sm);
+}
+.audit-item:first-child { border-top: 0; }
+.audit-item--empty { color: var(--ink-muted); font-style: italic; }
+.audit-item__badge {
+  padding: 2px 8px;
+  border-radius: var(--rounded-full);
+  background: var(--surface-2);
+  color: var(--ink-muted);
+  font: var(--type-eyebrow);
+  white-space: nowrap;
+}
+.audit-item__body { color: var(--ink-secondary); }
+.audit-item__detail { color: var(--ink-muted); }
+.audit-item__meta { margin-left: auto; color: var(--ink-faint); font: var(--type-caption); white-space: nowrap; }
+
+/* ---------- Forms / narrow pages ---------- */
+
+.container--narrow { max-width: 640px; }
+.page-head__eyebrow { margin: 0; font: var(--type-body-sm); }
+.page-head__eyebrow a { color: var(--ink-muted); }
+
+.card-panel {
+  background: var(--surface);
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-lg);
+  box-shadow: var(--shadow-level-1);
+  padding: var(--space-xl);
+}
+
+.stack-form { display: grid; gap: var(--space-lg); }
+.fieldset, fieldset.field { border: 0; padding: 0; margin: 0; }
+
+.radio-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
+.radio-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-xs);
+  min-height: 44px;
+  padding: 8px 16px;
+  border: 1px solid var(--hairline);
+  border-radius: var(--rounded-full);
+  background: var(--surface);
+  font: var(--type-body-md);
+  color: var(--ink);
+  cursor: pointer;
+}
+.radio-chip:has(input:checked) {
+  border-color: var(--primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 20%, transparent);
+}
+.radio-chip input { accent-color: var(--primary); width: 18px; height: 18px; }
+
+.form-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
+a.button-utility { text-decoration: none; }
+
 /* ---------- Responsive ---------- */
 
 @media (max-width: 760px) {
@@ -305,4 +472,6 @@ code {
   .container { padding: var(--space-lg) var(--space-md); gap: var(--space-xl); }
   .nav-bar { padding: var(--space-sm) var(--space-md); }
   .nav-bar__user { display: none; }
+  .section__head { flex-wrap: wrap; }
+  .audit-item__meta { margin-left: 0; width: 100%; }
 }