lightningrodlabs · ddd-mtl · Dec 17, 2025
diff --git a/example/ui/src/elements/wal-embed-debug.ts b/example/ui/src/elements/wal-embed-debug.ts
@@ -16,7 +16,7 @@ import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 import '@shoelace-style/shoelace/dist/components/tooltip/tooltip.js';
 import { appletOrigin, getAppletInfoAndGroupsProfiles, urlFromAppletHash } from '@theweave/elements';
 import { sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
-import { DnaHash } from '@holochain/client';
+import { DnaHash, encodeHashToBase64 } from '@holochain/client';
 import { mdiOpenInNew } from '@mdi/js';
 import { localized, msg } from '@lit/localize';
 
@@ -109,9 +109,9 @@ export class WalEmbed extends LitElement {
       case 'loading':
         return html` <sl-spinner></sl-spinner> `;
       case 'success':
-        const queryString = `view=applet-view&view-type=asset&hrl=${stringifyHrl(this.wal!.hrl)}${
-          this.wal!.context ? `&context=${encodeContext(this.wal!.context)}` : ''
-        }`;
+        const contextParam = this.wal!.context? `&context=${encodeContext(this.wal!.context)}` : '';
+        const groupHashParam = this.appletInfo && this.appletInfo.groupsHashes.length > 0? `&group-hash=${encodeHashToBase64(this.appletInfo.groupsHashes[0])}` : ''; // TODO: get the correct group hash
+        const queryString = `view=applet-view&view-type=asset&hrl=${stringifyHrl(this.wal!.hrl)}${contextParam}${groupHashParam}`;
         const iframeSrc = this.assetStatus.assetInfo.appletDevPort
           ? `http://localhost:${
               this.assetStatus.assetInfo.appletDevPort

diff --git a/libs/elements/src/elements/wal-embed.ts b/libs/elements/src/elements/wal-embed.ts
@@ -16,7 +16,7 @@ import {
 import '@shoelace-style/shoelace/dist/components/spinner/spinner.js';
 import { iframeOrigin } from '../utils';
 import { sharedStyles, wrapPathInSvg } from '@holochain-open-dev/elements';
-import { DnaHash } from '@holochain/client';
+import {DnaHash, encodeHashToBase64} from '@holochain/client';
 import { mdiArrowCollapse, mdiArrowExpand, mdiClose, mdiOpenInNew } from '@mdi/js';
 import { localized, msg } from '@lit/localize';
 import { getAppletInfoAndGroupsProfiles } from '../utils';
@@ -251,11 +251,14 @@ export class WalEmbed extends LitElement {
       case 'loading':
         return html` <sl-spinner></sl-spinner> `;
       case 'success':
+        if (!this.appletInfo) {
+            throw Error("Missing appletInfo in <wal-embed>");
+        }
+        const groupHash = this.appletInfo.groupsHashes[0]; // TODO get the correct group hash
+        const groupHashParam = `&group-hash=${encodeHashToBase64(groupHash)}`;
         const queryString = `view=applet-view&view-type=asset&hrl=${stringifyHrl(this.wal!.hrl)}${
-          this.wal!.context ? `&context=${encodeContext(this.wal!.context)}` : ''
+          this.wal!.context? `&context=${encodeContext(this.wal!.context)}` : ''
         }`;
-        if (!this.appletInfo) throw Error("Missing appletInfo in <wal-embed>");
-        const groupHash = this.appletInfo.groupsHashes[0];
         const iframeKind: IframeKind = {
           type: 'applet',
           appletHash: this.assetStatus.assetInfo.appletHash,
@@ -266,7 +269,7 @@ export class WalEmbed extends LitElement {
           ? `http://localhost:${
               this.assetStatus.assetInfo.appletDevPort
             }?${queryString}#${fromUint8Array(encode(iframeKind))}`
-          : `${iframeOrigin(iframeKind)}?${queryString}`;
+          : `${iframeOrigin(iframeKind)}?${queryString}${groupHashParam}`;
 
         return html`<iframe
           id="${this.iframeId}"

diff --git a/src/renderer/src/groups/elements/create-custom-group-view.ts b/src/renderer/src/groups/elements/create-custom-group-view.ts
@@ -2,7 +2,7 @@ import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
 import { css, html, LitElement } from 'lit';
 import { customElement, state } from 'lit/decorators.js';
-import { EntryHash } from '@holochain/client';
+import {encodeHashToBase64, EntryHash} from '@holochain/client';
 import { sharedStyles } from '@holochain-open-dev/elements';
 import { BlockType } from '@theweave/api';
 import { BlockProperties } from 'grapesjs';
@@ -43,8 +43,8 @@ export class CreateCustomGroupView extends LitElement {
     blocksByApplet: ReadonlyMap<EntryHash, Record<string, BlockType>>,
     applets: ReadonlyMap<EntryHash, Applet | undefined>,
   ) {
+    const groupHashParam = `&group-hash=${encodeHashToBase64(this.groupStore.groupDnaHash)}`;
     const blocks: Array<BlockProperties> = [];
-
     for (const [appletHash, blockTypes] of Array.from(blocksByApplet.entries())) {
       for (const [blockName, block] of Object.entries(blockTypes)) {
         blocks.push({
@@ -53,7 +53,7 @@ export class CreateCustomGroupView extends LitElement {
           category: applets.get(appletHash)?.custom_name,
           content: `<iframe src="${iframeOrigin({ type: 'applet', appletHash, groupHash: this.groupStore.groupDnaHash, subType: 'block' })}?view=${
             block.view
-          }&view-type=block&block=${blockName}" style="width: 100%"></iframe>`,
+          }&view-type=block&block=${blockName}${groupHashParam}" style="width: 100%"></iframe>`,
         });
       }
     }

diff --git a/src/renderer/src/groups/elements/edit-custom-group-view.ts b/src/renderer/src/groups/elements/edit-custom-group-view.ts
@@ -2,7 +2,7 @@ import { consume } from '@lit/context';
 import { localized, msg } from '@lit/localize';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
-import { ActionHash, EntryHash } from '@holochain/client';
+import {ActionHash, encodeHashToBase64, EntryHash} from '@holochain/client';
 import { hashProperty, sharedStyles } from '@holochain-open-dev/elements';
 import {BlockType} from '@theweave/api';
 import { BlockProperties } from 'grapesjs';
@@ -66,16 +66,19 @@ export class EditCustomGroupView extends LitElement {
     blocksByApplet: ReadonlyMap<EntryHash, Record<string, BlockType>>,
     applets: ReadonlyMap<EntryHash, Applet | undefined>,
   ) {
+    const groupHash = this.groupStore.groupDnaHash;
+    const groupHashParam = `&group-hash=${encodeHashToBase64(groupHash)}`;
     const blocks: Array<BlockProperties> = [];
     for (const [appletHash, blockTypes] of Array.from(blocksByApplet.entries())) {
       for (const [blockName, block] of Object.entries(blockTypes)) {
         blocks.push({
           label: block.label,
           media: block.icon_src,
           category: applets.get(appletHash)?.custom_name,
-          content: `<iframe src="${iframeOrigin({ type: 'applet', appletHash, groupHash: this.groupStore.groupDnaHash, subType: 'block' })}?view=${
+          content: `<iframe style="width: 100%"
+                            src="${iframeOrigin({ type: 'applet', appletHash, groupHash, subType: 'block' })}?view=${
             block.view
-          }&view-type=block&block=${blockName}" style="width: 100%"></iframe>`,
+          }&view-type=block&block=${blockName}${groupHashParam}"></iframe>`,
         });
       }
     }

diff --git a/src/renderer/src/utils.ts b/src/renderer/src/utils.ts
@@ -1049,6 +1049,7 @@ export async function openWalInWindow(wal: WAL, mossStore: MossStore) {
     throw new Error('No groups found for applet.');
   }
   const groupHash = groups[0];
+  const queryString = renderViewToQueryString(renderView) + `&group-hash=${encodeHashToBase64(groupHash)}`;
   if (mossStore.isAppletDev) {
     const appId = appIdFromAppletId(appletId);
     const appletDevPort = await getAppletDevPort(appId);
@@ -1059,13 +1060,11 @@ export async function openWalInWindow(wal: WAL, mossStore: MossStore) {
         groupHash,
         subType: 'asset',
       };
-      const iframeSrc = `http://localhost:${appletDevPort}?${renderViewToQueryString(
-        renderView,
-      )}#${fromUint8Array(encode(iframeKind))}`;
+      const iframeSrc = `http://localhost:${appletDevPort}?${queryString}#${fromUint8Array(encode(iframeKind))}`;
       return window.electronAPI.openWalWindow(iframeSrc, appletId, encodeHashToBase64(groupHash), wal);
     }
   }
-  const iframeSrc = `${iframeOrigin({ type: 'applet', appletHash, groupHash, subType: 'asset' })}?${renderViewToQueryString(renderView)}`;
+  const iframeSrc = `${iframeOrigin({ type: 'applet', appletHash, groupHash, subType: 'asset' })}?${queryString}`;
   return window.electronAPI.openWalWindow(iframeSrc, appletId, encodeHashToBase64(groupHash), wal);
 }