codexmate 0.0.39 → 0.0.41

package/web-ui/partials/index/modal-config-template-agents.html

@@ -1,185 +1,185 @@
-        <div v-if="showConfigTemplateModal" class="modal-overlay" @click.self="!configTemplateApplying && closeConfigTemplateModal()">
-            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="config-template-modal-title">
-                <div class="modal-header modal-editor-header">
-                    <div class="modal-title" id="config-template-modal-title">{{ t('modal.configTemplate.title') }}</div>
-                    <div class="modal-header-actions">
-                        <button class="btn-mini btn-modal-copy" @click="pasteConfigTemplateContent" :disabled="configTemplateApplying || configTemplateDiffLoading || configTemplateDiffVisible">{{ t('common.paste') }}</button>
-                    </div>
-                </div>
-
-                <div class="form-group">
-                    <label class="form-label">{{ t('modal.configTemplate.label') }}</label>
-                    <div v-if="configTemplateDiffVisible" class="agents-diff-container">
-                        <div class="agents-diff-header">
-                            <div class="agents-diff-title">
-                                {{ t('diff.title.configTemplate') }}
-                                <span v-if="configTemplateDiffLoading" class="agents-diff-subtitle">{{ t('diff.generating') }}</span>
-                                <span v-else-if="configTemplateDiffError" class="agents-diff-subtitle">{{ t('diff.failed') }}</span>
-                                <span v-else-if="!configTemplateDiffHasChanges" class="agents-diff-subtitle">{{ t('diff.noChanges') }}</span>
-                            </div>
-                            <div class="agents-diff-stats">
-                                <span class="agents-diff-stat add">+{{ configTemplateDiffStats.added || 0 }}</span>
-                                <span class="agents-diff-stat del">-{{ configTemplateDiffStats.removed || 0 }}</span>
-                                <span class="agents-diff-stat">={{ configTemplateDiffStats.unchanged || 0 }}</span>
-                            </div>
-                        </div>
-                        <div v-if="configTemplateDiffError" class="agents-diff-error">
-                            {{ configTemplateDiffError }}
-                        </div>
-                        <div v-else class="agents-diff-lines">
-                            <div
-                                v-for="(line, index) in configTemplateDiffLines"
-                                :key="line.key || (line.type + '-' + index)"
-                                :class="['agents-diff-line', line.type]">
-                                <span class="agents-diff-line-sign">
-                                    {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
-                                </span>
-                                <span class="agents-diff-line-text">{{ line.value }}</span>
-                            </div>
-                        </div>
-                    </div>
-                    <textarea
-                        v-else
-                        v-model="configTemplateContent"
-                        class="form-input template-editor"
-                        spellcheck="false"
-                        :readonly="configTemplateApplying || configTemplateDiffLoading"
-                        @input="onConfigTemplateContentInput"
-                        :placeholder="t('modal.configTemplate.placeholder')"></textarea>
-                    <div class="template-editor-warning">
-                        <template v-if="configTemplateDiffConfirmEnabled">
-                            {{ t('modal.configTemplate.mode.twoStep') }}
-                        </template>
-                        <template v-else>
-                            {{ t('modal.configTemplate.mode.oneStep') }}
-                        </template>
-                        <div v-if="configTemplateDiffVisible && (configTemplateDiffLoading || configTemplateApplying)" class="agents-diff-hint">{{ t('diff.hint.busy') }}</div>
-                        <div v-else-if="configTemplateDiffVisible && configTemplateDiffError" class="agents-diff-hint">{{ t('diff.hint.failedBack') }}</div>
-                        <div v-else-if="configTemplateDiffVisible && !configTemplateDiffHasChanges" class="agents-diff-hint">{{ t('diff.hint.noChangesBack') }}</div>
-                        <div v-else-if="configTemplateDiffVisible" class="agents-diff-hint">{{ t('diff.hint.previewMode') }}</div>
-                    </div>
-                </div>
-
-                <div class="btn-group">
-                    <button class="btn btn-cancel" @click="closeConfigTemplateModal" :disabled="configTemplateApplying || configTemplateDiffLoading">{{ t('common.cancel') }}</button>
-                    <button
-                        v-if="configTemplateDiffVisible"
-                        class="btn"
-                        @click="resetConfigTemplateDiffState"
-                        :disabled="configTemplateApplying || configTemplateDiffLoading">
-                        {{ t('common.backToEdit') }}
-                    </button>
-                    <button class="btn btn-confirm" @click="applyConfigTemplate" :disabled="configTemplateApplying || configTemplateDiffLoading || (configTemplateDiffVisible && !configTemplateDiffHasChanges)">
-                        {{ configTemplateApplying
-                            ? (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? t('common.applying') : t('common.confirming'))
-                            : (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? t('common.apply') : t('common.confirm'))
-                        }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <div v-if="showAgentsModal" class="modal-overlay" @click.self="closeAgentsModal">
-            <div class="modal modal-wide modal-editor agents-modal" role="dialog" aria-modal="true" aria-labelledby="agents-modal-title">
-                <div class="modal-header modal-editor-header">
-                    <div class="modal-title" id="agents-modal-title">{{ agentsModalTitle }}</div>
-                    <div class="modal-header-actions">
-                        <button
-                            class="btn-mini btn-modal-copy"
-                            @click="exportAgentsContent"
-                            :disabled="agentsLoading">
-                            {{ t('modal.agents.export') }}
-                        </button>
-                        <button
-                            class="btn-mini btn-modal-copy"
-                            @click="copyAgentsContent"
-                            :disabled="agentsLoading">
-                            {{ t('modal.agents.copy') }}
-                        </button>
-                        <button
-                            class="btn-mini btn-modal-copy"
-                            @click="pasteAgentsContent"
-                            :disabled="agentsLoading || agentsSaving || agentsDiffVisible">
-                            {{ t('common.paste') }}
-                        </button>
-                    </div>
-                </div>
-
-                <div class="modal-editor-body">
-                    <div class="form-group">
-                        <label class="form-label">{{ t('modal.agents.targetFile') }}</label>
-                        <div class="form-hint">
-                            {{ agentsPath || t('common.notLoaded') }}
-                            <span v-if="agentsPath">
-                                （{{ agentsExists ? t('common.exists') : t('common.notExistsWillCreateOnSave') }}）
-                            </span>
-                        </div>
-                    </div>
-
-
-                    <div class="form-group">
-                        <label class="form-label">{{ t(agentsContext === 'claude-md' ? 'modal.agents.contentLabel.claudeMd' : 'modal.agents.contentLabel') }}</label>
-                        <div
-                            v-if="!agentsLoading && (hasAgentsContentChanged() || agentsDiffVisible)"
-                            class="agents-diff-save-alert">
-                            {{ agentsDiffVisible ? t('modal.agents.unsaved.previewModeHint') : t('modal.agents.unsaved.detectedHint') }}
-                        </div>
-                        <div v-if="agentsDiffVisible">
-                            <div
-                                v-if="!agentsDiffLoading && !agentsDiffError && !agentsDiffTruncated && (agentsDiffStats.added || agentsDiffStats.removed)"
-                                class="agents-diff-summary">
-                                <span class="agents-diff-stat add">+{{ agentsDiffStats.added }}</span>
-                                <span class="agents-diff-stat del">-{{ agentsDiffStats.removed }}</span>
-                            </div>
-                            <div v-if="agentsDiffLoading" class="state-message">{{ t('diff.generating') }}</div>
-                            <div v-else-if="agentsDiffError" class="state-message error">{{ agentsDiffError }}</div>
-                            <div v-else-if="agentsDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
-                            <div v-else-if="!agentsDiffHasChanges" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
-                            <div v-else class="agents-diff-view agents-diff-editor">
-                                <div
-                                    v-for="(line, index) in agentsDiffLines"
-                                    :key="line.key || (line.type + '-' + index)"
-                                    :class="['agents-diff-line', line.type]">
-                                    <span class="agents-diff-line-sign">
-                                        {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
-                                    </span>
-                                    <span class="agents-diff-line-text">{{ line.value }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <textarea
-                            v-model="agentsContent"
-                            class="form-input template-editor"
-                            spellcheck="false"
-                            :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
-                            @input="onAgentsContentInput"
-                            :placeholder="t(agentsContext === 'claude-md' ? 'modal.agents.placeholder.claudeMd' : 'modal.agents.placeholder')"></textarea>
-                        <div class="template-editor-warning">
-                            {{ agentsModalHint }}
-                            <div class="agents-diff-hint">{{ t('modal.agents.hint.shortcuts') }}</div>
-                            <div v-if="!agentsDiffVisible" class="agents-diff-hint">{{ t('modal.agents.hint.twoStepSave') }}</div>
-                            <div v-else-if="agentsDiffLoading || agentsSaving" class="agents-diff-hint">{{ t('diff.hint.busy') }}</div>
-                            <div v-else-if="agentsDiffError" class="agents-diff-hint">{{ t('diff.hint.failedBack') }}</div>
-                            <div v-else-if="!agentsDiffHasChanges" class="agents-diff-hint">{{ t('diff.hint.noChangesBack') }}</div>
-                            <div v-else-if="agentsDiffTruncated" class="agents-diff-hint">{{ t('diff.viewHint.truncated') }}</div>
-                            <div v-else class="agents-diff-hint">{{ t('diff.viewHint.preview') }}</div>
-                        </div>
-                    </div>
-
-                </div>
-
-                <div class="btn-group modal-editor-footer">
-                    <button class="btn btn-cancel" @click="closeAgentsModal" :disabled="agentsSaving || agentsDiffLoading">{{ t('common.cancel') }}</button>
-                    <button
-                        v-if="agentsDiffVisible"
-                        class="btn"
-                        @click="resetAgentsDiffState"
-                        :disabled="agentsSaving || agentsDiffLoading">
-                        {{ t('common.backToEdit') }}
-                    </button>
-                    <button class="btn btn-confirm" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading || agentsDiffLoading || (agentsDiffVisible && !agentsDiffHasChanges)">
-                        {{ agentsSaving ? (agentsDiffVisible ? t('common.applying') : t('common.confirming')) : (agentsDiffVisible ? t('common.apply') : t('common.confirm')) }}
-                    </button>
-                </div>
-            </div>
-        </div>
+        <div v-if="showConfigTemplateModal" class="modal-overlay" @click.self="!configTemplateApplying && closeConfigTemplateModal()">
+            <div class="modal modal-wide" role="dialog" aria-modal="true" aria-labelledby="config-template-modal-title">
+                <div class="modal-header modal-editor-header">
+                    <div class="modal-title" id="config-template-modal-title">{{ t('modal.configTemplate.title') }}</div>
+                    <div class="modal-header-actions">
+                        <button class="btn-mini btn-modal-copy" @click="pasteConfigTemplateContent" :disabled="configTemplateApplying || configTemplateDiffLoading || configTemplateDiffVisible">{{ t('common.paste') }}</button>
+                    </div>
+                </div>
+
+                <div class="form-group">
+                    <label class="form-label">{{ t('modal.configTemplate.label') }}</label>
+                    <div v-if="configTemplateDiffVisible" class="agents-diff-container">
+                        <div class="agents-diff-header">
+                            <div class="agents-diff-title">
+                                {{ t('diff.title.configTemplate') }}
+                                <span v-if="configTemplateDiffLoading" class="agents-diff-subtitle">{{ t('diff.generating') }}</span>
+                                <span v-else-if="configTemplateDiffError" class="agents-diff-subtitle">{{ t('diff.failed') }}</span>
+                                <span v-else-if="!configTemplateDiffHasChanges" class="agents-diff-subtitle">{{ t('diff.noChanges') }}</span>
+                            </div>
+                            <div class="agents-diff-stats">
+                                <span class="agents-diff-stat add">+{{ configTemplateDiffStats.added || 0 }}</span>
+                                <span class="agents-diff-stat del">-{{ configTemplateDiffStats.removed || 0 }}</span>
+                                <span class="agents-diff-stat">={{ configTemplateDiffStats.unchanged || 0 }}</span>
+                            </div>
+                        </div>
+                        <div v-if="configTemplateDiffError" class="agents-diff-error">
+                            {{ configTemplateDiffError }}
+                        </div>
+                        <div v-else class="agents-diff-lines">
+                            <div
+                                v-for="(line, index) in configTemplateDiffLines"
+                                :key="line.key || (line.type + '-' + index)"
+                                :class="['agents-diff-line', line.type]">
+                                <span class="agents-diff-line-sign">
+                                    {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
+                                </span>
+                                <span class="agents-diff-line-text">{{ line.value }}</span>
+                            </div>
+                        </div>
+                    </div>
+                    <textarea
+                        v-else
+                        v-model="configTemplateContent"
+                        class="form-input template-editor"
+                        spellcheck="false"
+                        :readonly="configTemplateApplying || configTemplateDiffLoading"
+                        @input="onConfigTemplateContentInput"
+                        :placeholder="t('modal.configTemplate.placeholder')"></textarea>
+                    <div class="template-editor-warning">
+                        <template v-if="configTemplateDiffConfirmEnabled">
+                            {{ t('modal.configTemplate.mode.twoStep') }}
+                        </template>
+                        <template v-else>
+                            {{ t('modal.configTemplate.mode.oneStep') }}
+                        </template>
+                        <div v-if="configTemplateDiffVisible && (configTemplateDiffLoading || configTemplateApplying)" class="agents-diff-hint">{{ t('diff.hint.busy') }}</div>
+                        <div v-else-if="configTemplateDiffVisible && configTemplateDiffError" class="agents-diff-hint">{{ t('diff.hint.failedBack') }}</div>
+                        <div v-else-if="configTemplateDiffVisible && !configTemplateDiffHasChanges" class="agents-diff-hint">{{ t('diff.hint.noChangesBack') }}</div>
+                        <div v-else-if="configTemplateDiffVisible" class="agents-diff-hint">{{ t('diff.hint.previewMode') }}</div>
+                    </div>
+                </div>
+
+                <div class="btn-group">
+                    <button class="btn btn-cancel" @click="closeConfigTemplateModal" :disabled="configTemplateApplying || configTemplateDiffLoading">{{ t('common.cancel') }}</button>
+                    <button
+                        v-if="configTemplateDiffVisible"
+                        class="btn"
+                        @click="resetConfigTemplateDiffState"
+                        :disabled="configTemplateApplying || configTemplateDiffLoading">
+                        {{ t('common.backToEdit') }}
+                    </button>
+                    <button class="btn btn-confirm" @click="applyConfigTemplate" :disabled="configTemplateApplying || configTemplateDiffLoading || (configTemplateDiffVisible && !configTemplateDiffHasChanges)">
+                        {{ configTemplateApplying
+                            ? (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? t('common.applying') : t('common.confirming'))
+                            : (configTemplateDiffVisible || !configTemplateDiffConfirmEnabled ? t('common.apply') : t('common.confirm'))
+                        }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <div v-if="showAgentsModal" class="modal-overlay" @click.self="closeAgentsModal">
+            <div class="modal modal-wide modal-editor agents-modal" role="dialog" aria-modal="true" aria-labelledby="agents-modal-title">
+                <div class="modal-header modal-editor-header">
+                    <div class="modal-title" id="agents-modal-title">{{ agentsModalTitle }}</div>
+                    <div class="modal-header-actions">
+                        <button
+                            class="btn-mini btn-modal-copy"
+                            @click="exportAgentsContent"
+                            :disabled="agentsLoading">
+                            {{ t('modal.agents.export') }}
+                        </button>
+                        <button
+                            class="btn-mini btn-modal-copy"
+                            @click="copyAgentsContent"
+                            :disabled="agentsLoading">
+                            {{ t('modal.agents.copy') }}
+                        </button>
+                        <button
+                            class="btn-mini btn-modal-copy"
+                            @click="pasteAgentsContent"
+                            :disabled="agentsLoading || agentsSaving || agentsDiffVisible">
+                            {{ t('common.paste') }}
+                        </button>
+                    </div>
+                </div>
+
+                <div class="modal-editor-body">
+                    <div class="form-group">
+                        <label class="form-label">{{ t('modal.agents.targetFile') }}</label>
+                        <div class="form-hint">
+                            {{ agentsPath || t('common.notLoaded') }}
+                            <span v-if="agentsPath">
+                                （{{ agentsExists ? t('common.exists') : t('common.notExistsWillCreateOnSave') }}）
+                            </span>
+                        </div>
+                    </div>
+
+
+                    <div class="form-group">
+                        <label class="form-label">{{ t(agentsContext === 'claude-md' ? 'modal.agents.contentLabel.claudeMd' : 'modal.agents.contentLabel') }}</label>
+                        <div
+                            v-if="!agentsLoading && (hasAgentsContentChanged() || agentsDiffVisible)"
+                            class="agents-diff-save-alert">
+                            {{ agentsDiffVisible ? t('modal.agents.unsaved.previewModeHint') : t('modal.agents.unsaved.detectedHint') }}
+                        </div>
+                        <div v-if="agentsDiffVisible">
+                            <div
+                                v-if="!agentsDiffLoading && !agentsDiffError && !agentsDiffTruncated && (agentsDiffStats.added || agentsDiffStats.removed)"
+                                class="agents-diff-summary">
+                                <span class="agents-diff-stat add">+{{ agentsDiffStats.added }}</span>
+                                <span class="agents-diff-stat del">-{{ agentsDiffStats.removed }}</span>
+                            </div>
+                            <div v-if="agentsDiffLoading" class="state-message">{{ t('diff.generating') }}</div>
+                            <div v-else-if="agentsDiffError" class="state-message error">{{ agentsDiffError }}</div>
+                            <div v-else-if="agentsDiffTruncated" class="agents-diff-empty">{{ t('diff.tooLargeSkip') }}</div>
+                            <div v-else-if="!agentsDiffHasChanges" class="agents-diff-empty">{{ t('diff.noChanges') }}</div>
+                            <div v-else class="agents-diff-view agents-diff-editor">
+                                <div
+                                    v-for="(line, index) in agentsDiffLines"
+                                    :key="line.key || (line.type + '-' + index)"
+                                    :class="['agents-diff-line', line.type]">
+                                    <span class="agents-diff-line-sign">
+                                        {{ line.type === 'add' ? '+' : (line.type === 'del' ? '-' : ' ') }}
+                                    </span>
+                                    <span class="agents-diff-line-text">{{ line.value }}</span>
+                                </div>
+                            </div>
+                        </div>
+                        <textarea
+                            v-model="agentsContent"
+                            class="form-input template-editor"
+                            spellcheck="false"
+                            :readonly="agentsLoading || agentsSaving || agentsDiffVisible"
+                            @input="onAgentsContentInput"
+                            :placeholder="t(agentsContext === 'claude-md' ? 'modal.agents.placeholder.claudeMd' : 'modal.agents.placeholder')"></textarea>
+                        <div class="template-editor-warning">
+                            {{ agentsModalHint }}
+                            <div class="agents-diff-hint">{{ t('modal.agents.hint.shortcuts') }}</div>
+                            <div v-if="!agentsDiffVisible" class="agents-diff-hint">{{ t('modal.agents.hint.twoStepSave') }}</div>
+                            <div v-else-if="agentsDiffLoading || agentsSaving" class="agents-diff-hint">{{ t('diff.hint.busy') }}</div>
+                            <div v-else-if="agentsDiffError" class="agents-diff-hint">{{ t('diff.hint.failedBack') }}</div>
+                            <div v-else-if="!agentsDiffHasChanges" class="agents-diff-hint">{{ t('diff.hint.noChangesBack') }}</div>
+                            <div v-else-if="agentsDiffTruncated" class="agents-diff-hint">{{ t('diff.viewHint.truncated') }}</div>
+                            <div v-else class="agents-diff-hint">{{ t('diff.viewHint.preview') }}</div>
+                        </div>
+                    </div>
+
+                </div>
+
+                <div class="btn-group modal-editor-footer">
+                    <button class="btn btn-cancel" @click="closeAgentsModal" :disabled="agentsSaving || agentsDiffLoading">{{ t('common.cancel') }}</button>
+                    <button
+                        v-if="agentsDiffVisible"
+                        class="btn"
+                        @click="resetAgentsDiffState"
+                        :disabled="agentsSaving || agentsDiffLoading">
+                        {{ t('common.backToEdit') }}
+                    </button>
+                    <button class="btn btn-confirm" @click="applyAgentsContent" :disabled="agentsSaving || agentsLoading || agentsDiffLoading || (agentsDiffVisible && !agentsDiffHasChanges)">
+                        {{ agentsSaving ? (agentsDiffVisible ? t('common.applying') : t('common.confirming')) : (agentsDiffVisible ? t('common.apply') : t('common.confirm')) }}
+                    </button>
+                </div>
+            </div>
+        </div>

package/web-ui/partials/index/modal-confirm-toast.html

@@ -1,32 +1,32 @@
-        <div v-if="showConfirmDialog" class="modal-overlay" @click.self="closeConfirmDialog">
-            <div
-                class="modal confirm-dialog"
-                role="alertdialog"
-                aria-modal="true"
-                aria-describedby="confirm-dialog-message"
-                :aria-labelledby="confirmDialogTitle ? 'confirm-dialog-title' : null"
-                :aria-label="confirmDialogTitle ? null : t('confirm.aria')">
-                <div id="confirm-dialog-title" class="modal-title">{{ confirmDialogTitle }}</div>
-                <div id="confirm-dialog-message" class="confirm-dialog-message">{{ confirmDialogMessage }}</div>
-                <div class="btn-group confirm-dialog-actions">
-                    <button class="btn btn-cancel" @click="closeConfirmDialog">{{ confirmDialogCancelText }}</button>
-                    <button
-                        :class="['btn', 'btn-confirm', confirmDialogDanger ? 'btn-danger' : '']"
-                        :disabled="isConfirmDialogDisabled()"
-                        @click="resolveConfirmDialog(true)">
-                        {{ confirmDialogConfirmText }}
-                    </button>
-                </div>
-            </div>
-        </div>
-
-        <!-- Toast通知 -->
-        
-        <!-- Toast -->
-        <div
-            v-if="message"
-            :class="['toast', messageType]"
-            role="status"
-            aria-live="polite"
-            aria-atomic="true">{{ message }}</div>
-    </div>
+        <div v-if="showConfirmDialog" class="modal-overlay" @click.self="closeConfirmDialog">
+            <div
+                class="modal confirm-dialog"
+                role="alertdialog"
+                aria-modal="true"
+                aria-describedby="confirm-dialog-message"
+                :aria-labelledby="confirmDialogTitle ? 'confirm-dialog-title' : null"
+                :aria-label="confirmDialogTitle ? null : t('confirm.aria')">
+                <div id="confirm-dialog-title" class="modal-title">{{ confirmDialogTitle }}</div>
+                <div id="confirm-dialog-message" class="confirm-dialog-message">{{ confirmDialogMessage }}</div>
+                <div class="btn-group confirm-dialog-actions">
+                    <button class="btn btn-cancel" @click="closeConfirmDialog">{{ confirmDialogCancelText }}</button>
+                    <button
+                        :class="['btn', 'btn-confirm', confirmDialogDanger ? 'btn-danger' : '']"
+                        :disabled="isConfirmDialogDisabled()"
+                        @click="resolveConfirmDialog(true)">
+                        {{ confirmDialogConfirmText }}
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Toast通知 -->
+        
+        <!-- Toast -->
+        <div
+            v-if="message"
+            :class="['toast', messageType]"
+            role="status"
+            aria-live="polite"
+            aria-atomic="true">{{ message }}</div>
+    </div>

package/web-ui/partials/index/modal-health-check.html

@@ -1,45 +1,45 @@
-        <div v-if="showHealthCheckModal" class="modal-overlay" @click.self="showHealthCheckModal = false">
-            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="health-check-modal-title">
-                <div class="modal-title" id="health-check-modal-title">{{ t('config.health.title') }}</div>
-
-                <div v-if="!healthCheckResult" class="state-message">{{ t('common.notLoaded') }}</div>
-                <template v-else>
-                    <div class="form-hint">
-                        {{ healthCheckResult.ok ? t('config.health.ok') : t('config.health.fail') }}
-                        <span v-if="healthCheckResult.issues">（{{ t('config.health.issues', { count: healthCheckResult.issues.length }) }}）</span>
-                    </div>
-
-                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.type === 'remote-health-check'" class="form-hint">
-                        {{ healthCheckResult.remote.endpoint || '' }}
-                        <span v-if="healthCheckResult.remote.statusCode"> · {{ healthCheckResult.remote.statusCode }}</span>
-                        <span v-if="healthCheckResult.remote.message"> · {{ healthCheckResult.remote.message }}</span>
-                    </div>
-
-                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.speedTests" class="model-list">
-                        <div
-                            v-for="(result, name) in healthCheckResult.remote.speedTests"
-                            :key="'health-speed-' + name"
-                            class="model-item"
-                        >
-                            <span>{{ name }}</span>
-                            <span v-if="result && result.ok" class="latency ok">{{ formatLatency(result) }}</span>
-                            <span v-else class="latency error">{{ (result && result.error) ? result.error : t('config.health.fail') }}</span>
-                        </div>
-                    </div>
-
-                    <div v-if="healthCheckResult.issues && healthCheckResult.issues.length" class="model-list">
-                        <div
-                            v-for="(issue, index) in healthCheckResult.issues"
-                            :key="issue.code || ('health-issue-' + index)"
-                            class="model-item"
-                        >
-                            <span>{{ issue.message || issue.code || '' }}</span>
-                        </div>
-                    </div>
-                </template>
-
-                <div class="btn-group">
-                    <button class="btn btn-confirm" @click="showHealthCheckModal = false">{{ t('common.close') }}</button>
-                </div>
-            </div>
-        </div>
+        <div v-if="showHealthCheckModal" class="modal-overlay" @click.self="showHealthCheckModal = false">
+            <div class="modal" role="dialog" aria-modal="true" aria-labelledby="health-check-modal-title">
+                <div class="modal-title" id="health-check-modal-title">{{ t('config.health.title') }}</div>
+
+                <div v-if="!healthCheckResult" class="state-message">{{ t('common.notLoaded') }}</div>
+                <template v-else>
+                    <div class="form-hint">
+                        {{ healthCheckResult.ok ? t('config.health.ok') : t('config.health.fail') }}
+                        <span v-if="healthCheckResult.issues">（{{ t('config.health.issues', { count: healthCheckResult.issues.length }) }}）</span>
+                    </div>
+
+                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.type === 'remote-health-check'" class="form-hint">
+                        {{ healthCheckResult.remote.endpoint || '' }}
+                        <span v-if="healthCheckResult.remote.statusCode"> · {{ healthCheckResult.remote.statusCode }}</span>
+                        <span v-if="healthCheckResult.remote.message"> · {{ healthCheckResult.remote.message }}</span>
+                    </div>
+
+                    <div v-if="healthCheckResult.remote && healthCheckResult.remote.speedTests" class="model-list">
+                        <div
+                            v-for="(result, name) in healthCheckResult.remote.speedTests"
+                            :key="'health-speed-' + name"
+                            class="model-item"
+                        >
+                            <span>{{ name }}</span>
+                            <span v-if="result && result.ok" class="latency ok">{{ formatLatency(result) }}</span>
+                            <span v-else class="latency error">{{ (result && result.error) ? result.error : t('config.health.fail') }}</span>
+                        </div>
+                    </div>
+
+                    <div v-if="healthCheckResult.issues && healthCheckResult.issues.length" class="model-list">
+                        <div
+                            v-for="(issue, index) in healthCheckResult.issues"
+                            :key="issue.code || ('health-issue-' + index)"
+                            class="model-item"
+                        >
+                            <span>{{ issue.message || issue.code || '' }}</span>
+                        </div>
+                    </div>
+                </template>
+
+                <div class="btn-group">
+                    <button class="btn btn-confirm" @click="showHealthCheckModal = false">{{ t('common.close') }}</button>
+                </div>
+            </div>
+        </div>