feat(ui): add collapsible sections to configuration layout

Author: rstrahan

patterns/unified/template.yaml

@@ -221,6 +221,8 @@ Resources:
           ocr:
             order: 3
             type: object
+            collapsible: true
+            defaultExpanded: false
             sectionLabel: OCR Configuration
             description: "Not used when BDA is enabled - BDA handles OCR internally"
             dependsOn: { field: "use_bda", value: false }
@@ -581,7 +583,9 @@ Resources:
           classification:
             order: 4
             type: object
-            sectionLabel: Classification Inference
+            collapsible: true
+            defaultExpanded: false
+            sectionLabel: Classification Configuration
             description: "Not used when BDA is enabled - BDA handles classification internally"
             dependsOn: { field: "use_bda", value: false }
             required:
@@ -730,7 +734,9 @@ Resources:
             order: 5
             type: object
             format: section
-            sectionLabel: Extraction Inference
+            collapsible: true
+            defaultExpanded: false
+            sectionLabel: Extraction Configuration
             description: "Not used when BDA is enabled - BDA handles extraction internally"
             dependsOn: { field: "use_bda", value: false }
             required:
@@ -880,6 +886,8 @@ Resources:
           assessment:
             order: 6
             type: object
+            collapsible: true
+            defaultExpanded: false
             sectionLabel: Assessment & HITL Configuration
             properties:
               hitl_enabled:
@@ -1048,7 +1056,9 @@ Resources:
           summarization:
             order: 7
             type: object
-            sectionLabel: Summarization Inference
+            collapsible: true
+            defaultExpanded: false
+            sectionLabel: Summarization Configuration
             properties:
               enabled:
                 type: boolean
@@ -1133,9 +1143,11 @@ Resources:
                 description: Task prompt - supports parameters {DOCUMENT_TEXT} and {EXTRACTION_RESULTS}. Optionally use <<CACHEPOINT>> to separate static and dynamic elements of prompt for Bedrock prompt caching.
                 order: 8
           evaluation:
-            order: 8
+            order: 9
             type: object
-            sectionLabel: Evaluation Inference
+            collapsible: true
+            defaultExpanded: false
+            sectionLabel: Evaluation Configuration
             properties:
               enabled:
                 type: boolean
@@ -1218,8 +1230,10 @@ Resources:
                     description: Task prompt for LLM evaluation - supports placeholders {DOCUMENT_CLASS}, {ATTRIBUTE_NAME}, {ATTRIBUTE_DESCRIPTION}, {EXPECTED_VALUE} and {ACTUAL_VALUE}
                     order: 7
           discovery:
-            order: 9
+            order: 10
             type: object
+            collapsible: true
+            defaultExpanded: false
             sectionLabel: Discovery Configuration
             description: Configuration for document class discovery functionality
             properties:
@@ -1562,8 +1576,10 @@ Resources:
                     minimum: 1
                     order: 9
           agents:
-            order: 10
+            order: 11
             type: object
+            collapsible: true
+            defaultExpanded: false
             sectionLabel: Agent Configuration
             description: Configuration for AI agents used in the system
             properties:
@@ -1647,9 +1663,11 @@ Resources:
                         default: 24
                         order: 2
           rule_validation:
-            order: 11
+            order: 8
             type: object
-            sectionLabel: Rule Validation Inference
+            collapsible: true
+            defaultExpanded: false
+            sectionLabel: Rule Validation Configuration
             properties:
               enabled:
                 type: boolean

src/ui/src/components/configuration-layout/ConfigBuilder.tsx

@@ -15,6 +15,7 @@ import {
   Button,
   Header,
   Container,
+  ExpandableSection,
   Modal,
   Tabs,
 } from '@cloudscape-design/components';
@@ -454,6 +455,9 @@ const ConfigBuilder = ({
   // Track expanded state for all list items across the form - default to collapsed
   const [expandedItems, setExpandedItems] = useState<Record<string, boolean>>({});
 
+  // Track expanded state for collapsible top-level sections
+  const [expandedSections, setExpandedSections] = useState<Record<string, boolean>>({});
+
   // State for add item modals
   const [activeAddModal, setActiveAddModal] = useState<string | null>(null); // Path of the list currently showing add modal
   const [newItemName, setNewItemName] = useState('');
@@ -1620,6 +1624,27 @@ const ConfigBuilder = ({
       const sectionTitle = property.sectionLabel as string;
       console.log(`Creating section container for ${key} with title: ${sectionTitle}`); // nosemgrep: javascript.lang.security.audit.unsafe-formatstring.unsafe-formatstring - Debug logging with controlled internal data
 
+      // Support collapsible top-level sections via schema property `collapsible: true`
+      // defaultExpanded controls whether section starts expanded (defaults to true for backward compat)
+      if (property.collapsible === true || property.collapsible === 'true') {
+        const defaultExpanded = property.defaultExpanded === true || property.defaultExpanded === 'true'; // default to collapsed
+        const isExpanded = expandedSections[key] !== undefined ? expandedSections[key] : defaultExpanded;
+
+        return (
+          <ExpandableSection
+            key={key}
+            variant="container"
+            headerText={sectionTitle}
+            expanded={isExpanded}
+            onChange={({ detail }) => {
+              setExpandedSections((prev) => ({ ...prev, [key]: detail.expanded }));
+            }}
+          >
+            <ExtBox padding="s">{renderField(key, property)}</ExtBox>
+          </ExpandableSection>
+        );
+      }
+
       return (
         <Container key={key} header={<Header variant="h3">{sectionTitle}</Header>}>
           <ExtBox padding="s">{renderField(key, property)}</ExtBox>