From d513f93c84ae985738e0f696fcb72fa1153046ef Mon Sep 17 00:00:00 2001
From: soryu <soryu@soryu.co>
Date: Tue, 28 Apr 2026 17:35:08 +0100
Subject: feat: document UI with contract blocks, expandable logs, and
 interaction controls (#97)

* feat: soryu-co/soryu - makima: Rename tasks to contracts in directive API and types

* feat: soryu-co/soryu - makima: Add contract interaction panel with comment and interrupt

* feat: soryu-co/soryu - makima: Build expandable contract log feed in StepsDiagram

* feat: soryu-co/soryu - makima: Rename tasks to contracts throughout document UI and add contract block support

* feat: soryu-co/soryu - makima: Add comment and interrupt controls to expanded step log feed

* feat: soryu-co/soryu - makima: Audit and fix Document UI feature flag visibility and missing implementations

* feat: soryu-co/soryu - makima: Add expandable step rows with live log feed in StepsDiagram

* WIP: heartbeat checkpoint

* feat: soryu-co/soryu - makima: Integrate all document UI components and final polish
---
 frontend/src/components/VNInterface.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

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

diff --git a/frontend/src/components/VNInterface.tsx b/frontend/src/components/VNInterface.tsx
index 051c210..48b150a 100644
--- a/frontend/src/components/VNInterface.tsx
+++ b/frontend/src/components/VNInterface.tsx
@@ -110,20 +110,20 @@ export function VNInterface({ onLogout }: VNInterfaceProps) {
                 <span className="info-value">Daemons</span>
               </Link>
             </div>
-            <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>
             {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>
+                <Link to="/directives" style={{ color: '#ff66cc', textDecoration: 'none', display: 'flex', alignItems: 'center', gap: '4px', fontWeight: 600 }}>
+                  <span className="info-label">View:</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>
-- 
cgit v1.2.3