@revenexx/studio-integrations 3.6.0 → 3.6.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @revenexx/studio-integrations
 
+## 3.6.2
+
+### Patch Changes
+
+- ef29256: The palette's version select offers the release channel as "Channel" / „Kanal“ instead of "Channel (follows release channel)", so the node name beside it is no longer cut off (IN-70).
+
+## 3.6.1
+
+### Patch Changes
+
+- 195bede: Every date and time the studio shows is now written in the studio's language — the one the host sets through `setStudioLocale` or `studioIntegrations.locale` — instead of the browser's, and is rewritten in place when that language changes. A German interface in an English browser used to show `7/27/2026, 9:14:02 AM` beside German labels; it now shows `27.7.2026, 09:14:02`. A timestamp that is missing or cannot be read is shown as `—` everywhere, where it used to read *Invalid Date*. Where the reader's browser names a region of that same language, its form is used: a British browser on an English studio shows `27/07/2026, 09:14:02`, a Swiss one on a German studio the Swiss form; a browser in another language changes nothing, and a region the host sets itself is kept. A host that sets no language reads English dates under its English interface.
+
 ## 3.6.0
 
 ### Minor Changes

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@revenexx/studio-integrations",
   "configKey": "studioIntegrations",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "unknown"

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

@@ -42,6 +42,7 @@ import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOpt
 import { keepOpenBeside } from "../../utils/dialog";
 import { testOutcomeView } from "../../utils/credentialTest";
 import { credentialNetworkPayload, fromCredentialNetwork, replacedFieldTexts, sameVpnRoute } from "../../utils/vpnRoute";
+import { formatDateTime } from "../../utils/formatDateTime";
 const props = defineProps({
   open: { type: Boolean, required: true },
   credential: { type: [Object, null], required: true },
@@ -104,14 +105,6 @@ const state = computed(() => props.credential ? credentialState(props.credential
 function fieldsOf(t2) {
   return t2?.fields ?? [];
 }
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return String(iso);
-  }
-}
 let viewOpening = 0;
 const storedConfig = computed(() => ({ ...defaultsFor(fieldsOf(props.type)), ...props.credential?.public_config ?? {} }));
 watch(

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

@@ -6,6 +6,7 @@ import { toast } from "vue-sonner";
 import LoadingAnnouncement from "./LoadingAnnouncement.vue";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 import { errorReason } from "../../utils/apiError";
+import { formatDateTime } from "../../utils/formatDateTime";
 const props = defineProps({
   workflowId: { type: Number, required: true }
 });
@@ -65,14 +66,6 @@ async function onDiscard(dl) {
     busyId.value = null;
   }
 }
-function fmt(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
-}
 </script>
 
 <template>
@@ -131,7 +124,7 @@ function fmt(iso) {
             <span>#{{ dl.id }}</span>
             <span v-if="dl.source">{{ dl.source }}</span>
             <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
-            <span>{{ fmt(dl.created_at) }}</span>
+            <span>{{ formatDateTime(dl.created_at) }}</span>
           </div>
         </div>
         <div v-if="dl.status === 'pending'" class="flex shrink-0 items-center gap-1">

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

@@ -414,7 +414,7 @@ const searching = computed(() => search.value.trim().length > 0);
                         @focus="paletteDragEnabled = false"
                         @blur="paletteDragEnabled = true"
                       >
-                        <option v-if="offersChannel(hit.manifest.slug)" :value="CHANNEL_VERSION">{{ t("integration.common.nodeVersion.channel") }}</option>
+                        <option v-if="offersChannel(hit.manifest.slug)" :value="CHANNEL_VERSION">{{ t("integration.common.nodeVersion.channelShort") }}</option>
                         <option v-for="v in versionsOf(hit.manifest.slug)" :key="v.version" :value="v.version">{{ versionOptionLabel(v) }}</option>
                       </select>
                       <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">{{ versionOptionLabel(hit.manifest) }}</span>
@@ -553,7 +553,7 @@ const searching = computed(() => search.value.trim().length > 0);
                     @focus="paletteDragEnabled = false"
                     @blur="paletteDragEnabled = true"
                   >
-                    <option v-if="offersChannel(m.slug)" :value="CHANNEL_VERSION">{{ t("integration.common.nodeVersion.channel") }}</option>
+                    <option v-if="offersChannel(m.slug)" :value="CHANNEL_VERSION">{{ t("integration.common.nodeVersion.channelShort") }}</option>
                     <option v-for="v in versionsOf(m.slug)" :key="v.version" :value="v.version">{{ versionOptionLabel(v) }}</option>
                   </select>
                   <span v-else class="shrink-0 text-xs tabular-nums text-muted-foreground/60">{{ versionOptionLabel(m) }}</span>

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

@@ -11,6 +11,7 @@ import { formatDuration } from "../../utils/formatDuration";
 import { unwrapRun } from "../../utils/runEnvelope";
 import { acceptsResume } from "../../utils/runFeedQuery";
 import { splitRunOutputs } from "../../utils/runOutputs";
+import { formatDateTime, formatTime } from "../../utils/formatDateTime";
 const props = defineProps({
   run: { type: Object, required: true },
   view: { type: String, required: false, default: "details" },
@@ -74,14 +75,6 @@ function pickStr(obj, keys) {
 function isNonEmptyObject(v) {
   return !!v && typeof v === "object" && !Array.isArray(v) && Object.keys(v).length > 0;
 }
-function fmt(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return String(iso);
-  }
-}
 function json(x) {
   return JSON.stringify(x, null, 2);
 }
@@ -132,7 +125,7 @@ function eventType(ev) {
   return pickStr(ev, ["event_type", "eventType", "type"]) ?? "event";
 }
 function eventTime(ev) {
-  return fmt(pickStr(ev, ["event_time", "eventTime"]));
+  return formatDateTime(pickStr(ev, ["event_time", "eventTime"]));
 }
 function eventAttributes(ev) {
   return pick(ev, ["attributes"]);
@@ -277,13 +270,6 @@ function timelineRowStatusWord(row) {
 function timelineRowStatus(row) {
   return runStatusLabel(timelineRowStatusWord(row));
 }
-function fmtClock(ms) {
-  try {
-    return new Date(ms).toLocaleTimeString();
-  } catch {
-    return "";
-  }
-}
 async function loadSummary() {
   summaryBudget.spend();
   summaryLoading.value = true;
@@ -641,11 +627,11 @@ async function confirmAction() {
           </div>
           <div>
             <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.started") }}</div>
-            <div class="tabular-nums">{{ fmt(startedAt) }}</div>
+            <div class="tabular-nums">{{ formatDateTime(startedAt) }}</div>
           </div>
           <div>
             <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.completed") }}</div>
-            <div class="tabular-nums">{{ fmt(completedAt) }}</div>
+            <div class="tabular-nums">{{ formatDateTime(completedAt) }}</div>
           </div>
           <div>
             <div class="text-[10px] uppercase tracking-wide text-muted-foreground">{{ t("integration.runs.detail.field.historyLength") }}</div>
@@ -836,9 +822,9 @@ async function confirmAction() {
             </div>
           </div>
           <div class="mt-1 flex justify-between font-mono text-[10px] tabular-nums text-muted-foreground">
-            <span>{{ fmtClock(timeline.t0) }}</span>
-            <span>{{ fmtClock(timeline.t0 + timeline.span / 2) }}</span>
-            <span>{{ fmtClock(timeline.tEnd) }}</span>
+            <span>{{ formatTime(timeline.t0) }}</span>
+            <span>{{ formatTime(timeline.t0 + timeline.span / 2) }}</span>
+            <span>{{ formatTime(timeline.tEnd) }}</span>
           </div>
         </div>
       </section>

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

@@ -54,11 +54,11 @@ type __VLS_PublicProps = __VLS_Props & {
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     search: (text: string) => any;
-    changed: () => any;
     narrow: (patch: {
         status?: RunStatus[];
         triggerType?: TriggerType | "";
     }) => any;
+    changed: () => any;
     "page-size": (size: number) => any;
     reorder: (order: {
         sort: RunSort;
@@ -67,11 +67,11 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "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;
+    onChanged?: (() => any) | undefined;
     "onPage-size"?: ((size: number) => any) | undefined;
     onReorder?: ((order: {
         sort: RunSort;

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

@@ -54,11 +54,11 @@ type __VLS_PublicProps = __VLS_Props & {
 };
 declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     search: (text: string) => any;
-    changed: () => any;
     narrow: (patch: {
         status?: RunStatus[];
         triggerType?: TriggerType | "";
     }) => any;
+    changed: () => any;
     "page-size": (size: number) => any;
     reorder: (order: {
         sort: RunSort;
@@ -67,11 +67,11 @@ declare const _default: import("vue").DefineComponent<__VLS_PublicProps, {}, {},
     "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;
+    onChanged?: (() => any) | undefined;
     "onPage-size"?: ((size: number) => any) | undefined;
     onReorder?: ((order: {
         sort: RunSort;

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

@@ -26,6 +26,7 @@ import { canvasShapes } from "../../data/canvasShapes";
 import { useIntegrationsRevisions } from "../../composables/useIntegrationsRevisions";
 import { errorReason } from "../../utils/apiError";
 import { personLabel } from "../../utils/personLabel";
+import { formatDateTime } from "../../utils/formatDateTime";
 const props = defineProps({
   workflow: { type: Object, required: true },
   draftPending: { type: Boolean, required: false }
@@ -284,14 +285,6 @@ watch(() => iteratorNodeIds(previewBlob.value.nodes).join("|"), () => {
 watch(useIntegrationsUiLocale(), () => {
   buildPreview(previewBlob.value);
 });
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return String(iso);
-  }
-}
 const nodeTypes = {
   workflow: markRaw(WorkflowNodeView),
   trigger: markRaw(WorkflowTriggerView),

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

@@ -33,6 +33,7 @@ import { runStatusClass, runStatusLabel } from "../../utils/statusStyle";
 import { executedNodeIds, isSkippedStep, skipReasonMessage, stepStatusLabel } from "../../utils/skippedStep";
 import { frameLabel, stepError } from "../../utils/stepError";
 import { errorReason } from "../../utils/apiError";
+import { formatTime } from "../../utils/formatDateTime";
 const props = defineProps({
   workflow: { type: Object, required: true },
   initialRunId: { type: [String, null], required: false },
@@ -367,14 +368,6 @@ const edgeTypes = {
 preview.onNodeClick((evt) => {
   if (evt.node.type === "workflow") onNodeClick(evt.node.id);
 });
-function formatTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleTimeString();
-  } catch {
-    return String(iso);
-  }
-}
 function pretty(v) {
   try {
     return JSON.stringify(v, null, 2);

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

@@ -20,6 +20,7 @@ import {
 import WorkflowIconPicker from "./WorkflowIconPicker.vue";
 import WorkflowTagsInput from "./WorkflowTagsInput.vue";
 import { keepOpenBeside } from "../../utils/dialog";
+import { formatDateTime } from "../../utils/formatDateTime";
 const props = defineProps({
   open: { type: Boolean, required: true },
   workflow: { type: Object, required: true },
@@ -53,14 +54,6 @@ function applyAndClose() {
   if (JSON.stringify(edited.value) !== JSON.stringify(props.current)) emit("apply", edited.value);
   emit("update:open", false);
 }
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return String(iso);
-  }
-}
 </script>
 
 <template>

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

@@ -18,6 +18,7 @@ import {
   Label,
   Switch
 } from "@revenexx/studio";
+import { formatShortDateTime } from "../../utils/formatDateTime";
 defineProps({
   workflows: { type: Array, required: true },
   loading: { type: Boolean, required: false, default: false }
@@ -135,19 +136,6 @@ function modeLabel(m) {
       return "\u2014";
   }
 }
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString(void 0, {
-      month: "short",
-      day: "2-digit",
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-  } catch {
-    return iso;
-  }
-}
 const LIFECYCLE = ["active", "draft", "paused"];
 const BUILD_STATES = ["pending", "building", "ready", "failed"];
 const MODES = ["async_only", "sync_only", "caller_decides"];
@@ -348,7 +336,7 @@ const columns = computed(() => [
           {{ runBadge(lastRunFor(wf.id).status).label }}
         </Badge>
         <span class="text-sm tabular-nums text-muted-foreground truncate">
-          {{ formatDateTime(lastRunFor(wf.id).startedAt) }}
+          {{ formatShortDateTime(lastRunFor(wf.id).startedAt) }}
         </span>
       </div>
       <!-- Runs arrive after the rows do, so until they are in, "never run" is
@@ -363,7 +351,7 @@ const columns = computed(() => [
 
     <template #cell-updated="{ row: wf }">
       <span class="text-sm tabular-nums text-muted-foreground truncate">
-        {{ formatDateTime(wf.updated_at) }}
+        {{ formatShortDateTime(wf.updated_at) }}
       </span>
     </template>
 

package/dist/runtime/i18n/messages/de.json

@@ -173,6 +173,7 @@
   "integration.common.triggerType.schedule": "Zeitplan",
   "integration.common.triggerType.webhook": "Webhook",
   "integration.common.nodeVersion.channel": "Kanal (folgt dem Release-Kanal)",
+  "integration.common.nodeVersion.channelShort": "Kanal",
   "integration.common.nodeVersion.candidate": "v{version} (Kandidat)",
   "integration.common.nodeVersion.channelCurrent": "Kanal · derzeit v{version}",
   "integration.credentials.createDialog.action.changeType": "Typ ändern",

package/dist/runtime/i18n/messages/en.json

@@ -173,6 +173,7 @@
   "integration.common.triggerType.schedule": "Schedule",
   "integration.common.triggerType.webhook": "Webhook",
   "integration.common.nodeVersion.channel": "Channel (follows release channel)",
+  "integration.common.nodeVersion.channelShort": "Channel",
   "integration.common.nodeVersion.candidate": "v{version} (candidate)",
   "integration.common.nodeVersion.channelCurrent": "Channel · currently v{version}",
   "integration.credentials.createDialog.action.changeType": "Change type",

package/dist/runtime/pages/integrations/audit.vue

@@ -16,6 +16,7 @@ import { Badge, Button } from "@revenexx/studio";
 import { copyToClipboard } from "../../utils/clipboard";
 import { isBareIdentifier, personLabel } from "../../utils/personLabel";
 import { triggerTypeLabel } from "../../data/integrationNodeCatalog";
+import { formatDateTime } from "../../utils/formatDateTime";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.audit.head.title") });
 const { entries, loading, error, hasMore, load, loadMore } = useIntegrationsAudit();
@@ -84,9 +85,6 @@ function resourceName(e) {
   if (e.resource_type === "state_entry" && text(m.key)) return [text(m.namespace), text(m.key)].filter(Boolean).join(" \xB7 ");
   return e.resource_id || "\u2014";
 }
-function fmtDate(iso) {
-  return iso ? new Date(iso).toLocaleString() : "\u2014";
-}
 function actor(e) {
   return { sub: e.actor_sub, name: e.actor_name, email: e.actor_email };
 }
@@ -223,7 +221,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
           </div>
         </template>
         <template #cell-when="{ row }">
-          <span class="text-sm text-muted-foreground">{{ fmtDate(row.created_at) }}</span>
+          <span class="text-sm text-muted-foreground">{{ formatDateTime(row.created_at) }}</span>
         </template>
       </DataTable>
 
@@ -282,7 +280,7 @@ onUnmounted(() => document.removeEventListener("keydown", onKeydown));
               <!-- The identifier stays for tracing — it is what the platform's own
                    logs and the identity provider know the person by. -->
               <div v-if="selected.actor_sub && !actorIsId(selected)" class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.detail.actorId") }}</span><code class="font-mono text-xs">{{ selected.actor_sub }}</code></div>
-              <div class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.table.column.when") }}</span><span>{{ fmtDate(selected.created_at) }}</span></div>
+              <div class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.table.column.when") }}</span><span>{{ formatDateTime(selected.created_at) }}</span></div>
               <div v-if="selected.tenant_id" class="flex justify-between gap-2"><span class="text-muted-foreground">{{ t("integration.audit.detail.tenant") }}</span><span>{{ selected.tenant_id }}</span></div>
             </div>
             <div v-if="selected.metadata && Object.keys(selected.metadata).length">

package/dist/runtime/pages/integrations/credentials.vue

@@ -40,6 +40,7 @@ import { fromModelValue, toItemValue, toModelValue } from "../../utils/selectOpt
 import { keepOpenBeside } from "../../utils/dialog";
 import { testOutcomeView } from "../../utils/credentialTest";
 import { credentialNetworkPayload, credentialVpnBadge, replacedFieldTexts } from "../../utils/vpnRoute";
+import { formatShortDateTime } from "../../utils/formatDateTime";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.credentials.list.head.title") });
 const { credentials, loading, error, load, create, update, remove, testInline, test, oauthAuthorizeUrl } = useIntegrationsCredentials();
@@ -74,14 +75,6 @@ function providerStep(c) {
     expired: state === "needs_reauth"
   };
 }
-function formatDateTime(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
-  } catch {
-    return iso;
-  }
-}
 const filterTabs = computed(() => {
   const systems = [...new Set(credentials.value.map((c) => c.credential_type_slug))].map((slug) => ({ value: slug, label: typeName(slug) })).sort((a, b) => a.label.localeCompare(b.label));
   return [
@@ -343,16 +336,16 @@ async function confirmDelete() {
 
         <template #cell-connected="{ row: c }">
           <span class="text-sm text-muted-foreground tabular-nums">
-            {{ c.last_test_ok ? formatDateTime(c.last_test_at) : "\u2014" }}
+            {{ c.last_test_ok ? formatShortDateTime(c.last_test_at) : "\u2014" }}
           </span>
         </template>
 
         <template #cell-created="{ row: c }">
-          <span class="text-sm text-muted-foreground tabular-nums">{{ formatDateTime(c.created_at) }}</span>
+          <span class="text-sm text-muted-foreground tabular-nums">{{ formatShortDateTime(c.created_at) }}</span>
         </template>
 
         <template #cell-updated="{ row: c }">
-          <span class="text-sm text-muted-foreground tabular-nums">{{ formatDateTime(c.updated_at) }}</span>
+          <span class="text-sm text-muted-foreground tabular-nums">{{ formatShortDateTime(c.updated_at) }}</span>
         </template>
 
         <template #cell-actions="{ row: c }">

package/dist/runtime/pages/integrations/runs.vue

@@ -7,6 +7,7 @@ import RunsTable from "../../components/Integrations/RunsTable.vue";
 import { createPollBudget, SAFETY_POLL_MS } from "../../utils/pollBudget";
 import { deadLetterStatusClass, deadLetterStatusLabel } from "../../utils/statusStyle";
 import { errorReason } from "../../utils/apiError";
+import { formatDateTime } from "../../utils/formatDateTime";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.runs.list.head.title") });
 const route = useRoute();
@@ -127,14 +128,6 @@ function workflowNameOf(dl) {
   const name = dl.workflow_name;
   return typeof name === "string" && name.trim() !== "" ? name : t("integration.deadLetters.workflow.fallback", { id: dl.workflow_id });
 }
-function fmt(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleString();
-  } catch {
-    return iso;
-  }
-}
 </script>
 
 <template>
@@ -234,7 +227,7 @@ function fmt(iso) {
                 <span>#{{ dl.id }}</span>
                 <span v-if="dl.source">{{ dl.source }}</span>
                 <span v-if="dl.trigger_handle">↳ {{ dl.trigger_handle }}</span>
-                <span>{{ fmt(dl.created_at) }}</span>
+                <span>{{ formatDateTime(dl.created_at) }}</span>
               </div>
             </div>
             <div v-if="dl.status === 'pending'" class="flex shrink-0 items-center gap-1">

package/dist/runtime/pages/integrations/schedules.vue

@@ -3,6 +3,7 @@ import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
 import { cadenceRank, describeCron } from "../../utils/schedule";
 import { runStatusLabel } from "../../utils/statusStyle";
+import { formatShortDateTime } from "../../utils/formatDateTime";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.schedules.head.title") });
 const router = useRouter();
@@ -11,12 +12,7 @@ onMounted(() => {
   void load(true);
 });
 function inScheduleZone(iso, timezone) {
-  const parts = { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" };
-  try {
-    return new Date(iso).toLocaleString(void 0, { ...parts, timeZone: timezone });
-  } catch {
-    return new Date(iso).toLocaleString(void 0, parts);
-  }
+  return formatShortDateTime(iso, timezone);
 }
 function formatRelative(iso, timezone) {
   if (!iso) return "\u2014";

package/dist/runtime/pages/integrations/secrets.vue

@@ -27,6 +27,7 @@ import {
 import { errorReason } from "../../utils/apiError";
 import { keepOpenBeside } from "../../utils/dialog";
 import { SECRET_KEY_MAX } from "../../composables/useIntegrationsSecrets";
+import { formatDate } from "../../utils/formatDateTime";
 const t = useIntegrationsT();
 useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
@@ -75,13 +76,8 @@ async function confirmDelete() {
   deleting.value = false;
   pendingDelete.value = null;
 }
-function formatDate(iso) {
-  if (!iso) return "\u2014";
-  try {
-    return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "2-digit", year: "numeric" });
-  } catch {
-    return iso;
-  }
+function formatDay(iso) {
+  return formatDate(iso, { month: "short", day: "2-digit", year: "numeric" });
 }
 const columns = computed(() => [
   { key: "key", label: t("integration.secrets.table.column.key"), sortable: true, sortGetter: (s) => s.key.toLowerCase() },
@@ -208,18 +204,18 @@ const columns = computed(() => [
           <component
             :is="s.created_at ? 'time' : 'span'"
             :datetime="s.created_at || void 0"
-            :aria-label="t('integration.secrets.cell.created.aria', { key: s.key, date: formatDate(s.created_at) })"
+            :aria-label="t('integration.secrets.cell.created.aria', { key: s.key, date: formatDay(s.created_at) })"
             class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
-          >{{ formatDate(s.created_at) }}</component>
+          >{{ formatDay(s.created_at) }}</component>
         </template>
 
         <template #cell-updated="{ row: s }">
           <component
             :is="s.updated_at ? 'time' : 'span'"
             :datetime="s.updated_at || void 0"
-            :aria-label="t('integration.secrets.cell.updated.aria', { key: s.key, date: formatDate(s.updated_at) })"
+            :aria-label="t('integration.secrets.cell.updated.aria', { key: s.key, date: formatDay(s.updated_at) })"
             class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
-          >{{ formatDate(s.updated_at) }}</component>
+          >{{ formatDay(s.updated_at) }}</component>
         </template>
 
         <template #cell-actions="{ row: s }">

package/dist/runtime/utils/formatDateTime.d.ts

@@ -0,0 +1,61 @@
+/** A moment as the API sends it (ISO 8601), as a clock gives it (milliseconds), or as a `Date`. */
+export type DateInput = string | number | Date | null | undefined;
+/**
+ * A moment as the reader reads it — in the studio's language, not the browser's,
+ * and in the browser's regional form of that language where it has one.
+ *
+ * The one place a date or a time of day is written (PO-389). Fourteen call sites
+ * used to ask `toLocaleString()` themselves, with no locale or with `undefined`,
+ * and both mean *the browser's* language: a host pinned to German in an English
+ * browser drew German labels around English dates. Reading {@link studioLocale}
+ * here is also what makes every date follow a language switch — each caller is
+ * inside a template or a `computed`, so it becomes a subscriber without changing
+ * a line, the way `resolveLocalized` does it.
+ *
+ * **The language is the studio's; the region is the reader's, when they agree.** A
+ * host sets a bare language (`en`, `de`), and a bare `en` is written the American
+ * way: a British reader would get `7/27/2026, 9:14 AM` and the day and month the
+ * wrong way round. So where the browser lists a tag of the same language
+ * (`en-GB` for `en`, `de-CH` for `de`), that tag is used; where it lists none, or
+ * where the host named a region itself, the studio's tag is. The browser's region never brings in its language: an `en-US`
+ * browser on a German studio still writes German.
+ *
+ * **Only the language is decided here, not the form.** Each caller passes the
+ * fields it wants, as `Intl.DateTimeFormatOptions`, and gets what `toLocaleString`,
+ * `toLocaleDateString` or `toLocaleTimeString` gives for them. A single house form
+ * for every date would be a product decision of its own, and PO-389 did not take it.
+ *
+ * **What will not parse is `—`, and so is nothing at all** — `0` included, which is
+ * how a millisecond field that was never set arrives, and which the private copies
+ * answered with `—` too. They had
+ * four answers for a broken timestamp — the raw string, `String(iso)`, `''` and
+ * `—` — and none of them ever ran: `new Date('junk')` does not throw, and its
+ * `toLocaleString()` is the words *Invalid Date*, which is what all fourteen
+ * printed. `—` is the answer `relativeTime` had already written down for the same
+ * case. A broken timestamp is a defect of the API, and the screen does not have to
+ * announce it in a cell an operator reads for something else.
+ *
+ * **What `Intl` refuses falls back, silently.** A language tag the host set that
+ * `Intl` cannot read (`not a locale`) is answered by the browser's language; a
+ * `timeZone` it refuses — a schedule's zone is what the platform resolved, and for a
+ * zone that is not a real one that is the unreadable string itself — by the reader's
+ * zone. Both used to be handled once, each in one place (`relativeTime`,
+ * `inScheduleZone` on the schedules page); here they hold for every caller.
+ *
+ * **Formatters are kept.** A table redraws on a clock, and each cell used to build
+ * its own `Intl.DateTimeFormat` on every redraw. One is built per language, kind
+ * and options, and kept for the rest of the session.
+ *
+ * Date and time, as `toLocaleString` writes them for these fields.
+ */
+export declare function formatDateTime(value: DateInput, options?: Intl.DateTimeFormatOptions): string;
+/** The date alone, as `toLocaleDateString` writes it for these fields. */
+export declare function formatDate(value: DateInput, options?: Intl.DateTimeFormatOptions): string;
+/** The time of day alone, as `toLocaleTimeString` writes it for these fields. */
+export declare function formatTime(value: DateInput, options?: Intl.DateTimeFormatOptions): string;
+/**
+ * The short form a list cell uses — day, month as a word, hour and minute, no year
+ * and no seconds — optionally in a zone of its own (a schedule's). One definition,
+ * so the lists that show it cannot come apart.
+ */
+export declare function formatShortDateTime(value: DateInput, timeZone?: string): string;

package/dist/runtime/utils/formatDateTime.js

@@ -0,0 +1,75 @@
+import { studioLocale } from "./localize.js";
+const NOTHING = "\u2014";
+export function formatDateTime(value, options) {
+  return write(value, "any", options);
+}
+export function formatDate(value, options) {
+  return write(value, "date", options);
+}
+export function formatTime(value, options) {
+  return write(value, "time", options);
+}
+export function formatShortDateTime(value, timeZone) {
+  return formatDateTime(value, timeZone ? { ...SHORT, timeZone } : SHORT);
+}
+const SHORT = { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" };
+const DATE_FIELDS = ["weekday", "year", "month", "day"];
+const TIME_FIELDS = ["dayPeriod", "hour", "minute", "second", "fractionalSecondDigits"];
+function write(value, kind, options) {
+  const at = toDate(value);
+  return at ? formatter(locale(), kind, options).format(at) : NOTHING;
+}
+function toDate(value) {
+  if (value === null || value === void 0 || value === "" || value === 0) return null;
+  const at = value instanceof Date ? value : new Date(value);
+  return Number.isNaN(at.getTime()) ? null : at;
+}
+const formatters = /* @__PURE__ */ new Map();
+function formatter(tag, kind, options) {
+  const key = `${tag ?? ""}|${kind}|${options ? JSON.stringify(options) : ""}`;
+  let built = formatters.get(key);
+  if (!built) {
+    const full = withDefaults(kind, options);
+    try {
+      built = new Intl.DateTimeFormat(tag, full);
+    } catch {
+      const { timeZone: _refused, ...rest } = full;
+      built = new Intl.DateTimeFormat(tag, rest);
+    }
+    formatters.set(key, built);
+  }
+  return built;
+}
+function withDefaults(kind, options = {}) {
+  if (options.dateStyle || options.timeStyle) return options;
+  const has = (fields) => fields.some((f) => options[f] !== void 0);
+  const date = { year: "numeric", month: "numeric", day: "numeric" };
+  const time = { hour: "numeric", minute: "numeric", second: "numeric" };
+  if (kind === "any") return has(DATE_FIELDS) || has(TIME_FIELDS) ? options : { ...options, ...date, ...time };
+  if (kind === "date") return has(DATE_FIELDS) ? options : { ...options, ...date };
+  return has(TIME_FIELDS) ? options : { ...options, ...time };
+}
+const locales = /* @__PURE__ */ new Map();
+function locale() {
+  const tag = studioLocale();
+  const browser = typeof navigator === "undefined" ? [] : navigator.languages ?? [navigator.language];
+  const key = `${tag}|${browser.join(",")}`;
+  if (locales.has(key)) return locales.get(key);
+  const answer = readable(regional(tag, browser)) ?? readable(tag);
+  locales.set(key, answer);
+  return answer;
+}
+function regional(tag, browser) {
+  if (tag.includes("-")) return void 0;
+  const language = tag.toLowerCase();
+  return browser.find((b) => b.includes("-") && b.split("-")[0]?.toLowerCase() === language);
+}
+function readable(tag) {
+  if (!tag) return void 0;
+  try {
+    Intl.DateTimeFormat.supportedLocalesOf(tag);
+    return tag;
+  } catch {
+    return void 0;
+  }
+}

package/dist/runtime/utils/relativeTime.d.ts

@@ -20,7 +20,7 @@
  *
  * **Beyond thirty days is a date, not a count of days.** "412d ago" makes the reader
  * do the arithmetic the page should have done. The date is written in the studio's
- * language rather than the browser's, like the words beside it.
+ * language rather than the browser's, like the words beside it (`formatDate`).
  *
  * **What was not computed is not printed.** A timestamp that will not parse returns
  * `—`, the same as none at all: `Date.now() - NaN` fails every threshold and would

package/dist/runtime/utils/relativeTime.js

@@ -1,5 +1,5 @@
 import { useIntegrationsT } from "../composables/useIntegrationsT.js";
-import { studioLocale } from "./localize.js";
+import { formatDate } from "./formatDateTime.js";
 const JUST_NOW = 1e4;
 const MINUTE = 6e4;
 const HOUR = 60 * MINUTE;
@@ -15,9 +15,5 @@ export function relativeTime(iso, now = Date.now()) {
   if (ms < HOUR) return t("integration.common.time.minutesAgo", Math.floor(ms / MINUTE));
   if (ms < DAY) return t("integration.common.time.hoursAgo", Math.floor(ms / HOUR));
   if (ms < 30 * DAY) return t("integration.common.time.daysAgo", Math.floor(ms / DAY));
-  try {
-    return new Date(at).toLocaleDateString(studioLocale());
-  } catch {
-    return new Date(at).toLocaleDateString();
-  }
+  return formatDate(at);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@revenexx/studio-integrations",
-  "version": "3.6.0",
+  "version": "3.6.2",
   "type": "module",
   "description": "Integration Studio (core: workflows, node editor, runs, schedules, credentials, secrets, audit) as a standalone, publishable Nuxt module.",
   "repository": {