@sukramj/fabric-ui 0.1.1 → 0.1.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sukramj/fabric-ui",
-  "version": "0.1.1",
+  "version": "0.1.2",
   "description": "The web interface of go-fabric nodes: Svelte 5 pages, UI kit, design tokens with a Home Assistant theme bridge, and the generated API client.",
   "license": "Apache-2.0",
   "author": "SukramJ",
@@ -78,7 +78,7 @@
     "@tsconfig/svelte": "5.0.8",
     "@types/node": "26.6.5",
     "@types/qrcode": "1.5.6",
-    "happy-dom": "20.14.6",
+    "happy-dom": "21.0.4",
     "js-yaml": "4.3.2",
     "openapi-typescript": "7.13.0",
     "svelte": "5.57.2",

package/src/lib/api/schema.gen.ts

@@ -497,6 +497,16 @@ export interface components {
             advertising: boolean;
             commissioning_window_open: boolean;
             commissioning_window_duration_seconds?: number;
+            /**
+             * @description Which window is open — the node's own on its configured credentials, a basic one on fresh credentials, an administrator's enhanced one; absent without a node.
+             * @enum {string}
+             */
+            window_kind?: "none" | "own" | "basic" | "enhanced";
+            /**
+             * Format: date-time
+             * @description When the open window's timer closes it
+             */
+            window_deadline?: string;
             /** @description Whether the host serves a selection. */
             exposure: boolean;
             /** @description The admin token of token mode; absent when the host decides admin rights. */
@@ -533,9 +543,9 @@ export interface components {
             fabrics: components["schemas"]["Fabric"][];
         };
         Pairing: {
-            /** @description Only for a window this handler opened on fresh credentials; the codes carry it. */
+            /** @description The discriminator the codes encode: of the window this handler opened on fresh credentials, else the configured one. Absent from servers before 0.1.2 for the configured source. */
             discriminator?: number;
-            /** @description Only for a window this handler opened on fresh credentials. */
+            /** @description The passcode the codes encode: of the window this handler opened on fresh credentials, else the configured one. Absent from servers before 0.1.2 for the configured source. */
             passcode?: number;
             qr_code: string;
             manual_code: string;
@@ -549,17 +559,20 @@ export interface components {
             duration_seconds?: number;
         };
         Window: {
-            /** @description Absent for a window on the configured credentials. */
+            /** @description The window's discriminator; absent from servers before 0.1.2 for a window on the configured credentials. */
             discriminator?: number;
-            /** @description Absent for a window on the configured credentials. */
+            /** @description The window's passcode; absent from servers before 0.1.2 for a window on the configured credentials. */
             passcode?: number;
             duration_seconds: number;
             qr_code: string;
             manual_code: string;
         };
+        /** @description One cluster server mounted on the endpoint, in its Descriptor's ServerList order. */
         Cluster: {
             id: number;
+            /** @description The schema's cluster name; absent for a cluster the schema does not know. */
             name?: string;
+            /** @description The schema's ClusterRevision; absent for a cluster the schema does not know. */
             revision?: number;
         };
         Endpoint: {
@@ -567,6 +580,8 @@ export interface components {
             parent_endpoint_id: number;
             device_type: number;
             device_type_name: string;
+            /** @description The revision the endpoint's Descriptor serves for its device type; absent for a type the schema does not know. */
+            device_type_revision?: number;
             reachable: boolean;
             name: string;
             /** @description Opaque identity of the host's source; `key` is the endpoint's stable key. */

package/src/lib/countdown.ts

@@ -0,0 +1,14 @@
+// The commissioning window's countdown from the deadline the status
+// reports (window_deadline, on the node's clock), so a reload or a page
+// opened late counts down what is left instead of the full duration.
+
+/**
+ * Whole seconds left until deadline at now (milliseconds since the epoch),
+ * never negative; null without a deadline or for one that does not parse.
+ */
+export function secondsUntil(deadline: string | undefined, now: number = Date.now()): number | null {
+  if (!deadline) return null;
+  const t = Date.parse(deadline);
+  if (Number.isNaN(t)) return null;
+  return Math.max(0, Math.ceil((t - now) / 1000));
+}

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

@@ -2,10 +2,12 @@
      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). The
-     host's configuration warnings come first, in their own card. -->
+     host's configuration warnings come first, in their own card. An open
+     window counts down from the deadline the status reports. -->
 <script lang="ts">
   import { onMount } from "svelte";
   import { useFabricUI } from "../../context";
+  import { secondsUntil } from "../../countdown";
   import Badge from "../../kit/Badge.svelte";
   import Card from "../../kit/Card.svelte";
   import ErrorState from "../../kit/ErrorState.svelte";
@@ -14,11 +16,22 @@
 
   const { t, node } = useFabricUI();
 
+  let now = $state(Date.now());
+
   onMount(() => {
     void node.loadStatus();
+    const tick = setInterval(() => (now = Date.now()), 1000);
+    return () => clearInterval(tick);
   });
 
   const s = $derived(node.status);
+  // Seconds left in the open window, from its deadline; the duration it
+  // was opened for when the server reports no deadline.
+  const windowLeft = $derived(
+    s?.commissioning_window_open
+      ? (secondsUntil(s.window_deadline, now) ?? ((s.commissioning_window_duration_seconds ?? 0) > 0 ? s.commissioning_window_duration_seconds! : null))
+      : null,
+  );
 </script>
 
 {#if node.statusLoading && !s}
@@ -54,8 +67,8 @@
       {#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 windowLeft !== null}
+            <span data-testid="window-left">({windowLeft}s)</span>
           {/if}
         </Badge>
       {/if}

package/src/lib/store.svelte.ts

@@ -7,6 +7,7 @@
 // host-readiness gate dropped.
 import { ApiError, type FabricClient, type FabricList, type ExposureSchema, type Item, type Status, type Update, type Window } from "./api/client";
 import { subscribeStream, type StreamEvent } from "./api/stream";
+import { secondsUntil } from "./countdown";
 import type { Translate } from "./i18n";
 
 export interface Toast {
@@ -172,6 +173,9 @@ export function createNodeStore(client: FabricClient, deps: NodeStoreDeps) {
     if (!st.enabled || !st.commissioning_window_open) return;
     const p = await client.pairing();
     const duration = p.duration_seconds ?? st.commissioning_window_duration_seconds ?? 0;
+    // The deadline says what is left; without one (a server before 0.1.2)
+    // the full duration is the upper bound.
+    const left = secondsUntil(st.window_deadline) ?? (duration > 0 ? duration : null);
     commissioning = {
       phase: "open",
       window: {
@@ -181,11 +185,10 @@ export function createNodeStore(client: FabricClient, deps: NodeStoreDeps) {
         qr_code: p.qr_code,
         manual_code: p.manual_code,
       },
-      // Without a server-side remaining time the full duration is the upper bound.
-      remaining: duration > 0 ? duration : null,
+      remaining: left,
       addedFabricLabel: null,
     };
-    if (duration > 0) startCountdown(duration);
+    if (left !== null && left > 0) startCountdown(left);
   }
 
   async function closeWindow() {