@cat-factory/app 0.6.0

package/app/components/layout/NotificationsInbox.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import type { Notification } from '~/types/domain'
+
+// The board's notification inbox: a bell with an open-count badge that opens a
+// panel of human-actionable items (a PR awaiting a merge decision, a completed
+// pipeline awaiting confirmation, CI that gave up). Each item can be acted on
+// (merge / confirm / retry) or dismissed. Hydrated from the snapshot and patched
+// live via the `notification` WorkspaceEvent.
+
+const notifications = useNotificationsStore()
+const ui = useUiStore()
+const execution = useExecutionStore()
+
+const busy = ref<string | null>(null)
+
+/** Per-type display metadata (icon, colour, primary-action label). */
+type Accent = 'warning' | 'primary' | 'error'
+const META: Record<Notification['type'], { icon: string; color: Accent; action: string }> = {
+  merge_review: { icon: 'i-lucide-git-pull-request-arrow', color: 'warning', action: 'Merge' },
+  pipeline_complete: { icon: 'i-lucide-circle-check', color: 'primary', action: 'Confirm & merge' },
+  ci_failed: { icon: 'i-lucide-triangle-alert', color: 'error', action: 'Retry run' },
+  test_failed: { icon: 'i-lucide-flask-conical', color: 'error', action: 'Retry run' },
+  // Clicking the title opens the review window for the task (see `reveal`); "act" just marks
+  // it read (the server performs no side-effect for this type).
+  requirement_review: { icon: 'i-lucide-clipboard-list', color: 'primary', action: 'Mark read' },
+  // Clicking the title opens the clarity review window for the task (see `reveal`); "act"
+  // just marks it read (the server performs no side-effect for this type).
+  clarity_review: { icon: 'i-lucide-bug', color: 'primary', action: 'Mark read' },
+  // A post-release Datadog regression the on-call agent investigated. The human decides
+  // whether to revert (in GitHub via the PR link) or acknowledge; "act" marks it handled.
+  release_regression: { icon: 'i-lucide-activity', color: 'error', action: 'Acknowledge' },
+  // Clicking the title opens the parked step's decision surface (companion → step detail
+  // with the iteration-cap prompt; requirements → the review window); "act" just marks it
+  // read (the decision itself is resolved in that surface, not here).
+  decision_required: { icon: 'i-lucide-circle-help', color: 'warning', action: 'Mark read' },
+}
+
+/** A notification the escalation sweep has flagged as overdue (waited past the threshold). */
+function isUrgent(n: Notification): boolean {
+  return n.severity === 'urgent'
+}
+
+/** True when any open notification is overdue — turns the toolbar bell red. */
+const hasUrgent = computed(() => notifications.open.some(isUrgent))
+
+/** Effective accent: urgent (red) overrides the type's base colour to convey "overdue". */
+function accent(n: Notification): Accent {
+  return isUrgent(n) ? 'error' : META[n.type].color
+}
+
+async function act(n: Notification) {
+  busy.value = n.id
+  try {
+    await notifications.act(n.id)
+  } finally {
+    busy.value = null
+  }
+}
+
+async function dismiss(n: Notification) {
+  busy.value = n.id
+  try {
+    await notifications.dismiss(n.id)
+  } finally {
+    busy.value = null
+  }
+}
+
+/**
+ * Clicking a notification's title takes the user where they can act on it. A
+ * `requirement_review` / `clarity_review` summons them straight back into the matching review
+ * window (the async incorporate/re-review raised new findings or hit the cap); every other
+ * type just focuses the related block on the board.
+ */
+function reveal(n: Notification) {
+  if (!n.blockId) return
+  if (n.type === 'requirement_review') ui.openRequirementReview(n.blockId)
+  else if (n.type === 'clarity_review') ui.openClarityReview(n.blockId)
+  else if (n.type === 'decision_required') revealDecision(n)
+  else ui.select(n.blockId)
+}
+
+/**
+ * Open the decision surface for a parked iteration-cap run: find the run's step that is
+ * waiting on a human and open it through the universal step dispatch — which routes a
+ * `requirements-review` step to the review window and a companion step to its detail
+ * panel (where the iteration-cap prompt lives). Falls back to focusing the block.
+ */
+function revealDecision(n: Notification) {
+  const instance = n.executionId ? execution.getInstance(n.executionId) : undefined
+  const idx = instance?.steps.findIndex((s) => s.state === 'waiting_decision') ?? -1
+  if (instance && idx >= 0) ui.openStepDetail(instance.id, idx)
+  else if (n.blockId) ui.select(n.blockId)
+}
+</script>
+
+<template>
+  <UPopover v-if="notifications.count" :content="{ align: 'end' }">
+    <UButton :color="hasUrgent ? 'error' : 'warning'" variant="soft" size="sm" icon="i-lucide-bell">
+      {{ notifications.count }}
+    </UButton>
+
+    <template #content>
+      <div class="max-h-[28rem] w-96 overflow-y-auto p-2">
+        <div class="px-2 py-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Needs your attention
+        </div>
+        <div
+          v-for="n in notifications.open"
+          :key="n.id"
+          class="rounded-lg border p-2.5 mt-1.5"
+          :class="
+            isUrgent(n)
+              ? 'border-error-500/60 bg-error-500/10'
+              : 'border-slate-700/60 bg-slate-800/40'
+          "
+        >
+          <div class="flex items-start gap-2">
+            <UIcon
+              :name="META[n.type].icon"
+              :class="`mt-0.5 h-4 w-4 text-${accent(n)}-400 shrink-0`"
+            />
+            <div class="min-w-0 flex-1">
+              <div class="flex items-center gap-1.5">
+                <button
+                  class="block min-w-0 flex-1 truncate text-left text-sm font-medium text-slate-200 hover:underline"
+                  :title="n.title"
+                  @click="reveal(n)"
+                >
+                  {{ n.title }}
+                </button>
+                <span
+                  v-if="isUrgent(n)"
+                  class="shrink-0 rounded bg-error-500/20 px-1.5 py-0.5 text-[10px] font-semibold uppercase tracking-wide text-error-400"
+                >
+                  Overdue
+                </span>
+              </div>
+              <p class="mt-0.5 text-[11px] leading-snug text-slate-400">{{ n.body }}</p>
+              <a
+                v-if="n.payload?.prUrl"
+                :href="n.payload.prUrl"
+                target="_blank"
+                rel="noopener"
+                class="mt-1 inline-flex items-center gap-1 text-[11px] text-sky-400 hover:underline"
+              >
+                <UIcon name="i-lucide-external-link" class="h-3 w-3" /> Open PR
+              </a>
+              <div class="mt-2 flex items-center gap-1.5">
+                <UButton
+                  :color="accent(n)"
+                  variant="soft"
+                  size="xs"
+                  :loading="busy === n.id"
+                  @click="act(n)"
+                >
+                  {{ META[n.type].action }}
+                </UButton>
+                <UButton
+                  color="neutral"
+                  variant="ghost"
+                  size="xs"
+                  :disabled="busy === n.id"
+                  @click="dismiss(n)"
+                >
+                  Dismiss
+                </UButton>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+  </UPopover>
+</template>

package/app/components/layout/SideBar.vue

@@ -0,0 +1,314 @@
+<script setup lang="ts">
+// The left navbar. The old draggable block/pipeline palettes are gone — blocks
+// and pipelines are created through the command bar (⌘K) and the board's own
+// affordances. This panel is now navigation + a command-bar launcher: quick
+// actions, repository management, integration management, the workspace-wide
+// context-fragment library, and workspace configuration (merge thresholds +
+// default models).
+import BoardSwitcher from '~/components/layout/BoardSwitcher.vue'
+import UserMenu from '~/components/auth/UserMenu.vue'
+
+const documents = useDocumentsStore()
+const tasks = useTasksStore()
+const github = useGitHubStore()
+const slack = useSlackStore()
+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 slack.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 />
+
+    <!-- Command bar launcher (⌘K) — the primary way to create blocks / pipelines
+         and reach every action below. -->
+    <button
+      type="button"
+      class="flex items-center gap-2 rounded-lg border border-slate-700 bg-slate-800/60 px-2.5 py-2 text-left text-sm text-slate-400 transition hover:border-slate-500 hover:bg-slate-800"
+      @click="ui.openCommandBar()"
+    >
+      <UIcon name="i-lucide-search" class="h-4 w-4 shrink-0" />
+      <span class="flex-1 truncate">Search or run a command…</span>
+      <UKbd value="⌘K" />
+    </button>
+
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Create
+      </h2>
+      <div class="space-y-1.5">
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-workflow"
+          class="justify-start"
+          @click="ui.openBuilder()"
+        >
+          Build a pipeline
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-plus"
+          class="justify-start"
+          @click="ui.openCommandBar()"
+        >
+          Add a block
+        </UButton>
+      </div>
+    </section>
+
+    <USeparator />
+
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Repositories
+      </h2>
+      <div class="space-y-1.5">
+        <UButton
+          v-if="github.available"
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-folder-git-2"
+          class="justify-start"
+          @click="ui.openAddService()"
+        >
+          Add from existing repo
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-git-branch-plus"
+          class="justify-start"
+          @click="ui.openBootstrap()"
+        >
+          Bootstrap repo
+        </UButton>
+      </div>
+    </section>
+
+    <USeparator />
+
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Integrations
+      </h2>
+      <div class="space-y-1.5">
+        <UButton
+          v-if="github.available"
+          block
+          color="primary"
+          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>
+
+        <UButton
+          v-if="slack.available"
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-slack"
+          class="justify-start"
+          @click="ui.openSlack()"
+        >
+          <span class="truncate">
+            {{ slack.connected ? slack.connection?.teamName : 'Connect Slack' }}
+          </span>
+        </UButton>
+
+        <template v-if="documents.available">
+          <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>
+        </template>
+
+        <template v-if="tasks.available">
+          <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>
+        </template>
+      </div>
+    </section>
+
+    <template v-if="library.available">
+      <USeparator />
+      <section>
+        <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+          Workspace context
+        </h2>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-book-marked"
+          class="justify-start"
+          @click="ui.openFragmentLibrary()"
+        >
+          Context fragments
+        </UButton>
+      </section>
+    </template>
+
+    <USeparator />
+    <section>
+      <h2 class="mb-2 px-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
+        Configuration
+      </h2>
+      <div class="space-y-1.5">
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-git-merge"
+          class="justify-start"
+          @click="ui.openMergeThresholds()"
+        >
+          Merge thresholds
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-sliders-horizontal"
+          class="justify-start"
+          @click="ui.openWorkspaceSettings()"
+        >
+          Workspace settings
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-activity"
+          class="justify-start"
+          @click="ui.openDatadog()"
+        >
+          Post-release health
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-cpu"
+          class="justify-start"
+          @click="ui.openModelDefaults()"
+        >
+          Default models
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-book-open-check"
+          class="justify-start"
+          @click="ui.openServiceFragmentDefaults()"
+        >
+          Default service best practices
+        </UButton>
+        <UButton
+          block
+          color="primary"
+          variant="soft"
+          size="sm"
+          icon="i-lucide-server"
+          class="justify-start"
+          @click="ui.openLocalModels()"
+        >
+          My local runners
+        </UButton>
+      </div>
+    </section>
+
+    <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>