diff --git a/.hc b/.hc
new file mode 100644
index 0000000..b343bff
--- /dev/null
+++ b/.hc
@@ -0,0 +1,2 @@
+/tmp/nix-shell.ayRWOt/FX-qP-RtAib9erAFX4HMu
+/tmp/nix-shell.ayRWOt/t_hrYaC6K-Zm4ZoViJZOY
diff --git a/package-lock.json b/package-lock.json
index 66700aa..ab3c13a 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -2735,119 +2735,66 @@
       "link": true
     },
     "node_modules/@holochain-open-dev/elements": {
-      "version": "0.4.1",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/elements/-/elements-0.4.1.tgz",
-      "integrity": "sha512-+IccJKM+5FtpJ0O7nYUP1u3V9hZGL44xzKbldHCJejogkePCEas3wGtUfimsduIthN/BQKo7NeFsnN0bFkCIKw==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/@holochain-open-dev/elements/-/elements-0.7.0.tgz",
+      "integrity": "sha512-IW9mRlLywGTrT2v0SreQ/a32b3yqNIxEc+I+87++1BlvFAgohBVvo63/ot2c6/fEWx3Ot6pYn/7CqN5v3nf7lQ==",
       "dependencies": {
         "@holo-host/identicon": "^0.1.0",
-        "@holochain/client": "^0.12.0",
+        "@holochain/client": "^0.16.0",
         "@lit/localize": "^0.11.4",
         "@mdi/js": "^7.1.96",
         "@shoelace-style/shoelace": "^2.3.0",
-        "lit": "^2.6.1"
-      }
-    },
-    "node_modules/@holochain-open-dev/elements/node_modules/@holochain/client": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.12.5.tgz",
-      "integrity": "sha512-9Q1G8sKEGsqnCl067CaRbzwPZZ5zeDCJdvQ8TJpb+psP2kLJBbHZ2qulMXAlNUz7Pg0l4B1Eh/BFJByJHRLlow==",
-      "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.7.2",
-        "@tauri-apps/api": "^1.2.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.3",
-        "lodash-es": "^4.17.21",
-        "tweetnacl": "^1.0.3"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0 || >=18.0.0"
+        "lit": "^2.6.1",
+        "prosemirror-commands": "^1.5.2",
+        "prosemirror-keymap": "^1.2.2",
+        "prosemirror-state": "^1.4.3",
+        "prosemirror-view": "^1.31.3"
       }
     },
     "node_modules/@holochain-open-dev/profiles": {
-      "version": "0.13.1",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/profiles/-/profiles-0.13.1.tgz",
-      "integrity": "sha512-uevHX44mCZyRdiwk+/OIPo1z6knWHeLD83yIwJnMx6TfS7EtS76EhZRnz11Mbdy0d5jxf6T9/hfps5HhW5dqYA==",
-      "dependencies": {
-        "@holochain-open-dev/elements": "^0.4.0",
-        "@holochain-open-dev/stores": "^0.4.2",
-        "@holochain-open-dev/utils": "^0.13.3",
-        "@holochain/client": "^0.12.0",
+      "version": "0.16.1",
+      "resolved": "https://registry.npmjs.org/@holochain-open-dev/profiles/-/profiles-0.16.1.tgz",
+      "integrity": "sha512-tLGxH7dLOiwlw+ViIHJ2cls08/TbnbIgPyd8WjOQCAvY0a/bZSMe7aykZsj75OQDFziANpPLNgsUdLnmPFadfg==",
+      "dependencies": {
+        "@holochain-open-dev/elements": "^0.7.0",
+        "@holochain-open-dev/stores": "^0.6.0",
+        "@holochain-open-dev/utils": "^0.15.0",
+        "@holochain/client": "^0.16.0",
         "@lit-labs/context": "^0.2.0",
         "@lit/localize": "^0.11.2",
         "@mdi/js": "^7.1.96",
         "@shoelace-style/shoelace": "^2.3.0"
       }
     },
-    "node_modules/@holochain-open-dev/profiles/node_modules/@holochain/client": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.12.5.tgz",
-      "integrity": "sha512-9Q1G8sKEGsqnCl067CaRbzwPZZ5zeDCJdvQ8TJpb+psP2kLJBbHZ2qulMXAlNUz7Pg0l4B1Eh/BFJByJHRLlow==",
+    "node_modules/@holochain-open-dev/profiles/node_modules/@holochain-open-dev/stores": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/@holochain-open-dev/stores/-/stores-0.6.0.tgz",
+      "integrity": "sha512-/j+VAym4/vjQA2ezbnQnvfkHRAVDU9CaLt4JalDskIKBlapEQaUmlPLCo2iyzrZ0pfQLQpuwOXVlVtOMN7MYcw==",
       "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.7.2",
-        "@tauri-apps/api": "^1.2.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.3",
-        "lodash-es": "^4.17.21",
-        "tweetnacl": "^1.0.3"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0 || >=18.0.0"
+        "@holochain-open-dev/utils": "^0.15.0",
+        "@holochain/client": "^0.16.0",
+        "lit-svelte-stores": "^0.2.1",
+        "svelte": "^3.53.1"
       }
     },
     "node_modules/@holochain-open-dev/stores": {
-      "version": "0.4.8",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/stores/-/stores-0.4.8.tgz",
-      "integrity": "sha512-nhpAPkjVQXltdp34W2nbi+9OVmNZ15fy4RJLvih/M7XShMKMsT/eBTOCCWj/LGIonawcM0FKNd2paHHgH9uBSg==",
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/@holochain-open-dev/stores/-/stores-0.7.3.tgz",
+      "integrity": "sha512-+O5knB/hD+ojAd3NYVeeXHHNXa7NvOT1Mit07J7jj6czhODPhF0Sv5PGihsu0p+a+n9d+yUSwfOGlVHajrHf4Q==",
       "dependencies": {
-        "@holochain-open-dev/utils": "^0.11.0",
-        "@holochain/client": "^0.12.0",
-        "lit": "^2.1.3",
+        "@holochain-open-dev/utils": "^0.15.0",
+        "@holochain/client": "^0.16.0",
+        "console-log-tree": "^1.2.1",
         "lit-svelte-stores": "^0.2.1",
         "svelte": "^3.53.1"
       }
     },
-    "node_modules/@holochain-open-dev/stores/node_modules/@holochain-open-dev/utils": {
-      "version": "0.11.6",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/utils/-/utils-0.11.6.tgz",
-      "integrity": "sha512-YJ5s2JhXHlnkl6Nk4ucxrhqIBDakO32uEn7ZgLiWx6zPz+rAWImOYuNe9f/MKo7DvWe7XkJMkOy6fQpGkCTQHg==",
-      "dependencies": {
-        "@holochain/client": "^0.12.0",
-        "@msgpack/msgpack": "^2.7.2",
-        "blakejs": "^1.2.1",
-        "emittery": "^1.0.1",
-        "lit": "^2.1.3",
-        "lodash-es": "^4.17.21",
-        "sort-keys": "^5.0.0"
-      }
-    },
-    "node_modules/@holochain-open-dev/stores/node_modules/@holochain/client": {
-      "version": "0.12.5",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.12.5.tgz",
-      "integrity": "sha512-9Q1G8sKEGsqnCl067CaRbzwPZZ5zeDCJdvQ8TJpb+psP2kLJBbHZ2qulMXAlNUz7Pg0l4B1Eh/BFJByJHRLlow==",
-      "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.7.2",
-        "@tauri-apps/api": "^1.2.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.3",
-        "lodash-es": "^4.17.21",
-        "tweetnacl": "^1.0.3"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0 || >=18.0.0"
-      }
-    },
     "node_modules/@holochain-open-dev/utils": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/utils/-/utils-0.13.7.tgz",
-      "integrity": "sha512-y3sW03Q/Xh3QRpNZ2ukLnGnMgiCxbgwkmrL4O+UrjEEWHTV4pNWoE7AkbP4+ELqgSSAERcZ32DV0SWVOnLxslw==",
+      "version": "0.15.2",
+      "resolved": "https://registry.npmjs.org/@holochain-open-dev/utils/-/utils-0.15.2.tgz",
+      "integrity": "sha512-QW5l0R6tPQFxM4Jj+tJg5mbjJH+ejLbaCgAan3jLXGqEclwlDQAM2Qzq+yAmvju/F4ELduybjrZUqsV+jhouag==",
       "dependencies": {
-        "@holochain/client": "^0.13.0",
+        "@holochain/client": "^0.16.2",
         "@msgpack/msgpack": "^2.7.2",
         "blakejs": "^1.2.1",
         "emittery": "^1.0.1",
@@ -2855,24 +2802,6 @@
         "sort-keys": "^5.0.0"
       }
     },
-    "node_modules/@holochain-open-dev/utils/node_modules/@holochain/client": {
-      "version": "0.13.0",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.13.0.tgz",
-      "integrity": "sha512-GKji8Xu6D5eurkx9OubpYcX149lXMSalt72y4vmve+rNEq8b2tGZK0BKlG3b4jt/sv5H3u9BtOtpNrlGExS/QQ==",
-      "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.7.2",
-        "@tauri-apps/api": "^1.2.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.3",
-        "lodash-es": "^4.17.21",
-        "tweetnacl": "^1.0.3"
-      },
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0 || >=18.0.0"
-      }
-    },
     "node_modules/@holochain-playground/cli": {
       "version": "0.1.1",
       "resolved": "https://registry.npmjs.org/@holochain-playground/cli/-/cli-0.1.1.tgz",
@@ -2883,19 +2812,19 @@
       }
     },
     "node_modules/@holochain/client": {
-      "version": "0.15.1",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.15.1.tgz",
-      "integrity": "sha512-HRSs78usaj0lZFtDBPWGy3uPahawQ4dUoecVkADMcJ6YrrxzgWaJWsUnigZmGX9erzgl6RdcA5Qa57q1bYIFog==",
+      "version": "0.16.2",
+      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.16.2.tgz",
+      "integrity": "sha512-1Msw6tSdCDI3f2UIdSAYtiAqxxdHt6ufmQSw+GEbvDaIjVXPQWi39IQe5Zzep4VPJoproyurrBRNG1l+/3YrjA==",
       "dependencies": {
         "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.7.2",
-        "@noble/ed25519": "^2.0.0",
-        "@tauri-apps/api": "^1.2.0",
+        "@msgpack/msgpack": "^2.8.0",
+        "@tauri-apps/api": "^1.4.0",
         "emittery": "^1.0.1",
         "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.3",
+        "js-base64": "^3.7.5",
+        "libsodium-wrappers": "^0.7.13",
         "lodash-es": "^4.17.21",
-        "ws": "^8.13.0"
+        "ws": "^8.14.2"
       },
       "engines": {
         "node": ">=16.0.0 || >=18.0.0"
@@ -2922,25 +2851,6 @@
         "node": ">=16.0.0 || >=18.0.0"
       }
     },
-    "node_modules/@holochain/tryorama/node_modules/@holochain/client": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.16.2.tgz",
-      "integrity": "sha512-1Msw6tSdCDI3f2UIdSAYtiAqxxdHt6ufmQSw+GEbvDaIjVXPQWi39IQe5Zzep4VPJoproyurrBRNG1l+/3YrjA==",
-      "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.8.0",
-        "@tauri-apps/api": "^1.4.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.5",
-        "libsodium-wrappers": "^0.7.13",
-        "lodash-es": "^4.17.21",
-        "ws": "^8.14.2"
-      },
-      "engines": {
-        "node": ">=16.0.0 || >=18.0.0"
-      }
-    },
     "node_modules/@holochain/tryorama/node_modules/get-port": {
       "version": "6.1.2",
       "resolved": "https://registry.npmjs.org/get-port/-/get-port-6.1.2.tgz",
@@ -3375,17 +3285,6 @@
         "eslint-scope": "5.1.1"
       }
     },
-    "node_modules/@noble/ed25519": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/@noble/ed25519/-/ed25519-2.0.0.tgz",
-      "integrity": "sha512-/extjhkwFupyopDrt80OMWKdLgP429qLZj+z6sYJz90rF2Iz0gjZh2ArMKPImUl13Kx+0EXI2hN9T/KJV0/Zng==",
-      "funding": [
-        {
-          "type": "individual",
-          "url": "https://paulmillr.com/funding/"
-        }
-      ]
-    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -13442,6 +13341,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/orderedmap": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/orderedmap/-/orderedmap-2.1.1.tgz",
+      "integrity": "sha512-TvAWxi0nDe1j/rtMcWcIj94+Ffe6n7zhow33h40SKxmsmozs6dz/e+EajymfoFcHd7sxNn8yHM8839uixMOV6g=="
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -14024,6 +13928,61 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/prosemirror-commands": {
+      "version": "1.5.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-commands/-/prosemirror-commands-1.5.2.tgz",
+      "integrity": "sha512-hgLcPaakxH8tu6YvVAaILV2tXYsW3rAdDR8WNkeKGcgeMVQg3/TMhPdVoh7iAmfgVjZGtcOSjKiQaoeKjzd2mQ==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-keymap": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/prosemirror-keymap/-/prosemirror-keymap-1.2.2.tgz",
+      "integrity": "sha512-EAlXoksqC6Vbocqc0GtzCruZEzYgrn+iiGnNjsJsH4mrnIGex4qbLdWWNza3AW5W36ZRrlBID0eM6bdKH4OStQ==",
+      "dependencies": {
+        "prosemirror-state": "^1.0.0",
+        "w3c-keyname": "^2.2.0"
+      }
+    },
+    "node_modules/prosemirror-model": {
+      "version": "1.19.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-model/-/prosemirror-model-1.19.3.tgz",
+      "integrity": "sha512-tgSnwN7BS7/UM0sSARcW+IQryx2vODKX4MI7xpqY2X+iaepJdKBPc7I4aACIsDV/LTaTjt12Z56MhDr9LsyuZQ==",
+      "dependencies": {
+        "orderedmap": "^2.0.0"
+      }
+    },
+    "node_modules/prosemirror-state": {
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/prosemirror-state/-/prosemirror-state-1.4.3.tgz",
+      "integrity": "sha512-goFKORVbvPuAQaXhpbemJFRKJ2aixr+AZMGiquiqKxaucC6hlpHNZHWgz5R7dS4roHiwq9vDctE//CZ++o0W1Q==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0",
+        "prosemirror-transform": "^1.0.0",
+        "prosemirror-view": "^1.27.0"
+      }
+    },
+    "node_modules/prosemirror-transform": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/prosemirror-transform/-/prosemirror-transform-1.8.0.tgz",
+      "integrity": "sha512-BaSBsIMv52F1BVVMvOmp1yzD3u65uC3HTzCBQV1WDPqJRQ2LuHKcyfn0jwqodo8sR9vVzMzZyI+Dal5W9E6a9A==",
+      "dependencies": {
+        "prosemirror-model": "^1.0.0"
+      }
+    },
+    "node_modules/prosemirror-view": {
+      "version": "1.32.1",
+      "resolved": "https://registry.npmjs.org/prosemirror-view/-/prosemirror-view-1.32.1.tgz",
+      "integrity": "sha512-9SnB4HBgRczzTyIMZLPE1iszegL04hNfUyS8uPtP1RPxNM2NTCiIs8KwNsJU4nbZO9rxJTwVTv7Jm3zU4CR78A==",
+      "dependencies": {
+        "prosemirror-model": "^1.16.0",
+        "prosemirror-state": "^1.0.0",
+        "prosemirror-transform": "^1.1.0"
+      }
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.7",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@@ -16302,11 +16261,6 @@
       "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==",
       "dev": true
     },
-    "node_modules/tweetnacl": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/tweetnacl/-/tweetnacl-1.0.3.tgz",
-      "integrity": "sha512-6rt+RN7aOi1nGMyC4Xa5DdYiukl2UWCbcJft7YhxReBGQD7OAM8Pbxw6YMo4r2diNEA8FEmu32YOn9rhaiE5yw=="
-    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
@@ -17157,6 +17111,11 @@
       "integrity": "sha512-AyFQ0EVmsOZOlAnxoFOGOq1SQDWAB7C6aqMGS23svWAllfOaxbuFvcT8D1i8z3Gyn8fraVeZNNmN6e9bxxXkKw==",
       "dev": true
     },
+    "node_modules/w3c-keyname": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
+      "integrity": "sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ=="
+    },
     "node_modules/walker": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/walker/-/walker-1.0.8.tgz",
@@ -17714,50 +17673,6 @@
         "vitest": "^0.28.4"
       }
     },
-    "tests/node_modules/@holochain-open-dev/stores": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/stores/-/stores-0.7.3.tgz",
-      "integrity": "sha512-+O5knB/hD+ojAd3NYVeeXHHNXa7NvOT1Mit07J7jj6czhODPhF0Sv5PGihsu0p+a+n9d+yUSwfOGlVHajrHf4Q==",
-      "dependencies": {
-        "@holochain-open-dev/utils": "^0.15.0",
-        "@holochain/client": "^0.16.0",
-        "console-log-tree": "^1.2.1",
-        "lit-svelte-stores": "^0.2.1",
-        "svelte": "^3.53.1"
-      }
-    },
-    "tests/node_modules/@holochain-open-dev/utils": {
-      "version": "0.15.2",
-      "resolved": "https://registry.npmjs.org/@holochain-open-dev/utils/-/utils-0.15.2.tgz",
-      "integrity": "sha512-QW5l0R6tPQFxM4Jj+tJg5mbjJH+ejLbaCgAan3jLXGqEclwlDQAM2Qzq+yAmvju/F4ELduybjrZUqsV+jhouag==",
-      "dependencies": {
-        "@holochain/client": "^0.16.2",
-        "@msgpack/msgpack": "^2.7.2",
-        "blakejs": "^1.2.1",
-        "emittery": "^1.0.1",
-        "lodash-es": "^4.17.21",
-        "sort-keys": "^5.0.0"
-      }
-    },
-    "tests/node_modules/@holochain/client": {
-      "version": "0.16.2",
-      "resolved": "https://registry.npmjs.org/@holochain/client/-/client-0.16.2.tgz",
-      "integrity": "sha512-1Msw6tSdCDI3f2UIdSAYtiAqxxdHt6ufmQSw+GEbvDaIjVXPQWi39IQe5Zzep4VPJoproyurrBRNG1l+/3YrjA==",
-      "dependencies": {
-        "@holochain/serialization": "^0.1.0-beta-rc.3",
-        "@msgpack/msgpack": "^2.8.0",
-        "@tauri-apps/api": "^1.4.0",
-        "emittery": "^1.0.1",
-        "isomorphic-ws": "^5.0.0",
-        "js-base64": "^3.7.5",
-        "libsodium-wrappers": "^0.7.13",
-        "lodash-es": "^4.17.21",
-        "ws": "^8.14.2"
-      },
-      "engines": {
-        "node": ">=16.0.0 || >=18.0.0"
-      }
-    },
     "tests/node_modules/typescript": {
       "version": "4.9.5",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
@@ -17774,11 +17689,11 @@
       "name": "@holochain-open-dev/cancellations",
       "version": "0.1.0",
       "dependencies": {
-        "@holochain-open-dev/elements": "^0.4.0",
-        "@holochain-open-dev/profiles": "=0.13.1",
-        "@holochain-open-dev/stores": "^0.4.2",
-        "@holochain-open-dev/utils": "^0.13.0",
-        "@holochain/client": "^0.15.0",
+        "@holochain-open-dev/elements": "^0.7.0",
+        "@holochain-open-dev/profiles": "^0.16.1",
+        "@holochain-open-dev/stores": "^0.7.2",
+        "@holochain-open-dev/utils": "^0.15.0",
+        "@holochain/client": "^0.16.0",
         "@lit-labs/context": "^0.2.0",
         "@lit/localize": "^0.11.4",
         "@mdi/js": "^7.2.0",
diff --git a/tests/src/cancellation.test.ts b/tests/src/cancellation.test.ts
index d63ab19..8ce70d5 100644
--- a/tests/src/cancellation.test.ts
+++ b/tests/src/cancellation.test.ts
@@ -1,9 +1,9 @@
 import { assert, test } from 'vitest';
 
 import { runScenario, dhtSync } from '@holochain/tryorama';
-import { ActionHash, Record } from '@holochain/client';
+import { ActionHash, Record, fakeActionHash } from '@holochain/client';
 import { decode } from '@msgpack/msgpack';
-import { EntryRecord, fakeActionHash } from '@holochain-open-dev/utils';
+import { EntryRecord } from '@holochain-open-dev/utils';
 import { cleanNodeDecoding } from '@holochain-open-dev/utils/dist/clean-node-decoding.js';
 import { toPromise } from '@holochain-open-dev/stores';
 
@@ -18,7 +18,7 @@ test('create Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -34,7 +34,7 @@ test('create and read Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -57,7 +57,7 @@ test('create and update Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
@@ -106,7 +106,7 @@ test('create and delete Cancellation', async () => {
     // Alice creates a Cancellation
     const cancellation: EntryRecord<Cancellation> =
       await alice.store.client.createCancellation(
-        fakeActionHash(),
+        await fakeActionHash(),
         'Lorem ipsum 2'
       );
     assert.ok(cancellation);
diff --git a/ui/demo/index.html b/ui/demo/index.html
index 8a05cc1..dbfb640 100644
--- a/ui/demo/index.html
+++ b/ui/demo/index.html
@@ -69,33 +69,56 @@
         }
 
         async initStores(appAgentClient) {
-          const profilesStore = new ProfilesStore(
+          this.profilesStore = new ProfilesStore(
             new ProfilesClient(appAgentClient, 'cancellations_test')
           );
-          new ContextProvider(this, profilesStoreContext, profilesStore);
+          new ContextProvider(this, profilesStoreContext, this.profilesStore);
 
           this._cancellationsStore = new CancellationsStore(
             new CancellationsClient(appAgentClient, 'cancellations_test')
           );
+
+          await this.loadProfileActionHash();
         }
 
         renderContent() {
+          if (!this.profileHash) return html``;
           return html`
             <cancellations-context .store=${this._cancellationsStore}>
               <create-cancellation-dialog
+                label="Cancel profile"
+                warning="You sure sure about this?"
                 .cancelledHash=${this.profileHash}
               ></create-cancellation-dialog>
               <sl-button
                 @click=${() =>
-                  this.querySelector('create-cancellation-dialog').show()}
-              ></sl-button>
+                  this.shadowRoot
+                    .querySelector('create-cancellation-dialog')
+                    .show()}
+                >Cancel</sl-button
+              >
               <cancellations-for
+                label="Event was cancelled"
                 .cancelledHash=${this.profileHash}
               ></cancellations-for>
             </cancellations-context>
           `;
         }
 
+        async loadProfileActionHash() {
+          const agents = await this.profilesStore.client.callZome(
+            'get_agents_with_profile',
+            undefined
+          );
+          const p = await this.profilesStore.client.callZome(
+            'get_agent_profile',
+            agents[0]
+          );
+
+          this.profileHash = p?.signed_action.hashed.hash;
+          this.requestUpdate();
+        }
+
         render() {
           if (this._loading)
             return html`<div
@@ -109,9 +132,7 @@
             <div class="fill row" style="width: 100vw; height: 100%;">
               <profile-prompt
                 style="flex: 1;"
-                @profile-created=${e => {
-                  this.profileHash = e.detail.profileHash;
-                }}
+                @profile-created=${() => this.loadProfileActionHash()}
               >
                 ${this.renderContent()}
               </profile-prompt>
diff --git a/ui/package.json b/ui/package.json
index f493cd5..86f7077 100644
--- a/ui/package.json
+++ b/ui/package.json
@@ -24,11 +24,11 @@
     "./locales/*": "./locales/*"
   },
   "dependencies": {
-    "@holochain/client": "^0.15.0",
-    "@holochain-open-dev/elements": "^0.4.0",
-    "@holochain-open-dev/profiles": "=0.13.1",
-    "@holochain-open-dev/stores": "^0.4.2",
-    "@holochain-open-dev/utils": "^0.13.0",
+    "@holochain/client": "^0.16.0",
+    "@holochain-open-dev/elements": "^0.7.0",
+    "@holochain-open-dev/profiles": "^0.16.1",
+    "@holochain-open-dev/stores": "^0.7.2",
+    "@holochain-open-dev/utils": "^0.15.0",
     "@lit-labs/context": "^0.2.0",
     "@lit/localize": "^0.11.4",
     "@mdi/js": "^7.2.0",
diff --git a/ui/src/cancellations-store.ts b/ui/src/cancellations-store.ts
index 723d0df..4b208c6 100644
--- a/ui/src/cancellations-store.ts
+++ b/ui/src/cancellations-store.ts
@@ -10,6 +10,11 @@ import {
 
 import { CancellationsClient } from './cancellations-client.js';
 
+export function throwIfUndefined<T>(object: T | undefined): T {
+  if (object === undefined || object === null) throw new Error('Not found');
+  return object;
+}
+
 export class CancellationsStore {
   constructor(public client: CancellationsClient) {}
 
@@ -21,9 +26,9 @@ export class CancellationsStore {
   );
 
   cancellations = new LazyHoloHashMap((cancelledHash: ActionHash) =>
-    lazyLoadAndPoll(
-      async () => this.client.getCancellation(cancelledHash),
-      4000
-    )
+    lazyLoadAndPoll(async () => {
+      const c = await this.client.getCancellation(cancelledHash);
+      return throwIfUndefined(c);
+    }, 4000)
   );
 }
diff --git a/ui/src/elements/cancellation-detail.ts b/ui/src/elements/cancellation-detail.ts
index 70795c9..d131992 100644
--- a/ui/src/elements/cancellation-detail.ts
+++ b/ui/src/elements/cancellation-detail.ts
@@ -10,19 +10,31 @@ import { EntryRecord } from '@holochain-open-dev/utils';
 import { ActionHash, EntryHash, Record } from '@holochain/client';
 import { consume } from '@lit-labs/context';
 import { localized, msg } from '@lit/localize';
-import { mdiAlertCircleOutline, mdiDelete, mdiPencil } from '@mdi/js';
+import {
+  mdiAlertCircleOutline,
+  mdiCancel,
+  mdiDelete,
+  mdiDotsVertical,
+  mdiPencil,
+} from '@mdi/js';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/dropdown/dropdown.js';
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+import '@shoelace-style/shoelace/dist/components/relative-time/relative-time.js';
+import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
 import '@shoelace-style/shoelace/dist/components/icon-button/icon-button.js';
 import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
-import { LitElement, html } from 'lit';
+import { LitElement, css, html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
+import '@holochain-open-dev/profiles/dist/elements/agent-avatar.js';
 
 import { CancellationsStore } from '../cancellations-store.js';
 import { cancellationsStoreContext } from '../context.js';
 import { Cancellation } from '../types.js';
-import './edit-cancellation.js';
+import './edit-cancellation-dialog.js';
+import { EditCancellationDialog } from './edit-cancellation-dialog.js';
+import { SlDialog } from '@shoelace-style/shoelace';
 
 /**
  * @element cancellation-detail
@@ -35,6 +47,9 @@ export class CancellationDetail extends LitElement {
   @property(hashProperty('cancellation-hash'))
   cancellationHash!: ActionHash;
 
+  @property()
+  label: string = msg('was cancelled');
+
   /**
    * @internal
    */
@@ -52,9 +67,10 @@ export class CancellationDetail extends LitElement {
    * @internal
    */
   @state()
-  _editing = false;
+  deleting = false;
 
   async deleteCancellation() {
+    this.deleting = true;
     try {
       await this.cancellationsStore.client.undoCancellation(
         this.cancellationHash
@@ -69,73 +85,114 @@ export class CancellationDetail extends LitElement {
           },
         })
       );
+      (this.shadowRoot?.querySelector('#undo-cancellation') as SlDialog).hide();
     } catch (e: any) {
       notifyError(msg('Error deleting the cancellation'));
       console.error(e);
     }
+    this.deleting = false;
   }
 
-  renderDetail(entryRecord: EntryRecord<Cancellation>) {
-    return html`<sl-card>
-      <div slot="header" style="display: flex; flex-direction: row">
-        <span style="font-size: 18px; flex: 1;">${msg('Cancellation')}</span>
-
-        <sl-icon-button
-          style="margin-left: 8px"
-          .src=${wrapPathInSvg(mdiPencil)}
-          @click=${() => {
-            this._editing = true;
-          }}
-        ></sl-icon-button>
-        <sl-icon-button
-          style="margin-left: 8px"
-          .src=${wrapPathInSvg(mdiDelete)}
+  renderDeletingDialog() {
+    return html`
+      <sl-dialog id="undo-cancellation" .label=${msg('Undo Cancellation')}>
+        <span>${msg('Are you sure you want to undo this cancellation?')}</span>
+        <sl-button
+          slot="footer"
+          variant="warning"
+          .loading=${this.deleting}
           @click=${() => this.deleteCancellation()}
-        ></sl-icon-button>
-      </div>
+          >${msg('Undo cancellation')}</sl-button
+        >
+      </sl-dialog>
+    `;
+  }
 
-      <div style="display: flex; flex-direction: column">
-        <div style="display: flex; flex-direction: column; margin-bottom: 16px">
-          <span style="margin-bottom: 8px"
-            ><strong>${msg('Reason')}</strong></span
-          >
-          <span style="white-space: pre-line">${entryRecord.entry.reason}</span>
+  renderDetail(cancellation: EntryRecord<Cancellation>) {
+    return html`
+      ${this.renderDeletingDialog()}
+      <edit-cancellation-dialog
+        .cancellationHash=${this.cancellationHash}
+        .currentRecord=${cancellation}
+        style="display: flex; flex: 1;"
+      ></edit-cancellation-dialog>
+      <div class="warning-card column" style="gap: 8px">
+        <div
+          slot="header"
+          style="display: flex; flex-direction: row; align-items: center; gap: 8px"
+        >
+          <sl-icon
+            .src=${wrapPathInSvg(mdiCancel)}
+            style="font-size: 24px;"
+          ></sl-icon>
+          <span style="font-size: 18px; flex: 1;">${this.label}</span>
+
+          ${cancellation.action.author.toString() ===
+          this.cancellationsStore.client.client.myPubKey.toString()
+            ? html`
+                <sl-dropdown>
+                  <sl-icon-button
+                    .src=${wrapPathInSvg(mdiPencil)}
+                    style="font-size: 18px"
+                    slot="trigger"
+                  ></sl-icon-button>
+                  <sl-menu>
+                    <sl-menu-item
+                      @click=${() => {
+                        (
+                          this.shadowRoot?.querySelector(
+                            'edit-cancellation-dialog'
+                          ) as EditCancellationDialog
+                        ).show();
+                      }}
+                      >${msg('Edit reason')}</sl-menu-item
+                    >
+                    <sl-menu-item
+                      @click=${() => {
+                        (
+                          this.shadowRoot?.querySelector(
+                            '#undo-cancellation'
+                          ) as SlDialog
+                        ).show();
+                      }}
+                      >${msg('Undo cancellation')}</sl-menu-item
+                    >
+                  </sl-menu>
+                </sl-dropdown>
+              `
+            : html``}
+        </div>
+
+        <span style="white-space: pre-line">${cancellation.entry.reason}</span>
+        <div class="row placeholder" style="align-items: center; ">
+          <span style="flex: 1"></span>
+          <span>${msg('By')}&nbsp;</span>
+          <agent-avatar
+            .agentPubKey=${cancellation.action.author}
+          ></agent-avatar
+          >,&nbsp;
+          <sl-relative-time
+            .date=${new Date(cancellation.action.timestamp)}
+          ></sl-relative-time>
         </div>
       </div>
-    </sl-card> `;
+    `;
   }
 
   render() {
     switch (this._cancellation.value.status) {
       case 'pending':
-        return html`<sl-card>
+        return html`
           <div
+            class="warning-card"
             style="display: flex; flex: 1; align-items: center; justify-content: center"
           >
             <sl-spinner style="font-size: 2rem;"></sl-spinner>
           </div>
-        </sl-card>`;
+        `;
       case 'complete':
         const cancellation = this._cancellation.value.value;
 
-        if (!cancellation)
-          return html`<span
-            >${msg("The requested cancellation doesn't exist")}</span
-          >`;
-
-        if (this._editing) {
-          return html`<edit-cancellation
-            .currentRecord=${cancellation}
-            @cancellation-updated=${async () => {
-              this._editing = false;
-            }}
-            @edit-canceled=${() => {
-              this._editing = false;
-            }}
-            style="display: flex; flex: 1;"
-          ></edit-cancellation>`;
-        }
-
         return this.renderDetail(cancellation);
       case 'error':
         return html`<sl-card>
@@ -147,5 +204,16 @@ export class CancellationDetail extends LitElement {
     }
   }
 
-  static styles = [sharedStyles];
+  static styles = [
+    sharedStyles,
+    css`
+      .warning-card {
+        background-color: rgba(255, 0, 0, 0.4);
+        padding: 8px;
+        border-radius: 4px;
+        border-style: dashed;
+        border-color: red;
+      }
+    `,
+  ];
 }
diff --git a/ui/src/elements/cancellations-for.ts b/ui/src/elements/cancellations-for.ts
index ad5f58c..54637a0 100644
--- a/ui/src/elements/cancellations-for.ts
+++ b/ui/src/elements/cancellations-for.ts
@@ -18,12 +18,11 @@ import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 
 import { CancellationsStore } from '../cancellations-store.js';
 import { cancellationsStoreContext } from '../context.js';
-import { Cancellation } from '../types.js';
 
-import './cancellation-summary.js';
+import './cancellation-detail.js';
 
 /**
- * @element cancellations-for-testesst
+ * @element cancellations-for
  */
 @localized()
 @customElement('cancellations-for')
@@ -32,6 +31,14 @@ export class CancellationsFor extends LitElement {
   @property(hashProperty('cancelled-hash'))
   cancelledHash!: ActionHash;
 
+  // Label to put as the cancellation notice
+  @property()
+  label: string = msg('was cancelled');
+
+  // Label to put as the cancellation notice
+  @property({ attribute: 'hide-no-cancellations-notice' })
+  hideNoCancellationsNotice: boolean = false;
+
   /**
    * @internal
    */
@@ -46,24 +53,25 @@ export class CancellationsFor extends LitElement {
   );
 
   renderList(hashes: Array<ActionHash>) {
-    if (hashes.length === 0)
+    if (hashes.length === 0) {
+      if (this.hideNoCancellationsNotice) return html``;
       return html` <div class="column center-content">
         <sl-icon
           style="color: grey; height: 64px; width: 64px; margin-bottom: 16px"
           .src=${wrapPathInSvg(mdiInformationOutline)}
         ></sl-icon>
-        <span class="placeholder"
-          >${msg('No cancellations found for this testesst')}</span
-        >
+        <span class="placeholder">${msg('No cancellations found')}</span>
       </div>`;
+    }
 
     return html`
       <div style="display: flex; flex-direction: column">
         ${hashes.map(
           hash =>
-            html`<cancellation-summary
+            html`<cancellation-detail
+              .label=${this.label}
               .cancellationHash=${hash}
-            ></cancellation-summary>`
+            ></cancellation-detail>`
         )}
       </div>
     `;
@@ -72,15 +80,12 @@ export class CancellationsFor extends LitElement {
   render() {
     switch (this._cancellations.value.status) {
       case 'pending':
-        return html`<div
-          style="display: flex; flex: 1; align-items: center; justify-content: center"
-        >
-          <sl-spinner style="font-size: 2rem;"></sl-spinner>
-        </div>`;
+        return html` <!-- TODO: what to put here? --> `;
       case 'complete':
         return this.renderList(this._cancellations.value.value);
       case 'error':
         return html`<display-error
+          tooltip
           .headline=${msg('Error fetching the cancellations')}
           .error=${this._cancellations.value.error.data.data}
         ></display-error>`;
diff --git a/ui/src/elements/create-cancellation-dialog.ts b/ui/src/elements/create-cancellation-dialog.ts
index d9fdbc3..a4b428e 100644
--- a/ui/src/elements/create-cancellation-dialog.ts
+++ b/ui/src/elements/create-cancellation-dialog.ts
@@ -100,6 +100,7 @@ export class CreateCancellation extends LitElement {
       );
 
       this.form.reset();
+      this.dialog.hide();
     } catch (e: any) {
       console.error(e);
       notifyError(msg('Error creating the cancellation'));
@@ -126,7 +127,7 @@ export class CreateCancellation extends LitElement {
       <sl-button
         slot="footer"
         form="create-form"
-        variant="primary"
+        variant="danger"
         type="submit"
         .loading=${this.committing}
         >${this.label}</sl-button
diff --git a/ui/src/elements/edit-cancellation.ts b/ui/src/elements/edit-cancellation-dialog.ts
similarity index 66%
rename from ui/src/elements/edit-cancellation.ts
rename to ui/src/elements/edit-cancellation-dialog.ts
index 2d3cd50..ac5ffee 100644
--- a/ui/src/elements/edit-cancellation.ts
+++ b/ui/src/elements/edit-cancellation-dialog.ts
@@ -14,24 +14,28 @@ import { mdiAlertCircleOutline, mdiDelete } from '@mdi/js';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
-import '@shoelace-style/shoelace/dist/components/card/card.js';
+import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 import '@shoelace-style/shoelace/dist/components/icon/icon.js';
 import '@shoelace-style/shoelace/dist/components/textarea/textarea.js';
 import { LitElement, html } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import { repeat } from 'lit/directives/repeat.js';
 
 import { CancellationsStore } from '../cancellations-store.js';
 import { cancellationsStoreContext } from '../context.js';
 import { Cancellation } from '../types.js';
+import SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 
 /**
- * @element edit-cancellation
+ * @element edit-cancellation-dialog
  * @fires cancellation-updated: detail will contain { previousCancellationHash, updatedCancellationHash }
  */
 @localized()
-@customElement('edit-cancellation')
-export class EditCancellation extends LitElement {
+@customElement('edit-cancellation-dialog')
+export class EditCancellationDialog extends LitElement {
+  @property()
+  cancellationHash!: ActionHash;
+
   // REQUIRED. The current Cancellation record that should be updated
   @property()
   currentRecord!: EntryRecord<Cancellation>;
@@ -48,6 +52,16 @@ export class EditCancellation extends LitElement {
   @state()
   committing = false;
 
+  /**
+   * @internal
+   */
+  @query('sl-dialog')
+  dialog!: SlDialog;
+
+  show() {
+    this.dialog.show();
+  }
+
   firstUpdated() {
     this.shadowRoot?.querySelector('form')!.reset();
   }
@@ -71,6 +85,7 @@ export class EditCancellation extends LitElement {
           },
         })
       );
+      this.dialog.hide();
     } catch (e: any) {
       console.error(e);
       notifyError(msg('Error updating the cancellation'));
@@ -80,44 +95,29 @@ export class EditCancellation extends LitElement {
   }
 
   render() {
-    return html` <sl-card>
-      <span slot="header">${msg('Edit Cancellation')}</span>
-
+    return html` <sl-dialog .label=${msg('Edit Cancellation Reason')}>
       <form
-        style="display: flex; flex: 1; flex-direction: column;"
+        id="edit-cancellation"
+        class="column"
+        style="flex: 1; gap: 16px;"
         ${onSubmit(fields => this.updateCancellation(fields))}
       >
-        <div style="margin-bottom: 16px">
-          <sl-textarea
-            name="reason"
-            .label=${msg('Reason')}
-            required
-            .defaultValue=${this.currentRecord.entry.reason}
-          ></sl-textarea>
-        </div>
-
-        <div style="display: flex; flex-direction: row">
-          <sl-button
-            @click=${() =>
-              this.dispatchEvent(
-                new CustomEvent('edit-canceled', {
-                  bubbles: true,
-                  composed: true,
-                })
-              )}
-            style="flex: 1;"
-            >${msg('Cancel')}</sl-button
-          >
-          <sl-button
-            type="submit"
-            variant="primary"
-            style="flex: 1;"
-            .loading=${this.committing}
-            >${msg('Save')}</sl-button
-          >
-        </div>
+        <sl-textarea
+          name="reason"
+          .label=${msg('Reason')}
+          required
+          .defaultValue=${this.currentRecord.entry.reason}
+        ></sl-textarea>
       </form>
-    </sl-card>`;
+      <sl-button
+        slot="footer"
+        form="edit-cancellation"
+        type="submit"
+        variant="primary"
+        .loading=${this.committing}
+        >${msg('Save reason')}</sl-button
+      >
+    </sl-dialog>`;
   }
 
   static styles = [sharedStyles];
diff --git a/ui/src/mocks.ts b/ui/src/mocks.ts
index 9c6f42e..1845dc7 100644
--- a/ui/src/mocks.ts
+++ b/ui/src/mocks.ts
@@ -102,11 +102,11 @@ export class CancellationsZomeMock extends ZomeMock implements AppAgentClient {
     return record;
   }
 
-  async get_cancellations_for_testesst(
-    testesstHash: ActionHash
+  async get_cancellations_for(
+    cancelledHash: ActionHash
   ): Promise<Array<Record>> {
     const actionHashes: ActionHash[] =
-      this.cancellationsFor.get(testesstHash) || [];
+      this.cancellationsFor.get(cancelledHash) || [];
 
     return actionHashes
       .map(actionHash => this.cancellation.entryRecord(actionHash)?.record)