@cat-factory/app 0.46.10 → 0.46.11

package/app/components/panels/StepMetadataCard.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { computed } from 'vue'
-import type { AgentState, PipelineStep, CompanionVerdict } from '~/types/execution'
+import type { AgentState, PipelineStep, CompanionVerdict, StepApproval } from '~/types/execution'
 import { subtaskIconClass } from '~/utils/pipelineRender'
 import StepModelActivity from '~/components/observability/StepModelActivity.vue'
 
@@ -21,20 +21,28 @@ const props = defineProps<{
 }>()
 
 const models = useModelsStore()
+const { t, d } = useI18n()
 
-const STATE_META: Record<AgentState, { label: string; color: string }> = {
-  pending: { label: 'Pending', color: '#64748b' },
-  working: { label: 'Working', color: '#6366f1' },
-  waiting_decision: { label: 'Needs input', color: '#f59e0b' },
-  done: { label: 'Done', color: '#22c55e' },
+const STATE_LABEL_KEYS: Record<AgentState, string> = {
+  pending: 'panels.stepMeta.state.pending',
+  working: 'panels.stepMeta.state.working',
+  waiting_decision: 'panels.stepMeta.state.waiting_decision',
+  done: 'panels.stepMeta.state.done',
+}
+const STATE_COLOR: Record<AgentState, string> = {
+  pending: '#64748b',
+  working: '#6366f1',
+  waiting_decision: '#f59e0b',
+  done: '#22c55e',
 }
 
 // The state badge: a step left mid-flight on a failed run keeps `state: 'working'`,
 // so report it as "Failed" rather than the misleading "Working".
 const stateMeta = computed(() => {
   const s = props.step
-  if (props.runFailed && s.state === 'working') return { label: 'Failed', color: '#ef4444' }
-  return STATE_META[s.state]
+  if (props.runFailed && s.state === 'working')
+    return { label: t('panels.stepMeta.state.failed'), color: '#ef4444' }
+  return { label: t(STATE_LABEL_KEYS[s.state]), color: STATE_COLOR[s.state] }
 })
 
 const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.step.model) : null))
@@ -47,8 +55,18 @@ const ITEM_ICON: Record<string, string> = {
 
 const pctOf = (n: number) => `${Math.round(n * 100)}%`
 
+const APPROVAL_STATUS_KEYS: Record<StepApproval['status'], string> = {
+  pending: 'panels.stepMeta.approvalStatus.pending',
+  approved: 'panels.stepMeta.approvalStatus.approved',
+  changes_requested: 'panels.stepMeta.approvalStatus.changes_requested',
+  rejected: 'panels.stepMeta.approvalStatus.rejected',
+}
+const approvalStatusLabel = computed(() =>
+  props.step.approval ? t(APPROVAL_STATUS_KEYS[props.step.approval.status]) : '',
+)
+
 function formatClock(ms?: number | null): string | null {
-  return ms ? new Date(ms).toLocaleString() : null
+  return ms ? d(new Date(ms), 'long') : null
 }
 
 async function copyRunId() {
@@ -61,7 +79,9 @@ async function copyRunId() {
   <div>
     <dl class="grid grid-cols-2 gap-x-6 gap-y-3 text-[13px] sm:grid-cols-3">
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">State</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.stateLabel') }}
+        </dt>
         <dd class="mt-0.5 flex items-center gap-1.5 text-slate-200">
           <UIcon
             v-if="runFailed && step.state === 'working'"
@@ -74,7 +94,9 @@ async function copyRunId() {
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Duration</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.duration') }}
+        </dt>
         <dd class="mt-0.5 flex items-center gap-1.5 tabular-nums text-slate-200">
           <UIcon
             v-if="isRunning"
@@ -83,33 +105,47 @@ async function copyRunId() {
           />
           <span v-if="durationLabel">{{ durationLabel }}</span>
           <span v-else class="text-slate-500">—</span>
-          <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+          <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+            t('panels.stepMeta.elapsed')
+          }}</span>
         </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Step</dt>
-        <dd class="mt-0.5 text-slate-200">{{ stepNumber }} of {{ totalSteps }}</dd>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.step') }}
+        </dt>
+        <dd class="mt-0.5 text-slate-200">
+          {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
+        </dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Started</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.started') }}
+        </dt>
         <dd class="mt-0.5 text-slate-300">{{ formatClock(step.startedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Finished</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.finished') }}
+        </dt>
         <dd class="mt-0.5 text-slate-300">{{ formatClock(step.finishedAt) ?? '—' }}</dd>
       </div>
       <div>
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Model</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.model') }}
+        </dt>
         <dd class="mt-0.5 truncate text-slate-300" :title="step.model">
-          {{ modelLabel ?? 'Not recorded' }}
+          {{ modelLabel ?? t('panels.stepMeta.notRecorded') }}
         </dd>
       </div>
       <!-- The run id this step belongs to, surfaced for debugging (copyable). -->
       <div class="col-span-2 sm:col-span-3">
-        <dt class="text-[11px] uppercase tracking-wide text-slate-500">Run</dt>
+        <dt class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.run') }}
+        </dt>
         <dd
           class="mt-0.5 cursor-pointer truncate font-mono text-[12px] text-slate-400 hover:text-slate-200"
-          :title="`${step.runId ?? instanceId ?? ''} — click to copy`"
+          :title="t('panels.stepMeta.clickToCopy', { id: step.runId ?? instanceId ?? '' })"
           @click="copyRunId"
         >
           {{ step.runId ?? instanceId ?? '—' }}
@@ -124,13 +160,18 @@ async function copyRunId() {
       class="mt-4 flex items-center gap-2 rounded-lg border border-sky-900/50 bg-sky-950/30 px-3 py-2 text-[12px] text-sky-300"
     >
       <UIcon name="i-lucide-loader-circle" class="h-4 w-4 shrink-0 animate-spin" />
-      <span>Spinning up container…</span>
+      <span>{{ t('panels.stepMeta.spinningUpContainer') }}</span>
     </div>
 
     <!-- live subtask breakdown -->
     <div v-if="step.subtasks && step.subtasks.total > 0" class="mt-4">
       <div class="text-[11px] uppercase tracking-wide text-slate-500">
-        Subtasks · {{ step.subtasks.completed }}/{{ step.subtasks.total }}
+        {{
+          t('panels.stepMeta.subtasks', {
+            completed: step.subtasks.completed,
+            total: step.subtasks.total,
+          })
+        }}
       </div>
       <div class="mt-1 h-1 overflow-hidden rounded-full bg-slate-700/60">
         <div
@@ -170,7 +211,9 @@ async function copyRunId() {
 
     <!-- standards (prompt fragments) folded into this step -->
     <div v-if="step.selectedFragmentIds && step.selectedFragmentIds.length" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Standards applied</div>
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.standardsApplied') }}
+      </div>
       <div class="mt-1 flex flex-wrap gap-1">
         <UBadge
           v-for="id in step.selectedFragmentIds"
@@ -186,7 +229,9 @@ async function copyRunId() {
 
     <!-- decision raised on this step -->
     <div v-if="step.decision" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Decision</div>
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.decision') }}
+      </div>
       <p class="mt-0.5 text-[13px] text-slate-200">{{ step.decision.question }}</p>
       <p
         v-if="step.decision.chosen"
@@ -195,21 +240,27 @@ async function copyRunId() {
         <UIcon name="i-lucide-check" class="h-3 w-3 shrink-0" />
         {{ step.decision.chosen }}
       </p>
-      <p v-else class="mt-0.5 text-[12px] text-amber-400">Awaiting a human choice</p>
+      <p v-else class="mt-0.5 text-[12px] text-amber-400">
+        {{ t('panels.stepMeta.awaitingChoice') }}
+      </p>
     </div>
 
     <!-- approval gate state -->
     <div v-if="step.approval" class="mt-4">
-      <div class="text-[11px] uppercase tracking-wide text-slate-500">Approval gate</div>
-      <p class="mt-0.5 text-[13px] text-slate-200 capitalize">
-        {{ step.approval.status.replace('_', ' ') }}
+      <div class="text-[11px] uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.approvalGate') }}
+      </div>
+      <p class="mt-0.5 text-[13px] text-slate-200">
+        {{ approvalStatusLabel }}
       </p>
     </div>
 
     <!-- companion verdict + full correction sequence -->
     <div v-if="companionVerdicts.length" class="mt-4">
       <div class="flex items-center justify-between">
-        <span class="text-[11px] uppercase tracking-wide text-slate-500"> Companion review </span>
+        <span class="text-[11px] uppercase tracking-wide text-slate-500">
+          {{ t('panels.stepMeta.companionReview') }}
+        </span>
         <UBadge :color="latestVerdict?.passed ? 'success' : 'warning'" variant="subtle" size="sm">
           {{ pctOf(latestVerdict!.rating) }}
           {{ latestVerdict?.passed ? '≥' : '<' }} {{ pctOf(latestVerdict!.threshold) }}
@@ -234,7 +285,13 @@ async function copyRunId() {
         </li>
       </ol>
       <p v-if="companionVerdicts.length > 1" class="mt-1 text-[11px] text-slate-500">
-        {{ companionVerdicts.length }} correction iteration(s).
+        {{
+          t(
+            'panels.stepMeta.correctionIterations',
+            { count: companionVerdicts.length },
+            companionVerdicts.length,
+          )
+        }}
       </p>
     </div>
   </div>

package/app/components/panels/StepRestartControl.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 const emit = defineEmits<{ restarted: [] }>()
 
 const execution = useExecutionStore()
+const { t } = useI18n()
 
 const instance = computed(() =>
   props.instanceId ? execution.getInstance(props.instanceId) : undefined,
@@ -62,7 +63,7 @@ async function restart() {
       color="neutral"
       variant="ghost"
       size="sm"
-      title="Restart pipeline from this step"
+      :title="t('panels.stepRestart.restartFromStep')"
       @click="armed = true"
     />
     <template v-else>
@@ -74,7 +75,7 @@ async function restart() {
         :loading="restarting"
         @click="restart"
       >
-        Restart from here
+        {{ t('panels.stepRestart.restartFromHere') }}
       </UButton>
       <UButton
         color="neutral"
@@ -83,7 +84,7 @@ async function restart() {
         :disabled="restarting"
         @click="armed = false"
       >
-        Cancel
+        {{ t('common.cancel') }}
       </UButton>
     </template>
   </template>

package/app/components/panels/StepRunMeta.vue

@@ -25,6 +25,7 @@ const props = defineProps<{
 }>()
 
 const models = useModelsStore()
+const { t, d } = useI18n()
 
 const { isRunning, durationLabel } = useStepTimer({
   step: () => props.step,
@@ -36,7 +37,7 @@ const modelLabel = computed(() => (props.step.model ? models.labelForRef(props.s
 const runId = computed(() => props.step.runId ?? props.instanceId ?? null)
 
 function formatClock(ms?: number | null): string | null {
-  return ms ? new Date(ms).toLocaleString() : null
+  return ms ? d(new Date(ms), 'long') : null
 }
 
 async function copyRunId() {
@@ -47,13 +48,17 @@ async function copyRunId() {
 <template>
   <div class="flex flex-col gap-4">
     <div v-if="stepNumber && totalSteps">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Step</h4>
-      <p class="text-[12px] text-slate-300">{{ stepNumber }} of {{ totalSteps }}</p>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.step') }}
+      </h4>
+      <p class="text-[12px] text-slate-300">
+        {{ t('panels.stepMeta.stepOf', { number: stepNumber, total: totalSteps }) }}
+      </p>
     </div>
 
     <div v-if="durationLabel">
       <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        Duration
+        {{ t('panels.stepMeta.duration') }}
       </h4>
       <p class="flex items-center gap-1.5 text-[12px] tabular-nums text-slate-300">
         <UIcon
@@ -62,34 +67,42 @@ async function copyRunId() {
           class="h-3 w-3 animate-spin text-indigo-400"
         />
         {{ durationLabel }}
-        <span v-if="isRunning" class="text-[11px] text-slate-500">elapsed</span>
+        <span v-if="isRunning" class="text-[11px] text-slate-500">{{
+          t('panels.stepMeta.elapsed')
+        }}</span>
       </p>
     </div>
 
     <div v-if="formatClock(step.startedAt)">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Started</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.started') }}
+      </h4>
       <p class="text-[12px] text-slate-300">{{ formatClock(step.startedAt) }}</p>
     </div>
 
     <div v-if="formatClock(step.finishedAt)">
       <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
-        Finished
+        {{ t('panels.stepMeta.finished') }}
       </h4>
       <p class="text-[12px] text-slate-300">{{ formatClock(step.finishedAt) }}</p>
     </div>
 
     <div v-if="step.model">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Model</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.model') }}
+      </h4>
       <p class="break-all text-[12px] text-slate-300" :title="step.model">
         {{ modelLabel ?? step.model }}
       </p>
     </div>
 
     <div v-if="runId">
-      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">Run</h4>
+      <h4 class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-500">
+        {{ t('panels.stepMeta.run') }}
+      </h4>
       <p
         class="cursor-pointer break-all font-mono text-[12px] text-slate-400 hover:text-slate-200"
-        :title="`${runId} — click to copy`"
+        :title="t('panels.stepMeta.clickToCopy', { id: runId })"
         @click="copyRunId"
       >
         {{ runId }}

package/app/components/panels/StepTestReport.vue

@@ -9,6 +9,8 @@ defineProps<{
   phase: TesterStepState | null
 }>()
 
+const { t } = useI18n()
+
 const SEVERITY_COLOR: Record<string, string> = {
   low: '#64748b',
   medium: '#f59e0b',
@@ -26,16 +28,17 @@ const OUTCOME_COLOR: Record<string, string> = {
   <section class="mt-4 scroll-mt-4">
     <div class="mb-2 flex items-center gap-1.5 text-[11px]">
       <UIcon name="i-lucide-flask-conical" class="h-3.5 w-3.5 text-slate-400" />
-      <span class="font-semibold uppercase tracking-wide text-slate-400"> Test report </span>
+      <span class="font-semibold uppercase tracking-wide text-slate-400">
+        {{ t('panels.testReport.title') }}
+      </span>
       <UBadge :color="report.greenlight ? 'success' : 'warning'" variant="subtle" size="sm">
-        {{ report.greenlight ? 'Greenlit' : 'Needs fixes' }}
+        {{
+          report.greenlight ? t('panels.testReport.greenlit') : t('panels.testReport.needsFixes')
+        }}
       </UBadge>
       <span v-if="phase && phase.attempts > 0" class="text-[11px] text-slate-500">
-        {{ phase.attempts }}/{{ phase.maxAttempts }} fix attempt(s)<span
-          v-if="phase.phase === 'fixing'"
-        >
-          · fixing…</span
-        >
+        {{ t('panels.testReport.fixAttempts', { count: phase.attempts, max: phase.maxAttempts })
+        }}<span v-if="phase.phase === 'fixing'"> {{ t('panels.testReport.fixing') }}</span>
       </span>
     </div>
     <p v-if="report.summary" class="mb-3 text-[13px] leading-relaxed text-slate-300">
@@ -43,14 +46,14 @@ const OUTCOME_COLOR: Record<string, string> = {
     </p>
 
     <div v-if="report.tested.length" class="mb-3">
-      <div class="mb-1 text-[11px] text-slate-500">Tested</div>
+      <div class="mb-1 text-[11px] text-slate-500">{{ t('panels.testReport.tested') }}</div>
       <ul class="space-y-0.5 text-[12px] text-slate-300">
-        <li v-for="(t, i) in report.tested" :key="i">• {{ t }}</li>
+        <li v-for="(item, i) in report.tested" :key="i">• {{ item }}</li>
       </ul>
     </div>
 
     <div v-if="report.outcomes.length" class="mb-3 space-y-1">
-      <div class="text-[11px] text-slate-500">Outcomes</div>
+      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.outcomes') }}</div>
       <div v-for="(o, i) in report.outcomes" :key="i" class="flex items-start gap-2 text-[12px]">
         <span
           class="mt-1 h-2 w-2 shrink-0 rounded-full"
@@ -63,7 +66,7 @@ const OUTCOME_COLOR: Record<string, string> = {
     </div>
 
     <div v-if="report.concerns.length" class="space-y-1">
-      <div class="text-[11px] text-slate-500">Concerns</div>
+      <div class="text-[11px] text-slate-500">{{ t('panels.testReport.concerns') }}</div>
       <div
         v-for="(c, i) in report.concerns"
         :key="i"

package/app/components/panels/inspector/ContainerSummary.vue

@@ -6,6 +6,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const isFrame = computed(() => (props.block.level ?? 'frame') === 'frame')
 const modules = computed(() => (isFrame.value ? board.modulesOf(props.block.id) : []))
@@ -23,7 +24,7 @@ function addTask() {
     <!-- modules (services only) -->
     <div v-if="modules.length">
       <div class="mb-1 text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Modules ({{ modules.length }})
+        {{ t('inspector.container.modules', { count: modules.length }) }}
       </div>
       <ul class="space-y-1">
         <li
@@ -34,9 +35,13 @@ function addTask() {
         >
           <UIcon name="i-lucide-package" class="h-3.5 w-3.5 text-violet-400" />
           <span class="truncate text-xs text-slate-200">{{ m.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500"
-            >{{ board.tasksOf(m.id).length }} task(s)</span
-          >
+          <span class="ml-auto text-[10px] text-slate-500">{{
+            t(
+              'inspector.container.taskCount',
+              { count: board.tasksOf(m.id).length },
+              board.tasksOf(m.id).length,
+            )
+          }}</span>
         </li>
       </ul>
     </div>
@@ -44,31 +49,37 @@ function addTask() {
     <div>
       <div class="mb-1 flex items-center justify-between">
         <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-          {{ isFrame ? 'All tasks' : 'Tasks' }} ({{ tasks.length }})
+          {{
+            isFrame
+              ? t('inspector.container.allTasks', { count: tasks.length })
+              : t('inspector.container.tasks', { count: tasks.length })
+          }}
         </span>
         <UButton size="xs" variant="soft" color="primary" icon="i-lucide-plus" @click="addTask">
-          Add task
+          {{ t('inspector.container.addTask') }}
         </UButton>
       </div>
       <ul v-if="tasks.length" class="space-y-1">
         <li
-          v-for="t in tasks"
-          :key="t.id"
+          v-for="task in tasks"
+          :key="task.id"
           class="flex cursor-pointer items-center gap-2 rounded-md px-2 py-1 hover:bg-slate-800/60"
-          @click="ui.select(t.id)"
+          @click="ui.select(task.id)"
         >
           <span
             class="h-2 w-2 shrink-0 rounded-full"
-            :style="{ backgroundColor: STATUS_META[t.status].color }"
+            :style="{ backgroundColor: STATUS_META[task.status].color }"
           />
-          <span class="truncate text-xs text-slate-200">{{ t.title }}</span>
-          <span class="ml-auto text-[10px] text-slate-500">{{ STATUS_META[t.status].label }}</span>
+          <span class="truncate text-xs text-slate-200">{{ task.title }}</span>
+          <span class="ml-auto text-[10px] text-slate-500">{{
+            STATUS_META[task.status].label
+          }}</span>
         </li>
       </ul>
-      <div v-else class="text-[11px] text-slate-500">No tasks yet — add one to start work.</div>
+      <div v-else class="text-[11px] text-slate-500">{{ t('inspector.container.noTasks') }}</div>
     </div>
     <p v-if="isFrame" class="text-[11px] text-slate-500">
-      Services are long-lived — they don't "complete". Work happens in their tasks &amp; modules.
+      {{ t('inspector.container.servicesHint') }}
     </p>
   </div>
 </template>

package/app/components/panels/inspector/EpicChildren.vue

@@ -10,6 +10,7 @@ const props = defineProps<{ block: Block }>()
 
 const board = useBoardStore()
 const ui = useUiStore()
+const { t } = useI18n()
 
 const members = computed(() => board.epicMembers(props.block.id))
 const done = computed(() => members.value.filter((m) => m.status === 'done').length)
@@ -47,13 +48,15 @@ const groups = computed(() => {
   <div>
     <div class="mb-1 flex items-center justify-between">
       <span class="text-[11px] font-semibold uppercase tracking-wide text-slate-400">
-        Epic tasks
+        {{ t('inspector.epicChildren.title') }}
       </span>
-      <span class="text-[11px] text-slate-500">{{ done }}/{{ members.length }} done</span>
+      <span class="text-[11px] text-slate-500">{{
+        t('inspector.epicChildren.doneCount', { done, total: members.length })
+      }}</span>
     </div>
 
     <div v-if="members.length === 0" class="text-[11px] text-slate-500">
-      No tasks belong to this epic yet. Import an epic's children, or set a task's epic.
+      {{ t('inspector.epicChildren.empty') }}
     </div>
 
     <div v-else class="space-y-2">
@@ -64,7 +67,7 @@ const groups = computed(() => {
       >
         <div class="mb-1 flex items-center gap-1 text-[11px] font-medium text-slate-300">
           <UIcon name="i-lucide-box" class="h-3 w-3 text-slate-500" />
-          {{ group.service?.title ?? 'Unassigned' }}
+          {{ group.service?.title ?? t('inspector.epicChildren.unassigned') }}
         </div>
         <div v-for="(mod, mi) in [...group.modules.values()]" :key="mi" class="pl-1">
           <div v-if="mod.module" class="text-[10px] uppercase tracking-wide text-slate-500">