feat(homecore-ui): wire nav router + States / Services / Settings pages
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>
This commit is contained in:
ruv
parent
858a3d9eb5
commit
4253c0e4fc
|
|
@ -10,12 +10,33 @@ import './styles/base.css';
|
|||
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));
|
||||
}
|
||||
|
||||
// Mount the Dashboard inside the AppShell's slot so the empty `<main>`
|
||||
// layout actually shows something on first paint.
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
const shell = document.querySelector('hc-app-shell');
|
||||
if (shell && !shell.querySelector('hc-dashboard')) {
|
||||
shell.appendChild(document.createElement('hc-dashboard'));
|
||||
}
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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; } }
|
||||
|
|
@ -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; } }
|
||||
|
|
@ -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; } }
|
||||
Loading…
Reference in New Issue