fix(frontend): expose strategy selection reliably in member view

- useStrategies: init isLoading as !!token to prevent empty-select flash on first render
- Strategy select always rendered (disabled + Loading… placeholder while fetching), no layout jump
- Improved hint copy: "Direct fetch — works for most sites. Fast and safe." / "Headless browser — use for JavaScript-rendered pages (React, Angular, SPAs)."

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: gildesmarais

frontend/src/components/App.tsx

@@ -62,9 +62,9 @@ export function App() {
   };
 
   const strategyHint = (strategy: Strategy) => {
-    if (strategy.id === 'ssrf_filter') return 'Recommended - safe and secure';
-    if (strategy.id === 'browserless') return 'Great for pages that rely on JavaScript';
-    return `Strategy: ${strategy.name}`;
+    if (strategy.id === 'ssrf_filter') return 'Direct fetch — works for most sites. Fast and safe.';
+    if (strategy.id === 'browserless') return 'Headless browser — use for JavaScript-rendered pages (React, Angular, SPAs).';
+    return strategy.name;
   };
 
   const handleAuthSubmit = async (event: Event) => {

frontend/src/components/AppPanels.tsx

@@ -260,30 +260,28 @@ export function MemberConvertPanel({
 
         <div class="field">
           <label for="strategy" class="label">Strategy</label>
-          {strategiesError && (
-            <div class="notice notice--error" role="alert">
-              <p>Failed to load strategies: {strategiesError}</p>
-            </div>
-          )}
-          {strategiesLoading ? (
-            <p>Loading strategies...</p>
-          ) : (
-            <>
-              <select
-                id="strategy"
-                name="strategy"
-                class="input"
-                value={feedFormData.strategy}
-                onChange={(e) => onFeedFieldChange('strategy', (e.target as HTMLSelectElement).value)}
-              >
-                {strategies.map((strategy) => (
+          <select
+            id="strategy"
+            name="strategy"
+            class="input"
+            value={feedFormData.strategy}
+            disabled={strategiesLoading}
+            onChange={(e) => onFeedFieldChange('strategy', (e.target as HTMLSelectElement).value)}
+          >
+            {strategiesLoading
+              ? <option value="">Loading…</option>
+              : strategies.map((strategy) => (
                   <option key={strategy.id} value={strategy.id}>
                     {strategy.display_name}
                   </option>
-                ))}
-              </select>
-              {selectedStrategy && <p class="field-help">{strategyHint(selectedStrategy)}</p>}
-            </>
+                ))
+            }
+          </select>
+          {strategiesError && (
+            <p class="field-error">{strategiesError}</p>
+          )}
+          {selectedStrategy && !strategiesLoading && (
+            <p class="field-help">{strategyHint(selectedStrategy)}</p>
           )}
         </div>
 

frontend/src/hooks/useStrategies.ts

@@ -1,23 +1,18 @@
 import { useState, useEffect } from 'preact/hooks';
 import { listStrategies } from '../api/generated';
 import { apiClient, bearerHeaders } from '../api/client';
-
-interface Strategy {
-  id: string;
-  name: string;
-  display_name: string;
-}
+import type { StrategyRecord } from '../api/contracts';
 
 interface StrategiesState {
-  strategies: Strategy[];
+  strategies: StrategyRecord[];
   isLoading: boolean;
   error: string | null;
 }
 
 export function useStrategies(token: string | null) {
   const [state, setState] = useState<StrategiesState>({
     strategies: [],
-    isLoading: false,
+    isLoading: !!token,
     error: null,
   });
 
@@ -39,11 +34,9 @@ export function useStrategies(token: string | null) {
         responseStyle: 'data',
       });
 
-      const data = response as { success?: boolean; data?: { strategies?: Strategy[] } };
-
-      if (data.success && data.data?.strategies) {
+      if (response?.success && response.data?.strategies) {
         setState({
-          strategies: data.data.strategies,
+          strategies: response.data.strategies,
           isLoading: false,
           error: null,
         });