@cat-factory/app 0.6.0

package/app/components/settings/ServiceFragmentDefaultsPanel.vue

@@ -0,0 +1,124 @@
+<script setup lang="ts">
+// Workspace settings: the default best-practice fragments NEW services inherit. The
+// selection is drawn from the universal fragment pool (built-in + deployment-registered)
+// served by GET /prompt-fragments. Changing it does not retroactively change existing
+// services — each owns its selection from creation. Persisted via the
+// serviceFragmentDefaults store (the backend replaces the whole list on each change).
+import { ref } from 'vue'
+
+const ui = useUiStore()
+const fragments = useFragmentsStore()
+const defaults = useServiceFragmentDefaultsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.serviceFragmentDefaultsOpen,
+  set: (v: boolean) => (v ? ui.openServiceFragmentDefaults() : ui.closeServiceFragmentDefaults()),
+})
+
+const busy = ref(false)
+
+watch(open, (isOpen) => {
+  if (isOpen) void fragments.ensureLoaded()
+})
+
+const selected = computed(() =>
+  defaults.fragmentIds
+    .map((id) => fragments.getFragment(id))
+    .filter((f): f is NonNullable<typeof f> => !!f),
+)
+
+// Pool fragments not already in the default set, grouped by category.
+const menu = computed(() => {
+  const chosen = new Set(defaults.fragmentIds)
+  const groups = new Map<string, { label: string; onSelect: () => void }[]>()
+  for (const f of fragments.fragments) {
+    if (chosen.has(f.id)) continue
+    const items = groups.get(f.category) ?? []
+    items.push({ label: f.title, onSelect: () => add(f.id) })
+    groups.set(f.category, items)
+  }
+  return [...groups.values()]
+})
+
+async function save(ids: string[]) {
+  busy.value = true
+  try {
+    await defaults.set(ids)
+  } catch (e) {
+    toast.add({
+      title: 'Could not save default fragments',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    busy.value = false
+  }
+}
+
+function add(id: string) {
+  if (defaults.fragmentIds.includes(id)) return
+  void save([...defaults.fragmentIds, id])
+}
+
+function remove(id: string) {
+  void save(defaults.fragmentIds.filter((x) => x !== id))
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Default service best practices" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">
+          Pick the best-practice fragments every <span class="text-slate-300">new</span> service
+          starts with. Their guidance is folded into the prompt of every
+          <span class="text-slate-300">code-aware</span> agent (coder, reviewer, architect, fixers)
+          on the service's tasks. You can refine the set per service in its inspector; changing this
+          default does not affect services that already exist.
+        </p>
+
+        <div class="flex items-center justify-between">
+          <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+            Default fragments
+          </span>
+          <UDropdownMenu
+            v-if="menu.length"
+            :items="menu"
+            :ui="{ content: 'max-h-72 overflow-y-auto' }"
+          >
+            <UButton
+              size="xs"
+              variant="ghost"
+              color="neutral"
+              icon="i-lucide-plus"
+              trailing-icon="i-lucide-chevron-down"
+              :loading="busy"
+            >
+              Add fragment
+            </UButton>
+          </UDropdownMenu>
+        </div>
+
+        <div v-if="selected.length" class="flex flex-wrap gap-1">
+          <UBadge
+            v-for="f in selected"
+            :key="f.id"
+            color="primary"
+            variant="subtle"
+            size="sm"
+            class="cursor-pointer"
+            :title="f.summary"
+            @click="remove(f.id)"
+          >
+            {{ f.title }}<UIcon name="i-lucide-x" class="ml-0.5 h-3 w-3" />
+          </UBadge>
+        </div>
+        <p v-else class="text-[11px] text-slate-500">
+          None — new services start with no service-level fragments.
+        </p>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/settings/WorkspaceSettingsPanel.vue

@@ -0,0 +1,142 @@
+<script setup lang="ts">
+// Workspace settings: the run-timing escalation threshold and the per-service
+// running-task limit policy.
+//   - waitingEscalationMinutes — runs never time out waiting for a human; after this
+//     long their notification escalates yellow → red ("Overdue") in the inbox.
+//   - task limit — cap how many tasks may run concurrently under one service, either
+//     as a single shared bucket across all types or one bucket per task type.
+import { reactive, ref, watch } from 'vue'
+import type { CreateTaskType, TaskLimitMode } from '~/types/domain'
+
+const ui = useUiStore()
+const store = useWorkspaceSettingsStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.workspaceSettingsOpen,
+  set: (v: boolean) => (v ? ui.openWorkspaceSettings() : ui.closeWorkspaceSettings()),
+})
+
+const TASK_TYPES: CreateTaskType[] = ['feature', 'bug', 'document', 'spike']
+const MODES: { value: TaskLimitMode; label: string }[] = [
+  { value: 'off', label: 'No limit' },
+  { value: 'shared', label: 'Shared across all types' },
+  { value: 'per_type', label: 'Per task type' },
+]
+
+// Local editable copy, kept in sync with the store's settings.
+const draft = reactive({
+  waitingEscalationMinutes: 120,
+  taskLimitMode: 'off' as TaskLimitMode,
+  taskLimitShared: 5 as number,
+  perType: {} as Record<CreateTaskType, number>,
+})
+
+function hydrate() {
+  const s = store.settings
+  draft.waitingEscalationMinutes = s.waitingEscalationMinutes
+  draft.taskLimitMode = s.taskLimitMode
+  draft.taskLimitShared = s.taskLimitShared ?? 5
+  const pt = s.taskLimitPerType ?? {}
+  for (const t of TASK_TYPES) draft.perType[t] = pt[t] ?? 3
+}
+
+watch(() => store.settings, hydrate, { immediate: true, deep: true })
+
+const saving = ref(false)
+
+async function save() {
+  saving.value = true
+  try {
+    await store.update({
+      waitingEscalationMinutes: draft.waitingEscalationMinutes,
+      taskLimitMode: draft.taskLimitMode,
+      taskLimitShared: draft.taskLimitMode === 'shared' ? draft.taskLimitShared : null,
+      taskLimitPerType:
+        draft.taskLimitMode === 'per_type'
+          ? TASK_TYPES.reduce(
+              (acc, t) => {
+                acc[t] = draft.perType[t]
+                return acc
+              },
+              {} as Record<CreateTaskType, number>,
+            )
+          : null,
+    })
+    toast.add({ title: 'Settings saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not save settings',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    saving.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Workspace settings" :ui="{ content: 'max-w-xl' }">
+    <template #body>
+      <div class="space-y-6">
+        <!-- Run-timing escalation -->
+        <section class="space-y-2">
+          <h3 class="text-sm font-semibold text-slate-200">Waiting for a human</h3>
+          <p class="text-[11px] text-slate-400">
+            A run parked on a human decision (a review, an approval, a merge) waits as long as it
+            needs — it is never cancelled. After this many minutes its notification turns red and is
+            flagged <span class="text-error-400">Overdue</span> in the inbox.
+          </p>
+          <label class="block w-48">
+            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+              Escalate after (minutes)
+            </span>
+            <UInput
+              v-model.number="draft.waitingEscalationMinutes"
+              type="number"
+              :min="1"
+              size="sm"
+            />
+          </label>
+        </section>
+
+        <!-- Per-service running-task limit -->
+        <section class="space-y-2">
+          <h3 class="text-sm font-semibold text-slate-200">Running tasks per service</h3>
+          <p class="text-[11px] text-slate-400">
+            Cap how many tasks may run at once under one service. Starting a task over the limit is
+            refused with a clear message until a running task finishes.
+          </p>
+          <label class="block w-64">
+            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">Mode</span>
+            <USelect v-model="draft.taskLimitMode" :items="MODES" value-key="value" size="sm" />
+          </label>
+
+          <label v-if="draft.taskLimitMode === 'shared'" class="block w-48">
+            <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+              Max running tasks
+            </span>
+            <UInput v-model.number="draft.taskLimitShared" type="number" :min="1" size="sm" />
+          </label>
+
+          <div v-else-if="draft.taskLimitMode === 'per_type'" class="grid grid-cols-2 gap-3">
+            <label v-for="t in TASK_TYPES" :key="t" class="block">
+              <span class="mb-1 block text-[10px] uppercase tracking-wide text-slate-500">
+                Max {{ t }} tasks
+              </span>
+              <UInput v-model.number="draft.perType[t]" type="number" :min="1" size="sm" />
+            </label>
+          </div>
+        </section>
+
+        <div class="flex justify-end">
+          <UButton color="primary" icon="i-lucide-save" size="sm" :loading="saving" @click="save">
+            Save
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/slack/SlackPanel.vue

@@ -0,0 +1,299 @@
+<script setup lang="ts">
+// Slack integration panel. Slack is an extra delivery transport for the existing
+// notifications (merge_review / pipeline_complete / ci_failed). Three sections:
+//   - Connection (per-account): "Add to Slack" (OAuth) or paste a bot token.
+//   - Routing (per-workspace): per-type enable + channel.
+//   - Mentions (per-account): toggle + GitHub-user-id → Slack-member-id map.
+import { computed, reactive, ref, watch } from 'vue'
+import type { NotificationType } from '~/types/notifications'
+import type { SlackMemberMappingEntry, SlackMemberRole, SlackRoute } from '~/types/slack'
+
+const ui = useUiStore()
+const slack = useSlackStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.slackOpen,
+  set: (v: boolean) => (v ? ui.openSlack() : ui.closeSlack()),
+})
+
+const ROUTABLE: { type: NotificationType; label: string }[] = [
+  { type: 'merge_review', label: 'Merge review' },
+  { type: 'pipeline_complete', label: 'Pipeline complete' },
+  { type: 'ci_failed', label: 'CI failed' },
+  { type: 'test_failed', label: 'Tests failed' },
+  { type: 'requirement_review', label: 'Requirement review' },
+  { type: 'clarity_review', label: 'Clarity review' },
+  { type: 'release_regression', label: 'Release regression' },
+]
+
+/** Notification-role options for a mapped member (drives who gets @-mentioned). */
+const ROLE_OPTIONS: SlackMemberRole[] = ['engineering', 'product']
+
+// Local editable copies, synced from the store on load.
+const routes = reactive<Record<NotificationType, SlackRoute>>({
+  merge_review: { enabled: false, channel: '' },
+  pipeline_complete: { enabled: false, channel: '' },
+  ci_failed: { enabled: false, channel: '' },
+  test_failed: { enabled: false, channel: '' },
+  requirement_review: { enabled: false, channel: '' },
+  clarity_review: { enabled: false, channel: '' },
+  release_regression: { enabled: false, channel: '' },
+  // In-app only (not in ROUTABLE), but the map is exhaustive over the type.
+  decision_required: { enabled: false, channel: '' },
+})
+const mentionsEnabled = ref(false)
+const mapping = ref<SlackMemberMappingEntry[]>([])
+const tokenInput = ref('')
+const busy = ref(false)
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description: e instanceof Error ? e.message : String(e),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+// Load everything the panel needs whenever it opens and Slack is connected.
+watch(
+  () => open.value,
+  async (isOpen) => {
+    if (!isOpen || !slack.connected) return
+    try {
+      await Promise.all([slack.loadSettings(), slack.loadMemberMapping(), slack.loadChannels()])
+      for (const { type } of ROUTABLE) {
+        routes[type] = slack.settings?.routes[type] ?? { enabled: false, channel: '' }
+      }
+      mentionsEnabled.value = slack.settings?.mentionsEnabled ?? false
+      mapping.value = slack.memberMapping.map((e) => ({ role: 'engineering', ...e }))
+    } catch (e) {
+      notifyError('Could not load Slack settings', e)
+    }
+  },
+)
+
+async function connectViaOAuth() {
+  try {
+    window.location.href = await slack.installUrl()
+  } catch (e) {
+    notifyError('Could not start Slack OAuth', e)
+  }
+}
+
+async function connectWithToken() {
+  if (!tokenInput.value.trim()) return
+  try {
+    await slack.connectWithToken(tokenInput.value.trim())
+    tokenInput.value = ''
+    toast.add({ title: 'Slack connected', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not connect Slack', e)
+  }
+}
+
+async function disconnect() {
+  try {
+    await slack.disconnect()
+  } catch (e) {
+    notifyError('Could not disconnect Slack', e)
+  }
+}
+
+async function saveRouting() {
+  busy.value = true
+  try {
+    await slack.updateSettings({
+      routes: { ...routes },
+      mentionsEnabled: mentionsEnabled.value,
+    })
+    toast.add({ title: 'Routing saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not save routing', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+function addMapping() {
+  mapping.value.push({ userId: '', slackUserId: '', role: 'engineering' })
+}
+function removeMapping(index: number) {
+  mapping.value.splice(index, 1)
+}
+async function saveMapping() {
+  busy.value = true
+  try {
+    const entries = mapping.value.filter((e) => e.userId.trim() && e.slackUserId.trim())
+    await slack.updateMemberMapping(entries)
+    mapping.value = slack.memberMapping.map((e) => ({ ...e }))
+    toast.add({ title: 'Member map saved', icon: 'i-lucide-check', color: 'success' })
+  } catch (e) {
+    notifyError('Could not save member map', e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Slack notifications" :ui="{ content: 'max-w-2xl' }">
+    <template #body>
+      <div class="space-y-5">
+        <p class="text-xs text-slate-400">
+          Post board notifications (merge reviews, pipeline completions, CI failures) to Slack. The
+          connection is shared across the account; routing is per board.
+        </p>
+
+        <!-- not connected: connect UI -->
+        <div v-if="!slack.connected" class="space-y-3 rounded-lg border border-slate-700 p-3">
+          <UButton
+            v-if="slack.oauthEnabled"
+            color="primary"
+            icon="i-lucide-slack"
+            @click="connectViaOAuth"
+          >
+            Add to Slack
+          </UButton>
+          <div class="space-y-1">
+            <span class="block text-[10px] uppercase tracking-wide text-slate-500">
+              …or paste a bot token (xoxb-…)
+            </span>
+            <div class="flex gap-2">
+              <UInput
+                v-model="tokenInput"
+                size="sm"
+                class="flex-1"
+                type="password"
+                placeholder="xoxb-…"
+              />
+              <UButton
+                color="primary"
+                variant="soft"
+                size="sm"
+                :loading="slack.connecting"
+                :disabled="!tokenInput.trim()"
+                @click="connectWithToken"
+              >
+                Connect
+              </UButton>
+            </div>
+          </div>
+        </div>
+
+        <!-- connected -->
+        <template v-else>
+          <div
+            class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+          >
+            <UIcon name="i-lucide-slack" class="text-emerald-400" />
+            <span class="flex-1 text-sm text-slate-200">
+              Connected to <span class="font-semibold">{{ slack.connection?.teamName }}</span>
+            </span>
+            <UButton
+              color="error"
+              variant="ghost"
+              size="xs"
+              icon="i-lucide-unplug"
+              @click="disconnect"
+            >
+              Disconnect
+            </UButton>
+          </div>
+
+          <!-- routing -->
+          <div class="space-y-3">
+            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">Routing</p>
+            <div
+              v-for="row in ROUTABLE"
+              :key="row.type"
+              class="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-2"
+            >
+              <USwitch v-model="routes[row.type]!.enabled" size="sm" />
+              <span class="w-32 text-sm text-slate-300">{{ row.label }}</span>
+              <UInput
+                v-model="routes[row.type]!.channel"
+                size="sm"
+                class="flex-1"
+                placeholder="#channel or channel id"
+                :disabled="!routes[row.type]!.enabled"
+                list="slack-channels"
+              />
+            </div>
+            <datalist id="slack-channels">
+              <option v-for="ch in slack.channels" :key="ch.id" :value="`#${ch.name}`" />
+            </datalist>
+
+            <label class="flex items-center gap-2">
+              <USwitch v-model="mentionsEnabled" size="sm" />
+              <span class="text-sm text-slate-300">@-mention mapped account members</span>
+            </label>
+
+            <div class="flex justify-end">
+              <UButton
+                color="primary"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-save"
+                :loading="busy"
+                @click="saveRouting"
+              >
+                Save routing
+              </UButton>
+            </div>
+          </div>
+
+          <!-- member mapping -->
+          <div v-if="mentionsEnabled" class="space-y-2">
+            <p class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+              Member map (user id → Slack member id)
+            </p>
+            <p class="text-[11px] leading-snug text-slate-500">
+              <span class="font-medium text-slate-400">Product</span> people are mentioned on
+              requirement-review findings; everyone else only when they created the task.
+            </p>
+            <div v-for="(entry, i) in mapping" :key="i" class="flex items-center gap-2">
+              <UInput v-model="entry.userId" size="sm" class="w-40" placeholder="User id (usr_…)" />
+              <UInput
+                v-model="entry.slackUserId"
+                size="sm"
+                class="flex-1"
+                placeholder="Slack member id (U…)"
+              />
+              <USelect v-model="entry.role" :items="ROLE_OPTIONS" size="sm" class="w-32" />
+              <UButton
+                color="error"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-trash-2"
+                @click="removeMapping(i)"
+              />
+            </div>
+            <div class="flex justify-between">
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-plus"
+                @click="addMapping"
+              >
+                Add member
+              </UButton>
+              <UButton
+                color="primary"
+                variant="soft"
+                size="xs"
+                icon="i-lucide-save"
+                :loading="busy"
+                @click="saveMapping"
+              >
+                Save map
+              </UButton>
+            </div>
+          </div>
+        </template>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/tasks/TaskContextIssues.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+// Inspector section for a task block: the tracker issues (Jira, …) attached to
+// it as agent context, plus an "Attach" menu to link an already-imported issue
+// or open the import modal. Mirrors TaskContextDocs.vue; shown only when the
+// task-source integration is available. Each linked issue shows its status so
+// the structured nature of an issue is visible at a glance.
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { Block, TaskSourceKind } from '~/types/domain'
+
+const props = defineProps<{ block: Block }>()
+
+const tasks = useTasksStore()
+const ui = useUiStore()
+const toast = useToast()
+
+onMounted(() => {
+  tasks.loadTasks().catch(() => {})
+})
+
+const linked = computed(() => tasks.tasksForBlock(props.block.id))
+
+async function attach(source: TaskSourceKind, externalId: string) {
+  try {
+    await tasks.linkToBlock(props.block.id, source, externalId)
+    toast.add({ title: 'Issue 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((t) => `${t.source}:${t.externalId}`))
+  const items: DropdownMenuItem[] = tasks.tasks
+    .filter((t) => !linkedKeys.has(`${t.source}:${t.externalId}`))
+    .map((t) => ({
+      label: `${t.externalId} · ${t.title}`,
+      icon: tasks.descriptorFor(t.source)?.icon ?? 'i-lucide-square-check',
+      onSelect: () => attach(t.source, t.externalId),
+    }))
+  items.push({
+    label: 'Import an issue…',
+    icon: 'i-lucide-file-down',
+    onSelect: () => ui.openTaskImport(),
+  })
+  return [items]
+})
+</script>
+
+<template>
+  <div v-if="tasks.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 issues
+      </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="task in linked"
+        :key="`${task.source}:${task.externalId}`"
+        :href="task.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="tasks.descriptorFor(task.source)?.icon ?? 'i-lucide-square-check'"
+          class="h-3.5 w-3.5 shrink-0 text-indigo-400"
+        />
+        <span class="truncate">{{ task.externalId }} · {{ task.title }}</span>
+        <UBadge color="neutral" variant="soft" size="xs" class="ml-auto shrink-0">
+          {{ task.status }}
+        </UBadge>
+      </a>
+    </div>
+    <p v-else class="text-[11px] text-slate-500">
+      Attach a Jira issue so agents see its description and comments while implementing this task.
+    </p>
+  </div>
+</template>