fix(captain): media gallery blank page caused by i18n syntax error

app/javascript/dashboard/i18n/locale/pt_BR/integrations.json

@@ -873,7 +873,7 @@
     },
     "ASSETS": {
       "HEADER": "Galeria de Midia",
-      "DESCRIPTION": "Envie imagens e referencie nos prompts usando {{ media.chave }}.",
+      "DESCRIPTION": "Envie imagens e referencie nos prompts usando {'{{'} media.chave {'}}'}.",
       "ADD_NEW": "Enviar imagem",
       "EMPTY_STATE": "Nenhuma imagem ainda. Envie sua primeira imagem para comecar.",
       "FORM_DESCRIPTION": "Envie uma imagem e defina uma chave unica para usar nos prompts.",

app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue

@@ -16,7 +16,7 @@ const uiFlags = useMapGetter('captainAssets/getUIFlags');
 const assets = useMapGetter('captainAssets/getRecords');
 const assetsMeta = useMapGetter('captainAssets/getMeta');
 
-const isFetching = computed(() => uiFlags.value.fetchingList);
+const isFetching = computed(() => uiFlags.value?.fetchingList || false);
 
 const selectedAsset = ref(null);
 const deleteAssetDialog = ref(null);
@@ -43,10 +43,13 @@ const handleEditDialogClose = () => {
 };
 
 const handleDelete = () => {
-  deleteAssetDialog.value.dialogRef.open();
+  nextTick(() => {
+    deleteAssetDialog.value.dialogRef.open();
+  });
 };
 
 const handleAction = ({ action, id }) => {
+  if (!assets.value) return;
   selectedAsset.value = assets.value.find(asset => id === asset.id);
   if (action === 'delete') {
     handleDelete();
@@ -76,11 +79,11 @@ onMounted(() => {
     :header-description="$t('CAPTAIN.ASSETS.DESCRIPTION')"
     :button-label="$t('CAPTAIN.ASSETS.ADD_NEW')"
     :button-policy="['administrator']"
-    :total-count="assetsMeta.totalCount"
-    :current-page="assetsMeta.page"
-    :show-pagination-footer="!isFetching && !!assets.length"
+    :total-count="assetsMeta?.totalCount || 0"
+    :current-page="assetsMeta?.page || 1"
+    :show-pagination-footer="!isFetching && !!assets?.length"
     :is-fetching="isFetching"
-    :is-empty="!assets.length"
+    :is-empty="!assets?.length"
     :show-know-more="false"
     :show-assistant-switcher="false"
     :feature-flag="FEATURE_FLAGS.CAPTAIN"
@@ -114,7 +117,6 @@ onMounted(() => {
           :key="asset.id"
           :name="asset.name"
           :file-url="asset.file_url"
-          :created-at="asset.created_at"
           @action="handleAction"
         />
       </div>

progresso/2026-01-13_fix_media_gallery_blank_page.md

@@ -0,0 +1,34 @@
+# Fix: Galeria de Mídia em Branco (Media Gallery)
+
+## Contexto
+
+A página "Galeria de Mídia" (`/captain/assets`) estava carregando totalmente em branco para o usuário.
+Inicialmente suspeitou-se de erro no componente Vue ou na API, mas após correções iniciais, o problema persistiu.
+
+## Sintomas
+
+- Página branca.
+- Console do navegador exibia: `SyntaxError: Not allowed nest placeholder` vindo de `vue-i18n` (useBranding).
+
+## Causa Raiz
+
+O arquivo de tradução `pt_BR/integrations.json` continha uma string com sintaxe de interpolação inválida para o Vue I18n:
+`"DESCRIPTION": "Envie imagens e referencie nos prompts usando {{ media.chave }}."`
+
+O par de chaves duplas `{{ }}` é interpretado pelo framework como um placeholder de variável. Como `media.chave` não era uma variável passada, e a sintaxe estava solta, causava o crash da renderização.
+
+## Solução
+
+1. **Frontend (Defensivo)**: Adicionado _Optional Chaining_ (`?.`) e valores padrão (`|| 0`) no componente `Index.vue` para evitar erros caso a Store demore a carregar.
+2. **I18n (Correção)**: Escape das chaves no arquivo de tradução JSON para serem tratadas como literal string.
+   - De: `{{ media.chave }}`
+   - Para: `{'{{'} media.chave {'}}'}`
+
+## Arquivos Alterados
+
+- `app/javascript/dashboard/routes/dashboard/captain/assets/Index.vue`
+- `app/javascript/dashboard/i18n/locale/pt_BR/integrations.json`
+
+## Validação
+
+O erro de sintaxe sumiu do console e a página voltou a renderizar a interface corretamente.