From 074b929f537318c6afc864e3cba31e7711b55432 Mon Sep 17 00:00:00 2001
From: Leo <leobensman@gmail.com>
Date: Tue, 14 Jan 2025 22:35:15 +0100
Subject: [PATCH] make roles user-defined

---
 ui/src/crud/store.ts                          |   4 +
 ui/src/lib/Initialize.svelte                  |   8 +-
 ui/src/lib/Map.svelte                         |  10 +-
 ui/src/lib/Nav.svelte                         |  70 ++++----
 ui/src/lib/RecipeFlowModal.svelte             |  92 ++++++++---
 ui/src/lib/SidePanel.svelte                   |   2 +-
 ui/src/lib/SvgIcon.svelte                     |  29 ++++
 ui/src/lib/graphql/proposal.fragments.ts      |   5 +
 ui/src/lib/svgIcons.ts                        |  40 +++++
 ui/src/routes/+page.svelte                    |   4 +-
 ui/src/routes/agents/+page.svelte             |   2 +-
 ui/src/routes/agents/AgentModal.svelte        | 106 +++++++++---
 ui/src/routes/plans/=helper.ts                | 151 +++++++++++-------
 .../plans/update/[plan_id]/+page.svelte       |  75 ++++-----
 ui/static/building.svg                        |   1 +
 15 files changed, 419 insertions(+), 180 deletions(-)
 create mode 100644 ui/src/lib/SvgIcon.svelte
 create mode 100644 ui/src/lib/svgIcons.ts
 create mode 100644 ui/static/building.svg

diff --git a/ui/src/crud/store.ts b/ui/src/crud/store.ts
index 031a94a..9abf18f 100644
--- a/ui/src/crud/store.ts
+++ b/ui/src/crud/store.ts
@@ -3,6 +3,7 @@ import { writable } from 'svelte/store';
 export const allHashChanges = writable([]);
 export const clientStored = writable(null);
 export const allAgents = writable([]);
+export const allRoles = writable([]);
 export const allFacets = writable([]);
 export const allFacetValues = writable([]);
 export const allUnits = writable([]);
@@ -42,6 +43,9 @@ export function setActions(newActions: any) {
 
 export function setAgents(newAgents: any) {
     allAgents.update(v => newAgents);
+    const roles = newAgents.map((a: any) => a.classifiedAs[2]).flat();
+    const uniqueRoles = Array.from(new Set(roles));
+    allRoles.update(v => uniqueRoles);
 }
 
 export function setEconomicEvents(newEconomicEvents: any) {
diff --git a/ui/src/lib/Initialize.svelte b/ui/src/lib/Initialize.svelte
index 75093e2..545a5bf 100644
--- a/ui/src/lib/Initialize.svelte
+++ b/ui/src/lib/Initialize.svelte
@@ -405,11 +405,9 @@
   onMount(checkDependencies)
   // dependenciesOk = false
 </script>
-<!-- <button
-    on:click={addRecipes}
-  >
-    RECIPES
-  </button> -->
+
+<!-- <button on:click={addRecipes}>RECIPES</button> -->
+
 {#if dependenciesOk === true}
   <slot></slot>
 {:else}
diff --git a/ui/src/lib/Map.svelte b/ui/src/lib/Map.svelte
index e623e99..04c994f 100644
--- a/ui/src/lib/Map.svelte
+++ b/ui/src/lib/Map.svelte
@@ -31,10 +31,10 @@
   }
 
   const defaultIconOptions = {
-    iconSize: [41, 41],
-    iconAnchor: [20, 41],
-    popupAnchor: [1, -34],
-    tooltipAnchor: [16 - 28]
+    iconSize: [31, 31],
+    // iconAnchor: [20, 41],
+    // popupAnchor: [1, -34],
+    // tooltipAnchor: [16 - 28]
   }
 </script>
 
@@ -52,7 +52,7 @@
       }}
     >
       {#if agent.iconUrl }
-        <Icon options={{iconUrl: agent.iconUrl}} />
+        <Icon options={{iconUrl: agent.iconUrl, ...defaultIconOptions}} />
         <!-- <img class="h-20 w-20" src={agent.iconUrl} alt="" /> -->
 
       {/if}
diff --git a/ui/src/lib/Nav.svelte b/ui/src/lib/Nav.svelte
index e51f0d8..e316c89 100644
--- a/ui/src/lib/Nav.svelte
+++ b/ui/src/lib/Nav.svelte
@@ -136,6 +136,36 @@
             >
               Plans
             </button>
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/commitments' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/commitments')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Exchanges</button
+            >
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/economic_events' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/economic_events')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Activity</button
+            >
+
+
+            <button
+              style="cursor: pointer;"
+              class="{path === '/economic_resources' ? 'nav-active' : 'nav-inactive'} nav-default"
+              on:click={() => navigate('/economic_resources')}
+              role="menuitem"
+              tabindex="-1"
+              id="user-menu-item-1">Inventory</button
+            >
           </div>
         </div>
       </div>
@@ -207,7 +237,7 @@
             <!-- Active: "bg-gray-100", Not Active: "" -->
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+                class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/agents')}
               role="menuitem"
               tabindex="-1"
@@ -215,7 +245,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               style="text-align: left;"
               on:click={() => navigate('/resource_specifications')}
               role="menuitem"
@@ -224,7 +254,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/process_specifications')}
               role="menuitem"
               tabindex="-1"
@@ -232,31 +262,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/economic_events')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Economic events</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/economic_resources')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Economic resources</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
-              on:click={() => navigate('/commitments')}
-              role="menuitem"
-              tabindex="-1"
-              id="user-menu-item-1">Exchanges</button
-            >
-            <button
-              type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/units')}
               role="menuitem"
               tabindex="-1"
@@ -264,7 +270,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/facets')}
               role="menuitem"
               tabindex="-1"
@@ -272,7 +278,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/recipes')}
               role="menuitem"
               tabindex="-1"
@@ -280,7 +286,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/recipe_exchanges')}
               role="menuitem"
               tabindex="-1"
@@ -288,7 +294,7 @@
             >
             <button
               type="button"
-              class="block px-4 py-2 text-sm text-gray-700"
+              class="block w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 text-left"
               on:click={() => navigate('/export')}
               role="menuitem"
               tabindex="-1"
diff --git a/ui/src/lib/RecipeFlowModal.svelte b/ui/src/lib/RecipeFlowModal.svelte
index 0e184a7..f1d9fa7 100644
--- a/ui/src/lib/RecipeFlowModal.svelte
+++ b/ui/src/lib/RecipeFlowModal.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
   import { clickOutside } from '../utils'
-  import { allActions, allResourceSpecifications, allUnits } from '../crud/store';
+  import { allActions, allResourceSpecifications, allUnits, allRoles } from '../crud/store';
   import { createRecipeFlow, updateRecipeFlow } from '../crud/commit';
   import { onMount } from 'svelte';
   import type { RecipeFlowCreateParams, RecipeFlowUpdateParams } from '@leosprograms/vf-graphql'
@@ -30,18 +30,23 @@
     resourceSpecifications = value
   })
 
-  const dispatch = createEventDispatcher();
+  let roles: any = allRoles
+  allRoles.subscribe(value => {
+    roles = value
+  })
+
+  // let roles = [
+  //   "Farmer",
+  //   "Scouring Mill",
+  //   "Spinning Mill",
+  //   "Knitting Factory",
+  //   "Weaving Factory",
+  //   "Designer",
+  //   "Shipping",
+  //   "Network",
+  // ]
 
-  let roles = [
-    "Farmer",
-    "Scouring Mill",
-    "Spinning Mill",
-    "Knitting Factory",
-    "Weaving Factory",
-    "Designer",
-    "Shipping",
-    "Network",
-  ]
+  const dispatch = createEventDispatcher();
 
   function checkKey(e: any) {
     if (e.key === "Escape" && !e.shiftKey) {
@@ -127,7 +132,7 @@
                   for="provider_role"
                   class="block text-sm font-medium leading-6 text-gray-900">Provider Role</label
                 >
-                <select
+                <!-- <select
                   id="provider_role"
                   name="provider_role"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -140,7 +145,28 @@
                   {#each roles as role}
                     <option value={role}>{role}</option>
                   {/each}
-                </select>
+                </select> -->
+                <input
+                  type="text"
+                  id="classifiedAs"
+                  name="classifiedAs"
+                  list="roleSuggestions"
+                  bind:value={recipeFlow.providerRole}
+                  on:input={e => {
+                  const input = e.target;
+                  if (input instanceof HTMLInputElement) {
+                    recipeFlow.providerRole = input.value;
+                    //@ts-ignore
+                    // currentAgent.imageUrl = roleImages[role] || 'profile.png'
+                  }
+                  }}
+                  class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+                <datalist id="roleSuggestions">
+                  {#each roles as role (role)}
+                  <option value={role}>{role}</option>
+                  {/each}
+                </datalist>
               </div>
             </div>
 
@@ -150,7 +176,7 @@
                   for="receiverRole"
                   class="block text-sm font-medium leading-6 text-gray-900">Receiver Role</label
                 >
-                <select
+                <!-- <select
                   id="receiverRole"
                   name="receiverRole"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
@@ -163,7 +189,28 @@
                   {#each roles as role}
                     <option value={role}>{role}</option>
                   {/each}
-                </select>
+                </select> -->
+                <input
+                  type="text"
+                  id="classifiedAs"
+                  name="classifiedAs"
+                  list="roleSuggestions"
+                  bind:value={recipeFlow.receiverRole}
+                  on:input={e => {
+                  const input = e.target;
+                  if (input instanceof HTMLInputElement) {
+                    recipeFlow.receiverRole = input.value;
+                    //@ts-ignore
+                    // currentAgent.imageUrl = roleImages[role] || 'profile.png'
+                  }
+                  }}
+                  class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                />
+                <datalist id="roleSuggestions">
+                  {#each roles as role (role)}
+                  <option value={role}>{role}</option>
+                  {/each}
+                </datalist>
               </div>
             </div>
 
@@ -259,20 +306,23 @@
                   for="unit"
                   class="block text-sm font-medium leading-6 text-gray-900">Unit</label
                 >
-                {recipeFlow.resourceQuantity?.hasUnit ? units.find(it => it.id === recipeFlow.resourceQuantity.hasUnit)?.label
-                 : ""}
-                <!-- <select
+                <!-- {recipeFlow.resourceQuantity?.hasUnit ? units.find(it => it.id === recipeFlow.resourceQuantity.hasUnit)?.label
+                 : ""} -->
+                <select
                   id="unit"
                   name="unit"
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  value={recipeFlow.resourceQuantity?.hasUnit}
                   on:change={(e) => {
-                    recipeFlow.unit = e.target.value
+                    if (recipeFlow.resourceQuantity) {
+                      recipeFlow.resourceQuantity.hasUnit = e.target.value
+                    }
                   }}
                 >
                   {#each $allUnits as unit}
                     <option value={unit.id}>{unit.label}</option>
                   {/each}
-                </select> -->
+                </select>
               </div>
             </div>
 
diff --git a/ui/src/lib/SidePanel.svelte b/ui/src/lib/SidePanel.svelte
index 7f1c0b2..076d541 100644
--- a/ui/src/lib/SidePanel.svelte
+++ b/ui/src/lib/SidePanel.svelte
@@ -76,7 +76,7 @@
               -->
               <div class="ml-8">
                 {#if panelInfo && panelInfo.imageUrl}
-                  <img class="h-20 w-20" src={panelInfo.imageUrl} alt="" />
+                  <img class="w-20" src={panelInfo.imageUrl} alt="" />
                 {:else}
                   <span
                     class="inline-block h-14 w-14 rounded-full overflow-hidden bg-gray-100"
diff --git a/ui/src/lib/SvgIcon.svelte b/ui/src/lib/SvgIcon.svelte
new file mode 100644
index 0000000..7496a84
--- /dev/null
+++ b/ui/src/lib/SvgIcon.svelte
@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { svgIcons } from "./svgIcons"
+
+    export let icon: string
+    export let style: string = ""
+    export let color: string =""
+    export let size: string = "20px"
+
+    $:iconStr = () => {
+        let i = svgIcons[icon]
+        if (!i) console.log("missing icon for ", icon)
+        if (color) {
+            i = i.replace("<svg",`<svg fill="${color}"`)
+        }
+        return `data:image/svg+xml;charset=utf-8,${i.replace("#","%23")}`
+    }
+    $:styleStr = `${size ? "width:"+size:""};`
+</script>
+
+<div class="icon" style={style}><img width={size} src={iconStr()}/></div>
+
+<style>
+    .icon {
+        display: inline-block;
+    }
+    .icon img {
+        vertical-align: middle;
+    }
+</style>
\ No newline at end of file
diff --git a/ui/src/lib/graphql/proposal.fragments.ts b/ui/src/lib/graphql/proposal.fragments.ts
index 69418db..a0f1d18 100644
--- a/ui/src/lib/graphql/proposal.fragments.ts
+++ b/ui/src/lib/graphql/proposal.fragments.ts
@@ -16,10 +16,12 @@ export const INTENT_CORE_FIELDS = gql`
     provider {
       id
       name
+      classifiedAs
     }
     receiver {
       id
       name
+      classifiedAs
     }
     action {
       label
@@ -50,6 +52,7 @@ export const PROPOSED_INTENT_CORE_FIELDS = gql`
       revisionId
       provider {
         name
+        classifiedAs
       }
       resourceConformsTo {
         name
@@ -120,10 +123,12 @@ export const PROPOSAL_RETURN_FIELDS = gql`
         provider {
           id
           name
+          classifiedAs
         }
         receiver {
           id
           name
+          classifiedAs
         }
         finished
         note
diff --git a/ui/src/lib/svgIcons.ts b/ui/src/lib/svgIcons.ts
new file mode 100644
index 0000000..1b859a7
--- /dev/null
+++ b/ui/src/lib/svgIcons.ts
@@ -0,0 +1,40 @@
+export const svgIcons = {
+  faSearch: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg>`,
+  faCog: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M495.9 166.6c3.2 8.7 .5 18.4-6.4 24.6l-43.3 39.4c1.1 8.3 1.7 16.8 1.7 25.4s-.6 17.1-1.7 25.4l43.3 39.4c6.9 6.2 9.6 15.9 6.4 24.6c-4.4 11.9-9.7 23.3-15.8 34.3l-4.7 8.1c-6.6 11-14 21.4-22.1 31.2c-5.9 7.2-15.7 9.6-24.5 6.8l-55.7-17.7c-13.4 10.3-28.2 18.9-44 25.4l-12.5 57.1c-2 9.1-9 16.3-18.2 17.8c-13.8 2.3-28 3.5-42.5 3.5s-28.7-1.2-42.5-3.5c-9.2-1.5-16.2-8.7-18.2-17.8l-12.5-57.1c-15.8-6.5-30.6-15.1-44-25.4L83.1 425.9c-8.8 2.8-18.6 .3-24.5-6.8c-8.1-9.8-15.5-20.2-22.1-31.2l-4.7-8.1c-6.1-11-11.4-22.4-15.8-34.3c-3.2-8.7-.5-18.4 6.4-24.6l43.3-39.4C64.6 273.1 64 264.6 64 256s.6-17.1 1.7-25.4L22.4 191.2c-6.9-6.2-9.6-15.9-6.4-24.6c4.4-11.9 9.7-23.3 15.8-34.3l4.7-8.1c6.6-11 14-21.4 22.1-31.2c5.9-7.2 15.7-9.6 24.5-6.8l55.7 17.7c13.4-10.3 28.2-18.9 44-25.4l12.5-57.1c2-9.1 9-16.3 18.2-17.8C227.3 1.2 241.5 0 256 0s28.7 1.2 42.5 3.5c9.2 1.5 16.2 8.7 18.2 17.8l12.5 57.1c15.8 6.5 30.6 15.1 44 25.4l55.7-17.7c8.8-2.8 18.6-.3 24.5 6.8c8.1 9.8 15.5 20.2 22.1 31.2l4.7 8.1c6.1 11 11.4 22.4 15.8 34.3zM256 336a80 80 0 1 0 0-160 80 80 0 1 0 0 160z"/></svg>`,
+  faTrash: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M135.2 17.7L128 32H32C14.3 32 0 46.3 0 64S14.3 96 32 96H416c17.7 0 32-14.3 32-32s-14.3-32-32-32H320l-7.2-14.3C307.4 6.8 296.3 0 284.2 0H163.8c-12.1 0-23.2 6.8-28.6 17.7zM416 128H32L53.2 467c1.6 25.3 22.6 45 47.9 45H346.9c25.3 0 46.3-19.7 47.9-45L416 128z"/></svg>`,
+  faCancel: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
+  faEdit: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M441 58.9L453.1 71c9.4 9.4 9.4 24.6 0 33.9L424 134.1 377.9 88 407 58.9c9.4-9.4 24.6-9.4 33.9 0zM209.8 256.2L344 121.9 390.1 168 255.8 302.2c-2.9 2.9-6.5 5-10.4 6.1l-58.5 16.7 16.7-58.5c1.1-3.9 3.2-7.5 6.1-10.4zM373.1 25L175.8 222.2c-8.7 8.7-15 19.4-18.3 31.1l-28.6 100c-2.4 8.4-.1 17.4 6.1 23.6s15.2 8.5 23.6 6.1l100-28.6c11.8-3.4 22.5-9.7 31.1-18.3L487 138.9c28.1-28.1 28.1-73.7 0-101.8L474.9 25C446.8-3.1 401.2-3.1 373.1 25zM88 64C39.4 64 0 103.4 0 152V424c0 48.6 39.4 88 88 88H360c48.6 0 88-39.4 88-88V312c0-13.3-10.7-24-24-24s-24 10.7-24 24V424c0 22.1-17.9 40-40 40H88c-22.1 0-40-17.9-40-40V152c0-22.1 17.9-40 40-40H200c13.3 0 24-10.7 24-24s-10.7-24-24-24H88z"/></svg>`,
+  faPlus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32V224H48c-17.7 0-32 14.3-32 32s14.3 32 32 32H192V432c0 17.7 14.3 32 32 32s32-14.3 32-32V288H400c17.7 0 32-14.3 32-32s-14.3-32-32-32H256V80z"/></svg>`,
+  faSpinner: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M304 48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zm0 416a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM48 304a48 48 0 1 0 0-96 48 48 0 1 0 0 96zm464-48a48 48 0 1 0 -96 0 48 48 0 1 0 96 0zM142.9 437A48 48 0 1 0 75 369.1 48 48 0 1 0 142.9 437zm0-294.2A48 48 0 1 0 75 75a48 48 0 1 0 67.9 67.9zM369.1 437A48 48 0 1 0 437 369.1 48 48 0 1 0 369.1 437z"/></svg>`,
+  faSquarePlus: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64H384c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM200 344V280H136c-13.3 0-24-10.7-24-24s10.7-24 24-24h64V168c0-13.3 10.7-24 24-24s24 10.7 24 24v64h64c13.3 0 24 10.7 24 24s-10.7 24-24 24H248v64c0 13.3-10.7 24-24 24s-24-10.7-24-24z"/></svg>`,
+  faArchive: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M32 32H480c17.7 0 32 14.3 32 32V96c0 17.7-14.3 32-32 32H32C14.3 128 0 113.7 0 96V64C0 46.3 14.3 32 32 32zm0 128H480V416c0 35.3-28.7 64-64 64H96c-35.3 0-64-28.7-64-64V160zm128 80c0 8.8 7.2 16 16 16H336c8.8 0 16-7.2 16-16s-7.2-16-16-16H176c-8.8 0-16 7.2-16 16z"/></svg>`,
+  faPaperPlane: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M16.1 260.2c-22.6 12.9-20.5 47.3 3.6 57.3L160 376V479.3c0 18.1 14.6 32.7 32.7 32.7c9.7 0 18.9-4.3 25.1-11.8l62-74.3 123.9 51.6c18.9 7.9 40.8-4.5 43.9-24.7l64-416c1.9-12.1-3.4-24.3-13.5-31.2s-23.3-7.5-34-1.4l-448 256zm52.1 25.5L409.7 90.6 190.1 336l1.2 1L68.2 285.7zM403.3 425.4L236.7 355.9 450.8 116.6 403.3 425.4z"/></svg>`,
+  faUserGroup: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M96 128a128 128 0 1 1 256 0A128 128 0 1 1 96 128zM0 482.3C0 383.8 79.8 304 178.3 304h91.4C368.2 304 448 383.8 448 482.3c0 16.4-13.3 29.7-29.7 29.7H29.7C13.3 512 0 498.7 0 482.3zM609.3 512H471.4c5.4-9.4 8.6-20.3 8.6-32v-8c0-60.7-27.1-115.2-69.8-151.8c2.4-.1 4.7-.2 7.1-.2h61.4C567.8 320 640 392.2 640 481.3c0 17-13.8 30.7-30.7 30.7zM432 256c-31 0-59-12.6-79.3-32.9C372.4 196.5 384 163.6 384 128c0-26.8-6.6-52.1-18.3-74.3C384.3 40.1 407.2 32 432 32c61.9 0 112 50.1 112 112s-50.1 112-112 112z"/></svg>`,
+  faArrowTurnDown: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M32 64C14.3 64 0 49.7 0 32S14.3 0 32 0l96 0c53 0 96 43 96 96l0 306.7 73.4-73.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-128 128c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 402.7 160 96c0-17.7-14.3-32-32-32L32 64z"/></svg>`,
+  faArrowRight: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"/></svg>`,
+  faCheck: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z"/></svg>`,
+  faComments: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="20" viewBox="0 0 640 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M88.2 309.1c9.8-18.3 6.8-40.8-7.5-55.8C59.4 230.9 48 204 48 176c0-63.5 63.8-128 160-128s160 64.5 160 128s-63.8 128-160 128c-13.1 0-25.8-1.3-37.8-3.6c-10.4-2-21.2-.6-30.7 4.2c-4.1 2.1-8.3 4.1-12.6 6c-16 7.2-32.9 13.5-49.9 18c2.8-4.6 5.4-9.1 7.9-13.6c1.1-1.9 2.2-3.9 3.2-5.9zM0 176c0 41.8 17.2 80.1 45.9 110.3c-.9 1.7-1.9 3.5-2.8 5.1c-10.3 18.4-22.3 36.5-36.6 52.1c-6.6 7-8.3 17.2-4.6 25.9C5.8 378.3 14.4 384 24 384c43 0 86.5-13.3 122.7-29.7c4.8-2.2 9.6-4.5 14.2-6.8c15.1 3 30.9 4.5 47.1 4.5c114.9 0 208-78.8 208-176S322.9 0 208 0S0 78.8 0 176zM432 480c16.2 0 31.9-1.6 47.1-4.5c4.6 2.3 9.4 4.6 14.2 6.8C529.5 498.7 573 512 616 512c9.6 0 18.2-5.7 22-14.5c3.8-8.8 2-19-4.6-25.9c-14.2-15.6-26.2-33.7-36.6-52.1c-.9-1.7-1.9-3.4-2.8-5.1C622.8 384.1 640 345.8 640 304c0-94.4-87.9-171.5-198.2-175.8c4.1 15.2 6.2 31.2 6.2 47.8l0 .6c87.2 6.7 144 67.5 144 127.4c0 28-11.4 54.9-32.7 77.2c-14.3 15-17.3 37.6-7.5 55.8c1.1 2 2.2 4 3.2 5.9c2.5 4.5 5.2 9 7.9 13.6c-17-4.5-33.9-10.7-49.9-18c-4.3-1.9-8.5-3.9-12.6-6c-9.5-4.8-20.3-6.2-30.7-4.2c-12.1 2.4-24.7 3.6-37.8 3.6c-61.7 0-110-26.5-136.8-62.3c-16 5.4-32.8 9.4-50 11.8C279 439.8 350 480 432 480z"/></svg>`,
+  faGripVertical: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="10" viewBox="0 0 320 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M40 352l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zm192 0l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 320c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 192l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40zM40 160c-22.1 0-40-17.9-40-40L0 72C0 49.9 17.9 32 40 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0zM232 32l48 0c22.1 0 40 17.9 40 40l0 48c0 22.1-17.9 40-40 40l-48 0c-22.1 0-40-17.9-40-40l0-48c0-22.1 17.9-40 40-40z"/></svg>`,
+  faUser: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M224 256A128 128 0 1 0 224 0a128 128 0 1 0 0 256zm-45.7 48C79.8 304 0 383.8 0 482.3C0 498.7 13.3 512 29.7 512H418.3c16.4 0 29.7-13.3 29.7-29.7C448 383.8 368.2 304 269.7 304H178.3z"/></svg>`,
+  faFileImport: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M128 64c0-35.3 28.7-64 64-64H352V128c0 17.7 14.3 32 32 32H512V448c0 35.3-28.7 64-64 64H192c-35.3 0-64-28.7-64-64V336H302.1l-39 39c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l80-80c9.4-9.4 9.4-24.6 0-33.9l-80-80c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l39 39H128V64zm0 224v48H24c-13.3 0-24-10.7-24-24s10.7-24 24-24H128zM512 128H384V0L512 128z"/></svg>`,
+  faFileExport: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="18" viewBox="0 0 576 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M0 64C0 28.7 28.7 0 64 0H224V128c0 17.7 14.3 32 32 32H384V288H216c-13.3 0-24 10.7-24 24s10.7 24 24 24H384V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V64zM384 336V288H494.1l-39-39c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l80 80c9.4 9.4 9.4 24.6 0 33.9l-80 80c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l39-39H384zm0-208H256V0L384 128z"/></svg>`,
+  faClose: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="12" viewBox="0 0 384 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"/></svg>`,
+  faBug: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M256 0c53 0 96 43 96 96v3.6c0 15.7-12.7 28.4-28.4 28.4H188.4c-15.7 0-28.4-12.7-28.4-28.4V96c0-53 43-96 96-96zM41.4 105.4c12.5-12.5 32.8-12.5 45.3 0l64 64c.7 .7 1.3 1.4 1.9 2.1c14.2-7.3 30.4-11.4 47.5-11.4H312c17.1 0 33.2 4.1 47.5 11.4c.6-.7 1.2-1.4 1.9-2.1l64-64c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3l-64 64c-.7 .7-1.4 1.3-2.1 1.9c6.2 12 10.1 25.3 11.1 39.5H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H416c0 24.6-5.5 47.8-15.4 68.6c2.2 1.3 4.2 2.9 6 4.8l64 64c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0l-63.1-63.1c-24.5 21.8-55.8 36.2-90.3 39.6V240c0-8.8-7.2-16-16-16s-16 7.2-16 16V479.2c-34.5-3.4-65.8-17.8-90.3-39.6L86.6 502.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l64-64c1.9-1.9 3.9-3.4 6-4.8C101.5 367.8 96 344.6 96 320H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H96.3c1.1-14.1 5-27.5 11.1-39.5c-.7-.6-1.4-1.2-2.1-1.9l-64-64c-12.5-12.5-12.5-32.8 0-45.3z"/></svg>`,
+  faBars: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M0 96C0 78.3 14.3 64 32 64H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32C14.3 128 0 113.7 0 96zM0 256c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 416c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>`,
+  faClone: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M64 464H288c8.8 0 16-7.2 16-16V384h48v64c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V224c0-35.3 28.7-64 64-64h64v48H64c-8.8 0-16 7.2-16 16V448c0 8.8 7.2 16 16 16zM224 304H448c8.8 0 16-7.2 16-16V64c0-8.8-7.2-16-16-16H224c-8.8 0-16 7.2-16 16V288c0 8.8 7.2 16 16 16zm-64-16V64c0-35.3 28.7-64 64-64H448c35.3 0 64 28.7 64 64V288c0 35.3-28.7 64-64 64H224c-35.3 0-64-28.7-64-64z"/></svg>`,
+  faPaperclip: `<svg xmlns="http://www.w3.org/2000/svg" height="16" width="14" viewBox="0 0 448 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2023 Fonticons, Inc.--><path d="M364.2 83.8c-24.4-24.4-64-24.4-88.4 0l-184 184c-42.1 42.1-42.1 110.3 0 152.4s110.3 42.1 152.4 0l152-152c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-152 152c-64 64-167.6 64-231.6 0s-64-167.6 0-231.6l184-184c46.3-46.3 121.3-46.3 167.6 0s46.3 121.3 0 167.6l-176 176c-28.6 28.6-75 28.6-103.6 0s-28.6-75 0-103.6l144-144c10.9-10.9 28.7-10.9 39.6 0s10.9 28.7 0 39.6l-144 144c-6.7 6.7-6.7 17.7 0 24.4s17.7 6.7 24.4 0l176-176c24.4-24.4 24.4-64 0-88.4z"/></svg>`,
+  faStopCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1536 1536"><path fill="currentColor" d="M1088 1056V480q0-14-9-23t-23-9H480q-14 0-23 9t-9 23v576q0 14 9 23t23 9h576q14 0 23-9t9-23m448-288q0 209-103 385.5T1153.5 1433T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0t385.5 103T1433 382.5T1536 768"/></svg>`,
+  faPlayCircle: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1536 1536"><path fill="currentColor" d="M768 0q209 0 385.5 103T1433 382.5T1536 768t-103 385.5t-279.5 279.5T768 1536t-385.5-103T103 1153.5T0 768t103-385.5T382.5 103T768 0m384 823q32-18 32-55t-32-55L608 393q-31-19-64-1q-32 19-32 56v640q0 37 32 56q16 8 32 8q17 0 32-9z"/></svg>`,
+  faToggleOn: `<svg xmlns="http://www.w3.org/2000/svg" width="1.6em" height="1em" viewBox="0 0 2048 1280"><path fill="currentColor" d="M0 640q0-130 51-248.5t136.5-204T391.5 51T640 0h768q130 0 248.5 51t204 136.5t136.5 204t51 248.5t-51 248.5t-136.5 204t-204 136.5t-248.5 51H640q-130 0-248.5-51t-204-136.5T51 888.5T0 640m1408 512q104 0 198.5-40.5T1770 1002t109.5-163.5T1920 640t-40.5-198.5T1770 278t-163.5-109.5T1408 128t-198.5 40.5T1046 278T936.5 441.5T896 640t40.5 198.5T1046 1002t163.5 109.5T1408 1152"/></svg>`,
+  faToggleOff: `<svg xmlns="http://www.w3.org/2000/svg" width="1.6em" height="1em" viewBox="0 0 2048 1280"><path fill="currentColor" d="M1152 640q0-104-40.5-198.5T1002 278T838.5 168.5T640 128t-198.5 40.5T278 278T168.5 441.5T128 640t40.5 198.5T278 1002t163.5 109.5T640 1152t198.5-40.5T1002 1002t109.5-163.5T1152 640m768 0q0-104-40.5-198.5T1770 278t-163.5-109.5T1408 128h-386q119 90 188.5 224t69.5 288t-69.5 288t-188.5 224h386q104 0 198.5-40.5T1770 1002t109.5-163.5T1920 640m128 0q0 130-51 248.5t-136.5 204t-204 136.5t-248.5 51H640q-130 0-248.5-51t-204-136.5T51 888.5T0 640t51-248.5t136.5-204T391.5 51T640 0h768q130 0 248.5 51t204 136.5t136.5 204t51 248.5"/></svg>`,
+  faShare: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 1536 1536"><path d="M1216 896q133 0 226.5 93.5T1536 1216t-93.5 226.5T1216 1536t-226.5-93.5T896 1216q0-12 2-34l-360-180q-92 86-218 86q-133 0-226.5-93.5T0 768t93.5-226.5T320 448q126 0 218 86l360-180q-2-22-2-34q0-133 93.5-226.5T1216 0t226.5 93.5T1536 320t-93.5 226.5T1216 640q-126 0-218-86L638 734q2 22 2 34t-2 34l360 180q92-86 218-86"/></svg>`,
+  link: `<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M8 12C8 12.2652 8.10536 12.5196 8.29289 12.7071C8.48043 12.8946 8.73478 13 9 13H15C15.2652 13 15.5196 12.8946 15.7071 12.7071C15.8946 12.5196 16 12.2652 16 12C16 11.7348 15.8946 11.4804 15.7071 11.2929C15.5196 11.1054 15.2652 11 15 11H9C8.73478 11 8.48043 11.1054 8.29289 11.2929C8.10536 11.4804 8 11.7348 8 12ZM10 15H7C6.20435 15 5.44129 14.6839 4.87868 14.1213C4.31607 13.5587 4 12.7956 4 12C4 11.2044 4.31607 10.4413 4.87868 9.87868C5.44129 9.31607 6.20435 9 7 9H10C10.2652 9 10.5196 8.89464 10.7071 8.70711C10.8946 8.51957 11 8.26522 11 8C11 7.73478 10.8946 7.48043 10.7071 7.29289C10.5196 7.10536 10.2652 7 10 7H7C5.67392 7 4.40215 7.52678 3.46447 8.46447C2.52678 9.40215 2 10.6739 2 12C2 13.3261 2.52678 14.5979 3.46447 15.5355C4.40215 16.4732 5.67392 17 7 17H10C10.2652 17 10.5196 16.8946 10.7071 16.7071C10.8946 16.5196 11 16.2652 11 16C11 15.7348 10.8946 15.4804 10.7071 15.2929C10.5196 15.1054 10.2652 15 10 15ZM17 7H14C13.7348 7 13.4804 7.10536 13.2929 7.29289C13.1054 7.48043 13 7.73478 13 8C13 8.26522 13.1054 8.51957 13.2929 8.70711C13.4804 8.89464 13.7348 9 14 9H17C17.7956 9 18.5587 9.31607 19.1213 9.87868C19.6839 10.4413 20 11.2044 20 12C20 12.7956 19.6839 13.5587 19.1213 14.1213C18.5587 14.6839 17.7956 15 17 15H14C13.7348 15 13.4804 15.1054 13.2929 15.2929C13.1054 15.4804 13 15.7348 13 16C13 16.2652 13.1054 16.5196 13.2929 16.7071C13.4804 16.8946 13.7348 17 14 17H17C18.3261 17 19.5979 16.4732 20.5355 15.5355C21.4732 14.5979 22 13.3261 22 12C22 10.6739 21.4732 9.40215 20.5355 8.46447C19.5979 7.52678 18.3261 7 17 7Z" fill="black"/></svg>`,
+  addToPocket: `<svg width="300" height="300" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M74.2273 83.9C71.7318 83.9 69.3386 84.8956 67.574 86.6678C65.8095 88.4401 64.8182 90.8437 64.8182 93.35V150.05C64.8182 172.607 73.74 194.239 89.6209 210.189C105.502 226.139 127.041 235.1 149.5 235.1C196.27 235.1 234.182 197.023 234.182 150.05V93.35C234.182 90.8437 233.191 88.4401 231.426 86.6678C229.661 84.8956 227.268 83.9 224.773 83.9H74.2273ZM54.2676 73.3035C59.5612 67.9869 66.7409 65 74.2273 65H224.773C232.259 65 239.439 67.9869 244.732 73.3035C250.026 78.6202 253 85.8311 253 93.35V150.05C253 207.461 206.663 254 149.5 254C122.05 254 95.7245 243.048 76.3144 223.554C56.9044 204.059 46 177.619 46 150.05V93.35C46 85.8311 48.9739 78.6202 54.2676 73.3035Z" fill="black"/><path d="M188.841 141.469H158.596V110.124C158.596 105.635 154.961 102 150.474 102C145.986 102 142.351 105.635 142.351 110.124V141.469H110.085C105.635 141.469 102 145.104 102 149.593C102 154.081 105.635 157.717 110.122 157.717H142.388V188.876C142.388 193.365 146.023 197 150.511 197C154.998 197 158.633 193.365 158.633 188.876V157.717H188.878C193.365 157.717 197 154.081 197 149.593C196.944 145.104 193.328 141.469 188.841 141.469Z" fill="black"/></svg>`,
+  pulse: `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M3 12h4l3 8l4 -16l3 8h4" /></svg>`,
+  convertCard: `<svg width="800" height="800" fill="none" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" ><path d="M13 19.0008L17.8 19C18.9201 19 19.4802 19 19.908 18.782C20.2843 18.5903 20.5903 18.2843 20.782 17.908C21 17.4802 21 16.9201 21 15.8V8.2C21 7.0799 21 6.51984 20.782 6.09202C20.5903 5.71569 20.2843 5.40973 19.908 5.21799C19.4802 5 18.9201 5 17.8 5H6.2C5.0799 5 4.51984 5 4.09202 5.21799C3.71569 5.40973 3.40973 5.71569 3.21799 6.09202C3 6.51984 3 7.0799 3 8.2V15M3 9H20M9 19.0008L3 19M9 19.0008L7 17M9 19.0008L7 21" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+  searchPlus: `<svg fill="black" width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M27 24.57l-5.647-5.648a8.892 8.892 0 0 0 1.522-4.984C22.875 9.01 18.867 5 13.938 5 9.01 5 5 9.01 5 13.938c0 4.929 4.01 8.938 8.938 8.938a8.887 8.887 0 0 0 4.984-1.522L24.568 27 27 24.57zm-13.062-4.445a6.194 6.194 0 0 1-6.188-6.188 6.195 6.195 0 0 1 6.188-6.188 6.195 6.195 0 0 1 6.188 6.188 6.195 6.195 0 0 1-6.188 6.188zm3.755-7.217h-2.726v-2.725h-2.062v2.725H10.18v2.062h2.725v2.725h2.062V14.97h2.726v-2.062z"/></svg>`,
+  info: `<svg width="800px" height="800px" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path fill="bla" d="M512 64a448 448 0 1 1 0 896.064A448 448 0 0 1 512 64zm67.2 275.072c33.28 0 60.288-23.104 60.288-57.344s-27.072-57.344-60.288-57.344c-33.28 0-60.16 23.104-60.16 57.344s26.88 57.344 60.16 57.344zM590.912 699.2c0-6.848 2.368-24.64 1.024-34.752l-52.608 60.544c-10.88 11.456-24.512 19.392-30.912 17.28a12.992 12.992 0 0 1-8.256-14.72l87.68-276.992c7.168-35.136-12.544-67.2-54.336-71.296-44.096 0-108.992 44.736-148.48 101.504 0 6.784-1.28 23.68.064 33.792l52.544-60.608c10.88-11.328 23.552-19.328 29.952-17.152a12.8 12.8 0 0 1 7.808 16.128L388.48 728.576c-10.048 32.256 8.96 63.872 55.04 71.04 67.84 0 107.904-43.648 147.456-100.416z"/></svg>`,
+  network: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 20 20"><path d="M10 20a10 10 0 1 1 0-20a10 10 0 0 1 0 20m7.75-8a8.01 8.01 0 0 0 0-4h-3.82a28.81 28.81 0 0 1 0 4zm-.82 2h-3.22a14.44 14.44 0 0 1-.95 3.51A8.03 8.03 0 0 0 16.93 14m-8.85-2h3.84a24.61 24.61 0 0 0 0-4H8.08a24.61 24.61 0 0 0 0 4m.25 2c.41 2.4 1.13 4 1.67 4s1.26-1.6 1.67-4zm-6.08-2h3.82a28.81 28.81 0 0 1 0-4H2.25a8.01 8.01 0 0 0 0 4m.82 2a8.03 8.03 0 0 0 4.17 3.51c-.42-.96-.74-2.16-.95-3.51zm13.86-8a8.03 8.03 0 0 0-4.17-3.51c.42.96.74 2.16.95 3.51zm-8.6 0h3.34c-.41-2.4-1.13-4-1.67-4S8.74 3.6 8.33 6M3.07 6h3.22c.2-1.35.53-2.55.95-3.51A8.03 8.03 0 0 0 3.07 6"/></svg>`,
+  personMail: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 16 16"><path d="M2 10c0 1.507 1.086 3.047 3 3.69V9c0-.364.097-.706.268-1H3.5A1.5 1.5 0 0 0 2 9.5zm5-8.5A2.75 2.75 0 1 1 7 7a2.75 2.75 0 0 1 0-5.5m3.51 10.427L6.013 9.304A1.5 1.5 0 0 1 7.5 8h6A1.5 1.5 0 0 1 15 9.5v.01zm.227 1.013L15 10.645V13.5a1.5 1.5 0 0 1-1.5 1.5h-6A1.5 1.5 0 0 1 6 13.5v-3.046l4.248 2.478a.5.5 0 0 0 .49.008"/></svg>`,
+  faForward: `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M52.5 440.6c-9.5 7.9-22.8 9.7-34.1 4.4S0 428.4 0 416L0 96C0 83.6 7.2 72.3 18.4 67s24.5-3.6 34.1 4.4L224 214.3l0 41.7 0 41.7L52.5 440.6zM256 352l0-96 0-128 0-32c0-12.4 7.2-23.7 18.4-29s24.5-3.6 34.1 4.4l192 160c7.3 6.1 11.5 15.1 11.5 24.6s-4.2 18.5-11.5 24.6l-192 160c-9.5 7.9-22.8 9.7-34.1 4.4s-18.4-16.6-18.4-29l0-64z"/></svg>`,
+}
\ No newline at end of file
diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index 05e5e89..7a37d1e 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -32,12 +32,12 @@
   allAgents.subscribe((res) => {
     agents = res.map((a) => {
       // @ts-ignore
-      let iconUrl = roleImages[a.classifiedAs[2]] || 'mill.svg'
+      let iconUrl = roleImages[a.classifiedAs[2]] || a.image//'mill.svg'
       return {
         ...a,
         "name": a.name,
         "imageUrl": a.image,
-        "iconUrl": iconUrl,
+        "iconUrl": a.classifiedAs[3] || a.image,
         "latLng": {lat: a.classifiedAs[0], lon: a.classifiedAs[1]},
         "address": a.note,
         "offers": offersList?.filter((o: Proposal) => (o.publishes || [])
diff --git a/ui/src/routes/agents/+page.svelte b/ui/src/routes/agents/+page.svelte
index 3e667f9..44a7761 100644
--- a/ui/src/routes/agents/+page.svelte
+++ b/ui/src/routes/agents/+page.svelte
@@ -36,7 +36,7 @@
         ...a,
         "name": a.name,
         "imageUrl": a.image,
-        "iconUrl": a.image,
+        "iconUrl": a.classifiedAs[3],// ? a.classifiedAs[3] : a.image,
         "lat": a.classifiedAs[0],
         "long": a.classifiedAs[1],
         "role": a.classifiedAs[2],
diff --git a/ui/src/routes/agents/AgentModal.svelte b/ui/src/routes/agents/AgentModal.svelte
index cc569cb..d5f372f 100644
--- a/ui/src/routes/agents/AgentModal.svelte
+++ b/ui/src/routes/agents/AgentModal.svelte
@@ -14,6 +14,12 @@
   import type { OrganizationCreateParams, OrganizationUpdateParams } from '@leosprograms/vf-graphql'
   import type { Facet } from "$lib/graphql/extension-schemas"
   import { createAgent, updateAgent, associateAgentWithValue } from '../../crud/commit'
+  import { allRoles } from '../../crud/store';
+
+  let roles: any = allRoles
+  allRoles.subscribe(value => {
+    roles = value
+  })
 
   function checkKey(e: any) {
     if (e.key === "Escape" && !e.shiftKey) {
@@ -28,16 +34,17 @@
 
   const dispatch = createEventDispatcher();
 
-  let roles = [
-    "Farmer",
-    "Scouring Mill",
-    "Spinning Mill",
-    "Knitting Factory",
-    "Weaving Factory",
-    "Designer",
-    "Shipping",
-    "Network",
-  ]
+  // let roles = [
+  //   "Farmer",
+  //   "Scouring Mill",
+  //   "Spinning Mill",
+  //   "Knitting Factory",
+  //   "Weaving Factory",
+  //   "Designer",
+  //   "Shipping",
+  //   "Network",
+  // ]
+
   let roleImages = {
     "Farmer": "farm.svg",
     "Scouring Mill": "mill.svg",
@@ -49,6 +56,17 @@
     "Network": "knitting.svg",
   }
 
+  let images = [
+    "farm.svg",
+    "mill.svg",
+    "knitting.svg",
+    "truck.svg",
+    "scissors.svg",
+    "socks.svg",
+    "transfer.svg",
+    "building.svg"
+  ]
+
   export async function createAgentWrapped(agent: OrganizationCreateParams, facetsToAssociate: string[]) {
     try {
       const res = await createAgent(agent)
@@ -72,11 +90,14 @@
   }
 
   async function handleSubmit() {
+    if (!currentAgent.iconUrl) {
+      currentAgent.iconUrl = roleImages[currentAgent.role] || 'building.png'
+    }
     let agent: OrganizationCreateParams = {
         name: currentAgent.name,
         image: currentAgent.imageUrl,
         note: currentAgent.note,
-        classifiedAs: [currentAgent.lat, currentAgent.long, currentAgent.role],
+        classifiedAs: [currentAgent.lat, currentAgent.long, currentAgent.role, currentAgent.iconUrl],
 
         // $: name, latitude, longitude, note, logo, type, role, certification;
     }
@@ -84,11 +105,14 @@
   }
 
   async function handleUpdate() {
+    if (!currentAgent.iconUrl) {
+      currentAgent.iconUrl = roleImages[currentAgent.role] || 'building.png'
+    }
     let agent: OrganizationUpdateParams = {
         name: currentAgent.name,
         image: currentAgent.imageUrl,
         note: currentAgent.note,
-        classifiedAs: [currentAgent.lat, currentAgent.long, currentAgent.role],
+        classifiedAs: [currentAgent.lat, currentAgent.long, currentAgent.role, currentAgent.iconUrl],
         revisionId: currentAgent.revisionId
     }
     try {
@@ -240,24 +264,29 @@
                   for="classifiedAs"
                   class="block text-sm font-medium leading-6 text-gray-900"
                 >Role in the network</label>
-                <select
+                <input
+                  type="text"
                   id="classifiedAs"
                   name="classifiedAs"
+                  list="roleSuggestions"
                   bind:value={currentAgent.role}
-                  on:change={e => {
-                    const input = e.target;
-                    if (input instanceof HTMLSelectElement) {
-                      const role = input.value;
-                      //@ts-ignore
-                      currentAgent.imageUrl = roleImages[role] || 'profile.png'
+                  on:input={e => {
+                  const input = e.target;
+                  if (input instanceof HTMLInputElement) {
+                    const role = input.value;
+                    //@ts-ignore
+                    if (roleImages[role]) {
+                      currentAgent.iconUrl = roleImages[role]
                     }
+                  }
                   }}
                   class="mt-2 block w-full rounded-md border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-indigo-600 sm:text-sm sm:leading-6"
-                >
+                />
+                <datalist id="roleSuggestions">
                   {#each roles as role (role)}
-                    <option {role} selected={role === currentAgent.role}>{role}</option>
+                  <option value={role}>{role}</option>
                   {/each}
-                </select>
+                </datalist>
               </div>
             </div>
 
@@ -350,11 +379,17 @@
                     type="text"
                     name="longitude"
                     id="longitude"
+                    list="iconSuggestions"
                     autocomplete="longitude"
                     placeholder="https://www.example.com/logo.png"
                     bind:value={currentAgent.imageUrl}
                     class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
                   />
+                  <datalist id="iconSuggestions">
+                    {#each images as image (image)}
+                    <option value={image}>{image}</option>
+                    {/each}
+                  </datalist>
                 </div>
                 <!-- <div
                   class="mt-2 flex justify-center rounded-lg border border-dashed border-gray-900/25 px-6 py-10"
@@ -394,6 +429,33 @@
                 </div> -->
               </div>
             </div>
+
+            <div class="mt-4 text-left">
+              <div class="col-span-full">
+                <label
+                  for="image"
+                  class="block text-sm font-medium leading-6 text-gray-900"
+                  >Map icon url</label
+                >
+                <div class="mt-2">
+                  <input
+                    type="text"
+                    name="icon"
+                    id="icon"
+                    list="iconSuggestions"
+                    autocomplete="icon"
+                    placeholder="https://www.example.com/logo.png"
+                    bind:value={currentAgent.iconUrl}
+                    class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+                  />
+                </div>
+                <datalist id="iconSuggestions">
+                  {#each images as image (image)}
+                  <option value={image}>{image}</option>
+                  {/each}
+                </datalist>
+              </div>
+            </div>
           </div>
         </div>
 
diff --git a/ui/src/routes/plans/=helper.ts b/ui/src/routes/plans/=helper.ts
index 77512ba..73e578b 100644
--- a/ui/src/routes/plans/=helper.ts
+++ b/ui/src/routes/plans/=helper.ts
@@ -1,12 +1,14 @@
 import { Decimal } from 'decimal.js'
 
 export function matchingOffer(commitment: any, offers: any[]) {
+  console.log("looking for matching offer", commitment)
   return offers.find(offer => {
     return offer?.publishes?.find(
       intent => {
         const offerName = intent.publishes?.resourceConformsTo?.name
         const correctProvider = commitment.providerId ? (intent.publishes?.provider?.id == commitment.providerId) : true
-        return offerName == commitment.resourceConformsTo.name && correctProvider
+        const correctProviderRole = commitment.providerRole ? (intent.publishes?.provider?.classifiedAs[2] == commitment.providerRole) : true
+        return offerName == commitment.resourceConformsTo.name && correctProvider && correctProviderRole
       }
     )
   })
@@ -20,7 +22,38 @@ export function makeAgreement(
 ): undefined | any {
   console.log("reciprocal_clause", recipe)
   const reciprocal_clause = recipe?.recipeReciprocalClauses?.[0]
-  if (reciprocal_clause) {
+  const matching_offer = matchingOffer(commitment, offers)
+
+  if (matching_offer) {
+    console.log("matching offer", matching_offer)
+    const reciprocal_intent = matching_offer.publishes.find(
+      (intent: any) => intent.reciprocal
+    )
+    const primary_intent = matching_offer.publishes.find(
+      (intent: any) => !intent.reciprocal
+    )
+    const unit_size = primary_intent.publishes.resourceQuantity.hasNumericalValue
+    const fits_into_request: number = Math.ceil(commitment.resourceQuantity.hasNumericalValue / unit_size)
+    return {
+      name: recipe?.name,
+      note: recipe?.note,
+      commitment: {
+        action: reciprocal_intent.publishes.action,
+        provider: primary_intent.publishes.provider,
+        stage: reciprocal_intent.publishes.stage,
+        resourceConformsTo: reciprocal_intent.publishes.resourceConformsTo,
+        resourceQuantity: {
+          ...reciprocal_intent.publishes.resourceQuantity,
+          hasNumericalValue: fits_into_request * reciprocal_intent.publishes.resourceQuantity.hasNumericalValue
+        }
+      }
+    }
+  } else if (reciprocal_clause) {
+    const primary_clause = recipe?.recipeClauses?.find(
+      (clause: any) => !clause.reciprocal
+    )
+    const unit_size = primary_clause.resourceQuantity.hasNumericalValue
+    const fits_into_request: number = Math.ceil(commitment.resourceQuantity.hasNumericalValue / unit_size)
     return {
       name: recipe?.name,
       note: recipe?.note,
@@ -31,57 +64,57 @@ export function makeAgreement(
         resourceConformsTo: reciprocal_clause.resourceConformsTo,
         resourceQuantity: {
           ...reciprocal_clause.resourceQuantity,
-          hasNumericalValue: reciprocal_clause.resourceQuantity.hasNumericalValue * commitment.resourceQuantity?.hasNumericalValue
+          hasNumericalValue: fits_into_request * reciprocal_clause.resourceQuantity.hasNumericalValue
         }
       }
     }
   }
-  // if (!reciprocal_clause) return
-  // let numerical_value = reciprocal_clause.resourceQuantity.hasNumericalValue
-  // let hasUnit = reciprocal_clause.resourceQuantity.hasUnit
-  let numerical_value;
-  let hasUnit;
-  let reciprocal_intent;
-  let primary_intent;
-  // TODO get data to test the matching offer logic
-  const matching_offer = matchingOffer(commitment, offers)
-  console.log("matching offer 0", matching_offer)
-  if (matching_offer) {
-    reciprocal_intent = matching_offer.publishes.find(
-      intent => intent.reciprocal
-    )
-    primary_intent = matching_offer.publishes.find(
-      intent => !intent.reciprocal
-    )
-    console.log("TEMP", reciprocal_intent)
-    numerical_value = reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue / primary_intent.publishes?.resourceQuantity.hasNumericalValue
-    hasUnit = primary_intent.publishes?.resourceQuantity.hasUnit
-  } else {
-    return
-  }
+  // // if (!reciprocal_clause) return
+  // // let numerical_value = reciprocal_clause.resourceQuantity.hasNumericalValue
+  // // let hasUnit = reciprocal_clause.resourceQuantity.hasUnit
+  // let numerical_value;
+  // let hasUnit;
+  // let reciprocal_intent;
+  // let primary_intent;
+  // // TODO get data to test the matching offer logic
+  // // const matching_offer = matchingOffer(commitment, offers)
+  // console.log("matching offer 0", matching_offer)
+  // if (matching_offer) {
+  //   reciprocal_intent = matching_offer.publishes.find(
+  //     intent => intent.reciprocal
+  //   )
+  //   primary_intent = matching_offer.publishes.find(
+  //     intent => !intent.reciprocal
+  //   )
+  //   console.log("TEMP", reciprocal_intent)
+  //   numerical_value = reciprocal_intent.publishes?.resourceQuantity.hasNumericalValue / primary_intent.publishes?.resourceQuantity.hasNumericalValue
+  //   hasUnit = primary_intent.publishes?.resourceQuantity.hasUnit
+  // } else {
+  //   return
+  // }
 
-  if (!numerical_value || !hasUnit) return
+  // if (!numerical_value || !hasUnit) return
 
-  return {
-    name: recipe?.name,
-    note: recipe?.note,
-    primaryIntent: primary_intent,
-    commitment: {
-      action: {
-        label: reciprocal_intent?.publishes?.action?.label
-      },
-      provider: reciprocal_intent?.publishes?.receiverId,
-      // stage: reciprocal_clause?.stage,
-      resourceConformsTo: reciprocal_intent?.publishes?.resourceConformsTo,
-      resourceQuantity: {
-        hasNumericalValue: new Decimal(numerical_value)
-          .mul(commitment.resourceQuantity.hasNumericalValue)
-          .toDecimalPlaces(0, Decimal.ROUND_UP)
-          .toString(),
-        hasUnit: hasUnit
-      }
-    }
-  }
+  // return {
+  //   name: recipe?.name,
+  //   note: recipe?.note,
+  //   primaryIntent: primary_intent,
+  //   commitment: {
+  //     action: {
+  //       label: reciprocal_intent?.publishes?.action?.label
+  //     },
+  //     provider: reciprocal_intent?.publishes?.receiverId,
+  //     // stage: reciprocal_clause?.stage,
+  //     resourceConformsTo: reciprocal_intent?.publishes?.resourceConformsTo,
+  //     resourceQuantity: {
+  //       hasNumericalValue: new Decimal(numerical_value)
+  //         .mul(commitment.resourceQuantity.hasNumericalValue)
+  //         .toDecimalPlaces(0, Decimal.ROUND_UP)
+  //         .toString(),
+  //       hasUnit: hasUnit
+  //     }
+  //   }
+  // }
 }
 
 export function findExchange(
@@ -107,8 +140,10 @@ export function findExchange(
 }
 
 export function assignProviderReceiver(commitment, agents) {
-  const receivers = agents.filter(it => it.role == commitment?.receiver_role)
-  const providers = agents.filter(it => it.role == commitment?.provider_role)
+  console.log("assignProviderReceiver", commitment, agents)
+  const receivers = agents.filter(it => it.classifiedAs[2] == commitment?.receiverRole)
+  const providers = agents.filter(it => it.classifiedAs[2] == commitment?.providerRole)
+  console.log("assignProviderReceiver 2", receivers, providers)
   return Object.assign(
     {},
     commitment,
@@ -141,36 +176,44 @@ export function createAgreements(process: Process, recipeExchanges, offers, agen
     committedOutputs: process.committedOutputs.map(output => {
       const output_exchange = findExchange(output, process.basedOn.name, recipeExchanges)
       console.log("output_exchange", output_exchange, "process", process.basedOn)
-      if (output_exchange) {
+      // if (output_exchange) {
         console.log("maybe making agreement 1", output_exchange)
         const output_agreement = makeAgreement(output, output_exchange, offers, agents)
         console.log('output_agreement', output_agreement)
+        if (output_agreement?.commitment?.provider && !output.provider) {
+          output.provider = output_agreement.commitment.provider
+        }
         if (output_agreement) {
           console.log("actually making agreement 1", output, output_agreement)
           return {
             ...output,
+            // provider: output_agreement.commitment.provider,
             agreement: output_agreement
           }
         }
-      }
+      // }
       return output
     }),
     committedInputs: process.committedInputs.map(input => {
       // if there is no input, we don't need to make an agreement
       const input_exchange = findExchange(input, process.basedOn.name, recipeExchanges)
       // console.log("input_exchange", input_exchange, "process", process.basedOn)
-      if (input_exchange) {
+      // if (input_exchange) {
         // console.log("maybe making agreement 2", input_exchange)
         const input_agreement = makeAgreement(input, input_exchange, offers, agents)
+        console.log('input_agreement', input_agreement)
+        if (input_agreement?.commitment?.provider && !input.provider) {
+          input.provider = input_agreement.commitment.provider
+        }
         if (input_agreement) {
           // console.log("actually making agreement 2", input, input_agreement)
           return {
             ...input,
-            provider: input_agreement.commitment.provider,
+            // provider: input_agreement.commitment.provider,
             agreement: input_agreement
           }
         }
-      }
+      // }
       return input
     })
   }
diff --git a/ui/src/routes/plans/update/[plan_id]/+page.svelte b/ui/src/routes/plans/update/[plan_id]/+page.svelte
index 0849ebb..8d5fe9f 100644
--- a/ui/src/routes/plans/update/[plan_id]/+page.svelte
+++ b/ui/src/routes/plans/update/[plan_id]/+page.svelte
@@ -19,6 +19,7 @@
   import { getPlan } from '../../../../crud/fetch'
   import { fullPlans, removeProcessCommitmentFromPlan, addProcessCommitmentToPlan, addNonProcessCommitmentToPlan, removeNonProcessCommitmentFromPlan, allRecipes } from '../../../../crud/store'
   import { cloneDeep } from "lodash";
+  import SvgIcon from '$lib/SvgIcon.svelte'
 
   const delay = ms => new Promise(res => setTimeout(res, ms));
   let commitmentModalProcess: number | undefined;
@@ -1163,46 +1164,46 @@ bind:open={economicEventModalOpen}
       
       {#each processes as { committedInputs, committedOutputs }, processIndex}
 
-      <!-- <div class="bg-gray-400 border border-gray-400 p-2"> -->
-      <div class="border-gray-400 p-2" style="background-color: #BFBFBF;">
-        <!-- Sub-columns -->
-        <div class="grid grid-cols-2 gap-2">
-          <div>
-            <div class="flex justify-center items-center w-full mb-2">
-              <div class="flex space-x-2">
-                <button
-                  title="Add a new commitment to this process"
-                  class="flex justify-center items-center"
-                  on:click={() => {
-                  commitmentModalProcess = processIndex
-                  commitmentModalColumn = columnIndex
-                  commitmentModalSide = "committedInputs"
-                  commitmentModalOpen = true
-                  selectedCommitmentId = undefined
-                  }}
-                >
-                  <PlusCircle />
-                </button>
-
-                {#if processIndex == 0}
+        <!-- <div class="bg-gray-400 border border-gray-400 p-2"> -->
+        <div class="border-gray-400 p-2" style="background-color: #BFBFBF;">
+          <!-- Sub-columns -->
+          <div class="grid grid-cols-2 gap-2">
+            <div>
+              <div class="flex justify-center items-center w-full mb-2">
+                <div class="flex space-x-2">
                   <button
-                    title="Auto-fill the output commitments based on the input commitments"
+                    title="Add a new commitment to this process"
                     class="flex justify-center items-center"
                     on:click={() => {
-                    forwardSuggestions = {
-                      side: "committedOutputs",
-                      columnIndex: columnIndex,
-                      current: allColumns[columnIndex].map(it => it.committedOutputs),
-                      new: calculateInputToOutput(columnIndex)
-                    }
-                    planForwardModalOpen = true
+                    commitmentModalProcess = processIndex
+                    commitmentModalColumn = columnIndex
+                    commitmentModalSide = "committedInputs"
+                    commitmentModalOpen = true
+                    selectedCommitmentId = undefined
                     }}
                   >
-                    {"↳"}
-                  </button>                  
-                {/if}
+                    <PlusCircle />
+                  </button>
+
+                  {#if processIndex == 0}
+                    <button
+                      title="Auto-fill the output commitments based on the input commitments"
+                      class="flex justify-center items-center"
+                      on:click={() => {
+                      forwardSuggestions = {
+                        side: "committedOutputs",
+                        columnIndex: columnIndex,
+                        current: allColumns[columnIndex].map(it => it.committedOutputs),
+                        new: calculateInputToOutput(columnIndex)
+                      }
+                      planForwardModalOpen = true
+                      }}
+                    >
+                      <SvgIcon icon=faForward size=12/>
+                    </button>                  
+                  {/if}
+                </div>
               </div>
-            </div>
 
                 {#each committedInputs as { resourceConformsTo, providerId, resourceQuantity, action, receiverId, id, revisionId, agreement, fulfilledBy, finished, clauseOf, meta }}
                   {@const color = finished ? "#c4fbc4" : (((fulfilledBy && fulfilledBy.length > 0) || yellow.includes(id)) ? "#fbfbb0" : "white")}
@@ -1476,8 +1477,8 @@ bind:open={economicEventModalOpen}
                 <div class="flex justify-center items-center w-full mb-2">
                   <div class="flex space-x-2">
                     <button
-                      class="flex justify-center items-center w-full mb-2"
-
+                      title="Add a new commitment to this process"
+                      class="flex justify-center items-center"
                       on:click={() => {
                         commitmentModalProcess = processIndex
                         commitmentModalColumn = columnIndex
@@ -1505,7 +1506,7 @@ bind:open={economicEventModalOpen}
                         planForwardModalOpen = true
                         }}
                       >
-                        {"↳"}
+                        <SvgIcon icon=faForward size=12/>
                       </button>
                     {/if}
                   </div>
diff --git a/ui/static/building.svg b/ui/static/building.svg
new file mode 100644
index 0000000..d53bf99
--- /dev/null
+++ b/ui/static/building.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M48 0C21.5 0 0 21.5 0 48L0 464c0 26.5 21.5 48 48 48l96 0 0-80c0-26.5 21.5-48 48-48s48 21.5 48 48l0 80 96 0c26.5 0 48-21.5 48-48l0-416c0-26.5-21.5-48-48-48L48 0zM64 240c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zm112-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM80 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zm80 16c0-8.8 7.2-16 16-16l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32zM272 96l32 0c8.8 0 16 7.2 16 16l0 32c0 8.8-7.2 16-16 16l-32 0c-8.8 0-16-7.2-16-16l0-32c0-8.8 7.2-16 16-16zM448 0c-17.7 0-32 14.3-32 32l0 480 64 0 0-320 144 0c8.8 0 16-7.2 16-16l0-128c0-8.8-7.2-16-16-16L480 32c0-17.7-14.3-32-32-32z"/></svg>
\ No newline at end of file