@cat-factory/app 0.6.0

package/app/components/github/RepoTreeBrowser.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// A reusable GitHub repo tree browser: lists one level of a repo at a time
+// (breadcrumb-navigable) and lets the user PICK a path. Two modes:
+//   - `dir`  — pick a subdirectory (the monorepo service-directory picker), and
+//   - `file` — pick a file (the service docker-compose location picker).
+// The selected path (relative to the repo root, as GitHub returns it) is exposed
+// via `v-model`. The component owns its own navigation/loading state so callers
+// just bind a repo id + mode; it self-loads on mount and when those change.
+import type { RepoTreeEntry } from '~/types/domain'
+
+const props = withDefaults(
+  defineProps<{
+    repoGithubId: number
+    mode?: 'dir' | 'file'
+    /** Currently picked path (repo-root-relative), via v-model. */
+    modelValue?: string
+    /** Directory to open at (e.g. a monorepo service's subdirectory). */
+    startPath?: string
+  }>(),
+  { mode: 'dir', startPath: '' },
+)
+const emit = defineEmits<{ 'update:modelValue': [string | undefined] }>()
+
+const github = useGitHubStore()
+const toast = useToast()
+
+const currentPath = ref(props.startPath)
+const treeEntries = ref<RepoTreeEntry[]>([])
+const loading = ref(false)
+
+const dirEntries = computed(() => treeEntries.value.filter((e) => e.type === 'dir'))
+const fileEntries = computed(() => treeEntries.value.filter((e) => e.type === 'file'))
+const isEmpty = computed(() =>
+  props.mode === 'dir' ? dirEntries.value.length === 0 : treeEntries.value.length === 0,
+)
+
+const breadcrumbs = computed(() => {
+  const segments = currentPath.value ? currentPath.value.split('/') : []
+  let acc = ''
+  return segments.map((seg) => {
+    acc = acc ? `${acc}/${seg}` : seg
+    return { label: seg, path: acc }
+  })
+})
+
+async function browseTo(path: string) {
+  loading.value = true
+  try {
+    currentPath.value = path
+    treeEntries.value = await github.loadRepoTree(props.repoGithubId, path)
+  } catch (e) {
+    treeEntries.value = []
+    toast.add({
+      title: 'Could not list directory',
+      description: e instanceof Error ? e.message : String(e),
+      icon: 'i-lucide-triangle-alert',
+      color: 'error',
+    })
+  } finally {
+    loading.value = false
+  }
+}
+
+function pick(path: string) {
+  emit('update:modelValue', path)
+}
+
+// Re-open at the start path whenever the repo (or requested root) changes.
+watch(
+  () => [props.repoGithubId, props.startPath] as const,
+  () => void browseTo(props.startPath ?? ''),
+  { immediate: true },
+)
+</script>
+
+<template>
+  <div>
+    <!-- breadcrumbs -->
+    <div class="mb-2 flex flex-wrap items-center gap-1 text-sm">
+      <UButton
+        size="xs"
+        variant="ghost"
+        color="neutral"
+        icon="i-lucide-folder-tree"
+        :disabled="loading"
+        @click="browseTo('')"
+      >
+        root
+      </UButton>
+      <template v-for="crumb in breadcrumbs" :key="crumb.path">
+        <span class="text-slate-600">/</span>
+        <UButton
+          size="xs"
+          variant="ghost"
+          color="neutral"
+          :disabled="loading"
+          @click="browseTo(crumb.path)"
+        >
+          {{ crumb.label }}
+        </UButton>
+      </template>
+    </div>
+
+    <!-- listing -->
+    <div class="max-h-56 overflow-auto rounded border border-slate-800">
+      <div v-if="loading" class="p-3 text-sm text-slate-400">Loading…</div>
+      <div v-else-if="isEmpty" class="p-3 text-sm text-slate-400">
+        {{ mode === 'dir' ? 'No subdirectories here.' : 'Nothing here.' }}
+      </div>
+      <ul v-else class="divide-y divide-slate-800">
+        <li
+          v-for="entry in dirEntries"
+          :key="entry.path"
+          class="flex items-center justify-between gap-2 px-3 py-1.5"
+        >
+          <button
+            type="button"
+            class="flex items-center gap-2 truncate text-sm text-slate-200 hover:text-primary-400"
+            @click="browseTo(entry.path)"
+          >
+            <UIcon name="i-lucide-folder" class="h-4 w-4 shrink-0 text-amber-400" />
+            <span class="truncate">{{ entry.name }}</span>
+          </button>
+          <UButton
+            v-if="mode === 'dir'"
+            size="xs"
+            variant="soft"
+            :color="modelValue === entry.path ? 'primary' : 'neutral'"
+            @click="pick(entry.path)"
+          >
+            {{ modelValue === entry.path ? 'Selected' : 'Select' }}
+          </UButton>
+        </li>
+        <template v-if="mode === 'file'">
+          <li
+            v-for="entry in fileEntries"
+            :key="entry.path"
+            class="flex items-center justify-between gap-2 px-3 py-1.5"
+          >
+            <button
+              type="button"
+              class="flex items-center gap-2 truncate text-sm hover:text-primary-400"
+              :class="modelValue === entry.path ? 'text-primary-400' : 'text-slate-300'"
+              @click="pick(entry.path)"
+            >
+              <UIcon name="i-lucide-file" class="h-4 w-4 shrink-0 text-slate-400" />
+              <span class="truncate">{{ entry.name }}</span>
+            </button>
+            <UIcon
+              v-if="modelValue === entry.path"
+              name="i-lucide-check"
+              class="h-4 w-4 shrink-0 text-primary-400"
+            />
+          </li>
+        </template>
+      </ul>
+    </div>
+
+    <!-- dir mode: pin the current folder without descending into a child -->
+    <div v-if="mode === 'dir' && currentPath" class="mt-2 flex justify-end">
+      <UButton
+        size="xs"
+        variant="soft"
+        :color="modelValue === currentPath ? 'primary' : 'neutral'"
+        @click="pick(currentPath)"
+      >
+        Use this folder
+      </UButton>
+    </div>
+  </div>
+</template>

package/app/components/layout/AccountTeamSettings.vue

@@ -0,0 +1,237 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import type { AccountRole } from '~/types/domain'
+
+// Team settings for an org account: the member roster (with combinable admin /
+// developer / product roles), pending email invitations, and the per-account
+// transactional-email sender. Admin-only mutations are enforced by the backend; this
+// surface degrades to a read-only view when the caller isn't an admin (actions 4xx).
+const props = defineProps<{ accountId: string }>()
+
+const accounts = useAccountsStore()
+const toast = useToast()
+const busy = ref(false)
+
+const ROLE_ITEMS: { label: string; value: AccountRole }[] = [
+  { label: 'Admin', value: 'admin' },
+  { label: 'Developer', value: 'developer' },
+  { label: 'Product', value: 'product' },
+]
+
+/** Whether the signed-in caller is an admin of this account (drives edit affordances). */
+const isAdmin = computed(() => accounts.activeAccount?.roles?.includes('admin') ?? false)
+
+async function updateMemberRoles(userId: string, roles: AccountRole[]) {
+  try {
+    await accounts.setMemberRoles(props.accountId, userId, roles.length ? roles : ['developer'])
+  } catch (e) {
+    notifyError('Could not update roles', e)
+  }
+}
+
+function notifyError(title: string, e: unknown) {
+  toast.add({
+    title,
+    description:
+      (e as { data?: { error?: { message?: string } } })?.data?.error?.message ??
+      (e instanceof Error ? e.message : String(e)),
+    icon: 'i-lucide-triangle-alert',
+    color: 'error',
+  })
+}
+
+onMounted(async () => {
+  try {
+    await Promise.all([
+      accounts.loadRoster(props.accountId),
+      accounts.loadEmailConnection(props.accountId),
+    ])
+  } catch (e) {
+    notifyError('Could not load team settings', e)
+  }
+})
+
+// ---- invitations ----------------------------------------------------------
+const inviteEmail = ref('')
+const inviteRoles = ref<AccountRole[]>(['developer'])
+
+async function sendInvite() {
+  if (!inviteEmail.value.trim()) return
+  busy.value = true
+  try {
+    const acceptUrl = await accounts.invite(
+      props.accountId,
+      inviteEmail.value.trim(),
+      inviteRoles.value.length ? inviteRoles.value : ['developer'],
+    )
+    inviteEmail.value = ''
+    toast.add({
+      title: 'Invitation created',
+      description: acceptUrl
+        ? 'An email was sent (or copy the link from the list below).'
+        : 'Share the accept link with your teammate.',
+      icon: 'i-lucide-mail-check',
+    })
+  } catch (e) {
+    notifyError('Could not send invitation', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function revoke(id: string) {
+  try {
+    await accounts.revokeInvite(props.accountId, id)
+  } catch (e) {
+    notifyError('Could not revoke invitation', e)
+  }
+}
+
+// ---- email sender ---------------------------------------------------------
+const emailProvider = ref<'sendgrid' | 'resend'>('resend')
+const emailApiKey = ref('')
+const emailFrom = ref('')
+
+async function connectEmail() {
+  if (!emailApiKey.value.trim() || !emailFrom.value.trim()) return
+  busy.value = true
+  try {
+    await accounts.connectEmail(props.accountId, {
+      provider: emailProvider.value,
+      apiKey: emailApiKey.value.trim(),
+      fromAddress: emailFrom.value.trim(),
+    })
+    emailApiKey.value = ''
+    toast.add({ title: 'Email sender connected', icon: 'i-lucide-check' })
+  } catch (e) {
+    notifyError('Could not connect email sender', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+async function disconnectEmail() {
+  busy.value = true
+  try {
+    await accounts.disconnectEmail(props.accountId)
+  } catch (e) {
+    notifyError('Could not disconnect email sender', e)
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-6 text-sm">
+    <!-- members -->
+    <section>
+      <h3 class="mb-2 font-semibold text-white">Members</h3>
+      <ul class="space-y-1">
+        <li
+          v-for="m in accounts.members"
+          :key="m.userId"
+          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1"
+        >
+          <span class="truncate">{{ m.name || m.email || m.userId }}</span>
+          <USelect
+            v-if="isAdmin"
+            :model-value="m.roles"
+            multiple
+            :items="ROLE_ITEMS"
+            size="xs"
+            class="w-44"
+            @update:model-value="(r: AccountRole[]) => updateMemberRoles(m.userId, r)"
+          />
+          <span v-else class="text-xs uppercase tracking-wide text-slate-400">
+            {{ m.roles.join(', ') }}
+          </span>
+        </li>
+        <li v-if="accounts.members.length === 0" class="text-slate-500">No members yet.</li>
+      </ul>
+    </section>
+
+    <!-- invitations -->
+    <section>
+      <h3 class="mb-2 font-semibold text-white">Invite a teammate</h3>
+      <form class="flex gap-2" @submit.prevent="sendInvite">
+        <UInput
+          v-model="inviteEmail"
+          type="email"
+          placeholder="teammate@example.com"
+          class="flex-1"
+        />
+        <USelect v-model="inviteRoles" multiple :items="ROLE_ITEMS" class="w-44" />
+        <UButton type="submit" color="primary" :loading="busy" icon="i-lucide-send">Invite</UButton>
+      </form>
+
+      <ul v-if="accounts.invitations.length" class="mt-3 space-y-1">
+        <li
+          v-for="inv in accounts.invitations"
+          :key="inv.id"
+          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1"
+        >
+          <span class="truncate">{{ inv.email }}</span>
+          <span class="flex items-center gap-2 text-xs">
+            <span class="uppercase tracking-wide text-slate-400">{{ inv.status }}</span>
+            <UButton
+              v-if="inv.status === 'pending'"
+              size="xs"
+              color="error"
+              variant="ghost"
+              icon="i-lucide-x"
+              @click="revoke(inv.id)"
+            />
+          </span>
+        </li>
+      </ul>
+    </section>
+
+    <!-- email sender -->
+    <section>
+      <h3 class="mb-2 font-semibold text-white">Email sender</h3>
+      <p v-if="!accounts.emailConfigured" class="text-slate-500">
+        Email delivery is not enabled on this deployment. Invitations still produce a shareable
+        accept link.
+      </p>
+      <template v-else>
+        <div
+          v-if="accounts.emailConnection"
+          class="flex items-center justify-between rounded-md bg-slate-800/40 px-2 py-1.5"
+        >
+          <span>
+            Connected via <strong>{{ accounts.emailConnection.provider }}</strong> as
+            {{ accounts.emailConnection.fromAddress }}
+          </span>
+          <UButton size="xs" color="error" variant="ghost" :loading="busy" @click="disconnectEmail">
+            Disconnect
+          </UButton>
+        </div>
+        <form v-else class="space-y-2" @submit.prevent="connectEmail">
+          <USelect
+            v-model="emailProvider"
+            :items="[
+              { label: 'Resend', value: 'resend' },
+              { label: 'SendGrid', value: 'sendgrid' },
+            ]"
+            class="w-full"
+          />
+          <UInput v-model="emailFrom" type="email" placeholder="From address" class="w-full" />
+          <UInput
+            v-model="emailApiKey"
+            type="password"
+            placeholder="Provider API key"
+            class="w-full"
+          />
+          <UButton type="submit" color="primary" :loading="busy">Connect email sender</UButton>
+        </form>
+      </template>
+    </section>
+
+    <!-- account-wide provider API keys (admin-only) -->
+    <section v-if="isAdmin">
+      <h3 class="mb-2 font-semibold text-white">Account API keys</h3>
+      <ProvidersApiKeysSection :account-id="accountId" />
+    </section>
+  </div>
+</template>

package/app/components/layout/BoardSwitcher.vue

@@ -0,0 +1,280 @@
+<script setup lang="ts">
+import type { DropdownMenuItem } from '@nuxt/ui'
+import type { CloudProvider } from '~/types/domain'
+
+// 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',
+  })
+}
+
+// The cloud provider new services in the active account default to (a service may
+// override it per-frame). `docker` is the local Docker/Podman backend.
+const PROVIDERS: { value: CloudProvider; label: string }[] = [
+  { value: 'cloudflare', label: 'Cloudflare' },
+  { value: 'docker', label: 'Docker (local)' },
+  { value: 'aws', label: 'AWS' },
+  { value: 'gcp', label: 'GCP' },
+  { value: 'azure', label: 'Azure' },
+  { value: 'custom', label: 'Custom' },
+]
+
+async function setDefaultProvider(provider: CloudProvider) {
+  const id = accounts.activeAccountId
+  if (!id) return
+  try {
+    await accounts.setDefaultCloudProvider(id, provider)
+  } catch (e) {
+    notifyError('Could not update default provider', e)
+  }
+}
+
+// ---- 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') },
+    // Team management (members + invitations + email sender) for org accounts.
+    ...(accounts.activeAccount?.type === 'org'
+      ? [{ label: 'Manage team…', icon: 'i-lucide-users', onSelect: () => openSettings() }]
+      : []),
+    // Admins can set the account-wide default provider new services inherit.
+    ...(accounts.activeAccount?.roles?.includes('admin')
+      ? [
+          {
+            label: 'Default cloud provider',
+            icon: 'i-lucide-cloud',
+            children: PROVIDERS.map((p) => ({
+              label: p.label,
+              trailingIcon:
+                (accounts.activeAccount?.defaultCloudProvider ?? 'cloudflare') === p.value
+                  ? 'i-lucide-check'
+                  : undefined,
+              onSelect: () => void setDefaultProvider(p.value),
+            })),
+          },
+        ]
+      : []),
+  ],
+])
+
+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('')
+// Board create/rename also carries an optional description (Part C of onboarding).
+const promptDescription = 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: 'Board settings', placeholder: 'Board name', cta: 'Save' },
+}
+/** Whether the current prompt edits a board (so it shows the description field). */
+const promptHasDescription = computed(() => prompt.value === 'board' || prompt.value === 'rename')
+
+function openPrompt(kind: PromptKind) {
+  prompt.value = kind
+  promptValue.value = kind === 'rename' ? (workspace.activeWorkspace?.name ?? '') : ''
+  promptDescription.value = kind === 'rename' ? (workspace.activeWorkspace?.description ?? '') : ''
+}
+
+async function submitPrompt() {
+  const kind = prompt.value
+  const name = promptValue.value.trim()
+  const description = promptDescription.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, description || undefined)
+    } else if (workspace.workspaceId) {
+      await workspace.update(workspace.workspaceId, {
+        name,
+        description: description || null,
+      })
+    }
+    prompt.value = null
+  } catch (e) {
+    notifyError('Action failed', e)
+  } finally {
+    busy.value = false
+  }
+}
+
+// ---- account settings modal (members / invitations / email) ----------------
+const settingsOpen = ref(false)
+function openSettings() {
+  settingsOpen.value = true
+}
+</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>
+          <UFormField v-if="promptHasDescription" label="Description" hint="Optional">
+            <UTextarea
+              v-model="promptDescription"
+              :rows="3"
+              placeholder="What is this board for?"
+              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>
+
+    <!-- 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>