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>
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>
ruv