@cat-factory/app 0.6.0

package/app/stores/ui.ts

@@ -0,0 +1,434 @@
+import { defineStore } from 'pinia'
+import { ref, computed } from 'vue'
+import type { DocumentSourceKind, TaskSourceKind, LodLevel } from '~/types/domain'
+import { zoomToLod, lodAtLeast } from '~/composables/useSemanticZoom'
+import { useExecutionStore } from '~/stores/execution'
+import { agentKindMeta } from '~/utils/catalog'
+
+/** Transient UI state: selection, panels, zoom level. */
+export const useUiStore = defineStore('ui', () => {
+  const selectedBlockId = ref<string | null>(null)
+  const focusBlockId = ref<string | null>(null)
+  const builderOpen = ref(false)
+  const decisionContext = ref<{ instanceId: string; decisionId: string } | null>(null)
+
+  // Document-source integration modals, keyed by source. `documentImport` and
+  // `spawnPreview` carry an optional target frame, so structure spawned from a
+  // frame's inspector lands inside that frame rather than creating new top-level
+  // frames. `documentConnect` carries the source whose connect form to show;
+  // `documentImport`'s source may be null to let the modal pick a connected one.
+  const documentConnect = ref<{ source: DocumentSourceKind } | null>(null)
+  const documentImport = ref<{
+    source: DocumentSourceKind | null
+    targetFrameId: string | null
+  } | null>(null)
+  const spawnPreview = ref<{
+    source: DocumentSourceKind
+    externalId: string
+    targetFrameId: string | null
+  } | null>(null)
+
+  // Task-source integration modals, keyed by source. `taskConnect` carries the
+  // source whose connect form to show; `taskImport`'s source may be null to let
+  // the modal pick a connected one (there is no spawn target — issues are linked
+  // to a block for context, not expanded into structure).
+  const taskConnect = ref<{ source: TaskSourceKind } | null>(null)
+  const taskImport = ref<{ source: TaskSourceKind | null } | null>(null)
+
+  // Add-task modal: the container (service frame or module) a new task is being
+  // added to, or null when closed. The user types the title + description; nothing
+  // is launched until they explicitly start the created task.
+  const addTaskContainerId = ref<string | null>(null)
+
+  // Add-recurring-pipeline modal: the service frame a new recurring pipeline is
+  // being added to, or null when closed (mirrors the add-task flow — a button on
+  // the frame opens it, scoped to that frame).
+  const addRecurringFrameId = ref<string | null>(null)
+
+  // Repo-bootstrap modal (manage reference architectures + launch a bootstrap).
+  const bootstrapOpen = ref(false)
+
+  // "Add a service from an existing GitHub repo" modal (no bootstrap run).
+  const addServiceOpen = ref(false)
+
+  // GitHub integration panel (connection management + repo/PR/issue browsing).
+  const githubOpen = ref(false)
+
+  // Slack integration panel (connect the account's Slack + per-workspace routing).
+  const slackOpen = ref(false)
+
+  // Prompt-fragment library panel (manage the board's best-practice catalog +
+  // linked guideline repos; ADR 0006).
+  const fragmentLibraryOpen = ref(false)
+
+  // Command bar (⌘K) — searchable launcher for every navbar action.
+  const commandBarOpen = ref(false)
+
+  // Workspace-settings panels: merge-threshold preset library + per-agent-kind
+  // default model overrides.
+  const mergeThresholdsOpen = ref(false)
+  // Workspace-settings panel: the run-timing escalation threshold + per-service task limit.
+  const workspaceSettingsOpen = ref(false)
+  const datadogOpen = ref(false)
+  const modelDefaultsOpen = ref(false)
+  // Workspace-settings panel: the default service-fragment selection new services inherit.
+  const serviceFragmentDefaultsOpen = ref(false)
+  // LLM-vendor subscription credentials (the token pool powering the Claude Code
+  // / Codex harnesses).
+  const vendorCredentialsOpen = ref(false)
+  // Per-user settings panel: the signed-in user's own-machine local model runners.
+  const localModelsOpen = ref(false)
+
+  // Dedicated result-view overlay: a step whose agent kind declares a bespoke
+  // visualization (via the archetype's `resultView`) opens here instead of the generic
+  // prose step-detail panel. `view` is the registry id (e.g. 'requirements-review');
+  // `blockId` is always set; `instanceId`/`stepIndex` are present on the pipeline path and
+  // null for an off-path open (e.g. the inspector's pre-start requirements review).
+  const resultView = ref<{
+    view: string
+    blockId: string
+    instanceId: string | null
+    stepIndex: number | null
+  } | null>(null)
+
+  // Agent step-detail overlay: which pipeline step (a run instance + step index)
+  // a human is inspecting, or null when closed. The overlay resolves the step
+  // from the execution store so it stays live; it shows the step's metadata
+  // (model, state, progress, subtasks, …) and — when the agent produced prose —
+  // a reader for it (ToC + collapsible sections).
+  const stepDetail = ref<{ instanceId: string; stepIndex: number } | null>(null)
+
+  // LLM observability panel: which run (execution instance) a human is inspecting
+  // the per-call model activity for, or null when closed. The panel loads the full
+  // per-call detail from the observability store on open.
+  const observabilityInstanceId = ref<string | null>(null)
+
+  /** Current canvas zoom (driven by Vue Flow viewport). */
+  const zoom = ref(1)
+
+  const lod = computed<LodLevel>(() => zoomToLod(zoom.value))
+
+  /** Frames the user has manually expanded to reveal their tasks. */
+  const expandedFrames = ref<Set<string>>(new Set())
+
+  function toggleFrame(id: string) {
+    const next = new Set(expandedFrames.value)
+    if (next.has(id)) next.delete(id)
+    else next.add(id)
+    expandedFrames.value = next
+  }
+
+  function expandFrame(id: string) {
+    if (expandedFrames.value.has(id)) return
+    expandedFrames.value = new Set(expandedFrames.value).add(id)
+  }
+
+  /** A frame shows its tasks when manually expanded OR once zoomed in to `close`
+   * or any deeper band (`steps`/`subtasks` drill further into those tasks). */
+  function isFrameExpanded(id: string) {
+    return expandedFrames.value.has(id) || lodAtLeast(lod.value, 'close')
+  }
+
+  function select(id: string | null) {
+    selectedBlockId.value = id
+  }
+
+  function focus(id: string | null) {
+    focusBlockId.value = id
+  }
+
+  function openBuilder() {
+    builderOpen.value = true
+  }
+
+  function openDecision(instanceId: string, decisionId: string) {
+    decisionContext.value = { instanceId, decisionId }
+  }
+
+  function closeDecision() {
+    decisionContext.value = null
+  }
+
+  /**
+   * Open a pending approval gate in the conclusions reader (approval mode). Resolves
+   * the step index from the gate id so every board/inspector entry point can keep
+   * passing the approval id it already has.
+   */
+  function openApprovalDetail(instanceId: string, approvalId: string) {
+    const execution = useExecutionStore()
+    const instance = execution.getInstance(instanceId)
+    const idx = instance?.steps.findIndex((s) => s.approval?.id === approvalId) ?? -1
+    if (idx >= 0) dispatchStepView(instanceId, idx)
+  }
+
+  /**
+   * Open a pipeline step: route it to its agent kind's DEDICATED result window when the
+   * archetype declares one (the universal `resultView` seam), else the generic prose
+   * step-detail panel. This is the single dispatch every board/inspector entry point uses,
+   * so adding a bespoke window for a new agent is just declaring `resultView` + registering
+   * a component — no caller changes.
+   */
+  function dispatchStepView(instanceId: string, stepIndex: number) {
+    const execution = useExecutionStore()
+    const instance = execution.getInstance(instanceId)
+    const step = instance?.steps[stepIndex]
+    // A step that actually ran the consensus mechanism opens the dedicated Consensus
+    // Session window, regardless of its kind's normal result view — consensus is an
+    // execution MODE on a kind, not a kind, so it can't be a static archetype `resultView`.
+    const view = step?.consensus?.enabled
+      ? 'consensus-session'
+      : step
+        ? agentKindMeta(step.agentKind).resultView
+        : undefined
+    if (view && instance) {
+      resultView.value = { view, blockId: instance.blockId, instanceId, stepIndex }
+      return
+    }
+    stepDetail.value = { instanceId, stepIndex }
+  }
+
+  function openDocumentConnect(source: DocumentSourceKind) {
+    documentConnect.value = { source }
+  }
+  function closeDocumentConnect() {
+    documentConnect.value = null
+  }
+  function openDocumentImport(
+    targetFrameId: string | null = null,
+    source: DocumentSourceKind | null = null,
+  ) {
+    documentImport.value = { source, targetFrameId }
+  }
+  function closeDocumentImport() {
+    documentImport.value = null
+  }
+  function openSpawnPreview(
+    source: DocumentSourceKind,
+    externalId: string,
+    targetFrameId: string | null = null,
+  ) {
+    spawnPreview.value = { source, externalId, targetFrameId }
+  }
+  function closeSpawnPreview() {
+    spawnPreview.value = null
+  }
+  function openTaskConnect(source: TaskSourceKind) {
+    taskConnect.value = { source }
+  }
+  function closeTaskConnect() {
+    taskConnect.value = null
+  }
+  function openTaskImport(source: TaskSourceKind | null = null) {
+    taskImport.value = { source }
+  }
+  function closeTaskImport() {
+    taskImport.value = null
+  }
+  function openAddTask(containerId: string) {
+    addTaskContainerId.value = containerId
+  }
+  function closeAddTask() {
+    addTaskContainerId.value = null
+  }
+  function openAddRecurring(frameId: string) {
+    addRecurringFrameId.value = frameId
+  }
+  function closeAddRecurring() {
+    addRecurringFrameId.value = null
+  }
+  function openBootstrap() {
+    bootstrapOpen.value = true
+  }
+  function closeBootstrap() {
+    bootstrapOpen.value = false
+  }
+  function openAddService() {
+    addServiceOpen.value = true
+  }
+  function closeAddService() {
+    addServiceOpen.value = false
+  }
+  function openGitHub() {
+    githubOpen.value = true
+  }
+  function closeGitHub() {
+    githubOpen.value = false
+  }
+  function openSlack() {
+    slackOpen.value = true
+  }
+  function closeSlack() {
+    slackOpen.value = false
+  }
+  function openFragmentLibrary() {
+    fragmentLibraryOpen.value = true
+  }
+  function closeFragmentLibrary() {
+    fragmentLibraryOpen.value = false
+  }
+  function openCommandBar() {
+    commandBarOpen.value = true
+  }
+  function closeCommandBar() {
+    commandBarOpen.value = false
+  }
+  function toggleCommandBar() {
+    commandBarOpen.value = !commandBarOpen.value
+  }
+  function openMergeThresholds() {
+    mergeThresholdsOpen.value = true
+  }
+  function closeMergeThresholds() {
+    mergeThresholdsOpen.value = false
+  }
+  function openWorkspaceSettings() {
+    workspaceSettingsOpen.value = true
+  }
+  function closeWorkspaceSettings() {
+    workspaceSettingsOpen.value = false
+  }
+  function openDatadog() {
+    datadogOpen.value = true
+  }
+  function closeDatadog() {
+    datadogOpen.value = false
+  }
+  function openModelDefaults() {
+    modelDefaultsOpen.value = true
+  }
+  function closeModelDefaults() {
+    modelDefaultsOpen.value = false
+  }
+  function openServiceFragmentDefaults() {
+    serviceFragmentDefaultsOpen.value = true
+  }
+  function closeServiceFragmentDefaults() {
+    serviceFragmentDefaultsOpen.value = false
+  }
+  function openVendorCredentials() {
+    vendorCredentialsOpen.value = true
+  }
+  function closeVendorCredentials() {
+    vendorCredentialsOpen.value = false
+  }
+  function openLocalModels() {
+    localModelsOpen.value = true
+  }
+  function closeLocalModels() {
+    localModelsOpen.value = false
+  }
+  function openRequirementReview(blockId: string) {
+    resultView.value = { view: 'requirements-review', blockId, instanceId: null, stepIndex: null }
+  }
+  function openClarityReview(blockId: string) {
+    resultView.value = { view: 'clarity-review', blockId, instanceId: null, stepIndex: null }
+  }
+  function closeResultView() {
+    resultView.value = null
+  }
+  // Kept name for the requirements window's close handler.
+  const closeRequirementReview = closeResultView
+  function openStepDetail(instanceId: string, stepIndex: number) {
+    dispatchStepView(instanceId, stepIndex)
+  }
+  function closeStepDetail() {
+    stepDetail.value = null
+  }
+  function openObservability(instanceId: string) {
+    observabilityInstanceId.value = instanceId
+  }
+  function closeObservability() {
+    observabilityInstanceId.value = null
+  }
+
+  return {
+    selectedBlockId,
+    focusBlockId,
+    builderOpen,
+    decisionContext,
+    documentConnect,
+    documentImport,
+    spawnPreview,
+    taskConnect,
+    taskImport,
+    addTaskContainerId,
+    addRecurringFrameId,
+    bootstrapOpen,
+    addServiceOpen,
+    githubOpen,
+    slackOpen,
+    fragmentLibraryOpen,
+    commandBarOpen,
+    mergeThresholdsOpen,
+    workspaceSettingsOpen,
+    datadogOpen,
+    modelDefaultsOpen,
+    serviceFragmentDefaultsOpen,
+    vendorCredentialsOpen,
+    localModelsOpen,
+    resultView,
+    closeResultView,
+    stepDetail,
+    observabilityInstanceId,
+    zoom,
+    lod,
+    expandedFrames,
+    toggleFrame,
+    expandFrame,
+    isFrameExpanded,
+    select,
+    focus,
+    openBuilder,
+    openDecision,
+    closeDecision,
+    openApprovalDetail,
+    openDocumentConnect,
+    closeDocumentConnect,
+    openDocumentImport,
+    closeDocumentImport,
+    openSpawnPreview,
+    closeSpawnPreview,
+    openTaskConnect,
+    closeTaskConnect,
+    openTaskImport,
+    closeTaskImport,
+    openAddTask,
+    closeAddTask,
+    openAddRecurring,
+    closeAddRecurring,
+    openBootstrap,
+    closeBootstrap,
+    openAddService,
+    closeAddService,
+    openGitHub,
+    closeGitHub,
+    openSlack,
+    closeSlack,
+    openFragmentLibrary,
+    closeFragmentLibrary,
+    openCommandBar,
+    closeCommandBar,
+    toggleCommandBar,
+    openMergeThresholds,
+    closeMergeThresholds,
+    openWorkspaceSettings,
+    closeWorkspaceSettings,
+    openDatadog,
+    closeDatadog,
+    openModelDefaults,
+    closeModelDefaults,
+    openServiceFragmentDefaults,
+    closeServiceFragmentDefaults,
+    openVendorCredentials,
+    closeVendorCredentials,
+    openLocalModels,
+    closeLocalModels,
+    openRequirementReview,
+    openClarityReview,
+    closeRequirementReview,
+    openStepDetail,
+    closeStepDetail,
+    openObservability,
+    closeObservability,
+  }
+})

package/app/stores/vendorCredentials.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import type { SubscriptionVendor, VendorCredential } from '~/types/domain'
+
+/**
+ * The workspace's connected LLM-vendor subscription credentials (the token pool
+ * powering the Claude Code / Codex harnesses). Loaded from
+ * `GET /workspaces/:ws/vendor-credentials`; tokens are write-only so only
+ * metadata + rolling-window usage is ever returned. `configuredVendors` drives
+ * the model picker: a dual-mode model (GLM/Kimi) collapses to its subscription
+ * flavour, and a subscription-only model is enabled, once its vendor is here.
+ */
+export const useVendorCredentialsStore = defineStore('vendorCredentials', () => {
+  const api = useApi()
+  const credentials = ref<VendorCredential[]>([])
+  const workspaceId = ref<string | null>(null)
+  const loading = ref(false)
+
+  async function load(ws: string) {
+    workspaceId.value = ws
+    loading.value = true
+    try {
+      const { credentials: list } = await api.listVendorCredentials(ws)
+      credentials.value = list
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function add(input: { vendor: SubscriptionVendor; label: string; token: string }) {
+    if (!workspaceId.value) return
+    const created = await api.addVendorCredential(workspaceId.value, input)
+    credentials.value = [...credentials.value, created]
+  }
+
+  async function remove(id: string) {
+    if (!workspaceId.value) return
+    await api.removeVendorCredential(workspaceId.value, id)
+    credentials.value = credentials.value.filter((c) => c.id !== id)
+  }
+
+  /** The set of vendors with at least one connected token. */
+  const configuredVendors = computed(() => new Set(credentials.value.map((c) => c.vendor)))
+
+  function hasVendor(vendor: SubscriptionVendor | undefined): boolean {
+    return vendor ? configuredVendors.value.has(vendor) : false
+  }
+
+  function forVendor(vendor: SubscriptionVendor) {
+    return credentials.value.filter((c) => c.vendor === vendor)
+  }
+
+  return { credentials, loading, load, add, remove, configuredVendors, hasVendor, forVendor }
+})

package/app/stores/workspace.ts

@@ -0,0 +1,215 @@
+import { defineStore } from 'pinia'
+import { computed, ref } from 'vue'
+import type { SpendStatus, Workspace, WorkspaceSnapshot } from '~/types/domain'
+import { useAccountsStore } from '~/stores/accounts'
+import { useBoardStore } from '~/stores/board'
+import { usePipelinesStore } from '~/stores/pipelines'
+import { useExecutionStore } from '~/stores/execution'
+import { useAgentRunsStore } from '~/stores/agentRuns'
+import { useNotificationsStore } from '~/stores/notifications'
+import { useMergePresetsStore } from '~/stores/mergePresets'
+import { useWorkspaceSettingsStore } from '~/stores/workspaceSettings'
+import { useAgentConfigStore } from '~/stores/agentConfig'
+import { useModelDefaultsStore } from '~/stores/modelDefaults'
+import { useServiceFragmentDefaultsStore } from '~/stores/serviceFragmentDefaults'
+import { useRecurringPipelinesStore } from '~/stores/recurringPipelines'
+import { useServicesStore } from '~/stores/services'
+import { useTrackerStore } from '~/stores/tracker'
+
+/**
+ * Owns the active workspace and bootstraps the app against the backend. On load
+ * it resolves the user's accounts, lists the boards in the active account, opens
+ * the persisted one (or the first, or a fresh seeded board), and hydrates the
+ * board / pipelines / execution stores from its snapshot.
+ *
+ * Boards are scoped to an account: switching account re-scopes the board list,
+ * and new boards are stamped with the active account so a team can keep org
+ * boards separate from personal ones. Only the active workspace id is persisted —
+ * all board data lives on the server.
+ */
+export const useWorkspaceStore = defineStore(
+  'workspace',
+  () => {
+    const api = useApi()
+
+    /** Active workspace id (persisted so a reload reopens the same board). */
+    const workspaceId = ref<string | null>(null)
+    /** Every board visible to the user, across the accounts they belong to. */
+    const workspaces = ref<Workspace[]>([])
+    /** True once the initial snapshot has been loaded and stores hydrated. */
+    const ready = ref(false)
+    /** Set when bootstrap fails so the UI can show a retry. */
+    const error = ref<string | null>(null)
+    /** Latest spend-safeguard status from the server (null until first load). */
+    const spend = ref<SpendStatus | null>(null)
+
+    /** The boards belonging to the active account (all boards when auth is off). */
+    const accountWorkspaces = computed(() => {
+      const accounts = useAccountsStore()
+      if (!accounts.enabled || !accounts.activeAccountId) return workspaces.value
+      return workspaces.value.filter((w) => w.accountId === accounts.activeAccountId)
+    })
+
+    /** The active board's row (for the switcher label). */
+    const activeWorkspace = computed(
+      () => workspaces.value.find((w) => w.id === workspaceId.value) ?? null,
+    )
+
+    /** Push a snapshot into the data stores. */
+    function hydrate(snapshot: WorkspaceSnapshot) {
+      workspaceId.value = snapshot.workspace.id
+      spend.value = snapshot.spend ?? null
+      // Keep the board list in step (e.g. a freshly created board, or a rename).
+      const i = workspaces.value.findIndex((w) => w.id === snapshot.workspace.id)
+      if (i >= 0) workspaces.value[i] = snapshot.workspace
+      else workspaces.value.unshift(snapshot.workspace)
+      useBoardStore().hydrate(snapshot.blocks)
+      usePipelinesStore().hydrate(snapshot.pipelines)
+      useExecutionStore().hydrate(snapshot.executions)
+      useAgentRunsStore().hydrate(snapshot.bootstrapJobs ?? [])
+      useNotificationsStore().hydrate(snapshot.notifications ?? [])
+      useMergePresetsStore().hydrate(snapshot.mergePresets ?? [])
+      useWorkspaceSettingsStore().hydrate(snapshot.settings)
+      useAgentConfigStore().hydrate(snapshot.agentConfigCatalog ?? [])
+      useModelDefaultsStore().hydrate(snapshot.modelDefaults?.defaults)
+      useModelDefaultsStore().hydrateDeployment(snapshot.deploymentModelDefaults)
+      useServiceFragmentDefaultsStore().hydrate(snapshot.serviceFragmentDefaults?.fragmentIds)
+      useRecurringPipelinesStore().hydrate(snapshot.recurringPipelines ?? [])
+      useTrackerStore().hydrate(snapshot.trackerSettings)
+      useServicesStore().hydrate(snapshot.mounts ?? [], snapshot.serviceCatalog ?? [])
+    }
+
+    /** Resolve accounts + boards, then open the right board for the active account. */
+    async function init() {
+      ready.value = false
+      error.value = null
+      try {
+        // Accounts are an auth concept — empty in dev, which leaves boards unscoped.
+        await useAccountsStore()
+          .load()
+          .catch(() => {})
+        workspaces.value = await api.listWorkspaces()
+        await resolveActiveBoard()
+        ready.value = true
+      } catch (e) {
+        error.value = e instanceof Error ? e.message : 'Failed to reach the backend.'
+      }
+    }
+
+    /** Open the persisted board (aligning the active account to it), else pick/create one. */
+    async function resolveActiveBoard() {
+      const accounts = useAccountsStore()
+      if (workspaceId.value) {
+        const existing = workspaces.value.find((w) => w.id === workspaceId.value)
+        if (existing) {
+          if (accounts.enabled && existing.accountId) accounts.activeAccountId = existing.accountId
+          hydrate(await api.getWorkspace(existing.id))
+          return
+        }
+        // Persisted board is gone (deleted, or now another tenant's) — fall through.
+        workspaceId.value = null
+      }
+      const first = accountWorkspaces.value[0]
+      if (first) {
+        hydrate(await api.getWorkspace(first.id))
+      } else {
+        hydrate(
+          await api.createWorkspace({
+            seed: false,
+            accountId: accounts.activeAccountId ?? undefined,
+          }),
+        )
+      }
+    }
+
+    /** Switch to another board (within reach of the active account). */
+    async function switchTo(id: string) {
+      if (id === workspaceId.value) return
+      hydrate(await api.getWorkspace(id))
+    }
+
+    /** Switch the active account, then open one of its boards (creating one if needed). */
+    async function selectAccount(id: string) {
+      const accounts = useAccountsStore()
+      if (id === accounts.activeAccountId) return
+      accounts.switchTo(id)
+      workspaceId.value = null
+      await resolveActiveBoard()
+    }
+
+    /** Create a new board in the active account and open it. */
+    async function create(name?: string, description?: string) {
+      const accounts = useAccountsStore()
+      const snapshot = await api.createWorkspace({
+        seed: false,
+        name,
+        description,
+        accountId: accounts.activeAccountId ?? undefined,
+      })
+      hydrate(snapshot)
+      return snapshot.workspace
+    }
+
+    /** Rename a board and/or update its description. */
+    async function update(id: string, patch: { name?: string; description?: string | null }) {
+      const updated = await api.updateWorkspace(id, patch)
+      const i = workspaces.value.findIndex((w) => w.id === id)
+      if (i >= 0) workspaces.value[i] = updated
+      return updated
+    }
+
+    /** Rename a board (kept for the existing rename callers). */
+    async function rename(id: string, name: string) {
+      return update(id, { name })
+    }
+
+    /** Delete a board; if it was active, fall back to another in the account. */
+    async function remove(id: string) {
+      await api.deleteWorkspace(id)
+      workspaces.value = workspaces.value.filter((w) => w.id !== id)
+      if (workspaceId.value === id) {
+        workspaceId.value = null
+        await resolveActiveBoard()
+      }
+    }
+
+    /** Re-fetch the snapshot and re-hydrate (after mutations and on stream (re)connect). */
+    async function refresh() {
+      if (!workspaceId.value) return
+      hydrate(await api.getWorkspace(workspaceId.value))
+    }
+
+    /** The active workspace id, or throw if the app isn't bootstrapped yet. */
+    function requireId(): string {
+      if (!workspaceId.value) throw new Error('No active workspace')
+      return workspaceId.value
+    }
+
+    /** Resume runs paused by the spend safeguard, then refresh the snapshot. */
+    async function resumeSpend() {
+      await api.resumeSpend(requireId())
+      await refresh()
+    }
+
+    return {
+      workspaceId,
+      workspaces,
+      accountWorkspaces,
+      activeWorkspace,
+      ready,
+      error,
+      spend,
+      init,
+      switchTo,
+      selectAccount,
+      create,
+      update,
+      rename,
+      remove,
+      refresh,
+      requireId,
+      resumeSpend,
+    }
+  },
+  { persist: { pick: ['workspaceId'] } },
+)