@cat-factory/app 0.9.0 → 0.10.0

package/app/components/board/AddTaskModal.vue

@@ -4,13 +4,13 @@
 // task lands in `planned` state; it is never launched here. The user starts a
 // pipeline on it explicitly (and can keep editing it until they do).
 //
-// When the document/task integrations are available, the user can also attach
-// external context up front via <ContextPicker>: search a connected source
-// (Confluence / Notion / GitHub repo docs / Jira / GitHub issues) by title or
-// content, paste a page/issue URL, or pick something already imported. Linking
-// needs the block id, so we create the task first, then import-and-link the
-// chosen items to it before closing — the same context the agents see for every
-// step of the run (see the backend's linkedContextSection).
+// The form also shows ungated "Context documents" / "Context issues" sections
+// (mirroring the task inspector): pick already-imported docs/issues — or open the
+// import flow — to attach as agent context. When the relevant integration isn't
+// connected the Attach button is disabled with a hint. Linking needs the block id,
+// so chosen items are staged locally and import-and-linked once the task is created
+// (see useContextLinking) — the same context the agents see for every step of the run.
+import type { DropdownMenuItem } from '@nuxt/ui'
 import type { CreateTaskType, TaskTypeFields } from '~/types/domain'
 
 const ui = useUiStore()
@@ -179,13 +179,83 @@ function setConfig(id: string, value: string) {
   agentConfigValues.value = { ...agentConfigValues.value, [id]: value }
 }
 
-// Context the user chose to attach to the new task (search hits, pasted URLs,
-// already-imported items), collected by <ContextPicker> and committed on add.
+// Context the user chose to attach to the new task (already-imported items + the
+// import flow), committed once the block exists (see add() → linkPending).
 const pendingContext = ref<PendingContext[]>([])
 
-// The picker is offered whenever either integration is configured (even with
-// nothing imported yet — you can search/paste a URL to attach the first item).
-const showContext = computed(() => documents.available || tasks.available)
+// The Context documents / Context issues sections mirror the task inspector but are
+// always shown (ungated): when the relevant integration isn't connected the Attach
+// button is disabled with a tooltip rather than the section being hidden.
+const docsConnected = computed(() => documents.available && documents.anyConnected)
+const issuesConnected = computed(() => tasks.available && tasks.anyConnected)
+const pendingDocs = computed(() => pendingContext.value.filter((c) => c.kind === 'document'))
+const pendingIssues = computed(() => pendingContext.value.filter((c) => c.kind === 'task'))
+
+function addPending(item: PendingContext) {
+  if (pendingContext.value.some((c) => contextKey(c) === contextKey(item))) return
+  pendingContext.value = [...pendingContext.value, item]
+}
+function removePending(item: PendingContext) {
+  pendingContext.value = pendingContext.value.filter((c) => contextKey(c) !== contextKey(item))
+}
+
+// Attach menus: already-imported items not yet chosen, plus the import entry — the
+// same affordances the inspector offers. Picking one stages it locally (it links
+// after the task is created).
+const docAttachMenu = computed<DropdownMenuItem[][]>(() => {
+  const chosen = new Set(pendingContext.value.map(contextKey))
+  const items: DropdownMenuItem[] = documents.documents
+    .filter(
+      (d) =>
+        !chosen.has(contextKey({ kind: 'document', source: d.source, externalId: d.externalId })),
+    )
+    .map((d) => ({
+      label: d.title,
+      icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
+      onSelect: () =>
+        addPending({
+          kind: 'document',
+          source: d.source,
+          externalId: d.externalId,
+          title: d.title,
+          icon: documents.descriptorFor(d.source)?.icon ?? 'i-lucide-file-text',
+          needsImport: false,
+        }),
+    }))
+  items.push({
+    label: 'Import a page…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openDocumentImport(null),
+  })
+  return [items]
+})
+
+const issueAttachMenu = computed<DropdownMenuItem[][]>(() => {
+  const chosen = new Set(pendingContext.value.map(contextKey))
+  const items: DropdownMenuItem[] = tasks.tasks
+    .filter(
+      (t) => !chosen.has(contextKey({ kind: 'task', source: t.source, externalId: t.externalId })),
+    )
+    .map((t) => ({
+      label: `${t.externalId} · ${t.title}`,
+      icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
+      onSelect: () =>
+        addPending({
+          kind: 'task',
+          source: t.source,
+          externalId: t.externalId,
+          title: `${t.externalId} · ${t.title}`,
+          icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
+          needsImport: false,
+        }),
+    }))
+  items.push({
+    label: 'Import an issue…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openTaskImport(),
+  })
+  return [items]
+})
 
 // Reset the form whenever the modal opens for a (new) container, and refresh the
 // imported docs/issues so the quick-pick list is current.
@@ -450,16 +520,134 @@ async function add() {
             </div>
           </div>
 
-          <div v-if="showContext" class="space-y-2">
-            <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-              Extra context (optional)
-            </span>
-
-            <ContextPicker v-model="pendingContext" />
+          <!-- Context documents (ungated; Attach disabled until a source is connected). -->
+          <div 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
+                v-if="docsConnected"
+                :items="docAttachMenu"
+                :content="{ side: 'bottom', align: 'end' }"
+              >
+                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">
+                  Attach
+                </UButton>
+              </UDropdownMenu>
+              <UButton
+                v-else
+                color="neutral"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-plus"
+                disabled
+                :title="
+                  documents.available
+                    ? 'Connect a document source first (Integrations)'
+                    : 'Enable the documents integration first'
+                "
+              >
+                Attach
+              </UButton>
+            </div>
+            <div v-if="pendingDocs.length" class="space-y-1">
+              <div
+                v-for="item in pendingDocs"
+                :key="contextKey(item)"
+                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"
+              >
+                <UIcon
+                  :name="item.icon ?? 'i-lucide-file-text'"
+                  class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+                />
+                <span class="truncate">{{ item.title }}</span>
+                <UBadge
+                  v-if="item.needsImport"
+                  color="neutral"
+                  variant="soft"
+                  size="xs"
+                  class="ml-1 shrink-0"
+                >
+                  imports on add
+                </UBadge>
+                <button
+                  type="button"
+                  class="ml-auto shrink-0 text-slate-400 hover:text-slate-200"
+                  @click="removePending(item)"
+                >
+                  <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </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>
 
-            <p class="text-[11px] text-slate-500">
-              Search a connected source, paste a page/issue URL, or pick something already imported
-              — it's fed to every agent step as context.
+          <!-- Context issues (ungated; Attach disabled until a tracker is connected). -->
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+                Context issues
+              </span>
+              <UDropdownMenu
+                v-if="issuesConnected"
+                :items="issueAttachMenu"
+                :content="{ side: 'bottom', align: 'end' }"
+              >
+                <UButton color="neutral" variant="soft" size="xs" icon="i-lucide-plus">
+                  Attach
+                </UButton>
+              </UDropdownMenu>
+              <UButton
+                v-else
+                color="neutral"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-plus"
+                disabled
+                :title="
+                  tasks.available
+                    ? 'Connect an issue tracker first (Integrations)'
+                    : 'Enable the issue-tracker integration first'
+                "
+              >
+                Attach
+              </UButton>
+            </div>
+            <div v-if="pendingIssues.length" class="space-y-1">
+              <div
+                v-for="item in pendingIssues"
+                :key="contextKey(item)"
+                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"
+              >
+                <UIcon
+                  :name="item.icon ?? 'i-lucide-square-check'"
+                  class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+                />
+                <span class="truncate">{{ item.title }}</span>
+                <UBadge
+                  v-if="item.needsImport"
+                  color="neutral"
+                  variant="soft"
+                  size="xs"
+                  class="ml-1 shrink-0"
+                >
+                  imports on add
+                </UBadge>
+                <button
+                  type="button"
+                  class="ml-auto shrink-0 text-slate-400 hover:text-slate-200"
+                  @click="removePending(item)"
+                >
+                  <UIcon name="i-lucide-x" class="h-3.5 w-3.5" />
+                </button>
+              </div>
+            </div>
+            <p v-else class="text-[11px] text-slate-500">
+              Attach a tracker issue so agents see its description and comments while implementing
+              this task.
             </p>
           </div>
 

package/app/components/board/nodes/BlockNode.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Block, BlockStatus } from '~/types/domain'
-import { BLOCK_TYPE_META, STATUS_META } from '~/utils/catalog'
+import { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import DecisionBadge from './DecisionBadge.vue'
 import DraggableTask from './DraggableTask.vue'
 import ModuleFrame from './ModuleFrame.vue'
@@ -24,7 +24,7 @@ const { lod } = useSemanticZoom()
 const block = computed<Block | undefined>(() => board.getBlock(props.id))
 /** This service frame is mounted on more than one board in the org. */
 const isShared = computed(() => services.isSharedFrame(props.id))
-const typeMeta = computed(() => (block.value ? BLOCK_TYPE_META[block.value.type] : null))
+const typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
 // ---- this service's children (tasks + modules) -----------------------------
 const directTasks = computed(() => board.tasksOf(props.id))

package/app/components/focus/BlockFocusView.vue

@@ -1,7 +1,7 @@
 <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 { blockTypeMeta, STATUS_META } from '~/utils/catalog'
 import PipelineProgress from '~/components/pipeline/PipelineProgress.vue'
 
 const board = useBoardStore()
@@ -18,7 +18,7 @@ const block = computed<Block | 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 typeMeta = computed(() => (block.value ? blockTypeMeta(block.value.type) : null))
 
 const deps = computed(() =>
   (block.value?.dependsOn ?? []).map((id) => board.getBlock(id)).filter((b): b is Block => !!b),

package/app/components/layout/CommandBar.vue

@@ -1,11 +1,10 @@
 <script setup lang="ts">
 // The command bar (⌘K / Ctrl+K) — a searchable launcher for every action that
-// used to live as a button or draggable in the left panel. It is the primary way
-// to create blocks and pipelines now that the draggable palettes are gone, and a
-// fast path to every integration / settings surface. Commands are assembled from
-// the live stores so only available actions (connected integrations, etc.) show.
-import type { BlockType } from '~/types/domain'
-import { BLOCK_TYPE_META } from '~/utils/catalog'
+// used to live as a button or draggable in the left panel. It is a fast path to
+// pipelines, repositories, every integration and the settings surfaces. (Raw
+// block creation is gone — services come from Bootstrap / Add-from-repo and tasks
+// from the add-task flow.) Commands are assembled from the live stores so only
+// available actions (connected integrations, etc.) show.
 
 interface Command {
   id: string
@@ -18,7 +17,6 @@ interface Command {
 }
 
 const ui = useUiStore()
-const board = useBoardStore()
 const github = useGitHubStore()
 const slack = useSlackStore()
 const documents = useDocumentsStore()
@@ -33,19 +31,6 @@ const open = computed({
 const query = ref('')
 const activeIndex = ref(0)
 
-// New top-level blocks are created without a drop position now, so stagger each
-// one slightly off the canvas origin to keep them from stacking exactly.
-let spawnCount = 0
-function spawnPosition() {
-  const offset = (spawnCount++ % 6) * 28
-  return { x: 160 + offset, y: 160 + offset }
-}
-
-async function addBlock(type: BlockType) {
-  const block = await board.addBlock(type, spawnPosition())
-  ui.select(block.id)
-}
-
 const commands = computed<Command[]>(() => {
   const list: Command[] = []
 
@@ -58,17 +43,6 @@ const commands = computed<Command[]>(() => {
     keywords: 'pipeline agents chain',
     run: () => ui.openBuilder(),
   })
-  for (const type of Object.keys(BLOCK_TYPE_META) as BlockType[]) {
-    const meta = BLOCK_TYPE_META[type]
-    list.push({
-      id: `add-block-${type}`,
-      label: `Add ${meta.label} block`,
-      group: 'Create',
-      icon: meta.icon,
-      keywords: 'block frame service create new',
-      run: () => addBlock(type),
-    })
-  }
 
   // ---- Repositories -------------------------------------------------------
   if (github.available) {
@@ -173,7 +147,7 @@ const commands = computed<Command[]>(() => {
     group: 'Workspace',
     icon: 'i-lucide-git-merge',
     keywords: 'merge policy preset auto-merge ci',
-    run: () => ui.openMergeThresholds(),
+    run: () => ui.openWorkspaceSettings('merge'),
   })
   list.push({
     id: 'workspace-settings',
@@ -197,7 +171,7 @@ const commands = computed<Command[]>(() => {
     group: 'Workspace',
     icon: 'i-lucide-book-open-check',
     keywords: 'fragment best practice guideline service default code-aware',
-    run: () => ui.openServiceFragmentDefaults(),
+    run: () => ui.openWorkspaceSettings('fragments'),
   })
   list.push({
     id: 'local-models',

package/app/components/layout/IntegrationsHub.vue

@@ -0,0 +1,230 @@
+<script setup lang="ts">
+// The Integrations hub: a single modal that lists every external system the
+// workspace can enable or link in — replacing the per-integration buttons that
+// used to clutter the left navbar. Each row reuses the existing per-integration
+// panel handlers on the `ui` store (so the integrations themselves are unchanged);
+// opening one closes the hub and reveals that integration's own panel/modal.
+//
+// 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 github = useGitHubStore()
+const slack = useSlackStore()
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const releaseHealth = useReleaseHealthStore()
+
+// The observability connection status drives the hub's connected badge. Load it
+// lazily when the hub opens (the secret-less connection view is cheap).
+watch(
+  () => ui.integrationsOpen,
+  (isOpen) => {
+    if (isOpen) void releaseHealth.ensureLoaded().catch(() => {})
+  },
+)
+
+const open = computed({
+  get: () => ui.integrationsOpen,
+  set: (v: boolean) => (v ? ui.openIntegrations() : ui.closeIntegrations()),
+})
+
+// One integration row. `status` is the connected-state line shown under the label
+// (an account/team name, "Connected", or a hint); `connected` drives the badge.
+interface IntegrationItem {
+  key: string
+  icon: string
+  label: string
+  description: string
+  status?: string
+  connected?: boolean
+  onClick: () => void
+}
+
+interface IntegrationGroup {
+  title: string
+  items: IntegrationItem[]
+}
+
+// Run an integration's open handler, then dismiss the hub so its panel takes over.
+function go(fn: () => void) {
+  fn()
+  ui.closeIntegrations()
+}
+
+const groups = computed<IntegrationGroup[]>(() => {
+  const out: IntegrationGroup[] = []
+
+  // --- Source control --------------------------------------------------------
+  const code: IntegrationItem[] = []
+  if (github.available) {
+    code.push({
+      key: 'github',
+      icon: 'i-lucide-github',
+      label: 'GitHub',
+      description: 'Connect the workspace’s GitHub App, browse repos, PRs and issues.',
+      status: github.connected ? github.connection?.accountLogin : undefined,
+      connected: github.connected,
+      onClick: () => go(ui.openGitHub),
+    })
+  }
+  if (code.length) out.push({ title: 'Source control', items: code })
+
+  // --- Communication ---------------------------------------------------------
+  const comms: IntegrationItem[] = []
+  if (slack.available) {
+    comms.push({
+      key: 'slack',
+      icon: 'i-lucide-slack',
+      label: 'Slack',
+      description: 'Route notifications to your team’s Slack workspace.',
+      status: slack.connected ? slack.connection?.teamName : undefined,
+      connected: slack.connected,
+      onClick: () => go(ui.openSlack),
+    })
+  }
+  if (comms.length) out.push({ title: 'Communication', items: comms })
+
+  // --- Documents (dynamic sources: Confluence / Notion / GitHub) -------------
+  if (documents.available && documents.sources.length) {
+    const docs: IntegrationItem[] = documents.sources.map((src) => ({
+      key: `doc:${src.source}`,
+      icon: src.icon,
+      label: src.label,
+      description: `Link ${src.label} as a document source for requirements context.`,
+      status: documents.isConnected(src.source) ? 'Connected' : undefined,
+      connected: documents.isConnected(src.source),
+      onClick: () => go(() => ui.openDocumentConnect(src.source)),
+    }))
+    if (documents.anyConnected) {
+      docs.push({
+        key: 'doc:import',
+        icon: 'i-lucide-file-down',
+        label: 'Import & spawn',
+        description: 'Pull documents from a connected source and spawn structure.',
+        onClick: () => go(() => ui.openDocumentImport(null)),
+      })
+    }
+    out.push({ title: 'Documents', items: docs })
+  }
+
+  // --- Task trackers (dynamic sources: Jira / GitHub) ------------------------
+  if (tasks.available && tasks.sources.length) {
+    const trackers: IntegrationItem[] = tasks.sources.map((src) => ({
+      key: `task:${src.source}`,
+      icon: src.icon,
+      label: src.label,
+      description: `Link ${src.label} to import and reference tracker issues.`,
+      status: tasks.isConnected(src.source) ? 'Connected' : undefined,
+      connected: tasks.isConnected(src.source),
+      onClick: () => go(() => ui.openTaskConnect(src.source)),
+    }))
+    if (tasks.anyConnected) {
+      trackers.push({
+        key: 'task:import',
+        icon: 'i-lucide-file-down',
+        label: 'Import issues',
+        description: 'Pull issues from a connected tracker onto the board.',
+        onClick: () => go(() => ui.openTaskImport(null)),
+      })
+    }
+    trackers.push({
+      key: 'task:writeback',
+      icon: 'i-lucide-message-square-reply',
+      label: 'Issue tracker writeback',
+      description: 'Comment on the PR and close the linked issue on merge.',
+      onClick: () => go(() => ui.openWorkspaceSettings('writeback')),
+    })
+    out.push({ title: 'Task trackers', items: trackers })
+  }
+
+  // --- Observability ---------------------------------------------------------
+  // Gated like every other backend-toggleable system: hidden until a probe confirms
+  // the observability module is enabled (`available === true`), so a disabled backend
+  // doesn't show a dead "Connect" row that only 503s.
+  if (releaseHealth.available) {
+    out.push({
+      title: 'Observability',
+      items: [
+        {
+          key: 'observability',
+          icon: 'i-lucide-activity',
+          label: 'Post-release health',
+          description: 'Watch monitors and SLOs after a release ships (Datadog).',
+          status: releaseHealth.connection.connected ? 'Connected' : undefined,
+          connected: releaseHealth.connection.connected,
+          onClick: () => go(ui.openObservabilityConnection),
+        },
+      ],
+    })
+  }
+
+  // --- Models & providers ----------------------------------------------------
+  out.push({
+    title: 'Models & providers',
+    items: [
+      {
+        key: 'vendors',
+        icon: 'i-lucide-key-round',
+        label: 'Vendors & keys',
+        description: 'LLM vendor subscriptions and provider API keys.',
+        onClick: () => go(ui.openVendorCredentials),
+      },
+      {
+        key: 'local-runners',
+        icon: 'i-lucide-server',
+        label: 'My local runners',
+        description: 'Your own-machine model runners (Ollama, LM Studio, vLLM…).',
+        onClick: () => go(ui.openLocalModels),
+      },
+      {
+        key: 'openrouter',
+        icon: 'i-lucide-waypoints',
+        label: 'OpenRouter models',
+        description: 'Browse and enable models from the OpenRouter gateway.',
+        onClick: () => go(ui.openOpenRouter),
+      },
+    ],
+  })
+
+  return out
+})
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Integrations" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <p class="text-xs text-slate-400">
+          Connect and manage the external systems this workspace can link in.
+        </p>
+
+        <section v-for="group in groups" :key="group.title">
+          <h3 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            {{ group.title }}
+          </h3>
+          <div class="space-y-1.5">
+            <button
+              v-for="item in group.items"
+              :key="item.key"
+              type="button"
+              class="flex w-full items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 px-3 py-2.5 text-left transition hover:border-slate-500 hover:bg-slate-800"
+              @click="item.onClick()"
+            >
+              <UIcon :name="item.icon" class="h-5 w-5 shrink-0 text-slate-300" />
+              <div class="min-w-0 flex-1">
+                <div class="flex items-center gap-2">
+                  <span class="truncate text-sm font-medium text-slate-100">{{ item.label }}</span>
+                  <UBadge v-if="item.connected" color="success" variant="subtle" size="sm">
+                    {{ item.status || 'Connected' }}
+                  </UBadge>
+                </div>
+                <p class="truncate text-xs text-slate-400">{{ item.description }}</p>
+              </div>
+              <UIcon name="i-lucide-chevron-right" class="h-4 w-4 shrink-0 text-slate-500" />
+            </button>
+          </div>
+        </section>
+      </div>
+    </template>
+  </UModal>
+</template>