@cat-factory/app 0.6.0

package/app/components/consensus/ConsensusSessionWindow.vue

@@ -0,0 +1,210 @@
+<script setup lang="ts">
+// Consensus session window — the dedicated, read-only surface for any step that ran the
+// multi-model consensus mechanism (specialist panel / debate / ranked voting). Opened via
+// the universal result-view host (routed in `ui.dispatchStepView` when a step's
+// `consensus.enabled`). Visualizes the process for observability: the participants + their
+// models, the round-by-round contributions (anonymized as the models saw each other),
+// per-candidate votes/scores, and the synthesized result + confidence/dissent. Updates live
+// as `consensus` stream events arrive.
+import { computed } from 'vue'
+import type { ConsensusContribution, ConsensusSession } from '~/types/consensus'
+
+const board = useBoardStore()
+const consensus = useConsensusStore()
+
+const { open, blockId, close } = useResultView('consensus-session', {
+  onOpen: (id) => {
+    void consensus.load(id)
+  },
+})
+
+const block = computed(() => (blockId.value ? board.getBlock(blockId.value) : undefined))
+const session = computed<ConsensusSession | null>(() =>
+  blockId.value ? consensus.sessionFor(blockId.value) : null,
+)
+const loading = computed(() => (blockId.value ? consensus.isLoading(blockId.value) : false))
+
+const STRATEGY_LABEL: Record<string, string> = {
+  'specialist-panel': 'Specialist panel',
+  debate: 'Debate',
+  'ranked-voting': 'Ranked voting',
+}
+const ROUND_LABEL: Record<string, string> = {
+  draft: 'Independent drafts',
+  critique: 'Critique & revision',
+  score: 'Scoring',
+}
+
+const STATUS_META: Record<string, { label: string; class: string }> = {
+  running: { label: 'Running', class: 'bg-sky-500/15 text-sky-300' },
+  synthesizing: { label: 'Synthesizing', class: 'bg-indigo-500/15 text-indigo-300' },
+  done: { label: 'Done', class: 'bg-emerald-500/15 text-emerald-300' },
+  failed: { label: 'Failed', class: 'bg-rose-500/15 text-rose-300' },
+}
+
+/** Anonymous label (Expert A/B/…) for a participant, matching the backend's ordering. */
+function anonLabel(participantId: string): string {
+  const idx = session.value?.participants.findIndex((p) => p.id === participantId) ?? -1
+  return `Expert ${String.fromCharCode(65 + (idx < 0 ? 0 : idx % 26))}`
+}
+
+function roleFor(participantId: string): string {
+  return session.value?.participants.find((p) => p.id === participantId)?.role ?? 'Participant'
+}
+
+function pct(n: number | null | undefined): string {
+  return n == null ? '—' : `${Math.round(n * 100)}%`
+}
+
+function topScore(c: ConsensusContribution): { label: string; value: number } | null {
+  if (!c.scores?.length) return null
+  const best = [...c.scores].sort((a, b) => b.value - a.value)[0]!
+  return { label: best.dimension, value: best.value }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div
+      v-if="open"
+      class="fixed inset-0 z-50 flex items-center justify-center bg-slate-950/70 p-4 backdrop-blur-sm"
+      @click.self="close"
+    >
+      <div
+        class="flex h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-slate-800 bg-slate-900 shadow-2xl"
+      >
+        <!-- header -->
+        <header class="flex items-center gap-3 border-b border-slate-800 px-6 py-4">
+          <div class="flex h-9 w-9 shrink-0 items-center justify-center rounded-lg bg-amber-500/15">
+            <UIcon name="i-lucide-users-round" class="h-5 w-5 text-amber-300" />
+          </div>
+          <div class="min-w-0 flex-1">
+            <h2 class="truncate text-sm font-semibold text-slate-100">
+              Consensus ·
+              {{ session ? (STRATEGY_LABEL[session.strategy] ?? session.strategy) : '' }}
+              <span v-if="block" class="font-normal text-slate-400">— {{ block.title }}</span>
+            </h2>
+            <p v-if="session" class="text-xs text-slate-500">
+              {{ session.agentKind }} · {{ session.participants.length }} participants
+            </p>
+          </div>
+          <span
+            v-if="session"
+            class="rounded-full px-2.5 py-1 text-xs font-medium"
+            :class="STATUS_META[session.status]?.class ?? 'bg-slate-700 text-slate-300'"
+          >
+            {{ STATUS_META[session.status]?.label ?? session.status }}
+          </span>
+          <button
+            class="rounded-lg p-1.5 text-slate-400 hover:bg-slate-800 hover:text-slate-200"
+            @click="close"
+          >
+            <UIcon name="i-lucide-x" class="h-5 w-5" />
+          </button>
+        </header>
+
+        <div class="flex-1 overflow-y-auto px-6 py-5">
+          <div v-if="loading && !session" class="py-16 text-center text-sm text-slate-500">
+            Loading consensus session…
+          </div>
+          <div v-else-if="!session" class="py-16 text-center text-sm text-slate-500">
+            No consensus session has run for this step yet.
+          </div>
+          <template v-else>
+            <!-- failure -->
+            <div
+              v-if="session.status === 'failed'"
+              class="mb-5 rounded-lg border border-rose-800/60 bg-rose-950/40 px-4 py-3 text-sm text-rose-200"
+            >
+              Consensus failed: {{ session.error ?? 'unknown error' }}
+            </div>
+
+            <!-- synthesized result -->
+            <section v-if="session.synthesis" class="mb-6">
+              <div class="mb-2 flex items-center gap-2">
+                <h3 class="text-xs font-semibold uppercase tracking-wide text-slate-400">
+                  Synthesized result
+                </h3>
+                <span
+                  v-if="session.confidence != null"
+                  class="rounded bg-emerald-500/15 px-1.5 py-0.5 text-xs text-emerald-300"
+                  >confidence {{ pct(session.confidence) }}</span
+                >
+              </div>
+              <pre
+                class="whitespace-pre-wrap rounded-lg border border-slate-800 bg-slate-950/60 px-4 py-3 text-sm text-slate-200"
+                >{{ session.synthesis }}</pre
+              >
+              <ul v-if="session.dissent?.length" class="mt-2 space-y-1">
+                <li
+                  v-for="(d, i) in session.dissent"
+                  :key="i"
+                  class="flex items-start gap-2 text-xs text-amber-300/90"
+                >
+                  <UIcon name="i-lucide-triangle-alert" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
+                  <span>{{ d }}</span>
+                </li>
+              </ul>
+            </section>
+
+            <!-- participants -->
+            <section class="mb-6">
+              <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+                Panel
+              </h3>
+              <div class="flex flex-wrap gap-2">
+                <div
+                  v-for="(p, i) in session.participants"
+                  :key="p.id"
+                  class="rounded-lg border border-slate-800 bg-slate-950/40 px-3 py-1.5 text-xs"
+                >
+                  <span class="font-medium text-slate-200"
+                    >Expert {{ String.fromCharCode(65 + i) }}</span
+                  >
+                  <span class="text-slate-400"> · {{ p.role }}</span>
+                  <span v-if="p.modelId" class="ml-1 text-slate-500">({{ p.modelId }})</span>
+                </div>
+              </div>
+            </section>
+
+            <!-- rounds -->
+            <section v-for="round in session.rounds" :key="round.index" class="mb-5">
+              <h3 class="mb-2 text-xs font-semibold uppercase tracking-wide text-slate-400">
+                Round {{ round.index + 1 }} ·
+                {{ round.kind ? (ROUND_LABEL[round.kind] ?? round.kind) : 'Contributions' }}
+              </h3>
+              <div class="space-y-3">
+                <div
+                  v-for="c in round.contributions"
+                  :key="c.participantId"
+                  class="rounded-lg border border-slate-800 bg-slate-950/40 px-4 py-3"
+                >
+                  <div class="mb-1 flex items-center gap-2">
+                    <span class="text-xs font-semibold text-slate-200">{{
+                      anonLabel(c.participantId)
+                    }}</span>
+                    <span class="text-xs text-slate-500">{{ roleFor(c.participantId) }}</span>
+                    <span
+                      v-if="topScore(c)"
+                      class="ml-auto rounded bg-slate-800 px-1.5 py-0.5 text-xs text-slate-300"
+                      >top {{ topScore(c)!.label }} {{ pct(topScore(c)!.value) }}</span
+                    >
+                  </div>
+                  <pre class="whitespace-pre-wrap text-sm text-slate-300">{{ c.text }}</pre>
+                  <div v-if="c.scores?.length" class="mt-2 flex flex-wrap gap-1.5">
+                    <span
+                      v-for="s in c.scores"
+                      :key="s.dimension"
+                      class="rounded bg-slate-800/80 px-1.5 py-0.5 text-xs text-slate-400"
+                      >{{ s.dimension }}: {{ pct(s.value) }}</span
+                    >
+                  </div>
+                </div>
+              </div>
+            </section>
+          </template>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>

package/app/components/documents/DocumentImportModal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { DocumentSourceKind } from '~/types/domain'
+
+// Import pages from a connected document source and pick one to expand into
+// board structure. A source selector lets the user choose which connected source
+// to import from (Confluence, Notion, …). Carries an optional target frame from
+// the inspector so "Preview & spawn" lands the structure inside that frame.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.documentImport !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeDocumentImport()
+  },
+})
+
+const targetFrameId = computed(() => ui.documentImport?.targetFrameId ?? null)
+const targetFrameTitle = computed(() =>
+  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
+)
+
+/** Which connected source we're importing from (defaults to the first). */
+const source = ref<DocumentSourceKind | undefined>(undefined)
+const ref_ = ref('')
+const importing = ref(false)
+
+const sourceItems = computed(() =>
+  documents.connectedSources.map((s) => ({ label: s.label, value: s.source })),
+)
+const descriptor = computed(() =>
+  source.value ? documents.descriptorFor(source.value) : undefined,
+)
+
+/** Documents imported from the currently selected source. */
+const sourceDocs = computed(() =>
+  source.value ? documents.documents.filter((d) => d.source === source.value) : [],
+)
+
+watch(open, (isOpen) => {
+  if (isOpen) {
+    ref_.value = ''
+    source.value = ui.documentImport?.source ?? documents.connectedSources[0]?.source ?? undefined
+    documents.loadDocuments().catch(() => {})
+  }
+})
+
+async function doImport() {
+  const value = ref_.value.trim()
+  if (!value || !source.value) return
+  importing.value = true
+  try {
+    const doc = await documents.importDocument(source.value, value)
+    ref_.value = ''
+    toast.add({ title: `Imported "${doc.title}"`, icon: 'i-lucide-file-down' })
+  } catch (e) {
+    toast.add({
+      title: 'Import failed',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    importing.value = false
+  }
+}
+
+function preview(externalId: string) {
+  if (source.value) ui.openSpawnPreview(source.value, externalId, targetFrameId.value)
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Import from a document source">
+    <template #body>
+      <div v-if="!documents.anyConnected" class="space-y-3 text-center">
+        <UIcon name="i-lucide-plug" class="mx-auto h-8 w-8 text-slate-500" />
+        <p class="text-sm text-slate-400">Connect a document source first.</p>
+        <div class="flex justify-center gap-2">
+          <UButton
+            v-for="s in documents.sources"
+            :key="s.source"
+            color="primary"
+            variant="soft"
+            :icon="s.icon"
+            @click="ui.openDocumentConnect(s.source)"
+          >
+            Connect {{ s.label }}
+          </UButton>
+        </div>
+      </div>
+
+      <div v-else class="space-y-4">
+        <p v-if="targetFrameTitle" class="text-xs text-slate-400">
+          Spawning into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+        </p>
+
+        <UFormField v-if="sourceItems.length > 1" label="Source">
+          <USelect v-model="source" :items="sourceItems" class="w-full" />
+        </UFormField>
+
+        <div class="flex items-end gap-2">
+          <UFormField :label="descriptor?.refLabel ?? 'Page URL or ID'" class="flex-1">
+            <UInput
+              v-model="ref_"
+              :placeholder="descriptor?.refPlaceholder"
+              class="w-full"
+              @keydown.enter="doImport"
+            />
+          </UFormField>
+          <UButton
+            color="primary"
+            icon="i-lucide-file-down"
+            :loading="importing"
+            :disabled="!ref_.trim()"
+            @click="doImport"
+          >
+            Import
+          </UButton>
+        </div>
+
+        <div v-if="sourceDocs.length" class="space-y-2">
+          <h3 class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Imported documents
+          </h3>
+          <div
+            v-for="doc in sourceDocs"
+            :key="`${doc.source}:${doc.externalId}`"
+            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+          >
+            <div class="flex items-start justify-between gap-2">
+              <div class="min-w-0">
+                <a
+                  :href="doc.url"
+                  target="_blank"
+                  rel="noopener"
+                  class="truncate text-sm font-medium text-white hover:underline"
+                >
+                  {{ doc.title }}
+                </a>
+                <p class="mt-0.5 line-clamp-2 text-xs text-slate-500">{{ doc.excerpt }}</p>
+              </div>
+              <UButton
+                color="primary"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-wand-sparkles"
+                @click="preview(doc.externalId)"
+              >
+                Preview &amp; spawn
+              </UButton>
+            </div>
+          </div>
+        </div>
+        <p v-else class="text-center text-xs text-slate-500">No documents imported yet.</p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/DocumentSourceConnectModal.vue

@@ -0,0 +1,127 @@
+<script setup lang="ts">
+// Connect (or disconnect) the workspace to a document source. The form is
+// rendered generically from the source's descriptor (credential fields), so the
+// same modal serves Confluence, Notion and any future source. Secret credentials
+// are write-only — the backend never returns them, so on reload we show
+// "Connected" with empty fields.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const toast = useToast()
+
+const source = computed(() => ui.documentConnect?.source ?? null)
+const descriptor = computed(() =>
+  source.value ? documents.descriptorFor(source.value) : undefined,
+)
+const connection = computed(() =>
+  source.value ? documents.connectionFor(source.value) : undefined,
+)
+const connected = computed(() => connection.value !== undefined)
+
+const open = computed({
+  get: () => ui.documentConnect !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeDocumentConnect()
+  },
+})
+
+/** One value per credential field, reset whenever the modal (re)opens. */
+const values = ref<Record<string, string>>({})
+const saving = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen) values.value = {}
+})
+
+const canSubmit = computed(() => {
+  const fields = descriptor.value?.credentialFields ?? []
+  return fields.length > 0 && fields.every((f) => (values.value[f.key] ?? '').trim())
+})
+
+async function submit() {
+  if (!canSubmit.value || !source.value) return
+  const credentials: Record<string, string> = {}
+  for (const f of descriptor.value!.credentialFields) {
+    credentials[f.key] = values.value[f.key]!.trim()
+  }
+  saving.value = true
+  try {
+    await documents.connect(source.value, credentials)
+    toast.add({
+      title: `${descriptor.value!.label} connected`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    ui.closeDocumentConnect()
+  } catch (e) {
+    toast.add({
+      title: 'Could not connect',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+
+async function disconnect() {
+  if (!source.value) return
+  await documents.disconnect(source.value)
+  toast.add({
+    title: `${descriptor.value?.label ?? 'Source'} disconnected`,
+    icon: 'i-lucide-unplug',
+  })
+  ui.closeDocumentConnect()
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :title="descriptor?.label ?? 'Connect source'">
+    <template #body>
+      <div v-if="descriptor" class="space-y-4">
+        <p class="text-sm text-slate-400">
+          Connect {{ descriptor.label }} to import requirements, RFCs and PRDs, then spawn board
+          structure or attach them to tasks as agent context.
+        </p>
+
+        <div class="space-y-3">
+          <UFormField
+            v-for="field in descriptor.credentialFields"
+            :key="field.key"
+            :label="field.label"
+            :help="field.help"
+          >
+            <UInput
+              v-model="values[field.key]"
+              :type="field.secret ? 'password' : 'text'"
+              :placeholder="field.placeholder"
+              class="w-full"
+            />
+          </UFormField>
+        </div>
+
+        <div class="flex items-center justify-between gap-2 pt-1">
+          <UButton
+            v-if="connected"
+            color="error"
+            variant="ghost"
+            icon="i-lucide-unplug"
+            @click="disconnect"
+          >
+            Disconnect
+          </UButton>
+          <div v-else />
+          <UButton
+            color="primary"
+            icon="i-lucide-plug"
+            :loading="saving"
+            :disabled="!canSubmit"
+            @click="submit"
+          >
+            {{ connected ? 'Update connection' : 'Connect' }}
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/documents/SpawnPreviewModal.vue

@@ -0,0 +1,161 @@
+<script setup lang="ts">
+import type { DocumentBoardPlan } from '~/types/domain'
+
+// Preview the structure an imported document expands into, then spawn it. The
+// plan is fetched fresh on open; a badge makes clear whether an LLM or the
+// deterministic heading parser produced it.
+const ui = useUiStore()
+const documents = useDocumentsStore()
+const board = useBoardStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.spawnPreview !== null,
+  set: (v: boolean) => {
+    if (!v) ui.closeSpawnPreview()
+  },
+})
+
+const targetFrameId = computed(() => ui.spawnPreview?.targetFrameId ?? null)
+const targetFrameTitle = computed(() =>
+  targetFrameId.value ? board.getBlock(targetFrameId.value)?.title : null,
+)
+
+const plan = ref<DocumentBoardPlan | null>(null)
+const loadingPlan = ref(false)
+const spawning = ref(false)
+
+watch(
+  () => ui.spawnPreview?.externalId,
+  async (externalId) => {
+    plan.value = null
+    const preview = ui.spawnPreview
+    if (!externalId || !preview) return
+    loadingPlan.value = true
+    try {
+      plan.value = await documents.plan(preview.source, externalId)
+    } catch (e) {
+      toast.add({
+        title: 'Could not build a plan',
+        description: e instanceof Error ? e.message : String(e),
+        icon: 'i-lucide-triangle-alert',
+        color: 'error',
+      })
+    } finally {
+      loadingPlan.value = false
+    }
+  },
+  { immediate: true },
+)
+
+async function spawn() {
+  const preview = ui.spawnPreview
+  if (!preview) return
+  spawning.value = true
+  try {
+    const result = await documents.spawn(
+      preview.source,
+      preview.externalId,
+      targetFrameId.value ?? undefined,
+    )
+    toast.add({
+      title: 'Structure spawned',
+      description: `${result.frames} frames · ${result.modules} modules · ${result.tasks} tasks`,
+      icon: 'i-lucide-check',
+      color: 'success',
+    })
+    ui.closeSpawnPreview()
+    ui.closeDocumentImport()
+  } catch (e) {
+    toast.add({
+      title: 'Spawn failed',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    spawning.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Preview structure">
+    <template #body>
+      <div class="space-y-4">
+        <div v-if="plan" class="flex items-center justify-between gap-2">
+          <UBadge
+            :color="plan.planner === 'llm' ? 'primary' : 'neutral'"
+            variant="subtle"
+            size="sm"
+          >
+            {{ plan.planner === 'llm' ? 'AI-generated' : 'From headings' }}
+          </UBadge>
+          <span v-if="targetFrameTitle" class="text-xs text-slate-400">
+            into <span class="font-medium text-slate-200">{{ targetFrameTitle }}</span>
+          </span>
+          <span v-else class="text-xs text-slate-400">as new top-level frames</span>
+        </div>
+
+        <div v-if="loadingPlan" class="flex items-center gap-2 text-sm text-slate-400">
+          <UIcon name="i-lucide-loader" class="h-4 w-4 animate-spin" /> Building plan…
+        </div>
+
+        <div v-else-if="plan" class="max-h-80 space-y-3 overflow-y-auto pr-1">
+          <div
+            v-for="(frame, fi) in plan.frames"
+            :key="fi"
+            class="rounded-lg border border-slate-800 bg-slate-900/60 p-3"
+          >
+            <div class="flex items-center gap-2">
+              <UIcon name="i-lucide-box" class="h-4 w-4 text-indigo-400" />
+              <span class="text-sm font-semibold text-white">{{ frame.title }}</span>
+              <UBadge variant="subtle" size="sm" color="neutral">{{ frame.type }}</UBadge>
+            </div>
+
+            <ul v-if="frame.tasks.length" class="mt-2 space-y-1 pl-6">
+              <li
+                v-for="(task, ti) in frame.tasks"
+                :key="`t-${ti}`"
+                class="flex items-center gap-1.5 text-xs text-slate-300"
+              >
+                <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                {{ task.title }}
+              </li>
+            </ul>
+
+            <div v-for="(mod, mi) in frame.modules" :key="`m-${mi}`" class="mt-2 pl-4">
+              <div class="flex items-center gap-1.5 text-xs font-medium text-slate-200">
+                <UIcon name="i-lucide-folder" class="h-3.5 w-3.5 text-amber-400" />
+                {{ mod.name }}
+              </div>
+              <ul class="mt-1 space-y-1 pl-5">
+                <li
+                  v-for="(task, ti) in mod.tasks"
+                  :key="`mt-${ti}`"
+                  class="flex items-center gap-1.5 text-xs text-slate-300"
+                >
+                  <UIcon name="i-lucide-square-check-big" class="h-3 w-3 text-slate-500" />
+                  {{ task.title }}
+                </li>
+              </ul>
+            </div>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-2 pt-1">
+          <UButton color="neutral" variant="ghost" @click="ui.closeSpawnPreview()">Cancel</UButton>
+          <UButton
+            color="primary"
+            icon="i-lucide-wand-sparkles"
+            :loading="spawning"
+            :disabled="!plan || loadingPlan"
+            @click="spawn"
+          >
+            Spawn onto board
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>