@cat-factory/app 0.6.0

package/app/components/layout/BoardToolbar.vue

@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { useBoardFlow } from '~/composables/useBoardFlow'
+import NotificationsInbox from '~/components/layout/NotificationsInbox.vue'
+import VendorCredentialsModal from '~/components/providers/VendorCredentialsModal.vue'
+import PersonalCredentialModal from '~/components/providers/PersonalCredentialModal.vue'
+
+const ui = useUiStore()
+const board = useBoardStore()
+const execution = useExecutionStore()
+const workspace = useWorkspaceStore()
+const services = useServicesStore()
+const toast = useToast()
+const { fitView, zoomIn, zoomOut } = useBoardFlow()
+
+async function mountService(serviceId: string, title: string) {
+  try {
+    await services.mount(serviceId)
+    toast.add({ title: `Added ${title}`, icon: 'i-lucide-box', color: 'success' })
+  } catch (e) {
+    toast.add({
+      title: 'Could not add service',
+      description: e instanceof Error ? e.message : String(e),
+      color: 'error',
+    })
+  }
+}
+
+// The org's services not yet on this board — mounting one adds its shared frame here.
+const mountableItems = computed(() =>
+  services.mountable.map((s) => {
+    const title = board.getBlock(s.frameBlockId)?.title ?? s.frameBlockId
+    return {
+      label: title,
+      icon: 'i-lucide-box',
+      onSelect: () => {
+        void mountService(s.id, title)
+      },
+    }
+  }),
+)
+
+const zoomPct = computed(() => Math.round(ui.zoom * 100))
+const lodLabel = computed(
+  () =>
+    ({
+      far: 'Overview',
+      mid: 'Summary',
+      close: 'Detail',
+      steps: 'Build steps',
+      subtasks: 'Subtasks',
+    })[ui.lod],
+)
+
+// Live spend indicator: shown once any tokens have been metered this period.
+const spend = computed(() => workspace.spend)
+const showSpend = computed(() => !!spend.value && spend.value.costSpent > 0)
+const spendLabel = computed(() => {
+  const s = spend.value
+  if (!s) return ''
+  const fmt = (n: number) => {
+    try {
+      return new Intl.NumberFormat(undefined, { style: 'currency', currency: s.currency }).format(n)
+    } catch {
+      return `${n.toFixed(2)} ${s.currency}`
+    }
+  }
+  return `${fmt(s.costSpent)} / ${fmt(s.costLimit)}`
+})
+const spendColor = computed(() => (spend.value?.exceeded ? 'error' : 'neutral'))
+
+const decisionItems = computed(() =>
+  execution.openDecisions.map((d) => {
+    const b = board.getBlock(d.blockId)
+    return {
+      label: b?.title ?? 'Block',
+      description: d.decision.question,
+      icon: 'i-lucide-circle-help',
+      onSelect: () => ui.openDecision(d.instanceId, d.decision.id),
+    }
+  }),
+)
+</script>
+
+<template>
+  <div
+    class="absolute left-1/2 top-4 z-20 flex -translate-x-1/2 items-center gap-1 rounded-full border border-slate-700 bg-slate-900/90 px-2 py-1.5 shadow-xl backdrop-blur"
+  >
+    <!-- zoom controls -->
+    <UButton
+      icon="i-lucide-zoom-out"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      @click="zoomOut()"
+    />
+    <div class="w-20 text-center text-xs tabular-nums text-slate-300">
+      {{ zoomPct }}%
+      <div class="text-[9px] uppercase tracking-wide text-slate-500">{{ lodLabel }}</div>
+    </div>
+    <UButton icon="i-lucide-zoom-in" color="neutral" variant="ghost" size="sm" @click="zoomIn()" />
+    <UButton
+      icon="i-lucide-maximize"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      @click="fitView({ padding: 0.2 })"
+    />
+
+    <USeparator orientation="vertical" class="mx-1 h-6" />
+
+    <!-- decisions queue -->
+    <UDropdownMenu v-if="execution.pendingDecisionCount" :items="decisionItems">
+      <UButton color="warning" variant="soft" size="sm" icon="i-lucide-circle-help">
+        {{ execution.pendingDecisionCount }} decision{{
+          execution.pendingDecisionCount === 1 ? '' : 's'
+        }}
+      </UButton>
+    </UDropdownMenu>
+
+    <!-- in-org sharing: add an existing org service to this board -->
+    <UDropdownMenu v-if="mountableItems.length" :items="mountableItems">
+      <UButton color="neutral" variant="ghost" size="sm" icon="i-lucide-plus-circle">
+        Add service
+      </UButton>
+    </UDropdownMenu>
+
+    <!-- human-actionable notifications (merge review, pipeline complete, CI failed) -->
+    <NotificationsInbox />
+
+    <!-- LLM vendor subscriptions (Claude Code / Codex token pool) -->
+    <UButton
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      icon="i-lucide-key-round"
+      title="Connect LLM vendor subscriptions (Claude Code / Codex)"
+      @click="ui.openVendorCredentials()"
+    >
+      Vendors
+    </UButton>
+    <VendorCredentialsModal />
+    <PersonalCredentialModal />
+
+    <!-- spend safeguard usage -->
+    <UButton
+      v-if="showSpend"
+      :color="spendColor"
+      variant="soft"
+      size="sm"
+      icon="i-lucide-wallet"
+      :title="spend?.exceeded ? 'Spend limit reached — runs paused' : 'Token spend this month'"
+    >
+      {{ spendLabel }}
+    </UButton>
+  </div>
+</template>

package/app/components/layout/CommandBar.vue

@@ -0,0 +1,336 @@
+<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'
+
+interface Command {
+  id: string
+  label: string
+  group: string
+  icon: string
+  /** Extra words matched by the fuzzy filter beyond the label. */
+  keywords?: string
+  run: () => void | Promise<void>
+}
+
+const ui = useUiStore()
+const board = useBoardStore()
+const github = useGitHubStore()
+const slack = useSlackStore()
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const library = useFragmentLibraryStore()
+
+const open = computed({
+  get: () => ui.commandBarOpen,
+  set: (v: boolean) => (v ? ui.openCommandBar() : ui.closeCommandBar()),
+})
+
+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[] = []
+
+  // ---- Create -------------------------------------------------------------
+  list.push({
+    id: 'new-pipeline',
+    label: 'Build a pipeline',
+    group: 'Create',
+    icon: 'i-lucide-workflow',
+    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) {
+    list.push({
+      id: 'add-from-repo',
+      label: 'Add service from existing repo',
+      group: 'Repositories',
+      icon: 'i-lucide-folder-git-2',
+      keywords: 'github import existing',
+      run: () => ui.openAddService(),
+    })
+  }
+  list.push({
+    id: 'bootstrap-repo',
+    label: 'Bootstrap a new repo',
+    group: 'Repositories',
+    icon: 'i-lucide-git-branch-plus',
+    keywords: 'scaffold create reference architecture',
+    run: () => ui.openBootstrap(),
+  })
+
+  // ---- Integrations -------------------------------------------------------
+  if (github.available) {
+    list.push({
+      id: 'github',
+      label: github.connected ? 'Manage GitHub connection' : 'Connect GitHub',
+      group: 'Integrations',
+      icon: 'i-lucide-github',
+      keywords: 'git repos pull requests issues',
+      run: () => ui.openGitHub(),
+    })
+  }
+  if (slack.available) {
+    list.push({
+      id: 'slack',
+      label: slack.connected ? 'Manage Slack notifications' : 'Connect Slack',
+      group: 'Integrations',
+      icon: 'i-lucide-slack',
+      keywords: 'slack notifications channel mentions',
+      run: () => ui.openSlack(),
+    })
+  }
+  if (documents.available) {
+    for (const src of documents.sources) {
+      list.push({
+        id: `doc-connect-${src.source}`,
+        label: documents.isConnected(src.source) ? `Manage ${src.label}` : `Connect ${src.label}`,
+        group: 'Integrations',
+        icon: src.icon,
+        keywords: 'document source prd rfc',
+        run: () => ui.openDocumentConnect(src.source),
+      })
+    }
+    if (documents.anyConnected) {
+      list.push({
+        id: 'doc-import',
+        label: 'Import & spawn from documents',
+        group: 'Integrations',
+        icon: 'i-lucide-file-down',
+        keywords: 'document import spawn',
+        run: () => ui.openDocumentImport(null),
+      })
+    }
+  }
+  if (tasks.available) {
+    for (const src of tasks.sources) {
+      list.push({
+        id: `task-connect-${src.source}`,
+        label: tasks.isConnected(src.source) ? `Manage ${src.label}` : `Connect ${src.label}`,
+        group: 'Integrations',
+        icon: src.icon,
+        keywords: 'task source tracker issues',
+        run: () => ui.openTaskConnect(src.source),
+      })
+    }
+    if (tasks.anyConnected) {
+      list.push({
+        id: 'task-import',
+        label: 'Import issues',
+        group: 'Integrations',
+        icon: 'i-lucide-file-down',
+        keywords: 'task import issues',
+        run: () => ui.openTaskImport(null),
+      })
+    }
+  }
+
+  // ---- Workspace ----------------------------------------------------------
+  if (library.available) {
+    list.push({
+      id: 'fragments',
+      label: 'Context fragment library',
+      group: 'Workspace',
+      icon: 'i-lucide-book-marked',
+      keywords: 'prompt fragments best practice guidelines context',
+      run: () => ui.openFragmentLibrary(),
+    })
+  }
+  list.push({
+    id: 'merge-thresholds',
+    label: 'Merge thresholds',
+    group: 'Workspace',
+    icon: 'i-lucide-git-merge',
+    keywords: 'merge policy preset auto-merge ci',
+    run: () => ui.openMergeThresholds(),
+  })
+  list.push({
+    id: 'workspace-settings',
+    label: 'Workspace settings',
+    group: 'Workspace',
+    icon: 'i-lucide-sliders-horizontal',
+    keywords: 'limit running tasks per service waiting escalation overdue notification timeout',
+    run: () => ui.openWorkspaceSettings(),
+  })
+  list.push({
+    id: 'model-defaults',
+    label: 'Default models for agents',
+    group: 'Workspace',
+    icon: 'i-lucide-cpu',
+    keywords: 'model llm routing agent kind default',
+    run: () => ui.openModelDefaults(),
+  })
+  list.push({
+    id: 'service-fragment-defaults',
+    label: 'Default service best practices',
+    group: 'Workspace',
+    icon: 'i-lucide-book-open-check',
+    keywords: 'fragment best practice guideline service default code-aware',
+    run: () => ui.openServiceFragmentDefaults(),
+  })
+  list.push({
+    id: 'local-models',
+    label: 'My local runners',
+    group: 'Workspace',
+    icon: 'i-lucide-server',
+    keywords: 'local model runner ollama lm studio llamacpp vllm endpoint',
+    run: () => ui.openLocalModels(),
+  })
+
+  return list
+})
+
+const filtered = computed<Command[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) return commands.value
+  return commands.value.filter((c) =>
+    `${c.label} ${c.group} ${c.keywords ?? ''}`.toLowerCase().includes(q),
+  )
+})
+
+// Group the filtered commands for rendering, preserving first-seen group order.
+const groups = computed(() => {
+  const map = new Map<string, Command[]>()
+  for (const c of filtered.value) {
+    const bucket = map.get(c.group)
+    if (bucket) bucket.push(c)
+    else map.set(c.group, [c])
+  }
+  return [...map.entries()].map(([name, items]) => ({ name, items }))
+})
+
+// Keep the active highlight in range as the filter narrows the list.
+watch(filtered, () => {
+  activeIndex.value = 0
+})
+
+function run(cmd: Command) {
+  ui.closeCommandBar()
+  void cmd.run()
+}
+
+function onKeydown(event: KeyboardEvent) {
+  const items = filtered.value
+  if (event.key === 'ArrowDown') {
+    event.preventDefault()
+    activeIndex.value = (activeIndex.value + 1) % Math.max(items.length, 1)
+  } else if (event.key === 'ArrowUp') {
+    event.preventDefault()
+    activeIndex.value = (activeIndex.value - 1 + items.length) % Math.max(items.length, 1)
+  } else if (event.key === 'Enter') {
+    event.preventDefault()
+    const cmd = items[activeIndex.value]
+    if (cmd) run(cmd)
+  }
+}
+
+// Reset the query each time the bar opens, and focus the input.
+const inputRef = ref<{ inputRef?: HTMLInputElement } | null>(null)
+watch(open, (isOpen) => {
+  if (!isOpen) return
+  query.value = ''
+  activeIndex.value = 0
+  void documents.probe()
+  void tasks.probe()
+  void github.probe()
+  void library.probe()
+  nextTick(() => inputRef.value?.inputRef?.focus())
+})
+
+// Global ⌘K / Ctrl+K toggles the bar from anywhere in the app.
+function onGlobalKey(event: KeyboardEvent) {
+  if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === 'k') {
+    event.preventDefault()
+    ui.toggleCommandBar()
+  }
+}
+onMounted(() => window.addEventListener('keydown', onGlobalKey))
+onBeforeUnmount(() => window.removeEventListener('keydown', onGlobalKey))
+
+// Flat index of each command so per-group rendering can map to the global cursor.
+function indexOf(cmd: Command) {
+  return filtered.value.indexOf(cmd)
+}
+</script>
+
+<template>
+  <UModal v-model:open="open" :ui="{ content: 'max-w-xl' }">
+    <template #content>
+      <div class="flex flex-col" @keydown="onKeydown">
+        <div class="flex items-center gap-2 border-b border-slate-800 px-3">
+          <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0 text-slate-500" />
+          <UInput
+            ref="inputRef"
+            v-model="query"
+            variant="none"
+            placeholder="Search or run a command…"
+            class="w-full"
+            :ui="{ base: 'py-3 text-sm' }"
+          />
+          <UKbd value="esc" />
+        </div>
+
+        <div class="max-h-80 overflow-y-auto p-1.5">
+          <p v-if="filtered.length === 0" class="px-3 py-6 text-center text-sm text-slate-500">
+            No matching commands.
+          </p>
+
+          <div v-for="group in groups" :key="group.name" class="mb-1">
+            <p
+              class="px-2 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-slate-500"
+            >
+              {{ group.name }}
+            </p>
+            <button
+              v-for="cmd in group.items"
+              :key="cmd.id"
+              type="button"
+              class="flex w-full items-center gap-2.5 rounded-md px-2 py-1.5 text-left text-sm transition"
+              :class="
+                indexOf(cmd) === activeIndex
+                  ? 'bg-slate-800 text-slate-100'
+                  : 'text-slate-300 hover:bg-slate-800/60'
+              "
+              @mousemove="activeIndex = indexOf(cmd)"
+              @click="run(cmd)"
+            >
+              <UIcon :name="cmd.icon" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="truncate">{{ cmd.label }}</span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/layout/GitHubPatBanner.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+
+// Local-mode setup prompt: when the local facade boots without a GitHub PAT, every
+// repo-operating agent step (clone, push, open PR, CI gate, merge) will fail. The server
+// also logs this, but a dev terminal is easy to miss — so surface it in the UI with the
+// (scopes-preselected) creation URL as a one-click link straight to GitHub.
+const auth = useAuthStore()
+
+const setupUrl = computed(() => auth.localMode?.githubPatSetupUrl ?? '')
+const dismissed = ref(false)
+const show = computed(() => !!setupUrl.value && !dismissed.value)
+</script>
+
+<template>
+  <Transition name="fade">
+    <div v-if="show" class="absolute inset-x-0 top-0 z-50 flex justify-center px-4 pt-4">
+      <div
+        class="w-full max-w-3xl rounded-2xl border-2 border-amber-500/70 bg-amber-950/95 p-5 shadow-2xl backdrop-blur"
+        role="alert"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon name="i-lucide-key-round" class="mt-0.5 h-9 w-9 shrink-0 text-amber-400" />
+          <div class="min-w-0 flex-1">
+            <div class="flex items-start justify-between gap-3">
+              <h2 class="text-lg font-semibold text-amber-100">GitHub PAT not configured</h2>
+              <UButton
+                color="neutral"
+                variant="ghost"
+                size="xs"
+                icon="i-lucide-x"
+                aria-label="Dismiss"
+                @click="dismissed = true"
+              />
+            </div>
+            <p class="mt-1 text-sm text-amber-200/90">
+              Local mode reaches GitHub with a personal access token. Without one, agent steps that
+              clone, push, open PRs, gate on CI or merge will fail.
+            </p>
+
+            <div class="mt-4">
+              <UButton
+                :to="setupUrl"
+                target="_blank"
+                rel="noopener noreferrer"
+                color="warning"
+                variant="solid"
+                icon="i-lucide-external-link"
+                trailing
+              >
+                Create a GitHub token (scopes pre-selected)
+              </UButton>
+              <p class="mt-2 text-xs text-amber-300/70">
+                Then set <code class="font-mono">GITHUB_PAT</code> and restart.
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>