        <div x-show="!detailView">
            <div class="view-header">
                <div>
                    <h2>Server Settings</h2>
                    <p class="text-dim view-subtitle">Admiral server health, configuration, and operational controls.</p>
                </div>
                <div class="view-actions">
                    <button class="btn btn-sm" @click="refresh()" title="Refresh">&#x21bb;</button>
                </div>
            </div>

            <!-- Server Info Cards -->
            <div class="cards">
                <div class="card" title="Current health status of the admiral server">
                    <div class="card-label">Health</div>
                    <div class="card-value" style="font-size:1.2rem" x-text="healthInfo ? healthInfo.status : 'Loading...'"></div>
                    <div class="card-detail text-dim" x-show="healthInfo" x-text="'Checked: ' + formatTimeAbsolute(healthInfo?.timestamp)"></div>
                </div>
                <div class="card" title="How long the server has been running">
                    <div class="card-label">Uptime</div>
                    <div class="card-value" style="font-size:1.2rem" x-text="healthInfo?.uptime || '-'"></div>
                    <div class="card-detail text-dim" x-show="healthInfo?.startUtc" x-text="'Started: ' + formatTimeAbsolute(healthInfo?.startUtc)"></div>
                </div>
                <div class="card" title="Current connection method to the server">
                    <div class="card-label">Connection</div>
                    <div class="card-value" style="font-size:1.2rem">
                        <span class="status-dot" :class="connected ? 'connected' : 'disconnected'" style="display:inline-block;vertical-align:middle;margin-right:0.5rem"></span>
                        <span x-text="wsConnected ? 'Live (WebSocket)' : (apiConnected ? 'Online (HTTP)' : 'Disconnected')"></span>
                    </div>
                </div>
            </div>
            <div class="detail-grid server-detail-grid" style="margin-top:1rem">
                <div class="detail-field"><span class="detail-label">Version</span><span class="mono" x-text="healthInfo?.version || '-'"></span></div>
                <div class="detail-field"><span class="detail-label">API URL</span><span class="mono" x-text="window.location.origin"></span></div>
                <div class="detail-field"><span class="detail-label">Admiral Port</span><span class="mono" x-text="healthInfo?.ports?.admiral || window.location.port"></span></div>
                <div class="detail-field"><span class="detail-label">MCP Port</span><span class="mono" x-text="healthInfo?.ports?.mcp || '-'"></span></div>
                <div class="detail-field"><span class="detail-label">WebSocket</span><span class="mono">/ws (on Admiral port)</span></div>
                <div class="detail-field"><span class="detail-label">Tunnel State</span><span class="mono" x-text="healthInfo?.remoteTunnel?.state || '-'"></span></div>
                <div class="detail-field"><span class="detail-label">Tunnel Instance</span><span class="mono" x-text="healthInfo?.remoteTunnel?.instanceId || '-'"></span></div>
                <div class="detail-field"><span class="detail-label">Tunnel Latency</span><span class="mono" x-text="healthInfo?.remoteTunnel?.latencyMs != null ? healthInfo.remoteTunnel.latencyMs + ' ms' : '-'"></span></div>
                <div class="detail-field"><span class="detail-label">Tunnel Last Heartbeat</span><span class="mono" x-text="formatTimeAbsolute(healthInfo?.remoteTunnel?.lastHeartbeatUtc) || '-'"></span></div>
            </div>

            <!-- Server Configuration Section -->
            <div class="settings-section" x-show="serverSettings">
                <h3 class="settings-section-title">Server Configuration</h3>
                <div class="settings-grid">
                    <div class="form-group">
                        <label title="REST API port used by the Armada server and dashboard.">Admiral Port</label>
                        <input type="number" x-model.number="serverSettings.admiralPort" min="1" max="65535" title="REST API port (1-65535)">
                    </div>
                    <div class="form-group">
                        <label title="Port used by the Armada MCP HTTP endpoint.">MCP Port</label>
                        <input type="number" x-model.number="serverSettings.mcpPort" min="1" max="65535" title="MCP server port (1-65535)">
                    </div>
                    <div class="form-group">
                        <label title="Maximum number of captains Armada may keep registered at once. Set to 0 for no fixed limit.">Max Captains</label>
                        <input type="number" x-model.number="serverSettings.maxCaptains" min="0" title="Maximum captains (0 = unlimited)">
                    </div>
                </div>
                <button class="btn btn-primary btn-sm" @click="saveServerConfig()" title="Save server configuration changes">Save Server Config</button>
            </div>

            <!-- Agent Settings Section -->
            <div class="settings-section" x-show="serverSettings">
                <h3 class="settings-section-title">Agent Settings</h3>
                <div class="settings-grid">
                    <div class="form-group">
                        <label title="How often Armada runs its health and dispatch checks.">Heartbeat Interval (seconds)</label>
                        <input type="number" x-model.number="serverSettings.heartbeatIntervalSeconds" min="5" title="Health check interval, minimum 5 seconds">
                    </div>
                    <div class="form-group">
                        <label title="How long a captain may go without meaningful progress before Armada considers it stalled.">Stall Threshold (minutes)</label>
                        <input type="number" x-model.number="serverSettings.stallThresholdMinutes" min="1" title="Minutes before a captain is considered stalled">
                    </div>
                    <div class="form-group">
                        <label title="How long an idle captain may sit unused before Armada automatically removes it. Set to 0 to disable auto-removal.">Idle Captain Timeout (seconds)</label>
                        <input type="number" x-model.number="serverSettings.idleCaptainTimeoutSeconds" min="0" title="Auto-remove idle captains after this many seconds (0 = disabled)">
                    </div>
                    <div class="form-group">
                        <label class="settings-checkbox-label" title="Automatically open pull requests when supported by the mission and vessel configuration.">
                            <input type="checkbox" x-model="serverSettings.autoCreatePr">
                            <span>Auto-Create Pull Requests</span>
                        </label>
                    </div>
                </div>
                <button class="btn btn-primary btn-sm" @click="saveAgentSettings()" title="Save agent settings changes">Save Agent Settings</button>
            </div>

            <div class="settings-section" x-show="serverSettings">
                <h3 class="settings-section-title">Remote Control</h3>
                <p class="text-dim" style="margin-bottom:0.75rem">Outbound tunnel settings for connecting this Armada server to Armada.Proxy.</p>
                <div class="settings-grid">
                    <div class="form-group">
                        <label class="settings-checkbox-label" title="Open an outbound remote-management tunnel from this Armada instance to Armada.Proxy.">
                            <input type="checkbox" :checked="!!serverSettings.remoteControl.enabled" @change="handleRemoteTunnelEnabledToggle($event)">
                            <span>Enable Remote Tunnel</span>
                        </label>
                    </div>
                    <div class="form-group">
                        <label title="Armada.Proxy base URL or explicit /tunnel endpoint used for remote management.">Tunnel URL</label>
                        <input type="text" x-model="serverSettings.remoteControl.tunnelUrl" placeholder="http://proxy.armadago.ai:7893/tunnel" title="Proxy base URL or tunnel endpoint. http/https will be normalized to ws/wss and /tunnel will be added automatically when needed.">
                    </div>
                    <div class="form-group">
                        <label title="Optional stable deployment identifier advertised to Armada.Proxy. Leave blank to let Armada derive one automatically.">Instance ID Override</label>
                        <input type="text" x-model="serverSettings.remoteControl.instanceId" placeholder="Leave blank for auto-generated" title="Optional stable deployment identifier advertised to Armada.Proxy. Leave blank to let Armada derive one automatically.">
                    </div>
                    <div class="form-group">
                        <label title="Optional extra admission token used only when Armada.Proxy requires instance enrollment tokens.">Instance Enrollment Token</label>
                        <div class="settings-secret-field">
                            <input :type="revealedRemoteField === 'enrollmentToken' ? 'text' : 'password'" x-model="serverSettings.remoteControl.enrollmentToken" placeholder="Optional bootstrap token" title="Optional extra admission token used only when Armada.Proxy requires instance enrollment tokens.">
                            <button type="button" class="settings-secret-toggle" :aria-label="revealedRemoteField === 'enrollmentToken' ? 'Hide enrollment token' : 'Show enrollment token'" :title="revealedRemoteField === 'enrollmentToken' ? 'Hide enrollment token' : 'Show enrollment token'" @pointerdown.prevent="beginRevealRemoteField('enrollmentToken')" @pointerup="endRevealRemoteField()" @pointerleave="endRevealRemoteField()" @pointercancel="endRevealRemoteField()" @blur="endRevealRemoteField()">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label title="Shared secret used to authenticate this Armada instance to Armada.Proxy and to unlock Armada.Proxy browser access.">Proxy Shared Password</label>
                        <div class="settings-secret-field">
                            <input :type="revealedRemoteField === 'password' ? 'text' : 'password'" x-model="serverSettings.remoteControl.password" placeholder="Defaults to armadaadmin" title="Shared secret used to authenticate this Armada instance to Armada.Proxy and to unlock Armada.Proxy browser access.">
                            <button type="button" class="settings-secret-toggle" :aria-label="revealedRemoteField === 'password' ? 'Hide shared password' : 'Show shared password'" :title="revealedRemoteField === 'password' ? 'Hide shared password' : 'Show shared password'" @pointerdown.prevent="beginRevealRemoteField('password')" @pointerup="endRevealRemoteField()" @pointerleave="endRevealRemoteField()" @pointercancel="endRevealRemoteField()" @blur="endRevealRemoteField()">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
                                    <path d="M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z"></path>
                                    <circle cx="12" cy="12" r="3"></circle>
                                </svg>
                            </button>
                        </div>
                    </div>
                    <div class="form-group">
                        <label title="How long Armada waits for the proxy tunnel connection to open before treating the attempt as failed.">Connect Timeout (seconds)</label>
                        <input type="number" x-model.number="serverSettings.remoteControl.connectTimeoutSeconds" min="5" max="300" title="How long Armada waits for the proxy tunnel connection to open before treating the attempt as failed.">
                    </div>
                    <div class="form-group">
                        <label title="How often Armada sends tunnel heartbeats to keep the connection alive and measure latency.">Heartbeat Interval (seconds)</label>
                        <input type="number" x-model.number="serverSettings.remoteControl.heartbeatIntervalSeconds" min="5" max="300" title="How often Armada sends tunnel heartbeats to keep the connection alive and measure latency.">
                    </div>
                    <div class="form-group">
                        <label title="Initial reconnect backoff after a tunnel failure. Later retries grow from this base delay.">Reconnect Base Delay (seconds)</label>
                        <input type="number" x-model.number="serverSettings.remoteControl.reconnectBaseDelaySeconds" min="1" max="300" title="Initial reconnect backoff after a tunnel failure. Later retries grow from this base delay.">
                    </div>
                    <div class="form-group">
                        <label title="Maximum reconnect backoff between tunnel retry attempts.">Reconnect Max Delay (seconds)</label>
                        <input type="number" x-model.number="serverSettings.remoteControl.reconnectMaxDelaySeconds" min="1" max="3600" title="Maximum reconnect backoff between tunnel retry attempts.">
                    </div>
                    <div class="form-group">
                        <label class="settings-checkbox-label" title="Allow self-signed or otherwise invalid TLS certificates for https/wss tunnel endpoints. Use only in trusted environments.">
                            <input type="checkbox" x-model="serverSettings.remoteControl.allowInvalidCertificates">
                            <span>Allow Invalid Certificates</span>
                        </label>
                    </div>
                </div>
                <div class="settings-config-block tunnel-status-card" x-show="serverSettings?.remoteControl?.enabled">
                    <div class="settings-config-header tunnel-status-card-header">
                        <span class="text-dim">Tunnel Status</span>
                        <span class="mono" style="display:inline-flex;align-items:center;gap:0.5rem">
                            <span class="status-dot" :class="getRemoteTunnelIndicatorClass()"></span>
                            <span x-text="getRemoteTunnelIndicatorLabel()"></span>
                        </span>
                    </div>
                </div>
                <div class="alert alert-error" style="margin-top:0.75rem" x-show="healthInfo?.remoteTunnel?.lastError" x-text="healthInfo?.remoteTunnel?.lastError"></div>
                <button class="btn btn-primary btn-sm" @click="saveRemoteControlSettings()" title="Save remote-control tunnel configuration">Save Remote Control Settings</button>
            </div>

            <!-- MCP Configuration Section -->
            <div class="settings-section" x-show="serverSettings">
                <h3 class="settings-section-title">MCP Configuration</h3>
                <p class="text-dim" style="margin-bottom:0.75rem">Client-specific MCP references for Claude, Codex, Gemini, and Cursor.</p>
                <div class="settings-config-block">
                    <div class="settings-config-header">
                        <div>
                            <div>Claude Code</div>
                            <div class="text-dim mono" style="margin-top:0.2rem">~/.claude.json -> mcpServers.armada</div>
                        </div>
                    </div>
                    <div class="settings-config-block" style="margin:0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">HTTP</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('claude', 'http', $el)" title="Copy Claude Code HTTP config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigHttp('claude')"></pre>
                    </div>
                    <div class="settings-config-block" style="margin:0 0.75rem 0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">STDIO</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('claude', 'stdio', $el)" title="Copy Claude Code STDIO config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigStdio('claude')"></pre>
                    </div>
                </div>
                <div class="settings-config-block" style="margin-top:0.75rem">
                    <div class="settings-config-header">
                        <div>
                            <div>Codex</div>
                            <div class="text-dim mono" style="margin-top:0.2rem">~/.codex/config.json -> mcpServers.armada</div>
                        </div>
                    </div>
                    <div class="settings-config-block" style="margin:0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">HTTP</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('codex', 'http', $el)" title="Copy Codex HTTP config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigHttp('codex')"></pre>
                    </div>
                    <div class="settings-config-block" style="margin:0 0.75rem 0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">STDIO</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('codex', 'stdio', $el)" title="Copy Codex STDIO config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigStdio('codex')"></pre>
                    </div>
                </div>
                <div class="settings-config-block" style="margin-top:0.75rem">
                    <div class="settings-config-header">
                        <div>
                            <div>Gemini</div>
                            <div class="text-dim mono" style="margin-top:0.2rem">~/.gemini/settings.json -> mcpServers.armada</div>
                        </div>
                    </div>
                    <div class="settings-config-block" style="margin:0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">HTTP</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('gemini', 'http', $el)" title="Copy Gemini HTTP config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigHttp('gemini')"></pre>
                    </div>
                    <div class="settings-config-block" style="margin:0 0.75rem 0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">STDIO</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('gemini', 'stdio', $el)" title="Copy Gemini STDIO config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigStdio('gemini')"></pre>
                    </div>
                </div>
                <div class="settings-config-block" style="margin-top:0.75rem">
                    <div class="settings-config-header">
                        <div>
                            <div>Cursor</div>
                            <div class="text-dim mono" style="margin-top:0.2rem">.cursor/mcp.json -> mcpServers.armada</div>
                        </div>
                    </div>
                    <div class="settings-config-block" style="margin:0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">HTTP</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('cursor', 'http', $el)" title="Copy Cursor HTTP config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigHttp('cursor')"></pre>
                    </div>
                    <div class="settings-config-block" style="margin:0 0.75rem 0.75rem">
                        <div class="settings-config-header">
                            <span class="text-dim">STDIO</span>
                            <button class="btn btn-sm" @click="copyMcpConfig('cursor', 'stdio', $el)" title="Copy Cursor STDIO config to clipboard">Copy</button>
                        </div>
                        <pre class="settings-config-code" x-text="getMcpConfigStdio('cursor')"></pre>
                    </div>
                </div>
            </div>

            <!-- System Paths Section -->
            <div class="settings-section" x-show="serverSettings">
                <h3 class="settings-section-title">System Paths</h3>
                <div class="detail-grid">
                    <div class="detail-field"><span class="detail-label">Data Directory</span><span class="mono" x-text="serverSettings?.dataDirectory || '-'"></span></div>
                    <div class="detail-field"><span class="detail-label">Database Path</span><span class="mono" x-text="serverSettings?.databasePath || '-'"></span></div>
                    <div class="detail-field"><span class="detail-label">Log Directory</span><span class="mono" x-text="serverSettings?.logDirectory || '-'"></span></div>
                    <div class="detail-field"><span class="detail-label">Docks Directory</span><span class="mono" x-text="serverSettings?.docksDirectory || '-'"></span></div>
                    <div class="detail-field"><span class="detail-label">Repos Directory</span><span class="mono" x-text="serverSettings?.reposDirectory || '-'"></span></div>
                </div>
            </div>

            <!-- Server Actions Section -->
            <div class="settings-section">
                <h3 class="settings-section-title">Server Actions</h3>
                <div class="settings-actions">
                    <button class="btn btn-sm" @click="healthCheck()" title="Run a health check and display the result">Health Check</button>
                    <button class="btn btn-sm" @click="backupNow()" :disabled="backupLoading" title="Create a backup ZIP of the database and download it">
                        <span x-show="!backupLoading">Backup Now</span>
                        <span x-show="backupLoading">Backing up...</span>
                    </button>
                    <button class="btn btn-danger btn-sm" @click="restoreFromBackup()" title="Restore the database from a backup ZIP file">Restore from Backup</button>
                    <button class="btn btn-danger btn-sm" @click="stopServer()" title="Shut down the admiral server process">Stop Server</button>
                    <button class="btn btn-danger btn-sm" @click="factoryReset()" title="Delete all data and reset to factory defaults">Factory Reset</button>
                    <input type="file" x-ref="restoreFileInput" accept=".zip" style="display:none" @change="handleRestoreFile($event)">
                </div>
            </div>
        </div>
