feat(webui): distinguish between correctly & incorrectly typed members in Inspect

webui/src/components/Inspect.svelte

@@ -4,11 +4,11 @@
   import UpObject from "./display/UpObject.svelte";
   import { createEventDispatcher } from "svelte";
   import { derived, type Readable } from "svelte/store";
-  import type { UpEntry } from "@upnd/upend";
+  import { Query, type UpEntry } from "@upnd/upend";
   import Spinner from "./utils/Spinner.svelte";
   import NotesEditor from "./utils/NotesEditor.svelte";
   import type { WidgetChange } from "../types/base";
-  import type { EntityInfo } from "@upnd/upend/types";
+  import type { Address, EntityInfo } from "@upnd/upend/types";
   import IconButton from "./utils/IconButton.svelte";
   import { Link } from "svelte-navigator";
   import BlobViewer from "./display/BlobViewer.svelte";
@@ -26,6 +26,7 @@
   import InspectTypeEditor from "./InspectTypeEditor.svelte";
   import LabelBorder from "./utils/LabelBorder.svelte";
   import { debug } from "debug";
+  import { Any } from "@upnd/upend/query";
   const dbg = debug("kestrel:Inspect");
 
   const dispatch = createEventDispatcher();
@@ -181,6 +182,46 @@
     }
   }
 
+  let correctlyTagged: Address[] | undefined;
+  let incorrectlyTagged: Address[] | undefined;
+  $: {
+    if ($entity?.attr[`~${ATTR_OF}`]) {
+      fetchCorrectlyTagged();
+    }
+  }
+
+  async function fetchCorrectlyTagged() {
+    const attributes = (
+      await Promise.all(
+        $entity?.attr[`~${ATTR_OF}`].map((e) =>
+          api.addressToComponents(e.entity),
+        ),
+      )
+    )
+      .filter((ac) => ac.t == "Attribute")
+      .map((ac) => ac.c);
+
+    const attributeQuery = await api.query(
+      Query.matches(
+        tagged.map((t) => `@${t.entity}`),
+        attributes,
+        Any,
+      ),
+    );
+
+    correctlyTagged = [];
+    incorrectlyTagged = [];
+
+    for (const element of tagged) {
+      const entity = attributeQuery.getObject(element.entity);
+      if (attributes.every((attr) => entity.attr[attr])) {
+        correctlyTagged = [...correctlyTagged, element.entity];
+      } else {
+        incorrectlyTagged = [...incorrectlyTagged, element.entity];
+      }
+    }
+  }
+
   async function onChange(ev: CustomEvent<WidgetChange>) {
     dbg("onChange", ev.detail);
     const change = ev.detail;
@@ -416,13 +457,38 @@
               />
             {/if}
 
-            <EntryView
-              title={`${$i18n.t("Members")}`}
-              widgets={taggedWidgets}
-              entries={tagged}
-              on:change={onChange}
-              {address}
-            />
+            {#if !correctlyTagged || !incorrectlyTagged}
+              <EntryView
+                title={`${$i18n.t("Members")}`}
+                widgets={taggedWidgets}
+                entries={tagged}
+                on:change={onChange}
+                {address}
+              />
+            {:else}
+              <EntryView
+                title={`${$i18n.t("Typed Members")} (${
+                  correctlyTagged.length
+                })`}
+                widgets={taggedWidgets}
+                entries={tagged.filter((e) =>
+                  correctlyTagged.includes(e.entity),
+                )}
+                on:change={onChange}
+                {address}
+              />
+              <EntryView
+                title={`${$i18n.t("Untyped members")} (${
+                  incorrectlyTagged.length
+                })`}
+                widgets={taggedWidgets}
+                entries={tagged.filter((e) =>
+                  incorrectlyTagged.includes(e.entity),
+                )}
+                on:change={onChange}
+                {address}
+              />
+            {/if}
 
             {#if currentBacklinks.length > 0}
               <EntryView