CRUD increment 4/6. The form now shows validity feedback on every
keystroke instead of only on Create click, makes the warning vs error
distinction visible (amber vs red), and propagates backend 4xx
responses into the form's own error surface.
frontend/src/components/EntityForm.ts (~80 LOC delta):
- Three new @state fields tracking per-field validity: _idValid,
_stateValid, _attrsValid (each is `{ok:true} | {ok:false, level:
'err'|'warn', msg}` or null when untouched).
- Pure validators outside the class so they can be unit-tested:
validateEntityId, validateState, validateAttrs.
- validateEntityId now warns (amber, not red) if the domain prefix
is outside the standard HA set. KNOWN_DOMAINS lists ~40 standard
domains (sensor, light, switch, binary_sensor, climate, cover,
fan, media_player, lock, camera, vacuum, climate, scene, script,
automation, input_*, person, device_tracker, zone, weather, etc.)
+ homecore-native domain. Unknown domains create entities anyway
(backend regex still passes them) but the operator sees the soft
signal.
- Sigils render below each field: ✓ green when ok, ✗ red on err,
! amber on warn. Field borders adopt the level color via
.invalid / .warn classes.
- New public method `isValid()` so the host can bind a disabled
state on its Save button (unused for now; ready for a follow-up).
- New public method `setSubmitError(msg)` so the host can surface
server-side rejection text inline in the form's red error block,
not just at the page top.
frontend/src/pages/Dashboard.ts (small delta):
- `_onSubmit()` now calls `this._form?.setSubmitError(null)` before
each attempt to clear stale text, and on non-2xx responses it
surfaces the server's body text inline via `setSubmitError`.
Page-top error block is no longer hijacked for form errors.
Browser-verified end-to-end (real homecore-server :8123):
entity_id field:
BadID → red border + "must match domain.snake_case…"
light.kitchen_test → green ✓ "entity_id OK"
madeup_domain.foo → amber border + "unknown domain 'madeup_domain' — HA-standard…"
state field:
empty → red ✗ required
"on" → green ✓
attributes field:
empty → green ✓ (defaults to {})
[1,2,3] → red ✗ "must be a JSON object…"
{"key": → red ✗ "JSON parse: Unexpected end of JSON input"
{"friendly_name":"Test"} → green ✓
Server-error inline:
Force 401 via wrong token → form red block shows
"server rejected (401): unauthorized"
Successful create: still works, toast still shown, 0 console errors.
Co-Authored-By: claude-flow <ruv@ruv.net>
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>
CRUD increment 2/6 — clicking any state card on the Dashboard opens
the Add Entity modal in EDIT mode: pre-populated, entity_id locked,
"Save" primary button, idempotent POST to /api/states/<id> (backend
returns 200 if existed, 201 if created — same handler).
frontend/src/components/StateCard.ts:
- card div is now role="button" tabindex=0, dispatches
`hc-state-card-click` on click + Enter/Space keydown
- aria-label="Edit <entity_id>" for screen readers
- shadowRootOptions delegatesFocus=true so the outer Tab sequence
can reach the inner focusable div (caught by browser agent —
without this Tab couldn't pierce the shadow root)
frontend/src/pages/Dashboard.ts:
- new state: editingState (null = create, StateView = edit)
- _openEdit() catches `hc-state-card-click` from the grid container
- modal heading switches: "Add entity" ↔ "Edit <entity_id>"
- primary button text switches: "Create" ↔ "Save"
- EntityForm receives .editing=true so entity_id input is disabled
- submit toast reads "Updated" or "Created" depending on mode
Browser-verified end-to-end (real homecore-server :8123, 12 entities):
- Click `light.kitchen_ceiling` → modal opens with all 4 attributes
(brightness=230, color_temp_kelvin=4000, friendly_name,
supported_color_modes) pre-populated
- Change state to "off", click Save → toast "Updated
light.kitchen_ceiling = off", grid card reflects new state
- Backend curl confirms /api/states/light.kitchen_ceiling.state = "off"
- Enter key on focused card opens the modal too
- 0 console errors
Co-Authored-By: claude-flow <ruv@ruv.net>
First CRUD increment. Click "+ Add entity" on the Dashboard
toolbar → modal opens → form with entity_id / state / attributes
fields → Create validates client-side then POSTs /api/states/<id>
→ modal closes, toast confirms, dashboard refreshes.
New components:
frontend/src/components/Modal.ts (~110 LOC) — reusable accessible
overlay. open property; closes on Escape and backdrop click.
Heading prop; default + footer slots.
frontend/src/components/EntityForm.ts (~130 LOC) — three-field form
with public requestSubmit()/requestCancel() methods. Client-side
validation:
- entity_id matches /^[a-z][a-z0-9_]*\.[a-z][a-z0-9_]*$/
- state non-empty
- attributes parses as a JSON object (rejects array/scalar)
Emits hc-entity-submit / hc-entity-cancel events for host to
handle. Footer buttons live in the host (modal slot=footer).
frontend/src/pages/Dashboard.ts (+60 LOC) — toolbar with
"+ Add entity" button, modal state, POST handler that wraps
fetch with bearer token, success toast (3 s), refresh().
Browser-verified end-to-end (real homecore-server :8123):
- Toolbar button visible: Y
- Modal opens: Y
- 3/3 validation paths fire correctly:
BadID → "entity_id must match domain.snake_case"
blank state → "state must not be empty"
[1,2,3] attrs → "attributes must be a JSON object"
- Successful create: light.test_bulb POSTed; modal closes; toast
"Created light.test_bulb = on"; grid count went 10 → 11
- Persistence: hard reload, count stays
- 0 console errors (Lit dev-mode notices excluded)
Note: TypeScript caught a name collision — `attributes` is reserved
on HTMLElement (NamedNodeMap). Renamed the Lit @property to
`entityAttrs` so the class extends LitElement cleanly.
Co-Authored-By: claude-flow <ruv@ruv.net>
Before: clicking Dashboard / States / Services / Settings highlighted
the active nav button but the page content never changed. AppShell
dispatched `hc-navigate` events but no listener acted on them.
After (~232 LOC across 4 files):
- main.ts (+20 LOC) tiny router: NAV_TO_TAG maps nav id → page
custom element; on `hc-navigate`, swap the AppShell's child.
- pages/States.ts (~86 LOC) HA-style entity table with 5 s refresh.
- pages/Services.ts (~82 LOC) domain-grouped service registry,
friendly empty state when no services registered.
- pages/Settings.ts (~90 LOC) backend config readout + bearer-token
editor (localStorage["homecore.token"]).
Browser-verified all 4 nav clicks swap content; 0 console errors.
Dashboard → 10 entity cards; States → 10-row table; Services →
empty state (0 domains); Settings → config + token editor.
Co-Authored-By: claude-flow <ruv@ruv.net>
Before: `<hc-app-shell>` was a layout-only component with an empty
`<slot>` (the auditor flagged it as "scaffold + no dashboard page");
operators saw the appbar + nav + footer but nothing in `<main>`.
After: three small additions wire the existing components to real
backend data.
frontend/src/pages/Dashboard.ts (~110 LOC) — new Lit `<hc-dashboard>`
- Reads bearer from localStorage / ?token= / <meta name=> / falls
back to "dev-token" (matches the DEV-token mode the backend
reports when HOMECORE_TOKENS is unset)
- Calls client.getConfig() + client.getStates() on mount
- Renders a `.meta` line (location · version · entity count) plus
a responsive grid of `<hc-state-card>` from the live state list
- Polls /api/states every 5 s for live refresh
- Surface a structured error block if the backend is unreachable
so operators see WHAT broke rather than a blank page
frontend/src/main.ts (+9 LOC) — appends `<hc-dashboard>` into the
`<hc-app-shell>` slot on DOMContentLoaded
scripts/homecore-seed.sh (+95 LOC, executable) — POSTs 10
representative entities to the HA-compat `/api/states/<id>`
endpoint so a fresh `homecore-server` boot has demo content.
Live numbers from RuView's sensing-server when RUVIEW_URL is
reachable (sensor.living_room_presence / bedroom_breathing_rate /
bedroom_heart_rate); plausible defaults otherwise.
Empirical (after `bash scripts/homecore-seed.sh` against a fresh
homecore-server on :8123, browser at http://localhost:5173):
.meta: "Home | HOMECORE v0.1.0-alpha.0 | 10 entities"
grid : 10 <hc-state-card> elements rendered, e.g.
binary_sensor.front_door off updated 12:17:34
switch.coffee_maker off updated 12:17:34
sensor.living_room_motion_score 0.0 updated 12:17:33
…
curl : GET /api/config → 200
GET /api/states → 200 (returns array of 10)
The dashboard now provides real value-vs-empty-page proof that the
frontend ↔ HOMECORE-API chain is wired end-to-end.
Co-Authored-By: claude-flow <ruv@ruv.net>
ruv