@sukramj/fabric-ui 0.1.2 → 0.2.0

package/src/lib/pages/controller/node/Bindings.svelte

@@ -0,0 +1,114 @@
+<!-- The binding targets of every endpoint with a Binding cluster: add a
+     unicast (node and endpoint) or group target, remove one, write the
+     endpoint's list back. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { BindingTarget, ControllerNodeDetail, EndpointBindings } from "../../../api/client";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import EmptyState from "../../../kit/EmptyState.svelte";
+  import ErrorState from "../../../kit/ErrorState.svelte";
+  import Input from "../../../kit/Input.svelte";
+  import LoadingState from "../../../kit/LoadingState.svelte";
+  import { hexId, parseHexId } from "../format";
+
+  let { nodeId, detail }: { nodeId: string; detail: ControllerNodeDetail } = $props();
+  const { t, toast, client } = useFabricUI();
+
+  let lists = $state<EndpointBindings[] | null>(null);
+  let error = $state<string | null>(null);
+  let drafts = $state<Record<number, { target: string; endpoint: string; cluster: string }>>({});
+
+  const hasBinding = $derived(detail.endpoints.some((e) => e.clusters.some((c) => c.id === 0x001e)));
+
+  async function load() {
+    error = null;
+    try {
+      lists = (await client.nodeBindings(nodeId)).endpoints;
+    } catch (err) {
+      error = errorText(err);
+    }
+  }
+  onMount(() => void load());
+
+  function describe(b: BindingTarget): string {
+    const where = b.group !== undefined ? t("controller.bindings.group", { group: b.group }) : `0x${b.node_id_hex ?? ""} · ${t("controller.endpoints.endpoint", { number: b.endpoint ?? 0 })}`;
+    return b.cluster_hex ? `${where} · ${b.cluster_hex}` : where;
+  }
+
+  async function write(eb: EndpointBindings, bindings: BindingTarget[]) {
+    try {
+      const res = await client.setNodeBindings(nodeId, eb.endpoint, bindings.map(({ fabric_index: _f, ...b }) => b));
+      if (res.status === 0) toast.success(t("controller.bindings.saved"));
+      else toast.error(t("controller.attributes.write_status", { status: hexId(res.status) }));
+      await load();
+    } catch (err) {
+      toast.error(errorText(err));
+    }
+  }
+
+  async function add(eb: EndpointBindings) {
+    const d = drafts[eb.endpoint] ?? { target: "", endpoint: "", cluster: "" };
+    const b: BindingTarget = {};
+    const target = d.target.trim();
+    if (/^g:\d+$/i.test(target)) b.group = Number(target.slice(2));
+    else if (/^(0x)?[0-9a-f]{1,16}$/i.test(target) && d.endpoint.trim()) {
+      b.node_id_hex = target.replace(/^0x/i, "").toUpperCase().padStart(16, "0");
+      b.endpoint = Number(d.endpoint);
+    } else {
+      toast.error(t("controller.bindings.invalid"));
+      return;
+    }
+    if (d.cluster.trim()) {
+      const c = parseHexId(d.cluster);
+      if (c === null) {
+        toast.error(t("controller.bindings.invalid"));
+        return;
+      }
+      b.cluster_hex = hexId(c);
+    }
+    drafts = { ...drafts, [eb.endpoint]: { target: "", endpoint: "", cluster: "" } };
+    await write(eb, [...eb.bindings, b]);
+  }
+
+  function draft(ep: number, key: "target" | "endpoint" | "cluster", value: string) {
+    const d = drafts[ep] ?? { target: "", endpoint: "", cluster: "" };
+    drafts = { ...drafts, [ep]: { ...d, [key]: value } };
+  }
+</script>
+
+{#if !hasBinding}
+  <EmptyState message={t("controller.bindings.none")} />
+{:else if error}
+  <ErrorState message={error} onRetry={() => void load()} />
+{:else if !lists}
+  <LoadingState message={t("common.loading")} />
+{:else}
+  <div class="space-y-4">
+    {#each lists as eb (eb.endpoint)}
+      <Card class="p-4" data-testid={`bindings-${eb.endpoint}`}>
+        <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.endpoints.endpoint", { number: eb.endpoint })}</h3>
+        {#if eb.bindings.length === 0}
+          <p class="text-sm text-[var(--ha-secondary-text-color)]">{t("controller.bindings.empty")}</p>
+        {:else}
+          <ul class="space-y-1">
+            {#each eb.bindings as b, i (i)}
+              <li class="flex items-center gap-2 text-sm">
+                <span class="font-mono text-xs">{describe(b)}</span>
+                <Button size="sm" variant="ghost" class="ml-auto text-[var(--ha-error-color)]" onclick={() => void write(eb, eb.bindings.filter((_, j) => j !== i))}>{t("common.remove")}</Button>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+        <div class="mt-3 flex flex-wrap items-center gap-2">
+          <Input class="w-56 font-mono" placeholder={t("controller.bindings.target")} aria-label={t("controller.bindings.target")} value={drafts[eb.endpoint]?.target ?? ""} oninput={(e) => draft(eb.endpoint, "target", (e.currentTarget as HTMLInputElement).value)} />
+          <Input class="w-24" placeholder={t("controller.bindings.endpoint")} aria-label={t("controller.bindings.endpoint")} inputmode="numeric" value={drafts[eb.endpoint]?.endpoint ?? ""} oninput={(e) => draft(eb.endpoint, "endpoint", (e.currentTarget as HTMLInputElement).value)} />
+          <Input class="w-28 font-mono" placeholder={t("controller.bindings.cluster")} aria-label={t("controller.bindings.cluster")} value={drafts[eb.endpoint]?.cluster ?? ""} oninput={(e) => draft(eb.endpoint, "cluster", (e.currentTarget as HTMLInputElement).value)} />
+          <Button variant="outline" onclick={() => void add(eb)}>{t("controller.bindings.add")}</Button>
+        </div>
+      </Card>
+    {/each}
+  </div>
+{/if}

package/src/lib/pages/controller/node/Endpoints.svelte

@@ -0,0 +1,49 @@
+<!-- A node's endpoints as a tree: parts under their parent, each with its
+     device types and server clusters. -->
+<script lang="ts">
+  import { useFabricUI } from "../../../context";
+  import type { ControllerNodeDetail, NodeEndpoint } from "../../../api/client";
+  import Badge from "../../../kit/Badge.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import EmptyState from "../../../kit/EmptyState.svelte";
+
+  let { detail }: { detail: ControllerNodeDetail } = $props();
+  const { t } = useFabricUI();
+
+  // Depth first, parts under their parent, each level in number order.
+  const ordered = $derived.by(() => {
+    const out: { ep: NodeEndpoint; depth: number }[] = [];
+    const children = (parent: number | undefined) => detail.endpoints.filter((e) => e.parent === parent);
+    const walk = (ep: NodeEndpoint, depth: number) => {
+      out.push({ ep, depth });
+      for (const c of children(ep.endpoint)) walk(c, depth + 1);
+    };
+    for (const top of children(undefined)) walk(top, 0);
+    return out;
+  });
+</script>
+
+{#if detail.endpoints.length === 0}
+  <EmptyState message={t("controller.endpoints.empty")} />
+{:else}
+  <div class="space-y-3">
+    {#each ordered as { ep, depth } (ep.endpoint)}
+      <Card class="p-4" style={`margin-left: ${depth * 1.5}rem`} data-testid={`endpoint-${ep.endpoint}`}>
+        <div class="flex flex-wrap items-center gap-2">
+          <span class="font-medium text-[var(--ha-primary-text-color)]">{t("controller.endpoints.endpoint", { number: ep.endpoint })}</span>
+          {#if ep.name}<span class="text-sm text-[var(--ha-secondary-text-color)]">{ep.name}</span>{/if}
+          {#each ep.device_types as dt (dt.id)}
+            <Badge title={dt.id_hex}>{dt.name || dt.id_hex}{dt.revision ? ` r${dt.revision}` : ""}</Badge>
+          {/each}
+        </div>
+        {#if ep.clusters.length > 0}
+          <ul class="mt-2 flex flex-wrap gap-1">
+            {#each ep.clusters as c (c.id)}
+              <li><Badge variant="muted" title={`${c.id_hex} r${c.revision}${c.features.length ? " · " + c.features.join(", ") : ""}`}>{c.name || c.id_hex}</Badge></li>
+            {/each}
+          </ul>
+        {/if}
+      </Card>
+    {/each}
+  </div>
+{/if}

package/src/lib/pages/controller/node/Fabrics.svelte

@@ -0,0 +1,83 @@
+<!-- Every fabric on the node, ours marked; removing another
+     administrator's. Ours goes with decommissioning. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { NodeFabric } from "../../../api/client";
+  import type { DataColumn } from "../../../kit/data-table";
+  import Badge from "../../../kit/Badge.svelte";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import DataTable from "../../../kit/DataTable.svelte";
+  import ErrorState from "../../../kit/ErrorState.svelte";
+  import LoadingState from "../../../kit/LoadingState.svelte";
+  import { vendorLabel } from "../format";
+
+  let { nodeId }: { nodeId: string } = $props();
+  const { t, toast, confirm, client } = useFabricUI();
+
+  let fabrics = $state<NodeFabric[] | null>(null);
+  let error = $state<string | null>(null);
+
+  async function load() {
+    error = null;
+    try {
+      fabrics = (await client.nodeFabrics(nodeId)).fabrics;
+    } catch (err) {
+      error = errorText(err);
+    }
+  }
+  onMount(() => void load());
+
+  async function remove(f: NodeFabric) {
+    const ok = await confirm({
+      title: t("controller.fabrics.remove_confirm"),
+      body: f.label || vendorLabel(f.vendor_name, f.vendor_id),
+      destructive: true,
+      confirmLabel: t("common.remove"),
+    });
+    if (!ok) return;
+    try {
+      await client.removeNodeFabric(nodeId, f.fabric_index);
+      toast.success(t("controller.fabrics.removed"));
+      await load();
+    } catch (err) {
+      toast.error(errorText(err));
+    }
+  }
+
+  const columns: DataColumn<NodeFabric>[] = $derived([
+    { key: "vendor", label: t("node.fabrics.col_vendor"), title: true, sortable: true, get: (f) => vendorLabel(f.vendor_name, f.vendor_id) },
+    { key: "label", label: t("node.fabrics.col_label"), sortable: true, get: (f) => f.label },
+    { key: "fabric", label: t("node.fabrics.col_fabric"), sortable: true, get: (f) => f.fabric_index },
+    { key: "fabric_id", label: t("controller.fabrics.col_fabric_id"), get: (f) => f.fabric_id_hex },
+    { key: "action", label: "", align: "right", cellClass: "reflow-actions" },
+  ]);
+</script>
+
+{#if error}
+  <ErrorState message={error} onRetry={() => void load()} />
+{:else if !fabrics}
+  <LoadingState message={t("common.loading")} />
+{:else}
+  <Card class="p-4">
+    <DataTable rows={fabrics} {columns} rowKey={(f) => String(f.fabric_index)} emptyMessage={t("node.fabrics.empty")} initialSort={{ key: "fabric", asc: true }}>
+      {#snippet cell(f, col)}
+        {#if col.key === "vendor"}
+          <span class="inline-flex items-center gap-1">{vendorLabel(f.vendor_name, f.vendor_id)}{#if f.own}<Badge>{t("controller.fabrics.own")}</Badge>{/if}</span>
+        {:else if col.key === "label"}
+          {f.label}
+        {:else if col.key === "fabric"}
+          {f.fabric_index}
+        {:else if col.key === "fabric_id"}
+          <span class="font-mono text-xs">0x{f.fabric_id_hex}</span>
+        {:else if col.key === "action"}
+          {#if !f.own}
+            <Button size="sm" variant="ghost" class="text-[var(--ha-error-color)]" onclick={() => void remove(f)}>{t("common.remove")}</Button>
+          {/if}
+        {/if}
+      {/snippet}
+    </DataTable>
+  </Card>
+{/if}

package/src/lib/pages/controller/node/Icd.svelte

@@ -0,0 +1,92 @@
+<!-- The node's ICD icd; registering this controller as its check-in
+     client, or unregistering it. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { IcdState } from "../../../api/client";
+  import Badge from "../../../kit/Badge.svelte";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import EmptyState from "../../../kit/EmptyState.svelte";
+  import ErrorState from "../../../kit/ErrorState.svelte";
+  import LoadingState from "../../../kit/LoadingState.svelte";
+
+  let { nodeId }: { nodeId: string } = $props();
+  const { t, toast, confirm, client } = useFabricUI();
+
+  let icd = $state<IcdState | null>(null);
+  let error = $state<string | null>(null);
+  let busy = $state(false);
+
+  async function load() {
+    error = null;
+    try {
+      icd = await client.nodeIcd(nodeId);
+    } catch (err) {
+      error = errorText(err);
+    }
+  }
+  onMount(() => void load());
+
+  async function register(allowMultiAdmin = false) {
+    busy = true;
+    try {
+      icd = await client.registerNodeIcd(nodeId, allowMultiAdmin);
+      toast.success(t("controller.icd.registered_done"));
+    } catch (err) {
+      // Other administrators' vendors may not support LIT: ask, then retry.
+      if (!allowMultiAdmin && (err as { status?: number }).status === 409) {
+        busy = false;
+        const ok = await confirm({ title: t("controller.icd.multi_admin"), body: errorText(err), confirmLabel: t("controller.icd.register") });
+        if (ok) await register(true);
+        return;
+      }
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function unregister(force: boolean) {
+    busy = true;
+    try {
+      icd = await client.unregisterNodeIcd(nodeId, force);
+      toast.success(t("controller.icd.unregistered_done"));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+{#if error}
+  <ErrorState message={error} onRetry={() => void load()} />
+{:else if !icd}
+  <LoadingState message={t("common.loading")} />
+{:else if !icd.supported}
+  <EmptyState message={t("controller.icd.unsupported")} />
+{:else}
+  <Card class="p-4" data-testid="node-icd">
+    <div class="flex flex-wrap gap-1">
+      <Badge variant={icd.registered ? "success" : "muted"}>{icd.registered ? t("controller.icd.registered") : t("controller.icd.unregistered")}</Badge>
+      {#if icd.operating_mode}<Badge>{t(`controller.icd.mode.${icd.operating_mode}`)}</Badge>{/if}
+      {#if icd.lit_supported}<Badge variant="muted">{t("controller.icd.lit_supported")}</Badge>{/if}
+      {#if icd.awake}<Badge variant="success">{t("controller.icd.awake")}</Badge>{/if}
+      {#if icd.available === false}<Badge variant="warning">{t("controller.icd.unavailable")}</Badge>{/if}
+    </div>
+    <dl class="mt-3 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.icd.next_check_in")}</dt><dd>{icd.next_check_in ? new Date(icd.next_check_in).toLocaleString() : "–"}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.icd.last_check_in")}</dt><dd>{icd.last_check_in ? new Date(icd.last_check_in).toLocaleString() : "–"}</dd>
+    </dl>
+    <div class="mt-3 flex flex-wrap gap-2">
+      {#if icd.registered}
+        <Button variant="outline" disabled={busy} onclick={() => void unregister(false)}>{t("controller.icd.unregister")}</Button>
+        <Button variant="outline-destructive" disabled={busy} onclick={() => void unregister(true)}>{t("controller.icd.forget")}</Button>
+      {:else}
+        <Button disabled={busy} onclick={() => void register()}>{t("controller.icd.register")}</Button>
+      {/if}
+    </div>
+  </Card>
+{/if}

package/src/lib/pages/controller/node/Overview.svelte

@@ -0,0 +1,81 @@
+<!-- A node's record, properties and connection. -->
+<script lang="ts">
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { ControllerNodeDetail } from "../../../api/client";
+  import Badge from "../../../kit/Badge.svelte";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import { connectionLabel, connectionVariant, vendorLabel } from "../format";
+
+  let { detail }: { detail: ControllerNodeDetail } = $props();
+  const { t, toast, client } = useFabricUI();
+
+  const n = $derived(detail.node);
+  const r = $derived(detail.record);
+  const p = $derived(detail.properties);
+
+  const flags = $derived(
+    (
+      [
+        ["supports_thread", p.supports_thread],
+        ["supports_wifi", p.supports_wifi],
+        ["supports_ethernet", p.supports_ethernet],
+        ["mains_powered", p.mains_powered],
+        ["battery_powered", p.battery_powered],
+        ["intermittently_connected", p.intermittently_connected],
+        ["thread_sleepy_end_device", p.thread_sleepy_end_device ?? false],
+      ] as const
+    ).filter(([, on]) => on).map(([k]) => k),
+  );
+
+  let busy = $state(false);
+  async function setAutoSubscribe(on: boolean) {
+    busy = true;
+    try {
+      await client.setNodeAutoSubscribe(n.node_id_hex, on);
+      toast.success(t("controller.overview.saved"));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<div class="grid gap-4 md:grid-cols-2">
+  <Card class="p-4" data-testid="node-overview">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.overview.node")}</h3>
+    <dl class="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-sm">
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.node_id")}</dt><dd class="font-mono">0x{n.node_id_hex}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.vendor")}</dt><dd>{vendorLabel(n.vendor_name, n.vendor_id)}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.product")}</dt><dd>{n.product_name ?? ""}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.software")}</dt><dd>{p.software_version ?? ""}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.serial")}</dt><dd>{p.serial_number ?? ""}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.connection")}</dt>
+      <dd><Badge variant={connectionVariant(n.connection)}>{connectionLabel(t, n.connection)}</Badge>
+        {#if n.subscription_active}<Badge>{t("controller.nodes.subscribed")}</Badge>{/if}
+        {#if n.disabled}<Badge variant="warning">{t("controller.nodes.disabled")}</Badge>{/if}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.addresses")}</dt><dd class="font-mono text-xs">{r.addresses.join(", ")}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.fabric_index")}</dt><dd>{r.fabric_index_on_peer ?? "–"}</dd>
+      <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.overview.commissioned_at")}</dt><dd>{r.commissioned_at ? new Date(r.commissioned_at).toLocaleString() : "–"}</dd>
+    </dl>
+    <div class="mt-3 flex flex-wrap gap-2">
+      <Button size="sm" variant="outline" disabled={busy} onclick={() => void setAutoSubscribe(!n.subscription_active)}>
+        {n.subscription_active ? t("controller.overview.unsubscribe") : t("controller.overview.subscribe")}
+      </Button>
+    </div>
+  </Card>
+  <Card class="p-4">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.overview.properties")}</h3>
+    <div class="flex flex-wrap gap-1">
+      {#each flags as f (f)}<Badge variant="muted">{t(`controller.overview.flag.${f}`)}</Badge>{/each}
+    </div>
+    {#if p.idle_mode_duration_seconds}
+      <p class="mt-2 text-sm text-[var(--ha-secondary-text-color)]">{t("controller.overview.idle_mode", { seconds: p.idle_mode_duration_seconds })}</p>
+    {/if}
+    {#if p.specification_version}
+      <p class="mt-1 text-sm text-[var(--ha-secondary-text-color)]">{t("controller.overview.spec_version", { version: `0x${p.specification_version.toString(16).toUpperCase().padStart(8, "0")}` })}</p>
+    {/if}
+  </Card>
+</div>

package/src/lib/pages/controller/node/Updates.svelte

@@ -0,0 +1,75 @@
+<!-- The node's entries of the update queue, an available update to
+     consent to, and the check. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { AvailableUpdate } from "../../../api/client";
+  import Badge from "../../../kit/Badge.svelte";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import EmptyState from "../../../kit/EmptyState.svelte";
+
+  let { nodeId }: { nodeId: string } = $props();
+  const { t, toast, client, controller } = useFabricUI();
+
+  let available = $state<AvailableUpdate[]>([]);
+  let busy = $state(false);
+
+  onMount(() => void controller.loadUpdates());
+
+  const queue = $derived((controller.updates?.queue ?? []).filter((u) => u.node_id_hex === nodeId));
+
+  async function check() {
+    busy = true;
+    try {
+      available = (await client.checkUpdates()).updates.filter((u) => u.node_id_hex === nodeId);
+      if (available.length === 0) toast.info(t("controller.updates.none_available"));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function consent(u: AvailableUpdate) {
+    busy = true;
+    try {
+      await client.consentUpdate({ node_id_hex: u.node_id_hex, vendor_id: u.vendor_id, product_id: u.product_id, target_software_version: u.software_version });
+      toast.success(t("controller.updates.consented"));
+      available = available.filter((a) => a !== u);
+      await controller.loadUpdates();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+{#if controller.updates && !controller.updates.available}
+  <EmptyState message={t("controller.updates.unavailable")} />
+{:else}
+  <Card class="p-4" data-testid="node-updates">
+    {#if queue.length === 0}
+      <p class="text-sm text-[var(--ha-secondary-text-color)]">{t("controller.updates.queue_empty")}</p>
+    {:else}
+      <ul class="space-y-1 text-sm">
+        {#each queue as u (u.target_software_version)}
+          <li class="flex flex-wrap items-center gap-2">
+            <span>{t("controller.updates.version", { version: u.target_software_version })}</span>
+            <Badge>{t(`controller.updates.status.${u.status}`)}</Badge>
+            {#if u.progress_status}<span class="text-xs text-[var(--ha-secondary-text-color)]">{u.progress_status}</span>{/if}
+            {#if u.transferred !== undefined && u.length}<span class="text-xs">{Math.round((u.transferred / u.length) * 100)}%</span>{/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+    <div class="mt-3 flex flex-wrap items-center gap-2">
+      <Button variant="outline" disabled={busy} onclick={() => void check()}>{t("controller.updates.check")}</Button>
+      {#each available as u (u.software_version)}
+        <Button disabled={busy} onclick={() => void consent(u)}>{t("controller.updates.consent", { version: u.software_version_string || String(u.software_version) })}</Button>
+      {/each}
+    </div>
+  </Card>
+{/if}

package/src/lib/pages/controller/node/Window.svelte

@@ -0,0 +1,80 @@
+<!-- A commissioning window on the node for another administrator: the
+     codes, the QR code (renderQrSvg) and the timeout; closing it. The
+     passcode stays on this page; it is not stored. -->
+<script lang="ts">
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import { renderQrSvg } from "../../../qr";
+  import type { NodeWindow } from "../../../api/client";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import Select from "../../../kit/Select.svelte";
+
+  let { nodeId }: { nodeId: string } = $props();
+  const { t, toast, client } = useFabricUI();
+
+  let win = $state<NodeWindow | null>(null);
+  let timeout = $state("900");
+  let busy = $state(false);
+
+  const options = $derived(["180", "300", "600", "900"].map((s) => ({ value: s, label: t("controller.window.minutes", { minutes: Number(s) / 60 }) })));
+  const qrSvg = $derived(win ? renderQrSvg(win.qr_code) : null);
+
+  async function open() {
+    busy = true;
+    try {
+      win = await client.openNodeWindow(nodeId, Number(timeout));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function close() {
+    busy = true;
+    try {
+      await client.closeNodeWindow(nodeId);
+      win = null;
+      toast.success(t("controller.window.closed"));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function copy(v: string) {
+    try {
+      await navigator.clipboard.writeText(v);
+      toast.success(t("node.pair.copied"));
+    } catch {
+      toast.error(t("node.pair.copy_failed"));
+    }
+  }
+</script>
+
+<Card class="p-4">
+  <p class="mb-3 text-sm text-[var(--ha-secondary-text-color)]">{t("controller.window.hint")}</p>
+  {#if !win}
+    <div class="flex flex-wrap items-center gap-2">
+      <Select class="w-auto" ariaLabel={t("controller.window.timeout")} value={timeout} onValueChange={(v) => (timeout = v as typeof timeout)} {options} />
+      <Button disabled={busy} onclick={() => void open()}>{t("controller.window.open")}</Button>
+    </div>
+  {:else}
+    <div class="flex flex-wrap gap-6" data-testid="node-window">
+      <div class="w-48">{@html qrSvg}</div>
+      <dl class="grid grid-cols-[auto_1fr] content-start gap-x-4 gap-y-1 text-sm">
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.window.manual_code")}</dt>
+        <dd class="font-mono">{win.manual_code} <Button size="sm" variant="ghost" onclick={() => void copy(win!.manual_code)}>{t("common.copy")}</Button></dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.window.qr_code")}</dt>
+        <dd class="font-mono text-xs">{win.qr_code}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.window.discriminator")}</dt>
+        <dd>{win.discriminator}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.window.timeout")}</dt>
+        <dd>{t("controller.window.seconds", { seconds: win.timeout_seconds })}</dd>
+      </dl>
+    </div>
+    <Button class="mt-4" variant="outline-destructive" disabled={busy} onclick={() => void close()}>{t("controller.window.close")}</Button>
+  {/if}
+</Card>

package/src/lib/pages/index.ts

@@ -1,4 +1,4 @@
-// The node page family. Each page reads the fabric-ui context
+// The page families. Each page reads the fabric-ui context
 // (provideFabricUI) and renders nothing host-specific.
 export { default as NodeStatus } from "./node/Status.svelte";
 export { default as NodePair } from "./node/Pair.svelte";
@@ -6,3 +6,9 @@ export { default as NodeFabrics } from "./node/Fabrics.svelte";
 export { default as NodeSelection } from "./node/Selection.svelte";
 export { default as NodeEndpoints } from "./node/Endpoints.svelte";
 export { default as NodeDiagnostics } from "./node/Diagnostics.svelte";
+// The controller family (wave U2). ControllerNode takes the node's
+// 16-digit hex id as `nodeId` and, optionally, the first `tab`.
+export { default as ControllerNodes } from "./controller/Nodes.svelte";
+export { default as ControllerCommission } from "./controller/Commission.svelte";
+export { default as ControllerNode } from "./controller/Node.svelte";
+export { default as ControllerSettings } from "./controller/Settings.svelte";

package/src/lib/pages/node/Selection.svelte

@@ -27,7 +27,7 @@
   import LoadingState from "../../kit/LoadingState.svelte";
   import Select from "../../kit/Select.svelte";
   import HostWarnings from "./HostWarnings.svelte";
-  import { distinctValues, fieldMatches, listValues } from "./fields";
+  import { distinctValues, fieldMatches, itemValues } from "./fields";
 
   const { t, toast, node } = useFabricUI();
 
@@ -64,7 +64,7 @@
     const out: ValueFilter[] = schema.filters.map((f) => ({ field: f.field, label: f.label, multi: !!f.multi, options: f.options }));
     for (const col of schema.columns) {
       if (!col.filter || out.some((f) => f.field === col.key)) continue;
-      const values = distinctValues(node.items.map((i) => i.fields[col.key]), !!col.multi);
+      const values = distinctValues(node.items, col.key, !!col.multi);
       out.push({ field: col.key, label: col.label, multi: !!col.multi, options: values.map((v) => ({ value: v, label: v })) });
     }
     return out;
@@ -83,11 +83,11 @@
     const match = makeTextMatcher(search);
     return node.items.filter((item) => {
       for (const [field, value] of Object.entries(filterValues)) {
-        if (value !== ALL && !fieldMatches(item.fields[field], value, multiField.has(field))) return false;
+        if (value !== ALL && !fieldMatches(item, field, value, multiField.has(field))) return false;
       }
       if (!search.trim()) return true;
       const it = current(item);
-      return [it.name, it.group, it.verdict.device_type_name, ...Object.values(it.fields)].some((v) => v && match(v));
+      return [it.name, it.group, it.verdict.device_type_name, ...Object.values(it.fields), ...Object.values(it.lists ?? {}).flat()].some((v) => v && match(v));
     });
   });
 
@@ -184,7 +184,12 @@
     { key: "select", label: t("node.selection.col_select") },
     { key: "state", label: t("node.selection.col_state"), align: "center", get: (i) => stateInfo(i).label },
     { key: "name", label: t("node.selection.col_name"), sortable: true, title: true, get: (i) => current(i).name },
-    ...(schema?.columns ?? []).map((c) => ({ key: "field:" + c.key, label: c.label, sortable: true, get: (i: Item) => i.fields[c.key] ?? "" })),
+    ...(schema?.columns ?? []).map((c) => ({
+      key: "field:" + c.key,
+      label: c.label,
+      sortable: true,
+      get: (i: Item) => (c.multi ? itemValues(i, c.key).join(", ") : (i.fields[c.key] ?? "")),
+    })),
     { key: "device_type", label: t("node.selection.col_device_type"), sortable: true, get: (i) => i.verdict.device_type_name || "—" },
   ]);
 </script>
@@ -228,7 +233,7 @@
   {:else if col.key === "device_type"}
     <span class="text-[var(--ha-secondary-text-color)]">{item.verdict.device_type_name || "—"}</span>
   {:else if multiColumn.has(col.key)}
-    {@const values = listValues(item.fields[col.key.slice("field:".length)])}
+    {@const values = itemValues(item, col.key.slice("field:".length))}
     {#if values.length === 0}
       <span class="text-[var(--ha-secondary-text-color)]">—</span>
     {:else}