@cat-factory/app 0.6.0 → 0.7.2

package/app/components/recurring/RecurrenceEditor.vue

@@ -1,124 +1,124 @@
-<script setup lang="ts">
-// Edits a `Recurrence`: run every N hours, optionally constrained to a set of
-// weekdays and an hour-of-day window, in a chosen timezone. Used both when adding
-// a recurring pipeline (frame modal) and when editing one (inspector). Emits the
-// updated recurrence via v-model.
-import type { Recurrence } from '~/types/recurring'
-
-const props = defineProps<{ modelValue: Recurrence }>()
-const emit = defineEmits<{ 'update:modelValue': [Recurrence] }>()
-
-const WEEKDAYS = [
-  { value: 0, label: 'Sun' },
-  { value: 1, label: 'Mon' },
-  { value: 2, label: 'Tue' },
-  { value: 3, label: 'Wed' },
-  { value: 4, label: 'Thu' },
-  { value: 5, label: 'Fri' },
-  { value: 6, label: 'Sat' },
-]
-
-function patch(p: Partial<Recurrence>) {
-  emit('update:modelValue', { ...props.modelValue, ...p })
-}
-
-function toggleDay(day: number) {
-  const set = new Set(props.modelValue.weekdays)
-  if (set.has(day)) set.delete(day)
-  else set.add(day)
-  patch({ weekdays: [...set].sort((a, b) => a - b) })
-}
-
-// The hour-window is "any hour" when both bounds are null. The checkbox toggles
-// between unconstrained and a default business-hours window.
-const windowEnabled = computed(
-  () => props.modelValue.windowStartHour !== null || props.modelValue.windowEndHour !== null,
-)
-function toggleWindow(enabled: boolean) {
-  if (enabled) patch({ windowStartHour: 9, windowEndHour: 17 })
-  else patch({ windowStartHour: null, windowEndHour: null })
-}
-
-const hours = Array.from({ length: 24 }, (_, h) => ({
-  value: h,
-  label: `${String(h).padStart(2, '0')}:00`,
-}))
-
-// A small, common set of IANA zones plus whatever the schedule already uses.
-const TIMEZONES = [
-  'UTC',
-  'Europe/London',
-  'Europe/Helsinki',
-  'America/New_York',
-  'America/Los_Angeles',
-  'Asia/Tokyo',
-]
-const timezoneOptions = computed(() =>
-  Array.from(new Set([props.modelValue.timezone, ...TIMEZONES])),
-)
-</script>
-
-<template>
-  <div class="space-y-3">
-    <UFormField label="Run every">
-      <div class="flex items-center gap-2">
-        <UInput
-          :model-value="modelValue.intervalHours"
-          type="number"
-          :min="1"
-          class="w-24"
-          @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
-        />
-        <span class="text-xs text-slate-400">hours</span>
-      </div>
-    </UFormField>
-
-    <UFormField label="Allowed days" help="Leave all off to run any day.">
-      <div class="flex flex-wrap gap-1">
-        <UButton
-          v-for="d in WEEKDAYS"
-          :key="d.value"
-          size="xs"
-          :color="modelValue.weekdays.includes(d.value) ? 'primary' : 'neutral'"
-          :variant="modelValue.weekdays.includes(d.value) ? 'solid' : 'subtle'"
-          @click="toggleDay(d.value)"
-        >
-          {{ d.label }}
-        </UButton>
-      </div>
-    </UFormField>
-
-    <UFormField>
-      <UCheckbox
-        :model-value="windowEnabled"
-        label="Only within an hour-of-day window (e.g. business hours)"
-        @update:model-value="toggleWindow(Boolean($event))"
-      />
-    </UFormField>
-
-    <div v-if="windowEnabled" class="flex items-center gap-2">
-      <USelect
-        :model-value="modelValue.windowStartHour ?? 0"
-        :items="hours"
-        class="w-28"
-        @update:model-value="patch({ windowStartHour: Number($event) })"
-      />
-      <span class="text-xs text-slate-400">to</span>
-      <USelect
-        :model-value="modelValue.windowEndHour ?? 24 % 24"
-        :items="hours"
-        class="w-28"
-        @update:model-value="patch({ windowEndHour: Number($event) })"
-      />
-    </div>
-
-    <UFormField label="Timezone">
-      <USelect
-        :model-value="modelValue.timezone"
-        :items="timezoneOptions"
-        class="w-full"
-        @update:model-value="patch({ timezone: String($event) })"
-      />
-    </UFormField>
-  </div>
-</template>
+<script setup lang="ts">
+// Edits a `Recurrence`: run every N hours, optionally constrained to a set of
+// weekdays and an hour-of-day window, in a chosen timezone. Used both when adding
+// a recurring pipeline (frame modal) and when editing one (inspector). Emits the
+// updated recurrence via v-model.
+import type { Recurrence } from '~/types/recurring'
+
+const props = defineProps<{ modelValue: Recurrence }>()
+const emit = defineEmits<{ 'update:modelValue': [Recurrence] }>()
+
+const WEEKDAYS = [
+  { value: 0, label: 'Sun' },
+  { value: 1, label: 'Mon' },
+  { value: 2, label: 'Tue' },
+  { value: 3, label: 'Wed' },
+  { value: 4, label: 'Thu' },
+  { value: 5, label: 'Fri' },
+  { value: 6, label: 'Sat' },
+]
+
+function patch(p: Partial<Recurrence>) {
+  emit('update:modelValue', { ...props.modelValue, ...p })
+}
+
+function toggleDay(day: number) {
+  const set = new Set(props.modelValue.weekdays)
+  if (set.has(day)) set.delete(day)
+  else set.add(day)
+  patch({ weekdays: [...set].sort((a, b) => a - b) })
+}
+
+// The hour-window is "any hour" when both bounds are null. The checkbox toggles
+// between unconstrained and a default business-hours window.
+const windowEnabled = computed(
+  () => props.modelValue.windowStartHour !== null || props.modelValue.windowEndHour !== null,
+)
+function toggleWindow(enabled: boolean) {
+  if (enabled) patch({ windowStartHour: 9, windowEndHour: 17 })
+  else patch({ windowStartHour: null, windowEndHour: null })
+}
+
+const hours = Array.from({ length: 24 }, (_, h) => ({
+  value: h,
+  label: `${String(h).padStart(2, '0')}:00`,
+}))
+
+// A small, common set of IANA zones plus whatever the schedule already uses.
+const TIMEZONES = [
+  'UTC',
+  'Europe/London',
+  'Europe/Helsinki',
+  'America/New_York',
+  'America/Los_Angeles',
+  'Asia/Tokyo',
+]
+const timezoneOptions = computed(() =>
+  Array.from(new Set([props.modelValue.timezone, ...TIMEZONES])),
+)
+</script>
+
+<template>
+  <div class="space-y-3">
+    <UFormField label="Run every">
+      <div class="flex items-center gap-2">
+        <UInput
+          :model-value="modelValue.intervalHours"
+          type="number"
+          :min="1"
+          class="w-24"
+          @update:model-value="patch({ intervalHours: Math.max(1, Number($event) || 1) })"
+        />
+        <span class="text-xs text-slate-400">hours</span>
+      </div>
+    </UFormField>
+
+    <UFormField label="Allowed days" help="Leave all off to run any day.">
+      <div class="flex flex-wrap gap-1">
+        <UButton
+          v-for="d in WEEKDAYS"
+          :key="d.value"
+          size="xs"
+          :color="modelValue.weekdays.includes(d.value) ? 'primary' : 'neutral'"
+          :variant="modelValue.weekdays.includes(d.value) ? 'solid' : 'subtle'"
+          @click="toggleDay(d.value)"
+        >
+          {{ d.label }}
+        </UButton>
+      </div>
+    </UFormField>
+
+    <UFormField>
+      <UCheckbox
+        :model-value="windowEnabled"
+        label="Only within an hour-of-day window (e.g. business hours)"
+        @update:model-value="toggleWindow(Boolean($event))"
+      />
+    </UFormField>
+
+    <div v-if="windowEnabled" class="flex items-center gap-2">
+      <USelect
+        :model-value="modelValue.windowStartHour ?? 0"
+        :items="hours"
+        class="w-28"
+        @update:model-value="patch({ windowStartHour: Number($event) })"
+      />
+      <span class="text-xs text-slate-400">to</span>
+      <USelect
+        :model-value="modelValue.windowEndHour ?? 24 % 24"
+        :items="hours"
+        class="w-28"
+        @update:model-value="patch({ windowEndHour: Number($event) })"
+      />
+    </div>
+
+    <UFormField label="Timezone">
+      <USelect
+        :model-value="modelValue.timezone"
+        :items="timezoneOptions"
+        class="w-full"
+        @update:model-value="patch({ timezone: String($event) })"
+      />
+    </UFormField>
+  </div>
+</template>

package/app/components/settings/IssueTrackerWritebackPanel.vue

@@ -0,0 +1,103 @@
+<script setup lang="ts">
+// Workspace settings: issue-tracker writeback. Two independent toggles that govern
+// whether the engine writes back to a task's linked tracker issue(s) as its PR
+// progresses — comment when the PR opens, and comment + close as resolved when it
+// merges. Each is overridable per task in the inspector. Persisted on the workspace
+// tracker settings (the selection + Jira project key are preserved on save).
+import { ref, watch } from 'vue'
+
+const ui = useUiStore()
+const tracker = useTrackerStore()
+const toast = useToast()
+
+const open = computed({
+  get: () => ui.issueWritebackOpen,
+  set: (v: boolean) => (v ? ui.openIssueWriteback() : ui.closeIssueWriteback()),
+})
+
+const commentOnPrOpen = ref(false)
+const resolveOnMerge = ref(false)
+const saving = ref(false)
+
+// Re-sync the local toggles from the store whenever the panel opens.
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  commentOnPrOpen.value = tracker.settings.writebackCommentOnPrOpen
+  resolveOnMerge.value = tracker.settings.writebackResolveOnMerge
+})
+
+async function save() {
+  saving.value = true
+  try {
+    // Preserve the tracker selection + Jira project key; only the writeback flags change.
+    await tracker.save({
+      tracker: tracker.settings.tracker,
+      jiraProjectKey: tracker.settings.jiraProjectKey,
+      writebackCommentOnPrOpen: commentOnPrOpen.value,
+      writebackResolveOnMerge: resolveOnMerge.value,
+    })
+    toast.add({ title: 'Writeback 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="Issue tracker writeback" :ui="{ content: 'max-w-lg' }">
+    <template #body>
+      <div class="space-y-4">
+        <p class="text-xs text-slate-400">
+          When a task is linked to a tracker issue (GitHub Issues or Jira), write back to it as the
+          task's pull request progresses. Each toggle is the workspace default and can be overridden
+          per task in the inspector. GitHub issues close natively; Jira issues transition to the
+          first status in their <span class="text-slate-300">Done</span> category.
+        </p>
+
+        <label
+          class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+        >
+          <USwitch v-model="commentOnPrOpen" />
+          <span class="text-sm">
+            <span class="block text-slate-200">Comment when a PR opens</span>
+            <span class="block text-xs text-slate-500">
+              Post a comment on the linked issue with the new pull request's link.
+            </span>
+          </span>
+        </label>
+
+        <label
+          class="flex items-start gap-3 rounded-lg border border-slate-700 bg-slate-800/40 p-3"
+        >
+          <USwitch v-model="resolveOnMerge" />
+          <span class="text-sm">
+            <span class="block text-slate-200">Close as resolved when a PR merges</span>
+            <span class="block text-xs text-slate-500">
+              Comment that the PR merged, then close / resolve the linked issue.
+            </span>
+          </span>
+        </label>
+
+        <div class="flex justify-end">
+          <UButton
+            color="primary"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-save"
+            :loading="saving"
+            @click="save"
+          >
+            Save
+          </UButton>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/composables/useBlockQueries.ts

@@ -1,154 +1,154 @@
-import { computed, type Ref } from 'vue'
-import type { Block, BlockStatus } from '~/types/domain'
-
-/**
- * Pure, read-only queries over a board's blocks. Extracted from the board store
- * so the (sizeable) derivation logic — hierarchy traversal, status/progress
- * rollups and container sizing — lives in one focused, independently testable
- * place. The store wires these against its reactive `blocks` cache and re-exposes
- * them unchanged, so callers and tests are unaffected.
- */
-export function useBlockQueries(blocks: Ref<Block[]>) {
-  const byId = computed(() => {
-    const map = new Map<string, Block>()
-    for (const b of blocks.value) map.set(b.id, b)
-    return map
-  })
-
-  function getBlock(id: string) {
-    return byId.value.get(id)
-  }
-
-  /** Top-level architecture blocks (the only ones drawn as Vue Flow nodes). */
-  const frames = computed(() => blocks.value.filter((b) => (b.level ?? 'frame') === 'frame'))
-
-  /** Direct children of a block, in insertion order. */
-  function childrenOf(parentId: string) {
-    return blocks.value.filter((b) => b.parentId === parentId)
-  }
-
-  /** Tasks directly inside a container (a service or a module). */
-  function tasksOf(containerId: string) {
-    return blocks.value.filter((b) => b.parentId === containerId && b.level === 'task')
-  }
-
-  /** Modules (sub-frames) inside a service. */
-  function modulesOf(serviceId: string) {
-    return blocks.value.filter((b) => b.parentId === serviceId && b.level === 'module')
-  }
-
-  /** Tasks anywhere under a container — directly, or nested inside its modules. */
-  function allTasksUnder(containerId: string): Block[] {
-    const direct = tasksOf(containerId)
-    const nested = modulesOf(containerId).flatMap((m) => tasksOf(m.id))
-    return [...direct, ...nested]
-  }
-
-  /** The top-level service a block ultimately belongs to. */
-  function serviceOf(block: Block): Block | undefined {
-    let cur: Block | undefined = block
-    while (cur && cur.level !== 'frame') {
-      cur = cur.parentId ? getBlock(cur.parentId) : undefined
-    }
-    return cur
-  }
-
-  /** All tasks across every service (used for the dependency picker). */
-  const allTasks = computed(() => blocks.value.filter((b) => b.level === 'task'))
-
-  /** A task's dependencies that are not yet merged (i.e. block it from running). */
-  function unmetDeps(taskId: string) {
-    const t = getBlock(taskId)
-    if (!t) return [] as Block[]
-    return t.dependsOn
-      .map((id) => getBlock(id))
-      .filter((b): b is Block => !!b && b.status !== 'done')
-  }
-
-  /** A task may run only once all of its dependencies have merged. */
-  function isRunnable(taskId: string) {
-    return unmetDeps(taskId).length === 0
-  }
-
-  /** Container status/progress are derived from the tasks under it (containers have no PR). */
-  function frameProgress(frameId: string) {
-    const tasks = allTasksUnder(frameId)
-    if (tasks.length === 0) return getBlock(frameId)?.progress ?? 0
-    const sum = tasks.reduce((n, t) => n + (t.status === 'done' ? 1 : t.progress), 0)
-    return sum / tasks.length
-  }
-
-  /**
-   * A frame is a long-lived service: it never reaches a terminal "done" —
-   * tasks keep appearing. So its status reflects current *activity*, mapped
-   * onto the shared status palette but capped below `done`:
-   *   planned       → no tasks yet (empty)
-   *   ready         → has tasks but nothing active (idle / caught up / "live")
-   *   in_progress   → at least one task running or with an open PR
-   *   blocked       → at least one task needs a decision
-   */
-  function frameStatus(frameId: string): BlockStatus {
-    const tasks = allTasksUnder(frameId)
-    if (tasks.length === 0) return 'planned'
-    if (tasks.some((t) => t.status === 'blocked')) return 'blocked'
-    if (tasks.some((t) => t.status === 'in_progress' || t.status === 'pr_ready'))
-      return 'in_progress'
-    return 'ready'
-  }
-
-  /**
-   * The natural extent of a container's inner 2D canvas — the smallest size that
-   * still fits all its children. This is the floor a resizable frame can never be
-   * dragged below (so tasks/modules are never clipped).
-   */
-  function contentSize(id: string): { w: number; h: number } {
-    const b = getBlock(id)
-    const isModule = b?.level === 'module'
-    const TASK_W = 180
-    const TASK_H = 160
-    const headerH = isModule ? 30 : 0
-    let w = isModule ? 200 : 360
-    let inner = isModule ? 60 : 220
-    for (const t of tasksOf(id)) {
-      w = Math.max(w, t.position.x + TASK_W + 12)
-      inner = Math.max(inner, t.position.y + TASK_H + 12)
-    }
-    for (const m of modulesOf(id)) {
-      const s = containerSize(m.id)
-      w = Math.max(w, m.position.x + s.w + 12)
-      inner = Math.max(inner, m.position.y + s.h + 12)
-    }
-    return { w, h: inner + headerH }
-  }
-
-  /**
-   * Pixel size of a container's inner 2D canvas. The content extent is the floor;
-   * a frame the user has resized (dragging its borders) uses its stored `size`
-   * when that is larger, so an explicit size grows the frame but never shrinks it
-   * below its contents.
-   */
-  function containerSize(id: string): { w: number; h: number } {
-    const content = contentSize(id)
-    const stored = getBlock(id)?.size
-    if (!stored) return content
-    return { w: Math.max(content.w, stored.w), h: Math.max(content.h, stored.h) }
-  }
-
-  return {
-    byId,
-    getBlock,
-    frames,
-    allTasks,
-    childrenOf,
-    tasksOf,
-    modulesOf,
-    allTasksUnder,
-    serviceOf,
-    unmetDeps,
-    isRunnable,
-    frameProgress,
-    frameStatus,
-    contentSize,
-    containerSize,
-  }
-}
+import { computed, type Ref } from 'vue'
+import type { Block, BlockStatus } from '~/types/domain'
+
+/**
+ * Pure, read-only queries over a board's blocks. Extracted from the board store
+ * so the (sizeable) derivation logic — hierarchy traversal, status/progress
+ * rollups and container sizing — lives in one focused, independently testable
+ * place. The store wires these against its reactive `blocks` cache and re-exposes
+ * them unchanged, so callers and tests are unaffected.
+ */
+export function useBlockQueries(blocks: Ref<Block[]>) {
+  const byId = computed(() => {
+    const map = new Map<string, Block>()
+    for (const b of blocks.value) map.set(b.id, b)
+    return map
+  })
+
+  function getBlock(id: string) {
+    return byId.value.get(id)
+  }
+
+  /** Top-level architecture blocks (the only ones drawn as Vue Flow nodes). */
+  const frames = computed(() => blocks.value.filter((b) => (b.level ?? 'frame') === 'frame'))
+
+  /** Direct children of a block, in insertion order. */
+  function childrenOf(parentId: string) {
+    return blocks.value.filter((b) => b.parentId === parentId)
+  }
+
+  /** Tasks directly inside a container (a service or a module). */
+  function tasksOf(containerId: string) {
+    return blocks.value.filter((b) => b.parentId === containerId && b.level === 'task')
+  }
+
+  /** Modules (sub-frames) inside a service. */
+  function modulesOf(serviceId: string) {
+    return blocks.value.filter((b) => b.parentId === serviceId && b.level === 'module')
+  }
+
+  /** Tasks anywhere under a container — directly, or nested inside its modules. */
+  function allTasksUnder(containerId: string): Block[] {
+    const direct = tasksOf(containerId)
+    const nested = modulesOf(containerId).flatMap((m) => tasksOf(m.id))
+    return [...direct, ...nested]
+  }
+
+  /** The top-level service a block ultimately belongs to. */
+  function serviceOf(block: Block): Block | undefined {
+    let cur: Block | undefined = block
+    while (cur && cur.level !== 'frame') {
+      cur = cur.parentId ? getBlock(cur.parentId) : undefined
+    }
+    return cur
+  }
+
+  /** All tasks across every service (used for the dependency picker). */
+  const allTasks = computed(() => blocks.value.filter((b) => b.level === 'task'))
+
+  /** A task's dependencies that are not yet merged (i.e. block it from running). */
+  function unmetDeps(taskId: string) {
+    const t = getBlock(taskId)
+    if (!t) return [] as Block[]
+    return t.dependsOn
+      .map((id) => getBlock(id))
+      .filter((b): b is Block => !!b && b.status !== 'done')
+  }
+
+  /** A task may run only once all of its dependencies have merged. */
+  function isRunnable(taskId: string) {
+    return unmetDeps(taskId).length === 0
+  }
+
+  /** Container status/progress are derived from the tasks under it (containers have no PR). */
+  function frameProgress(frameId: string) {
+    const tasks = allTasksUnder(frameId)
+    if (tasks.length === 0) return getBlock(frameId)?.progress ?? 0
+    const sum = tasks.reduce((n, t) => n + (t.status === 'done' ? 1 : t.progress), 0)
+    return sum / tasks.length
+  }
+
+  /**
+   * A frame is a long-lived service: it never reaches a terminal "done" —
+   * tasks keep appearing. So its status reflects current *activity*, mapped
+   * onto the shared status palette but capped below `done`:
+   *   planned       → no tasks yet (empty)
+   *   ready         → has tasks but nothing active (idle / caught up / "live")
+   *   in_progress   → at least one task running or with an open PR
+   *   blocked       → at least one task needs a decision
+   */
+  function frameStatus(frameId: string): BlockStatus {
+    const tasks = allTasksUnder(frameId)
+    if (tasks.length === 0) return 'planned'
+    if (tasks.some((t) => t.status === 'blocked')) return 'blocked'
+    if (tasks.some((t) => t.status === 'in_progress' || t.status === 'pr_ready'))
+      return 'in_progress'
+    return 'ready'
+  }
+
+  /**
+   * The natural extent of a container's inner 2D canvas — the smallest size that
+   * still fits all its children. This is the floor a resizable frame can never be
+   * dragged below (so tasks/modules are never clipped).
+   */
+  function contentSize(id: string): { w: number; h: number } {
+    const b = getBlock(id)
+    const isModule = b?.level === 'module'
+    const TASK_W = 180
+    const TASK_H = 160
+    const headerH = isModule ? 30 : 0
+    let w = isModule ? 200 : 360
+    let inner = isModule ? 60 : 220
+    for (const t of tasksOf(id)) {
+      w = Math.max(w, t.position.x + TASK_W + 12)
+      inner = Math.max(inner, t.position.y + TASK_H + 12)
+    }
+    for (const m of modulesOf(id)) {
+      const s = containerSize(m.id)
+      w = Math.max(w, m.position.x + s.w + 12)
+      inner = Math.max(inner, m.position.y + s.h + 12)
+    }
+    return { w, h: inner + headerH }
+  }
+
+  /**
+   * Pixel size of a container's inner 2D canvas. The content extent is the floor;
+   * a frame the user has resized (dragging its borders) uses its stored `size`
+   * when that is larger, so an explicit size grows the frame but never shrinks it
+   * below its contents.
+   */
+  function containerSize(id: string): { w: number; h: number } {
+    const content = contentSize(id)
+    const stored = getBlock(id)?.size
+    if (!stored) return content
+    return { w: Math.max(content.w, stored.w), h: Math.max(content.h, stored.h) }
+  }
+
+  return {
+    byId,
+    getBlock,
+    frames,
+    allTasks,
+    childrenOf,
+    tasksOf,
+    modulesOf,
+    allTasksUnder,
+    serviceOf,
+    unmetDeps,
+    isRunnable,
+    frameProgress,
+    frameStatus,
+    contentSize,
+    containerSize,
+  }
+}