        <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>
