Add config builder component

[ScriptSmith]

No description provided.

[greptile-apps]

Greptile Summary

This PR adds an interactive ConfigBuilder component to the Hadrian docs site, allowing users to visually construct a hadrian.toml configuration file section-by-section and download or copy the generated TOML. The implementation generates a JSON schema from the Rust codebase at build time and drives a fully schema-aware React form with syntax-highlighted live preview powered by Shiki.

Key findings:

• Error handling: The Shiki createHighlighter promise in TomlPreview.tsx lacks a .catch() handler, leaving an unhandled promise rejection path if the highlighter fails to initialize (e.g., network failure loading the Wasm bundle). This triggers React Strict Mode warnings and may suppress the fallback plain-text display.

The core logic and state management are solid. The component correctly resolves schema references and renders the appropriate field types for the configuration builder.

Confidence Score: 4/5

• Safe to merge pending the addition of a .catch() handler to the Shiki highlighter promise.
• The implementation is solid with correct schema resolution, state management, and component composition. The only verified issue is a missing error handler on the Shiki highlighter promise in TomlPreview.tsx, which is straightforward to fix. With this correction, the PR is low-risk. The schema correctly uses inlined oneOf variants, and the code handles them properly.
• docs/components/ConfigBuilder/TomlPreview.tsx — add .catch() to the Shiki highlighter promise

Sequence Diagram

sequenceDiagram
    participant User
    participant ConfigBuilder
    participant SectionForm/ProvidersSection
    participant SchemaField
    participant toml-utils
    participant TomlPreview
    participant Shiki

    User->>ConfigBuilder: Select tab / change field
    ConfigBuilder->>SectionForm/ProvidersSection: Pass section schema + value
    SectionForm/ProvidersSection->>SchemaField: Resolve schema (fullyResolve)
    SchemaField-->>SectionForm/ProvidersSection: Render typed field component
    SectionForm/ProvidersSection-->>ConfigBuilder: onChange(newValue)
    ConfigBuilder->>ConfigBuilder: dispatch SET_VALUE → useReducer
    ConfigBuilder->>toml-utils: generateToml(state, rootSchema)
    toml-utils->>toml-utils: stripEmpty → coerceTypes → smol-toml stringify
    toml-utils-->>ConfigBuilder: TOML string
    ConfigBuilder->>TomlPreview: toml prop update
    TomlPreview->>Shiki: codeToHtml(toml) [debounced 150ms]
    Shiki-->>TomlPreview: highlighted HTML
    TomlPreview-->>User: Render syntax-highlighted preview
    User->>TomlPreview: Copy / Download
    TomlPreview-->>User: Clipboard write / Blob download

Loading

_{Last reviewed commit: d0612ef}

[greptile-apps]

The getHighlighter().then(...) call has no .catch() handler. If the Shiki highlighter fails to initialize (network issues, missing Wasm bundle, etc.), the error becomes an unhandled promise rejection, which triggers React Strict Mode warnings and may suppress the fallback plain-text display.

Suggested change

	useEffect(() => {
	clearTimeout(debounceRef.current);
	debounceRef.current = setTimeout(() => {
	getHighlighter().then((hl) => {
	setHtml(hl.codeToHtml(toml, { lang: "toml", theme }));
	});
	}, 150);
	return () => clearTimeout(debounceRef.current);
	}, [toml, theme]);
	getHighlighter()
	.then((hl) => {
	setHtml(hl.codeToHtml(toml, { lang: "toml", theme }));
	})
	.catch(() => {
	// Shiki failed to load; the plain-text fallback will remain visible
	});

Prompt To Fix With AI

This is a comment left during a code review.
Path: docs/components/ConfigBuilder/TomlPreview.tsx
Line: 27-35

Comment:
The `getHighlighter().then(...)` call has no `.catch()` handler. If the Shiki highlighter fails to initialize (network issues, missing Wasm bundle, etc.), the error becomes an unhandled promise rejection, which triggers React Strict Mode warnings and may suppress the fallback plain-text display.

```suggestion
      getHighlighter()
        .then((hl) => {
          setHtml(hl.codeToHtml(toml, { lang: "toml", theme }));
        })
        .catch(() => {
          // Shiki failed to load; the plain-text fallback will remain visible
        });
```

How can I resolve this? If you propose a fix, please make it concise.