@revenexx/studio-integrations 1.1.1 → 1.2.0

package/dist/runtime/components/Integrations/RunDetailPanel.vue

@@ -3,8 +3,10 @@ import { computed, onUnmounted, ref, watch } from "vue";
 import { Download as DownloadIcon, RefreshCircle as RefreshIcon } from "#solar-icons";
 import { Badge, Button, Dialog, DialogContent, DialogHeader, DialogTitle } from "@revenexx/studio";
 import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
-import { IntegrationsApiError } from "../../utils/apiError";
+import { IntegrationsApiError, errorReason } from "../../utils/apiError";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
+import { formatDuration } from "../../utils/formatDuration";
+import { unwrapRun } from "../../utils/runEnvelope";
 const props = defineProps({
   run: { type: Object, required: true },
   view: { type: String, required: false, default: "details" }
@@ -59,14 +61,6 @@ function pickStr(obj, keys) {
   const v = pick(obj, keys);
   return v == null ? null : String(v);
 }
-function unwrapRun(res) {
-  if (!res || typeof res !== "object") return null;
-  const o = res;
-  if ("data" in o && o.data && typeof o.data === "object" && !("status" in o) && !("temporal_run_id" in o)) {
-    return o.data;
-  }
-  return o;
-}
 function isNonEmptyObject(v) {
   return !!v && typeof v === "object" && !Array.isArray(v) && Object.keys(v).length > 0;
 }
@@ -141,8 +135,7 @@ function statusOf(e) {
   return e instanceof IntegrationsApiError ? e.status : null;
 }
 function genericMsg(e, fallback) {
-  if (e instanceof IntegrationsApiError) return e.message || fallback;
-  return e?.message ?? fallback;
+  return errorReason(e, fallback);
 }
 function detailsErrMsg(e) {
   const s = statusOf(e);
@@ -170,12 +163,7 @@ function stepsErrMsg(e) {
   if (s === 503) return t("integration.runs.detail.error.details.unavailable");
   return genericMsg(e, t("integration.runs.detail.error.steps.generic"));
 }
-function fmtMs(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms}ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
-  return `${(ms / 6e4).toFixed(1)}m`;
-}
+const fmtMs = formatDuration;
 function activityName(a) {
   const at = a ? a.activity_type ?? a.activityType : void 0;
   if (typeof at === "string") return at;

package/dist/runtime/components/Integrations/RunResponseModal.d.vue.ts

@@ -1,18 +1,40 @@
+import type { RunOutput } from '../../utils/runOutputs.js';
 /**
- * Result surface for a manual run, sync and async alike. The parent opens it
- * in a loading state, awaits the trigger, then feeds through the outcome:
+ * Result surface for a manual run, sync and async alike.
  *
- *  - sync:  the run's response body (JSON) or a mapped error (timeout /
- *           failed run). A failed 422 ships the run object, so `runId` lets
- *           the operator jump straight into the run detail.
- *  - async: a started confirmation with the fresh run's number — the visible
- *           counterpart to the fire-and-forget POST.
+ * BOTH MODES END HERE, and that is the point of the component (PO-380). The
+ * parent opens it on the press, awaits the trigger, and then feeds through
+ * whatever it learns about the run — the body a sync request waited for, or the
+ * successive states of an async run the parent follows on the author's behalf.
+ * What differs between the two is only who does the waiting; the async branch
+ * used to stop at "run #99 started", which said that the press did something and
+ * nothing about what it did.
+ *
+ * WHAT IT LEADS WITH is the other half. A run's record carries its Temporal ids,
+ * its two re-run references and four timestamps, and the author pressed Run to
+ * see none of them: `outputs` is the returned value split per node and named the
+ * way the canvas names it, `result` is that value whole for a shape that cannot
+ * be split, and the record itself is a click away rather than printed here.
  */
+interface RunSummary {
+    id?: unknown;
+    status?: unknown;
+    started_at?: unknown;
+    completed_at?: unknown;
+}
 type __VLS_Props = {
     open: boolean;
+    /** The trigger request is still out. */
     loading?: boolean;
     mode?: 'sync' | 'async';
-    response?: unknown;
+    /** The run as the platform last reported it — the identity line above the result. */
+    run?: RunSummary | null;
+    /** What the run returned, per node. `null` where the value has no such shape. */
+    outputs?: RunOutput[] | null;
+    /** …and the value whole, for when it has not. */
+    result?: unknown;
+    /** The studio is still following a run that has not ended. */
+    following?: boolean;
     error?: string | null;
     /** The run behind this result (sync failure / async start) for deep-linking. */
     runId?: string | null;

package/dist/runtime/components/Integrations/RunResponseModal.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { computed } from "vue";
 import { CheckCircle as CheckCircle2, RefreshCircle as Loader2 } from "#solar-icons";
 import {
   Button,
@@ -8,22 +9,50 @@ import {
   DialogHeader,
   DialogTitle
 } from "@revenexx/studio";
-defineProps({
+import { formatDuration } from "../../utils/formatDuration";
+import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { isTerminalRun } from "../../utils/runEnvelope";
+const props = defineProps({
   open: { type: Boolean, required: true },
   loading: { type: Boolean, required: false },
   mode: { type: String, required: false },
-  response: { type: null, required: false },
+  run: { type: [Object, null], required: false },
+  outputs: { type: [Array, null], required: false },
+  result: { type: null, required: false },
+  following: { type: Boolean, required: false },
   error: { type: [String, null], required: false },
   runId: { type: [String, null], required: false }
 });
 const emit = defineEmits(["update:open", "view-run"]);
 const t = useIntegrationsT();
+const runNumber = computed(() => props.run?.id != null ? String(props.run.id) : props.runId);
+const status = computed(() => props.run?.status != null ? String(props.run.status) : "");
+const duration = computed(() => {
+  const from = props.run?.started_at;
+  const to = props.run?.completed_at;
+  if (typeof from !== "string" || typeof to !== "string") return null;
+  const ms = Date.parse(to) - Date.parse(from);
+  return Number.isFinite(ms) && ms >= 0 ? ms : null;
+});
+const ended = computed(() => {
+  if (props.following) return false;
+  if (props.mode !== "async") return true;
+  return isTerminalRun(props.run);
+});
+const returnedNothing = computed(() => props.result == null || typeof props.result === "object" && !Array.isArray(props.result) && !Object.keys(props.result).length);
+function pretty(value) {
+  return typeof value === "string" ? value : JSON.stringify(value, null, 2);
+}
 </script>
 
 <template>
   <Dialog :open="open" @update:open="(v) => emit('update:open', v)">
     <!-- Wide result surface — but hard-capped: min-w-0 down the tree keeps the
-         JSON <pre> scrolling INSIDE instead of blowing the dialog open. -->
+         JSON <pre> scrolling INSIDE instead of blowing the dialog open. The same
+         had to be said about the height, and was not: the dialog grew as tall as
+         whatever came back, `overflow-hidden` clipped what stuck out, and nothing
+         scrolled — so a result of two node outputs ran off the top and the bottom
+         of the screen at once and took the buttons below it out of reach (PO-402). -->
     <DialogContent class="max-w-[94vw] overflow-hidden sm:max-w-4xl">
       <DialogHeader>
         <DialogTitle>{{ mode === "async" ? t("integration.runs.response.title.async") : t("integration.runs.response.title.sync") }}</DialogTitle>
@@ -32,7 +61,10 @@ const t = useIntegrationsT();
         </DialogDescription>
       </DialogHeader>
 
-      <div class="min-w-0 max-w-full text-sm">
+      <!-- The body is what scrolls, which is how the create-workflow, node-config
+           and SFTP-import dialogs solve the same thing. Capped below the viewport so
+           the dialog's own header stays put above it. -->
+      <div class="min-w-0 max-h-[70vh] max-w-full overflow-y-auto text-sm">
         <div v-if="loading" class="flex items-center gap-2 py-6 text-muted-foreground">
           <Loader2 :size="16" class="animate-spin" />
           {{ mode === "async" ? t("integration.runs.response.loading.async") : t("integration.runs.response.loading.sync") }}
@@ -49,36 +81,72 @@ const t = useIntegrationsT();
           </div>
         </template>
 
-        <template v-else-if="mode === 'async'">
-          <div class="flex items-center gap-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-emerald-700">
+        <template v-else>
+          <!-- The confirmation an async press earns: the run exists and is named,
+               whatever the studio manages to read back about it afterwards. -->
+          <div
+            v-if="mode === 'async'"
+            class="flex items-center gap-2 rounded-md border border-emerald-500/20 bg-emerald-500/5 px-3 py-2 text-emerald-700"
+          >
             <CheckCircle2 :size="15" class="shrink-0" />
-            <span v-if="runId">{{ t("integration.runs.response.async.startedWithId", { id: runId }) }}</span>
+            <span v-if="runNumber">{{ t("integration.runs.response.async.startedWithId", { id: runNumber }) }}</span>
             <span v-else>{{ t("integration.runs.response.async.started") }}</span>
           </div>
-          <div class="mt-3 flex justify-end gap-2">
+
+          <!-- Where the run has got to: three facts, and the rest of its record
+               stays behind the button below. -->
+          <div v-if="runNumber || status" class="mt-3 flex flex-wrap items-center gap-x-2 gap-y-1 text-muted-foreground">
+            <span v-if="runNumber" class="font-mono">{{ t("integration.runs.response.runNumber", { id: runNumber }) }}</span>
+            <span
+              v-if="status"
+              class="rounded px-1.5 py-0.5 text-xs"
+              :class="runStatusClass(status)"
+            >{{ runStatusLabel(status) }}</span>
+            <span v-if="duration != null" class="tabular-nums text-xs">{{ formatDuration(duration) }}</span>
+          </div>
+
+          <div v-if="following" class="mt-3 flex items-center gap-2 py-3 text-muted-foreground">
+            <Loader2 :size="16" class="animate-spin" />
+            {{ t("integration.runs.response.following") }}
+          </div>
+
+          <!-- What it returned, one block per node that produced something. -->
+          <div v-else-if="outputs?.length" class="mt-3 space-y-3">
+            <div v-for="out in outputs" :key="out.nodeId" class="min-w-0">
+              <p class="mb-1 font-medium text-foreground">
+                {{ out.name }}
+              </p>
+              <pre
+                class="max-h-[45vh] w-full min-w-0 max-w-full overflow-auto rounded-md border border-black/[0.06] bg-slate-50 p-3 text-xs"
+              >{{ pretty(out.value) }}</pre>
+            </div>
+          </div>
+
+          <!-- Nothing at all where the run has not ended: the studio has stopped
+               looking, which is not the same as the run having finished, and the
+               confirmation and the status line above already say where it stands. -->
+          <template v-else-if="ended">
+            <p v-if="returnedNothing" class="mt-3 py-3 text-muted-foreground">
+              {{ t("integration.runs.response.nothingReturned") }}
+            </p>
+
+            <!-- A returned value this workflow's nodes cannot account for: shown
+                 whole rather than filed under a name it may not belong to. -->
+            <pre
+              v-else
+              class="mt-3 max-h-[60vh] w-full min-w-0 max-w-full overflow-auto rounded-md border border-black/[0.06] bg-slate-50 p-3 text-xs"
+            >{{ pretty(result) }}</pre>
+          </template>
+
+          <div class="mt-4 flex justify-end gap-2">
             <Button variant="outline" class="h-8 text-sm" @click="emit('update:open', false)">
               {{ t("integration.common.action.close") }}
             </Button>
-            <Button v-if="runId" class="h-8 text-sm" @click="emit('view-run', runId)">
+            <Button v-if="runNumber" class="h-8 text-sm" @click="emit('view-run', String(runNumber))">
               {{ t("integration.runs.response.action.viewRun") }}
             </Button>
           </div>
         </template>
-
-        <template v-else-if="response !== void 0 && response !== null">
-          <pre
-            class="max-h-[66vh] w-full min-w-0 max-w-full overflow-auto rounded-md border border-black/[0.06] bg-slate-50 p-3 text-xs"
-          >{{ JSON.stringify(response, null, 2) }}</pre>
-          <div v-if="runId" class="mt-3 flex justify-end">
-            <Button variant="outline" class="h-8 text-sm" @click="emit('view-run', runId)">
-              {{ t("integration.runs.response.action.viewRun") }}
-            </Button>
-          </div>
-        </template>
-
-        <p v-else class="py-6 text-muted-foreground">
-          {{ t("integration.runs.response.empty") }}
-        </p>
       </div>
     </DialogContent>
   </Dialog>

package/dist/runtime/components/Integrations/RunResponseModal.vue.d.ts

@@ -1,18 +1,40 @@
+import type { RunOutput } from '../../utils/runOutputs.js';
 /**
- * Result surface for a manual run, sync and async alike. The parent opens it
- * in a loading state, awaits the trigger, then feeds through the outcome:
+ * Result surface for a manual run, sync and async alike.
  *
- *  - sync:  the run's response body (JSON) or a mapped error (timeout /
- *           failed run). A failed 422 ships the run object, so `runId` lets
- *           the operator jump straight into the run detail.
- *  - async: a started confirmation with the fresh run's number — the visible
- *           counterpart to the fire-and-forget POST.
+ * BOTH MODES END HERE, and that is the point of the component (PO-380). The
+ * parent opens it on the press, awaits the trigger, and then feeds through
+ * whatever it learns about the run — the body a sync request waited for, or the
+ * successive states of an async run the parent follows on the author's behalf.
+ * What differs between the two is only who does the waiting; the async branch
+ * used to stop at "run #99 started", which said that the press did something and
+ * nothing about what it did.
+ *
+ * WHAT IT LEADS WITH is the other half. A run's record carries its Temporal ids,
+ * its two re-run references and four timestamps, and the author pressed Run to
+ * see none of them: `outputs` is the returned value split per node and named the
+ * way the canvas names it, `result` is that value whole for a shape that cannot
+ * be split, and the record itself is a click away rather than printed here.
  */
+interface RunSummary {
+    id?: unknown;
+    status?: unknown;
+    started_at?: unknown;
+    completed_at?: unknown;
+}
 type __VLS_Props = {
     open: boolean;
+    /** The trigger request is still out. */
     loading?: boolean;
     mode?: 'sync' | 'async';
-    response?: unknown;
+    /** The run as the platform last reported it — the identity line above the result. */
+    run?: RunSummary | null;
+    /** What the run returned, per node. `null` where the value has no such shape. */
+    outputs?: RunOutput[] | null;
+    /** …and the value whole, for when it has not. */
+    result?: unknown;
+    /** The studio is still following a run that has not ended. */
+    following?: boolean;
     error?: string | null;
     /** The run behind this result (sync failure / async start) for deep-linking. */
     runId?: string | null;

package/dist/runtime/components/Integrations/RunsTable.d.vue.ts

@@ -1,4 +1,5 @@
-import type { WorkflowRun } from '../../types/integrations.js';
+import type { RunStatus, TriggerType, WorkflowRun } from '../../types/integrations.js';
+import type { RunSort, RunSortDirection } from '../../utils/runFeedQuery.js';
 type __VLS_Props = {
     runs: WorkflowRun[];
     loading?: boolean;
@@ -7,14 +8,71 @@ type __VLS_Props = {
     pagination?: boolean;
     /** false inside a workflow — the context makes the column redundant. */
     showWorkflow?: boolean;
+    /**
+     * The owning list reads its page and its narrowing from the platform.
+     *
+     * The table then renders the rows it is handed and reports what the operator
+     * asked for, instead of narrowing and slicing an array. That is what lets the
+     * list reach past the newest hundred runs at all (PO-369).
+     */
+    serverMode?: boolean;
+    /** How many runs match the narrowing. The pager's "of 7"; server mode only. */
+    total?: number;
+    /**
+     * How many rows a page holds — the SAME number the page asks the platform for.
+     *
+     * The shared table works its footer's "showing 1–25 of 140" out from its own
+     * page size, so a table left on its default while the request asks for another
+     * number states a range that is simply wrong: it counted twenty where
+     * twenty-five had arrived.
+     */
+    perPage?: number;
+    /** The narrowing in force. Owned by the page, drawn here. */
+    status?: RunStatus[];
+    triggerType?: TriggerType | '';
+    /** The order the platform is reading the list in. Server mode only. */
+    sort?: RunSort;
+    direction?: RunSortDirection;
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+type __VLS_PublicProps = __VLS_Props & {
+    /** 1-based, as the platform pages. The shared table counts from zero. */
+    'page'?: number;
+};
+declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    search: (text: string) => any;
     changed: () => any;
-}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    narrow: (patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any;
+    "page-size": (size: number) => any;
+    reorder: (order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any;
+    "update:page": (value: number) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((text: string) => any) | undefined;
     onChanged?: (() => any) | undefined;
+    onNarrow?: ((patch: {
+        status?: RunStatus[];
+        triggerType?: TriggerType | "";
+    }) => any) | undefined;
+    "onPage-size"?: ((size: number) => any) | undefined;
+    onReorder?: ((order: {
+        sort: RunSort;
+        direction: RunSortDirection;
+    }) => any) | undefined;
+    "onUpdate:page"?: ((value: number) => any) | undefined;
 }>, {
+    sort: RunSort;
     loading: boolean;
+    total: number;
+    direction: RunSortDirection;
+    triggerType: TriggerType | "";
+    perPage: number;
     pagination: boolean;
     showWorkflow: boolean;
+    serverMode: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/Integrations/RunsTable.vue

@@ -1,19 +1,36 @@
 <script setup>
 import { computed, onMounted, onUnmounted, ref } from "vue";
-import { Badge } from "@revenexx/studio";
+import {
+  Badge,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger
+} from "@revenexx/studio";
+import { DEFAULT_RUN_DIRECTION, DEFAULT_RUN_SORT } from "../../utils/runFeedQuery";
 import { RUN_STATUS_COLUMN_WIDTH, RUN_STATUS_WORDS, normalisedRunStatus, runStatusClass, runStatusLabel } from "../../utils/statusStyle";
+import { formatDuration } from "../../utils/formatDuration";
 import { TRIGGER_TYPE_WORDS, triggerTypeLabel } from "../../data/integrationNodeCatalog";
 const props = defineProps({
   runs: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false },
   emptyText: { type: String, required: false },
   pagination: { type: Boolean, required: false, default: true },
-  showWorkflow: { type: Boolean, required: false, default: true }
+  showWorkflow: { type: Boolean, required: false, default: true },
+  serverMode: { type: Boolean, required: false, default: false },
+  total: { type: Number, required: false, default: 0 },
+  perPage: { type: Number, required: false, default: 25 },
+  status: { type: Array, required: false },
+  triggerType: { type: String, required: false, default: "" },
+  sort: { type: null, required: false, default: DEFAULT_RUN_SORT },
+  direction: { type: String, required: false, default: DEFAULT_RUN_DIRECTION }
 });
-const emit = defineEmits(["changed"]);
+const emit = defineEmits(["changed", "narrow", "search", "page-size", "reorder"]);
+const page = defineModel("page", { type: Number, ...{ default: 1 } });
 const t = useIntegrationsT();
 const router = useRouter();
-const emptyText = computed(() => props.emptyText ?? t("integration.runs.table.empty"));
+const emptyText = computed(() => props.emptyText ?? (anyNarrowing.value || searchText.value ? t("integration.runs.table.empty.narrowed") : t("integration.runs.table.empty")));
 const now = ref(Date.now());
 let tick = null;
 onMounted(() => {
@@ -39,12 +56,6 @@ function formatRelative(iso) {
   if (ms < 864e5) return t("integration.common.time.hoursAgo", Math.floor(ms / 36e5));
   return t("integration.common.time.daysAgo", Math.floor(ms / 864e5));
 }
-function formatDuration(ms) {
-  if (ms == null) return "\u2014";
-  if (ms < 1e3) return `${ms}ms`;
-  if (ms < 6e4) return `${(ms / 1e3).toFixed(2)}s`;
-  return `${(ms / 6e4).toFixed(1)}m`;
-}
 function liveDuration(run) {
   if (!run.startedAt) return null;
   const start = Date.parse(run.startedAt);
@@ -52,7 +63,7 @@ function liveDuration(run) {
   const end = run.finishedAt ? Date.parse(run.finishedAt) : now.value;
   return end - start;
 }
-const filterTabs = computed(() => props.pagination ? [
+const filterTabs = computed(() => props.pagination && !props.serverMode ? [
   {
     key: "status",
     label: t("integration.runs.table.column.status"),
@@ -66,6 +77,54 @@ const filterTabs = computed(() => props.pagination ? [
     options: TRIGGER_TYPE_WORDS.map((v) => ({ value: v, label: triggerTypeLabel(v) }))
   }
 ] : void 0);
+const chosenStatus = computed(() => props.status ?? []);
+const anyNarrowing = computed(() => chosenStatus.value.length > 0 || props.triggerType !== "");
+function setStatus(word) {
+  emit("narrow", { status: word ? [word] : [] });
+}
+function setTrigger(kind) {
+  emit("narrow", { triggerType: kind ?? "" });
+}
+const statusApplied = computed(() => chosenStatus.value[0] ? runStatusLabel(chosenStatus.value[0]) : "");
+const triggerApplied = computed(() => props.triggerType ? triggerTypeLabel(props.triggerType) : "");
+const searchText = ref("");
+function onTableState(state) {
+  searchText.value = state.search;
+  emit("search", state.search);
+  if (state.pageSize !== props.perPage) emit("page-size", state.pageSize);
+}
+const tableSort = computed(() => ({
+  column: sortedColumn.value,
+  direction: sortedColumn.value ? props.direction : null
+}));
+function onTableSort(next) {
+  const sort = next.column ? SERVER_SORTS[next.column] : void 0;
+  if (!sort || !next.direction) {
+    emit("reorder", { sort: DEFAULT_RUN_SORT, direction: DEFAULT_RUN_DIRECTION });
+    return;
+  }
+  emit("reorder", { sort, direction: next.direction });
+}
+const SERVER_SORTS = {
+  started: "started_at",
+  duration: "duration"
+};
+function sortableColumn(key) {
+  return props.serverMode && key in SERVER_SORTS;
+}
+const sortedColumn = computed(() => {
+  const entry = Object.entries(SERVER_SORTS).find(([, value]) => value === props.sort);
+  return entry ? entry[0] : null;
+});
+const serverModels = computed(() => props.serverMode ? {
+  "sort": tableSort.value,
+  "onUpdate:sort": onTableSort,
+  // 1-based here, as the platform pages; the shared table counts from zero.
+  "page": page.value - 1,
+  "onUpdate:page": (p) => {
+    page.value = p + 1;
+  }
+} : {});
 const columns = computed(() => [
   // Sorted and searched by the word on screen, not by the raw field: a column
   // with no `searchGetter` is searched through its `sortGetter`, so a German
@@ -74,17 +133,17 @@ const columns = computed(() => [
   // number guessed twice — see `RUN_STATUS_COLUMN_WIDTH` for how it was chosen and
   // why the track cannot be elastic. At the 100px it used to be, the German
   // "fehlgeschlagen" ran out of its cell and under the workflow name (PO-362).
-  { key: "status", label: t("integration.runs.table.column.status"), width: RUN_STATUS_COLUMN_WIDTH, sortable: true, sortGetter: (r) => runStatusLabel(r.status) },
-  ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.workflow"), sortable: true, sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => r.workflowName }] : [],
+  { key: "status", label: t("integration.runs.table.column.status"), width: RUN_STATUS_COLUMN_WIDTH, sortable: sortableColumn("status"), sortGetter: (r) => runStatusLabel(r.status) },
+  ...props.showWorkflow ? [{ key: "workflow", label: t("integration.runs.table.column.workflow"), sortable: sortableColumn("workflow"), sortGetter: (r) => r.workflowName.toLowerCase(), searchGetter: (r) => r.workflowName }] : [],
   // Fixed floor wide enough for a full UUID, flexible above it — header and
   // body rows are separate grids, so a content-sized track (max-content)
   // would misalign them. The flex share also lets the table fill the width.
   { key: "id", label: t("integration.runs.table.column.id"), width: "minmax(280px,1fr)", searchGetter: (r) => `${r.temporalRunId ?? ""} ${r.id}` },
   // Same rule as the status column above: the word on screen is what sorts and
   // what a search has to match.
-  { key: "trigger", label: t("integration.runs.table.column.trigger"), width: "120px", sortable: true, sortGetter: (r) => triggerTypeLabel(r.triggerType) },
-  { key: "started", label: t("integration.runs.table.column.started"), width: "120px", sortable: true, sortGetter: (r) => r.startedAt },
-  { key: "duration", label: t("integration.runs.table.column.duration"), width: "100px", sortable: true, sortGetter: (r) => r.durationMs ?? -1 },
+  { key: "trigger", label: t("integration.runs.table.column.trigger"), width: "120px", sortable: sortableColumn("trigger"), sortGetter: (r) => triggerTypeLabel(r.triggerType) },
+  { key: "started", label: t("integration.runs.table.column.started"), width: "120px", sortable: sortableColumn("started"), sortGetter: (r) => r.startedAt },
+  { key: "duration", label: t("integration.runs.table.column.duration"), width: "100px", sortable: sortableColumn("duration"), sortGetter: (r) => r.durationMs ?? -1 },
   { key: "actions", label: "", width: "52px" }
 ]);
 </script>
@@ -94,14 +153,66 @@ const columns = computed(() => [
     :data="runs"
     :columns="columns"
     :row-key="(r) => r.id"
-    :default-sort="{ column: 'started', direction: 'desc' }"
     :search="{ placeholder: t('integration.runs.table.search.placeholder') }"
     :filter-tabs="filterTabs"
+    :filter="serverMode ? { width: 'w-72', active: anyNarrowing } : false"
+    :server-mode="serverMode"
+    :total="total"
     :loading="loading"
-    :pagination="pagination"
+    :pagination="serverMode ? { pageSize: perPage } : pagination"
     :empty-text="emptyText"
+    v-bind="serverModels"
+    @state-change="onTableState"
     @row-click="(r) => openRun(r)"
   >
+    <!--
+      The narrowing, where a server-mode surface has to put it: the shared table
+      owns the popover, this page owns the selection. Its own in-memory control
+      (`filterTabs`) cannot be used here, because it compares the rows in hand and
+      those are one page.
+
+      Built to the same shape as that control on purpose — a dimension per
+      sub-menu, "All" first, one value at a time — so this list is narrowed by the
+      same gesture as the five that narrow what they hold, and one test helper
+      still addresses all six (`e2e/support/studio-table.ts`). What is NOT copied
+      is the count beside each option: the built-in counts the rows in hand, and
+      counting a page here would put a number next to "failed" that describes this
+      page rather than the history the option narrows.
+    -->
+    <template v-if="serverMode" #filter-menu>
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger class="gap-2">
+          <span class="flex-1">{{ t("integration.runs.table.column.status") }}</span>
+          <span v-if="statusApplied" class="text-xs text-primary">{{ statusApplied }}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent class="w-48">
+          <DropdownMenuItem @select="setStatus(null)">
+            {{ t("integration.runs.table.filter.all") }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem v-for="word in RUN_STATUS_WORDS" :key="word" @select="setStatus(word)">
+            {{ runStatusLabel(word) }}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+
+      <DropdownMenuSub>
+        <DropdownMenuSubTrigger class="gap-2">
+          <span class="flex-1">{{ t("integration.runs.table.column.trigger") }}</span>
+          <span v-if="triggerApplied" class="text-xs text-primary">{{ triggerApplied }}</span>
+        </DropdownMenuSubTrigger>
+        <DropdownMenuSubContent class="w-48">
+          <DropdownMenuItem @select="setTrigger(null)">
+            {{ t("integration.runs.table.filter.all") }}
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem v-for="kind in TRIGGER_TYPE_WORDS" :key="kind" @select="setTrigger(kind)">
+            {{ triggerTypeLabel(kind) }}
+          </DropdownMenuItem>
+        </DropdownMenuSubContent>
+      </DropdownMenuSub>
+    </template>
+
     <template #cell-status="{ row: run }">
       <!-- `max-w-full` is the net, not the fix: a word wider than the column above is
            then clipped inside its own cell instead of being drawn over the one beside