1 files changed, 32 insertions, 3 deletions
diff --git a/frontend/src/components/ConfigModal.tsx b/frontend/src/components/ConfigModal.tsx
index e7b1f9f..9746e4e 100644
--- a/frontend/src/components/ConfigModal.tsx
+++ b/frontend/src/components/ConfigModal.tsx
@@ -1,4 +1,7 @@
 import React from 'react'
+import { useStore } from '@nanostores/react'
+import { Link } from 'react-router-dom'
+import { documentUiEnabledStore, setDocumentUiEnabled } from '../stores'
 
 type Props = {
   isOpen: boolean
@@ -8,6 +11,8 @@ type Props = {
 }
 
 export const ConfigModal: React.FC<Props> = ({ isOpen, onClose, skipIntro, onSkipIntroChange }) => {
+  const documentUiEnabled = useStore(documentUiEnabledStore)
+
   if (!isOpen) return null
 
   return (
@@ -15,9 +20,9 @@ export const ConfigModal: React.FC<Props> = ({ isOpen, onClose, skipIntro, onSki
       <div className="config-modal" onClick={e => e.stopPropagation()}>
         <div className="modal-header">
           <h2>Configuration</h2>
-          <button className="close-btn" onClick={onClose}>×</button>
+          <button className="close-btn" onClick={onClose}>{'\u00D7'}</button>
         </div>
-        
+
         <div className="modal-content">
           <div className="config-option">
             <label className="config-label">
@@ -33,8 +38,32 @@ export const ConfigModal: React.FC<Props> = ({ isOpen, onClose, skipIntro, onSki
               Skip the loading screen animation on startup
             </div>
           </div>
+
+          <div className="config-option" style={{ marginTop: '16px' }}>
+            <label className="config-label">
+              <input
+                type="checkbox"
+                checked={documentUiEnabled}
+                onChange={e => setDocumentUiEnabled(e.target.checked)}
+                className="config-checkbox"
+              />
+              <span className="config-text">Enable Document UI (Experimental)</span>
+            </label>
+            <div className="config-description">
+              Replace the directive management interface with an interactive document editor. This is a proof of concept.
+            </div>
+            {documentUiEnabled && (
+              <Link
+                to="/directives"
+                style={{ display: 'inline-block', marginTop: '8px', color: '#ff66cc', fontSize: '0.9em' }}
+                onClick={onClose}
+              >
+                Open Directives Editor {'\u2192'}
+              </Link>
+            )}
+          </div>
         </div>
-        
+
         <div className="modal-footer">
           <button className="modal-btn" onClick={onClose}>Close</button>
         </div>