feat(ui): deep-link auth nudge to the Security section + flash it

"Open Settings" from the install panel now lands on the Security section
instead of the top of Settings. A `pendingSettingsSection` store signal is
set to 'security' before navigating; SettingsPage scrolls that section into
view and briefly flashes a ring around it, then clears the signal.

Also tighten the Disable-authentication help text to two lines.

Claude-Session: https://claude.ai/code/session_01Baan9JmzR43uxxRUh7CAMF
Signed-off-by: Mohammod Al Amin Ashik <maa.ashik00@gmail.com>

Author: its-mash

apps/desktop/src/features/settings/SettingsPage.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useRef } from 'react';
 import { invoke } from '@tauri-apps/api/core';
 import {
   Card,
@@ -33,7 +33,13 @@ import {
   AlertCircle,
   ShieldOff,
 } from 'lucide-react';
-import { useAppStore, useTheme, useAnalyticsEnabled } from '@/stores';
+import {
+  useAppStore,
+  useTheme,
+  useAnalyticsEnabled,
+  usePendingSettingsSection,
+  useSetPendingSettingsSection,
+} from '@/stores';
 import { UpdateChecker } from './UpdateChecker';
 import { useGatewayControl } from '@/features/gateway/useGatewayControl';
 import { CONTRIBUTE, openExternal } from '@/lib/contribute';
@@ -60,6 +66,22 @@ export function SettingsPage() {
   const { toasts, success, error } = useToast();
   const gatewayControl = useGatewayControl();
 
+  // Deep-link: when another surface routes here for a specific section, scroll
+  // it into view and briefly flash it so the user lands on the right control.
+  const pendingSection = usePendingSettingsSection();
+  const clearPendingSection = useSetPendingSettingsSection();
+  const securityRef = useRef<HTMLDivElement>(null);
+  const [flashSecurity, setFlashSecurity] = useState(false);
+
+  useEffect(() => {
+    if (pendingSection !== 'security' || !securityRef.current) return;
+    securityRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+    setFlashSecurity(true);
+    clearPendingSection(null);
+    const t = setTimeout(() => setFlashSecurity(false), 2200);
+    return () => clearTimeout(t);
+  }, [pendingSection, clearPendingSection]);
+
   // Startup settings state
   const [startupSettings, setStartupSettings] = useState<StartupSettings>({
     autoLaunch: false,
@@ -626,6 +648,15 @@ export function SettingsPage() {
         </Card>
 
         {/* Security Section */}
+        <div
+          ref={securityRef}
+          id="settings-security"
+          className={
+            flashSecurity
+              ? 'rounded-xl ring-2 ring-primary-500 ring-offset-2 ring-offset-[rgb(var(--background))] transition-shadow duration-500'
+              : 'rounded-xl ring-0 transition-shadow duration-500'
+          }
+        >
         <Card data-testid="settings-security-section">
           <CardHeader>
             <CardTitle className="flex items-center gap-2">
@@ -643,10 +674,8 @@ export function SettingsPage() {
                 <div>
                   <label className="text-sm font-medium">Disable authentication</label>
                   <p className="mt-1 text-xs text-[rgb(var(--muted))]">
-                    Let local apps connect to the gateway with no access key — just the URL and a
-                    workspace header. Makes one-click per-workspace setup trivial. The gateway only
-                    listens on localhost, but any app on this machine can then reach it. Leave on
-                    unless you want the simplest setup.
+                    Let local apps connect with no access key — just the URL and a workspace header.
+                    Quickest setup, but any app on this machine can then reach the gateway.
                   </p>
                 </div>
               </div>
@@ -659,6 +688,7 @@ export function SettingsPage() {
             </div>
           </CardContent>
         </Card>
+        </div>
 
         {/* Appearance Section */}
         <Card>

apps/desktop/src/features/workspaces/WorkspaceInstallPanel.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useState } from 'react';
 import { Check, Copy, Download, Loader2, ShieldCheck, ShieldOff, AlertCircle } from 'lucide-react';
 import { Button } from '@mcpmux/ui';
 import { getGatewayStatus } from '@/lib/api/gateway';
-import { useNavigateTo } from '@/stores';
+import { useNavigateTo, useSetPendingSettingsSection } from '@/stores';
 import {
   generateWorkspaceConfigSnippet,
   getGatewayAuthDisabled,
@@ -63,6 +63,7 @@ export function WorkspaceInstallPanel({ workspaceRoot }: { workspaceRoot: string
   const [copiedId, setCopiedId] = useState<string | null>(null);
   const [error, setError] = useState<string | null>(null);
   const navigateTo = useNavigateTo();
+  const setPendingSettingsSection = useSetPendingSettingsSection();
 
   useEffect(() => {
     let cancelled = false;
@@ -171,7 +172,10 @@ export function WorkspaceInstallPanel({ workspaceRoot }: { workspaceRoot: string
               variant="secondary"
               size="sm"
               className="mt-2 h-7 text-xs"
-              onClick={() => navigateTo('settings')}
+              onClick={() => {
+                setPendingSettingsSection('security');
+                navigateTo('settings');
+              }}
               data-testid="workspace-install-open-auth-settings"
             >
               <ShieldOff className="mr-1.5 h-3 w-3" />

apps/desktop/src/stores/appStore.ts

@@ -8,6 +8,7 @@ const initialState: AppState = {
   viewSpaceId: null,
   activeNav: 'home',
   pendingClientId: null,
+  pendingSettingsSection: null,
   sidebarCollapsed: false,
   theme: 'system',
   analyticsEnabled: true,
@@ -78,6 +79,11 @@ export const useAppStore = create<AppStore>()(
           state.pendingClientId = id;
         }),
 
+      setPendingSettingsSection: (section) =>
+        set((state) => {
+          state.pendingSettingsSection = section;
+        }),
+
       // UI
       toggleSidebar: () =>
         set((state) => {

apps/desktop/src/stores/selectors.ts

@@ -8,6 +8,10 @@ export const useActiveNav = () => useAppStore((state) => state.activeNav);
 export const useNavigateTo = () => useAppStore((state) => state.navigateTo);
 export const usePendingClientId = () => useAppStore((state) => state.pendingClientId);
 export const useSetPendingClientId = () => useAppStore((state) => state.setPendingClientId);
+export const usePendingSettingsSection = () =>
+  useAppStore((state) => state.pendingSettingsSection);
+export const useSetPendingSettingsSection = () =>
+  useAppStore((state) => state.setPendingSettingsSection);
 export const useTheme = () => useAppStore((state) => state.theme);
 export const useSidebarCollapsed = () => useAppStore((state) => state.sidebarCollapsed);
 export const useAnalyticsEnabled = () => useAppStore((state) => state.analyticsEnabled);

apps/desktop/src/stores/types.ts

@@ -26,6 +26,8 @@ export interface AppState {
   activeNav: NavItem;
   /** Client ID to auto-select when navigating to Clients page */
   pendingClientId: string | null;
+  /** Section to scroll to + flash when navigating to Settings (e.g. 'security'). */
+  pendingSettingsSection: string | null;
 
   // UI state
   sidebarCollapsed: boolean;
@@ -50,6 +52,7 @@ export interface AppActions {
   // Navigation
   navigateTo: (nav: NavItem) => void;
   setPendingClientId: (id: string | null) => void;
+  setPendingSettingsSection: (section: string | null) => void;
 
   // UI
   toggleSidebar: () => void;

tests/ts/components/WorkspaceInstallPanel.test.tsx

@@ -21,13 +21,15 @@ const {
   getAuthMock,
   gatewayStatusMock,
   navigateMock,
+  setSectionMock,
 } = vi.hoisted(() => ({
   listClientsMock: vi.fn(),
   installMock: vi.fn(),
   snippetMock: vi.fn(),
   getAuthMock: vi.fn(),
   gatewayStatusMock: vi.fn(),
   navigateMock: vi.fn(),
+  setSectionMock: vi.fn(),
 }));
 
 vi.mock('@/lib/api/workspaceInstall', () => ({
@@ -43,6 +45,7 @@ vi.mock('@/lib/api/gateway', () => ({
 
 vi.mock('@/stores', () => ({
   useNavigateTo: () => navigateMock,
+  useSetPendingSettingsSection: () => setSectionMock,
 }));
 
 import { WorkspaceInstallPanel } from '@/features/workspaces/WorkspaceInstallPanel';
@@ -65,6 +68,7 @@ describe('WorkspaceInstallPanel', () => {
     snippetMock.mockReset();
     getAuthMock.mockReset().mockResolvedValue(true);
     navigateMock.mockReset();
+    setSectionMock.mockReset();
     gatewayStatusMock
       .mockReset()
       .mockResolvedValue({ running: true, url: 'http://localhost:45818' });
@@ -134,6 +138,7 @@ describe('WorkspaceInstallPanel', () => {
     // flipping it inline.
     const openSettings = await screen.findByTestId('workspace-install-open-auth-settings');
     await user.click(openSettings);
+    expect(setSectionMock).toHaveBeenCalledWith('security');
     expect(navigateMock).toHaveBeenCalledWith('settings');
   });