@cat-factory/app 0.6.0

package/app/components/documents/TaskContextDocs.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Block, DocumentSourceKind } from '~/types/domain'
+
+// Documents (from any source) attached to a task as agent context, shown inside
+// the InspectorPanel. Linked docs are fed to agents during execution (see the
+// backend's userPromptFor). Rendered only when the integration is available.
+const props = defineProps<{ block: Block }>()
+
+const documents = useDocumentsStore()
+const ui = useUiStore()
+const toast = useToast()
+
+onMounted(() => {
+  documents.loadDocuments().catch(() => {})
+})
+
+const linked = computed(() => documents.docsForBlock(props.block.id))
+
+async function attach(source: DocumentSourceKind, externalId: string) {
+  try {
+    await documents.linkToBlock(props.block.id, source, externalId)
+    toast.add({ title: 'Document attached', icon: 'i-lucide-link' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not attach',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  }
+}
+
+const attachMenu = computed<DropdownMenuItem[][]>(() => {
+  const linkedKeys = new Set(linked.value.map((d) => `${d.source}:${d.externalId}`))
+  const items: DropdownMenuItem[] = documents.documents
+    .filter((d) => !linkedKeys.has(`${d.source}:${d.externalId}`))
+    .map((d) => ({
+      label: d.title,
+      icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
+      onSelect: () => attach(d.source, d.externalId),
+    }))
+  items.push({
+    label: 'Import a page…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openDocumentImport(null),
+  })
+  return [items]
+})
+</script>
+
+<template>
+  <div v-if="documents.available" class="space-y-2">
+    <div class="flex items-center justify-between">
+      <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Context documents
+      </span>
+      <UDropdownMenu :items="attachMenu" :content="{ side: 'bottom', align: 'end' }">
+        <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">Attach</UButton>
+      </UDropdownMenu>
+    </div>
+
+    <div v-if="linked.length" class="space-y-1">
+      <a
+        v-for="doc in linked"
+        :key="`${doc.source}:${doc.externalId}`"
+        :href="doc.url"
+        target="_blank"
+        rel="noopener"
+        class="flex items-center gap-1.5 rounded-md border border-slate-800 bg-slate-900/60 px-2 py-1.5 text-xs text-slate-300 hover:bg-slate-800/60"
+      >
+        <UIcon
+          :name="documents.descriptorFor(doc.source)?.icon ?? 'i-lucide-file-text'"
+          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+        />
+        <span class="truncate">{{ doc.title }}</span>
+      </a>
+    </div>
+    <p v-else class="text-[11px] text-slate-500">
+      Attach a requirement, RFC or PRD so agents see it while implementing this task.
+    </p>
+  </div>
+</template>

package/app/components/focus/BlockFocusView.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+import { onKeyStroke } from '@vueuse/core'
+import type { Block } from '~/types/domain'
+import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
+
+const board = useBoardStore()
+const pipelines = usePipelinesStore()
+const execution = useExecutionStore()
+const ui = useUiStore()
+const models = useModelsStore()
+const workspace = useWorkspaceStore()
+
+onMounted(() => models.ensureLoaded(workspace.workspaceId ?? undefined))
+
+const block = computed<Block | undefined>(() =>
+  ui.focusBlockId ? board.getBlock(ui.focusBlockId) : undefined,
+)
+const instance = computed(() => execution.getInstance(block.value?.executionId))
+const statusMeta = computed(() => (block.value ? STATUS_META[block.value.status] : null))
+const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+
+const deps = computed(() =>
+  (block.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),
+)
+
+const runMenu = computed(() =>
+  pipelines.pipelines.map((p) => ({
+    label: p.name,
+    icon: 'i-lucide-play',
+    onSelect: () => block.value && execution.start(block.value.id, p),
+  })),
+)
+
+function close() {
+  ui.focus(null)
+}
+
+onKeyStroke('Escape', () => {
+  if (ui.focusBlockId) close()
+})
+
+function openDecisionFor(decisionId: string) {
+  if (instance.value) ui.openDecision(instance.value.id, decisionId)
+}
+
+function openApprovalFor(approvalId: string) {
+  if (instance.value) ui.openApprovalDetail(instance.value.id, approvalId)
+}
+</script>
+
+<template>
+  <Transition name="focus-fade">
+    <div
+      v-if="block && statusMeta && typeMeta"
+      class="absolute inset-0 z-30 flex flex-col bg-slate-950/95 backdrop-blur"
+    >
+      <!-- header / breadcrumb -->
+      <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+        <UButton
+          icon="i-lucide-arrow-left"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="close"
+        >
+          Board
+        </UButton>
+        <UIcon name="i-lucide-chevron-right" class="h-4 w-4 text-slate-600" />
+        <div
+          class="flex h-9 w-9 items-center justify-center rounded-lg"
+          :style="{ backgroundColor: typeMeta.accent + '22' }"
+        >
+          <UIcon :name="typeMeta.icon" class="h-5 w-5" :style="{ color: typeMeta.accent }" />
+        </div>
+        <div>
+          <h1 class="text-lg font-semibold text-white">{{ block.title }}</h1>
+          <div class="text-xs text-slate-500">{{ typeMeta.label }} · focus view</div>
+        </div>
+        <UBadge :color="statusMeta.chip as any" variant="subtle" class="ml-2">
+          {{ statusMeta.label }}
+        </UBadge>
+        <div class="ml-auto flex items-center gap-2">
+          <UDropdownMenu :items="runMenu">
+            <UButton
+              color="primary"
+              variant="soft"
+              size="sm"
+              icon="i-lucide-play"
+              trailing-icon="i-lucide-chevron-down"
+            >
+              {{ instance ? 'Re-run pipeline' : 'Run pipeline' }}
+            </UButton>
+          </UDropdownMenu>
+          <UButton icon="i-lucide-x" color="neutral" variant="ghost" @click="close" />
+        </div>
+      </header>
+
+      <div class="grid flex-1 grid-cols-[1fr_300px] gap-6 overflow-hidden p-6">
+        <!-- main: pipeline flow -->
+        <section
+          class="flex flex-col overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-6"
+        >
+          <div class="mb-4 flex items-center gap-2">
+            <UIcon name="i-lucide-workflow" class="h-4 w-4 text-slate-500" />
+            <h2 class="text-sm font-semibold uppercase tracking-wide text-slate-400">
+              {{ instance ? instance.pipelineName : 'No pipeline running' }}
+            </h2>
+          </div>
+
+          <PipelineProgress
+            v-if="instance"
+            :instance="instance"
+            @open-decision="openDecisionFor"
+            @open-approval="openApprovalFor"
+          />
+
+          <div
+            v-else
+            class="flex flex-1 items-center justify-center rounded-xl border border-dashed border-slate-700 text-sm text-slate-500"
+          >
+            Run a pipeline to visualize the agents working on this block.
+          </div>
+        </section>
+
+        <!-- side: details -->
+        <aside
+          class="space-y-4 overflow-auto rounded-2xl border border-slate-800 bg-slate-900/60 p-5"
+        >
+          <div>
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Description
+            </div>
+            <p class="text-sm text-slate-300">{{ block.description }}</p>
+          </div>
+          <div v-if="instance">
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Overall progress
+            </div>
+            <UProgress :model-value="Math.round(block.progress * 100)" />
+            <div class="mt-1 text-[11px] text-slate-400">
+              {{ Math.round(block.progress * 100) }}%
+            </div>
+          </div>
+          <div>
+            <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Dependencies
+            </div>
+            <div v-if="deps.length" class="flex flex-wrap gap-1">
+              <UBadge v-for="d in deps" :key="d.id" color="neutral" variant="subtle" size="sm">
+                {{ d.title }}
+              </UBadge>
+            </div>
+            <div v-else class="text-[11px] text-slate-500">None</div>
+          </div>
+        </aside>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.focus-fade-enter-active,
+.focus-fade-leave-active {
+  transition: opacity 0.18s ease;
+}
+.focus-fade-enter-from,
+.focus-fade-leave-to {
+  opacity: 0;
+}
+</style>

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>