complete first iteration

web/src/ViewMode.tsx

@@ -6,6 +6,8 @@ import { wsClient } from './lib/ws';
 import { parseInterface } from './lib/xml';
 import type { Interface } from './lib/types';
 import { useEffect } from 'preact/hooks';
+import ContextualHelp from './ContextualHelp';
+import HelpModal from './HelpModal';
 
 interface Props {
   onEdit?: (iface?: Interface) => void;
@@ -21,6 +23,10 @@ export default function ViewMode({ onEdit }: Props) {
   const [currentInterface, setCurrentInterface] = useState<Interface | null>(null);
   const [parseError, setParseError] = useState<string | null>(null);
   const [wsStatus, setWsStatus] = useState('connecting');
+  const [showHelp, setShowHelp] = useState(false);
+  const [helpSection, setHelpSection] = useState('start');
+
+  function openHelp(section = 'start') { setHelpSection(section); setShowHelp(true); }
 
   // Historical time range — null means live
   const now = useMemo(() => new Date(), []);
@@ -117,6 +123,14 @@ export default function ViewMode({ onEdit }: Props) {
             <span class="status-dot"></span>
             {wsStatus}
           </div>
+          <ContextualHelp mode="view" onOpenManual={openHelp} />
+          <button
+            class="icon-btn help-manual-btn"
+            onClick={() => openHelp('start')}
+            title="Open user manual"
+          >
+            📖
+          </button>
           <button
             class="btn-edit"
             onClick={() => onEdit?.(currentInterface ?? undefined)}
@@ -143,6 +157,10 @@ export default function ViewMode({ onEdit }: Props) {
         />
         <Canvas iface={currentInterface} onNavigate={handleNavigate} timeRange={timeRange} />
       </div>
+
+      {showHelp && (
+        <HelpModal initialSection={helpSection} onClose={() => setShowHelp(false)} />
+      )}
     </div>
   );
 }