Implemented auto-completion

src/main/frontend/app/app.css

@@ -148,6 +148,13 @@ body {
   @apply border-l-4 border-yellow-400 bg-yellow-200/30 transition-colors;
 }
 
+/* XSD validation inline error underline.
+   The monaco-xsd-code-completion library defines .xml-lint--fetal (typo), not .xml-lint--fatal-error,
+   so we define the red color ourselves here. */
+.monaco-editor .xml-lint.xml-lint--fatal-error {
+  border-color: #ff2424;
+}
+
 .monaco-editor .hunk-glyph-unchecked,
 .monaco-editor .hunk-glyph-checked {
   cursor: pointer !important;

src/main/frontend/app/providers/frankconfig-xsd-provider.tsx

@@ -0,0 +1,28 @@
+import { createContext, useContext, useEffect, useState, type ReactNode } from 'react'
+import { fetchFrankConfigXsd } from '~/services/xsd-service'
+
+interface FrankConfigXsdContextValue {
+  xsdContent: string | null
+}
+
+const FrankConfigXsdContext = createContext<FrankConfigXsdContextValue | null>(null)
+
+export function FrankConfigXsdProvider({ children }: { children: ReactNode }) {
+  const [xsdContent, setXsdContent] = useState<string | null>(null)
+
+  useEffect(() => {
+    fetchFrankConfigXsd()
+      .then(setXsdContent)
+      .catch((error) => console.error('Failed to load FrankConfig XSD:', error))
+  }, [])
+
+  return <FrankConfigXsdContext.Provider value={{ xsdContent }}>{children}</FrankConfigXsdContext.Provider>
+}
+
+export function useFrankConfigXsd(): FrankConfigXsdContextValue {
+  const context = useContext(FrankConfigXsdContext)
+  if (!context) {
+    throw new Error('useFrankConfigXsd must be used within a FrankConfigXsdProvider')
+  }
+  return context
+}

src/main/frontend/app/routes/app-layout.tsx

@@ -1,5 +1,6 @@
 import Navbar from '~/components/navbar/navbar'
 import { FrankDocProvider } from '~/providers/frankdoc-provider'
+import { FrankConfigXsdProvider } from '~/providers/frankconfig-xsd-provider'
 import AppContent from '~/components/app-content'
 import { useEffect, useState } from 'react'
 import { useProjectStore, getStoredProjectName } from '~/stores/project-store'
@@ -39,12 +40,14 @@ export default function AppLayout() {
 
   return (
     <FrankDocProvider>
-      <div className="flex h-screen">
-        <Navbar />
-        <main className="grow overflow-auto">
-          <AppContent />
-        </main>
-      </div>
+      <FrankConfigXsdProvider>
+        <div className="flex h-screen">
+          <Navbar />
+          <main className="grow overflow-auto">
+            <AppContent />
+          </main>
+        </div>
+      </FrankConfigXsdProvider>
     </FrankDocProvider>
   )
 }