@cat-factory/app 0.6.0 → 0.7.3

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,
+  }
+}

package/app/composables/useContextLinking.ts

@@ -1,65 +1,65 @@
-import type { DocumentSourceKind, TaskSourceKind } from '~/types/domain'
-
-// Shared model + orchestration for attaching external context (imported docs and
-// tracker issues) to a board block. A "pending" item is something the user has
-// chosen to attach but which is only linked once the block exists — so the task
-// creation popup can collect selections up front and commit them after the task
-// is created. Search hits and pasted URLs carry `needsImport: true`: they are not
-// yet projected locally, so they are imported (fetched + persisted) before being
-// linked; already-imported items are linked directly. Reused wherever context is
-// attached (the add-task popup today; the inspector can adopt it later).
-
-export interface PendingContext {
-  kind: 'document' | 'task'
-  source: DocumentSourceKind | TaskSourceKind
-  /** A canonical external id (already-imported / search hit) or a pasted URL/ref. */
-  externalId: string
-  title: string
-  /** Secondary line: an issue status, a source label, the raw URL, … */
-  subtitle?: string
-  /** Lucide icon for the row. */
-  icon?: string
-  /** True when the item must be imported before it can be linked. */
-  needsImport: boolean
-}
-
-/** Stable key for a pending item, used for dedupe + selection toggles. */
-export function contextKey(c: Pick<PendingContext, 'kind' | 'source' | 'externalId'>): string {
-  return `${c.kind}:${c.source}:${c.externalId}`
-}
-
-export function useContextLinking() {
-  const documents = useDocumentsStore()
-  const tasks = useTasksStore()
-
-  /**
-   * Import (when needed) then link every pending item to `blockId`. Each failure
-   * is counted rather than aborting the batch, so one bad attachment doesn't sink
-   * the rest; returns how many failed.
-   */
-  async function linkPending(blockId: string, items: PendingContext[]): Promise<number> {
-    let failed = 0
-    for (const item of items) {
-      try {
-        if (item.kind === 'document') {
-          const source = item.source as DocumentSourceKind
-          const externalId = item.needsImport
-            ? (await documents.importDocument(source, item.externalId)).externalId
-            : item.externalId
-          await documents.linkToBlock(blockId, source, externalId)
-        } else {
-          const source = item.source as TaskSourceKind
-          const externalId = item.needsImport
-            ? (await tasks.importTask(source, item.externalId)).externalId
-            : item.externalId
-          await tasks.linkToBlock(blockId, source, externalId)
-        }
-      } catch {
-        failed++
-      }
-    }
-    return failed
-  }
-
-  return { linkPending }
-}
+import type { DocumentSourceKind, TaskSourceKind } from '~/types/domain'
+
+// Shared model + orchestration for attaching external context (imported docs and
+// tracker issues) to a board block. A "pending" item is something the user has
+// chosen to attach but which is only linked once the block exists — so the task
+// creation popup can collect selections up front and commit them after the task
+// is created. Search hits and pasted URLs carry `needsImport: true`: they are not
+// yet projected locally, so they are imported (fetched + persisted) before being
+// linked; already-imported items are linked directly. Reused wherever context is
+// attached (the add-task popup today; the inspector can adopt it later).
+
+export interface PendingContext {
+  kind: 'document' | 'task'
+  source: DocumentSourceKind | TaskSourceKind
+  /** A canonical external id (already-imported / search hit) or a pasted URL/ref. */
+  externalId: string
+  title: string
+  /** Secondary line: an issue status, a source label, the raw URL, … */
+  subtitle?: string
+  /** Lucide icon for the row. */
+  icon?: string
+  /** True when the item must be imported before it can be linked. */
+  needsImport: boolean
+}
+
+/** Stable key for a pending item, used for dedupe + selection toggles. */
+export function contextKey(c: Pick<PendingContext, 'kind' | 'source' | 'externalId'>): string {
+  return `${c.kind}:${c.source}:${c.externalId}`
+}
+
+export function useContextLinking() {
+  const documents = useDocumentsStore()
+  const tasks = useTasksStore()
+
+  /**
+   * Import (when needed) then link every pending item to `blockId`. Each failure
+   * is counted rather than aborting the batch, so one bad attachment doesn't sink
+   * the rest; returns how many failed.
+   */
+  async function linkPending(blockId: string, items: PendingContext[]): Promise<number> {
+    let failed = 0
+    for (const item of items) {
+      try {
+        if (item.kind === 'document') {
+          const source = item.source as DocumentSourceKind
+          const externalId = item.needsImport
+            ? (await documents.importDocument(source, item.externalId)).externalId
+            : item.externalId
+          await documents.linkToBlock(blockId, source, externalId)
+        } else {
+          const source = item.source as TaskSourceKind
+          const externalId = item.needsImport
+            ? (await tasks.importTask(source, item.externalId)).externalId
+            : item.externalId
+          await tasks.linkToBlock(blockId, source, externalId)
+        }
+      } catch {
+        failed++
+      }
+    }
+    return failed
+  }
+
+  return { linkPending }
+}

package/app/composables/useFrameResize.ts

@@ -1,54 +1,54 @@
-import { ref } from 'vue'
-import type { Block } from '~/types/domain'
-
-/**
- * Pointer-driven resizing for service frames (Miro-style border drag). The drag
- * delta is divided by the board zoom so the edge tracks the cursor, and the new
- * size is clamped to the frame's content extent so dragging in never clips the
- * tasks/modules inside. The frame grows live (the store block is mutated in place,
- * which `containerSize` reads back), and the final size is persisted once on
- * release rather than on every move.
- */
-export function useFrameResize() {
-  const board = useBoardStore()
-  const ui = useUiStore()
-  /** Id of the frame currently being resized, for cursor/handle styling. */
-  const resizingId = ref<string | null>(null)
-
-  /**
-   * Begin a resize from one of the frame's edges/corner. `edge` selects which
-   * dimensions move: `'e'` width only, `'s'` height only, `'se'` both.
-   */
-  function startResize(block: Block, e: PointerEvent, edge: 'e' | 's' | 'se') {
-    if (e.button !== 0) return
-    e.preventDefault()
-    e.stopPropagation()
-    const startX = e.clientX
-    const startY = e.clientY
-    // The content extent is the floor — never shrink a frame below its tasks.
-    const min = board.contentSize(block.id)
-    // Seed from the current rendered size so the first move doesn't jump.
-    const start = board.containerSize(block.id)
-    resizingId.value = block.id
-
-    const onMove = (ev: PointerEvent) => {
-      const z = ui.zoom || 1
-      const w = edge === 's' ? start.w : Math.max(min.w, start.w + (ev.clientX - startX) / z)
-      const h = edge === 'e' ? start.h : Math.max(min.h, start.h + (ev.clientY - startY) / z)
-      // Optimistic, local-only: mutate the cached block so the frame grows live
-      // without a round-trip on every pointer move.
-      block.size = { w: Math.round(w), h: Math.round(h) }
-    }
-    const onUp = () => {
-      window.removeEventListener('pointermove', onMove)
-      window.removeEventListener('pointerup', onUp)
-      resizingId.value = null
-      // Persist the final size once (also re-applies it as the authoritative block).
-      if (block.size) void board.updateBlock(block.id, { size: block.size })
-    }
-    window.addEventListener('pointermove', onMove)
-    window.addEventListener('pointerup', onUp)
-  }
-
-  return { resizingId, startResize }
-}
+import { ref } from 'vue'
+import type { Block } from '~/types/domain'
+
+/**
+ * Pointer-driven resizing for service frames (Miro-style border drag). The drag
+ * delta is divided by the board zoom so the edge tracks the cursor, and the new
+ * size is clamped to the frame's content extent so dragging in never clips the
+ * tasks/modules inside. The frame grows live (the store block is mutated in place,
+ * which `containerSize` reads back), and the final size is persisted once on
+ * release rather than on every move.
+ */
+export function useFrameResize() {
+  const board = useBoardStore()
+  const ui = useUiStore()
+  /** Id of the frame currently being resized, for cursor/handle styling. */
+  const resizingId = ref<string | null>(null)
+
+  /**
+   * Begin a resize from one of the frame's edges/corner. `edge` selects which
+   * dimensions move: `'e'` width only, `'s'` height only, `'se'` both.
+   */
+  function startResize(block: Block, e: PointerEvent, edge: 'e' | 's' | 'se') {
+    if (e.button !== 0) return
+    e.preventDefault()
+    e.stopPropagation()
+    const startX = e.clientX
+    const startY = e.clientY
+    // The content extent is the floor — never shrink a frame below its tasks.
+    const min = board.contentSize(block.id)
+    // Seed from the current rendered size so the first move doesn't jump.
+    const start = board.containerSize(block.id)
+    resizingId.value = block.id
+
+    const onMove = (ev: PointerEvent) => {
+      const z = ui.zoom || 1
+      const w = edge === 's' ? start.w : Math.max(min.w, start.w + (ev.clientX - startX) / z)
+      const h = edge === 'e' ? start.h : Math.max(min.h, start.h + (ev.clientY - startY) / z)
+      // Optimistic, local-only: mutate the cached block so the frame grows live
+      // without a round-trip on every pointer move.
+      block.size = { w: Math.round(w), h: Math.round(h) }
+    }
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+      resizingId.value = null
+      // Persist the final size once (also re-applies it as the authoritative block).
+      if (block.size) void board.updateBlock(block.id, { size: block.size })
+    }
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+  }
+
+  return { resizingId, startResize }
+}

package/app/pages/index.vue

@@ -26,6 +26,7 @@ import GitHubOnboarding from '~/components/github/GitHubOnboarding.vue'
 import FragmentLibraryPanel from '~/components/fragments/FragmentLibraryPanel.vue'
 import CommandBar from '~/components/layout/CommandBar.vue'
 import MergeThresholdsPanel from '~/components/settings/MergeThresholdsPanel.vue'
+import IssueTrackerWritebackPanel from '~/components/settings/IssueTrackerWritebackPanel.vue'
 import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel.vue'
 import DatadogPanel from '~/components/settings/DatadogPanel.vue'
 import ModelDefaultsPanel from '~/components/settings/ModelDefaultsPanel.vue'
@@ -115,6 +116,7 @@ watch(
       <FragmentLibraryPanel />
       <CommandBar />
       <MergeThresholdsPanel />
+      <IssueTrackerWritebackPanel />
       <WorkspaceSettingsPanel />
       <DatadogPanel />
       <ModelDefaultsPanel />