@sukramj/fabric-ui 0.0.0-stage → 0.1.0

package/src/lib/kit/utils.ts

@@ -0,0 +1,49 @@
+// Class composition and text matching for the kit. Ported from
+// openccu-loom assets/ui/src/lib/utils.ts:1-65 at b40b289a.
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/** Tailwind class composition: conditional classes, conflicts resolved. */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}
+
+/**
+ * A case-insensitive predicate over a free-text search term. The literal
+ * substring always matches; when the term is also a valid regular
+ * expression it matches by that too, so `lamp|light` finds both while a
+ * pasted name with parentheses still finds itself.
+ */
+export function makeTextMatcher(term: string): (text: string) => boolean {
+  const q = term.trim();
+  if (!q) return () => true;
+  let re: RegExp | null = null;
+  try {
+    re = new RegExp(q, "i");
+  } catch {
+    re = null;
+  }
+  const lower = q.toLowerCase();
+  return (text: string) => {
+    if (text.toLowerCase().includes(lower)) return true;
+    return re ? re.test(text) : false;
+  };
+}
+
+/** Reads a string from localStorage, `fallback` when absent or unavailable. */
+export function loadLS(key: string, fallback = ""): string {
+  try {
+    return localStorage.getItem(key) ?? fallback;
+  } catch {
+    return fallback;
+  }
+}
+
+/** Best-effort write to localStorage. */
+export function saveLS(key: string, value: string): void {
+  try {
+    localStorage.setItem(key, value);
+  } catch {
+    // storage unavailable — the value simply does not persist.
+  }
+}

package/src/lib/pages/index.ts

@@ -0,0 +1,8 @@
+// The node page family. 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";
+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";

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

@@ -0,0 +1,205 @@
+<!-- Diagnostics: discovery (the live DNS-SD advertisement and its
+     findings), the connected controllers and the session-id occupancy,
+     ecosystem compatibility, and the recent events. Ported from openccu-loom
+     assets/ui/src/routes/matter/MatterDiagnostics.svelte:1-352 at b40b289a;
+     the endpoint inspector moved to the Endpoints page. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { Compatibility, DiagnosticEvent, Mdns, Occupancy, Session } 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 EmptyState from "../../kit/EmptyState.svelte";
+  import ErrorState from "../../kit/ErrorState.svelte";
+  import LoadingState from "../../kit/LoadingState.svelte";
+
+  const { t, client } = useFabricUI();
+
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let sessions = $state<Session[]>([]);
+  let occupancy = $state<Occupancy | null>(null);
+  let mdns = $state<Mdns | null>(null);
+  let compat = $state<Compatibility | null>(null);
+  let events = $state<DiagnosticEvent[]>([]);
+
+  async function load() {
+    loading = true;
+    error = null;
+    try {
+      const [s, m, c, ev] = await Promise.all([client.sessions(), client.mdns(), client.compatibility(), client.events()]);
+      sessions = s.sessions;
+      occupancy = s.occupancy;
+      mdns = m;
+      compat = c;
+      events = ev.events;
+    } catch (err) {
+      error = errorText(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(load);
+
+  function age(seconds: number): string {
+    if (seconds < 60) return t("node.diag.age_seconds", { n: seconds });
+    if (seconds < 3600) return t("node.diag.age_minutes", { n: Math.floor(seconds / 60) });
+    return t("node.diag.age_hours", { n: Math.floor(seconds / 3600) });
+  }
+
+  // A controller that stopped talking leaves its session open, so the
+  // peer-side age separates a live controller from a departed one; under
+  // five minutes is ordinary quiet (loom MatterDiagnostics.svelte:60-70).
+  function peerVariant(seconds: number): "success" | "warning" | "danger" {
+    if (seconds < 300) return "success";
+    if (seconds < 1800) return "warning";
+    return "danger";
+  }
+
+  const errorFindings = $derived((mdns?.findings ?? []).filter((f) => f.severity === "error"));
+  const warningFindings = $derived((mdns?.findings ?? []).filter((f) => f.severity === "warning"));
+
+  const sessionColumns: DataColumn<Session>[] = $derived([
+    { key: "session_id", label: t("node.diag.col_session"), sortable: true, numeric: true, align: "left", get: (s) => s.session_id },
+    { key: "fabric_index", label: t("node.diag.col_fabric"), sortable: true, numeric: true, get: (s) => s.fabric_index },
+    // Sorted on the seconds, not the rendered age.
+    { key: "peer_idle", label: t("node.diag.col_peer_idle"), sortable: true, get: (s) => s.peer_idle_seconds },
+    { key: "subscriptions", label: t("node.diag.col_subscriptions"), sortable: true, numeric: true, get: (s) => s.subscriptions },
+  ]);
+
+  const eventClass = (sev: string) =>
+    sev === "error"
+      ? "bg-[color-mix(in_srgb,var(--ha-error-color)_15%,transparent)] text-[var(--ha-error-color)]"
+      : sev === "warning"
+        ? "bg-[color-mix(in_srgb,var(--ha-warning-color)_15%,transparent)] text-[var(--ha-warning-color)]"
+        : "bg-[var(--ha-secondary-background-color)] text-[var(--ha-secondary-text-color)]";
+</script>
+
+{#snippet sessionCell(s: Session, col: DataColumn<Session>)}
+  {#if col.key === "session_id"}
+    {s.session_id}
+    {#if s.is_pase}<Badge variant="muted">{t("node.diag.pase")}</Badge>{/if}
+  {:else if col.key === "fabric_index"}
+    {s.fabric_index}
+  {:else if col.key === "peer_idle"}
+    <Badge variant={peerVariant(s.peer_idle_seconds)}>{age(s.peer_idle_seconds)}</Badge>
+  {:else if col.key === "subscriptions"}
+    {s.subscriptions}
+    {#if s.subscriptions === 0 && !s.is_pase}
+      <span class="ml-2 text-xs text-[var(--ha-warning-color)]">{t("node.diag.no_subscriptions")}</span>
+    {/if}
+  {/if}
+{/snippet}
+
+<div class="space-y-6">
+  <div class="flex items-center justify-between">
+    <h2 class="text-lg font-semibold text-[var(--ha-primary-text-color)]">{t("node.diag.title")}</h2>
+    <Button variant="outline" onclick={() => void load()} disabled={loading}>{t("common.refresh")}</Button>
+  </div>
+
+  {#if loading}
+    <LoadingState />
+  {:else if error}
+    <ErrorState message={error} onRetry={() => void load()} />
+  {:else}
+    <Card class="p-4">
+      <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.diag.discovery")}</h3>
+      {#if !mdns?.advertising}
+        <p class="mt-2 text-sm text-[var(--ha-secondary-text-color)]">{t("node.diag.not_advertising")}</p>
+      {:else}
+        {#if errorFindings.length === 0 && warningFindings.length === 0}
+          <p class="mt-2 text-sm text-[var(--ha-success-color)]">{t("node.diag.discovery_ok")}</p>
+        {/if}
+        <ul class="mt-2 space-y-2">
+          {#each [...errorFindings, ...warningFindings] as finding (finding.code + (finding.service ?? ""))}
+            <li class="flex flex-wrap items-start gap-2 text-sm">
+              <Badge variant={finding.severity === "error" ? "danger" : "warning"}>{t(`node.diag.severity.${finding.severity}`)}</Badge>
+              <span class="min-w-[16rem] flex-1 text-[var(--ha-primary-text-color)]">{finding.message}</span>
+            </li>
+          {/each}
+        </ul>
+        <div class="mt-3 space-y-1 text-xs text-[var(--ha-secondary-text-color)]">
+          {#each mdns.services as svc (svc.service_type + svc.instance_name)}
+            <div>
+              <span class="font-mono">{svc.service_type}</span>
+              · {t("node.diag.port")}&nbsp;{svc.port} · {svc.addresses.join(", ")}
+              {#if svc.subtypes.length > 0}· {svc.subtypes.join(" ")}{/if}
+            </div>
+          {/each}
+        </div>
+      {/if}
+    </Card>
+
+    <Card class="p-4">
+      <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.diag.sessions")}</h3>
+      <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("node.diag.sessions_hint")}</p>
+      <!-- An id staked by a handshake that never completed holds its slot
+           and appears in no row below; this line makes a filling table visible. -->
+      {#if occupancy}
+        <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]" data-testid="occupancy">
+          {t("node.diag.sessions_occupancy", { live: occupancy.live, reserved: occupancy.reserved, free: occupancy.free, capacity: occupancy.capacity })}
+        </p>
+      {/if}
+      <div class="mt-3">
+        <DataTable
+          rows={sessions}
+          columns={sessionColumns}
+          rowKey={(s) => String(s.session_id)}
+          cell={sessionCell}
+          persistKey="node-sessions"
+          initialSort={{ key: "session_id", asc: true }}
+          emptyMessage={t("node.diag.no_sessions")}
+        />
+      </div>
+    </Card>
+
+    {#if compat}
+      <Card class="p-4">
+        <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.diag.compatibility")}</h3>
+        <div class="mt-2 flex flex-wrap gap-2">
+          {#each compat.ecosystems as eco (eco.fabric_index)}
+            <Badge variant="muted">{t(`node.diag.ecosystem.${eco.ecosystem}`)}</Badge>
+          {/each}
+        </div>
+        {#if compat.findings.length === 0}
+          <p class="mt-3 text-sm text-[var(--ha-success-color)]">{t("node.diag.compat_ok")}</p>
+        {:else}
+          <ul class="mt-3 space-y-2">
+            {#each compat.findings as finding (finding.ecosystem + finding.code)}
+              <li class="flex flex-wrap items-start gap-2 text-sm">
+                <Badge variant="warning">{t(`node.diag.ecosystem.${finding.ecosystem}`)}</Badge>
+                <span class="min-w-[16rem] flex-1 text-[var(--ha-primary-text-color)]">{finding.message}</span>
+              </li>
+            {/each}
+          </ul>
+        {/if}
+      </Card>
+    {/if}
+
+    <!-- Inside the loaded branch: "nothing recorded" is a claim about the
+         node and must not be printed under a failed fetch. -->
+    <Card class="p-4">
+      <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.diag.events")}</h3>
+      <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("node.diag.events_hint")}</p>
+      {#if events.length === 0}
+        <EmptyState class="mt-3" message={t("node.diag.events_empty")} />
+      {:else}
+        <ul class="mt-3 space-y-2">
+          <!-- Keyed by position: two events can share second and message. -->
+          {#each events as event, i (i)}
+            <li class="flex gap-3 text-sm" data-testid="event">
+              <span class="shrink-0 font-mono text-xs text-[var(--ha-secondary-text-color)]">{new Date(event.at).toLocaleTimeString()}</span>
+              <span class="shrink-0 rounded px-1.5 py-0.5 text-xs {eventClass(event.severity)}">{t(`node.diag.kind_${event.kind}`)}</span>
+              <span class="text-[var(--ha-primary-text-color)]">{event.message}</span>
+            </li>
+          {/each}
+        </ul>
+      {/if}
+    </Card>
+  {/if}
+</div>

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

@@ -0,0 +1,82 @@
+<!-- The bridged endpoints as a controller sees them, without commissioning
+     one first. Ported from the endpoint card of openccu-loom
+     assets/ui/src/routes/matter/MatterDiagnostics.svelte:229-260 at
+     b40b289a: the host's name for the endpoint, its parent, its device
+     type and clusters. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { Endpoint } 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";
+
+  const { t, client } = useFabricUI();
+
+  let loading = $state(true);
+  let error = $state<string | null>(null);
+  let endpoints = $state<Endpoint[]>([]);
+
+  async function load() {
+    loading = true;
+    error = null;
+    try {
+      endpoints = (await client.endpoints()).endpoints;
+    } catch (err) {
+      error = errorText(err);
+    } finally {
+      loading = false;
+    }
+  }
+
+  onMount(load);
+
+  const hex = (n: number, w = 4) => `0x${n.toString(16).toUpperCase().padStart(w, "0")}`;
+  const topLevel = $derived(new Set(endpoints.map((e) => e.endpoint_id)));
+</script>
+
+<Card class="p-4">
+  <div class="flex items-center justify-between gap-2">
+    <h3 class="font-medium text-[var(--ha-primary-text-color)]">{t("node.endpoints.title")}</h3>
+    <Button variant="outline" size="sm" onclick={() => void load()} disabled={loading}>{t("common.refresh")}</Button>
+  </div>
+  <p class="mt-1 text-xs text-[var(--ha-secondary-text-color)]">{t("node.endpoints.hint")}</p>
+  {#if loading}
+    <LoadingState />
+  {:else if error}
+    <ErrorState class="mt-3" message={error} onRetry={() => void load()} />
+  {:else if endpoints.length === 0}
+    <EmptyState class="mt-3" message={t("node.endpoints.empty")} />
+  {:else}
+    <ul class="mt-3 space-y-2">
+      {#each endpoints as ep (ep.endpoint_id)}
+        <li class="rounded border border-[var(--ha-divider-color)] p-3" data-testid="endpoint">
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="font-mono text-sm text-[var(--ha-secondary-text-color)]">#{ep.endpoint_id}</span>
+            <span class="font-medium text-[var(--ha-primary-text-color)]">{ep.name}</span>
+            <Badge variant={ep.reachable ? "success" : "muted"}>
+              {ep.reachable ? t("node.endpoints.reachable") : t("node.endpoints.unreachable")}
+            </Badge>
+            <span class="text-xs text-[var(--ha-secondary-text-color)]">{ep.device_type_name || hex(ep.device_type)}</span>
+            {#if topLevel.has(ep.parent_endpoint_id)}
+              <span class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.endpoints.part_of", { id: ep.parent_endpoint_id })}</span>
+            {/if}
+          </div>
+          {#if ep.clusters.length > 0}
+            <div class="mt-2 flex flex-wrap gap-1">
+              {#each ep.clusters as cluster (cluster.id)}
+                <span class="rounded bg-[var(--ha-secondary-background-color)] px-2 py-0.5 text-xs text-[var(--ha-secondary-text-color)]">
+                  {cluster.name || hex(cluster.id)}
+                </span>
+              {/each}
+            </div>
+          {/if}
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</Card>

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

@@ -0,0 +1,169 @@
+<!-- The commissioned fabrics, removing one, and the maintenance actions
+     (reassemble, remove all pairings). Ported from openccu-loom
+     assets/ui/src/routes/matter/MatterFabrics.svelte:1-209 at b40b289a:
+     the vendor name from the server, the node id from its exact hex twin,
+     the confirmations before every destructive action. -->
+<script lang="ts">
+  import { onMount } from "svelte";
+  import { useFabricUI } from "../../context";
+  import { errorText } from "../../store.svelte";
+  import type { Fabric } 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";
+
+  const { t, toast, confirm, client, node, routes } = useFabricUI();
+
+  onMount(() => {
+    void node.loadFabrics();
+  });
+
+  // The server owns the vendor table, so one list cannot drift from the
+  // other; the raw id is the fallback.
+  function vendorName(f: Fabric): string {
+    return f.vendor_name || `0x${f.vendor_id.toString(16).toUpperCase().padStart(4, "0")}`;
+  }
+
+  // Controllers print node ids as 16-digit hex; the exact value travels in
+  // node_id_hex, the number is only a fallback.
+  function nodeIdHex(f: Fabric): string {
+    if (f.node_id_hex) return `0x${f.node_id_hex.toUpperCase()}`;
+    return `0x${f.node_id.toString(16).toUpperCase().padStart(16, "0")}`;
+  }
+
+  // A JSON number carries 53 bits: without the hex twin an id above that
+  // was rounded before it reached the page.
+  function nodeIdExact(f: Fabric): boolean {
+    return Boolean(f.node_id_hex) || Number.isSafeInteger(f.node_id);
+  }
+
+  let busy = $state(false);
+
+  async function reassemble() {
+    busy = true;
+    try {
+      await client.reassemble();
+      toast.success(t("node.maint.reassemble_done"));
+      await node.loadStatus();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function factoryReset() {
+    const ok = await confirm({
+      title: t("node.maint.reset_confirm"),
+      body: t("node.maint.reset_confirm_body"),
+      destructive: true,
+      confirmLabel: t("node.maint.reset_confirm_label"),
+    });
+    if (!ok) return;
+    busy = true;
+    try {
+      await client.factoryReset();
+      toast.success(t("node.maint.reset_done"));
+      await node.loadFabrics();
+      await node.loadStatus();
+    } catch (err) {
+      toast.error(errorText(err));
+    } finally {
+      busy = false;
+    }
+  }
+
+  async function unpair(f: Fabric) {
+    const ok = await confirm({
+      title: t("node.fabric.unpair_confirm"),
+      body: f.label || t("node.fabric.label_unknown"),
+      destructive: true,
+      confirmLabel: t("common.remove"),
+    });
+    if (!ok) return;
+    try {
+      await client.removeFabric(f.fabric_index);
+      toast.success(t("node.fabric.unpaired"));
+      await node.loadFabrics();
+      await node.loadStatus();
+    } catch (err) {
+      toast.error(errorText(err));
+    }
+  }
+
+  const columns: DataColumn<Fabric>[] = $derived([
+    { key: "vendor", label: t("node.fabrics.col_vendor"), sortable: true, title: true, get: (f) => vendorName(f) },
+    { key: "label", label: t("node.fabrics.col_label"), sortable: true, get: (f) => f.label || t("node.fabric.label_unknown") },
+    { key: "fabric", label: t("node.fabrics.col_fabric"), sortable: true, get: (f) => f.fabric_index },
+    // Sorted on the zero-padded hex: fixed width makes lexical order numeric.
+    { key: "node_id", label: t("node.fabrics.col_node_id"), sortable: true, get: (f) => nodeIdHex(f) },
+    { key: "action", label: "", align: "right", cellClass: "reflow-actions" },
+  ]);
+</script>
+
+<div class="space-y-6">
+  {#if node.fabricsLoading && node.fabrics.length === 0}
+    <LoadingState message={t("common.loading")} />
+  {:else if node.fabricsError}
+    <ErrorState message={node.fabricsError} onRetry={() => void node.loadFabrics()} />
+  {:else}
+    <Card class="p-4">
+      <DataTable
+        rows={node.fabrics}
+        {columns}
+        rowKey={(f) => String(f.fabric_index)}
+        persistKey="node-fabrics"
+        emptyMessage={t("node.fabrics.empty")}
+        emptyIcon="mdi:link"
+        initialSort={{ key: "vendor", asc: true }}
+      >
+        {#snippet cell(fabric, col)}
+          {#if col.key === "vendor"}
+            <span class="text-[var(--ha-primary-text-color)]">{vendorName(fabric)}</span>
+          {:else if col.key === "label"}
+            <span class={fabric.label ? "text-[var(--ha-primary-text-color)]" : "text-[var(--ha-secondary-text-color)]"}>
+              {fabric.label || t("node.fabric.label_unknown")}
+            </span>
+          {:else if col.key === "fabric"}
+            <span class="text-[var(--ha-secondary-text-color)]">{fabric.fabric_index}</span>
+          {:else if col.key === "node_id"}
+            <span class="inline-flex flex-wrap items-center gap-1">
+              <span class="font-mono text-xs text-[var(--ha-secondary-text-color)]">{nodeIdHex(fabric)}</span>
+              {#if !nodeIdExact(fabric)}
+                <Badge variant="warning" title={t("node.fabrics.node_id_rounded_hint")}>{t("node.fabrics.node_id_rounded")}</Badge>
+              {/if}
+            </span>
+          {:else if col.key === "action"}
+            <Button size="sm" variant="ghost" class="text-[var(--ha-error-color)]" onclick={() => void unpair(fabric)}>
+              {t("common.remove")}
+            </Button>
+          {/if}
+        {/snippet}
+      </DataTable>
+    </Card>
+  {/if}
+
+  <Card class="p-4">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("node.maint.title")}</h3>
+    <div class="flex flex-wrap items-center gap-3">
+      <Button variant="outline" onclick={() => void reassemble()} disabled={busy}>{t("node.maint.reassemble")}</Button>
+      <span class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.maint.reassemble_hint")}</span>
+    </div>
+    <div class="mt-3 flex flex-wrap items-center gap-3">
+      <Button variant="outline-destructive" onclick={() => void factoryReset()} disabled={busy}>{t("node.maint.reset")}</Button>
+      <span class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.maint.reset_hint")}</span>
+    </div>
+  </Card>
+
+  <div class="rounded-[var(--ha-radius-card)] border border-[var(--ha-divider-color)] bg-[var(--ha-secondary-background-color)] p-4">
+    <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("node.fabric.share")}</h3>
+    <p class="text-sm text-[var(--ha-secondary-text-color)]">{t("node.fabric.share_hint")}</p>
+    <a href={routes.pair} data-testid="share-link" class="mt-3 inline-flex items-center text-sm font-medium text-[var(--ha-primary-color)] hover:underline">
+      {t("node.fabric.share_go")}
+    </a>
+  </div>
+</div>