Refine feed creation workspace UX

Author: gildesmarais

frontend/src/__tests__/App.contract.test.tsx

@@ -39,7 +39,7 @@ describe('App contract', () => {
 
     render(<App />);
 
-    await screen.findByText('Generate a feed from a web page');
+    await screen.findByText('Create a feed URL.');
 
     const urlInput = screen.getByLabelText('Source URL') as HTMLInputElement;
     fireEvent.input(urlInput, { target: { value: 'https://example.com/articles' } });
@@ -51,7 +51,7 @@ describe('App contract', () => {
       expect(resultRegion).not.toBeNull();
       const resultQueries = within(resultRegion!);
 
-      expect(screen.getByText('Feed ready')).toBeInTheDocument();
+      expect(screen.getByText('Result')).toBeInTheDocument();
       expect(screen.getByText('Example Feed')).toBeInTheDocument();
       expect(resultQueries.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
       expect(resultQueries.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();

frontend/src/__tests__/App.test.tsx

@@ -86,11 +86,17 @@ describe('App', () => {
   it('renders the streamlined hero and create section', () => {
     render(<App />);
 
-    expect(screen.getByText('Turn web pages into stable feeds.')).toBeInTheDocument();
-    expect(screen.getByText('Create a feed')).toBeInTheDocument();
+    expect(screen.getByText('Create a feed URL.')).toBeInTheDocument();
+    expect(screen.getByLabelText('Source URL')).toBeInTheDocument();
     expect(screen.getByText('Run your own instance')).toBeInTheDocument();
   });
 
+  it('autofocuses the source url field', () => {
+    render(<App />);
+
+    expect(document.activeElement).toBe(screen.getByLabelText('Source URL'));
+  });
+
   it('shows inline token prompt when submitting without a token', () => {
     render(<App />);
 
@@ -99,7 +105,7 @@ describe('App', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
-    expect(screen.getByText('Save one token in this browser session to continue.')).toBeInTheDocument();
+    expect(screen.getByText('Add access token')).toBeInTheDocument();
     expect(mockConvertFeed).not.toHaveBeenCalled();
   });
 
@@ -126,7 +132,7 @@ describe('App', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Ready')).toBeInTheDocument();
+    expect(screen.getByText('Result')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Create another feed' })).toBeInTheDocument();
     expect(screen.queryByText('Run your own instance')).not.toBeInTheDocument();
 
@@ -162,24 +168,57 @@ describe('App', () => {
 
     render(<App />);
 
-    fireEvent.click(screen.getByRole('button', { name: 'Clear token' }));
+    expect(screen.getByText('Utilities')).toBeInTheDocument();
+    expect(screen.queryByText('Run your own instance')).not.toBeInTheDocument();
+    fireEvent.click(screen.getByRole('button', { name: 'Clear saved token' }));
 
     expect(mockClearToken).toHaveBeenCalled();
   });
 
-  it('saves access token from the inline prompt', async () => {
+  it('saves access token and resumes feed creation from the inline prompt', async () => {
+    render(<App />);
+
+    fireEvent.input(screen.getByLabelText('Source URL'), {
+      target: { value: 'https://example.com/articles' },
+    });
+    fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
+    const accessTokenInput = document.getElementById('access-token') as HTMLInputElement;
+    fireEvent.input(accessTokenInput, { target: { value: 'token-123' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Save and continue' }));
+
+    await waitFor(() => {
+      expect(mockSaveToken).toHaveBeenCalledWith('token-123');
+      expect(mockConvertFeed).toHaveBeenCalledWith(
+        'https://example.com/articles',
+        'ssrf_filter',
+        'token-123'
+      );
+    });
+  });
+
+  it('submits the token prompt with Enter', async () => {
     render(<App />);
 
     fireEvent.input(screen.getByLabelText('Source URL'), {
       target: { value: 'https://example.com/articles' },
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
+
     const accessTokenInput = document.getElementById('access-token') as HTMLInputElement;
     fireEvent.input(accessTokenInput, { target: { value: 'token-123' } });
-    fireEvent.click(screen.getByRole('button', { name: 'Continue' }));
+    fireEvent.keyDown(accessTokenInput, { key: 'Enter' });
 
     await waitFor(() => {
       expect(mockSaveToken).toHaveBeenCalledWith('token-123');
     });
   });
+
+  it('builds a bookmarklet that returns to the current frontend entry', () => {
+    window.history.replaceState({}, '', 'http://localhost:3000/frontend/index.html');
+    render(<App />);
+
+    const bookmarklet = screen.getByRole('link', { name: 'Convert page to feed' });
+    expect(bookmarklet.getAttribute('href')).toContain('/frontend/index.html?url=');
+    expect(bookmarklet.getAttribute('href')).not.toContain('%27+encodeURIComponent');
+  });
 });

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -25,8 +25,11 @@ describe('ResultDisplay', () => {
   it('renders utility actions and preview state', async () => {
     render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
 
-    expect(screen.getByText('Ready')).toBeInTheDocument();
+    expect(screen.getByText('Result')).toBeInTheDocument();
     expect(screen.getByText('Test Feed')).toBeInTheDocument();
+    expect(
+      screen.getByText('Copy the feed URL, then drop it into the reader or workflow you use.')
+    ).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();
 

frontend/src/components/App.tsx

@@ -7,6 +7,7 @@ import { useFeedConversion } from '../hooks/useFeedConversion';
 import { useStrategies } from '../hooks/useStrategies';
 
 const EMPTY_FEED_ERRORS = { url: '', form: '' };
+const DEFAULT_FEED_CREATION = { enabled: true, access_token_required: true };
 
 function BrandLockup() {
   return (
@@ -42,6 +43,7 @@ export function App() {
   const [showTokenPrompt, setShowTokenPrompt] = useState(false);
   const [tokenDraft, setTokenDraft] = useState('');
   const [tokenError, setTokenError] = useState('');
+  const [focusCreateComposerKey, setFocusCreateComposerKey] = useState(0);
 
   useEffect(() => {
     if (typeof window === 'undefined') return;
@@ -61,7 +63,7 @@ export function App() {
     if (!hasCurrentStrategy) setFeedFormData((prev) => ({ ...prev, strategy: nextStrategy }));
   }, [strategies, feedFormData.strategy]);
 
-  const feedCreation = metadata?.instance.feed_creation ?? { enabled: true, access_token_required: true };
+  const feedCreation = metadata?.instance.feed_creation ?? DEFAULT_FEED_CREATION;
 
   const setFeedField = (key: 'url' | 'strategy', value: string) => {
     setFeedFormData((prev) => ({ ...prev, [key]: value }));
@@ -73,60 +75,68 @@ export function App() {
   };
 
   const strategyHint = (strategy: Strategy) => {
-    if (strategy.id === 'ssrf_filter') return 'Direct fetch for standard documents and static pages.';
-    if (strategy.id === 'browserless')
-      return 'Rendered browser pass for JavaScript-heavy pages, SPAs, and delayed content.';
+    if (strategy.id === 'ssrf_filter') return 'Start here for most pages.';
+    if (strategy.id === 'browserless') return 'Use this if the page loads content with JavaScript.';
     return strategy.name;
   };
 
-  const handleFeedSubmit = async (event: Event) => {
-    event.preventDefault();
-    setFeedFieldErrors(EMPTY_FEED_ERRORS);
-
+  const attemptFeedCreation = async (accessToken: string) => {
     if (!feedFormData.url.trim()) {
       setFeedFieldErrors({ ...EMPTY_FEED_ERRORS, url: 'Source URL is required.' });
-      return;
+      return false;
     }
 
     if (!feedCreation.enabled) {
       setFeedFieldErrors({
         ...EMPTY_FEED_ERRORS,
         form: 'Custom feed generation is disabled for this instance.',
       });
-      return;
+      return false;
     }
 
-    if (feedCreation.access_token_required && !hasToken) {
+    if (feedCreation.access_token_required && !accessToken) {
       setShowTokenPrompt(true);
-      setTokenError('Add an access token to create a custom feed.');
-      return;
+      setTokenError('Paste an access token to keep going.');
+      return false;
     }
 
     try {
-      await convertFeed(feedFormData.url, feedFormData.strategy, token ?? '');
+      await convertFeed(feedFormData.url, feedFormData.strategy, accessToken);
+      setShowTokenPrompt(false);
+      setTokenError('');
+      return true;
     } catch (submitError) {
       const message = submitError instanceof Error ? submitError.message : 'Unable to start feed generation.';
       if (message.toLowerCase().includes('url')) {
         setFeedFieldErrors({ ...EMPTY_FEED_ERRORS, url: message });
       } else {
         setFeedFieldErrors({ ...EMPTY_FEED_ERRORS, form: message });
       }
+      return false;
     }
   };
 
+  const handleFeedSubmit = async (event: Event) => {
+    event.preventDefault();
+    setFeedFieldErrors(EMPTY_FEED_ERRORS);
+    await attemptFeedCreation(token ?? '');
+  };
+
   const handleSaveToken = async () => {
     try {
-      await saveToken(tokenDraft);
+      const normalizedToken = tokenDraft.trim();
+      await saveToken(normalizedToken);
       setTokenError('');
-      setShowTokenPrompt(false);
-      setTokenDraft('');
+      const created = await attemptFeedCreation(normalizedToken);
+      if (created) setTokenDraft('');
     } catch (error) {
       setTokenError(error instanceof Error ? error.message : 'Unable to save access token.');
     }
   };
 
   const handleCreateAnother = () => {
     clearResult();
+    setFocusCreateComposerKey((current) => current + 1);
   };
 
   if (metadataLoading || tokenLoading) {
@@ -152,7 +162,7 @@ export function App() {
         </div>
         {!result && (
           <div class="workspace-frame__titleblock">
-            <h1>Turn web pages into stable feeds.</h1>
+            <h1>Create a feed URL.</h1>
           </div>
         )}
       </header>
@@ -167,43 +177,44 @@ export function App() {
       {result ? (
         <ResultDisplay result={result} onCreateAnother={handleCreateAnother} />
       ) : (
-        <CreateFeedPanel
-          feedFormData={feedFormData}
-          feedFieldErrors={feedFieldErrors}
-          conversionError={conversionError}
-          isConverting={isConverting}
-          strategies={strategies}
-          strategiesLoading={strategiesLoading}
-          strategiesError={strategiesError}
-          feedCreationEnabled={feedCreation.enabled}
-          accessTokenRequired={feedCreation.access_token_required}
-          hasAccessToken={hasToken}
-          tokenDraft={tokenDraft}
-          tokenError={tokenError}
-          showTokenPrompt={showTokenPrompt}
-          onFeedSubmit={handleFeedSubmit}
-          onFeedFieldChange={setFeedField}
-          onTokenDraftChange={(value) => {
-            setTokenDraft(value);
-            setTokenError('');
-          }}
-          onSaveToken={handleSaveToken}
-          onCancelTokenPrompt={() => {
-            setShowTokenPrompt(false);
-            setTokenError('');
-          }}
-          strategyHint={strategyHint}
-        />
-      )}
-
-      {!result && (
-        <InstanceInfo
-          hasAccessToken={hasToken}
-          onClearToken={() => {
-            clearToken();
-            setShowTokenPrompt(false);
-          }}
-        />
+        <div class="workspace-grid">
+          <CreateFeedPanel
+            focusComposerKey={focusCreateComposerKey}
+            feedFormData={feedFormData}
+            feedFieldErrors={feedFieldErrors}
+            conversionError={conversionError}
+            isConverting={isConverting}
+            strategies={strategies}
+            strategiesLoading={strategiesLoading}
+            strategiesError={strategiesError}
+            feedCreationEnabled={feedCreation.enabled}
+            accessTokenRequired={feedCreation.access_token_required}
+            hasAccessToken={hasToken}
+            tokenDraft={tokenDraft}
+            tokenError={tokenError}
+            showTokenPrompt={showTokenPrompt}
+            onFeedSubmit={handleFeedSubmit}
+            onFeedFieldChange={setFeedField}
+            onTokenDraftChange={(value) => {
+              setTokenDraft(value);
+              setTokenError('');
+            }}
+            onSaveToken={handleSaveToken}
+            onCancelTokenPrompt={() => {
+              setShowTokenPrompt(false);
+              setTokenError('');
+            }}
+            strategyHint={strategyHint}
+          />
+
+          <InstanceInfo
+            hasAccessToken={hasToken}
+            onClearToken={() => {
+              clearToken();
+              setShowTokenPrompt(false);
+            }}
+          />
+        </div>
       )}
     </section>
   );