diff --git a/frontend/e2e/smoke.spec.ts b/frontend/e2e/smoke.spec.ts
index 7111c2e4..0e8b731c 100644
--- a/frontend/e2e/smoke.spec.ts
+++ b/frontend/e2e/smoke.spec.ts
@@ -56,7 +56,7 @@ test.describe('frontend smoke', () => {
     await page.getByLabel('Page URL').fill('https://example.com/articles');
     await page.getByRole('button', { name: 'Generate feed URL' }).click();
 
-    await expect(page.getByRole('heading', { name: 'Add access token' })).toBeVisible();
+    await expect(page.getByRole('heading', { name: 'Enter access token' })).toBeVisible();
     await expect(page.getByRole('textbox', { name: 'Access token' })).toBeVisible();
     await expect(page.getByRole('button', { name: 'Save and continue' })).toBeVisible();
     await expect(page.getByRole('button', { name: 'Back' })).toBeVisible();
diff --git a/frontend/src/__tests__/App.contract.test.tsx b/frontend/src/__tests__/App.contract.test.tsx
index 8a3f7e5c..79150dce 100644
--- a/frontend/src/__tests__/App.contract.test.tsx
+++ b/frontend/src/__tests__/App.contract.test.tsx
@@ -8,7 +8,7 @@ describe('App contract', () => {
   const token = 'contract-token';
 
   const authenticate = () => {
-    window.localStorage.setItem('html2rss_access_token', token);
+    globalThis.localStorage.setItem('html2rss_access_token', token);
   };
 
   it('shows feed result when API responds with success', async () => {
@@ -64,7 +64,7 @@ describe('App contract', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
     await waitFor(() => {
-      expect(screen.getByText('Your feed is ready')).toBeInTheDocument();
+      expect(screen.getByText('Feed ready')).toBeInTheDocument();
       expect(screen.getByText('Example Feed')).toBeInTheDocument();
       expect(screen.getByLabelText('Feed URL')).toBeInTheDocument();
       expect(screen.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
@@ -159,8 +159,8 @@ describe('App contract', () => {
 
     await screen.findByText('Access token was rejected. Paste a valid token to continue.');
 
-    expect(screen.getByText('Add access token')).toBeInTheDocument();
-    expect(screen.queryByText('Feed generation failed')).not.toBeInTheDocument();
-    expect(window.localStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(screen.getByText('Enter access token')).toBeInTheDocument();
+    expect(screen.queryByText('Could not create feed link')).not.toBeInTheDocument();
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBeNull();
   });
 });
diff --git a/frontend/src/__tests__/App.test.tsx b/frontend/src/__tests__/App.test.tsx
index 3383146a..5f58cfa3 100644
--- a/frontend/src/__tests__/App.test.tsx
+++ b/frontend/src/__tests__/App.test.tsx
@@ -1,6 +1,5 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/preact';
-import { h } from 'preact';
 import { App } from '../components/App';
 
 vi.mock('../hooks/useAccessToken', () => ({
@@ -35,18 +34,19 @@ describe('App', () => {
   const mockConvertFeed = vi.fn();
   const mockClearConversionError = vi.fn();
   const mockClearResult = vi.fn();
+  const mockRetryReadinessCheck = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
-    window.history.replaceState({}, '', 'http://localhost:3000/');
+    globalThis.history.replaceState({}, '', 'http://localhost:3000/');
 
     mockUseAccessToken.mockReturnValue({
-      token: null,
+      token: undefined,
       hasToken: false,
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     mockUseApiMetadata.mockReturnValue({
@@ -65,16 +65,17 @@ describe('App', () => {
         },
       },
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     mockUseFeedConversion.mockReturnValue({
       isConverting: false,
-      result: null,
-      error: null,
+      result: undefined,
+      error: undefined,
       convertFeed: mockConvertFeed,
       clearError: mockClearConversionError,
       clearResult: mockClearResult,
+      retryReadinessCheck: mockRetryReadinessCheck,
     });
 
     mockUseStrategies.mockReturnValue({
@@ -83,7 +84,7 @@ describe('App', () => {
         { id: 'browserless', name: 'browserless', display_name: 'JavaScript pages (recommended)' },
       ],
       isLoading: false,
-      error: null,
+      error: undefined,
     });
   });
 
@@ -127,7 +128,7 @@ describe('App', () => {
     mockUseStrategies.mockReturnValue({
       strategies: [{ id: 'faraday', name: 'faraday', display_name: 'Default' }],
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     render(<App />);
@@ -144,9 +145,13 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
-    window.history.replaceState({}, '', 'http://localhost:3000/?url=https%3A%2F%2Fexample.com%2Farticles');
+    globalThis.history.replaceState(
+      {},
+      '',
+      'http://localhost:3000/?url=https%3A%2F%2Fexample.com%2Farticles'
+    );
 
     render(<App />);
 
@@ -163,15 +168,15 @@ describe('App', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
-    expect(screen.getByText('Add access token')).toBeInTheDocument();
+    expect(screen.getByText('Enter access token')).toBeInTheDocument();
     expect(screen.getByLabelText('Page URL')).toBeDisabled();
     expect(screen.getByRole('combobox')).toBeDisabled();
     expect(screen.queryByRole('button', { name: 'More' })).not.toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Set up your own instance with Docker.' })).toBeInTheDocument();
-    expect(screen.getByText('This instance needs an access token.')).toBeInTheDocument();
+    expect(screen.getByText('Required by this instance.')).toBeInTheDocument();
     expect(screen.queryByText('Paste an access token to keep going.')).not.toBeInTheDocument();
     await waitFor(() => {
-      expect(document.activeElement).toBe(document.getElementById('access-token'));
+      expect(document.activeElement).toBe(document.querySelector('#access-token'));
     });
     expect(mockConvertFeed).not.toHaveBeenCalled();
   });
@@ -199,7 +204,7 @@ describe('App', () => {
         },
       },
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     render(<App />);
@@ -209,7 +214,7 @@ describe('App', () => {
       'href',
       '/microsoft.com/azure-products.rss'
     );
-    expect(screen.getByText('Custom feed generation is disabled for this instance.')).toBeInTheDocument();
+    expect(screen.getByText('Feed creation is disabled on this instance.')).toBeInTheDocument();
   });
 
   it('renders the result panel when a feed is available', async () => {
@@ -230,12 +235,14 @@ describe('App', () => {
           error: 'Preview unavailable right now.',
           isLoading: false,
         },
-        retry: null,
+        readinessPhase: 'preview_unavailable',
+        retry: undefined,
       },
-      error: null,
+      error: undefined,
       convertFeed: mockConvertFeed,
       clearError: mockClearConversionError,
       clearResult: mockClearResult,
+      retryReadinessCheck: mockRetryReadinessCheck,
     });
 
     render(<App />);
@@ -249,35 +256,35 @@ describe('App', () => {
   it('surfaces conversion errors to the user', () => {
     mockUseFeedConversion.mockReturnValue({
       isConverting: false,
-      result: null,
+      result: undefined,
       error: 'Access denied',
       convertFeed: mockConvertFeed,
       clearError: mockClearConversionError,
       clearResult: mockClearResult,
+      retryReadinessCheck: mockRetryReadinessCheck,
     });
 
     render(<App />);
 
-    expect(screen.getByText('Feed generation failed')).toBeInTheDocument();
+    expect(screen.getByText('Could not create feed link')).toBeInTheDocument();
     expect(screen.getByText('Access denied')).toBeInTheDocument();
   });
 
   it('shows an explicit loading notice while feed creation is still resolving preview state', () => {
     mockUseFeedConversion.mockReturnValue({
       isConverting: true,
-      result: null,
-      error: null,
+      result: undefined,
+      error: undefined,
       convertFeed: mockConvertFeed,
       clearError: mockClearConversionError,
       clearResult: mockClearResult,
+      retryReadinessCheck: mockRetryReadinessCheck,
     });
 
     render(<App />);
 
-    expect(screen.getByText('Preparing feed')).toBeInTheDocument();
-    expect(
-      screen.getByText('Creating the feed now. The result appears first, then preview loading continues.')
-    ).toBeInTheDocument();
+    expect(screen.getByText('Creating feed link')).toBeInTheDocument();
+    expect(screen.getByText('Checking readiness now.')).toBeInTheDocument();
   });
 
   it('clears stored token from instance info', () => {
@@ -287,7 +294,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     render(<App />);
@@ -305,18 +312,18 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
 
     render(<App />);
 
     fireEvent.click(screen.getByRole('button', { name: 'More' }));
 
-    const utilityItems = Array.from(
-      screen
+    const utilityItems = [
+      ...screen
         .getByLabelText('Utilities')
-        .querySelectorAll('.utility-strip__items > a, .utility-strip__items > button')
-    ).map((element) => element.textContent);
+        .querySelectorAll('.utility-strip__items > a, .utility-strip__items > button'),
+    ].map((element) => element.textContent);
 
     expect(utilityItems).toEqual([
       'Try included feeds',
@@ -335,7 +342,7 @@ describe('App', () => {
       target: { value: 'https://example.com/articles' },
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
-    const accessTokenInput = document.getElementById('access-token') as HTMLInputElement;
+    const accessTokenInput = document.querySelector('#access-token') as HTMLInputElement;
     fireEvent.input(accessTokenInput, { target: { value: 'token-123' } });
     fireEvent.click(screen.getByRole('button', { name: 'Save and continue' }));
 
@@ -352,7 +359,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
     mockConvertFeed.mockRejectedValueOnce(new Error('Unauthorized'));
 
@@ -364,7 +371,7 @@ describe('App', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
     await waitFor(() => {
-      expect(screen.getByText('Add access token')).toBeInTheDocument();
+      expect(screen.getByText('Enter access token')).toBeInTheDocument();
       expect(
         screen.getByText('Access token was rejected. Paste a valid token to continue.')
       ).toBeInTheDocument();
@@ -380,7 +387,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
     mockConvertFeed.mockRejectedValueOnce(new Error('Unauthorized'));
 
@@ -394,7 +401,7 @@ describe('App', () => {
     await screen.findByText('Access token was rejected. Paste a valid token to continue.');
     fireEvent.click(screen.getByRole('button', { name: 'Back' }));
 
-    expect(screen.queryByText('Feed generation failed')).not.toBeInTheDocument();
+    expect(screen.queryByText('Could not create feed link')).not.toBeInTheDocument();
     expect(screen.queryByText('Unauthorized')).not.toBeInTheDocument();
   });
 
@@ -406,7 +413,7 @@ describe('App', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
-    const accessTokenInput = document.getElementById('access-token') as HTMLInputElement;
+    const accessTokenInput = document.querySelector('#access-token') as HTMLInputElement;
     fireEvent.input(accessTokenInput, { target: { value: 'token-123' } });
     fireEvent.keyDown(accessTokenInput, { key: 'Enter' });
 
@@ -416,7 +423,7 @@ describe('App', () => {
   });
 
   it('builds a bookmarklet that returns to the root app entry', () => {
-    window.history.replaceState({}, '', 'http://localhost:3000/');
+    globalThis.history.replaceState({}, '', 'http://localhost:3000/');
     render(<App />);
 
     fireEvent.click(screen.getByRole('button', { name: 'More' }));
@@ -426,11 +433,11 @@ describe('App', () => {
   });
 
   it('opens token entry immediately for bookmarklet urls when no token is saved', async () => {
-    window.history.replaceState({}, '', 'http://localhost:3000/?url=example.com%2Farticles');
+    globalThis.history.replaceState({}, '', 'http://localhost:3000/?url=example.com%2Farticles');
 
     render(<App />);
 
-    await screen.findByText('Add access token');
+    await screen.findByText('Enter access token');
     expect(screen.getByLabelText('Page URL')).toHaveValue('https://example.com/articles');
     expect(mockConvertFeed).not.toHaveBeenCalled();
   });
@@ -442,7 +449,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
     mockConvertFeed
       .mockRejectedValueOnce(
@@ -450,7 +457,7 @@ describe('App', () => {
           manualRetryStrategy: 'browserless',
         })
       )
-      .mockResolvedValueOnce(undefined);
+      .mockResolvedValueOnce();
 
     render(<App />);
 
@@ -459,8 +466,8 @@ describe('App', () => {
     });
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
-    await screen.findByRole('button', { name: 'Try browserless instead' });
-    fireEvent.click(screen.getByRole('button', { name: 'Try browserless instead' }));
+    await screen.findByRole('button', { name: 'Retry with browserless' });
+    fireEvent.click(screen.getByRole('button', { name: 'Retry with browserless' }));
 
     await waitFor(() => {
       expect(mockConvertFeed).toHaveBeenLastCalledWith(
@@ -478,7 +485,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
     mockConvertFeed.mockRejectedValueOnce(
       Object.assign(new Error('Tried faraday first, then browserless. Browserless failed.'), {
@@ -494,7 +501,7 @@ describe('App', () => {
     fireEvent.click(screen.getByRole('button', { name: 'Generate feed URL' }));
 
     await screen.findByText('Tried faraday first, then browserless. Browserless failed.');
-    expect(screen.queryByRole('button', { name: /Try .* instead/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Retry with .*/ })).not.toBeInTheDocument();
   });
 
   it('does not treat non-token forbidden failures as token rejection or strategy-recovery UX', async () => {
@@ -504,7 +511,7 @@ describe('App', () => {
       saveToken: mockSaveToken,
       clearToken: mockClearToken,
       isLoading: false,
-      error: null,
+      error: undefined,
     });
     mockConvertFeed.mockRejectedValueOnce(
       Object.assign(new Error('URL not allowed for this account'), {
@@ -521,22 +528,22 @@ describe('App', () => {
 
     await screen.findByText('URL not allowed for this account');
     expect(mockClearToken).not.toHaveBeenCalled();
-    expect(screen.queryByText('Add access token')).not.toBeInTheDocument();
+    expect(screen.queryByText('Enter access token')).not.toBeInTheDocument();
     expect(
       screen.queryByText('Access token was rejected. Paste a valid token to continue.')
     ).not.toBeInTheDocument();
-    expect(screen.queryByRole('button', { name: /Try .* instead/ })).not.toBeInTheDocument();
+    expect(screen.queryByRole('button', { name: /Retry with .*/ })).not.toBeInTheDocument();
   });
 
   it('shows the utility links in a user-focused order', () => {
-    window.history.replaceState({}, '', 'http://localhost:3000/#result');
+    globalThis.history.replaceState({}, '', 'http://localhost:3000/#result');
     render(<App />);
 
     fireEvent.click(screen.getByRole('button', { name: 'More' }));
 
-    const utilityLinks = Array.from(
-      screen.getByLabelText('Utilities').querySelectorAll('.utility-strip__items > a')
-    ).map((link) => link.textContent);
+    const utilityLinks = [
+      ...screen.getByLabelText('Utilities').querySelectorAll('.utility-strip__items > a'),
+    ].map((link) => link.textContent);
     expect(utilityLinks).toEqual([
       'Try included feeds',
       'Bookmarklet',
@@ -558,4 +565,34 @@ describe('App', () => {
       'https://hub.docker.com/r/html2rss/web'
     );
   });
+
+  it('keeps OpenAPI link on the frontend origin during local development', () => {
+    mockUseApiMetadata.mockReturnValue({
+      metadata: {
+        api: {
+          name: 'html2rss-web API',
+          description: 'RESTful API for converting websites to RSS feeds',
+          openapi_url: 'http://127.0.0.1:4000/openapi.yaml',
+        },
+        instance: {
+          feed_creation: {
+            enabled: true,
+            access_token_required: true,
+          },
+          featured_feeds: [],
+        },
+      },
+      isLoading: false,
+      error: undefined,
+    });
+
+    globalThis.history.replaceState({}, '', 'http://localhost:3000/');
+    render(<App />);
+
+    fireEvent.click(screen.getByRole('button', { name: 'More' }));
+    expect(screen.getByRole('link', { name: 'OpenAPI spec' })).toHaveAttribute(
+      'href',
+      'http://localhost:3000/openapi.yaml'
+    );
+  });
 });
diff --git a/frontend/src/__tests__/ResultDisplay.test.tsx b/frontend/src/__tests__/ResultDisplay.test.tsx
index 818ee0f0..d830ac69 100644
--- a/frontend/src/__tests__/ResultDisplay.test.tsx
+++ b/frontend/src/__tests__/ResultDisplay.test.tsx
@@ -1,10 +1,10 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
 import { render, screen, fireEvent, waitFor } from '@testing-library/preact';
-import { h } from 'preact';
 import { ResultDisplay } from '../components/ResultDisplay';
 
 describe('ResultDisplay', () => {
   const mockOnCreateAnother = vi.fn();
+  const mockOnRetryReadiness = vi.fn();
   const mockResult = {
     feed: {
       id: 'test-id',
@@ -35,10 +35,11 @@ describe('ResultDisplay', () => {
           publishedLabel: 'Jan 3, 2024',
         },
       ],
-      error: null,
+      error: undefined,
       isLoading: false,
     },
-    retry: null,
+    readinessPhase: 'feed_ready' as const,
+    retry: undefined,
   };
 
   beforeEach(() => {
@@ -46,59 +47,76 @@ describe('ResultDisplay', () => {
   });
 
   it('renders the success state actions and richer preview cards', async () => {
-    render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
+    render(
+      <ResultDisplay
+        result={mockResult}
+        onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
+      />
+    );
 
-    expect(screen.getByText('Your feed is ready')).toBeInTheDocument();
+    expect(screen.getByText('Feed ready')).toBeInTheDocument();
     expect(screen.getByText('Test Feed')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
-    expect(screen.getByRole('link', { name: 'Subscribe in reader' })).toHaveAttribute(
-      'href',
-      'feed:https://example.com/feed.xml'
-    );
     expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Open JSON Feed' })).toHaveAttribute(
       'href',
       'https://example.com/feed.json'
     );
+    expect(screen.getByRole('link', { name: 'Open in feed reader' })).toHaveAttribute(
+      'href',
+      'feed:https://example.com/feed.xml'
+    );
     await waitFor(() => {
       expect(screen.getByText('Item One')).toBeInTheDocument();
       expect(screen.getByText('First preview item with markup.')).toBeInTheDocument();
-      expect(screen.getAllByText('Open original')).toHaveLength(2);
       expect(screen.getByText(/points by canpan/i)).toBeInTheDocument();
       expect(screen.getByText('Item Two')).toBeInTheDocument();
+      expect(screen.getAllByText('Open original').length).toBeGreaterThan(0);
       expect(screen.getByText('Latest items from this feed')).toBeInTheDocument();
     });
   });
 
-  it('surfaces preview failures as a result-state message', async () => {
+  it('surfaces feed-not-ready state with a readiness retry action', async () => {
     render(
       <ResultDisplay
         result={{
           ...mockResult,
+          readinessPhase: 'feed_not_ready_yet',
           preview: { items: [], error: 'Preview unavailable right now.', isLoading: false },
         }}
         onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
       />
     );
 
     await waitFor(() => {
+      expect(screen.getByText('Feed still warming up')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Try readiness check again' })).toBeInTheDocument();
+      expect(screen.queryByRole('link', { name: 'Open feed' })).not.toBeInTheDocument();
       expect(screen.getByText('Preview unavailable right now.')).toBeInTheDocument();
       expect(screen.getByText('Latest items from this feed')).toBeInTheDocument();
     });
   });
 
-  it('keeps the result state visible while preview is still loading', async () => {
+  it('keeps result shell visible while readiness check is in progress', async () => {
     render(
       <ResultDisplay
-        result={{ ...mockResult, preview: { items: [], error: null, isLoading: true } }}
+        result={{
+          ...mockResult,
+          readinessPhase: 'link_created',
+          preview: { items: [], error: undefined, isLoading: true },
+        }}
         onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
       />
     );
 
     await waitFor(() => {
-      expect(screen.getByText('Your feed is ready')).toBeInTheDocument();
-      expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();
-      expect(screen.getByText('Loading preview…')).toBeInTheDocument();
+      expect(screen.getByText('Feed created')).toBeInTheDocument();
+      expect(screen.getByRole('button', { name: 'Checking readiness…' })).toBeDisabled();
+      expect(screen.queryByRole('link', { name: 'Open feed' })).not.toBeInTheDocument();
+      expect(screen.getByText('Verifying feed readiness…')).toBeInTheDocument();
     });
   });
 
@@ -110,6 +128,7 @@ describe('ResultDisplay', () => {
           retry: { automatic: true, from: 'faraday', to: 'browserless' },
         }}
         onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
       />
     );
 
@@ -121,15 +140,40 @@ describe('ResultDisplay', () => {
   });
 
   it('calls onCreateAnother when the reset button is clicked', () => {
-    render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
+    render(
+      <ResultDisplay
+        result={mockResult}
+        onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
+      />
+    );
 
     fireEvent.click(screen.getByRole('button', { name: 'Create another feed' }));
 
     expect(mockOnCreateAnother).toHaveBeenCalled();
   });
 
+  it('calls onRetryReadiness when the readiness action is clicked', () => {
+    render(
+      <ResultDisplay
+        result={{ ...mockResult, readinessPhase: 'feed_not_ready_yet' }}
+        onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
+      />
+    );
+
+    fireEvent.click(screen.getByRole('button', { name: 'Try readiness check again' }));
+    expect(mockOnRetryReadiness).toHaveBeenCalled();
+  });
+
   it('copies feed URL to clipboard when copy button is clicked', async () => {
-    render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
+    render(
+      <ResultDisplay
+        result={mockResult}
+        onCreateAnother={mockOnCreateAnother}
+        onRetryReadiness={mockOnRetryReadiness}
+      />
+    );
 
     fireEvent.click(screen.getByRole('button', { name: 'Copy feed URL' }));
 
diff --git a/frontend/src/__tests__/setup.ts b/frontend/src/__tests__/setup.ts
index 66c108f8..4af5e168 100644
--- a/frontend/src/__tests__/setup.ts
+++ b/frontend/src/__tests__/setup.ts
@@ -5,12 +5,12 @@ import { cleanup } from '@testing-library/preact';
 let server: typeof import('./mocks/server').server;
 
 // Mock window and document for tests
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(globalThis, 'matchMedia', {
   writable: true,
   value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
-    onchange: null,
+    onchange: undefined,
     addListener: vi.fn(), // deprecated
     removeListener: vi.fn(), // deprecated
     addEventListener: vi.fn(),
@@ -29,6 +29,7 @@ const createStorageMock = () => {
       get length() {
         return store.size;
       },
+      // eslint-disable-next-line unicorn/no-null -- Web Storage returns null for missing keys.
       getItem: vi.fn((key: string) => (store.has(key) ? store.get(key)! : null)),
       setItem: vi.fn((key: string, value: string) => {
         store.set(key, value);
@@ -39,7 +40,8 @@ const createStorageMock = () => {
       clear: vi.fn(() => {
         store.clear();
       }),
-      key: vi.fn((index: number) => Array.from(store.keys())[index] ?? null),
+      // eslint-disable-next-line unicorn/no-null -- Web Storage key() returns null for out-of-range indexes.
+      key: vi.fn((index: number) => [...store.keys()][index] ?? null),
     },
   };
 };
@@ -47,18 +49,16 @@ const createStorageMock = () => {
 const local = createStorageMock();
 const session = createStorageMock();
 
-Object.defineProperty(window, 'localStorage', {
-  value: local.api,
-});
 Object.defineProperty(globalThis, 'localStorage', {
   value: local.api,
+  configurable: true,
+  writable: true,
 });
 
-Object.defineProperty(window, 'sessionStorage', {
-  value: session.api,
-});
 Object.defineProperty(globalThis, 'sessionStorage', {
   value: session.api,
+  configurable: true,
+  writable: true,
 });
 
 beforeEach(() => {
diff --git a/frontend/src/__tests__/useAccessToken.test.ts b/frontend/src/__tests__/useAccessToken.test.ts
index cabf4d63..29f1f59b 100644
--- a/frontend/src/__tests__/useAccessToken.test.ts
+++ b/frontend/src/__tests__/useAccessToken.test.ts
@@ -4,30 +4,30 @@ import { useAccessToken } from '../hooks/useAccessToken';
 
 describe('useAccessToken', () => {
   beforeEach(() => {
-    window.localStorage.clear();
-    window.sessionStorage.clear();
+    globalThis.localStorage.clear();
+    globalThis.sessionStorage.clear();
   });
 
   it('loads the persisted token from localStorage', async () => {
-    window.localStorage.setItem('html2rss_access_token', 'persisted-token');
+    globalThis.localStorage.setItem('html2rss_access_token', 'persisted-token');
 
     const { result } = renderHook(() => useAccessToken());
 
     expect(result.current.isLoading).toBe(false);
     expect(result.current.token).toBe('persisted-token');
     expect(result.current.hasToken).toBe(true);
-    expect(result.current.error).toBeNull();
+    expect(result.current.error).toBeUndefined();
   });
 
   it('migrates a legacy session token into localStorage', async () => {
-    window.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
+    globalThis.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
 
     const { result } = renderHook(() => useAccessToken());
 
     expect(result.current.isLoading).toBe(false);
     expect(result.current.token).toBe('legacy-token');
-    expect(window.localStorage.getItem('html2rss_access_token')).toBe('legacy-token');
-    expect(window.sessionStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBe('legacy-token');
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
   });
 
   it('saves new tokens to the persistent storage path', async () => {
@@ -39,13 +39,13 @@ describe('useAccessToken', () => {
 
     expect(result.current.token).toBe('new-token');
     expect(result.current.hasToken).toBe(true);
-    expect(window.localStorage.getItem('html2rss_access_token')).toBe('new-token');
-    expect(window.sessionStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBe('new-token');
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
   });
 
   it('clears both persistent and legacy token copies', async () => {
-    window.localStorage.setItem('html2rss_access_token', 'persisted-token');
-    window.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
+    globalThis.localStorage.setItem('html2rss_access_token', 'persisted-token');
+    globalThis.sessionStorage.setItem('html2rss_access_token', 'legacy-token');
 
     const { result } = renderHook(() => useAccessToken());
 
@@ -53,9 +53,9 @@ describe('useAccessToken', () => {
       result.current.clearToken();
     });
 
-    expect(result.current.token).toBeNull();
+    expect(result.current.token).toBeUndefined();
     expect(result.current.hasToken).toBe(false);
-    expect(window.localStorage.getItem('html2rss_access_token')).toBeNull();
-    expect(window.sessionStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.localStorage.getItem('html2rss_access_token')).toBeNull();
+    expect(globalThis.sessionStorage.getItem('html2rss_access_token')).toBeNull();
   });
 });
diff --git a/frontend/src/__tests__/useAuth.test.ts b/frontend/src/__tests__/useAuth.test.ts
index 5995ff27..02ea4b2d 100644
--- a/frontend/src/__tests__/useAuth.test.ts
+++ b/frontend/src/__tests__/useAuth.test.ts
@@ -27,12 +27,12 @@ describe('useAuth', () => {
   beforeEach(() => {
     localStorageMock = createStorageMock();
     sessionStorageMock = createStorageMock();
-    Object.defineProperty(window, 'localStorage', {
+    Object.defineProperty(globalThis, 'localStorage', {
       value: localStorageMock,
       configurable: true,
       writable: true,
     });
-    Object.defineProperty(window, 'sessionStorage', {
+    Object.defineProperty(globalThis, 'sessionStorage', {
       value: sessionStorageMock,
       configurable: true,
       writable: true,
@@ -41,13 +41,13 @@ describe('useAuth', () => {
   });
 
   it('should initialize with unauthenticated state', () => {
-    localStorageMock.getItem.mockReturnValue(null);
+    localStorageMock.getItem.mockReturnValue();
 
     const { result } = renderHook(() => useAuth());
 
     expect(result.current.isAuthenticated).toBe(false);
-    expect(result.current.username).toBeNull();
-    expect(result.current.token).toBeNull();
+    expect(result.current.username).toBeUndefined();
+    expect(result.current.token).toBeUndefined();
   });
 
   it('should load auth state from sessionStorage on mount', () => {
@@ -65,7 +65,7 @@ describe('useAuth', () => {
   });
 
   it('should login and store credentials', async () => {
-    localStorageMock.getItem.mockReturnValue(null);
+    localStorageMock.getItem.mockReturnValue();
 
     const { result } = renderHook(() => useAuth());
 
@@ -90,8 +90,8 @@ describe('useAuth', () => {
     });
 
     expect(result.current.isAuthenticated).toBe(false);
-    expect(result.current.username).toBeNull();
-    expect(result.current.token).toBeNull();
+    expect(result.current.username).toBeUndefined();
+    expect(result.current.token).toBeUndefined();
     expect(localStorageMock.removeItem).toHaveBeenCalledWith('html2rss_username');
     expect(localStorageMock.removeItem).toHaveBeenCalledWith('html2rss_token');
   });
diff --git a/frontend/src/__tests__/useFeedConversion.contract.test.ts b/frontend/src/__tests__/useFeedConversion.contract.test.ts
index 33cb19dc..ac13df99 100644
--- a/frontend/src/__tests__/useFeedConversion.contract.test.ts
+++ b/frontend/src/__tests__/useFeedConversion.contract.test.ts
@@ -6,7 +6,7 @@ import { useFeedConversion } from '../hooks/useFeedConversion';
 
 describe('useFeedConversion contract', () => {
   it('sends feed creation request with bearer token', async () => {
-    let receivedAuthorization: string | null = null;
+    let receivedAuthorization: string | undefined;
 
     server.use(
       http.post('/api/v1/feeds', async ({ request }) => {
@@ -48,12 +48,14 @@ describe('useFeedConversion contract', () => {
     });
 
     expect(receivedAuthorization).toBe('Bearer test-token-123');
-    expect(result.current.error).toBeNull();
+    expect(result.current.error).toBeUndefined();
     expect(result.current.result?.feed.feed_token).toBe('generated-token');
     expect(result.current.result?.feed.public_url).toBe('/api/v1/feeds/generated-token');
     expect(result.current.result?.feed.json_public_url).toBe('/api/v1/feeds/generated-token.json');
+    expect(result.current.result?.readinessPhase).toBe('link_created');
     await waitFor(() => {
-      expect(result.current.result?.preview.error).toBeNull();
+      expect(result.current.result?.readinessPhase).toBe('feed_ready');
+      expect(result.current.result?.preview.error).toBeUndefined();
       expect(result.current.result?.preview.isLoading).toBe(false);
       expect(result.current.result?.preview.items).toHaveLength(1);
     });
@@ -77,7 +79,7 @@ describe('useFeedConversion contract', () => {
       ).rejects.toThrow('URL parameter is required');
     });
 
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe('URL parameter is required');
   });
 
@@ -99,11 +101,11 @@ describe('useFeedConversion contract', () => {
       ).rejects.toThrow('Invalid response format from feed creation API');
     });
 
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe('Invalid response format from feed creation API');
   });
 
-  it('preserves the created feed when preview loading fails', async () => {
+  it('marks the feed as not-ready-yet when preview endpoint keeps returning 5xx', async () => {
     server.use(
       http.post('/api/v1/feeds', async () =>
         HttpResponse.json(
@@ -115,7 +117,7 @@ describe('useFeedConversion contract', () => {
           { status: 201 }
         )
       ),
-      http.get('/api/v1/feeds/generated-token.json', async () => new HttpResponse(null, { status: 502 }))
+      http.get('/api/v1/feeds/generated-token.json', async () => new HttpResponse(undefined, { status: 502 }))
     );
 
     const { result } = renderHook(() => useFeedConversion());
@@ -124,12 +126,18 @@ describe('useFeedConversion contract', () => {
       await result.current.convertFeed('https://example.com/articles', 'faraday', 'token');
     });
 
-    expect(result.current.error).toBeNull();
+    expect(result.current.error).toBeUndefined();
     expect(result.current.result?.feed.feed_token).toBe('generated-token');
-    await waitFor(() => {
-      expect(result.current.result?.preview.items).toEqual([]);
-      expect(result.current.result?.preview.error).toBe('Preview unavailable right now.');
-      expect(result.current.result?.preview.isLoading).toBe(false);
-    });
+    await waitFor(
+      () => {
+        expect(result.current.result?.readinessPhase).toBe('feed_not_ready_yet');
+        expect(result.current.result?.preview.items).toEqual([]);
+        expect(result.current.result?.preview.error).toBe(
+          'Feed is still preparing. Try again in a few seconds.'
+        );
+        expect(result.current.result?.preview.isLoading).toBe(false);
+      },
+      { timeout: 6000 }
+    );
   });
 });
diff --git a/frontend/src/__tests__/useFeedConversion.test.ts b/frontend/src/__tests__/useFeedConversion.test.ts
index a0082a77..7f55096d 100644
--- a/frontend/src/__tests__/useFeedConversion.test.ts
+++ b/frontend/src/__tests__/useFeedConversion.test.ts
@@ -2,12 +2,22 @@ import { describe, it, expect, beforeEach, afterEach, vi, type SpyInstance } fro
 import { renderHook, act, waitFor } from '@testing-library/preact';
 import { useFeedConversion } from '../hooks/useFeedConversion';
 
+const PREVIEW_RETRY_DELAYS_MS = [260, 620, 1180, 1800] as const;
+const SHORT_SETTLE_MS = 50;
+const FULL_SETTLE_MS = 100;
+
+const sumDelays = (delays: readonly number[]) => delays.reduce((total, delay) => total + delay, 0);
+
+const advanceAfterRetries = async (delays: readonly number[], settleMs: number) => {
+  await vi.advanceTimersByTimeAsync(sumDelays(delays) + settleMs);
+};
+
 describe('useFeedConversion', () => {
   let fetchMock: SpyInstance;
 
   beforeEach(() => {
     vi.clearAllMocks();
-    fetchMock = vi.spyOn(global, 'fetch');
+    fetchMock = vi.spyOn(globalThis, 'fetch');
   });
 
   afterEach(() => {
@@ -18,8 +28,8 @@ describe('useFeedConversion', () => {
     const { result } = renderHook(() => useFeedConversion());
 
     expect(result.current.isConverting).toBe(false);
-    expect(result.current.result).toBeNull();
-    expect(result.current.error).toBeNull();
+    expect(result.current.result).toBeUndefined();
+    expect(result.current.error).toBeUndefined();
   });
 
   it('should handle successful conversion', async () => {
@@ -78,10 +88,11 @@ describe('useFeedConversion', () => {
       feed: mockFeed,
       preview: {
         items: [],
-        error: null,
+        error: undefined,
         isLoading: true,
       },
-      retry: null,
+      readinessPhase: 'link_created',
+      retry: undefined,
     });
     await waitFor(() => {
       expect(result.current.result).toEqual({
@@ -95,13 +106,14 @@ describe('useFeedConversion', () => {
               url: 'https://example.com/item',
             },
           ],
-          error: null,
+          error: undefined,
           isLoading: false,
         },
-        retry: null,
+        readinessPhase: 'feed_ready',
+        retry: undefined,
       });
     });
-    expect(result.current.error).toBeNull();
+    expect(result.current.error).toBeUndefined();
     expect(fetchMock).toHaveBeenCalledTimes(2);
   });
 
@@ -128,7 +140,7 @@ describe('useFeedConversion', () => {
     });
 
     expect(result.current.isConverting).toBe(false);
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toContain('Bad Request');
   });
 
@@ -144,71 +156,79 @@ describe('useFeedConversion', () => {
     });
 
     expect(result.current.isConverting).toBe(false);
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe('Network error');
   });
 
   it('preserves the created feed when preview loading fails after feed creation', async () => {
-    const createdFeed = {
-      id: 'test-id',
-      name: 'Test Feed',
-      url: 'https://example.com',
-      strategy: 'faraday',
-      feed_token: 'test-token',
-      public_url: 'https://example.com/feed',
-      json_public_url: 'https://example.com/feed.json',
-      created_at: '2024-01-01T00:00:00Z',
-      updated_at: '2024-01-01T00:00:00Z',
-    };
-
-    fetchMock.mockResolvedValueOnce(
-      new Response(
-        JSON.stringify({
-          success: true,
-          data: {
-            feed: createdFeed,
-          },
-        }),
-        {
-          status: 201,
-          headers: { 'Content-Type': 'application/json' },
-        }
-      )
-    );
-    fetchMock.mockResolvedValueOnce(new Response('nope', { status: 502 }));
+    vi.useFakeTimers();
+    try {
+      const createdFeed = {
+        id: 'test-id',
+        name: 'Test Feed',
+        url: 'https://example.com',
+        strategy: 'faraday',
+        feed_token: 'test-token',
+        public_url: 'https://example.com/feed',
+        json_public_url: 'https://example.com/feed.json',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+      };
+
+      fetchMock.mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            success: true,
+            data: {
+              feed: createdFeed,
+            },
+          }),
+          {
+            status: 201,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      );
+      fetchMock.mockResolvedValue(new Response('nope', { status: 502 }));
 
-    const { result } = renderHook(() => useFeedConversion());
-    let conversionResult: Awaited<ReturnType<typeof result.current.convertFeed>> | undefined;
+      const { result } = renderHook(() => useFeedConversion());
+      let conversionResult: Awaited<ReturnType<typeof result.current.convertFeed>> | undefined;
 
-    await act(async () => {
-      conversionResult = await result.current.convertFeed('https://example.com', 'faraday', 'testtoken');
-    });
+      await act(async () => {
+        conversionResult = await result.current.convertFeed('https://example.com', 'faraday', 'testtoken');
+        await advanceAfterRetries(PREVIEW_RETRY_DELAYS_MS, FULL_SETTLE_MS);
+      });
 
-    expect(result.current.isConverting).toBe(false);
-    expect(conversionResult).toEqual({
-      feed: createdFeed,
-      preview: {
-        items: [],
-        error: null,
-        isLoading: true,
-      },
-      retry: null,
-    });
-    await waitFor(() => {
-      expect(result.current.result).toEqual({
+      expect(result.current.isConverting).toBe(false);
+      expect(conversionResult).toEqual({
         feed: createdFeed,
         preview: {
           items: [],
-          error: 'Preview unavailable right now.',
-          isLoading: false,
+          error: undefined,
+          isLoading: true,
         },
-        retry: null,
+        readinessPhase: 'link_created',
+        retry: undefined,
       });
-    });
-    expect(result.current.error).toBeNull();
+      await waitFor(() => {
+        expect(result.current.result).toEqual({
+          feed: createdFeed,
+          preview: {
+            items: [],
+            error: 'Feed is still preparing. Try again in a few seconds.',
+            isLoading: false,
+          },
+          readinessPhase: 'feed_not_ready_yet',
+          retry: undefined,
+        });
+      });
+      expect(result.current.error).toBeUndefined();
+    } finally {
+      vi.useRealTimers();
+    }
   });
 
-  it('publishes the result before preview loading finishes', async () => {
+  it('publishes link_created before readiness is confirmed', async () => {
     const createdFeed = {
       id: 'test-id',
       name: 'Test Feed',
@@ -221,7 +241,7 @@ describe('useFeedConversion', () => {
       updated_at: '2024-01-01T00:00:00Z',
     };
 
-    let resolvePreviewResponse: ((value: Response) => void) | null = null;
+    let resolvePreviewResponse: ((value: Response) => void) | undefined;
     const previewResponse = new Promise<Response>((resolve) => {
       resolvePreviewResponse = resolve;
     });
@@ -251,10 +271,11 @@ describe('useFeedConversion', () => {
       feed: createdFeed,
       preview: {
         items: [],
-        error: null,
+        error: undefined,
         isLoading: true,
       },
-      retry: null,
+      readinessPhase: 'link_created',
+      retry: undefined,
     });
     expect(result.current.isConverting).toBe(false);
     expect(result.current.result).toEqual(conversionResult);
@@ -288,9 +309,165 @@ describe('useFeedConversion', () => {
             url: 'https://example.com/item',
           },
         ],
-        error: null,
+        error: undefined,
         isLoading: false,
       });
+      expect(result.current.result?.readinessPhase).toBe('feed_ready');
+    });
+  });
+
+  it('retries readiness checks after transient preview failures and eventually becomes ready', async () => {
+    vi.useFakeTimers();
+    try {
+      const createdFeed = {
+        id: 'test-id',
+        name: 'Test Feed',
+        url: 'https://example.com',
+        strategy: 'faraday',
+        feed_token: 'test-token',
+        public_url: 'https://example.com/feed',
+        json_public_url: 'https://example.com/feed.json',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+      };
+
+      fetchMock
+        .mockResolvedValueOnce(
+          new Response(
+            JSON.stringify({
+              success: true,
+              data: { feed: createdFeed },
+            }),
+            {
+              status: 201,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          )
+        )
+        .mockResolvedValueOnce(new Response('temporary-failure', { status: 500 }))
+        .mockResolvedValueOnce(new Response('still-warming-up', { status: 503 }))
+        .mockResolvedValueOnce(
+          new Response(
+            JSON.stringify({
+              items: [
+                {
+                  title: 'Recovered item',
+                  content_text: 'Recovered preview excerpt',
+                  url: 'https://example.com/item',
+                  date_published: '2024-01-02T00:00:00Z',
+                },
+              ],
+            }),
+            {
+              status: 200,
+              headers: { 'Content-Type': 'application/feed+json' },
+            }
+          )
+        );
+
+      const { result } = renderHook(() => useFeedConversion());
+
+      await act(async () => {
+        await result.current.convertFeed('https://example.com', 'faraday', 'testtoken');
+        await advanceAfterRetries(PREVIEW_RETRY_DELAYS_MS.slice(0, 2), SHORT_SETTLE_MS);
+      });
+
+      await waitFor(() => {
+        expect(result.current.result?.readinessPhase).toBe('feed_ready');
+        expect(result.current.result?.preview.items[0]?.title).toBe('Recovered item');
+      });
+      expect(fetchMock).toHaveBeenCalledTimes(4);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('stops readiness retries after the configured limit and marks feed_not_ready_yet', async () => {
+    vi.useFakeTimers();
+    try {
+      const createdFeed = {
+        id: 'test-id',
+        name: 'Test Feed',
+        url: 'https://example.com',
+        strategy: 'faraday',
+        feed_token: 'test-token',
+        public_url: 'https://example.com/feed',
+        json_public_url: 'https://example.com/feed.json',
+        created_at: '2024-01-01T00:00:00Z',
+        updated_at: '2024-01-01T00:00:00Z',
+      };
+
+      fetchMock
+        .mockResolvedValueOnce(
+          new Response(
+            JSON.stringify({
+              success: true,
+              data: { feed: createdFeed },
+            }),
+            {
+              status: 201,
+              headers: { 'Content-Type': 'application/json' },
+            }
+          )
+        )
+        .mockResolvedValue(new Response('temporary-failure', { status: 500 }));
+
+      const { result } = renderHook(() => useFeedConversion());
+
+      await act(async () => {
+        await result.current.convertFeed('https://example.com', 'faraday', 'testtoken');
+        await advanceAfterRetries(PREVIEW_RETRY_DELAYS_MS, FULL_SETTLE_MS);
+      });
+
+      await waitFor(() => {
+        expect(result.current.result?.readinessPhase).toBe('feed_not_ready_yet');
+        expect(result.current.result?.preview.error).toBe(
+          'Feed is still preparing. Try again in a few seconds.'
+        );
+      });
+      expect(fetchMock).toHaveBeenCalledTimes(6);
+    } finally {
+      vi.useRealTimers();
+    }
+  });
+
+  it('marks preview_unavailable for non-retryable preview responses', async () => {
+    const createdFeed = {
+      id: 'test-id',
+      name: 'Test Feed',
+      url: 'https://example.com',
+      strategy: 'faraday',
+      feed_token: 'test-token',
+      public_url: 'https://example.com/feed',
+      json_public_url: 'https://example.com/feed.json',
+      created_at: '2024-01-01T00:00:00Z',
+      updated_at: '2024-01-01T00:00:00Z',
+    };
+
+    fetchMock
+      .mockResolvedValueOnce(
+        new Response(
+          JSON.stringify({
+            success: true,
+            data: { feed: createdFeed },
+          }),
+          {
+            status: 201,
+            headers: { 'Content-Type': 'application/json' },
+          }
+        )
+      )
+      .mockResolvedValueOnce(new Response('forbidden', { status: 403 }));
+
+    const { result } = renderHook(() => useFeedConversion());
+
+    await act(async () => {
+      await result.current.convertFeed('https://example.com', 'faraday', 'testtoken');
+    });
+
+    await waitFor(() => {
+      expect(result.current.result?.readinessPhase).toBe('preview_unavailable');
+      expect(result.current.result?.preview.error).toBe('Preview unavailable right now.');
     });
   });
 
@@ -435,7 +612,7 @@ describe('useFeedConversion', () => {
     });
 
     expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe('Unauthorized');
   });
 
@@ -462,7 +639,7 @@ describe('useFeedConversion', () => {
     });
 
     expect(fetchMock).toHaveBeenCalledTimes(1);
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe('Input rejected');
   });
 
@@ -576,7 +753,7 @@ describe('useFeedConversion', () => {
       'Tried faraday first, then browserless. First attempt failed with: Upstream timeout. Second attempt failed with: Browserless also failed'
     );
     expect(thrownError?.manualRetryStrategy).toBeUndefined();
-    expect(result.current.result).toBeNull();
+    expect(result.current.result).toBeUndefined();
     expect(result.current.error).toBe(
       'Tried faraday first, then browserless. First attempt failed with: Upstream timeout. Second attempt failed with: Browserless also failed'
     );
@@ -606,11 +783,11 @@ describe('useFeedConversion', () => {
       updated_at: '2024-01-01T00:00:00Z',
     };
 
-    let resolvePreviewA: ((value: Response) => void) | null = null;
+    let resolvePreviewA: ((value: Response) => void) | undefined;
     const previewAPromise = new Promise<Response>((resolve) => {
       resolvePreviewA = resolve;
     });
-    let resolvePreviewB: ((value: Response) => void) | null = null;
+    let resolvePreviewB: ((value: Response) => void) | undefined;
     const previewBPromise = new Promise<Response>((resolve) => {
       resolvePreviewB = resolve;
     });
diff --git a/frontend/src/api/client.ts b/frontend/src/api/client.ts
index 3e8bd3f3..267ebea4 100644
--- a/frontend/src/api/client.ts
+++ b/frontend/src/api/client.ts
@@ -1,9 +1,9 @@
 import { createClient, createConfig } from './generated/client';
 
 const resolveBaseUrl = (): string => {
-  if (typeof window === 'undefined') return 'http://localhost/api/v1';
+  if (globalThis.window === undefined) return 'http://localhost/api/v1';
 
-  const origin = window.location?.origin;
+  const origin = globalThis.location?.origin;
   if (!origin || origin === 'null') return 'http://localhost/api/v1';
 
   return `${origin}/api/v1`;
@@ -15,5 +15,5 @@ export const apiClient = createClient(
   })
 );
 
-export const bearerHeaders = (token: string | null): Record<string, string> =>
+export const bearerHeaders = (token?: string): Record<string, string> =>
   token ? { Authorization: `Bearer ${token}` } : {};
diff --git a/frontend/src/api/contracts.ts b/frontend/src/api/contracts.ts
index 041154d4..d4fed873 100644
--- a/frontend/src/api/contracts.ts
+++ b/frontend/src/api/contracts.ts
@@ -11,10 +11,12 @@ export interface FeedPreviewItem {
 
 export interface FeedPreviewState {
   items: FeedPreviewItem[];
-  error: string | null;
+  error?: string;
   isLoading: boolean;
 }
 
+export type FeedReadinessPhase = 'link_created' | 'feed_ready' | 'feed_not_ready_yet' | 'preview_unavailable';
+
 export interface FeedRetryState {
   automatic: boolean;
   from: string;
@@ -24,7 +26,8 @@ export interface FeedRetryState {
 export interface CreatedFeedResult {
   feed: FeedRecord;
   preview: FeedPreviewState;
-  retry: FeedRetryState | null;
+  readinessPhase: FeedReadinessPhase;
+  retry?: FeedRetryState;
 }
 
 export interface ApiMetadataRecord {
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
index 981da692..b1adfcaf 100644
--- a/frontend/src/components/App.tsx
+++ b/frontend/src/components/App.tsx
@@ -12,6 +12,47 @@ const DEFAULT_FEED_CREATION = { enabled: true, access_token_required: true };
 const preferredStrategy = (strategies: { id: string }[]) =>
   strategies.find((strategy) => strategy.id === 'faraday')?.id ?? strategies[0]?.id;
 
+function strategyHint(strategy: Strategy) {
+  if (strategy.id === 'faraday') return 'Best for most pages.';
+  if (strategy.id === 'browserless') return 'Use when the page needs JavaScript to load content.';
+  return strategy.name;
+}
+
+function isAccessTokenError(message: string) {
+  const normalized = message.toLowerCase();
+  const mentionsAuthToken =
+    normalized.includes('access token') ||
+    normalized.includes('token') ||
+    normalized.includes('authentication') ||
+    normalized.includes('bearer');
+
+  return (
+    normalized.includes('unauthorized') ||
+    normalized.includes('invalid token') ||
+    normalized.includes('token rejected') ||
+    normalized.includes('authentication') ||
+    (normalized.includes('forbidden') && mentionsAuthToken)
+  );
+}
+
+function isActionableStrategySwitch(message: string, currentStrategy: string, retryStrategy: string) {
+  if (currentStrategy !== 'faraday' || retryStrategy !== 'browserless') return false;
+
+  const normalized = message.toLowerCase();
+  return !(
+    normalized.includes('unauthorized') ||
+    normalized.includes('forbidden') ||
+    normalized.includes('not allowed') ||
+    normalized.includes('disabled') ||
+    normalized.includes('access token') ||
+    normalized.includes('token') ||
+    normalized.includes('authentication') ||
+    normalized.includes('bad request') ||
+    normalized.includes('url') ||
+    normalized.includes('unsupported strategy')
+  );
+}
+
 interface ConversionErrorWithMeta extends Error {
   manualRetryStrategy?: string;
 }
@@ -46,6 +87,7 @@ export function App() {
     convertFeed,
     clearError,
     clearResult,
+    retryReadinessCheck,
   } = useFeedConversion();
   const { strategies, isLoading: strategiesLoading, error: strategiesError } = useStrategies();
 
@@ -56,19 +98,19 @@ export function App() {
   const [tokenError, setTokenError] = useState('');
   const [manualRetryStrategy, setManualRetryStrategy] = useState('');
   const [focusCreateComposerKey, setFocusCreateComposerKey] = useState(0);
-  const autoSubmitUrlRef = useRef<string | null>(null);
-  const hasAutoSubmittedRef = useRef(false);
+  const autoSubmitUrlReference = useRef<string | undefined>(undefined);
+  const hasAutoSubmittedReference = useRef(false);
   const selectedStrategy = feedFormData.strategy || preferredStrategy(strategies) || '';
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (globalThis.window === undefined) return;
 
-    const urlParam = new URLSearchParams(window.location.search).get('url');
-    if (!urlParam) return;
-    autoSubmitUrlRef.current = urlParam;
+    const urlParameter = new URLSearchParams(globalThis.location.search).get('url');
+    if (!urlParameter) return;
+    autoSubmitUrlReference.current = urlParameter;
     if (feedFormData.url) return;
 
-    setFeedFormData((prev) => ({ ...prev, url: urlParam }));
+    setFeedFormData((previous) => ({ ...previous, url: urlParameter }));
   }, [feedFormData.url]);
 
   useEffect(() => {
@@ -76,7 +118,7 @@ export function App() {
     if (!nextStrategy) return;
 
     const hasCurrentStrategy = strategies.some((strategy) => strategy.id === feedFormData.strategy);
-    if (!hasCurrentStrategy) setFeedFormData((prev) => ({ ...prev, strategy: nextStrategy }));
+    if (!hasCurrentStrategy) setFeedFormData((previous) => ({ ...previous, strategy: nextStrategy }));
   }, [strategies, feedFormData.strategy]);
 
   const feedCreation = metadata?.instance.feed_creation ?? DEFAULT_FEED_CREATION;
@@ -84,57 +126,16 @@ export function App() {
   const submitDisabled = isConverting || strategiesLoading || !feedCreation.enabled || showTokenPrompt;
 
   const setFeedField = (key: 'url' | 'strategy', value: string) => {
-    setFeedFormData((prev) => ({ ...prev, [key]: value }));
-    setFeedFieldErrors((prev) => ({
-      ...prev,
-      url: key === 'url' ? '' : prev.url,
+    setFeedFormData((previous) => ({ ...previous, [key]: value }));
+    setFeedFieldErrors((previous) => ({
+      ...previous,
+      url: key === 'url' ? '' : previous.url,
       form: '',
     }));
     setManualRetryStrategy('');
     clearError();
   };
 
-  const strategyHint = (strategy: Strategy) => {
-    if (strategy.id === 'faraday') return 'Start here for most pages.';
-    if (strategy.id === 'browserless') return 'Use this if the page loads content with JavaScript.';
-    return strategy.name;
-  };
-
-  const isAccessTokenError = (message: string) => {
-    const normalized = message.toLowerCase();
-    const mentionsAuthToken =
-      normalized.includes('access token') ||
-      normalized.includes('token') ||
-      normalized.includes('authentication') ||
-      normalized.includes('bearer');
-
-    return (
-      normalized.includes('unauthorized') ||
-      normalized.includes('invalid token') ||
-      normalized.includes('token rejected') ||
-      normalized.includes('authentication') ||
-      (normalized.includes('forbidden') && mentionsAuthToken)
-    );
-  };
-
-  const isActionableStrategySwitch = (message: string, currentStrategy: string, retryStrategy: string) => {
-    if (currentStrategy !== 'faraday' || retryStrategy !== 'browserless') return false;
-
-    const normalized = message.toLowerCase();
-    return !(
-      normalized.includes('unauthorized') ||
-      normalized.includes('forbidden') ||
-      normalized.includes('not allowed') ||
-      normalized.includes('disabled') ||
-      normalized.includes('access token') ||
-      normalized.includes('token') ||
-      normalized.includes('authentication') ||
-      normalized.includes('bad request') ||
-      normalized.includes('url') ||
-      normalized.includes('unsupported strategy')
-    );
-  };
-
   const attemptFeedCreation = async (accessToken: string, strategyOverride?: string) => {
     const strategy = strategyOverride || selectedStrategy;
     const normalizedUrl = normalizeUserUrl(feedFormData.url);
@@ -152,13 +153,13 @@ export function App() {
     if (!feedCreation.enabled) {
       setFeedFieldErrors({
         ...EMPTY_FEED_ERRORS,
-        form: 'Custom feed generation is disabled for this instance.',
+        form: 'Feed creation is disabled on this instance.',
       });
       return false;
     }
 
     if (feedCreation.access_token_required && !accessToken) {
-      setFeedFormData((prev) => ({ ...prev, url: normalizedUrl }));
+      setFeedFormData((previous) => ({ ...previous, url: normalizedUrl }));
       clearError();
       setShowTokenPrompt(true);
       setTokenError('');
@@ -166,7 +167,7 @@ export function App() {
     }
 
     try {
-      setFeedFormData((prev) => ({ ...prev, url: normalizedUrl }));
+      setFeedFormData((previous) => ({ ...previous, url: normalizedUrl }));
       await convertFeed(normalizedUrl, strategy, accessToken);
       setShowTokenPrompt(false);
       setTokenError('');
@@ -225,27 +226,27 @@ export function App() {
   const handleRetryWithStrategy = () => {
     if (!manualRetryStrategy) return;
 
-    setFeedFormData((prev) => ({ ...prev, strategy: manualRetryStrategy }));
+    setFeedFormData((previous) => ({ ...previous, strategy: manualRetryStrategy }));
     setFeedFieldErrors(EMPTY_FEED_ERRORS);
     clearError();
     void attemptFeedCreation(token ?? '', manualRetryStrategy);
   };
 
   useEffect(() => {
-    const autoSubmitUrl = autoSubmitUrlRef.current;
-    if (!autoSubmitUrl || hasAutoSubmittedRef.current) return;
+    const autoSubmitUrl = autoSubmitUrlReference.current;
+    if (!autoSubmitUrl || hasAutoSubmittedReference.current) return;
     if (strategiesLoading || metadataLoading || tokenLoading) return;
     if (feedFormData.url !== autoSubmitUrl || !selectedStrategy) return;
 
     if (feedCreation.access_token_required && !token) {
-      hasAutoSubmittedRef.current = true;
-      setFeedFormData((prev) => ({ ...prev, url: normalizeUserUrl(autoSubmitUrl) }));
+      hasAutoSubmittedReference.current = true;
+      setFeedFormData((previous) => ({ ...previous, url: normalizeUserUrl(autoSubmitUrl) }));
       setShowTokenPrompt(true);
       setTokenError('');
       return;
     }
 
-    hasAutoSubmittedRef.current = true;
+    hasAutoSubmittedReference.current = true;
     setFeedFieldErrors(EMPTY_FEED_ERRORS);
     void attemptFeedCreation(token ?? '');
   }, [
@@ -287,7 +288,11 @@ export function App() {
       )}
 
       {result ? (
-        <ResultDisplay result={result} onCreateAnother={handleCreateAnother} />
+        <ResultDisplay
+          result={result}
+          onCreateAnother={handleCreateAnother}
+          onRetryReadiness={retryReadinessCheck}
+        />
       ) : (
         <>
           <CreateFeedPanel
@@ -302,8 +307,6 @@ export function App() {
             strategiesError={strategiesError}
             feedCreationEnabled={feedCreation.enabled}
             featuredFeeds={featuredFeeds}
-            accessTokenRequired={feedCreation.access_token_required}
-            hasAccessToken={hasToken}
             tokenDraft={tokenDraft}
             tokenError={tokenError}
             showTokenPrompt={showTokenPrompt}
@@ -327,7 +330,7 @@ export function App() {
           <UtilityStrip
             hidden={showTokenPrompt}
             hasAccessToken={hasToken}
-            openapiUrl={metadata?.api.openapi_url ?? null}
+            openapiUrl={metadata?.api.openapi_url}
             onClearToken={() => {
               clearToken();
               setShowTokenPrompt(false);
diff --git a/frontend/src/components/AppPanels.tsx b/frontend/src/components/AppPanels.tsx
index dc8be1ea..2747ddaa 100644
--- a/frontend/src/components/AppPanels.tsx
+++ b/frontend/src/components/AppPanels.tsx
@@ -18,20 +18,18 @@ export interface FeedFieldErrors {
   form: string;
 }
 
-interface CreateFeedPanelProps {
+interface CreateFeedPanelProperties {
   focusComposerKey: number;
   feedFormData: FeedFormData;
   feedFieldErrors: FeedFieldErrors;
-  conversionError: string | null;
+  conversionError?: string;
   isConverting: boolean;
   submitDisabled: boolean;
   strategies: Strategy[];
   strategiesLoading: boolean;
-  strategiesError: string | null;
+  strategiesError?: string;
   feedCreationEnabled: boolean;
   featuredFeeds: Array<{ path: string; title: string; description: string }>;
-  accessTokenRequired: boolean;
-  hasAccessToken: boolean;
   tokenDraft: string;
   tokenError: string;
   showTokenPrompt: boolean;
@@ -45,6 +43,12 @@ interface CreateFeedPanelProps {
   strategyHint: (strategy: Strategy) => string;
 }
 
+function strategyOptionLabel(strategy: Strategy) {
+  if (strategy.id === 'faraday') return 'Default';
+  if (strategy.id === 'browserless') return 'JavaScript pages (recommended)';
+  return strategy.display_name;
+}
+
 export function CreateFeedPanel({
   focusComposerKey,
   feedFormData,
@@ -57,8 +61,6 @@ export function CreateFeedPanel({
   strategiesError,
   feedCreationEnabled,
   featuredFeeds,
-  accessTokenRequired,
-  hasAccessToken,
   tokenDraft,
   tokenError,
   showTokenPrompt,
@@ -70,38 +72,33 @@ export function CreateFeedPanel({
   onCancelTokenPrompt,
   onRetryWithStrategy,
   strategyHint,
-}: CreateFeedPanelProps) {
+}: CreateFeedPanelProperties) {
   const selectedStrategy = strategies.find((strategy) => strategy.id === feedFormData.strategy);
-  const urlInputRef = useRef<HTMLInputElement | null>(null);
-  const tokenInputRef = useRef<HTMLInputElement | null>(null);
-  const strategyOptionLabel = (strategy: Strategy) => {
-    if (strategy.id === 'faraday') return 'Default';
-    if (strategy.id === 'browserless') return 'JavaScript pages (recommended)';
-    return strategy.display_name;
-  };
+  const urlInputReference = useRef<HTMLInputElement>(undefined as never);
+  const tokenInputReference = useRef<HTMLInputElement>(undefined as never);
 
   useLayoutEffect(() => {
-    if (!urlInputRef.current || typeof window === 'undefined') return;
+    if (!urlInputReference.current || globalThis.window === undefined) return;
 
-    const focusHandle = window.requestAnimationFrame(() => {
-      const input = urlInputRef.current;
+    const focusHandle = globalThis.requestAnimationFrame(() => {
+      const input = urlInputReference.current;
       if (!input) return;
 
       input.focus();
       input.select();
     });
 
-    return () => window.cancelAnimationFrame(focusHandle);
+    return () => globalThis.cancelAnimationFrame(focusHandle);
   }, [focusComposerKey]);
 
   useLayoutEffect(() => {
-    if (!showTokenPrompt || !tokenInputRef.current || typeof window === 'undefined') return;
+    if (!showTokenPrompt || !tokenInputReference.current || globalThis.window === undefined) return;
 
-    const focusHandle = window.requestAnimationFrame(() => {
-      tokenInputRef.current?.focus();
+    const focusHandle = globalThis.requestAnimationFrame(() => {
+      tokenInputReference.current?.focus();
     });
 
-    return () => window.cancelAnimationFrame(focusHandle);
+    return () => globalThis.cancelAnimationFrame(focusHandle);
   }, [showTokenPrompt]);
 
   return (
@@ -117,8 +114,8 @@ export function CreateFeedPanel({
           autoCapitalize="off"
           spellcheck={false}
           autoFocus
-          inputRef={urlInputRef}
-          actionLabel={isConverting ? 'Preparing feed' : 'Generate feed URL'}
+          inputRef={urlInputReference}
+          actionLabel={isConverting ? 'Creating feed link' : 'Generate feed URL'}
           actionText={isConverting ? '...' : '>'}
           disabled={submitDisabled}
           error={feedFieldErrors.url}
@@ -152,7 +149,7 @@ export function CreateFeedPanel({
 
         {!feedCreationEnabled && (
           <>
-            <p class="field-help field-help--alert">Custom feed generation is disabled for this instance.</p>
+            <p class="field-help field-help--alert">Feed creation is disabled on this instance.</p>
             {featuredFeeds.length > 0 && (
               <div
                 class="ui-card ui-card--notice ui-card--padded notice"
@@ -190,8 +187,8 @@ export function CreateFeedPanel({
       {showTokenPrompt && (
         <div class="token-gate" role="group" aria-label="Access token">
           <div class="token-gate__copy">
-            <h2>Add access token</h2>
-            <p class="token-gate__hint">This instance needs an access token.</p>
+            <h2>Enter access token</h2>
+            <p class="token-gate__hint">Required by this instance.</p>
           </div>
           <label class="field-block field-block--stretch field-block--compact" htmlFor="access-token">
             <span class="field-label field-label--ghost">Access token</span>
@@ -208,7 +205,7 @@ export function CreateFeedPanel({
               spellcheck={false}
               data-1p-ignore="true"
               data-lpignore="true"
-              ref={tokenInputRef}
+              ref={tokenInputReference}
               value={tokenDraft}
               onKeyDown={(event) => {
                 if (event.key !== 'Enter') return;
@@ -229,7 +226,7 @@ export function CreateFeedPanel({
             Set up your own instance with Docker.
           </a>
           <div class="token-gate__actions">
-            <button type="button" class="btn btn--ghost" onClick={onSaveToken}>
+            <button type="button" class="btn btn--primary" onClick={onSaveToken}>
               Save and continue
             </button>
           </div>
@@ -243,15 +240,15 @@ export function CreateFeedPanel({
 
       {conversionError && (
         <div class="ui-card ui-card--notice ui-card--padded notice" data-tone="error" role="alert">
-          <div class="notice__title">Feed generation failed</div>
+          <div class="notice__title">Could not create feed link</div>
           <p>{conversionError}</p>
         </div>
       )}
 
       {isConverting && (
         <div class="ui-card ui-card--notice ui-card--padded notice" data-state="loading" role="status">
-          <div class="notice__title">Preparing feed</div>
-          <p>Creating the feed now. The result appears first, then preview loading continues.</p>
+          <div class="notice__title">Creating feed link</div>
+          <p>Checking readiness now.</p>
         </div>
       )}
 
@@ -261,7 +258,7 @@ export function CreateFeedPanel({
           {manualRetryStrategy && (
             <div class="notice__actions">
               <button type="button" class="btn btn--ghost" onClick={onRetryWithStrategy}>
-                Try {manualRetryStrategy} instead
+                Retry with {manualRetryStrategy}
               </button>
             </div>
           )}
@@ -271,10 +268,10 @@ export function CreateFeedPanel({
   );
 }
 
-interface UtilityStripProps {
+interface UtilityStripProperties {
   hidden?: boolean;
   hasAccessToken: boolean;
-  openapiUrl: string | null;
+  openapiUrl?: string;
   onClearToken: () => void;
 }
 
@@ -283,18 +280,19 @@ export function UtilityStrip({
   hasAccessToken,
   openapiUrl,
   onClearToken,
-}: UtilityStripProps) {
+}: UtilityStripProperties) {
   const [isOpen, setIsOpen] = useState(false);
+  const normalizedOpenapiUrl = normalizeLocalOriginUrl(openapiUrl);
   const includedFeedsHref = (() => {
     const directoryUrl = new URL('https://html2rss.github.io/feed-directory/');
-    if (typeof window === 'undefined') return directoryUrl.toString();
+    if (globalThis.window === undefined) return directoryUrl.toString();
 
-    const instanceUrl = new URL('/', window.location.origin);
+    const instanceUrl = new URL('/', globalThis.location.origin);
     directoryUrl.hash = `!url=${encodeURIComponent(instanceUrl.toString())}`;
     return directoryUrl.toString();
   })();
 
-  if (hidden) return null;
+  if (hidden) return;
 
   return (
     <section class="utility-strip" aria-label="Utilities">
@@ -313,7 +311,12 @@ export function UtilityStrip({
           </a>
           <Bookmarklet />
           {openapiUrl && (
-            <a href={openapiUrl} target="_blank" rel="noopener noreferrer" class="utility-link">
+            <a
+              href={normalizedOpenapiUrl ?? openapiUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              class="utility-link"
+            >
               OpenAPI spec
             </a>
           )}
@@ -343,3 +346,21 @@ export function UtilityStrip({
     </section>
   );
 }
+
+function normalizeLocalOriginUrl(value?: string): string | undefined {
+  if (!value || globalThis.window === undefined) return value;
+
+  try {
+    const target = new URL(value, globalThis.location.origin);
+    const current = new URL(globalThis.location.origin);
+    const isLocalHost = (host: string) => host === 'localhost' || host === '127.0.0.1';
+
+    if (isLocalHost(current.hostname) && isLocalHost(target.hostname) && target.port !== current.port) {
+      return `${current.origin}${target.pathname}${target.search}${target.hash}`;
+    }
+
+    return target.toString();
+  } catch {
+    return value;
+  }
+}
diff --git a/frontend/src/components/Bookmarklet.tsx b/frontend/src/components/Bookmarklet.tsx
index 8c839795..f15c9e73 100644
--- a/frontend/src/components/Bookmarklet.tsx
+++ b/frontend/src/components/Bookmarklet.tsx
@@ -1,8 +1,8 @@
 export function Bookmarklet() {
   const bookmarkletHref = (() => {
-    if (typeof window === 'undefined') return '#';
+    if (globalThis.window === undefined) return '#';
 
-    const targetPrefix = `${new URL('/', window.location.href).toString()}?url=`;
+    const targetPrefix = `${new URL('/', globalThis.location.href).toString()}?url=`;
 
     return `javascript:window.location.assign(${JSON.stringify(targetPrefix)}+encodeURIComponent(window.location.href));`;
   })();
diff --git a/frontend/src/components/DominantField.tsx b/frontend/src/components/DominantField.tsx
index 8324c576..a3aac770 100644
--- a/frontend/src/components/DominantField.tsx
+++ b/frontend/src/components/DominantField.tsx
@@ -1,6 +1,6 @@
 import type { JSX, Ref } from 'preact';
 
-interface DominantFieldProps {
+interface DominantFieldProperties {
   className?: string;
   id: string;
   label: string;
@@ -42,7 +42,7 @@ export function DominantField({
   onInput,
   inputRef,
   error,
-}: DominantFieldProps) {
+}: DominantFieldProperties) {
   return (
     <div class={className ? `dominant-field ${className}` : 'dominant-field'}>
       <label class="field-block field-block--centered" htmlFor={id}>
diff --git a/frontend/src/components/ResultDisplay.tsx b/frontend/src/components/ResultDisplay.tsx
index 81a6dd36..07417edd 100644
--- a/frontend/src/components/ResultDisplay.tsx
+++ b/frontend/src/components/ResultDisplay.tsx
@@ -2,36 +2,61 @@ import { useEffect, useRef, useState } from 'preact/hooks';
 import type { CreatedFeedResult } from '../api/contracts';
 import { DominantField } from './DominantField';
 
-interface ResultDisplayProps {
+interface ResultDisplayProperties {
   result: CreatedFeedResult;
   onCreateAnother: () => void;
+  onRetryReadiness: () => void;
 }
 
-export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
+export function ResultDisplay({ result, onCreateAnother, onRetryReadiness }: ResultDisplayProperties) {
   const [copyNotice, setCopyNotice] = useState('');
-  const copyResetRef = useRef<number | undefined>(undefined);
-  const { feed, preview } = result;
+  const [showAllPreviewItems, setShowAllPreviewItems] = useState(false);
+  const copyResetReference = useRef<number | undefined>(undefined);
+  const { feed, preview, readinessPhase } = result;
 
   const fullUrl = feed.public_url.startsWith('http')
     ? feed.public_url
-    : `${window.location.origin}${feed.public_url}`;
+    : `${globalThis.location.origin}${feed.public_url}`;
   const jsonFeedUrl = feed.json_public_url.startsWith('http')
     ? feed.json_public_url
-    : `${window.location.origin}${feed.json_public_url}`;
-  const subscribeUrl = /^https?:\/\//i.test(fullUrl) ? `feed:${fullUrl}` : null;
+    : `${globalThis.location.origin}${feed.json_public_url}`;
+  const subscribeUrl = /^https?:\/\//i.test(fullUrl) ? `feed:${fullUrl}` : undefined;
+  const isFeedReady = readinessPhase === 'feed_ready';
+  const canManuallyRetryReadiness =
+    readinessPhase === 'feed_not_ready_yet' || readinessPhase === 'preview_unavailable';
+  const isReadinessCheckInProgress = readinessPhase === 'link_created' && preview.isLoading;
+  const showReadinessAction = canManuallyRetryReadiness || isReadinessCheckInProgress;
+  const previewItems = showAllPreviewItems ? preview.items : preview.items.slice(0, 3);
+  const hasMorePreviewItems = preview.items.length > 3;
+  const statusTitle = {
+    link_created: 'Feed created',
+    feed_ready: 'Feed ready',
+    feed_not_ready_yet: 'Feed still warming up',
+    preview_unavailable: 'Readiness check unavailable',
+  }[readinessPhase];
+  const statusMessage = {
+    link_created: 'Checking readiness now.',
+    feed_ready: 'This feed has been verified and is ready to use.',
+    feed_not_ready_yet: 'The feed endpoint is still warming up. Try checking again in a few seconds.',
+    preview_unavailable: 'We could not verify readiness right now. Try checking again.',
+  }[readinessPhase];
 
   useEffect(() => {
     return () => {
-      if (copyResetRef.current) window.clearTimeout(copyResetRef.current);
+      if (copyResetReference.current) globalThis.clearTimeout(copyResetReference.current);
     };
   }, []);
 
+  useEffect(() => {
+    setShowAllPreviewItems(false);
+  }, [feed.feed_token]);
+
   const copyToClipboard = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
       setCopyNotice('Feed URL copied to clipboard.');
-      if (copyResetRef.current) window.clearTimeout(copyResetRef.current);
-      copyResetRef.current = window.setTimeout(() => setCopyNotice(''), 2500);
+      if (copyResetReference.current) globalThis.clearTimeout(copyResetReference.current);
+      copyResetReference.current = globalThis.setTimeout(() => setCopyNotice(''), 2500);
     } catch {
       setCopyNotice('Clipboard copy failed. Copy the feed URL manually.');
     }
@@ -40,13 +65,32 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
   return (
     <section class="result-shell layout-stack" aria-live="polite">
       <header
-        class="result-hero layout-rail-reading layout-stack"
+        class="result-hero ui-card ui-card--roomy ui-hero layout-rail-reading layout-stack"
         style={{ '--stack-gap': 'var(--space-3)' }}
       >
-        <p class="result-kicker ui-eyebrow">Feed created</p>
-        <h1 class="result-title">Your feed is ready</h1>
-        <p class="result-meta layout-rail-copy">{feed.name}</p>
-        <p class="result-lede layout-rail-copy">Subscribe to this URL in your RSS reader.</p>
+        <div class="result-hero__masthead ui-hero__masthead">
+          <div class="result-hero__icon-wrap ui-hero__icon-wrap" aria-hidden="true">
+            <img class="result-hero__icon ui-hero__icon" src="/feed.svg" alt="" />
+          </div>
+          <div class="layout-stack layout-stack--tight">
+            <h1 class="result-title ui-display-title">{statusTitle}</h1>
+            <p class="result-meta layout-rail-copy">{feed.name}</p>
+            <p class="field-help">{statusMessage}</p>
+          </div>
+        </div>
+        <div class="result-hero__actions ui-hero__actions">
+          {showReadinessAction && (
+            <button
+              type="button"
+              class="btn btn--primary"
+              onClick={onRetryReadiness}
+              disabled={isReadinessCheckInProgress}
+              aria-busy={isReadinessCheckInProgress}
+            >
+              {isReadinessCheckInProgress ? 'Checking readiness…' : 'Try readiness check again'}
+            </button>
+          )}
+        </div>
         {result.retry && (
           <p class="field-help">
             {`Retried automatically with ${result.retry.to} after ${result.retry.from} could not finish the page.`}
@@ -67,17 +111,21 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
       />
 
       <div class="result-actions result-actions--quiet layout-rail-reading">
-        {subscribeUrl && (
-          <a href={subscribeUrl} class="btn btn--ghost">
-            Subscribe in reader
-          </a>
+        {isFeedReady && (
+          <>
+            <a href={fullUrl} class="btn btn--ghost" target="_blank" rel="noopener noreferrer">
+              Open feed
+            </a>
+            <a href={jsonFeedUrl} class="btn btn--ghost" target="_blank" rel="noopener noreferrer">
+              Open JSON Feed
+            </a>
+            {subscribeUrl && (
+              <a href={subscribeUrl} class="btn btn--ghost result-hero__reader">
+                Open in feed reader
+              </a>
+            )}
+          </>
         )}
-        <a href={fullUrl} class="btn btn--ghost" target="_blank" rel="noopener noreferrer">
-          Open feed
-        </a>
-        <a href={jsonFeedUrl} class="btn btn--ghost" target="_blank" rel="noopener noreferrer">
-          Open JSON Feed
-        </a>
         <button type="button" class="btn btn--quiet btn--linkish" onClick={onCreateAnother}>
           Create another feed
         </button>
@@ -89,18 +137,18 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
             <p class="result-preview__label ui-eyebrow">Preview</p>
             <p class="result-preview__intro">Latest items from this feed</p>
           </div>
-          <p class="field-help">Loading preview…</p>
+          <p class="field-help">Verifying feed readiness…</p>
         </section>
       )}
 
-      {preview.items.length > 0 && (
+      {isFeedReady && preview.items.length > 0 && (
         <section class="result-preview layout-rail-reading layout-stack" aria-label="Feed preview">
           <div class="result-preview__header layout-stack layout-stack--tight">
             <p class="result-preview__label ui-eyebrow">Preview</p>
             <p class="result-preview__intro">Latest items from this feed</p>
           </div>
           <ul class="result-preview__list" role="list">
-            {preview.items.map((item) => (
+            {previewItems.map((item) => (
               <li key={`${item.title}-${item.publishedLabel || 'undated'}`}>
                 <article class="preview-card ui-card layout-stack layout-stack--tight">
                   <h2 class="preview-card__title">{item.title}</h2>
@@ -117,6 +165,27 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
               </li>
             ))}
           </ul>
+          {hasMorePreviewItems && (
+            <button
+              type="button"
+              class="btn btn--quiet btn--linkish"
+              onClick={() => setShowAllPreviewItems((current) => !current)}
+            >
+              {showAllPreviewItems ? 'Show fewer items' : `Show all ${preview.items.length} items`}
+            </button>
+          )}
+        </section>
+      )}
+
+      {isFeedReady && !preview.isLoading && preview.items.length === 0 && !preview.error && (
+        <section class="result-preview layout-rail-reading layout-stack" aria-label="Feed preview status">
+          <div class="result-preview__header layout-stack layout-stack--tight">
+            <p class="result-preview__label ui-eyebrow">Preview</p>
+            <p class="result-preview__intro">Latest items from this feed</p>
+          </div>
+          <p class="field-help">
+            Feed is ready. Preview items will appear once the source publishes entries.
+          </p>
         </section>
       )}
 
diff --git a/frontend/src/env.d.ts b/frontend/src/environment.d.ts
similarity index 100%
rename from frontend/src/env.d.ts
rename to frontend/src/environment.d.ts
diff --git a/frontend/src/hooks/useAccessToken.ts b/frontend/src/hooks/useAccessToken.ts
index eff39b28..c55724ed 100644
--- a/frontend/src/hooks/useAccessToken.ts
+++ b/frontend/src/hooks/useAccessToken.ts
@@ -3,9 +3,9 @@ import { useEffect, useState } from 'preact/hooks';
 const ACCESS_TOKEN_KEY = 'html2rss_access_token';
 
 interface AccessTokenState {
-  token: string | null;
+  token?: string;
   isLoading: boolean;
-  error: string | null;
+  error?: string;
 }
 
 const memoryStorage = (() => {
@@ -16,8 +16,8 @@ const memoryStorage = (() => {
       return store.size;
     },
     clear: () => store.clear(),
-    getItem: (key: string) => (store.has(key) ? store.get(key)! : null),
-    key: (index: number) => Array.from(store.keys())[index] ?? null,
+    getItem: (key: string) => store.get(key),
+    key: (index: number) => [...store.keys()][index],
     removeItem: (key: string) => {
       store.delete(key);
     },
@@ -28,13 +28,13 @@ const memoryStorage = (() => {
 })();
 
 const resolveStorage = (): Storage => {
-  if (typeof window === 'undefined') return memoryStorage;
+  if (globalThis.window === undefined) return memoryStorage;
 
   try {
-    return window.localStorage ?? window.sessionStorage ?? memoryStorage;
+    return globalThis.localStorage ?? globalThis.sessionStorage ?? memoryStorage;
   } catch {
     try {
-      return window.sessionStorage ?? memoryStorage;
+      return globalThis.sessionStorage ?? memoryStorage;
     } catch {
       return memoryStorage;
     }
@@ -42,10 +42,10 @@ const resolveStorage = (): Storage => {
 };
 
 const clearLegacySessionToken = () => {
-  if (typeof window === 'undefined') return;
+  if (globalThis.window === undefined) return;
 
   try {
-    window.sessionStorage?.removeItem(ACCESS_TOKEN_KEY);
+    globalThis.sessionStorage?.removeItem(ACCESS_TOKEN_KEY);
   } catch {
     // Ignore restricted sessionStorage access (privacy mode, sandboxed contexts).
   }
@@ -53,9 +53,7 @@ const clearLegacySessionToken = () => {
 
 export function useAccessToken() {
   const [state, setState] = useState<AccessTokenState>({
-    token: null,
     isLoading: true,
-    error: null,
   });
 
   useEffect(() => {
@@ -64,9 +62,9 @@ export function useAccessToken() {
     try {
       const token = storage.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
       let legacyToken = '';
-      if (!token && typeof window !== 'undefined') {
+      if (!token && globalThis.window !== undefined) {
         try {
-          legacyToken = window.sessionStorage?.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
+          legacyToken = globalThis.sessionStorage?.getItem(ACCESS_TOKEN_KEY)?.trim() ?? '';
         } catch {
           // Treat restricted sessionStorage access as no legacy token.
           legacyToken = '';
@@ -79,13 +77,11 @@ export function useAccessToken() {
       }
 
       setState({
-        token: token || legacyToken || null,
+        token: token || legacyToken || undefined,
         isLoading: false,
-        error: null,
       });
     } catch {
       setState({
-        token: null,
         isLoading: false,
         error: 'Failed to load access token state',
       });
@@ -103,7 +99,6 @@ export function useAccessToken() {
     setState({
       token: normalized,
       isLoading: false,
-      error: null,
     });
   };
 
@@ -113,9 +108,7 @@ export function useAccessToken() {
     clearLegacySessionToken();
 
     setState({
-      token: null,
       isLoading: false,
-      error: null,
     });
   };
 
diff --git a/frontend/src/hooks/useApiMetadata.ts b/frontend/src/hooks/useApiMetadata.ts
index 482b21a5..2cc8743d 100644
--- a/frontend/src/hooks/useApiMetadata.ts
+++ b/frontend/src/hooks/useApiMetadata.ts
@@ -2,9 +2,9 @@ import { useEffect, useState } from 'preact/hooks';
 import type { ApiMetadataRecord } from '../api/contracts';
 
 interface ApiMetadataState {
-  metadata: ApiMetadataRecord | null;
+  metadata?: ApiMetadataRecord;
   isLoading: boolean;
-  error: string | null;
+  error?: string;
 }
 
 interface ApiMetadataPayload {
@@ -14,16 +14,14 @@ interface ApiMetadataPayload {
 
 export function useApiMetadata() {
   const [state, setState] = useState<ApiMetadataState>({
-    metadata: null,
     isLoading: true,
-    error: null,
   });
 
   useEffect(() => {
     let cancelled = false;
 
     const load = async () => {
-      setState((prev) => ({ ...prev, isLoading: true, error: null }));
+      setState((previous) => ({ ...previous, isLoading: true, error: undefined }));
 
       try {
         const response = await fetch('/api/v1', {
@@ -40,13 +38,11 @@ export function useApiMetadata() {
         setState({
           metadata,
           isLoading: false,
-          error: null,
         });
       } catch (error) {
         if (cancelled) return;
 
         setState({
-          metadata: null,
           isLoading: false,
           error: error instanceof Error ? error.message : 'Failed to load API metadata',
         });
diff --git a/frontend/src/hooks/useAuth.ts b/frontend/src/hooks/useAuth.ts
index 197f50ac..b613a949 100644
--- a/frontend/src/hooks/useAuth.ts
+++ b/frontend/src/hooks/useAuth.ts
@@ -5,15 +5,13 @@ const TOKEN_KEY = 'html2rss_token';
 
 interface AuthState {
   isAuthenticated: boolean;
-  username: string | null;
-  token: string | null;
+  username?: string;
+  token?: string;
   isLoading: boolean;
-  error: string | null;
+  error?: string;
 }
 
-interface MemoryStorage extends Storage {}
-
-const memoryStorage: MemoryStorage = (() => {
+const memoryStorage: Storage = (() => {
   const store = new Map<string, string>();
 
   return {
@@ -21,8 +19,8 @@ const memoryStorage: MemoryStorage = (() => {
       return store.size;
     },
     clear: () => store.clear(),
-    getItem: (key: string) => (store.has(key) ? store.get(key)! : null),
-    key: (index: number) => Array.from(store.keys())[index] ?? null,
+    getItem: (key: string) => store.get(key),
+    key: (index: number) => [...store.keys()][index],
     removeItem: (key: string) => {
       store.delete(key);
     },
@@ -33,15 +31,15 @@ const memoryStorage: MemoryStorage = (() => {
 })();
 
 const resolveStorage = (): Storage => {
-  if (typeof window === 'undefined') {
+  if (globalThis.window === undefined) {
     return memoryStorage;
   }
 
   try {
-    return window.localStorage ?? window.sessionStorage ?? memoryStorage;
-  } catch (error) {
+    return globalThis.localStorage ?? globalThis.sessionStorage ?? memoryStorage;
+  } catch {
     try {
-      return window.sessionStorage ?? memoryStorage;
+      return globalThis.sessionStorage ?? memoryStorage;
     } catch {
       return memoryStorage;
     }
@@ -51,10 +49,7 @@ const resolveStorage = (): Storage => {
 export function useAuth() {
   const [authState, setAuthState] = useState<AuthState>({
     isAuthenticated: false,
-    username: null,
-    token: null,
     isLoading: true,
-    error: null,
   });
 
   useEffect(() => {
@@ -70,14 +65,13 @@ export function useAuth() {
           username: username.trim(),
           token: token.trim(),
           isLoading: false,
-          error: null,
         });
       } else {
-        setAuthState((prev) => ({ ...prev, isLoading: false }));
+        setAuthState((previous) => ({ ...previous, isLoading: false }));
       }
-    } catch (error) {
-      setAuthState((prev) => ({
-        ...prev,
+    } catch {
+      setAuthState((previous) => ({
+        ...previous,
         isLoading: false,
         error: 'Failed to load authentication state',
       }));
@@ -103,9 +97,8 @@ export function useAuth() {
         username: username.trim(),
         token: token.trim(),
         isLoading: false,
-        error: null,
       });
-    } catch (error) {
+    } catch {
       throw new Error('Failed to save authentication data');
     }
   };
@@ -119,14 +112,11 @@ export function useAuth() {
 
       setAuthState({
         isAuthenticated: false,
-        username: null,
-        token: null,
         isLoading: false,
-        error: null,
       });
-    } catch (error) {
-      setAuthState((prev) => ({
-        ...prev,
+    } catch {
+      setAuthState((previous) => ({
+        ...previous,
         error: 'Failed to clear authentication data',
       }));
     }
diff --git a/frontend/src/hooks/useFeedConversion.ts b/frontend/src/hooks/useFeedConversion.ts
index 92753d39..482003ee 100644
--- a/frontend/src/hooks/useFeedConversion.ts
+++ b/frontend/src/hooks/useFeedConversion.ts
@@ -1,7 +1,7 @@
 import { useRef, useState } from 'preact/hooks';
 import { createFeed } from '../api/generated';
 import { apiClient } from '../api/client';
-import type { CreatedFeedResult, FeedPreviewItem, FeedRecord } from '../api/contracts';
+import type { CreatedFeedResult, FeedPreviewItem, FeedReadinessPhase, FeedRecord } from '../api/contracts';
 import { normalizeUserUrl } from '../utils/url';
 
 interface JsonFeedItem {
@@ -19,8 +19,8 @@ interface JsonFeedResponse {
 
 interface ConversionState {
   isConverting: boolean;
-  result: CreatedFeedResult | null;
-  error: string | null;
+  result?: CreatedFeedResult;
+  error?: string;
 }
 
 interface ConversionError extends Error {
@@ -28,20 +28,20 @@ interface ConversionError extends Error {
 }
 
 const PREVIEW_UNAVAILABLE_MESSAGE = 'Preview unavailable right now.';
+const FEED_NOT_READY_MESSAGE = 'Feed is still preparing. Try again in a few seconds.';
 const NON_RETRYABLE_ERROR_CODES = new Set(['BAD_REQUEST', 'UNAUTHORIZED', 'FORBIDDEN']);
+const PREVIEW_RETRY_DELAYS_MS = [260, 620, 1180, 1800] as const;
 
 export function useFeedConversion() {
-  const requestIdRef = useRef(0);
+  const requestIdReference = useRef(0);
   const [state, setState] = useState<ConversionState>({
     isConverting: false,
-    result: null,
-    error: null,
   });
 
   const convertFeed = async (url: string, strategy: string, token: string) => {
     const normalizedUrl = normalizeUserUrl(url);
     const requestedStrategy = strategy.trim();
-    const fallbackStrategy = requestedStrategy === 'faraday' ? 'browserless' : null;
+    const fallbackStrategy = requestedStrategy === 'faraday' ? 'browserless' : undefined;
 
     if (!normalizedUrl) throw new Error('URL is required');
     if (!requestedStrategy) throw new Error('Strategy is required');
@@ -50,13 +50,13 @@ export function useFeedConversion() {
       throw new Error('Invalid URL format');
     }
 
-    const requestId = requestIdRef.current + 1;
-    requestIdRef.current = requestId;
+    const requestId = requestIdReference.current + 1;
+    requestIdReference.current = requestId;
     markConversionStarted(setState);
 
     try {
       const feed = await requestFeedCreation(normalizedUrl, requestedStrategy, token);
-      return publishCreatedFeed(feed, null, requestId, setState, requestIdRef);
+      return publishCreatedFeed(feed, undefined, requestId, setState, requestIdReference);
     } catch (firstError) {
       if (shouldAutoRetry(requestedStrategy, fallbackStrategy, firstError)) {
         try {
@@ -66,7 +66,7 @@ export function useFeedConversion() {
             { automatic: true, from: requestedStrategy, to: fallbackStrategy },
             requestId,
             setState,
-            requestIdRef
+            requestIdReference
           );
         } catch (secondError) {
           const message = buildRetryFailureMessage(
@@ -85,18 +85,38 @@ export function useFeedConversion() {
   };
 
   const clearResult = () => {
-    window.document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
-    requestIdRef.current += 1;
+    globalThis.document.body.scrollIntoView({ behavior: 'smooth', block: 'start' });
+    requestIdReference.current += 1;
 
     setState({
       isConverting: false,
-      result: null,
-      error: null,
     });
   };
 
   const clearError = () => {
-    setState((prev) => ({ ...prev, error: null }));
+    setState((previous) => ({ ...previous, error: undefined }));
+  };
+
+  const retryReadinessCheck = () => {
+    const currentResult = state.result;
+    if (!currentResult) return;
+
+    const requestId = requestIdReference.current + 1;
+    requestIdReference.current = requestId;
+
+    const resetResult: CreatedFeedResult = {
+      ...currentResult,
+      readinessPhase: 'link_created',
+      preview: buildLoadingPreviewState(),
+    };
+
+    setState((previous) => ({
+      ...previous,
+      isConverting: false,
+      error: undefined,
+      result: resetResult,
+    }));
+    void hydratePreview(currentResult.feed, requestId, currentResult.retry, setState, requestIdReference);
   };
 
   return {
@@ -106,34 +126,92 @@ export function useFeedConversion() {
     convertFeed,
     clearError,
     clearResult,
+    retryReadinessCheck,
   };
 }
 
-async function loadPreview(feed: FeedRecord): Promise<CreatedFeedResult['preview']> {
-  const response = await window.fetch(feed.json_public_url, {
-    headers: { Accept: 'application/feed+json' },
-  });
+interface PreviewLoadResult {
+  preview: CreatedFeedResult['preview'];
+  readinessPhase: FeedReadinessPhase;
+  shouldRetry: boolean;
+}
 
-  if (!response.ok) throw new Error(PREVIEW_UNAVAILABLE_MESSAGE);
+async function loadPreview(feed: FeedRecord): Promise<PreviewLoadResult> {
+  let response: Response;
+  try {
+    response = await globalThis.fetch(feed.json_public_url, {
+      headers: { Accept: 'application/feed+json' },
+    });
+  } catch {
+    return {
+      preview: {
+        items: [],
+        error: FEED_NOT_READY_MESSAGE,
+        isLoading: false,
+      },
+      readinessPhase: 'feed_not_ready_yet',
+      shouldRetry: true,
+    };
+  }
 
-  const payload = (await response.json()) as JsonFeedResponse;
-  const items =
-    payload.items
-      ?.map((item) => normalizePreviewItem(item))
-      .filter((item): item is FeedPreviewItem => Boolean(item))
-      .slice(0, 5) || [];
+  if (!response.ok) {
+    if (isTransientReadinessStatus(response.status)) {
+      return {
+        preview: {
+          items: [],
+          error: FEED_NOT_READY_MESSAGE,
+          isLoading: false,
+        },
+        readinessPhase: 'feed_not_ready_yet',
+        shouldRetry: true,
+      };
+    }
 
-  return {
-    items,
-    error: items.length > 0 ? null : PREVIEW_UNAVAILABLE_MESSAGE,
-    isLoading: false,
-  };
+    return {
+      preview: {
+        items: [],
+        error: PREVIEW_UNAVAILABLE_MESSAGE,
+        isLoading: false,
+      },
+      readinessPhase: 'preview_unavailable',
+      shouldRetry: false,
+    };
+  }
+
+  try {
+    const payload = (await response.json()) as JsonFeedResponse;
+    const items =
+      payload.items
+        ?.map((item) => normalizePreviewItem(item))
+        .filter((item): item is FeedPreviewItem => item !== undefined)
+        .slice(0, 5) || [];
+
+    return {
+      preview: {
+        items,
+        error: undefined,
+        isLoading: false,
+      },
+      readinessPhase: 'feed_ready',
+      shouldRetry: false,
+    };
+  } catch {
+    return {
+      preview: {
+        items: [],
+        error: PREVIEW_UNAVAILABLE_MESSAGE,
+        isLoading: false,
+      },
+      readinessPhase: 'preview_unavailable',
+      shouldRetry: false,
+    };
+  }
 }
 
 function buildLoadingPreviewState(): CreatedFeedResult['preview'] {
   return {
     items: [],
-    error: null,
+    error: undefined,
     isLoading: true,
   };
 }
@@ -142,35 +220,50 @@ async function hydratePreview(
   feed: FeedRecord,
   requestId: number,
   retry: CreatedFeedResult['retry'],
-  setState: (value: ConversionState | ((prev: ConversionState) => ConversionState)) => void,
-  requestIdRef: { current: number }
+  setState: (value: ConversionState | ((previous: ConversionState) => ConversionState)) => void,
+  requestIdReference: { current: number }
 ) {
-  const preview = await loadPreview(feed).catch((error: unknown) => ({
-    items: [],
-    error: toPreviewErrorMessage(error),
-    isLoading: false,
-  }));
+  const delays = [0, ...PREVIEW_RETRY_DELAYS_MS];
+  let lastAttempt: PreviewLoadResult | undefined;
 
-  if (requestIdRef.current !== requestId) return;
+  for (const [index, delayMs] of delays.entries()) {
+    if (delayMs > 0) await wait(delayMs);
+    if (requestIdReference.current !== requestId) return;
 
-  setState((prev) => {
-    if (
-      requestIdRef.current !== requestId ||
-      !prev.result ||
-      prev.result.feed.feed_token !== feed.feed_token
-    ) {
-      return prev;
-    }
+    const attempt = await loadPreview(feed);
+    lastAttempt = attempt;
+    if (requestIdReference.current !== requestId) return;
 
-    return {
-      ...prev,
-      result: {
+    const exhausted = index === delays.length - 1;
+    if (!attempt.shouldRetry || exhausted) {
+      setPreviewResult(
         feed,
-        preview,
+        attempt.preview,
+        attempt.readinessPhase,
         retry,
+        requestId,
+        setState,
+        requestIdReference
+      );
+      return;
+    }
+  }
+
+  if (!lastAttempt) {
+    setPreviewResult(
+      feed,
+      {
+        items: [],
+        error: FEED_NOT_READY_MESSAGE,
+        isLoading: false,
       },
-    };
-  });
+      'feed_not_ready_yet',
+      retry,
+      requestId,
+      setState,
+      requestIdReference
+    );
+  }
 }
 
 async function requestFeedCreation(url: string, strategy: string, token: string): Promise<FeedRecord> {
@@ -210,7 +303,7 @@ function alternateStrategy(strategy: string): string | undefined {
 
 function shouldAutoRetry(
   strategy: string,
-  fallbackStrategy: string | null,
+  fallbackStrategy: string | undefined,
   error: unknown
 ): fallbackStrategy is string {
   if (strategy !== 'faraday' || !fallbackStrategy) return false;
@@ -260,53 +353,80 @@ const toErrorMessage = (error: unknown): string => {
   return 'An unexpected error occurred';
 };
 
-const toPreviewErrorMessage = (error: unknown): string => {
-  if (error instanceof SyntaxError) return PREVIEW_UNAVAILABLE_MESSAGE;
-  if (error instanceof Error && error.message.trim()) return error.message;
-  return PREVIEW_UNAVAILABLE_MESSAGE;
-};
+function setPreviewResult(
+  feed: FeedRecord,
+  preview: CreatedFeedResult['preview'],
+  readinessPhase: FeedReadinessPhase,
+  retry: CreatedFeedResult['retry'],
+  requestId: number,
+  setState: (value: ConversionState | ((previous: ConversionState) => ConversionState)) => void,
+  requestIdReference: { current: number }
+) {
+  setState((previous) => {
+    if (
+      requestIdReference.current !== requestId ||
+      !previous.result ||
+      previous.result.feed.feed_token !== feed.feed_token
+    ) {
+      return previous;
+    }
+
+    return {
+      ...previous,
+      result: {
+        feed,
+        preview,
+        readinessPhase,
+        retry,
+      },
+    };
+  });
+}
 
 function markConversionStarted(
-  setState: (value: ConversionState | ((prev: ConversionState) => ConversionState)) => void
+  setState: (value: ConversionState | ((previous: ConversionState) => ConversionState)) => void
 ) {
-  setState((prev) => ({ ...prev, isConverting: true, error: null }));
+  setState((previous) => ({ ...previous, isConverting: true, error: undefined }));
 }
 
 function publishCreatedFeed(
   feed: FeedRecord,
   retry: CreatedFeedResult['retry'],
   requestId: number,
-  setState: (value: ConversionState | ((prev: ConversionState) => ConversionState)) => void,
-  requestIdRef: { current: number }
+  setState: (value: ConversionState | ((previous: ConversionState) => ConversionState)) => void,
+  requestIdReference: { current: number }
 ): CreatedFeedResult {
   const result: CreatedFeedResult = {
     feed,
     preview: buildLoadingPreviewState(),
+    readinessPhase: 'link_created',
     retry,
   };
 
-  setState((prev) => ({ ...prev, isConverting: false, result, error: null }));
-  void hydratePreview(feed, requestId, retry, setState, requestIdRef);
+  setState((previous) => ({ ...previous, isConverting: false, result, error: undefined }));
+  void hydratePreview(feed, requestId, retry, setState, requestIdReference);
   return result;
 }
 
 function failConversion(
-  setState: (value: ConversionState | ((prev: ConversionState) => ConversionState)) => void,
+  setState: (value: ConversionState | ((previous: ConversionState) => ConversionState)) => void,
   message: string,
   metadata: Partial<ConversionError>
 ): never {
-  setState((prev) => ({
-    ...prev,
+  setState((previous) => ({
+    ...previous,
     isConverting: false,
     error: message,
-    result: null,
+    result: undefined,
   }));
 
   throw buildConversionError(message, metadata);
 }
 
-const extractErrorDetails = (error: unknown): { message?: string; code?: string; status?: number } | null => {
-  if (!error || typeof error !== 'object') return null;
+const extractErrorDetails = (
+  error: unknown
+): { message?: string; code?: string; status?: number } | undefined => {
+  if (!error || typeof error !== 'object') return undefined;
 
   const candidate = error as {
     error?: { message?: unknown; code?: unknown; status?: unknown };
@@ -321,6 +441,14 @@ const extractErrorDetails = (error: unknown): { message?: string; code?: string;
   return { message, code, status };
 };
 
+function isTransientReadinessStatus(status: number): boolean {
+  return status === 408 || status === 425 || status === 429 || status >= 500;
+}
+
+async function wait(durationMs: number): Promise<void> {
+  await new Promise((resolve) => globalThis.setTimeout(resolve, durationMs));
+}
+
 function retryableForFallback(error: unknown): boolean {
   const details = extractErrorDetails(error);
   const errorCode = details?.code?.toUpperCase();
@@ -343,11 +471,6 @@ function retryableForFallback(error: unknown): boolean {
   return message.includes('internal server error') || message.includes('upstream timeout');
 }
 
-function networkFailure(error: unknown, normalizedMessage: string): boolean {
-  if (error instanceof TypeError) return true;
-  return normalizedMessage.includes('network error');
-}
-
 function normalizeString(value: unknown): string | undefined {
   return typeof value === 'string' && value.trim() ? value : undefined;
 }
@@ -356,21 +479,21 @@ function normalizeStatus(value: unknown): number | undefined {
   return typeof value === 'number' && Number.isFinite(value) ? value : undefined;
 }
 
-function normalizePreviewText(value?: string): string | null {
-  if (!value) return null;
+function normalizePreviewText(value?: string): string | undefined {
+  if (!value) return undefined;
 
   const normalized = decodeHtmlEntities(value)
-    .replace(/<[^>]*>/g, ' ')
-    .replace(/\s+/g, ' ')
-    .replace(/\s+([.,!?;:])/g, '$1')
+    .replaceAll(/<[^>]*>/g, ' ')
+    .replaceAll(/\s+/g, ' ')
+    .replaceAll(/\s+([!,.:;?])/g, '$1')
     .replace(/^\d+\.\s+/, '')
     .replace(/\s+\([^)]*\)\s*$/, '')
     .trim();
 
-  return normalized || null;
+  return normalized || undefined;
 }
 
-function normalizePreviewItem(item: JsonFeedItem): FeedPreviewItem | null {
+function normalizePreviewItem(item: JsonFeedItem): FeedPreviewItem | undefined {
   const excerptSource = item.content_text || item.content_html;
   const title = normalizePreviewText(item.title) || normalizePreviewText(excerptSource) || 'Untitled item';
   const excerpt = normalizePreviewExcerpt(excerptSource, title);
diff --git a/frontend/src/hooks/useStrategies.ts b/frontend/src/hooks/useStrategies.ts
index 28dda7c7..1054bded 100644
--- a/frontend/src/hooks/useStrategies.ts
+++ b/frontend/src/hooks/useStrategies.ts
@@ -6,18 +6,17 @@ import type { StrategyRecord } from '../api/contracts';
 interface StrategiesState {
   strategies: StrategyRecord[];
   isLoading: boolean;
-  error: string | null;
+  error?: string;
 }
 
 export function useStrategies() {
   const [state, setState] = useState<StrategiesState>({
     strategies: [],
     isLoading: true,
-    error: null,
   });
 
   const fetchStrategies = async () => {
-    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    setState((previous) => ({ ...previous, isLoading: true, error: undefined }));
 
     try {
       const response = await listStrategies({
@@ -31,7 +30,6 @@ export function useStrategies() {
       setState({
         strategies: response.data.data.strategies,
         isLoading: false,
-        error: null,
       });
     } catch (error) {
       setState({
diff --git a/frontend/src/main.tsx b/frontend/src/main.tsx
index e6c6a74a..df586414 100644
--- a/frontend/src/main.tsx
+++ b/frontend/src/main.tsx
@@ -12,4 +12,4 @@ function Root() {
   );
 }
 
-render(<Root />, document.getElementById('app')!);
+render(<Root />, document.querySelector('#app')!);
diff --git a/frontend/src/styles/main.css b/frontend/src/styles/main.css
index aecafd5e..cdfeed17 100644
--- a/frontend/src/styles/main.css
+++ b/frontend/src/styles/main.css
@@ -9,7 +9,8 @@
 }
 
 .page-main {
-  width: min(100%, var(--page-max-width));
+  width: 100%;
+  max-width: var(--layout-page-max-width);
   margin: 0 auto;
   padding: clamp(0.85rem, 3vh, 2rem) clamp(var(--space-3), 3vw, var(--space-4)) var(--space-5);
 }
@@ -29,9 +30,18 @@
 }
 
 .workspace-shell {
-  width: min(100%, var(--content-max-width));
+  width: 100%;
+  max-width: var(--layout-rail-shell);
   margin: 0 auto;
   gap: var(--section-gap);
+
+  --state-frame-radius: var(--radius-lg);
+  --state-frame-border: rgb(var(--color-rgb-white) / 14%);
+  --state-frame-bg:
+    linear-gradient(180deg, rgb(var(--color-rgb-white) / 3%), transparent 58%),
+    rgb(var(--color-rgb-white) / 1.5%);
+  --state-frame-shadow:
+    inset 0 1px 0 rgb(var(--color-rgb-white) / 5%), 0 18px 36px rgb(var(--color-rgb-black) / 24%);
 }
 
 .workspace-shell--centered,
@@ -42,7 +52,7 @@
 }
 
 .workspace-hero {
-  gap: 0.35rem;
+  gap: var(--space-1);
   text-align: center;
 }
 
@@ -55,6 +65,22 @@
 .result-shell {
   width: 100%;
   margin: 0 auto;
+  padding: clamp(var(--space-4), 4vw, var(--space-5));
+}
+
+.form-shell--minimal {
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  box-shadow: none;
+}
+
+.result-shell {
+  border: var(--border-width) solid var(--state-frame-border);
+  border-radius: var(--state-frame-radius);
+  background: var(--state-frame-bg);
+  box-shadow: var(--state-frame-shadow);
+  gap: var(--section-gap);
 }
 
 .form-shell--minimal,
@@ -68,35 +94,34 @@
   opacity: 0.34;
 }
 
-.form-shell--minimal .dominant-field {
-  width: min(100%, 52rem);
-  margin: 0 auto;
+.dominant-field {
+  position: relative;
+  align-items: center;
+  min-width: 0;
 }
 
-.result-shell {
-  gap: var(--section-gap);
+.form-shell--minimal .dominant-field {
+  width: 100%;
+  max-width: 52rem;
+  margin: 0 auto;
 }
 
 .result-shell .dominant-field {
-  --input-lg-min-height: 3.85rem;
-  --input-lg-padding-inline: 1.35rem 5.2rem;
-  --input-lg-font-size: clamp(1rem, 1.8vw, 1.22rem);
-  --input-lg-letter-spacing: -0.01em;
-  --dominant-field-action-top: 0.48rem;
-  --dominant-field-action-right: 0.48rem;
-  --dominant-field-action-text-min-width: 4.2rem;
-  --dominant-field-action-text-padding-inline: 0.8rem;
-  --dominant-field-action-soft-bg: rgba(255, 255, 255, 0.045);
-  --dominant-field-action-soft-hover-bg: rgba(255, 255, 255, 0.08);
-}
-
-.dominant-field {
-  position: relative;
-  align-items: center;
+  --control-input-lg-min-height: 4rem;
+  --control-input-lg-padding-inline: 1.25rem 5rem;
+  --control-input-lg-font-size: clamp(1rem, 1.8vw, 1.22rem);
+  --control-input-lg-letter-spacing: -0.01em;
+  --dominant-field-action-top: var(--space-2);
+  --dominant-field-action-right: var(--space-2);
+  --dominant-field-action-text-min-width: 4rem;
+  --dominant-field-action-text-padding-inline: var(--space-3);
+  --dominant-field-action-soft-bg: var(--surface-base);
+  --dominant-field-action-soft-hover-bg: var(--border-subtle);
 }
 
 .field-block {
   gap: var(--space-2);
+  min-width: 0;
 }
 
 .field-block--centered {
@@ -147,6 +172,8 @@
   margin: 0;
   color: var(--text-muted);
   text-align: center;
+  font-size: var(--font-size-0);
+  line-height: 1.45;
 }
 
 .field-help--alert {
@@ -155,9 +182,10 @@
 
 .input {
   width: 100%;
-  padding: 0.95rem 1.1rem;
+  min-width: 0;
+  padding: var(--space-4);
   border: var(--border-width) solid var(--border-muted);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   background: var(--surface-elevated);
   color: var(--text-strong);
   transition:
@@ -172,9 +200,6 @@
 }
 
 .input:focus-visible,
-.btn:focus-visible,
-.utility-link:focus-visible,
-.utility-button:focus-visible,
 a:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
@@ -186,10 +211,10 @@ a:focus-visible {
 }
 
 .input--lg {
-  min-height: var(--input-lg-min-height, 4.5rem);
-  padding-inline: var(--input-lg-padding-inline, 1.35rem 4.9rem);
-  font-size: var(--input-lg-font-size, clamp(1.05rem, 2.3vw, 1.5rem));
-  letter-spacing: var(--input-lg-letter-spacing, -0.03em);
+  min-height: var(--control-input-lg-min-height, 4.5rem);
+  padding-inline: var(--control-input-lg-padding-inline, 1.25rem 5rem);
+  font-size: var(--control-input-lg-font-size, clamp(1.05rem, 2.3vw, 1.5rem));
+  letter-spacing: var(--control-input-lg-letter-spacing, -0.03em);
 }
 
 .input--minimal {
@@ -199,7 +224,7 @@ a:focus-visible {
   border-color: transparent;
   color: var(--text-muted);
   text-align: center;
-  font-size: 0.98rem;
+  font-size: var(--font-size-0);
   font-weight: 500;
   padding: 0;
 }
@@ -210,16 +235,16 @@ a:focus-visible {
 
 .dominant-field__action {
   position: absolute;
-  right: var(--dominant-field-action-right, 0.7rem);
-  top: var(--dominant-field-action-top, 0.7rem);
+  right: var(--dominant-field-action-right, var(--space-3));
+  top: var(--dominant-field-action-top, var(--space-3));
   width: var(--dominant-field-action-size, 3rem);
   height: var(--dominant-field-action-size, 3rem);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   border: 0;
-  border-radius: 999px;
-  background: var(--dominant-field-action-bg, rgba(255, 255, 255, 0.06));
+  border-radius: var(--radius-pill);
+  background: var(--dominant-field-action-bg, var(--surface-elevated));
   color: var(--text-strong);
   cursor: pointer;
   transition:
@@ -231,28 +256,18 @@ a:focus-visible {
 
 .dominant-field__action--text {
   width: auto;
-  min-width: var(--dominant-field-action-text-min-width, 4.4rem);
-  padding: 0 var(--dominant-field-action-text-padding-inline, 0.9rem);
+  min-width: var(--dominant-field-action-text-min-width, 4rem);
+  padding: 0 var(--dominant-field-action-text-padding-inline, var(--space-3));
   font-size: var(--font-size-00);
   letter-spacing: 0.04em;
   text-transform: uppercase;
 }
 
 .dominant-field__action--soft {
-  background: var(--dominant-field-action-soft-bg, rgba(255, 255, 255, 0.045));
+  background: var(--dominant-field-action-soft-bg, var(--surface-base));
   color: var(--text-muted);
 }
 
-.dominant-field__action:hover:not(:disabled) {
-  transform: translateX(0.04rem);
-  background: rgba(255, 255, 255, 0.11);
-}
-
-.dominant-field__action--soft:hover:not(:disabled) {
-  background: var(--dominant-field-action-soft-hover-bg, rgba(255, 255, 255, 0.08));
-  color: var(--text-strong);
-}
-
 .dominant-field__action:disabled {
   opacity: 0.5;
   cursor: not-allowed;
@@ -263,77 +278,27 @@ a:focus-visible {
   box-shadow: var(--focus-ring);
 }
 
-.btn {
-  min-height: 3rem;
-  padding: 0 1.25rem;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border: var(--border-width) solid transparent;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--text-strong);
-  text-decoration: none;
-  cursor: pointer;
-  font-weight: 600;
-  transition:
-    transform var(--transition-fast),
-    background-color var(--transition-fast),
-    border-color var(--transition-fast),
-    color var(--transition-fast),
-    opacity var(--transition-fast);
-}
-
-.btn:hover:not(:disabled) {
-  transform: translateY(-0.04rem);
-}
-
-.btn:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
-}
-
-.btn--primary {
-  background: var(--accent);
-  color: var(--text-inverse);
-}
-
-.btn--primary:hover:not(:disabled) {
-  background: var(--accent-strong);
-}
-
-.btn--ghost {
-  border-color: var(--border-subtle);
-  background: var(--surface-elevated);
-}
-
-.btn--ghost:hover:not(:disabled) {
-  border-color: var(--border-strong);
-  background: rgba(255, 255, 255, 0.08);
-}
-
-.btn--quiet,
-.btn--linkish {
-  min-height: auto;
-  padding: 0;
-  border: 0;
-  border-radius: 0;
-  background: transparent;
-  color: var(--text-muted);
+.dominant-field__action:hover:not(:disabled) {
+  transform: translateX(var(--motion-nudge));
+  background: var(--border-subtle);
 }
 
-.btn--quiet:hover:not(:disabled),
-.btn--linkish:hover:not(:disabled) {
-  background: transparent;
+.dominant-field__action--soft:hover:not(:disabled) {
+  background: var(--dominant-field-action-soft-hover-bg, var(--border-subtle));
   color: var(--text-strong);
 }
 
 .notice {
   display: grid;
   gap: var(--space-2);
-  width: min(100%, 38rem);
+  width: 100%;
+  max-width: var(--layout-field-max-width);
   margin: 0 auto;
   box-shadow: var(--shadow-elevated);
+  border-color: var(--state-frame-border);
+  background:
+    linear-gradient(180deg, rgb(var(--color-rgb-white) / 4%), transparent 68%),
+    rgb(var(--color-rgb-white) / 2%);
 }
 
 .notice p {
@@ -374,13 +339,13 @@ a:focus-visible {
 .featured-feed-item:hover,
 .featured-feed-item:focus-within {
   border-color: var(--border-strong);
-  background: rgba(255, 255, 255, 0.065);
+  background: var(--border-subtle);
 }
 
 .featured-feed-item__link:hover,
 .featured-feed-item__link:focus-visible {
   text-decoration: none;
-  transform: translateY(-0.04rem);
+  transform: translateY(calc(var(--motion-nudge) * -1));
 }
 
 .featured-feed-item__title {
@@ -395,12 +360,12 @@ a:focus-visible {
 }
 
 .notice[data-tone="error"] {
-  border-color: rgba(248, 113, 113, 0.22);
+  border-color: var(--border-danger);
   background: var(--bg-danger);
 }
 
 .notice[data-tone="success"] {
-  border-color: rgba(110, 231, 183, 0.22);
+  border-color: var(--border-success);
   background: var(--bg-success);
 }
 
@@ -410,9 +375,14 @@ a:focus-visible {
 }
 
 .token-gate {
-  width: min(100%, 38rem);
+  width: 100%;
+  max-width: var(--layout-field-max-width);
   margin: 0 auto;
-  padding-top: var(--space-2);
+  padding: var(--space-4);
+  border: var(--border-width) solid var(--state-frame-border);
+  border-radius: var(--radius-md);
+  background:
+    linear-gradient(180deg, rgb(var(--color-rgb-white) / 3%), transparent), rgb(var(--color-rgb-white) / 2%);
   gap: var(--space-3);
 }
 
@@ -427,16 +397,19 @@ a:focus-visible {
   margin: 0;
   color: var(--text-strong);
   font-family: var(--font-family-display);
-  font-size: clamp(1.08rem, 2.6vw, 1.32rem);
+  font-size: clamp(1.18rem, 2.3vw, 1.45rem);
   font-weight: 600;
-  line-height: var(--line-height-tight);
+  line-height: 1.02;
+  letter-spacing: -0.015em;
 }
 
 .token-gate__hint {
-  margin: 0.35rem 0 0;
+  margin: var(--space-1) 0 0;
   color: var(--text-muted);
-  font-size: var(--font-size-0);
+  font-size: var(--font-size-00);
   line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: uppercase;
 }
 
 .token-gate__actions,
@@ -452,13 +425,19 @@ a:focus-visible {
 }
 
 .token-gate__actions .btn {
-  min-height: 2.55rem;
-  padding-inline: 0.95rem;
-  border-color: var(--border-subtle);
-  background: rgba(255, 255, 255, 0.025);
-  color: var(--text-body);
-  font-size: 0.98rem;
-  font-weight: 550;
+  min-height: calc(var(--space-6) + var(--space-2));
+  padding-inline: var(--space-4);
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--text-inverse);
+  font-size: var(--font-size-0);
+  font-weight: 600;
+  letter-spacing: 0.02em;
+}
+
+.token-gate__actions .btn:hover:not(:disabled) {
+  border-color: var(--accent-strong);
+  background: var(--accent-strong);
 }
 
 .token-gate__back {
@@ -475,7 +454,7 @@ a:focus-visible {
 
 .token-gate__nudge-link {
   text-decoration: none;
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--eyebrow-color);
 }
 
 .token-gate__nudge-link:hover,
@@ -486,62 +465,49 @@ a:focus-visible {
 }
 
 .field-block--stretch.field-block--compact {
-  gap: 0.5rem;
+  gap: var(--space-2);
 }
 
 .field-block--stretch .input {
-  min-height: 3.5rem;
-  padding-inline: 1.1rem;
+  min-height: calc(var(--space-7) + var(--space-2));
+  padding-inline: var(--space-4);
   border-color: var(--border-muted);
   background: var(--surface-elevated);
 }
 
 .field-block--stretch .input::placeholder {
-  color: rgba(255, 255, 255, 0.28);
+  color: var(--text-faint);
 }
 
 .field-block--stretch .field-error {
   text-align: left;
 }
 
-.result-hero {
-  justify-items: start;
-  text-align: left;
-}
-
-.result-title {
-  margin: 0;
-  color: var(--text-strong);
-  font-family: var(--font-family-display);
-  font-size: clamp(1.9rem, 4.2vw, 2.85rem);
-  line-height: 0.98;
-  letter-spacing: -0.03em;
+.result-hero__reader {
+  border-color: var(--border-reader);
+  background: var(--surface-reader);
 }
 
 .result-meta {
   margin: 0;
-  font-size: clamp(0.98rem, 1.5vw, 1.16rem);
-  line-height: 1.18;
-  color: var(--text-strong);
+  font-size: clamp(var(--font-size-0), 1.35vw, var(--font-size-2));
+  line-height: 1.25;
+  color: var(--text-body);
   text-align: left;
 }
 
-.result-lede {
-  margin: 0;
-  color: var(--text-muted);
-  font-size: var(--font-size-1);
-}
-
 .result-preview {
   justify-items: start;
-  padding-top: var(--section-gap);
-  border-top: var(--border-default);
+  padding-top: var(--space-4);
+  border-top: var(--border-width) solid var(--state-frame-border);
 }
 
 .result-preview__intro {
   margin: 0;
   color: var(--text-muted);
-  font-size: var(--font-size-0);
+  font-size: var(--font-size-00);
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
 }
 
 .result-preview__list {
@@ -556,19 +522,25 @@ a:focus-visible {
 .preview-card {
   width: 100%;
   padding: clamp(1rem, 3vw, 1.15rem);
+  border-color: var(--state-frame-border);
+  background:
+    linear-gradient(180deg, rgb(var(--color-rgb-white) / 4%), transparent 80%),
+    rgb(var(--color-rgb-white) / 2%);
+  box-shadow: inset 0 1px 0 rgb(var(--color-rgb-white) / 4%);
 }
 
 .preview-card__title {
   margin: 0;
   color: var(--text-strong);
   font-family: var(--font-family-display);
-  font-size: clamp(1.12rem, 2vw, 1.45rem);
-  line-height: 1.08;
+  font-size: clamp(1.02rem, 1.7vw, 1.22rem);
+  line-height: 1.2;
+  letter-spacing: -0.01em;
 }
 
 .preview-card__date {
   margin: 0;
-  color: rgba(255, 255, 255, 0.62);
+  color: var(--text-muted);
   font-size: var(--font-size-00);
   letter-spacing: 0.05em;
   text-transform: uppercase;
@@ -585,7 +557,7 @@ a:focus-visible {
 }
 
 .preview-card__actions a {
-  color: rgba(255, 255, 255, 0.72);
+  color: var(--eyebrow-color);
   font-size: var(--font-size-00);
   font-weight: 600;
   letter-spacing: 0.06em;
@@ -602,13 +574,20 @@ a:focus-visible {
   flex-wrap: wrap;
   align-items: center;
   justify-content: flex-start;
-  gap: var(--space-4);
+  gap: var(--space-3);
   margin-top: calc(var(--space-1) * -1);
 }
 
+.result-actions--quiet .btn--ghost {
+  border-color: var(--state-frame-border);
+}
+
 .btn--linkish {
-  color: rgba(255, 255, 255, 0.78);
-  font-weight: 560;
+  color: var(--eyebrow-color);
+  font-weight: 600;
+  font-size: var(--font-size-00);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
 }
 
 .notice[data-state="loading"] p {
@@ -623,14 +602,16 @@ a:focus-visible {
 .notice__spinner {
   width: 1rem;
   height: 1rem;
-  border: var(--border-width) solid rgba(255, 255, 255, 0.16);
+  border: var(--border-width) solid var(--border-muted);
   border-top-color: var(--accent);
-  border-radius: 999px;
+  border-radius: var(--radius-pill);
   animation: spin 0.9s linear infinite;
 }
 
 .utility-strip {
   gap: var(--space-2);
+  width: 100%;
+  max-width: var(--layout-field-max-width);
 }
 
 .utility-strip__items {
@@ -648,6 +629,13 @@ a:focus-visible {
   cursor: pointer;
 }
 
+.utility-link:focus-visible,
+.utility-button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-color: var(--border-strong);
+}
+
 .utility-link:hover,
 .utility-button:hover {
   color: var(--text-strong);
@@ -658,7 +646,7 @@ a:focus-visible {
   text-transform: uppercase;
 }
 
-@media (min-width: 48rem) {
+@media (width >= 48rem) {
   .page-main {
     padding-top: clamp(1rem, 6vh, 4rem);
   }
@@ -669,14 +657,27 @@ a:focus-visible {
   }
 }
 
-@media (max-width: 47.9375rem) {
+@media (width < 48rem) {
+  .page-main,
+  .workspace-shell {
+    width: 100%;
+    max-width: 100%;
+    margin-inline: 0;
+  }
+
   .workspace-shell {
     gap: var(--space-4);
   }
 
+  .form-shell--minimal,
+  .result-shell {
+    padding: var(--space-4);
+    border-radius: var(--radius-md);
+  }
+
   .input--lg {
     min-height: 4rem;
-    padding-right: 4.2rem;
+    padding-right: calc(var(--space-7) + var(--space-4));
   }
 
   .result-hero,
@@ -706,15 +707,15 @@ a:focus-visible {
   }
 
   .dominant-field__action {
-    top: 0.5rem;
-    right: 0.5rem;
+    top: var(--space-2);
+    right: var(--space-2);
     width: 3rem;
     height: 3rem;
   }
 
   .dominant-field__action--text {
     min-width: 4rem;
-    padding-inline: 0.7rem;
+    padding-inline: var(--space-3);
   }
 }
 
diff --git a/frontend/src/utils/url.ts b/frontend/src/utils/url.ts
index efb7c784..01c86917 100644
--- a/frontend/src/utils/url.ts
+++ b/frontend/src/utils/url.ts
@@ -1,6 +1,6 @@
-const SCHEME_PATTERN = /^[a-z][a-z0-9+.-]*:\/\//i;
+const SCHEME_PATTERN = /^[a-z][\d+.a-z-]*:\/\//i;
 const HOST_LIKE_PATTERN =
-  /^(localhost(?::\d+)?|(?:\d{1,3}\.){3}\d{1,3}(?::\d+)?|(?:[a-z0-9-]+\.)+[a-z]{2,}(?::\d+)?)(?:[/?#].*)?$/i;
+  /^(localhost(?::\d+)?|(?:\d{1,3}\.){3}\d{1,3}(?::\d+)?|(?:[\da-z-]+\.)+[a-z]{2,}(?::\d+)?)(?:[#/?].*)?$/i;
 
 export function normalizeUserUrl(rawValue: string): string {
   const value = rawValue.trim();