fix(mobile): improve mobile UI for kanban, group chat and page headers (#562)

- Fix kanban loading spinner flickering on auto-refresh (silent mode)
- Fix group chat room-list transparent background on mobile
- Fix group chat sidebar auto-opening on mobile entry
- Fix page-header title overlapped by hamburger button on mobile
- Move hamburger button position to top: 10px
- Add changelog note about upgrading hermes-agent for kanban support
- Add i18n translations for all 8 locales

Co-authored-by: Claude Opus 4.7 <noreply@anthropic.com>

packages/client/src/components/hermes/group-chat/GroupChatPanel.vue

@@ -14,7 +14,7 @@ const message = useMessage()
 const store = useGroupChatStore()
 const profilesStore = useProfilesStore()
 
-const showSidebar = ref(true)
+const showSidebar = ref(window.innerWidth > 768)
 const showCreateModal = ref(false)
 const showAddAgentModal = ref(false)
 const showCompressionModal = ref(false)
@@ -915,11 +915,12 @@ export default defineComponent({ components: { CreateRoomForm } })
         top: 0;
         bottom: 0;
         z-index: 100;
+        background-color: $bg-card;
         box-shadow: 4px 0 16px rgba(0, 0, 0, 0.1);
     }
 
     .chat-header {
-        padding-left: 56px;
+        padding: 16px 12px 16px 52px;
     }
 }
 </style>

packages/client/src/data/changelog.ts

@@ -19,6 +19,7 @@ export const changelog: ChangelogEntry[] = [
       'changelog.new_0_5_15_8',
       'changelog.new_0_5_15_9',
       'changelog.new_0_5_15_10',
+      'changelog.new_0_5_15_11',
     ],
   },
   {

packages/client/src/i18n/locales/de.ts

@@ -664,6 +664,7 @@ jobTriggered: 'Job ausgelost',
     new_0_5_15_8: 'Doppelte Download-URL-Verpackung im MarkdownRenderer korrigiert',
     new_0_5_15_9: 'Hermes Markdown-Medien-Rendering und Sync-Wiederholung korrigiert',
     new_0_5_15_10: 'Upstream-Umgebungsvariablenabhängigkeit entfernt',
+    new_0_5_15_11: 'Wenn die Kanban-Funktion nicht verfügbar ist, updaten Sie bitte hermes-agent',
     new_0_5_13_1: 'Nachrichtenwarteschlange für sequenzielle Run-Verarbeitung hinzugefügt, um gleichzeitige Konflikte zu vermeiden',
     new_0_5_13_2: 'Zwei-Ebenen-Skills-Verzeichnisstruktur mit Sonstige-Kategorie für flache Skills unterstützt',
     new_0_5_13_3: 'Temporäre Sitzungen (eph_*) beim Start-Sync filtern, um interne Sitzungen nicht zu importieren',

packages/client/src/i18n/locales/en.ts

@@ -911,6 +911,7 @@ export default {
     new_0_5_15_8: 'Fix double-wrapping of download URLs in MarkdownRenderer',
     new_0_5_15_9: 'Fix Hermes markdown media rendering and sync retry',
     new_0_5_15_10: 'Refactor to remove upstream env dependency',
+    new_0_5_15_11: 'If the Kanban feature is not available, please upgrade hermes-agent',
     new_0_5_13_1: 'Add message queue for sequential run processing to prevent concurrent request conflicts',
     new_0_5_13_2: 'Support two-level skills directory structure with misc category for flat skills',
     new_0_5_13_3: 'Filter out ephemeral sessions during startup sync to avoid importing internal sessions',

packages/client/src/i18n/locales/es.ts

@@ -660,6 +660,7 @@ jobTriggered: 'Job ejecutado',
     new_0_5_15_8: 'Corregido envoltura doble de URLs de descarga en MarkdownRenderer',
     new_0_5_15_9: 'Corregido renderizado de medios Markdown y reintento de sincronización',
     new_0_5_15_10: 'Eliminada dependencia de variables de entorno upstream',
+    new_0_5_15_11: 'Si la función Kanban no está disponible, actualice hermes-agent',
     new_0_5_13_1: 'Cola de mensajes para procesamiento secuencial de ejecuciones, evitando conflictos concurrentes',
     new_0_5_13_2: 'Soporte para estructura de directorios de skills de dos niveles con categoría misc',
     new_0_5_13_3: 'Filtrar sesiones efímeras (eph_*) durante la sincronización de inicio',

packages/client/src/i18n/locales/fr.ts

@@ -659,6 +659,7 @@ jobTriggered: 'Job declenche',
     new_0_5_15_8: 'Correction double enveloppement des URLs de téléchargement dans MarkdownRenderer',
     new_0_5_15_9: 'Correction rendu média Markdown et retry synchronisation',
     new_0_5_15_10: 'Suppression dépendance variable d\'environnement amont',
+    new_0_5_15_11: 'Si la fonction Kanban n\'est pas disponible, veuillez mettre à niveau hermes-agent',
     new_0_5_13_1: 'File d\'attente de messages pour le traitement séquentiel des exécutions, évitant les conflits concurrents',
     new_0_5_13_2: 'Prise en charge de la structure de répertoire de skills à deux niveaux avec catégorie divers',
     new_0_5_13_3: 'Filtrer les sessions éphémères (eph_*) lors de la synchronisation au démarrage',

packages/client/src/i18n/locales/ja.ts

@@ -660,6 +660,7 @@ export default {
     new_0_5_15_8: 'MarkdownRendererのダウンロードURL二重ラップを修正',
     new_0_5_15_9: 'Hermes Markdownメディアレンダリングと同期リトライを修正',
     new_0_5_15_10: 'アップストリーム環境変数依存をリファクタリングで削除',
+    new_0_5_15_11: 'カンバン機能が使用できない場合は、hermes-agent をアップグレードしてください',
     new_0_5_13_1: 'メッセージキューによる順次実行処理で同時リクエストの競合を防止',
     new_0_5_13_2: '2階層スキルディレクトリ構造をサポート、フラットスキルは「その他」カテゴリに分類',
     new_0_5_13_3: '起動同期時に一時セッション（eph_*）をフィルタリング',

packages/client/src/i18n/locales/ko.ts

@@ -660,6 +660,7 @@ export default {
     new_0_5_15_8: 'MarkdownRenderer 다운로드 URL 이중 래핑 수정',
     new_0_5_15_9: 'Hermes Markdown 미디어 렌더링 및 동기화 재시도 수정',
     new_0_5_15_10: '업스트림 환경 변수 종속성 제거',
+    new_0_5_15_11: '칸반 기능을 사용할 수 없는 경우 hermes-agent를 업그레이드하세요',
     new_0_5_13_1: '메시지 큐를 통한 순차 실행 처리로 동시 요청 충돌 방지',
     new_0_5_13_2: '2단계 스킬 디렉토리 구조 지원, 플랫 스킬은 기타 카테고리로 분류',
     new_0_5_13_3: '시작 동기화 시 임시 세션(eph_*) 필터링',

packages/client/src/i18n/locales/pt.ts

@@ -660,6 +660,7 @@ jobTriggered: 'Job acionado',
     new_0_5_15_8: 'Corrigido empacotamento duplo de URLs de download no MarkdownRenderer',
     new_0_5_15_9: 'Corrigido renderização de mídia Markdown e retry de sincronização',
     new_0_5_15_10: 'Removida dependência de variável de ambiente upstream',
+    new_0_5_15_11: 'Se o recurso Kanban não estiver disponível, atualize o hermes-agent',
     new_0_5_13_1: 'Fila de mensagens para processamento sequencial de execuções, evitando conflitos concorrentes',
     new_0_5_13_2: 'Suporte à estrutura de diretório de skills de dois níveis com categoria diversos',
     new_0_5_13_3: 'Filtrar sessões efêmeras (eph_*) durante a sincronização na inicialização',

packages/client/src/i18n/locales/zh.ts

@@ -913,6 +913,7 @@ export default {
     new_0_5_15_8: '修复 MarkdownRenderer 中下载链接重复包装问题',
     new_0_5_15_9: '修复 Hermes Markdown 媒体渲染与同步重试',
     new_0_5_15_10: '重构移除上游环境变量依赖',
+    new_0_5_15_11: '如果看板功能无法使用，请升级 hermes-agent',
     new_0_5_13_1: '新增消息队列，顺序处理运行请求，避免并发冲突',
     new_0_5_13_2: '支持二级 Skills 目录结构，扁平化 Skill 归入"杂项"分类',
     new_0_5_13_3: '启动同步时过滤临时会话（eph_*），避免导入内部会话',

packages/client/src/stores/hermes/kanban.ts

@@ -12,8 +12,8 @@ export const useKanbanStore = defineStore('kanban', () => {
   const filterStatus = ref<string | null>(null)
   const filterAssignee = ref<string | null>(null)
 
-  async function fetchTasks() {
+  async function fetchTasks(silent = false) {
-    loading.value = true
+    if (!silent) loading.value = true
     try {
       tasks.value = await kanbanApi.listTasks({
         status: filterStatus.value || undefined,
@@ -22,7 +22,7 @@ export const useKanbanStore = defineStore('kanban', () => {
     } catch (err) {
       console.error('Failed to fetch kanban tasks:', err)
     } finally {
-      loading.value = false
+      if (!silent) loading.value = false
     }
   }
 

packages/client/src/styles/global.scss

@@ -114,7 +114,7 @@ a {
 .hamburger-btn {
   display: none;
   position: fixed;
-  top: 16px;
+  top: 10px;
   left: 12px;
   z-index: 99;
   width: 36px;
@@ -139,7 +139,7 @@ a {
   }
 
   .page-header {
-    padding: 16px 12px 16px 52px;
+    padding: 16px 12px 16px 52px !important;
   }
 
   .input-sm,

packages/client/src/views/hermes/KanbanView.vue

@@ -54,7 +54,7 @@ onMounted(async () => {
   await kanbanStore.refreshAll()
   refreshTimer.value = setInterval(() => {
     if (document.visibilityState === 'visible') {
-      void Promise.all([kanbanStore.fetchTasks(), kanbanStore.fetchStats()])
+      void Promise.all([kanbanStore.fetchTasks(true), kanbanStore.fetchStats()])
     }
   }, 15000)
 })
@@ -248,6 +248,7 @@ async function handleTaskCreated() {
 
 @media (max-width: $breakpoint-mobile) {
   .page-header {
+    padding: 16px 12px 16px 52px;
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;