+```
+
+### 9.2 Alterar Ordem
+
+Reorganizar os elementos `
` na ordem desejada dentro da área de bookmarks.
+
+### 9.3 Condicional por Permissão
+
+```tsx
+{user?.role === "admin" && (
+
...
+)}
+
+// Ou por módulo permitido:
+{(user as any)?.allowedModules?.includes("modulo") && (
+
...
+)}
+```
+
+---
+
+## 10. Integração com Sistema
+
+### 10.1 Uso nas Páginas
+
+Todas as páginas que usam a navbar devem ser envolvidas por `BrowserFrame`:
+
+```tsx
+// Exemplo: client/src/pages/Agent.tsx
+import { BrowserFrame } from "@/components/Browser/BrowserFrame";
+
+export default function Agent() {
+ return (
+
+
+ {/* Conteúdo da página */}
+
+
+ );
+}
+```
+
+### 10.2 Páginas que NÃO usam BrowserFrame
+
+- `AuthPage` (tela de login)
+- `NotFound` (página 404)
+
+---
+
+## 11. Considerações Técnicas
+
+### 11.1 Performance
+- Code splitting via `React.lazy()` em todas as páginas
+- Suspense com fallback de loading
+- Debounce no rastreamento (2s)
+
+### 11.2 Acessibilidade
+- `cursor-pointer` em todos os bookmarks
+- Estrutura semântica do dropdown
+- Contraste adequado nos ícones (branco sobre gradiente)
+
+### 11.3 Limitações Conhecidas
+- Não há indicador visual de "página ativa" (design intencional)
+- Scroll horizontal pode esconder itens em telas muito pequenas
+- Não suporta drag-and-drop para reordenar
+
+### 11.4 Tratamento de Erros (Resolvido)
+
+**Problema:** Se uma página carregada via `React.lazy()` tivesse erro (import quebrado, sintaxe inválida), o `Suspense` ficava preso no estado de loading infinito.
+
+**Solução Implementada:**
+
+1. **ErrorBoundary** (`client/src/components/ErrorBoundary.tsx`):
+ - Captura erros em componentes filhos, incluindo falhas no lazy loading
+ - Exibe UI de fallback com detalhes do erro
+ - Botão "Tentar Novamente" para recarregar
+
+2. **LoadingFallback Aprimorado** (`client/src/App.tsx`):
+ - Após 3s: mostra mensagem "Isso está demorando mais que o esperado..."
+ - Após 10s: mostra alerta amarelo com botão de recarregar
+
+3. **Integração no Router**:
+```tsx
+function Router() {
+ return (
+ {/* ← Captura erros */}
+ }>
+
+
+ {/* ... outras rotas ... */}
+
+
+
+ );
+}
+```
+
+**Fluxo de Erro:**
+```
+Usuário clica → lazy() falha → Suspense não resolve → ErrorBoundary captura
+ ↓
+ LoadingFallback mostra
+ aviso após 3s/10s
+ ↓
+ ErrorBoundary renderiza
+ UI de erro com retry
+```
+
+---
+
+## 12. Diagrama de Sequência
+
+```
+┌────────┐ ┌─────────────┐ ┌──────────┐ ┌─────────┐ ┌──────────┐
+│ Usuário│ │ Navbar │ │ wouter │ │ React │ │ Backend │
+└───┬────┘ └──────┬──────┘ └────┬─────┘ └────┬────┘ └────┬─────┘
+ │ │ │ │ │
+ │──clica─────────▶│ │ │ │
+ │ │ │ │ │
+ │ │──trackPageView────────────────────│──────────────▶│
+ │ │ │ │ │
+ │ │──setLocation───▶│ │ │
+ │ │ │ │ │
+ │ │ │──atualiza URL──│ │
+ │ │ │ │ │
+ │ │ │◀─URL changed───│ │
+ │ │ │ │ │
+ │ │ │──lazy import──▶│ │
+ │ │ │ │ │
+ │ │◀────────────────│──chunk loaded──│ │
+ │ │ │ │ │
+ │ │──renderiza nova página────────────▶│ │
+ │ │ │ │ │
+ │◀────────────────│ │ │ │
+ │ │ │ │ │
+```
+
+---
+
+## 13. Changelog
+
+| Versão | Data | Alterações |
+|--------|------|------------|
+| 1.0 | 2026-04-08 | Especificação inicial criada |
+| 1.1 | 2026-04-08 | Adicionado tratamento de erros (ErrorBoundary + LoadingFallback com timeout) |
+
+---
+
+## 14. Referências
+
+- **Arquivo Fonte:** `client/src/components/Browser/BrowserFrame.tsx`
+- **Hook de Tracking:** `client/src/hooks/use-navigation-tracking.ts`
+- **Rotas:** `client/src/App.tsx`
+- **Autenticação:** `client/src/hooks/use-auth.tsx`
+- **UI Components:** `client/src/components/ui/`
+
+---
+
+**Nota para Agentes:**
+> Ao modificar a navbar, mantenha a consistência visual com os bookmarks existentes. Sempre adicione `data-testid` para testes e atualize esta especificação se houver mudanças significativas na estrutura ou comportamento.