@sukramj/fabric-ui 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sukramj/fabric-ui",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "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",

package/src/lib/api/client.ts

@@ -8,6 +8,7 @@ import type { components } from "./schema.gen";
 type S = components["schemas"];
 export type Problem = S["Problem"];
 export type Status = S["Status"];
+export type Warning = S["Warning"];
 export type Fabric = S["Fabric"];
 export type FabricList = S["FabricList"];
 export type Pairing = S["Pairing"];

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

@@ -501,6 +501,19 @@ export interface components {
             exposure: boolean;
             /** @description The admin token of token mode; absent when the host decides admin rights. */
             csrf_token?: string;
+            /** @description The host's findings about its own configuration; absent when the host reports none (no Options.Warnings), empty when it finds nothing. */
+            warnings?: components["schemas"]["Warning"][];
+        };
+        Warning: {
+            /** @description The kind of finding, stable across host releases. */
+            code: string;
+            /** @description What is wrong, in the host's language. */
+            message: string;
+            /**
+             * Format: date-time
+             * @description When the host first saw it; absent when unknown.
+             */
+            since?: string;
         };
         Fabric: {
             fabric_index: number;
@@ -653,6 +666,8 @@ export interface components {
             label: string;
             /** @description Offer a value filter built from the listed values. */
             filter: boolean;
+            /** @description Default false. The field is a comma-separated list: shown as chips, filtered by membership, the filter's options built from the individual values. */
+            multi?: boolean;
         };
         FilterOption: {
             value: string;
@@ -662,6 +677,8 @@ export interface components {
             field: string;
             label: string;
             options: components["schemas"]["FilterOption"][];
+            /** @description Default false. Match by membership in the field's comma-separated list (values trimmed; an empty value never matches) instead of equality. */
+            multi?: boolean;
         };
         ExposureSchema: {
             columns: components["schemas"]["Column"][];

package/src/lib/i18n/de.json

@@ -152,6 +152,9 @@
   "node.tab.selection": "Auswahl",
   "node.tab.status": "Status",
   "node.title": "Knoten",
+  "node.warnings.since": "seit {time}",
+  "node.warnings.summary": "{count} Konfigurationswarnungen",
+  "node.warnings.title": "Konfigurationswarnungen",
   "select.placeholder": "Auswählen…",
   "shell.language": "Sprache"
 }

package/src/lib/i18n/en.json

@@ -152,6 +152,9 @@
   "node.tab.selection": "Selection",
   "node.tab.status": "Status",
   "node.title": "Node",
+  "node.warnings.since": "since {time}",
+  "node.warnings.summary": "{count} configuration warnings",
+  "node.warnings.title": "Configuration warnings",
   "select.placeholder": "Select…",
   "shell.language": "Language"
 }

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

@@ -0,0 +1,41 @@
+<!-- The host's findings about its own configuration (Status.warnings):
+     a card on the status page, a collapsed list above the selection. -->
+<script lang="ts">
+  import { useFabricUI } from "../../context";
+  import type { Warning } from "../../api/client";
+  import Badge from "../../kit/Badge.svelte";
+  import Card from "../../kit/Card.svelte";
+
+  type Props = { warnings: Warning[]; collapsed?: boolean };
+  let { warnings, collapsed = false }: Props = $props();
+
+  const { t } = useFabricUI();
+</script>
+
+{#snippet list()}
+  <ul class="space-y-2">
+    {#each warnings as w, i (i)}
+      <li class="flex flex-wrap items-center gap-2 text-sm">
+        <Badge variant="warning">{w.code}</Badge>
+        <span class="text-[var(--ha-primary-text-color)]">{w.message}</span>
+        {#if w.since}
+          <span class="text-xs text-[var(--ha-secondary-text-color)]">{t("node.warnings.since", { time: new Date(w.since).toLocaleString() })}</span>
+        {/if}
+      </li>
+    {/each}
+  </ul>
+{/snippet}
+
+{#if warnings.length > 0}
+  {#if collapsed}
+    <details class="mb-3 rounded-md border border-[var(--ha-divider-color)] px-3 py-2" data-testid="host-warnings">
+      <summary class="cursor-pointer text-sm font-medium text-[var(--ha-warning-color)]">{t("node.warnings.summary", { count: warnings.length })}</summary>
+      <div class="mt-2">{@render list()}</div>
+    </details>
+  {:else}
+    <Card class="mb-4 p-4" data-testid="host-warnings">
+      <h3 class="mb-2 font-medium text-[var(--ha-primary-text-color)]">{t("node.warnings.title")}</h3>
+      {@render list()}
+    </Card>
+  {/if}
+{/if}

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

@@ -5,7 +5,9 @@
      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. -->
+     value filter per filterable column; Preview before Apply is new, and so
+     are list-valued fields (Column.multi, Filter.multi) and the host's
+     warnings above the list. -->
 <script lang="ts">
   import { onMount } from "svelte";
   import { useFabricUI } from "../../context";
@@ -24,6 +26,8 @@
   import Input from "../../kit/Input.svelte";
   import LoadingState from "../../kit/LoadingState.svelte";
   import Select from "../../kit/Select.svelte";
+  import HostWarnings from "./HostWarnings.svelte";
+  import { distinctValues, fieldMatches, listValues } from "./fields";
 
   const { t, toast, node } = useFabricUI();
 
@@ -32,6 +36,9 @@
   const unavailable = $derived(node.status !== null && !node.status.exposure);
 
   onMount(() => {
+    // The status carries the host's warnings; a host page that mounts the
+    // selection alone has not loaded it yet.
+    if (node.status === null && !node.statusLoading) void node.loadStatus();
     if (!unavailable) void node.loadExposure();
   });
 
@@ -49,19 +56,21 @@
   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 }[] };
+  // column with the distinct values the items carry — for a list-valued
+  // column the individual values, not their combinations.
+  type ValueFilter = { field: string; label: string; multi: boolean; 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 }));
+    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 = [...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 })) });
+      const values = distinctValues(node.items.map((i) => i.fields[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;
   });
+  const multiField = $derived(new Set(valueFilters.filter((f) => f.multi).map((f) => f.field)));
+  const multiColumn = $derived(new Set((schema?.columns ?? []).filter((c) => c.multi).map((c) => "field:" + c.key)));
 
   // The item as the page shows it: with its pending change applied.
   function current(item: Item): Item {
@@ -74,7 +83,7 @@
     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 (value !== ALL && !fieldMatches(item.fields[field], value, multiField.has(field))) return false;
       }
       if (!search.trim()) return true;
       const it = current(item);
@@ -218,6 +227,15 @@
     </button>
   {: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)])}
+    {#if values.length === 0}
+      <span class="text-[var(--ha-secondary-text-color)]">—</span>
+    {:else}
+      <span class="inline-flex flex-wrap gap-1">
+        {#each values as v, i (i)}<Badge variant="muted">{v}</Badge>{/each}
+      </span>
+    {/if}
   {:else}
     <span class="text-[var(--ha-secondary-text-color)]">{col.get?.(item) || "—"}</span>
   {/if}
@@ -230,6 +248,7 @@
 {:else if node.exposureError}
   <ErrorState message={node.exposureError} onRetry={() => void node.loadExposure()} />
 {:else if schema}
+  <HostWarnings warnings={node.status?.warnings ?? []} collapsed />
   <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" />

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

@@ -1,7 +1,8 @@
 <!-- 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). -->
+     at b40b289a, without the tabs (the shell or the host navigates). The
+     host's configuration warnings come first, in their own card. -->
 <script lang="ts">
   import { onMount } from "svelte";
   import { useFabricUI } from "../../context";
@@ -9,6 +10,7 @@
   import Card from "../../kit/Card.svelte";
   import ErrorState from "../../kit/ErrorState.svelte";
   import LoadingState from "../../kit/LoadingState.svelte";
+  import HostWarnings from "./HostWarnings.svelte";
 
   const { t, node } = useFabricUI();
 
@@ -24,10 +26,12 @@
 {:else if node.statusError && !s}
   <ErrorState message={node.statusError} onRetry={() => void node.loadStatus()} />
 {:else if s && !s.enabled}
+  <HostWarnings warnings={s.warnings ?? []} />
   <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}
+  <HostWarnings warnings={s.warnings ?? []} />
   <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>

package/src/lib/pages/node/fields.ts

@@ -0,0 +1,32 @@
+// List-valued item fields (Column.multi, Filter.multi): the provider
+// carries several values as one comma-separated string.
+
+/** The values of a comma-separated field, trimmed, without empty ones. */
+export function listValues(field: string | undefined): string[] {
+  if (!field) return [];
+  return field
+    .split(",")
+    .map((v) => v.trim())
+    .filter((v) => v !== "");
+}
+
+/**
+ * Whether an item's field matches a filter value: by equality, or, for a
+ * list-valued field, by membership in its list. An empty value never
+ * matches a list.
+ */
+export function fieldMatches(field: string | undefined, value: string, multi: boolean): boolean {
+  if (!multi) return field === value;
+  const v = value.trim();
+  return v !== "" && listValues(field).includes(v);
+}
+
+/** The distinct filter values of a field across items, sorted for display. */
+export function distinctValues(fields: (string | undefined)[], multi: boolean): string[] {
+  const values = new Set<string>();
+  for (const f of fields) {
+    if (multi) for (const v of listValues(f)) values.add(v);
+    else if (f) values.add(f);
+  }
+  return [...values].sort((a, b) => a.localeCompare(b, undefined, { sensitivity: "base", numeric: true }));
+}