From b5d44f9a69138b99107cebddc5088de61c312450 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 13:30:36 +0200
Subject: [PATCH 01/12] add support for blocked and allowed Command props

---
 packages/vue/src/experimental/commander.ts | 40 +++++++++++++++++++---
 packages/vue/src/makeClient.ts             |  2 ++
 2 files changed, 37 insertions(+), 5 deletions(-)

diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index ed020c3de9..f714058515 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -26,6 +26,8 @@ type FnOptions<I18nCustomKey extends string, State extends IntlRecord | undefine
    */
   state?: ComputedRef<State> | (() => State)
   disableSharedWaiting?: boolean
+  blockKey?: string
+  waitKey?: string
 }
 
 type FnOptionsInternal<I18nCustomKey extends string> = {
@@ -143,7 +145,11 @@ export declare namespace Commander {
     /** reactive */
     waiting: boolean
     /** reactive */
-    state: ComputedRef<State>
+    blocked: boolean
+    /** reactive */
+    allowed: boolean
+    /** reactive */
+    state: State
   }
 
   export interface CommandOut<
@@ -1418,6 +1424,8 @@ export class CommanderImpl<RT> {
             Effect.sync(() => makeContext_())
           )
         )
+        const waitId = options?.waitKey ? `${id}.${options.waitKey}` : id
+        const blockId = options?.blockKey ? `${id}.${options.blockKey}` : id
 
         const [result, exec_] = asResult(theHandler)
         // probably could be nice to use a namespaced, computable wait key instead not unlike query invalidation?
@@ -1425,15 +1433,33 @@ export class CommanderImpl<RT> {
         const exec = options?.disableSharedWaiting
           ? exec_
           : Effect
-            .fnUntraced(function*(...args: [any, any]) {
-              registerWait(id)
-              return yield* exec_(...args)
-            }, Effect.onExit(() => Effect.sync(() => unregisterWait(id))))
+            .fnUntraced(
+              function*(...args: [any, any]) {
+                registerWait(waitId)
+                if (blockId !== waitId) {
+                  registerWait(blockId)
+                }
+                return yield* exec_(...args)
+              },
+              Effect.onExit(() =>
+                Effect.sync(() => {
+                  unregisterWait(waitId)
+                  if (blockId !== waitId) {
+                    unregisterWait(blockId)
+                  }
+                })
+              )
+            )
 
         const waiting = options?.disableSharedWaiting
           ? computed(() => result.value.waiting)
           : computed(() => result.value.waiting || (waitState.value[id] ?? 0) > 0)
 
+        const blocked = computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
+
+        // TODO: allow to influence e.g via role check
+        const allowed = true
+
         const handle = Object.assign((arg: Arg) => {
           // we capture the call site stack here
           const limit = Error.stackTraceLimit
@@ -1503,6 +1529,10 @@ export class CommanderImpl<RT> {
           /** reactive */
           waiting,
           /** reactive */
+          blocked,
+          /** reactive */
+          allowed,
+          /** reactive */
           action,
           /** reactive */
           label,
diff --git a/packages/vue/src/makeClient.ts b/packages/vue/src/makeClient.ts
index ad7df1a148..38bfe8cafe 100644
--- a/packages/vue/src/makeClient.ts
+++ b/packages/vue/src/makeClient.ts
@@ -1481,6 +1481,8 @@ export type ToCamel<S extends string | number | symbol> = S extends string
 export interface CommandBase<I = void, A = void> {
   handle: (input: I) => A
   waiting: boolean
+  blocked: boolean
+  allowed: boolean
   action: string
   label: string
 }

From 5febc314b58686feebb0621705816ce38873c537 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 13:30:51 +0200
Subject: [PATCH 02/12] add CommandButton

---
 .../src/components/CommandButton.vue          | 74 +++++++++++++++++++
 .../vue-components/src/components/index.ts    |  1 +
 2 files changed, 75 insertions(+)
 create mode 100644 packages/vue-components/src/components/CommandButton.vue

diff --git a/packages/vue-components/src/components/CommandButton.vue b/packages/vue-components/src/components/CommandButton.vue
new file mode 100644
index 0000000000..1e25edfc4f
--- /dev/null
+++ b/packages/vue-components/src/components/CommandButton.vue
@@ -0,0 +1,74 @@
+<script
+  setup
+  lang="ts"
+  generic="I = never"
+>
+import type { CommandBase } from "@effect-app/vue"
+import type { VBtn } from "vuetify/components"
+
+type VBtnProps = VBtn["$props"]
+
+/* @vue-ignore */
+interface ButtonProps extends VBtnProps {}
+
+const props = defineProps<
+  & (
+    | {
+      input: NoInfer<I>
+      command: CommandBase<I>
+      empty?: boolean
+    }
+    | {
+      command: CommandBase
+      input?: undefined
+      empty?: boolean
+    }
+  )
+  & {
+    disabled?: ButtonProps["disabled"]
+    title?: string // why isn't it part of VBtnProps??
+  }
+  & ButtonProps
+>()
+</script>
+<script lang="ts">
+/** Command Button is an easy way to connect commands and have it execute on click, while keeping track of disabled/loading states automatically */
+export default {
+  name: "CommandButton"
+}
+</script>
+<template>
+  <v-btn
+    v-if="!empty"
+    v-bind="$attrs"
+    :loading="command.waiting"
+    :disabled="command.blocked || disabled"
+    :title="title ?? command.action"
+    @click="(command.handle as any)(
+      (`input` in props && props.input
+        ? props.input
+        : undefined) as unknown as I
+    )"
+  >
+    <slot
+      :loading="command.waiting"
+      :disabled="command.blocked || disabled"
+      :label="command.label"
+      :title="title ?? command.action"
+    >
+      <span>{{ command.label }}</span>
+    </slot>
+  </v-btn>
+  <v-btn
+    v-else
+    v-bind="$attrs"
+    :loading="command.waiting"
+    :disabled="command.blocked || disabled"
+    :title="title ?? command.action"
+    @click="(command.handle as any)(
+      (`input` in props && props.input
+        ? props.input
+        : undefined) as unknown as I
+    )"
+  />
+</template>
diff --git a/packages/vue-components/src/components/index.ts b/packages/vue-components/src/components/index.ts
index 478b846263..d773b893e6 100644
--- a/packages/vue-components/src/components/index.ts
+++ b/packages/vue-components/src/components/index.ts
@@ -1,2 +1,3 @@
+export { default as CommandButton } from "./CommandButton.vue"
 export { default as Dialog } from "./Dialog.vue"
 export * from "./OmegaForm"

From 8e6a4945e9ae047b071a618f5f3d5538508078fa Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 14:50:09 +0200
Subject: [PATCH 03/12] setup storybook

---
 packages/vue-components/package.json          |  1 +
 .../src/components/CommandButton.vue          |  4 +-
 .../stories/Commands.stories.ts               | 41 ++++++++++++
 .../vue-components/stories/Commands/One.vue   | 28 +++++++++
 .../stories/Commands/components.ts            |  1 +
 .../stories/Commands/helpers.ts               | 54 ++++++++++++++++
 .../stories/Commands/useEffectRouter.ts       | 63 +++++++++++++++++++
 packages/vue/src/experimental/commander.ts    | 13 +++-
 pnpm-lock.yaml                                | 12 ++++
 9 files changed, 214 insertions(+), 3 deletions(-)
 create mode 100644 packages/vue-components/stories/Commands.stories.ts
 create mode 100644 packages/vue-components/stories/Commands/One.vue
 create mode 100644 packages/vue-components/stories/Commands/components.ts
 create mode 100644 packages/vue-components/stories/Commands/helpers.ts
 create mode 100644 packages/vue-components/stories/Commands/useEffectRouter.ts

diff --git a/packages/vue-components/package.json b/packages/vue-components/package.json
index 115c3aa56a..d1e8bf14d5 100644
--- a/packages/vue-components/package.json
+++ b/packages/vue-components/package.json
@@ -47,6 +47,7 @@
     "vitepress": "^1.6.4",
     "vitest": "^3.2.4",
     "vue-router": "^4.5.1",
+    "vue-toastification": "^2.0.0-rc.5",
     "vue-tsc": "^3.1.0"
   },
   "files": [
diff --git a/packages/vue-components/src/components/CommandButton.vue b/packages/vue-components/src/components/CommandButton.vue
index 1e25edfc4f..1b4c2aa635 100644
--- a/packages/vue-components/src/components/CommandButton.vue
+++ b/packages/vue-components/src/components/CommandButton.vue
@@ -39,7 +39,7 @@ export default {
 </script>
 <template>
   <v-btn
-    v-if="!empty"
+    v-if="command.allowed && !empty"
     v-bind="$attrs"
     :loading="command.waiting"
     :disabled="command.blocked || disabled"
@@ -60,7 +60,7 @@ export default {
     </slot>
   </v-btn>
   <v-btn
-    v-else
+    v-else-if="command.allowed"
     v-bind="$attrs"
     :loading="command.waiting"
     :disabled="command.blocked || disabled"
diff --git a/packages/vue-components/stories/Commands.stories.ts b/packages/vue-components/stories/Commands.stories.ts
new file mode 100644
index 0000000000..cbfa81f2ea
--- /dev/null
+++ b/packages/vue-components/stories/Commands.stories.ts
@@ -0,0 +1,41 @@
+import { type makeIntl } from "@effect-app/vue"
+import { type Meta, type StoryObj } from "@storybook/vue3"
+import { ref } from "vue"
+import { provideIntl } from "../src"
+import One from "./Commands/One.vue"
+
+const mockIntl = {
+  locale: ref("en"),
+  trans: (id: string) => id,
+  intl: ref({ formatMessage: (msg: { id: string }) => msg.id })
+} as unknown as ReturnType<ReturnType<typeof makeIntl<string>>["useIntl"]>
+
+const meta: Meta = {
+  title: "Components/Commands",
+  // component: Commands,
+  // argTypes: {
+  //   schema: { control: "object" },
+  //   onSubmit: { action: "submitted" },
+  //   defaultValues: { control: "object" }
+  // },
+  decorators: [
+    (story) => ({
+      components: { story },
+      setup() {
+        provideIntl(() => mockIntl)
+        return {}
+      },
+      template: "<story />"
+    })
+  ]
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const OneStory: Story = {
+  render: () => ({
+    components: { One },
+    template: "<One />"
+  })
+}
diff --git a/packages/vue-components/stories/Commands/One.vue b/packages/vue-components/stories/Commands/One.vue
new file mode 100644
index 0000000000..dba4055018
--- /dev/null
+++ b/packages/vue-components/stories/Commands/One.vue
@@ -0,0 +1,28 @@
+<template>
+  <CommandButton :command="cmd" />
+  <CommandButton :command="cmd2" />
+</template>
+<script setup lang="ts">
+import { Effect } from "effect"
+import { CommandButton } from "./components"
+import { Command } from "./helpers"
+
+const mutation = Object.assign(
+  Effect.fn(function*() {
+    yield* Effect.sleep(1000)
+  }),
+  { id: "my-mutation" }
+)
+
+const cmd = Command.fn(mutation, { disableSharedWaiting: true })(
+  function*() {
+    yield* mutation()
+  }
+)
+
+const cmd2 = Command.fn(mutation, { disableSharedWaiting: true })(
+  function*() {
+    yield* mutation()
+  }
+)
+</script>
diff --git a/packages/vue-components/stories/Commands/components.ts b/packages/vue-components/stories/Commands/components.ts
new file mode 100644
index 0000000000..13ea07886d
--- /dev/null
+++ b/packages/vue-components/stories/Commands/components.ts
@@ -0,0 +1 @@
+export { default as CommandButton } from "../../src/components/CommandButton.vue"
diff --git a/packages/vue-components/stories/Commands/helpers.ts b/packages/vue-components/stories/Commands/helpers.ts
new file mode 100644
index 0000000000..e1c0960405
--- /dev/null
+++ b/packages/vue-components/stories/Commands/helpers.ts
@@ -0,0 +1,54 @@
+import { LegacyMutation, makeClient, makeIntl } from "@effect-app/vue"
+import { Commander } from "@effect-app/vue/experimental/commander"
+import { Confirm } from "@effect-app/vue/experimental/confirm"
+import { I18n } from "@effect-app/vue/experimental/intl"
+import * as Toast_ from "@effect-app/vue/experimental/toast"
+import { WithToast } from "@effect-app/vue/experimental/withToast"
+import { FetchHttpClient } from "@effect/platform"
+import { Effect, Layer, ManagedRuntime, Option } from "effect"
+import { ApiClientFactory } from "effect-app/client"
+import { ref } from "vue"
+import { useToast } from "vue-toastification"
+import { Router } from "./useEffectRouter"
+
+const locale = ref("en" as const)
+const { useIntl } = makeIntl({
+  en: {}
+}, locale)
+
+const intlLayer = I18n.toLayer(Effect.sync(useIntl))
+// TODO: use optional CurrentToastId to auto assign toastId when not null?
+const toastLayer = Toast_.Toast.toLayer(
+  Effect.sync(() => {
+    const t = useToast()
+    const toast = {
+      error: t.error.bind(t),
+      info: t.info.bind(t),
+      success: t.success.bind(t),
+      warning: t.warning.bind(t),
+      dismiss: t.dismiss.bind(t)
+    }
+    return Toast_.wrap(toast)
+  })
+)
+const commanderLayer = Commander.Default.pipe(
+  Layer.provide([intlLayer, toastLayer])
+)
+
+const api = ApiClientFactory.layer({ url: "bogus", headers: Option.none() }).pipe(
+  Layer.provide(FetchHttpClient.layer)
+)
+const viewLayers = Layer.mergeAll(Router.Default, intlLayer, toastLayer)
+const provideLayers = Layer
+  .mergeAll(
+    LegacyMutation.Default.pipe(Layer.provide([toastLayer, intlLayer])),
+    commanderLayer,
+    viewLayers,
+    WithToast.Default.pipe(Layer.provide(toastLayer)),
+    Confirm.Default.pipe(Layer.provide(intlLayer))
+  )
+  .pipe(Layer.provideMerge(api))
+
+const mrt = ManagedRuntime.make(provideLayers)
+const clientFor_ = ApiClientFactory.makeFor(Layer.empty)
+export const { Command } = makeClient(() => mrt, clientFor_)
diff --git a/packages/vue-components/stories/Commands/useEffectRouter.ts b/packages/vue-components/stories/Commands/useEffectRouter.ts
new file mode 100644
index 0000000000..bc6ea358f8
--- /dev/null
+++ b/packages/vue-components/stories/Commands/useEffectRouter.ts
@@ -0,0 +1,63 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Effect } from "effect-app"
+import { type RouteLocationAsPath, type RouteLocationAsRelative, type RouteLocationAsRelativeTyped, type RouteLocationAsString, type RouteLocationNormalizedLoaded, type RouteLocationRaw, type RouteLocationResolved, type RouteMap, type RouteRecordNameGeneric, type RouteRecordRaw, useRoute, useRouter } from "vue-router"
+
+/**
+ * Effectified version of `useRouter`
+ */
+export const useEffectRouter = () => {
+  const r = useRouter()
+  const current = useRoute()
+  const effectified = {
+    ...r,
+    current,
+    replace: (to: RouteLocationRaw) => Effect.promise(() => r.replace(to)),
+    push: (to: RouteLocationRaw) => Effect.promise(() => r.push(to)),
+    isReady: Effect.promise(() => r.isReady())
+  }
+  return effectified
+}
+
+export class Router extends Effect.Service<Router>()("Router", {
+  sync: useEffectRouter,
+  accessors: true
+}) {
+  static readonly addRoute: {
+    /**
+     * Add a new {@link RouteRecordRaw | route record} as the child of an existing route.
+     *
+     * @param parentName - Parent Route Record where `route` should be appended at
+     * @param route - Route Record to add
+     */
+    (
+      parentName: NonNullable<RouteRecordNameGeneric>,
+      route: RouteRecordRaw
+    ): Effect.Effect<void, never, Router>
+    /**
+     * Add a new {@link RouteRecordRaw | route record} to the router.
+     *
+     * @param route - Route Record to add
+     */
+    (route: RouteRecordRaw): Effect.Effect<void, never, Router>
+  } = ((...args: any[]) => Router.use((_) => _.addRoute(...(args as [any, any])))) as any
+
+  static override readonly resolve: {
+    /**
+     * Returns the {@link RouteLocation | normalized version} of a
+     * {@link RouteLocationRaw | route location}. Also includes an `href` property
+     * that includes any existing `base`. By default, the `currentLocation` used is
+     * `router.currentRoute` and should only be overridden in advanced use cases.
+     *
+     * @param to - Raw route location to resolve
+     * @param currentLocation - Optional current location to resolve against
+     */
+    <Name extends keyof RouteMap = keyof RouteMap>(
+      to: RouteLocationAsRelativeTyped<RouteMap, Name>,
+      currentLocation?: RouteLocationNormalizedLoaded
+    ): Effect.Effect<RouteLocationResolved<Name>, never, Router>
+    (
+      to: RouteLocationAsString | RouteLocationAsRelative | RouteLocationAsPath,
+      currentLocation?: RouteLocationNormalizedLoaded
+    ): Effect.Effect<RouteLocationResolved, never, Router>
+  } = (...args: any[]) => Router.use((_) => _.resolve(...(args as [any, any])))
+}
diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index f714058515..18fe704397 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -1431,7 +1431,18 @@ export class CommanderImpl<RT> {
         // probably could be nice to use a namespaced, computable wait key instead not unlike query invalidation?
         // ["Something.Update", { id }] for instance
         const exec = options?.disableSharedWaiting
-          ? exec_
+          ? Effect
+            .fnUntraced(
+              function*(...args: [any, any]) {
+                registerWait(blockId)
+                return yield* exec_(...args)
+              },
+              Effect.onExit(() =>
+                Effect.sync(() => {
+                  unregisterWait(blockId)
+                })
+              )
+            )
           : Effect
             .fnUntraced(
               function*(...args: [any, any]) {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c82f17bf9e..059d75216a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -701,6 +701,9 @@ importers:
       vue-router:
         specifier: ^4.5.1
         version: 4.5.1(vue@3.5.22(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0)))
+      vue-toastification:
+        specifier: ^2.0.0-rc.5
+        version: 2.0.0-rc.5(vue@3.5.22(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0)))
       vue-tsc:
         specifier: ^3.1.0
         version: 3.1.0(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0))
@@ -6533,6 +6536,11 @@ packages:
     peerDependencies:
       vue: ^3.5.22
 
+  vue-toastification@2.0.0-rc.5:
+    resolution: {integrity: sha512-q73e5jy6gucEO/U+P48hqX+/qyXDozAGmaGgLFm5tXX4wJBcVsnGp4e/iJqlm9xzHETYOilUuwOUje2Qg1JdwA==}
+    peerDependencies:
+      vue: ^3.5.22
+
   vue-tsc@3.1.0:
     resolution: {integrity: sha512-fbMynMG7kXSnqZTRBSCh9ROYaVpXfCZbEO0gY3lqOjLbp361uuS88n6BDajiUriDIF+SGLWoinjvf6stS2J3Gg==}
     hasBin: true
@@ -13286,6 +13294,10 @@ snapshots:
       '@vue/devtools-api': 6.6.4
       vue: 3.5.22(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0))
 
+  vue-toastification@2.0.0-rc.5(vue@3.5.22(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0))):
+    dependencies:
+      vue: 3.5.22(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0))
+
   vue-tsc@3.1.0(typescript@5.9.2(patch_hash=9f9678d78a879a2cbd842897c639ebfa754353e8098bac340a8ce599ae2161c0)):
     dependencies:
       '@volar/typescript': 2.4.23

From 45ef92230dfd12b3323ffc9ce21970cd8e2cd01d Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 15:12:52 +0200
Subject: [PATCH 04/12] progress

---
 packages/vue-components/.storybook/preview.ts |  6 ++
 .../vue-components/stories/Commands/One.vue   | 68 ++++++++++---
 .../stories/Commands/helpers.ts               | 97 +++++++++++--------
 packages/vue/src/experimental/commander.ts    |  9 +-
 4 files changed, 127 insertions(+), 53 deletions(-)

diff --git a/packages/vue-components/.storybook/preview.ts b/packages/vue-components/.storybook/preview.ts
index 3339291d50..c6e8135505 100644
--- a/packages/vue-components/.storybook/preview.ts
+++ b/packages/vue-components/.storybook/preview.ts
@@ -10,6 +10,11 @@ import { aliases, mdi } from "vuetify/iconsets/mdi-svg"
 import VueHighlightJS from "vue3-highlightjs"
 import "highlight.js/styles/default.css" // Or your preferred theme
 
+import Toast from "vue-toastification"
+
+// Import the CSS or use your own!
+import "vue-toastification/dist/index.css"
+
 const vuetify = createVuetify({
   components,
   directives,
@@ -27,6 +32,7 @@ setup((app) => {
   app.use(vuetify)
   // Register highlight.js
   app.use(VueHighlightJS)
+  app.use("default" in Toast ? (Toast as any).default : Toast, {})
 })
 
 const preview: Preview = {
diff --git a/packages/vue-components/stories/Commands/One.vue b/packages/vue-components/stories/Commands/One.vue
index dba4055018..73616bd0ac 100644
--- a/packages/vue-components/stories/Commands/One.vue
+++ b/packages/vue-components/stories/Commands/One.vue
@@ -1,28 +1,70 @@
 <template>
-  <CommandButton :command="cmd" />
-  <CommandButton :command="cmd2" />
+  <v-table>
+    <tr
+      v-for="item of items"
+      :key="item"
+    >
+      <td>{{ item }}</td>
+      <td>
+        <CommandButton :command="updateName(item)" />
+        <CommandButton :command="updateState(item)" />
+        <CommandButton :command="remove(item)" />
+      </td>
+    </tr>
+  </v-table>
 </template>
 <script setup lang="ts">
 import { Effect } from "effect"
 import { CommandButton } from "./components"
-import { Command } from "./helpers"
+import { makeFamily, useCommand } from "./helpers"
 
-const mutation = Object.assign(
+const Command = useCommand({
+  "action.update_thing": "Update Thing{_isLabel, select, true {} other { {item}}}",
+  "action.remove_thing": "Remove Thing{_isLabel, select, true {} other { {item}}}"
+})
+
+const items = [
+  "one",
+  "two"
+]
+
+const updateMutation = Object.assign(
+  Effect.fn(function*() {
+    yield* Effect.sleep(1000)
+  }),
+  { id: "update_thing" }
+)
+const removeMutation = Object.assign(
   Effect.fn(function*() {
     yield* Effect.sleep(1000)
   }),
-  { id: "my-mutation" }
+  { id: "remove_thing" }
+)
+
+const updateName = makeFamily((item: string) =>
+  Command.fn(updateMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+    function*() {
+      yield* updateMutation()
+    },
+    Command.withDefaultToast()
+  )
 )
 
-const cmd = Command.fn(mutation, { disableSharedWaiting: true })(
-  function*() {
-    yield* mutation()
-  }
+const updateState = makeFamily((item: string) =>
+  Command.fn(updateMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+    function*() {
+      yield* updateMutation()
+    },
+    Command.withDefaultToast()
+  )
 )
 
-const cmd2 = Command.fn(mutation, { disableSharedWaiting: true })(
-  function*() {
-    yield* mutation()
-  }
+const remove = makeFamily((item: string) =>
+  Command.fn(removeMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+    function*() {
+      yield* removeMutation()
+    },
+    Command.withDefaultToast()
+  )
 )
 </script>
diff --git a/packages/vue-components/stories/Commands/helpers.ts b/packages/vue-components/stories/Commands/helpers.ts
index e1c0960405..3849561422 100644
--- a/packages/vue-components/stories/Commands/helpers.ts
+++ b/packages/vue-components/stories/Commands/helpers.ts
@@ -1,5 +1,5 @@
 import { LegacyMutation, makeClient, makeIntl } from "@effect-app/vue"
-import { Commander } from "@effect-app/vue/experimental/commander"
+import { Commander, DefaultIntl } from "@effect-app/vue/experimental/commander"
 import { Confirm } from "@effect-app/vue/experimental/confirm"
 import { I18n } from "@effect-app/vue/experimental/intl"
 import * as Toast_ from "@effect-app/vue/experimental/toast"
@@ -7,48 +7,67 @@ import { WithToast } from "@effect-app/vue/experimental/withToast"
 import { FetchHttpClient } from "@effect/platform"
 import { Effect, Layer, ManagedRuntime, Option } from "effect"
 import { ApiClientFactory } from "effect-app/client"
-import { ref } from "vue"
+import { onUnmounted, ref } from "vue"
 import { useToast } from "vue-toastification"
 import { Router } from "./useEffectRouter"
 
-const locale = ref("en" as const)
-const { useIntl } = makeIntl({
-  en: {}
-}, locale)
-
-const intlLayer = I18n.toLayer(Effect.sync(useIntl))
-// TODO: use optional CurrentToastId to auto assign toastId when not null?
-const toastLayer = Toast_.Toast.toLayer(
-  Effect.sync(() => {
-    const t = useToast()
-    const toast = {
-      error: t.error.bind(t),
-      info: t.info.bind(t),
-      success: t.success.bind(t),
-      warning: t.warning.bind(t),
-      dismiss: t.dismiss.bind(t)
+export const useCommand = (messages: {}) => {
+  const locale = ref("en" as const)
+  const { useIntl } = makeIntl({
+    en: {
+      ...DefaultIntl.en,
+      ...messages
     }
-    return Toast_.wrap(toast)
-  })
-)
-const commanderLayer = Commander.Default.pipe(
-  Layer.provide([intlLayer, toastLayer])
-)
+  }, locale)
+
+  const intlLayer = I18n.toLayer(Effect.sync(useIntl))
+  // TODO: use optional CurrentToastId to auto assign toastId when not null?
+  const toastLayer = Toast_.Toast.toLayer(
+    Effect.sync(() => {
+      const t = useToast()
+      const toast = {
+        error: t.error.bind(t),
+        info: t.info.bind(t),
+        success: t.success.bind(t),
+        warning: t.warning.bind(t),
+        dismiss: t.dismiss.bind(t)
+      }
+      return Toast_.wrap(toast)
+    })
+  )
+  const commanderLayer = Commander.Default.pipe(
+    Layer.provide([intlLayer, toastLayer])
+  )
 
-const api = ApiClientFactory.layer({ url: "bogus", headers: Option.none() }).pipe(
-  Layer.provide(FetchHttpClient.layer)
-)
-const viewLayers = Layer.mergeAll(Router.Default, intlLayer, toastLayer)
-const provideLayers = Layer
-  .mergeAll(
-    LegacyMutation.Default.pipe(Layer.provide([toastLayer, intlLayer])),
-    commanderLayer,
-    viewLayers,
-    WithToast.Default.pipe(Layer.provide(toastLayer)),
-    Confirm.Default.pipe(Layer.provide(intlLayer))
+  const api = ApiClientFactory.layer({ url: "bogus", headers: Option.none() }).pipe(
+    Layer.provide(FetchHttpClient.layer)
   )
-  .pipe(Layer.provideMerge(api))
+  const viewLayers = Layer.mergeAll(Router.Default, intlLayer, toastLayer)
+  const provideLayers = Layer
+    .mergeAll(
+      LegacyMutation.Default.pipe(Layer.provide([toastLayer, intlLayer])),
+      commanderLayer,
+      viewLayers,
+      WithToast.Default.pipe(Layer.provide(toastLayer)),
+      Confirm.Default.pipe(Layer.provide(intlLayer))
+    )
+    .pipe(Layer.provideMerge(api))
+
+  const mrt = ManagedRuntime.make(provideLayers)
+  const clientFor_ = ApiClientFactory.makeFor(Layer.empty)
+  const { Command } = makeClient(() => mrt, clientFor_)
+  return Command
+}
 
-const mrt = ManagedRuntime.make(provideLayers)
-const clientFor_ = ApiClientFactory.makeFor(Layer.empty)
-export const { Command } = makeClient(() => mrt, clientFor_)
+/** borrowing the idea from Families in Effect Atom */
+export const makeFamily = <Maker extends (input: any) => any>(maker: Maker) => {
+  type K = Parameters<Maker>[0]
+  const map = new Map<K, ReturnType<typeof maker>>()
+  onUnmounted(() => map.clear())
+  return (k: K) => {
+    if (!map.has(k)) {
+      map.set(k, maker(k))
+    }
+    return map.get(k)!
+  }
+}
diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index 18fe704397..bdea05549f 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -10,7 +10,7 @@ import { id, type RuntimeFiber } from "effect/Fiber"
 import { type NoInfer } from "effect/Types"
 import { isGeneratorFunction, type YieldWrap } from "effect/Utils"
 import { type FormatXMLElementFn, type PrimitiveType } from "intl-messageformat"
-import { computed, type ComputedRef, reactive, ref } from "vue"
+import { computed, type ComputedRef, reactive, ref, watch } from "vue"
 import { Confirm } from "./confirm.js"
 import { I18n } from "./intl.js"
 import { WithToast } from "./withToast.js"
@@ -1467,6 +1467,13 @@ export class CommanderImpl<RT> {
           : computed(() => result.value.waiting || (waitState.value[id] ?? 0) > 0)
 
         const blocked = computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
+        watch(waitState, (waitState) => {
+          console.log(waitState)
+        }, { deep: true })
+
+        watch(blocked, (blocked) => {
+          console.log(blocked)
+        }, { deep: true })
 
         // TODO: allow to influence e.g via role check
         const allowed = true

From af4d615931031739ebb9352e085d8dbf184911ab Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 15:40:14 +0200
Subject: [PATCH 05/12] noice

---
 .../vue-components/stories/Commands/One.vue   | 61 ++++++++++++----
 packages/vue/src/experimental/commander.ts    | 69 +++++++------------
 2 files changed, 74 insertions(+), 56 deletions(-)

diff --git a/packages/vue-components/stories/Commands/One.vue b/packages/vue-components/stories/Commands/One.vue
index 73616bd0ac..0f6dfc9644 100644
--- a/packages/vue-components/stories/Commands/One.vue
+++ b/packages/vue-components/stories/Commands/One.vue
@@ -12,6 +12,18 @@
       </td>
     </tr>
   </v-table>
+
+  <v-table>
+    <tr
+      v-for="item of items"
+      :key="item"
+    >
+      <td>{{ item }}</td>
+      <td>
+        <CommandButton :command="updateName2(item)" />
+      </td>
+    </tr>
+  </v-table>
 </template>
 <script setup lang="ts">
 import { Effect } from "effect"
@@ -19,7 +31,7 @@ import { CommandButton } from "./components"
 import { makeFamily, useCommand } from "./helpers"
 
 const Command = useCommand({
-  "action.update_thing": "Update Thing{_isLabel, select, true {} other { {item}}}",
+  "action.update_thing": "Update Thing {field}{_isLabel, select, true {} other { {item}}}",
   "action.remove_thing": "Remove Thing{_isLabel, select, true {} other { {item}}}"
 })
 
@@ -29,42 +41,67 @@ const items = [
 ]
 
 const updateMutation = Object.assign(
-  Effect.fn(function*() {
+  Effect.fn(function*(item: string, props: { name?: string; state?: number }) {
     yield* Effect.sleep(1000)
   }),
   { id: "update_thing" }
 )
 const removeMutation = Object.assign(
-  Effect.fn(function*() {
+  Effect.fn(function*(item: string) {
     yield* Effect.sleep(1000)
   }),
   { id: "remove_thing" }
 )
 
 const updateName = makeFamily((item: string) =>
-  Command.fn(updateMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+  Command.fn(updateMutation, {
+    state: () => ({ item, field: "name" }),
+    waitKey: () => `update_thing.${item}.name`,
+    blockKey: () => `modify_thing.${item}`
+  })(
+    function*() {
+      yield* updateMutation(item, { name: `New name for ${item}` })
+    },
+    Command.withDefaultToast({ stableToastId: (id) => `${id}.${item}.name` })
+  )
+)
+
+const updateName2 = makeFamily((item: string) =>
+  Command.fn(updateMutation, {
+    state: () => ({ item, field: "name" }),
+    waitKey: () => `update_thing.${item}.name`,
+    blockKey: () => `modify_thing.${item}`
+  })(
     function*() {
-      yield* updateMutation()
+      yield* updateMutation(item, { name: `New name for ${item}` })
     },
-    Command.withDefaultToast()
+    Command.withDefaultToast({ stableToastId: (id) => `${id}.${item}.name` })
   )
 )
 
 const updateState = makeFamily((item: string) =>
-  Command.fn(updateMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+  Command.fn(updateMutation, {
+    state: () => ({ item, field: "state" }),
+    waitKey: () => `update_thing.${item}.state`,
+    blockKey: () => `modify_thing.${item}`
+  })(
     function*() {
-      yield* updateMutation()
+      yield* updateMutation(item, { state: Math.floor(Math.random() * 100) })
     },
-    Command.withDefaultToast()
+    Command.withDefaultToast({ stableToastId: (id) => `${id}.${item}.state` })
   )
 )
 
 const remove = makeFamily((item: string) =>
-  Command.fn(removeMutation, { state: () => ({ item }), waitKey: item, blockKey: item })(
+  Command.fn(removeMutation, {
+    state: () => ({ item }),
+    waitKey: () => `remove_thing.${item}`,
+    blockKey: () => `modify_thing.${item}`
+  })(
     function*() {
-      yield* removeMutation()
+      yield* removeMutation(item)
     },
-    Command.withDefaultToast()
+    Command.withDefaultToast({ stableToastId: (id) => `${id}.${item}` })
   )
 )
 </script>
diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index bdea05549f..9011d0d8f6 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -10,7 +10,7 @@ import { id, type RuntimeFiber } from "effect/Fiber"
 import { type NoInfer } from "effect/Types"
 import { isGeneratorFunction, type YieldWrap } from "effect/Utils"
 import { type FormatXMLElementFn, type PrimitiveType } from "intl-messageformat"
-import { computed, type ComputedRef, reactive, ref, watch } from "vue"
+import { computed, type ComputedRef, reactive, ref } from "vue"
 import { Confirm } from "./confirm.js"
 import { I18n } from "./intl.js"
 import { WithToast } from "./withToast.js"
@@ -25,9 +25,8 @@ type FnOptions<I18nCustomKey extends string, State extends IntlRecord | undefine
    * provided as Command.state tag, so you can access it in the function.
    */
   state?: ComputedRef<State> | (() => State)
-  disableSharedWaiting?: boolean
-  blockKey?: string
-  waitKey?: string
+  blockKey?: (id: string) => string | undefined
+  waitKey?: (id: string) => string | undefined
 }
 
 type FnOptionsInternal<I18nCustomKey extends string> = {
@@ -1424,56 +1423,38 @@ export class CommanderImpl<RT> {
             Effect.sync(() => makeContext_())
           )
         )
-        const waitId = options?.waitKey ? `${id}.${options.waitKey}` : id
-        const blockId = options?.blockKey ? `${id}.${options.blockKey}` : id
+        const waitId = options?.waitKey ? options.waitKey(id) : undefined
+        const blockId = options?.blockKey ? options.blockKey(id) : undefined
 
         const [result, exec_] = asResult(theHandler)
         // probably could be nice to use a namespaced, computable wait key instead not unlike query invalidation?
         // ["Something.Update", { id }] for instance
-        const exec = options?.disableSharedWaiting
-          ? Effect
-            .fnUntraced(
-              function*(...args: [any, any]) {
+        const exec = Effect
+          .fnUntraced(
+            function*(...args: [any, any]) {
+              if (waitId) registerWait(waitId)
+              if (blockId && blockId !== waitId) {
                 registerWait(blockId)
-                return yield* exec_(...args)
-              },
-              Effect.onExit(() =>
-                Effect.sync(() => {
+              }
+              return yield* exec_(...args)
+            },
+            Effect.onExit(() =>
+              Effect.sync(() => {
+                if (waitId) unregisterWait(waitId)
+                if (blockId && blockId !== waitId) {
                   unregisterWait(blockId)
-                })
-              )
-            )
-          : Effect
-            .fnUntraced(
-              function*(...args: [any, any]) {
-                registerWait(waitId)
-                if (blockId !== waitId) {
-                  registerWait(blockId)
                 }
-                return yield* exec_(...args)
-              },
-              Effect.onExit(() =>
-                Effect.sync(() => {
-                  unregisterWait(waitId)
-                  if (blockId !== waitId) {
-                    unregisterWait(blockId)
-                  }
-                })
-              )
+              })
             )
+          )
 
-        const waiting = options?.disableSharedWaiting
-          ? computed(() => result.value.waiting)
-          : computed(() => result.value.waiting || (waitState.value[id] ?? 0) > 0)
-
-        const blocked = computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
-        watch(waitState, (waitState) => {
-          console.log(waitState)
-        }, { deep: true })
+        const waiting = waitId
+          ? computed(() => result.value.waiting || (waitState.value[waitId] ?? 0) > 0)
+          : computed(() => result.value.waiting)
 
-        watch(blocked, (blocked) => {
-          console.log(blocked)
-        }, { deep: true })
+        const blocked = blockId
+          ? computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
+          : computed(() => waiting.value)
 
         // TODO: allow to influence e.g via role check
         const allowed = true

From c8be0198db05e3f3abe48e13ada18c97fa83d1c4 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 15:41:33 +0200
Subject: [PATCH 06/12] noice

---
 packages/vue-components/stories/Commands/One.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/vue-components/stories/Commands/One.vue b/packages/vue-components/stories/Commands/One.vue
index 0f6dfc9644..79b958a86f 100644
--- a/packages/vue-components/stories/Commands/One.vue
+++ b/packages/vue-components/stories/Commands/One.vue
@@ -56,7 +56,7 @@ const removeMutation = Object.assign(
 const updateName = makeFamily((item: string) =>
   Command.fn(updateMutation, {
     state: () => ({ item, field: "name" }),
-    waitKey: () => `update_thing.${item}.name`,
+    waitKey: (id) => `${id}.${item}.name`,
     blockKey: () => `modify_thing.${item}`
   })(
     function*() {
@@ -69,7 +69,7 @@ const updateName = makeFamily((item: string) =>
 const updateName2 = makeFamily((item: string) =>
   Command.fn(updateMutation, {
     state: () => ({ item, field: "name" }),
-    waitKey: () => `update_thing.${item}.name`,
+    waitKey: (id) => `${id}.${item}.name`,
     blockKey: () => `modify_thing.${item}`
   })(
     function*() {
@@ -82,7 +82,7 @@ const updateName2 = makeFamily((item: string) =>
 const updateState = makeFamily((item: string) =>
   Command.fn(updateMutation, {
     state: () => ({ item, field: "state" }),
-    waitKey: () => `update_thing.${item}.state`,
+    waitKey: (id) => `${id}.${item}.state`,
     blockKey: () => `modify_thing.${item}`
   })(
     function*() {

From 271c2202d3c601eacc9d4cbe7d5f4790602cdcf3 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Wed, 15 Oct 2025 17:26:31 +0200
Subject: [PATCH 07/12] const id

---
 packages/vue/src/experimental/commander.ts | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index 9011d0d8f6..3a49fc4028 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -16,7 +16,7 @@ import { I18n } from "./intl.js"
 import { WithToast } from "./withToast.js"
 
 type IntlRecord = Record<string, PrimitiveType | FormatXMLElementFn<string, string>>
-type FnOptions<I18nCustomKey extends string, State extends IntlRecord | undefined> = {
+type FnOptions<Id extends string, I18nCustomKey extends string, State extends IntlRecord | undefined> = {
   i18nCustomKey?: I18nCustomKey
   /**
    * passed to the i18n formatMessage calls so you can use it in translation messagee
@@ -25,8 +25,8 @@ type FnOptions<I18nCustomKey extends string, State extends IntlRecord | undefine
    * provided as Command.state tag, so you can access it in the function.
    */
   state?: ComputedRef<State> | (() => State)
-  blockKey?: (id: string) => string | undefined
-  waitKey?: (id: string) => string | undefined
+  blockKey?: (id: Id) => string | undefined
+  waitKey?: (id: Id) => string | undefined
 }
 
 type FnOptionsInternal<I18nCustomKey extends string> = {
@@ -1287,8 +1287,8 @@ const unregisterWait = (id: string) => {
   }
 }
 
-const getStateValues = <const I18nKey extends string, State extends IntlRecord | undefined>(
-  options?: FnOptions<I18nKey, State>
+const getStateValues = <const Id extends string, const I18nKey extends string, State extends IntlRecord | undefined>(
+  options?: FnOptions<Id, I18nKey, State>
 ): ComputedRef<State> => {
   const state_ = options?.state
   const state = !state_ ? computed(() => undefined as State) : typeof state_ === "function"
@@ -1344,7 +1344,7 @@ export class CommanderImpl<RT> {
     const I18nKey extends string = Id
   >(
     id_: Id | { id: Id },
-    options?: FnOptions<I18nKey, State>,
+    options?: FnOptions<Id, I18nKey, State>,
     errorDef?: Error
   ) => {
     const id = typeof id_ === "string" ? id_ : id_.id
@@ -1629,7 +1629,7 @@ export class CommanderImpl<RT> {
     const I18nKey extends string = Id
   >(
     id: Id | { id: Id },
-    options?: FnOptions<I18nKey, State>
+    options?: FnOptions<Id, I18nKey, State>
   ): Commander.Gen<RT, Id, I18nKey, State> & Commander.NonGen<RT, Id, I18nKey, State> & {
     state: Context.Tag<`Commander.Command.${Id}.state`, State>
   } =>
@@ -1676,7 +1676,7 @@ export class CommanderImpl<RT> {
       | Id
       | { id: Id; mutate: (arg: MutArg) => Effect.Effect<MutA, MutE, MutR> }
       | ((arg: MutArg) => Effect.Effect<MutA, MutE, MutR>) & { id: Id },
-    options?: FnOptions<I18nKey, State>
+    options?: FnOptions<Id, I18nKey, State>
   ) =>
     & Commander.CommandContextLocal<Id, I18nKey>
     & (<A, E, R extends RT | CommandContext | `Commander.Command.${Id}.state`, Arg = void>(
@@ -1767,7 +1767,7 @@ export class CommanderImpl<RT> {
     mutation:
       | { mutate: (arg: Arg) => Effect.Effect<A, E, R>; id: Id }
       | ((arg: Arg) => Effect.Effect<A, E, R>) & { id: Id },
-    options?: FnOptions<I18nKey, State>
+    options?: FnOptions<Id, I18nKey, State>
   ): Commander.CommanderWrap<RT, Id, I18nKey, State, Arg, A, E, R> =>
     Object.assign(
       (

From 0264cdc595c307f54126fb12a9b1b2005ee8762c Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Thu, 16 Oct 2025 08:52:05 +0200
Subject: [PATCH 08/12] add `allowed` option

---
 packages/vue/src/experimental/commander.ts | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index 3a49fc4028..4ba4c91bfb 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -27,6 +27,7 @@ type FnOptions<Id extends string, I18nCustomKey extends string, State extends In
   state?: ComputedRef<State> | (() => State)
   blockKey?: (id: Id) => string | undefined
   waitKey?: (id: Id) => string | undefined
+  allowed?: (id: Id, state: ComputedRef<State>) => boolean
 }
 
 type FnOptionsInternal<I18nCustomKey extends string> = {
@@ -1427,37 +1428,36 @@ export class CommanderImpl<RT> {
         const blockId = options?.blockKey ? options.blockKey(id) : undefined
 
         const [result, exec_] = asResult(theHandler)
-        // probably could be nice to use a namespaced, computable wait key instead not unlike query invalidation?
-        // ["Something.Update", { id }] for instance
+
         const exec = Effect
           .fnUntraced(
             function*(...args: [any, any]) {
-              if (waitId) registerWait(waitId)
-              if (blockId && blockId !== waitId) {
+              if (waitId !== undefined) registerWait(waitId)
+              if (blockId !== undefined && blockId !== waitId) {
                 registerWait(blockId)
               }
               return yield* exec_(...args)
             },
             Effect.onExit(() =>
               Effect.sync(() => {
-                if (waitId) unregisterWait(waitId)
-                if (blockId && blockId !== waitId) {
+                if (waitId !== undefined) unregisterWait(waitId)
+                if (blockId !== undefined && blockId !== waitId) {
                   unregisterWait(blockId)
                 }
               })
             )
           )
 
-        const waiting = waitId
+        const waiting = waitId !== undefined
           ? computed(() => result.value.waiting || (waitState.value[waitId] ?? 0) > 0)
           : computed(() => result.value.waiting)
 
-        const blocked = blockId
+        const blocked = blockId !== undefined
           ? computed(() => waiting.value || (waitState.value[blockId] ?? 0) > 0)
           : computed(() => waiting.value)
 
-        // TODO: allow to influence e.g via role check
-        const allowed = true
+        const computeAllowed = options?.allowed
+        const allowed = computeAllowed ? computed(() => computeAllowed(id, state)) : true
 
         const handle = Object.assign((arg: Arg) => {
           // we capture the call site stack here

From 0b8ceecb4e720da3f56a7f1176070faa3b66d610 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Thu, 16 Oct 2025 08:55:43 +0200
Subject: [PATCH 09/12] add role demo

---
 packages/vue-components/stories/Commands/One.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/vue-components/stories/Commands/One.vue b/packages/vue-components/stories/Commands/One.vue
index 79b958a86f..941501d14c 100644
--- a/packages/vue-components/stories/Commands/One.vue
+++ b/packages/vue-components/stories/Commands/One.vue
@@ -1,4 +1,7 @@
 <template>
+  <v-btn @click="role = role === 'user' ? 'admin' : 'user'">
+    Switch to {{ role === "user" ? "admin" : "user" }}
+  </v-btn>
   <v-table>
     <tr
       v-for="item of items"
@@ -27,12 +30,13 @@
 </template>
 <script setup lang="ts">
 import { Effect } from "effect"
+import { ref } from "vue"
 import { CommandButton } from "./components"
 import { makeFamily, useCommand } from "./helpers"
 
 const Command = useCommand({
-  "action.update_thing": "Update Thing {field}{_isLabel, select, true {} other { {item}}}",
-  "action.remove_thing": "Remove Thing{_isLabel, select, true {} other { {item}}}"
+  "action.update_thing": "Update {field}{_isLabel, select, true {} other { {item}}}",
+  "action.remove_thing": "Remove {_isLabel, select, true {} other { {item}}}"
 })
 
 const items = [
@@ -40,6 +44,8 @@ const items = [
   "two"
 ]
 
+const role = ref<"user" | "admin">("user")
+
 const updateMutation = Object.assign(
   Effect.fn(function*(item: string, props: { name?: string; state?: number }) {
     yield* Effect.sleep(1000)
@@ -95,8 +101,9 @@ const updateState = makeFamily((item: string) =>
 const remove = makeFamily((item: string) =>
   Command.fn(removeMutation, {
     state: () => ({ item }),
-    waitKey: () => `remove_thing.${item}`,
-    blockKey: () => `modify_thing.${item}`
+    waitKey: (id) => `${id}.${item}`,
+    blockKey: () => `modify_thing.${item}`,
+    allowed: () => role.value === "admin"
   })(
     function*() {
       yield* removeMutation(item)

From e2c677531709926cb345eab641d74b60f4ac38a8 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Thu, 16 Oct 2025 08:56:04 +0200
Subject: [PATCH 10/12] add changeset

---
 .changeset/shaggy-geese-attend.md | 7 +++++++
 1 file changed, 7 insertions(+)
 create mode 100644 .changeset/shaggy-geese-attend.md

diff --git a/.changeset/shaggy-geese-attend.md b/.changeset/shaggy-geese-attend.md
new file mode 100644
index 0000000000..cc470f0506
--- /dev/null
+++ b/.changeset/shaggy-geese-attend.md
@@ -0,0 +1,7 @@
+---
+"@effect-app/vue-components": minor
+"@effect-app/vue": minor
+---
+
+improve: split wait vs blocked state
+feat: add allowed state

From 225be20e225116fedd69bf891f03097e4c4ce92b Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Thu, 16 Oct 2025 09:01:02 +0200
Subject: [PATCH 11/12] doc future

---
 packages/vue/src/experimental/commander.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/vue/src/experimental/commander.ts b/packages/vue/src/experimental/commander.ts
index 4ba4c91bfb..ca6a55b43c 100644
--- a/packages/vue/src/experimental/commander.ts
+++ b/packages/vue/src/experimental/commander.ts
@@ -25,6 +25,7 @@ type FnOptions<Id extends string, I18nCustomKey extends string, State extends In
    * provided as Command.state tag, so you can access it in the function.
    */
   state?: ComputedRef<State> | (() => State)
+  // TODO: namespaced keys like reactivity keys: ["modify_thing", item], so that one can block also on "modify_thing" *
   blockKey?: (id: Id) => string | undefined
   waitKey?: (id: Id) => string | undefined
   allowed?: (id: Id, state: ComputedRef<State>) => boolean

From 451d96d4e8f9ac33b05e5b934ca17c0a637a77b9 Mon Sep 17 00:00:00 2001
From: Patrick Roza <contact@patrickroza.com>
Date: Thu, 16 Oct 2025 09:07:26 +0200
Subject: [PATCH 12/12] improve changeset

---
 .changeset/shaggy-geese-attend.md | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/.changeset/shaggy-geese-attend.md b/.changeset/shaggy-geese-attend.md
index cc470f0506..a5dda19bda 100644
--- a/.changeset/shaggy-geese-attend.md
+++ b/.changeset/shaggy-geese-attend.md
@@ -3,5 +3,16 @@
 "@effect-app/vue": minor
 ---
 
-improve: split wait vs blocked state
-feat: add allowed state
+improve: split wait vs blocked state and add allowed state
+
+# Allowed states
+
+Adds support to model allowed states, e.g based on roles, so that you can conditionally render buttons based on role memberships or other states.
+Could work together with role assignments configured on API Mutations, combined with the user's role memberships hook.
+
+# Blocked state
+
+When an entity mutation is in progress, you may want to block overlapping actions, not just the clicked button.
+While `waiting` state is managing both the disabled and loading state of a button, `blocked` only affects the disabled state.
+This way you can separate which buttons show loading state and which are only blocked.
+Controlled via `blockKey` and `waitKey` options.