@cat-factory/app 1.0.0

package/app/components/fragments/FragmentLibraryPanel.vue

@@ -0,0 +1,340 @@
+<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 { ResolvedFragment } from '~/types/domain'
+
+const ui = useUiStore()
+const library = useFragmentLibraryStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.fragmentLibraryOpen,
+  set: (v: boolean) => {
+    if (!v) ui.closeFragmentLibrary()
+  },
+})
+
+watch(open, (isOpen) => {
+  if (isOpen) void library.probe()
+})
+
+type Tab = 'catalog' | 'authored' | '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)
+  }
+}
+
+// ---- 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', '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'
+                  : '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>
+              <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>
+
+        <!-- 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>
+    </template>
+  </UModal>
+</template>

package/app/components/github/GitHubConnect.vue

@@ -0,0 +1,183 @@
+<script setup lang="ts">
+// Discover-and-link surface for the workspace's GitHub App installation. Lists
+// the installations the App is already on (via the app JWT) so the user can bind
+// one with a single click — no installation-id typing — falling back to the
+// install redirect and a manual-id entry. Self-loads its list on mount; on a
+// successful connect the github store flips `connected`, which the host surfaces
+// react to. Shared by the GitHub panel and the bootstrap modal so the connect
+// flow lives in one place.
+const github = useGitHubStore()
+const toast = useToast()
+
+const installing = ref(false)
+const installationId = ref('')
+const connecting = ref(false)
+// Track which installation row is mid-connect so only its button spins.
+const connectingId = ref<number | null>(null)
+
+onMounted(() => {
+  void refreshInstallations()
+})
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+async function refreshInstallations() {
+  try {
+    await github.loadInstallations()
+  } catch (e) {
+    // A 503 (integration off) is handled by the host; surface anything else.
+    notifyError('Could not list GitHub installations', e)
+  }
+}
+
+async function install() {
+  installing.value = true
+  try {
+    window.location.href = await github.getInstallUrl()
+  } catch (e) {
+    notifyError('Could not start the GitHub App install', e)
+    installing.value = false
+  }
+}
+
+async function connect(id: number, onDone?: () => void) {
+  connecting.value = true
+  connectingId.value = id
+  try {
+    await github.connect(id)
+    onDone?.()
+    toast.add({ title: 'GitHub connected', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not connect', e)
+  } finally {
+    connecting.value = false
+    connectingId.value = null
+  }
+}
+
+async function connectManually() {
+  const id = Number(installationId.value.trim())
+  if (!Number.isInteger(id) || id <= 0) return
+  await connect(id, () => {
+    installationId.value = ''
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-3">
+    <!-- discovered installations: pick one the App is already on -->
+    <section class="space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-xs font-medium uppercase tracking-wide text-slate-500">
+          Your installations
+        </span>
+        <UButton
+          size="xs"
+          color="neutral"
+          variant="ghost"
+          icon="i-lucide-refresh-cw"
+          :loading="github.loadingInstallations"
+          @click="refreshInstallations"
+        >
+          Refresh
+        </UButton>
+      </div>
+
+      <div
+        v-if="github.loadingInstallations && !github.installations.length"
+        class="flex items-center gap-2 py-3 text-sm text-slate-400"
+      >
+        <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" /> Looking for installations…
+      </div>
+
+      <p
+        v-else-if="!github.installations.length"
+        class="rounded-md border border-dashed border-slate-800 px-3 py-3 text-sm text-slate-400"
+      >
+        No installations found for the App yet. Install it below, or connect by ID.
+      </p>
+
+      <div
+        v-for="inst in github.installations"
+        :key="inst.installationId"
+        class="flex items-center justify-between gap-2 rounded-md border border-slate-800 bg-slate-900/60 px-3 py-2"
+      >
+        <div class="flex min-w-0 items-center gap-2">
+          <UAvatar
+            v-if="inst.accountAvatarUrl"
+            :src="inst.accountAvatarUrl"
+            size="2xs"
+            :alt="inst.accountLogin"
+          />
+          <UIcon v-else name="i-lucide-github" class="h-4 w-4 text-slate-400" />
+          <div class="min-w-0">
+            <div class="truncate text-sm text-slate-200">{{ inst.accountLogin }}</div>
+            <div class="text-[11px] text-slate-500">
+              {{ inst.targetType }} · installation {{ inst.installationId }}
+            </div>
+          </div>
+        </div>
+        <UBadge
+          v-if="inst.connected === 'this'"
+          color="success"
+          variant="subtle"
+          size="sm"
+          title="Already linked to this workspace"
+        >
+          linked
+        </UBadge>
+        <UBadge
+          v-else-if="inst.connected === 'other'"
+          color="neutral"
+          variant="subtle"
+          size="sm"
+          title="Already connected to another workspace"
+        >
+          in use
+        </UBadge>
+        <UButton
+          v-else
+          size="xs"
+          color="primary"
+          variant="subtle"
+          icon="i-lucide-plug"
+          :loading="connectingId === inst.installationId"
+          :disabled="connecting"
+          @click="connect(inst.installationId)"
+        >
+          Connect
+        </UButton>
+      </div>
+    </section>
+
+    <USeparator label="or" />
+    <UButton color="primary" icon="i-lucide-github" :loading="installing" @click="install">
+      Install GitHub App
+    </UButton>
+
+    <USeparator label="or connect by ID" />
+    <div class="flex items-end gap-2">
+      <UFormField label="Installation ID" class="flex-1">
+        <UInput v-model="installationId" type="number" placeholder="12345678" class="w-full" />
+      </UFormField>
+      <UButton
+        color="neutral"
+        variant="subtle"
+        icon="i-lucide-plug"
+        :loading="connecting && connectingId === null"
+        :disabled="!installationId.trim()"
+        @click="connectManually"
+      >
+        Connect
+      </UButton>
+    </div>
+  </div>
+</template>