extract pages

frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx

@@ -3,6 +3,7 @@ import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelection
 import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';
 import PageSelectionInput from '@app/components/pageEditor/bulkSelectionPanel/PageSelectionInput';
 import SelectedPagesDisplay from '@app/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay';
+import PageSelectionSyntaxHint from '@app/components/shared/PageSelectionSyntaxHint';
 import AdvancedSelectionPanel from '@app/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel';
 
 interface BulkSelectionPanelProps {
@@ -56,10 +57,12 @@ const BulkSelectionPanel = ({
         onToggleAdvanced={setAdvancedOpened}
       />
 
+      <PageSelectionSyntaxHint input={csvInput} maxPages={maxPages} variant="panel" />
+
       <SelectedPagesDisplay
         selectedPageIds={selectedPageIds}
         displayDocument={displayDocument}
-        syntaxError={syntaxError}
+        syntaxError={null}
       />
 
       <AdvancedSelectionPanel

frontend/src/core/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css

@@ -252,6 +252,25 @@
   color: var(--text-brand-accent);
 }
 
+/* Compact error container for inline tool settings */
+.errorCompact {
+  background-color: var(--bg-raised);
+  border: 0.0625rem solid var(--border-default);
+  border-radius: 0.75rem;
+  padding: 0.5rem 0.75rem;
+  margin-top: 0.5rem;
+  max-width: 100%;
+}
+
+/* Two-line clamp for compact error text */
+.errorTextClamp {
+  color: var(--text-brand-accent);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
 /* Dark-mode adjustments */
 :global([data-mantine-color-scheme='dark']) .selectedList {
   background-color: var(--bg-raised);

frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx

@@ -0,0 +1,45 @@
+import { useEffect, useState } from 'react';
+import { Text } from '@mantine/core';
+import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';
+
+interface PageSelectionSyntaxHintProps {
+  input: string;
+  /** Optional known page count; if not provided, a large max is used for syntax-only checks */
+  maxPages?: number;
+  /** panel = full bulk panel style, compact = inline tool style */
+  variant?: 'panel' | 'compact';
+}
+
+const FALLBACK_MAX_PAGES = 100000; // large upper bound for syntax validation without a document
+
+const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSelectionSyntaxHintProps) => {
+  const [syntaxError, setSyntaxError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const text = (input || '').trim();
+    if (!text) {
+      setSyntaxError(null);
+      return;
+    }
+
+    try {
+      const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES);
+      setSyntaxError(warning ? 'There is a syntax issue. See Page Selection tips for help.' : null);
+    } catch {
+      setSyntaxError('There is a syntax issue. See Page Selection tips for help.');
+    }
+  }, [input, maxPages]);
+
+  if (!syntaxError) return null;
+
+  return (
+    <div className={variant === 'panel' ? classes.selectedList : classes.errorCompact}>
+      <Text size="xs" className={variant === 'panel' ? classes.errorText : classes.errorTextClamp}>{syntaxError}</Text>
+    </div>
+  );
+};
+
+export default PageSelectionSyntaxHint;
+
+

frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx

@@ -1,6 +1,7 @@
 import { Stack, TextInput } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { ExtractPagesParameters } from "@app/hooks/tools/extractPages/useExtractPagesParameters";
+import PageSelectionSyntaxHint from "@app/components/shared/PageSelectionSyntaxHint";
 
 interface ExtractPagesSettingsProps {
   parameters: ExtractPagesParameters;
@@ -25,6 +26,7 @@ const ExtractPagesSettings = ({ parameters, onParameterChange, disabled = false
         disabled={disabled}
         required
       />
+      <PageSelectionSyntaxHint input={parameters.pageNumbers || ''} variant="compact" />
     </Stack>
   );
 };