task(H1): simple/pro mode - uiModeService with localStorage persistence, ribbon basic-tag filter, commandline pro-only, topbar toggle

frontend/src/components/CommandLine.tsx

@@ -1,6 +1,7 @@
 import React, { useState, useRef, useMemo, useEffect } from 'react';
 import type { CommandLineProps } from '../types/ui.types';
 import { getCommandRegistry, type CommandDefinition } from '../services/commandRegistry';
+import { useUIMode } from '../services/uiModeService';
 
 const defaultHistory = [
   { prefix: '·' as const, text: 'Bereit · Werkzeug: Auswahl · 110 Objekte · 5 Ebenen', type: 'info' as const },
@@ -20,6 +21,9 @@ const categoryColors: Record<string, string> = {
 };
 
 const CommandLine: React.FC<CommandLineProps> = ({ history, onCommand }) => {
+  const uiMode = useUIMode();
+  if (uiMode === 'simple') return null;
+
   const [input, setInput] = useState('');
   const [selectedSuggestion, setSelectedSuggestion] = useState(0);
   const [commandHistory, setCommandHistory] = useState<string[]>([]);

frontend/src/components/RibbonBar.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { getUIMode, useUIMode } from '../services/uiModeService';
 import type { RibbonBarProps, RibbonTab } from '../types/ui.types';
 import { pluginRegistry } from '../plugins';
 import { V2_TOOLS_ENABLED } from '../kernel/featureFlags';
@@ -19,6 +20,8 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
   onCanvasBgColorChange, onGridColorChange, onToggleRuler,
   onIsV2ToolActive,
 }) => {
+  const uiMode = useUIMode();
+
   return (
     <nav className="ribbon" role="navigation" aria-label="Hauptwerkzeuge">
       <div className="ribbon-tabs" role="tablist">
@@ -47,7 +50,9 @@ const RibbonBar: React.FC<RibbonBarProps> = ({
             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) => {
+            {pluginRegistry.getToolsV2()
+              .filter((tool) => uiMode === 'pro' || (tool.manifest.tags ?? []).includes('basic'))
+              .map((tool) => {
               const isActive = onIsV2ToolActive?.(tool.manifest.id);
               return (
                 <button

frontend/src/components/Topbar.tsx

@@ -1,12 +1,15 @@
 import React from 'react';
 import type { TopbarProps } from '../types/ui.types';
 import type { UnitType } from '../utils/format';
+import { useUIMode, toggleUIMode, getUIMode } from '../services/uiModeService';
 
 const Topbar: React.FC<TopbarProps> = ({
   projectName, savedStatus, onUndo, onRedo, onThemeToggle, theme,
   onOpenSettings, onOpenLeftDrawer, onOpenRightDrawer,
   unit = 'mm', onUnitChange, onNavigateBack,
 }) => {
+  const uiMode = useUIMode();
+
   return (
     <header className="topbar" role="banner">
       <div className="topbar-left">
@@ -33,6 +36,14 @@ const Topbar: React.FC<TopbarProps> = ({
         <span className="saved-badge" aria-label="Status: Alle Änderungen gespeichert">{savedStatus}</span>
       </div>
       <div className="topbar-right">
+        <button
+          className="icon-btn-top"
+          title={uiMode === 'pro' ? 'Zum einfachen Modus wechseln' : 'Zum Profi-Modus wechseln'}
+          aria-label={uiMode === 'pro' ? 'Zum einfachen Modus wechseln' : 'Zum Profi-Modus wechseln'}
+          onClick={toggleUIMode}
+        >
+          {uiMode === 'pro' ? '😊' : '🛠'}
+        </button>
         <button className="icon-btn-top" aria-label="Rückgängig (Strg+Z)" title="Rückgängig (Strg+Z)" onClick={onUndo}>
           <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 0 0-15-6.7L3 13"/></svg>
         </button>

frontend/src/services/uiModeService.ts

@@ -0,0 +1,66 @@
+/**
+ * Task H1 – UI-Modus simple/pro.
+ *
+ * - 'pro': vollständige Werkzeugpalette + CommandLine (Default)
+ * - 'simple': nur basic-Tools, keine CommandLine
+ *
+ * Persistenz über localStorage ('webcad.uiMode'), Subscribe-Set für
+ * Live-Updates (RibbonBar/CommandLine/Topbar hören zu). Bewusst KEIN
+ * zustand (Q2-Entscheidung wurde nie umgesetzt; Muster folgt dem
+ * etablierten documentService/featureFlags-Stil des Projekts).
+ */
+import { useEffect, useState } from 'react';
+
+export type UIMode = 'simple' | 'pro';
+
+const STORAGE_KEY = 'webcad.uiMode';
+const listeners = new Set<(mode: UIMode) => void>();
+
+function readStored(): UIMode {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY);
+    if (raw === 'simple' || raw === 'pro') return raw;
+  } catch {
+    // localStorage nicht verfügbar — Default
+  }
+  return 'pro';
+}
+
+let current: UIMode = readStored();
+
+/** Aktueller UI-Modus (Default pro, persistiert). */
+export function getUIMode(): UIMode {
+  return current;
+}
+
+/** Wechselt den Modus und persistiert. */
+export function setUIMode(mode: UIMode): void {
+  current = mode;
+  try {
+    localStorage.setItem(STORAGE_KEY, mode);
+  } catch {
+    // Persistenz optional
+  }
+  for (const cb of listeners) cb(mode);
+}
+
+/** Toggle simple ↔ pro. */
+export function toggleUIMode(): void {
+  setUIMode(current === 'pro' ? 'simple' : 'pro');
+}
+
+/** Subscribe auf Moduswechsel; gibt Unsubscribe zurück. */
+export function subscribeUIMode(cb: (mode: UIMode) => void): () => void {
+  listeners.add(cb);
+  return () => { listeners.delete(cb); };
+}
+
+/** React-Hook: aktueller Modus mit Re-Render bei Wechsel. */
+export function useUIMode(): UIMode {
+  const [mode, setMode] = useState<UIMode>(current);
+  useEffect(() => {
+    const off = subscribeUIMode(setMode);
+    return off;
+  }, []);
+  return mode;
+}