@cat-factory/app 0.32.1 → 0.33.0

package/app/components/board/BoardCanvas.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { VueFlow, useVueFlow, type NodeMouseEvent } from '@vue-flow/core'
 import { Background } from '@vue-flow/background'
-import { Controls } from '@vue-flow/controls'
 import { MiniMap } from '@vue-flow/minimap'
 import BlockNode from './nodes/BlockNode.vue'
 import EpicNode from './nodes/EpicNode.vue'
@@ -177,7 +176,6 @@ async function onDrop(event: DragEvent) {
     >
       <Background pattern-color="#1e293b" :gap="22" :size="1.4" />
       <MiniMap pannable zoomable :node-color="minimapColor" class="!bg-slate-900/80" />
-      <Controls position="bottom-left" />
 
       <template #node-block="props">
         <BlockNode :id="props.id" />

package/app/components/layout/AccountTeamSettings.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, ref } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type { AccountRole } from '~/types/domain'
 import AccountDeploymentSettings from '~/components/layout/AccountDeploymentSettings.vue'
 
@@ -21,6 +21,12 @@ const ROLE_ITEMS: { label: string; value: AccountRole }[] = [
 
 /** Whether the signed-in caller is an admin of this account (drives edit affordances). */
 const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
+/**
+ * Members / roles / invitations are org-scoped — the backend rejects membership on a
+ * personal account. For a personal account we show a "create an organization" CTA in
+ * their place; the email sender + account API keys remain available either way.
+ */
+const isOrg = computed(() => accounts.activeAccount?.type === 'org')
 
 async function updateMemberRoles(userId: string, roles: AccountRole[]) {
   try {
@@ -41,16 +47,44 @@ function notifyError(title: string, e: unknown) {
   })
 }
 
-onMounted(async () => {
+async function loadAll(accountId: string) {
   try {
-    await Promise.all([
-      accounts.loadRoster(props.accountId),
-      accounts.loadEmailConnection(props.accountId),
-    ])
+    const jobs: Promise<unknown>[] = [accounts.loadEmailConnection(accountId)]
+    // The roster only applies to org accounts.
+    if (isOrg.value) jobs.push(accounts.loadRoster(accountId))
+    await Promise.all(jobs)
   } catch (e) {
     notifyError('Could not load team settings', e)
   }
-})
+}
+
+onMounted(() => void loadAll(props.accountId))
+// Reload when the active account changes while the panel is open (e.g. after creating an
+// organization from the CTA below, which switches the active account to the new org).
+watch(
+  () => props.accountId,
+  (id) => {
+    if (id) void loadAll(id)
+  },
+)
+
+// ---- create organization (personal-account CTA) ---------------------------
+const newOrgName = ref('')
+
+async function createOrganization() {
+  const name = newOrgName.value.trim()
+  if (!name) return
+  busy.value = true
+  try {
+    await accounts.createOrg(name)
+    newOrgName.value = ''
+    toast.add({ title: 'Organization created', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not create organization', e)
+  } finally {
+    busy.value = false
+  }
+}
 
 // ---- invitations ----------------------------------------------------------
 const inviteEmail = ref('')
@@ -125,8 +159,23 @@ async function disconnectEmail() {
 
 <template>
   <div class="space-y-6 text-sm">
+    <!-- personal-account CTA: members/roles/invitations need an organization -->
+    <section v-if="!isOrg" class="rounded-md border border-slate-800 bg-slate-800/40 p-4">
+      <h3 class="mb-1 font-semibold text-white">Invite teammates &amp; manage roles</h3>
+      <p class="mb-3 text-slate-400">
+        Members, roles and invitations live on an organization. Create one to invite teammates and
+        manage their roles — your personal boards stay as they are.
+      </p>
+      <form class="flex gap-2" @submit.prevent="createOrganization">
+        <UInput v-model="newOrgName" placeholder="Acme Inc." class="flex-1" />
+        <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-plus">
+          Create organization
+        </UButton>
+      </form>
+    </section>
+
     <!-- members -->
-    <section>
+    <section v-if="isOrg">
       <h3 class="mb-2 font-semibold text-white">Members</h3>
       <ul class="space-y-1">
         <li
@@ -153,7 +202,7 @@ async function disconnectEmail() {
     </section>
 
     <!-- invitations -->
-    <section>
+    <section v-if="isOrg">
       <h3 class="mb-2 font-semibold text-white">Invite a teammate</h3>
       <form class="flex gap-2" @submit.prevent="sendInvite">
         <UInput

package/app/components/layout/BoardSwitcher.vue

@@ -8,6 +8,7 @@ import type { CloudProvider } from '~/types/domain'
 // board switcher over the single unscoped context.
 const accounts = useAccountsStore()
 const workspace = useWorkspaceStore()
+const ui = useUiStore()
 const toast = useToast()
 
 const busy = ref(false)
@@ -52,10 +53,13 @@ const accountItems = computed<DropdownMenuItem[][]>(() => [
   })),
   [
     { label: 'New organization…', icon: 'i-lucide-plus', onSelect: () => openPrompt('account') },
-    // Team management (members + invitations + email sender) for org accounts.
-    ...(accounts.activeAccount?.type === 'org'
-      ? [{ label: 'Manage team…', icon: 'i-lucide-users', onSelect: () => openSettings() }]
-      : []),
+    // Account & team settings (members + roles + invitations + email sender). The panel
+    // itself handles personal accounts (prompting to create an org), so this is not gated.
+    {
+      label: 'Account settings…',
+      icon: 'i-lucide-users',
+      onSelect: () => ui.openAccountSettings(),
+    },
     // Admins can set the account-wide default provider new services inherit.
     ...(accounts.activeAccount?.roles?.includes('admin')
       ? [
@@ -184,12 +188,6 @@ async function submitPrompt() {
     busy.value = false
   }
 }
-
-// ---- account settings modal (members / invitations / email) ----------------
-const settingsOpen = ref(false)
-function openSettings() {
-  settingsOpen.value = true
-}
 </script>
 
 <template>
@@ -266,15 +264,5 @@ function openSettings() {
         </form>
       </template>
     </UModal>
-
-    <!-- account team settings: members, invitations, email sender -->
-    <UModal v-model:open="settingsOpen" title="Team settings">
-      <template #body>
-        <AccountTeamSettings
-          v-if="accounts.activeAccountId"
-          :account-id="accounts.activeAccountId"
-        />
-      </template>
-    </UModal>
   </div>
 </template>

package/app/components/layout/SideBar.vue

@@ -14,6 +14,7 @@ const github = useGitHubStore()
 const slack = useSlackStore()
 const library = useFragmentLibraryStore()
 const workspace = useWorkspaceStore()
+const accounts = useAccountsStore()
 const ui = useUiStore()
 
 // Resolve whether the document-source / task-source / GitHub integrations are
@@ -203,6 +204,20 @@ watch(
         >
           Model Configuration
         </UButton>
+        <!-- Account & team: members + roles, invitations, email sender, account API keys.
+             Shown once accounts (auth) are enabled. -->
+        <UButton
+          v-if="accounts.enabled"
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-users"
+          class="justify-start"
+          @click="ui.openAccountSettings()"
+        >
+          Account settings
+        </UButton>
       </div>
     </section>
 

package/app/components/settings/AccountSettingsPanel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+// Account & team settings — a modal host for the per-account team panel (members +
+// roles, invitations, email sender, account-wide API keys). Account-scoped, distinct
+// from Workspace settings. Opened from the SideBar Configuration section and the
+// account switcher; bound to the `ui` store so any surface can open it.
+import AccountTeamSettings from '~/components/layout/AccountTeamSettings.vue'
+
+const ui = useUiStore()
+const accounts = useAccountsStore()
+
+const open = computed({
+  get: () => ui.accountSettingsOpen,
+  set: (v: boolean) => (v ? ui.openAccountSettings() : ui.closeAccountSettings()),
+})
+</script>
+
+<template>
+  <UModal v-model:open="open" title="Account & team" :ui="{ content: 'max-w-3xl' }">
+    <template #body>
+      <AccountTeamSettings v-if="accounts.activeAccountId" :account-id="accounts.activeAccountId" />
+      <p v-else class="text-sm text-slate-400">No account selected.</p>
+    </template>
+  </UModal>
+</template>

package/app/components/settings/ProviderConnectionPanel.vue

@@ -44,6 +44,41 @@ const meta = computed(() => (kind.value ? META[kind.value] : null))
 const descriptor = computed(() => (kind.value ? store.descriptorFor(kind.value) : null))
 const connection = computed(() => (kind.value ? store.connectionFor(kind.value) : null))
 
+// --- Local-mode infrastructure delegation -------------------------------------------
+// In local mode this same screen is where a developer chooses, per workspace, whether to
+// run on this machine (host Docker for agents, in-container docker-compose for the Tester)
+// or delegate to an external service. The two opt-ins live here together to make the
+// cross-cutting nature explicit: the environment provider you configure on this screen is
+// one half; the runner pool (its own screen) is the other. Each toggle is enabled only
+// once its provider is registered. Shown only in local mode and only on the environment
+// kind (so it appears once, alongside the env provider it relates to).
+const auth = useAuthStore()
+const settings = useWorkspaceSettingsStore()
+const isLocal = computed(() => auth.localMode?.enabled === true)
+const showLocalDelegation = computed(() => isLocal.value && kind.value === 'environment')
+// Gating: a toggle's external option is selectable only when its provider is registered.
+const runnerPoolRegistered = computed(() => !!store.connectionFor('runner-pool'))
+const envRegistered = computed(() => !!store.connectionFor('environment'))
+const savingDelegation = ref(false)
+
+async function setDelegation(patch: {
+  delegateAgentsToRunnerPool?: boolean
+  delegateTestEnvToProvider?: boolean
+}) {
+  savingDelegation.value = true
+  try {
+    await settings.update(patch)
+  } catch (e) {
+    notifyError('Could not update delegation', e)
+  } finally {
+    savingDelegation.value = false
+  }
+}
+
+function openRunnerPoolPanel() {
+  ui.openProviderConnection('runner-pool')
+}
+
 // "View logs": the provisioning event history for this provider's subsystem — every
 // spin-up / tear-down attempt with its outcome and the exact error. The panel kind
 // maps 1:1 to the log subsystem ('environment' / 'runner-pool').
@@ -82,6 +117,9 @@ watch(
   kind,
   (k) => {
     if (k) void store.loadKind(k).then(resetDraft)
+    // In local mode the env panel also gates the agents toggle on a registered runner
+    // pool, so load that provider's connection state too (the env kind already loads above).
+    if (k === 'environment' && isLocal.value) void store.loadKind('runner-pool')
   },
   { immediate: true },
 )
@@ -228,6 +266,85 @@ function fieldHelp(key: string): string | undefined {
       <IntegrationBackTitle :title="meta?.title ?? 'Provider'" @back="back" />
     </template>
     <template #body>
+      <!-- Local-mode infrastructure delegation: the local-vs-external choice for BOTH
+           container agents AND the Tester's ephemeral environments, made once here. -->
+      <section
+        v-if="showLocalDelegation"
+        class="mb-4 space-y-3 rounded-lg border border-slate-700 bg-slate-900/40 p-3"
+      >
+        <div>
+          <h3 class="text-sm font-semibold text-slate-200">Local delegation</h3>
+          <p class="mt-1 text-[11px] text-slate-400">
+            By default this machine runs everything locally — container agents on host Docker, the
+            Tester's infrastructure via in-container docker-compose. Opt in below to delegate either
+            concern to an external service instead. Applies only in local mode.
+          </p>
+        </div>
+
+        <!-- Container agents → self-hosted runner pool -->
+        <div class="space-y-1">
+          <label class="flex items-center gap-2">
+            <USwitch
+              size="sm"
+              :model-value="settings.settings.delegateAgentsToRunnerPool"
+              :disabled="savingDelegation || !runnerPoolRegistered"
+              @update:model-value="(v) => setDelegation({ delegateAgentsToRunnerPool: v })"
+            />
+            <span class="text-sm text-slate-200">Run container agents on the runner pool</span>
+          </label>
+          <p class="pl-9 text-[11px] text-slate-400">
+            Dispatch every container agent (coder, tester, merger, bootstrap, …) to this workspace's
+            self-hosted runner pool instead of host Docker.
+            <template v-if="!runnerPoolRegistered">
+              <button
+                type="button"
+                class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
+                @click="openRunnerPoolPanel"
+              >
+                Register a runner pool
+              </button>
+              first to enable this.
+            </template>
+          </p>
+        </div>
+
+        <!-- Tester environments → environment provider -->
+        <div class="space-y-1">
+          <label class="flex items-center gap-2">
+            <USwitch
+              size="sm"
+              :model-value="settings.settings.delegateTestEnvToProvider"
+              :disabled="savingDelegation || !envRegistered"
+              @update:model-value="(v) => setDelegation({ delegateTestEnvToProvider: v })"
+            />
+            <span class="text-sm text-slate-200">
+              Provision Tester environments via the provider
+            </span>
+          </label>
+          <p class="pl-9 text-[11px] text-slate-400">
+            Stand the Tester's preview environment up through the environment provider configured
+            below instead of in-container docker-compose. Connect a provider first to enable this.
+          </p>
+        </div>
+      </section>
+
+      <!-- In local mode the local-vs-external toggle for agents lives on the Ephemeral
+           environments screen (alongside the env toggle), so they're configured together. -->
+      <p
+        v-if="isLocal && kind === 'runner-pool'"
+        class="mb-4 rounded-md border border-slate-700 bg-slate-900/40 px-3 py-2 text-[11px] text-slate-400"
+      >
+        Register your pool here, then enable "Run container agents on the runner pool" on the
+        <button
+          type="button"
+          class="text-sky-400 underline underline-offset-2 hover:text-sky-300"
+          @click="ui.openProviderConnection('environment')"
+        >
+          Ephemeral environments
+        </button>
+        screen to route this workspace's agents to it.
+      </p>
+
       <div v-if="descriptor" class="space-y-4">
         <div class="flex items-start justify-between gap-3">
           <p class="text-xs text-slate-400">{{ meta?.blurb }}</p>

package/app/pages/index.vue

@@ -29,6 +29,7 @@ import FragmentLibraryPanel from '~/components/fragments/FragmentLibraryPanel.vu
 import CommandBar from '~/components/layout/CommandBar.vue'
 import IntegrationsHub from '~/components/layout/IntegrationsHub.vue'
 import WorkspaceSettingsPanel from '~/components/settings/WorkspaceSettingsPanel.vue'
+import AccountSettingsPanel from '~/components/settings/AccountSettingsPanel.vue'
 import ObservabilityConnectionPanel from '~/components/settings/ObservabilityConnectionPanel.vue'
 import ProviderConnectionPanel from '~/components/settings/ProviderConnectionPanel.vue'
 import ProviderConfigBanner from '~/components/layout/ProviderConfigBanner.vue'
@@ -188,6 +189,7 @@ watch(
       <CommandBar />
       <IntegrationsHub />
       <WorkspaceSettingsPanel />
+      <AccountSettingsPanel />
       <ObservabilityConnectionPanel />
       <ProviderConnectionPanel />
       <ModelConfigurationPanel />

package/app/stores/ui.ts

@@ -96,6 +96,9 @@ export const useUiStore = defineStore('ui', () => {
   // `workspaceSettingsTab` lets other surfaces deep-link straight to a tab.
   const workspaceSettingsOpen = ref(false)
   const workspaceSettingsTab = ref('workspace')
+  // Account/team-settings modal: the per-account members + roles + invitations + email
+  // sender panel (`AccountTeamSettings`). Account-scoped (distinct from workspace settings).
+  const accountSettingsOpen = ref(false)
   // Observability integration: the post-release-health connection panel (Datadog
   // today, pluggable). NB: distinct from `observabilityInstanceId` below, which is the
   // LLM per-call observability panel.
@@ -380,6 +383,13 @@ export const useUiStore = defineStore('ui', () => {
   function setWorkspaceSettingsTab(tab: string) {
     workspaceSettingsTab.value = tab
   }
+  function openAccountSettings() {
+    cameFromIntegrations.value = false
+    accountSettingsOpen.value = true
+  }
+  function closeAccountSettings() {
+    accountSettingsOpen.value = false
+  }
   function openObservabilityConnection() {
     cameFromIntegrations.value = false
     observabilityConnectionOpen.value = true
@@ -555,6 +565,7 @@ export const useUiStore = defineStore('ui', () => {
     cameFromIntegrations,
     workspaceSettingsOpen,
     workspaceSettingsTab,
+    accountSettingsOpen,
     observabilityConnectionOpen,
     providerConnectionKind,
     modelConfigOpen,
@@ -617,6 +628,8 @@ export const useUiStore = defineStore('ui', () => {
     openWorkspaceSettings,
     closeWorkspaceSettings,
     setWorkspaceSettingsTab,
+    openAccountSettings,
+    closeAccountSettings,
     openObservabilityConnection,
     closeObservabilityConnection,
     openProviderConnection,

package/app/stores/workspaceSettings.ts

@@ -11,6 +11,8 @@ const DEFAULTS: WorkspaceSettings = {
   taskLimitPerType: null,
   storeAgentContext: true,
   kaizenEnabled: true,
+  delegateAgentsToRunnerPool: false,
+  delegateTestEnvToProvider: false,
   spendCurrency: null,
   spendMonthlyLimit: null,
 }

package/app/types/domain.ts

@@ -512,6 +512,10 @@ export interface WorkspaceSettings {
   storeAgentContext: boolean
   /** Whether the Kaizen agent grades agent steps after each run. On by default. */
   kaizenEnabled: boolean
+  /** Local mode only: dispatch container agents to the runner pool instead of host Docker. */
+  delegateAgentsToRunnerPool: boolean
+  /** Local mode only: provision Tester environments via the env provider instead of DinD. */
+  delegateTestEnvToProvider: boolean
   /** Spend budget currency (ISO 4217). Null ⇒ the built-in default (`EUR`). */
   spendCurrency: string | null
   /** Monthly spend budget in `spendCurrency`. Null ⇒ the built-in default. */
@@ -526,6 +530,8 @@ export interface UpdateWorkspaceSettingsInput {
   taskLimitPerType?: Partial<Record<CreateTaskType, number>> | null
   storeAgentContext?: boolean
   kaizenEnabled?: boolean
+  delegateAgentsToRunnerPool?: boolean
+  delegateTestEnvToProvider?: boolean
   spendCurrency?: string | null
   spendMonthlyLimit?: number | null
 }

package/nuxt.config.ts

@@ -49,7 +49,6 @@ export default defineNuxtConfig({
   css: [
     '@vue-flow/core/dist/style.css',
     '@vue-flow/core/dist/theme-default.css',
-    '@vue-flow/controls/dist/style.css',
     '@vue-flow/minimap/dist/style.css',
     '@vue-flow/node-resizer/dist/style.css',
     join(layerDir, 'app/assets/css/main.css'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cat-factory/app",
-  "version": "0.32.1",
+  "version": "0.33.0",
   "description": "Reusable Nuxt layer for the Agent Architecture Board SPA (components, stores, composables, pages). Consume it from a thin deployment app via `extends: ['@cat-factory/app']` and point it at your backend with NUXT_PUBLIC_API_BASE. See deploy/frontend for an example.",
   "repository": {
     "type": "git",
@@ -20,7 +20,6 @@
     "@nuxt/ui": "^4.9.0",
     "@pinia/nuxt": "^0.11.3",
     "@vue-flow/background": "^1.3.2",
-    "@vue-flow/controls": "^1.1.3",
     "@vue-flow/core": "^1.48.2",
     "@vue-flow/minimap": "^1.5.4",
     "@vue-flow/node-resizer": "^1.5.1",