@cat-factory/app 0.32.2 → 0.34.0

package/app/components/fragments/FragmentLibraryPanel.vue

@@ -1,15 +1,12 @@
 <script setup lang="ts">
-// Prompt-fragment library manager (ADR 0006): curate this board's best-practice
-// fragments, link repos of Markdown guidelines (with a "changes available" badge
-// + resync), and review the merged catalog (built-in ∪ account ∪ workspace) an
-// agent is selected from per run. Workspace-tier focused; the resolved view shows
-// every tier so the inheritance is visible.
-import type { DocumentSourceKind, ResolvedFragment } from '~/types/domain'
+// The board (workspace-tier) prompt-fragment library modal (ADR 0006). A thin shell
+// around the shared FragmentLibraryManager at the active board's scope — including
+// the resolved/merged catalog view so the built-in ∪ account ∪ workspace inheritance
+// is visible. Opened from the navbar / command bar via the ui store.
+import FragmentLibraryManager from '~/components/fragments/FragmentLibraryManager.vue'
 
 const ui = useUiStore()
-const library = useFragmentLibraryStore()
-const documents = useDocumentsStore()
-const toast = useToast()
+const workspace = useWorkspaceStore()
 
 const open = computed({
   get: () => ui.fragmentLibraryOpen,
@@ -17,460 +14,17 @@ const open = computed({
     if (!v) ui.closeFragmentLibrary()
   },
 })
-
-watch(open, (isOpen) => {
-  if (isOpen) {
-    void library.probe()
-    void documents.probe()
-  }
-})
-
-type Tab = 'catalog' | 'authored' | 'documents' | 'sources'
-const tab = ref<Tab>('catalog')
-
-const tierLabel: Record<ResolvedFragment['tier'], string> = {
-  builtin: 'Built-in',
-  account: 'Account',
-  workspace: 'This board',
-}
-// `as const` keeps the literal color names (assignable to UBadge's `color`
-// union) instead of widening to `string`; `satisfies` still checks the shape.
-const tierColor = {
-  builtin: 'neutral',
-  account: 'info',
-  workspace: 'primary',
-} as const satisfies Record<ResolvedFragment['tier'], string>
-
-function notifyError(title: string, e: unknown) {
-  toast.add({
-    title,
-    description: e instanceof Error ? e.message : String(e),
-    icon: 'i-lucide-triangle-alert',
-    color: 'error',
-  })
-}
-
-// ---- create a hand-authored fragment --------------------------------------
-const draft = ref({ title: '', summary: '', body: '', tags: '' })
-const draftValid = computed(
-  () => draft.value.title.trim() && draft.value.summary.trim() && draft.value.body.trim(),
-)
-
-async function createFragment() {
-  if (!draftValid.value) return
-  try {
-    await library.create({
-      title: draft.value.title.trim(),
-      summary: draft.value.summary.trim(),
-      body: draft.value.body.trim(),
-      tags: draft.value.tags
-        .split(',')
-        .map((t) => t.trim())
-        .filter(Boolean),
-    })
-    draft.value = { title: '', summary: '', body: '', tags: '' }
-    toast.add({ title: 'Fragment added', icon: 'i-lucide-check' })
-  } catch (e) {
-    notifyError('Could not add fragment', e)
-  }
-}
-
-async function removeFragment(id: string) {
-  try {
-    await library.remove(id)
-    toast.add({ title: 'Fragment removed', icon: 'i-lucide-trash-2' })
-  } catch (e) {
-    notifyError('Could not remove fragment', e)
-  }
-}
-
-// ---- document-backed (living) fragments -----------------------------------
-// Link a Confluence/Notion page or GitHub file as a fragment that is re-resolved
-// from the source at run time (a living source of truth, not a frozen snapshot).
-const docDraft = ref({ source: '' as DocumentSourceKind | '', ref: '', tags: '' })
-const docDraftValid = computed(() => docDraft.value.source && docDraft.value.ref.trim())
-
-/** The board's existing document-backed fragments (workspace tier). */
-const documentFragments = computed(() => library.fragments.filter((f) => f.documentRef))
-
-async function linkDocumentFragment() {
-  if (!docDraftValid.value) return
-  try {
-    await library.createDocumentFragment({
-      source: docDraft.value.source as DocumentSourceKind,
-      ref: docDraft.value.ref.trim(),
-      tags: docDraft.value.tags
-        .split(',')
-        .map((t) => t.trim())
-        .filter(Boolean),
-    })
-    docDraft.value = { source: '', ref: '', tags: '' }
-    toast.add({ title: 'Document linked as a living fragment', icon: 'i-lucide-link' })
-  } catch (e) {
-    notifyError('Could not link document', e)
-  }
-}
-
-async function refreshFragment(id: string) {
-  try {
-    await library.refreshDocumentFragment(id)
-    toast.add({ title: 'Fragment re-resolved from source', icon: 'i-lucide-refresh-cw' })
-  } catch (e) {
-    notifyError('Could not refresh fragment', e)
-  }
-}
-
-// ---- repo sources ----------------------------------------------------------
-const sourceDraft = ref({ repoOwner: '', repoName: '', dirPath: '', gitRef: '' })
-const sourceValid = computed(
-  () => sourceDraft.value.repoOwner.trim() && sourceDraft.value.repoName.trim(),
-)
-
-async function linkSource() {
-  if (!sourceValid.value) return
-  try {
-    const source = await library.linkSource({
-      repoOwner: sourceDraft.value.repoOwner.trim(),
-      repoName: sourceDraft.value.repoName.trim(),
-      dirPath: sourceDraft.value.dirPath.trim() || undefined,
-      gitRef: sourceDraft.value.gitRef.trim() || undefined,
-    })
-    sourceDraft.value = { repoOwner: '', repoName: '', dirPath: '', gitRef: '' }
-    await library.syncSource(source.id)
-    toast.add({ title: 'Source linked & synced', icon: 'i-lucide-git-branch' })
-  } catch (e) {
-    notifyError('Could not link source', e)
-  }
-}
-
-async function syncSource(id: string) {
-  try {
-    const result = await library.syncSource(id)
-    toast.add({
-      title: `Synced: ${result.upserted} updated, ${result.tombstoned} removed`,
-      icon: 'i-lucide-refresh-cw',
-      color: 'info',
-    })
-  } catch (e) {
-    notifyError('Could not sync source', e)
-  }
-}
-
-async function checkSource(id: string) {
-  try {
-    const status = await library.checkSource(id)
-    toast.add({
-      title: status.changed ? `${status.changedCount} change(s) available` : 'Up to date',
-      icon: status.changed ? 'i-lucide-bell-dot' : 'i-lucide-check',
-    })
-  } catch (e) {
-    notifyError('Could not check source', e)
-  }
-}
-
-async function unlinkSource(id: string) {
-  try {
-    await library.unlinkSource(id)
-    toast.add({ title: 'Source unlinked', icon: 'i-lucide-unplug' })
-  } catch (e) {
-    notifyError('Could not unlink source', e)
-  }
-}
 </script>
 
 <template>
   <UModal v-model:open="open" title="Prompt-fragment library" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <div class="flex flex-col gap-4">
-        <p class="text-sm text-slate-400">
-          Curate the best-practice guidelines agents follow on this board. Fragments are merged from
-          the built-in catalog, your account, and this board — later tiers override earlier ones —
-          then the relevant ones are selected for each agent run.
-        </p>
-
-        <div class="flex gap-2">
-          <UButton
-            v-for="t in ['catalog', 'authored', 'documents', 'sources'] as Tab[]"
-            :key="t"
-            :color="tab === t ? 'primary' : 'neutral'"
-            :variant="tab === t ? 'solid' : 'ghost'"
-            size="sm"
-            @click="tab = t"
-          >
-            {{
-              t === 'catalog'
-                ? 'Resolved catalog'
-                : t === 'authored'
-                  ? 'This board'
-                  : t === 'documents'
-                    ? 'Documents'
-                    : 'Repo sources'
-            }}
-          </UButton>
-        </div>
-
-        <!-- Resolved (merged) catalog -->
-        <div v-if="tab === 'catalog'" class="flex flex-col gap-2">
-          <p class="text-xs text-slate-500">
-            {{ library.resolved.length }} fragment(s) resolved ·
-            {{ library.builtinCount }} built-in.
-          </p>
-          <div
-            v-for="f in library.resolved"
-            :key="f.id"
-            class="rounded-md border border-slate-800 bg-slate-900/60 p-3"
-          >
-            <div class="flex items-center gap-2">
-              <span class="font-medium text-slate-100">{{ f.title }}</span>
-              <UBadge size="xs" :color="tierColor[f.tier]" variant="subtle">
-                {{ tierLabel[f.tier] }}
-              </UBadge>
-              <UBadge
-                v-if="f.documentRef"
-                size="xs"
-                color="success"
-                variant="subtle"
-                icon="i-lucide-radio"
-              >
-                Live · {{ f.documentRef.source }}
-              </UBadge>
-              <span class="ml-auto font-mono text-[11px] text-slate-500">{{ f.id }}</span>
-            </div>
-            <p class="mt-1 text-sm text-slate-400">{{ f.summary }}</p>
-            <div v-if="f.tags?.length" class="mt-1 flex flex-wrap gap-1">
-              <UBadge v-for="tag in f.tags" :key="tag" size="xs" variant="outline" color="neutral">
-                {{ tag }}
-              </UBadge>
-            </div>
-          </div>
-        </div>
-
-        <!-- Hand-authored (workspace tier) -->
-        <div v-else-if="tab === 'authored'" class="flex flex-col gap-3">
-          <div
-            v-for="f in library.fragments"
-            :key="f.id"
-            class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
-          >
-            <div class="min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="font-medium text-slate-100">{{ f.title }}</span>
-                <UBadge v-if="f.source" size="xs" color="info" variant="subtle">from repo</UBadge>
-              </div>
-              <p class="text-sm text-slate-400">{{ f.summary }}</p>
-            </div>
-            <UButton
-              icon="i-lucide-trash-2"
-              size="xs"
-              color="error"
-              variant="ghost"
-              class="ml-auto"
-              @click="removeFragment(f.id)"
-            />
-          </div>
-          <p v-if="!library.fragments.length" class="text-sm text-slate-500">
-            No board-specific fragments yet. Add one below, or override a built-in by using its id.
-          </p>
-
-          <div class="rounded-md border border-slate-800 p-3">
-            <p class="mb-2 text-sm font-medium">Add a fragment</p>
-            <div class="flex flex-col gap-2">
-              <UInput v-model="draft.title" placeholder="Title" />
-              <UInput
-                v-model="draft.summary"
-                placeholder="One-line summary (used by the selector)"
-              />
-              <UTextarea
-                v-model="draft.body"
-                placeholder="Guidance body (injected into the prompt)"
-                :rows="4"
-              />
-              <UInput v-model="draft.tags" placeholder="Tags, comma-separated (e.g. backend, db)" />
-              <UButton
-                icon="i-lucide-plus"
-                size="sm"
-                :disabled="!draftValid"
-                :loading="library.loading"
-                class="self-start"
-                @click="createFragment"
-              >
-                Add fragment
-              </UButton>
-            </div>
-          </div>
-        </div>
-
-        <!-- Document-backed (living) fragments -->
-        <div v-else-if="tab === 'documents'" class="flex flex-col gap-3">
-          <p class="text-xs text-slate-500">
-            Link a Confluence/Notion page or a GitHub file as a best-practice fragment. Its guidance
-            is re-resolved from the source at run time — edit the doc and the next agent run follows
-            the new version (no re-import).
-          </p>
-
-          <div
-            v-for="f in documentFragments"
-            :key="f.id"
-            class="flex items-start gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
-          >
-            <UIcon name="i-lucide-radio" class="mt-0.5 h-4 w-4 text-emerald-400" />
-            <div class="min-w-0">
-              <div class="flex items-center gap-2">
-                <span class="font-medium text-slate-100">{{ f.title }}</span>
-                <UBadge size="xs" color="success" variant="subtle">
-                  {{ f.documentRef?.source }}
-                </UBadge>
-              </div>
-              <p class="text-sm text-slate-400">{{ f.summary }}</p>
-              <p v-if="f.resolvedAt" class="text-[11px] text-slate-500">
-                last resolved {{ new Date(f.resolvedAt).toLocaleString() }}
-              </p>
-            </div>
-            <div class="ml-auto flex gap-1">
-              <UButton
-                icon="i-lucide-refresh-cw"
-                size="xs"
-                variant="ghost"
-                :loading="library.loading"
-                title="Re-resolve from source now"
-                @click="refreshFragment(f.id)"
-              />
-              <UButton
-                icon="i-lucide-trash-2"
-                size="xs"
-                color="error"
-                variant="ghost"
-                @click="removeFragment(f.id)"
-              />
-            </div>
-          </div>
-          <p v-if="!documentFragments.length" class="text-sm text-slate-500">
-            No document-backed fragments yet. Link one below.
-          </p>
-
-          <div class="rounded-md border border-slate-800 p-3">
-            <p class="mb-2 text-sm font-medium">Link a document</p>
-            <div v-if="!documents.connectedSources.length" class="text-sm text-slate-500">
-              Connect a document source (Confluence, Notion or GitHub) under Integrations first.
-            </div>
-            <div v-else class="flex flex-col gap-2">
-              <div class="flex flex-wrap gap-2">
-                <UButton
-                  v-for="s in documents.connectedSources"
-                  :key="s.source"
-                  size="xs"
-                  :color="docDraft.source === s.source ? 'primary' : 'neutral'"
-                  :variant="docDraft.source === s.source ? 'solid' : 'outline'"
-                  @click="docDraft.source = s.source"
-                >
-                  {{ s.label }}
-                </UButton>
-              </div>
-              <UInput
-                v-model="docDraft.ref"
-                placeholder="Page id or URL (e.g. a Confluence/Notion page or GitHub file URL)"
-              />
-              <UInput v-model="docDraft.tags" placeholder="Tags, comma-separated (optional)" />
-              <UButton
-                icon="i-lucide-link"
-                size="sm"
-                :disabled="!docDraftValid"
-                :loading="library.loading"
-                class="self-start"
-                @click="linkDocumentFragment"
-              >
-                Link as living fragment
-              </UButton>
-            </div>
-          </div>
-        </div>
-
-        <!-- Repo sources -->
-        <div v-else class="flex flex-col gap-3">
-          <div
-            v-for="s in library.sources"
-            :key="s.id"
-            class="flex items-center gap-2 rounded-md border border-slate-800 bg-slate-900/60 p-3"
-          >
-            <UIcon name="i-lucide-git-branch" class="h-4 w-4 text-slate-400" />
-            <div class="min-w-0">
-              <span class="font-mono text-sm text-slate-100">
-                {{ s.repoOwner }}/{{ s.repoName
-                }}<span class="text-slate-500">/{{ s.dirPath || '' }}</span>
-              </span>
-              <p class="text-xs text-slate-500">
-                {{ s.lastSyncedAt ? 'synced' : 'never synced' }} · ref {{ s.gitRef }}
-              </p>
-            </div>
-            <UBadge
-              v-if="library.sourceChanges[s.id]"
-              size="xs"
-              color="warning"
-              variant="subtle"
-              class="ml-auto"
-            >
-              {{ library.sourceChanges[s.id] }} change(s)
-            </UBadge>
-            <div class="ml-auto flex gap-1">
-              <UButton
-                icon="i-lucide-search-check"
-                size="xs"
-                variant="ghost"
-                @click="checkSource(s.id)"
-              />
-              <UButton
-                icon="i-lucide-refresh-cw"
-                size="xs"
-                variant="ghost"
-                :loading="library.loading"
-                @click="syncSource(s.id)"
-              />
-              <UButton
-                icon="i-lucide-unplug"
-                size="xs"
-                color="error"
-                variant="ghost"
-                @click="unlinkSource(s.id)"
-              />
-            </div>
-          </div>
-          <p v-if="!library.sources.length" class="text-sm text-slate-500">
-            No linked guideline repos. Link one below to import its Markdown files as fragments.
-          </p>
-
-          <div class="rounded-md border border-slate-800 p-3">
-            <p class="mb-2 text-sm font-medium">Link a guideline repo</p>
-            <div class="flex flex-col gap-2">
-              <div class="flex gap-2">
-                <UInput v-model="sourceDraft.repoOwner" placeholder="owner" class="flex-1" />
-                <UInput v-model="sourceDraft.repoName" placeholder="repo" class="flex-1" />
-              </div>
-              <div class="flex gap-2">
-                <UInput
-                  v-model="sourceDraft.dirPath"
-                  placeholder="dir path (e.g. guidelines)"
-                  class="flex-1"
-                />
-                <UInput
-                  v-model="sourceDraft.gitRef"
-                  placeholder="ref (default HEAD)"
-                  class="flex-1"
-                />
-              </div>
-              <UButton
-                icon="i-lucide-link"
-                size="sm"
-                :disabled="!sourceValid"
-                :loading="library.loading"
-                class="self-start"
-                @click="linkSource"
-              >
-                Link & sync
-              </UButton>
-            </div>
-          </div>
-        </div>
-      </div>
+      <FragmentLibraryManager
+        v-if="workspace.workspaceId"
+        kind="workspace"
+        :owner-id="workspace.workspaceId"
+        show-catalog
+      />
     </template>
   </UModal>
 </template>

package/app/components/layout/AccountFragmentSettings.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Account-tier prompt-fragment library (ADR 0006): best-practice guidelines shared by
+// every board in the account, which each board inherits and can override. A body-only
+// section rendered in the "Context fragments" tab of AccountSettingsPanel; available for
+// ALL account types (unlike the org-only Team tab).
+import { computed } from 'vue'
+import FragmentLibraryManager from '~/components/fragments/FragmentLibraryManager.vue'
+
+const props = defineProps<{ accountId: string }>()
+const workspace = useWorkspaceStore()
+
+// Account-tier document fragments are fetched through a board's stored
+// document-source connection (credentials are per-workspace). Prefer the active
+// board when it belongs to this account, else the account's first board.
+const viaWorkspaceId = computed(() => {
+  const boards = workspace.accountWorkspaces
+  return boards.find((w) => w.id === workspace.workspaceId)?.id ?? boards[0]?.id
+})
+</script>
+
+<template>
+  <div class="space-y-6 text-sm">
+    <section>
+      <p class="mb-3 text-[11px] text-slate-400">
+        Best-practice guidelines shared by every board in this account. Each board inherits these
+        and can override or add its own. Code-aware agents (coder, reviewer, architect, fixers) fold
+        the relevant ones into their prompt.
+      </p>
+      <FragmentLibraryManager
+        kind="account"
+        :owner-id="accountId"
+        :via-workspace-id="viaWorkspaceId"
+        :show-catalog="false"
+      />
+    </section>
+  </div>
+</template>

package/app/components/layout/AccountTeamSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { AccountRole } from '~/types/domain'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
 
@@ -21,6 +21,12 @@ const ROLE_ITEMS: { label: string; value: AccountRole }[] = [
 
 /** Whether the signed-in caller is an admin of this account (drives edit affordances). */
 const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
+/**
+ * Members / roles / invitations are org-scoped — the backend rejects membership on a
+ * personal account. For a personal account we show a "create an organization" CTA in
+ * their place; the email sender + account API keys remain available either way.
+ */
+const isOrg = computed(() => accounts.activeAccount?.type === 'org')
 
 async function updateMemberRoles(userId: string, roles: AccountRole[]) {
   try {
@@ -41,16 +47,44 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-onMounted(async () => {
+async function loadAll(accountId: string) {
   try {
-    await Promise.all([
-      accounts.loadRoster(props.accountId),
-      accounts.loadEmailConnection(props.accountId),
-    ])
+    const jobs: Promise<unknown>[] = [accounts.loadEmailConnection(accountId)]
+    // The roster only applies to org accounts.
+    if (isOrg.value) jobs.push(accounts.loadRoster(accountId))
+    await Promise.all(jobs)
   } catch (e) {
     notifyError('Could not load team settings', e)
   }
-})
+}
+
+onMounted(() => void loadAll(props.accountId))
+// Reload when the active account changes while the panel is open (e.g. after creating an
+// organization from the CTA below, which switches the active account to the new org).
+watch(
+  () => props.accountId,
+  (id) => {
+    if (id) void loadAll(id)
+  },
+)
+
+// ---- create organization (personal-account CTA) ---------------------------
+const newOrgName = ref('')
+
+async function createOrganization() {
+  const name = newOrgName.value.trim()
+  if (!name) return
+  busy.value = true
+  try {
+    await accounts.createOrg(name)
+    newOrgName.value = ''
+    toast.add({ title: 'Organization created', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not create organization', e)
+  } finally {
+    busy.value = false
+  }
+}
 
 // ---- invitations ----------------------------------------------------------
 const inviteEmail = ref('')
@@ -125,8 +159,23 @@ async function disconnectEmail() {
 
 <template>
   <div class="space-y-6 text-sm">
+    <!-- personal-account CTA: members/roles/invitations need an organization -->
+    <section v-if="!isOrg" class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
+      <h3 class="mb-1 font-semibold text-white">Invite teammates &amp; manage roles</h3>
+      <p class="mb-3 text-slate-400">
+        Members, roles and invitations live on an organization. Create one to invite teammates and
+        manage their roles — your personal boards stay as they are.
+      </p>
+      <form class="flex gap-2" @submit.prevent="createOrganization">
+        <UInput v-model="newOrgName" placeholder="Acme Inc." class="flex-1" />
+        <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-plus">
+          Create organization
+        </UButton>
+      </form>
+    </section>
+
     <!-- members -->
-    <section>
+    <section v-if="isOrg">
       <h3 class="mb-2 font-semibold text-white">Members</h3>
       <ul class="space-y-1">
         <li
@@ -153,7 +202,7 @@ async function disconnectEmail() {
     </section>
 
     <!-- invitations -->
-    <section>
+    <section v-if="isOrg">
       <h3 class="mb-2 font-semibold text-white">Invite a teammate</h3>
       <form class="flex gap-2" @submit.prevent="sendInvite">
         <UInput

package/app/components/layout/BoardSwitcher.vue

@@ -8,6 +8,7 @@ import type { CloudProvider } from '~/types/domain'
 // board switcher over the single unscoped context.
 const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
+const ui = useUiStore()
 const toast = useToast()
 
 const busy = ref(false)
@@ -52,10 +53,14 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
   })),
   [
     { label: 'New organization…', icon: 'i-lucide-plus', onSelect: () => openPrompt('account') },
-    // Team management (members + invitations + email sender) for org accounts.
-    ...(accounts.activeAccount?.type === 'org'
-      ? [{ label: 'Manage team…', icon: 'i-lucide-users', onSelect: () => openSettings() }]
-      : []),
+    // Account settings: the unified per-account panel (team + roles + invitations + email
+    // sender + account-tier fragment library). The panel itself handles personal accounts
+    // (prompting to create an org for the team tab), so this is not gated.
+    {
+      label: 'Account settings…',
+      icon: 'i-lucide-settings',
+      onSelect: () => ui.openAccountSettings(),
+    },
     // Admins can set the account-wide default provider new services inherit.
     ...(accounts.activeAccount?.roles?.includes('admin')
       ? [
@@ -184,12 +189,6 @@ async function submitPrompt() {
     busy.value = false
   }
 }
-
-// ---- account settings modal (members / invitations / email) ----------------
-const settingsOpen = ref(false)
-function openSettings() {
-  settingsOpen.value = true
-}
 </script>
 
 <template>
@@ -266,15 +265,5 @@ function openSettings() {
         </form>
       </template>
     </UModal>
-
-    <!-- account team settings: members, invitations, email sender -->
-    <UModal v-model:open="settingsOpen" title="Team settings">
-      <template #body>
-        <AccountTeamSettings
-          v-if="accounts.activeAccountId"
-          :account-id="accounts.activeAccountId"
-        />
-      </template>
-    </UModal>
   </div>
 </template>