@quazardous/qdadm 2.31.0 → 2.33.0

package/src/components/display/PayloadViewer.vue

@@ -0,0 +1,246 @@
+<script setup lang="ts">
+/**
+ * PayloadViewer - a captured message in its own format (#4112)
+ *
+ * Usage:
+ *   <PayloadViewer :body="capture.body" :content-type="capture.content_type" />
+ *   <PayloadViewer :body="capture.body" :request="{ method: 'POST', url, status: 200, headers }" :mask="maskKeys()" />
+ *
+ * JSON goes to JsonViewer; XML is indented and highlighted (tokenized by
+ * hand, never parsed as HTML); CSV is a table; form-encoded a key/value
+ * table; text gets line numbers; a binary file shows its size, the first
+ * bytes in hex, and a download.
+ */
+import { computed, inject, ref } from 'vue'
+import QdButton from '../base/QdButton.vue'
+import JsonViewer from '../editors/JsonViewer.vue'
+import { useI18n } from '../../i18n/useI18n'
+import {
+  bodyText,
+  detectFormat,
+  FORMAT_EXTENSIONS,
+  hexDump,
+  maskCsv,
+  maskHeaders,
+  maskJson,
+  parseCsv,
+  parseForm,
+  parseJson,
+  prettyXml,
+  piecesText,
+  toBytes,
+  isBinary,
+  type PayloadBody,
+  type PayloadFormat,
+  type PayloadMask,
+} from '../../utils/payload'
+import { formatBytes } from '../../utils/formatters'
+
+export interface PayloadRequest {
+  method?: string
+  url?: string
+  status?: number | null
+  headers?: Record<string, unknown> | null
+}
+
+interface Props {
+  body?: PayloadBody
+  contentType?: string | null
+  /** Force a format instead of detecting it. */
+  format?: PayloadFormat | null
+  /** HTTP context shown above the body. */
+  request?: PayloadRequest | null
+  /** Hide values (tokens, passwords) before display, copy and download. */
+  mask?: PayloadMask | null
+  maxHeight?: string
+  /** CSV rows shown before "show all". */
+  csvRows?: number
+  filename?: string | null
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  body: null,
+  contentType: null,
+  format: null,
+  request: null,
+  mask: null,
+  maxHeight: '28rem',
+  csvRows: 200,
+  filename: null,
+})
+
+const { t } = useI18n()
+const orchestrator = inject<{ toast: { success: (...a: unknown[]) => void; error: (...a: unknown[]) => void } } | null>('qdadmOrchestrator', null)
+
+const contentTypeHeader = computed(() => {
+  const headers = props.request?.headers ?? {}
+  const key = Object.keys(headers).find((k) => k.toLowerCase() === 'content-type')
+  return key ? String(headers[key]) : null
+})
+
+const format = computed<PayloadFormat>(() => detectFormat(props.body, props.contentType ?? contentTypeHeader.value, props.format))
+
+// --- Renderings ---
+
+const json = computed(() => {
+  if (format.value !== 'json') return null
+  const parsed = parseJson(props.body)
+  return parsed.ok ? { ok: true as const, value: maskJson(parsed.value, props.mask) } : parsed
+})
+
+const xml = computed(() => (format.value === 'xml' ? prettyXml(bodyText(props.body), props.mask) : null))
+
+const csvHeader = ref(true)
+const csvAll = ref(false)
+const csv = computed(() => {
+  if (format.value !== 'csv') return null
+  const { separator, rows } = parseCsv(bodyText(props.body))
+  return { separator, rows: maskCsv(rows, props.mask, csvHeader.value) }
+})
+const csvHead = computed(() => (csv.value && csvHeader.value ? csv.value.rows[0] ?? [] : null))
+const csvBody = computed(() => {
+  if (!csv.value) return []
+  const rows = csvHeader.value ? csv.value.rows.slice(1) : csv.value.rows
+  return csvAll.value ? rows : rows.slice(0, props.csvRows)
+})
+const csvTotal = computed(() => (csv.value ? csv.value.rows.length - (csvHeader.value ? 1 : 0) : 0))
+const csvWidth = computed(() => Math.max(0, ...(csv.value?.rows.map((r) => r.length) ?? [0])))
+
+const form = computed(() => (format.value === 'form' ? parseForm(bodyText(props.body), props.mask) : null))
+
+const textLines = computed(() => (format.value === 'text' ? bodyText(props.body).replace(/\r\n?/g, '\n').split('\n') : []))
+
+const bytes = computed(() => (format.value === 'binary' ? toBytes(props.body) : null))
+const hex = computed(() => (bytes.value ? hexDump(bytes.value) : []))
+
+/** Why the body is shown as text: the format it claims did not parse. */
+const fallback = computed<string | null>(() => {
+  if (json.value && !json.value.ok) return t('core.payload.malformed', { format: 'JSON', error: json.value.error })
+  if (xml.value && !xml.value.ok) return t('core.payload.malformed', { format: 'XML', error: xml.value.error ?? '' })
+  return null
+})
+
+// --- Request block ---
+
+const headers = computed(() => maskHeaders(props.request?.headers, props.mask))
+const statusClass = computed(() => {
+  const s = props.request?.status
+  if (!s) return ''
+  return s >= 500 ? 'pl-status--error' : s >= 400 ? 'pl-status--warn' : s >= 300 ? 'pl-status--info' : 'pl-status--ok'
+})
+
+// --- Copy and download: what is shown, masked ---
+
+const shownText = computed<string>(() => {
+  if (json.value?.ok) return JSON.stringify(json.value.value, null, 2)
+  if (xml.value?.ok) return xml.value.lines.map(piecesText).join('\n')
+  if (csv.value) return csv.value.rows.map((r) => r.map((c) => (/["\n]|[,;\t|]/.test(c) ? `"${c.replace(/"/g, '""')}"` : c)).join(csv.value!.separator)).join('\n')
+  if (form.value) return new URLSearchParams(form.value).toString()
+  return bodyText(props.body)
+})
+
+async function copy(): Promise<void> {
+  try {
+    await navigator.clipboard.writeText(shownText.value)
+    orchestrator?.toast.success(t('core.payload.copied'), undefined, 'PayloadViewer')
+  } catch {
+    orchestrator?.toast.error(t('core.payload.copyFailed'), undefined, 'PayloadViewer')
+  }
+}
+
+function download(): void {
+  const blob = isBinary(props.body) && format.value === 'binary'
+    ? new Blob([toBytes(props.body) as BlobPart], { type: props.contentType ?? 'application/octet-stream' })
+    : new Blob([shownText.value], { type: `${props.contentType ?? 'text/plain'};charset=utf-8` })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = props.filename ?? `payload.${FORMAT_EXTENSIONS[format.value]}`
+  a.click()
+  setTimeout(() => URL.revokeObjectURL(url), 0)
+}
+
+defineExpose({ format })
+</script>
+
+<template>
+  <div class="qd-payload" :data-format="format">
+    <div v-if="request" class="qd-payload-request">
+      <div class="qd-payload-line">
+        <span v-if="request.method" class="pl-method">{{ request.method.toUpperCase() }}</span>
+        <span v-if="request.url" class="pl-url">{{ request.url }}</span>
+        <span v-if="request.status" class="pl-status" :class="statusClass">{{ request.status }}</span>
+      </div>
+      <details v-if="headers.length" class="qd-payload-headers">
+        <summary>{{ t('core.payload.headers', { count: headers.length }) }}</summary>
+        <table>
+          <tbody>
+            <tr v-for="[name, value] in headers" :key="name">
+              <th>{{ name }}</th>
+              <td>{{ value }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </details>
+    </div>
+
+    <div class="qd-payload-toolbar">
+      <span class="qd-payload-format">{{ format.toUpperCase() }}</span>
+      <span v-if="bytes" class="qd-payload-size">{{ formatBytes(bytes.length) }}</span>
+      <label v-if="csv" class="qd-payload-check">
+        <input v-model="csvHeader" type="checkbox" /> {{ t('core.payload.headerRow') }}
+      </label>
+      <span class="qd-payload-spacer" />
+      <QdButton v-if="format !== 'binary'" icon="pi pi-copy" text rounded size="small" :aria-label="t('core.payload.copy')"
+        v-tooltip.top="t('core.payload.copy')" @click="copy" />
+      <QdButton icon="pi pi-download" text rounded size="small" :aria-label="t('core.payload.download')"
+        v-tooltip.top="t('core.payload.download')" @click="download" />
+    </div>
+
+    <div v-if="fallback" class="qd-payload-warning"><i class="pi pi-exclamation-triangle" /> {{ fallback }}</div>
+
+    <div class="qd-payload-body" :style="{ maxHeight }">
+      <JsonViewer v-if="json && json.ok" :model-value="(json.value as never)" />
+
+      <pre v-else-if="xml" class="qd-payload-code"><template v-for="(line, i) in xml.lines" :key="i"><span class="pl-n">{{ i + 1 }}</span><span v-for="(p, j) in line" :key="j" :class="p.cls">{{ p.text }}</span>
+</template></pre>
+
+      <div v-else-if="csv" class="qd-payload-table-wrap">
+        <table class="qd-payload-table">
+          <thead v-if="csvHead">
+            <tr>
+              <th class="pl-n" />
+              <th v-for="(h, i) in csvHead" :key="i">{{ h }}</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr v-for="(row, r) in csvBody" :key="r">
+              <td class="pl-n">{{ r + 1 }}</td>
+              <td v-for="c in csvWidth" :key="c">{{ row[c - 1] ?? '' }}</td>
+            </tr>
+          </tbody>
+        </table>
+        <button v-if="!csvAll && csvTotal > csvBody.length" type="button" class="qd-payload-more" @click="csvAll = true">
+          {{ t('core.payload.showAll', { count: csvTotal }) }}
+        </button>
+      </div>
+
+      <table v-else-if="form" class="qd-payload-table qd-payload-kv">
+        <tbody>
+          <tr v-for="([k, v], i) in form" :key="i">
+            <th>{{ k }}</th>
+            <td>{{ v }}</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <div v-else-if="bytes" class="qd-payload-binary">
+        <p>{{ t('core.payload.binary', { size: formatBytes(bytes.length) }) }}</p>
+        <pre class="qd-payload-code">{{ hex.join('\n') }}</pre>
+      </div>
+
+      <pre v-else class="qd-payload-code"><template v-for="(line, i) in (fallback ? bodyText(body).split('\n') : textLines)" :key="i"><span class="pl-n">{{ i + 1 }}</span>{{ line }}
+</template></pre>
+    </div>
+  </div>
+</template>

package/src/components/index.ts

@@ -71,6 +71,14 @@ export { default as RichCardsGrid } from './display/RichCardsGrid.vue'
 export { default as CopyableId } from './display/CopyableId.vue'
 export { default as EmptyState } from './display/EmptyState.vue'
 export { default as IntensityBar } from './display/IntensityBar.vue'
+export { default as LogStream } from './display/LogStream.vue'
+export { default as EntityTimeline } from './display/EntityTimeline.vue'
+export { default as PayloadViewer } from './display/PayloadViewer.vue'
+export { default as PayloadDiff } from './display/PayloadDiff.vue'
+export { default as EmailPreview } from './display/EmailPreview.vue'
+export { default as TaskDialog } from './tasks/TaskDialog.vue'
+export { default as TaskHost } from './tasks/TaskHost.vue'
+export { default as TaskTray } from './tasks/TaskTray.vue'
 export { default as BoolCell } from './BoolCell.vue'
 export { default as SeverityTag } from './SeverityTag.vue'
 export { default as InfoBanner } from './InfoBanner.vue'

package/src/components/layout/AppLayout.vue

@@ -24,6 +24,8 @@ import { useNavContext, type BreadcrumbItem, type NavLinkItem } from '../../comp
 import QdButton from '../base/QdButton.vue'
 import Breadcrumb from 'primevue/breadcrumb'
 import UnsavedChangesDialog from '../dialogs/UnsavedChangesDialog.vue'
+import TaskHost from '../tasks/TaskHost.vue'
+import TaskTray from '../tasks/TaskTray.vue'
 import SidebarBox from './SidebarBox.vue'
 import Zone from './Zone.vue'
 import NavlinksGroup from './NavlinksGroup.vue'
@@ -313,17 +315,29 @@ const showBreadcrumb = computed<boolean>(() => {
             ></i>
           </div>
           <div class="nav-section-items" :class="{ 'nav-section-collapsed': !isSectionExpanded(section) }">
-            <RouterLink
-              v-for="item in section.items"
-              :key="item.route"
-              :to="{ name: item.route }"
-              class="nav-item"
-              :class="{ 'nav-item-active': isNavActive(item) }"
-              @click="handleNavClick($event, item)"
-            >
-              <i :class="item.icon"></i>
-              <span>{{ item.label }}</span>
-            </RouterLink>
+            <template v-for="item in section.items" :key="item.route ?? item.href">
+              <a
+                v-if="item.href"
+                :href="item.href"
+                :target="item.target"
+                :rel="item.rel"
+                class="nav-item nav-item-link"
+              >
+                <i :class="item.icon"></i>
+                <span>{{ item.label }}</span>
+                <span v-if="item.external" class="pi pi-external-link nav-item-external" aria-label="opens in a new tab"></span>
+              </a>
+              <RouterLink
+                v-else
+                :to="{ name: item.route }"
+                class="nav-item"
+                :class="{ 'nav-item-active': isNavActive(item) }"
+                @click="handleNavClick($event, item)"
+              >
+                <i :class="item.icon"></i>
+                <span>{{ item.label }}</span>
+              </RouterLink>
+            </template>
           </div>
         </div>
       </nav>
@@ -333,6 +347,9 @@ const showBreadcrumb = computed<boolean>(() => {
         <slot name="sidebar-after-nav"></slot>
       </div>
 
+      <!-- Running tasks (#4114): shown while there is one -->
+      <TaskTray />
+
       <SidebarBox
         v-if="authEnabled"
         id="user-zone"
@@ -409,6 +426,9 @@ const showBreadcrumb = computed<boolean>(() => {
     <!-- Notification panel (rendered outside sidebar, follows sidebar position) -->
     <Zone name="_app:notifications" />
 
+    <!-- Task follow dialog and typed confirmations (#4114) -->
+    <TaskHost />
+
     <!-- Unsaved Changes Dialog (auto-rendered when a form registers guardDialog) -->
     <UnsavedChangesDialog
       v-if="guardDialog"

package/src/components/layout/defaults/DefaultMenu.vue

@@ -110,17 +110,29 @@ watch(() => route?.path, () => {
         ></i>
       </div>
       <div class="nav-section-items" :class="{ 'nav-section-collapsed': !isSectionExpanded(section) }">
-        <RouterLink
-          v-for="item in section.items"
-          :key="item.route"
-          :to="{ name: item.route }"
-          class="nav-item"
-          :class="{ 'nav-item-active': isNavActive(item) }"
-          @click="handleNavClick($event, item)"
-        >
-          <i :class="item.icon"></i>
-          <span>{{ item.label }}</span>
-        </RouterLink>
+        <template v-for="item in section.items" :key="item.route ?? item.href">
+          <a
+            v-if="item.href"
+            :href="item.href"
+            :target="item.target"
+            :rel="item.rel"
+            class="nav-item nav-item-link"
+          >
+            <i :class="item.icon"></i>
+            <span>{{ item.label }}</span>
+            <span v-if="item.external" class="pi pi-external-link nav-item-external" aria-label="opens in a new tab"></span>
+          </a>
+          <RouterLink
+            v-else
+            :to="{ name: item.route }"
+            class="nav-item"
+            :class="{ 'nav-item-active': isNavActive(item) }"
+            @click="handleNavClick($event, item)"
+          >
+            <i :class="item.icon"></i>
+            <span>{{ item.label }}</span>
+          </RouterLink>
+        </template>
       </div>
     </div>
   </nav>

package/src/components/tasks/TaskDialog.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+/**
+ * TaskDialog - follow one task run (#4114)
+ *
+ * Status, progress (indeterminate without a figure), current step, the live
+ * log, then the result or the error, a link to the task, and cancel when the
+ * backend allows it. Closing it does not stop anything: the run goes on in
+ * the tray. TaskHost renders it; a page may render its own with a #result slot.
+ */
+import { computed, onBeforeUnmount, ref } from 'vue'
+import { RouterLink } from 'vue-router'
+import Dialog from 'primevue/dialog'
+import ProgressBar from 'primevue/progressbar'
+import QdButton from '../base/QdButton.vue'
+import LogStream from '../display/LogStream.vue'
+import JsonViewer from '../editors/JsonViewer.vue'
+import { useI18n } from '../../i18n/useI18n'
+import { getTaskStore } from '../../tasks/taskStore'
+
+interface Props {
+  runId: string | null
+  width?: string
+}
+
+const props = withDefaults(defineProps<Props>(), { width: '46rem' })
+const emit = defineEmits<{ close: [] }>()
+
+const { t } = useI18n()
+const store = getTaskStore()
+
+const run = computed(() => (props.runId ? store.state.runs.find((r) => r.id === props.runId) ?? null : null))
+const def = computed(() => (props.runId ? store.definition(props.runId) : undefined))
+const final = computed(() => (run.value ? store.isFinal(run.value.status) : false))
+const logSource = computed(() => (run.value?.taskId != null && def.value?.log ? def.value.log(run.value.taskId) : null))
+const link = computed(() => (run.value?.taskId != null && def.value?.to ? def.value.to(run.value.taskId) : null))
+const canCancel = computed(() => !!def.value?.cancel && !final.value && run.value?.taskId != null)
+const resultIsObject = computed(() => run.value?.result !== null && typeof run.value?.result === 'object')
+
+const now = ref(Date.now())
+const ticker = setInterval(() => (now.value = Date.now()), 1000)
+onBeforeUnmount(() => clearInterval(ticker))
+
+const elapsed = computed(() => {
+  if (!run.value) return ''
+  const ms = (run.value.endedAt ?? now.value) - run.value.startedAt
+  const s = Math.round(ms / 1000)
+  return s < 60 ? `${s} s` : `${Math.floor(s / 60)} min ${s % 60} s`
+})
+</script>
+
+<template>
+  <Dialog :visible="!!run" modal :header="run?.label" :style="{ width }" :breakpoints="{ '640px': '96vw' }"
+    class="qd-task-dialog" @update:visible="(v: boolean) => !v && emit('close')">
+    <template v-if="run">
+      <div class="qd-task-head">
+        <span class="qd-task-status" :class="`qd-task-status--${run.status}`">
+          <i v-if="!final" class="pi pi-spin pi-spinner" />
+          <i v-else-if="run.status === 'succeeded'" class="pi pi-check-circle" />
+          <i v-else-if="run.status === 'failed'" class="pi pi-times-circle" />
+          <i v-else class="pi pi-ban" />
+          {{ t(`core.task.status.${run.status}`) }}
+        </span>
+        <span class="qd-task-elapsed">{{ elapsed }}</span>
+        <span v-if="run.taskId !== null" class="qd-task-id">#{{ run.taskId }}</span>
+      </div>
+
+      <ProgressBar v-if="!final" class="qd-task-progress" :mode="run.progress === null ? 'indeterminate' : 'determinate'"
+        :value="Math.round(run.progress ?? 0)" :show-value="run.progress !== null" />
+      <div v-if="run.step" class="qd-task-step">{{ run.step }}</div>
+
+      <LogStream v-if="logSource" :key="run.id" class="qd-task-log" :source="logSource" height="16rem"
+        error-pattern="error|fatal|failed" />
+
+      <div v-if="run.status === 'failed' && run.error" class="qd-task-error"><i class="pi pi-exclamation-triangle" /> {{ run.error }}</div>
+      <div v-else-if="!final && run.error" class="qd-task-warning">{{ t('core.task.readError', { error: run.error }) }}</div>
+
+      <div v-if="run.status === 'succeeded' && run.result !== null" class="qd-task-result">
+        <slot name="result" :run="run">
+          <JsonViewer v-if="resultIsObject" :model-value="(run.result as never)" height="12rem" />
+          <span v-else>{{ run.result }}</span>
+        </slot>
+      </div>
+    </template>
+
+    <template #footer>
+      <RouterLink v-if="link" :to="(link as never)" class="qd-task-link" @click="emit('close')">
+        <i class="pi pi-external-link" /> {{ t('core.task.open') }}
+      </RouterLink>
+      <span class="qd-task-spacer" />
+      <QdButton v-if="canCancel" severity="danger" text :loading="run?.cancelling" icon="pi pi-stop-circle"
+        :label="t('core.task.cancel')" @click="run && store.cancel(run.id)" />
+      <QdButton :label="final ? t('core.task.close') : t('core.task.background')" severity="secondary" @click="emit('close')" />
+    </template>
+  </Dialog>
+</template>

package/src/components/tasks/TaskHost.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+/**
+ * TaskHost - where task dialogs live (#4114)
+ *
+ * Renders the follow dialog of the open run and the typed confirmation of a
+ * dangerous task. AppLayout mounts one; an app with its own layout mounts
+ * it once, near the root. Without a host, a task that asks for confirmation
+ * does not start.
+ */
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import InputText from 'primevue/inputtext'
+import SimpleDialog from '../dialogs/SimpleDialog.vue'
+import TaskDialog from './TaskDialog.vue'
+import { useI18n } from '../../i18n/useI18n'
+import { useTaskRunner } from '../../tasks/useTaskRunner'
+import { getTaskStore } from '../../tasks/taskStore'
+
+useTaskRunner()
+const store = getTaskStore()
+const { t } = useI18n()
+
+store.state.hosts++
+onBeforeUnmount(() => store.state.hosts--)
+
+const pending = computed(() => store.state.pendingConfirm)
+const typed = ref('')
+watch(pending, () => (typed.value = ''))
+const expected = computed(() => pending.value?.confirm.typed ?? null)
+const confirmable = computed(() => expected.value === null || typed.value === expected.value)
+</script>
+
+<template>
+  <TaskDialog :run-id="store.state.openId" @close="store.open(null)" />
+  <SimpleDialog :visible="!!pending" :title="pending?.label ?? ''" :confirm-label="pending?.confirm.accept ?? t('core.task.start')"
+    confirm-severity="danger" :confirm-disabled="!confirmable" :cancel-label="t('core.task.dontStart')"
+    @confirm="store.answerConfirm(true)" @cancel="store.answerConfirm(false)"
+    @update:visible="(v: boolean) => !v && pending && store.answerConfirm(false)">
+    <p v-if="pending?.confirm.message" class="qd-task-confirm-message">{{ pending.confirm.message }}</p>
+    <template v-if="expected !== null">
+      <label class="qd-task-confirm-label" for="qd-task-typed">{{ t('core.task.typeToConfirm', { value: expected }) }}</label>
+      <InputText id="qd-task-typed" v-model="typed" class="qd-task-confirm-input" autocomplete="off" spellcheck="false"
+        @keydown.enter="confirmable && store.answerConfirm(true)" />
+    </template>
+  </SimpleDialog>
+</template>

package/src/components/tasks/TaskTray.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+/**
+ * TaskTray - the running tasks, in the sidebar (#4114)
+ *
+ * Shown while there is a run to show. Each run reopens its dialog; finished
+ * ones can be cleared.
+ */
+import { computed, ref } from 'vue'
+import Popover from 'primevue/popover'
+import QdButton from '../base/QdButton.vue'
+import { useI18n } from '../../i18n/useI18n'
+import { getTaskStore } from '../../tasks/taskStore'
+
+const store = getTaskStore()
+const { t } = useI18n()
+const popover = ref<InstanceType<typeof Popover> | null>(null)
+
+const runs = computed(() => store.state.runs)
+const activeCount = computed(() => store.active.value.length)
+const hasFinished = computed(() => runs.value.some((r) => store.isFinal(r.status)))
+
+function openRun(id: string): void {
+  store.open(id)
+  popover.value?.hide()
+}
+
+const icon = (status: string) =>
+  ({ succeeded: 'pi pi-check-circle', failed: 'pi pi-times-circle', cancelled: 'pi pi-ban' })[status] ?? 'pi pi-spin pi-spinner'
+</script>
+
+<template>
+  <div v-if="runs.length" class="qd-task-tray">
+    <button type="button" class="qd-task-tray-button" :class="{ 'qd-task-tray-button--busy': activeCount > 0 }"
+      :aria-label="t('core.task.tray', { count: activeCount })" @click="popover?.toggle($event)">
+      <i :class="activeCount ? 'pi pi-spin pi-cog' : 'pi pi-check'" />
+      <span class="qd-task-tray-label">{{ activeCount ? t('core.task.tray', { count: activeCount }) : t('core.task.trayDone') }}</span>
+      <span v-if="activeCount" class="qd-task-tray-count">{{ activeCount }}</span>
+    </button>
+    <Popover ref="popover" class="qd-task-popover">
+      <ul class="qd-task-list">
+        <li v-for="r in runs" :key="r.id">
+          <button type="button" class="qd-task-item" :class="`qd-task-item--${r.status}`" @click="openRun(r.id)">
+            <i :class="icon(r.status)" />
+            <span class="qd-task-item-label">{{ r.label }}</span>
+            <span class="qd-task-item-state">
+              {{ r.progress !== null && !store.isFinal(r.status) ? `${Math.round(r.progress)} %` : t(`core.task.status.${r.status}`) }}
+            </span>
+          </button>
+        </li>
+      </ul>
+      <QdButton v-if="hasFinished" size="small" text icon="pi pi-trash" :label="t('core.task.clear')" @click="store.clearFinished()" />
+    </Popover>
+  </div>
+</template>

package/src/composables/index.ts

@@ -110,6 +110,17 @@ export {
   type LayoutMeta,
 } from './useLayoutResolver'
 export { useSSEBridge, type UseSSEBridgeReturn } from './useSSEBridge'
+export {
+  useLogStream,
+  type LogSource,
+  type LogLine,
+  type LogPollResult,
+  type LogPushApi,
+  type LogStreamStatus,
+  type UseLogStreamOptions,
+  type UseLogStreamReturn,
+} from './useLogStream'
+export { useTaskRunner, taskAction } from '../tasks/useTaskRunner'
 export {
   useDeferred,
   useDeferredValue,

package/src/composables/useListPage.filters.ts

@@ -23,7 +23,10 @@ export interface UseListFiltersDeps {
   /** Entity name used for the registry lookup. */
   entityName: string
   /** EntityManager (needs .request for optionsEndpoint mode). */
-  manager: { request: (method: string, endpoint: string) => Promise<unknown> }
+  manager: {
+    request: (method: string, endpoint: string) => Promise<unknown>
+    storage?: { supportsPathRequests?: boolean } | null
+  }
   /** Orchestrator, forwarded to FilterQuery for optionsEntity mode. */
   orchestrator: QueryOrchestratorLike | null | undefined
   /** Loaded list items (source for optionsFromCache mode). */
@@ -184,9 +187,31 @@ export function useListFilters(deps: UseListFiltersDeps): UseListFiltersReturn {
     )
   }
 
+  const warnedEndpoints = new Set<string>()
+
+  /**
+   * An `optionsEndpoint` filter on a storage that cannot run a path request
+   * (#4069) — an `SdkStorage` without its `request` option. The load fails
+   * later, behind a dropdown reading "No available options"; said here, by
+   * name, where the declaration can still be fixed.
+   */
+  function warnIfEndpointUnreachable(name: string, filterConfig: FilterOptions): void {
+    if (!filterConfig?.optionsEndpoint) return
+    if (manager?.storage?.supportsPathRequests !== false) return
+    if (warnedEndpoints.has(name)) return
+    warnedEndpoints.add(name)
+    console.warn(
+      `[qdadm] Filter "${name}" on "${entityName}" loads its options from an ` +
+        `endpoint, but this entity's storage cannot run a path request, so the ` +
+        `dropdown will stay empty. Give the SdkStorage a request option, or ` +
+        `pass the filter its options directly.`
+    )
+  }
+
   function addFilter(name: string, filterConfig: FilterOptions): void {
     warnIfReservedName(name)
     warnIfUnknownType(name, filterConfig?.type)
+    warnIfEndpointUnreachable(name, filterConfig)
     filtersMap.value.set(name, {
       name,
       type: 'select',