task(A4.13): dynamic v2 tool section in ribbon behind flag

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' && (
           <>