@cat-factory/app 0.33.0 → 0.35.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/BoardSwitcher.vue

@@ -53,11 +53,12 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
   })),
   [
     { label: 'New organization…', icon: 'i-lucide-plus', onSelect: () => openPrompt('account') },
-    // Account & team settings (members + roles + invitations + email sender). The panel
-    // itself handles personal accounts (prompting to create an org), so this is not gated.
+    // 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-users',
+      icon: 'i-lucide-settings',
       onSelect: () => ui.openAccountSettings(),
     },
     // Admins can set the account-wide default provider new services inherit.

package/app/components/layout/CommandBar.vue

@@ -173,6 +173,15 @@ const commands = computed<Command[]>(() => {
     keywords: 'fragment best practice guideline service default code-aware',
     run: () => ui.openWorkspaceSettings('fragments'),
   })
+  list.push({
+    id: 'account-settings',
+    label: 'Account settings',
+    group: 'Account',
+    icon: 'i-lucide-settings',
+    keywords:
+      'account team members roles invitations email api keys fragment best practice library context organization personal',
+    run: () => ui.openAccountSettings(),
+  })
   list.push({
     id: 'local-models',
     label: 'My local runners',

package/app/components/layout/IntegrationsHub.vue

@@ -8,6 +8,7 @@
 // Sections gate on the same `available` probes the navbar used, so a system that
 // the backend has turned off simply doesn't appear here.
 const ui = useUiStore()
+const auth = useAuthStore()
 const github = useGitHubStore()
 const slack = useSlackStore()
 const documents = useDocumentsStore()
@@ -256,6 +257,18 @@ const groups = computed<IntegrationGroup[]>(() => {
       onClick: () => go(() => ui.openProviderConnection('runner-pool')),
     })
   }
+  // Local-mode-only: the warm-container pool + checkout reuse for the local runner. Shown
+  // only on the local-mode service (the controller 503s elsewhere, and `auth.localMode`
+  // is set from /auth/config).
+  if (auth.localMode?.enabled) {
+    infra.push({
+      key: 'local-mode',
+      icon: 'i-lucide-container',
+      label: 'Local mode',
+      description: 'Warm container pool + per-repo checkout reuse for the local runner.',
+      onClick: () => go(ui.openLocalModeSettings),
+    })
+  }
   if (infra.length) out.push({ title: 'Infrastructure', items: infra })
 
   return out

package/app/components/settings/AccountSettingsPanel.vue

@@ -1,9 +1,12 @@
 <script setup lang="ts">
-// Account & team settings — a modal host for the per-account team panel (members +
-// roles, invitations, email sender, account-wide API keys). Account-scoped, distinct
-// from Workspace settings. Opened from the SideBar Configuration section and the
-// account switcher; bound to the `ui` store so any surface can open it.
+// Account settings — a single tabbed modal for the per-account configuration, distinct
+// from Workspace settings. Hosts the team panel (members + roles, invitations, email
+// sender, account-wide API keys; org-scoped, with a create-org CTA on a personal account)
+// and the account-tier prompt-fragment library (available for every account type).
+// Opened from the SideBar Configuration section, the account switcher and the command
+// bar; bound to the `ui` store so any surface can open it and deep-link to a tab.
 import AccountTeamSettings from '~/components/layout/AccountTeamSettings.vue'
+import AccountFragmentSettings from '~/components/layout/AccountFragmentSettings.vue'
 
 const ui = useUiStore()
 const accounts = useAccountsStore()
@@ -12,13 +15,43 @@ const open = computed({
   get: () => ui.accountSettingsOpen,
   set: (v: boolean) => (v ? ui.openAccountSettings() : ui.closeAccountSettings()),
 })
+
+// Driven by the ui store so other surfaces (command bar, the workspace-settings
+// cross-link) can deep-link straight to a tab.
+const activeTab = computed({
+  get: () => ui.accountSettingsTab,
+  set: (v: string) => ui.setAccountSettingsTab(v),
+})
+
+const tabs = [
+  { value: 'team', label: 'Team & access', icon: 'i-lucide-users', slot: 'team' },
+  {
+    value: 'fragments',
+    label: 'Context fragments',
+    icon: 'i-lucide-book-marked',
+    slot: 'fragments',
+  },
+]
 </script>
 
 <template>
-  <UModal v-model:open="open" title="Account & team" :ui="{ content: 'max-w-3xl' }">
+  <UModal v-model:open="open" title="Account settings" :ui="{ content: 'max-w-3xl' }">
     <template #body>
-      <AccountTeamSettings v-if="accounts.activeAccountId" :account-id="accounts.activeAccountId" />
-      <p v-else class="text-sm text-slate-400">No account selected.</p>
+      <p v-if="!accounts.activeAccountId" class="text-sm text-slate-400">No account selected.</p>
+      <UTabs
+        v-else
+        v-model="activeTab"
+        :items="tabs"
+        variant="link"
+        :ui="{ root: 'gap-4', list: 'overflow-x-auto' }"
+      >
+        <template #team>
+          <AccountTeamSettings :account-id="accounts.activeAccountId" />
+        </template>
+        <template #fragments>
+          <AccountFragmentSettings :account-id="accounts.activeAccountId" />
+        </template>
+      </UTabs>
     </template>
   </UModal>
 </template>