optimize save config

ui/src/ui/app-render.ts

@@ -633,7 +633,31 @@ export function renderApp(state: AppViewState) {
                 overviewLogLines: state.overviewLogLines,
                 showGatewayToken: state.overviewShowGatewayToken,
                 showGatewayPassword: state.overviewShowGatewayPassword,
-                onSettingsChange: (next) => state.applySettings(next),
+                vncConfigDirty: state.vncConfigDirty,
+                onSettingsChange: (next) => {
+                  // Only mark dirty if VNC fields changed
+                  const vncChanged =
+                    next.vncWsUrl !== state.settings.vncWsUrl ||
+                    next.vncPassword !== state.settings.vncPassword ||
+                    next.vncTarget !== state.settings.vncTarget;
+
+                  if (vncChanged) {
+                    state.vncConfigDirty = true;
+                  }
+
+                  // For VNC fields, we update local state but don't persist immediately
+                  // This allows the Save button to be the trigger for persistence
+                  // For other fields, we persist immediately as before
+                  if (vncChanged) {
+                    state.settings = next;
+                  } else {
+                    state.applySettings(next);
+                  }
+                },
+                onSaveVncConfig: () => {
+                  state.applySettings(state.settings);
+                  state.vncConfigDirty = false;
+                },
                 onPasswordChange: (next) => (state.password = next),
                 onSessionKeyChange: (next) => {
                   state.sessionKey = next;

ui/src/ui/app-view-state.ts

@@ -298,6 +298,7 @@ export type AppViewState = {
     streamMode: boolean;
     overviewShowGatewayToken: boolean;
     overviewShowGatewayPassword: boolean;
+    vncConfigDirty: boolean;
     overviewLogLines: string[];
     overviewLogCursor: number;
     client: GatewayBrowserClient | null;

ui/src/ui/views/overview.ts

@@ -48,7 +48,9 @@ export type OverviewProps = {
   overviewLogLines: string[];
   showGatewayToken: boolean;
   showGatewayPassword: boolean;
+  vncConfigDirty?: boolean;
   onSettingsChange: (next: UiSettings) => void;
+  onSaveVncConfig?: () => void;
   onPasswordChange: (next: string) => void;
   onSessionKeyChange: (next: string) => void;
   onToggleGatewayTokenVisibility: () => void;
@@ -325,7 +327,7 @@ export function renderOverview(props: OverviewProps) {
         <div class="card-title">Remote Desktop</div>
         <div class="card-sub">Configure VNC connection details</div>
         <div class="ov-access-grid" style="margin-top: 16px;">
-          <label class="field ov-access-grid__full">
+          <label class="field">
             <span>WebSocket URL</span>
             <input
               .value=${props.settings.vncWsUrl ?? ""}
@@ -336,7 +338,7 @@ export function renderOverview(props: OverviewProps) {
               placeholder="ws://localhost:8081"
             />
           </label>
-           <label class="field ov-access-grid__full">
+           <label class="field">
             <span>Target (Host:Port)</span>
             <input
               .value=${props.settings.vncTarget ?? ""}
@@ -360,6 +362,24 @@ export function renderOverview(props: OverviewProps) {
             />
           </label>
         </div>
+        <div style="margin-top: 16px; display: flex; justify-content: flex-start;">
+          <button 
+            class="btn primary" 
+            style=${
+              props.vncConfigDirty
+                ? "background-color: #2196f3; border-color: #2196f3;"
+                : "background-color: #666; border-color: #666; cursor: default; opacity: 0.8;"
+            }
+            @click=${() => {
+              if (props.vncConfigDirty && props.onSaveVncConfig) {
+                props.onSaveVncConfig();
+              }
+            }}
+            ?disabled=${!props.vncConfigDirty}
+          >
+            ${props.vncConfigDirty ? "Save Config" : "Saved"}
+          </button>
+        </div>
       </div>
 
       <div class="card">