Merge pull request #150 from eviltester/140-text-to-control-auto-preview-number-rather-than-fix-10-as-default

configurable row count

Author: eviltester

AGENTS.md

@@ -60,6 +60,7 @@ When changing frontend UI code, Storybook stories, UI test abstractions, or brow
 
 - read `docs/frontend-component-migration-plan.md` before making changes
 - read `docs/frontend-component-architecture.md` for the current page/component/service layering model
+- read `docs/frontend-legacy-ui-elimination-plan.md` when changing or discovering UI code that still uses legacy controls, broad imperative helpers, document-scoped lookup, or compatibility facades
 - prefer the `Controller + View + createComponent` pattern for new or migrated UI components
 - keep components mounted into one explicit root element
 - avoid global `document.querySelector`/`getElementById` inside reusable components; query within the component root instead

apps/web/src/stories/export-format-interactions.js

@@ -1,7 +1,7 @@
 import { expect, userEvent, waitFor, within } from 'storybook/test';
 
 async function clickByText(canvas, text) {
-  const button = canvas.getByText(text);
+  const button = canvas.getByRole('button', { name: text });
   await userEvent.click(button);
   return button;
 }
@@ -48,7 +48,7 @@ async function playSetTextFromGrid({ canvasElement }) {
 
 async function playCsvRoundTrip({ canvasElement }) {
   const canvas = within(canvasElement);
-  await clickByText(canvas, 'Preview (10)');
+  await clickByText(canvas, 'Preview');
   await waitFor(() => expect(canvas.getByText('Edit')).toBeTruthy());
 
   const textArea = await setTextareaValue(canvasElement, 'Name,Role\nAda,Engineer\nBob,Tester');
@@ -70,12 +70,12 @@ async function playJsonOptionsPreview({ canvasElement }) {
 
 async function playPreviewEditMode({ canvasElement }) {
   const canvas = within(canvasElement);
-  const modeButton = canvas.getByText('Preview (10)');
+  const modeButton = canvas.getByRole('button', { name: 'Preview' });
   await userEvent.click(modeButton);
-  await waitFor(() => expect(canvas.getByText('Edit')).toBeTruthy());
+  await waitFor(() => expect(canvas.getByRole('button', { name: 'Edit' })).toBeTruthy());
 
-  await userEvent.click(canvas.getByText('Edit'));
-  await waitFor(() => expect(canvas.getByText('Preview (10)')).toBeTruthy());
+  await userEvent.click(canvas.getByRole('button', { name: 'Edit' }));
+  await waitFor(() => expect(canvas.getByRole('button', { name: 'Preview' })).toBeTruthy());
 }
 
 async function playDelimitedOptionsPreview({ canvasElement }) {
@@ -103,7 +103,8 @@ async function playPreviewAlreadyRendered({ canvasElement }) {
     expect(textArea?.value?.length || 0).toBeGreaterThan(0);
   });
 
-  await expect(canvas.getByRole('button', { name: 'Preview (10)' })).toBeTruthy();
+  await expect(canvas.getByRole('button', { name: 'Preview' })).toBeTruthy();
+  await expect(canvas.getByRole('spinbutton', { name: 'Preview row count' })).toHaveValue(10);
   await userEvent.click(canvas.getByRole('button', { name: 'Copy' }));
   await waitFor(() => {
     expect(textArea?.value?.length || 0).toBeGreaterThan(0);

apps/web/src/stories/export-preview-story-harness.js

@@ -265,11 +265,12 @@ function setCheckboxValue(input, checked) {
 }
 
 function setPreviewRowLimit(surface, value) {
-  const previewButton = surface.querySelector('#previewEditModeButton');
-  if (!previewButton) {
+  const previewRowsInput = surface.querySelector('#previewRowsCount');
+  if (!previewRowsInput) {
     return;
   }
-  previewButton.textContent = `Preview (${value})`;
+  previewRowsInput.value = String(value);
+  previewRowsInput.dispatchEvent(new Event('input', { bubbles: true }));
 }
 
 function getActiveExportSelection(surface) {
@@ -454,6 +455,9 @@ function renderGridPreviewStory({
   const workspace = createImportExportWorkspaceComponent({
     root: workspaceHost,
     documentObj: document,
+    props: {
+      previewRowLimit,
+    },
     services: {
       importExportControls: legacyControls,
     },
@@ -509,7 +513,6 @@ function renderGridPreviewStory({
     return result;
   };
 
-  importExportController.previewRowLimit = previewRowLimit;
   setPreviewRowLimit(surface, previewRowLimit);
   withScopedDocument(surface, () => {
     selectExportFormat(surface, format);

apps/web/src/stories/import-export-workspace.stories.js

@@ -53,6 +53,9 @@ function renderImportExportWorkspaceStory(args) {
   const component = createImportExportWorkspaceComponent({
     root,
     documentObj: document,
+    props: {
+      previewRowLimit: args.previewRowLimit,
+    },
   });
 
   component.setExporter(exporter);
@@ -86,12 +89,16 @@ const meta = {
   },
   args: {
     format: 'csv',
+    previewRowLimit: 10,
   },
   argTypes: {
     format: {
       control: 'select',
       options: ['csv', 'json', 'markdown'],
     },
+    previewRowLimit: {
+      control: { type: 'number', min: 1, max: 50, step: 1 },
+    },
   },
   render: renderImportExportWorkspaceStory,
 };
@@ -103,12 +110,13 @@ export const Default = {
     docs: {
       description: {
         story:
-          'Shows the composed app-side import/export workspace mounted through the new Phase 6 feature boundary. Click Set Text From Grid to refresh preview text, switch formats, and use the options panel inside the same mounted component tree.',
+          'Shows the composed app-side import/export workspace mounted through the new Phase 6 feature boundary. Use the compact preview row-count input next to Preview to change the sample size, click Set Text From Grid to refresh preview text, and switch formats inside the same mounted component tree.',
       },
     },
   },
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
+    await expect(canvas.getByRole('spinbutton', { name: 'Preview row count' })).toHaveValue(10);
     await userEvent.click(canvas.getByRole('button', { name: 'v Set Text From Grid v' }));
     await waitFor(() => {
       expect(canvasElement.querySelector('#markdownarea')?.value?.length || 0).toBeGreaterThan(0);
@@ -128,7 +136,7 @@ export const JsonPreview = {
     docs: {
       description: {
         story:
-          'Shows the same workspace after switching to JSON so the shared format selector, preview editor, and options panel can be reviewed together in a non-CSV state.',
+          'Shows the same workspace after switching to JSON so the shared format selector, preview editor, row-count control, and options panel can be reviewed together in a non-CSV state.',
       },
     },
   },

apps/web/src/stories/text-preview-editor.stories.js

@@ -43,7 +43,7 @@ export const PreviewMode = {
     docs: {
       description: {
         story:
-          'Preview-mode state with Auto Preview enabled and the preview-row count reflected in the toggle button label.',
+          'Shows Preview mode with Auto Preview enabled and the dedicated preview row-count spinbutton set to 10. Reviewers should hover the help button, confirm the tooltip mentions the first 10 rows, and try changing the Preview row count to see how the preview-specific guidance follows that value while the toggle button remains labeled Preview.',
       },
     },
   },
@@ -59,7 +59,8 @@ export const PreviewMode = {
     });
 
     await expect(autoPreviewCheckbox).toBeEnabled();
-    await expect(canvas.getByRole('button', { name: 'Preview (10)' })).toBeTruthy();
+    await expect(canvas.getByRole('button', { name: 'Preview' })).toBeTruthy();
+    await expect(canvas.getByRole('spinbutton', { name: 'Preview row count' })).toHaveValue(10);
   },
 };
 

apps/web/styles.css

@@ -950,6 +950,10 @@ body.theme-dark .generator-status-text[data-severity='info'] {
   width: 6rem;
 }
 
+.app-preview-row-count-control #previewRowsCount {
+  width: 3.25rem;
+}
+
 #generator-preview-grid {
   width: 100%;
   height: 420px;