From e370552055501132e06a9f65defb06090291279f Mon Sep 17 00:00:00 2001
From: Agent Zero <agent@media-on.de>
Date: Thu, 27 Aug 2026 07:21:19 +0200
Subject: [PATCH] task(A4.13): dynamic v2 tool section in ribbon behind flag

---
 frontend/src/App.tsx                  | 14 ++++++++++++
 frontend/src/components/RibbonBar.tsx | 33 +++++++++++++++++++++++++++
 frontend/src/types/ui.types.ts        |  2 ++
 3 files changed, 49 insertions(+)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index acb9ef7..755b20d 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1148,6 +1148,15 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
     if (action === 'measure') { setActiveTool('dimension'); setCommandHistory((prev) => [...prev, { prefix: '·', text: 'Messwerkzeug aktiv', type: 'info' }]); return; }
     if (action === 'history') { setHistoryPanelOpen((prev) => !prev); return; }
 
+    // ─── V2 tools (Task A4.13): 'v2tool:<id>' → aktives Tool umschalten. Der
+    // bestehende CanvasArea-Sync aus A4.1 routet es an den Dispatcher (Flag aktiv).
+    if (action.startsWith('v2tool:')) {
+      const toolId = action.slice('v2tool:'.length);
+      setActiveTool(toolId);
+      setCommandHistory((prev) => [...prev, { prefix: '·', text: `V2-Werkzeug aktiv: ${toolId}`, type: 'info' }]);
+      return;
+    }
+
     // ─── Background ───
     if (action === 'background-import') { setBgImportOpen(true); return; }
 
@@ -1564,6 +1573,11 @@ const CADEditor: React.FC<CADEditorProps> = ({ projectId, token, onNavigateBack
         activeTab={activeRibbonTab}
         onTabChange={setActiveRibbonTab}
         onAction={handleRibbonAction}
+        onIsV2ToolActive={(toolId: string) =>
+          import.meta.env.VITE_TOOL_DISPATCHER === 'v2' &&
+          activeTool === toolId &&
+          !!pluginRegistry.getToolV2(toolId)
+        }
         canvasBgColor={canvasBgColor}
         gridColor={gridColor}
         rulerEnabled={rulerEnabled}
diff --git a/frontend/src/components/RibbonBar.tsx b/frontend/src/components/RibbonBar.tsx
index 58ab756..7cb73cc 100644
--- a/frontend/src/components/RibbonBar.tsx
+++ b/frontend/src/components/RibbonBar.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import type { RibbonBarProps, RibbonTab } from '../types/ui.types';
+import { pluginRegistry } from '../plugins';
 
 const tabs: Array<{ id: RibbonTab; label: string; svg: React.ReactNode }> = [
   { id: 'start', label: 'Start', svg: <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/><polyline points="9 22 9 12 15 12 15 22"/></svg> },
@@ -15,6 +16,7 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
   activeTab, onTabChange, onAction,
   canvasBgColor = '#1e1e2e', gridColor = '#3a3a4a', rulerEnabled = true,
   onCanvasBgColorChange, onGridColorChange, onToggleRuler,
+  onIsV2ToolActive,
 }) => {
   return (
     <nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
@@ -36,6 +38,37 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
       </div>
 
       <div className="ribbon-content" id="ribbon-content">
+        {/* ===== V2 TOOLS (Task A4.13, nur bei aktivem Dispatcher-Flag) ===== */}
+        {activeTab === 'canvas' && import.meta.env.VITE_TOOL_DISPATCHER === 'v2' && (
+          <div style={{
+            display: 'flex', flexWrap: 'wrap', gap: '6px', alignItems: 'center',
+            padding: '8px 4px', width: '100%',
+            borderBottom: '1px solid var(--color-border, #333)', marginBottom: '8px',
+          }}>
+            <span style={{ fontSize: '11px', color: 'var(--color-ki, #8a8aff)', marginRight: '4px' }}>V2:</span>
+            {pluginRegistry.getToolsV2().map((tool) => {
+              const isActive = onIsV2ToolActive?.(tool.manifest.id);
+              return (
+                <button
+                  key={tool.manifest.id}
+                  title={tool.manifest.description ?? tool.manifest.label}
+                  onClick={() => onAction(`v2tool:${tool.manifest.id}`)}
+                  style={{
+                    display: 'flex', alignItems: 'center', gap: '4px',
+                    padding: '5px 9px', borderRadius: '4px', fontSize: '12px',
+                    cursor: 'pointer', border: '1px solid var(--color-border, #333)',
+                    background: isActive ? 'rgba(80,250,123,0.15)' : 'var(--color-bg-secondary, #2a2a3a)',
+                    color: isActive ? '#50fa7b' : 'inherit',
+                    fontWeight: isActive ? 600 : 400,
+                  }}
+                >
+                  <span style={{ fontFamily: 'monospace' }}>{tool.manifest.icon}</span>
+                  <span>{tool.manifest.label}</span>
+                </button>
+              );
+            })}
+          </div>
+        )}
         {/* ===== START TAB ===== */}
         {activeTab === 'start' && (
           <>
diff --git a/frontend/src/types/ui.types.ts b/frontend/src/types/ui.types.ts
index 231779c..00e189a 100644
--- a/frontend/src/types/ui.types.ts
+++ b/frontend/src/types/ui.types.ts
@@ -94,6 +94,8 @@ export interface RibbonBarProps {
   onCanvasBgColorChange?: (color: string) => void;
   onGridColorChange?: (color: string) => void;
   onToggleRuler?: () => void;
+  /** Task A4.13: meldet, ob ein V2-Werkzeug-ID aktuell das aktive Tool ist (Highlight). */
+  onIsV2ToolActive?: (toolId: string) => boolean;
 }
 
 export interface LeftSidebarProps {