@cat-factory/app 0.132.0 → 0.134.0

package/app/components/layout/BoardToolbar.vue

@@ -5,6 +5,11 @@ import IconButton from '~/components/common/IconButton.vue'
 
 const ui = useUiStore()
 const board = useBoardStore()
+// Toolbar contributions from the shared nav manifest (docs/initiatives/modular-vue-adoption.md,
+// slice 1). First-party contributes none — this is the reactive extension point a consumer
+// deployment uses to add a board-toolbar action via `registerAppModule`, gated + rendered like
+// the sidebar/command entries with zero edits here.
+const { toolbarItems, invoke: invokeNav } = useNavContributions()
 const execution = useExecutionStore()
 const workspace = useWorkspaceStore()
 const workspaceSettings = useWorkspaceSettingsStore()
@@ -233,6 +238,19 @@ const decisionItems = computed(() =>
       </UButton>
     </UDropdownMenu>
 
+    <!-- consumer-contributed toolbar actions from the nav manifest (none first-party) -->
+    <IconButton
+      v-for="item in toolbarItems"
+      :key="item.id"
+      :label="t(item.labelKey)"
+      :icon="item.icon"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      :data-testid="item.testId"
+      @click="invokeNav(item)"
+    />
+
     <!-- human-actionable notifications (merge review, pipeline complete, CI failed) -->
     <NotificationsInbox />
 

package/app/components/layout/CommandBar.vue

@@ -25,6 +25,13 @@ const tasks = useTasksStore()
 const library = useFragmentLibraryStore()
 const access = useWorkspaceAccess()
 
+// The static destination catalog + its RBAC/availability gating now comes from
+// the shared nav manifest (docs/initiatives/modular-vue-adoption.md, slice 1),
+// rendered here as command entries. The DYNAMIC per-connection commands below
+// (github/slack/doc/task connect + import) stay local to the palette — they vary
+// per live connection, so they are not part of the static manifest this slice.
+const { commandGroups, invoke } = useNavContributions()
+
 const open = computed({
   get: () => ui.commandBarOpen,
   set: (v: boolean) => (v ? ui.openCommandBar() : ui.closeCommandBar()),
@@ -33,211 +40,117 @@ const open = computed({
 const query = ref('')
 const activeIndex = ref(0)
 
-const commands = computed<Command[]>(() => {
-  const list: Command[] = []
-
-  const groupCreate = t('layout.commandBar.groups.create')
-  const groupRepositories = t('layout.commandBar.groups.repositories')
+// The per-connection integration commands the manifest deliberately doesn't
+// carry: their label (connect vs manage) and set (one per document/task source)
+// depend on live connection state. Gated by `integrations.manage`, they render
+// under the palette's Integrations group.
+const dynamicIntegrationCommands = computed<Command[]>(() => {
+  if (!access.canManageIntegrations.value) return []
   const groupIntegrations = t('layout.commandBar.groups.integrations')
-  const groupWorkspace = t('layout.commandBar.groups.workspace')
-  const groupAccount = t('layout.commandBar.groups.account')
-
-  // ---- Create -------------------------------------------------------------
-  // Command entries mirror the SideBar nav gating: each is listed only when the caller
-  // holds the permission its action's writes require (dev-open ⇒ every `can*` is true).
-  if (access.canWriteBoard.value) {
-    list.push({
-      id: 'new-pipeline',
-      label: t('layout.commandBar.cmd.newPipeline'),
-      group: groupCreate,
-      icon: 'i-lucide-workflow',
-      keywords: t('layout.commandBar.keywords.newPipeline'),
-      run: () => ui.openBuilder(),
-    })
-  }
-
-  // ---- Repositories -------------------------------------------------------
-  if (github.available && access.canWriteBoard.value) {
+  const list: Command[] = []
+  if (github.available) {
     list.push({
-      id: 'add-from-repo',
-      label: t('layout.commandBar.cmd.addFromRepo'),
-      group: groupRepositories,
-      icon: 'i-lucide-folder-git-2',
-      keywords: t('layout.commandBar.keywords.addFromRepo'),
-      run: () => ui.openAddService(),
+      id: 'github',
+      label: github.connected
+        ? t('layout.commandBar.cmd.githubManage')
+        : t('layout.commandBar.cmd.githubConnect'),
+      group: groupIntegrations,
+      icon: 'i-lucide-github',
+      keywords: t('layout.commandBar.keywords.github'),
+      run: () => ui.openGitHub(),
     })
   }
-  if (access.canManageIntegrations.value) {
+  if (slack.available) {
     list.push({
-      id: 'bootstrap-repo',
-      label: t('layout.commandBar.cmd.bootstrapRepo'),
-      group: groupRepositories,
-      icon: 'i-lucide-git-branch-plus',
-      keywords: t('layout.commandBar.keywords.bootstrapRepo'),
-      run: () => ui.openBootstrap(),
+      id: 'slack',
+      label: slack.connected
+        ? t('layout.commandBar.cmd.slackManage')
+        : t('layout.commandBar.cmd.slackConnect'),
+      group: groupIntegrations,
+      icon: 'i-lucide-slack',
+      keywords: t('layout.commandBar.keywords.slack'),
+      run: () => ui.openSlack(),
     })
   }
-
-  // ---- Integrations (connection management — `integrations.manage`) --------
-  if (access.canManageIntegrations.value) {
-    if (github.available) {
+  if (documents.available) {
+    for (const src of documents.sources) {
       list.push({
-        id: 'github',
-        label: github.connected
-          ? t('layout.commandBar.cmd.githubManage')
-          : t('layout.commandBar.cmd.githubConnect'),
+        id: `doc-connect-${src.source}`,
+        label: documents.isConnected(src.source)
+          ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
+          : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
         group: groupIntegrations,
-        icon: 'i-lucide-github',
-        keywords: t('layout.commandBar.keywords.github'),
-        run: () => ui.openGitHub(),
+        icon: src.icon,
+        keywords: t('layout.commandBar.keywords.documentSource'),
+        run: () => ui.openDocumentConnect(src.source),
       })
     }
-    if (slack.available) {
+    if (documents.anyConnected) {
       list.push({
-        id: 'slack',
-        label: slack.connected
-          ? t('layout.commandBar.cmd.slackManage')
-          : t('layout.commandBar.cmd.slackConnect'),
+        id: 'doc-import',
+        label: t('layout.commandBar.cmd.documentImport'),
         group: groupIntegrations,
-        icon: 'i-lucide-slack',
-        keywords: t('layout.commandBar.keywords.slack'),
-        run: () => ui.openSlack(),
+        icon: 'i-lucide-file-down',
+        keywords: t('layout.commandBar.keywords.documentImport'),
+        run: () => ui.openDocumentImport(null),
       })
     }
-    if (documents.available) {
-      for (const src of documents.sources) {
-        list.push({
-          id: `doc-connect-${src.source}`,
-          label: documents.isConnected(src.source)
-            ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
-            : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
-          group: groupIntegrations,
-          icon: src.icon,
-          keywords: t('layout.commandBar.keywords.documentSource'),
-          run: () => ui.openDocumentConnect(src.source),
-        })
-      }
-      if (documents.anyConnected) {
-        list.push({
-          id: 'doc-import',
-          label: t('layout.commandBar.cmd.documentImport'),
-          group: groupIntegrations,
-          icon: 'i-lucide-file-down',
-          keywords: t('layout.commandBar.keywords.documentImport'),
-          run: () => ui.openDocumentImport(null),
-        })
-      }
-    }
-    if (tasks.available) {
-      for (const src of tasks.sources) {
-        list.push({
-          id: `task-connect-${src.source}`,
-          label: src.available
-            ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
-            : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
-          group: groupIntegrations,
-          icon: src.icon,
-          keywords: t('layout.commandBar.keywords.taskSource'),
-          run: () => ui.openTaskConnect(src.source),
-        })
-      }
-      if (tasks.anyOffered) {
-        list.push({
-          id: 'task-import',
-          label: t('layout.commandBar.cmd.taskImport'),
-          group: groupIntegrations,
-          icon: 'i-lucide-file-down',
-          keywords: t('layout.commandBar.keywords.taskImport'),
-          run: () => ui.openTaskImport(null),
-        })
-      }
-    }
   }
-
-  // ---- Workspace ----------------------------------------------------------
-  // Workspace + model configuration and the fragment library are `settings.manage`.
-  if (access.canManageSettings.value) {
-    if (library.available) {
+  if (tasks.available) {
+    for (const src of tasks.sources) {
       list.push({
-        id: 'fragments',
-        label: t('layout.commandBar.cmd.fragments'),
-        group: groupWorkspace,
-        icon: 'i-lucide-book-marked',
-        keywords: t('layout.commandBar.keywords.fragments'),
-        run: () => ui.openFragmentLibrary(),
+        id: `task-connect-${src.source}`,
+        label: src.available
+          ? t('layout.commandBar.cmd.sourceManage', { source: src.label })
+          : t('layout.commandBar.cmd.sourceConnect', { source: src.label }),
+        group: groupIntegrations,
+        icon: src.icon,
+        keywords: t('layout.commandBar.keywords.taskSource'),
+        run: () => ui.openTaskConnect(src.source),
+      })
+    }
+    if (tasks.anyOffered) {
+      list.push({
+        id: 'task-import',
+        label: t('layout.commandBar.cmd.taskImport'),
+        group: groupIntegrations,
+        icon: 'i-lucide-file-down',
+        keywords: t('layout.commandBar.keywords.taskImport'),
+        run: () => ui.openTaskImport(null),
       })
     }
-    list.push({
-      id: 'merge-thresholds',
-      label: t('layout.commandBar.cmd.mergeThresholds'),
-      group: groupWorkspace,
-      icon: 'i-lucide-git-merge',
-      keywords: t('layout.commandBar.keywords.mergeThresholds'),
-      run: () => ui.openWorkspaceSettings('merge'),
-    })
-    list.push({
-      id: 'workspace-settings',
-      label: t('layout.commandBar.cmd.workspaceSettings'),
-      group: groupWorkspace,
-      icon: 'i-lucide-sliders-horizontal',
-      keywords: t('layout.commandBar.keywords.workspaceSettings'),
-      run: () => ui.openWorkspaceSettings(),
-    })
-    list.push({
-      id: 'model-configuration',
-      label: t('layout.commandBar.cmd.modelConfiguration'),
-      group: groupWorkspace,
-      icon: 'i-lucide-cpu',
-      keywords: t('layout.commandBar.keywords.modelConfiguration'),
-      run: () => ui.openModelConfig(),
-    })
-    list.push({
-      id: 'service-fragment-defaults',
-      label: t('layout.commandBar.cmd.serviceFragmentDefaults'),
-      group: groupWorkspace,
-      icon: 'i-lucide-book-open-check',
-      keywords: t('layout.commandBar.keywords.serviceFragmentDefaults'),
-      run: () => ui.openWorkspaceSettings('fragments'),
-    })
-  }
-  list.push({
-    id: 'account-settings',
-    label: t('layout.commandBar.cmd.accountSettings'),
-    group: groupAccount,
-    icon: 'i-lucide-settings',
-    keywords: t('layout.commandBar.keywords.accountSettings'),
-    run: () => ui.openAccountSettings(),
-  })
-  list.push({
-    id: 'local-models',
-    label: t('layout.commandBar.cmd.localModels'),
-    group: groupWorkspace,
-    icon: 'i-lucide-server',
-    keywords: t('layout.commandBar.keywords.localModels'),
-    run: () => ui.openLocalModels(),
-  })
-  if (access.canManageIntegrations.value) {
-    list.push({
-      id: 'sandbox',
-      label: t('layout.commandBar.cmd.sandbox'),
-      group: groupWorkspace,
-      icon: 'i-lucide-flask-conical',
-      keywords: t('layout.commandBar.keywords.sandbox'),
-      run: () => ui.openSandbox(),
-    })
   }
-  list.push({
-    id: 'keyboard-shortcuts',
-    label: t('layout.commandBar.cmd.shortcuts'),
-    group: groupWorkspace,
-    icon: 'i-lucide-keyboard',
-    keywords: t('layout.commandBar.keywords.shortcuts'),
-    run: () => ui.openShortcutsHelp(),
-  })
-
   return list
 })
 
+const commands = computed<Command[]>(() => {
+  // Flatten the reactively-gated manifest command groups (already in canonical
+  // order: create, repositories, integrations, workspace, account), splicing the
+  // dynamic per-connection commands into the Integrations group's position.
+  const staticByGroup = new Map(commandGroups.value.map((g) => [g.group, g]))
+  const asCommand = (g: (typeof commandGroups.value)[number]): Command[] =>
+    g.items.map((ci) => ({
+      id: ci.item.id,
+      label: t(ci.labelKey),
+      group: t(g.labelKey),
+      icon: ci.item.icon,
+      keywords: ci.keywordsKey ? t(ci.keywordsKey) : undefined,
+      run: () => invoke(ci.item),
+    }))
+  const groupOrEmpty = (name: (typeof commandGroups.value)[number]['group']) => {
+    const g = staticByGroup.get(name)
+    return g ? asCommand(g) : []
+  }
+  return [
+    ...groupOrEmpty('create'),
+    ...groupOrEmpty('repositories'),
+    ...groupOrEmpty('integrations'),
+    ...dynamicIntegrationCommands.value,
+    ...groupOrEmpty('workspace'),
+    ...groupOrEmpty('account'),
+  ]
+})
+
 const filtered = computed<Command[]>(() => {
   const q = query.value.trim().toLowerCase()
   if (!q) return commands.value

package/app/components/layout/SideBar.vue

@@ -19,53 +19,16 @@ const github = useGitHubStore()
 const slack = useSlackStore()
 const library = useFragmentLibraryStore()
 const workspace = useWorkspaceStore()
-const accounts = useAccountsStore()
-const auth = useAuthStore()
 const providerConnections = useProviderConnectionsStore()
 const ui = useUiStore()
-const access = useWorkspaceAccess()
 
-// The operator dashboard (deployment-level run health) is sensitive cross-workspace data,
-// so it's shown only to an admin of the active account (matching the backend admin gate).
-const isAccountAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
-
-// Workspace-RBAC nav gating: each management destination is shown only when the caller
-// holds the permission its writes require (the SPA mirror of the admin-tier controller
-// middleware — a member/viewer who'd only get a 403 never sees the entry). Board authoring
-// (create/repos) needs `board.write`; connections/infra/sandbox/bootstrap need
-// `integrations.manage`; workspace + model configuration and the fragment library need
-// `settings.manage`. Kaizen and account settings are reads / account-scoped and stay.
-// Absent access (dev-open) ⇒ every `can*` is true, so nothing is hidden.
-const showCreate = computed(() => access.canWriteBoard.value)
-const showAddFromRepo = computed(() => github.available && access.canWriteBoard.value)
-const showBootstrap = computed(() => access.canManageIntegrations.value)
-const showRepositories = computed(() => showAddFromRepo.value || showBootstrap.value)
-const showIntegrationsHub = computed(() => access.canManageIntegrations.value)
-const showSandbox = computed(() => access.canManageIntegrations.value)
-// The Configuration section carries workspace/model settings (`settings.manage`) AND the
-// account-scoped account-settings / operator-dashboard entries, so it shows when the caller
-// can manage settings OR accounts are enabled (the account entries have their own gates).
-const showConfiguration = computed(() => access.canManageSettings.value || accounts.enabled)
-
-// The Infrastructure menu (agent-container execution + test environments) shows whenever the
-// deployment reports its infrastructure capability — every facade populates `auth.infrastructure`
-// (it drives the execution-backend selector), so there is always an execution + test-env backend
-// to view, even on a Worker/Node deployment with no runner-pool/environment connection registered.
-// The old provider-availability/local-mode signals stay as a defensive fallback for a backend that
-// (somehow) omits the descriptor.
-const showInfrastructure = computed(
-  () =>
-    // Provisioning/managing infrastructure is `integrations.manage`, so a member/viewer
-    // never sees the section (they'd only 403 on the writes inside it).
-    access.canManageIntegrations.value &&
-    (auth.infrastructure != null ||
-      auth.localMode?.enabled === true ||
-      providerConnections.isAvailable('runner-pool') ||
-      providerConnections.isAvailable('environment')),
-)
-
-// The prompt-fragment library is a `settings.manage` authoring surface.
-const showWorkspaceContext = computed(() => library.available && access.canManageSettings.value)
+// The nav catalog + its reactive RBAC/availability gating now lives in the shared
+// modular-vue manifest (docs/initiatives/modular-vue-adoption.md, slice 1): every
+// destination is declared once in `nav-contributions.ts`, gated by `navSlotFilter`
+// over a reactive `gates` service, and rendered here (and in CommandBar / BoardToolbar)
+// from `useReactiveSlots`. Sections + items appear/disappear reactively as a permission
+// or connection flips, so this shell no longer hand-rolls per-item `show*` computeds.
+const { sidebarGroups, invoke } = useNavContributions()
 
 // `isCompact` (< lg) is the breakpoint at which the navbar is an off-canvas drawer;
 // above it the aside is static and the drawer flag is inert.
@@ -191,240 +154,29 @@ watch(
         <UKbd value="⌘K" />
       </button>
 
-      <template v-if="showCreate">
-        <USeparator />
-        <section>
-          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ t('nav.create') }}
-          </h2>
-          <div class="space-y-1.5">
-            <UButton
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-workflow"
-              class="justify-start"
-              data-testid="nav-build-pipeline"
-              @click="ui.openBuilder()"
-            >
-              {{ t('nav.buildPipeline') }}
-            </UButton>
-          </div>
-        </section>
-      </template>
-
-      <template v-if="showRepositories">
-        <USeparator />
-        <section>
-          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ t('nav.repositories') }}
-          </h2>
-          <div class="space-y-1.5">
-            <UButton
-              v-if="showAddFromRepo"
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-folder-git-2"
-              class="justify-start"
-              data-testid="nav-add-from-repo"
-              @click="ui.openAddService()"
-            >
-              {{ t('nav.addFromRepo') }}
-            </UButton>
-            <UButton
-              v-if="showBootstrap"
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-git-branch-plus"
-              class="justify-start"
-              data-testid="nav-bootstrap-repo"
-              @click="ui.openBootstrap()"
-            >
-              {{ t('nav.bootstrapRepo') }}
-            </UButton>
-          </div>
-        </section>
-      </template>
-
-      <USeparator />
-
-      <section>
-        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ t('nav.integrations') }}
-        </h2>
-        <div class="space-y-1.5">
-          <!-- Every external system the workspace can enable/link now lives behind
-             this single button — the hub modal lists them grouped (source control,
-             communication, documents, trackers, observability, model providers). -->
-          <UButton
-            v-if="showIntegrationsHub"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-blocks"
-            class="justify-start"
-            data-testid="nav-integrations"
-            @click="ui.openIntegrations()"
-          >
-            {{ t('nav.integrations') }}
-          </UButton>
-          <!-- The Sandbox: try prompt versions/models against graded fixtures, off to the
-             side of the board. Opens the on-demand testing window. -->
-          <UButton
-            v-if="showSandbox"
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-flask-conical"
-            class="justify-start"
-            @click="ui.openSandbox()"
-          >
-            {{ t('nav.sandbox') }}
-          </UButton>
-          <!-- The Kaizen screen: grading history + verified prompt/agent/model combos. A
-             read surface (grading history), so it stays visible to every resolved role. -->
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-sparkles"
-            class="justify-start"
-            @click="ui.openKaizen()"
-          >
-            {{ t('nav.kaizen') }}
-          </UButton>
-        </div>
-      </section>
-
-      <template v-if="showInfrastructure">
-        <USeparator />
-        <section>
-          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ t('nav.infrastructure') }}
-          </h2>
-          <div class="space-y-1.5">
-            <!-- Where agent containers run + Tester environments + (local mode) the warm
-               pool/checkout reuse. Its own top-level destination, no longer inside the
-               Integrations hub. -->
-            <UButton
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-server-cog"
-              class="justify-start"
-              data-testid="nav-infrastructure"
-              @click="ui.openInfrastructure()"
-            >
-              {{ t('nav.infrastructure') }}
-            </UButton>
-            <!-- Guided detect → review → preflight → save flow for a service frame's
-                 docker-compose provisioning (so the single Deployer stands its env up). -->
-            <UButton
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-flask-conical"
-              class="justify-start"
-              data-testid="nav-environment-setup"
-              @click="ui.openEnvironmentSetup()"
-            >
-              {{ t('nav.environmentSetup') }}
-            </UButton>
-          </div>
-        </section>
-      </template>
-
-      <template v-if="showWorkspaceContext">
-        <USeparator />
-        <section>
-          <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ t('nav.workspaceContext') }}
-          </h2>
-          <UButton
-            block
-            color="primary"
-            variant="soft"
-            size="sm"
-            icon="i-lucide-book-marked"
-            class="justify-start"
-            @click="ui.openFragmentLibrary()"
-          >
-            {{ t('nav.contextFragments') }}
-          </UButton>
-        </section>
-      </template>
-
-      <template v-if="showConfiguration">
+      <!-- Sections + items come from the shared nav manifest, already gated by the
+         reactive slotFilter (docs/initiatives/modular-vue-adoption.md, slice 1). An
+         empty section is dropped upstream, so there is no per-section `v-if` here. -->
+      <template v-for="section in sidebarGroups" :key="section.group">
         <USeparator />
         <section>
           <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-            {{ t('nav.configuration') }}
+            {{ t(section.labelKey) }}
           </h2>
           <div class="space-y-1.5">
-            <!-- Merge thresholds, issue writeback and default service best practices are
-             now tabs inside Workspace settings. `settings.manage` — hidden for members/viewers. -->
-            <UButton
-              v-if="access.canManageSettings.value"
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-sliders-horizontal"
-              class="justify-start"
-              data-testid="nav-workspace-settings"
-              @click="ui.openWorkspaceSettings()"
-            >
-              {{ t('nav.workspaceSettings') }}
-            </UButton>
-            <UButton
-              v-if="access.canManageSettings.value"
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-cpu"
-              class="justify-start"
-              @click="ui.openModelConfig()"
-            >
-              {{ t('nav.modelConfiguration') }}
-            </UButton>
-            <!-- Account & team: members + roles, invitations, email sender, account API keys.
-             Shown once accounts (auth) are enabled. -->
-            <UButton
-              v-if="accounts.enabled"
-              block
-              color="primary"
-              variant="soft"
-              size="sm"
-              icon="i-lucide-users"
-              class="justify-start"
-              @click="ui.openAccountSettings()"
-            >
-              {{ t('nav.accountSettings') }}
-            </UButton>
-            <!-- Platform observability: deployment-level run health. Admin-only, like the backend gate. -->
             <UButton
-              v-if="accounts.enabled && isAccountAdmin"
+              v-for="item in section.items"
+              :key="item.id"
               block
               color="primary"
               variant="soft"
               size="sm"
-              icon="i-lucide-gauge"
+              :icon="item.icon"
               class="justify-start"
-              data-testid="nav-operator-dashboard"
-              @click="ui.openOperatorDashboard()"
+              :data-testid="item.testId"
+              @click="invoke(item)"
             >
-              {{ t('nav.operatorDashboard') }}
+              {{ t(item.labelKey) }}
             </UButton>
           </div>
         </section>