@sukramj/fabric-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,186 @@
+<!-- Pairing: open a commissioning window, show its QR code, manual code and
+     countdown, close it, and report the controller that paired. Ported from
+     openccu-loom assets/ui/src/routes/matter/MatterPair.svelte:1-279 at
+     b40b289a; the host-readiness gate becomes the node's own "no endpoint
+     exposed yet" hint, and the colours are the theme tokens. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import { renderQrSvg } from "../../qr";
+  import Button from "../../kit/Button.svelte";
+  import Card from "../../kit/Card.svelte";
+  import Select from "../../kit/Select.svelte";
+
+  const { t, toast, node } = useFabricUI();
+
+  let hydrateLoading = $state(true);
+  let hydrateError = $state<string | null>(null);
+  let opening = $state(false);
+  let closing = $state(false);
+  let selectedDuration = $state(300);
+
+  // A refresh, a tab switch or a window opened elsewhere shows the codes
+  // and the countdown instead of the empty form.
+  onMount(async () => {
+    try {
+      await node.hydrateCommissioning();
+    } catch (err) {
+      hydrateError = errorText(err);
+    } finally {
+      hydrateLoading = false;
+    }
+  });
+
+  // $derived, not a const: the labels follow a live locale switch.
+  const durationOptions = $derived([
+    { label: `5 ${t("node.pair.minutes")}`, value: "300" },
+    { label: `10 ${t("node.pair.minutes")}`, value: "600" },
+    { label: `15 ${t("node.pair.minutes")}`, value: "900" },
+  ]);
+
+  const phase = $derived(node.commissioning.phase);
+  const win = $derived(node.commissioning.window);
+  const remaining = $derived(node.commissioning.remaining);
+  const addedLabel = $derived(node.commissioning.addedFabricLabel);
+
+  // Opening a window on a node controllers already hold adds a controller;
+  // the card says which of the two the operator is doing.
+  const fabricCount = $derived(node.status?.fabric_count ?? 0);
+  const alreadyPaired = $derived(fabricCount > 0);
+  const noEndpoint = $derived(node.status !== null && node.status.enabled && node.status.endpoint_count === 0);
+
+  // The clipboard API is unavailable on a page served over plain HTTP (an
+  // Ingress, a bare LAN address), so a refusal has to surface.
+  async function copy(value: string) {
+    try {
+      await navigator.clipboard.writeText(value);
+      toast.success(t("node.pair.copied"));
+    } catch {
+      toast.error(t("node.pair.copy_failed"));
+    }
+  }
+
+  async function openWindow() {
+    opening = true;
+    try {
+      await node.openWindow(selectedDuration);
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      opening = false;
+    }
+  }
+
+  async function closeWindow() {
+    closing = true;
+    try {
+      await node.closeWindow();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      closing = false;
+    }
+  }
+
+  const RING_R = 54;
+  const RING_C = 2 * Math.PI * RING_R;
+  const ringOffset = $derived(!remaining || !win || !win.duration_seconds ? 0 : RING_C * (1 - remaining / win.duration_seconds));
+  const qrSvg = $derived(win?.qr_code ? renderQrSvg(win.qr_code) : null);
+</script>
+
+<div class="max-w-lg">
+  {#if hydrateLoading}
+    <p class="text-sm text-[var(--ha-secondary-text-color)]">{t("node.pair.loading")}</p>
+  {:else if hydrateError}
+    <p class="text-sm text-[var(--ha-error-color)]">{t("node.pair.load_error")}</p>
+  {:else if phase === "idle"}
+    <Card class="p-6">
+      <h2 class="mb-4 text-base font-semibold text-[var(--ha-primary-text-color)]">{t("node.pair.window_open_duration")}</h2>
+      {#if alreadyPaired}
+        <p class="mb-4 text-sm text-[var(--ha-secondary-text-color)]">{t("node.pair.already_paired", { count: fabricCount })}</p>
+      {/if}
+      {#if noEndpoint}
+        <p class="mb-4 text-sm font-medium text-[var(--ha-secondary-text-color)]">{t("node.pair.waiting")}</p>
+      {/if}
+      <div class="mb-4 flex flex-wrap items-center gap-3">
+        <Select
+          class="w-auto"
+          value={String(selectedDuration)}
+          onValueChange={(v) => (selectedDuration = Number(v))}
+          ariaLabel={t("node.pair.window_open_duration")}
+          options={durationOptions}
+        />
+        <Button class="w-full sm:w-auto" disabled={opening} onclick={() => void openWindow()}>
+          {opening ? t("common.saving") : alreadyPaired ? t("node.pair.add_controller") : t("node.pair.window_open")}
+        </Button>
+      </div>
+      <p class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.pair.qr_caption")}</p>
+    </Card>
+  {:else if phase === "open" && win}
+    <Card class="p-6">
+      <h2 class="mb-4 text-base font-semibold text-[var(--ha-primary-text-color)]">{t("node.pair.qr_caption")}</h2>
+      <div class="flex flex-col items-center gap-4">
+        {#if remaining !== null}
+          <div class="relative flex items-center justify-center">
+            <svg width="120" height="120" viewBox="0 0 120 120" aria-hidden="true">
+              <circle cx="60" cy="60" r={RING_R} fill="none" stroke="var(--ha-divider-color)" stroke-width="8" />
+              <circle
+                cx="60"
+                cy="60"
+                r={RING_R}
+                fill="none"
+                stroke="var(--ha-primary-color)"
+                stroke-width="8"
+                stroke-dasharray={RING_C}
+                stroke-dashoffset={ringOffset}
+                stroke-linecap="round"
+                transform="rotate(-90 60 60)"
+                style="transition: stroke-dashoffset 1s linear;"
+              />
+            </svg>
+            <span class="absolute text-xl font-semibold text-[var(--ha-primary-text-color)]">{remaining}s</span>
+          </div>
+        {/if}
+        {#if qrSvg}
+          <div class="max-w-full rounded border border-[var(--ha-divider-color)] p-2" aria-label={t("node.pair.qr_caption")} data-testid="pair-qr">
+            <!-- The SVG is built locally from the payload; nothing user-supplied is injected. -->
+            <div class="h-auto max-w-full">{@html qrSvg}</div>
+          </div>
+        {/if}
+        <div class="text-center">
+          <p class="mb-1 text-xs text-[var(--ha-secondary-text-color)]">{t("node.pair.manual_code")}</p>
+          <div class="flex items-center justify-center gap-2">
+            <p class="overflow-x-auto whitespace-nowrap font-mono text-lg font-semibold tracking-widest text-[var(--ha-primary-text-color)]">
+              {win.manual_code}
+            </p>
+            <Button variant="ghost" size="sm" aria-label={t("node.pair.copy_manual_code")} onclick={() => void copy(win.manual_code)}>
+              {t("common.copy")}
+            </Button>
+          </div>
+        </div>
+        <details class="w-full">
+          <summary class="cursor-pointer text-xs text-[var(--ha-secondary-text-color)]">{t("node.pair.qr_payload")}</summary>
+          <div class="mt-1 flex items-start gap-2">
+            <p class="break-all font-mono text-xs text-[var(--ha-secondary-text-color)]">{win.qr_code}</p>
+            <Button variant="ghost" size="sm" aria-label={t("node.pair.copy_qr_payload")} onclick={() => void copy(win.qr_code)}>
+              {t("common.copy")}
+            </Button>
+          </div>
+        </details>
+        <Button variant="outline" size="sm" disabled={closing} onclick={() => void closeWindow()}>
+          {closing ? t("common.saving") : t("node.pair.close_window")}
+        </Button>
+      </div>
+    </Card>
+  {:else if phase === "success"}
+    <Card class="p-6 text-center">
+      <div class="mb-3 text-4xl text-[var(--ha-success-color)]" aria-hidden="true">✓</div>
+      <h2 class="mb-2 text-base font-semibold text-[var(--ha-primary-text-color)]">{t("node.pair.success")}</h2>
+      {#if addedLabel}
+        <p class="mb-4 text-sm text-[var(--ha-secondary-text-color)]">{addedLabel}</p>
+      {/if}
+      <Button onclick={() => node.resetCommissioning()}>{t("common.close")}</Button>
+    </Card>
+  {/if}
+</div>

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

@@ -0,0 +1,388 @@
+<!-- The host's selection: which items the node exposes. Generic over the
+     provider's schema — its columns, its filters, its groups — with search,
+     bulk selection, a dirty map, a preview of the verdicts before anything
+     is written, and the save/discard bar. Ported from openccu-loom
+     assets/ui/src/routes/matter/MatterExposureList.svelte:1-584 at
+     b40b289a: the host's fixed columns, kind filter and per-item conflict
+     hints become the schema's columns and filters; the class chips become a
+     value filter per filterable column; Preview before Apply is new. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { Item, VerdictState } from "../../api/client";
+  import type { DataColumn } from "../../kit/data-table";
+  import type { IconName } from "../../kit/icons";
+  import { makeTextMatcher } from "../../kit/utils";
+  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 EmptyState from "../../kit/EmptyState.svelte";
+  import ErrorState from "../../kit/ErrorState.svelte";
+  import Icon from "../../kit/Icon.svelte";
+  import Input from "../../kit/Input.svelte";
+  import LoadingState from "../../kit/LoadingState.svelte";
+  import Select from "../../kit/Select.svelte";
+
+  const { t, toast, node } = useFabricUI();
+
+  // A host without a selection says so in its status; the page then
+  // loads nothing.
+  const unavailable = $derived(node.status !== null && !node.status.exposure);
+
+  onMount(() => {
+    if (!unavailable) void node.loadExposure();
+  });
+
+  const ALL = "__all__";
+  let search = $state("");
+  let filterValues = $state<Record<string, string>>({});
+  let selected = $state<Set<string>>(new Set());
+  let drawer = $state<Item | null>(null);
+  let drawerName = $state("");
+  let drawerEnabled = $state(false);
+  let previewItems = $state<Item[] | null>(null);
+  let previewing = $state(false);
+  let saving = $state(false);
+
+  const schema = $derived(node.schema);
+
+  // The value filters: the host's fixed filters, then one per filterable
+  // column with the distinct values the items carry.
+  type ValueFilter = { field: string; label: string; options: { value: string; label: string }[] };
+  const valueFilters = $derived.by<ValueFilter[]>(() => {
+    if (!schema) return [];
+    const out: ValueFilter[] = schema.filters.map((f) => ({ field: f.field, label: f.label, options: f.options }));
+    for (const col of schema.columns) {
+      if (!col.filter || out.some((f) => f.field === col.key)) continue;
+      const values = [...new Set(node.items.map((i) => i.fields[col.key]).filter((v): v is string => !!v))];
+      values.sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }));
+      out.push({ field: col.key, label: col.label, options: values.map((v) => ({ value: v, label: v })) });
+    }
+    return out;
+  });
+
+  // The item as the page shows it: with its pending change applied.
+  function current(item: Item): Item {
+    const p = node.pending.get(item.key);
+    if (!p) return item;
+    return { ...item, enabled: p.enabled, name: p.name ?? item.name };
+  }
+
+  const filtered = $derived.by(() => {
+    const match = makeTextMatcher(search);
+    return node.items.filter((item) => {
+      for (const [field, value] of Object.entries(filterValues)) {
+        if (value !== ALL && item.fields[field] !== value) 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));
+    });
+  });
+
+  type StateInfo = { icon: IconName; color: string; label: string };
+
+  function stateInfo(item: Item): StateInfo {
+    const it = current(item);
+    const s = it.verdict.state;
+    if (s === "unmappable") return { icon: "mdi:cancel", color: "text-[var(--ha-error-color)]", label: t("node.selection.state_unmappable") };
+    if (it.enabled && s === "mappable") return { icon: "mdi:check-circle", color: "text-[var(--ha-success-color)]", label: t("node.selection.state_exposed") };
+    if (it.enabled && s === "partially_mappable") return { icon: "mdi:alert-circle", color: "text-[var(--ha-warning-color)]", label: t("node.selection.state_partial") };
+    return { icon: "mdi:circle-outline", color: "text-[var(--ha-disabled-text-color)]", label: t("node.selection.state_available") };
+  }
+
+  function verdictHint(s: VerdictState): string {
+    if (s === "unmappable") return t("node.selection.unmappable_hint");
+    if (s === "partially_mappable") return t("node.selection.partially_mappable_hint");
+    return t("node.selection.mappable_hint");
+  }
+
+  const legend = $derived<StateInfo[]>([
+    { icon: "mdi:check-circle", color: "text-[var(--ha-success-color)]", label: t("node.selection.state_exposed") },
+    { icon: "mdi:alert-circle", color: "text-[var(--ha-warning-color)]", label: t("node.selection.state_partial") },
+    { icon: "mdi:circle-outline", color: "text-[var(--ha-disabled-text-color)]", label: t("node.selection.state_available") },
+    { icon: "mdi:cancel", color: "text-[var(--ha-error-color)]", label: t("node.selection.state_unmappable") },
+  ]);
+
+  const bulkable = (item: Item) => item.verdict.state !== "unmappable";
+
+  function toggleSelect(item: Item) {
+    if (!bulkable(item)) return;
+    const next = new Set(selected);
+    if (next.has(item.key)) next.delete(item.key);
+    else next.add(item.key);
+    selected = next;
+  }
+
+  function selectAll() {
+    selected = new Set(filtered.filter(bulkable).map((i) => i.key));
+  }
+
+  function bulkSet(enabled: boolean) {
+    for (const item of filtered) if (selected.has(item.key)) node.markDirty(item, { enabled });
+    selected = new Set();
+  }
+
+  function openDrawer(item: Item) {
+    const it = current(item);
+    drawer = item;
+    drawerName = it.name;
+    drawerEnabled = it.enabled;
+  }
+
+  function saveDrawer() {
+    if (!drawer) return;
+    node.markDirty(drawer, { enabled: drawerEnabled, name: drawerName });
+    drawer = null;
+  }
+
+  async function preview() {
+    previewing = true;
+    try {
+      previewItems = await node.preview();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      previewing = false;
+    }
+  }
+
+  async function apply() {
+    saving = true;
+    try {
+      const applied = await node.saveBulk();
+      previewItems = null;
+      toast.success(t("node.selection.saved_toast", { count: applied }));
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      saving = false;
+    }
+  }
+
+  function discard() {
+    node.discardDirty();
+    previewItems = null;
+  }
+
+  const before = (key: string) => node.items.find((i) => i.key === key);
+  const verdictMoved = (a: Item | undefined, b: Item) =>
+    !a || a.verdict.state !== b.verdict.state || a.verdict.device_type !== b.verdict.device_type || a.verdict.reason !== b.verdict.reason;
+
+  const columns: DataColumn<Item>[] = $derived([
+    { 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] ?? "" })),
+    { key: "device_type", label: t("node.selection.col_device_type"), sortable: true, get: (i) => i.verdict.device_type_name || "—" },
+  ]);
+</script>
+
+{#snippet groupHeader(group: string, rows: Item[])}
+  <div class="flex flex-wrap items-center gap-2">
+    <span class="font-semibold text-[var(--ha-primary-text-color)]">{group || "—"}</span>
+    <span
+      class="ml-auto rounded-full bg-[var(--ha-card-background-color)] px-2 py-0.5 text-[10px] tabular-nums text-[var(--ha-secondary-text-color)]"
+      aria-label={t("node.selection.group_count", { count: rows.length })}>{rows.length}</span
+    >
+  </div>
+{/snippet}
+
+{#snippet itemCell(item: Item, col: DataColumn<Item>)}
+  {#if col.key === "select"}
+    <label class="flex items-center justify-center">
+      <input
+        type="checkbox"
+        checked={selected.has(item.key)}
+        disabled={!bulkable(item)}
+        title={bulkable(item) ? undefined : t("node.selection.unmappable_checkbox_title")}
+        onclick={(e) => {
+          e.stopPropagation();
+          toggleSelect(item);
+        }}
+        class="h-5 w-5 cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        aria-label={t("node.selection.select_row")}
+      />
+    </label>
+  {:else if col.key === "state"}
+    {@const si = stateInfo(item)}
+    <span class="inline-flex justify-center"><Icon name={si.icon} size={18} class={si.color} aria-label={si.label} title={si.label} /></span>
+  {:else if col.key === "name"}
+    <button type="button" class="text-left hover:underline" onclick={() => openDrawer(item)}>
+      <span class="text-[var(--ha-primary-text-color)]">{current(item).name}</span>
+      {#if node.pending.has(item.key)}
+        <span class="ml-1 text-xs text-[var(--ha-primary-color)]">{t("common.modified")}</span>
+      {/if}
+    </button>
+  {:else if col.key === "device_type"}
+    <span class="text-[var(--ha-secondary-text-color)]">{item.verdict.device_type_name || "—"}</span>
+  {:else}
+    <span class="text-[var(--ha-secondary-text-color)]">{col.get?.(item) || "—"}</span>
+  {/if}
+{/snippet}
+
+{#if unavailable}
+  <EmptyState message={t("node.selection.unavailable")} />
+{:else if node.exposureLoading && !schema}
+  <LoadingState message={t("common.loading")} />
+{:else if node.exposureError}
+  <ErrorState message={node.exposureError} onRetry={() => void node.loadExposure()} />
+{:else if schema}
+  <div class="mb-3 flex flex-col gap-2">
+    <div class="flex flex-wrap items-center gap-2">
+      <Input placeholder={t("node.selection.search_placeholder")} bind:value={search} class="w-full sm:w-64" />
+      {#each valueFilters as f (f.field)}
+        <Select
+          class="w-auto"
+          value={filterValues[f.field] ?? ALL}
+          ariaLabel={f.label}
+          onValueChange={(v) => (filterValues = { ...filterValues, [f.field]: v })}
+          options={[{ value: ALL, label: `${f.label}: ${t("node.selection.filter_all")}` }, ...f.options]}
+        />
+      {/each}
+    </div>
+    <div class="flex flex-wrap items-center gap-2">
+      {#if selected.size > 0}
+        <Button size="sm" onclick={() => bulkSet(true)}>{t("node.selection.bulk_expose")}</Button>
+        <Button size="sm" variant="outline" onclick={() => bulkSet(false)}>{t("node.selection.bulk_hide")}</Button>
+        <Button size="sm" variant="ghost" onclick={() => (selected = new Set())}>{t("common.cancel")}</Button>
+      {:else}
+        <Button size="sm" variant="ghost" onclick={selectAll}>{t("node.selection.select_all")}</Button>
+      {/if}
+      {#if node.hasDirty}
+        <div class="ml-auto flex flex-wrap items-center gap-2" data-testid="save-bar">
+          <span class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.selection.pending", { count: node.pending.size })}</span>
+          <Button size="sm" disabled={previewing} onclick={() => void preview()}>{t("node.selection.preview")}</Button>
+          <Button size="sm" variant="outline" onclick={discard}>{t("node.selection.discard")}</Button>
+        </div>
+      {/if}
+    </div>
+  </div>
+
+  {#if previewItems}
+    <Card class="mb-4 p-4" data-testid="preview">
+      <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.selection.preview_title")}</h3>
+      <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("node.selection.preview_hint")}</p>
+      <ul class="mt-3 space-y-2">
+        {#each previewItems as after (after.key)}
+          {@const was = before(after.key)}
+          <li class="flex flex-wrap items-center gap-2 text-sm">
+            <span class="font-medium text-[var(--ha-primary-text-color)]">{after.name}</span>
+            <Badge variant={after.enabled ? "success" : "muted"}>
+              {after.enabled ? t("node.selection.state_exposed") : t("node.selection.state_available")}
+            </Badge>
+            <span class="text-xs text-[var(--ha-secondary-text-color)]">{after.verdict.device_type_name || "—"} · {verdictHint(after.verdict.state)}</span>
+            {#if verdictMoved(was, after)}
+              <Badge variant="warning">{t("node.selection.preview_changed")}</Badge>
+            {/if}
+            {#if after.verdict.reason}
+              <span class="w-full text-xs text-[var(--ha-secondary-text-color)]">{after.verdict.reason}</span>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+      <div class="mt-4 flex gap-2">
+        <Button size="sm" disabled={saving} onclick={() => void apply()}>{saving ? t("common.saving") : t("node.selection.apply")}</Button>
+        <Button size="sm" variant="outline" onclick={() => (previewItems = null)}>{t("node.selection.back")}</Button>
+      </div>
+    </Card>
+  {/if}
+
+  {#if filtered.length === 0}
+    <EmptyState message={t("node.selection.empty")} icon="mdi:list-checks" />
+  {:else}
+    <Card class="p-4">
+      <div class="mb-3 flex flex-wrap items-center gap-x-4 gap-y-1 text-xs text-[var(--ha-secondary-text-color)]">
+        <span class="font-semibold">{t("node.selection.legend")}:</span>
+        {#each legend as li (li.label)}
+          <span class="inline-flex items-center gap-1"><Icon name={li.icon} size={14} class={li.color} /><span>{li.label}</span></span>
+        {/each}
+      </div>
+      <DataTable
+        rows={filtered}
+        {columns}
+        rowKey={(i) => i.key}
+        cell={itemCell}
+        groupBy={schema.groups ? (i) => i.group : undefined}
+        groupHeader={schema.groups ? groupHeader : undefined}
+        rowClass={(i) => (selected.has(i.key) ? "bg-[var(--ha-secondary-background-color)]" : "")}
+        persistKey="node-selection"
+        emptyMessage={t("node.selection.empty")}
+      />
+    </Card>
+  {/if}
+{:else}
+  <EmptyState message={t("node.selection.unavailable")} />
+{/if}
+
+{#if drawer}
+  {@const item = current(drawer)}
+  <div
+    class="fixed inset-0 z-40 bg-black/30"
+    onclick={() => (drawer = null)}
+    onkeydown={(e) => {
+      if (e.key === "Escape") drawer = null;
+    }}
+    role="presentation"
+    tabindex="-1"
+  ></div>
+  <aside
+    class="fixed right-0 top-0 z-50 flex h-full w-full max-w-sm flex-col overflow-y-auto border-l border-[var(--ha-divider-color)] bg-[var(--ha-card-background-color)]"
+    aria-label={t("node.selection.drawer_aria")}
+  >
+    <div class="flex items-center justify-between border-b border-[var(--ha-divider-color)] p-4">
+      <h2 class="text-base font-semibold text-[var(--ha-primary-text-color)]">{drawer.name}</h2>
+      <button type="button" class="rounded-md p-2 hover:bg-[var(--ha-secondary-background-color)]" onclick={() => (drawer = null)} aria-label={t("common.close")}>✕</button>
+    </div>
+    <div class="flex-1 space-y-4 p-4">
+      <div>
+        <label for="fui-drawer-name" class="mb-1 block text-xs font-semibold text-[var(--ha-secondary-text-color)]">{t("node.selection.name")}</label>
+        <Input id="fui-drawer-name" bind:value={drawerName} placeholder={drawer.name} />
+      </div>
+      <div class="flex items-center gap-3">
+        <input
+          type="checkbox"
+          id="fui-drawer-enabled"
+          bind:checked={drawerEnabled}
+          disabled={item.verdict.state === "unmappable"}
+          title={item.verdict.state === "unmappable" ? t("node.selection.unmappable_checkbox_title") : undefined}
+          class="cursor-pointer disabled:cursor-not-allowed disabled:opacity-40"
+        />
+        <label for="fui-drawer-enabled" class="text-sm text-[var(--ha-primary-text-color)]">{t("node.selection.exposed")}</label>
+      </div>
+      <div>
+        <p class="mb-1 text-xs font-semibold text-[var(--ha-secondary-text-color)]">{t("node.selection.drawer_state")}</p>
+        <p class="text-sm text-[var(--ha-primary-text-color)]">{verdictHint(item.verdict.state)}</p>
+        {#if item.verdict.reason}
+          <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{item.verdict.reason}</p>
+        {/if}
+      </div>
+      {#if item.source}
+        <div>
+          <p class="mb-1 text-xs font-semibold text-[var(--ha-secondary-text-color)]">{t("node.selection.drawer_source")}</p>
+          <p class="text-sm text-[var(--ha-primary-text-color)]">{item.source}</p>
+        </div>
+      {/if}
+      {#if item.verdict.device_type}
+        <div>
+          <p class="mb-1 text-xs font-semibold text-[var(--ha-secondary-text-color)]">{t("node.selection.drawer_device_type")}</p>
+          <p class="text-sm text-[var(--ha-primary-text-color)]">{item.verdict.device_type_name}</p>
+        </div>
+      {/if}
+      {#if item.verdict.clusters.length > 0}
+        <div>
+          <p class="mb-1 text-xs font-semibold text-[var(--ha-secondary-text-color)]">{t("node.selection.drawer_clusters")}</p>
+          <p class="font-mono text-sm text-[var(--ha-primary-text-color)]">
+            {item.verdict.clusters.map((c) => `0x${c.toString(16).toUpperCase().padStart(4, "0")}`).join(" · ")}
+          </p>
+        </div>
+      {/if}
+    </div>
+    <div class="flex gap-2 border-t border-[var(--ha-divider-color)] p-4">
+      <Button size="sm" onclick={saveDrawer}>{t("common.save")}</Button>
+      <Button size="sm" variant="outline" onclick={() => (drawer = null)}>{t("common.cancel")}</Button>
+    </div>
+  </aside>
+{/if}

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

@@ -0,0 +1,63 @@
+<!-- The node's status: whether it runs, listens, is healthy and
+     advertised, its counts and the commissioning window. Ported from the
+     status card of openccu-loom assets/ui/src/routes/matter/Matter.svelte:47-100
+     at b40b289a, without the tabs (the shell or the host navigates). -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import Badge from "../../kit/Badge.svelte";
+  import Card from "../../kit/Card.svelte";
+  import ErrorState from "../../kit/ErrorState.svelte";
+  import LoadingState from "../../kit/LoadingState.svelte";
+
+  const { t, node } = useFabricUI();
+
+  onMount(() => {
+    void node.loadStatus();
+  });
+
+  const s = $derived(node.status);
+</script>
+
+{#if node.statusLoading && !s}
+  <LoadingState message={t("common.loading")} />
+{:else if node.statusError && !s}
+  <ErrorState message={node.statusError} onRetry={() => void node.loadStatus()} />
+{:else if s && !s.enabled}
+  <Card class="p-4">
+    <p class="text-sm font-medium text-[var(--ha-secondary-text-color)]">{t("node.status.disabled")}</p>
+  </Card>
+{:else if s}
+  <Card class="p-4" data-testid="node-status">
+    <div class="flex flex-wrap items-center gap-4">
+      <span class="font-medium text-[var(--ha-primary-text-color)]">{t("node.status.enabled")}</span>
+      <Badge variant={s.listening ? "success" : "muted"}>
+        {s.listening ? t("node.status.listening") : t("node.status.not_listening")}
+      </Badge>
+      {#if s.healthy !== undefined}
+        <Badge variant={s.healthy ? "success" : "danger"} title={s.health_note}>
+          {s.healthy ? t("node.status.healthy") : t("node.status.unhealthy")}
+        </Badge>
+      {/if}
+      <span class="text-sm text-[var(--ha-secondary-text-color)]">{t("node.status.endpoints", { count: s.endpoint_count })}</span>
+      <span class="text-sm text-[var(--ha-secondary-text-color)]">{t("node.status.fabrics", { count: s.fabric_count })}</span>
+      {#if s.enabled_count !== undefined}
+        <span class="text-sm text-[var(--ha-secondary-text-color)]">{t("node.status.exposed", { count: s.enabled_count })}</span>
+      {/if}
+      {#if s.advertising}
+        <Badge variant="default">{t("node.status.advertising")}</Badge>
+      {/if}
+      {#if s.commissioning_window_open}
+        <Badge variant="warning">
+          {t("node.pair.window_open")}
+          {#if (s.commissioning_window_duration_seconds ?? 0) > 0}
+            ({s.commissioning_window_duration_seconds}s)
+          {/if}
+        </Badge>
+      {/if}
+    </div>
+    {#if s.listen_addr}
+      <p class="mt-2 text-xs text-[var(--ha-secondary-text-color)]">{t("node.status.listen_addr", { addr: s.listen_addr })}</p>
+    {/if}
+  </Card>
+{/if}