Configuration Builder State Management

[jaydeluca]

Context

The Configuration Builder (#162) needs state management to track user selections
across SDK options and instrumentation configurations. This hook will be the central
state management solution for the entire Configuration Builder UI.

Related to #178 (YAML Output) - this hook's state will be consumed to generate output.

This follows the established hooks pattern in the project:

• See src/hooks/use-javaagent-data.ts for the data loading pattern
• See context/data-layer-implementation.md for the three-tier caching strategy
• The Configuration Builder should follow similar patterns but for form state

Implementation Guidance

File Location

Create: ecosystem-explorer/src/hooks/use-configuration-builder.ts
Tests: ecosystem-explorer/src/hooks/use-configuration-builder.test.ts

Reference Patterns

Existing React hooks in the project:

• src/hooks/use-javaagent-data.ts - shows proper hook structure, error handling
• Similar pattern needed but for form state instead of data fetching

Data types:

• Configuration schema types will come from src/types/configuration.ts (to be created)
• Should align with schema in ecosystem-registry/configuration/

Architecture Integration

This hook should:

1. Manage local form state
2. Optionally persist to localStorage for user convenience
3. Provide type-safe accessors for all config values
4. Handle validation state per field
5. Support undo/redo (nice to have)

Requirements

Actions to Provide

const {
  state,
  setValue,              // (path: string, value: unknown) => void
  setEnabled,            // (section: string, enabled: boolean) => void
  resetToDefaults,       // () => void
  loadFromYaml,          // (yaml: string) => void
  validateAll,           // () => ValidationResult
  clearValidationError,  // (path: string) => void
} = useConfigurationBuilder();

Persistence Strategy

• Use localStorage to persist state across sessions
• Key: otel-config-builder-state-v1
• Auto-save on every change (debounced to 500ms)
• Load from localStorage on hook initialization
• Provide manual "Export State" / "Import State" for sharing (can be done in a followup if necessary)

Acceptance Criteria

• Hook manages all required state fields
• All actions work correctly and update state immutably
• State persists to localStorage automatically
• State loads from localStorage on mount
• TypeScript types are comprehensive and accurate

Related Issues

• [Explorer] Java agent Declarative Configuration Builder UI #162: Configuration Builder UI (main feature)
• Configuration builder YAML Output Generator #178: YAML Output Generator (consumes this state)
• Instrumentation Configuration Utilities #204: Config utilities (may be used for transformations)