feat: Document UI for directive orchestration with Lexical editor (#93)

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Save previous goal on update and include history in re-planning prompt

* feat: soryu-co/soryu - makima: Install Lexical and create base document editor component

* feat: soryu-co/soryu - makima: Create directive file system sidebar and document layout

* feat: soryu-co/soryu - makima: Create custom Lexical step diagram block

* feat: soryu-co/soryu - makima: Add context menu and goal auto-update integration

* WIP: heartbeat checkpoint

1 files changed, 37 insertions, 1 deletions

diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx
index 318a9b9..051c210 100644
--- a/frontend/src/components/VNInterface.tsx
+++ b/frontend/src/components/VNInterface.tsx
@@ -9,9 +9,11 @@ import {
   showSettingsModalStore,
   isVisibleStore,
   yenBalanceStore,
+  documentUiEnabledStore,
   toggleStandby,
   toggleShowChoices,
-  updateTime
+  updateTime,
+  setDocumentUiEnabled,
 } from '../stores'
 
 interface VNInterfaceProps {
@@ -26,6 +28,7 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
   const showSettingsModal = useStore(showSettingsModalStore)
   const isVisible = useStore(isVisibleStore)
   const yenBalance = useStore(yenBalanceStore)
+  const documentUiEnabled = useStore(documentUiEnabledStore)
 
   // Fade in effect on mount
   useEffect(() => {
@@ -113,6 +116,14 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
                 <span className="info-value">Contracts</span>
               </Link>
             </div>
+            {documentUiEnabled && (
+              <div className="status-item">
+                <Link to="/directives" style={{ color: '#ff66cc', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <span className="info-label">Docs:</span>
+                  <span className="info-value">Directives</span>
+                </Link>
+              </div>
+            )}
           </div>
         </div>
       </div>
@@ -198,6 +209,31 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
                 </div>
               </div>
               <div className="settings-section">
+                <h3>Experimental</h3>
+                <div className="setting-item">
+                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+                    <input
+                      type="checkbox"
+                      checked={documentUiEnabled}
+                      onChange={(e) => setDocumentUiEnabled(e.target.checked)}
+                    />
+                    Document UI (Experimental)
+                  </label>
+                  <p style={{ fontSize: '0.8em', color: '#9ca3af', marginTop: '4px' }}>
+                    Replace the directive management interface with an interactive document editor. This is a proof of concept.
+                  </p>
+                  {documentUiEnabled && (
+                    <Link
+                      to="/directives"
+                      style={{ display: 'inline-block', marginTop: '8px', color: '#ff66cc', fontSize: '0.9em' }}
+                      onClick={() => showSettingsModalStore.set(false)}
+                    >
+                      Open Directives Editor {'\u2192'}
+                    </Link>
+                  )}
+                </div>
+              </div>
+              <div className="settings-section">
                 <h3>Audio</h3>
                 <div className="setting-item">
                   <label>Master Volume</label>