feat(homecore iter 3): DELETE /api/states/<id> + confirm modal in UI

CRUD increment 3/6. Full delete path lands end-to-end.

Backend (homecore-api):
  rest.rs +18 LOC — new `delete_state` handler. Idempotent (matches HA's
    removal semantics): returns 204 No Content whether the entity existed
    or not. 4xx only for malformed entity_id or auth failure.
  app.rs +6 LOC — adds `.delete(rest::delete_state)` to the
    /api/states/:entity_id route alongside existing GET + POST.

Backend curl smoke:
  POST /api/states/sensor.test_delete         201
  DELETE /api/states/sensor.test_delete       204
  GET /api/states/sensor.test_delete          404

Frontend:
  components/StateCard.ts +25 LOC — small `×` delete button in the
    card's top-right corner. opacity 0 by default, fades in on hover
    or keyboard focus. dispatches `hc-state-card-delete` (NOT
    `hc-state-card-click`) with stopPropagation so the card's own
    click-to-edit handler doesn't also fire.

  pages/Dashboard.ts +45 LOC — deletingState (StateView | null), a
    confirm modal that names the entity_id in the body, Cancel /
    Delete buttons in the footer (Delete styled in muted red),
    `_confirmDelete()` dispatches DELETE with bearer, toast on
    success, grid refresh.

Browser-verified end-to-end on real homecore-server :8123:
  - Hover card → × button visible
  - Click × → DELETE confirm modal (NOT edit modal — stopPropagation works)
  - Modal names entity_id in code block
  - Cancel: entity preserved, modal closes
  - Delete: backend GET-after-DELETE returns 404, grid card vanishes,
    toast "Deleted sensor.delete_target"
  - 0 unexpected console errors (1 expected 404 from verification fetch)

Co-Authored-By: claude-flow <ruv@ruv.net>

frontend/src/components/EntityForm.ts

@@ -0,0 +1,143 @@
+/**
+ * `<hc-entity-form>` — create / edit form for a single entity.
+ *
+ * Props:
+ *   .entityId  — pre-populated when editing; empty for create
+ *   .state     — pre-populated state value
+ *   .attributes — pre-populated JSON object
+ *   .editing   — true to lock entity_id (HA wire-compat doesn't rename)
+ *
+ * Emits:
+ *   hc-entity-submit  detail: { entity_id, state, attributes }
+ *   hc-entity-cancel
+ *
+ * Validation (client-side; backend validates again):
+ *   - entity_id matches /^[a-z][a-z0-9_]*\.[a-z][a-z0-9_]*$/
+ *   - state is non-empty
+ *   - attributes parses as a JSON object (not array, not scalar)
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+
+const ENTITY_ID_RE = /^[a-z][a-z0-9_]*\.[a-z][a-z0-9_]*$/;
+
+@customElement('hc-entity-form')
+export class EntityForm extends LitElement {
+    @property({ type: String }) entityId = '';
+    @property({ type: String }) state = '';
+    @property({ type: Object }) entityAttrs: Record<string, unknown> = {};
+    @property({ type: Boolean }) editing = false;
+
+    @state() private _attrs = '';
+    @state() private _err: string | null = null;
+
+    static styles = css`
+        :host { display: block; font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); color: var(--hc-text, #e6eaee); }
+        label { display: block; margin: 12px 0 4px; font-size: 12px; color: var(--hc-text-muted, #7b899d); }
+        input, textarea {
+            width: 100%; box-sizing: border-box;
+            padding: 8px 10px; background: hsl(220 25% 10%);
+            border: 1px solid var(--hc-border, #2a323e); border-radius: 6px;
+            color: var(--hc-text, #e6eaee);
+            font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
+            font-size: 13px;
+        }
+        input:focus, textarea:focus { outline: 2px solid hsl(185 80% 50% / 0.5); border-color: var(--hc-primary, #19d4e5); }
+        input[disabled] { opacity: 0.5; cursor: not-allowed; }
+        textarea { min-height: 90px; resize: vertical; }
+        .hint { font-size: 11px; color: var(--hc-text-muted, #7b899d); margin-top: 4px; }
+        .err { margin-top: 10px; padding: 10px; border: 1px solid #b35a5a; border-radius: 6px; background: hsl(0 35% 12%); color: #f0c0c0; font-size: 12px; }
+        button {
+            padding: 8px 16px;
+            border: 1px solid var(--hc-border, #2a323e);
+            border-radius: 6px;
+            background: hsl(220 25% 14%);
+            color: var(--hc-text, #e6eaee);
+            font-size: 13px;
+            font-weight: 500;
+            cursor: pointer;
+            font-family: inherit;
+        }
+        button.primary { background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border-color: var(--hc-primary, #19d4e5); font-weight: 600; }
+        button:hover { background: hsl(220 20% 18%); }
+        button.primary:hover { background: hsl(185 80% 55%); }
+    `;
+
+    protected updated(changed: Map<string, unknown>): void {
+        if (changed.has('entityAttrs')) {
+            this._attrs = JSON.stringify(this.entityAttrs, null, 2);
+        }
+    }
+
+    /** Public — call from host to trigger validation + emit submit event. */
+    public requestSubmit(): void { this._submit(); }
+
+    /** Public — call from host to dispatch cancel. */
+    public requestCancel(): void { this._cancel(); }
+
+    private _submit() {
+        const id = this.entityId.trim();
+        if (!ENTITY_ID_RE.test(id)) {
+            this._err = `entity_id must match domain.snake_case (got "${id}")`;
+            return;
+        }
+        const stateVal = this.state.trim();
+        if (!stateVal) {
+            this._err = 'state must not be empty';
+            return;
+        }
+        let attrs: Record<string, unknown> = {};
+        if (this._attrs.trim()) {
+            try {
+                const parsed = JSON.parse(this._attrs);
+                if (typeof parsed !== 'object' || Array.isArray(parsed) || parsed === null) {
+                    this._err = 'attributes must be a JSON object (not array, not scalar)';
+                    return;
+                }
+                attrs = parsed as Record<string, unknown>;
+            } catch (e) {
+                this._err = `attributes JSON parse failed: ${e instanceof Error ? e.message : String(e)}`;
+                return;
+            }
+        }
+        this._err = null;
+        this.dispatchEvent(new CustomEvent('hc-entity-submit', {
+            detail: { entity_id: id, state: stateVal, attributes: attrs },
+            bubbles: true, composed: true,
+        }));
+    }
+
+    private _cancel() {
+        this._err = null;
+        this.dispatchEvent(new CustomEvent('hc-entity-cancel', { bubbles: true, composed: true }));
+    }
+
+    render() {
+        return html`
+            <form @submit=${(e: Event) => { e.preventDefault(); this._submit(); }}>
+                <label for="eid">entity_id</label>
+                <input id="eid" .value=${this.entityId}
+                       ?disabled=${this.editing}
+                       @input=${(e: Event) => (this.entityId = (e.target as HTMLInputElement).value)}
+                       placeholder="light.kitchen_ceiling" />
+                <div class="hint">format: <code>domain.snake_case</code> — domain like sensor / light / switch / binary_sensor</div>
+
+                <label for="state">state</label>
+                <input id="state" .value=${this.state}
+                       @input=${(e: Event) => (this.state = (e.target as HTMLInputElement).value)}
+                       placeholder="on / off / 42 / 14.5 / detected" />
+
+                <label for="attrs">attributes (JSON object)</label>
+                <textarea id="attrs" .value=${this._attrs}
+                          @input=${(e: Event) => (this._attrs = (e.target as HTMLTextAreaElement).value)}
+                          placeholder='{ "friendly_name": "Kitchen Ceiling", "brightness": 230 }'></textarea>
+                <div class="hint">optional; leave blank for <code>{}</code></div>
+
+                ${this._err ? html`<div class="err">${this._err}</div>` : ''}
+            </form>
+        `;
+    }
+}
+
+declare global { interface HTMLElementTagNameMap { 'hc-entity-form': EntityForm; } }

frontend/src/components/Modal.ts

@@ -0,0 +1,112 @@
+/**
+ * `<hc-modal>` — minimal accessible overlay modal.
+ *
+ * Open / close by setting the `open` property. Closes on Escape and
+ * on backdrop click. Content goes in the default slot; an optional
+ * named "footer" slot is rendered below the content.
+ *
+ * Emits `hc-modal-close` on close so the host can clean up.
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+@customElement('hc-modal')
+export class Modal extends LitElement {
+    @property({ type: Boolean, reflect: true }) open = false;
+    @property({ type: String }) heading = '';
+
+    static styles = css`
+        :host { display: contents; }
+        .backdrop {
+            position: fixed;
+            inset: 0;
+            background: hsl(220 25% 4% / 0.65);
+            backdrop-filter: blur(4px);
+            -webkit-backdrop-filter: blur(4px);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 100;
+            padding: 16px;
+        }
+        .dialog {
+            background: var(--hc-bg, #0b0e13);
+            border: 1px solid var(--hc-border, #2a323e);
+            border-radius: 10px;
+            box-shadow: 0 24px 64px hsl(220 25% 2% / 0.6);
+            width: min(560px, calc(100vw - 32px));
+            max-height: calc(100vh - 32px);
+            display: flex;
+            flex-direction: column;
+            overflow: hidden;
+            font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
+            color: var(--hc-text, #e6eaee);
+        }
+        header {
+            padding: 14px 18px;
+            border-bottom: 1px solid var(--hc-border, #2a323e);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            font-weight: 600;
+            font-size: 15px;
+        }
+        button.close {
+            background: transparent;
+            border: none;
+            color: var(--hc-text-muted, #7b899d);
+            cursor: pointer;
+            font-size: 18px;
+            line-height: 1;
+            padding: 4px 8px;
+            border-radius: 4px;
+        }
+        button.close:hover { background: hsl(220 20% 14%); color: var(--hc-text, #e6eaee); }
+        .body { padding: 16px 18px; overflow-y: auto; }
+        .footer {
+            padding: 12px 18px;
+            border-top: 1px solid var(--hc-border, #2a323e);
+            display: flex;
+            justify-content: flex-end;
+            gap: 8px;
+        }
+    `;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        this._onKey = this._onKey.bind(this);
+        window.addEventListener('keydown', this._onKey);
+    }
+    disconnectedCallback(): void {
+        window.removeEventListener('keydown', this._onKey);
+        super.disconnectedCallback();
+    }
+
+    private _onKey(e: KeyboardEvent) {
+        if (this.open && e.key === 'Escape') this._close();
+    }
+
+    private _close() {
+        this.open = false;
+        this.dispatchEvent(new CustomEvent('hc-modal-close', { bubbles: true, composed: true }));
+    }
+
+    render() {
+        if (!this.open) return html``;
+        return html`
+            <div class="backdrop" @click=${(e: Event) => { if (e.target === e.currentTarget) this._close(); }}>
+                <div class="dialog" role="dialog" aria-modal="true" aria-label=${this.heading}>
+                    <header>
+                        <span>${this.heading}</span>
+                        <button class="close" @click=${this._close} aria-label="Close">×</button>
+                    </header>
+                    <div class="body"><slot></slot></div>
+                    <div class="footer"><slot name="footer"></slot></div>
+                </div>
+            </div>
+        `;
+    }
+}
+
+declare global { interface HTMLElementTagNameMap { 'hc-modal': Modal; } }

frontend/src/components/StateCard.ts

@@ -9,6 +9,12 @@ import type { StateView } from '../api/types.js';
 
 @customElement('hc-state-card')
 export class StateCard extends LitElement {
+  // `delegatesFocus` lets Tab key traversal from the light DOM reach the
+  // role="button" element inside this card's shadow root. Without it the
+  // user can only activate the card via mouse click or by JS-focusing the
+  // inner div; with it, the natural tab sequence flows through every card.
+  static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+
   @property({ type: Object }) state!: StateView;
   /** Optional: icon SVG string (use `iconSvg()` from lucide.ts) */
   @property({ type: String }) iconSvg?: string;
@@ -32,6 +38,28 @@ export class StateCard extends LitElement {
       border-color: hsl(185 80% 50% / 0.4);
     }
 
+    .card { cursor: pointer; position: relative; }
+    .card:focus-visible { outline: 2px solid var(--hc-primary, #19d4e5); outline-offset: 2px; }
+    button.delete {
+      position: absolute;
+      top: 0.5rem; right: 0.5rem;
+      width: 24px; height: 24px;
+      border: none;
+      border-radius: 4px;
+      background: transparent;
+      color: var(--hc-text-muted, #7b899d);
+      cursor: pointer;
+      font-size: 16px;
+      line-height: 1;
+      padding: 0;
+      opacity: 0;
+      transition: opacity 150ms, background 150ms, color 150ms;
+    }
+    .card:hover button.delete,
+    .card:focus-within button.delete { opacity: 1; }
+    button.delete:hover { background: hsl(0 50% 30%); color: hsl(0 80% 88%); }
+    button.delete:focus-visible { opacity: 1; outline: 2px solid hsl(0 60% 55%); }
+
     .header {
       display: flex;
       align-items: flex-start;
@@ -108,7 +136,15 @@ export class StateCard extends LitElement {
     const badge = this.badgeClass(state);
 
     return html`
-      <div class="card" part="card">
+      <div class="card" part="card" role="button" tabindex="0"
+           @click=${this._onClick}
+           @keydown=${(e: KeyboardEvent) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this._onClick(); } }}
+           aria-label="Edit ${entity_id}">
+        <button class="delete" type="button"
+                @click=${this._onDelete}
+                @keydown=${(e: KeyboardEvent) => { e.stopPropagation(); }}
+                aria-label="Delete ${entity_id}"
+                title="Delete ${entity_id}">×</button>
         <div class="header">
           ${this.iconSvg
             ? html`<div class="icon-wrap" .innerHTML=${this.iconSvg}></div>`
@@ -123,6 +159,21 @@ export class StateCard extends LitElement {
       </div>
     `;
   }
+
+  private _onClick() {
+    this.dispatchEvent(new CustomEvent('hc-state-card-click', {
+      detail: { state: this.state }, bubbles: true, composed: true,
+    }));
+  }
+
+  private _onDelete(e: Event) {
+    // Stop propagation so the parent card's click handler (which would
+    // open the edit modal) doesn't also fire.
+    e.stopPropagation();
+    this.dispatchEvent(new CustomEvent('hc-state-card-delete', {
+      detail: { state: this.state }, bubbles: true, composed: true,
+    }));
+  }
 }
 
 declare global {

frontend/src/main.ts

@@ -9,3 +9,34 @@ import './styles/base.css';
 // Register custom elements
 import './components/AppShell.js';
 import './components/StateCard.js';
+import './pages/Dashboard.js';
+import './pages/States.js';
+import './pages/Services.js';
+import './pages/Settings.js';
+
+// Tiny router: the AppShell dispatches `hc-navigate` on every nav
+// click. We swap whichever page element is sitting in its <slot>
+// based on the new active id. Default page on first paint = dashboard.
+const NAV_TO_TAG: Record<string, string> = {
+    dashboard: 'hc-dashboard',
+    states: 'hc-states',
+    services: 'hc-services',
+    settings: 'hc-settings',
+};
+
+function mountPage(shell: Element, tag: string): void {
+    // Remove any existing page (everything that isn't itself the shell).
+    Array.from(shell.children).forEach((c) => c.remove());
+    shell.appendChild(document.createElement(tag));
+}
+
+window.addEventListener('DOMContentLoaded', () => {
+    const shell = document.querySelector('hc-app-shell');
+    if (!shell) return;
+    mountPage(shell, 'hc-dashboard');
+    shell.addEventListener('hc-navigate', (ev) => {
+        const id = (ev as CustomEvent<{ id: string }>).detail?.id;
+        const tag = id ? NAV_TO_TAG[id] : undefined;
+        if (tag) mountPage(shell, tag);
+    });
+});

frontend/src/pages/Dashboard.ts

@@ -0,0 +1,273 @@
+/**
+ * Dashboard page — fetches HOMECORE state + config from the backend and
+ * populates the `<hc-app-shell>` slot with a grid of `<hc-state-card>`.
+ *
+ * Auth: reads bearer from `localStorage["homecore.token"]`, the
+ * `?token=` query string, or `HOMECORE_TOKEN` `<meta>` tag — in that
+ * order. Falls back to the literal "dev-token" in DEV-mode backends
+ * (any non-empty bearer is accepted when HOMECORE_TOKENS is unset).
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, state, query } from 'lit/decorators.js';
+
+import { HomecoreClient } from '../api/client.js';
+import type { ApiConfig, StateView } from '../api/types.js';
+import '../components/Modal.js';
+import '../components/EntityForm.js';
+import type { EntityForm } from '../components/EntityForm.js';
+
+function resolveToken(): string {
+    if (typeof localStorage !== 'undefined') {
+        const stored = localStorage.getItem('homecore.token');
+        if (stored) return stored;
+    }
+    const url = new URL(window.location.href);
+    const qs = url.searchParams.get('token');
+    if (qs) return qs;
+    const meta = document.querySelector<HTMLMetaElement>('meta[name="homecore-token"]');
+    if (meta?.content) return meta.content;
+    return 'dev-token';
+}
+
+@customElement('hc-dashboard')
+export class Dashboard extends LitElement {
+    static styles = css`
+        :host {
+            display: block;
+            padding: 24px;
+            color: var(--hc-fg, #e6e9ec);
+            font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
+        }
+        .meta {
+            display: flex;
+            gap: 16px;
+            flex-wrap: wrap;
+            color: var(--hc-fg-dim, #8a93a0);
+            font-size: 14px;
+            margin-bottom: 16px;
+        }
+        .meta strong { color: var(--hc-fg, #e6e9ec); }
+        .grid {
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+            gap: 16px;
+        }
+        .empty,
+        .err {
+            padding: 24px;
+            border: 1px dashed var(--hc-border, #2a323e);
+            border-radius: 8px;
+            text-align: center;
+            color: var(--hc-fg-dim, #8a93a0);
+        }
+        .err {
+            border-color: #b35a5a;
+            color: #f0c0c0;
+            text-align: left;
+            font-family: var(--hc-font-mono, 'JetBrains Mono', monospace);
+            font-size: 13px;
+            white-space: pre-wrap;
+        }
+        .toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; }
+        .toolbar .grow { flex: 1; }
+        button.add {
+            padding: 7px 14px;
+            background: var(--hc-primary, #19d4e5);
+            color: var(--hc-primary-fg, #0b0e13);
+            border: none; border-radius: 6px;
+            font-size: 13px; font-weight: 600;
+            cursor: pointer;
+            font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
+        }
+        button.add:hover { background: hsl(185 80% 55%); }
+        button.btn {
+            padding: 7px 14px;
+            background: hsl(220 25% 14%);
+            color: var(--hc-text, #e6eaee);
+            border: 1px solid var(--hc-border, #2a323e);
+            border-radius: 6px;
+            font-size: 13px;
+            cursor: pointer;
+            font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif);
+        }
+        button.btn:hover { background: hsl(220 20% 18%); }
+        button.primary { background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border-color: var(--hc-primary, #19d4e5); font-weight: 600; }
+        .toast { padding: 8px 12px; background: hsl(165 60% 16%); color: hsl(165 60% 80%); border-radius: 6px; font-size: 12px; margin-bottom: 12px; }
+    `;
+
+    @state() private states: StateView[] = [];
+    @state() private config: ApiConfig | null = null;
+    @state() private error: string | null = null;
+    @state() private loading = true;
+    @state() private modalOpen = false;
+    @state() private submitToast: string | null = null;
+    @state() private editingState: StateView | null = null;  // null = create mode
+    @state() private deletingState: StateView | null = null; // null = no confirm
+
+    @query('hc-entity-form') private _form?: EntityForm;
+
+    private client = new HomecoreClient({ token: resolveToken() });
+    private pollTimer: number | undefined;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void this.refresh();
+        this.pollTimer = window.setInterval(() => void this.refresh(), 5000);
+    }
+
+    disconnectedCallback(): void {
+        if (this.pollTimer !== undefined) window.clearInterval(this.pollTimer);
+        super.disconnectedCallback();
+    }
+
+    private async refresh(): Promise<void> {
+        try {
+            const [cfg, states] = await Promise.all([
+                this.client.getConfig(),
+                this.client.getStates(),
+            ]);
+            this.config = cfg;
+            this.states = states;
+            this.error = null;
+        } catch (e) {
+            this.error = e instanceof Error ? e.message : String(e);
+        } finally {
+            this.loading = false;
+        }
+    }
+
+    private _openCreate() {
+        this.editingState = null;
+        this.modalOpen = true;
+    }
+
+    private _openEdit(e: CustomEvent<{ state: StateView }>) {
+        this.editingState = e.detail.state;
+        this.modalOpen = true;
+    }
+
+    private _openDeleteConfirm(e: CustomEvent<{ state: StateView }>) {
+        this.deletingState = e.detail.state;
+    }
+
+    private async _confirmDelete() {
+        const target = this.deletingState;
+        if (!target) return;
+        try {
+            const resp = await fetch(`/api/states/${encodeURIComponent(target.entity_id)}`, {
+                method: 'DELETE',
+                headers: { 'Authorization': `Bearer ${resolveToken()}` },
+            });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);
+            this.deletingState = null;
+            this.submitToast = `Deleted ${target.entity_id}`;
+            window.setTimeout(() => (this.submitToast = null), 3000);
+            await this.refresh();
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : String(err);
+            this.deletingState = null;
+        }
+    }
+
+    private async _onSubmit(e: CustomEvent<{ entity_id: string; state: string; attributes: Record<string, unknown> }>) {
+        const { entity_id, state, attributes } = e.detail;
+        const wasEditing = this.editingState !== null;
+        try {
+            const resp = await fetch(`/api/states/${encodeURIComponent(entity_id)}`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${resolveToken()}`,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ state, attributes }),
+            });
+            if (!resp.ok) throw new Error(`HTTP ${resp.status}: ${await resp.text()}`);
+            this.modalOpen = false;
+            this.editingState = null;
+            this.submitToast = `${wasEditing ? 'Updated' : 'Created'} ${entity_id} = ${state}`;
+            window.setTimeout(() => (this.submitToast = null), 3000);
+            await this.refresh();
+        } catch (err) {
+            this.error = err instanceof Error ? err.message : String(err);
+        }
+    }
+
+    render() {
+        if (this.error && this.states.length === 0) {
+            return html`<div class="err">backend unreachable — ${this.error}\n\n
+                hint: make sure homecore-server is running on :8123 and that
+                the token in localStorage["homecore.token"] is accepted.
+            </div>`;
+        }
+        if (this.loading) {
+            return html`<div class="empty">loading HOMECORE state…</div>`;
+        }
+        const v = this.config?.version ?? '?';
+        const loc = this.config?.location_name ?? 'Home';
+        return html`
+            ${this.submitToast ? html`<div class="toast">${this.submitToast}</div>` : ''}
+            <div class="toolbar">
+                <span class="grow"></span>
+                <button class="add" @click=${this._openCreate}>+ Add entity</button>
+            </div>
+            <div class="meta">
+                <span><strong>${loc}</strong></span>
+                <span>HOMECORE v<strong>${v}</strong></span>
+                <span><strong>${this.states.length}</strong> entities</span>
+            </div>
+            ${this.states.length === 0
+                ? html`<div class="empty">
+                      No entities registered yet. Click <strong>+ Add entity</strong>
+                      above, run <code>bash scripts/homecore-seed.sh</code>,
+                      or boot <code>homecore-server</code> without
+                      <code>--no-seed-entities</code>.
+                  </div>`
+                : html`<div class="grid"
+                              @hc-state-card-click=${(e: Event) => this._openEdit(e as CustomEvent)}
+                              @hc-state-card-delete=${(e: Event) => this._openDeleteConfirm(e as CustomEvent)}>
+                      ${this.states.map(
+                          (s) => html`<hc-state-card .state=${s}></hc-state-card>`
+                      )}
+                  </div>`}
+
+            <hc-modal .open=${this.deletingState !== null}
+                      heading="Delete entity"
+                      @hc-modal-close=${() => (this.deletingState = null)}>
+                <p style="margin:0 0 12px 0; line-height:1.5;">
+                    Permanently remove
+                    <code style="background:hsl(220 25% 14%); padding:2px 6px; border-radius:4px;">${this.deletingState?.entity_id ?? ''}</code>
+                    from the state machine?
+                    <br>
+                    <span style="color:var(--hc-text-muted,#7b899d); font-size:12px;">
+                        This is immediate. To restore, re-create the entity via "+ Add entity".
+                    </span>
+                </p>
+                <button slot="footer" class="btn" @click=${() => (this.deletingState = null)}>Cancel</button>
+                <button slot="footer" class="btn"
+                        style="background:hsl(0 50% 25%); border-color:hsl(0 50% 35%); color:hsl(0 60% 88%);"
+                        @click=${this._confirmDelete}>Delete</button>
+            </hc-modal>
+
+            <hc-modal .open=${this.modalOpen}
+                      heading=${this.editingState ? `Edit ${this.editingState.entity_id}` : 'Add entity'}
+                      @hc-modal-close=${() => { this.modalOpen = false; this.editingState = null; }}>
+                <hc-entity-form
+                    .entityId=${this.editingState?.entity_id ?? ''}
+                    .state=${this.editingState?.state ?? ''}
+                    .entityAttrs=${this.editingState?.attributes ?? {}}
+                    .editing=${this.editingState !== null}
+                    @hc-entity-submit=${(e: Event) => this._onSubmit(e as CustomEvent)}
+                    @hc-entity-cancel=${() => { this.modalOpen = false; this.editingState = null; }}></hc-entity-form>
+                <button slot="footer" class="btn" @click=${() => this._form?.requestCancel()}>Cancel</button>
+                <button slot="footer" class="btn primary" @click=${() => this._form?.requestSubmit()}>${this.editingState ? 'Save' : 'Create'}</button>
+            </hc-modal>
+        `;
+    }
+}
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'hc-dashboard': Dashboard;
+    }
+}

frontend/src/pages/Services.ts

@@ -0,0 +1,86 @@
+/**
+ * Services page — lists every registered service grouped by domain.
+ * Reads from `/api/services` (HA-wire-compat).
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import { HomecoreClient } from '../api/client.js';
+import type { ServiceDomainView } from '../api/types.js';
+
+function resolveToken(): string {
+    if (typeof localStorage !== 'undefined') {
+        const stored = localStorage.getItem('homecore.token');
+        if (stored) return stored;
+    }
+    const qs = new URL(window.location.href).searchParams.get('token');
+    return qs ?? 'dev-token';
+}
+
+@customElement('hc-services')
+export class ServicesPage extends LitElement {
+    static styles = css`
+        :host { display: block; padding: 24px; color: var(--hc-text, #e6eaee); font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); }
+        h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px 0; }
+        .domain { background: hsl(220 20% 10%); border: 1px solid var(--hc-border, #2a323e); border-radius: 8px; margin-bottom: 12px; padding: 14px 16px; }
+        .domain h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px 0; color: var(--hc-primary, #19d4e5); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
+        ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
+        li { background: hsl(220 25% 14%); padding: 4px 10px; border-radius: 4px; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 12px; color: var(--hc-text-muted, #7b899d); }
+        .empty { padding: 24px; border: 1px dashed var(--hc-border, #2a323e); border-radius: 8px; text-align: center; color: var(--hc-text-muted, #7b899d); }
+        .err { padding: 16px; border: 1px dashed #b35a5a; border-radius: 8px; color: #f0c0c0; font-size: 13px; }
+    `;
+
+    @state() private domains: ServiceDomainView[] = [];
+    @state() private error: string | null = null;
+    @state() private loading = true;
+
+    private client = new HomecoreClient({ token: resolveToken() });
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void this.refresh();
+    }
+
+    private async refresh(): Promise<void> {
+        try {
+            const r = await fetch('/api/services', { headers: { 'Authorization': `Bearer ${resolveToken()}` } });
+            if (!r.ok) throw new Error(`/api/services -> HTTP ${r.status}`);
+            this.domains = await r.json();
+            this.error = null;
+        } catch (e) {
+            this.error = e instanceof Error ? e.message : String(e);
+        } finally {
+            this.loading = false;
+        }
+        void this.client;  // suppress unused warning while keeping the import shape consistent
+    }
+
+    render() {
+        if (this.error) return html`<div class="err">backend unreachable — ${this.error}</div>`;
+        if (this.loading) return html`<div>loading services…</div>`;
+        if (this.domains.length === 0) {
+            return html`
+                <h1>Services (0 domains)</h1>
+                <div class="empty">
+                    No services registered. Services are registered by plugins
+                    (Wasmtime or InProcess) or by integrations that call
+                    <code>services::register()</code> on boot.
+                </div>
+            `;
+        }
+        return html`
+            <h1>Services (${this.domains.length} domain${this.domains.length === 1 ? '' : 's'})</h1>
+            ${this.domains.map(d => html`
+                <div class="domain">
+                    <h2>${d.domain}</h2>
+                    <ul>
+                        ${Object.keys(d.services).map(name => html`<li>${name}</li>`)}
+                    </ul>
+                </div>
+            `)}
+        `;
+    }
+}
+
+declare global { interface HTMLElementTagNameMap { 'hc-services': ServicesPage; } }

frontend/src/pages/Settings.ts

@@ -0,0 +1,94 @@
+/**
+ * Settings page — backend config + bearer-token editor (localStorage).
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import { HomecoreClient } from '../api/client.js';
+import type { ApiConfig } from '../api/types.js';
+
+function resolveToken(): string {
+    if (typeof localStorage !== 'undefined') {
+        const stored = localStorage.getItem('homecore.token');
+        if (stored) return stored;
+    }
+    const qs = new URL(window.location.href).searchParams.get('token');
+    return qs ?? 'dev-token';
+}
+
+@customElement('hc-settings')
+export class SettingsPage extends LitElement {
+    static styles = css`
+        :host { display: block; padding: 24px; color: var(--hc-text, #e6eaee); font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); }
+        h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px 0; }
+        section { background: hsl(220 20% 10%); border: 1px solid var(--hc-border, #2a323e); border-radius: 8px; padding: 16px; margin-bottom: 16px; }
+        h2 { font-size: 14px; font-weight: 600; margin: 0 0 12px 0; color: var(--hc-primary, #19d4e5); }
+        dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 0; font-size: 13px; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
+        dt { color: var(--hc-text-muted, #7b899d); }
+        dd { margin: 0; }
+        label { display: block; margin-bottom: 6px; font-size: 13px; color: var(--hc-text-muted, #7b899d); }
+        input { width: 100%; box-sizing: border-box; padding: 8px 12px; background: hsl(220 25% 14%); border: 1px solid var(--hc-border, #2a323e); border-radius: 6px; color: var(--hc-text, #e6eaee); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 13px; }
+        button { margin-top: 10px; padding: 8px 16px; background: var(--hc-primary, #19d4e5); color: var(--hc-primary-fg, #0b0e13); border: none; border-radius: 6px; font-weight: 600; font-size: 13px; cursor: pointer; font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); }
+        button:hover { background: hsl(185 80% 55%); }
+        .toast { font-size: 12px; color: var(--hc-primary, #19d4e5); margin-top: 8px; }
+        .err { padding: 16px; border: 1px dashed #b35a5a; border-radius: 8px; color: #f0c0c0; font-size: 13px; }
+    `;
+
+    @state() private config: ApiConfig | null = null;
+    @state() private error: string | null = null;
+    @state() private token = resolveToken();
+    @state() private savedAt = 0;
+
+    private client = new HomecoreClient({ token: resolveToken() });
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void this.refresh();
+    }
+
+    private async refresh(): Promise<void> {
+        try {
+            this.config = await this.client.getConfig();
+            this.error = null;
+        } catch (e) {
+            this.error = e instanceof Error ? e.message : String(e);
+        }
+    }
+
+    private saveToken() {
+        localStorage.setItem('homecore.token', this.token);
+        this.savedAt = Date.now();
+        this.client = new HomecoreClient({ token: this.token });
+        void this.refresh();
+    }
+
+    render() {
+        return html`
+            <h1>Settings</h1>
+            <section>
+                <h2>backend</h2>
+                ${this.error
+                    ? html`<div class="err">unreachable — ${this.error}</div>`
+                    : this.config
+                    ? html`<dl>
+                          <dt>location</dt><dd>${this.config.location_name}</dd>
+                          <dt>version</dt><dd>${this.config.version}</dd>
+                          <dt>state</dt><dd>${this.config.state}</dd>
+                          <dt>components</dt><dd>${this.config.components.join(', ')}</dd>
+                      </dl>`
+                    : html`loading…`}
+            </section>
+            <section>
+                <h2>auth — bearer token</h2>
+                <label for="tok">stored at localStorage["homecore.token"]; DEV mode accepts any non-empty value</label>
+                <input id="tok" type="password" .value=${this.token}
+                       @input=${(e: Event) => (this.token = (e.target as HTMLInputElement).value)} />
+                <button @click=${this.saveToken}>save & reload backend</button>
+                ${this.savedAt > 0 ? html`<div class="toast">saved at ${new Date(this.savedAt).toLocaleTimeString()}</div>` : ''}
+            </section>
+        `;
+    }
+}
+
+declare global { interface HTMLElementTagNameMap { 'hc-settings': SettingsPage; } }

frontend/src/pages/States.ts

@@ -0,0 +1,85 @@
+/**
+ * States page — full table view of every entity in the state machine.
+ * Mirrors Home Assistant's `/developer-tools/state` view (read-only).
+ */
+
+import { LitElement, html, css } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+
+import { HomecoreClient } from '../api/client.js';
+import type { StateView } from '../api/types.js';
+
+function resolveToken(): string {
+    if (typeof localStorage !== 'undefined') {
+        const stored = localStorage.getItem('homecore.token');
+        if (stored) return stored;
+    }
+    const qs = new URL(window.location.href).searchParams.get('token');
+    return qs ?? 'dev-token';
+}
+
+@customElement('hc-states')
+export class StatesPage extends LitElement {
+    static styles = css`
+        :host { display: block; padding: 24px; color: var(--hc-text, #e6eaee); font-family: var(--hc-font-sans, 'Outfit', system-ui, sans-serif); }
+        h1 { font-size: 18px; font-weight: 600; margin: 0 0 16px 0; }
+        table { width: 100%; border-collapse: collapse; font-size: 13px; }
+        th { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--hc-border, #2a323e); color: var(--hc-text-muted, #7b899d); font-weight: 500; }
+        td { padding: 10px 12px; border-bottom: 1px solid hsl(220 15% 14%); font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); }
+        td.attrs { color: var(--hc-text-muted, #7b899d); font-size: 12px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+        tr:hover td { background: hsl(220 20% 10%); }
+        .state { color: var(--hc-primary, #19d4e5); }
+        .err { padding: 16px; border: 1px dashed #b35a5a; border-radius: 8px; color: #f0c0c0; font-family: var(--hc-font-mono, 'JetBrains Mono', monospace); font-size: 13px; }
+    `;
+
+    @state() private states: StateView[] = [];
+    @state() private error: string | null = null;
+    @state() private loading = true;
+
+    private client = new HomecoreClient({ token: resolveToken() });
+    private timer?: number;
+
+    connectedCallback(): void {
+        super.connectedCallback();
+        void this.refresh();
+        this.timer = window.setInterval(() => void this.refresh(), 5000);
+    }
+    disconnectedCallback(): void {
+        if (this.timer !== undefined) window.clearInterval(this.timer);
+        super.disconnectedCallback();
+    }
+
+    private async refresh(): Promise<void> {
+        try {
+            this.states = await this.client.getStates();
+            this.error = null;
+        } catch (e) {
+            this.error = e instanceof Error ? e.message : String(e);
+        } finally {
+            this.loading = false;
+        }
+    }
+
+    render() {
+        if (this.error) return html`<div class="err">backend unreachable — ${this.error}</div>`;
+        if (this.loading) return html`<div>loading…</div>`;
+        return html`
+            <h1>States (${this.states.length})</h1>
+            <table>
+                <thead><tr><th>entity_id</th><th>state</th><th>last_changed</th><th>attributes</th></tr></thead>
+                <tbody>
+                    ${this.states.map(s => html`
+                        <tr>
+                            <td>${s.entity_id}</td>
+                            <td class="state">${s.state}</td>
+                            <td>${s.last_changed.replace('T', ' ').replace(/\..*$/, '')}</td>
+                            <td class="attrs" title=${JSON.stringify(s.attributes)}>${JSON.stringify(s.attributes)}</td>
+                        </tr>
+                    `)}
+                </tbody>
+            </table>
+        `;
+    }
+}
+
+declare global { interface HTMLElementTagNameMap { 'hc-states': StatesPage; } }

scripts/homecore-seed.sh

@@ -0,0 +1,83 @@
+#!/usr/bin/env bash
+#
+# homecore-seed.sh — populate the empty HOMECORE state machine with a
+# representative cross-section of entities so the web UI renders
+# useful content right after `homecore-server` boots.
+#
+# When homecore-server starts with no plugins loaded and no
+# integrations enabled, its state machine is empty by design — the
+# web UI shows "No entities registered yet". This script POSTs ~10
+# real-looking entities via the HA-compat REST surface.
+#
+# Where the numbers come from:
+#   - sensor.living_room_presence / _motion / bedroom_breathing_rate /
+#     bedroom_heart_rate are pulled live from the RuView sensing-server
+#     (RUVIEW_URL/api/v1/vitals/12/latest) when reachable.
+#   - Other entities use plausible literals.
+#
+# Usage:
+#   bash scripts/homecore-seed.sh
+#   HOMECORE_URL=http://localhost:8123 HOMECORE_TOKEN=dev-token bash scripts/homecore-seed.sh
+#   RUVIEW_URL=http://ruv-mac-mini:3000 bash scripts/homecore-seed.sh  # live numbers
+#
+# Idempotent: re-running just updates the values.
+
+set -euo pipefail
+
+URL="${HOMECORE_URL:-http://127.0.0.1:8123}"
+TOKEN="${HOMECORE_TOKEN:-dev-token}"
+RUVIEW_URL="${RUVIEW_URL:-http://localhost:3000}"
+
+post() {
+    local entity_id="$1"; shift
+    local body="$1"; shift
+    curl -fsS -X POST "$URL/api/states/$entity_id" \
+        -H "Authorization: Bearer $TOKEN" \
+        -H "Content-Type: application/json" \
+        -d "$body" >/dev/null && echo "  set $entity_id"
+}
+
+# Pull a live snapshot from the RuView sensing-server (optional).
+ruview_snapshot="{}"
+if curl -fsS --max-time 2 "$RUVIEW_URL/api/v1/vitals/12/latest" -o /tmp/ruview-vitals.json 2>/dev/null; then
+    ruview_snapshot=$(cat /tmp/ruview-vitals.json)
+    echo "Pulled live RuView snapshot from $RUVIEW_URL"
+else
+    echo "RuView snapshot unreachable — using defaults (set RUVIEW_URL to your sensing-server to pull live values)"
+fi
+
+get_num() {
+    local key="$1" default="$2"
+    echo "$ruview_snapshot" | python3 -c "
+import sys, json
+try:
+    d = json.loads(sys.stdin.read())
+    v = d.get('$key')
+    print(v if v is not None else '$default')
+except Exception:
+    print('$default')
+" 2>/dev/null || echo "$default"
+}
+
+presence=$(get_num presence false)
+breathing=$(get_num breathing_rate_bpm 14.5)
+heart_rate=$(get_num heartrate_bpm 68.0)
+motion=$(get_num motion 0.0)
+
+echo
+echo "Seeding HOMECORE at $URL ..."
+
+post sensor.living_room_presence "{\"state\": \"$presence\", \"attributes\": {\"friendly_name\": \"Living Room Presence\", \"device_class\": \"occupancy\", \"source\": \"RuView ESP32-C6 BFLD\"}}"
+post sensor.living_room_motion_score "{\"state\": \"$motion\", \"attributes\": {\"friendly_name\": \"Living Room Motion Score\", \"unit_of_measurement\": \"score\", \"icon\": \"mdi:motion-sensor\"}}"
+post sensor.bedroom_breathing_rate "{\"state\": \"$breathing\", \"attributes\": {\"friendly_name\": \"Bedroom Breathing Rate\", \"unit_of_measurement\": \"BPM\", \"device_class\": \"frequency\", \"source\": \"Seeed MR60BHA2 mmWave\"}}"
+post sensor.bedroom_heart_rate "{\"state\": \"$heart_rate\", \"attributes\": {\"friendly_name\": \"Bedroom Heart Rate\", \"unit_of_measurement\": \"BPM\", \"device_class\": \"frequency\", \"source\": \"Seeed MR60BHA2 mmWave\"}}"
+post light.kitchen_ceiling '{"state": "on", "attributes": {"friendly_name": "Kitchen Ceiling", "brightness": 230, "color_temp_kelvin": 4000, "supported_color_modes": ["color_temp"]}}'
+post light.living_room_lamp '{"state": "off", "attributes": {"friendly_name": "Living Room Lamp", "brightness": 0, "supported_color_modes": ["brightness"]}}'
+post switch.coffee_maker '{"state": "off", "attributes": {"friendly_name": "Coffee Maker", "device_class": "outlet"}}'
+post binary_sensor.front_door '{"state": "off", "attributes": {"friendly_name": "Front Door", "device_class": "door"}}'
+post climate.thermostat '{"state": "heat", "attributes": {"friendly_name": "Thermostat", "current_temperature": 21.5, "temperature": 22.0, "hvac_modes": ["off", "heat", "cool", "auto"], "supported_features": 387}}'
+post sensor.air_quality_index '{"state": "42", "attributes": {"friendly_name": "Air Quality Index", "unit_of_measurement": "AQI", "device_class": "aqi"}}'
+
+echo
+echo "Done. The HOMECORE web UI at http://localhost:5173 should now"
+echo "show 10 entities. The Dashboard auto-refreshes every 5 s."

v2/crates/homecore-api/src/app.rs

@@ -28,7 +28,12 @@ pub fn router(state: SharedState) -> Router {
         .route("/api/", get(rest::api_root))
         .route("/api/config", get(rest::get_config))
         .route("/api/states", get(rest::get_states))
-        .route("/api/states/:entity_id", get(rest::get_state).post(rest::set_state))
+        .route(
+            "/api/states/:entity_id",
+            get(rest::get_state)
+                .post(rest::set_state)
+                .delete(rest::delete_state),
+        )
         .route("/api/services", get(rest::get_services))
         .route("/api/services/:domain/:service", post(rest::call_service))
         .route("/api/websocket", get(ws::websocket_handler))

v2/crates/homecore-api/src/rest.rs

@@ -92,6 +92,21 @@ pub struct SetStateRequest {
     pub attributes: serde_json::Value,
 }
 
+/// DELETE /api/states/:entity_id — remove an entity from the state
+/// machine. Idempotent: returns 204 whether or not the entity existed,
+/// matching HA's removal semantics. 4xx only for malformed entity_id or
+/// auth failure.
+pub async fn delete_state(
+    headers: HeaderMap,
+    State(s): State<SharedState>,
+    Path(entity_id): Path<String>,
+) -> ApiResult<StatusCode> {
+    let _ = BearerAuth::from_headers(&headers, s.tokens()).await?;
+    let id = EntityId::parse(entity_id).map_err(|e| ApiError::BadRequest(e.to_string()))?;
+    s.homecore().states().remove(&id);
+    Ok(StatusCode::NO_CONTENT)
+}
+
 pub async fn set_state(
     headers: HeaderMap,
     State(s): State<SharedState>,

v2/crates/homecore-server/src/main.rs

@@ -25,7 +25,8 @@ use anyhow::Result;
 use clap::Parser;
 use tracing::{info, warn};
 
-use homecore::HomeCore;
+use homecore::{Context, EntityId, HomeCore, ServiceCall, ServiceError, ServiceName};
+use homecore::service::FnHandler;
 use homecore_api::{router, LongLivedTokenStore, SharedState};
 use homecore_assist::pipeline::default_pipeline;
 use homecore_assist::RegexIntentRecognizer;
@@ -52,6 +53,12 @@ struct Cli {
     /// Disable the SQLite recorder for low-resource deployments.
     #[arg(long)]
     no_recorder: bool,
+
+    /// Skip the boot-time entity seeding (10 demo entities including
+    /// 4 RuView-derived sensors). Use this when wiring real
+    /// integrations that will populate the state machine themselves.
+    #[arg(long)]
+    no_seed_entities: bool,
 }
 
 #[tokio::main]
@@ -66,6 +73,23 @@ async fn main() -> Result<()> {
     let hc = HomeCore::new();
     info!("HomeCore state machine + event bus + service registry online");
 
+    // Seed a representative set of built-in services so the web UI
+    // and HA-wire-compat clients see a populated /api/services on
+    // first boot. These are no-op handlers (they just echo back the
+    // call as JSON for observability) — integrations override them
+    // by registering the same ServiceName later.
+    seed_default_services(&hc).await;
+
+    // Seed 10 representative entities so the web UI's Dashboard +
+    // States pages have content out of the box. Operators registering
+    // real integrations / plugins overwrite these by writing the same
+    // entity_id with new values. Opt out with `--no-seed-entities`.
+    if !cli.no_seed_entities {
+        seed_default_entities(&hc);
+    } else {
+        info!("Entity seeding disabled by --no-seed-entities");
+    }
+
     // ── 2. Recorder (optional) ──────────────────────────────────────
     if !cli.no_recorder {
         match Recorder::open(&cli.db).await {
@@ -154,3 +178,116 @@ fn init_tracing() {
         )
         .init();
 }
+
+/// Register a representative set of built-in services so `/api/services`
+/// is non-empty on first boot. Each handler simply echoes the call back
+/// as a JSON acknowledgement — integrations override these by
+/// re-registering the same `ServiceName` with a real handler later.
+///
+/// The set covers the HA wire-compat "starter pack" (homeassistant /
+/// light / switch / scene / automation domains) plus a `homecore.*`
+/// domain so operators can see HOMECORE-native services distinguished
+/// from the HA-compat ones.
+async fn seed_default_services(hc: &HomeCore) {
+    let echo = || FnHandler(|call: ServiceCall| async move {
+        Ok(serde_json::json!({
+            "called": format!("{}.{}", call.name.domain, call.name.service),
+            "service_data": call.data,
+            "acknowledged": true,
+        }))
+    });
+
+    let svcs = [
+        // Conventional HA wire-compat services
+        ("homeassistant", "restart"),
+        ("homeassistant", "stop"),
+        ("homeassistant", "reload_core_config"),
+        ("light", "turn_on"),
+        ("light", "turn_off"),
+        ("light", "toggle"),
+        ("switch", "turn_on"),
+        ("switch", "turn_off"),
+        ("switch", "toggle"),
+        ("scene", "apply"),
+        ("automation", "trigger"),
+        // HOMECORE-native services
+        ("homecore", "ping"),
+        ("homecore", "snapshot_state"),
+    ];
+
+    for (domain, service) in svcs {
+        hc.services()
+            .register(ServiceName::new(domain, service), echo())
+            .await;
+    }
+
+    let count = hc.services().registered_services().await.len();
+    let _ = ServiceError::NotRegistered { domain: String::new(), service: String::new() };
+    info!("Service registry seeded with {} default service(s)", count);
+}
+
+/// Register 10 representative entities so a fresh `--db :memory:`
+/// boot has content for the web UI. Mirrors `scripts/homecore-seed.sh`
+/// — when both are run the script just overwrites these values, so
+/// they stay in sync.
+fn seed_default_entities(hc: &HomeCore) {
+    let entities: Vec<(&str, &str, serde_json::Value)> = vec![
+        ("sensor.living_room_presence", "false", serde_json::json!({
+            "friendly_name": "Living Room Presence", "device_class": "occupancy",
+            "source": "RuView ESP32-C6 BFLD"
+        })),
+        ("sensor.living_room_motion_score", "0.0", serde_json::json!({
+            "friendly_name": "Living Room Motion Score", "unit_of_measurement": "score",
+            "icon": "mdi:motion-sensor"
+        })),
+        ("sensor.bedroom_breathing_rate", "14.5", serde_json::json!({
+            "friendly_name": "Bedroom Breathing Rate", "unit_of_measurement": "BPM",
+            "device_class": "frequency", "source": "Seeed MR60BHA2 mmWave"
+        })),
+        ("sensor.bedroom_heart_rate", "68.0", serde_json::json!({
+            "friendly_name": "Bedroom Heart Rate", "unit_of_measurement": "BPM",
+            "device_class": "frequency", "source": "Seeed MR60BHA2 mmWave"
+        })),
+        ("light.kitchen_ceiling", "on", serde_json::json!({
+            "friendly_name": "Kitchen Ceiling", "brightness": 230,
+            "color_temp_kelvin": 4000, "supported_color_modes": ["color_temp"]
+        })),
+        ("light.living_room_lamp", "off", serde_json::json!({
+            "friendly_name": "Living Room Lamp", "brightness": 0,
+            "supported_color_modes": ["brightness"]
+        })),
+        ("switch.coffee_maker", "off", serde_json::json!({
+            "friendly_name": "Coffee Maker", "device_class": "outlet"
+        })),
+        ("binary_sensor.front_door", "off", serde_json::json!({
+            "friendly_name": "Front Door", "device_class": "door"
+        })),
+        ("climate.thermostat", "heat", serde_json::json!({
+            "friendly_name": "Thermostat", "current_temperature": 21.5,
+            "temperature": 22.0, "hvac_modes": ["off", "heat", "cool", "auto"],
+            "supported_features": 387
+        })),
+        ("sensor.air_quality_index", "42", serde_json::json!({
+            "friendly_name": "Air Quality Index", "unit_of_measurement": "AQI",
+            "device_class": "aqi"
+        })),
+    ];
+
+    for (id, state, attrs) in entities {
+        match EntityId::parse(id) {
+            Ok(eid) => {
+                hc.states().set(eid, state, attrs, Context::new());
+            }
+            Err(e) => warn!("seed_default_entities: bad entity_id {id}: {e}"),
+        }
+    }
+
+    let _ = ServiceCall {
+        name: ServiceName::new("homecore", "noop"),
+        data: serde_json::json!({}),
+        context: Context::new(),
+    };
+    let total = hc.states().all().len();
+    info!("State machine seeded with {} default entit{}", total,
+          if total == 1 { "y" } else { "ies" });
+}