@morscherlab/mint-sdk 1.2.10 → 1.3.0-beta.10

package/src/components/GeneratedPathInput.vue

@@ -1,51 +1,70 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, inject, ref, watch } from 'vue'
 
+import { mintApiErrorFromResponse } from '../apiErrors'
+import { formatExperimentDate } from '../composables/experiment-utils'
 import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
 import {
   getInjectedPlatformContext,
   resolveCurrentExperimentId,
 } from '../composables/platformContextHelpers'
-import type { AnalysisArtifactDetail } from '../types/analysisArtifactTypes'
-import type { PluginJobPathInput } from '../types/generated-ui'
-import AlertBox from './AlertBox.vue'
-import ArtifactSelectorModal from './ArtifactSelectorModal.vue'
+import type { AnalysisArtifactSummary } from '../types/analysisArtifactTypes'
+import type {
+  PluginJobArtifactPathInput,
+  PluginJobPathInput,
+  PluginJobPathSelection,
+} from '../types/generated-ui'
 import BaseButton from './BaseButton.vue'
+import BaseModal from './BaseModal.vue'
 import FileUploader from './FileUploader.vue'
+import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
+import ResourcePickerListInternal from './internal/ResourcePickerListInternal.vue'
 
-interface ArtifactFileReference {
-  key: string
-  plugin_id?: string
-  experiment_id?: number
-  filename?: string
-  content_type?: string
+/** A file artifact the plugin's jobs API says this Path input may use. */
+interface ReadableArtifact extends AnalysisArtifactSummary {
+  filename: string
 }
 
 const props = defineProps<{
-  modelValue?: PluginJobPathInput | PluginJobPathInput[] | null
+  modelValue?: PluginJobPathSelection | PluginJobPathSelection[] | null
   disabled?: boolean
   multiple?: boolean
 }>()
 
 const emit = defineEmits<{
-  'update:modelValue': [value: PluginJobPathInput | PluginJobPathInput[] | null]
+  'update:modelValue': [value: PluginJobPathSelection | PluginJobPathSelection[] | null]
 }>()
 
 const mode = ref<'file' | 'folder'>('file')
 const selections = computed(() => Array.isArray(props.modelValue)
   ? props.modelValue
   : props.modelValue ? [props.modelValue] : [])
-const selectedFiles = computed(() => selections.value.flatMap(selection => selection.files))
-watch(selections, (current) => {
+const uploads = computed(() => selections.value.filter(
+  (selection): selection is PluginJobPathInput => selection.kind === 'path',
+))
+const artifacts = computed(() => selections.value.filter(
+  (selection): selection is PluginJobArtifactPathInput => selection.kind === 'artifact-path',
+))
+const selectedFiles = computed(() => uploads.value.flatMap(selection => selection.files))
+watch(uploads, (current) => {
   if (current.length) mode.value = current.every(selection => selection.rootName) ? 'folder' : 'file'
 }, { immediate: true })
 const artifactOpen = ref(false)
+const artifactSearch = ref('')
+const artifactRows = ref<ReadableArtifact[]>([])
 const artifactLoading = ref(false)
-const artifactError = ref('')
+const artifactError = ref<string | null>(null)
 const platform = getInjectedPlatformContext()
 const experimentId = resolveCurrentExperimentId(platform)
-const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentId))
-const transport = createGeneratedAnalysisTransport()
+const jobsApi = inject(GENERATED_JOBS_API_KEY, null)
+const canSelectArtifact = computed(() => Boolean(platform?.isIntegrated && experimentId && jobsApi))
+const visibleArtifactRows = computed(() => {
+  const query = artifactSearch.value.trim().toLowerCase()
+  return query
+    ? artifactRows.value.filter(row => [row.display_name, row.artifact_key, row.filename, row.plugin_id]
+        .some(text => text.toLowerCase().includes(query)))
+    : artifactRows.value
+})
 
 function selectMode(nextMode: 'file' | 'folder'): void {
   mode.value = nextMode
@@ -58,7 +77,7 @@ function selectFiles(
   relativePaths?: string[],
 ): void {
   const paths = relativePaths ?? files.map(file => file.name)
-  const selections: PluginJobPathInput[] = props.multiple && !rootName
+  const added: PluginJobPathInput[] = props.multiple && !rootName
     ? files.map((file, index) => ({
         kind: 'path',
         files: [file],
@@ -70,17 +89,13 @@ function selectFiles(
         relativePaths: paths,
         ...(rootName ? { rootName } : {}),
       }]
-  if (props.multiple) {
-    const existing = Array.isArray(props.modelValue) ? props.modelValue : []
-    emit('update:modelValue', [...existing, ...selections])
-  } else {
-    emit('update:modelValue', selections[0] ?? null)
-  }
+  emitSelections(props.multiple ? [...selections.value, ...added] : added)
 }
 
 function removeFiles(files: File[]): void {
   const removed = new Set(files)
-  const remaining = selections.value.flatMap((selection) => {
+  emitSelections(selections.value.flatMap((selection): PluginJobPathSelection[] => {
+    if (selection.kind !== 'path') return [selection]
     const indexes = selection.files
       .map((file, index) => removed.has(file) ? -1 : index)
       .filter(index => index >= 0)
@@ -90,68 +105,72 @@ function removeFiles(files: File[]): void {
       files: indexes.map(index => selection.files[index]!),
       relativePaths: indexes.map(index => selection.relativePaths[index]!),
     }]
-  })
-  emit(
-    'update:modelValue',
-    props.multiple ? remaining : remaining[0] ?? null,
-  )
+  }))
+}
+
+function removeArtifact(artifact: PluginJobArtifactPathInput): void {
+  emitSelections(selections.value.filter(selection => selection !== artifact))
 }
 
-async function selectArtifact(detail: AnalysisArtifactDetail): Promise<void> {
+function emitSelections(next: PluginJobPathSelection[]): void {
+  emit('update:modelValue', props.multiple ? next : next[0] ?? null)
+}
+
+// The plugin lists exactly the artifacts its staging route accepts (same
+// readers and visibility rule), so a pick never fails later with a 404.
+let artifactRequest = 0
+
+async function openArtifactPicker(): Promise<void> {
+  if (!jobsApi || !experimentId) return
+  const request = ++artifactRequest
+  artifactOpen.value = true
+  artifactSearch.value = ''
   artifactLoading.value = true
-  artifactError.value = ''
+  artifactError.value = null
+  let rows: ReadableArtifact[] = []
+  let error: string | null = null
   try {
-    const reference = artifactFileReference(detail)
-    const resolvedExperimentId = reference.experiment_id ?? detail.experiment_id
-    const pluginId = reference.plugin_id ?? detail.plugin_id
-    const baseUrl = (platform?.platformApiUrl ?? '/api').replace(/\/$/, '')
-    const objectPath = reference.key.split('/').map(encodeURIComponent).join('/')
-    const url = `${baseUrl}/experiments/${resolvedExperimentId}/objects/${objectPath}`
-      + `?plugin_id=${encodeURIComponent(pluginId)}&format=raw`
-    const response = await transport(url, { method: 'GET' })
-    if (!response.ok) throw new Error(`Artifact download failed (${response.status})`)
-    const resultFilename = String(detail.result.filename ?? '')
-    const keySegments = reference.key.split('/')
-    const filename = reference.filename
-      || resultFilename
-      || keySegments[keySegments.length - 1]
-      || 'artifact.bin'
-    const contentType = reference.content_type
-      ?? response.headers.get('Content-Type')
-      ?? 'application/octet-stream'
-    const file = new File([await response.blob()], filename, { type: contentType })
-    selectFiles([file], undefined, [filename])
+    const transport = jobsApi.transport ?? createGeneratedAnalysisTransport()
+    const baseUrl = jobsApi.baseUrl.replace(/\/$/, '')
+    const response = await transport(
+      `${baseUrl}/jobs/artifacts?experiment_id=${encodeURIComponent(experimentId)}`,
+      { headers: { Accept: 'application/json' } },
+    )
+    const payload: unknown = await response.json().catch(() => null)
+    if (!response.ok) throw mintApiErrorFromResponse(response.status, payload)
+    rows = (payload as { artifacts?: ReadableArtifact[] } | null)?.artifacts ?? []
   } catch (cause) {
-    artifactError.value = cause instanceof Error ? cause.message : 'Failed to load artifact'
-  } finally {
-    artifactLoading.value = false
+    error = cause instanceof Error ? cause.message : 'Failed to load artifacts'
   }
+  // A reopened picker owns the list; an earlier, slower answer is dropped.
+  if (request !== artifactRequest) return
+  artifactRows.value = rows
+  artifactError.value = error
+  artifactLoading.value = false
 }
 
-function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileReference {
-  if (detail.result.schema_version !== 'mint.analysis_file.v1') {
-    throw new Error('Only file-backed analysis artifacts can be used as a path')
-  }
-  const reference = detail.result.file
-  if (!reference || typeof reference !== 'object' || !('key' in reference)) {
-    throw new Error('The selected artifact has no file reference')
-  }
-  const candidate = reference as Record<string, unknown>
-  if (typeof candidate.key !== 'string' || !candidate.key) {
-    throw new Error('The selected artifact has no object key')
-  }
+function describeArtifact(row: ReadableArtifact) {
+  const date = row.updated_at ?? row.created_at
   return {
-    key: candidate.key,
-    ...(typeof candidate.plugin_id === 'string' ? { plugin_id: candidate.plugin_id } : {}),
-    ...(typeof candidate.experiment_id === 'number'
-      ? { experiment_id: candidate.experiment_id }
-      : {}),
-    ...(typeof candidate.filename === 'string' ? { filename: candidate.filename } : {}),
-    ...(typeof candidate.content_type === 'string'
-      ? { content_type: candidate.content_type }
-      : {}),
+    code: row.artifact_key,
+    title: row.display_name,
+    meta: [row.filename, row.plugin_id],
+    date: date ? formatExperimentDate(date) : '',
   }
 }
+
+// Only the database ids are kept: the plugin re-authorizes and copies the
+// file when the job is submitted, so the browser never downloads it.
+function selectArtifact(row: ReadableArtifact): void {
+  const selection: PluginJobArtifactPathInput = {
+    kind: 'artifact-path',
+    experimentId: row.experiment_id,
+    artifactId: row.id,
+    name: row.filename,
+  }
+  emitSelections(props.multiple ? [...selections.value, selection] : [selection])
+  artifactOpen.value = false
+}
 </script>
 
 <template>
@@ -178,8 +197,7 @@ function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileRefe
         size="sm"
         variant="secondary"
         :disabled="disabled"
-        :loading="artifactLoading"
-        @click="artifactOpen = true"
+        @click="openArtifactPicker"
       >
         Existing artifact
       </BaseButton>
@@ -189,22 +207,62 @@ function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileRefe
       :key="mode"
       :mode="mode"
       :files="selectedFiles"
-      :root-name="selections[0]?.rootName"
+      :root-name="uploads[0]?.rootName"
       :multiple="multiple && mode === 'file'"
       :disabled="disabled"
       @upload="selectFiles"
       @remove="removeFiles"
     />
 
-    <AlertBox v-if="artifactError" type="error" :message="artifactError" />
-    <ArtifactSelectorModal
+    <ul v-if="artifacts.length" class="mint-file-uploader__list">
+      <li
+        v-for="artifact in artifacts"
+        :key="`${artifact.experimentId}:${artifact.artifactId}`"
+        class="mint-file-uploader__file mint-generated-path-input__artifact"
+      >
+        <div class="mint-file-uploader__file-info">
+          <span class="mint-file-uploader__file-badge mint-generated-path-input__artifact-badge">ART</span>
+          <div class="mint-file-uploader__file-meta">
+            <span class="mint-file-uploader__file-name">{{ artifact.name }}</span>
+            <span class="mint-file-uploader__file-size">Existing artifact · experiment {{ artifact.experimentId }}</span>
+          </div>
+        </div>
+        <button
+          type="button"
+          :aria-label="`Remove ${artifact.name}`"
+          class="mint-file-uploader__remove-btn"
+          :disabled="disabled"
+          @click.stop="removeArtifact(artifact)"
+        >
+          <svg class="mint-file-uploader__remove-icon" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" viewBox="0 0 24 24">
+            <path d="M18 6 6 18" /><path d="m6 6 12 12" />
+          </svg>
+        </button>
+      </li>
+    </ul>
+
+    <BaseModal
       v-if="canSelectArtifact"
       v-model="artifactOpen"
-      :experiment-id="experimentId"
-      :fetch-detail-on-select="true"
       title="Select a file artifact"
-      @select-detail="selectArtifact"
-    />
+      size="lg"
+    >
+      <ResourcePickerListInternal
+        v-model:search="artifactSearch"
+        label="File artifacts"
+        placeholder="Search file artifacts…"
+        :items="visibleArtifactRows"
+        :item-key="(row) => row.id"
+        :describe="describeArtifact"
+        :loading="artifactLoading"
+        :error="artifactError"
+        :empty-title="artifactRows.length ? 'No matching file artifacts' : 'No file artifacts this plugin can read'"
+        :empty-description="artifactRows.length
+          ? 'Try a different search.'
+          : 'Only active file artifacts saved by this plugin, or by the plugins it declares as readers, can be used as a path.'"
+        @select="selectArtifact"
+      />
+    </BaseModal>
   </div>
 </template>
 
@@ -219,4 +277,15 @@ function artifactFileReference(detail: AnalysisArtifactDetail): ArtifactFileRefe
   flex-wrap: wrap;
   gap: 0.5rem;
 }
+
+.mint-generated-path-input__artifact-badge {
+  --badge-color: var(--color-primary);
+}
+
+.mint-generated-path-input__artifact .mint-file-uploader__remove-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+  color: var(--text-muted);
+  background: transparent;
+}
 </style>

package/src/components/GeneratedPlotlyResult.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type * as PlotlyType from 'plotly.js'
+import type * as PlotlyType from 'plotly.js-dist-min'
 import { computed, toRaw } from 'vue'
 
 import PlotlyChart from './PlotlyChart.vue'

package/src/components/GeneratedPluginView.vue

@@ -7,7 +7,7 @@
  * <GeneratedPluginView base-url="/api/peak-qc" />
  * ```
  */
-import { computed, onMounted, reactive, ref, watch } from 'vue'
+import { computed, onMounted, provide, reactive, ref, watch } from 'vue'
 
 import { generatedJobDefaults, generatedJobFormSchema, normalizeGeneratedJobInput } from '../generated/schema'
 import type { FormSchema } from '../types/form-builder'
@@ -27,6 +27,7 @@ import GeneratedResultRenderer from './GeneratedResultRenderer.vue'
 import JobsStatusTray from './JobsStatusTray.vue'
 import LoadingSpinner from './LoadingSpinner.vue'
 import PluginWorkspaceView from './PluginWorkspaceView.vue'
+import { GENERATED_JOBS_API_KEY } from './internal/generatedJobsApi'
 
 interface Props {
   baseUrl: string
@@ -42,6 +43,7 @@ const generated = useGeneratedAnalysis({
   baseUrl: props.baseUrl,
   transport: props.transport,
 })
+provide(GENERATED_JOBS_API_KEY, { baseUrl: props.baseUrl, transport: props.transport })
 const activeDefinitionId = ref('')
 const selectedJobId = ref('')
 const valuesByDefinition = reactive<Record<string, Record<string, unknown>>>({})
@@ -242,11 +244,9 @@ onMounted(() => {
 
 .mint-generated-workspace__eyebrow {
   margin: 0 0 0.35rem;
-  color: var(--text-muted);
+  color: var(--text-secondary);
   font-size: 0.72rem;
   font-weight: 700;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
 }
 
 .mint-generated-workspace__resources {

package/src/components/GeneratedResultRenderer.vue

@@ -9,6 +9,9 @@
  */
 import { computed } from 'vue'
 
+import { mintApiErrorFromResponse } from '../apiErrors'
+import { createGeneratedAnalysisTransport } from '../composables/useGeneratedAnalysis'
+import { downloadBlob } from '../composables/usePluginClient'
 import type { DataFrameColumn } from '../types'
 import type { GeneratedAnalysisResult } from '../types/generated-ui'
 import ChartContainer from './ChartContainer.vue'
@@ -44,6 +47,21 @@ const artifactHref = computed(() => {
     : ''
 })
 
+// A plugin route needs a Bearer credential, which a plain link navigation never sends.
+// ponytail: buffers the whole file in memory; stream to showSaveFilePicker() if large files strain the tab.
+async function downloadManagedArtifact(event: MouseEvent): Promise<void> {
+  if (props.result.kind !== 'artifact' || !props.result.download_url) return
+  event.preventDefault()
+  const response = await createGeneratedAnalysisTransport()(props.result.download_url)
+  if (!response.ok) {
+    const payload: unknown = await response.json().catch(() => null)
+    throw mintApiErrorFromResponse(response.status, payload, {
+      requestId: response.headers.get('X-Request-ID'),
+    })
+  }
+  downloadBlob(await response.blob(), props.result.name)
+}
+
 function humanize(value: string): string {
   return value.replace(/[_-]+/g, ' ').replace(/^\w/, character => character.toUpperCase())
 }
@@ -86,6 +104,7 @@ function humanize(value: string): string {
       class="mint-generated-result__artifact"
       :href="artifactHref"
       :download="result.name"
+      @click="downloadManagedArtifact"
     >
       <span>{{ result.name }}</span>
       <small>{{ result.media_type }}</small>

package/src/components/InstrumentStateBadge.story.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import InstrumentStateBadge from './InstrumentStateBadge.vue'
+import type { InstrumentBadgeState } from '../types'
+
+const states: InstrumentBadgeState[] = ['error', 'disconnected', 'running', 'standby', 'connected', 'idle', 'never', 'inactive']
+
+function initState() {
+  return {
+    state: 'running' as InstrumentBadgeState,
+    label: '',
+    pulseWhenRunning: true,
+  }
+}
+</script>
+
+<template>
+  <Story title="Workflow/InstrumentStateBadge">
+    <Variant title="Playground" :init-state="initState">
+      <template #default="{ state }">
+        <div style="padding: 2rem; max-width: 600px;">
+          <InstrumentStateBadge
+            :state="state.state"
+            :label="state.label || undefined"
+            :pulse-when-running="state.pulseWhenRunning"
+          />
+        </div>
+      </template>
+      <template #controls="{ state }">
+        <HstSelect v-model="state.state" title="State" :options="states.map(s => ({ label: s, value: s }))" />
+        <HstText v-model="state.label" title="Label override" />
+        <HstCheckbox v-model="state.pulseWhenRunning" title="Pulse when running" />
+      </template>
+    </Variant>
+
+    <Variant title="All states">
+      <div style="padding: 2rem; max-width: 600px; display: flex; flex-wrap: wrap; gap: 1.25rem;">
+        <InstrumentStateBadge v-for="s in states" :key="s" :state="s" :pulse-when-running="false" />
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/InstrumentStateBadge.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-/** Status badge for shared instrument monitor states. */
+/** Status badge for instrument states, plus the platform-derived `never` (no report yet) and `inactive` states. */
 import { computed } from 'vue'
-import type { InstrumentState } from '../types'
+import type { InstrumentBadgeState } from '../types'
 
 interface Props {
-  state: InstrumentState | string
+  state: InstrumentBadgeState | string
   label?: string
   pulseWhenRunning?: boolean
 }
@@ -14,19 +14,29 @@ const props = withDefaults(defineProps<Props>(), {
   pulseWhenRunning: true,
 })
 
-const stateConfig: Record<InstrumentState, { label: string; tone: string }> = {
-  running: { label: 'RUNNING', tone: 'success' },
-  standby: { label: 'STANDBY', tone: 'warning' },
-  idle: { label: 'IDLE', tone: 'muted' },
-  error: { label: 'ERROR', tone: 'error' },
-  connected: { label: 'CONNECTED', tone: 'info' },
-  disconnected: { label: 'OFFLINE', tone: 'muted' },
+const stateConfig: Record<InstrumentBadgeState, { label: string; tone: string }> = {
+  running: { label: 'Running', tone: 'info' },
+  standby: { label: 'Standby', tone: 'warning' },
+  idle: { label: 'Idle', tone: 'muted' },
+  error: { label: 'Error', tone: 'error' },
+  connected: { label: 'Connected', tone: 'success' },
+  disconnected: { label: 'Offline', tone: 'muted' },
+  never: { label: 'Never reported', tone: 'muted' },
+  inactive: { label: 'Inactive', tone: 'muted' },
+}
+
+/** Hollow or non-dot shapes, so states read without relying on color. */
+const shapeClass: Partial<Record<InstrumentBadgeState, string>> = {
+  disconnected: 'mint-instrument-state--offline',
+  never: 'mint-instrument-state--never',
+  inactive: 'mint-instrument-state--inactive',
 }
 
 const normalizedState = computed(() => props.state.toLowerCase())
 const config = computed(() => {
-  const match = stateConfig[normalizedState.value as InstrumentState]
-  return match ?? { label: props.state.toUpperCase(), tone: 'muted' }
+  const match = stateConfig[normalizedState.value as InstrumentBadgeState]
+  const raw = normalizedState.value
+  return match ?? { label: raw.charAt(0).toUpperCase() + raw.slice(1), tone: 'muted' }
 })
 const shouldPulse = computed(() => props.pulseWhenRunning && normalizedState.value === 'running')
 </script>
@@ -37,10 +47,10 @@ const shouldPulse = computed(() => props.pulseWhenRunning && normalizedState.val
     :class="[
       `mint-instrument-state--${config.tone}`,
       { 'mint-instrument-state--pulse': shouldPulse },
-      { 'mint-instrument-state--offline': normalizedState === 'disconnected' },
+      shapeClass[normalizedState as InstrumentBadgeState],
     ]"
   >
-    <span v-if="shouldPulse" class="mint-instrument-state__dot" />
+    <span class="mint-instrument-state__dot" aria-hidden="true" />
     {{ label ?? config.label }}
   </span>
 </template>

package/src/components/JobsStatusTray.vue

@@ -27,11 +27,11 @@ import type {
 
 interface Props {
   source?: PluginJobCenterSource
-  /** @deprecated Pass a source instead. */
+  /** @deprecated Removed in MINT 1.4; pass a source instead. */
   jobs?: readonly JobStateInput[]
-  /** @deprecated Pass source actions instead. */
+  /** @deprecated Removed in MINT 1.4; pass source actions instead. */
   adapter?: JobsStatusTrayAdapter
-  /** @deprecated Event streams belong to the source runtime. */
+  /** @deprecated Removed in MINT 1.4; event streams belong to the source runtime. */
   eventStream?: UsePluginEventStreamReturn<JobStreamData>
   loadOnMount?: boolean
   title?: string
@@ -66,6 +66,20 @@ const tray = usePluginJobCenter({
   eventStream: toRef(props, 'eventStream'),
   loadOnMount: props.loadOnMount,
 })
+// 2f: a job waiting for input is the only one that needs a person — pin it first.
+const activeRows = computed(() => [
+  ...tray.activeJobs.value.filter(job => job.status === 'awaiting_input'),
+  ...tray.activeJobs.value.filter(job => job.status !== 'awaiting_input'),
+])
+const subtitle = computed(() => {
+  const count = (status: JobState['status']) => tray.activeJobs.value.filter(job => job.status === status).length
+  const parts = [
+    [count('running'), 'running'],
+    [count('queued'), 'queued'],
+    [count('awaiting_input'), 'waiting'],
+  ].filter(([n]) => n).map(([n, word]) => `${n} ${word}`)
+  return parts.length ? parts.join(' · ') : `${tray.jobs.value.length} total`
+})
 const canClear = computed(() => (
   tray.deletableJobs.value.length > 0
   && tray.canClearFinished.value
@@ -140,6 +154,10 @@ function statusClass(job: JobState): string {
   return `mint-jobs-tray__status--${job.status.replace('_', '-')}`
 }
 
+function jobPercent(job: JobState): number {
+  return Math.round(normalizeJobPercent(job.progress.percent))
+}
+
 async function cancelJob(job: JobState): Promise<void> {
   const succeeded = await tray.cancelJob(job)
   if (!succeeded && tray.error.value) emit('error', tray.error.value)
@@ -215,7 +233,7 @@ async function clearFinished(): Promise<void> {
           <header class="mint-jobs-tray__header">
             <div>
               <h2 :id="titleId" class="mint-jobs-tray__title">{{ title }}</h2>
-              <p class="mint-jobs-tray__subtitle">{{ tray.jobs.value.length }} total</p>
+              <p class="mint-jobs-tray__subtitle">{{ subtitle }}</p>
             </div>
             <div class="mint-jobs-tray__header-actions">
               <button
@@ -281,9 +299,10 @@ async function clearFinished(): Promise<void> {
                 No active jobs
               </p>
               <article
-                v-for="job in tray.activeJobs.value"
+                v-for="job in activeRows"
                 :key="job.job_id"
-                class="mint-jobs-tray__job mint-jobs-tray__job--active"
+                class="mint-jobs-tray__job"
+                :class="{ 'mint-jobs-tray__job--awaiting-input': job.status === 'awaiting_input' }"
               >
                 <div class="mint-jobs-tray__job-heading">
                   <div class="mint-jobs-tray__job-identity">
@@ -297,8 +316,10 @@ async function clearFinished(): Promise<void> {
                     <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
                   </div>
                   <span class="mint-jobs-tray__status" :class="statusClass(job)">
+                    <span class="mint-jobs-tray__status-dot" aria-hidden="true" />
                     {{ jobStatusLabel(job.status) }}
                   </span>
+                  <span v-if="job.status === 'running'" class="mint-jobs-tray__percent">{{ jobPercent(job) }}%</span>
                 </div>
                 <div
                   v-if="job.status === 'running'"
@@ -307,9 +328,9 @@ async function clearFinished(): Promise<void> {
                   aria-label="Job progress"
                   aria-valuemin="0"
                   aria-valuemax="100"
-                  :aria-valuenow="normalizeJobPercent(job.progress.percent)"
+                  :aria-valuenow="jobPercent(job)"
                 >
-                  <span :style="{ width: `${normalizeJobPercent(job.progress.percent)}%` }" />
+                  <span :style="{ width: `${jobPercent(job)}%` }" />
                 </div>
                 <div class="mint-jobs-tray__job-footer">
                   <span>{{ progressText(job) }}</span>
@@ -372,6 +393,7 @@ async function clearFinished(): Promise<void> {
                     <span class="mint-jobs-tray__kind">{{ job.kind }}</span>
                   </div>
                   <span class="mint-jobs-tray__status" :class="statusClass(job)">
+                    <span class="mint-jobs-tray__status-dot" aria-hidden="true" />
                     {{ jobStatusLabel(job.status) }}
                   </span>
                 </div>