From 3c7c109880a985bc57315340b07d4a383282ac67 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:48:50 +0200
Subject: [PATCH 01/29] docs: Add ADR for permissions page condition-slot
 architecture

---
 ...ssions-page-condition-slot-architecture.md | 55 +++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 docs/adr/0001-permissions-page-condition-slot-architecture.md

diff --git a/docs/adr/0001-permissions-page-condition-slot-architecture.md b/docs/adr/0001-permissions-page-condition-slot-architecture.md
new file mode 100644
index 0000000000..8ecba9488a
--- /dev/null
+++ b/docs/adr/0001-permissions-page-condition-slot-architecture.md
@@ -0,0 +1,55 @@
+# ADR 0001 — Permissions page condition-slot architecture (APP-954)
+
+- **Status:** Accepted
+- **Date:** 2026-06-30
+- **Ticket:** APP-954 (Build UI for permission page), child of APP-321
+- **Scope boundary:** APP-954 is the UI, preview-mocked ahead of the backend ticket APP-953.
+
+## Context
+
+The DAO Settings → Permissions subpage lists each permission as a row (WHO / WHERE / PERMISSION / CONDITION). The CONDITION column must render a per-condition UI that varies by condition type (e.g. a voting-power condition vs an execute-selector condition vs no condition at all). We need an extensible way to route a permission's condition to the right UI component without coupling the permissions page to specific condition contract addresses, and without prematurely building generic on-chain condition resolution that is the backend ticket's job (APP-953).
+
+A permission is `IDaoPermission = { permissionId, whoAddress, whereAddress, conditionAddress }`. `conditionAddress === ALLOW_FLAG` is the sentinel meaning "no condition" (the granted address may call unconditionally).
+
+## Decision
+
+### Decision 1 — Condition components register through a STANDALONE registry, not plugin index files
+
+Condition components are registered from a dedicated initialiser at `src/modules/settings/initConditionRegistry.ts`, which calls `pluginRegistryUtils.registerSlotComponent` for each `(SettingsSlotId.PERMISSION_CONDITION, conditionType)` pair and is invoked from the registry init path (`initPluginRegistry.ts` or equivalent) alongside the plugin initialisers.
+
+**`src/plugins/tokenPlugin/index.ts` and `src/plugins/sppPlugin/index.ts` MUST NOT be edited for condition registration.** A reviewer finding such edits should block the PR.
+
+**Rationale:** conditions are on-chain *contracts*, not plugin features. Routing condition UI through a plugin's index file conflates plugin ownership with condition ownership and rests on an unverified guess about which plugin "owns" a given condition type. A standalone registry keeps that ownership boundary clean.
+
+### Decision 2 — No address→conditionType routing table in APP-954
+
+APP-954 trusts `conditionType` as supplied directly on the condition payload (`IConditionData.conditionType`) and read straight off `IPermissionRow`. There is **no** hardcoded map of known condition contract addresses → condition types.
+
+Condition-type resolution has exactly two rules:
+
+1. `conditionAddress === ALLOW_FLAG` → `conditionType = 'none'`
+2. absent or unrecognised `conditionType` → `conditionType = 'unknown'`
+
+**Generic address→type resolution is explicitly APP-953's responsibility** and must not be pre-implemented here. Hardcoding condition addresses is fragile and is exactly the "support conditions generically" work the backend ticket owns.
+
+### Preserved decisions
+
+- **`IConditionData` shape:** `{ conditionType: string; [key: string]: unknown }`.
+- **`conditionType` is the synthetic `pluginId`** passed to `PluginSingleComponent` (slotId `SettingsSlotId.PERMISSION_CONDITION`) for routing — it is not a real plugin id.
+- **`IPermissionRow = IDaoPermission & { condition?: IConditionData }`** is a UI-only type (it does not change the domain `IDaoPermission`).
+- **Fallback = a 'No condition' card.** `PluginSingleComponent` renders this Fallback when `conditionType` is `'none'`, or `'unknown'`, or when no component is registered for the conditionType.
+- **Graph view is OUT OF SCOPE** for APP-954 (list view only; the Graph toggle is visible but disabled).
+- **`permissionsDefinitionList` must NOT be reused.** It is a different concept (a proposal-creation permission guard); reusing it is a name-collision trap.
+
+## Consequences
+
+- Adding a new condition UI later = add a component + one `registerSlotComponent` line in `initConditionRegistry.ts`; no plugin edits, no page edits.
+- The permissions page is decoupled from condition contract addresses; APP-953 can layer generic resolution by supplying `conditionType` on the payload (and/or registering more components) without touching the page.
+- Until APP-953 lands, condition data is mock-supplied via the `useMocks` fetch-interceptor seam; if a condition's payload fields are unavailable (see the T02 spike), its component ships as a stub rendering the `conditionType` label + a "data pending" notice.
+- Unknown/unregistered condition types degrade gracefully to the 'No condition' Fallback rather than erroring.
+
+## Downstream tracks gated by this ADR
+
+- **T04** — `SettingsSlotId.PERMISSION_CONDITION` + the 'No condition' Fallback component.
+- **T07** — `initConditionRegistry.ts` + condition components (no plugin-index edits).
+- **T08** — `IPermissionRow` / `IConditionData` types + `resolveConditionType` (the two rules above).

From 136772fb84485fc81e4c19e63f23b49cefefbbd5 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:48:52 +0200
Subject: [PATCH 02/29] feat: Add permission-id reverse dictionary util

---
 src/shared/utils/permissionNameUtils/index.ts |  1 +
 .../permissionNameUtils.test.ts               | 80 +++++++++++++++++++
 .../permissionNameUtils.ts                    | 51 ++++++++++++
 3 files changed, 132 insertions(+)
 create mode 100644 src/shared/utils/permissionNameUtils/index.ts
 create mode 100644 src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
 create mode 100644 src/shared/utils/permissionNameUtils/permissionNameUtils.ts

diff --git a/src/shared/utils/permissionNameUtils/index.ts b/src/shared/utils/permissionNameUtils/index.ts
new file mode 100644
index 0000000000..f1420bf1d6
--- /dev/null
+++ b/src/shared/utils/permissionNameUtils/index.ts
@@ -0,0 +1 @@
+export { permissionNameUtils } from './permissionNameUtils';
diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
new file mode 100644
index 0000000000..5261c789be
--- /dev/null
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
@@ -0,0 +1,80 @@
+import { permissionNameUtils } from './permissionNameUtils';
+
+describe('permissionNameUtils', () => {
+    describe('getPermissionName', () => {
+        it.each([
+            {
+                permissionId:
+                    '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33',
+                expected: 'Root',
+            },
+            {
+                permissionId:
+                    '0x8c433a4cd6b51969eca37f974940894297b9fcf4b282a213fea5cd8f85289c90',
+                expected: 'Create proposal',
+            },
+            {
+                permissionId:
+                    '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d',
+                expected: 'Execute',
+            },
+            {
+                permissionId:
+                    '0x821b6e3a557148015a918c89e5d092e878a69854a2d1a410635f771bd5a8a3f5',
+                expected: 'Upgrade plugin',
+            },
+            {
+                permissionId:
+                    '0x485a22b473de7ee3091c71c5ce05019fd1466a1650b1228784a9bcd5b7bed510',
+                expected: 'Manage selectors',
+            },
+        ])('maps the known hash $permissionId to "$expected"', ({
+            permissionId,
+            expected,
+        }) => {
+            expect(permissionNameUtils.getPermissionName(permissionId)).toEqual(
+                expected,
+            );
+        });
+
+        it.each([
+            {
+                permissionId:
+                    '0x0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef',
+                expected: '0x0123…cdef',
+            },
+            {
+                permissionId:
+                    '0xdeadbeef00000000000000000000000000000000000000000000000000001234',
+                expected: '0xdead…1234',
+            },
+        ])('returns the truncated fallback $expected for the unmapped hash $permissionId', ({
+            permissionId,
+            expected,
+        }) => {
+            expect(permissionNameUtils.getPermissionName(permissionId)).toEqual(
+                expected,
+            );
+        });
+
+        it.each([
+            {
+                permissionId:
+                    '0x815FE80E4B37C8582A3B773D1D7071F983EACFD56B5965DB654F3087C25ADA33',
+                expected: 'Root',
+            },
+            {
+                permissionId:
+                    '0xBF04B4486C9663D805744005C3DA000EDA93DE6E3308A4A7A812EB565327B78D',
+                expected: 'Execute',
+            },
+        ])('resolves known hashes case-insensitively for $permissionId', ({
+            permissionId,
+            expected,
+        }) => {
+            expect(permissionNameUtils.getPermissionName(permissionId)).toEqual(
+                expected,
+            );
+        });
+    });
+});
diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
new file mode 100644
index 0000000000..9b4a002193
--- /dev/null
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
@@ -0,0 +1,51 @@
+import { keccak256, toBytes } from 'viem';
+
+const truncatedHashPrefixLength = 6;
+const truncatedHashSuffixLength = 4;
+
+const permissionFriendlyNames: Record<string, string> = {
+    ROOT_PERMISSION: 'Root',
+    CREATE_PROPOSAL_PERMISSION: 'Create proposal',
+    EXECUTE_PERMISSION: 'Execute',
+    UPGRADE_PLUGIN_PERMISSION: 'Upgrade plugin',
+    MANAGE_SELECTORS_PERMISSION: 'Manage selectors',
+};
+
+class PermissionNameUtils {
+    // TODO(APP-954): replace/extend with the ticket-attached seed permission dictionary once the
+    // Linear attachment is merged. Until then we only resolve the generic protocol permission ids.
+    private permissionNamesByHash: Record<string, string> = Object.fromEntries(
+        Object.entries(permissionFriendlyNames).map(
+            ([permissionId, friendlyName]) => [
+                keccak256(toBytes(permissionId)).toLowerCase(),
+                friendlyName,
+            ],
+        ),
+    );
+
+    /**
+     * Resolves a keccak256 permission-id hash to its friendly, human-readable name.
+     *
+     * @param permissionId The keccak256 hash of the permission identifier.
+     * @returns The mapped friendly name, or a truncated `0x1234…abcd` form of the hash when unknown.
+     */
+    getPermissionName = (permissionId: string): string => {
+        const normalisedId = permissionId.toLowerCase();
+        const friendlyName = this.permissionNamesByHash[normalisedId];
+
+        if (friendlyName != null) {
+            return friendlyName;
+        }
+
+        return this.truncateHash(permissionId);
+    };
+
+    private truncateHash = (hash: string): string => {
+        const prefix = hash.slice(0, truncatedHashPrefixLength);
+        const suffix = hash.slice(-truncatedHashSuffixLength);
+
+        return `${prefix}…${suffix}`;
+    };
+}
+
+export const permissionNameUtils = new PermissionNameUtils();

From 75fd75d0a803f8fea643d580f78f897fb8556b93 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:48:54 +0200
Subject: [PATCH 03/29] feat: Add permission entity resolver and
 ALLOW_FLAG/ANY_ADDR sentinels

---
 .../settings/constants/permissionSentinels.ts | 25 ++++++
 .../utils/permissionEntityUtils/index.ts      |  4 +
 .../permissionEntityUtils.test.ts             | 80 +++++++++++++++++
 .../permissionEntityUtils.ts                  | 87 +++++++++++++++++++
 4 files changed, 196 insertions(+)
 create mode 100644 src/modules/settings/constants/permissionSentinels.ts
 create mode 100644 src/modules/settings/utils/permissionEntityUtils/index.ts
 create mode 100644 src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
 create mode 100644 src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts

diff --git a/src/modules/settings/constants/permissionSentinels.ts b/src/modules/settings/constants/permissionSentinels.ts
new file mode 100644
index 0000000000..3dd201088f
--- /dev/null
+++ b/src/modules/settings/constants/permissionSentinels.ts
@@ -0,0 +1,25 @@
+/**
+ * Canonical OSx permission sentinels.
+ *
+ * These are special addresses used by the OSx `PermissionManager` to encode
+ * permission semantics rather than referencing a concrete account.
+ *
+ * NOTE: APP-953 may promote these to a shared location (e.g. a shared constants
+ * module) once other modules need them. They live in the settings module for now
+ * because the permission UI is the only consumer.
+ */
+
+/**
+ * The OSx "any address" sentinel. When used as the `who` or `where` of a
+ * permission, it means the permission applies to / from any address ("Anyone").
+ * @see https://github.com/aragon/osx/blob/main/packages/contracts/src/core/permission/PermissionManager.sol
+ */
+export const ANY_ADDR = '0xffffffffffffffffffffffffffffffffffffffff' as const;
+
+/**
+ * The OSx `ALLOW_FLAG` sentinel, equal to `address(2)`. It is stored as the
+ * permission condition to signal that the permission is granted unconditionally
+ * ("no condition"), as opposed to being gated by a condition contract.
+ * @see https://github.com/aragon/osx/blob/main/packages/contracts/src/core/permission/PermissionManager.sol
+ */
+export const ALLOW_FLAG = '0x0000000000000000000000000000000000000002' as const;
diff --git a/src/modules/settings/utils/permissionEntityUtils/index.ts b/src/modules/settings/utils/permissionEntityUtils/index.ts
new file mode 100644
index 0000000000..6636be5a7a
--- /dev/null
+++ b/src/modules/settings/utils/permissionEntityUtils/index.ts
@@ -0,0 +1,4 @@
+export {
+    type IPermissionEntity,
+    permissionEntityUtils,
+} from './permissionEntityUtils';
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
new file mode 100644
index 0000000000..22b89d602d
--- /dev/null
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
@@ -0,0 +1,80 @@
+import { addressUtils } from '@aragon/gov-ui-kit';
+import type { IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
+import {
+    type IPermissionEntity,
+    permissionEntityUtils,
+} from './permissionEntityUtils';
+
+describe('permissionEntity Utils', () => {
+    describe('resolvePermissionEntity', () => {
+        const pluginAddress = '0x1234567890123456789012345678901234567890';
+        const unknownAddress = '0x000000000000000000000000000000000000dead';
+
+        const daoPlugins = [
+            {
+                id: 'multisig',
+                uniqueId: `${pluginAddress}-multisig`,
+                label: 'Multisig',
+                meta: {
+                    address: pluginAddress,
+                    name: 'Multisig',
+                } as IDaoPlugin,
+                props: {},
+            },
+        ] satisfies IFilterComponentPlugin<IDaoPlugin>[];
+
+        it.each([
+            {
+                description: 'resolves ANY_ADDR to "Anyone" sentinel',
+                address: ANY_ADDR,
+                expected: { label: 'Anyone', isSentinel: true, tag: undefined },
+            },
+            {
+                description: 'resolves ANY_ADDR case-insensitively to "Anyone"',
+                address: ANY_ADDR.toUpperCase(),
+                expected: { label: 'Anyone', isSentinel: true, tag: undefined },
+            },
+            {
+                description: 'resolves ALLOW_FLAG to "Any Address" sentinel',
+                address: ALLOW_FLAG,
+                expected: {
+                    label: 'Any Address',
+                    isSentinel: true,
+                    tag: undefined,
+                },
+            },
+            {
+                description: 'resolves a matching plugin address to its tag',
+                address: pluginAddress,
+                expected: {
+                    label: 'Multisig',
+                    isSentinel: false,
+                    tag: 'Multisig',
+                },
+            },
+            {
+                description:
+                    'falls back to a truncated address for unknown addresses',
+                address: unknownAddress,
+                expected: {
+                    label: addressUtils.truncateAddress(unknownAddress),
+                    isSentinel: false,
+                    tag: undefined,
+                },
+            },
+        ])('$description', ({ address, expected }) => {
+            const result: IPermissionEntity =
+                permissionEntityUtils.resolvePermissionEntity(
+                    address,
+                    daoPlugins,
+                );
+
+            expect(result.label).toEqual(expected.label);
+            expect(result.tag).toEqual(expected.tag);
+            expect(result.isSentinel).toEqual(expected.isSentinel);
+            expect(result.address).toEqual(address);
+        });
+    });
+});
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
new file mode 100644
index 0000000000..6de42f62db
--- /dev/null
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
@@ -0,0 +1,87 @@
+import { addressUtils } from '@aragon/gov-ui-kit';
+import type { IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+import { daoUtils } from '@/shared/utils/daoUtils';
+import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
+
+/**
+ * Resolved, display-ready representation of a permission `who` / `where` entity.
+ */
+export interface IPermissionEntity {
+    /**
+     * Human-readable label for the entity (e.g. a plugin name, a sentinel name,
+     * or a truncated address fallback).
+     */
+    label: string;
+    /**
+     * Short type tag for the entity when it can be classified (e.g. the plugin
+     * name). Undefined for plain addresses and sentinels.
+     */
+    tag?: string;
+    /**
+     * The original, unmodified address that was resolved.
+     */
+    address: string;
+    /**
+     * Whether the address is an OSx permission sentinel (ANY_ADDR / ALLOW_FLAG)
+     * rather than a concrete account.
+     */
+    isSentinel: boolean;
+}
+
+type DaoPluginEntries = IFilterComponentPlugin<IDaoPlugin>[];
+
+class PermissionEntityUtils {
+    /**
+     * Resolves a permission `who` / `where` address to a display-ready entity.
+     *
+     * Resolution order:
+     * 1. {@link ANY_ADDR} sentinel -> "Anyone".
+     * 2. {@link ALLOW_FLAG} sentinel -> "Any Address".
+     * 3. A matching installed DAO plugin -> the plugin name (as label and tag).
+     * 4. Otherwise -> the checksummed, truncated address.
+     *
+     * @param address - The `who` or `where` address to resolve.
+     * @param daoPlugins - Optional list of installed DAO plugin entries (as
+     * returned by `useDaoPlugins`) used to match the address against a plugin.
+     * @returns The resolved permission entity.
+     */
+    resolvePermissionEntity = (
+        address: string,
+        daoPlugins?: DaoPluginEntries,
+    ): IPermissionEntity => {
+        if (this.isAddressEqual(address, ANY_ADDR)) {
+            return { label: 'Anyone', address, isSentinel: true };
+        }
+
+        if (this.isAddressEqual(address, ALLOW_FLAG)) {
+            return { label: 'Any Address', address, isSentinel: true };
+        }
+
+        const matchedPlugin = daoPlugins?.find((plugin) =>
+            this.isAddressEqual(plugin.meta.address, address),
+        );
+
+        if (matchedPlugin != null) {
+            const pluginName = daoUtils.getPluginName(matchedPlugin.meta);
+
+            return {
+                label: pluginName,
+                tag: pluginName,
+                address,
+                isSentinel: false,
+            };
+        }
+
+        return {
+            label: addressUtils.truncateAddress(address),
+            address,
+            isSentinel: false,
+        };
+    };
+
+    private isAddressEqual = (a?: string, b?: string): boolean =>
+        a != null && b != null && a.toLowerCase() === b.toLowerCase();
+}
+
+export const permissionEntityUtils = new PermissionEntityUtils();

From 0ad2a20602db351b5c9b051108dee7ccd3a684dd Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:48:55 +0200
Subject: [PATCH 04/29] feat: Add settings permissions page route and shell

---
 .../(daoPage)/settings/permissions/page.tsx   |  3 +
 src/assets/locales/en.json                    | 18 ++++
 .../daoPermissionsPage/daoPermissionsPage.tsx | 32 ++++++
 .../daoPermissionsPageClient.tsx              | 98 +++++++++++++++++++
 .../pages/daoPermissionsPage/index.ts         |  4 +
 5 files changed, 155 insertions(+)
 create mode 100644 src/app/dao/[network]/[addressOrEns]/(daoPage)/settings/permissions/page.tsx
 create mode 100644 src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
 create mode 100644 src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
 create mode 100644 src/modules/settings/pages/daoPermissionsPage/index.ts

diff --git a/src/app/dao/[network]/[addressOrEns]/(daoPage)/settings/permissions/page.tsx b/src/app/dao/[network]/[addressOrEns]/(daoPage)/settings/permissions/page.tsx
new file mode 100644
index 0000000000..cdd82da90f
--- /dev/null
+++ b/src/app/dao/[network]/[addressOrEns]/(daoPage)/settings/permissions/page.tsx
@@ -0,0 +1,3 @@
+import { DaoPermissionsPage } from '@/modules/settings/pages/daoPermissionsPage';
+
+export default DaoPermissionsPage;
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 2ab1d511df..601f3a1cac 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3491,6 +3491,24 @@
           "info": "This policy can't be dispatched once it's uninstalled."
         }
       },
+      "daoPermissionsPage": {
+        "header": {
+          "breadcrumb": {
+            "settings": "Settings",
+            "permissions": "Permissions"
+          },
+          "title": "Permissions",
+          "description": "Review who can do what across this DAO and its linked accounts"
+        },
+        "view": {
+          "list": "List",
+          "graph": "Graph"
+        },
+        "placeholder": {
+          "heading": "Permissions coming soon",
+          "description": "The permissions overview for this DAO will appear here."
+        }
+      },
       "daoPolicyDetailsPage": {
         "error": {
           "action": "Explore settings",
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
new file mode 100644
index 0000000000..52f5e59c9e
--- /dev/null
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
@@ -0,0 +1,32 @@
+import { Page } from '@/shared/components/page';
+import type { IDaoPageParams } from '@/shared/types';
+import { daoUtils } from '@/shared/utils/daoUtils';
+import { networkUtils } from '@/shared/utils/networkUtils';
+import { DaoPermissionsPageClient } from './daoPermissionsPageClient';
+
+export interface IDaoPermissionsPageProps {
+    /**
+     * DAO page parameters.
+     */
+    params: Promise<IDaoPageParams>;
+}
+
+export const DaoPermissionsPage: React.FC<IDaoPermissionsPageProps> = async (
+    props,
+) => {
+    const { params } = props;
+    const daoPageParams = await params;
+
+    if (!networkUtils.isValidNetwork(daoPageParams.network)) {
+        // invalid network handled in DAO layout
+        return null;
+    }
+
+    const daoId = await daoUtils.resolveDaoId(daoPageParams);
+
+    return (
+        <Page.Container>
+            <DaoPermissionsPageClient daoId={daoId} />
+        </Page.Container>
+    );
+};
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
new file mode 100644
index 0000000000..a7c2dda814
--- /dev/null
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -0,0 +1,98 @@
+'use client';
+
+import { CardEmptyState, Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
+import { useState } from 'react';
+import { useDao } from '@/shared/api/daoService';
+import { Page } from '@/shared/components/page';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import { daoUtils } from '@/shared/utils/daoUtils';
+
+export interface IDaoPermissionsPageClientProps {
+    /**
+     * ID of the DAO.
+     */
+    daoId: string;
+}
+
+type PermissionsView = 'list' | 'graph';
+
+export const DaoPermissionsPageClient: React.FC<
+    IDaoPermissionsPageClientProps
+> = (props) => {
+    const { daoId } = props;
+
+    const { t } = useTranslations();
+
+    const { data: dao } = useDao({ urlParams: { id: daoId } });
+
+    // Graph view is out of scope for now (T05 shell); only the list view is wired up.
+    const [view, setView] = useState<PermissionsView>('list');
+
+    const handleViewChange = (value: string | string[] | undefined) => {
+        if (value === 'list' || value === 'graph') {
+            setView(value);
+        }
+    };
+
+    // TODO(APP-954): confirm copy against Figma
+    const pageBreadcrumbs = [
+        {
+            href: daoUtils.getDaoUrl(dao, 'settings'),
+            label: t(
+                'app.settings.daoPermissionsPage.header.breadcrumb.settings',
+            ),
+        },
+        {
+            label: t(
+                'app.settings.daoPermissionsPage.header.breadcrumb.permissions',
+            ),
+        },
+    ];
+
+    return (
+        <>
+            <Page.Header
+                breadcrumbs={pageBreadcrumbs}
+                description={t(
+                    'app.settings.daoPermissionsPage.header.description',
+                )}
+                title={t('app.settings.daoPermissionsPage.header.title')}
+            />
+            <Page.Content>
+                <Page.Main>
+                    <div className="flex flex-col gap-6">
+                        <ToggleGroup
+                            isMultiSelect={false}
+                            onChange={handleViewChange}
+                            value={view}
+                        >
+                            <Toggle
+                                label={t(
+                                    'app.settings.daoPermissionsPage.view.list',
+                                )}
+                                value="list"
+                            />
+                            <Toggle
+                                disabled={true}
+                                label={t(
+                                    'app.settings.daoPermissionsPage.view.graph',
+                                )}
+                                value="graph"
+                            />
+                        </ToggleGroup>
+                        {/* Placeholder for the permissions list mounted in T09. */}
+                        <CardEmptyState
+                            description={t(
+                                'app.settings.daoPermissionsPage.placeholder.description',
+                            )}
+                            heading={t(
+                                'app.settings.daoPermissionsPage.placeholder.heading',
+                            )}
+                            objectIllustration={{ object: 'SETTINGS' }}
+                        />
+                    </div>
+                </Page.Main>
+            </Page.Content>
+        </>
+    );
+};
diff --git a/src/modules/settings/pages/daoPermissionsPage/index.ts b/src/modules/settings/pages/daoPermissionsPage/index.ts
new file mode 100644
index 0000000000..c7028d8cd1
--- /dev/null
+++ b/src/modules/settings/pages/daoPermissionsPage/index.ts
@@ -0,0 +1,4 @@
+export {
+    DaoPermissionsPage,
+    type IDaoPermissionsPageProps,
+} from './daoPermissionsPage';

From eb2e91e036b0247fa03dcc840a0470a755a7777b Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:52:47 +0200
Subject: [PATCH 05/29] feat: Add permission row types and condition-type
 resolver

---
 src/modules/settings/types/index.ts           |  1 +
 src/modules/settings/types/permissionRow.ts   | 31 ++++++++++++
 .../conditionTypeUtils.test.ts                | 45 +++++++++++++++++
 .../conditionTypeUtils/conditionTypeUtils.ts  | 49 +++++++++++++++++++
 .../utils/conditionTypeUtils/index.ts         |  1 +
 5 files changed, 127 insertions(+)
 create mode 100644 src/modules/settings/types/permissionRow.ts
 create mode 100644 src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
 create mode 100644 src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
 create mode 100644 src/modules/settings/utils/conditionTypeUtils/index.ts

diff --git a/src/modules/settings/types/index.ts b/src/modules/settings/types/index.ts
index 176224a0ff..d6aa45df8e 100644
--- a/src/modules/settings/types/index.ts
+++ b/src/modules/settings/types/index.ts
@@ -2,5 +2,6 @@ export type { IBuildPreparePluginUpdateDataParams } from './buildPreparePluginUp
 export type { IDaoPolicyDetailsPageParams } from './daoPolicyDetailsPageParams';
 export type { IDaoProcessDetailsPageParams } from './daoProcessDetailsPageParams';
 export type { IGetUninstallHelpersParams } from './getUninstallHelpersParams';
+export type { IConditionData, IPermissionRow } from './permissionRow';
 export type { IPluginToFormDataParams } from './pluginToFormDataParams';
 export type { IUseGovernanceSettingsParams } from './useGovernanceSettingsParams';
diff --git a/src/modules/settings/types/permissionRow.ts b/src/modules/settings/types/permissionRow.ts
new file mode 100644
index 0000000000..c032c6a93e
--- /dev/null
+++ b/src/modules/settings/types/permissionRow.ts
@@ -0,0 +1,31 @@
+import type { IDaoPermission } from '@/shared/api/daoService';
+
+/**
+ * UI-side representation of a permission's resolved condition.
+ *
+ * `conditionType` is read straight off the payload (see ADR 0001). Additional,
+ * condition-specific fields may be present, hence the open-ended index
+ * signature.
+ */
+export interface IConditionData {
+    /**
+     * The resolved condition type discriminator (e.g. `'voting-power'`). An
+     * empty or absent value is treated as `'unknown'` by the resolver.
+     */
+    conditionType: string;
+    [key: string]: unknown;
+}
+
+/**
+ * UI-only view model for a single permission row. Extends the domain
+ * {@link IDaoPermission} with an optional resolved {@link IConditionData}.
+ *
+ * The domain type is never mutated; condition resolution happens at the UI
+ * layer.
+ */
+export type IPermissionRow = IDaoPermission & {
+    /**
+     * Resolved condition payload for the permission, when available.
+     */
+    condition?: IConditionData;
+};
diff --git a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
new file mode 100644
index 0000000000..9e3a2fa0cf
--- /dev/null
+++ b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
@@ -0,0 +1,45 @@
+import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import { conditionTypeUtils } from './conditionTypeUtils';
+
+describe('conditionType Utils', () => {
+    describe('resolveConditionType', () => {
+        const someAddress = '0x000000000000000000000000000000000000dead';
+
+        it.each([
+            {
+                description: 'resolves ALLOW_FLAG to "none"',
+                conditionAddress: ALLOW_FLAG,
+                conditionData: undefined,
+                expected: 'none',
+            },
+            {
+                description:
+                    'returns the payload conditionType when it is a non-empty string',
+                conditionAddress: someAddress,
+                conditionData: { conditionType: 'voting-power' },
+                expected: 'voting-power',
+            },
+            {
+                description:
+                    'resolves to "unknown" when condition data is absent',
+                conditionAddress: someAddress,
+                conditionData: undefined,
+                expected: 'unknown',
+            },
+            {
+                description:
+                    'resolves to "unknown" when conditionType is an empty string',
+                conditionAddress: someAddress,
+                conditionData: { conditionType: '' },
+                expected: 'unknown',
+            },
+        ])('$description', ({ conditionAddress, conditionData, expected }) => {
+            expect(
+                conditionTypeUtils.resolveConditionType(
+                    conditionAddress,
+                    conditionData,
+                ),
+            ).toBe(expected);
+        });
+    });
+});
diff --git a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
new file mode 100644
index 0000000000..823539ebd1
--- /dev/null
+++ b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
@@ -0,0 +1,49 @@
+import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import type { IConditionData } from '../../types';
+
+/**
+ * Discriminator returned when a permission is granted unconditionally
+ * (condition equals {@link ALLOW_FLAG}).
+ */
+const NO_CONDITION = 'none';
+
+/**
+ * Discriminator returned when the condition type cannot be resolved from the
+ * payload (absent condition data or an empty/unrecognised `conditionType`).
+ */
+const UNKNOWN_CONDITION = 'unknown';
+
+class ConditionTypeUtils {
+    /**
+     * Resolves the display condition type for a permission.
+     *
+     * Per ADR 0001, the type is read straight off the payload; the only
+     * resolution rules are:
+     * - condition address equals {@link ALLOW_FLAG} (case-insensitive) ->
+     *   `'none'`.
+     * - a non-empty `conditionType` on the supplied data -> that value.
+     * - otherwise -> `'unknown'`.
+     *
+     * @param conditionAddress The permission's on-chain condition address.
+     * @param conditionData Optional resolved condition payload.
+     * @returns The resolved condition type discriminator.
+     */
+    resolveConditionType = (
+        conditionAddress: string,
+        conditionData?: IConditionData,
+    ): string => {
+        if (conditionAddress.toLowerCase() === ALLOW_FLAG.toLowerCase()) {
+            return NO_CONDITION;
+        }
+
+        const conditionType = conditionData?.conditionType;
+
+        if (typeof conditionType === 'string' && conditionType.length > 0) {
+            return conditionType;
+        }
+
+        return UNKNOWN_CONDITION;
+    };
+}
+
+export const conditionTypeUtils = new ConditionTypeUtils();
diff --git a/src/modules/settings/utils/conditionTypeUtils/index.ts b/src/modules/settings/utils/conditionTypeUtils/index.ts
new file mode 100644
index 0000000000..11ba8f604d
--- /dev/null
+++ b/src/modules/settings/utils/conditionTypeUtils/index.ts
@@ -0,0 +1 @@
+export { conditionTypeUtils } from './conditionTypeUtils';

From c85c7cd3cc40a7f6d9d3ade0a9de2b235a82bfa2 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 10:52:49 +0200
Subject: [PATCH 06/29] feat: Add PERMISSION_CONDITION slot and no-condition
 fallback component

---
 src/assets/locales/en.json                    |  4 ++++
 .../components/noConditionSlot/index.ts       |  1 +
 .../noConditionSlot/noConditionSlot.test.tsx  | 20 +++++++++++++++++++
 .../noConditionSlot/noConditionSlot.tsx       | 17 ++++++++++++++++
 src/modules/settings/constants/moduleSlots.ts |  1 +
 5 files changed, 43 insertions(+)
 create mode 100644 src/modules/settings/components/noConditionSlot/index.ts
 create mode 100644 src/modules/settings/components/noConditionSlot/noConditionSlot.test.tsx
 create mode 100644 src/modules/settings/components/noConditionSlot/noConditionSlot.tsx

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 601f3a1cac..92bfd6a34b 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3509,6 +3509,10 @@
           "description": "The permissions overview for this DAO will appear here."
         }
       },
+      "noConditionSlot": {
+        "heading": "No condition",
+        "description": "Functions guarded by this permission can be called by the granted address unconditionally."
+      },
       "daoPolicyDetailsPage": {
         "error": {
           "action": "Explore settings",
diff --git a/src/modules/settings/components/noConditionSlot/index.ts b/src/modules/settings/components/noConditionSlot/index.ts
new file mode 100644
index 0000000000..fc5bedf58c
--- /dev/null
+++ b/src/modules/settings/components/noConditionSlot/index.ts
@@ -0,0 +1 @@
+export { NoConditionSlot } from './noConditionSlot';
diff --git a/src/modules/settings/components/noConditionSlot/noConditionSlot.test.tsx b/src/modules/settings/components/noConditionSlot/noConditionSlot.test.tsx
new file mode 100644
index 0000000000..5bb9e5176b
--- /dev/null
+++ b/src/modules/settings/components/noConditionSlot/noConditionSlot.test.tsx
@@ -0,0 +1,20 @@
+import { GukModulesProvider } from '@aragon/gov-ui-kit';
+import { render, screen } from '@testing-library/react';
+import { NoConditionSlot } from './noConditionSlot';
+
+describe('<NoConditionSlot /> component', () => {
+    const createTestComponent = () => (
+        <GukModulesProvider>
+            <NoConditionSlot />
+        </GukModulesProvider>
+    );
+
+    it('renders the no condition heading and description copy', () => {
+        render(createTestComponent());
+
+        expect(screen.getByText(/noConditionSlot.heading/)).toBeInTheDocument();
+        expect(
+            screen.getByText(/noConditionSlot.description/),
+        ).toBeInTheDocument();
+    });
+});
diff --git a/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx b/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx
new file mode 100644
index 0000000000..19cadd0889
--- /dev/null
+++ b/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx
@@ -0,0 +1,17 @@
+'use client';
+
+import { CardEmptyState } from '@aragon/gov-ui-kit';
+import { useTranslations } from '@/shared/components/translationsProvider';
+
+export const NoConditionSlot: React.FC = () => {
+    const { t } = useTranslations();
+
+    return (
+        <CardEmptyState
+            description={t('app.settings.noConditionSlot.description')}
+            heading={t('app.settings.noConditionSlot.heading')}
+            isStacked={false}
+            objectIllustration={{ object: 'SETTINGS' }}
+        />
+    );
+};
diff --git a/src/modules/settings/constants/moduleSlots.ts b/src/modules/settings/constants/moduleSlots.ts
index a03ccc18aa..66889f5cdf 100644
--- a/src/modules/settings/constants/moduleSlots.ts
+++ b/src/modules/settings/constants/moduleSlots.ts
@@ -3,4 +3,5 @@ export enum SettingsSlotId {
     SETTINGS_BUILD_PREPARE_PLUGIN_UPDATE_DATA = 'SETTINGS_BUILD_PREPARE_PLUGIN_UPDATE_DATA',
     SETTINGS_GET_UNINSTALL_HELPERS = 'SETTINGS_GET_UNINSTALL_HELPERS',
     SETTINGS_PLUGIN_TO_FORM_DATA = 'SETTINGS_PLUGIN_TO_FORM_DATA',
+    PERMISSION_CONDITION = 'PERMISSION_CONDITION',
 }

From 712108ea9333a58eda33ca72cf59e32dd0b6dbdb Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 11:03:59 +0200
Subject: [PATCH 07/29] feat: Add condition slot registry and
 voting-power/execute-selector components

---
 src/assets/locales/en.json                    | 10 ++++
 src/initPluginRegistry.ts                     |  2 +
 .../executeSelectorConditionSlot.test.tsx     | 53 ++++++++++++++++++
 .../executeSelectorConditionSlot.tsx          | 54 +++++++++++++++++++
 .../executeSelectorConditionSlot/index.ts     |  7 +++
 .../votingPowerConditionSlot/index.ts         |  7 +++
 .../votingPowerConditionSlot.test.tsx         | 28 ++++++++++
 .../votingPowerConditionSlot.tsx              | 28 ++++++++++
 .../settings/initConditionRegistry.test.ts    | 45 ++++++++++++++++
 src/modules/settings/initConditionRegistry.ts | 28 ++++++++++
 10 files changed, 262 insertions(+)
 create mode 100644 src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
 create mode 100644 src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
 create mode 100644 src/modules/settings/components/executeSelectorConditionSlot/index.ts
 create mode 100644 src/modules/settings/components/votingPowerConditionSlot/index.ts
 create mode 100644 src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
 create mode 100644 src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
 create mode 100644 src/modules/settings/initConditionRegistry.test.ts
 create mode 100644 src/modules/settings/initConditionRegistry.ts

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 92bfd6a34b..cd554cd920 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3513,6 +3513,16 @@
         "heading": "No condition",
         "description": "Functions guarded by this permission can be called by the granted address unconditionally."
       },
+      "votingPowerConditionSlot": {
+        "type": "Condition",
+        "details": "Details",
+        "pending": "Condition details pending (APP-953)"
+      },
+      "executeSelectorConditionSlot": {
+        "target": "Target",
+        "allowedActions": "Allowed actions",
+        "noActions": "No allowed actions"
+      },
       "daoPolicyDetailsPage": {
         "error": {
           "action": "Explore settings",
diff --git a/src/initPluginRegistry.ts b/src/initPluginRegistry.ts
index e09f255ca6..5c536b941a 100644
--- a/src/initPluginRegistry.ts
+++ b/src/initPluginRegistry.ts
@@ -1,9 +1,11 @@
 import { initialiseDaos } from './daos';
 import { initialisePolicyPluginRegistry } from './modules/capitalFlow/utils/policyPluginRegistryUtils';
+import { initialiseConditionRegistry } from './modules/settings/initConditionRegistry';
 import { initialisePlugins } from './plugins';
 
 export const initPluginRegistry = () => {
     initialisePlugins();
     initialisePolicyPluginRegistry();
     initialiseDaos();
+    initialiseConditionRegistry();
 };
diff --git a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
new file mode 100644
index 0000000000..094cdc5ddf
--- /dev/null
+++ b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
@@ -0,0 +1,53 @@
+import { GukModulesProvider } from '@aragon/gov-ui-kit';
+import { render, screen } from '@testing-library/react';
+import type { IConditionData } from '@/modules/settings/types';
+import { ExecuteSelectorConditionSlot } from './executeSelectorConditionSlot';
+
+describe('<ExecuteSelectorConditionSlot /> component', () => {
+    const createTestComponent = (props?: Partial<IConditionData>) => {
+        const completeProps: IConditionData = {
+            conditionType: 'execute-selector',
+            ...props,
+        };
+
+        return (
+            <GukModulesProvider>
+                <ExecuteSelectorConditionSlot {...completeProps} />
+            </GukModulesProvider>
+        );
+    };
+
+    it('renders the target and the list of allowed selectors from the payload', () => {
+        render(
+            createTestComponent({
+                target: '0xTarget',
+                selectors: ['0xaaaaaaaa', '0xbbbbbbbb'],
+            }),
+        );
+
+        expect(screen.getByText('0xTarget')).toBeInTheDocument();
+        expect(screen.getByText('0xaaaaaaaa')).toBeInTheDocument();
+        expect(screen.getByText('0xbbbbbbbb')).toBeInTheDocument();
+    });
+
+    it('shows the no allowed actions fallback when selectors are absent', () => {
+        render(createTestComponent({ selectors: undefined }));
+
+        expect(
+            screen.getByText(/executeSelectorConditionSlot.noActions/),
+        ).toBeInTheDocument();
+    });
+
+    it('ignores non-string selector entries when narrowing the payload', () => {
+        render(
+            createTestComponent({
+                selectors: ['0xaaaaaaaa', 42, null, ''],
+            }),
+        );
+
+        expect(screen.getByText('0xaaaaaaaa')).toBeInTheDocument();
+        expect(
+            screen.queryByText(/executeSelectorConditionSlot.noActions/),
+        ).not.toBeInTheDocument();
+    });
+});
diff --git a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
new file mode 100644
index 0000000000..a0c1fa7acd
--- /dev/null
+++ b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
@@ -0,0 +1,54 @@
+'use client';
+
+import { DefinitionList } from '@aragon/gov-ui-kit';
+import type { IConditionData } from '@/modules/settings/types';
+import { useTranslations } from '@/shared/components/translationsProvider';
+
+const isNonEmptyString = (value: unknown): value is string =>
+    typeof value === 'string' && value.length > 0;
+
+const toSelectorList = (value: unknown): string[] => {
+    if (!Array.isArray(value)) {
+        return [];
+    }
+
+    return value.filter(isNonEmptyString);
+};
+
+export const ExecuteSelectorConditionSlot: React.FC<IConditionData> = (
+    props,
+) => {
+    const { target, selectors } = props;
+    const { t } = useTranslations();
+
+    const targetLabel = isNonEmptyString(target) ? target : undefined;
+    const selectorList = toSelectorList(selectors);
+    const hasAllowedActions = selectorList.length > 0;
+
+    return (
+        <DefinitionList.Container>
+            {targetLabel != null && (
+                <DefinitionList.Item
+                    term={t('app.settings.executeSelectorConditionSlot.target')}
+                >
+                    {targetLabel}
+                </DefinitionList.Item>
+            )}
+            <DefinitionList.Item
+                term={t(
+                    'app.settings.executeSelectorConditionSlot.allowedActions',
+                )}
+            >
+                {hasAllowedActions ? (
+                    <ul>
+                        {selectorList.map((selector) => (
+                            <li key={selector}>{selector}</li>
+                        ))}
+                    </ul>
+                ) : (
+                    t('app.settings.executeSelectorConditionSlot.noActions')
+                )}
+            </DefinitionList.Item>
+        </DefinitionList.Container>
+    );
+};
diff --git a/src/modules/settings/components/executeSelectorConditionSlot/index.ts b/src/modules/settings/components/executeSelectorConditionSlot/index.ts
new file mode 100644
index 0000000000..58753cab67
--- /dev/null
+++ b/src/modules/settings/components/executeSelectorConditionSlot/index.ts
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic';
+
+export const ExecuteSelectorConditionSlot = dynamic(() =>
+    import('./executeSelectorConditionSlot').then(
+        (mod) => mod.ExecuteSelectorConditionSlot,
+    ),
+);
diff --git a/src/modules/settings/components/votingPowerConditionSlot/index.ts b/src/modules/settings/components/votingPowerConditionSlot/index.ts
new file mode 100644
index 0000000000..355dd17d4b
--- /dev/null
+++ b/src/modules/settings/components/votingPowerConditionSlot/index.ts
@@ -0,0 +1,7 @@
+import dynamic from 'next/dynamic';
+
+export const VotingPowerConditionSlot = dynamic(() =>
+    import('./votingPowerConditionSlot').then(
+        (mod) => mod.VotingPowerConditionSlot,
+    ),
+);
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
new file mode 100644
index 0000000000..788af250cc
--- /dev/null
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
@@ -0,0 +1,28 @@
+import { GukModulesProvider } from '@aragon/gov-ui-kit';
+import { render, screen } from '@testing-library/react';
+import type { IConditionData } from '@/modules/settings/types';
+import { VotingPowerConditionSlot } from './votingPowerConditionSlot';
+
+describe('<VotingPowerConditionSlot /> component', () => {
+    const createTestComponent = (props?: Partial<IConditionData>) => {
+        const completeProps: IConditionData = {
+            conditionType: 'voting-power',
+            ...props,
+        };
+
+        return (
+            <GukModulesProvider>
+                <VotingPowerConditionSlot {...completeProps} />
+            </GukModulesProvider>
+        );
+    };
+
+    it('renders the condition type and the pending placeholder copy', () => {
+        render(createTestComponent({ conditionType: 'voting-power' }));
+
+        expect(screen.getByText('voting-power')).toBeInTheDocument();
+        expect(
+            screen.getByText(/votingPowerConditionSlot.pending/),
+        ).toBeInTheDocument();
+    });
+});
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
new file mode 100644
index 0000000000..c2d9a934ff
--- /dev/null
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { DefinitionList } from '@aragon/gov-ui-kit';
+import type { IConditionData } from '@/modules/settings/types';
+import { useTranslations } from '@/shared/components/translationsProvider';
+
+// TODO(APP-953): wire the real VotingPower condition data source. The spike
+// confirmed no in-repo VotingPower payload exists yet, so this slot renders a
+// placeholder until the data source lands.
+export const VotingPowerConditionSlot: React.FC<IConditionData> = (props) => {
+    const { conditionType } = props;
+    const { t } = useTranslations();
+
+    return (
+        <DefinitionList.Container>
+            <DefinitionList.Item
+                term={t('app.settings.votingPowerConditionSlot.type')}
+            >
+                {conditionType}
+            </DefinitionList.Item>
+            <DefinitionList.Item
+                term={t('app.settings.votingPowerConditionSlot.details')}
+            >
+                {t('app.settings.votingPowerConditionSlot.pending')}
+            </DefinitionList.Item>
+        </DefinitionList.Container>
+    );
+};
diff --git a/src/modules/settings/initConditionRegistry.test.ts b/src/modules/settings/initConditionRegistry.test.ts
new file mode 100644
index 0000000000..5bead2e759
--- /dev/null
+++ b/src/modules/settings/initConditionRegistry.test.ts
@@ -0,0 +1,45 @@
+import { SettingsSlotId } from '@/modules/settings/constants/moduleSlots';
+import { pluginRegistryUtils } from '@/shared/utils/pluginRegistryUtils';
+import { ExecuteSelectorConditionSlot } from './components/executeSelectorConditionSlot';
+import { NoConditionSlot } from './components/noConditionSlot';
+import { VotingPowerConditionSlot } from './components/votingPowerConditionSlot';
+import { initialiseConditionRegistry } from './initConditionRegistry';
+
+describe('initialiseConditionRegistry', () => {
+    beforeEach(() => {
+        initialiseConditionRegistry();
+    });
+
+    it.each([
+        { pluginId: 'voting-power', component: VotingPowerConditionSlot },
+        {
+            pluginId: 'execute-selector',
+            component: ExecuteSelectorConditionSlot,
+        },
+    ])('resolves the $pluginId condition component from the slot', ({
+        pluginId,
+        component,
+    }) => {
+        const resolved = pluginRegistryUtils.getSlotComponent({
+            slotId: SettingsSlotId.PERMISSION_CONDITION,
+            pluginId,
+        });
+
+        expect(resolved).toBe(component);
+    });
+
+    it.each([
+        { pluginId: 'none' },
+        { pluginId: 'unknown' },
+    ])('does not resolve a component for the unregistered $pluginId condition type', ({
+        pluginId,
+    }) => {
+        const resolved = pluginRegistryUtils.getSlotComponent({
+            slotId: SettingsSlotId.PERMISSION_CONDITION,
+            pluginId,
+        });
+
+        expect(resolved).toBeUndefined();
+        expect(resolved).not.toBe(NoConditionSlot);
+    });
+});
diff --git a/src/modules/settings/initConditionRegistry.ts b/src/modules/settings/initConditionRegistry.ts
new file mode 100644
index 0000000000..141c699ebc
--- /dev/null
+++ b/src/modules/settings/initConditionRegistry.ts
@@ -0,0 +1,28 @@
+import { SettingsSlotId } from '@/modules/settings/constants/moduleSlots';
+import { pluginRegistryUtils } from '@/shared/utils/pluginRegistryUtils';
+import { ExecuteSelectorConditionSlot } from './components/executeSelectorConditionSlot';
+import { VotingPowerConditionSlot } from './components/votingPowerConditionSlot';
+
+/**
+ * Registers the permission-condition slot components against the
+ * {@link SettingsSlotId.PERMISSION_CONDITION} slot.
+ *
+ * Condition registration is standalone: the synthetic `conditionType`
+ * discriminator (see {@link IConditionData}) is used as the `pluginId`, so each
+ * resolved condition payload renders its matching component without coupling to
+ * any real governance plugin. This module is the sole location for condition
+ * registrations.
+ */
+export const initialiseConditionRegistry = () => {
+    pluginRegistryUtils
+        .registerSlotComponent({
+            slotId: SettingsSlotId.PERMISSION_CONDITION,
+            pluginId: 'voting-power',
+            component: VotingPowerConditionSlot,
+        })
+        .registerSlotComponent({
+            slotId: SettingsSlotId.PERMISSION_CONDITION,
+            pluginId: 'execute-selector',
+            component: ExecuteSelectorConditionSlot,
+        });
+};

From 633b6aea34ac0d06a00a82757b88fbc14786ed73 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 11:04:00 +0200
Subject: [PATCH 08/29] feat: Add permissions endpoint mock data for preview
 mode

---
 src/backendApiMocks.ts                        |  3 +-
 .../settings/constants/permissionsMocks.ts    | 93 +++++++++++++++++++
 2 files changed, 95 insertions(+), 1 deletion(-)
 create mode 100644 src/modules/settings/constants/permissionsMocks.ts

diff --git a/src/backendApiMocks.ts b/src/backendApiMocks.ts
index 1ce3b10fe0..b59494841b 100644
--- a/src/backendApiMocks.ts
+++ b/src/backendApiMocks.ts
@@ -1,3 +1,4 @@
+import { permissionsMocks } from './modules/settings/constants/permissionsMocks';
 import type { IBackendApiMock } from './shared/types';
 
-export const backendApiMocks: IBackendApiMock[] = [];
+export const backendApiMocks: IBackendApiMock[] = [...permissionsMocks];
diff --git a/src/modules/settings/constants/permissionsMocks.ts b/src/modules/settings/constants/permissionsMocks.ts
new file mode 100644
index 0000000000..51d1816036
--- /dev/null
+++ b/src/modules/settings/constants/permissionsMocks.ts
@@ -0,0 +1,93 @@
+import type { IPaginatedResponse } from '@/shared/api/aragonBackendService';
+import type { IDaoPermission } from '@/shared/api/daoService';
+import type { IBackendApiMock } from '@/shared/types';
+import type { IPermissionRow } from '../types';
+import { ALLOW_FLAG, ANY_ADDR } from './permissionSentinels';
+
+/**
+ * Real permission-id hashes (keccak256 of the permission strings) so the UI
+ * resolves them to human-readable names.
+ */
+const ROOT_PERMISSION_ID =
+    '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33';
+const EXECUTE_PERMISSION_ID =
+    '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d';
+const CREATE_PROPOSAL_PERMISSION_ID =
+    '0x8c433a4cd6b51969eca37f974940894297b9fcf4b282a213fea5cd8f85289c90';
+const MANAGE_SELECTORS_PERMISSION_ID =
+    '0x485a22b473de7ee3091c71c5ce05019fd1466a1650b1228784a9bcd5b7bed510';
+
+const daoAddress = '0x1F2e3D4C5b6A70819283746556473829100AbCdE';
+const pluginAddress = '0xA1b2C3d4E5F60718293A4b5C6d7E8f9001234567';
+const tokenAddress = '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5';
+const votingConditionAddress = '0xC0Ffee254729296a45a3885639AC7E10F9d54979';
+const selectorConditionAddress = '0xDe0B295669a9FD93d5F28D9Ec85E40f4cb697BAe';
+const unknownConditionAddress = '0xaB5801a7D398351b8bE11C439e05C5B3259aeC9B';
+
+const permissions: Array<IDaoPermission & IPermissionRow> = [
+    {
+        // No condition: granted unconditionally to "Anyone".
+        permissionId: ROOT_PERMISSION_ID,
+        whoAddress: ANY_ADDR,
+        whereAddress: daoAddress,
+        conditionAddress: ALLOW_FLAG,
+    },
+    {
+        // Voting-power gated condition.
+        permissionId: EXECUTE_PERMISSION_ID,
+        whoAddress: pluginAddress,
+        whereAddress: daoAddress,
+        conditionAddress: votingConditionAddress,
+        condition: {
+            conditionType: 'voting-power',
+            token: tokenAddress,
+            minVotingPower: '1000000000000000000',
+        },
+    },
+    {
+        // Execute-selector gated condition.
+        permissionId: MANAGE_SELECTORS_PERMISSION_ID,
+        whoAddress: pluginAddress,
+        whereAddress: daoAddress,
+        conditionAddress: selectorConditionAddress,
+        condition: {
+            conditionType: 'execute-selector',
+            selectors: ['0xa9059cbb'],
+            targets: [tokenAddress],
+        },
+    },
+    {
+        // Unknown / unrecognised condition type → resolves to Fallback.
+        permissionId: CREATE_PROPOSAL_PERMISSION_ID,
+        whoAddress: pluginAddress,
+        whereAddress: daoAddress,
+        conditionAddress: unknownConditionAddress,
+        condition: {
+            conditionType: 'mystery-condition',
+        },
+    },
+];
+
+const permissionsResponse: IPaginatedResponse<IDaoPermission & IPermissionRow> =
+    {
+        metadata: {
+            page: 1,
+            pageSize: permissions.length,
+            totalPages: 1,
+            totalRecords: permissions.length,
+        },
+        data: permissions,
+    };
+
+/**
+ * Preview-mode mock for `GET /permissions/:network/:daoAddress`. Covers every
+ * conditionType scenario (no-condition, voting-power, execute-selector,
+ * unknown) so the permissions UI can be exercised without a live backend.
+ */
+export const permissionsMocks: IBackendApiMock[] = [
+    {
+        url: /\/permissions\//,
+        type: 'replace',
+        data: permissionsResponse,
+    },
+];

From 2ae0bdc66585afbdbd00ce678c54fc0325daa65d Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 11:18:59 +0200
Subject: [PATCH 09/29] feat: Add permissions list with linked-account tabs and
 condition routing

---
 src/assets/locales/en.json                    |  16 +-
 .../components/permissionsList/index.ts       |   4 +
 .../permissionsList/permissionsList.test.tsx  | 206 +++++++++++++
 .../permissionsList/permissionsList.tsx       | 279 ++++++++++++++++++
 .../daoPermissionsPageClient.tsx              |  14 +-
 5 files changed, 505 insertions(+), 14 deletions(-)
 create mode 100644 src/modules/settings/components/permissionsList/index.ts
 create mode 100644 src/modules/settings/components/permissionsList/permissionsList.test.tsx
 create mode 100644 src/modules/settings/components/permissionsList/permissionsList.tsx

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index cd554cd920..c045311eeb 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3503,10 +3503,20 @@
         "view": {
           "list": "List",
           "graph": "Graph"
+        }
+      },
+      "permissionsList": {
+        "header": {
+          "who": "Who",
+          "where": "Where",
+          "permission": "Permission",
+          "condition": "Condition"
         },
-        "placeholder": {
-          "heading": "Permissions coming soon",
-          "description": "The permissions overview for this DAO will appear here."
+        "expandAll": "Expand all",
+        "collapseAll": "Collapse all",
+        "empty": {
+          "heading": "No permissions",
+          "description": "This account has no indexed permissions."
         }
       },
       "noConditionSlot": {
diff --git a/src/modules/settings/components/permissionsList/index.ts b/src/modules/settings/components/permissionsList/index.ts
new file mode 100644
index 0000000000..f047f20338
--- /dev/null
+++ b/src/modules/settings/components/permissionsList/index.ts
@@ -0,0 +1,4 @@
+export {
+    type IPermissionsListProps,
+    PermissionsList,
+} from './permissionsList';
diff --git a/src/modules/settings/components/permissionsList/permissionsList.test.tsx b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
new file mode 100644
index 0000000000..483c3c7051
--- /dev/null
+++ b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
@@ -0,0 +1,206 @@
+import { GukModulesProvider } from '@aragon/gov-ui-kit';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import * as daoService from '@/shared/api/daoService';
+import {
+    type IDao,
+    type ILinkedAccountSummary,
+    Network,
+} from '@/shared/api/daoService';
+import * as featureFlagsProvider from '@/shared/components/featureFlagsProvider';
+import * as useDaoPluginsModule from '@/shared/hooks/useDaoPlugins';
+import {
+    generateDao,
+    generateDaoMetrics,
+    generateReactQueryResultSuccess,
+} from '@/shared/testUtils';
+import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
+import type { IPermissionRow } from '../../types';
+import { PermissionsList } from './permissionsList';
+
+const ROOT_PERMISSION_ID =
+    '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33';
+const EXECUTE_PERMISSION_ID =
+    '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d';
+
+describe('<PermissionsList /> component', () => {
+    const useDaoSpy = jest.spyOn(daoService, 'useDao');
+    const useAllDaoPermissionsSpy = jest.spyOn(
+        daoService,
+        'useAllDaoPermissions',
+    );
+    const useDaoPluginsSpy = jest.spyOn(useDaoPluginsModule, 'useDaoPlugins');
+    const useFeatureFlagsSpy = jest.spyOn(
+        featureFlagsProvider,
+        'useFeatureFlags',
+    );
+
+    const setFeatureFlags = (linkedAccountEnabled: boolean) => {
+        useFeatureFlagsSpy.mockReturnValue({
+            isEnabled: (key) => key === 'linkedAccount' && linkedAccountEnabled,
+        } as ReturnType<typeof featureFlagsProvider.useFeatureFlags>);
+    };
+
+    const setDao = (dao?: Partial<IDao>) => {
+        useDaoSpy.mockReturnValue(
+            generateReactQueryResultSuccess({
+                data: generateDao(dao),
+            }) as ReturnType<typeof daoService.useDao>,
+        );
+    };
+
+    const setPermissions = (
+        result: Partial<ReturnType<typeof daoService.useAllDaoPermissions>>,
+    ) => {
+        useAllDaoPermissionsSpy.mockReturnValue({
+            data: [],
+            isLoading: false,
+            error: null,
+            refetch: jest.fn(),
+            ...result,
+        } as ReturnType<typeof daoService.useAllDaoPermissions>);
+    };
+
+    beforeEach(() => {
+        setFeatureFlags(false);
+        setDao();
+        setPermissions({ data: [], isLoading: false });
+        useDaoPluginsSpy.mockReturnValue([]);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    const createTestComponent = (props?: { daoId?: string }) => (
+        <GukModulesProvider>
+            <PermissionsList daoId={props?.daoId ?? 'dao-test'} />
+        </GukModulesProvider>
+    );
+
+    it('renders a skeleton while the permissions are loading', () => {
+        setPermissions({ data: [], isLoading: true });
+
+        render(createTestComponent());
+
+        expect(
+            screen.getByTestId('permissions-list-skeleton'),
+        ).toBeInTheDocument();
+        expect(
+            screen.queryByText(/permissionsList.empty.heading/),
+        ).not.toBeInTheDocument();
+    });
+
+    it('renders the empty state when the account has no permissions', () => {
+        setPermissions({ data: [], isLoading: false });
+
+        render(createTestComponent());
+
+        expect(
+            screen.getByText(/permissionsList.empty.heading/),
+        ).toBeInTheDocument();
+        expect(
+            screen.queryByTestId('permissions-list-skeleton'),
+        ).not.toBeInTheDocument();
+    });
+
+    it('renders rows with resolved who, where and permission names', () => {
+        const rows: IPermissionRow[] = [
+            {
+                permissionId: ROOT_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: ALLOW_FLAG,
+            },
+            {
+                permissionId: EXECUTE_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: '0xC0Ffee254729296a45a3885639AC7E10F9d54979',
+                condition: { conditionType: 'voting-power' },
+            },
+        ];
+        setPermissions({ data: rows, isLoading: false });
+
+        render(createTestComponent());
+
+        expect(screen.getByText('Root')).toBeInTheDocument();
+        expect(screen.getByText('Execute')).toBeInTheDocument();
+        expect(screen.getAllByText('Anyone').length).toBeGreaterThan(0);
+        expect(screen.getAllByText('Any Address').length).toBeGreaterThan(0);
+        expect(
+            screen.getByText(/permissionsList.header.condition/),
+        ).toBeInTheDocument();
+    });
+
+    it('routes the condition cell to the fallback slot when expanded', async () => {
+        const user = userEvent.setup();
+        const rows: IPermissionRow[] = [
+            {
+                permissionId: ROOT_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: ALLOW_FLAG,
+            },
+        ];
+        setPermissions({ data: rows, isLoading: false });
+
+        render(createTestComponent());
+
+        await user.click(
+            screen.getByRole('button', { name: /permissionsList.expandAll/ }),
+        );
+
+        expect(screen.getByText(/noConditionSlot.heading/)).toBeInTheDocument();
+    });
+
+    it('re-queries permissions with the selected linked account params on tab switch', async () => {
+        const user = userEvent.setup();
+        const linkedAccount: ILinkedAccountSummary = {
+            id: 'linked-1',
+            address: '0xLinkedAddress',
+            network: Network.POLYGON_MAINNET,
+            name: 'Linked Treasury',
+            description: '',
+            ens: null,
+            subdomain: null,
+            avatar: null,
+            metrics: generateDaoMetrics(),
+            links: [],
+            blockTimestamp: 0,
+            transactionHash: '',
+        };
+        setFeatureFlags(true);
+        setDao({
+            id: 'main-dao',
+            address: '0xMainAddress',
+            network: Network.ETHEREUM_MAINNET,
+            name: 'Main DAO',
+            linkedAccounts: [linkedAccount],
+        });
+
+        render(createTestComponent({ daoId: 'main-dao' }));
+
+        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                urlParams: {
+                    network: Network.ETHEREUM_MAINNET,
+                    daoAddress: '0xMainAddress',
+                },
+            }),
+            expect.anything(),
+        );
+
+        await user.click(screen.getByRole('tab', { name: 'Linked Treasury' }));
+
+        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                urlParams: {
+                    network: Network.POLYGON_MAINNET,
+                    daoAddress: '0xLinkedAddress',
+                },
+            }),
+            expect.anything(),
+        );
+    });
+});
diff --git a/src/modules/settings/components/permissionsList/permissionsList.tsx b/src/modules/settings/components/permissionsList/permissionsList.tsx
new file mode 100644
index 0000000000..031b9b9fc3
--- /dev/null
+++ b/src/modules/settings/components/permissionsList/permissionsList.tsx
@@ -0,0 +1,279 @@
+'use client';
+
+import {
+    Accordion,
+    Button,
+    CardEmptyState,
+    StateSkeletonBar,
+    Tabs,
+} from '@aragon/gov-ui-kit';
+import { useMemo, useState } from 'react';
+import {
+    type Network,
+    useAllDaoPermissions,
+    useDao,
+} from '@/shared/api/daoService';
+import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
+import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
+import { SettingsSlotId } from '../../constants/moduleSlots';
+import type { IPermissionRow } from '../../types';
+import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
+import { permissionEntityUtils } from '../../utils/permissionEntityUtils';
+import { NoConditionSlot } from '../noConditionSlot';
+
+export interface IPermissionsListProps {
+    /**
+     * ID of the DAO to display permissions for.
+     */
+    daoId: string;
+}
+
+interface IPermissionsAccount {
+    id: string;
+    name: string;
+    network: Network;
+    daoAddress: string;
+}
+
+const SKELETON_ROW_KEYS = [
+    'skeleton-1',
+    'skeleton-2',
+    'skeleton-3',
+    'skeleton-4',
+];
+
+const getRowKey = (row: IPermissionRow): string =>
+    `${row.permissionId}-${row.whoAddress}-${row.whereAddress}`;
+
+export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
+    const { daoId } = props;
+
+    const { t } = useTranslations();
+    const { isEnabled } = useFeatureFlags();
+
+    const { data: dao } = useDao({ urlParams: { id: daoId } });
+    const daoPlugins = useDaoPlugins({
+        daoId,
+        includeLinkedAccounts: true,
+    });
+
+    const accounts = useMemo<IPermissionsAccount[]>(() => {
+        if (dao == null) {
+            return [];
+        }
+
+        const mainAccount: IPermissionsAccount = {
+            id: dao.id,
+            name: dao.name,
+            network: dao.network,
+            daoAddress: dao.address,
+        };
+
+        const linkedAccounts = dao.linkedAccounts ?? [];
+        const showLinkedAccounts =
+            isEnabled('linkedAccount') && linkedAccounts.length > 0;
+
+        if (!showLinkedAccounts) {
+            return [mainAccount];
+        }
+
+        return [
+            mainAccount,
+            ...linkedAccounts.map((account) => ({
+                id: account.id,
+                name: account.name,
+                network: account.network,
+                daoAddress: account.address,
+            })),
+        ];
+    }, [dao, isEnabled]);
+
+    const [selectedAccountId, setSelectedAccountId] = useState<string>();
+    const activeAccountId = selectedAccountId ?? accounts[0]?.id;
+    const activeAccount =
+        accounts.find((account) => account.id === activeAccountId) ??
+        accounts[0];
+
+    const { data, isLoading } = useAllDaoPermissions(
+        {
+            urlParams: {
+                network: activeAccount?.network as Network,
+                daoAddress: activeAccount?.daoAddress ?? '',
+            },
+        },
+        { enabled: activeAccount != null },
+    );
+
+    // NOTE: the optional `condition` field is supplied by the preview mock until
+    // APP-953 formalizes it on the permissions response; cast at this boundary.
+    const rows = (data ?? []) as IPermissionRow[];
+
+    const [expandedRows, setExpandedRows] = useState<string[]>([]);
+    const allExpanded = rows.length > 0 && expandedRows.length === rows.length;
+
+    const handleToggleAll = () => {
+        setExpandedRows(allExpanded ? [] : rows.map(getRowKey));
+    };
+
+    const renderBody = () => {
+        if (isLoading) {
+            return <PermissionsListSkeleton />;
+        }
+
+        if (rows.length === 0) {
+            return (
+                <CardEmptyState
+                    description={t(
+                        'app.settings.permissionsList.empty.description',
+                    )}
+                    heading={t('app.settings.permissionsList.empty.heading')}
+                    objectIllustration={{ object: 'SETTINGS' }}
+                />
+            );
+        }
+
+        return (
+            <div className="flex flex-col gap-3">
+                <div className="flex justify-end">
+                    <Button
+                        onClick={handleToggleAll}
+                        size="sm"
+                        variant="tertiary"
+                    >
+                        {allExpanded
+                            ? t('app.settings.permissionsList.collapseAll')
+                            : t('app.settings.permissionsList.expandAll')}
+                    </Button>
+                </div>
+                <PermissionsListHeader />
+                <Accordion.Container
+                    isMulti={true}
+                    onValueChange={(value) => setExpandedRows(value ?? [])}
+                    value={expandedRows}
+                >
+                    {rows.map((row) => (
+                        <PermissionsListRow
+                            daoPlugins={daoPlugins}
+                            key={getRowKey(row)}
+                            row={row}
+                            rowKey={getRowKey(row)}
+                        />
+                    ))}
+                </Accordion.Container>
+            </div>
+        );
+    };
+
+    if (accounts.length <= 1) {
+        return renderBody();
+    }
+
+    return (
+        <Tabs.Root onValueChange={setSelectedAccountId} value={activeAccountId}>
+            <Tabs.List>
+                {accounts.map((account) => (
+                    <Tabs.Trigger
+                        key={account.id}
+                        label={account.name}
+                        value={account.id}
+                    />
+                ))}
+            </Tabs.List>
+            {accounts.map((account) => (
+                <Tabs.Content key={account.id} value={account.id}>
+                    {renderBody()}
+                </Tabs.Content>
+            ))}
+        </Tabs.Root>
+    );
+};
+
+type DaoPlugins = ReturnType<typeof useDaoPlugins>;
+
+interface IPermissionsListRowProps {
+    row: IPermissionRow;
+    rowKey: string;
+    daoPlugins: DaoPlugins;
+}
+
+const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
+    const { row, rowKey, daoPlugins } = props;
+
+    const who = permissionEntityUtils.resolvePermissionEntity(
+        row.whoAddress,
+        daoPlugins,
+    );
+    const where = permissionEntityUtils.resolvePermissionEntity(
+        row.whereAddress,
+        daoPlugins,
+    );
+    const permissionName = permissionNameUtils.getPermissionName(
+        row.permissionId,
+    );
+    const conditionType = conditionTypeUtils.resolveConditionType(
+        row.conditionAddress,
+        row.condition,
+    );
+
+    return (
+        <Accordion.Item value={rowKey}>
+            <Accordion.ItemHeader>
+                <div className="grid w-full grid-cols-3 gap-4 text-left">
+                    <span className="truncate text-neutral-800">
+                        {who.label}
+                    </span>
+                    <span className="truncate text-neutral-800">
+                        {where.label}
+                    </span>
+                    <span className="truncate text-neutral-800">
+                        {permissionName}
+                    </span>
+                </div>
+            </Accordion.ItemHeader>
+            <Accordion.ItemContent>
+                <PluginSingleComponent
+                    Fallback={NoConditionSlot}
+                    pluginId={conditionType}
+                    slotId={SettingsSlotId.PERMISSION_CONDITION}
+                    {...row.condition}
+                />
+            </Accordion.ItemContent>
+        </Accordion.Item>
+    );
+};
+
+const PermissionsListHeader: React.FC = () => {
+    const { t } = useTranslations();
+
+    return (
+        <div className="grid grid-cols-4 gap-4 px-4 text-neutral-500 text-sm">
+            <span>{t('app.settings.permissionsList.header.who')}</span>
+            <span>{t('app.settings.permissionsList.header.where')}</span>
+            <span>{t('app.settings.permissionsList.header.permission')}</span>
+            <span>{t('app.settings.permissionsList.header.condition')}</span>
+        </div>
+    );
+};
+
+const PermissionsListSkeleton: React.FC = () => (
+    <div
+        className="flex flex-col gap-3"
+        data-testid="permissions-list-skeleton"
+    >
+        <PermissionsListHeader />
+        {SKELETON_ROW_KEYS.map((rowKey) => (
+            <div
+                className="grid grid-cols-4 gap-4 rounded-xl border border-neutral-100 p-4"
+                key={rowKey}
+            >
+                <StateSkeletonBar width="70%" />
+                <StateSkeletonBar width="70%" />
+                <StateSkeletonBar width="70%" />
+                <StateSkeletonBar width="40%" />
+            </div>
+        ))}
+    </div>
+);
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
index a7c2dda814..1231927556 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -1,11 +1,12 @@
 'use client';
 
-import { CardEmptyState, Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
+import { Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
 import { useState } from 'react';
 import { useDao } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { daoUtils } from '@/shared/utils/daoUtils';
+import { PermissionsList } from '../../components/permissionsList';
 
 export interface IDaoPermissionsPageClientProps {
     /**
@@ -80,16 +81,7 @@ export const DaoPermissionsPageClient: React.FC<
                                 value="graph"
                             />
                         </ToggleGroup>
-                        {/* Placeholder for the permissions list mounted in T09. */}
-                        <CardEmptyState
-                            description={t(
-                                'app.settings.daoPermissionsPage.placeholder.description',
-                            )}
-                            heading={t(
-                                'app.settings.daoPermissionsPage.placeholder.heading',
-                            )}
-                            objectIllustration={{ object: 'SETTINGS' }}
-                        />
+                        {view === 'list' && <PermissionsList daoId={daoId} />}
                     </div>
                 </Page.Main>
             </Page.Content>

From 88476b216358cbe38f5d45f00a350270a3db83cc Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 12:21:55 +0200
Subject: [PATCH 10/29] feat: Use full permission dictionary with raw
 permission names

---
 .../permissionNameUtils.test.ts               |  29 +++-
 .../permissionNameUtils.ts                    | 150 +++++++++++++++---
 2 files changed, 150 insertions(+), 29 deletions(-)

diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
index 5261c789be..73f1347573 100644
--- a/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
@@ -6,27 +6,42 @@ describe('permissionNameUtils', () => {
             {
                 permissionId:
                     '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33',
-                expected: 'Root',
+                expected: 'ROOT_PERMISSION',
             },
             {
                 permissionId:
                     '0x8c433a4cd6b51969eca37f974940894297b9fcf4b282a213fea5cd8f85289c90',
-                expected: 'Create proposal',
+                expected: 'CREATE_PROPOSAL_PERMISSION',
             },
             {
                 permissionId:
                     '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d',
-                expected: 'Execute',
+                expected: 'EXECUTE_PERMISSION',
             },
             {
                 permissionId:
                     '0x821b6e3a557148015a918c89e5d092e878a69854a2d1a410635f771bd5a8a3f5',
-                expected: 'Upgrade plugin',
+                expected: 'UPGRADE_PLUGIN_PERMISSION',
             },
             {
                 permissionId:
                     '0x485a22b473de7ee3091c71c5ce05019fd1466a1650b1228784a9bcd5b7bed510',
-                expected: 'Manage selectors',
+                expected: 'MANAGE_SELECTORS_PERMISSION',
+            },
+            {
+                permissionId:
+                    '0xb737b436e6cc542520cb79ec04245c720c38eebfa56d9e2d99b043979db20e4c',
+                expected: 'MINT_PERMISSION',
+            },
+            {
+                permissionId:
+                    '0x595f29b9b81abb2cfafd1caa277c849a6317ded4aa7672cd5e076bacaf78ba3e',
+                expected: 'PAUSE_PERMISSION',
+            },
+            {
+                permissionId:
+                    '0x9c81fc3cf68d43a5ff1c09ddb652dc0e85041298a2c6bb91eec4ba1dabf138bb',
+                expected: 'BURN_PERMISSION',
             },
         ])('maps the known hash $permissionId to "$expected"', ({
             permissionId,
@@ -61,12 +76,12 @@ describe('permissionNameUtils', () => {
             {
                 permissionId:
                     '0x815FE80E4B37C8582A3B773D1D7071F983EACFD56B5965DB654F3087C25ADA33',
-                expected: 'Root',
+                expected: 'ROOT_PERMISSION',
             },
             {
                 permissionId:
                     '0xBF04B4486C9663D805744005C3DA000EDA93DE6E3308A4A7A812EB565327B78D',
-                expected: 'Execute',
+                expected: 'EXECUTE_PERMISSION',
             },
         ])('resolves known hashes case-insensitively for $permissionId', ({
             permissionId,
diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
index 9b4a002193..c9e1fc0d32 100644
--- a/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
@@ -3,43 +3,149 @@ import { keccak256, toBytes } from 'viem';
 const truncatedHashPrefixLength = 6;
 const truncatedHashSuffixLength = 4;
 
-const permissionFriendlyNames: Record<string, string> = {
-    ROOT_PERMISSION: 'Root',
-    CREATE_PROPOSAL_PERMISSION: 'Create proposal',
-    EXECUTE_PERMISSION: 'Execute',
-    UPGRADE_PLUGIN_PERMISSION: 'Upgrade plugin',
-    MANAGE_SELECTORS_PERMISSION: 'Manage selectors',
-};
+/**
+ * Canonical list of Aragon OSx, plugin, and AccessControl permission names.
+ *
+ * Mirrors the ticket's `permissions-dictionary.ts` seed (APP-954). Each entry is
+ * hashed with `keccak256(toBytes(name))` to build the hash → name lookup used by
+ * the permissions page.
+ */
+const permissionNames: string[] = [
+    // OSx DAO core
+    'ROOT_PERMISSION',
+    'EXECUTE_PERMISSION',
+    'UPGRADE_DAO_PERMISSION',
+    'SET_METADATA_PERMISSION',
+    'SET_TRUSTED_FORWARDER_PERMISSION',
+    'SET_SIGNATURE_VALIDATOR_PERMISSION',
+    'VALIDATE_SIGNATURE_PERMISSION',
+    'REGISTER_STANDARD_CALLBACK_PERMISSION',
+
+    // OSx plugin framework
+    'UPGRADE_PLUGIN_PERMISSION',
+    'MAINTAINER_PERMISSION',
+    'UPGRADE_REPO_PERMISSION',
+    'APPLY_INSTALLATION_PERMISSION',
+    'APPLY_UPDATE_PERMISSION',
+    'APPLY_UNINSTALLATION_PERMISSION',
+    'REGISTER_DAO_PERMISSION',
+    'REGISTER_ENS_SUBDOMAIN_PERMISSION',
+    'REGISTER_PLUGIN_REPO_PERMISSION',
+    'UPGRADE_REGISTRY_PERMISSION',
+    'UPGRADE_REGISTRAR_PERMISSION',
+
+    // Proposal lifecycle
+    'CREATE_PROPOSAL_PERMISSION',
+    'EXECUTE_PROPOSAL_PERMISSION',
+    'PROPOSER_PERMISSION',
+    'CANCEL_PERMISSION',
+    'ADVANCE_PERMISSION',
+    'EDIT_PERMISSION',
+
+    // Multisig
+    'UPDATE_MULTISIG_SETTINGS_PERMISSION',
+    'SET_SECONDARY_METADATA_PERMISSION',
+
+    // Token voting / majority voting
+    'UPDATE_VOTING_SETTINGS_PERMISSION',
+    'UPDATE_ADDRESSES_PERMISSION',
+    'UPDATE_PROPOSAL_VALIDATOR_PERMISSION',
+    'UPDATE_RULES_PERMISSION',
+    'UPDATE_SETTINGS_PERMISSION',
+
+    // Lock-to-vote
+    'LOCK_MANAGER_PERMISSION',
+
+    // Membership / Geo
+    'EDITOR_PERMISSION',
+    'MEMBER_PERMISSION',
+
+    // Optimistic governance / L2 veto / multichain voting
+    'UPDATE_OPTIMISTIC_GOVERNANCE_SETTINGS_PERMISSION',
+    'UPDATE_L2_VETO_RECEIVER_PERMISSION',
+    'SET_TRUSTED_L2_AGGREGATOR_PERMISSION',
+    'UPDATE_BRIDGE_SETTINGS_PERMISSION',
+
+    // Staged proposal processor (SPP)
+    'UPDATE_STAGES_PERMISSION',
+
+    // Signer list (delegation/attestation plugins)
+    'UPDATE_SIGNER_LIST_PERMISSION',
+    'UPDATE_SIGNER_LIST_SETTINGS_PERMISSION',
+
+    // Target / execution routing
+    'SET_TARGET_CONFIG_PERMISSION',
+    'AUTHORIZED_FUNC_PERMISSION',
+    'MANAGE_SELECTORS_PERMISSION',
+    'DISPATCH_PERMISSION',
+    'ID_GATED_ACTION_PERMISSION',
+
+    // Capital distribution / Merkle campaigns
+    'CAMPAIGN_MANAGER_PERMISSION',
+    'CHANGE_DISTRIBUTOR_PERMISSION',
+    'MERKLE_MINT_PERMISSION',
+
+    // ERC-20 / token
+    'MINT_PERMISSION',
+    'BURN_PERMISSION',
+
+    // Misc
+    'MANAGER_PERMISSION',
+    'REGISTER_PERMISSION',
+    'PREPARE_PERMISSION',
+    'STORE_PERMISSION',
+    'STORE_ACCOUNT_PERMISSION',
+    'STORE_NUMBER_PERMISSION',
+    'PAUSE_PERMISSION',
+    'GRANT_PERMISSION',
+    'GREET_PERMISSION',
+    'MULTIPLY_PERMISSION',
+    'DO_SOMETHING_PERMISSION',
+    'ADMIN_EXECUTE_PERMISSION',
+    'MOCK_PERMISSION',
+    'TEST_PERMISSION',
+    'TEST_PERMISSION_1',
+    'TEST_PERMISSION_2',
+
+    // OpenZeppelin AccessControl roles used by Aragon plugins
+    'SWEEPER_ROLE',
+    // Legacy aragonOS ACL roles
+    'CREATE_PERMISSIONS_ROLE',
+];
 
 class PermissionNameUtils {
-    // TODO(APP-954): replace/extend with the ticket-attached seed permission dictionary once the
-    // Linear attachment is merged. Until then we only resolve the generic protocol permission ids.
     private permissionNamesByHash: Record<string, string> = Object.fromEntries(
-        Object.entries(permissionFriendlyNames).map(
-            ([permissionId, friendlyName]) => [
-                keccak256(toBytes(permissionId)).toLowerCase(),
-                friendlyName,
-            ],
-        ),
+        permissionNames.map((name) => [
+            keccak256(toBytes(name)).toLowerCase(),
+            name,
+        ]),
     );
 
     /**
-     * Resolves a keccak256 permission-id hash to its friendly, human-readable name.
+     * Resolves a keccak256 permission-id hash to its raw permission name string.
      *
-     * @param permissionId The keccak256 hash of the permission identifier.
-     * @returns The mapped friendly name, or a truncated `0x1234…abcd` form of the hash when unknown.
+     * @param permissionId The keccak256 hash of the permission identifier. Matched
+     * case-insensitively and tolerant of a missing `0x` prefix.
+     * @returns The raw UPPER_SNAKE permission name (e.g. `ROOT_PERMISSION`), or a
+     * truncated `0x1234…abcd` form of the hash when unknown.
      */
     getPermissionName = (permissionId: string): string => {
-        const normalisedId = permissionId.toLowerCase();
-        const friendlyName = this.permissionNamesByHash[normalisedId];
+        const normalisedId = this.normaliseHash(permissionId);
+        const name = this.permissionNamesByHash[normalisedId];
 
-        if (friendlyName != null) {
-            return friendlyName;
+        if (name != null) {
+            return name;
         }
 
         return this.truncateHash(permissionId);
     };
 
+    private normaliseHash = (hash: string): string => {
+        const lowerCased = hash.toLowerCase();
+
+        return lowerCased.startsWith('0x') ? lowerCased : `0x${lowerCased}`;
+    };
+
     private truncateHash = (hash: string): string => {
         const prefix = hash.slice(0, truncatedHashPrefixLength);
         const suffix = hash.slice(-truncatedHashSuffixLength);

From d67435649e42fe50e49c6efe78f8277979ffe874 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 12:21:57 +0200
Subject: [PATCH 11/29] feat: Redesign permission rows with details and
 condition definition lists

---
 src/assets/locales/en.json                    |  25 ++-
 .../executeSelectorConditionSlot.test.tsx     |  30 ++--
 .../executeSelectorConditionSlot.tsx          |  79 +++++----
 .../noConditionSlot/noConditionSlot.tsx       |   2 +
 .../permissionsList/permissionsList.test.tsx  |  65 +++++++-
 .../permissionsList/permissionsList.tsx       | 153 ++++++++++++++++--
 .../votingPowerConditionSlot.test.tsx         |  28 +++-
 .../votingPowerConditionSlot.tsx              |  37 +++--
 .../daoPermissionsPageClient.tsx              |   1 -
 .../conditionTypeUtils.test.ts                |  40 +++++
 .../conditionTypeUtils/conditionTypeUtils.ts  |  51 ++++++
 11 files changed, 433 insertions(+), 78 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index c045311eeb..1238b247a1 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3498,7 +3498,7 @@
             "permissions": "Permissions"
           },
           "title": "Permissions",
-          "description": "Review who can do what across this DAO and its linked accounts"
+          "description": "All permissions configured in this DAO — who has access, to which contract, and under what conditions."
         },
         "view": {
           "list": "List",
@@ -3512,6 +3512,17 @@
           "permission": "Permission",
           "condition": "Condition"
         },
+        "details": {
+          "heading": "Details",
+          "who": "Who",
+          "where": "Where",
+          "permission": "Permission",
+          "condition": "Condition",
+          "noCondition": "No condition"
+        },
+        "condition": {
+          "heading": "Condition detail"
+        },
         "expandAll": "Expand all",
         "collapseAll": "Collapse all",
         "empty": {
@@ -3521,15 +3532,14 @@
       },
       "noConditionSlot": {
         "heading": "No condition",
-        "description": "Functions guarded by this permission can be called by the granted address unconditionally."
+        "description": "Functions guarded by this permission can be called by the granted address directly."
       },
       "votingPowerConditionSlot": {
-        "type": "Condition",
-        "details": "Details",
-        "pending": "Condition details pending (APP-953)"
+        "token": "Token",
+        "minVotingPower": "Minimum voting power"
       },
       "executeSelectorConditionSlot": {
-        "target": "Target",
+        "description": "The ExecuteSelectorCondition authorizes the caller to execute actions only on explicitly authorized contract functions.",
         "allowedActions": "Allowed actions",
         "noActions": "No allowed actions"
       },
@@ -3600,6 +3610,9 @@
           "daoAction": "Linked account",
           "governanceAction": "Process",
           "governanceInfoTitle": "Governance",
+          "permissionsAction": "View permissions",
+          "permissionsDescription": "Review who can do what across this DAO and its linked accounts, and any conditions on each grant.",
+          "permissionsInfoTitle": "Permissions",
           "settingsInfoTitle": "Account",
           "title": "Settings"
         }
diff --git a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
index 094cdc5ddf..5f018eb8d2 100644
--- a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
+++ b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.test.tsx
@@ -17,17 +17,24 @@ describe('<ExecuteSelectorConditionSlot /> component', () => {
         );
     };
 
-    it('renders the target and the list of allowed selectors from the payload', () => {
+    it('renders the description and the selectors mapped to their truncated targets', () => {
         render(
             createTestComponent({
-                target: '0xTarget',
-                selectors: ['0xaaaaaaaa', '0xbbbbbbbb'],
+                selectors: ['0xa9059cbb', '0x23b872dd'],
+                targets: [
+                    '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5',
+                    '0xDe0B295669a9FD93d5F28D9Ec85E40f4cb697BAe',
+                ],
             }),
         );
 
-        expect(screen.getByText('0xTarget')).toBeInTheDocument();
-        expect(screen.getByText('0xaaaaaaaa')).toBeInTheDocument();
-        expect(screen.getByText('0xbbbbbbbb')).toBeInTheDocument();
+        expect(
+            screen.getByText(/executeSelectorConditionSlot.description/),
+        ).toBeInTheDocument();
+        expect(screen.getByText('0xa9059cbb')).toBeInTheDocument();
+        expect(screen.getByText('0x0bA4…a2e5')).toBeInTheDocument();
+        expect(screen.getByText('0x23b872dd')).toBeInTheDocument();
+        expect(screen.getByText('0xDe0B…7BAe')).toBeInTheDocument();
     });
 
     it('shows the no allowed actions fallback when selectors are absent', () => {
@@ -40,9 +47,7 @@ describe('<ExecuteSelectorConditionSlot /> component', () => {
 
     it('ignores non-string selector entries when narrowing the payload', () => {
         render(
-            createTestComponent({
-                selectors: ['0xaaaaaaaa', 42, null, ''],
-            }),
+            createTestComponent({ selectors: ['0xaaaaaaaa', 42, null, ''] }),
         );
 
         expect(screen.getByText('0xaaaaaaaa')).toBeInTheDocument();
@@ -50,4 +55,11 @@ describe('<ExecuteSelectorConditionSlot /> component', () => {
             screen.queryByText(/executeSelectorConditionSlot.noActions/),
         ).not.toBeInTheDocument();
     });
+
+    it('renders a placeholder target when no matching target is provided', () => {
+        render(createTestComponent({ selectors: ['0xaaaaaaaa'], targets: [] }));
+
+        expect(screen.getByText('0xaaaaaaaa')).toBeInTheDocument();
+        expect(screen.getByText('—')).toBeInTheDocument();
+    });
 });
diff --git a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
index a0c1fa7acd..a0d65e6577 100644
--- a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
+++ b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
@@ -1,54 +1,67 @@
 'use client';
 
-import { DefinitionList } from '@aragon/gov-ui-kit';
+import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit';
 import type { IConditionData } from '@/modules/settings/types';
 import { useTranslations } from '@/shared/components/translationsProvider';
 
+const EMPTY_VALUE = '—';
+
+interface IAllowedAction {
+    selector: string;
+    target: string;
+}
+
 const isNonEmptyString = (value: unknown): value is string =>
     typeof value === 'string' && value.length > 0;
 
-const toSelectorList = (value: unknown): string[] => {
-    if (!Array.isArray(value)) {
-        return [];
-    }
+const toStringList = (value: unknown): string[] =>
+    Array.isArray(value) ? value.filter(isNonEmptyString) : [];
+
+const toAllowedActions = (
+    selectors: unknown,
+    targets: unknown,
+): IAllowedAction[] => {
+    const selectorList = toStringList(selectors);
+    const targetList = toStringList(targets);
 
-    return value.filter(isNonEmptyString);
+    return selectorList.map((selector, index) => ({
+        selector,
+        target: targetList[index] ?? EMPTY_VALUE,
+    }));
 };
 
 export const ExecuteSelectorConditionSlot: React.FC<IConditionData> = (
     props,
 ) => {
-    const { target, selectors } = props;
+    const { selectors, targets } = props;
     const { t } = useTranslations();
 
-    const targetLabel = isNonEmptyString(target) ? target : undefined;
-    const selectorList = toSelectorList(selectors);
-    const hasAllowedActions = selectorList.length > 0;
+    const allowedActions = toAllowedActions(selectors, targets);
+    const hasAllowedActions = allowedActions.length > 0;
 
     return (
-        <DefinitionList.Container>
-            {targetLabel != null && (
-                <DefinitionList.Item
-                    term={t('app.settings.executeSelectorConditionSlot.target')}
-                >
-                    {targetLabel}
-                </DefinitionList.Item>
+        <div className="flex flex-col gap-3">
+            <p className="text-neutral-500">
+                {t('app.settings.executeSelectorConditionSlot.description')}
+            </p>
+            {hasAllowedActions ? (
+                <DefinitionList.Container>
+                    {allowedActions.map((action) => (
+                        <DefinitionList.Item
+                            key={action.selector}
+                            term={action.selector}
+                        >
+                            {action.target === EMPTY_VALUE
+                                ? EMPTY_VALUE
+                                : addressUtils.truncateAddress(action.target)}
+                        </DefinitionList.Item>
+                    ))}
+                </DefinitionList.Container>
+            ) : (
+                <p className="text-neutral-400">
+                    {t('app.settings.executeSelectorConditionSlot.noActions')}
+                </p>
             )}
-            <DefinitionList.Item
-                term={t(
-                    'app.settings.executeSelectorConditionSlot.allowedActions',
-                )}
-            >
-                {hasAllowedActions ? (
-                    <ul>
-                        {selectorList.map((selector) => (
-                            <li key={selector}>{selector}</li>
-                        ))}
-                    </ul>
-                ) : (
-                    t('app.settings.executeSelectorConditionSlot.noActions')
-                )}
-            </DefinitionList.Item>
-        </DefinitionList.Container>
+        </div>
     );
 };
diff --git a/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx b/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx
index 19cadd0889..5890410b76 100644
--- a/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx
+++ b/src/modules/settings/components/noConditionSlot/noConditionSlot.tsx
@@ -3,6 +3,8 @@
 import { CardEmptyState } from '@aragon/gov-ui-kit';
 import { useTranslations } from '@/shared/components/translationsProvider';
 
+// Rendered as the PERMISSION_CONDITION fallback, so it must tolerate (and
+// ignore) any condition payload props forwarded by the slot.
 export const NoConditionSlot: React.FC = () => {
     const { t } = useTranslations();
 
diff --git a/src/modules/settings/components/permissionsList/permissionsList.test.tsx b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
index 483c3c7051..bdc1bb6682 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.test.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
@@ -15,6 +15,7 @@ import {
     generateReactQueryResultSuccess,
 } from '@/shared/testUtils';
 import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
+import { initialiseConditionRegistry } from '../../initConditionRegistry';
 import type { IPermissionRow } from '../../types';
 import { PermissionsList } from './permissionsList';
 
@@ -124,8 +125,8 @@ describe('<PermissionsList /> component', () => {
 
         render(createTestComponent());
 
-        expect(screen.getByText('Root')).toBeInTheDocument();
-        expect(screen.getByText('Execute')).toBeInTheDocument();
+        expect(screen.getByText('ROOT_PERMISSION')).toBeInTheDocument();
+        expect(screen.getByText('EXECUTE_PERMISSION')).toBeInTheDocument();
         expect(screen.getAllByText('Anyone').length).toBeGreaterThan(0);
         expect(screen.getAllByText('Any Address').length).toBeGreaterThan(0);
         expect(
@@ -133,6 +134,66 @@ describe('<PermissionsList /> component', () => {
         ).toBeInTheDocument();
     });
 
+    it('renders the collapsed CONDITION cell with the resolved label or a dash', () => {
+        const rows: IPermissionRow[] = [
+            {
+                permissionId: ROOT_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: ALLOW_FLAG,
+            },
+            {
+                permissionId: EXECUTE_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: '0xC0Ffee254729296a45a3885639AC7E10F9d54979',
+                condition: { conditionType: 'voting-power' },
+            },
+        ];
+        setPermissions({ data: rows, isLoading: false });
+
+        render(createTestComponent());
+
+        expect(screen.getByText('VotingPower')).toBeInTheDocument();
+        expect(screen.getByText('-')).toBeInTheDocument();
+    });
+
+    it('renders both the Details and Condition lists when a row is expanded', async () => {
+        initialiseConditionRegistry();
+        const user = userEvent.setup();
+        const rows: IPermissionRow[] = [
+            {
+                permissionId: EXECUTE_PERMISSION_ID,
+                whoAddress: ANY_ADDR,
+                whereAddress: ALLOW_FLAG,
+                conditionAddress: '0xC0Ffee254729296a45a3885639AC7E10F9d54979',
+                condition: {
+                    conditionType: 'voting-power',
+                    token: '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5',
+                    minVotingPower: '1000000000000000000',
+                },
+            },
+        ];
+        setPermissions({ data: rows, isLoading: false });
+
+        render(createTestComponent());
+
+        await user.click(
+            screen.getByRole('button', { name: /permissionsList.expandAll/ }),
+        );
+
+        expect(
+            screen.getByText(/permissionsList.details.heading/),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(/permissionsList.condition.heading/),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(/votingPowerConditionSlot.token/),
+        ).toBeInTheDocument();
+        expect(screen.getByText('1000000000000000000')).toBeInTheDocument();
+    });
+
     it('routes the condition cell to the fallback slot when expanded', async () => {
         const user = userEvent.setup();
         const rows: IPermissionRow[] = [
diff --git a/src/modules/settings/components/permissionsList/permissionsList.tsx b/src/modules/settings/components/permissionsList/permissionsList.tsx
index 031b9b9fc3..da6693d82c 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.tsx
@@ -2,10 +2,13 @@
 
 import {
     Accordion,
+    addressUtils,
     Button,
     CardEmptyState,
+    DefinitionList,
     StateSkeletonBar,
     Tabs,
+    Tag,
 } from '@aragon/gov-ui-kit';
 import { useMemo, useState } from 'react';
 import {
@@ -19,9 +22,13 @@ import { useTranslations } from '@/shared/components/translationsProvider';
 import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
 import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
 import { SettingsSlotId } from '../../constants/moduleSlots';
+import { ALLOW_FLAG } from '../../constants/permissionSentinels';
 import type { IPermissionRow } from '../../types';
 import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
-import { permissionEntityUtils } from '../../utils/permissionEntityUtils';
+import {
+    type IPermissionEntity,
+    permissionEntityUtils,
+} from '../../utils/permissionEntityUtils';
 import { NoConditionSlot } from '../noConditionSlot';
 
 export interface IPermissionsListProps {
@@ -199,9 +206,49 @@ interface IPermissionsListRowProps {
     daoPlugins: DaoPlugins;
 }
 
+interface IPermissionEntityCellProps {
+    entity: IPermissionEntity;
+}
+
+const PermissionEntityCell: React.FC<IPermissionEntityCellProps> = ({
+    entity,
+}) => (
+    <span className="flex min-w-0 items-center gap-2 text-neutral-800">
+        {entity.isSentinel && (
+            <span
+                aria-hidden="true"
+                className="size-6 shrink-0 rounded-full bg-neutral-100"
+            />
+        )}
+        <span className="truncate">{entity.label}</span>
+        {entity.tag != null && <Tag label={entity.tag} />}
+    </span>
+);
+
+interface IPermissionDetailValueProps {
+    primary: string;
+    secondary?: string;
+}
+
+const PermissionDetailValue: React.FC<IPermissionDetailValueProps> = ({
+    primary,
+    secondary,
+}) => (
+    <div className="flex flex-col gap-0.5">
+        <span className="text-neutral-500">{primary}</span>
+        {secondary != null && (
+            <span className="font-mono text-neutral-400 text-sm">
+                {secondary}
+            </span>
+        )}
+    </div>
+);
+
 const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
     const { row, rowKey, daoPlugins } = props;
 
+    const { t } = useTranslations();
+
     const who = permissionEntityUtils.resolvePermissionEntity(
         row.whoAddress,
         daoPlugins,
@@ -217,29 +264,107 @@ const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
         row.conditionAddress,
         row.condition,
     );
+    const conditionLabel = conditionTypeUtils.getConditionLabel(conditionType);
+
+    const hasCondition = !addressUtils.isAddressEqual(
+        row.conditionAddress,
+        ALLOW_FLAG,
+    );
+    const conditionDetail = hasCondition
+        ? addressUtils.truncateAddress(row.conditionAddress)
+        : t('app.settings.permissionsList.details.noCondition');
 
     return (
         <Accordion.Item value={rowKey}>
             <Accordion.ItemHeader>
-                <div className="grid w-full grid-cols-3 gap-4 text-left">
-                    <span className="truncate text-neutral-800">
-                        {who.label}
-                    </span>
-                    <span className="truncate text-neutral-800">
-                        {where.label}
+                <div className="grid w-full grid-cols-4 items-center gap-4 text-left">
+                    <PermissionEntityCell entity={who} />
+                    <PermissionEntityCell entity={where} />
+                    <span className="truncate font-mono text-neutral-800">
+                        {permissionName}
                     </span>
                     <span className="truncate text-neutral-800">
-                        {permissionName}
+                        {conditionLabel}
                     </span>
                 </div>
             </Accordion.ItemHeader>
             <Accordion.ItemContent>
-                <PluginSingleComponent
-                    Fallback={NoConditionSlot}
-                    pluginId={conditionType}
-                    slotId={SettingsSlotId.PERMISSION_CONDITION}
-                    {...row.condition}
-                />
+                <div className="flex flex-col gap-6 md:flex-row md:gap-8">
+                    <div className="flex flex-1 flex-col gap-3">
+                        <p className="text-lg text-neutral-800 leading-tight">
+                            {t('app.settings.permissionsList.details.heading')}
+                        </p>
+                        <DefinitionList.Container>
+                            <DefinitionList.Item
+                                copyValue={who.address}
+                                term={t(
+                                    'app.settings.permissionsList.details.who',
+                                )}
+                            >
+                                <PermissionDetailValue
+                                    primary={who.label}
+                                    secondary={addressUtils.truncateAddress(
+                                        who.address,
+                                    )}
+                                />
+                            </DefinitionList.Item>
+                            <DefinitionList.Item
+                                copyValue={where.address}
+                                term={t(
+                                    'app.settings.permissionsList.details.where',
+                                )}
+                            >
+                                <PermissionDetailValue
+                                    primary={where.label}
+                                    secondary={addressUtils.truncateAddress(
+                                        where.address,
+                                    )}
+                                />
+                            </DefinitionList.Item>
+                            <DefinitionList.Item
+                                copyValue={row.permissionId}
+                                term={t(
+                                    'app.settings.permissionsList.details.permission',
+                                )}
+                            >
+                                <PermissionDetailValue
+                                    primary={permissionName}
+                                    secondary={addressUtils.truncateHash(
+                                        row.permissionId,
+                                    )}
+                                />
+                            </DefinitionList.Item>
+                            <DefinitionList.Item
+                                copyValue={
+                                    hasCondition
+                                        ? row.conditionAddress
+                                        : undefined
+                                }
+                                term={t(
+                                    'app.settings.permissionsList.details.condition',
+                                )}
+                            >
+                                <PermissionDetailValue
+                                    primary={conditionLabel}
+                                    secondary={conditionDetail}
+                                />
+                            </DefinitionList.Item>
+                        </DefinitionList.Container>
+                    </div>
+                    <div className="flex flex-1 flex-col gap-3">
+                        <p className="text-lg text-neutral-800 leading-tight">
+                            {t(
+                                'app.settings.permissionsList.condition.heading',
+                            )}
+                        </p>
+                        <PluginSingleComponent
+                            Fallback={NoConditionSlot}
+                            pluginId={conditionType}
+                            slotId={SettingsSlotId.PERMISSION_CONDITION}
+                            {...row.condition}
+                        />
+                    </div>
+                </div>
             </Accordion.ItemContent>
         </Accordion.Item>
     );
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
index 788af250cc..548ff72583 100644
--- a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
@@ -17,12 +17,32 @@ describe('<VotingPowerConditionSlot /> component', () => {
         );
     };
 
-    it('renders the condition type and the pending placeholder copy', () => {
-        render(createTestComponent({ conditionType: 'voting-power' }));
+    it('renders the truncated token address and the minimum voting power', () => {
+        render(
+            createTestComponent({
+                token: '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5',
+                minVotingPower: '1000000000000000000',
+            }),
+        );
 
-        expect(screen.getByText('voting-power')).toBeInTheDocument();
         expect(
-            screen.getByText(/votingPowerConditionSlot.pending/),
+            screen.getByText(/votingPowerConditionSlot.token/),
+        ).toBeInTheDocument();
+        expect(screen.getByText('0x0bA4…a2e5')).toBeInTheDocument();
+        expect(
+            screen.getByText(/votingPowerConditionSlot.minVotingPower/),
         ).toBeInTheDocument();
+        expect(screen.getByText('1000000000000000000')).toBeInTheDocument();
+    });
+
+    it('falls back to a placeholder when payload fields are absent', () => {
+        render(
+            createTestComponent({
+                token: undefined,
+                minVotingPower: undefined,
+            }),
+        );
+
+        expect(screen.getAllByText('—')).toHaveLength(2);
     });
 });
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
index c2d9a934ff..4645b3ca0d 100644
--- a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
@@ -1,27 +1,46 @@
 'use client';
 
-import { DefinitionList } from '@aragon/gov-ui-kit';
+import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit';
 import type { IConditionData } from '@/modules/settings/types';
 import { useTranslations } from '@/shared/components/translationsProvider';
 
-// TODO(APP-953): wire the real VotingPower condition data source. The spike
-// confirmed no in-repo VotingPower payload exists yet, so this slot renders a
-// placeholder until the data source lands.
+const EMPTY_VALUE = '—';
+
+const isNonEmptyString = (value: unknown): value is string =>
+    typeof value === 'string' && value.length > 0;
+
+const resolveMinVotingPower = (value: unknown): string => {
+    if (isNonEmptyString(value)) {
+        return value;
+    }
+
+    if (typeof value === 'number' || typeof value === 'bigint') {
+        return value.toString();
+    }
+
+    return EMPTY_VALUE;
+};
+
 export const VotingPowerConditionSlot: React.FC<IConditionData> = (props) => {
-    const { conditionType } = props;
+    const { token, minVotingPower } = props;
     const { t } = useTranslations();
 
+    const tokenLabel = isNonEmptyString(token)
+        ? addressUtils.truncateAddress(token)
+        : EMPTY_VALUE;
+    const minVotingPowerLabel = resolveMinVotingPower(minVotingPower);
+
     return (
         <DefinitionList.Container>
             <DefinitionList.Item
-                term={t('app.settings.votingPowerConditionSlot.type')}
+                term={t('app.settings.votingPowerConditionSlot.token')}
             >
-                {conditionType}
+                {tokenLabel}
             </DefinitionList.Item>
             <DefinitionList.Item
-                term={t('app.settings.votingPowerConditionSlot.details')}
+                term={t('app.settings.votingPowerConditionSlot.minVotingPower')}
             >
-                {t('app.settings.votingPowerConditionSlot.pending')}
+                {minVotingPowerLabel}
             </DefinitionList.Item>
         </DefinitionList.Container>
     );
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
index 1231927556..a45ababad5 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -35,7 +35,6 @@ export const DaoPermissionsPageClient: React.FC<
         }
     };
 
-    // TODO(APP-954): confirm copy against Figma
     const pageBreadcrumbs = [
         {
             href: daoUtils.getDaoUrl(dao, 'settings'),
diff --git a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
index 9e3a2fa0cf..44d12f0fb3 100644
--- a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
+++ b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.test.ts
@@ -42,4 +42,44 @@ describe('conditionType Utils', () => {
             ).toBe(expected);
         });
     });
+
+    describe('getConditionLabel', () => {
+        it.each([
+            {
+                description: 'maps voting-power to VotingPower',
+                conditionType: 'voting-power',
+                expected: 'VotingPower',
+            },
+            {
+                description: 'maps execute-selector to ExecuteSelector',
+                conditionType: 'execute-selector',
+                expected: 'ExecuteSelector',
+            },
+            {
+                description: 'maps "none" to the empty placeholder',
+                conditionType: 'none',
+                expected: '-',
+            },
+            {
+                description: 'maps "unknown" to the empty placeholder',
+                conditionType: 'unknown',
+                expected: '-',
+            },
+            {
+                description: 'maps an empty string to the empty placeholder',
+                conditionType: '',
+                expected: '-',
+            },
+            {
+                description:
+                    'Pascal-cases an unrecognised but present condition type',
+                conditionType: 'merkle-claim',
+                expected: 'MerkleClaim',
+            },
+        ])('$description', ({ conditionType, expected }) => {
+            expect(conditionTypeUtils.getConditionLabel(conditionType)).toBe(
+                expected,
+            );
+        });
+    });
 });
diff --git a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
index 823539ebd1..8dc5e87f6b 100644
--- a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
+++ b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
@@ -13,6 +13,23 @@ const NO_CONDITION = 'none';
  */
 const UNKNOWN_CONDITION = 'unknown';
 
+/**
+ * Placeholder rendered for conditions that have no human-readable label
+ * (unconditional grants and unresolvable condition types).
+ */
+const NO_LABEL = '-';
+
+/**
+ * Explicit display labels for the known condition types. Any other non-empty
+ * type falls back to a Pascal-cased rendering of its discriminator.
+ */
+const CONDITION_LABELS: Record<string, string> = {
+    'voting-power': 'VotingPower',
+    'execute-selector': 'ExecuteSelector',
+};
+
+const WORD_SEPARATOR_REGEX = /[^a-z0-9]+/i;
+
 class ConditionTypeUtils {
     /**
      * Resolves the display condition type for a permission.
@@ -44,6 +61,40 @@ class ConditionTypeUtils {
 
         return UNKNOWN_CONDITION;
     };
+
+    /**
+     * Resolves a human-readable label for a condition type, used by the
+     * collapsed permission row's CONDITION cell.
+     *
+     * - `'none'` / `'unknown'` -> {@link NO_LABEL} (`'-'`).
+     * - a known type -> its explicit label (e.g. `'voting-power'` ->
+     *   `'VotingPower'`).
+     * - any other non-empty type -> a Pascal-cased fallback (e.g.
+     *   `'merkle-claim'` -> `'MerkleClaim'`).
+     *
+     * @param conditionType The resolved condition type discriminator.
+     * @returns The display label for the condition type.
+     */
+    getConditionLabel = (conditionType: string): string => {
+        if (
+            conditionType === NO_CONDITION ||
+            conditionType === UNKNOWN_CONDITION ||
+            conditionType.length === 0
+        ) {
+            return NO_LABEL;
+        }
+
+        return (
+            CONDITION_LABELS[conditionType] ?? this.toPascalCase(conditionType)
+        );
+    };
+
+    private toPascalCase = (value: string): string =>
+        value
+            .split(WORD_SEPARATOR_REGEX)
+            .filter((word) => word.length > 0)
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
 }
 
 export const conditionTypeUtils = new ConditionTypeUtils();

From 06e0cdd9520214ddb30229d283158cdd7ab12927 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 12:21:58 +0200
Subject: [PATCH 12/29] feat: Link to permissions page from DAO settings

---
 .../daoSettingsPage/daoSettingsPageClient.tsx | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx b/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
index afb9a0d895..9b39c26770 100644
--- a/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
+++ b/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { IconType } from '@aragon/gov-ui-kit';
+import { Button, IconType } from '@aragon/gov-ui-kit';
 import { useRouter } from 'next/navigation';
 import { GovernanceDialogId } from '@/modules/governance/constants/governanceDialogId';
 import { GovernanceSlotId } from '@/modules/governance/constants/moduleSlots';
@@ -210,6 +210,35 @@ export const DaoSettingsPageClient: React.FC<IDaoSettingsPageClientProps> = (
                         <DaoSettingsInfo dao={dao} />
                     )}
                 </Page.MainSection>
+                <Page.MainSection
+                    title={t(
+                        'app.settings.daoSettingsPage.main.permissionsInfoTitle',
+                    )}
+                >
+                    <div className="flex flex-col items-start gap-3">
+                        <p className="text-neutral-500">
+                            {t(
+                                'app.settings.daoSettingsPage.main.permissionsDescription',
+                            )}
+                        </p>
+                        <Button
+                            iconRight={IconType.CHEVRON_RIGHT}
+                            onClick={() =>
+                                router.push(
+                                    daoUtils.getDaoUrl(
+                                        dao,
+                                        'settings/permissions',
+                                    )!,
+                                )
+                            }
+                            variant="secondary"
+                        >
+                            {t(
+                                'app.settings.daoSettingsPage.main.permissionsAction',
+                            )}
+                        </Button>
+                    </div>
+                </Page.MainSection>
                 {hasSupportedPlugins && (
                     <Page.MainSection
                         action={

From 7b355896b936541d07add65b06da93264329200b Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 12:38:20 +0200
Subject: [PATCH 13/29] fix: Show plugin type tag for permission who and where
 entities

---
 .../permissionEntityUtils.test.ts                |  5 +++--
 .../permissionEntityUtils.ts                     | 16 +++++++++++-----
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
index 22b89d602d..8d10b661e5 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
@@ -20,6 +20,7 @@ describe('permissionEntity Utils', () => {
                 meta: {
                     address: pluginAddress,
                     name: 'Multisig',
+                    interfaceType: 'multisig',
                 } as IDaoPlugin,
                 props: {},
             },
@@ -46,12 +47,12 @@ describe('permissionEntity Utils', () => {
                 },
             },
             {
-                description: 'resolves a matching plugin address to its tag',
+                description: 'resolves a matching plugin to name + type tag',
                 address: pluginAddress,
                 expected: {
                     label: 'Multisig',
                     isSentinel: false,
-                    tag: 'Multisig',
+                    tag: 'MULTISIG',
                 },
             },
             {
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
index 6de42f62db..463bed49f8 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
@@ -15,7 +15,8 @@ export interface IPermissionEntity {
     label: string;
     /**
      * Short type tag for the entity when it can be classified (e.g. the plugin
-     * name). Undefined for plain addresses and sentinels.
+     * type such as `MULTISIG` / `SPP`). Undefined for plain addresses and
+     * sentinels.
      */
     tag?: string;
     /**
@@ -38,7 +39,8 @@ class PermissionEntityUtils {
      * Resolution order:
      * 1. {@link ANY_ADDR} sentinel -> "Anyone".
      * 2. {@link ALLOW_FLAG} sentinel -> "Any Address".
-     * 3. A matching installed DAO plugin -> the plugin name (as label and tag).
+     * 3. A matching installed DAO plugin -> the plugin name (label) plus its
+     *    interface type as an uppercase tag (e.g. `MULTISIG`).
      * 4. Otherwise -> the checksummed, truncated address.
      *
      * @param address - The `who` or `where` address to resolve.
@@ -63,11 +65,15 @@ class PermissionEntityUtils {
         );
 
         if (matchedPlugin != null) {
-            const pluginName = daoUtils.getPluginName(matchedPlugin.meta);
+            const { interfaceType } = matchedPlugin.meta;
 
             return {
-                label: pluginName,
-                tag: pluginName,
+                label: daoUtils.getPluginName(matchedPlugin.meta),
+                tag: interfaceType
+                    ? daoUtils
+                          .parsePluginInterfaceType(interfaceType)
+                          .toUpperCase()
+                    : undefined,
                 address,
                 isSentinel: false,
             };

From 1746cfbb4572e3abb6eb877a2c8ac1f1a612c56b Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 13:10:55 +0200
Subject: [PATCH 14/29] chore: Add changeset for permissions page

---
 .changeset/app-954-permissions-page.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/app-954-permissions-page.md

diff --git a/.changeset/app-954-permissions-page.md b/.changeset/app-954-permissions-page.md
new file mode 100644
index 0000000000..a37bfc6b35
--- /dev/null
+++ b/.changeset/app-954-permissions-page.md
@@ -0,0 +1,5 @@
+---
+"@aragon/app": patch
+---
+
+Add a permissions overview subpage to DAO settings (list view): linked-account tabs, permission rows (who/where/permission/condition) with expandable details and a per-condition slot system, plus a "Permissions" entry link on the settings page

From 124944506c758a0c0a854386a40f7002bf43a55b Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 13:19:42 +0200
Subject: [PATCH 15/29] chore: Document PERMISSION_CONDITION in generated slot
 docs

---
 docs/slots/_metrics.md       |  7 ++++---
 docs/slots/settings-slots.md |  3 ++-
 scripts/generateSlotDocs.mjs | 10 +++++++++-
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/docs/slots/_metrics.md b/docs/slots/_metrics.md
index f56e7f7a83..a4c7fdd6c1 100644
--- a/docs/slots/_metrics.md
+++ b/docs/slots/_metrics.md
@@ -8,8 +8,8 @@
 
 | Metric | Value |
 |---|---|
-| Total slots | 33 |
-| Registered plugins | 7 |
+| Total slots | 34 |
+| Registered plugins | 8 |
 | Unregistered slots | 4 |
 
 ## Slots Per Module
@@ -17,7 +17,7 @@
 | Module | Enum | Count |
 |---|---|---|
 | Governance | `GovernanceSlotId` | 20 |
-| Settings | `SettingsSlotId` | 4 |
+| Settings | `SettingsSlotId` | 5 |
 | Create DAO | `CreateDaoSlotId` | 5 |
 | Application | `ApplicationSlotId` | 1 |
 | Dashboard (DAO-level) | `DashboardDaoSlotId` | 1 |
@@ -34,6 +34,7 @@
 | SPP | 7 | 2 | - | - | 9 |
 | Capital Distributor | - | - | - | 1 | 1 |
 | Gauge Voter | - | - | - | 1 | 1 |
+| Condition registry | - | 2 | - | - | 2 |
 
 ## Unregistered Slots
 
diff --git a/docs/slots/settings-slots.md b/docs/slots/settings-slots.md
index 1c3b04761a..55c2230b57 100644
--- a/docs/slots/settings-slots.md
+++ b/docs/slots/settings-slots.md
@@ -5,7 +5,7 @@
 **Enum:** `SettingsSlotId`
 **Location:** `src/modules/settings/constants/moduleSlots.ts`
 
-The settings module defines 4 slots for plugin-specific governance settings, updates, and uninstallation.
+The settings module defines 5 slots for plugin-specific governance settings, updates, and uninstallation.
 
 | Slot ID | Type | Description | Registered By |
 |---|---|---|---|
@@ -13,3 +13,4 @@ The settings module defines 4 slots for plugin-specific governance settings, upd
 | `SETTINGS_BUILD_PREPARE_PLUGIN_UPDATE_DATA` | Function | Builds the transaction data for preparing a plugin update | Token Voting, Multisig, Lock To Vote |
 | `SETTINGS_GET_UNINSTALL_HELPERS` | Function | Returns helper data needed for uninstalling the plugin | Token Voting, Multisig, Lock To Vote, SPP |
 | `SETTINGS_PLUGIN_TO_FORM_DATA` | Function | Converts plugin settings to form-compatible data for the settings editor | Token Voting, Lock To Vote |
+| `PERMISSION_CONDITION` | Component | Renders the condition-specific detail for a permission grant (routed by condition type) | Condition registry |
diff --git a/scripts/generateSlotDocs.mjs b/scripts/generateSlotDocs.mjs
index 26cccc11c9..e462005840 100644
--- a/scripts/generateSlotDocs.mjs
+++ b/scripts/generateSlotDocs.mjs
@@ -90,6 +90,12 @@ const PLUGIN_SOURCES = [
         name: 'gaugeVoterPlugin',
         label: 'Gauge Voter',
     },
+    // Standalone condition registry (conditions are contracts, not plugins).
+    {
+        file: 'src/modules/settings/initConditionRegistry.ts',
+        name: 'conditionRegistry',
+        label: 'Condition registry',
+    },
 ];
 
 // Human-readable descriptions for slot IDs. Falls back to the ID itself if not listed.
@@ -141,6 +147,8 @@ const SLOT_DESCRIPTIONS = {
         'Converts plugin settings to form-compatible data for the settings editor',
     SETTINGS_GET_UNINSTALL_HELPERS:
         'Returns helper data needed for uninstalling the plugin',
+    PERMISSION_CONDITION:
+        'Renders the condition-specific detail for a permission grant (routed by condition type)',
     // Create DAO
     CREATE_DAO_BUILD_PREPARE_PLUGIN_INSTALL_DATA:
         'Builds the transaction data for installing the plugin during DAO creation',
@@ -309,7 +317,7 @@ function slotRegisteredBy(id) {
     if (!entry || entry.registeredBy.length === 0) {
         return '-';
     }
-    return entry.registeredBy.join(', ');
+    return [...new Set(entry.registeredBy)].join(', ');
 }
 
 function slotDescription(id) {

From 54b6f1f0f4bdd9b45fd2f6d8ef1f9f7330b5f02d Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Tue, 30 Jun 2026 23:21:54 +0200
Subject: [PATCH 16/29] feat: Show permissions entry as a DAO settings info row

---
 src/assets/locales/en.json                    |  6 ++--
 .../components/daoHierarchy/daoHierarchy.tsx  | 25 +++++++++++++--
 .../daoSettingsInfo/daoSettingsInfo.test.tsx  | 21 +++++++++++++
 .../daoSettingsInfo/daoSettingsInfo.tsx       | 11 +++++++
 .../daoSettingsPage/daoSettingsPageClient.tsx | 31 +------------------
 5 files changed, 58 insertions(+), 36 deletions(-)

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 1238b247a1..235d763581 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3595,6 +3595,9 @@
         "links": "Links",
         "name": "Name",
         "notChangeable": "Not changeable",
+        "permissions": "Permissions",
+        "permissionsDescription": "Get an overview of all permissions related to this account and its actors",
+        "permissionsLink": "View all permissions",
         "readLess": "Read less",
         "readMore": "Read more",
         "summary": "Summary",
@@ -3610,9 +3613,6 @@
           "daoAction": "Linked account",
           "governanceAction": "Process",
           "governanceInfoTitle": "Governance",
-          "permissionsAction": "View permissions",
-          "permissionsDescription": "Review who can do what across this DAO and its linked accounts, and any conditions on each grant.",
-          "permissionsInfoTitle": "Permissions",
           "settingsInfoTitle": "Account",
           "title": "Settings"
         }
diff --git a/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx b/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
index 40de8838fa..c926bcc6c1 100644
--- a/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
+++ b/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
@@ -14,6 +14,7 @@ import type { IDao, ILinkedAccountSummary } from '@/shared/api/daoService';
 import { DaoTypeTag } from '@/shared/components/daoTypeTag';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
+import { daoUtils } from '@/shared/utils/daoUtils';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 
 export interface IDaoHierarchyProps {
@@ -32,9 +33,14 @@ interface IDaoInfoProps {
      * DAO or linked account object.
      */
     dao: IDao | ILinkedAccountSummary;
+    /**
+     * Link to the permissions page. Only set for the main DAO so the entry
+     * renders once.
+     */
+    permissionsHref?: string;
 }
 
-const DaoInfo: React.FC<IDaoInfoProps> = ({ dao }) => {
+const DaoInfo: React.FC<IDaoInfoProps> = ({ dao, permissionsHref }) => {
     const { t } = useTranslations();
     const { id: chainId } = networkDefinitions[dao.network];
     const { buildEntityUrl } = useBlockExplorer({ chainId });
@@ -133,6 +139,17 @@ const DaoInfo: React.FC<IDaoInfoProps> = ({ dao }) => {
                     </div>
                 </DefinitionList.Item>
             )}
+            {permissionsHref != null && (
+                <DefinitionList.Item
+                    description={t(
+                        'app.settings.daoSettingsInfo.permissionsDescription',
+                    )}
+                    link={{ href: permissionsHref }}
+                    term={t('app.settings.daoSettingsInfo.permissions')}
+                >
+                    {t('app.settings.daoSettingsInfo.permissionsLink')}
+                </DefinitionList.Item>
+            )}
         </DefinitionList.Container>
     );
 };
@@ -147,6 +164,8 @@ export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
     const getDaoAvatar = (d: IDao | ILinkedAccountSummary) =>
         ipfsUtils.cidToSrc(d.avatar);
 
+    const permissionsHref = daoUtils.getDaoUrl(dao, 'settings/permissions');
+
     // If viewing main DAO with linked accounts, show accordion structure
     if (isViewingMainDao && hasLinkedAccounts) {
         return (
@@ -168,7 +187,7 @@ export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
                         </div>
                     </Accordion.ItemHeader>
                     <Accordion.ItemContent>
-                        <DaoInfo dao={dao} />
+                        <DaoInfo dao={dao} permissionsHref={permissionsHref} />
                     </Accordion.ItemContent>
                 </Accordion.Item>
                 {dao.linkedAccounts?.map((linkedAccount) => (
@@ -203,7 +222,7 @@ export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
     // Default: regular view for main DAO without linked accounts or when viewing a linked account
     return (
         <Card className="p-6">
-            <DaoInfo dao={dao} />
+            <DaoInfo dao={dao} permissionsHref={permissionsHref} />
         </Card>
     );
 };
diff --git a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
index 1134b7175c..603e1197ba 100644
--- a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
+++ b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
@@ -58,6 +58,27 @@ describe('<DaoSettingsInfo /> component', () => {
         expect(screen.getByText(/daoSettingsInfo.links/)).toBeInTheDocument();
     });
 
+    it('renders the permissions link to the permissions page', () => {
+        const dao = generateDao({
+            address: '0x123',
+            ens: 'somedao.dao.eth',
+            network: Network.ETHEREUM_MAINNET,
+        });
+        render(createTestComponent({ dao }));
+
+        expect(
+            screen.getByText(/daoSettingsInfo.permissionsLink/),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByRole('link', {
+                name: /daoSettingsInfo.permissionsLink/,
+            }),
+        ).toHaveAttribute(
+            'href',
+            '/dao/ethereum-mainnet/somedao.dao.eth/settings/permissions',
+        );
+    });
+
     it('renders the correct definition values of the dao', () => {
         const dao = generateDao({
             name: 'Some DAO',
diff --git a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
index 5a854607ba..9f714e6a74 100644
--- a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
+++ b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
@@ -111,6 +111,17 @@ export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
                         </div>
                     </DefinitionList.Item>
                 )}
+                <DefinitionList.Item
+                    description={t(
+                        'app.settings.daoSettingsInfo.permissionsDescription',
+                    )}
+                    link={{
+                        href: daoUtils.getDaoUrl(dao, 'settings/permissions'),
+                    }}
+                    term={t('app.settings.daoSettingsInfo.permissions')}
+                >
+                    {t('app.settings.daoSettingsInfo.permissionsLink')}
+                </DefinitionList.Item>
             </DefinitionList.Container>
         </Card>
     );
diff --git a/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx b/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
index 9b39c26770..afb9a0d895 100644
--- a/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
+++ b/src/modules/settings/pages/daoSettingsPage/daoSettingsPageClient.tsx
@@ -1,6 +1,6 @@
 'use client';
 
-import { Button, IconType } from '@aragon/gov-ui-kit';
+import { IconType } from '@aragon/gov-ui-kit';
 import { useRouter } from 'next/navigation';
 import { GovernanceDialogId } from '@/modules/governance/constants/governanceDialogId';
 import { GovernanceSlotId } from '@/modules/governance/constants/moduleSlots';
@@ -210,35 +210,6 @@ export const DaoSettingsPageClient: React.FC<IDaoSettingsPageClientProps> = (
                         <DaoSettingsInfo dao={dao} />
                     )}
                 </Page.MainSection>
-                <Page.MainSection
-                    title={t(
-                        'app.settings.daoSettingsPage.main.permissionsInfoTitle',
-                    )}
-                >
-                    <div className="flex flex-col items-start gap-3">
-                        <p className="text-neutral-500">
-                            {t(
-                                'app.settings.daoSettingsPage.main.permissionsDescription',
-                            )}
-                        </p>
-                        <Button
-                            iconRight={IconType.CHEVRON_RIGHT}
-                            onClick={() =>
-                                router.push(
-                                    daoUtils.getDaoUrl(
-                                        dao,
-                                        'settings/permissions',
-                                    )!,
-                                )
-                            }
-                            variant="secondary"
-                        >
-                            {t(
-                                'app.settings.daoSettingsPage.main.permissionsAction',
-                            )}
-                        </Button>
-                    </div>
-                </Page.MainSection>
                 {hasSupportedPlugins && (
                     <Page.MainSection
                         action={

From e3833a1c9761732b31ec3e21f783592a604fe559 Mon Sep 17 00:00:00 2001
From: ccir <harryburger105@gmail.com>
Date: Wed, 1 Jul 2026 11:30:31 +0545
Subject: [PATCH 17/29] feat: Add MembershipConditionSlot component for
 multisig membership checks

---
 src/assets/locales/en.json                    |  5 +++
 .../membershipConditionSlot/index.ts          |  1 +
 .../membershipConditionSlot.test.tsx          | 38 ++++++++++++++++++
 .../membershipConditionSlot.tsx               | 39 +++++++++++++++++++
 .../settings/initConditionRegistry.test.ts    |  2 +
 src/modules/settings/initConditionRegistry.ts |  6 +++
 6 files changed, 91 insertions(+)
 create mode 100644 src/modules/settings/components/membershipConditionSlot/index.ts
 create mode 100644 src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.test.tsx
 create mode 100644 src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.tsx

diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index 235d763581..d7cb5fc081 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3543,6 +3543,11 @@
         "allowedActions": "Allowed actions",
         "noActions": "No allowed actions"
       },
+      "membershipConditionSlot": {
+        "memberOfMultisig": "Member of multisig",
+        "true": "True",
+        "false": "False"
+      },
       "daoPolicyDetailsPage": {
         "error": {
           "action": "Explore settings",
diff --git a/src/modules/settings/components/membershipConditionSlot/index.ts b/src/modules/settings/components/membershipConditionSlot/index.ts
new file mode 100644
index 0000000000..c4782e1376
--- /dev/null
+++ b/src/modules/settings/components/membershipConditionSlot/index.ts
@@ -0,0 +1 @@
+export { MembershipConditionSlot } from './membershipConditionSlot';
diff --git a/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.test.tsx b/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.test.tsx
new file mode 100644
index 0000000000..7fa42cdaa8
--- /dev/null
+++ b/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.test.tsx
@@ -0,0 +1,38 @@
+import { GukModulesProvider } from '@aragon/gov-ui-kit';
+import { render, screen } from '@testing-library/react';
+import type { IConditionData } from '@/modules/settings/types';
+import { MembershipConditionSlot } from './membershipConditionSlot';
+
+describe('<MembershipConditionSlot /> component', () => {
+    const createTestComponent = (props?: Partial<IConditionData>) => {
+        const completeProps: IConditionData = {
+            conditionType: 'membership',
+            ...props,
+        };
+
+        return (
+            <GukModulesProvider>
+                <MembershipConditionSlot {...completeProps} />
+            </GukModulesProvider>
+        );
+    };
+
+    it('renders "true" when the multisig gates proposal creation to members', () => {
+        render(createTestComponent({ onlyListed: true }));
+
+        expect(
+            screen.getByText(/membershipConditionSlot.memberOfMultisig/),
+        ).toBeInTheDocument();
+        expect(
+            screen.getByText(/membershipConditionSlot.true/),
+        ).toBeInTheDocument();
+    });
+
+    it('renders "false" when membership is not enforced', () => {
+        render(createTestComponent({ onlyListed: false }));
+
+        expect(
+            screen.getByText(/membershipConditionSlot.false/),
+        ).toBeInTheDocument();
+    });
+});
diff --git a/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.tsx b/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.tsx
new file mode 100644
index 0000000000..408a8726e3
--- /dev/null
+++ b/src/modules/settings/components/membershipConditionSlot/membershipConditionSlot.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import { DefinitionList, Tag } from '@aragon/gov-ui-kit';
+import type { IConditionData } from '@/modules/settings/types';
+import { useTranslations } from '@/shared/components/translationsProvider';
+
+/**
+ * Renders the detail for a multisig `membership` condition (ListedCheckCondition).
+ * The condition only gates proposal creation to listed members when the multisig
+ * `onlyListed` setting is enabled, so that boolean is surfaced as
+ * "Member of multisig".
+ */
+export const MembershipConditionSlot: React.FC<IConditionData> = (props) => {
+    const { onlyListed } = props;
+    const { t } = useTranslations();
+
+    const isMemberGated = onlyListed === true;
+
+    return (
+        <DefinitionList.Container>
+            <DefinitionList.Item
+                term={t(
+                    'app.settings.membershipConditionSlot.memberOfMultisig',
+                )}
+            >
+                <span className="flex">
+                    <Tag
+                        label={t(
+                            isMemberGated
+                                ? 'app.settings.membershipConditionSlot.true'
+                                : 'app.settings.membershipConditionSlot.false',
+                        )}
+                        variant="primary"
+                    />
+                </span>
+            </DefinitionList.Item>
+        </DefinitionList.Container>
+    );
+};
diff --git a/src/modules/settings/initConditionRegistry.test.ts b/src/modules/settings/initConditionRegistry.test.ts
index 5bead2e759..5edae60a45 100644
--- a/src/modules/settings/initConditionRegistry.test.ts
+++ b/src/modules/settings/initConditionRegistry.test.ts
@@ -1,6 +1,7 @@
 import { SettingsSlotId } from '@/modules/settings/constants/moduleSlots';
 import { pluginRegistryUtils } from '@/shared/utils/pluginRegistryUtils';
 import { ExecuteSelectorConditionSlot } from './components/executeSelectorConditionSlot';
+import { MembershipConditionSlot } from './components/membershipConditionSlot';
 import { NoConditionSlot } from './components/noConditionSlot';
 import { VotingPowerConditionSlot } from './components/votingPowerConditionSlot';
 import { initialiseConditionRegistry } from './initConditionRegistry';
@@ -16,6 +17,7 @@ describe('initialiseConditionRegistry', () => {
             pluginId: 'execute-selector',
             component: ExecuteSelectorConditionSlot,
         },
+        { pluginId: 'membership', component: MembershipConditionSlot },
     ])('resolves the $pluginId condition component from the slot', ({
         pluginId,
         component,
diff --git a/src/modules/settings/initConditionRegistry.ts b/src/modules/settings/initConditionRegistry.ts
index 141c699ebc..798409b7c8 100644
--- a/src/modules/settings/initConditionRegistry.ts
+++ b/src/modules/settings/initConditionRegistry.ts
@@ -1,6 +1,7 @@
 import { SettingsSlotId } from '@/modules/settings/constants/moduleSlots';
 import { pluginRegistryUtils } from '@/shared/utils/pluginRegistryUtils';
 import { ExecuteSelectorConditionSlot } from './components/executeSelectorConditionSlot';
+import { MembershipConditionSlot } from './components/membershipConditionSlot';
 import { VotingPowerConditionSlot } from './components/votingPowerConditionSlot';
 
 /**
@@ -24,5 +25,10 @@ export const initialiseConditionRegistry = () => {
             slotId: SettingsSlotId.PERMISSION_CONDITION,
             pluginId: 'execute-selector',
             component: ExecuteSelectorConditionSlot,
+        })
+        .registerSlotComponent({
+            slotId: SettingsSlotId.PERMISSION_CONDITION,
+            pluginId: 'membership',
+            component: MembershipConditionSlot,
         });
 };

From 6fb67b6d872b67e880cf9be9a9bfdf4eb021cf86 Mon Sep 17 00:00:00 2001
From: ccir <harryburger105@gmail.com>
Date: Wed, 1 Jul 2026 11:37:17 +0545
Subject: [PATCH 18/29] fix: Update Condition registry metrics to reflect
 accurate counts

---
 docs/slots/_metrics.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/slots/_metrics.md b/docs/slots/_metrics.md
index a4c7fdd6c1..d61cfbe6db 100644
--- a/docs/slots/_metrics.md
+++ b/docs/slots/_metrics.md
@@ -34,7 +34,7 @@
 | SPP | 7 | 2 | - | - | 9 |
 | Capital Distributor | - | - | - | 1 | 1 |
 | Gauge Voter | - | - | - | 1 | 1 |
-| Condition registry | - | 2 | - | - | 2 |
+| Condition registry | - | 3 | - | - | 3 |
 
 ## Unregistered Slots
 

From ebca8a8b3ba5679bf8b5d9e4bcbdd3fb99f187b0 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Wed, 1 Jul 2026 21:25:57 +0200
Subject: [PATCH 19/29] feat: Add permissions graph view for DAO settings

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                | 162 +++++++++++
 src/assets/locales/en.json                    |  22 ++
 .../components/permissionsGraph/index.ts      |   8 +
 .../permissionsGraph/permissionDetailNode.tsx | 163 +++++++++++
 .../permissionsGraph/permissionGraphEdge.tsx  |  87 ++++++
 .../permissionsGraph/permissionGraphNode.tsx  | 107 +++++++
 .../permissionsGraph/permissionsGraph.tsx     | 162 +++++++++++
 .../permissionsGraphCanvas.tsx                | 264 ++++++++++++++++++
 .../daoPermissionsPageClient.tsx              |  32 ++-
 src/modules/settings/types/index.ts           |   6 +
 src/modules/settings/types/permissionGraph.ts |  89 ++++++
 .../buildPermissionGraph.test.ts              | 209 ++++++++++++++
 .../buildPermissionGraph.ts                   | 139 +++++++++
 .../utils/buildPermissionGraph/index.ts       |   4 +
 .../utils/permissionGraphLayout/index.ts      |   5 +
 .../permissionGraphLayout.test.ts             |  57 ++++
 .../permissionGraphLayout.ts                  |  81 ++++++
 src/test/setup.ts                             |   8 +
 19 files changed, 1599 insertions(+), 8 deletions(-)
 create mode 100644 src/modules/settings/components/permissionsGraph/index.ts
 create mode 100644 src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
 create mode 100644 src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
 create mode 100644 src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
 create mode 100644 src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
 create mode 100644 src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
 create mode 100644 src/modules/settings/types/permissionGraph.ts
 create mode 100644 src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.test.ts
 create mode 100644 src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.ts
 create mode 100644 src/modules/settings/utils/buildPermissionGraph/index.ts
 create mode 100644 src/modules/settings/utils/permissionGraphLayout/index.ts
 create mode 100644 src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.test.ts
 create mode 100644 src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts

diff --git a/package.json b/package.json
index 2a20c669c7..198c2203fb 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
   },
   "dependencies": {
     "@aragon/gov-ui-kit": "^2.8.0",
+    "@dagrejs/dagre": "^3.0.0",
     "@floating-ui/react": "^0.27.19",
     "@number-flow/react": "^0.6.0",
     "@radix-ui/react-dialog": "^1.1.17",
@@ -50,6 +51,7 @@
     "@tanstack/react-query-devtools": "^5.101.0",
     "@walletconnect/core": "^2.23.9",
     "@walletconnect/utils": "^2.23.9",
+    "@xyflow/react": "^12.11.1",
     "classnames": "^2.5.1",
     "deepmerge-ts": "^7.1.5",
     "framer-motion": "^12.40.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ce7850d69a..4767e293af 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -35,6 +35,9 @@ importers:
       '@aragon/gov-ui-kit':
         specifier: ^2.8.0
         version: 2.8.0(@emotion/is-prop-valid@1.4.0)(@floating-ui/dom@1.7.6)(@tailwindcss/typography@0.5.20(tailwindcss@4.3.1))(@tanstack/react-query@5.101.0(react@19.2.7))(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.7(react@19.2.7))(react-hook-form@7.79.0(react@19.2.7))(react@19.2.7)(tailwindcss@4.3.1)(viem@2.52.2(typescript@5.9.3)(zod@3.25.76))(wagmi@3.6.17(@coinbase/wallet-sdk@4.3.6(@types/react@19.2.17)(immer@11.1.8)(react@19.2.7)(typescript@5.9.3)(use-sync-external-store@1.6.0(react@19.2.7))(zod@3.25.76))(@safe-global/safe-apps-provider@0.18.6(typescript@5.9.3)(zod@3.25.76))(@safe-global/safe-apps-sdk@9.1.0(typescript@5.9.3)(zod@3.25.76))(@tanstack/query-core@5.101.0)(@tanstack/react-query@5.101.0(react@19.2.7))(@types/react@19.2.17)(immer@11.1.8)(react@19.2.7)(typescript@5.9.3)(viem@2.52.2(typescript@5.9.3)(zod@3.25.76)))
+      '@dagrejs/dagre':
+        specifier: ^3.0.0
+        version: 3.0.0
       '@floating-ui/react':
         specifier: ^0.27.19
         version: 0.27.19(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
@@ -74,6 +77,9 @@ importers:
       '@walletconnect/utils':
         specifier: ^2.23.9
         version: 2.23.9(@vercel/blob@2.3.0)(typescript@5.9.3)(zod@3.25.76)
+      '@xyflow/react':
+        specifier: ^12.11.1
+        version: 12.11.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)
       classnames:
         specifier: ^2.5.1
         version: 2.5.1
@@ -668,6 +674,12 @@ packages:
     resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
     engines: {node: '>=20.19.0'}
 
+  '@dagrejs/dagre@3.0.0':
+    resolution: {integrity: sha512-ZzhnTy1rfuoew9Ez3EIw4L2znPGnYYhfn8vc9c4oB8iw6QAsszbiU0vRhlxWPFnmmNSFAkrYeF1PhM5m4lAN0Q==}
+
+  '@dagrejs/graphlib@4.0.1':
+    resolution: {integrity: sha512-IvcV6FduIIAmLwnH+yun+QtV36SC7mERqa86aClNqmMN09WhmPPYU8ckHrZBozErf+UvHPWOTJYaGYiIcs0DgA==}
+
   '@depay/solana-web3.js@1.98.3':
     resolution: {integrity: sha512-wxr+2gpjKRZ1eVBLhQYJxImDsRukk0DvCsEElkTMyybP+7SamWRs48o3DYE6VLEgQJFZgOoUec3t5FM5s1J1ww==}
 
@@ -3383,6 +3395,9 @@ packages:
   '@types/d3-color@3.1.3':
     resolution: {integrity: sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==}
 
+  '@types/d3-drag@3.0.7':
+    resolution: {integrity: sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==}
+
   '@types/d3-ease@3.0.2':
     resolution: {integrity: sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==}
 
@@ -3395,6 +3410,9 @@ packages:
   '@types/d3-scale@4.0.9':
     resolution: {integrity: sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==}
 
+  '@types/d3-selection@3.0.11':
+    resolution: {integrity: sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==}
+
   '@types/d3-shape@3.1.8':
     resolution: {integrity: sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==}
 
@@ -3404,6 +3422,12 @@ packages:
   '@types/d3-timer@3.0.2':
     resolution: {integrity: sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==}
 
+  '@types/d3-transition@3.0.9':
+    resolution: {integrity: sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==}
+
+  '@types/d3-zoom@3.0.8':
+    resolution: {integrity: sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==}
+
   '@types/estree@1.0.9':
     resolution: {integrity: sha512-GhdPgy1el4/ImP05X05Uw4cw2/M93BCUmnEvWZNStlCzEKME4Fkk+YpoA5OiHNQmoS7Cafb8Xa3Pya8m1Qrzeg==}
 
@@ -3921,6 +3945,22 @@ packages:
   '@xtuc/long@4.2.2':
     resolution: {integrity: sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==}
 
+  '@xyflow/react@12.11.1':
+    resolution: {integrity: sha512-L+zBoLGSXham0MnlY8QqjfR7/C5JNw0zxkaey5aZ5XmCgJBAdH4+WRIu8CR40d3l/BdU635V6YbhBK1jMo8/6Q==}
+    peerDependencies:
+      '@types/react': '>=17'
+      '@types/react-dom': '>=17'
+      react: '>=17'
+      react-dom: '>=17'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+
+  '@xyflow/system@0.0.78':
+    resolution: {integrity: sha512-lY0z2qP33fUhTva9Vaxrk0lqZta2pkbxB1trHAx1omnJqRtPvDlAQYV2r5fhS6AdpkulYmbNW0svy+A4/t4B/g==}
+
   '@yarnpkg/parsers@3.0.3':
     resolution: {integrity: sha512-mQZgUSgFurUtA07ceMjxrWkYz8QtDuYkvPlu0ZqncgjopQ0t6CNEo/OSealkmnagSUx8ZD5ewvezUwUuMqutQg==}
     engines: {node: '>=18.12.0'}
@@ -4374,6 +4414,9 @@ packages:
   cjs-module-lexer@2.2.0:
     resolution: {integrity: sha512-4bHTS2YuzUvtoLjdy+98ykbNB5jS0+07EvFNXerqZQJ89F7DI6ET7OQo/HJuW6K0aVsKA9hj9/RVb2kQVOrPDQ==}
 
+  classcat@5.0.5:
+    resolution: {integrity: sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==}
+
   classnames@2.5.1:
     resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
 
@@ -4531,6 +4574,14 @@ packages:
     resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
     engines: {node: '>=12'}
 
+  d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+
+  d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+
   d3-ease@3.0.1:
     resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
     engines: {node: '>=12'}
@@ -4551,6 +4602,10 @@ packages:
     resolution: {integrity: sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==}
     engines: {node: '>=12'}
 
+  d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+
   d3-shape@3.2.0:
     resolution: {integrity: sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==}
     engines: {node: '>=12'}
@@ -4567,6 +4622,16 @@ packages:
     resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
     engines: {node: '>=12'}
 
+  d3-transition@3.0.1:
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+
+  d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+
   data-uri-to-buffer@6.0.2:
     resolution: {integrity: sha512-7hvf7/GW8e86rW0ptuwS3OcBGDjIi6SZva7hCyWC0yYry2cOPmLIjXAUHI6DK2HsnwJd9ifmt57i8eV2n4YNpw==}
     engines: {node: '>= 14'}
@@ -7729,6 +7794,21 @@ packages:
   zod@4.4.3:
     resolution: {integrity: sha512-ytENFjIJFl2UwYglde2jchW2Hwm4GJFLDiSXWdTrJQBIN9Fcyp7n4DhxJEiWNAJMV1/BqWfW/kkg71UDcHJyTQ==}
 
+  zustand@4.5.7:
+    resolution: {integrity: sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==}
+    engines: {node: '>=12.7.0'}
+    peerDependencies:
+      '@types/react': '>=16.8'
+      immer: '>=9.0.6'
+      react: '>=16.8'
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      immer:
+        optional: true
+      react:
+        optional: true
+
   zustand@5.0.0:
     resolution: {integrity: sha512-LE+VcmbartOPM+auOjCCLQOsQ05zUTp8RkgwRzefUk+2jISdMMFnxvyTjA4YNWr5ZGXYbVsEMZosttuxUBkojQ==}
     engines: {node: '>=12.20.0'}
@@ -8364,6 +8444,12 @@ snapshots:
 
   '@csstools/css-tokenizer@4.0.0': {}
 
+  '@dagrejs/dagre@3.0.0':
+    dependencies:
+      '@dagrejs/graphlib': 4.0.1
+
+  '@dagrejs/graphlib@4.0.1': {}
+
   '@depay/solana-web3.js@1.98.3':
     dependencies:
       bs58: 5.0.0
@@ -11619,6 +11705,10 @@ snapshots:
 
   '@types/d3-color@3.1.3': {}
 
+  '@types/d3-drag@3.0.7':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
   '@types/d3-ease@3.0.2': {}
 
   '@types/d3-interpolate@3.0.4':
@@ -11631,6 +11721,8 @@ snapshots:
     dependencies:
       '@types/d3-time': 3.0.4
 
+  '@types/d3-selection@3.0.11': {}
+
   '@types/d3-shape@3.1.8':
     dependencies:
       '@types/d3-path': 3.1.1
@@ -11639,6 +11731,15 @@ snapshots:
 
   '@types/d3-timer@3.0.2': {}
 
+  '@types/d3-transition@3.0.9':
+    dependencies:
+      '@types/d3-selection': 3.0.11
+
+  '@types/d3-zoom@3.0.8':
+    dependencies:
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+
   '@types/estree@1.0.9': {}
 
   '@types/istanbul-lib-coverage@2.0.6': {}
@@ -12721,6 +12822,31 @@ snapshots:
 
   '@xtuc/long@4.2.2': {}
 
+  '@xyflow/react@12.11.1(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(immer@11.1.8)(react-dom@19.2.7(react@19.2.7))(react@19.2.7)':
+    dependencies:
+      '@xyflow/system': 0.0.78
+      classcat: 5.0.5
+      react: 19.2.7
+      react-dom: 19.2.7(react@19.2.7)
+      zustand: 4.5.7(@types/react@19.2.17)(immer@11.1.8)(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      '@types/react-dom': 19.2.3(@types/react@19.2.17)
+    transitivePeerDependencies:
+      - immer
+
+  '@xyflow/system@0.0.78':
+    dependencies:
+      '@types/d3-drag': 3.0.7
+      '@types/d3-interpolate': 3.0.4
+      '@types/d3-selection': 3.0.11
+      '@types/d3-transition': 3.0.9
+      '@types/d3-zoom': 3.0.8
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+
   '@yarnpkg/parsers@3.0.3':
     dependencies:
       js-yaml: 3.14.2
@@ -13131,6 +13257,8 @@ snapshots:
 
   cjs-module-lexer@2.2.0: {}
 
+  classcat@5.0.5: {}
+
   classnames@2.5.1: {}
 
   cli-cursor@5.0.0:
@@ -13266,6 +13394,13 @@ snapshots:
 
   d3-color@3.1.0: {}
 
+  d3-dispatch@3.0.1: {}
+
+  d3-drag@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+
   d3-ease@3.0.1: {}
 
   d3-format@3.1.2: {}
@@ -13284,6 +13419,8 @@ snapshots:
       d3-time: 3.1.0
       d3-time-format: 4.1.0
 
+  d3-selection@3.0.0: {}
+
   d3-shape@3.2.0:
     dependencies:
       d3-path: 3.1.0
@@ -13298,6 +13435,23 @@ snapshots:
 
   d3-timer@3.0.1: {}
 
+  d3-transition@3.0.1(d3-selection@3.0.0):
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+
+  d3-zoom@3.0.0:
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+
   data-uri-to-buffer@6.0.2: {}
 
   data-urls@5.0.0:
@@ -16795,6 +16949,14 @@ snapshots:
 
   zod@4.4.3: {}
 
+  zustand@4.5.7(@types/react@19.2.17)(immer@11.1.8)(react@19.2.7):
+    dependencies:
+      use-sync-external-store: 1.6.0(react@19.2.7)
+    optionalDependencies:
+      '@types/react': 19.2.17
+      immer: 11.1.8
+      react: 19.2.7
+
   zustand@5.0.0(@types/react@19.2.17)(immer@11.1.8)(react@19.2.7)(use-sync-external-store@1.4.0(react@19.2.7)):
     optionalDependencies:
       '@types/react': 19.2.17
diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json
index d7cb5fc081..1609c710ac 100644
--- a/src/assets/locales/en.json
+++ b/src/assets/locales/en.json
@@ -3503,6 +3503,28 @@
         "view": {
           "list": "List",
           "graph": "Graph"
+        },
+        "graphView": {
+          "node": {
+            "primaryDao": "Primary DAO",
+            "linkedDao": "Linked DAO",
+            "plugin": "Aragon OSx Plugin",
+            "actor": "Any address",
+            "who": "Who",
+            "where": "Where"
+          },
+          "edge": {
+            "condition": "if {{condition}}"
+          },
+          "detail": {
+            "close": "Close",
+            "permission": "Permission",
+            "condition": "Condition"
+          },
+          "empty": {
+            "heading": "No permissions",
+            "description": "This account has no indexed permissions to visualize."
+          }
         }
       },
       "permissionsList": {
diff --git a/src/modules/settings/components/permissionsGraph/index.ts b/src/modules/settings/components/permissionsGraph/index.ts
new file mode 100644
index 0000000000..093029d0b1
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/index.ts
@@ -0,0 +1,8 @@
+import dynamic from 'next/dynamic';
+
+export const PermissionsGraph = dynamic(
+    () => import('./permissionsGraph').then((mod) => mod.PermissionsGraph),
+    { ssr: false },
+);
+
+export type { IPermissionsGraphProps } from './permissionsGraph';
diff --git a/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx b/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
new file mode 100644
index 0000000000..26c22e13cb
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
@@ -0,0 +1,163 @@
+import {
+    addressUtils,
+    Button,
+    DefinitionList,
+    IconType,
+    Toggle,
+    ToggleGroup,
+} from '@aragon/gov-ui-kit';
+import { Handle, type Node, type NodeProps, Position } from '@xyflow/react';
+import { useState } from 'react';
+import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import { SettingsSlotId } from '../../constants/moduleSlots';
+import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import type { IPermissionGraphEdge } from '../../types';
+import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
+import { NoConditionSlot } from '../noConditionSlot';
+
+/**
+ * Data for the expanded detail node shown when a permission edge is selected.
+ */
+export interface IPermissionDetailNodeData {
+    edge: IPermissionGraphEdge;
+    whoLabel: string;
+    whereLabel: string;
+    onClose: () => void;
+    [key: string]: unknown;
+}
+
+export type IPermissionDetailFlowNode = Node<
+    IPermissionDetailNodeData,
+    'permissionDetail'
+>;
+
+type DetailTab = 'permission' | 'condition';
+
+export const PermissionDetailNode: React.FC<
+    NodeProps<IPermissionDetailFlowNode>
+> = ({ data }) => {
+    const { t } = useTranslations();
+    const { edge, whoLabel, whereLabel, onClose } = data;
+    const { row } = edge;
+
+    const [tab, setTab] = useState<DetailTab>('permission');
+
+    const hasCondition = !addressUtils.isAddressEqual(
+        row.conditionAddress,
+        ALLOW_FLAG,
+    );
+    const conditionType = conditionTypeUtils.resolveConditionType(
+        row.conditionAddress,
+        row.condition,
+    );
+
+    const handleTabChange = (value?: string | string[]) => {
+        if (value === 'permission' || value === 'condition') {
+            setTab(value);
+        }
+    };
+
+    return (
+        <div className="w-fit max-w-xl rounded-xl border border-primary-400 bg-neutral-0 shadow-primary-lg">
+            <Handle
+                className="opacity-0"
+                position={Position.Bottom}
+                type="target"
+            />
+
+            <div className="flex items-start justify-between gap-4 border-neutral-100 border-b p-4">
+                <span className="whitespace-nowrap font-mono text-neutral-800 text-sm">
+                    {edge.permissionName}
+                    {edge.conditionLabel != null && (
+                        <span className="text-neutral-500">
+                            {` ${t(
+                                'app.settings.daoPermissionsPage.graphView.edge.condition',
+                                { condition: edge.conditionLabel },
+                            )}`}
+                        </span>
+                    )}
+                </span>
+                <Button
+                    aria-label={t(
+                        'app.settings.daoPermissionsPage.graphView.detail.close',
+                    )}
+                    iconLeft={IconType.CLOSE}
+                    onClick={onClose}
+                    size="sm"
+                    variant="tertiary"
+                />
+            </div>
+
+            <div className="flex flex-col gap-4 p-4">
+                <ToggleGroup
+                    isMultiSelect={false}
+                    onChange={handleTabChange}
+                    value={tab}
+                >
+                    <Toggle
+                        label={t(
+                            'app.settings.daoPermissionsPage.graphView.detail.permission',
+                        )}
+                        value="permission"
+                    />
+                    <Toggle
+                        label={t(
+                            'app.settings.daoPermissionsPage.graphView.detail.condition',
+                        )}
+                        value="condition"
+                    />
+                </ToggleGroup>
+
+                {tab === 'permission' ? (
+                    <DefinitionList.Container>
+                        <DefinitionList.Item
+                            copyValue={row.whoAddress}
+                            description={addressUtils.truncateAddress(
+                                row.whoAddress,
+                            )}
+                            term={t('app.settings.permissionsList.details.who')}
+                        >
+                            {whoLabel}
+                        </DefinitionList.Item>
+                        <DefinitionList.Item
+                            copyValue={row.whereAddress}
+                            description={addressUtils.truncateAddress(
+                                row.whereAddress,
+                            )}
+                            term={t(
+                                'app.settings.permissionsList.details.where',
+                            )}
+                        >
+                            {whereLabel}
+                        </DefinitionList.Item>
+                        <DefinitionList.Item
+                            copyValue={row.permissionId}
+                            description={addressUtils.truncateHash(
+                                row.permissionId,
+                            )}
+                            term={t(
+                                'app.settings.permissionsList.details.permission',
+                            )}
+                        >
+                            {edge.permissionName}
+                        </DefinitionList.Item>
+                    </DefinitionList.Container>
+                ) : (
+                    <PluginSingleComponent
+                        Fallback={NoConditionSlot}
+                        pluginId={conditionType}
+                        slotId={SettingsSlotId.PERMISSION_CONDITION}
+                        {...(hasCondition ? row.condition : undefined)}
+                    />
+                )}
+            </div>
+
+            <Handle
+                className="opacity-0"
+                position={Position.Top}
+                type="source"
+            />
+        </div>
+    );
+};
diff --git a/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx b/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
new file mode 100644
index 0000000000..1839c71199
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
@@ -0,0 +1,87 @@
+import {
+    BaseEdge,
+    type Edge,
+    EdgeLabelRenderer,
+    type EdgeProps,
+    getSmoothStepPath,
+} from '@xyflow/react';
+import classNames from 'classnames';
+import { useTranslations } from '@/shared/components/translationsProvider';
+
+/**
+ * Data carried by a permission-graph edge: the resolved permission name and an
+ * optional condition label rendered as an `if <label>` suffix.
+ */
+export interface IPermissionEdgeData {
+    permissionName: string;
+    conditionLabel?: string;
+    /**
+     * Whether the edge is dimmed because another edge is selected.
+     */
+    dimmed?: boolean;
+    /**
+     * Selects this edge (invoked when its label is clicked).
+     */
+    onSelect?: () => void;
+    [key: string]: unknown;
+}
+
+/**
+ * React Flow edge carrying resolved permission-edge data.
+ */
+export type IPermissionFlowEdge = Edge<IPermissionEdgeData, 'permission'>;
+
+export const PermissionGraphEdge: React.FC<EdgeProps<IPermissionFlowEdge>> = ({
+    sourceX,
+    sourceY,
+    targetX,
+    targetY,
+    sourcePosition,
+    targetPosition,
+    markerEnd,
+    style,
+    data,
+}) => {
+    const { t } = useTranslations();
+
+    const [edgePath, labelX, labelY] = getSmoothStepPath({
+        sourceX,
+        sourceY,
+        targetX,
+        targetY,
+        sourcePosition,
+        targetPosition,
+    });
+
+    return (
+        <>
+            <BaseEdge markerEnd={markerEnd} path={edgePath} style={style} />
+            <EdgeLabelRenderer>
+                <button
+                    className={classNames(
+                        'nodrag nopan pointer-events-auto absolute flex cursor-pointer flex-col items-center gap-0.5 rounded-md bg-neutral-800 px-2 py-1 text-center font-mono text-neutral-0 text-xs',
+                        data?.dimmed === true && 'opacity-20',
+                    )}
+                    onClick={(event) => {
+                        event.stopPropagation();
+                        data?.onSelect?.();
+                    }}
+                    style={{
+                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+                    }}
+                    type="button"
+                >
+                    <span>{data?.permissionName}</span>
+                    {data?.conditionLabel != null && (
+                        <span className="text-neutral-200">
+                            {t(
+                                'app.settings.daoPermissionsPage.graphView.edge.condition',
+                                { condition: data.conditionLabel },
+                            )}
+                        </span>
+                    )}
+                </button>
+            </EdgeLabelRenderer>
+        </>
+    );
+};
diff --git a/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx b/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
new file mode 100644
index 0000000000..85f21f4473
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
@@ -0,0 +1,107 @@
+import { DaoAvatar, Tag } from '@aragon/gov-ui-kit';
+import { Handle, type Node, type NodeProps, Position } from '@xyflow/react';
+import classNames from 'classnames';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import type { IPermissionGraphNode, PermissionNodeKind } from '../../types';
+
+/**
+ * Role a node plays in the currently selected permission edge.
+ */
+export type PermissionNodeSelectionRole = 'who' | 'where';
+
+/**
+ * Permission-graph node data plus its selection state, widened to satisfy React
+ * Flow's `Record<string, unknown>` node-data constraint.
+ */
+export interface IPermissionNodeData extends IPermissionGraphNode {
+    /**
+     * Set when this node is the `who` / `where` of the selected edge.
+     */
+    selectionRole?: PermissionNodeSelectionRole;
+    /**
+     * Whether the node is dimmed because another edge is selected.
+     */
+    dimmed?: boolean;
+    [key: string]: unknown;
+}
+
+/**
+ * React Flow node carrying a resolved permission-graph node as its data.
+ */
+export type IPermissionFlowNode = Node<IPermissionNodeData, 'permission'>;
+
+const SUBTITLE_KEY: Record<PermissionNodeKind, string> = {
+    dao: 'app.settings.daoPermissionsPage.graphView.node.primaryDao',
+    linkedDao: 'app.settings.daoPermissionsPage.graphView.node.linkedDao',
+    plugin: 'app.settings.daoPermissionsPage.graphView.node.plugin',
+    actor: 'app.settings.daoPermissionsPage.graphView.node.actor',
+};
+
+const SELECTION_LABEL_KEY: Record<PermissionNodeSelectionRole, string> = {
+    who: 'app.settings.daoPermissionsPage.graphView.node.who',
+    where: 'app.settings.daoPermissionsPage.graphView.node.where',
+};
+
+export const PermissionGraphNode: React.FC<NodeProps<IPermissionFlowNode>> = ({
+    data,
+}) => {
+    const { t } = useTranslations();
+    const { kind, label, tag, avatarSrc, selectionRole, dimmed } = data;
+
+    const isDaoKind = kind === 'dao' || kind === 'linkedDao';
+    const isSelected = selectionRole != null;
+
+    return (
+        <div
+            className={classNames(
+                'relative transition-opacity',
+                dimmed === true && 'opacity-30',
+            )}
+        >
+            {isSelected && (
+                <span className="absolute top-px left-0 -translate-y-full rounded-t-md border border-primary-400 border-b-0 bg-neutral-0 px-4 py-0.5 font-medium text-neutral-500 text-xs uppercase">
+                    {t(SELECTION_LABEL_KEY[selectionRole])}
+                </span>
+            )}
+            <div
+                className={classNames(
+                    'flex min-w-64 items-center justify-between gap-4 border bg-neutral-0 px-4 py-3',
+                    isSelected
+                        ? 'rounded-xl rounded-tl-none border-primary-400 shadow-primary-lg'
+                        : 'rounded-xl border-neutral-100 shadow-neutral-sm',
+                )}
+            >
+                <Handle
+                    className="opacity-0"
+                    position={Position.Bottom}
+                    type="target"
+                />
+                <div className="flex min-w-0 flex-col gap-0.5">
+                    <span className="truncate text-neutral-800">{label}</span>
+                    <span className="truncate text-neutral-500 text-sm">
+                        {t(SUBTITLE_KEY[kind])}
+                    </span>
+                </div>
+                {isDaoKind && (
+                    <DaoAvatar
+                        name={label}
+                        size="sm"
+                        src={avatarSrc ?? undefined}
+                    />
+                )}
+                {kind === 'plugin' && tag != null && <Tag label={tag} />}
+                {kind === 'actor' && (
+                    <span
+                        aria-hidden="true"
+                        className="size-8 shrink-0 rounded-full bg-neutral-100"
+                    />
+                )}
+                <Handle
+                    className="opacity-0"
+                    position={Position.Top}
+                    type="source"
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx b/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
new file mode 100644
index 0000000000..9f1bd427fc
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
@@ -0,0 +1,162 @@
+'use client';
+
+import '@xyflow/react/dist/style.css';
+import { CardEmptyState, StateSkeletonBar, Tabs } from '@aragon/gov-ui-kit';
+import { ReactFlowProvider } from '@xyflow/react';
+import { useMemo, useState } from 'react';
+import {
+    type Network,
+    useAllDaoPermissions,
+    useDao,
+} from '@/shared/api/daoService';
+import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { useTranslations } from '@/shared/components/translationsProvider';
+import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
+import type { IPermissionRow } from '../../types';
+import { buildPermissionGraph } from '../../utils/buildPermissionGraph';
+import { PermissionsGraphCanvas } from './permissionsGraphCanvas';
+
+export interface IPermissionsGraphProps {
+    /**
+     * ID of the DAO to visualize permissions for.
+     */
+    daoId: string;
+}
+
+interface IPermissionsAccount {
+    id: string;
+    name: string;
+    network: Network;
+    daoAddress: string;
+}
+
+export const PermissionsGraph: React.FC<IPermissionsGraphProps> = (props) => {
+    const { daoId } = props;
+
+    const { t } = useTranslations();
+    const { isEnabled } = useFeatureFlags();
+
+    const { data: dao } = useDao({ urlParams: { id: daoId } });
+    const daoPlugins = useDaoPlugins({ daoId, includeLinkedAccounts: true });
+
+    const accounts = useMemo<IPermissionsAccount[]>(() => {
+        if (dao == null) {
+            return [];
+        }
+
+        const mainAccount: IPermissionsAccount = {
+            id: dao.id,
+            name: dao.name,
+            network: dao.network,
+            daoAddress: dao.address,
+        };
+
+        const linkedAccounts = dao.linkedAccounts ?? [];
+        const showLinkedAccounts =
+            isEnabled('linkedAccount') && linkedAccounts.length > 0;
+
+        if (!showLinkedAccounts) {
+            return [mainAccount];
+        }
+
+        return [
+            mainAccount,
+            ...linkedAccounts.map((account) => ({
+                id: account.id,
+                name: account.name,
+                network: account.network,
+                daoAddress: account.address,
+            })),
+        ];
+    }, [dao, isEnabled]);
+
+    const [selectedAccountId, setSelectedAccountId] = useState<string>();
+    const activeAccountId = selectedAccountId ?? accounts[0]?.id;
+    const activeAccount =
+        accounts.find((account) => account.id === activeAccountId) ??
+        accounts[0];
+
+    const { data, isLoading } = useAllDaoPermissions(
+        {
+            urlParams: {
+                network: activeAccount?.network as Network,
+                daoAddress: activeAccount?.daoAddress ?? '',
+            },
+        },
+        { enabled: activeAccount != null },
+    );
+
+    // NOTE: the optional `condition` field is supplied by the preview mock until
+    // APP-953 formalizes it on the permissions response; cast at this boundary.
+    const rows = (data ?? []) as IPermissionRow[];
+
+    const graph = useMemo(() => {
+        if (dao == null) {
+            return { nodes: [], edges: [] };
+        }
+
+        return buildPermissionGraph({ rows, dao, daoPlugins });
+    }, [rows, dao, daoPlugins]);
+
+    const renderBody = () => {
+        if (isLoading || dao == null) {
+            return <PermissionsGraphSkeleton />;
+        }
+
+        if (graph.nodes.length === 0) {
+            return (
+                <CardEmptyState
+                    description={t(
+                        'app.settings.daoPermissionsPage.graphView.empty.description',
+                    )}
+                    heading={t(
+                        'app.settings.daoPermissionsPage.graphView.empty.heading',
+                    )}
+                    objectIllustration={{ object: 'SETTINGS' }}
+                />
+            );
+        }
+
+        return (
+            <div className="relative h-[640px] w-full overflow-hidden rounded-xl border border-neutral-100">
+                <ReactFlowProvider key={activeAccountId}>
+                    <PermissionsGraphCanvas graph={graph} />
+                </ReactFlowProvider>
+            </div>
+        );
+    };
+
+    if (accounts.length <= 1) {
+        return renderBody();
+    }
+
+    return (
+        <Tabs.Root onValueChange={setSelectedAccountId} value={activeAccountId}>
+            <Tabs.List>
+                {accounts.map((account) => (
+                    <Tabs.Trigger
+                        key={account.id}
+                        label={account.name}
+                        value={account.id}
+                    />
+                ))}
+            </Tabs.List>
+            {accounts.map((account) => (
+                <Tabs.Content key={account.id} value={account.id}>
+                    {renderBody()}
+                </Tabs.Content>
+            ))}
+        </Tabs.Root>
+    );
+};
+
+const PermissionsGraphSkeleton: React.FC = () => (
+    <div
+        className="flex h-[640px] w-full flex-col gap-4 rounded-xl border border-neutral-100 p-6"
+        data-testid="permissions-graph-skeleton"
+    >
+        <StateSkeletonBar width="40%" />
+        <StateSkeletonBar width="70%" />
+        <StateSkeletonBar width="55%" />
+    </div>
+);
diff --git a/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
new file mode 100644
index 0000000000..791a629199
--- /dev/null
+++ b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
@@ -0,0 +1,264 @@
+'use client';
+
+import {
+    Background,
+    Controls,
+    type Edge,
+    type Node,
+    ReactFlow,
+    useEdgesState,
+    useNodesInitialized,
+    useNodesState,
+    useReactFlow,
+} from '@xyflow/react';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { IPermissionGraph } from '../../types';
+import { getLayoutedElements } from '../../utils/permissionGraphLayout';
+import { PermissionDetailNode } from './permissionDetailNode';
+import {
+    type IPermissionEdgeData,
+    PermissionGraphEdge,
+} from './permissionGraphEdge';
+import { PermissionGraphNode } from './permissionGraphNode';
+
+const nodeTypes = {
+    permission: PermissionGraphNode,
+    permissionDetail: PermissionDetailNode,
+};
+const edgeTypes = { permission: PermissionGraphEdge };
+
+const MIN_ZOOM = 0.2;
+const FIT_VIEW_OPTIONS = { padding: 0.2, maxZoom: 1, duration: 300 };
+const DIMMED_EDGE_OPACITY = 0.2;
+const UNPOSITIONED = { x: 0, y: 0 };
+
+interface IBuildFlowParams {
+    graph: IPermissionGraph;
+    selectedEdgeId: string | null;
+    onSelectEdge: (edgeId: string) => void;
+    onClose: () => void;
+}
+
+const buildFlowElements = ({
+    graph,
+    selectedEdgeId,
+    onSelectEdge,
+    onClose,
+}: IBuildFlowParams): { nodes: Node[]; edges: Edge[] } => {
+    const selectedEdge =
+        selectedEdgeId != null
+            ? (graph.edges.find((edge) => edge.id === selectedEdgeId) ?? null)
+            : null;
+
+    const nodesById = new Map(graph.nodes.map((node) => [node.id, node]));
+
+    const permissionNodes: Node[] = graph.nodes.map((node) => {
+        let selectionRole: 'who' | 'where' | undefined;
+
+        if (selectedEdge?.source === node.id) {
+            selectionRole = 'who';
+        } else if (selectedEdge?.target === node.id) {
+            selectionRole = 'where';
+        }
+
+        return {
+            id: node.id,
+            type: 'permission',
+            position: UNPOSITIONED,
+            data: {
+                ...node,
+                selectionRole,
+                dimmed: selectedEdge != null && selectionRole == null,
+            },
+        };
+    });
+
+    const detailNodes: Node[] = [];
+    let flowEdges: Edge[];
+
+    if (selectedEdge == null) {
+        flowEdges = graph.edges.map((edge) => ({
+            id: edge.id,
+            source: edge.source,
+            target: edge.target,
+            type: 'permission',
+            data: {
+                permissionName: edge.permissionName,
+                conditionLabel: edge.conditionLabel,
+                onSelect: () => onSelectEdge(edge.id),
+            } satisfies IPermissionEdgeData,
+        }));
+    } else {
+        const detailId = `detail-${selectedEdge.id}`;
+
+        detailNodes.push({
+            id: detailId,
+            type: 'permissionDetail',
+            position: UNPOSITIONED,
+            draggable: false,
+            data: {
+                edge: selectedEdge,
+                whoLabel: nodesById.get(selectedEdge.source)?.label ?? '',
+                whereLabel: nodesById.get(selectedEdge.target)?.label ?? '',
+                onClose,
+            },
+        });
+
+        flowEdges = graph.edges.flatMap((edge) => {
+            if (edge.id === selectedEdge.id) {
+                return [
+                    {
+                        id: `${edge.id}-in`,
+                        source: edge.source,
+                        target: detailId,
+                        type: 'smoothstep',
+                    },
+                    {
+                        id: `${edge.id}-out`,
+                        source: detailId,
+                        target: edge.target,
+                        type: 'smoothstep',
+                    },
+                ];
+            }
+
+            // Hide sibling permissions between the same pair so they don't draw
+            // duplicate connectors alongside the expanded detail node.
+            if (
+                edge.source === selectedEdge.source &&
+                edge.target === selectedEdge.target
+            ) {
+                return [];
+            }
+
+            // Other edges become plain dimmed lines without labels.
+            return [
+                {
+                    id: edge.id,
+                    source: edge.source,
+                    target: edge.target,
+                    type: 'smoothstep',
+                    style: { opacity: DIMMED_EDGE_OPACITY },
+                },
+            ];
+        });
+    }
+
+    return { nodes: [...permissionNodes, ...detailNodes], edges: flowEdges };
+};
+
+export interface IPermissionsGraphCanvasProps {
+    /**
+     * Resolved permission graph to render.
+     */
+    graph: IPermissionGraph;
+}
+
+export const PermissionsGraphCanvas: React.FC<IPermissionsGraphCanvasProps> = ({
+    graph,
+}) => {
+    const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
+    const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+    const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
+    const { fitView, getNodes, getEdges } = useReactFlow();
+    const nodesInitialized = useNodesInitialized();
+    const layoutKey = useRef('');
+
+    const selectEdge = useCallback((edgeId: string) => {
+        setSelectedEdgeId((current) => (current === edgeId ? null : edgeId));
+    }, []);
+    const clearSelection = useCallback(() => setSelectedEdgeId(null), []);
+
+    // Rebuild the node/edge set when the graph or selection changes, preserving
+    // known positions so surviving nodes do not jump before re-layout.
+    useEffect(() => {
+        const previousPositions = new Map(
+            getNodes().map((node) => [node.id, node.position]),
+        );
+
+        const { nodes: nextNodes, edges: nextEdges } = buildFlowElements({
+            graph,
+            selectedEdgeId,
+            onSelectEdge: selectEdge,
+            onClose: clearSelection,
+        });
+
+        setNodes(
+            nextNodes.map((node) => ({
+                ...node,
+                position: previousPositions.get(node.id) ?? node.position,
+            })),
+        );
+        setEdges(nextEdges);
+    }, [
+        graph,
+        selectedEdgeId,
+        selectEdge,
+        clearSelection,
+        getNodes,
+        setNodes,
+        setEdges,
+    ]);
+
+    // Once React Flow has measured the current node set, lay it out with the
+    // real measured dimensions. The signature includes each node's measured size
+    // so the layout re-runs when a node settles to its final size.
+    const layoutSignature = nodes
+        .map(
+            (node) =>
+                `${node.id}:${Math.round(node.measured?.width ?? 0)}x${Math.round(node.measured?.height ?? 0)}`,
+        )
+        .join('|');
+    const [layoutVersion, setLayoutVersion] = useState(0);
+
+    useEffect(() => {
+        if (
+            !nodesInitialized ||
+            layoutSignature === '' ||
+            layoutKey.current === layoutSignature
+        ) {
+            return;
+        }
+
+        const { nodes: laidNodes } = getLayoutedElements(
+            getNodes(),
+            getEdges(),
+            { direction: 'BT' },
+        );
+        layoutKey.current = layoutSignature;
+        setNodes(laidNodes);
+        setLayoutVersion((version) => version + 1);
+    }, [nodesInitialized, layoutSignature, getNodes, getEdges, setNodes]);
+
+    // Fit the view after the laid-out positions have committed.
+    useEffect(() => {
+        if (layoutVersion === 0) {
+            return;
+        }
+
+        const frame = requestAnimationFrame(() => {
+            void fitView(FIT_VIEW_OPTIONS);
+        });
+
+        return () => cancelAnimationFrame(frame);
+    }, [layoutVersion, fitView]);
+
+    return (
+        <ReactFlow
+            edges={edges}
+            edgeTypes={edgeTypes}
+            fitViewOptions={FIT_VIEW_OPTIONS}
+            minZoom={MIN_ZOOM}
+            nodes={nodes}
+            nodesConnectable={false}
+            nodeTypes={nodeTypes}
+            onEdgesChange={onEdgesChange}
+            onNodesChange={onNodesChange}
+            onPaneClick={clearSelection}
+            proOptions={{ hideAttribution: true }}
+        >
+            <Background />
+            <Controls showInteractive={false} />
+        </ReactFlow>
+    );
+};
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
index a45ababad5..ba4d51e798 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -1,11 +1,12 @@
 'use client';
 
 import { Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
-import { useState } from 'react';
 import { useDao } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
 import { useTranslations } from '@/shared/components/translationsProvider';
+import { useFilterUrlParam } from '@/shared/hooks/useFilterUrlParam';
 import { daoUtils } from '@/shared/utils/daoUtils';
+import { PermissionsGraph } from '../../components/permissionsGraph';
 import { PermissionsList } from '../../components/permissionsList';
 
 export interface IDaoPermissionsPageClientProps {
@@ -15,7 +16,14 @@ export interface IDaoPermissionsPageClientProps {
     daoId: string;
 }
 
-type PermissionsView = 'list' | 'graph';
+export const permissionsViewParam = 'permissionsview';
+
+enum PermissionsView {
+    LIST = 'list',
+    GRAPH = 'graph',
+}
+
+const permissionsViews = Object.values(PermissionsView);
 
 export const DaoPermissionsPageClient: React.FC<
     IDaoPermissionsPageClientProps
@@ -26,11 +34,15 @@ export const DaoPermissionsPageClient: React.FC<
 
     const { data: dao } = useDao({ urlParams: { id: daoId } });
 
-    // Graph view is out of scope for now (T05 shell); only the list view is wired up.
-    const [view, setView] = useState<PermissionsView>('list');
+    const [view, setView] = useFilterUrlParam({
+        name: permissionsViewParam,
+        fallbackValue: PermissionsView.LIST,
+        validValues: permissionsViews,
+        enableUrlUpdate: true,
+    });
 
-    const handleViewChange = (value: string | string[] | undefined) => {
-        if (value === 'list' || value === 'graph') {
+    const handleViewChange = (value?: string | string[]) => {
+        if (typeof value === 'string' && value) {
             setView(value);
         }
     };
@@ -73,14 +85,18 @@ export const DaoPermissionsPageClient: React.FC<
                                 value="list"
                             />
                             <Toggle
-                                disabled={true}
                                 label={t(
                                     'app.settings.daoPermissionsPage.view.graph',
                                 )}
                                 value="graph"
                             />
                         </ToggleGroup>
-                        {view === 'list' && <PermissionsList daoId={daoId} />}
+                        {view === PermissionsView.LIST && (
+                            <PermissionsList daoId={daoId} />
+                        )}
+                        {view === PermissionsView.GRAPH && (
+                            <PermissionsGraph daoId={daoId} />
+                        )}
                     </div>
                 </Page.Main>
             </Page.Content>
diff --git a/src/modules/settings/types/index.ts b/src/modules/settings/types/index.ts
index d6aa45df8e..8e50dbe6e7 100644
--- a/src/modules/settings/types/index.ts
+++ b/src/modules/settings/types/index.ts
@@ -2,6 +2,12 @@ export type { IBuildPreparePluginUpdateDataParams } from './buildPreparePluginUp
 export type { IDaoPolicyDetailsPageParams } from './daoPolicyDetailsPageParams';
 export type { IDaoProcessDetailsPageParams } from './daoProcessDetailsPageParams';
 export type { IGetUninstallHelpersParams } from './getUninstallHelpersParams';
+export type {
+    IPermissionGraph,
+    IPermissionGraphEdge,
+    IPermissionGraphNode,
+    PermissionNodeKind,
+} from './permissionGraph';
 export type { IConditionData, IPermissionRow } from './permissionRow';
 export type { IPluginToFormDataParams } from './pluginToFormDataParams';
 export type { IUseGovernanceSettingsParams } from './useGovernanceSettingsParams';
diff --git a/src/modules/settings/types/permissionGraph.ts b/src/modules/settings/types/permissionGraph.ts
new file mode 100644
index 0000000000..270bcec213
--- /dev/null
+++ b/src/modules/settings/types/permissionGraph.ts
@@ -0,0 +1,89 @@
+import type { IPermissionRow } from './permissionRow';
+
+/**
+ * Discriminator for a permission-graph node, driving both layout grouping and
+ * the node component rendered for it.
+ *
+ * - `dao` — the primary DAO the permissions belong to.
+ * - `linkedDao` — a DAO linked to the primary DAO (see `IDao.linkedAccounts`).
+ * - `plugin` — an installed DAO plugin (e.g. a Multisig / SPP process).
+ * - `actor` — any other grantee/target: a sentinel (`Anyone` / `Any Address`)
+ *   or a plain externally-owned address.
+ */
+export type PermissionNodeKind = 'dao' | 'linkedDao' | 'plugin' | 'actor';
+
+/**
+ * A single node in the permission graph. One node per unique `who` / `where`
+ * address across all permission rows.
+ */
+export interface IPermissionGraphNode {
+    /**
+     * Stable node id — the lowercased address the node represents.
+     */
+    id: string;
+    /**
+     * Classified node kind used to pick the node component and layout treatment.
+     */
+    kind: PermissionNodeKind;
+    /**
+     * Human-readable label (DAO / plugin / sentinel name, or truncated address).
+     */
+    label: string;
+    /**
+     * Short type tag for plugin nodes (e.g. `MULTISIG` / `SPP`). Undefined for
+     * every other kind.
+     */
+    tag?: string;
+    /**
+     * Avatar image source for DAO / linked DAO nodes. Undefined for plugins and
+     * actors, and may be null when the DAO has no avatar set.
+     */
+    avatarSrc?: string | null;
+    /**
+     * The original, unmodified address the node represents.
+     */
+    address: string;
+}
+
+/**
+ * A single directed edge in the permission graph: `who` (source) is granted a
+ * permission over `where` (target).
+ */
+export interface IPermissionGraphEdge {
+    /**
+     * Stable edge id, unique per `(permission, who, where)` triple.
+     */
+    id: string;
+    /**
+     * Source node id (the `who` address, lowercased).
+     */
+    source: string;
+    /**
+     * Target node id (the `where` address, lowercased).
+     */
+    target: string;
+    /**
+     * Resolved permission name (e.g. `EXECUTE_PERMISSION`), or a truncated hash
+     * when the permission id is unknown.
+     */
+    permissionName: string;
+    /**
+     * Resolved condition label rendered as an `if <label>` suffix. Undefined for
+     * unconditional grants and unresolvable condition types.
+     */
+    conditionLabel?: string;
+    /**
+     * The underlying permission row, used to render the expanded detail card
+     * (permission details + condition slot) when the edge is selected.
+     */
+    row: IPermissionRow;
+}
+
+/**
+ * The full permission graph: deduplicated nodes plus the directed permission
+ * edges between them. Produced by `buildPermissionGraph`.
+ */
+export interface IPermissionGraph {
+    nodes: IPermissionGraphNode[];
+    edges: IPermissionGraphEdge[];
+}
diff --git a/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.test.ts b/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.test.ts
new file mode 100644
index 0000000000..3cad2cc4ce
--- /dev/null
+++ b/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.test.ts
@@ -0,0 +1,209 @@
+import type { IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+import {
+    generateDao,
+    generateFilterComponentPlugin,
+    generateLinkedAccount,
+} from '@/shared/testUtils/generators';
+import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
+import type { IPermissionRow } from '../../types';
+import { buildPermissionGraph } from './buildPermissionGraph';
+
+// Real keccak256 permission-id hashes so permissionNameUtils resolves names.
+const ROOT_PERMISSION_ID =
+    '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33';
+const EXECUTE_PERMISSION_ID =
+    '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d';
+
+const daoAddress = '0x1F2e3D4C5b6A70819283746556473829100AbCdE';
+const pluginAddress = '0xA1b2C3d4E5F60718293A4b5C6d7E8f9001234567';
+const linkedDaoAddress = '0xdEAD000000000000000042069420694206942069';
+const conditionAddress = '0xC0Ffee254729296a45a3885639AC7E10F9d54979';
+
+const daoPlugins = [
+    generateFilterComponentPlugin<IDaoPlugin, object>({
+        meta: {
+            address: pluginAddress,
+            name: 'Founders',
+            interfaceType: 'multisig',
+        } as IDaoPlugin,
+    }),
+] satisfies IFilterComponentPlugin<IDaoPlugin>[];
+
+const dao = generateDao({
+    address: daoAddress,
+    name: 'Patito DAO',
+    avatar: 'https://patito.png',
+    linkedAccounts: [
+        generateLinkedAccount({
+            address: linkedDaoAddress,
+            name: 'Patito Developer DAO',
+            avatar: 'https://patito-dev.png',
+        }),
+    ],
+});
+
+const buildRow = (partial: Partial<IPermissionRow>): IPermissionRow => ({
+    permissionId: EXECUTE_PERMISSION_ID,
+    whoAddress: pluginAddress,
+    whereAddress: daoAddress,
+    conditionAddress: ALLOW_FLAG,
+    ...partial,
+});
+
+describe('buildPermissionGraph', () => {
+    it('classifies the DAO address as a dao-kind node labeled with the DAO name', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({
+                    whoAddress: pluginAddress,
+                    whereAddress: daoAddress,
+                }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        const daoNode = graph.nodes.find((node) => node.kind === 'dao');
+        expect(daoNode).toMatchObject({
+            label: 'Patito DAO',
+            address: daoAddress,
+            avatarSrc: 'https://patito.png',
+        });
+    });
+
+    it('classifies a linked account address as a linkedDao-kind node', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({
+                    whoAddress: daoAddress,
+                    whereAddress: linkedDaoAddress,
+                }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        const linkedNode = graph.nodes.find(
+            (node) => node.kind === 'linkedDao',
+        );
+        expect(linkedNode).toMatchObject({
+            label: 'Patito Developer DAO',
+            address: linkedDaoAddress,
+            avatarSrc: 'https://patito-dev.png',
+        });
+    });
+
+    it('classifies a matched plugin as a plugin-kind node with its type tag', () => {
+        const graph = buildPermissionGraph({
+            rows: [buildRow({ whoAddress: pluginAddress })],
+            dao,
+            daoPlugins,
+        });
+
+        const pluginNode = graph.nodes.find((node) => node.kind === 'plugin');
+        expect(pluginNode).toMatchObject({
+            label: 'Founders',
+            tag: 'MULTISIG',
+        });
+    });
+
+    it('classifies the ANY_ADDR sentinel as an actor-kind node labeled "Anyone"', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({ whoAddress: ANY_ADDR, whereAddress: pluginAddress }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        const actorNode = graph.nodes.find((node) => node.kind === 'actor');
+        expect(actorNode).toMatchObject({ label: 'Anyone' });
+        expect(actorNode?.tag).toBeUndefined();
+    });
+
+    it('deduplicates a single node when an address appears across multiple rows', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({
+                    whoAddress: pluginAddress,
+                    whereAddress: daoAddress,
+                }),
+                buildRow({
+                    permissionId: ROOT_PERMISSION_ID,
+                    whoAddress: ANY_ADDR,
+                    whereAddress: daoAddress,
+                }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        const daoNodes = graph.nodes.filter(
+            (node) => node.address === daoAddress,
+        );
+        expect(daoNodes).toHaveLength(1);
+    });
+
+    it('creates a who -> where edge with the resolved permission name', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({
+                    permissionId: EXECUTE_PERMISSION_ID,
+                    whoAddress: pluginAddress,
+                    whereAddress: daoAddress,
+                }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        expect(graph.edges).toHaveLength(1);
+        expect(graph.edges[0]).toMatchObject({
+            source: pluginAddress.toLowerCase(),
+            target: daoAddress.toLowerCase(),
+            permissionName: 'EXECUTE_PERMISSION',
+        });
+    });
+
+    it('carries the underlying permission row on the edge', () => {
+        const row = buildRow({
+            permissionId: EXECUTE_PERMISSION_ID,
+            whoAddress: pluginAddress,
+            whereAddress: daoAddress,
+            conditionAddress,
+            condition: { conditionType: 'voting-power' },
+        });
+
+        const graph = buildPermissionGraph({ rows: [row], dao, daoPlugins });
+
+        expect(graph.edges[0].row).toEqual(row);
+    });
+
+    it('labels the edge condition when a real condition is present', () => {
+        const graph = buildPermissionGraph({
+            rows: [
+                buildRow({
+                    whoAddress: pluginAddress,
+                    whereAddress: daoAddress,
+                    conditionAddress,
+                    condition: { conditionType: 'voting-power' },
+                }),
+            ],
+            dao,
+            daoPlugins,
+        });
+
+        expect(graph.edges[0].conditionLabel).toBe('VotingPower');
+    });
+
+    it('omits the condition label for an unconditional (ALLOW_FLAG) grant', () => {
+        const graph = buildPermissionGraph({
+            rows: [buildRow({ conditionAddress: ALLOW_FLAG })],
+            dao,
+            daoPlugins,
+        });
+
+        expect(graph.edges[0].conditionLabel).toBeUndefined();
+    });
+});
diff --git a/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.ts b/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.ts
new file mode 100644
index 0000000000..bd886e77f4
--- /dev/null
+++ b/src/modules/settings/utils/buildPermissionGraph/buildPermissionGraph.ts
@@ -0,0 +1,139 @@
+import { addressUtils } from '@aragon/gov-ui-kit';
+import type { IDao, IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
+import type {
+    IPermissionGraph,
+    IPermissionGraphEdge,
+    IPermissionGraphNode,
+    IPermissionRow,
+} from '../../types';
+import { conditionTypeUtils } from '../conditionTypeUtils';
+import { permissionEntityUtils } from '../permissionEntityUtils';
+
+/**
+ * Placeholder returned by `conditionTypeUtils.getConditionLabel` when there is
+ * no displayable condition (unconditional grant or unresolvable type).
+ */
+const NO_CONDITION_LABEL = '-';
+
+export interface IBuildPermissionGraphParams {
+    /**
+     * Permission rows to visualise (the same data the list view consumes).
+     */
+    rows: IPermissionRow[];
+    /**
+     * The DAO the permissions belong to, used to classify the DAO and its linked
+     * DAO nodes.
+     */
+    dao: IDao;
+    /**
+     * Installed DAO plugins used to classify and label plugin nodes.
+     */
+    daoPlugins?: IFilterComponentPlugin<IDaoPlugin>[];
+}
+
+const resolveNode = (
+    address: string,
+    dao: IDao,
+    daoPlugins?: IFilterComponentPlugin<IDaoPlugin>[],
+): IPermissionGraphNode => {
+    const id = address.toLowerCase();
+
+    if (addressUtils.isAddressEqual(address, dao.address)) {
+        return {
+            id,
+            kind: 'dao',
+            label: dao.name,
+            avatarSrc: dao.avatar,
+            address,
+        };
+    }
+
+    const linkedAccount = dao.linkedAccounts?.find((account) =>
+        addressUtils.isAddressEqual(account.address, address),
+    );
+
+    if (linkedAccount != null) {
+        return {
+            id,
+            kind: 'linkedDao',
+            label: linkedAccount.name,
+            avatarSrc: linkedAccount.avatar,
+            address,
+        };
+    }
+
+    const entity = permissionEntityUtils.resolvePermissionEntity(
+        address,
+        daoPlugins,
+    );
+
+    if (entity.tag != null) {
+        return {
+            id,
+            kind: 'plugin',
+            label: entity.label,
+            tag: entity.tag,
+            address,
+        };
+    }
+
+    return { id, kind: 'actor', label: entity.label, address };
+};
+
+const resolveEdge = (row: IPermissionRow): IPermissionGraphEdge => {
+    const source = row.whoAddress.toLowerCase();
+    const target = row.whereAddress.toLowerCase();
+
+    const permissionName = permissionNameUtils.getPermissionName(
+        row.permissionId,
+    );
+
+    const conditionType = conditionTypeUtils.resolveConditionType(
+        row.conditionAddress,
+        row.condition,
+    );
+    const conditionLabel = conditionTypeUtils.getConditionLabel(conditionType);
+
+    return {
+        id: `${row.permissionId}-${source}-${target}`,
+        source,
+        target,
+        permissionName,
+        conditionLabel:
+            conditionLabel === NO_CONDITION_LABEL ? undefined : conditionLabel,
+        row,
+    };
+};
+
+/**
+ * Derives a permission graph (deduplicated nodes + directed permission edges)
+ * from permission rows. Everything is derived from the data — node kinds and
+ * labels come from the DAO context and the shared permission utilities, never
+ * from hardcoded addresses.
+ */
+export const buildPermissionGraph = (
+    params: IBuildPermissionGraphParams,
+): IPermissionGraph => {
+    const { rows, dao, daoPlugins } = params;
+
+    const nodesById = new Map<string, IPermissionGraphNode>();
+
+    const ensureNode = (address: string): void => {
+        const id = address.toLowerCase();
+
+        if (!nodesById.has(id)) {
+            nodesById.set(id, resolveNode(address, dao, daoPlugins));
+        }
+    };
+
+    const edges = rows.map((row) => {
+        ensureNode(row.whoAddress);
+        ensureNode(row.whereAddress);
+
+        return resolveEdge(row);
+    });
+
+    return { nodes: [...nodesById.values()], edges };
+};
diff --git a/src/modules/settings/utils/buildPermissionGraph/index.ts b/src/modules/settings/utils/buildPermissionGraph/index.ts
new file mode 100644
index 0000000000..bfc863f2c9
--- /dev/null
+++ b/src/modules/settings/utils/buildPermissionGraph/index.ts
@@ -0,0 +1,4 @@
+export {
+    buildPermissionGraph,
+    type IBuildPermissionGraphParams,
+} from './buildPermissionGraph';
diff --git a/src/modules/settings/utils/permissionGraphLayout/index.ts b/src/modules/settings/utils/permissionGraphLayout/index.ts
new file mode 100644
index 0000000000..247c6c74ae
--- /dev/null
+++ b/src/modules/settings/utils/permissionGraphLayout/index.ts
@@ -0,0 +1,5 @@
+export {
+    getLayoutedElements,
+    type IGetLayoutedElementsOptions,
+    type PermissionGraphDirection,
+} from './permissionGraphLayout';
diff --git a/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.test.ts b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.test.ts
new file mode 100644
index 0000000000..c17d3c9467
--- /dev/null
+++ b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.test.ts
@@ -0,0 +1,57 @@
+import type { Edge, Node } from '@xyflow/react';
+import { getLayoutedElements } from './permissionGraphLayout';
+
+const makeNode = (
+    id: string,
+    measured: { width: number; height: number } = { width: 200, height: 80 },
+): Node => ({
+    id,
+    position: { x: 0, y: 0 },
+    data: {},
+    measured,
+});
+
+describe('getLayoutedElements', () => {
+    it('converts dagre center coordinates to top-left using node dimensions', () => {
+        const nodes = [makeNode('a', { width: 200, height: 80 })];
+
+        const { nodes: layouted } = getLayoutedElements(nodes, []);
+
+        expect(layouted[0].position).toEqual({ x: 0, y: 0 });
+    });
+
+    it('assigns a numeric, non-overlapping position to every node', () => {
+        const nodes = [makeNode('a'), makeNode('b')];
+        const edges: Edge[] = [{ id: 'e', source: 'a', target: 'b' }];
+
+        const { nodes: layouted } = getLayoutedElements(nodes, edges);
+
+        for (const node of layouted) {
+            expect(typeof node.position.x).toBe('number');
+            expect(typeof node.position.y).toBe('number');
+        }
+        expect(layouted[0].position).not.toEqual(layouted[1].position);
+    });
+
+    it('returns a new nodes array reference without mutating the input', () => {
+        const nodes = [makeNode('a')];
+
+        const result = getLayoutedElements(nodes, []);
+
+        expect(result.nodes).not.toBe(nodes);
+        expect(nodes[0].position).toEqual({ x: 0, y: 0 });
+    });
+
+    it('places the edge target above its source for BT direction', () => {
+        const nodes = [makeNode('a'), makeNode('b')];
+        const edges: Edge[] = [{ id: 'e', source: 'a', target: 'b' }];
+
+        const { nodes: layouted } = getLayoutedElements(nodes, edges, {
+            direction: 'BT',
+        });
+
+        const source = layouted.find((node) => node.id === 'a');
+        const target = layouted.find((node) => node.id === 'b');
+        expect(target?.position.y).toBeLessThan(source?.position.y ?? 0);
+    });
+});
diff --git a/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts
new file mode 100644
index 0000000000..9dd3c038a8
--- /dev/null
+++ b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts
@@ -0,0 +1,81 @@
+import dagre from '@dagrejs/dagre';
+import type { Edge, Node } from '@xyflow/react';
+
+/**
+ * Direction the graph flows, mapped to dagre's `rankdir`. The permissions graph
+ * uses `BT` so grantees sit below the targets they act on (Figma 21334-247470).
+ */
+export type PermissionGraphDirection = 'TB' | 'BT' | 'LR' | 'RL';
+
+export interface IGetLayoutedElementsOptions {
+    /**
+     * Rank direction. Defaults to `BT` (bottom-to-top).
+     */
+    direction?: PermissionGraphDirection;
+    /**
+     * Separation between nodes in the same rank.
+     */
+    nodesep?: number;
+    /**
+     * Separation between ranks.
+     */
+    ranksep?: number;
+}
+
+/**
+ * Fallback node dimensions used when a node has not yet been measured by React
+ * Flow. Dagre requires explicit dimensions to lay out the graph.
+ */
+const DEFAULT_NODE_WIDTH = 280;
+const DEFAULT_NODE_HEIGHT = 88;
+const DEFAULT_NODE_SEP = 130;
+const DEFAULT_RANK_SEP = 220;
+
+const getNodeSize = (node: Node): { width: number; height: number } => ({
+    width: node.measured?.width ?? DEFAULT_NODE_WIDTH,
+    height: node.measured?.height ?? DEFAULT_NODE_HEIGHT,
+});
+
+/**
+ * Runs dagre auto-layout over the given nodes/edges and returns a NEW nodes
+ * array with computed positions. Dagre reports node centres; React Flow expects
+ * the top-left corner, so each position is converted with the same dimensions
+ * fed to dagre.
+ */
+export const getLayoutedElements = (
+    nodes: Node[],
+    edges: Edge[],
+    options: IGetLayoutedElementsOptions = {},
+): { nodes: Node[]; edges: Edge[] } => {
+    const {
+        direction = 'BT',
+        nodesep = DEFAULT_NODE_SEP,
+        ranksep = DEFAULT_RANK_SEP,
+    } = options;
+
+    const graph = new dagre.graphlib.Graph();
+    graph.setGraph({ rankdir: direction, nodesep, ranksep });
+    graph.setDefaultEdgeLabel(() => ({}));
+
+    for (const node of nodes) {
+        graph.setNode(node.id, getNodeSize(node));
+    }
+
+    for (const edge of edges) {
+        graph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(graph);
+
+    const layoutedNodes = nodes.map((node) => {
+        const { x, y } = graph.node(node.id);
+        const { width, height } = getNodeSize(node);
+
+        return {
+            ...node,
+            position: { x: x - width / 2, y: y - height / 2 },
+        };
+    });
+
+    return { nodes: layoutedNodes, edges };
+};
diff --git a/src/test/setup.ts b/src/test/setup.ts
index 9dacd213c1..09b1a93743 100644
--- a/src/test/setup.ts
+++ b/src/test/setup.ts
@@ -3,6 +3,7 @@
 import '@testing-library/jest-dom';
 import 'jest-canvas-mock';
 import { TextDecoder, TextEncoder } from 'node:util';
+import { deserialize, serialize } from 'node:v8';
 import { mockFetch, mockTranslations, testLogger, timeUtils } from './utils';
 
 // Setup test logger
@@ -20,6 +21,13 @@ timeUtils.setup();
 // Globally setup TextEncoder/TextDecoder needed by viem
 Object.assign(global, { TextDecoder, TextEncoder });
 
+// jsdom does not expose structuredClone, which @dagrejs/dagre relies on during
+// graph layout. Back it with v8 serialization for a faithful structured clone.
+if (typeof globalThis.structuredClone !== 'function') {
+    globalThis.structuredClone = <T>(value: T): T =>
+        deserialize(serialize(value)) as T;
+}
+
 // Mock ResizeObserver functionality
 global.ResizeObserver = jest.fn().mockImplementation(() => ({
     observe: jest.fn(),

From f442e171697b86daee691544f51658a5ba1c828c Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Wed, 1 Jul 2026 23:22:45 +0200
Subject: [PATCH 20/29] feat: Refine permissions graph nodes, edges, and detail
 card

---
 .../permissionsGraph/permissionDetailNode.tsx |  47 ++-
 .../permissionsGraph/permissionGraphEdge.tsx  | 110 +++--
 .../permissionsGraph/permissionGraphNode.tsx  |  11 +-
 .../permissionsGraphCanvas.tsx                | 391 +++++++++++++++---
 .../permissionGraphLayout.ts                  |   6 +-
 5 files changed, 448 insertions(+), 117 deletions(-)

diff --git a/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx b/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
index 26c22e13cb..096fb88295 100644
--- a/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionDetailNode.tsx
@@ -11,7 +11,7 @@ import { useState } from 'react';
 import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { SettingsSlotId } from '../../constants/moduleSlots';
-import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
 import type { IPermissionGraphEdge } from '../../types';
 import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
 import { NoConditionSlot } from '../noConditionSlot';
@@ -43,6 +43,23 @@ export const PermissionDetailNode: React.FC<
 
     const [tab, setTab] = useState<DetailTab>('permission');
 
+    const isWhoAnyAddress = addressUtils.isAddressEqual(
+        row.whoAddress,
+        ANY_ADDR,
+    );
+    const isWhereAnyAddress = addressUtils.isAddressEqual(
+        row.whereAddress,
+        ANY_ADDR,
+    );
+
+    const whoTruncated = addressUtils.truncateAddress(row.whoAddress);
+    const whereTruncated = addressUtils.truncateAddress(row.whereAddress);
+    // Only show the resolved name as the description when it adds information —
+    // unresolved actors are labelled by their own truncated address, which would
+    // otherwise just repeat the heading.
+    const whoName = whoLabel === whoTruncated ? undefined : whoLabel;
+    const whereName = whereLabel === whereTruncated ? undefined : whereLabel;
+
     const hasCondition = !addressUtils.isAddressEqual(
         row.conditionAddress,
         ALLOW_FLAG,
@@ -112,35 +129,35 @@ export const PermissionDetailNode: React.FC<
                 {tab === 'permission' ? (
                     <DefinitionList.Container>
                         <DefinitionList.Item
-                            copyValue={row.whoAddress}
-                            description={addressUtils.truncateAddress(
-                                row.whoAddress,
-                            )}
+                            copyValue={
+                                isWhoAnyAddress ? undefined : row.whoAddress
+                            }
+                            description={isWhoAnyAddress ? undefined : whoName}
                             term={t('app.settings.permissionsList.details.who')}
                         >
-                            {whoLabel}
+                            {isWhoAnyAddress ? whoLabel : whoTruncated}
                         </DefinitionList.Item>
                         <DefinitionList.Item
-                            copyValue={row.whereAddress}
-                            description={addressUtils.truncateAddress(
-                                row.whereAddress,
-                            )}
+                            copyValue={
+                                isWhereAnyAddress ? undefined : row.whereAddress
+                            }
+                            description={
+                                isWhereAnyAddress ? undefined : whereName
+                            }
                             term={t(
                                 'app.settings.permissionsList.details.where',
                             )}
                         >
-                            {whereLabel}
+                            {isWhereAnyAddress ? whereLabel : whereTruncated}
                         </DefinitionList.Item>
                         <DefinitionList.Item
                             copyValue={row.permissionId}
-                            description={addressUtils.truncateHash(
-                                row.permissionId,
-                            )}
+                            description={edge.permissionName}
                             term={t(
                                 'app.settings.permissionsList.details.permission',
                             )}
                         >
-                            {edge.permissionName}
+                            {addressUtils.truncateHash(row.permissionId)}
                         </DefinitionList.Item>
                     </DefinitionList.Container>
                 ) : (
diff --git a/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx b/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
index 1839c71199..4643664695 100644
--- a/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionGraphEdge.tsx
@@ -9,20 +9,32 @@ import classNames from 'classnames';
 import { useTranslations } from '@/shared/components/translationsProvider';
 
 /**
- * Data carried by a permission-graph edge: the resolved permission name and an
- * optional condition label rendered as an `if <label>` suffix.
+ * A single permission carried by an edge label. Multiple permissions between the
+ * same two nodes are stacked vertically so every one stays legible.
  */
-export interface IPermissionEdgeData {
+export interface IPermissionEdgeEntry {
+    /**
+     * Id of the underlying graph edge, passed back to `onSelect`.
+     */
+    edgeId: string;
     permissionName: string;
     conditionLabel?: string;
+}
+
+/**
+ * Data carried by a permission-graph edge: the permissions granted along it and
+ * the selection callback invoked when one of their labels is clicked.
+ */
+export interface IPermissionEdgeData {
+    permissions: IPermissionEdgeEntry[];
     /**
-     * Whether the edge is dimmed because another edge is selected.
+     * Whether the labels are dimmed because another edge is selected.
      */
     dimmed?: boolean;
     /**
-     * Selects this edge (invoked when its label is clicked).
+     * Selects the given permission (invoked when its label is clicked).
      */
-    onSelect?: () => void;
+    onSelect?: (edgeId: string) => void;
     [key: string]: unknown;
 }
 
@@ -38,6 +50,7 @@ export const PermissionGraphEdge: React.FC<EdgeProps<IPermissionFlowEdge>> = ({
     targetY,
     sourcePosition,
     targetPosition,
+    markerStart,
     markerEnd,
     style,
     data,
@@ -53,35 +66,66 @@ export const PermissionGraphEdge: React.FC<EdgeProps<IPermissionFlowEdge>> = ({
         targetPosition,
     });
 
+    const permissions = data?.permissions ?? [];
+
     return (
         <>
-            <BaseEdge markerEnd={markerEnd} path={edgePath} style={style} />
-            <EdgeLabelRenderer>
-                <button
-                    className={classNames(
-                        'nodrag nopan pointer-events-auto absolute flex cursor-pointer flex-col items-center gap-0.5 rounded-md bg-neutral-800 px-2 py-1 text-center font-mono text-neutral-0 text-xs',
-                        data?.dimmed === true && 'opacity-20',
-                    )}
-                    onClick={(event) => {
-                        event.stopPropagation();
-                        data?.onSelect?.();
-                    }}
-                    style={{
-                        transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
-                    }}
-                    type="button"
-                >
-                    <span>{data?.permissionName}</span>
-                    {data?.conditionLabel != null && (
-                        <span className="text-neutral-200">
-                            {t(
-                                'app.settings.daoPermissionsPage.graphView.edge.condition',
-                                { condition: data.conditionLabel },
-                            )}
-                        </span>
-                    )}
-                </button>
-            </EdgeLabelRenderer>
+            <BaseEdge
+                markerEnd={markerEnd}
+                markerStart={markerStart}
+                path={edgePath}
+                style={style}
+            />
+            {permissions.length > 0 && (
+                <EdgeLabelRenderer>
+                    <div
+                        className="nodrag nopan absolute flex flex-col items-center gap-1"
+                        style={{
+                            transform: `translate(-50%, -50%) translate(${labelX}px, ${labelY}px)`,
+                        }}
+                    >
+                        {permissions.map((permission) => {
+                            const isDimmed = data?.dimmed === true;
+
+                            return (
+                                <button
+                                    className={classNames(
+                                        'pointer-events-auto flex cursor-pointer flex-col items-center gap-0.5 rounded-md px-2 py-1 text-center font-mono text-neutral-0 text-xs',
+                                        isDimmed
+                                            ? 'bg-neutral-300'
+                                            : 'bg-neutral-800',
+                                    )}
+                                    key={permission.edgeId}
+                                    onClick={(event) => {
+                                        event.stopPropagation();
+                                        data?.onSelect?.(permission.edgeId);
+                                    }}
+                                    type="button"
+                                >
+                                    <span>{permission.permissionName}</span>
+                                    {permission.conditionLabel != null && (
+                                        <span
+                                            className={
+                                                isDimmed
+                                                    ? 'text-neutral-100'
+                                                    : 'text-neutral-200'
+                                            }
+                                        >
+                                            {t(
+                                                'app.settings.daoPermissionsPage.graphView.edge.condition',
+                                                {
+                                                    condition:
+                                                        permission.conditionLabel,
+                                                },
+                                            )}
+                                        </span>
+                                    )}
+                                </button>
+                            );
+                        })}
+                    </div>
+                </EdgeLabelRenderer>
+            )}
         </>
     );
 };
diff --git a/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx b/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
index 85f21f4473..56c37d4323 100644
--- a/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionGraphNode.tsx
@@ -1,4 +1,4 @@
-import { DaoAvatar, Tag } from '@aragon/gov-ui-kit';
+import { Avatar, DaoAvatar, Tag } from '@aragon/gov-ui-kit';
 import { Handle, type Node, type NodeProps, Position } from '@xyflow/react';
 import classNames from 'classnames';
 import { useTranslations } from '@/shared/components/translationsProvider';
@@ -89,13 +89,10 @@ export const PermissionGraphNode: React.FC<NodeProps<IPermissionFlowNode>> = ({
                         src={avatarSrc ?? undefined}
                     />
                 )}
-                {kind === 'plugin' && tag != null && <Tag label={tag} />}
-                {kind === 'actor' && (
-                    <span
-                        aria-hidden="true"
-                        className="size-8 shrink-0 rounded-full bg-neutral-100"
-                    />
+                {kind === 'plugin' && tag != null && (
+                    <Tag className="self-start" label={tag} variant="primary" />
                 )}
+                {kind === 'actor' && <Avatar size="sm" />}
                 <Handle
                     className="opacity-0"
                     position={Position.Top}
diff --git a/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
index 791a629199..df32e8196d 100644
--- a/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
@@ -4,6 +4,7 @@ import {
     Background,
     Controls,
     type Edge,
+    MarkerType,
     type Node,
     ReactFlow,
     useEdgesState,
@@ -17,6 +18,7 @@ import { getLayoutedElements } from '../../utils/permissionGraphLayout';
 import { PermissionDetailNode } from './permissionDetailNode';
 import {
     type IPermissionEdgeData,
+    type IPermissionEdgeEntry,
     PermissionGraphEdge,
 } from './permissionGraphEdge';
 import { PermissionGraphNode } from './permissionGraphNode';
@@ -29,9 +31,42 @@ const edgeTypes = { permission: PermissionGraphEdge };
 
 const MIN_ZOOM = 0.2;
 const FIT_VIEW_OPTIONS = { padding: 0.2, maxZoom: 1, duration: 300 };
-const DIMMED_EDGE_OPACITY = 0.2;
 const UNPOSITIONED = { x: 0, y: 0 };
 
+// Every connector shows control-flow direction in every state: a dot where it
+// leaves its source (who) and an arrow where it enters its target (where). The
+// selected flow is drawn in primary. React Flow wraps bare dot marker ids as
+// url('#<id>') (see the <defs> in the canvas); the arrow uses a built-in marker.
+const EDGE_NEUTRAL = {
+    style: { stroke: 'var(--color-neutral-300)', strokeWidth: 1.5 },
+    markerStart: 'permission-dot-neutral',
+    markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: 'var(--color-neutral-300)',
+        width: 18,
+        height: 18,
+    },
+};
+const EDGE_SELECTED_IN = {
+    style: { stroke: 'var(--color-primary-400)', strokeWidth: 1.5 },
+    markerStart: 'permission-dot-primary',
+    markerEnd: 'permission-dot-primary',
+};
+const EDGE_SELECTED_OUT = {
+    style: { stroke: 'var(--color-primary-400)', strokeWidth: 1.5 },
+    markerStart: 'permission-dot-primary',
+    markerEnd: {
+        type: MarkerType.ArrowClosed,
+        color: 'var(--color-primary-400)',
+        width: 18,
+        height: 18,
+    },
+};
+
+// Vertical gap between the expanded detail card and the who/where nodes it
+// connects, so the inline card does not touch either node.
+const DETAIL_VERTICAL_GAP = 48;
+
 interface IBuildFlowParams {
     graph: IPermissionGraph;
     selectedEdgeId: string | null;
@@ -73,23 +108,48 @@ const buildFlowElements = ({
         };
     });
 
+    // Group permissions by the node pair they connect so parallel permissions
+    // between the same two nodes share one connector and stack their labels.
+    const pairKey = (source: string, target: string) => `${source} ${target}`;
+    const groups = new Map<
+        string,
+        { source: string; target: string; entries: IPermissionEdgeEntry[] }
+    >();
+    for (const edge of graph.edges) {
+        const key = pairKey(edge.source, edge.target);
+        const group = groups.get(key) ?? {
+            source: edge.source,
+            target: edge.target,
+            entries: [],
+        };
+        group.entries.push({
+            edgeId: edge.id,
+            permissionName: edge.permissionName,
+            conditionLabel: edge.conditionLabel,
+        });
+        groups.set(key, group);
+    }
+
     const detailNodes: Node[] = [];
-    let flowEdges: Edge[];
+    const flowEdges: Edge[] = [];
 
     if (selectedEdge == null) {
-        flowEdges = graph.edges.map((edge) => ({
-            id: edge.id,
-            source: edge.source,
-            target: edge.target,
-            type: 'permission',
-            data: {
-                permissionName: edge.permissionName,
-                conditionLabel: edge.conditionLabel,
-                onSelect: () => onSelectEdge(edge.id),
-            } satisfies IPermissionEdgeData,
-        }));
+        for (const group of groups.values()) {
+            flowEdges.push({
+                id: pairKey(group.source, group.target),
+                source: group.source,
+                target: group.target,
+                type: 'permission',
+                ...EDGE_NEUTRAL,
+                data: {
+                    permissions: group.entries,
+                    onSelect: onSelectEdge,
+                } satisfies IPermissionEdgeData,
+            });
+        }
     } else {
         const detailId = `detail-${selectedEdge.id}`;
+        const selectedKey = pairKey(selectedEdge.source, selectedEdge.target);
 
         detailNodes.push({
             id: detailId,
@@ -104,44 +164,62 @@ const buildFlowElements = ({
             },
         });
 
-        flowEdges = graph.edges.flatMap((edge) => {
-            if (edge.id === selectedEdge.id) {
-                return [
-                    {
-                        id: `${edge.id}-in`,
-                        source: edge.source,
-                        target: detailId,
-                        type: 'smoothstep',
-                    },
-                    {
-                        id: `${edge.id}-out`,
-                        source: detailId,
-                        target: edge.target,
-                        type: 'smoothstep',
-                    },
-                ];
-            }
+        for (const group of groups.values()) {
+            const key = pairKey(group.source, group.target);
 
-            // Hide sibling permissions between the same pair so they don't draw
-            // duplicate connectors alongside the expanded detail node.
-            if (
-                edge.source === selectedEdge.source &&
-                edge.target === selectedEdge.target
-            ) {
-                return [];
+            if (key !== selectedKey) {
+                // Other relationships stay visible but dimmed, labels intact.
+                flowEdges.push({
+                    id: key,
+                    source: group.source,
+                    target: group.target,
+                    type: 'permission',
+                    ...EDGE_NEUTRAL,
+                    data: {
+                        permissions: group.entries,
+                        dimmed: true,
+                        onSelect: onSelectEdge,
+                    } satisfies IPermissionEdgeData,
+                });
+                continue;
             }
 
-            // Other edges become plain dimmed lines without labels.
-            return [
-                {
-                    id: edge.id,
-                    source: edge.source,
-                    target: edge.target,
-                    type: 'smoothstep',
-                    style: { opacity: DIMMED_EDGE_OPACITY },
-                },
-            ];
-        });
+            // Selected relationship: route through the detail card in primary.
+            // Sibling permissions on the same pair ride the who→detail connector,
+            // dimmed, so they stay visible without overlapping the card.
+            const siblings = group.entries.filter(
+                (entry) => entry.edgeId !== selectedEdge.id,
+            );
+            flowEdges.push(
+                siblings.length > 0
+                    ? {
+                          id: `${selectedEdge.id}-in`,
+                          source: selectedEdge.source,
+                          target: detailId,
+                          type: 'permission',
+                          ...EDGE_SELECTED_IN,
+                          data: {
+                              permissions: siblings,
+                              dimmed: true,
+                              onSelect: onSelectEdge,
+                          } satisfies IPermissionEdgeData,
+                      }
+                    : {
+                          id: `${selectedEdge.id}-in`,
+                          source: selectedEdge.source,
+                          target: detailId,
+                          type: 'smoothstep',
+                          ...EDGE_SELECTED_IN,
+                      },
+            );
+            flowEdges.push({
+                id: `${selectedEdge.id}-out`,
+                source: detailId,
+                target: selectedEdge.target,
+                type: 'smoothstep',
+                ...EDGE_SELECTED_OUT,
+            });
+        }
     }
 
     return { nodes: [...permissionNodes, ...detailNodes], edges: flowEdges };
@@ -160,9 +238,22 @@ export const PermissionsGraphCanvas: React.FC<IPermissionsGraphCanvasProps> = ({
     const [selectedEdgeId, setSelectedEdgeId] = useState<string | null>(null);
     const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
     const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
-    const { fitView, getNodes, getEdges } = useReactFlow();
+    const { fitView, getNodes } = useReactFlow();
     const nodesInitialized = useNodesInitialized();
-    const layoutKey = useRef('');
+
+    // Positions the board returns to when the detail card closes. Captured live
+    // at the moment of selection, so any manual node drags before opening are
+    // the "last known" arrangement we restore to — not the initial auto-layout.
+    const restorePositions = useRef(
+        new Map<string, { x: number; y: number }>(),
+    );
+    // Whether a permission is currently expanded, tracked across renders so the
+    // effect can tell the open/close transitions apart from steady states.
+    const wasSelected = useRef(false);
+    // Measured permission-node set the dagre auto-layout last ran for. Auto
+    // layout only re-runs when this changes (sizes settling), so it never
+    // clobbers manual drags, which leave the signature untouched.
+    const autoLayoutSignature = useRef('');
 
     const selectEdge = useCallback((edgeId: string) => {
         setSelectedEdgeId((current) => (current === edgeId ? null : edgeId));
@@ -212,23 +303,164 @@ export const PermissionsGraphCanvas: React.FC<IPermissionsGraphCanvasProps> = ({
     const [layoutVersion, setLayoutVersion] = useState(0);
 
     useEffect(() => {
+        if (!nodesInitialized || layoutSignature === '') {
+            return;
+        }
+
+        const currentNodes = getNodes();
+        const permissionNodes = currentNodes.filter(
+            (node) => node.type === 'permission',
+        );
+
+        if (permissionNodes.length === 0) {
+            return;
+        }
+
+        // Signature of just the permission nodes: the auto-layout only depends
+        // on these, so the detail card settling to its size never re-flows the
+        // board, and manual drags (which don't change sizes) are preserved.
+        const permissionSignature = permissionNodes
+            .map(
+                (node) =>
+                    `${node.id}:${Math.round(node.measured?.width ?? 0)}x${Math.round(node.measured?.height ?? 0)}`,
+            )
+            .join('|');
+
+        // Selection state is read from the node set the sibling effect produced,
+        // NOT from `selectedEdgeId`. This keeps the layout a pure function of the
+        // committed nodes: it runs one commit after selection changes (when the
+        // detail node is already in the store) and can never clobber it.
+        const detailNode = currentNodes.find(
+            (node) => node.type === 'permissionDetail',
+        );
+        const whoNode = permissionNodes.find(
+            (node) => node.data.selectionRole === 'who',
+        );
+        const whereNode = permissionNodes.find(
+            (node) => node.data.selectionRole === 'where',
+        );
+        const isSelected =
+            detailNode != null && whoNode != null && whereNode != null;
+
+        // Auto-layout: run dagre once per size change while unselected. It never
+        // runs during a selection (would fight the frozen board) and never after
+        // sizes settle (would clobber drags), so the restore baseline follows
+        // the user's own arrangement.
         if (
-            !nodesInitialized ||
-            layoutSignature === '' ||
-            layoutKey.current === layoutSignature
+            !isSelected &&
+            autoLayoutSignature.current !== permissionSignature
         ) {
+            const baseTopology = graph.edges.map((edge) => ({
+                id: edge.id,
+                source: edge.source,
+                target: edge.target,
+            }));
+            const { nodes: baseNodes } = getLayoutedElements(
+                permissionNodes,
+                baseTopology,
+                { direction: 'BT' },
+            );
+            const laid = new Map(
+                baseNodes.map((node) => [node.id, node.position]),
+            );
+            autoLayoutSignature.current = permissionSignature;
+            restorePositions.current = laid;
+            wasSelected.current = false;
+            setNodes(
+                currentNodes.map((node) => ({
+                    ...node,
+                    position: laid.get(node.id) ?? node.position,
+                })),
+            );
+            setLayoutVersion((version) => version + 1);
             return;
         }
 
-        const { nodes: laidNodes } = getLayoutedElements(
-            getNodes(),
-            getEdges(),
-            { direction: 'BT' },
-        );
-        layoutKey.current = layoutSignature;
+        let laidNodes: Node[];
+
+        if (whoNode == null || whereNode == null || detailNode == null) {
+            if (!wasSelected.current) {
+                // Steady unselected state: leave positions (respect drags).
+                return;
+            }
+            // Card just closed: return every node to its last-known position.
+            wasSelected.current = false;
+            const restore = restorePositions.current;
+            laidNodes = currentNodes.map((node) => ({
+                ...node,
+                position: restore.get(node.id) ?? node.position,
+            }));
+        } else {
+            // Card is open. On the opening frame, snapshot the live board (dagre
+            // layout plus any drags) so closing returns to exactly this.
+            if (!wasSelected.current) {
+                restorePositions.current = new Map(
+                    permissionNodes.map((node) => [node.id, node.position]),
+                );
+                wasSelected.current = true;
+            }
+            const frozen = restorePositions.current;
+            const whoBase = frozen.get(whoNode.id);
+            const whereBase = frozen.get(whereNode.id);
+
+            const whoWidth = whoNode.measured?.width ?? 0;
+            const whereWidth = whereNode.measured?.width ?? 0;
+            const whereHeight = whereNode.measured?.height ?? 0;
+            const detailWidth = detailNode.measured?.width ?? 0;
+            const detailHeight = detailNode.measured?.height ?? 0;
+
+            const columnCenterX =
+                whoBase != null && whereBase != null
+                    ? (whoBase.x +
+                          whoWidth / 2 +
+                          whereBase.x +
+                          whereWidth / 2) /
+                      2
+                    : (whoBase?.x ?? whereBase?.x ?? 0);
+
+            const detailY =
+                (whereBase?.y ?? 0) + whereHeight + DETAIL_VERTICAL_GAP;
+            const detailPosition = {
+                x: columnCenterX - detailWidth / 2,
+                y: detailY,
+            };
+            const whoPosition = {
+                x: whoBase?.x ?? columnCenterX,
+                y: detailY + detailHeight + DETAIL_VERTICAL_GAP,
+            };
+
+            // Amount the who node slides down to clear the inline card. Every
+            // node below the where node shifts by the same delta so the whole
+            // lower half opens up rigidly around the card — nodes not in the
+            // relationship relocate too, instead of being overlapped.
+            const shiftDelta = whoPosition.y - (whoBase?.y ?? 0);
+            const whereBaseY = whereBase?.y ?? 0;
+
+            laidNodes = currentNodes.map((node) => {
+                if (node.id === detailNode.id) {
+                    return { ...node, position: detailPosition };
+                }
+                if (node.id === whoNode.id) {
+                    return { ...node, position: whoPosition };
+                }
+
+                const base = frozen.get(node.id);
+                if (base == null) {
+                    return node;
+                }
+                // Nodes above/at the where rank stay; everything below slides
+                // down to make room for the expanded card.
+                const position =
+                    base.y > whereBaseY
+                        ? { x: base.x, y: base.y + shiftDelta }
+                        : base;
+                return { ...node, position };
+            });
+        }
+
         setNodes(laidNodes);
         setLayoutVersion((version) => version + 1);
-    }, [nodesInitialized, layoutSignature, getNodes, getEdges, setNodes]);
+    }, [nodesInitialized, layoutSignature, graph, getNodes, setNodes]);
 
     // Fit the view after the laid-out positions have committed.
     useEffect(() => {
@@ -257,6 +489,45 @@ export const PermissionsGraphCanvas: React.FC<IPermissionsGraphCanvasProps> = ({
             onPaneClick={clearSelection}
             proOptions={{ hideAttribution: true }}
         >
+            <svg
+                aria-hidden="true"
+                className="pointer-events-none absolute size-0"
+            >
+                <defs>
+                    <marker
+                        id="permission-dot-neutral"
+                        markerHeight="8"
+                        markerUnits="userSpaceOnUse"
+                        markerWidth="8"
+                        refX="4"
+                        refY="4"
+                        viewBox="0 0 8 8"
+                    >
+                        <circle
+                            cx="4"
+                            cy="4"
+                            fill="var(--color-neutral-300)"
+                            r="3.5"
+                        />
+                    </marker>
+                    <marker
+                        id="permission-dot-primary"
+                        markerHeight="8"
+                        markerUnits="userSpaceOnUse"
+                        markerWidth="8"
+                        refX="4"
+                        refY="4"
+                        viewBox="0 0 8 8"
+                    >
+                        <circle
+                            cx="4"
+                            cy="4"
+                            fill="var(--color-primary-400)"
+                            r="3.5"
+                        />
+                    </marker>
+                </defs>
+            </svg>
             <Background />
             <Controls showInteractive={false} />
         </ReactFlow>
diff --git a/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts
index 9dd3c038a8..6b81ebac10 100644
--- a/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts
+++ b/src/modules/settings/utils/permissionGraphLayout/permissionGraphLayout.ts
@@ -28,8 +28,10 @@ export interface IGetLayoutedElementsOptions {
  */
 const DEFAULT_NODE_WIDTH = 280;
 const DEFAULT_NODE_HEIGHT = 88;
-const DEFAULT_NODE_SEP = 130;
-const DEFAULT_RANK_SEP = 220;
+// Generous separation so parallel permission labels stacked at the midpoint of a
+// rank gap keep clear air around them and the graph reads like the Figma spec.
+const DEFAULT_NODE_SEP = 280;
+const DEFAULT_RANK_SEP = 400;
 
 const getNodeSize = (node: Node): { width: number; height: number } => ({
     width: node.measured?.width ?? DEFAULT_NODE_WIDTH,

From a85e532c7719707004b2123b9d189ba6066613e5 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 01:09:13 +0200
Subject: [PATCH 21/29] refactor: Reuse shared string/address utils and add
 permission-id helper

---
 .../executeSelectorConditionSlot.tsx          |  6 ++--
 .../votingPowerConditionSlot.tsx              |  8 ++---
 .../conditionTypeUtils/conditionTypeUtils.ts  | 13 ++------
 .../permissionNameUtils.test.ts               |  4 +--
 .../permissionNameUtils.ts                    | 21 ++++++------
 src/shared/utils/stringUtils/index.ts         |  1 +
 .../utils/stringUtils/stringUtils.test.ts     | 32 +++++++++++++++++++
 src/shared/utils/stringUtils/stringUtils.ts   | 23 +++++++++++++
 8 files changed, 76 insertions(+), 32 deletions(-)
 create mode 100644 src/shared/utils/stringUtils/index.ts
 create mode 100644 src/shared/utils/stringUtils/stringUtils.test.ts
 create mode 100644 src/shared/utils/stringUtils/stringUtils.ts

diff --git a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
index a0d65e6577..7f9e9afe42 100644
--- a/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
+++ b/src/modules/settings/components/executeSelectorConditionSlot/executeSelectorConditionSlot.tsx
@@ -3,6 +3,7 @@
 import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit';
 import type { IConditionData } from '@/modules/settings/types';
 import { useTranslations } from '@/shared/components/translationsProvider';
+import { stringUtils } from '@/shared/utils/stringUtils';
 
 const EMPTY_VALUE = '—';
 
@@ -11,11 +12,8 @@ interface IAllowedAction {
     target: string;
 }
 
-const isNonEmptyString = (value: unknown): value is string =>
-    typeof value === 'string' && value.length > 0;
-
 const toStringList = (value: unknown): string[] =>
-    Array.isArray(value) ? value.filter(isNonEmptyString) : [];
+    Array.isArray(value) ? value.filter(stringUtils.isNonEmptyString) : [];
 
 const toAllowedActions = (
     selectors: unknown,
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
index 4645b3ca0d..decc94b11c 100644
--- a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
@@ -3,14 +3,12 @@
 import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit';
 import type { IConditionData } from '@/modules/settings/types';
 import { useTranslations } from '@/shared/components/translationsProvider';
+import { stringUtils } from '@/shared/utils/stringUtils';
 
 const EMPTY_VALUE = '—';
 
-const isNonEmptyString = (value: unknown): value is string =>
-    typeof value === 'string' && value.length > 0;
-
 const resolveMinVotingPower = (value: unknown): string => {
-    if (isNonEmptyString(value)) {
+    if (stringUtils.isNonEmptyString(value)) {
         return value;
     }
 
@@ -25,7 +23,7 @@ export const VotingPowerConditionSlot: React.FC<IConditionData> = (props) => {
     const { token, minVotingPower } = props;
     const { t } = useTranslations();
 
-    const tokenLabel = isNonEmptyString(token)
+    const tokenLabel = stringUtils.isNonEmptyString(token)
         ? addressUtils.truncateAddress(token)
         : EMPTY_VALUE;
     const minVotingPowerLabel = resolveMinVotingPower(minVotingPower);
diff --git a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
index 8dc5e87f6b..89fc594a37 100644
--- a/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
+++ b/src/modules/settings/utils/conditionTypeUtils/conditionTypeUtils.ts
@@ -1,3 +1,4 @@
+import { stringUtils } from '@/shared/utils/stringUtils';
 import { ALLOW_FLAG } from '../../constants/permissionSentinels';
 import type { IConditionData } from '../../types';
 
@@ -28,8 +29,6 @@ const CONDITION_LABELS: Record<string, string> = {
     'execute-selector': 'ExecuteSelector',
 };
 
-const WORD_SEPARATOR_REGEX = /[^a-z0-9]+/i;
-
 class ConditionTypeUtils {
     /**
      * Resolves the display condition type for a permission.
@@ -85,16 +84,10 @@ class ConditionTypeUtils {
         }
 
         return (
-            CONDITION_LABELS[conditionType] ?? this.toPascalCase(conditionType)
+            CONDITION_LABELS[conditionType] ??
+            stringUtils.toPascalCase(conditionType)
         );
     };
-
-    private toPascalCase = (value: string): string =>
-        value
-            .split(WORD_SEPARATOR_REGEX)
-            .filter((word) => word.length > 0)
-            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
-            .join('');
 }
 
 export const conditionTypeUtils = new ConditionTypeUtils();
diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
index 73f1347573..6b1e3256ee 100644
--- a/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.test.ts
@@ -56,12 +56,12 @@ describe('permissionNameUtils', () => {
             {
                 permissionId:
                     '0x0123456789abcdef0123456789abcdef0123456789abcdef0123456789abcdef',
-                expected: '0x0123…cdef',
+                expected: '0x01234567…89abcdef',
             },
             {
                 permissionId:
                     '0xdeadbeef00000000000000000000000000000000000000000000000000001234',
-                expected: '0xdead…1234',
+                expected: '0xdeadbeef…00001234',
             },
         ])('returns the truncated fallback $expected for the unmapped hash $permissionId', ({
             permissionId,
diff --git a/src/shared/utils/permissionNameUtils/permissionNameUtils.ts b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
index c9e1fc0d32..05c232f338 100644
--- a/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
+++ b/src/shared/utils/permissionNameUtils/permissionNameUtils.ts
@@ -1,8 +1,6 @@
+import { addressUtils } from '@aragon/gov-ui-kit';
 import { keccak256, toBytes } from 'viem';
 
-const truncatedHashPrefixLength = 6;
-const truncatedHashSuffixLength = 4;
-
 /**
  * Canonical list of Aragon OSx, plugin, and AccessControl permission names.
  *
@@ -137,21 +135,22 @@ class PermissionNameUtils {
             return name;
         }
 
-        return this.truncateHash(permissionId);
+        return addressUtils.truncateHash(this.normaliseHash(permissionId));
     };
 
+    /**
+     * Returns the keccak256 permission-id hash for a raw permission name. Inverse
+     * of {@link getPermissionName}; the {@link permissionNames} list is the single
+     * source of truth for both directions.
+     */
+    getPermissionId = (permissionName: string): string =>
+        keccak256(toBytes(permissionName));
+
     private normaliseHash = (hash: string): string => {
         const lowerCased = hash.toLowerCase();
 
         return lowerCased.startsWith('0x') ? lowerCased : `0x${lowerCased}`;
     };
-
-    private truncateHash = (hash: string): string => {
-        const prefix = hash.slice(0, truncatedHashPrefixLength);
-        const suffix = hash.slice(-truncatedHashSuffixLength);
-
-        return `${prefix}…${suffix}`;
-    };
 }
 
 export const permissionNameUtils = new PermissionNameUtils();
diff --git a/src/shared/utils/stringUtils/index.ts b/src/shared/utils/stringUtils/index.ts
new file mode 100644
index 0000000000..b8a8825413
--- /dev/null
+++ b/src/shared/utils/stringUtils/index.ts
@@ -0,0 +1 @@
+export { stringUtils } from './stringUtils';
diff --git a/src/shared/utils/stringUtils/stringUtils.test.ts b/src/shared/utils/stringUtils/stringUtils.test.ts
new file mode 100644
index 0000000000..833f6363b3
--- /dev/null
+++ b/src/shared/utils/stringUtils/stringUtils.test.ts
@@ -0,0 +1,32 @@
+import { stringUtils } from './stringUtils';
+
+describe('stringUtils', () => {
+    describe('isNonEmptyString', () => {
+        it.each([
+            { value: 'hello', expected: true },
+            { value: ' ', expected: true },
+            { value: '', expected: false },
+            { value: undefined, expected: false },
+            { value: null, expected: false },
+            { value: 0, expected: false },
+            { value: 42, expected: false },
+            { value: [], expected: false },
+            { value: {}, expected: false },
+        ])('returns $expected for $value', ({ value, expected }) => {
+            expect(stringUtils.isNonEmptyString(value)).toBe(expected);
+        });
+    });
+
+    describe('toPascalCase', () => {
+        it.each([
+            { value: 'execute-selector', expected: 'ExecuteSelector' },
+            { value: 'voting-power', expected: 'VotingPower' },
+            { value: 'snake_case_value', expected: 'SnakeCaseValue' },
+            { value: 'already Pascal', expected: 'AlreadyPascal' },
+            { value: 'single', expected: 'Single' },
+            { value: '', expected: '' },
+        ])('converts "$value" to "$expected"', ({ value, expected }) => {
+            expect(stringUtils.toPascalCase(value)).toBe(expected);
+        });
+    });
+});
diff --git a/src/shared/utils/stringUtils/stringUtils.ts b/src/shared/utils/stringUtils/stringUtils.ts
new file mode 100644
index 0000000000..0a34768c26
--- /dev/null
+++ b/src/shared/utils/stringUtils/stringUtils.ts
@@ -0,0 +1,23 @@
+const WORD_SEPARATOR_REGEX = /[^a-z0-9]+/i;
+
+class StringUtils {
+    /**
+     * Type guard narrowing an unknown value to a non-empty string.
+     */
+    isNonEmptyString = (value: unknown): value is string =>
+        typeof value === 'string' && value.length > 0;
+
+    /**
+     * Converts a delimited string (e.g. `execute-selector`) into its Pascal-cased
+     * form (e.g. `ExecuteSelector`). Any non-alphanumeric run is treated as a word
+     * boundary.
+     */
+    toPascalCase = (value: string): string =>
+        value
+            .split(WORD_SEPARATOR_REGEX)
+            .filter((word) => word.length > 0)
+            .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+            .join('');
+}
+
+export const stringUtils = new StringUtils();

From 05140f044dd9960cd35dc640ee4bc7e2925dbd80 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 01:09:26 +0200
Subject: [PATCH 22/29] feat: Gate permissions page and entry points behind a
 feature flag

---
 .../components/daoHierarchy/daoHierarchy.tsx  |  9 ++++--
 .../daoSettingsInfo/daoSettingsInfo.test.tsx  | 29 ++++++++++++++++++
 .../daoSettingsInfo/daoSettingsInfo.tsx       | 30 ++++++++++++-------
 .../daoPermissionsPage/daoPermissionsPage.tsx |  6 ++++
 src/shared/featureFlags/featureFlags.api.ts   |  3 +-
 .../featureFlags/featureFlags.constants.ts    | 12 ++++++++
 6 files changed, 75 insertions(+), 14 deletions(-)

diff --git a/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx b/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
index c926bcc6c1..bc52c36dbf 100644
--- a/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
+++ b/src/modules/settings/components/daoHierarchy/daoHierarchy.tsx
@@ -12,6 +12,7 @@ import {
 } from '@aragon/gov-ui-kit';
 import type { IDao, ILinkedAccountSummary } from '@/shared/api/daoService';
 import { DaoTypeTag } from '@/shared/components/daoTypeTag';
+import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { daoUtils } from '@/shared/utils/daoUtils';
@@ -144,7 +145,7 @@ const DaoInfo: React.FC<IDaoInfoProps> = ({ dao, permissionsHref }) => {
                     description={t(
                         'app.settings.daoSettingsInfo.permissionsDescription',
                     )}
-                    link={{ href: permissionsHref }}
+                    link={{ href: permissionsHref, isExternal: false }}
                     term={t('app.settings.daoSettingsInfo.permissions')}
                 >
                     {t('app.settings.daoSettingsInfo.permissionsLink')}
@@ -157,6 +158,8 @@ const DaoInfo: React.FC<IDaoInfoProps> = ({ dao, permissionsHref }) => {
 export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
     const { dao, currentDaoId } = props;
 
+    const { isEnabled } = useFeatureFlags();
+
     const isViewingMainDao = dao.id === currentDaoId;
     const hasLinkedAccounts =
         dao.linkedAccounts != null && dao.linkedAccounts.length > 0;
@@ -164,7 +167,9 @@ export const DaoHierarchy: React.FC<IDaoHierarchyProps> = (props) => {
     const getDaoAvatar = (d: IDao | ILinkedAccountSummary) =>
         ipfsUtils.cidToSrc(d.avatar);
 
-    const permissionsHref = daoUtils.getDaoUrl(dao, 'settings/permissions');
+    const permissionsHref = isEnabled('permissionsPage')
+        ? daoUtils.getDaoUrl(dao, 'settings/permissions')
+        : undefined;
 
     // If viewing main DAO with linked accounts, show accordion structure
     if (isViewingMainDao && hasLinkedAccounts) {
diff --git a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
index 603e1197ba..66ad0579e2 100644
--- a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
+++ b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.test.tsx
@@ -2,6 +2,7 @@ import type * as GovUiKit from '@aragon/gov-ui-kit';
 import { GukModulesProvider } from '@aragon/gov-ui-kit';
 import { render, screen } from '@testing-library/react';
 import { Network } from '@/shared/api/daoService';
+import * as featureFlagsProvider from '@/shared/components/featureFlagsProvider';
 import { generateDao } from '@/shared/testUtils';
 import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { DaoSettingsInfo, type IDaoSettingsInfoProps } from './daoSettingsInfo';
@@ -14,6 +15,25 @@ jest.mock('@aragon/gov-ui-kit', () => ({
 }));
 
 describe('<DaoSettingsInfo /> component', () => {
+    const useFeatureFlagsSpy = jest.spyOn(
+        featureFlagsProvider,
+        'useFeatureFlags',
+    );
+
+    const setPermissionsPageEnabled = (enabled: boolean) => {
+        useFeatureFlagsSpy.mockReturnValue({
+            isEnabled: (key) => key === 'permissionsPage' && enabled,
+        } as ReturnType<typeof featureFlagsProvider.useFeatureFlags>);
+    };
+
+    beforeEach(() => {
+        setPermissionsPageEnabled(true);
+    });
+
+    afterEach(() => {
+        useFeatureFlagsSpy.mockReset();
+    });
+
     const createTestComponent = (props?: Partial<IDaoSettingsInfoProps>) => {
         const completeProps: IDaoSettingsInfoProps = {
             dao: generateDao(),
@@ -79,6 +99,15 @@ describe('<DaoSettingsInfo /> component', () => {
         );
     });
 
+    it('does not render the permissions link when the flag is disabled', () => {
+        setPermissionsPageEnabled(false);
+        render(createTestComponent());
+
+        expect(
+            screen.queryByText(/daoSettingsInfo.permissionsLink/),
+        ).not.toBeInTheDocument();
+    });
+
     it('renders the correct definition values of the dao', () => {
         const dao = generateDao({
             name: 'Some DAO',
diff --git a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
index 9f714e6a74..feb28d0869 100644
--- a/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
+++ b/src/modules/settings/components/daoSettingsInfo/daoSettingsInfo.tsx
@@ -8,6 +8,7 @@ import {
     Tag,
 } from '@aragon/gov-ui-kit';
 import type { IDao } from '@/shared/api/daoService';
+import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { useDaoChain } from '@/shared/hooks/useDaoChain';
@@ -24,6 +25,7 @@ export interface IDaoSettingsInfoProps {
 export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
     const { dao } = props;
     const { t } = useTranslations();
+    const { isEnabled } = useFeatureFlags();
 
     const daoAvatar = ipfsUtils.cidToSrc(dao.avatar);
 
@@ -111,17 +113,23 @@ export const DaoSettingsInfo: React.FC<IDaoSettingsInfoProps> = (props) => {
                         </div>
                     </DefinitionList.Item>
                 )}
-                <DefinitionList.Item
-                    description={t(
-                        'app.settings.daoSettingsInfo.permissionsDescription',
-                    )}
-                    link={{
-                        href: daoUtils.getDaoUrl(dao, 'settings/permissions'),
-                    }}
-                    term={t('app.settings.daoSettingsInfo.permissions')}
-                >
-                    {t('app.settings.daoSettingsInfo.permissionsLink')}
-                </DefinitionList.Item>
+                {isEnabled('permissionsPage') && (
+                    <DefinitionList.Item
+                        description={t(
+                            'app.settings.daoSettingsInfo.permissionsDescription',
+                        )}
+                        link={{
+                            href: daoUtils.getDaoUrl(
+                                dao,
+                                'settings/permissions',
+                            ),
+                            isExternal: false,
+                        }}
+                        term={t('app.settings.daoSettingsInfo.permissions')}
+                    >
+                        {t('app.settings.daoSettingsInfo.permissionsLink')}
+                    </DefinitionList.Item>
+                )}
             </DefinitionList.Container>
         </Card>
     );
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
index 52f5e59c9e..c5bbb707e6 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPage.tsx
@@ -1,4 +1,6 @@
+import { notFound } from 'next/navigation-original';
 import { Page } from '@/shared/components/page';
+import { featureFlags } from '@/shared/featureFlags';
 import type { IDaoPageParams } from '@/shared/types';
 import { daoUtils } from '@/shared/utils/daoUtils';
 import { networkUtils } from '@/shared/utils/networkUtils';
@@ -22,6 +24,10 @@ export const DaoPermissionsPage: React.FC<IDaoPermissionsPageProps> = async (
         return null;
     }
 
+    if (!(await featureFlags.isEnabled('permissionsPage'))) {
+        notFound();
+    }
+
     const daoId = await daoUtils.resolveDaoId(daoPageParams);
 
     return (
diff --git a/src/shared/featureFlags/featureFlags.api.ts b/src/shared/featureFlags/featureFlags.api.ts
index 6b78f97aad..d41489b8e8 100644
--- a/src/shared/featureFlags/featureFlags.api.ts
+++ b/src/shared/featureFlags/featureFlags.api.ts
@@ -18,7 +18,8 @@ export type FeatureFlagKey =
     | 'useMocks'
     | 'enableAllPlugins'
     | 'existingProposalCreationCondition'
-    | 'aragonProfiles';
+    | 'aragonProfiles'
+    | 'permissionsPage';
 
 /**
  * Feature flag definition structure.
diff --git a/src/shared/featureFlags/featureFlags.constants.ts b/src/shared/featureFlags/featureFlags.constants.ts
index 528ea9a973..ea1246c2fe 100644
--- a/src/shared/featureFlags/featureFlags.constants.ts
+++ b/src/shared/featureFlags/featureFlags.constants.ts
@@ -146,4 +146,16 @@ export const FEATURE_FLAG_DEFINITIONS: FeatureFlagDefinition[] = [
             production: true,
         },
     },
+    {
+        key: 'permissionsPage',
+        name: 'Permissions page',
+        description:
+            'Enables the DAO settings permissions subpage and its entry points. Kept off in staging/production until the APP-953 backend is available.',
+        defaultValue: false,
+        environments: {
+            local: true,
+            development: true,
+            preview: true,
+        },
+    },
 ];

From fd2f54b86293e9cd56c02ef4df5a6d20db6ed847 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 01:09:38 +0200
Subject: [PATCH 23/29] fix: Scope DAO settings e2e crawl to governance process
 links

---
 e2e/helpers/pages/daoSettingsPage/daoSettingsPage.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/e2e/helpers/pages/daoSettingsPage/daoSettingsPage.ts b/e2e/helpers/pages/daoSettingsPage/daoSettingsPage.ts
index a77cd2a78e..d8c64984c0 100644
--- a/e2e/helpers/pages/daoSettingsPage/daoSettingsPage.ts
+++ b/e2e/helpers/pages/daoSettingsPage/daoSettingsPage.ts
@@ -16,7 +16,7 @@ export class DaoSettingsPage extends DaoPage {
     readonly daoInfoSection = () => this.page.getByRole('main');
 
     readonly governanceProcesses = () =>
-        this.page.getByRole('main').locator('a[href*="/settings/"]');
+        this.page.locator('#governance').locator('a[href*="/settings/"]');
 
     readonly firstProcess = () => this.governanceProcesses().first();
 

From 823d4f5a4213bc9fefee95ab8943b9c90d4538fa Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 01:09:40 +0200
Subject: [PATCH 24/29] feat: Align permissions list with Figma and resolve
 real entities

---
 .../permissionsList/permissionsList.test.tsx  |   4 +-
 .../permissionsList/permissionsList.tsx       | 250 ++++++++++++++----
 .../settings/constants/permissionsMocks.ts    |  87 +++---
 .../constants/permissionsPreviewRefs.ts       |  19 ++
 .../daoPermissionsPageClient.tsx              |  48 ++--
 .../utils/permissionEntityUtils/index.ts      |   2 +
 .../permissionEntityUtils.test.ts             |  51 +++-
 .../permissionEntityUtils.ts                  | 121 +++++++--
 8 files changed, 445 insertions(+), 137 deletions(-)
 create mode 100644 src/modules/settings/constants/permissionsPreviewRefs.ts

diff --git a/src/modules/settings/components/permissionsList/permissionsList.test.tsx b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
index bdc1bb6682..1da85aca8e 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.test.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
@@ -252,7 +252,9 @@ describe('<PermissionsList /> component', () => {
             expect.anything(),
         );
 
-        await user.click(screen.getByRole('tab', { name: 'Linked Treasury' }));
+        await user.click(
+            screen.getByRole('radio', { name: 'Linked Treasury' }),
+        );
 
         expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
             expect.objectContaining({
diff --git a/src/modules/settings/components/permissionsList/permissionsList.tsx b/src/modules/settings/components/permissionsList/permissionsList.tsx
index da6693d82c..48e4d79777 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.tsx
@@ -5,11 +5,17 @@ import {
     addressUtils,
     Button,
     CardEmptyState,
+    ChainEntityType,
+    DaoAvatar,
     DefinitionList,
+    Link,
     StateSkeletonBar,
-    Tabs,
     Tag,
+    Toggle,
+    ToggleGroup,
+    useBlockExplorer,
 } from '@aragon/gov-ui-kit';
+import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
 import {
     type Network,
@@ -19,13 +25,16 @@ import {
 import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
 import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
 import { useTranslations } from '@/shared/components/translationsProvider';
+import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
 import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
 import { SettingsSlotId } from '../../constants/moduleSlots';
 import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import { PermissionsPreviewRef } from '../../constants/permissionsPreviewRefs';
 import type { IPermissionRow } from '../../types';
 import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
 import {
+    type IPermissionAccountRef,
     type IPermissionEntity,
     permissionEntityUtils,
 } from '../../utils/permissionEntityUtils';
@@ -36,6 +45,10 @@ export interface IPermissionsListProps {
      * ID of the DAO to display permissions for.
      */
     daoId: string;
+    /**
+     * View switcher (list/graph toggle) rendered on the right of the filter row.
+     */
+    viewSwitcher?: ReactNode;
 }
 
 interface IPermissionsAccount {
@@ -43,6 +56,7 @@ interface IPermissionsAccount {
     name: string;
     network: Network;
     daoAddress: string;
+    avatar?: string | null;
 }
 
 const SKELETON_ROW_KEYS = [
@@ -56,7 +70,7 @@ const getRowKey = (row: IPermissionRow): string =>
     `${row.permissionId}-${row.whoAddress}-${row.whereAddress}`;
 
 export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
-    const { daoId } = props;
+    const { daoId, viewSwitcher } = props;
 
     const { t } = useTranslations();
     const { isEnabled } = useFeatureFlags();
@@ -77,6 +91,7 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
             name: dao.name,
             network: dao.network,
             daoAddress: dao.address,
+            avatar: dao.avatar,
         };
 
         const linkedAccounts = dao.linkedAccounts ?? [];
@@ -94,16 +109,33 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
                 name: account.name,
                 network: account.network,
                 daoAddress: account.address,
+                avatar: account.avatar,
             })),
         ];
     }, [dao, isEnabled]);
 
     const [selectedAccountId, setSelectedAccountId] = useState<string>();
     const activeAccountId = selectedAccountId ?? accounts[0]?.id;
+
+    const handleAccountChange = (value: string | string[] | undefined) => {
+        if (typeof value === 'string') {
+            setSelectedAccountId(value);
+        }
+    };
     const activeAccount =
         accounts.find((account) => account.id === activeAccountId) ??
         accounts[0];
 
+    const accountRefs = useMemo<IPermissionAccountRef[]>(
+        () =>
+            accounts.map((account) => ({
+                address: account.daoAddress,
+                name: account.name,
+                avatar: account.avatar,
+            })),
+        [accounts],
+    );
+
     const { data, isLoading } = useAllDaoPermissions(
         {
             urlParams: {
@@ -116,7 +148,31 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
 
     // NOTE: the optional `condition` field is supplied by the preview mock until
     // APP-953 formalizes it on the permissions response; cast at this boundary.
-    const rows = (data ?? []) as IPermissionRow[];
+    const rows = useMemo(() => {
+        const rawRows = (data ?? []) as IPermissionRow[];
+        const pluginAddresses = (daoPlugins ?? []).map(
+            (plugin) => plugin.meta.address,
+        );
+
+        // Swap preview markers for the viewed DAO's real addresses so the sample
+        // rows resolve to names/tags/avatars. No-op for real backend data.
+        const refMap = new Map<string, string | undefined>([
+            [
+                PermissionsPreviewRef.self.toLowerCase(),
+                activeAccount?.daoAddress,
+            ],
+            [PermissionsPreviewRef.plugin0.toLowerCase(), pluginAddresses[0]],
+            [PermissionsPreviewRef.plugin1.toLowerCase(), pluginAddresses[1]],
+        ]);
+        const resolveRef = (address: string): string =>
+            refMap.get(address.toLowerCase()) ?? address;
+
+        return rawRows.map((row) => ({
+            ...row,
+            whoAddress: resolveRef(row.whoAddress),
+            whereAddress: resolveRef(row.whereAddress),
+        }));
+    }, [data, daoPlugins, activeAccount]);
 
     const [expandedRows, setExpandedRows] = useState<string[]>([]);
     const allExpanded = rows.length > 0 && expandedRows.length === rows.length;
@@ -125,6 +181,10 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
         setExpandedRows(allExpanded ? [] : rows.map(getRowKey));
     };
 
+    const chainId = activeAccount
+        ? networkDefinitions[activeAccount.network].id
+        : undefined;
+
     const renderBody = () => {
         if (isLoading) {
             return <PermissionsListSkeleton />;
@@ -144,17 +204,6 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
 
         return (
             <div className="flex flex-col gap-3">
-                <div className="flex justify-end">
-                    <Button
-                        onClick={handleToggleAll}
-                        size="sm"
-                        variant="tertiary"
-                    >
-                        {allExpanded
-                            ? t('app.settings.permissionsList.collapseAll')
-                            : t('app.settings.permissionsList.expandAll')}
-                    </Button>
-                </div>
                 <PermissionsListHeader />
                 <Accordion.Container
                     isMulti={true}
@@ -163,6 +212,8 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
                 >
                     {rows.map((row) => (
                         <PermissionsListRow
+                            accounts={accountRefs}
+                            chainId={chainId}
                             daoPlugins={daoPlugins}
                             key={getRowKey(row)}
                             row={row}
@@ -174,27 +225,44 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
         );
     };
 
-    if (accounts.length <= 1) {
-        return renderBody();
-    }
+    const showAccountSelector = accounts.length > 1;
+    const showExpandAll = !isLoading && rows.length > 0;
 
     return (
-        <Tabs.Root onValueChange={setSelectedAccountId} value={activeAccountId}>
-            <Tabs.List>
-                {accounts.map((account) => (
-                    <Tabs.Trigger
-                        key={account.id}
-                        label={account.name}
-                        value={account.id}
-                    />
-                ))}
-            </Tabs.List>
-            {accounts.map((account) => (
-                <Tabs.Content key={account.id} value={account.id}>
-                    {renderBody()}
-                </Tabs.Content>
-            ))}
-        </Tabs.Root>
+        <div className="flex flex-col gap-6">
+            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                {showAccountSelector && (
+                    <ToggleGroup
+                        isMultiSelect={false}
+                        onChange={handleAccountChange}
+                        value={activeAccountId}
+                    >
+                        {accounts.map((account) => (
+                            <Toggle
+                                key={account.id}
+                                label={account.name}
+                                value={account.id}
+                            />
+                        ))}
+                    </ToggleGroup>
+                )}
+                <div className="flex items-center gap-3 md:ml-auto md:gap-6">
+                    {showExpandAll && (
+                        <Button
+                            onClick={handleToggleAll}
+                            size="md"
+                            variant="tertiary"
+                        >
+                            {allExpanded
+                                ? t('app.settings.permissionsList.collapseAll')
+                                : t('app.settings.permissionsList.expandAll')}
+                        </Button>
+                    )}
+                    {viewSwitcher}
+                </div>
+            </div>
+            {renderBody()}
+        </div>
     );
 };
 
@@ -204,6 +272,8 @@ interface IPermissionsListRowProps {
     row: IPermissionRow;
     rowKey: string;
     daoPlugins: DaoPlugins;
+    accounts: IPermissionAccountRef[];
+    chainId?: number;
 }
 
 interface IPermissionEntityCellProps {
@@ -214,17 +284,71 @@ const PermissionEntityCell: React.FC<IPermissionEntityCellProps> = ({
     entity,
 }) => (
     <span className="flex min-w-0 items-center gap-2 text-neutral-800">
-        {entity.isSentinel && (
+        <span className="truncate">{entity.label}</span>
+        {entity.type === 'dao' && (
+            <DaoAvatar name={entity.label} size="sm" src={entity.avatarSrc} />
+        )}
+        {entity.type === 'plugin' && entity.tag != null && (
+            <Tag
+                className="max-w-[140px] shrink-0 [&>p]:truncate"
+                label={entity.tag}
+                variant="primary"
+            />
+        )}
+        {entity.type === 'sentinel' && (
             <span
                 aria-hidden="true"
                 className="size-6 shrink-0 rounded-full bg-neutral-100"
             />
         )}
-        <span className="truncate">{entity.label}</span>
-        {entity.tag != null && <Tag label={entity.tag} />}
     </span>
 );
 
+interface IPermissionEntityDetailProps {
+    entity: IPermissionEntity;
+    chainId?: number;
+}
+
+const PermissionEntityDetail: React.FC<IPermissionEntityDetailProps> = ({
+    entity,
+    chainId,
+}) => {
+    const { buildEntityUrl } = useBlockExplorer({ chainId });
+
+    if (entity.isSentinel) {
+        return (
+            <div className="flex flex-col gap-0.5">
+                <span className="text-neutral-500">{entity.label}</span>
+                <span className="font-mono text-neutral-400 text-sm">
+                    {addressUtils.truncateAddress(entity.address)}
+                </span>
+            </div>
+        );
+    }
+
+    const explorerUrl = buildEntityUrl({
+        type: ChainEntityType.ADDRESS,
+        id: entity.address,
+    });
+
+    return (
+        <div className="flex flex-col gap-0.5">
+            <Link
+                className="w-fit"
+                href={explorerUrl}
+                isExternal={explorerUrl != null}
+            >
+                {addressUtils.truncateAddress(entity.address)}
+            </Link>
+            {entity.detailName != null && (
+                <span className="text-neutral-500 text-sm">
+                    {entity.detailName}
+                </span>
+            )}
+        </div>
+    );
+};
+
 interface IPermissionDetailValueProps {
     primary: string;
     secondary?: string;
@@ -245,17 +369,18 @@ const PermissionDetailValue: React.FC<IPermissionDetailValueProps> = ({
 );
 
 const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
-    const { row, rowKey, daoPlugins } = props;
+    const { row, rowKey, daoPlugins, accounts, chainId } = props;
 
     const { t } = useTranslations();
 
+    const resolveOptions = { daoPlugins, accounts };
     const who = permissionEntityUtils.resolvePermissionEntity(
         row.whoAddress,
-        daoPlugins,
+        resolveOptions,
     );
     const where = permissionEntityUtils.resolvePermissionEntity(
         row.whereAddress,
-        daoPlugins,
+        resolveOptions,
     );
     const permissionName = permissionNameUtils.getPermissionName(
         row.permissionId,
@@ -283,8 +408,14 @@ const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
                     <span className="truncate font-mono text-neutral-800">
                         {permissionName}
                     </span>
-                    <span className="truncate text-neutral-800">
-                        {conditionLabel}
+                    <span className="flex min-w-0">
+                        {hasCondition ? (
+                            <Tag label={conditionLabel} />
+                        ) : (
+                            <span className="text-neutral-800">
+                                {conditionLabel}
+                            </span>
+                        )}
                     </span>
                 </div>
             </Accordion.ItemHeader>
@@ -301,11 +432,9 @@ const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
                                     'app.settings.permissionsList.details.who',
                                 )}
                             >
-                                <PermissionDetailValue
-                                    primary={who.label}
-                                    secondary={addressUtils.truncateAddress(
-                                        who.address,
-                                    )}
+                                <PermissionEntityDetail
+                                    chainId={chainId}
+                                    entity={who}
                                 />
                             </DefinitionList.Item>
                             <DefinitionList.Item
@@ -314,11 +443,9 @@ const PermissionsListRow: React.FC<IPermissionsListRowProps> = (props) => {
                                     'app.settings.permissionsList.details.where',
                                 )}
                             >
-                                <PermissionDetailValue
-                                    primary={where.label}
-                                    secondary={addressUtils.truncateAddress(
-                                        where.address,
-                                    )}
+                                <PermissionEntityDetail
+                                    chainId={chainId}
+                                    entity={where}
                                 />
                             </DefinitionList.Item>
                             <DefinitionList.Item
@@ -374,11 +501,22 @@ const PermissionsListHeader: React.FC = () => {
     const { t } = useTranslations();
 
     return (
-        <div className="grid grid-cols-4 gap-4 px-4 text-neutral-500 text-sm">
-            <span>{t('app.settings.permissionsList.header.who')}</span>
-            <span>{t('app.settings.permissionsList.header.where')}</span>
-            <span>{t('app.settings.permissionsList.header.permission')}</span>
-            <span>{t('app.settings.permissionsList.header.condition')}</span>
+        <div className="sticky top-[90px] z-20 -mx-4 md:-mx-6">
+            <div className="flex items-baseline justify-between gap-x-4 bg-gradient-to-b from-90% from-neutral-50 to-transparent px-8 pt-1 pb-4 text-neutral-500 text-sm md:gap-x-6 md:px-12">
+                <div className="grid w-full grid-cols-4 gap-4">
+                    <span>{t('app.settings.permissionsList.header.who')}</span>
+                    <span>
+                        {t('app.settings.permissionsList.header.where')}
+                    </span>
+                    <span>
+                        {t('app.settings.permissionsList.header.permission')}
+                    </span>
+                    <span>
+                        {t('app.settings.permissionsList.header.condition')}
+                    </span>
+                </div>
+                <span aria-hidden="true" className="size-6 shrink-0" />
+            </div>
         </div>
     );
 };
diff --git a/src/modules/settings/constants/permissionsMocks.ts b/src/modules/settings/constants/permissionsMocks.ts
index 51d1816036..0ff225fa9f 100644
--- a/src/modules/settings/constants/permissionsMocks.ts
+++ b/src/modules/settings/constants/permissionsMocks.ts
@@ -1,42 +1,58 @@
 import type { IPaginatedResponse } from '@/shared/api/aragonBackendService';
 import type { IDaoPermission } from '@/shared/api/daoService';
 import type { IBackendApiMock } from '@/shared/types';
+import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
 import type { IPermissionRow } from '../types';
 import { ALLOW_FLAG, ANY_ADDR } from './permissionSentinels';
+import { PermissionsPreviewRef } from './permissionsPreviewRefs';
 
-/**
- * Real permission-id hashes (keccak256 of the permission strings) so the UI
- * resolves them to human-readable names.
- */
+// Permission ids are derived from their names so the dictionary stays in a single
+// place ({@link permissionNameUtils}) instead of duplicating raw keccak256 hashes.
 const ROOT_PERMISSION_ID =
-    '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33';
+    permissionNameUtils.getPermissionId('ROOT_PERMISSION');
 const EXECUTE_PERMISSION_ID =
-    '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d';
-const CREATE_PROPOSAL_PERMISSION_ID =
-    '0x8c433a4cd6b51969eca37f974940894297b9fcf4b282a213fea5cd8f85289c90';
-const MANAGE_SELECTORS_PERMISSION_ID =
-    '0x485a22b473de7ee3091c71c5ce05019fd1466a1650b1228784a9bcd5b7bed510';
+    permissionNameUtils.getPermissionId('EXECUTE_PERMISSION');
+const CREATE_PROPOSAL_PERMISSION_ID = permissionNameUtils.getPermissionId(
+    'CREATE_PROPOSAL_PERMISSION',
+);
+const MANAGE_SELECTORS_PERMISSION_ID = permissionNameUtils.getPermissionId(
+    'MANAGE_SELECTORS_PERMISSION',
+);
 
-const daoAddress = '0x1F2e3D4C5b6A70819283746556473829100AbCdE';
-const pluginAddress = '0xA1b2C3d4E5F60718293A4b5C6d7E8f9001234567';
 const tokenAddress = '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5';
 const votingConditionAddress = '0xC0Ffee254729296a45a3885639AC7E10F9d54979';
 const selectorConditionAddress = '0xDe0B295669a9FD93d5F28D9Ec85E40f4cb697BAe';
-const unknownConditionAddress = '0xaB5801a7D398351b8bE11C439e05C5B3259aeC9B';
+const membershipConditionAddress = '0xaB5801a7D398351b8bE11C439e05C5B3259aeC9B';
+const unknownConditionAddress = '0x39B7f8b9d0dE28fD1C41cD48B65C0e3aF95Ed4A2';
 
+// `who` / `where` reference the viewed DAO ({@link PermissionsPreviewRef.self})
+// and its installed plugins so the sample rows resolve to real names, tags and
+// avatars for whichever DAO is previewed (see {@link PermissionsPreviewRef}).
 const permissions: Array<IDaoPermission & IPermissionRow> = [
     {
-        // No condition: granted unconditionally to "Anyone".
+        // The DAO holds root permission over itself, unconditionally.
         permissionId: ROOT_PERMISSION_ID,
-        whoAddress: ANY_ADDR,
-        whereAddress: daoAddress,
+        whoAddress: PermissionsPreviewRef.self,
+        whereAddress: PermissionsPreviewRef.self,
         conditionAddress: ALLOW_FLAG,
     },
     {
-        // Voting-power gated condition.
+        // A plugin may execute on the DAO, gated by an execute-selector condition.
         permissionId: EXECUTE_PERMISSION_ID,
-        whoAddress: pluginAddress,
-        whereAddress: daoAddress,
+        whoAddress: PermissionsPreviewRef.plugin0,
+        whereAddress: PermissionsPreviewRef.self,
+        conditionAddress: selectorConditionAddress,
+        condition: {
+            conditionType: 'execute-selector',
+            selectors: ['0xa9059cbb'],
+            targets: [tokenAddress],
+        },
+    },
+    {
+        // Anyone may create a proposal on the first plugin, gated by voting power.
+        permissionId: CREATE_PROPOSAL_PERMISSION_ID,
+        whoAddress: ANY_ADDR,
+        whereAddress: PermissionsPreviewRef.plugin0,
         conditionAddress: votingConditionAddress,
         condition: {
             conditionType: 'voting-power',
@@ -45,22 +61,23 @@ const permissions: Array<IDaoPermission & IPermissionRow> = [
         },
     },
     {
-        // Execute-selector gated condition.
-        permissionId: MANAGE_SELECTORS_PERMISSION_ID,
-        whoAddress: pluginAddress,
-        whereAddress: daoAddress,
-        conditionAddress: selectorConditionAddress,
+        // Anyone may create a proposal on the second plugin, gated by multisig
+        // membership.
+        permissionId: CREATE_PROPOSAL_PERMISSION_ID,
+        whoAddress: ANY_ADDR,
+        whereAddress: PermissionsPreviewRef.plugin1,
+        conditionAddress: membershipConditionAddress,
         condition: {
-            conditionType: 'execute-selector',
-            selectors: ['0xa9059cbb'],
-            targets: [tokenAddress],
+            conditionType: 'membership',
+            onlyListed: true,
         },
     },
     {
-        // Unknown / unrecognised condition type → resolves to Fallback.
-        permissionId: CREATE_PROPOSAL_PERMISSION_ID,
-        whoAddress: pluginAddress,
-        whereAddress: daoAddress,
+        // The second plugin manages selectors on the DAO under an unrecognised
+        // condition type → resolves to the Fallback slot.
+        permissionId: MANAGE_SELECTORS_PERMISSION_ID,
+        whoAddress: PermissionsPreviewRef.plugin1,
+        whereAddress: PermissionsPreviewRef.self,
         conditionAddress: unknownConditionAddress,
         condition: {
             conditionType: 'mystery-condition',
@@ -82,11 +99,15 @@ const permissionsResponse: IPaginatedResponse<IDaoPermission & IPermissionRow> =
 /**
  * Preview-mode mock for `GET /permissions/:network/:daoAddress`. Covers every
  * conditionType scenario (no-condition, voting-power, execute-selector,
- * unknown) so the permissions UI can be exercised without a live backend.
+ * membership, unknown) so the permissions UI can be exercised without a live
+ * backend.
  */
 export const permissionsMocks: IBackendApiMock[] = [
     {
-        url: /\/permissions\//,
+        // Scoped to the exact `/permissions/:network/:daoAddress` endpoint so
+        // the interceptor can't replace unrelated requests that merely contain
+        // the word "permissions" in their path.
+        url: /\/permissions\/[\w-]+\/0x[a-fA-F0-9]{40}(?:$|[/?])/,
         type: 'replace',
         data: permissionsResponse,
     },
diff --git a/src/modules/settings/constants/permissionsPreviewRefs.ts b/src/modules/settings/constants/permissionsPreviewRefs.ts
new file mode 100644
index 0000000000..5b1622afcd
--- /dev/null
+++ b/src/modules/settings/constants/permissionsPreviewRefs.ts
@@ -0,0 +1,19 @@
+/**
+ * Preview-only address markers used by {@link permissionsMocks}.
+ *
+ * The permissions list swaps these markers for the viewed DAO's own address and
+ * its installed plugin addresses at render time, so the sample rows resolve to
+ * real names, tags and avatars for whichever DAO is being previewed instead of
+ * hard-coding a specific DAO. Real backend responses never contain these values,
+ * so the swap is a no-op for live data.
+ */
+const previewRef = (suffix: string): string => `0x${suffix.padStart(40, '0')}`;
+
+export const PermissionsPreviewRef = {
+    /** Resolves to the active account's DAO address. */
+    self: previewRef('5e1f'),
+    /** Resolves to the first installed plugin of the active account. */
+    plugin0: previewRef('9100'),
+    /** Resolves to the second installed plugin of the active account. */
+    plugin1: previewRef('9101'),
+} as const;
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
index a45ababad5..1b2ce98dfe 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -60,28 +60,32 @@ export const DaoPermissionsPageClient: React.FC<
             />
             <Page.Content>
                 <Page.Main>
-                    <div className="flex flex-col gap-6">
-                        <ToggleGroup
-                            isMultiSelect={false}
-                            onChange={handleViewChange}
-                            value={view}
-                        >
-                            <Toggle
-                                label={t(
-                                    'app.settings.daoPermissionsPage.view.list',
-                                )}
-                                value="list"
-                            />
-                            <Toggle
-                                disabled={true}
-                                label={t(
-                                    'app.settings.daoPermissionsPage.view.graph',
-                                )}
-                                value="graph"
-                            />
-                        </ToggleGroup>
-                        {view === 'list' && <PermissionsList daoId={daoId} />}
-                    </div>
+                    {view === 'list' && (
+                        <PermissionsList
+                            daoId={daoId}
+                            viewSwitcher={
+                                <ToggleGroup
+                                    isMultiSelect={false}
+                                    onChange={handleViewChange}
+                                    value={view}
+                                >
+                                    <Toggle
+                                        label={t(
+                                            'app.settings.daoPermissionsPage.view.list',
+                                        )}
+                                        value="list"
+                                    />
+                                    <Toggle
+                                        disabled={true}
+                                        label={t(
+                                            'app.settings.daoPermissionsPage.view.graph',
+                                        )}
+                                        value="graph"
+                                    />
+                                </ToggleGroup>
+                            }
+                        />
+                    )}
                 </Page.Main>
             </Page.Content>
         </>
diff --git a/src/modules/settings/utils/permissionEntityUtils/index.ts b/src/modules/settings/utils/permissionEntityUtils/index.ts
index 6636be5a7a..0feab106cb 100644
--- a/src/modules/settings/utils/permissionEntityUtils/index.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/index.ts
@@ -1,4 +1,6 @@
 export {
+    type IPermissionAccountRef,
     type IPermissionEntity,
+    type PermissionEntityType,
     permissionEntityUtils,
 } from './permissionEntityUtils';
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
index 8d10b661e5..57086a3996 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
@@ -3,6 +3,7 @@ import type { IDaoPlugin } from '@/shared/api/daoService';
 import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
 import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
 import {
+    type IPermissionAccountRef,
     type IPermissionEntity,
     permissionEntityUtils,
 } from './permissionEntityUtils';
@@ -10,6 +11,7 @@ import {
 describe('permissionEntity Utils', () => {
     describe('resolvePermissionEntity', () => {
         const pluginAddress = '0x1234567890123456789012345678901234567890';
+        const daoAddress = '0xaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa';
         const unknownAddress = '0x000000000000000000000000000000000000dead';
 
         const daoPlugins = [
@@ -21,21 +23,37 @@ describe('permissionEntity Utils', () => {
                     address: pluginAddress,
                     name: 'Multisig',
                     interfaceType: 'multisig',
+                    release: '1',
+                    build: '2',
                 } as IDaoPlugin,
                 props: {},
             },
         ] satisfies IFilterComponentPlugin<IDaoPlugin>[];
 
+        const accounts: IPermissionAccountRef[] = [
+            { address: daoAddress, name: 'Patito DAO', avatar: null },
+        ];
+
         it.each([
             {
                 description: 'resolves ANY_ADDR to "Anyone" sentinel',
                 address: ANY_ADDR,
-                expected: { label: 'Anyone', isSentinel: true, tag: undefined },
+                expected: {
+                    label: 'Anyone',
+                    isSentinel: true,
+                    tag: undefined,
+                    type: 'sentinel',
+                },
             },
             {
                 description: 'resolves ANY_ADDR case-insensitively to "Anyone"',
                 address: ANY_ADDR.toUpperCase(),
-                expected: { label: 'Anyone', isSentinel: true, tag: undefined },
+                expected: {
+                    label: 'Anyone',
+                    isSentinel: true,
+                    tag: undefined,
+                    type: 'sentinel',
+                },
             },
             {
                 description: 'resolves ALLOW_FLAG to "Any Address" sentinel',
@@ -44,6 +62,7 @@ describe('permissionEntity Utils', () => {
                     label: 'Any Address',
                     isSentinel: true,
                     tag: undefined,
+                    type: 'sentinel',
                 },
             },
             {
@@ -53,6 +72,17 @@ describe('permissionEntity Utils', () => {
                     label: 'Multisig',
                     isSentinel: false,
                     tag: 'MULTISIG',
+                    type: 'plugin',
+                },
+            },
+            {
+                description: 'resolves a matching account to its DAO name',
+                address: daoAddress,
+                expected: {
+                    label: 'Patito DAO',
+                    isSentinel: false,
+                    tag: undefined,
+                    type: 'dao',
                 },
             },
             {
@@ -63,19 +93,30 @@ describe('permissionEntity Utils', () => {
                     label: addressUtils.truncateAddress(unknownAddress),
                     isSentinel: false,
                     tag: undefined,
+                    type: 'address',
                 },
             },
         ])('$description', ({ address, expected }) => {
             const result: IPermissionEntity =
-                permissionEntityUtils.resolvePermissionEntity(
-                    address,
+                permissionEntityUtils.resolvePermissionEntity(address, {
                     daoPlugins,
-                );
+                    accounts,
+                });
 
             expect(result.label).toEqual(expected.label);
             expect(result.tag).toEqual(expected.tag);
             expect(result.isSentinel).toEqual(expected.isSentinel);
+            expect(result.type).toEqual(expected.type);
             expect(result.address).toEqual(address);
         });
+
+        it('includes the plugin metadata name and version as the detail name', () => {
+            const result = permissionEntityUtils.resolvePermissionEntity(
+                pluginAddress,
+                { daoPlugins },
+            );
+
+            expect(result.detailName).toEqual('Multisig v1.2');
+        });
     });
 });
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
index 463bed49f8..07f4c7c8e7 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
@@ -2,21 +2,25 @@ import { addressUtils } from '@aragon/gov-ui-kit';
 import type { IDaoPlugin } from '@/shared/api/daoService';
 import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
 import { daoUtils } from '@/shared/utils/daoUtils';
+import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
 
+/**
+ * Classifies a resolved permission entity for display purposes.
+ */
+export type PermissionEntityType = 'dao' | 'plugin' | 'sentinel' | 'address';
+
 /**
  * Resolved, display-ready representation of a permission `who` / `where` entity.
  */
 export interface IPermissionEntity {
     /**
-     * Human-readable label for the entity (e.g. a plugin name, a sentinel name,
-     * or a truncated address fallback).
+     * Human-readable label for the entity (e.g. a DAO name, a plugin name, a
+     * sentinel name, or a truncated address fallback).
      */
     label: string;
     /**
-     * Short type tag for the entity when it can be classified (e.g. the plugin
-     * type such as `MULTISIG` / `SPP`). Undefined for plain addresses and
-     * sentinels.
+     * Short type tag shown next to plugin entities (e.g. `MULTISIG` / `SPP`).
      */
     tag?: string;
     /**
@@ -28,10 +32,47 @@ export interface IPermissionEntity {
      * rather than a concrete account.
      */
     isSentinel: boolean;
+    /**
+     * Entity classification used to pick the right cell visual (avatar / tag /
+     * placeholder circle).
+     */
+    type: PermissionEntityType;
+    /**
+     * Avatar source for DAO / linked-account entities.
+     */
+    avatarSrc?: string;
+    /**
+     * Secondary detail label shown under the address in the expanded row — the
+     * DAO name, or the plugin metadata name and version (e.g. `Core v1.3`).
+     */
+    detailName?: string;
+}
+
+/**
+ * Minimal DAO / linked-account reference used to resolve a permission address to
+ * its owning account.
+ */
+export interface IPermissionAccountRef {
+    address: string;
+    name: string;
+    avatar?: string | null;
 }
 
 type DaoPluginEntries = IFilterComponentPlugin<IDaoPlugin>[];
 
+interface IResolvePermissionEntityOptions {
+    /**
+     * Installed DAO plugin entries (as returned by `useDaoPlugins`) matched
+     * against the address to resolve plugin names and type tags.
+     */
+    daoPlugins?: DaoPluginEntries;
+    /**
+     * DAO and linked-account references matched against the address to resolve
+     * DAO names and avatars.
+     */
+    accounts?: IPermissionAccountRef[];
+}
+
 class PermissionEntityUtils {
     /**
      * Resolves a permission `who` / `where` address to a display-ready entity.
@@ -39,25 +80,33 @@ class PermissionEntityUtils {
      * Resolution order:
      * 1. {@link ANY_ADDR} sentinel -> "Anyone".
      * 2. {@link ALLOW_FLAG} sentinel -> "Any Address".
-     * 3. A matching installed DAO plugin -> the plugin name (label) plus its
-     *    interface type as an uppercase tag (e.g. `MULTISIG`).
-     * 4. Otherwise -> the checksummed, truncated address.
-     *
-     * @param address - The `who` or `where` address to resolve.
-     * @param daoPlugins - Optional list of installed DAO plugin entries (as
-     * returned by `useDaoPlugins`) used to match the address against a plugin.
-     * @returns The resolved permission entity.
+     * 3. A matching installed DAO plugin -> the plugin name plus its interface
+     *    type as an uppercase tag (e.g. `MULTISIG`) and a `name vX.Y` detail.
+     * 4. A matching DAO / linked account -> the account name and avatar.
+     * 5. Otherwise -> the truncated address.
      */
     resolvePermissionEntity = (
         address: string,
-        daoPlugins?: DaoPluginEntries,
+        options: IResolvePermissionEntityOptions = {},
     ): IPermissionEntity => {
+        const { daoPlugins, accounts } = options;
+
         if (this.isAddressEqual(address, ANY_ADDR)) {
-            return { label: 'Anyone', address, isSentinel: true };
+            return {
+                label: 'Anyone',
+                address,
+                isSentinel: true,
+                type: 'sentinel',
+            };
         }
 
         if (this.isAddressEqual(address, ALLOW_FLAG)) {
-            return { label: 'Any Address', address, isSentinel: true };
+            return {
+                label: 'Any Address',
+                address,
+                isSentinel: true,
+                type: 'sentinel',
+            };
         }
 
         const matchedPlugin = daoPlugins?.find((plugin) =>
@@ -65,17 +114,37 @@ class PermissionEntityUtils {
         );
 
         if (matchedPlugin != null) {
-            const { interfaceType } = matchedPlugin.meta;
+            const { meta } = matchedPlugin;
 
             return {
-                label: daoUtils.getPluginName(matchedPlugin.meta),
-                tag: interfaceType
+                label: daoUtils.getPluginName(meta),
+                tag: meta.interfaceType
                     ? daoUtils
-                          .parsePluginInterfaceType(interfaceType)
+                          .parsePluginInterfaceType(meta.interfaceType)
                           .toUpperCase()
                     : undefined,
                 address,
                 isSentinel: false,
+                type: 'plugin',
+                detailName: this.formatPluginDetail(meta),
+            };
+        }
+
+        const matchedAccount = accounts?.find((account) =>
+            this.isAddressEqual(account.address, address),
+        );
+
+        if (matchedAccount != null) {
+            return {
+                label: matchedAccount.name,
+                address,
+                isSentinel: false,
+                type: 'dao',
+                avatarSrc:
+                    matchedAccount.avatar != null
+                        ? ipfsUtils.cidToSrc(matchedAccount.avatar)
+                        : undefined,
+                detailName: matchedAccount.name,
             };
         }
 
@@ -83,9 +152,21 @@ class PermissionEntityUtils {
             label: addressUtils.truncateAddress(address),
             address,
             isSentinel: false,
+            type: 'address',
         };
     };
 
+    private formatPluginDetail = (plugin: IDaoPlugin): string => {
+        const name = daoUtils.getPluginName(plugin);
+        const { release, build } = plugin;
+
+        if (release != null && build != null) {
+            return `${name} v${release}.${build}`;
+        }
+
+        return name;
+    };
+
     private isAddressEqual = (a?: string, b?: string): boolean =>
         a != null && b != null && a.toLowerCase() === b.toLowerCase();
 }

From 64977babdbea31c5aa0c843c7155bdeaa81d095d Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 01:09:42 +0200
Subject: [PATCH 25/29] chore: Remove permissions condition-slot ADR

---
 ...ssions-page-condition-slot-architecture.md | 55 -------------------
 src/modules/settings/types/permissionRow.ts   |  2 +-
 2 files changed, 1 insertion(+), 56 deletions(-)
 delete mode 100644 docs/adr/0001-permissions-page-condition-slot-architecture.md

diff --git a/docs/adr/0001-permissions-page-condition-slot-architecture.md b/docs/adr/0001-permissions-page-condition-slot-architecture.md
deleted file mode 100644
index 8ecba9488a..0000000000
--- a/docs/adr/0001-permissions-page-condition-slot-architecture.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# ADR 0001 — Permissions page condition-slot architecture (APP-954)
-
-- **Status:** Accepted
-- **Date:** 2026-06-30
-- **Ticket:** APP-954 (Build UI for permission page), child of APP-321
-- **Scope boundary:** APP-954 is the UI, preview-mocked ahead of the backend ticket APP-953.
-
-## Context
-
-The DAO Settings → Permissions subpage lists each permission as a row (WHO / WHERE / PERMISSION / CONDITION). The CONDITION column must render a per-condition UI that varies by condition type (e.g. a voting-power condition vs an execute-selector condition vs no condition at all). We need an extensible way to route a permission's condition to the right UI component without coupling the permissions page to specific condition contract addresses, and without prematurely building generic on-chain condition resolution that is the backend ticket's job (APP-953).
-
-A permission is `IDaoPermission = { permissionId, whoAddress, whereAddress, conditionAddress }`. `conditionAddress === ALLOW_FLAG` is the sentinel meaning "no condition" (the granted address may call unconditionally).
-
-## Decision
-
-### Decision 1 — Condition components register through a STANDALONE registry, not plugin index files
-
-Condition components are registered from a dedicated initialiser at `src/modules/settings/initConditionRegistry.ts`, which calls `pluginRegistryUtils.registerSlotComponent` for each `(SettingsSlotId.PERMISSION_CONDITION, conditionType)` pair and is invoked from the registry init path (`initPluginRegistry.ts` or equivalent) alongside the plugin initialisers.
-
-**`src/plugins/tokenPlugin/index.ts` and `src/plugins/sppPlugin/index.ts` MUST NOT be edited for condition registration.** A reviewer finding such edits should block the PR.
-
-**Rationale:** conditions are on-chain *contracts*, not plugin features. Routing condition UI through a plugin's index file conflates plugin ownership with condition ownership and rests on an unverified guess about which plugin "owns" a given condition type. A standalone registry keeps that ownership boundary clean.
-
-### Decision 2 — No address→conditionType routing table in APP-954
-
-APP-954 trusts `conditionType` as supplied directly on the condition payload (`IConditionData.conditionType`) and read straight off `IPermissionRow`. There is **no** hardcoded map of known condition contract addresses → condition types.
-
-Condition-type resolution has exactly two rules:
-
-1. `conditionAddress === ALLOW_FLAG` → `conditionType = 'none'`
-2. absent or unrecognised `conditionType` → `conditionType = 'unknown'`
-
-**Generic address→type resolution is explicitly APP-953's responsibility** and must not be pre-implemented here. Hardcoding condition addresses is fragile and is exactly the "support conditions generically" work the backend ticket owns.
-
-### Preserved decisions
-
-- **`IConditionData` shape:** `{ conditionType: string; [key: string]: unknown }`.
-- **`conditionType` is the synthetic `pluginId`** passed to `PluginSingleComponent` (slotId `SettingsSlotId.PERMISSION_CONDITION`) for routing — it is not a real plugin id.
-- **`IPermissionRow = IDaoPermission & { condition?: IConditionData }`** is a UI-only type (it does not change the domain `IDaoPermission`).
-- **Fallback = a 'No condition' card.** `PluginSingleComponent` renders this Fallback when `conditionType` is `'none'`, or `'unknown'`, or when no component is registered for the conditionType.
-- **Graph view is OUT OF SCOPE** for APP-954 (list view only; the Graph toggle is visible but disabled).
-- **`permissionsDefinitionList` must NOT be reused.** It is a different concept (a proposal-creation permission guard); reusing it is a name-collision trap.
-
-## Consequences
-
-- Adding a new condition UI later = add a component + one `registerSlotComponent` line in `initConditionRegistry.ts`; no plugin edits, no page edits.
-- The permissions page is decoupled from condition contract addresses; APP-953 can layer generic resolution by supplying `conditionType` on the payload (and/or registering more components) without touching the page.
-- Until APP-953 lands, condition data is mock-supplied via the `useMocks` fetch-interceptor seam; if a condition's payload fields are unavailable (see the T02 spike), its component ships as a stub rendering the `conditionType` label + a "data pending" notice.
-- Unknown/unregistered condition types degrade gracefully to the 'No condition' Fallback rather than erroring.
-
-## Downstream tracks gated by this ADR
-
-- **T04** — `SettingsSlotId.PERMISSION_CONDITION` + the 'No condition' Fallback component.
-- **T07** — `initConditionRegistry.ts` + condition components (no plugin-index edits).
-- **T08** — `IPermissionRow` / `IConditionData` types + `resolveConditionType` (the two rules above).
diff --git a/src/modules/settings/types/permissionRow.ts b/src/modules/settings/types/permissionRow.ts
index c032c6a93e..67e4694b67 100644
--- a/src/modules/settings/types/permissionRow.ts
+++ b/src/modules/settings/types/permissionRow.ts
@@ -3,7 +3,7 @@ import type { IDaoPermission } from '@/shared/api/daoService';
 /**
  * UI-side representation of a permission's resolved condition.
  *
- * `conditionType` is read straight off the payload (see ADR 0001). Additional,
+ * `conditionType` is read straight off the payload. Additional,
  * condition-specific fields may be present, hence the open-ended index
  * signature.
  */

From c42658e6df8331aaf9fad859be083618b0d65293 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 09:36:45 +0200
Subject: [PATCH 26/29] feat: Add self-contained Patito DAO permissions preview
 matching Figma

---
 public/patitoDao.png                          | Bin 0 -> 1851 bytes
 public/patitoDeveloperDao.png                 | Bin 0 -> 1981 bytes
 .../permissionsList/permissionsList.tsx       |  31 +++++--
 .../settings/constants/permissionsMocks.ts    |  54 ++++++------
 .../constants/permissionsPreviewData.ts       |  77 ++++++++++++++++++
 .../constants/permissionsPreviewRefs.ts       |   2 +
 .../permissionEntityUtils.test.ts             |   2 +-
 .../permissionEntityUtils.ts                  |   8 +-
 8 files changed, 135 insertions(+), 39 deletions(-)
 create mode 100644 public/patitoDao.png
 create mode 100644 public/patitoDeveloperDao.png
 create mode 100644 src/modules/settings/constants/permissionsPreviewData.ts

diff --git a/public/patitoDao.png b/public/patitoDao.png
new file mode 100644
index 0000000000000000000000000000000000000000..334011d2ca035683dc1be416039ca8f7718029bb
GIT binary patch
literal 1851
zcmV-B2gLY^P)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000KINkl<ZcmaKtdvp}l9mhX+c6MiH_L1E@fPltO0;C8WzzS5s
z6I7IPs1U_+e6?`w1F8rVs;$)$!~@p$2rX5sEk_hnT9LOD5y~TCV?vRnJPZ%%a*X5w
zhGloN$v$SLcNVc81!vCvWA5DhdwhT2-}fi@n#Z>7P))ji&XKNT6)7^M!WN}nE*+2A
z9d+Ys7^w}}G)f<~Q3w&ak_~YM!=)=ORKJq25*0q7<xW|0zqs?ijB4M^y1w&q*`{-n
zgq0*u39OnOdSKDz94TMk_;>o~oTtvec+j*n6+T5HZg->FDvAw};I*97d!q;&=M~bi
zu6QvObNW-~UpTnGyK(N<I#}2F&xL#9wabGkBV<d1rd(x852hMp=oVSLRwp&R@6V;}
zEI%6agOzlfS@L~_p}l8nmaU8LSa?|n_1%Z&obg7hRIkCdagQNfF7!Yit)i1v$=&$%
zFkP)(wAD1?HZ>GYB`#9@HntwGaB+0;>ufl6j5Dsbs{P6TXQEufd?)*>*7SOSk5}%(
z9WtnY<S(onIhU*=2>J?GGjIV9=8fm+TkmCPtwHr|i}AXHXwtZY)u;PTV7T3^e|s<6
zv$YEyo1Z&)K3=_0Pbs0^L$BsP-zmpz?I2oJ$$)#tqPzT54_?6TEjLhfd?4xv!x-zG
zLftzr@b`P3#{4YOKHnRK%j+SXF$t@BXvKxqujCv!o-Ua2=?Oc<O<R|sO@9f(I>9I2
zp!}zI(D7k}b?>f6J+}s128-9`_1yui_r^1}qyocNlq*QT8Iwp)`~%_QeCZ@h!cJB=
zG*@a<4O4n3L4M)ClXNP^%{vz%Oofpz&!RJ(pd%6?PpidNFR~_U3+g|VH85<-%EN59
zdnvjsw@sF*?Q0l!O<$a}0-gZ7lJ#?4gC8Bew9QJC_EQQus<z{@ve?Nqp%MLf(71_H
zeIUNeO@D0zs4`{Q5EF0c#43PUvyZc9?Gg4Z*uwdup{PMG@ssT|Dc!_Zze{#_KH|9x
zE6*#qLaN)x^F8llerz-Gcnk4tMpCqpHW6q2v}dXLvyANHtyr=lgnaM*nU8`yEBUmo
zn~^^pk6I{uMMm&e*^g1)n8~d@`r|6mBl5TsvSflMH`mcnU&6}+e~vrhr_cz~u6E+p
zW%`B=?lC#GI1ML!HlJk6xb{c4Gv<kj7$rdz`NQdU?~`|6{B9SXvXBhJRjSG=OU}Eg
zdvXn)zqU}jVHEoseJq{#Fo|rOe7%_Mbz89B{|1U~=NMzg1j`>e%G$RN(dV`SG(NVH
z=KDr6rTj*QmG-B{o0Boq>5F|}T6RQJy@Zu0cE&=)>KJQGV%w`pYBpWN#up<PAM}+)
zwXmc_9B%fKbSqrnH%r0hWf*z^1Ljo1iFVfBG83hzLF{-t9*^PldsNYc7D<~KVktK`
zJ>w+mk;`hujvtWF#IfB{dBjC|IDJ}0liv;`zx;KEe?7BS;;(b{v9pL_SJC>;e(Dxg
z%LdIlh&HH$JpJ}Iq?#%UZy${aZHJD}j0r^+?II)&wu&Y9iv)9i6XwLY&YY4;X3|=B
z3Mu21&!5Z?cZk@5j~KL|Cw4l+Xz%b%%7}FNa{L}9{b>P<ekG+jBsmfg*nVj+KyC>?
zd=m38qN13S4b8HW@_(Kbfv})w#UQ*!0NoeN1tnxneO`G%^YU$N=*HYU82`{MyHg@n
z;mHpWk2=Ab*ovbgN)8sq@Zk4L@DeHF&0SI#@=#?Rvav4wlJi#DlD#FJTC#?k%ejuK
z1Xu0){gxTxlGqK|^!<ZZHO4|x`mqM~BAM@Fz{bOTbk`6(OSa-lX0WTii)d=W-qQr9
z&XIohE{Ymjh?RuM1aw^Wr)6!Rd2ld#c=Bt*odNXuMEl!`9drNK{MIs$gtp7$;o(;g
z@qXJ`zEx7pOO<74mO$%H!O1qV*Og+$yBX7zAin!BA+JW`v>|j9>5^$Mv-gB~_x7K#
z9KJL%A3w07>b;i33sp&1yCW&Fm(wcQjp!AEH|v>52vb<>Y-qw<T#0Coq67`BWHNU@
zQ)qBwui=ZHxqem^mz!uyuA5!;lW$I)ch*is>E8q8QK_OqnflHn5?`Be*dWgzkT58C
z>LVzFi%}n6iy|{Pn`cKK8a!>@7ma@<gG-N7lSw<~Rkd`T|3QJ<z?1_BnN|LbYJ5SB
zGxKl8?puf*?II>;cA=KH=O5#rn{m0Je_01#bhP@^wkfZj*gDy?#4sh_=a86mdo&Wz
p{gDa1NA10T(A4E&A);5Z@jp#1xAK{wO_2Zq002ovPDHLkV1l%Yj6VPX

literal 0
HcmV?d00001

diff --git a/public/patitoDeveloperDao.png b/public/patitoDeveloperDao.png
new file mode 100644
index 0000000000000000000000000000000000000000..1ffcb790a27680b5dd8ae721e169be757645617b
GIT binary patch
literal 1981
zcmV;u2SWIXP)<h;3K|Lk000e1NJLTq000;O000;W1^@s6;CDUv00009a7bBm000XU
z000XU0RWnu7ytkO0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH01k9TSaefwW^{L9
za%BKUX=iO=p0So=000L#Nkl<Zcmb7_d2AH-6~{k2JG0*V@Uh@~z%e%AS`0YcP#h43
z6q}StKm#GF+N4PYcBQIHBY_>2$^qI!(<-C|j2fyEHBAi)3FWBGS#VRZ@qulwwH*xh
z`dHg*d(W8;k%~~8rs|XCj~UJH`+e{IzVG{Vd`);f#ZE==Z%dh!vs4JR$t~A9<?@OW
zTrPwEk5$ce^|gOL7F49Fmbw}*|4&p`UzguFSy!FEe3SZ2!8-MK$4;n)Yl~FbHC}t%
zYC+*r^~A;FYGunq)iZacx?t9-O3&Q&@>gMr|NdeBvCG?j@Wb6@5i#bpSw$?FxnyM9
zxq7yi^xSC(f<n`!o7}rq$DiIik7#nBIQ3i7QzjPA{?6(01K(Y~_enhclP?PwZrqVH
zXI90{YnO~xqktIiCUeGA48x7I_Dx{)i|a^I6kARqL)}fNmP{mzjW~lyU{o>YOpsS5
zFL{yX)4xCW9|Q$2lx|a0wW8}*6Qa|J*=!{~GYh@N#i#ps(cfH;l$uAxKg4KfGwqFy
z%-j4rn4Cy@l~5?mqFIx;c(P_`j%ViJ-NxE0j|qy`Z;>NW<!H*}T%#lk*b@?%JUt&<
z>Nuv(oW>`6b|XeYsLphaFpjZ%^(czMmYur^g+ti2grd<fp$8*`7(&u1bCc!F54|mo
ze&G>8PfXeoRuyMpaFEH%3mBIulRjYriCO8)km~R(&L^rjVPcfwTh~!+>C9O^4|o4*
zlEx<>Mn$cHQNp5*!GRH6$;nQvuF6N)x|Jm*vL$M}H|+05?-)n!^juagTgGRVI~k0a
zxN^LT;SrEb35@wV5Vd|gk|*$5=^D<RI>r2D&!Q5=kdntppG18}6VYIR=s+)#K+L7j
za%66a_WM?bBN0M@0j6g!;^4bw6j}=T;LnH9iAJm`*;veRq)eKQ&g5dl_lj6BFOO_F
zop*MAh)2xQRCR-t<i(t;{+O}*ofNGtqWbcckl534qiA+U0X^yfqgESP*$K3tJ<U6g
z2J|`0aG4{_`sRA>UicWFV;RcyBpT{ZGNdNpi22xDvX!G1Z!sJgV&c4f;&cKL)l9cN
z1D(;mL<pkuWM<?ss({gvNb`f+NNH0T?rtY%dJgic=jmwg=AqBb*<Zhay?BY1rH@8$
zkjssO^hcnh?KW`}7jv_r34`5&-E3yf1Q(I}J+hz^M5lf@gyJwEm`%9V8^n4aVxRR5
z?jJou$MIu4yxqieo1SO&Z^8_e9Ad`yGFnf4hAlpg%e#Mun3j#N@hVxV{aTiG^g@)k
zf3z2~(k%;u!+~lS5iC}mNpAL)zK6SDBZ2x0Fgn2IpYJ2s^#$iXt;cucDkirT^+qj@
z^rx7=Xb!RA7{-wfGUu=2qy48yN=w0{3BnXr$(TG7A?i%=-s@@6)L|txEuOffRQz`u
zdGp{NdW8tb3)f<5X~tV~nAg@$LfKkOQ{^s#m#R4U;<pK!M>%ly0zK`m^ab^};uNHa
z9&yY-r%vY=B)!4gFO6VG)`rUIC(zZ6=)Z|>#(Eq{dhQ9sc<f7YPo2v975nIUV;h3g
z&b;^)n(p=V`5*9kw-bxer^(pIv<xG0)(q4*J)zFFIzhGB&JD*q$o5R-C$DTriW8W<
zBA@V3fE}N=YUUQ^to1SrIw#X#`vIcw6E-Fl(mXYQ*<@qSEiaMaFeRlgAsHpEUp$SJ
zFhW?bLmTsB!c&v7_j*<=X0Uqz!IX=lT~dFS4~u3QqNWh@I0Gp|S=>qO!{V?bY7^bw
zS5L4pL{H=%i6--xesi;J5G5R>!Rtal9)hV>?cca6p{lIZfBsNq4foq|FWrbZ(!=a+
zyD+K}Lx24xy=`qcr=+5bPa+nMGO7*Z9r<Y{Wy@L;BF>f*nk%>w=WYNsM#|jh=(*d)
z;=+Z8uhdj|zw{z(i7!i?Eq+sWI(e%LQ39ikHybH?Wd~-Ljenf^6<v)NSh2l=tw&A~
zX+2NPnLQ+>+bLSJ8JoqZo$<4-VlTdiYxLCD`2TX`O!?!5bLHrMZ!l+Kd9e28FV_9|
zO-8i-$Hg@HSuBk8j%fUDj0xj7^X~hoV}72QypnLFl{;5ENk}si(=t~hLHvdcZQ|d?
zAPMEI)n(pC*uuZ|L0#+Jy>8o3xvxJ!BoxG;3aqL4DWV`^o$)RFfd{yzEFt@)w`l9X
zO(1F}pajWXUCfwPv835|RBLa+^8E5vulMm*6Q0~?=P%cl73HUvB1ry6rNt*^@N&-g
z>Ag{{$ylbRt%1A8PGNCp64Q=ukT)U4{F?Vf2`M`Nszq|?fx{n_@xS8LKUB-LjU$I&
ze|4RjkvLJ!u(;K<w3%w!xG8G7!J*2@PpfIRR5dN}DfQWfdFpQ)9#of9{!RWWEZx@;
zd2(f0u+A<H$D&1}!ER6NcD+;8=`hK8UTbQOR~;BSr}%64)_J}D|Az5TIhFq$Q+Bt7
P00000NkvXXu0mjfF4*3r

literal 0
HcmV?d00001

diff --git a/src/modules/settings/components/permissionsList/permissionsList.tsx b/src/modules/settings/components/permissionsList/permissionsList.tsx
index 48e4d79777..f7a68de62a 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.tsx
@@ -27,9 +27,14 @@ import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { networkDefinitions } from '@/shared/constants/networkDefinitions';
 import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
+import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
 import { SettingsSlotId } from '../../constants/moduleSlots';
 import { ALLOW_FLAG } from '../../constants/permissionSentinels';
+import {
+    permissionsPreviewAccounts,
+    permissionsPreviewPlugins,
+} from '../../constants/permissionsPreviewData';
 import { PermissionsPreviewRef } from '../../constants/permissionsPreviewRefs';
 import type { IPermissionRow } from '../../types';
 import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
@@ -56,7 +61,7 @@ interface IPermissionsAccount {
     name: string;
     network: Network;
     daoAddress: string;
-    avatar?: string | null;
+    avatarSrc?: string;
 }
 
 const SKELETON_ROW_KEYS = [
@@ -75,13 +80,18 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
     const { t } = useTranslations();
     const { isEnabled } = useFeatureFlags();
 
+    // The `useMocks` flag drives both the preview permission rows and the
+    // self-contained "Patito DAO" identity they resolve against.
+    const isPreview = isEnabled('useMocks');
+
     const { data: dao } = useDao({ urlParams: { id: daoId } });
-    const daoPlugins = useDaoPlugins({
+    const realDaoPlugins = useDaoPlugins({
         daoId,
         includeLinkedAccounts: true,
     });
+    const daoPlugins = isPreview ? permissionsPreviewPlugins : realDaoPlugins;
 
-    const accounts = useMemo<IPermissionsAccount[]>(() => {
+    const realAccounts = useMemo<IPermissionsAccount[]>(() => {
         if (dao == null) {
             return [];
         }
@@ -91,7 +101,7 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
             name: dao.name,
             network: dao.network,
             daoAddress: dao.address,
-            avatar: dao.avatar,
+            avatarSrc: ipfsUtils.cidToSrc(dao.avatar),
         };
 
         const linkedAccounts = dao.linkedAccounts ?? [];
@@ -109,11 +119,13 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
                 name: account.name,
                 network: account.network,
                 daoAddress: account.address,
-                avatar: account.avatar,
+                avatarSrc: ipfsUtils.cidToSrc(account.avatar),
             })),
         ];
     }, [dao, isEnabled]);
 
+    const accounts = isPreview ? permissionsPreviewAccounts : realAccounts;
+
     const [selectedAccountId, setSelectedAccountId] = useState<string>();
     const activeAccountId = selectedAccountId ?? accounts[0]?.id;
 
@@ -131,7 +143,7 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
             accounts.map((account) => ({
                 address: account.daoAddress,
                 name: account.name,
-                avatar: account.avatar,
+                avatarSrc: account.avatarSrc,
             })),
         [accounts],
     );
@@ -154,6 +166,10 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
             (plugin) => plugin.meta.address,
         );
 
+        const linkedAddress = accounts.find(
+            (account) => account.id !== activeAccount?.id,
+        )?.daoAddress;
+
         // Swap preview markers for the viewed DAO's real addresses so the sample
         // rows resolve to names/tags/avatars. No-op for real backend data.
         const refMap = new Map<string, string | undefined>([
@@ -161,6 +177,7 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
                 PermissionsPreviewRef.self.toLowerCase(),
                 activeAccount?.daoAddress,
             ],
+            [PermissionsPreviewRef.linked.toLowerCase(), linkedAddress],
             [PermissionsPreviewRef.plugin0.toLowerCase(), pluginAddresses[0]],
             [PermissionsPreviewRef.plugin1.toLowerCase(), pluginAddresses[1]],
         ]);
@@ -172,7 +189,7 @@ export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
             whoAddress: resolveRef(row.whoAddress),
             whereAddress: resolveRef(row.whereAddress),
         }));
-    }, [data, daoPlugins, activeAccount]);
+    }, [data, daoPlugins, activeAccount, accounts]);
 
     const [expandedRows, setExpandedRows] = useState<string[]>([]);
     const allExpanded = rows.length > 0 && expandedRows.length === rows.length;
diff --git a/src/modules/settings/constants/permissionsMocks.ts b/src/modules/settings/constants/permissionsMocks.ts
index 0ff225fa9f..c866ec55b2 100644
--- a/src/modules/settings/constants/permissionsMocks.ts
+++ b/src/modules/settings/constants/permissionsMocks.ts
@@ -15,19 +15,18 @@ const EXECUTE_PERMISSION_ID =
 const CREATE_PROPOSAL_PERMISSION_ID = permissionNameUtils.getPermissionId(
     'CREATE_PROPOSAL_PERMISSION',
 );
-const MANAGE_SELECTORS_PERMISSION_ID = permissionNameUtils.getPermissionId(
-    'MANAGE_SELECTORS_PERMISSION',
-);
 
 const tokenAddress = '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5';
+const gaugeVoterAddress = '0x1234567890AbcdEF1234567890aBcdef12345678';
 const votingConditionAddress = '0xC0Ffee254729296a45a3885639AC7E10F9d54979';
 const selectorConditionAddress = '0xDe0B295669a9FD93d5F28D9Ec85E40f4cb697BAe';
 const membershipConditionAddress = '0xaB5801a7D398351b8bE11C439e05C5B3259aeC9B';
-const unknownConditionAddress = '0x39B7f8b9d0dE28fD1C41cD48B65C0e3aF95Ed4A2';
 
-// `who` / `where` reference the viewed DAO ({@link PermissionsPreviewRef.self})
-// and its installed plugins so the sample rows resolve to real names, tags and
-// avatars for whichever DAO is previewed (see {@link PermissionsPreviewRef}).
+// `who` / `where` reference the viewed DAO ({@link PermissionsPreviewRef.self}),
+// its first linked DAO and its installed plugins so the sample rows resolve to
+// real names, tags and avatars for whichever DAO is previewed (see
+// {@link PermissionsPreviewRef}). The scenarios mirror the permissions-page
+// Figma (self→self root, self→linked root, plugin execute, anyone-creates).
 const permissions: Array<IDaoPermission & IPermissionRow> = [
     {
         // The DAO holds root permission over itself, unconditionally.
@@ -37,17 +36,32 @@ const permissions: Array<IDaoPermission & IPermissionRow> = [
         conditionAddress: ALLOW_FLAG,
     },
     {
-        // A plugin may execute on the DAO, gated by an execute-selector condition.
+        // The DAO holds root permission over its linked DAO, unconditionally.
+        permissionId: ROOT_PERMISSION_ID,
+        whoAddress: PermissionsPreviewRef.self,
+        whereAddress: PermissionsPreviewRef.linked,
+        conditionAddress: ALLOW_FLAG,
+    },
+    {
+        // The first plugin may execute on the DAO, gated by an execute-selector
+        // condition over a handful of functions.
         permissionId: EXECUTE_PERMISSION_ID,
         whoAddress: PermissionsPreviewRef.plugin0,
         whereAddress: PermissionsPreviewRef.self,
         conditionAddress: selectorConditionAddress,
         condition: {
             conditionType: 'execute-selector',
-            selectors: ['0xa9059cbb'],
-            targets: [tokenAddress],
+            selectors: ['0x3f4ba83f', '0x40e58ee5', '0x8456cb59'],
+            targets: [gaugeVoterAddress, gaugeVoterAddress, gaugeVoterAddress],
         },
     },
+    {
+        // The second plugin may execute on the DAO, unconditionally.
+        permissionId: EXECUTE_PERMISSION_ID,
+        whoAddress: PermissionsPreviewRef.plugin1,
+        whereAddress: PermissionsPreviewRef.self,
+        conditionAddress: ALLOW_FLAG,
+    },
     {
         // Anyone may create a proposal on the first plugin, gated by voting power.
         permissionId: CREATE_PROPOSAL_PERMISSION_ID,
@@ -57,6 +71,7 @@ const permissions: Array<IDaoPermission & IPermissionRow> = [
         condition: {
             conditionType: 'voting-power',
             token: tokenAddress,
+            // Raw base-unit value; renders formatted once token decimals are wired.
             minVotingPower: '1000000000000000000',
         },
     },
@@ -72,17 +87,6 @@ const permissions: Array<IDaoPermission & IPermissionRow> = [
             onlyListed: true,
         },
     },
-    {
-        // The second plugin manages selectors on the DAO under an unrecognised
-        // condition type → resolves to the Fallback slot.
-        permissionId: MANAGE_SELECTORS_PERMISSION_ID,
-        whoAddress: PermissionsPreviewRef.plugin1,
-        whereAddress: PermissionsPreviewRef.self,
-        conditionAddress: unknownConditionAddress,
-        condition: {
-            conditionType: 'mystery-condition',
-        },
-    },
 ];
 
 const permissionsResponse: IPaginatedResponse<IDaoPermission & IPermissionRow> =
@@ -97,10 +101,10 @@ const permissionsResponse: IPaginatedResponse<IDaoPermission & IPermissionRow> =
     };
 
 /**
- * Preview-mode mock for `GET /permissions/:network/:daoAddress`. Covers every
- * conditionType scenario (no-condition, voting-power, execute-selector,
- * membership, unknown) so the permissions UI can be exercised without a live
- * backend.
+ * Preview-mode mock for `GET /permissions/:network/:daoAddress`. Covers the
+ * condition scenarios shown in the permissions-page Figma (no-condition,
+ * execute-selector, voting-power, membership) so the permissions UI can be
+ * exercised without a live backend.
  */
 export const permissionsMocks: IBackendApiMock[] = [
     {
diff --git a/src/modules/settings/constants/permissionsPreviewData.ts b/src/modules/settings/constants/permissionsPreviewData.ts
new file mode 100644
index 0000000000..2138d8cc08
--- /dev/null
+++ b/src/modules/settings/constants/permissionsPreviewData.ts
@@ -0,0 +1,77 @@
+import {
+    type IDaoPlugin,
+    Network,
+    PluginInterfaceType,
+} from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+
+/**
+ * Self-contained "Patito DAO" preview identity used alongside
+ * {@link permissionsMocks} when the `useMocks` flag is on, so the permissions
+ * page renders the exact scenario from the Figma design (Patito DAO + a linked
+ * Patito Developer DAO, with `Core` (SPP) and `Founders` (MULTISIG) plugins)
+ * regardless of which DAO is opened. Ignored entirely for live data.
+ */
+
+/**
+ * Minimal account shape the permissions list needs to build its tabs and resolve
+ * `who` / `where` entities.
+ */
+export interface IPermissionsPreviewAccount {
+    id: string;
+    name: string;
+    network: Network;
+    daoAddress: string;
+    avatarSrc?: string;
+}
+
+const patitoDaoAddress = '0xf204245b0B05E9A0780761E326552A569c1D6ceb';
+const patitoDeveloperDaoAddress = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F';
+const coreAddress = '0x1eC50000000000000000000000000000000e8145';
+const foundersAddress = '0xf00d00000000000000000000000000000000e845';
+
+export const permissionsPreviewAccounts: IPermissionsPreviewAccount[] = [
+    {
+        id: 'patito-dao',
+        name: 'Patito DAO',
+        network: Network.ETHEREUM_MAINNET,
+        daoAddress: patitoDaoAddress,
+        avatarSrc: '/patitoDao.png',
+    },
+    {
+        id: 'patito-developer-dao',
+        name: 'Patito Developer DAO',
+        network: Network.ETHEREUM_MAINNET,
+        daoAddress: patitoDeveloperDaoAddress,
+        avatarSrc: '/patitoDeveloperDao.png',
+    },
+];
+
+export const permissionsPreviewPlugins: IFilterComponentPlugin<IDaoPlugin>[] = [
+    {
+        id: 'core',
+        uniqueId: `${coreAddress}-spp`,
+        label: 'Core',
+        meta: {
+            address: coreAddress,
+            name: 'Core',
+            interfaceType: PluginInterfaceType.SPP,
+            release: '1',
+            build: '3',
+        } as IDaoPlugin,
+        props: {},
+    },
+    {
+        id: 'founders',
+        uniqueId: `${foundersAddress}-multisig`,
+        label: 'Founders',
+        meta: {
+            address: foundersAddress,
+            name: 'Founders',
+            interfaceType: PluginInterfaceType.MULTISIG,
+            release: '1',
+            build: '4',
+        } as IDaoPlugin,
+        props: {},
+    },
+];
diff --git a/src/modules/settings/constants/permissionsPreviewRefs.ts b/src/modules/settings/constants/permissionsPreviewRefs.ts
index 5b1622afcd..beb7ab9b02 100644
--- a/src/modules/settings/constants/permissionsPreviewRefs.ts
+++ b/src/modules/settings/constants/permissionsPreviewRefs.ts
@@ -12,6 +12,8 @@ const previewRef = (suffix: string): string => `0x${suffix.padStart(40, '0')}`;
 export const PermissionsPreviewRef = {
     /** Resolves to the active account's DAO address. */
     self: previewRef('5e1f'),
+    /** Resolves to the active account's first linked DAO. */
+    linked: previewRef('11a0'),
     /** Resolves to the first installed plugin of the active account. */
     plugin0: previewRef('9100'),
     /** Resolves to the second installed plugin of the active account. */
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
index 57086a3996..22b4614953 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.test.ts
@@ -31,7 +31,7 @@ describe('permissionEntity Utils', () => {
         ] satisfies IFilterComponentPlugin<IDaoPlugin>[];
 
         const accounts: IPermissionAccountRef[] = [
-            { address: daoAddress, name: 'Patito DAO', avatar: null },
+            { address: daoAddress, name: 'Patito DAO', avatarSrc: undefined },
         ];
 
         it.each([
diff --git a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
index 07f4c7c8e7..149e1b84d6 100644
--- a/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
+++ b/src/modules/settings/utils/permissionEntityUtils/permissionEntityUtils.ts
@@ -2,7 +2,6 @@ import { addressUtils } from '@aragon/gov-ui-kit';
 import type { IDaoPlugin } from '@/shared/api/daoService';
 import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
 import { daoUtils } from '@/shared/utils/daoUtils';
-import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
 
 /**
@@ -55,7 +54,7 @@ export interface IPermissionEntity {
 export interface IPermissionAccountRef {
     address: string;
     name: string;
-    avatar?: string | null;
+    avatarSrc?: string;
 }
 
 type DaoPluginEntries = IFilterComponentPlugin<IDaoPlugin>[];
@@ -140,10 +139,7 @@ class PermissionEntityUtils {
                 address,
                 isSentinel: false,
                 type: 'dao',
-                avatarSrc:
-                    matchedAccount.avatar != null
-                        ? ipfsUtils.cidToSrc(matchedAccount.avatar)
-                        : undefined,
+                avatarSrc: matchedAccount.avatarSrc,
                 detailName: matchedAccount.name,
             };
         }

From 6eb5db406218c2ec37e09d1307993a6c05ef81d7 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 09:36:59 +0200
Subject: [PATCH 27/29] feat: Format voting-power condition amount with token
 decimals

---
 .../permissionsList/permissionsList.test.tsx  |  3 +-
 .../votingPowerConditionSlot.test.tsx         |  5 +--
 .../votingPowerConditionSlot.tsx              | 36 ++++++++++++++-----
 3 files changed, 33 insertions(+), 11 deletions(-)

diff --git a/src/modules/settings/components/permissionsList/permissionsList.test.tsx b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
index 1da85aca8e..7fb9aa8ae0 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.test.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
@@ -191,7 +191,8 @@ describe('<PermissionsList /> component', () => {
         expect(
             screen.getByText(/votingPowerConditionSlot.token/),
         ).toBeInTheDocument();
-        expect(screen.getByText('1000000000000000000')).toBeInTheDocument();
+        // 1e18 base units formatted with the default 18 decimals.
+        expect(screen.getByText('1')).toBeInTheDocument();
     });
 
     it('routes the condition cell to the fallback slot when expanded', async () => {
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
index 548ff72583..a1a72f06b1 100644
--- a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.test.tsx
@@ -17,7 +17,7 @@ describe('<VotingPowerConditionSlot /> component', () => {
         );
     };
 
-    it('renders the truncated token address and the minimum voting power', () => {
+    it('renders the truncated token address and the formatted minimum voting power', () => {
         render(
             createTestComponent({
                 token: '0x0bA45A8b5d5575935B8158a88C631E9F9C95a2e5',
@@ -32,7 +32,8 @@ describe('<VotingPowerConditionSlot /> component', () => {
         expect(
             screen.getByText(/votingPowerConditionSlot.minVotingPower/),
         ).toBeInTheDocument();
-        expect(screen.getByText('1000000000000000000')).toBeInTheDocument();
+        // 1e18 base units formatted with the default 18 decimals.
+        expect(screen.getByText('1')).toBeInTheDocument();
     });
 
     it('falls back to a placeholder when payload fields are absent', () => {
diff --git a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
index decc94b11c..e4b3ca65b2 100644
--- a/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
+++ b/src/modules/settings/components/votingPowerConditionSlot/votingPowerConditionSlot.tsx
@@ -1,22 +1,42 @@
 'use client';
 
-import { addressUtils, DefinitionList } from '@aragon/gov-ui-kit';
+import {
+    addressUtils,
+    DefinitionList,
+    formatterUtils,
+} from '@aragon/gov-ui-kit';
+import { formatUnits } from 'viem';
 import type { IConditionData } from '@/modules/settings/types';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { stringUtils } from '@/shared/utils/stringUtils';
 
 const EMPTY_VALUE = '—';
 
-const resolveMinVotingPower = (value: unknown): string => {
-    if (stringUtils.isNonEmptyString(value)) {
-        return value;
+// TODO(APP-953): source decimals from the token metadata (useToken) once the
+// condition slot receives the token's chainId. Governance tokens are 18-decimal
+// by convention, so default to that for now.
+const DEFAULT_TOKEN_DECIMALS = 18;
+
+const formatMinVotingPower = (value: unknown): string => {
+    if (
+        typeof value !== 'string' &&
+        typeof value !== 'number' &&
+        typeof value !== 'bigint'
+    ) {
+        return EMPTY_VALUE;
     }
 
-    if (typeof value === 'number' || typeof value === 'bigint') {
-        return value.toString();
+    if (typeof value === 'string' && value.length === 0) {
+        return EMPTY_VALUE;
     }
 
-    return EMPTY_VALUE;
+    try {
+        const amount = formatUnits(BigInt(value), DEFAULT_TOKEN_DECIMALS);
+
+        return formatterUtils.formatNumber(amount) ?? amount;
+    } catch {
+        return EMPTY_VALUE;
+    }
 };
 
 export const VotingPowerConditionSlot: React.FC<IConditionData> = (props) => {
@@ -26,7 +46,7 @@ export const VotingPowerConditionSlot: React.FC<IConditionData> = (props) => {
     const tokenLabel = stringUtils.isNonEmptyString(token)
         ? addressUtils.truncateAddress(token)
         : EMPTY_VALUE;
-    const minVotingPowerLabel = resolveMinVotingPower(minVotingPower);
+    const minVotingPowerLabel = formatMinVotingPower(minVotingPower);
 
     return (
         <DefinitionList.Container>

From 02bcba65ad74eab77412a36469471ef669367792 Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 10:14:26 +0200
Subject: [PATCH 28/29] feat: Share permissions data and controls across list
 and graph views

---
 .../permissionsGraph/permissionsGraph.tsx     | 163 +++-------
 .../components/permissionsList/index.ts       |   1 +
 .../permissionsList/permissionsList.test.tsx  | 187 +++--------
 .../permissionsList/permissionsList.tsx       | 303 +++++-------------
 .../constants/permissionsPreviewData.ts       |  40 ++-
 .../hooks/usePermissionsData/index.ts         |   6 +
 .../usePermissionsData.test.ts                | 120 +++++++
 .../usePermissionsData/usePermissionsData.ts  | 225 +++++++++++++
 .../daoPermissionsPageClient.tsx              | 137 ++++++--
 9 files changed, 655 insertions(+), 527 deletions(-)
 create mode 100644 src/modules/settings/hooks/usePermissionsData/index.ts
 create mode 100644 src/modules/settings/hooks/usePermissionsData/usePermissionsData.test.ts
 create mode 100644 src/modules/settings/hooks/usePermissionsData/usePermissionsData.ts

diff --git a/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx b/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
index 9f1bd427fc..5f4afc08ee 100644
--- a/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionsGraph.tsx
@@ -1,94 +1,48 @@
 'use client';
 
 import '@xyflow/react/dist/style.css';
-import { CardEmptyState, StateSkeletonBar, Tabs } from '@aragon/gov-ui-kit';
+import { CardEmptyState, StateSkeletonBar } from '@aragon/gov-ui-kit';
 import { ReactFlowProvider } from '@xyflow/react';
-import { useMemo, useState } from 'react';
-import {
-    type Network,
-    useAllDaoPermissions,
-    useDao,
-} from '@/shared/api/daoService';
-import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import { useMemo } from 'react';
+import type { IDao, IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
 import { useTranslations } from '@/shared/components/translationsProvider';
-import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
 import type { IPermissionRow } from '../../types';
 import { buildPermissionGraph } from '../../utils/buildPermissionGraph';
 import { PermissionsGraphCanvas } from './permissionsGraphCanvas';
 
 export interface IPermissionsGraphProps {
     /**
-     * ID of the DAO to visualize permissions for.
+     * Permission rows to visualize (the same data the list view consumes).
      */
-    daoId: string;
-}
-
-interface IPermissionsAccount {
-    id: string;
-    name: string;
-    network: Network;
-    daoAddress: string;
+    rows: IPermissionRow[];
+    /**
+     * The DAO the permissions belong to, used to classify DAO / linked-DAO nodes.
+     */
+    dao?: IDao;
+    /**
+     * Installed DAO plugins used to classify and label plugin nodes.
+     */
+    daoPlugins?: IFilterComponentPlugin<IDaoPlugin>[];
+    /**
+     * Whether the permissions are still loading.
+     */
+    isLoading: boolean;
+    /**
+     * Active account id — re-fits the canvas when the selected account changes.
+     */
+    activeAccountId?: string;
 }
 
+/**
+ * Body of the permissions graph view. Receives already-resolved data from the
+ * shared `usePermissionsData` hook so it visualizes exactly what the list shows;
+ * the account selector and view toggle live in the page shell.
+ */
 export const PermissionsGraph: React.FC<IPermissionsGraphProps> = (props) => {
-    const { daoId } = props;
+    const { rows, dao, daoPlugins, isLoading, activeAccountId } = props;
 
     const { t } = useTranslations();
-    const { isEnabled } = useFeatureFlags();
-
-    const { data: dao } = useDao({ urlParams: { id: daoId } });
-    const daoPlugins = useDaoPlugins({ daoId, includeLinkedAccounts: true });
-
-    const accounts = useMemo<IPermissionsAccount[]>(() => {
-        if (dao == null) {
-            return [];
-        }
-
-        const mainAccount: IPermissionsAccount = {
-            id: dao.id,
-            name: dao.name,
-            network: dao.network,
-            daoAddress: dao.address,
-        };
-
-        const linkedAccounts = dao.linkedAccounts ?? [];
-        const showLinkedAccounts =
-            isEnabled('linkedAccount') && linkedAccounts.length > 0;
-
-        if (!showLinkedAccounts) {
-            return [mainAccount];
-        }
-
-        return [
-            mainAccount,
-            ...linkedAccounts.map((account) => ({
-                id: account.id,
-                name: account.name,
-                network: account.network,
-                daoAddress: account.address,
-            })),
-        ];
-    }, [dao, isEnabled]);
-
-    const [selectedAccountId, setSelectedAccountId] = useState<string>();
-    const activeAccountId = selectedAccountId ?? accounts[0]?.id;
-    const activeAccount =
-        accounts.find((account) => account.id === activeAccountId) ??
-        accounts[0];
-
-    const { data, isLoading } = useAllDaoPermissions(
-        {
-            urlParams: {
-                network: activeAccount?.network as Network,
-                daoAddress: activeAccount?.daoAddress ?? '',
-            },
-        },
-        { enabled: activeAccount != null },
-    );
-
-    // NOTE: the optional `condition` field is supplied by the preview mock until
-    // APP-953 formalizes it on the permissions response; cast at this boundary.
-    const rows = (data ?? []) as IPermissionRow[];
 
     const graph = useMemo(() => {
         if (dao == null) {
@@ -98,55 +52,30 @@ export const PermissionsGraph: React.FC<IPermissionsGraphProps> = (props) => {
         return buildPermissionGraph({ rows, dao, daoPlugins });
     }, [rows, dao, daoPlugins]);
 
-    const renderBody = () => {
-        if (isLoading || dao == null) {
-            return <PermissionsGraphSkeleton />;
-        }
-
-        if (graph.nodes.length === 0) {
-            return (
-                <CardEmptyState
-                    description={t(
-                        'app.settings.daoPermissionsPage.graphView.empty.description',
-                    )}
-                    heading={t(
-                        'app.settings.daoPermissionsPage.graphView.empty.heading',
-                    )}
-                    objectIllustration={{ object: 'SETTINGS' }}
-                />
-            );
-        }
+    if (isLoading || dao == null) {
+        return <PermissionsGraphSkeleton />;
+    }
 
+    if (graph.nodes.length === 0) {
         return (
-            <div className="relative h-[640px] w-full overflow-hidden rounded-xl border border-neutral-100">
-                <ReactFlowProvider key={activeAccountId}>
-                    <PermissionsGraphCanvas graph={graph} />
-                </ReactFlowProvider>
-            </div>
+            <CardEmptyState
+                description={t(
+                    'app.settings.daoPermissionsPage.graphView.empty.description',
+                )}
+                heading={t(
+                    'app.settings.daoPermissionsPage.graphView.empty.heading',
+                )}
+                objectIllustration={{ object: 'SETTINGS' }}
+            />
         );
-    };
-
-    if (accounts.length <= 1) {
-        return renderBody();
     }
 
     return (
-        <Tabs.Root onValueChange={setSelectedAccountId} value={activeAccountId}>
-            <Tabs.List>
-                {accounts.map((account) => (
-                    <Tabs.Trigger
-                        key={account.id}
-                        label={account.name}
-                        value={account.id}
-                    />
-                ))}
-            </Tabs.List>
-            {accounts.map((account) => (
-                <Tabs.Content key={account.id} value={account.id}>
-                    {renderBody()}
-                </Tabs.Content>
-            ))}
-        </Tabs.Root>
+        <div className="relative h-[640px] w-full overflow-hidden rounded-xl border border-neutral-100">
+            <ReactFlowProvider key={activeAccountId}>
+                <PermissionsGraphCanvas graph={graph} />
+            </ReactFlowProvider>
+        </div>
     );
 };
 
diff --git a/src/modules/settings/components/permissionsList/index.ts b/src/modules/settings/components/permissionsList/index.ts
index f047f20338..cc5f1e5f0b 100644
--- a/src/modules/settings/components/permissionsList/index.ts
+++ b/src/modules/settings/components/permissionsList/index.ts
@@ -1,4 +1,5 @@
 export {
+    getPermissionRowKey,
     type IPermissionsListProps,
     PermissionsList,
 } from './permissionsList';
diff --git a/src/modules/settings/components/permissionsList/permissionsList.test.tsx b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
index 7fb9aa8ae0..bc66593abc 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.test.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.test.tsx
@@ -1,23 +1,13 @@
 import { GukModulesProvider } from '@aragon/gov-ui-kit';
 import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import * as daoService from '@/shared/api/daoService';
-import {
-    type IDao,
-    type ILinkedAccountSummary,
-    Network,
-} from '@/shared/api/daoService';
-import * as featureFlagsProvider from '@/shared/components/featureFlagsProvider';
-import * as useDaoPluginsModule from '@/shared/hooks/useDaoPlugins';
-import {
-    generateDao,
-    generateDaoMetrics,
-    generateReactQueryResultSuccess,
-} from '@/shared/testUtils';
 import { ALLOW_FLAG, ANY_ADDR } from '../../constants/permissionSentinels';
 import { initialiseConditionRegistry } from '../../initConditionRegistry';
 import type { IPermissionRow } from '../../types';
-import { PermissionsList } from './permissionsList';
+import {
+    getPermissionRowKey,
+    type IPermissionsListProps,
+    PermissionsList,
+} from './permissionsList';
 
 const ROOT_PERMISSION_ID =
     '0x815fe80e4b37c8582a3b773d1d7071f983eacfd56b5965db654f3087c25ada33';
@@ -25,64 +15,31 @@ const EXECUTE_PERMISSION_ID =
     '0xbf04b4486c9663d805744005c3da000eda93de6e3308a4a7a812eb565327b78d';
 
 describe('<PermissionsList /> component', () => {
-    const useDaoSpy = jest.spyOn(daoService, 'useDao');
-    const useAllDaoPermissionsSpy = jest.spyOn(
-        daoService,
-        'useAllDaoPermissions',
-    );
-    const useDaoPluginsSpy = jest.spyOn(useDaoPluginsModule, 'useDaoPlugins');
-    const useFeatureFlagsSpy = jest.spyOn(
-        featureFlagsProvider,
-        'useFeatureFlags',
-    );
+    beforeAll(() => {
+        initialiseConditionRegistry();
+    });
 
-    const setFeatureFlags = (linkedAccountEnabled: boolean) => {
-        useFeatureFlagsSpy.mockReturnValue({
-            isEnabled: (key) => key === 'linkedAccount' && linkedAccountEnabled,
-        } as ReturnType<typeof featureFlagsProvider.useFeatureFlags>);
-    };
+    const createTestComponent = (props?: Partial<IPermissionsListProps>) => {
+        const completeProps: IPermissionsListProps = {
+            rows: [],
+            accountRefs: [],
+            daoPlugins: [],
+            chainId: undefined,
+            isLoading: false,
+            expandedRows: [],
+            onExpandedRowsChange: jest.fn(),
+            ...props,
+        };
 
-    const setDao = (dao?: Partial<IDao>) => {
-        useDaoSpy.mockReturnValue(
-            generateReactQueryResultSuccess({
-                data: generateDao(dao),
-            }) as ReturnType<typeof daoService.useDao>,
+        return (
+            <GukModulesProvider>
+                <PermissionsList {...completeProps} />
+            </GukModulesProvider>
         );
     };
 
-    const setPermissions = (
-        result: Partial<ReturnType<typeof daoService.useAllDaoPermissions>>,
-    ) => {
-        useAllDaoPermissionsSpy.mockReturnValue({
-            data: [],
-            isLoading: false,
-            error: null,
-            refetch: jest.fn(),
-            ...result,
-        } as ReturnType<typeof daoService.useAllDaoPermissions>);
-    };
-
-    beforeEach(() => {
-        setFeatureFlags(false);
-        setDao();
-        setPermissions({ data: [], isLoading: false });
-        useDaoPluginsSpy.mockReturnValue([]);
-    });
-
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
-    const createTestComponent = (props?: { daoId?: string }) => (
-        <GukModulesProvider>
-            <PermissionsList daoId={props?.daoId ?? 'dao-test'} />
-        </GukModulesProvider>
-    );
-
     it('renders a skeleton while the permissions are loading', () => {
-        setPermissions({ data: [], isLoading: true });
-
-        render(createTestComponent());
+        render(createTestComponent({ isLoading: true }));
 
         expect(
             screen.getByTestId('permissions-list-skeleton'),
@@ -92,10 +49,8 @@ describe('<PermissionsList /> component', () => {
         ).not.toBeInTheDocument();
     });
 
-    it('renders the empty state when the account has no permissions', () => {
-        setPermissions({ data: [], isLoading: false });
-
-        render(createTestComponent());
+    it('renders the empty state when there are no permissions', () => {
+        render(createTestComponent({ rows: [] }));
 
         expect(
             screen.getByText(/permissionsList.empty.heading/),
@@ -121,9 +76,8 @@ describe('<PermissionsList /> component', () => {
                 condition: { conditionType: 'voting-power' },
             },
         ];
-        setPermissions({ data: rows, isLoading: false });
 
-        render(createTestComponent());
+        render(createTestComponent({ rows }));
 
         expect(screen.getByText('ROOT_PERMISSION')).toBeInTheDocument();
         expect(screen.getByText('EXECUTE_PERMISSION')).toBeInTheDocument();
@@ -150,17 +104,14 @@ describe('<PermissionsList /> component', () => {
                 condition: { conditionType: 'voting-power' },
             },
         ];
-        setPermissions({ data: rows, isLoading: false });
 
-        render(createTestComponent());
+        render(createTestComponent({ rows }));
 
         expect(screen.getByText('VotingPower')).toBeInTheDocument();
         expect(screen.getByText('-')).toBeInTheDocument();
     });
 
-    it('renders both the Details and Condition lists when a row is expanded', async () => {
-        initialiseConditionRegistry();
-        const user = userEvent.setup();
+    it('renders both the Details and Condition lists for an expanded row', async () => {
         const rows: IPermissionRow[] = [
             {
                 permissionId: EXECUTE_PERMISSION_ID,
@@ -174,12 +125,12 @@ describe('<PermissionsList /> component', () => {
                 },
             },
         ];
-        setPermissions({ data: rows, isLoading: false });
 
-        render(createTestComponent());
-
-        await user.click(
-            screen.getByRole('button', { name: /permissionsList.expandAll/ }),
+        render(
+            createTestComponent({
+                rows,
+                expandedRows: [getPermissionRowKey(rows[0])],
+            }),
         );
 
         expect(
@@ -188,15 +139,15 @@ describe('<PermissionsList /> component', () => {
         expect(
             screen.getByText(/permissionsList.condition.heading/),
         ).toBeInTheDocument();
+        // The condition slot is a lazy (dynamic) component — await its load.
         expect(
-            screen.getByText(/votingPowerConditionSlot.token/),
+            await screen.findByText(/votingPowerConditionSlot.token/),
         ).toBeInTheDocument();
         // 1e18 base units formatted with the default 18 decimals.
-        expect(screen.getByText('1')).toBeInTheDocument();
+        expect(await screen.findByText('1')).toBeInTheDocument();
     });
 
-    it('routes the condition cell to the fallback slot when expanded', async () => {
-        const user = userEvent.setup();
+    it('routes the condition cell to the fallback slot for an expanded row', () => {
         const rows: IPermissionRow[] = [
             {
                 permissionId: ROOT_PERMISSION_ID,
@@ -205,66 +156,14 @@ describe('<PermissionsList /> component', () => {
                 conditionAddress: ALLOW_FLAG,
             },
         ];
-        setPermissions({ data: rows, isLoading: false });
-
-        render(createTestComponent());
-
-        await user.click(
-            screen.getByRole('button', { name: /permissionsList.expandAll/ }),
-        );
-
-        expect(screen.getByText(/noConditionSlot.heading/)).toBeInTheDocument();
-    });
-
-    it('re-queries permissions with the selected linked account params on tab switch', async () => {
-        const user = userEvent.setup();
-        const linkedAccount: ILinkedAccountSummary = {
-            id: 'linked-1',
-            address: '0xLinkedAddress',
-            network: Network.POLYGON_MAINNET,
-            name: 'Linked Treasury',
-            description: '',
-            ens: null,
-            subdomain: null,
-            avatar: null,
-            metrics: generateDaoMetrics(),
-            links: [],
-            blockTimestamp: 0,
-            transactionHash: '',
-        };
-        setFeatureFlags(true);
-        setDao({
-            id: 'main-dao',
-            address: '0xMainAddress',
-            network: Network.ETHEREUM_MAINNET,
-            name: 'Main DAO',
-            linkedAccounts: [linkedAccount],
-        });
-
-        render(createTestComponent({ daoId: 'main-dao' }));
 
-        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
-            expect.objectContaining({
-                urlParams: {
-                    network: Network.ETHEREUM_MAINNET,
-                    daoAddress: '0xMainAddress',
-                },
+        render(
+            createTestComponent({
+                rows,
+                expandedRows: [getPermissionRowKey(rows[0])],
             }),
-            expect.anything(),
-        );
-
-        await user.click(
-            screen.getByRole('radio', { name: 'Linked Treasury' }),
         );
 
-        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
-            expect.objectContaining({
-                urlParams: {
-                    network: Network.POLYGON_MAINNET,
-                    daoAddress: '0xLinkedAddress',
-                },
-            }),
-            expect.anything(),
-        );
+        expect(screen.getByText(/noConditionSlot.heading/)).toBeInTheDocument();
     });
 });
diff --git a/src/modules/settings/components/permissionsList/permissionsList.tsx b/src/modules/settings/components/permissionsList/permissionsList.tsx
index f7a68de62a..ea1f5d90dd 100644
--- a/src/modules/settings/components/permissionsList/permissionsList.tsx
+++ b/src/modules/settings/components/permissionsList/permissionsList.tsx
@@ -3,7 +3,6 @@
 import {
     Accordion,
     addressUtils,
-    Button,
     CardEmptyState,
     ChainEntityType,
     DaoAvatar,
@@ -11,31 +10,15 @@ import {
     Link,
     StateSkeletonBar,
     Tag,
-    Toggle,
-    ToggleGroup,
     useBlockExplorer,
 } from '@aragon/gov-ui-kit';
-import type { ReactNode } from 'react';
-import { useMemo, useState } from 'react';
-import {
-    type Network,
-    useAllDaoPermissions,
-    useDao,
-} from '@/shared/api/daoService';
-import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import type { IDaoPlugin } from '@/shared/api/daoService';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
 import { PluginSingleComponent } from '@/shared/components/pluginSingleComponent';
 import { useTranslations } from '@/shared/components/translationsProvider';
-import { networkDefinitions } from '@/shared/constants/networkDefinitions';
-import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
-import { ipfsUtils } from '@/shared/utils/ipfsUtils';
 import { permissionNameUtils } from '@/shared/utils/permissionNameUtils';
 import { SettingsSlotId } from '../../constants/moduleSlots';
 import { ALLOW_FLAG } from '../../constants/permissionSentinels';
-import {
-    permissionsPreviewAccounts,
-    permissionsPreviewPlugins,
-} from '../../constants/permissionsPreviewData';
-import { PermissionsPreviewRef } from '../../constants/permissionsPreviewRefs';
 import type { IPermissionRow } from '../../types';
 import { conditionTypeUtils } from '../../utils/conditionTypeUtils';
 import {
@@ -45,23 +28,37 @@ import {
 } from '../../utils/permissionEntityUtils';
 import { NoConditionSlot } from '../noConditionSlot';
 
+type DaoPlugins = IFilterComponentPlugin<IDaoPlugin>[] | undefined;
+
 export interface IPermissionsListProps {
     /**
-     * ID of the DAO to display permissions for.
+     * Permission rows to render.
      */
-    daoId: string;
+    rows: IPermissionRow[];
     /**
-     * View switcher (list/graph toggle) rendered on the right of the filter row.
+     * Account references used to resolve `who` / `where` entities.
      */
-    viewSwitcher?: ReactNode;
-}
-
-interface IPermissionsAccount {
-    id: string;
-    name: string;
-    network: Network;
-    daoAddress: string;
-    avatarSrc?: string;
+    accountRefs: IPermissionAccountRef[];
+    /**
+     * Installed DAO plugins used to classify plugin entities.
+     */
+    daoPlugins?: DaoPlugins;
+    /**
+     * Chain id for block-explorer links.
+     */
+    chainId?: number;
+    /**
+     * Whether the permissions are still loading.
+     */
+    isLoading: boolean;
+    /**
+     * Row keys currently expanded.
+     */
+    expandedRows: string[];
+    /**
+     * Called when the set of expanded rows changes.
+     */
+    onExpandedRowsChange: (rows: string[]) => void;
 }
 
 const SKELETON_ROW_KEYS = [
@@ -71,220 +68,66 @@ const SKELETON_ROW_KEYS = [
     'skeleton-4',
 ];
 
-const getRowKey = (row: IPermissionRow): string =>
+export const getPermissionRowKey = (row: IPermissionRow): string =>
     `${row.permissionId}-${row.whoAddress}-${row.whereAddress}`;
 
+/**
+ * Body of the permissions list view. Receives already-resolved data from the
+ * shared `usePermissionsData` hook; the account selector, view toggle and
+ * expand-all control live in the page shell so the list and graph share them.
+ */
 export const PermissionsList: React.FC<IPermissionsListProps> = (props) => {
-    const { daoId, viewSwitcher } = props;
+    const {
+        rows,
+        accountRefs,
+        daoPlugins,
+        chainId,
+        isLoading,
+        expandedRows,
+        onExpandedRowsChange,
+    } = props;
 
     const { t } = useTranslations();
-    const { isEnabled } = useFeatureFlags();
-
-    // The `useMocks` flag drives both the preview permission rows and the
-    // self-contained "Patito DAO" identity they resolve against.
-    const isPreview = isEnabled('useMocks');
-
-    const { data: dao } = useDao({ urlParams: { id: daoId } });
-    const realDaoPlugins = useDaoPlugins({
-        daoId,
-        includeLinkedAccounts: true,
-    });
-    const daoPlugins = isPreview ? permissionsPreviewPlugins : realDaoPlugins;
-
-    const realAccounts = useMemo<IPermissionsAccount[]>(() => {
-        if (dao == null) {
-            return [];
-        }
-
-        const mainAccount: IPermissionsAccount = {
-            id: dao.id,
-            name: dao.name,
-            network: dao.network,
-            daoAddress: dao.address,
-            avatarSrc: ipfsUtils.cidToSrc(dao.avatar),
-        };
-
-        const linkedAccounts = dao.linkedAccounts ?? [];
-        const showLinkedAccounts =
-            isEnabled('linkedAccount') && linkedAccounts.length > 0;
-
-        if (!showLinkedAccounts) {
-            return [mainAccount];
-        }
-
-        return [
-            mainAccount,
-            ...linkedAccounts.map((account) => ({
-                id: account.id,
-                name: account.name,
-                network: account.network,
-                daoAddress: account.address,
-                avatarSrc: ipfsUtils.cidToSrc(account.avatar),
-            })),
-        ];
-    }, [dao, isEnabled]);
-
-    const accounts = isPreview ? permissionsPreviewAccounts : realAccounts;
-
-    const [selectedAccountId, setSelectedAccountId] = useState<string>();
-    const activeAccountId = selectedAccountId ?? accounts[0]?.id;
 
-    const handleAccountChange = (value: string | string[] | undefined) => {
-        if (typeof value === 'string') {
-            setSelectedAccountId(value);
-        }
-    };
-    const activeAccount =
-        accounts.find((account) => account.id === activeAccountId) ??
-        accounts[0];
-
-    const accountRefs = useMemo<IPermissionAccountRef[]>(
-        () =>
-            accounts.map((account) => ({
-                address: account.daoAddress,
-                name: account.name,
-                avatarSrc: account.avatarSrc,
-            })),
-        [accounts],
-    );
-
-    const { data, isLoading } = useAllDaoPermissions(
-        {
-            urlParams: {
-                network: activeAccount?.network as Network,
-                daoAddress: activeAccount?.daoAddress ?? '',
-            },
-        },
-        { enabled: activeAccount != null },
-    );
-
-    // NOTE: the optional `condition` field is supplied by the preview mock until
-    // APP-953 formalizes it on the permissions response; cast at this boundary.
-    const rows = useMemo(() => {
-        const rawRows = (data ?? []) as IPermissionRow[];
-        const pluginAddresses = (daoPlugins ?? []).map(
-            (plugin) => plugin.meta.address,
-        );
-
-        const linkedAddress = accounts.find(
-            (account) => account.id !== activeAccount?.id,
-        )?.daoAddress;
-
-        // Swap preview markers for the viewed DAO's real addresses so the sample
-        // rows resolve to names/tags/avatars. No-op for real backend data.
-        const refMap = new Map<string, string | undefined>([
-            [
-                PermissionsPreviewRef.self.toLowerCase(),
-                activeAccount?.daoAddress,
-            ],
-            [PermissionsPreviewRef.linked.toLowerCase(), linkedAddress],
-            [PermissionsPreviewRef.plugin0.toLowerCase(), pluginAddresses[0]],
-            [PermissionsPreviewRef.plugin1.toLowerCase(), pluginAddresses[1]],
-        ]);
-        const resolveRef = (address: string): string =>
-            refMap.get(address.toLowerCase()) ?? address;
-
-        return rawRows.map((row) => ({
-            ...row,
-            whoAddress: resolveRef(row.whoAddress),
-            whereAddress: resolveRef(row.whereAddress),
-        }));
-    }, [data, daoPlugins, activeAccount, accounts]);
-
-    const [expandedRows, setExpandedRows] = useState<string[]>([]);
-    const allExpanded = rows.length > 0 && expandedRows.length === rows.length;
-
-    const handleToggleAll = () => {
-        setExpandedRows(allExpanded ? [] : rows.map(getRowKey));
-    };
-
-    const chainId = activeAccount
-        ? networkDefinitions[activeAccount.network].id
-        : undefined;
-
-    const renderBody = () => {
-        if (isLoading) {
-            return <PermissionsListSkeleton />;
-        }
-
-        if (rows.length === 0) {
-            return (
-                <CardEmptyState
-                    description={t(
-                        'app.settings.permissionsList.empty.description',
-                    )}
-                    heading={t('app.settings.permissionsList.empty.heading')}
-                    objectIllustration={{ object: 'SETTINGS' }}
-                />
-            );
-        }
+    if (isLoading) {
+        return <PermissionsListSkeleton />;
+    }
 
+    if (rows.length === 0) {
         return (
-            <div className="flex flex-col gap-3">
-                <PermissionsListHeader />
-                <Accordion.Container
-                    isMulti={true}
-                    onValueChange={(value) => setExpandedRows(value ?? [])}
-                    value={expandedRows}
-                >
-                    {rows.map((row) => (
-                        <PermissionsListRow
-                            accounts={accountRefs}
-                            chainId={chainId}
-                            daoPlugins={daoPlugins}
-                            key={getRowKey(row)}
-                            row={row}
-                            rowKey={getRowKey(row)}
-                        />
-                    ))}
-                </Accordion.Container>
-            </div>
+            <CardEmptyState
+                description={t(
+                    'app.settings.permissionsList.empty.description',
+                )}
+                heading={t('app.settings.permissionsList.empty.heading')}
+                objectIllustration={{ object: 'SETTINGS' }}
+            />
         );
-    };
-
-    const showAccountSelector = accounts.length > 1;
-    const showExpandAll = !isLoading && rows.length > 0;
+    }
 
     return (
-        <div className="flex flex-col gap-6">
-            <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
-                {showAccountSelector && (
-                    <ToggleGroup
-                        isMultiSelect={false}
-                        onChange={handleAccountChange}
-                        value={activeAccountId}
-                    >
-                        {accounts.map((account) => (
-                            <Toggle
-                                key={account.id}
-                                label={account.name}
-                                value={account.id}
-                            />
-                        ))}
-                    </ToggleGroup>
-                )}
-                <div className="flex items-center gap-3 md:ml-auto md:gap-6">
-                    {showExpandAll && (
-                        <Button
-                            onClick={handleToggleAll}
-                            size="md"
-                            variant="tertiary"
-                        >
-                            {allExpanded
-                                ? t('app.settings.permissionsList.collapseAll')
-                                : t('app.settings.permissionsList.expandAll')}
-                        </Button>
-                    )}
-                    {viewSwitcher}
-                </div>
-            </div>
-            {renderBody()}
+        <div className="flex flex-col gap-3">
+            <PermissionsListHeader />
+            <Accordion.Container
+                isMulti={true}
+                onValueChange={(value) => onExpandedRowsChange(value ?? [])}
+                value={expandedRows}
+            >
+                {rows.map((row) => (
+                    <PermissionsListRow
+                        accounts={accountRefs}
+                        chainId={chainId}
+                        daoPlugins={daoPlugins}
+                        key={getPermissionRowKey(row)}
+                        row={row}
+                        rowKey={getPermissionRowKey(row)}
+                    />
+                ))}
+            </Accordion.Container>
         </div>
     );
 };
 
-type DaoPlugins = ReturnType<typeof useDaoPlugins>;
-
 interface IPermissionsListRowProps {
     row: IPermissionRow;
     rowKey: string;
diff --git a/src/modules/settings/constants/permissionsPreviewData.ts b/src/modules/settings/constants/permissionsPreviewData.ts
index 2138d8cc08..e71a6f2205 100644
--- a/src/modules/settings/constants/permissionsPreviewData.ts
+++ b/src/modules/settings/constants/permissionsPreviewData.ts
@@ -1,4 +1,5 @@
 import {
+    type IDao,
     type IDaoPlugin,
     Network,
     PluginInterfaceType,
@@ -8,14 +9,14 @@ import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterCom
 /**
  * Self-contained "Patito DAO" preview identity used alongside
  * {@link permissionsMocks} when the `useMocks` flag is on, so the permissions
- * page renders the exact scenario from the Figma design (Patito DAO + a linked
- * Patito Developer DAO, with `Core` (SPP) and `Founders` (MULTISIG) plugins)
- * regardless of which DAO is opened. Ignored entirely for live data.
+ * page (list AND graph) renders the exact scenario from the Figma design (Patito
+ * DAO + a linked Patito Developer DAO, with `Core` (SPP) and `Founders`
+ * (MULTISIG) plugins) regardless of which DAO is opened. Ignored for live data.
  */
 
 /**
- * Minimal account shape the permissions list needs to build its tabs and resolve
- * `who` / `where` entities.
+ * Minimal account shape the permissions views need to build the account selector
+ * and resolve `who` / `where` entities.
  */
 export interface IPermissionsPreviewAccount {
     id: string;
@@ -30,23 +31,48 @@ const patitoDeveloperDaoAddress = '0x71C7656EC7ab88b098defB751B7401B5f6d8976F';
 const coreAddress = '0x1eC50000000000000000000000000000000e8145';
 const foundersAddress = '0xf00d00000000000000000000000000000000e845';
 
+const patitoDaoAvatar = '/patitoDao.png';
+const patitoDeveloperDaoAvatar = '/patitoDeveloperDao.png';
+
 export const permissionsPreviewAccounts: IPermissionsPreviewAccount[] = [
     {
         id: 'patito-dao',
         name: 'Patito DAO',
         network: Network.ETHEREUM_MAINNET,
         daoAddress: patitoDaoAddress,
-        avatarSrc: '/patitoDao.png',
+        avatarSrc: patitoDaoAvatar,
     },
     {
         id: 'patito-developer-dao',
         name: 'Patito Developer DAO',
         network: Network.ETHEREUM_MAINNET,
         daoAddress: patitoDeveloperDaoAddress,
-        avatarSrc: '/patitoDeveloperDao.png',
+        avatarSrc: patitoDeveloperDaoAvatar,
     },
 ];
 
+/**
+ * Patito `IDao` consumed by the graph's `buildPermissionGraph`, which classifies
+ * nodes from `dao.address` / `dao.linkedAccounts`. Only the fields the graph and
+ * account derivation read are meaningful; the rest is cast for preview use.
+ */
+export const permissionsPreviewDao = {
+    id: 'patito-dao',
+    name: 'Patito DAO',
+    network: Network.ETHEREUM_MAINNET,
+    address: patitoDaoAddress,
+    avatar: patitoDaoAvatar,
+    linkedAccounts: [
+        {
+            id: 'patito-developer-dao',
+            name: 'Patito Developer DAO',
+            network: Network.ETHEREUM_MAINNET,
+            address: patitoDeveloperDaoAddress,
+            avatar: patitoDeveloperDaoAvatar,
+        },
+    ],
+} as unknown as IDao;
+
 export const permissionsPreviewPlugins: IFilterComponentPlugin<IDaoPlugin>[] = [
     {
         id: 'core',
diff --git a/src/modules/settings/hooks/usePermissionsData/index.ts b/src/modules/settings/hooks/usePermissionsData/index.ts
new file mode 100644
index 0000000000..e344ad57da
--- /dev/null
+++ b/src/modules/settings/hooks/usePermissionsData/index.ts
@@ -0,0 +1,6 @@
+export {
+    type IPermissionsDataAccount,
+    type IUsePermissionsDataParams,
+    type IUsePermissionsDataResult,
+    usePermissionsData,
+} from './usePermissionsData';
diff --git a/src/modules/settings/hooks/usePermissionsData/usePermissionsData.test.ts b/src/modules/settings/hooks/usePermissionsData/usePermissionsData.test.ts
new file mode 100644
index 0000000000..b3c8060b96
--- /dev/null
+++ b/src/modules/settings/hooks/usePermissionsData/usePermissionsData.test.ts
@@ -0,0 +1,120 @@
+import { act, renderHook } from '@testing-library/react';
+import * as daoService from '@/shared/api/daoService';
+import { type IDao, Network } from '@/shared/api/daoService';
+import * as featureFlagsProvider from '@/shared/components/featureFlagsProvider';
+import * as useDaoPluginsModule from '@/shared/hooks/useDaoPlugins';
+import {
+    generateDao,
+    generateDaoMetrics,
+    generateReactQueryResultSuccess,
+} from '@/shared/testUtils';
+import { permissionsPreviewAccounts } from '../../constants/permissionsPreviewData';
+import { usePermissionsData } from './usePermissionsData';
+
+describe('usePermissionsData hook', () => {
+    const useDaoSpy = jest.spyOn(daoService, 'useDao');
+    const useAllDaoPermissionsSpy = jest.spyOn(
+        daoService,
+        'useAllDaoPermissions',
+    );
+    const useDaoPluginsSpy = jest.spyOn(useDaoPluginsModule, 'useDaoPlugins');
+    const useFeatureFlagsSpy = jest.spyOn(
+        featureFlagsProvider,
+        'useFeatureFlags',
+    );
+
+    const setFeatureFlags = (enabled: Record<string, boolean>) => {
+        useFeatureFlagsSpy.mockReturnValue({
+            isEnabled: (key: string) => enabled[key] ?? false,
+        } as ReturnType<typeof featureFlagsProvider.useFeatureFlags>);
+    };
+
+    const setDao = (dao?: Partial<IDao>) => {
+        useDaoSpy.mockReturnValue(
+            generateReactQueryResultSuccess({
+                data: generateDao(dao),
+            }) as ReturnType<typeof daoService.useDao>,
+        );
+    };
+
+    beforeEach(() => {
+        setFeatureFlags({});
+        setDao();
+        useAllDaoPermissionsSpy.mockReturnValue({
+            data: [],
+            isLoading: false,
+            error: null,
+            refetch: jest.fn(),
+        } as ReturnType<typeof daoService.useAllDaoPermissions>);
+        useDaoPluginsSpy.mockReturnValue([]);
+    });
+
+    afterEach(() => {
+        jest.clearAllMocks();
+    });
+
+    it('re-queries permissions with the selected account params on switch', () => {
+        setFeatureFlags({ linkedAccount: true });
+        setDao({
+            id: 'main-dao',
+            address: '0xMainAddress',
+            network: Network.ETHEREUM_MAINNET,
+            name: 'Main DAO',
+            linkedAccounts: [
+                {
+                    id: 'linked-1',
+                    address: '0xLinkedAddress',
+                    network: Network.POLYGON_MAINNET,
+                    name: 'Linked Treasury',
+                    description: '',
+                    ens: null,
+                    subdomain: null,
+                    avatar: null,
+                    metrics: generateDaoMetrics(),
+                    links: [],
+                    blockTimestamp: 0,
+                    transactionHash: '',
+                },
+            ],
+        });
+
+        const { result } = renderHook(() =>
+            usePermissionsData({ daoId: 'main-dao' }),
+        );
+
+        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                urlParams: {
+                    network: Network.ETHEREUM_MAINNET,
+                    daoAddress: '0xMainAddress',
+                },
+            }),
+            expect.anything(),
+        );
+
+        act(() => {
+            result.current.setSelectedAccountId('linked-1');
+        });
+
+        expect(useAllDaoPermissionsSpy).toHaveBeenLastCalledWith(
+            expect.objectContaining({
+                urlParams: {
+                    network: Network.POLYGON_MAINNET,
+                    daoAddress: '0xLinkedAddress',
+                },
+            }),
+            expect.anything(),
+        );
+    });
+
+    it('uses the Patito preview identity when the mocks flag is on', () => {
+        setFeatureFlags({ useMocks: true });
+
+        const { result } = renderHook(() =>
+            usePermissionsData({ daoId: 'any-dao' }),
+        );
+
+        expect(result.current.accounts).toEqual(permissionsPreviewAccounts);
+        expect(result.current.dao?.name).toBe('Patito DAO');
+    });
+});
diff --git a/src/modules/settings/hooks/usePermissionsData/usePermissionsData.ts b/src/modules/settings/hooks/usePermissionsData/usePermissionsData.ts
new file mode 100644
index 0000000000..1d2f059891
--- /dev/null
+++ b/src/modules/settings/hooks/usePermissionsData/usePermissionsData.ts
@@ -0,0 +1,225 @@
+'use client';
+
+import { useMemo, useState } from 'react';
+import {
+    type IDao,
+    type IDaoPlugin,
+    type Network,
+    useAllDaoPermissions,
+    useDao,
+} from '@/shared/api/daoService';
+import { useFeatureFlags } from '@/shared/components/featureFlagsProvider';
+import type { IFilterComponentPlugin } from '@/shared/components/pluginFilterComponent';
+import { networkDefinitions } from '@/shared/constants/networkDefinitions';
+import { useDaoPlugins } from '@/shared/hooks/useDaoPlugins';
+import { ipfsUtils } from '@/shared/utils/ipfsUtils';
+import {
+    permissionsPreviewAccounts,
+    permissionsPreviewDao,
+    permissionsPreviewPlugins,
+} from '../../constants/permissionsPreviewData';
+import { PermissionsPreviewRef } from '../../constants/permissionsPreviewRefs';
+import type { IPermissionRow } from '../../types';
+import type { IPermissionAccountRef } from '../../utils/permissionEntityUtils';
+
+/**
+ * Account shown in the permissions account selector and used to scope the
+ * fetched permissions.
+ */
+export interface IPermissionsDataAccount {
+    id: string;
+    name: string;
+    network: Network;
+    daoAddress: string;
+    avatarSrc?: string;
+}
+
+export interface IUsePermissionsDataParams {
+    /**
+     * ID of the DAO to load permissions for.
+     */
+    daoId: string;
+}
+
+export interface IUsePermissionsDataResult {
+    /**
+     * The DAO the permissions belong to (Patito DAO under the preview flag),
+     * consumed by the graph view.
+     */
+    dao?: IDao;
+    /**
+     * The DAO and its linked accounts, driving the account selector.
+     */
+    accounts: IPermissionsDataAccount[];
+    /**
+     * Currently selected account id.
+     */
+    activeAccountId?: string;
+    /**
+     * Selects an account by id.
+     */
+    setSelectedAccountId: (id: string) => void;
+    /**
+     * The resolved active account.
+     */
+    activeAccount?: IPermissionsDataAccount;
+    /**
+     * Account references (address + display data) used to resolve `who` / `where`
+     * entities in the list view.
+     */
+    accountRefs: IPermissionAccountRef[];
+    /**
+     * Installed DAO plugins used to classify plugin entities.
+     */
+    daoPlugins?: IFilterComponentPlugin<IDaoPlugin>[];
+    /**
+     * Permission rows for the active account (preview markers already resolved).
+     */
+    rows: IPermissionRow[];
+    /**
+     * Chain id of the active account, for block-explorer links.
+     */
+    chainId?: number;
+    /**
+     * Whether the permissions are still loading.
+     */
+    isLoading: boolean;
+}
+
+/**
+ * Single source of truth for the permissions views: fetches the DAO, its
+ * plugins and permissions, owns the account selection, and applies the preview
+ * identity + marker swap when `useMocks` is on. Both the list and graph render
+ * from this so a view toggle never changes the underlying data.
+ */
+export const usePermissionsData = (
+    params: IUsePermissionsDataParams,
+): IUsePermissionsDataResult => {
+    const { daoId } = params;
+
+    const { isEnabled } = useFeatureFlags();
+
+    // The `useMocks` flag drives both the preview permission rows and the
+    // self-contained "Patito DAO" identity they resolve against.
+    const isPreview = isEnabled('useMocks');
+
+    const { data: realDao } = useDao({ urlParams: { id: daoId } });
+    const realDaoPlugins = useDaoPlugins({
+        daoId,
+        includeLinkedAccounts: true,
+    });
+
+    const dao = isPreview ? permissionsPreviewDao : realDao;
+    const daoPlugins = isPreview ? permissionsPreviewPlugins : realDaoPlugins;
+
+    const realAccounts = useMemo<IPermissionsDataAccount[]>(() => {
+        if (realDao == null) {
+            return [];
+        }
+
+        const mainAccount: IPermissionsDataAccount = {
+            id: realDao.id,
+            name: realDao.name,
+            network: realDao.network,
+            daoAddress: realDao.address,
+            avatarSrc: ipfsUtils.cidToSrc(realDao.avatar),
+        };
+
+        const linkedAccounts = realDao.linkedAccounts ?? [];
+        const showLinkedAccounts =
+            isEnabled('linkedAccount') && linkedAccounts.length > 0;
+
+        if (!showLinkedAccounts) {
+            return [mainAccount];
+        }
+
+        return [
+            mainAccount,
+            ...linkedAccounts.map((account) => ({
+                id: account.id,
+                name: account.name,
+                network: account.network,
+                daoAddress: account.address,
+                avatarSrc: ipfsUtils.cidToSrc(account.avatar),
+            })),
+        ];
+    }, [realDao, isEnabled]);
+
+    const accounts = isPreview ? permissionsPreviewAccounts : realAccounts;
+
+    const [selectedAccountId, setSelectedAccountId] = useState<string>();
+    const activeAccountId = selectedAccountId ?? accounts[0]?.id;
+    const activeAccount =
+        accounts.find((account) => account.id === activeAccountId) ??
+        accounts[0];
+
+    const accountRefs = useMemo<IPermissionAccountRef[]>(
+        () =>
+            accounts.map((account) => ({
+                address: account.daoAddress,
+                name: account.name,
+                avatarSrc: account.avatarSrc,
+            })),
+        [accounts],
+    );
+
+    const { data, isLoading } = useAllDaoPermissions(
+        {
+            urlParams: {
+                network: activeAccount?.network as Network,
+                daoAddress: activeAccount?.daoAddress ?? '',
+            },
+        },
+        { enabled: activeAccount != null },
+    );
+
+    // NOTE: the optional `condition` field is supplied by the preview mock until
+    // APP-953 formalizes it on the permissions response; cast at this boundary.
+    const rows = useMemo(() => {
+        const rawRows = (data ?? []) as IPermissionRow[];
+        const pluginAddresses = (daoPlugins ?? []).map(
+            (plugin) => plugin.meta.address,
+        );
+
+        const linkedAddress = accounts.find(
+            (account) => account.id !== activeAccount?.id,
+        )?.daoAddress;
+
+        // Swap preview markers for the viewed DAO's real addresses so the sample
+        // rows resolve to names/tags/avatars. No-op for real backend data.
+        const refMap = new Map<string, string | undefined>([
+            [
+                PermissionsPreviewRef.self.toLowerCase(),
+                activeAccount?.daoAddress,
+            ],
+            [PermissionsPreviewRef.linked.toLowerCase(), linkedAddress],
+            [PermissionsPreviewRef.plugin0.toLowerCase(), pluginAddresses[0]],
+            [PermissionsPreviewRef.plugin1.toLowerCase(), pluginAddresses[1]],
+        ]);
+        const resolveRef = (address: string): string =>
+            refMap.get(address.toLowerCase()) ?? address;
+
+        return rawRows.map((row) => ({
+            ...row,
+            whoAddress: resolveRef(row.whoAddress),
+            whereAddress: resolveRef(row.whereAddress),
+        }));
+    }, [data, daoPlugins, accounts, activeAccount]);
+
+    const chainId = activeAccount
+        ? networkDefinitions[activeAccount.network].id
+        : undefined;
+
+    return {
+        dao,
+        accounts,
+        activeAccountId,
+        setSelectedAccountId,
+        activeAccount,
+        accountRefs,
+        daoPlugins,
+        rows,
+        chainId,
+        isLoading,
+    };
+};
diff --git a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
index 4527c555b6..f630bb1246 100644
--- a/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
+++ b/src/modules/settings/pages/daoPermissionsPage/daoPermissionsPageClient.tsx
@@ -1,13 +1,18 @@
 'use client';
 
-import { Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
+import { Button, Toggle, ToggleGroup } from '@aragon/gov-ui-kit';
+import { useState } from 'react';
 import { useDao } from '@/shared/api/daoService';
 import { Page } from '@/shared/components/page';
 import { useTranslations } from '@/shared/components/translationsProvider';
 import { useFilterUrlParam } from '@/shared/hooks/useFilterUrlParam';
 import { daoUtils } from '@/shared/utils/daoUtils';
 import { PermissionsGraph } from '../../components/permissionsGraph';
-import { PermissionsList } from '../../components/permissionsList';
+import {
+    getPermissionRowKey,
+    PermissionsList,
+} from '../../components/permissionsList';
+import { usePermissionsData } from '../../hooks/usePermissionsData';
 
 export interface IDaoPermissionsPageClientProps {
     /**
@@ -34,6 +39,18 @@ export const DaoPermissionsPageClient: React.FC<
 
     const { data: dao } = useDao({ urlParams: { id: daoId } });
 
+    const {
+        dao: permissionsDao,
+        accounts,
+        activeAccountId,
+        setSelectedAccountId,
+        accountRefs,
+        daoPlugins,
+        rows,
+        chainId,
+        isLoading,
+    } = usePermissionsData({ daoId });
+
     const [view, setView] = useFilterUrlParam({
         name: permissionsViewParam,
         fallbackValue: PermissionsView.LIST,
@@ -41,28 +58,25 @@ export const DaoPermissionsPageClient: React.FC<
         enableUrlUpdate: true,
     });
 
+    const [expandedRows, setExpandedRows] = useState<string[]>([]);
+
     const handleViewChange = (value?: string | string[]) => {
         if (typeof value === 'string' && value) {
             setView(value);
         }
     };
 
-    const viewToggle = (
-        <ToggleGroup
-            isMultiSelect={false}
-            onChange={handleViewChange}
-            value={view}
-        >
-            <Toggle
-                label={t('app.settings.daoPermissionsPage.view.list')}
-                value={PermissionsView.LIST}
-            />
-            <Toggle
-                label={t('app.settings.daoPermissionsPage.view.graph')}
-                value={PermissionsView.GRAPH}
-            />
-        </ToggleGroup>
-    );
+    const handleAccountChange = (value?: string | string[]) => {
+        if (typeof value === 'string' && value) {
+            setSelectedAccountId(value);
+        }
+    };
+
+    const allExpanded = rows.length > 0 && expandedRows.length === rows.length;
+
+    const handleToggleAll = () => {
+        setExpandedRows(allExpanded ? [] : rows.map(getPermissionRowKey));
+    };
 
     const pageBreadcrumbs = [
         {
@@ -78,6 +92,10 @@ export const DaoPermissionsPageClient: React.FC<
         },
     ];
 
+    const isListView = view === PermissionsView.LIST;
+    const showAccountSelector = accounts.length > 1;
+    const showExpandAll = isListView && !isLoading && rows.length > 0;
+
     return (
         <>
             <Page.Header
@@ -89,18 +107,79 @@ export const DaoPermissionsPageClient: React.FC<
             />
             <Page.Content>
                 <Page.Main>
-                    {view === PermissionsView.LIST && (
-                        <PermissionsList
-                            daoId={daoId}
-                            viewSwitcher={viewToggle}
-                        />
-                    )}
-                    {view === PermissionsView.GRAPH && (
-                        <div className="flex flex-col gap-6">
-                            <div className="flex justify-end">{viewToggle}</div>
-                            <PermissionsGraph daoId={daoId} />
+                    <div className="flex flex-col gap-6">
+                        <div className="flex flex-col gap-4 md:flex-row md:items-center md:justify-between">
+                            {showAccountSelector && (
+                                <ToggleGroup
+                                    isMultiSelect={false}
+                                    onChange={handleAccountChange}
+                                    value={activeAccountId}
+                                >
+                                    {accounts.map((account) => (
+                                        <Toggle
+                                            key={account.id}
+                                            label={account.name}
+                                            value={account.id}
+                                        />
+                                    ))}
+                                </ToggleGroup>
+                            )}
+                            <div className="flex items-center gap-3 md:ml-auto md:gap-6">
+                                {showExpandAll && (
+                                    <Button
+                                        onClick={handleToggleAll}
+                                        size="md"
+                                        variant="tertiary"
+                                    >
+                                        {allExpanded
+                                            ? t(
+                                                  'app.settings.permissionsList.collapseAll',
+                                              )
+                                            : t(
+                                                  'app.settings.permissionsList.expandAll',
+                                              )}
+                                    </Button>
+                                )}
+                                <ToggleGroup
+                                    isMultiSelect={false}
+                                    onChange={handleViewChange}
+                                    value={view}
+                                >
+                                    <Toggle
+                                        label={t(
+                                            'app.settings.daoPermissionsPage.view.list',
+                                        )}
+                                        value={PermissionsView.LIST}
+                                    />
+                                    <Toggle
+                                        label={t(
+                                            'app.settings.daoPermissionsPage.view.graph',
+                                        )}
+                                        value={PermissionsView.GRAPH}
+                                    />
+                                </ToggleGroup>
+                            </div>
                         </div>
-                    )}
+                        {isListView ? (
+                            <PermissionsList
+                                accountRefs={accountRefs}
+                                chainId={chainId}
+                                daoPlugins={daoPlugins}
+                                expandedRows={expandedRows}
+                                isLoading={isLoading}
+                                onExpandedRowsChange={setExpandedRows}
+                                rows={rows}
+                            />
+                        ) : (
+                            <PermissionsGraph
+                                activeAccountId={activeAccountId}
+                                dao={permissionsDao}
+                                daoPlugins={daoPlugins}
+                                isLoading={isLoading}
+                                rows={rows}
+                            />
+                        )}
+                    </div>
                 </Page.Main>
             </Page.Content>
         </>

From fd4fd1326208bb695ed6a382f7c95c87092a117d Mon Sep 17 00:00:00 2001
From: Kevin Davis <whomst@kevind.xyz>
Date: Thu, 2 Jul 2026 18:27:09 +0200
Subject: [PATCH 29/29] fix: Elevate selected permission edges above dimmed
 connectors

---
 .../components/permissionsGraph/permissionsGraphCanvas.tsx  | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
index df32e8196d..177f40aee0 100644
--- a/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
+++ b/src/modules/settings/components/permissionsGraph/permissionsGraphCanvas.tsx
@@ -47,10 +47,15 @@ const EDGE_NEUTRAL = {
         height: 18,
     },
 };
+// The selected flow is elevated above the dimmed connectors so where they
+// converge on a shared node handle the primary line/arrow always paints on top
+// (otherwise a dimmed grey edge later in the array covers the blue at the node).
+const SELECTED_EDGE_Z_INDEX = 10;
 const EDGE_SELECTED_IN = {
     style: { stroke: 'var(--color-primary-400)', strokeWidth: 1.5 },
     markerStart: 'permission-dot-primary',
     markerEnd: 'permission-dot-primary',
+    zIndex: SELECTED_EDGE_Z_INDEX,
 };
 const EDGE_SELECTED_OUT = {
     style: { stroke: 'var(--color-primary-400)', strokeWidth: 1.5 },
@@ -61,6 +66,7 @@ const EDGE_SELECTED_OUT = {
         width: 18,
         height: 18,
     },
+    zIndex: SELECTED_EDGE_Z_INDEX,
 };
 
 // Vertical gap between the expanded detail card and the who/where nodes it