From d1fdfb140cc440664f77a24886172f9976a05a31 Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Tue, 28 Apr 2026 19:12:52 +0100
Subject: feat: revert broken directive PRs, re-implement Lexical document
 orchestrator (#98)

* feat: soryu-co/soryu - makima: Revert broken directive PRs and verify clean build

* feat: soryu-co/soryu - makima: Re-implement frontend: Lexical document editor with feature flag and base components

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Add contract blocks, expandable log rows, and interaction controls

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: End-to-end build verification and integration polish
---
 frontend/src/components/VNInterface.tsx | 50 +++++++++++++--------------------
 1 file changed, 20 insertions(+), 30 deletions(-)

(limited to 'frontend/src/components/VNInterface.tsx')

diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx
index 48b150a..0a77f39 100644
--- a/frontend/src/components/VNInterface.tsx
+++ b/frontend/src/components/VNInterface.tsx
@@ -9,11 +9,11 @@ import {
   showSettingsModalStore,
   isVisibleStore,
   yenBalanceStore,
-  documentUiEnabledStore,
+  documentEditorEnabledStore,
   toggleStandby,
   toggleShowChoices,
   updateTime,
-  setDocumentUiEnabled,
+  setDocumentEditorEnabled
 } from '../stores'
 
 interface VNInterfaceProps {
@@ -28,7 +28,7 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
   const showSettingsModal = useStore(showSettingsModalStore)
   const isVisible = useStore(isVisibleStore)
   const yenBalance = useStore(yenBalanceStore)
-  const documentUiEnabled = useStore(documentUiEnabledStore)
+  const documentEditorEnabled = useStore(documentEditorEnabledStore)
 
   // Fade in effect on mount
   useEffect(() => {
@@ -110,20 +110,20 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
                 <span className="info-value">Daemons</span>
               </Link>
             </div>
-            {documentUiEnabled && (
+            <div className="status-item">
+              <Link to="/contracts" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                <span className="info-label">View:</span>
+                <span className="info-value">Contracts</span>
+              </Link>
+            </div>
+            {documentEditorEnabled && (
               <div className="status-item">
-                <Link to="/directives" style={{ color: '#ff66cc', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px', fontWeight: 600 }}>
-                  <span className="info-label">View:</span>
+                <Link to="/directives" style={{ color: '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px' }}>
+                  <span className="info-label">Edit:</span>
                   <span className="info-value">Directives</span>
                 </Link>
               </div>
             )}
-            <div className="status-item">
-              <Link to="/contracts" style={{ color: documentUiEnabled ? '#8899bb' : '#66ccff', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px', fontSize: documentUiEnabled ? '0.85em' : undefined }}>
-                <span className="info-label">{documentUiEnabled ? 'Legacy:' : 'View:'}</span>
-                <span className="info-value">Contracts</span>
-              </Link>
-            </div>
           </div>
         </div>
       </div>
@@ -209,28 +209,18 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
                 </div>
               </div>
               <div className="settings-section">
-                <h3>Experimental</h3>
+                <h3>Feature Flags</h3>
                 <div className="setting-item">
-                  <label style={{ display: 'flex', alignItems: 'center', gap: '8px', cursor: 'pointer' }}>
+                  <label>
                     <input
                       type="checkbox"
-                      checked={documentUiEnabled}
-                      onChange={(e) => setDocumentUiEnabled(e.target.checked)}
-                    />
-                    Document UI (Experimental)
+                      checked={documentEditorEnabled}
+                      onChange={(e) => setDocumentEditorEnabled(e.target.checked)}
+                    /> Document Editor (Directives)
                   </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 style={{ fontSize: '0.8em', opacity: 0.7, marginTop: '4px' }}>
+                    Enable the directive document editor interface
+                  </div>
                 </div>
               </div>
               <div className="settings-section">
-- 
cgit v1.2.3