3f5a7411db
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>
|
||
|---|---|---|
| .. | ||
| src | ||
| .gitignore | ||
| README.md | ||
| index.html | ||
| package-lock.json | ||
| package.json | ||
| tsconfig.json | ||
| vite.config.ts | ||
| vitest.config.ts | ||
README.md
@ruvnet/homecore-frontend
HOMECORE web UI — built with Lit 3, TypeScript, and Vite. Design system mirrors the cognitum-v0 / v0-appliance dashboard (ADR-131).
Quick start
cd frontend
npm install
npm run dev # http://localhost:5173
The Vite dev server proxies /api → http://localhost:8123, so you need a
homecore-api-server (or the wifi-densepose-sensing-server crate) running on :8123.
Scripts
| Script | Description |
|---|---|
npm run dev |
Start Vite dev server on port 5173 |
npm run build |
TypeScript compile + Vite production bundle → dist/ |
npm run lint |
ESLint on src/ |
npm test |
Vitest unit tests (3 suites, jsdom) |
Package layout
frontend/
src/
api/
client.ts # fetch + WebSocket client (REST + WS)
types.ts # TypeScript types matching homecore-api JSON shapes
components/
AppShell.ts # <hc-app-shell> — header + nav + content slot
StateCard.ts # <hc-state-card> — single entity state card
icons/
lucide.ts # Tree-shaken Lucide icon wrapper
styles/
tokens.css # 16 CSS custom properties (--hc-*)
base.css # Typography reset, page shell, nav layout
__tests__/ # Vitest unit tests
index.html # Shell loading src/main.ts
vite.config.ts
tsconfig.json
vitest.config.ts
Design system
Colors, typography, and components mirror the cognitum-v0 dashboard
(http://cognitum-v0:9000/). Dark-only; no light-mode. Key tokens:
--hc-primary#19d4e5— teal (active nav, focus ring, CTA borders)--hc-accent#26d867— green (success, secondary CTA)--hc-bg#0b0e13— near-black navy page root- Font: Outfit (display) + JetBrains Mono (mono)
- Icons: Lucide (SVG,
stroke: currentColor, no icon font)
See docs/design/HOMECORE-FRONTEND-design-recon.md for the full recon.
Architecture notes
- Components are standard Lit
LitElementcustom elements — compatible with any HTML page and with Home Assistant's Lit-based frontend. - The REST client uses
fetch; the WS client usesWebSocket. Both accept a bearer token and are fully typed against the Rusthomecore-apiJSON shapes. - WASM:
vite.config.tsenables.wasmasset import. Hook up via dynamicimport('/path/to/module.wasm?init')when WASM bindings are ready.