@sukramj/fabric-ui 0.1.2 → 0.2.0

package/src/lib/pages/controller/Nodes.svelte

@@ -0,0 +1,156 @@
+<!-- The commissioned nodes: a table with filters by connection, vendor and
+     ICD, and the actions an administrator takes on a node — interview,
+     open a window for another administrator (on the node's page),
+     disable or enable, decommission. A row opens the node's page. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { ControllerNodeSummary } 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 Select from "../../kit/Select.svelte";
+  import { connectionLabel, connectionVariant, nodeName, vendorLabel } from "./format";
+
+  const { t, toast, confirm, client, controller, routes } = useFabricUI();
+
+  onMount(() => {
+    void controller.loadNodes();
+  });
+
+  let connection = $state("");
+  let vendor = $state("");
+  let icd = $state("");
+  let busy = $state<string | null>(null);
+
+  const vendors = $derived([...new Set(controller.nodes.map((n) => vendorLabel(n.vendor_name, n.vendor_id)).filter(Boolean))].sort());
+
+  const rows = $derived(
+    controller.nodes.filter(
+      (n) =>
+        (!connection || n.connection === connection) &&
+        (!vendor || vendorLabel(n.vendor_name, n.vendor_id) === vendor) &&
+        (!icd || (icd === "yes") === n.icd),
+    ),
+  );
+
+  const connectionOptions = $derived([
+    { value: "", label: t("controller.nodes.filter_all") },
+    ...(["connected", "reconnecting", "waiting_for_discovery", "disconnected"] as const).map((s) => ({ value: s, label: connectionLabel(t, s) })),
+  ]);
+  const vendorOptions = $derived([{ value: "", label: t("controller.nodes.filter_all") }, ...vendors.map((v) => ({ value: v, label: v }))]);
+  const icdOptions = $derived([
+    { value: "", label: t("controller.nodes.filter_all") },
+    { value: "yes", label: t("controller.nodes.icd_yes") },
+    { value: "no", label: t("controller.nodes.icd_no") },
+  ]);
+
+  function open(n: ControllerNodeSummary) {
+    location.hash = routes.controllerNode + n.node_id_hex;
+  }
+
+  async function act(n: ControllerNodeSummary, run: () => Promise<void>, done: string) {
+    busy = n.node_id_hex;
+    try {
+      await run();
+      toast.success(t(done));
+      await controller.loadNodes();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = null;
+    }
+  }
+
+  async function decommission(n: ControllerNodeSummary) {
+    const ok = await confirm({
+      title: t("controller.nodes.remove_confirm"),
+      body: t("controller.nodes.remove_confirm_body", { name: nodeName(n) }),
+      destructive: true,
+      confirmLabel: t("common.remove"),
+    });
+    if (ok) await act(n, () => client.decommissionNode(n.node_id_hex), "controller.nodes.removed");
+  }
+
+  const columns: DataColumn<ControllerNodeSummary>[] = $derived([
+    { key: "name", label: t("controller.nodes.col_name"), sortable: true, title: true, get: (n) => nodeName(n) },
+    { key: "vendor", label: t("controller.nodes.col_vendor"), sortable: true, get: (n) => vendorLabel(n.vendor_name, n.vendor_id) },
+    { key: "node_id", label: t("controller.nodes.col_node_id"), sortable: true, get: (n) => n.node_id_hex },
+    { key: "connection", label: t("controller.nodes.col_connection"), sortable: true, get: (n) => n.connection },
+    { key: "addresses", label: t("controller.nodes.col_addresses"), get: (n) => n.addresses.join(" ") },
+    { key: "action", label: "", align: "right", cellClass: "reflow-actions" },
+  ]);
+</script>
+
+<div class="space-y-4">
+  <div class="flex flex-wrap items-center gap-3">
+    <Select class="w-auto" ariaLabel={t("controller.nodes.filter_connection")} value={connection} onValueChange={(v) => (connection = v as typeof connection)} options={connectionOptions} />
+    <Select class="w-auto" ariaLabel={t("controller.nodes.filter_vendor")} value={vendor} onValueChange={(v) => (vendor = v as typeof vendor)} options={vendorOptions} />
+    <Select class="w-auto" ariaLabel={t("controller.nodes.filter_icd")} value={icd} onValueChange={(v) => (icd = v as typeof icd)} options={icdOptions} />
+    <a href={routes.controllerCommission} class="ml-auto text-sm font-medium text-[var(--ha-primary-color)] hover:underline">{t("controller.nodes.commission")}</a>
+  </div>
+  {#if controller.nodesLoading && controller.nodes.length === 0}
+    <LoadingState message={t("common.loading")} />
+  {:else if controller.nodesError}
+    <ErrorState message={controller.nodesError} onRetry={() => void controller.loadNodes()} />
+  {:else}
+    <Card class="p-4">
+      <DataTable
+        {rows}
+        {columns}
+        rowKey={(n) => n.node_id_hex}
+        persistKey="controller-nodes"
+        search
+        searchPlaceholder={t("common.search")}
+        emptyMessage={t("controller.nodes.empty")}
+        initialSort={{ key: "name", asc: true }}
+        onRowClick={open}
+      >
+        {#snippet cell(n, col)}
+          {#if col.key === "name"}
+            <span class="inline-flex flex-wrap items-center gap-1 text-[var(--ha-primary-text-color)]">
+              {nodeName(n)}
+              {#if n.icd}<Badge variant="muted">{t("controller.nodes.icd")}</Badge>{/if}
+              {#if n.disabled}<Badge variant="warning">{t("controller.nodes.disabled")}</Badge>{/if}
+            </span>
+          {:else if col.key === "vendor"}
+            <span class="text-[var(--ha-secondary-text-color)]">{vendorLabel(n.vendor_name, n.vendor_id)}</span>
+          {:else if col.key === "node_id"}
+            <span class="font-mono text-xs text-[var(--ha-secondary-text-color)]">0x{n.node_id_hex}</span>
+          {:else if col.key === "connection"}
+            <span class="inline-flex flex-wrap items-center gap-1">
+              <Badge variant={connectionVariant(n.connection)}>{connectionLabel(t, n.connection)}</Badge>
+              {#if n.subscription_active}<Badge variant="default">{t("controller.nodes.subscribed")}</Badge>{/if}
+            </span>
+          {:else if col.key === "addresses"}
+            <span class="font-mono text-xs text-[var(--ha-secondary-text-color)]">{n.addresses.join(", ")}</span>
+          {:else if col.key === "action"}
+            <span class="inline-flex flex-wrap justify-end gap-1">
+              <Button size="sm" variant="ghost" disabled={busy === n.node_id_hex} onclick={() => void act(n, () => client.interviewNode(n.node_id_hex), "controller.nodes.interviewed")}>
+                {t("controller.nodes.interview")}
+              </Button>
+              <a class="inline-flex items-center px-2 text-sm text-[var(--ha-primary-color)] hover:underline" href={`${routes.controllerNode}${n.node_id_hex}?tab=window`}>{t("controller.nodes.window")}</a>
+              {#if n.disabled}
+                <Button size="sm" variant="ghost" disabled={busy === n.node_id_hex} onclick={() => void act(n, () => client.enableNode(n.node_id_hex), "controller.nodes.enabled")}>
+                  {t("controller.nodes.enable")}
+                </Button>
+              {:else}
+                <Button size="sm" variant="ghost" disabled={busy === n.node_id_hex} onclick={() => void act(n, () => client.disableNode(n.node_id_hex), "controller.nodes.disabled_done")}>
+                  {t("controller.nodes.disable")}
+                </Button>
+              {/if}
+              <Button size="sm" variant="ghost" class="text-[var(--ha-error-color)]" disabled={busy === n.node_id_hex} onclick={() => void decommission(n)}>
+                {t("common.remove")}
+              </Button>
+            </span>
+          {/if}
+        {/snippet}
+      </DataTable>
+    </Card>
+  {/if}
+</div>

package/src/lib/pages/controller/Settings.svelte

@@ -0,0 +1,160 @@
+<!-- The controller's settings: its fabric label, the stored Wi-Fi and
+     Thread credentials (names only; a secret is entered once and never
+     shown again) and the controller's identity. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { Credential, CredentialRequest } 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 Input from "../../kit/Input.svelte";
+  import Select from "../../kit/Select.svelte";
+  import { vendorLabel } from "./format";
+
+  const { t, toast, confirm, client, controller } = useFabricUI();
+
+  let label = $state("");
+  let kind = $state<Credential["kind"]>("wifi");
+  let id = $state("");
+  let ssid = $state("");
+  let secret = $state("");
+  let busy = $state(false);
+
+  onMount(async () => {
+    await controller.loadStatus();
+    label = controller.status?.label ?? "";
+    if (controller.status?.capabilities.credentials) void controller.loadCredentials();
+  });
+
+  async function saveLabel() {
+    busy = true;
+    try {
+      await client.setFabricLabel(label.trim());
+      toast.success(t("controller.settings.label_saved"));
+      await controller.loadStatus();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function addCredential() {
+    const req: CredentialRequest = { kind, id: id.trim() };
+    if (kind === "wifi") {
+      req.ssid = ssid.trim();
+      req.passphrase = secret;
+    } else {
+      req.dataset_hex = secret.replace(/\s+/g, "");
+    }
+    busy = true;
+    try {
+      await client.setCredential(req);
+      toast.success(t("controller.settings.credential_saved"));
+      id = ssid = secret = "";
+      await controller.loadCredentials();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function removeCredential(c: Credential) {
+    const ok = await confirm({ title: t("controller.settings.credential_remove"), body: c.name, destructive: true, confirmLabel: t("common.remove") });
+    if (!ok) return;
+    try {
+      await client.removeCredential(c.kind, c.id);
+      await controller.loadCredentials();
+    } catch (err) {
+      toast.error(errorText(err));
+    }
+  }
+
+  const kindOptions = $derived([
+    { value: "wifi", label: t("controller.credential.kind_wifi") },
+    { value: "thread", label: t("controller.credential.kind_thread") },
+  ]);
+
+  const columns: DataColumn<Credential>[] = $derived([
+    { key: "name", label: t("controller.settings.col_name"), title: true, sortable: true, get: (c) => c.name },
+    { key: "kind", label: t("controller.settings.col_kind"), sortable: true, get: (c) => c.kind },
+    { key: "id", label: t("controller.settings.col_id"), sortable: true, get: (c) => c.id },
+    { key: "action", label: "", align: "right", cellClass: "reflow-actions" },
+  ]);
+
+  const s = $derived(controller.status);
+</script>
+
+<div class="space-y-6">
+  {#if controller.statusError}
+    <ErrorState message={controller.statusError} onRetry={() => void controller.loadStatus()} />
+  {/if}
+  <Card class="p-4">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.settings.label")}</h3>
+    <form class="flex flex-wrap items-center gap-2" onsubmit={(e) => { e.preventDefault(); void saveLabel(); }}>
+      <Input class="max-w-xs" bind:value={label} maxlength={32} aria-label={t("controller.settings.label")} />
+      <Button type="submit" disabled={busy}>{t("common.save")}</Button>
+    </form>
+    <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("controller.settings.label_hint")}</p>
+  </Card>
+
+  <Card class="p-4" data-testid="credentials">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.settings.credentials")}</h3>
+    {#if s && !s.capabilities.credentials}
+      <p class="text-sm text-[var(--ha-secondary-text-color)]">{t("controller.settings.no_store")}</p>
+    {:else}
+      {#if controller.credentialsError}
+        <ErrorState message={controller.credentialsError} onRetry={() => void controller.loadCredentials()} />
+      {:else}
+        <DataTable rows={controller.credentials} {columns} rowKey={(c) => `${c.kind}:${c.id}`} emptyMessage={t("controller.settings.credentials_empty")}>
+          {#snippet cell(c, col)}
+            {#if col.key === "name"}
+              {c.name}
+            {:else if col.key === "kind"}
+              <Badge variant="muted">{t(`controller.credential.kind_${c.kind}`)}</Badge>
+            {:else if col.key === "id"}
+              <span class="font-mono text-xs">{c.id}</span>
+            {:else if col.key === "action"}
+              <Button size="sm" variant="ghost" class="text-[var(--ha-error-color)]" onclick={() => void removeCredential(c)}>{t("common.remove")}</Button>
+            {/if}
+          {/snippet}
+        </DataTable>
+      {/if}
+      <form class="mt-4 flex flex-wrap items-center gap-2" onsubmit={(e) => { e.preventDefault(); void addCredential(); }}>
+        <Select class="w-auto" ariaLabel={t("controller.settings.col_kind")} value={kind} onValueChange={(v) => (kind = v as typeof kind)} options={kindOptions} />
+        <Input class="w-32" bind:value={id} placeholder={t("controller.settings.col_id")} aria-label={t("controller.settings.col_id")} />
+        {#if kind === "wifi"}
+          <Input class="w-40" bind:value={ssid} placeholder={t("controller.settings.ssid")} aria-label={t("controller.settings.ssid")} />
+          <Input class="w-48" type="password" autocomplete="new-password" bind:value={secret} placeholder={t("controller.settings.passphrase")} aria-label={t("controller.settings.passphrase")} />
+        {:else}
+          <Input class="w-72 font-mono" type="password" autocomplete="off" bind:value={secret} placeholder={t("controller.settings.dataset")} aria-label={t("controller.settings.dataset")} />
+        {/if}
+        <Button type="submit" disabled={busy || !id.trim()}>{t("controller.settings.credential_add")}</Button>
+      </form>
+      <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("controller.settings.write_only")}</p>
+    {/if}
+  </Card>
+
+  {#if s}
+    <Card class="p-4" data-testid="controller-info">
+      <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.settings.info")}</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.settings.fabric_id")}</dt><dd class="font-mono">0x{s.fabric_id_hex}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.settings.compressed_fabric_id")}</dt><dd class="font-mono">{s.compressed_fabric_id_hex}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.settings.node_id")}</dt><dd class="font-mono">0x{s.node_id_hex}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.settings.vendor")}</dt><dd>{vendorLabel(s.vendor_name, s.vendor_id)}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.settings.nodes")}</dt><dd>{s.node_count}</dd>
+        <dt class="text-[var(--ha-secondary-text-color)]">{t("controller.settings.capabilities")}</dt>
+        <dd class="flex flex-wrap gap-1">
+          {#each (["ota", "credentials", "ble"] as const).filter((k) => s.capabilities[k]) as k (k)}<Badge variant="muted">{t(`controller.settings.cap.${k}`)}</Badge>{/each}
+        </dd>
+      </dl>
+    </Card>
+  {/if}
+</div>

package/src/lib/pages/controller/format.ts

@@ -0,0 +1,49 @@
+// Helpers the controller pages share: a node's display name, the badge of
+// a connection state, ids as the contract carries them.
+import type { ConnectionState, ControllerNodeSummary } from "../../api/client";
+import type { Translate } from "../../i18n";
+
+/** A node's name: its label, else its product, else its id. */
+export function nodeName(n: ControllerNodeSummary): string {
+  return n.node_label || n.product_name || `0x${n.node_id_hex}`;
+}
+
+/** The vendor of a node or a device: the name the server sends, else the id. */
+export function vendorLabel(name: string | undefined, id: number | undefined): string {
+  if (name) return name;
+  if (id === undefined) return "";
+  return `0x${id.toString(16).toUpperCase().padStart(4, "0")}`;
+}
+
+export type BadgeVariant = "default" | "success" | "warning" | "danger" | "muted";
+
+/** The badge colour of a connection state. */
+export function connectionVariant(s: ConnectionState): BadgeVariant {
+  switch (s) {
+    case "connected":
+      return "success";
+    case "reconnecting":
+      return "warning";
+    case "waiting_for_discovery":
+      return "muted";
+    default:
+      return "danger";
+  }
+}
+
+/** A connection state's label. */
+export function connectionLabel(t: Translate, s: ConnectionState): string {
+  return t(`controller.connection.${s}`);
+}
+
+/** A 32-bit id as "0x0006", the contract's hex form. */
+export function hexId(v: number): string {
+  return `0x${v.toString(16).toUpperCase().padStart(4, "0")}`;
+}
+
+/** Parses "0x0006", "6" or "0006" as hex; null when it is not hex. */
+export function parseHexId(s: string): number | null {
+  const t = s.trim().replace(/^0x/i, "");
+  if (!/^[0-9a-f]{1,8}$/i.test(t)) return null;
+  return parseInt(t, 16);
+}

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

@@ -0,0 +1,151 @@
+<!-- The node's access control entries of our fabric: read, edit, write
+     back as one list. Saving a list without an Administer entry for this
+     controller locks it out; the page asks first. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { AclEntry } 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 Input from "../../../kit/Input.svelte";
+  import LoadingState from "../../../kit/LoadingState.svelte";
+  import Select from "../../../kit/Select.svelte";
+  import { hexId, parseHexId } from "../format";
+
+  let { nodeId }: { nodeId: string } = $props();
+  const { t, toast, confirm, client, controller } = useFabricUI();
+
+  let entries = $state<AclEntry[] | null>(null);
+  let error = $state<string | null>(null);
+  let dirty = $state(false);
+  let busy = $state(false);
+
+  let privilege = $state<AclEntry["privilege"]>("operate");
+  let authMode = $state<AclEntry["auth_mode"]>("case");
+  let subjects = $state("");
+  let targetCluster = $state("");
+  let targetEndpoint = $state("");
+
+  const PRIVILEGES = ["view", "proxy_view", "operate", "manage", "administer"] as const;
+  const MODES = ["pase", "case", "group"] as const;
+
+  async function load() {
+    error = null;
+    try {
+      entries = (await client.nodeAcl(nodeId)).entries;
+      dirty = false;
+    } catch (err) {
+      error = errorText(err);
+    }
+  }
+  onMount(() => void load());
+
+  function add() {
+    const subs = subjects.split(/[\s,]+/).filter(Boolean);
+    if (subs.some((s) => !/^(0x)?[0-9a-f]{1,16}$/i.test(s))) {
+      toast.error(t("controller.acl.invalid_subject"));
+      return;
+    }
+    const target: AclEntry["targets"][number] = {};
+    if (targetCluster.trim()) {
+      const c = parseHexId(targetCluster);
+      if (c === null) {
+        toast.error(t("controller.acl.invalid_target"));
+        return;
+      }
+      target.cluster_hex = hexId(c);
+    }
+    if (targetEndpoint.trim()) target.endpoint = Number(targetEndpoint);
+    const e: AclEntry = {
+      privilege,
+      auth_mode: authMode,
+      subjects_hex: subs.map((s) => s.replace(/^0x/i, "").toUpperCase().padStart(16, "0")),
+      targets: Object.keys(target).length ? [target] : [],
+    };
+    entries = [...(entries ?? []), e];
+    subjects = targetCluster = targetEndpoint = "";
+    dirty = true;
+  }
+
+  function remove(i: number) {
+    entries = (entries ?? []).filter((_, j) => j !== i);
+    dirty = true;
+  }
+
+  // Does the list keep this controller's Administer access?
+  function keepsUs(list: AclEntry[]): boolean {
+    const own = controller.status?.node_id_hex;
+    return list.some((e) => e.privilege === "administer" && e.auth_mode === "case" && (!own || e.subjects_hex.length === 0 || e.subjects_hex.includes(own)));
+  }
+
+  async function save() {
+    if (!entries) return;
+    if (!keepsUs(entries)) {
+      const ok = await confirm({ title: t("controller.acl.lockout"), body: t("controller.acl.lockout_body"), destructive: true, confirmLabel: t("common.save") });
+      if (!ok) return;
+    }
+    busy = true;
+    try {
+      const res = await client.setNodeAcl(nodeId, entries);
+      if (res.status === 0) toast.success(t("controller.acl.saved"));
+      else toast.error(t("controller.attributes.write_status", { status: hexId(res.status) }));
+      await load();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  const privilegeOptions = $derived(PRIVILEGES.map((p) => ({ value: p, label: t(`controller.acl.privilege.${p}`) })));
+  const modeOptions = $derived(MODES.map((m) => ({ value: m, label: t(`controller.acl.mode.${m}`) })));
+</script>
+
+{#if error}
+  <ErrorState message={error} onRetry={() => void load()} />
+{:else if !entries}
+  <LoadingState message={t("common.loading")} />
+{:else}
+  <div class="space-y-4">
+    <Card class="p-4">
+      {#if entries.length === 0}
+        <EmptyState message={t("controller.acl.empty")} />
+      {:else}
+        <ul class="divide-y divide-[var(--ha-divider-color)]" data-testid="acl-entries">
+          {#each entries as e, i (i)}
+            <li class="flex flex-wrap items-center gap-2 py-2 text-sm">
+              <Badge variant={e.privilege === "administer" ? "warning" : "default"}>{t(`controller.acl.privilege.${e.privilege}`)}</Badge>
+              <Badge variant="muted">{t(`controller.acl.mode.${e.auth_mode}`)}</Badge>
+              <span class="font-mono text-xs">{e.subjects_hex.length ? e.subjects_hex.map((s) => "0x" + s).join(", ") : t("controller.acl.any_subject")}</span>
+              <span class="text-xs text-[var(--ha-secondary-text-color)]">
+                {e.targets.length
+                  ? e.targets.map((x) => [x.endpoint !== undefined ? t("controller.endpoints.endpoint", { number: x.endpoint }) : "", x.cluster_hex ?? "", x.device_type_hex ?? ""].filter(Boolean).join(" ")).join("; ")
+                  : t("controller.acl.whole_node")}
+              </span>
+              <Button size="sm" variant="ghost" class="ml-auto text-[var(--ha-error-color)]" onclick={() => remove(i)}>{t("common.remove")}</Button>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </Card>
+    <Card class="p-4">
+      <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("controller.acl.add")}</h3>
+      <div class="flex flex-wrap items-center gap-2">
+        <Select class="w-auto" ariaLabel={t("controller.acl.privilege_label")} value={privilege} onValueChange={(v) => (privilege = v as typeof privilege)} options={privilegeOptions} />
+        <Select class="w-auto" ariaLabel={t("controller.acl.mode_label")} value={authMode} onValueChange={(v) => (authMode = v as typeof authMode)} options={modeOptions} />
+        <Input class="w-64 font-mono" bind:value={subjects} placeholder={t("controller.acl.subjects")} aria-label={t("controller.acl.subjects")} />
+        <Input class="w-28 font-mono" bind:value={targetCluster} placeholder={t("controller.acl.target_cluster")} aria-label={t("controller.acl.target_cluster")} />
+        <Input class="w-24" bind:value={targetEndpoint} placeholder={t("controller.acl.target_endpoint")} aria-label={t("controller.acl.target_endpoint")} inputmode="numeric" />
+        <Button variant="outline" onclick={add}>{t("controller.acl.add_entry")}</Button>
+      </div>
+      <div class="mt-3 flex gap-2">
+        <Button disabled={!dirty || busy} onclick={() => void save()}>{t("common.save")}</Button>
+        <Button variant="ghost" disabled={!dirty || busy} onclick={() => void load()}>{t("controller.acl.discard")}</Button>
+      </div>
+    </Card>
+  </div>
+{/if}

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

@@ -0,0 +1,100 @@
+<!-- A targeted attribute reader: one concrete path at a time (no
+     inventory), the value as JSON; an administrator can write the value
+     back. -->
+<script lang="ts">
+  import { useFabricUI } from "../../../context";
+  import { errorText } from "../../../store.svelte";
+  import type { AttributeValue, ControllerNodeDetail } from "../../../api/client";
+  import Button from "../../../kit/Button.svelte";
+  import Card from "../../../kit/Card.svelte";
+  import Input from "../../../kit/Input.svelte";
+  import Select from "../../../kit/Select.svelte";
+  import { hexId, parseHexId } from "../format";
+
+  let { nodeId, detail }: { nodeId: string; detail: ControllerNodeDetail } = $props();
+  const { t, toast, client } = useFabricUI();
+
+  // svelte-ignore state_referenced_locally
+  let endpoint = $state(String(detail.endpoints[0]?.endpoint ?? 0));
+  let cluster = $state("");
+  let attribute = $state("0x0000");
+  let result = $state<AttributeValue | null>(null);
+  let edit = $state("");
+  let busy = $state(false);
+
+  const endpointOptions = $derived(detail.endpoints.map((e) => ({ value: String(e.endpoint), label: t("controller.endpoints.endpoint", { number: e.endpoint }) })));
+  const clusterOptions = $derived(
+    (detail.endpoints.find((e) => String(e.endpoint) === endpoint)?.clusters ?? []).map((c) => ({ value: c.id_hex, label: `${c.name || c.id_hex} (${c.id_hex})` })),
+  );
+
+  function path() {
+    const c = parseHexId(cluster);
+    const a = parseHexId(attribute);
+    if (c === null || a === null) return null;
+    return { endpoint: Number(endpoint), cluster_hex: hexId(c), attribute_hex: hexId(a) };
+  }
+
+  async function read() {
+    const p = path();
+    if (!p) {
+      toast.error(t("controller.attributes.invalid_path"));
+      return;
+    }
+    busy = true;
+    try {
+      const res = await client.readAttributes(nodeId, [p]);
+      result = res.values[0] ?? null;
+      edit = result && result.status === undefined ? JSON.stringify(result.value) : "";
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function write() {
+    const p = path();
+    if (!p) return;
+    let value: unknown;
+    try {
+      value = JSON.parse(edit);
+    } catch {
+      toast.error(t("controller.attributes.invalid_json"));
+      return;
+    }
+    busy = true;
+    try {
+      const res = await client.writeAttribute(nodeId, { ...p, value });
+      if (res.status === 0) toast.success(t("controller.attributes.written"));
+      else toast.error(t("controller.attributes.write_status", { status: hexId(res.status) }));
+      await read();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+</script>
+
+<Card class="p-4">
+  <p class="mb-3 text-sm text-[var(--ha-secondary-text-color)]">{t("controller.attributes.hint")}</p>
+  <form class="flex flex-wrap items-center gap-2" onsubmit={(e) => { e.preventDefault(); void read(); }}>
+    <Select class="w-auto" ariaLabel={t("controller.attributes.endpoint")} value={endpoint} onValueChange={(v) => (endpoint = v as typeof endpoint)} options={endpointOptions} />
+    <Select class="w-auto" ariaLabel={t("controller.attributes.cluster")} value={cluster} onValueChange={(v) => (cluster = v as typeof cluster)} options={clusterOptions} />
+    <Input class="w-28 font-mono" bind:value={attribute} aria-label={t("controller.attributes.attribute")} placeholder="0x0000" />
+    <Button type="submit" disabled={busy || !cluster}>{t("controller.attributes.read")}</Button>
+  </form>
+  {#if result}
+    <div class="mt-4" data-testid="attribute-result">
+      {#if result.status !== undefined}
+        <p class="text-sm text-[var(--ha-error-color)]">{t("controller.attributes.status", { status: hexId(result.status) })}</p>
+      {:else}
+        <pre class="overflow-x-auto rounded bg-[var(--ha-secondary-background-color)] p-2 font-mono text-xs">{JSON.stringify(result.value, null, 2)}</pre>
+        <div class="mt-2 flex flex-wrap items-center gap-2">
+          <Input class="max-w-md font-mono" bind:value={edit} aria-label={t("controller.attributes.value")} />
+          <Button variant="outline" disabled={busy} onclick={() => void write()}>{t("controller.attributes.write")}</Button>
+        </div>
+      {/if}
+    </div>
+  {/if}
+</Card>