Tighten feed result surface

Author: gildesmarais

frontend/src/__tests__/App.test.tsx

@@ -126,8 +126,9 @@ describe('App', () => {
 
     render(<App />);
 
-    expect(screen.getByText('Feed ready')).toBeInTheDocument();
+    expect(screen.getByText('Ready')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Create another feed' })).toBeInTheDocument();
+    expect(screen.queryByText('Run your own instance')).not.toBeInTheDocument();
 
     await waitFor(() => {
       expect(screen.getByText('Example Feed')).toBeInTheDocument();

frontend/src/__tests__/ResultDisplay.test.tsx

@@ -25,7 +25,7 @@ describe('ResultDisplay', () => {
   it('renders utility actions and preview state', async () => {
     render(<ResultDisplay result={mockResult} onCreateAnother={mockOnCreateAnother} />);
 
-    expect(screen.getByText('Feed ready')).toBeInTheDocument();
+    expect(screen.getByText('Ready')).toBeInTheDocument();
     expect(screen.getByText('Test Feed')).toBeInTheDocument();
     expect(screen.getByRole('button', { name: 'Copy feed URL' })).toBeInTheDocument();
     expect(screen.getByRole('link', { name: 'Open feed' })).toBeInTheDocument();

frontend/src/components/App.tsx

@@ -146,13 +146,15 @@ export function App() {
 
   return (
     <section class="workspace-shell">
-      <header class="workspace-frame">
+      <header class={`workspace-frame${result ? ' workspace-frame--compact' : ''}`}>
         <div class="workspace-frame__masthead">
           <BrandLockup />
         </div>
-        <div class="workspace-frame__titleblock">
-          <h1>Turn web pages into stable feeds.</h1>
-        </div>
+        {!result && (
+          <div class="workspace-frame__titleblock">
+            <h1>Turn web pages into stable feeds.</h1>
+          </div>
+        )}
       </header>
 
       {(metadataError || tokenStateError) && (
@@ -197,15 +199,17 @@ export function App() {
         </div>
       )}
 
-      <InstanceInfo
-        feedCreationEnabled={feedCreation.enabled}
-        accessTokenRequired={feedCreation.access_token_required}
-        hasAccessToken={hasToken}
-        onClearToken={() => {
-          clearToken();
-          setShowTokenPrompt(false);
-        }}
-      />
+      {!result && (
+        <InstanceInfo
+          feedCreationEnabled={feedCreation.enabled}
+          accessTokenRequired={feedCreation.access_token_required}
+          hasAccessToken={hasToken}
+          onClearToken={() => {
+            clearToken();
+            setShowTokenPrompt(false);
+          }}
+        />
+      )}
     </section>
   );
 }

frontend/src/components/ResultDisplay.tsx

@@ -80,16 +80,14 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
   return (
     <section id="feed-result" class="surface surface--primary surface--result" aria-live="polite">
       <div class="surface__header">
-        <p class="eyebrow">Feed ready</p>
+        <p class="eyebrow">Ready</p>
         <h2>{displayTitle}</h2>
-        <p class="muted-copy">
-          Copy the generated feed URL immediately, or open the endpoint to inspect the rendered output.
-        </p>
+        <p class="muted-copy">The endpoint is live.</p>
       </div>
 
       <div class="result-layout">
-        <section class="surface__section surface__section--strong">
-          <label class="field-block" htmlFor="feed-url">
+        <section class="surface__section surface__section--strong result-primary">
+          <label class="field-block result-url" htmlFor="feed-url">
             <span class="field-label">Feed URL</span>
             <input
               id="feed-url"
@@ -108,27 +106,30 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
             <a href={fullUrl} class="btn btn--secondary" target="_blank" rel="noopener noreferrer">
               Open feed
             </a>
-            <button type="button" class="btn btn--ghost" onClick={onCreateAnother}>
-              Create another feed
-            </button>
           </div>
 
           {copyNotice && (
             <div class="notice notice--success" role="status">
               <p>{copyNotice}</p>
             </div>
           )}
+
+          <div class="result-secondary">
+            <button type="button" class="btn btn--ghost" onClick={onCreateAnother}>
+              Create another feed
+            </button>
+          </div>
         </section>
 
         <aside class="surface__section feed-preview" aria-label="Feed preview">
           <div class="feed-preview__header">
-            <p class="eyebrow">Preview</p>
-            <h3>{feedTitle || 'Previewing feed items'}</h3>
+            <p class="eyebrow">Recent entries</p>
+            <h3>Preview</h3>
           </div>
           {isLoadingPreview ? (
             <div class="preview-loading">
               <span class="status-card__spinner" aria-hidden="true" />
-              <p>Loading recent entries</p>
+              <p>Loading entries</p>
             </div>
           ) : feedItems.length > 0 ? (
             <ol class="feed-preview__list">
@@ -137,9 +138,7 @@ export function ResultDisplay({ result, onCreateAnother }: ResultDisplayProps) {
               ))}
             </ol>
           ) : (
-            <p class="muted-copy">
-              The feed endpoint is live. Preview items were not available for this response.
-            </p>
+            <p class="muted-copy">Preview items were not available for this response.</p>
           )}
         </aside>
       </div>

frontend/src/styles/main.css

@@ -163,6 +163,11 @@ textarea {
   gap: var(--space-3);
 }
 
+.workspace-frame--compact {
+  padding-top: 0.9rem;
+  padding-bottom: 0.9rem;
+}
+
 .workspace-frame__masthead,
 .result-actions,
 .surface__toolbar,
@@ -483,6 +488,24 @@ a:focus-visible {
   align-items: start;
 }
 
+.result-primary,
+.result-secondary {
+  display: grid;
+}
+
+.result-primary {
+  gap: var(--space-4);
+}
+
+.result-secondary {
+  justify-items: start;
+}
+
+.result-url .input {
+  min-height: 3.25rem;
+  font-size: var(--font-size-00);
+}
+
 .field-stack--dense {
   gap: var(--space-4);
 }
@@ -507,6 +530,8 @@ a:focus-visible {
 
 .result-actions {
   align-items: stretch;
+  grid-template-columns: repeat(2, minmax(0, auto));
+  justify-content: start;
 }
 
 .feed-preview__header h3 {
@@ -648,6 +673,10 @@ a:focus-visible {
   .form-toolbar {
     grid-template-columns: 1fr;
   }
+
+  .result-secondary {
+    justify-items: stretch;
+  }
 }
 
 @keyframes spin {