                <div
                    v-show="mainTab === 'docs'"
                    class="mode-content docs-mode-content"
                    id="panel-docs"
                    role="tabpanel"
                    aria-labelledby="tab-docs">
                    <div class="selector-section">
                        <div class="selector-header">
                            <span class="selector-title">{{ t('docs.title') }}</span>
                            <div class="skills-panel-note docs-section-note">{{ t('docs.subtitle') }}</div>
                        </div>

                        <div class="docs-toolbar-grid">
                            <div class="docs-toolbar-card">
                                <label class="form-label" for="docs-install-package-manager">{{ t('common.packageManager') }}</label>
                                <select id="docs-install-package-manager" class="form-input" v-model="installPackageManager">
                                    <option value="npm">npm</option>
                                    <option value="pnpm">pnpm</option>
                                    <option value="bun">bun</option>
                                </select>
                            </div>
                            <div class="docs-toolbar-card docs-toolbar-card-wide">
                                <label class="form-label">{{ t('common.mirror') }}</label>
                                <div class="install-action-tabs">
                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'default' }" @click="setInstallRegistryPreset('default')">{{ t('common.official') }}</button>
                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'npmmirror' }" @click="setInstallRegistryPreset('npmmirror')">npmmirror</button>
                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'tencent' }" @click="setInstallRegistryPreset('tencent')">{{ t('docs.registry.tencent') }}</button>
                                    <button type="button" class="btn-mini" :class="{ active: installRegistryPreset === 'custom' }" @click="setInstallRegistryPreset('custom')">{{ t('common.custom') }}</button>
                                </div>
                                <input v-if="installRegistryPreset === 'custom'" v-model="installRegistryCustom" class="form-input install-registry-input" placeholder="https://registry.example.com">
                                <div class="form-hint install-registry-hint" v-if="installRegistryPreview">{{ t('docs.registryHintPrefix') }} --registry={{ installRegistryPreview }}</div>
                                <div class="form-hint install-registry-hint" v-else-if="installRegistryPreset === 'custom'">{{ t('docs.registryHintCustom') }}</div>
                            </div>
                            <div class="docs-toolbar-card docs-toolbar-card-wide">
                                <label class="form-label">{{ t('common.action') }}</label>
                                <div class="install-action-tabs">
                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'install' }" @click="setInstallCommandAction('install')">{{ t('common.install') }}</button>
                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'update' }" @click="setInstallCommandAction('update')">{{ t('common.update') }}</button>
                                    <button type="button" class="btn-mini" :class="{ active: installCommandAction === 'uninstall' }" @click="setInstallCommandAction('uninstall')">{{ t('common.uninstall') }}</button>
                                </div>
                            </div>
                        </div>

                        <div class="docs-summary-strip">
                            <div class="docs-summary-item">
                                <span class="docs-summary-label">{{ t('common.targets') }}</span>
                                <strong class="docs-summary-value">{{ installTargetCards.length }}</strong>
                            </div>
                            <div class="docs-summary-item">
                                <span class="docs-summary-label">{{ t('common.currentPm') }}</span>
                                <strong class="docs-summary-value">{{ String(installPackageManager || 'npm').toUpperCase() }}</strong>
                            </div>
                            <div class="docs-summary-item docs-summary-item-wide">
                                <span class="docs-summary-label">{{ t('common.registry') }}</span>
                                <strong class="docs-summary-value">{{ installRegistryPreview || t('common.defaultOfficial') }}</strong>
                            </div>
                        </div>
                    </div>

                    <div class="selector-section">
                        <div class="selector-header">
                            <span class="selector-title">{{ t('docs.section.commands') }}</span>
                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.commandsNote') }}</div>
                        </div>

                        <div class="install-list docs-install-list">
                            <div class="install-row docs-install-row" v-for="target in installTargetCards" :key="'docs-install-command-' + target.id + '-' + installCommandAction">
                                <div class="install-row-main">
                                    <div class="docs-command-head">
                                        <div class="install-row-title">{{ target.name }}</div>
                                        <div class="docs-command-meta">
                                            <span class="docs-meta-pill">{{ target.packageName }}</span>
                                            <span class="docs-meta-pill">bin: {{ target.bin }}</span>
                                        </div>
                                    </div>
                                    <div class="docs-command-row">
                                        <div class="docs-command-box" role="group" :aria-label="t('docs.command.aria', { name: target.name })">
                                            <code class="install-command">{{ target.command }}</code>
                                            <button type="button" class="btn-mini docs-copy-btn" :disabled="!target.command" @click="copyInstallCommand(target.command)">{{ t('common.copy') }}</button>
                                        </div>
                                    </div>
                                    <div v-if="target.id === 'codex' && target.termuxCommand && target.termuxCommand !== target.command" class="docs-command-row docs-command-row-secondary">
                                        <div class="docs-command-box" role="group" :aria-label="t('docs.termuxAria')">
                                            <code class="install-command"><span class="docs-command-prefix">{{ t('docs.termuxLabel') }}</span>{{ target.termuxCommand }}</code>
                                            <button type="button" class="btn-mini docs-copy-btn" @click="copyInstallCommand(target.termuxCommand)">{{ t('common.copy') }}</button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <div class="selector-section">
                        <div class="selector-header">
                            <span class="selector-title">{{ t('docs.section.faq') }}</span>
                            <div class="skills-panel-note docs-section-note">{{ t('docs.section.faqNote') }}</div>
                        </div>

                        <div class="docs-help-grid">
                            <div class="docs-note-card">
                                <div class="docs-note-title">{{ t('common.troubleshooting') }}</div>
                                <ul class="install-help-list docs-help-list">
                                    <li v-for="tip in installTroubleshootingTips" :key="tip">{{ tip }}</li>
                                </ul>
                            </div>
                            <div class="docs-note-card">
                                <div class="docs-note-title">{{ t('common.rules') }}</div>
                                <ul class="docs-static-list">
                                    <li>{{ t('docs.rule.1') }}</li>
                                    <li>{{ t('docs.rule.2') }}</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>