fix(vscode): prevent config panel render loop and refine step status styles (#341)

* feat: adjust provider configuration panel component logic and dependencies.

* style: modified the display logic for step statuses in the configuration view.

extensions/vscode/src/webview/ConfigPanelApp.tsx

@@ -1,5 +1,5 @@
 import { I18nContext, resolveLocale } from './I18nProvider';
-import { useEffect, useReducer } from 'preact/hooks';
+import { useCallback, useEffect, useReducer } from 'preact/hooks';
 import { bridge } from './bridge';
 import { ConfigView } from './views/ConfigView';
 import { configPanelInitialState, configPanelReducer } from './configStore';
@@ -12,6 +12,7 @@ function runEnvCheck(dispatch: (action: { type: 'checkingEnv' }) => void): void
 
 export function ConfigPanelApp() {
   const [state, dispatch] = useReducer(configPanelReducer, configPanelInitialState);
+  const clearConnTest = useCallback(() => dispatch({ type: 'clearConnTest' }), []);
 
   useEffect(() => {
     const unsub = bridge.onMessage((msg) => dispatch(msg));
@@ -59,7 +60,7 @@ export function ConfigPanelApp() {
         onCopy={(text) => bridge.post({ type: 'copyToClipboard', text })}
         onTest={(entries) => { dispatch({ type: 'testingConn' }); bridge.post({ type: 'testConnection', entries }); }}
         onSave={(entries) => bridge.post({ type: 'setConfigBatch', entries })}
-        onClearConnTest={() => dispatch({ type: 'clearConnTest' })}
+        onClearConnTest={clearConnTest}
         onDeleteCustomProvider={(name) => bridge.post({ type: 'deleteCustomProvider', name })}
         onActivateCustomProvider={(name) => bridge.post({ type: 'activateCustomProvider', name })}
         onClose={() => bridge.post({ type: 'closeConfigPanel' })}

extensions/vscode/src/webview/views/ConfigView.tsx

@@ -68,17 +68,17 @@ export function ConfigView({
     setTab(next.tab);
     setCustomView(next.customView);
     setCustomSelection(next.customSelection);
-  }, [panelFocus, config, onClearConnTest]);
+  }, [panelFocus, config]);
 
   const wide = layout === 'panel';
   const t = useT();
   const stepper = (
     <div class="config-stepper">
-      <div class={`config-step-pill${step === 1 ? ' active' : ''}${cliStatus === 'installed' ? ' done' : ''}`}>
+      <div class={`config-step-pill${step === 1 ? ' done' : ''}`}>
         <span class="config-step-num">1</span>
         <span>{t('view.config.step1')}</span>
       </div>
-      <div class={`config-step-pill${step === 2 ? ' active' : ''}`}>
+      <div class={`config-step-pill${step === 2 ? ' done' : ''}`}>
         <span class="config-step-num">2</span>
         <span>{t('view.config.step2')}</span>
       </div>

extensions/vscode/src/webview/views/IdleView.tsx

@@ -113,8 +113,6 @@ export function IdleView({ gitState, modeFiles, filesLoading, configured, onMode
 
       {configured && (
         <div class="setup-secondary">
-          <button type="button" class="link-btn" onClick={onOpenCustomProviders}>{t('view.idle.manageCustom')}</button>
-          <span class="setup-secondary-sep">·</span>
           <button type="button" class="link-btn" onClick={onOpenConfig}>{t('view.idle.modelConfig')}</button>
         </div>
       )}