@cat-factory/app 1.0.0

package/app/components/layout/BoardSwitcher.vue

@@ -0,0 +1,202 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+
+// Account + board switching. Picks the active account (personal / org) and the
+// active board within it, and manages boards (new / rename / delete). The account
+// row is shown only when accounts exist (auth on); in dev it falls back to a plain
+// board switcher over the single unscoped context.
+const accounts = useAccountsStore()
+const workspace = useWorkspaceStore()
+const toast = useToast()
+
+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',
+  })
+}
+
+// ---- account + board menus -------------------------------------------------
+const accountItems = computed<DropdownMenuItem[][]>(() => [
+  accounts.accounts.map((a) => ({
+    label: a.name,
+    icon: a.type === 'org' ? 'i-lucide-users' : 'i-lucide-user',
+    trailingIcon: a.id === accounts.activeAccountId ? 'i-lucide-check' : undefined,
+    onSelect: () => void selectAccount(a.id),
+  })),
+  [{ label: 'New organization…', icon: 'i-lucide-plus', onSelect: () => openPrompt('account') }],
+])
+
+const boardItems = computed<DropdownMenuItem[][]>(() => [
+  workspace.accountWorkspaces.map((w) => ({
+    label: w.name,
+    icon: 'i-lucide-layout-dashboard',
+    trailingIcon: w.id === workspace.workspaceId ? 'i-lucide-check' : undefined,
+    onSelect: () => void switchBoard(w.id),
+  })),
+  [
+    { label: 'New board…', icon: 'i-lucide-plus', onSelect: () => openPrompt('board') },
+    { label: 'Rename board…', icon: 'i-lucide-pencil', onSelect: () => openPrompt('rename') },
+    {
+      label: 'Delete board',
+      icon: 'i-lucide-trash-2',
+      color: 'error' as const,
+      onSelect: () => void removeBoard(),
+    },
+  ],
+])
+
+async function selectAccount(id: string) {
+  if (id === accounts.activeAccountId) return
+  busy.value = true
+  try {
+    await workspace.selectAccount(id)
+  } catch (e) {
+    notifyError('Could not switch account', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function switchBoard(id: string) {
+  busy.value = true
+  try {
+    await workspace.switchTo(id)
+  } catch (e) {
+    notifyError('Could not open board', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function removeBoard() {
+  const id = workspace.workspaceId
+  if (!id) return
+  busy.value = true
+  try {
+    await workspace.remove(id)
+    toast.add({ title: 'Board deleted', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not delete board', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// ---- prompt modal (create account / create board / rename) -----------------
+type PromptKind = 'account' | 'board' | 'rename'
+const prompt = ref<PromptKind | null>(null)
+const promptValue = ref('')
+const promptOpen = computed({
+  get: () => prompt.value !== null,
+  set: (v: boolean) => {
+    if (!v) prompt.value = null
+  },
+})
+const promptMeta: Record<PromptKind, { title: string; placeholder: string; cta: string }> = {
+  account: { title: 'New organization', placeholder: 'Acme Inc.', cta: 'Create' },
+  board: { title: 'New board', placeholder: 'Untitled board', cta: 'Create' },
+  rename: { title: 'Rename board', placeholder: 'Board name', cta: 'Save' },
+}
+
+function openPrompt(kind: PromptKind) {
+  prompt.value = kind
+  promptValue.value = kind === 'rename' ? (workspace.activeWorkspace?.name ?? '') : ''
+}
+
+async function submitPrompt() {
+  const kind = prompt.value
+  const name = promptValue.value.trim()
+  if (!kind || (!name && kind !== 'board')) return
+  busy.value = true
+  try {
+    if (kind === 'account') {
+      await accounts.createOrg(name)
+      // The new org starts empty — open (create) its first board.
+      await workspace.selectAccount(accounts.activeAccountId!)
+    } else if (kind === 'board') {
+      await workspace.create(name || undefined)
+    } else if (workspace.workspaceId) {
+      await workspace.rename(workspace.workspaceId, name)
+    }
+    prompt.value = null
+  } catch (e) {
+    notifyError('Action failed', e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-1.5">
+    <!-- account selector (only when accounts exist) -->
+    <UDropdownMenu
+      v-if="accounts.enabled"
+      :items="accountItems"
+      :content="{ align: 'start' }"
+      class="w-full"
+    >
+      <button
+        type="button"
+        class="flex w-full items-center gap-2 rounded-md px-1.5 py-1 text-left transition hover:bg-slate-800/60"
+        :disabled="busy"
+      >
+        <UIcon
+          :name="accounts.activeAccount?.type === 'org' ? 'i-lucide-users' : 'i-lucide-user'"
+          class="h-3.5 w-3.5 shrink-0 text-slate-400"
+        />
+        <span class="truncate text-[11px] font-medium uppercase tracking-wide text-slate-400">
+          {{ accounts.activeAccount?.name ?? 'Account' }}
+        </span>
+        <UIcon
+          name="i-lucide-chevrons-up-down"
+          class="ml-auto h-3.5 w-3.5 shrink-0 text-slate-600"
+        />
+      </button>
+    </UDropdownMenu>
+
+    <!-- board selector -->
+    <UDropdownMenu :items="boardItems" :content="{ align: 'start' }" class="w-full">
+      <button
+        type="button"
+        class="flex w-full items-center gap-2 rounded-lg border border-slate-800 bg-slate-900/60 px-2.5 py-1.5 text-left transition hover:bg-slate-800/60"
+        :disabled="busy"
+      >
+        <UIcon name="i-lucide-layout-dashboard" class="h-4 w-4 shrink-0 text-indigo-400" />
+        <span class="truncate text-sm font-medium text-white">
+          {{ workspace.activeWorkspace?.name ?? 'Board' }}
+        </span>
+        <UIcon name="i-lucide-chevron-down" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
+      </button>
+    </UDropdownMenu>
+
+    <!-- create / rename prompt -->
+    <UModal v-model:open="promptOpen" :title="prompt ? promptMeta[prompt].title : ''">
+      <template #body>
+        <form class="space-y-3" @submit.prevent="submitPrompt">
+          <UFormField label="Name">
+            <UInput
+              v-model="promptValue"
+              autofocus
+              :placeholder="prompt ? promptMeta[prompt].placeholder : ''"
+              class="w-full"
+            />
+          </UFormField>
+          <div class="flex justify-end gap-2">
+            <UButton color="neutral" variant="ghost" :disabled="busy" @click="prompt = null">
+              Cancel
+            </UButton>
+            <UButton type="submit" color="primary" :loading="busy">
+              {{ prompt ? promptMeta[prompt].cta : '' }}
+            </UButton>
+          </div>
+        </form>
+      </template>
+    </UModal>
+  </div>
+</template>

package/app/components/layout/BoardToolbar.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { useBoardFlow } from '~/composables/useBoardFlow'
+
+const ui = useUiStore()
+const board = useBoardStore()
+const execution = useExecutionStore()
+const workspace = useWorkspaceStore()
+const { fitView, zoomIn, zoomOut } = useBoardFlow()
+
+const zoomPct = computed(() => Math.round(ui.zoom * 100))
+const lodLabel = computed(() => ({ far: 'Overview', mid: 'Summary', close: 'Detail' })[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),
+    }
+  }),
+)
+
+async function resetBoard() {
+  await workspace.reset()
+  ui.select(null)
+  ui.focus(null)
+  setTimeout(() => fitView({ padding: 0.2 }), 50)
+}
+</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>
+
+    <!-- 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>
+
+    <USeparator orientation="vertical" class="mx-1 h-6" />
+
+    <UButton
+      icon="i-lucide-rotate-ccw"
+      color="neutral"
+      variant="ghost"
+      size="sm"
+      title="Reset board to sample"
+      @click="resetBoard"
+    />
+  </div>
+</template>

package/app/components/layout/SideBar.vue

@@ -0,0 +1,193 @@
+<script setup lang="ts">
+import BlockPalette from '~/components/palettes/BlockPalette.vue'
+import PipelinePalette from '~/components/palettes/PipelinePalette.vue'
+import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
+import UserMenu from '~/components/auth/UserMenu.vue'
+
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const github = useGitHubStore()
+const library = useFragmentLibraryStore()
+const workspace = useWorkspaceStore()
+const ui = useUiStore()
+
+// Resolve whether the document-source / task-source / GitHub integrations are
+// enabled on the backend, so each section is hidden entirely when it is off
+// (mirrors how auth gates its UI). A 503 from a probe flips its `available` to
+// false. Re-probe whenever the active board changes — connections are per board.
+watch(
+  () => workspace.workspaceId,
+  (id) => {
+    if (!id) return
+    void documents.probe()
+    void tasks.probe()
+    void github.probe()
+    void library.probe()
+  },
+  { immediate: true },
+)
+</script>
+
+<template>
+  <aside
+    class="flex h-full w-64 shrink-0 flex-col gap-4 overflow-y-auto border-r border-slate-800 bg-slate-900/80 p-3 backdrop-blur"
+  >
+    <BoardSwitcher />
+
+    <USeparator />
+
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Building blocks
+      </h2>
+      <BlockPalette />
+    </section>
+
+    <USeparator />
+
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Pipelines
+      </h2>
+      <PipelinePalette />
+    </section>
+
+    <USeparator />
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Repositories
+      </h2>
+      <UButton
+        block
+        color="neutral"
+        variant="soft"
+        size="sm"
+        icon="i-lucide-git-branch-plus"
+        class="justify-start"
+        @click="ui.openBootstrap()"
+      >
+        Bootstrap repo
+      </UButton>
+    </section>
+
+    <template v-if="library.available">
+      <USeparator />
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Prompt library
+        </h2>
+        <UButton
+          block
+          color="neutral"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-book-marked"
+          class="justify-start"
+          @click="ui.openFragmentLibrary()"
+        >
+          Best-practice fragments
+        </UButton>
+      </section>
+    </template>
+
+    <template v-if="github.available">
+      <USeparator />
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          GitHub
+        </h2>
+        <UButton
+          block
+          color="neutral"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-github"
+          class="justify-start"
+          @click="ui.openGitHub()"
+        >
+          <span class="truncate">
+            {{ github.connected ? github.connection?.accountLogin : 'Connect GitHub' }}
+          </span>
+        </UButton>
+      </section>
+    </template>
+
+    <template v-if="documents.available && documents.sources.length">
+      <USeparator />
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Document sources
+        </h2>
+        <div class="space-y-1.5">
+          <UButton
+            v-for="src in documents.sources"
+            :key="src.source"
+            block
+            color="neutral"
+            variant="soft"
+            size="sm"
+            :icon="src.icon"
+            class="justify-start"
+            @click="ui.openDocumentConnect(src.source)"
+          >
+            <span class="truncate">
+              {{ documents.isConnected(src.source) ? src.label : `Connect ${src.label}` }}
+            </span>
+          </UButton>
+          <UButton
+            v-if="documents.anyConnected"
+            block
+            color="neutral"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-file-down"
+            class="justify-start"
+            @click="ui.openDocumentImport(null)"
+          >
+            Import &amp; spawn
+          </UButton>
+        </div>
+      </section>
+    </template>
+
+    <template v-if="tasks.available && tasks.sources.length">
+      <USeparator />
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Task sources
+        </h2>
+        <div class="space-y-1.5">
+          <UButton
+            v-for="src in tasks.sources"
+            :key="src.source"
+            block
+            color="neutral"
+            variant="soft"
+            size="sm"
+            :icon="src.icon"
+            class="justify-start"
+            @click="ui.openTaskConnect(src.source)"
+          >
+            <span class="truncate">
+              {{ tasks.isConnected(src.source) ? src.label : `Connect ${src.label}` }}
+            </span>
+          </UButton>
+          <UButton
+            v-if="tasks.anyConnected"
+            block
+            color="neutral"
+            variant="soft"
+            size="sm"
+            icon="i-lucide-file-down"
+            class="justify-start"
+            @click="ui.openTaskImport(null)"
+          >
+            Import issues
+          </UButton>
+        </div>
+      </section>
+    </template>
+
+    <UserMenu class="mt-auto" />
+  </aside>
+</template>

package/app/components/layout/SpendWarningBanner.vue

@@ -0,0 +1,107 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const workspace = useWorkspaceStore()
+
+const spend = computed(() => workspace.spend)
+/** Show the large warning only once the budget has been reached. */
+const exceeded = computed(() => spend.value?.exceeded ?? false)
+
+function money(amount: number, currency: string) {
+  try {
+    return new Intl.NumberFormat(undefined, { style: 'currency', currency }).format(amount)
+  } catch {
+    // Fall back if the currency code isn't recognised by the runtime.
+    return `${amount.toFixed(2)} ${currency}`
+  }
+}
+
+const tokens = computed(() => {
+  const s = spend.value
+  if (!s) return ''
+  return new Intl.NumberFormat().format(s.inputTokens + s.outputTokens)
+})
+
+const resuming = ref(false)
+async function resume() {
+  resuming.value = true
+  try {
+    await workspace.resumeSpend()
+  } finally {
+    resuming.value = false
+  }
+}
+</script>
+
+<template>
+  <Transition name="fade">
+    <div
+      v-if="exceeded && spend"
+      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-red-500/70 bg-red-950/95 p-5 shadow-2xl backdrop-blur"
+        role="alert"
+      >
+        <div class="flex items-start gap-4">
+          <UIcon name="i-lucide-octagon-alert" class="mt-0.5 h-10 w-10 shrink-0 text-red-400" />
+          <div class="min-w-0 flex-1">
+            <h2 class="text-lg font-semibold text-red-100">
+              Spend limit reached — agent execution paused
+            </h2>
+            <p class="mt-1 text-sm text-red-200/90">
+              This month's token spend has hit the configured budget, so running pipelines were
+              paused to avoid further cost. Execution resumes automatically when the budget rolls
+              over next month, or once the limit is raised.
+            </p>
+
+            <dl class="mt-4 grid grid-cols-2 gap-3 sm:grid-cols-3">
+              <div class="rounded-lg bg-red-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Spent</dt>
+                <dd class="text-base font-semibold tabular-nums text-red-50">
+                  {{ money(spend.costSpent, spend.currency) }}
+                </dd>
+              </div>
+              <div class="rounded-lg bg-red-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Budget</dt>
+                <dd class="text-base font-semibold tabular-nums text-red-50">
+                  {{ money(spend.costLimit, spend.currency) }}
+                </dd>
+              </div>
+              <div class="rounded-lg bg-red-900/50 px-3 py-2">
+                <dt class="text-[11px] uppercase tracking-wide text-red-300/80">Tokens</dt>
+                <dd class="text-base font-semibold tabular-nums text-red-50">{{ tokens }}</dd>
+              </div>
+            </dl>
+
+            <div class="mt-4 flex items-center gap-3">
+              <UButton
+                color="error"
+                variant="solid"
+                icon="i-lucide-play"
+                :loading="resuming"
+                @click="resume"
+              >
+                Resume anyway
+              </UButton>
+              <span class="text-xs text-red-300/70">
+                Resuming continues spending; it will pause again if still over budget.
+              </span>
+            </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>

package/app/components/palettes/AgentPalette.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { AgentKind } from '~/types/domain'
+
+const agents = useAgentsStore()
+defineEmits<{ (e: 'add', kind: AgentKind): void }>()
+</script>
+
+<template>
+  <div class="space-y-2">
+    <p class="px-1 text-[11px] text-slate-500">Click an agent to append it to the pipeline.</p>
+    <div class="space-y-1.5">
+      <button
+        v-for="a in agents.archetypes"
+        :key="a.kind"
+        type="button"
+        class="flex w-full items-center gap-2.5 rounded-lg border border-slate-700 bg-slate-800/60 p-2 text-left transition hover:border-slate-500 hover:bg-slate-800"
+        @click="$emit('add', a.kind)"
+      >
+        <div
+          class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg"
+          :style="{ backgroundColor: a.color + '22' }"
+        >
+          <UIcon :name="a.icon" class="h-4 w-4" :style="{ color: a.color }" />
+        </div>
+        <div class="min-w-0">
+          <div class="text-xs font-semibold text-slate-100">{{ a.label }}</div>
+          <div class="truncate text-[10px] text-slate-400">{{ a.description }}</div>
+        </div>
+        <UIcon name="i-lucide-plus" class="ml-auto h-4 w-4 shrink-0 text-slate-500" />
+      </button>
+    </div>
+  </div>
+</template>

package/app/components/palettes/BlockPalette.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { BlockType } from '~/types/domain'
+import { BLOCK_TYPE_META } from '~/utils/catalog'
+import { setDndPayload } from '~/utils/dnd'
+
+const types = Object.keys(BLOCK_TYPE_META) as BlockType[]
+
+function onDragStart(event: DragEvent, blockType: BlockType) {
+  setDndPayload(event, { kind: 'block', blockType })
+  ;(event.target as HTMLElement).classList.add('palette-dragging')
+}
+
+function onDragEnd(event: DragEvent) {
+  ;(event.target as HTMLElement).classList.remove('palette-dragging')
+}
+</script>
+
+<template>
+  <div class="space-y-2">
+    <p class="px-1 text-[11px] text-slate-500">Drag a block onto the board.</p>
+    <div class="grid grid-cols-2 gap-2">
+      <div
+        v-for="t in types"
+        :key="t"
+        draggable="true"
+        class="flex cursor-grab select-none flex-col items-center gap-1 rounded-lg border border-slate-700 bg-slate-800/60 p-2.5 transition hover:border-slate-500 hover:bg-slate-800 active:cursor-grabbing"
+        @dragstart="onDragStart($event, t)"
+        @dragend="onDragEnd"
+      >
+        <UIcon
+          :name="BLOCK_TYPE_META[t].icon"
+          class="h-5 w-5"
+          :style="{ color: BLOCK_TYPE_META[t].accent }"
+        />
+        <span class="text-[11px] font-medium text-slate-200">
+          {{ BLOCK_TYPE_META[t].label }}
+        </span>
+      </div>
+    </div>
+  </div>
+</template>