feat: manage encrypted buckets

src/components/compute/TaskDetailPanel.vue

@@ -17,6 +17,7 @@ import CountedList from '@/components/ui/CountedList.vue'
 import Pagination from '@/components/ui/Pagination.vue'
 import DocsLink from '@/components/ui/DocsLink.vue'
 import JobExecutionsTable from '@/components/jobs/JobExecutionsTable.vue'
+import JobKeyWait from '@/components/jobs/JobKeyWait.vue'
 import JobPlacementFigure from '@/components/jobs/JobPlacementFigure.vue'
 import RunLogDialog, { type LogStream } from '@/components/compute/RunLogDialog.vue'
 import TaskHeader from '@/components/compute/TaskHeader.vue'
@@ -299,9 +300,13 @@ interface Summary {
   tone: 'error' | 'warning' | 'info' | 'success'
   headline: string
 }
+// TES has no state for a run that waits for a locked bucket; the native job says so.
+const awaitingKey = computed(() => nativeJob.value?.state === 'awaiting_key' && !isTerminalTesState(task.value?.state))
+
 const summary = computed<Summary | null>(() => {
   const state = task.value?.state
   if (!state) return null
+  if (awaitingKey.value) return { tone: 'warning', headline: 'Waiting for a bucket unlock' }
   const duration = runDuration.value
   const where = executorKind.value ? ` on ${executorKind.value}` : ''
   switch (state) {
@@ -662,11 +667,12 @@ async function confirmDelete() {
           <p v-if="failed && stderrTail" class="truncate font-mono text-[11px]" :title="executorStderr(0)">
             stderr: {{ stderrTail }}
           </p>
-          <p v-if="task.state === 'QUEUED'" class="flex flex-wrap items-center gap-2 text-[11px]">
+          <p v-if="task.state === 'QUEUED' && !awaitingKey" class="flex flex-wrap items-center gap-2 text-[11px]">
             One node answers and runs it; another steps in after a while without a response.
             <DocsLink topic="compute-run" section="Follow the run" />
           </p>
         </Notice>
+        <JobKeyWait v-if="awaitingKey" :waits="nativeJob?.awaiting_keys ?? []" />
         <p v-if="lastPollError" class="text-[11px] text-muted-foreground">Refresh failed, retrying.</p>
 
         <section class="space-y-3">

src/components/jobs/JobDetailPanel.vue

@@ -12,6 +12,7 @@ import CopyButton from '@/components/ui/CopyButton.vue'
 import JobArtifactButton from '@/components/jobs/JobArtifactButton.vue'
 import JobAuditTrail from '@/components/jobs/JobAuditTrail.vue'
 import JobFamilySection from '@/components/jobs/JobFamilySection.vue'
+import JobKeyWait from '@/components/jobs/JobKeyWait.vue'
 import JobReportPanel from '@/components/jobs/JobReportPanel.vue'
 import JobStateBadge from '@/components/jobs/JobStateBadge.vue'
 import { useJobDetail } from '@/composables/useJobs'
@@ -96,6 +97,7 @@ async function confirmCancel() {
       <ErrorPanel v-else-if="loadState === 'error'" :message="loadError || 'This could not be loaded.'" @retry="load" />
 
       <div v-else-if="job" class="space-y-6">
+        <JobKeyWait v-if="job.state === 'awaiting_key'" :waits="job.awaiting_keys ?? []" />
         <section class="space-y-2">
           <h3 class="font-display text-sm font-semibold text-aruna-navy">Progress</h3>
           <Progress

src/components/jobs/JobDistributedDetail.test.ts

@@ -275,6 +275,9 @@ function taskPanel(getTask: unknown, getJob: unknown, deleteJob: unknown = vi.fn
     '@/components/ui/Pagination.vue': moduleDefault(PaginationStub),
     '@/components/jobs/JobPlacementFigure.vue': moduleDefault(PlacementFigureStub),
     '@/components/jobs/JobExecutionsTable.vue': moduleDefault(ExecutionsTableStub),
+    '@/components/jobs/JobKeyWait.vue': moduleDefault(
+      defineComponent({ props: { waits: Array }, setup: (props) => () => h('aside', `waits for ${JSON.stringify(props.waits)}`) }),
+    ),
     '@/components/compute/RunLogDialog.vue': moduleDefault(PassThroughStub),
     '@/components/compute/TaskHeader.vue': moduleDefault(PassThroughStub),
     '@/components/assistant/AskAiButton.vue': moduleDefault(PassThroughStub),
@@ -328,6 +331,7 @@ function jobPanel(job: JobStatusResponse): Component {
     '@/components/jobs/JobFamilySection.vue': moduleDefault(
       defineComponent(() => () => h('section', 'native family detail')),
     ),
+    '@/components/jobs/JobKeyWait.vue': moduleDefault(defineComponent(() => () => h('aside', 'waits for an unlock'))),
     '@/components/jobs/JobReportPanel.vue': moduleDefault(PassThroughStub),
     '@/components/jobs/JobStateBadge.vue': moduleDefault(JobStateBadgeStub),
     '@/composables/useJobs': {
@@ -390,6 +394,29 @@ describe('distributed job detail components', () => {
     { destination_key: 'in/config.yaml', bytes: 2048, source_node_id: null, transfer_ms: 0 },
   ]
 
+  it('tells a job that waits for a bucket key apart from a failed one', async () => {
+    const waiting: JobStatusResponse = {
+      job_id: '01JJRSTVWXYZ0123456789ABCE',
+      kind: 'staging',
+      state: 'awaiting_key',
+      attempts: 0,
+      cancel_requested: false,
+      created_at: '2026-04-09T14:23:11.123+00:00',
+      updated_at: '2026-04-09T14:31:47.902+00:00',
+      progress: { current: 0, unit: 'inputs' },
+      workspace_mode: 'none',
+      awaiting_keys: [{ node_id: 'node-b', bucket: 'reef' }],
+    }
+
+    const mounted = await mount(jobPanel(waiting), { jobId: waiting.job_id, open: true })
+
+    expect(mounted.errors).toEqual([])
+    expect(content(mounted.root)).toContain('waits for an unlock')
+    expect(Jobs.JOB_STATE_META.awaiting_key).toEqual({ label: 'Waiting for a key', variant: 'warn' })
+    expect(Jobs.isTerminalJobState('awaiting_key')).toBe(false)
+    mounted.app.unmount()
+  })
+
   it('states no workspace detail, whatever the node reports', async () => {
     // A node may still serve a mode and a bucket; a run owns neither any more.
     const JobDetailPanel = jobPanel({
@@ -878,6 +905,29 @@ describe('distributed job detail components', () => {
     mounted.app.unmount()
   })
 
+  it('says a queued run waits for a bucket unlock when its native job does', async () => {
+    const getTask = vi.fn(async () => ({
+      id: 'waiting-run',
+      state: 'QUEUED',
+      executors: [{ image: 'alpine', command: ['sh'] }],
+      inputs: [],
+      outputs: [],
+      logs: [],
+      tags: {},
+    }))
+    const waits = [{ node_id: 'node-b', bucket: 'reef' }]
+    const getJob = vi.fn(async () => ({ state: 'awaiting_key', awaiting_keys: waits, family: null }))
+
+    const mounted = await mount(taskPanel(getTask, getJob), { taskId: 'waiting-run', open: true })
+    await vi.waitFor(() => expect(content(mounted.root)).toContain('Waiting for a bucket unlock'))
+
+    expect(mounted.errors).toEqual([])
+    expect(content(mounted.root)).toContain(`waits for ${JSON.stringify(waits)}`)
+    expect(content(mounted.root)).not.toContain('Queued, waiting for a node')
+    expect(content(mounted.root)).not.toContain('another steps in')
+    mounted.app.unmount()
+  })
+
   it('tells a failure once, with its cause', async () => {
     // The badge says Failed; only the stage and the cause line say what failed.
     const getTask = vi.fn(async () => ({

src/components/jobs/JobKeyWait.test.ts

@@ -0,0 +1,41 @@
+import { defineComponent, h } from 'vue'
+import * as VueRuntime from 'vue'
+import { describe, expect, it } from 'vitest'
+import * as Wording from '@/lib/bucketEncryption'
+import { compileClientComponent, content, element, mountApp, moduleDefault } from '@/test/clientRender'
+
+const Slotted = (tag: string) =>
+  defineComponent({ inheritAttrs: false, setup: (_, { attrs, slots }) => () => h(tag, attrs, slots.default?.()) })
+const LinkStub = defineComponent({
+  props: { to: Object },
+  setup: (props, { slots }) => () => h('a', { 'data-to': JSON.stringify(props.to) }, slots.default?.()),
+})
+
+const wait = compileClientComponent(new URL('./JobKeyWait.vue', import.meta.url), {
+  vue: VueRuntime,
+  'vue-router': { RouterLink: LinkStub },
+  '@/components/ui/NodeLabel.vue': moduleDefault(defineComponent({ props: { nodeId: String }, setup: (props) => () => h('span', props.nodeId) })),
+  '@/components/ui/Notice.vue': moduleDefault(Slotted('aside')),
+  '@/lib/bucketEncryption': Wording,
+})
+
+describe('job waiting for a bucket key', () => {
+  it('links every locked bucket to its Encryption tab on its own node', async () => {
+    const { root } = await mountApp(wait, { props: { waits: [{ node_id: 'node-b', bucket: 'reef', group_id: 'g-1' }] } })
+    const link = element(root, (node) => node.tag === 'a')
+
+    expect(content(root)).toContain('neither fails nor')
+    expect(content(root)).toContain('reef on node-b')
+    expect(JSON.parse(String(link.props['data-to']))).toEqual({
+      name: 'bucket-storage',
+      params: { bucketId: 'reef' },
+      query: { tab: 'encryption', node: 'node-b', group: 'g-1' },
+    })
+  })
+
+  it('says so when the node named no bucket', async () => {
+    const { root } = await mountApp(wait, { props: { waits: [] } })
+
+    expect(content(root)).toContain('did not say which bucket')
+  })
+})

src/components/jobs/JobKeyWait.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+// A job that waits for a locked bucket: not failed and not retried, it goes on
+// once a key holder unlocks every bucket named here on its own node.
+import { RouterLink } from 'vue-router'
+import NodeLabel from '@/components/ui/NodeLabel.vue'
+import Notice from '@/components/ui/Notice.vue'
+import { bucketUnlockLink } from '@/lib/bucketEncryption'
+import type { JobKeyWait } from '@/lib/jobs'
+
+defineProps<{ waits: JobKeyWait[] }>()
+</script>
+
+<template>
+  <Notice tone="warning" title="Waiting for a bucket unlock" data-key-wait>
+    This job needs data from a locked bucket. It goes on once a key holder unlocks it; until then it neither fails nor
+    retries.
+    <ul v-if="waits.length" class="mt-1 list-disc space-y-0.5 pl-4">
+      <li v-for="wait in waits" :key="`${wait.node_id}/${wait.bucket}`">
+        <RouterLink :to="bucketUnlockLink(wait.bucket, wait.node_id, wait.group_id)" class="font-medium underline">
+          {{ wait.bucket }}
+        </RouterLink>
+        on <NodeLabel :node-id="wait.node_id" size="sm" />
+      </li>
+    </ul>
+    <p v-else class="mt-1">The node did not say which bucket it waits for.</p>
+  </Notice>
+</template>

src/components/jobs/JobsPanel.vue

@@ -59,7 +59,7 @@ const {
 // Grouped state chips over the loaded list (the tasks-panel treatment).
 type StateGroup = 'all' | 'active' | 'done' | 'failed' | 'cancelled'
 const GROUP_STATES: Record<Exclude<StateGroup, 'all'>, JobState[]> = {
-  active: ['queued', 'claimed', 'preparing', 'ready', 'running', 'cancelling'],
+  active: ['queued', 'awaiting_key', 'claimed', 'preparing', 'ready', 'running', 'cancelling'],
   done: ['succeeded'],
   failed: ['failed', 'indeterminate'],
   cancelled: ['cancelled'],

src/components/preview/MediaPreview.test.ts

@@ -0,0 +1,18 @@
+import * as VueRuntime from 'vue'
+import { describe, expect, it, vi } from 'vitest'
+import { compileClientComponent, element, mountApp } from '@/test/clientRender'
+
+const media = compileClientComponent(new URL('./MediaPreview.vue', import.meta.url), { vue: VueRuntime })
+
+describe('media preview', () => {
+  it('reports a failed read of the player', async () => {
+    for (const mediaKind of ['video', 'audio']) {
+      const onFailed = vi.fn()
+      const { root } = await mountApp(media, { props: { url: 'https://b.test/presigned', mediaKind, onFailed } })
+
+      ;(element(root, (node) => node.tag === mediaKind).props.onError as () => void)()
+
+      expect(onFailed).toHaveBeenCalledWith('https://b.test/presigned')
+    }
+  })
+})

src/components/preview/MediaPreview.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-defineProps<{ url: string; mediaKind: 'video' | 'audio'; name?: string }>()
+const props = defineProps<{ url: string; mediaKind: 'video' | 'audio'; name?: string }>()
+// The player reports which URL it failed to read, so the preview checks only its own file.
+const emit = defineEmits<{ (e: 'failed', url: string): void }>()
 </script>
 
 <template>
@@ -10,7 +12,8 @@ defineProps<{ url: string; mediaKind: 'video' | 'audio'; name?: string }>()
       controls
       preload="metadata"
       class="max-h-[68vh] w-full max-w-full rounded"
+      @error="emit('failed', props.url)"
     />
-    <audio v-else :src="url" controls preload="metadata" class="w-full" />
+    <audio v-else :src="url" controls preload="metadata" class="w-full" @error="emit('failed', props.url)" />
   </div>
 </template>

src/components/preview/PdfPreview.test.ts

@@ -0,0 +1,57 @@
+import { defineComponent, h } from 'vue'
+import * as VueRuntime from 'vue'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import * as Errors from '@/composables/s3/errors'
+import { compileClientComponent, flush, mountApp, moduleDefault } from '@/test/clientRender'
+
+const Slotted = (tag: string) =>
+  defineComponent({ inheritAttrs: false, setup: (_, { attrs, slots }) => () => h(tag, attrs, slots.default?.()) })
+
+const pdf = compileClientComponent(new URL('./PdfPreview.vue', import.meta.url), {
+  vue: VueRuntime,
+  '@lucide/vue': new Proxy({}, { get: () => Slotted('i') }),
+  '@/composables/s3/errors': Errors,
+  '@/components/ui/Button.vue': moduleDefault(Slotted('button')),
+  '@/components/ui/EmptyState.vue': moduleDefault(Slotted('section')),
+  '@/components/ui/Skeleton.vue': moduleDefault(Slotted('div')),
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+})
+
+describe('pdf preview', () => {
+  it('reports a locked bucket instead of a plain loading failure', async () => {
+    const headers = { 'x-aruna-bucket-locked': 'true' }
+    vi.stubGlobal('fetch', vi.fn(async () => new Response('<Error/>', { status: 403, headers })))
+    const onLocked = vi.fn()
+
+    await mountApp(pdf, { props: { url: 'https://b.test/presigned', onLocked } })
+    await flush()
+
+    expect(onLocked).toHaveBeenCalledWith('https://b.test/presigned')
+  })
+
+  it('reports nothing once it is gone before its read answers', async () => {
+    let answer!: (response: Response) => void
+    vi.stubGlobal('fetch', vi.fn(() => new Promise<Response>((resolve) => (answer = resolve))))
+    const onLocked = vi.fn()
+
+    const { app } = await mountApp(pdf, { props: { url: 'https://b.test/presigned', onLocked } })
+    app.unmount()
+    answer(new Response('<Error/>', { status: 403, headers: { 'x-aruna-bucket-locked': 'true' } }))
+    await flush()
+
+    expect(onLocked).not.toHaveBeenCalled()
+  })
+
+  it('keeps an ordinary refusal a loading failure', async () => {
+    vi.stubGlobal('fetch', vi.fn(async () => new Response('<Error/>', { status: 403 })))
+    const onLocked = vi.fn()
+
+    await mountApp(pdf, { props: { url: 'https://b.test/presigned', onLocked } })
+    await flush()
+
+    expect(onLocked).not.toHaveBeenCalled()
+  })
+})

src/components/preview/PdfPreview.vue

@@ -3,12 +3,17 @@
 // api/src/csp.rs serves `frame-src blob:`); the bytes are fetched over the
 // already-allowed connect-src path, so the iframe never touches the S3 origin.
 import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { BUCKET_LOCKED_HEADER } from '@/composables/s3/errors'
 import Button from '@/components/ui/Button.vue'
 import EmptyState from '@/components/ui/EmptyState.vue'
 import Skeleton from '@/components/ui/Skeleton.vue'
 import { ExternalLink, FileText } from '@lucide/vue'
 
 const props = defineProps<{ url: string; name?: string }>()
+/** `locked` names the URL whose read a locked bucket refused. */
+const emit = defineEmits<{ (e: 'locked', url: string): void }>()
+// A viewer that is gone neither reports nor keeps what its read returns.
+const reading = new AbortController()
 
 const blobUrl = ref<string | null>(null)
 const failed = ref(false)
@@ -19,19 +24,27 @@ function openTab() {
 }
 
 onMounted(async () => {
+  const url = props.url
   try {
-    const response = await fetch(props.url)
+    const response = await fetch(url, { signal: reading.signal })
+    if (reading.signal.aborted) return
+    if (response.status === 403 && response.headers.get(BUCKET_LOCKED_HEADER) === 'true') {
+      emit('locked', url)
+      return
+    }
     if (!response.ok) throw new Error(`HTTP ${response.status}`)
     const blob = await response.blob()
+    if (reading.signal.aborted) return
     blobUrl.value = URL.createObjectURL(new Blob([blob], { type: 'application/pdf' }))
   } catch {
-    failed.value = true
+    if (!reading.signal.aborted) failed.value = true
   } finally {
-    loading.value = false
+    if (!reading.signal.aborted) loading.value = false
   }
 })
 
 onBeforeUnmount(() => {
+  reading.abort()
   if (blobUrl.value) URL.revokeObjectURL(blobUrl.value)
 })
 </script>