@revenexx/studio-integrations 0.5.1 → 0.7.0

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

@@ -1,7 +1,9 @@
 <script setup>
 import { ClockCircle as Clock, Globus as Globe } from "#solar-icons";
 import { Badge } from "@revenexx/studio";
-useHead({ title: "Schedules \xB7 Integration Studio" });
+import { cadenceRank, describeCron } from "../../utils/schedule";
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.schedules.head.title") });
 const router = useRouter();
 const { entries, activeCount, loading, load } = useIntegrationsSchedules();
 onMounted(() => {
@@ -10,36 +12,66 @@ onMounted(() => {
 function formatRelative(iso) {
   if (!iso) return "\u2014";
   const ms = new Date(iso).getTime() - Date.now();
-  if (Math.abs(ms) < 6e4) return ms > 0 ? "in <1m" : "just now";
+  if (Math.abs(ms) < 6e4) return ms > 0 ? t("integration.schedules.time.inLessThanMinute") : t("integration.common.time.justNow");
   if (Math.abs(ms) < 36e5) {
     const mins = Math.round(Math.abs(ms) / 6e4);
-    return ms > 0 ? `in ${mins}m` : `${mins}m ago`;
+    return ms > 0 ? t("integration.schedules.time.inMinutes", mins) : t("integration.common.time.minutesAgo", mins);
   }
   if (Math.abs(ms) < 864e5) {
     const hrs = Math.round(Math.abs(ms) / 36e5);
-    return ms > 0 ? `in ${hrs}h` : `${hrs}h ago`;
+    return ms > 0 ? t("integration.schedules.time.inHours", hrs) : t("integration.common.time.hoursAgo", hrs);
   }
   return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", hour: "2-digit", minute: "2-digit" });
 }
-const columns = [
-  { key: "workflow", label: "Workflow", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron} ${e.timezone}` },
-  { key: "cron", label: "Cron", width: "180px", sortable: true, sortGetter: (e) => e.cron },
-  { key: "timezone", label: "Timezone", width: "140px", sortable: true, sortGetter: (e) => e.timezone },
-  { key: "nextRun", label: "Next run", width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
-  { key: "lastRun", label: "Last run", width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
-  { key: "status", label: "Status", width: "80px", sortable: true, sortGetter: (e) => e.active ? "live" : "paused" }
-];
+const filterTabs = computed(() => [
+  {
+    key: "status",
+    label: t("integration.schedules.table.column.status"),
+    // The flag, not the word: a stored value has to survive a language switch, or the
+    // narrowed list empties itself when the host changes language. Only the labels are
+    // translated (see `credentials.vue` for the whole reasoning).
+    getter: (e) => e.active ? "live" : "paused",
+    options: [
+      { value: "live", label: t("integration.schedules.status.live") },
+      { value: "paused", label: t("integration.schedules.status.paused") }
+    ]
+  },
+  {
+    key: "timezone",
+    label: t("integration.schedules.table.column.timezone"),
+    getter: (e) => e.timezone,
+    options: [...new Set(entries.value.map((e) => e.timezone))].sort().map((tz) => ({ value: tz, label: tz }))
+  }
+]);
+const columns = computed(() => [
+  // Two columns share the slack, and the sentence gets the larger share of it:
+  // "Weekdays, hourly from 09:00 to 17:00" is what this page is for, while a
+  // workflow name is a label the reader recognises from its first few words.
+  // Both flex, so no width is left unused at the end of the row.
+  //
+  // The expression stays in the search text although the column no longer shows
+  // it: support quotes expressions, and a row has to be findable by the string
+  // someone was given.
+  { key: "workflow", label: t("integration.schedules.table.column.workflow"), width: "minmax(180px, 1fr)", sortable: true, sortGetter: (e) => e.workflowName.toLowerCase(), searchGetter: (e) => `${e.workflowName} ${e.cron ?? ""} ${e.timezone} ${describeCron(e.cron) ?? ""}` },
+  // Sorted by how often a schedule fires. The expression's characters would be
+  // meaningless here — the column shows a sentence.
+  { key: "cron", label: t("integration.schedules.table.column.when"), width: "minmax(260px, 1.4fr)", sortable: true, sortGetter: (e) => cadenceRank(e.cron) },
+  { key: "timezone", label: t("integration.schedules.table.column.timezone"), width: "140px", sortable: true, sortGetter: (e) => e.timezone },
+  { key: "nextRun", label: t("integration.schedules.table.column.nextRun"), width: "140px", sortable: true, sortGetter: (e) => e.nextRunAt ?? "" },
+  { key: "lastRun", label: t("integration.schedules.table.column.lastRun"), width: "140px", sortable: true, sortGetter: (e) => e.lastRunAt ?? "" },
+  { key: "status", label: t("integration.schedules.table.column.status"), width: "80px", sortable: true, sortGetter: (e) => e.active ? "live" : "paused" }
+]);
 </script>
 
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Schedules"
-      description="Every cron-driven trigger across your workflows. Click a row to open the workflow."
+      :title="t('integration.schedules.header.title')"
+      :description="t('integration.schedules.header.description')"
     >
       <template #actions>
         <span class="text-sm text-muted-foreground">
-          <strong class="text-foreground">{{ activeCount }}</strong> active
+          <strong class="text-foreground">{{ activeCount }}</strong> {{ t("integration.schedules.stat.active") }}
         </span>
       </template>
     </PageHeader>
@@ -51,9 +83,9 @@ const columns = [
         :columns="columns"
         :row-key="(e2) => e2.id"
         :default-sort="{ column: 'nextRun', direction: 'asc' }"
-        :search="{ placeholder: 'Search by workflow, cron, timezone\u2026' }"
-        :filter="true"
-        empty-text="No schedules yet. Add a schedule trigger to any workflow."
+        :search="{ placeholder: t('integration.schedules.search.placeholder') }"
+        :filter-tabs="filterTabs"
+        :empty-text="t('integration.schedules.state.empty')"
         @row-click="(e2) => router.push(`/integrations/workflows/${e2.workflowId}`)"
       >
         <template #cell-workflow="{ row: e }">
@@ -67,8 +99,33 @@ const columns = [
           </div>
         </template>
 
+        <!--
+          The sentence is the answer, and the expression is not on the page: the
+          question this column asks is "when does this run", which an expression
+          answers in a language the reader may not speak. It is still one hover
+          away — support quotes expressions — and it still stands alone in the one
+          case where nothing else would be true: a schedule the studio cannot say
+          in words, which is one no picker built either.
+        -->
         <template #cell-cron="{ row: e }">
-          <code class="font-mono text-sm truncate">{{ e.cron }}</code>
+          <div class="min-w-0">
+            <!-- The sentence wraps rather than truncating: a schedule that fires
+                 at several named times is a long sentence, and half of one is
+                 the wrong half. Its title is the expression, so there is no
+                 tooltip left to carry the rest of the words. -->
+            <div v-if="describeCron(e.cron)" :aria-label="t('integration.schedules.cell.whenItFires.aria')" :title="e.cron ?? void 0" class="text-sm leading-snug">
+              {{ describeCron(e.cron) }}
+            </div>
+            <template v-else-if="e.cron">
+              <div :aria-label="t('integration.schedules.cell.whenItFires.aria')" class="text-sm truncate">
+                {{ t("integration.schedules.cell.customSchedule") }}
+              </div>
+              <code :aria-label="t('integration.schedules.cell.cronExpression.aria')" class="block font-mono text-xs text-muted-foreground truncate">{{ e.cron }}</code>
+            </template>
+            <div v-else :aria-label="t('integration.schedules.cell.whenItFires.aria')" class="text-sm text-muted-foreground truncate">
+              {{ t("integration.schedules.cell.noSchedule") }}
+            </div>
+          </div>
         </template>
 
         <template #cell-timezone="{ row: e }">
@@ -78,20 +135,28 @@ const columns = [
           </div>
         </template>
 
+        <!--
+          The two time cells carry the name their column header states, so each is
+          addressable by what it is rather than by how it is typeset. It is not the
+          accessible name a screen reader hears — the cell is a plain span, and
+          ARIA prohibits naming a generic element — that needs row and cell
+          semantics in the shared table (PO-233, and a gap in
+          `specs/accessibility.md`).
+        -->
         <template #cell-nextRun="{ row: e }">
-          <span class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
+          <span :aria-label="t('integration.schedules.table.column.nextRun')" class="text-sm tabular-nums">{{ formatRelative(e.nextRunAt) }}</span>
         </template>
 
         <template #cell-lastRun="{ row: e }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
+          <span :aria-label="t('integration.schedules.table.column.lastRun')" class="text-sm tabular-nums text-muted-foreground">{{ formatRelative(e.lastRunAt) }}</span>
         </template>
 
         <template #cell-status="{ row: e }">
           <Badge v-if="e.active" variant="outline" class="bg-emerald-500/10 border-emerald-500/20 text-emerald-700 text-xs font-medium uppercase">
-            live
+            {{ t("integration.schedules.status.live") }}
           </Badge>
           <Badge v-else variant="outline" class="text-xs font-medium uppercase">
-            paused
+            {{ t("integration.schedules.status.paused") }}
           </Badge>
         </template>
       </DataTable>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { Eye, EyeClosed as EyeOff, Key as KeyRound, RefreshCircle as Loader2, MenuDots as MoreHorizontal, AddCircle as Plus, TrashBinMinimalistic as Trash2 } from "#solar-icons";
+import { Eye, EyeClosed as EyeOff, Key as KeyRound, RefreshCircle as Loader2, MenuDots as MoreHorizontal, AddCircle as Plus, TrashBinMinimalistic as TrashBin } from "#solar-icons";
 import {
   AlertDialog,
   AlertDialogContent,
@@ -24,7 +24,8 @@ import {
   Input,
   Label
 } from "@revenexx/studio";
-useHead({ title: "Secrets \xB7 Revenexx Cockpit" });
+const t = useIntegrationsT();
+useHead({ title: () => t("integration.secrets.head.title") });
 const { secrets, loading, error, isValidKey, upsert, remove, load } = useIntegrationsSecrets();
 onMounted(() => {
   void load();
@@ -45,11 +46,11 @@ function openCreate() {
 async function submitCreate() {
   const key = newKey.value.trim();
   if (!isValidKey(key)) {
-    formError.value = "Key must match ^[A-Z0-9_]+$ (uppercase letters, digits, underscores).";
+    formError.value = t("integration.secrets.form.error.invalidKey");
     return;
   }
   if (!newValue.value) {
-    formError.value = "Value is required.";
+    formError.value = t("integration.secrets.error.valueRequired");
     return;
   }
   saving.value = true;
@@ -71,47 +72,47 @@ async function confirmDelete() {
   deleting.value = false;
   pendingDelete.value = null;
 }
-function formatDateTime(iso) {
+function formatDate(iso) {
   if (!iso) return "\u2014";
   try {
-    return new Date(iso).toLocaleString(void 0, { month: "short", day: "2-digit", year: "numeric", hour: "2-digit", minute: "2-digit" });
+    return new Date(iso).toLocaleDateString(void 0, { month: "short", day: "2-digit", year: "numeric" });
   } catch {
     return iso;
   }
 }
-const columns = [
-  { key: "key", label: "Key", sortable: true, sortGetter: (s) => s.key.toLowerCase() },
-  { key: "created", label: "Created", width: "160px", sortable: true, sortGetter: (s) => s.created_at },
-  { key: "updated", label: "Updated", width: "160px", sortable: true, sortGetter: (s) => s.updated_at },
+const columns = computed(() => [
+  { key: "key", label: t("integration.secrets.table.column.key"), sortable: true, sortGetter: (s) => s.key.toLowerCase() },
+  { key: "created", label: t("integration.secrets.table.column.created"), width: "160px", sortable: true, sortGetter: (s) => s.created_at, searchGetter: () => "" },
+  { key: "updated", label: t("integration.secrets.table.column.updated"), width: "160px", sortable: true, sortGetter: (s) => s.updated_at, searchGetter: () => "" },
   { key: "actions", label: "", width: "40px", toggleable: false }
-];
+]);
 </script>
 
 <template>
   <IntegrationsLayout>
     <PageHeader
-      title="Secrets"
-      description="Per-tenant encrypted key/value store. Values are encrypted at rest and never returned by the API."
+      :title="t('integration.secrets.header.title')"
+      :description="t('integration.secrets.header.description')"
     >
       <template #actions>
         <Dialog v-model:open="createOpen">
           <DialogTrigger as-child>
             <Button class="h-7 text-sm" @click="openCreate">
               <Plus :size="14" />
-              New secret
+              {{ t("integration.secrets.action.new") }}
             </Button>
           </DialogTrigger>
           <DialogContent>
             <DialogHeader>
-              <DialogTitle>Create a secret</DialogTitle>
+              <DialogTitle>{{ t("integration.secrets.dialog.create.title") }}</DialogTitle>
               <DialogDescription class="text-sm">
-                Once stored, the value is encrypted with AES-256-GCM and never echoed back. You can overwrite it later, but to read it you have to know it.
+                {{ t("integration.secrets.dialog.create.description") }}
               </DialogDescription>
             </DialogHeader>
 
             <div class="space-y-4 py-2">
               <div class="space-y-1.5">
-                <Label for="sec-key">Key</Label>
+                <Label for="sec-key">{{ t("integration.secrets.form.key.label") }}</Label>
                 <Input
                   id="sec-key"
                   v-model="newKey"
@@ -120,11 +121,11 @@ const columns = [
                   autocomplete="off"
                 />
                 <p class="text-sm text-muted-foreground">
-                  Pattern: <code class="font-mono">^[A-Z0-9_]+$</code>
+                  {{ t("integration.secrets.form.key.patternLabel") }} <code class="font-mono">^[A-Z0-9_]+$</code>
                 </p>
               </div>
               <div class="space-y-1.5">
-                <Label for="sec-value">Value</Label>
+                <Label for="sec-value">{{ t("integration.secrets.form.value.label") }}</Label>
                 <div class="relative">
                   <Input
                     id="sec-value"
@@ -136,6 +137,7 @@ const columns = [
                   <button
                     type="button"
                     class="absolute right-1 top-1/2 -translate-y-1/2 flex size-7 items-center justify-center rounded text-muted-foreground hover:text-foreground"
+                    :aria-label="showValue ? t('integration.secrets.form.value.hide') : t('integration.secrets.form.value.show')"
                     @click="showValue = !showValue"
                   >
                     <component :is="showValue ? EyeOff : Eye" :size="14" />
@@ -150,11 +152,11 @@ const columns = [
 
             <DialogFooter>
               <Button variant="outline" :disabled="saving" @click="createOpen = false">
-                Cancel
+                {{ t("integration.common.action.cancel") }}
               </Button>
               <Button :disabled="saving" @click="submitCreate">
                 <Loader2 v-if="saving" :size="14" class="animate-spin" />
-                {{ saving ? "Saving\u2026" : "Save" }}
+                {{ saving ? t("integration.common.state.saving") : t("integration.common.action.save") }}
               </Button>
             </DialogFooter>
           </DialogContent>
@@ -172,9 +174,8 @@ const columns = [
         :columns="columns"
         :row-key="(s2) => s2.key"
         :default-sort="{ column: 'key', direction: 'asc' }"
-        :search="{ placeholder: 'Search keys\u2026' }"
-        :filter="true"
-        empty-text="No secrets yet."
+        :search="{ placeholder: t('integration.secrets.search.placeholder') }"
+        :empty-text="t('integration.secrets.state.empty')"
       >
         <template #cell-key="{ row: s }">
           <div class="flex items-center gap-2 min-w-0">
@@ -183,33 +184,54 @@ const columns = [
             </div>
             <div class="min-w-0">
               <div class="font-mono text-sm truncate">{{ s.key }}</div>
-              <div class="text-sm text-muted-foreground">Value masked — write-only</div>
+              <div class="text-sm text-muted-foreground">{{ t("integration.secrets.cell.masked") }}</div>
             </div>
           </div>
         </template>
 
+        <!--
+          `time` carries the full timestamp the cell no longer prints, and the
+          label says which date this is and whose — the table is a div grid, so
+          a date read on its own is otherwise a number without a column.
+
+          A date the service did not send is a plain span: `time` promises a
+          machine-readable moment, either in `datetime` or as its own text, and
+          the dash is neither — `datetime=""` would be an empty promise instead
+          of none. The label stays either way, because it is what ties the cell
+          to its row and column.
+        -->
         <template #cell-created="{ row: s }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.created_at) }}</span>
+          <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) })"
+            class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
+          >{{ formatDate(s.created_at) }}</component>
         </template>
 
         <template #cell-updated="{ row: s }">
-          <span class="text-sm tabular-nums text-muted-foreground">{{ formatDateTime(s.updated_at) }}</span>
+          <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) })"
+            class="text-sm tabular-nums whitespace-nowrap text-muted-foreground"
+          >{{ formatDate(s.updated_at) }}</component>
         </template>
 
         <template #cell-actions="{ row: s }">
           <div @click.stop>
             <DropdownMenu>
               <DropdownMenuTrigger as-child>
-                <Button variant="ghost" size="icon" class="size-7">
+                <Button variant="ghost" size="icon" class="size-7" :aria-label="t('integration.secrets.cell.actions.aria', { key: s.key })">
                   <MoreHorizontal :size="14" />
                 </Button>
               </DropdownMenuTrigger>
               <DropdownMenuContent align="end">
-                <DropdownMenuLabel>Actions</DropdownMenuLabel>
+                <DropdownMenuLabel>{{ t("integration.secrets.menu.label") }}</DropdownMenuLabel>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem class="text-destructive focus:text-destructive" @select="pendingDelete = s">
-                  <Trash2 :size="14" />
-                  Delete
+                  <TrashBin :size="14" />
+                  {{ t("integration.common.action.delete") }}
                 </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
@@ -223,21 +245,21 @@ const columns = [
 }">
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Delete secret?</AlertDialogTitle>
+          <AlertDialogTitle>{{ t("integration.secrets.dialog.delete.title") }}</AlertDialogTitle>
           <AlertDialogDescription>
             <span v-if="pendingDelete">
               <span class="font-mono font-medium text-foreground">{{ pendingDelete.key }}</span>
-              will be permanently removed. Workflows that reference it will break the next time they run.
+              {{ t("integration.secrets.dialog.delete.body") }}
             </span>
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <Button variant="outline" :disabled="deleting" @click="pendingDelete = null">
-            Cancel
+            {{ t("integration.common.action.cancel") }}
           </Button>
           <Button class="bg-destructive text-white hover:bg-destructive/90" :disabled="deleting" @click="confirmDelete">
             <Loader2 v-if="deleting" :size="14" class="animate-spin" />
-            {{ deleting ? "Deleting\u2026" : "Delete" }}
+            {{ deleting ? t("integration.common.state.deleting") : t("integration.common.action.delete") }}
           </Button>
         </AlertDialogFooter>
       </AlertDialogContent>