diff --git a/src/appRouter.jsx b/src/appRouter.jsx
index 318b355..c0701d0 100644
--- a/src/appRouter.jsx
+++ b/src/appRouter.jsx
@@ -38,6 +38,9 @@ const OAuthAuthorizePage = lazy(() => import('./routes/oauth/OAuthAuthorizePage'
 const ArticleHistoryPage = lazy(() => import('./routes/infos/ArticleHistoryPage'));
 const GlobalHistoryPage = lazy(() => import('./routes/infos/GlobalHistoryPage'));
 const LedgerHistoryPage = lazy(() => import('./routes/infos/LedgerHistoryPage'));
+const CompanyAutomatDebugPage = import.meta.env.DEV
+  ? lazy(() => import('./routes/debug/CompanyAutomatPage'))
+  : null;
 
 function LoginRedirect() {
   const params = new URLSearchParams(window.location.search);
@@ -131,6 +134,19 @@ const routes = [
           { path: ':entityId', element: <KundeEditPage /> },
         ],
       },
+      ...(import.meta.env.DEV
+        ? [
+            {
+              path: 'debug',
+              element: <SectionLayout sectionPath="/debug" />,
+              children: [
+                { index: true, element: <CompanyAutomatDebugPage /> },
+                { path: 'company', element: <CompanyAutomatDebugPage /> },
+                { path: 'companyautomat', element: <CompanyAutomatDebugPage /> },
+              ],
+            },
+          ]
+        : []),
       { path: '*', element: <Navigate to="/artikel" replace /> },
     ],
   },
diff --git a/src/nav.js b/src/nav.js
index 3321c87..8cda9b8 100644
--- a/src/nav.js
+++ b/src/nav.js
@@ -25,6 +25,8 @@ import HistoryIcon from '@mui/icons-material/History';
 import PublicIcon from '@mui/icons-material/Public';
 import ReceiptLongIcon from '@mui/icons-material/ReceiptLong';
 import BarChartIcon from '@mui/icons-material/BarChart';
+import BugReportIcon from '@mui/icons-material/BugReport';
+import BusinessIcon from '@mui/icons-material/Business';
 import { isKategorienPath } from './components/category/categoryRoute';
 import { deliveryEditorAutomat } from './automats/deliveryEditorAutomat';
 import { NAV_ITEM_ACTIVE_ACCENT } from './colors';
@@ -97,6 +99,16 @@ export const NAV_ITEMS = [
     icon: InfoIcon,
     help: 'Systemstatus, Serververbindung und Mandanteneinstellungen',
   },
+  ...(import.meta.env.DEV
+    ? [
+        {
+          path: '/debug',
+          label: 'Debug',
+          icon: BugReportIcon,
+          help: 'Entwickler- und Diagnosewerkzeuge für Automats (nur im Dev-Modus)',
+        },
+      ]
+    : []),
 ];
 
 class DeliveryNeuIcon extends PureComponent {
@@ -297,6 +309,19 @@ export const SUB_NAV = {
       help: 'Statistische Auswertungen und Kennzahlen',
     },
   ],
+  ...(import.meta.env.DEV
+    ? {
+        '/debug': [
+          {
+            segment: '',
+            label: 'Company',
+            title: 'Company Automat',
+            icon: BusinessIcon,
+            help: 'companyAutomat Eingänge, Ausgänge (Actions & Selectors) und internen State inspizieren & steuern',
+          },
+        ],
+      }
+    : {}),
 };
 
 export function isNavItemActive(pathname, navPath) {
@@ -359,6 +384,11 @@ export function resolveActiveSub(pathname, sectionPath) {
     return '';
   }
 
+  // Treat /debug/company and /debug/companyautomat as segment ''
+  if (sectionPath === '/debug' && (rest === 'company' || rest === 'companyautomat')) {
+    return '';
+  }
+
   const active = subNav.find((item) => {
     if (item.segment === 'kategorien') {
       return isKategorienPath(pathname);
diff --git a/src/routes/debug/CompanyAutomatPage.jsx b/src/routes/debug/CompanyAutomatPage.jsx
new file mode 100644
index 0000000..5fd87f6
--- /dev/null
+++ b/src/routes/debug/CompanyAutomatPage.jsx
@@ -0,0 +1,3354 @@
+import { PureComponent } from 'react';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import Chip from '@mui/material/Chip';
+import Divider from '@mui/material/Divider';
+import Stack from '@mui/material/Stack';
+import TextField from '@mui/material/TextField';
+import Typography from '@mui/material/Typography';
+import PlayArrowIcon from '@mui/icons-material/PlayArrow';
+import RefreshIcon from '@mui/icons-material/Refresh';
+import RestartAltIcon from '@mui/icons-material/RestartAlt';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import DeleteSweepIcon from '@mui/icons-material/DeleteSweep';
+import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import UploadFileIcon from '@mui/icons-material/UploadFile';
+import { enqueueSnackbar } from 'notistack';
+import { PanelTile, PanelTileGrid } from 'dashgui/panels';
+import SingleLineTextEdit from 'dashgui/SingleLineTextEdit';
+import authAutomat from '../../automats/authAutomat';
+import companyAutomat, {
+  selectCurrentCompany,
+  selectCompanyId,
+  selectCompanyStatus,
+  selectCompanyName,
+  selectCompanyIso639,
+  selectCompanyLanguageId,
+  selectCompanyTaxrate,
+  selectCompanyReducedTaxrate,
+  selectCompanyTaxfreerate,
+  selectCompanyRootCategoryId,
+  selectNumbers,
+  selectNumbersStatus,
+  selectPosterminals,
+  selectPosterminalStatus,
+  selectHasPosterminals,
+  selectSuppliers,
+  selectSuppliersStatus,
+  selectUnits,
+  selectUnitsStatus,
+  selectChatDrawerWidth,
+  selectWarehouses,
+  selectWarehousesStatus,
+  selectProperties,
+  selectPropertyStatus,
+  selectCustomergroups,
+  selectCustomergroupsStatus,
+  selectCarriers,
+  selectCarriersStatus,
+  selectBrands,
+  selectBrandsStatus,
+  selectAttributes,
+  selectAttributeStatus,
+  selectAccounts,
+  selectAccountsStatus,
+} from '../../automats/companyAutomat';
+import {
+  BLUE_PANEL,
+  PETROL_PANEL,
+  PURPLE_PANEL,
+  GREEN_PANEL,
+  ORANGE_PANEL,
+  YELLOW_PANEL,
+  RED_PANEL,
+  SURFACE_BASE,
+  SURFACE_RAISED,
+  BORDER,
+  TINT_SUBTLE,
+  TINT_CHIP,
+  SELECT_BG,
+  SELECT_BORDER,
+} from '../../colors';
+
+// #region domain definitions & selector registry
+const DOMAIN_DEFINITIONS = [
+  {
+    id: 'company',
+    label: '1. Company Profile',
+    statusKey: 'status',
+    errorKey: 'error',
+    dataKey: 'current',
+    loadAction: 'load',
+    keys: ['current', 'status', 'error'],
+  },
+  {
+    id: 'numbers',
+    label: '2. Number Sequences',
+    statusKey: 'numbersStatus',
+    errorKey: 'numbersError',
+    dataKey: 'numbers',
+    loadAction: 'loadNumbers',
+    keys: ['numbers', 'numbersStatus', 'numbersError'],
+  },
+  {
+    id: 'terminals',
+    label: '3. POS Terminals',
+    statusKey: 'terminalsStatus',
+    errorKey: 'terminalsError',
+    dataKey: 'terminals',
+    loadAction: 'loadTerminals',
+    keys: ['terminals', 'terminalsCompanyId', 'terminalsStatus', 'terminalsError'],
+  },
+  {
+    id: 'suppliers',
+    label: '4. Suppliers',
+    statusKey: 'suppliersStatus',
+    errorKey: 'suppliersError',
+    dataKey: 'suppliers',
+    loadAction: 'loadSuppliers',
+    keys: [
+      'suppliers',
+      'articlesBySupplier',
+      'articlesLoading',
+      'suppliersStatus',
+      'suppliersError',
+    ],
+  },
+  {
+    id: 'units',
+    label: '5. Units',
+    statusKey: 'unitsStatus',
+    errorKey: 'unitsError',
+    dataKey: 'units',
+    loadAction: 'loadUnits',
+    keys: ['units', 'unitsStatus', 'unitsError'],
+  },
+  {
+    id: 'userSettings',
+    label: '6. User Settings',
+    statusKey: null,
+    errorKey: null,
+    dataKey: 'viewerPosition',
+    loadAction: null,
+    keys: ['viewerPosition', 'chatDrawerWidth'],
+  },
+  {
+    id: 'warehouses',
+    label: '7. Warehouses',
+    statusKey: 'warehousesStatus',
+    errorKey: 'warehousesError',
+    dataKey: 'warehouses',
+    loadAction: 'loadWarehouses',
+    keys: [
+      'warehouses',
+      'filteredWarehouses',
+      'warehouseFilter',
+      'warehousesStatus',
+      'warehousesError',
+    ],
+  },
+  {
+    id: 'properties',
+    label: '8. Properties',
+    statusKey: 'propertiesStatus',
+    errorKey: 'propertiesError',
+    dataKey: 'properties',
+    loadAction: 'loadProperties',
+    keys: ['properties', 'propertiesStatus', 'propertiesError'],
+  },
+  {
+    id: 'customergroups',
+    label: '9. Customer Groups',
+    statusKey: 'customergroupsStatus',
+    errorKey: 'customergroupsError',
+    dataKey: 'customergroups',
+    loadAction: 'loadCustomergroups',
+    keys: [
+      'customergroups',
+      'filteredCustomergroups',
+      'customergroupFilter',
+      'customergroupsStatus',
+      'customergroupsError',
+    ],
+  },
+  {
+    id: 'carriers',
+    label: '10. Carriers',
+    statusKey: 'carriersStatus',
+    errorKey: 'carriersError',
+    dataKey: 'carriers',
+    loadAction: 'loadCarriers',
+    keys: [
+      'carriers',
+      'filteredCarriers',
+      'carrierFilter',
+      'carriersStatus',
+      'carriersError',
+    ],
+  },
+  {
+    id: 'brands',
+    label: '11. Brands',
+    statusKey: 'brandsStatus',
+    errorKey: 'brandsError',
+    dataKey: 'brands',
+    loadAction: 'loadBrands',
+    keys: ['brands', 'filteredBrands', 'brandFilter', 'brandsStatus', 'brandsError'],
+  },
+  {
+    id: 'attributes',
+    label: '12. Attributes & Values',
+    statusKey: 'attributesStatus',
+    errorKey: 'attributesError',
+    dataKey: 'attributes',
+    loadAction: 'loadAttributes',
+    keys: ['attributes', 'attributesStatus', 'attributesError'],
+  },
+  {
+    id: 'accounts',
+    label: '13. Payment Accounts',
+    statusKey: 'accountsStatus',
+    errorKey: 'accountsError',
+    dataKey: 'accounts',
+    loadAction: 'loadAccounts',
+    keys: ['accounts', 'accountsStatus', 'accountsError'],
+  },
+];
+
+const SELECTOR_DEFINITIONS = [
+  { name: 'selectCurrentCompany', domain: 'company', fn: selectCurrentCompany },
+  { name: 'selectCompanyId', domain: 'company', fn: selectCompanyId },
+  { name: 'selectCompanyStatus', domain: 'company', fn: selectCompanyStatus },
+  { name: 'selectCompanyName', domain: 'company', fn: selectCompanyName },
+  { name: 'selectCompanyIso639', domain: 'company', fn: selectCompanyIso639 },
+  { name: 'selectCompanyLanguageId', domain: 'company', fn: selectCompanyLanguageId },
+  { name: 'selectCompanyTaxrate', domain: 'company', fn: selectCompanyTaxrate },
+  { name: 'selectCompanyReducedTaxrate', domain: 'company', fn: selectCompanyReducedTaxrate },
+  { name: 'selectCompanyTaxfreerate', domain: 'company', fn: selectCompanyTaxfreerate },
+  { name: 'selectCompanyRootCategoryId', domain: 'company', fn: selectCompanyRootCategoryId },
+  { name: 'selectNumbers', domain: 'numbers', fn: selectNumbers },
+  { name: 'selectNumbersStatus', domain: 'numbers', fn: selectNumbersStatus },
+  { name: 'selectPosterminals', domain: 'terminals', fn: selectPosterminals },
+  { name: 'selectPosterminalStatus', domain: 'terminals', fn: selectPosterminalStatus },
+  { name: 'selectHasPosterminals', domain: 'terminals', fn: selectHasPosterminals },
+  { name: 'selectSuppliers', domain: 'suppliers', fn: selectSuppliers },
+  { name: 'selectSuppliersStatus', domain: 'suppliers', fn: selectSuppliersStatus },
+  { name: 'selectUnits', domain: 'units', fn: selectUnits },
+  { name: 'selectUnitsStatus', domain: 'units', fn: selectUnitsStatus },
+  { name: 'selectChatDrawerWidth', domain: 'userSettings', fn: selectChatDrawerWidth },
+  { name: 'selectWarehouses', domain: 'warehouses', fn: selectWarehouses },
+  { name: 'selectWarehousesStatus', domain: 'warehouses', fn: selectWarehousesStatus },
+  { name: 'selectProperties', domain: 'properties', fn: selectProperties },
+  { name: 'selectPropertyStatus', domain: 'properties', fn: selectPropertyStatus },
+  { name: 'selectCustomergroups', domain: 'customergroups', fn: selectCustomergroups },
+  { name: 'selectCustomergroupsStatus', domain: 'customergroups', fn: selectCustomergroupsStatus },
+  { name: 'selectCarriers', domain: 'carriers', fn: selectCarriers },
+  { name: 'selectCarriersStatus', domain: 'carriers', fn: selectCarriersStatus },
+  { name: 'selectBrands', domain: 'brands', fn: selectBrands },
+  { name: 'selectBrandsStatus', domain: 'brands', fn: selectBrandsStatus },
+  { name: 'selectAttributes', domain: 'attributes', fn: selectAttributes },
+  { name: 'selectAttributeStatus', domain: 'attributes', fn: selectAttributeStatus },
+  { name: 'selectAccounts', domain: 'accounts', fn: selectAccounts },
+  { name: 'selectAccountsStatus', domain: 'accounts', fn: selectAccountsStatus },
+];
+// #endregion
+
+// #region formatting & serialization helpers
+function safeJsonStringify(value, space = 2) {
+  try {
+    return JSON.stringify(
+      value,
+      (_key, val) => {
+        if (val instanceof Error) {
+          return { name: val.name, message: val.message, stack: val.stack };
+        }
+        return val;
+      },
+      space,
+    );
+  } catch (err) {
+    return String(err);
+  }
+}
+
+function summarizeValue(val) {
+  if (val === null) return 'null';
+  if (val === undefined) return 'undefined';
+  if (typeof val === 'boolean' || typeof val === 'number') return String(val);
+  if (typeof val === 'string') return val === '' ? '"" (empty)' : `"${val}"`;
+  if (Array.isArray(val)) return `Array(${val.length})`;
+  if (val instanceof Error) return `Error: ${val.message}`;
+  if (typeof val === 'object') {
+    const keys = Object.keys(val);
+    if (val.name && val.id != null) return `{ id: ${val.id}, name: "${val.name}", … (${keys.length} keys) }`;
+    return `Object(${keys.length} keys)`;
+  }
+  return String(val);
+}
+
+function statusChipColor(status) {
+  if (status === 'ready' || status === 'succeeded' || status === 'authed') return 'success';
+  if (status === 'loading') return 'info';
+  if (status === 'failed') return 'error';
+  return 'default';
+}
+
+function parseJsonInput(raw, label = 'JSON') {
+  const trimmed = String(raw ?? '').trim();
+  if (!trimmed) throw new Error(`${label} darf nicht leer sein.`);
+  try {
+    return JSON.parse(trimmed);
+  } catch (err) {
+    throw new Error(`Ungültiges ${label}: ${err.message}`);
+  }
+}
+// #endregion
+
+export default class CompanyAutomatPage extends PureComponent {
+  constructor(props) {
+    super(props);
+    this.state = {
+      // Live snapshots from companyAutomat and authAutomat
+      companyState: { ...companyAutomat.state },
+      authState: { ...authAutomat.state },
+      automatMeta: this.readAutomatMeta(),
+
+      // UI navigation & inspection state
+      activeDomain: 'company',
+      stateKeyFilter: '',
+      selectorDomainFilter: 'all',
+      expandedSelectors: {},
+      expandedStateKeys: { current: true },
+      showRawFullState: false,
+
+      // Live state transition log & action execution history
+      mutationLog: [],
+      actionHistory: [],
+      runningAction: null,
+
+      // Action input fields across all 13 domains + direct setState
+      companyUpdateJson: safeJsonStringify(companyAutomat.state.current || { name: 'Demo GmbH' }),
+      numbersReplaceJson: '[]',
+
+      terminalName: '',
+      terminalId: '',
+      terminalCategoryId: '',
+      terminalPatchJson: '{"name": "Kasse 1"}',
+
+      supplierId: '',
+      supplierBodyJson: '{"name": "Neuer Lieferant"}',
+      suppliersReplaceJson: '[]',
+
+      unitUpsertJson: '{"si": "pcs", "symbol": "Stk", "name": "Stück"}',
+      unitDeleteSi: '',
+
+      chatDrawerWidthInput: String(companyAutomat.state.chatDrawerWidth ?? 460),
+
+      warehouseId: '',
+      warehouseBodyJson: '{"name": "Hauptlager"}',
+      warehouseIdsJson: '[1, 2]',
+      warehousesReplaceJson: '[]',
+
+      propertyId: '',
+      propertyBodyJson: '{"name": "Gewicht", "exclusive": false}',
+      propertyIdsJson: '[1, 2]',
+
+      customergroupId: '',
+      customergroupBodyJson: '{"name": "Händler"}',
+      customergroupIdsJson: '[1, 2]',
+      customergroupsReplaceJson: '[]',
+
+      carrierId: '',
+      carrierBodyJson: '{"name": "DHL"}',
+      carrierIdsJson: '[1, 2]',
+      carriersReplaceJson: '[]',
+
+      brandId: '',
+      brandBodyJson: '{"name": "Neue Marke"}',
+      brandIdsJson: '[1, 2]',
+      brandSilentLoad: false,
+      brandImageFile: null,
+
+      attributeId: '',
+      attributeBodyJson: '{"name": "Farbe", "exclusive": false}',
+      attributeIdsJson: '[1, 2]',
+      attributeValueId: '',
+      attributeValueBodyJson: '{"value": "Rot"}',
+      attributeValueIdsJson: '[1, 2]',
+
+      accountsReplaceJson: '[]',
+
+      directSetStateKey: 'status',
+      directSetStateJson: '{"status": "ready"}',
+    };
+
+    this.runAction = this.runAction.bind(this);
+    this.handleDirectSetState = this.handleDirectSetState.bind(this);
+    this.handleCopyJson = this.handleCopyJson.bind(this);
+  }
+
+  // #region lifecycle & subscriptions
+  readAutomatMeta() {
+    return {
+      name: companyAutomat.name,
+      isReady: companyAutomat.isReady,
+      isDirty: companyAutomat.isDirty,
+      persist: companyAutomat.persist,
+      subscriberCount: companyAutomat.subscriberCount,
+    };
+  }
+
+  componentDidMount() {
+    this.unsubCompany = companyAutomat.subscribe((state, partial) => {
+      const changedKeys = partial && typeof partial === 'object' ? Object.keys(partial) : [];
+      const entry = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 7)}`,
+        timestamp: new Date().toLocaleTimeString('de-DE', {
+          hour12: false,
+          hour: '2-digit',
+          minute: '2-digit',
+          second: '2-digit',
+          fractionalSecondDigits: 3,
+        }),
+        keys: changedKeys,
+        partialSnapshot: partial ? safeJsonStringify(partial) : '{}',
+      };
+
+      this.setState((prev) => ({
+        companyState: { ...state },
+        automatMeta: this.readAutomatMeta(),
+        mutationLog: [entry, ...prev.mutationLog].slice(0, 60),
+      }));
+    });
+
+    this.unsubAuth = authAutomat.subscribe((authState) => {
+      this.setState({
+        authState: { ...authState },
+        automatMeta: this.readAutomatMeta(),
+      });
+    });
+
+    // Update subscriber count after mounting our listener
+    this.setState({ automatMeta: this.readAutomatMeta() });
+  }
+
+  componentWillUnmount() {
+    this.unsubCompany?.();
+    this.unsubAuth?.();
+  }
+  // #endregion
+
+  // #region action execution & helpers
+  // MARK: executes any companyAutomat action or method and records result/timing
+  async runAction(label, invokeFn, argsPreview = '') {
+    const startedAt = performance.now();
+    this.setState({ runningAction: label });
+    try {
+      const result = await invokeFn();
+      const durationMs = Math.round(performance.now() - startedAt);
+      const record = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        timestamp: new Date().toLocaleTimeString('de-DE', { hour12: false }),
+        label,
+        argsPreview,
+        status: 'fulfilled',
+        durationMs,
+        output: safeJsonStringify(result),
+      };
+      this.setState((prev) => ({
+        runningAction: null,
+        companyState: { ...companyAutomat.state },
+        automatMeta: this.readAutomatMeta(),
+        actionHistory: [record, ...prev.actionHistory].slice(0, 30),
+      }));
+      enqueueSnackbar(`${label} erfolgreich (${durationMs} ms)`, { variant: 'success' });
+      return result;
+    } catch (err) {
+      const durationMs = Math.round(performance.now() - startedAt);
+      const message = err?.message ?? String(err);
+      const record = {
+        id: `${Date.now()}-${Math.random().toString(36).slice(2, 6)}`,
+        timestamp: new Date().toLocaleTimeString('de-DE', { hour12: false }),
+        label,
+        argsPreview,
+        status: 'rejected',
+        durationMs,
+        output: message,
+      };
+      this.setState((prev) => ({
+        runningAction: null,
+        companyState: { ...companyAutomat.state },
+        automatMeta: this.readAutomatMeta(),
+        actionHistory: [record, ...prev.actionHistory].slice(0, 30),
+      }));
+      enqueueSnackbar(`${label} fehlgeschlagen: ${message}`, { variant: 'error' });
+      return undefined;
+    }
+  }
+
+  // MARK: directly patches companyAutomat.setState for testing
+  handleDirectSetState() {
+    void this.runAction(
+      'companyAutomat.setState(partial)',
+      () => {
+        const parsed = parseJsonInput(this.state.directSetStateJson, 'Partial State JSON');
+        if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) {
+          throw new Error('Partial State muss ein JSON-Objekt sein.');
+        }
+        return companyAutomat.setState(parsed);
+      },
+      this.state.directSetStateJson,
+    );
+  }
+
+  handleCopyJson(value, label = 'JSON') {
+    const text = typeof value === 'string' ? value : safeJsonStringify(value);
+    if (navigator?.clipboard?.writeText) {
+      void navigator.clipboard.writeText(text).then(() => {
+        enqueueSnackbar(`${label} in die Zwischenablage kopiert.`, { variant: 'info' });
+      });
+    }
+  }
+
+  toggleSelectorExpand(name) {
+    this.setState((prev) => ({
+      expandedSelectors: {
+        ...prev.expandedSelectors,
+        [name]: !prev.expandedSelectors[name],
+      },
+    }));
+  }
+
+  toggleStateKeyExpand(key) {
+    this.setState((prev) => ({
+      expandedStateKeys: {
+        ...prev.expandedStateKeys,
+        [key]: !prev.expandedStateKeys[key],
+      },
+    }));
+  }
+
+  loadKeyIntoSetStateEditor(key) {
+    const currentVal = this.state.companyState[key];
+    const payload = { [key]: currentVal };
+    this.setState({
+      activeDomain: 'setState',
+      directSetStateKey: key,
+      directSetStateJson: safeJsonStringify(payload),
+    });
+  }
+  // #endregion
+
+  // #region domain-specific input renderers
+  renderCompanyActions() {
+    const { companyUpdateJson, companyState } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.load()', () => act.load())}
+          >
+            actions.load()
+          </Button>
+          <Button
+            size="small"
+            variant="contained"
+            color="secondary"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.loadAll()', () => act.loadAll())}
+          >
+            actions.loadAll()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="warning"
+            startIcon={<RestartAltIcon />}
+            onClick={() => this.runAction('actions.reset()', () => act.reset())}
+          >
+            actions.reset()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.setState({
+                companyUpdateJson: safeJsonStringify(companyState.current || {}),
+              })
+            }
+          >
+            Aus state.current füllen
+          </Button>
+        </Stack>
+
+        <TextField
+          label="Payload für actions.update(payload) (JSON)"
+          multiline
+          minRows={4}
+          maxRows={10}
+          size="small"
+          fullWidth
+          value={companyUpdateJson}
+          onChange={(e) => this.setState({ companyUpdateJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() =>
+              this.runAction(
+                'actions.update(payload)',
+                () => act.update(parseJsonInput(this.state.companyUpdateJson, 'Company Payload')),
+                this.state.companyUpdateJson,
+              )
+            }
+          >
+            actions.update(payload) ausführen
+          </Button>
+        </Box>
+      </Stack>
+    );
+  }
+
+  renderNumbersActions() {
+    const { numbersReplaceJson, companyState } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadNumbers()', () => act.loadNumbers())}
+          >
+            actions.loadNumbers()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.reloadNumbers()', () => act.reloadNumbers())}
+          >
+            actions.reloadNumbers()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction('actions.ensureNumbersLoaded()', () => act.ensureNumbersLoaded())
+            }
+          >
+            actions.ensureNumbersLoaded()
+          </Button>
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                numbersReplaceJson: safeJsonStringify(companyState.numbers || []),
+              })
+            }
+          >
+            Aktuelle state.numbers übernehmen
+          </Button>
+        </Stack>
+
+        <TextField
+          label="Items für actions.replaceNumbers(items) (JSON Array)"
+          multiline
+          minRows={3}
+          maxRows={8}
+          size="small"
+          fullWidth
+          value={numbersReplaceJson}
+          onChange={(e) => this.setState({ numbersReplaceJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.replaceNumbers(items)',
+                () => act.replaceNumbers(parseJsonInput(this.state.numbersReplaceJson, 'Numbers Array')),
+                this.state.numbersReplaceJson,
+              )
+            }
+          >
+            actions.replaceNumbers(items)
+          </Button>
+        </Box>
+      </Stack>
+    );
+  }
+
+  renderTerminalsActions() {
+    const { terminalName, terminalId, terminalCategoryId, terminalPatchJson } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadTerminals()', () => act.loadTerminals())}
+          >
+            actions.loadTerminals()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() => this.runAction('actions.loadPosterminals()', () => act.loadPosterminals())}
+          >
+            actions.loadPosterminals()
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Terminal Name"
+            value={terminalName}
+            onChange={(e) => this.setState({ terminalName: e.target.value })}
+          />
+          <Button
+            size="small"
+            variant="contained"
+            disabled={!terminalName.trim()}
+            onClick={() =>
+              this.runAction(
+                'actions.createTerminal({ name })',
+                () => act.createTerminal({ name: terminalName.trim() }),
+                terminalName.trim(),
+              )
+            }
+          >
+            createTerminal
+          </Button>
+        </Stack>
+
+        <Divider />
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Terminal ID"
+            value={terminalId}
+            onChange={(e) => this.setState({ terminalId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Category ID"
+            value={terminalCategoryId}
+            onChange={(e) => this.setState({ terminalCategoryId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Patch JSON (für updateTerminal)"
+            value={terminalPatchJson}
+            onChange={(e) => this.setState({ terminalPatchJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!terminalId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateTerminal(id, patch)',
+                () =>
+                  act.updateTerminal(
+                    Number(terminalId) || terminalId,
+                    parseJsonInput(terminalPatchJson, 'Terminal Patch'),
+                  ),
+                `id=${terminalId}`,
+              )
+            }
+          >
+            updateTerminal
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!terminalId}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteTerminal(id)',
+                () => act.deleteTerminal(Number(terminalId) || terminalId),
+                `id=${terminalId}`,
+              )
+            }
+          >
+            deleteTerminal
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!terminalId}
+            onClick={() =>
+              this.runAction(
+                'actions.enableAllTerminalCategories({ terminalId })',
+                () => act.enableAllTerminalCategories({ terminalId: Number(terminalId) || terminalId }),
+                `terminalId=${terminalId}`,
+              )
+            }
+          >
+            enableAllTerminalCategories
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!terminalId}
+            onClick={() =>
+              this.runAction(
+                'actions.disableAllTerminalCategories({ terminalId })',
+                () => act.disableAllTerminalCategories({ terminalId: Number(terminalId) || terminalId }),
+                `terminalId=${terminalId}`,
+              )
+            }
+          >
+            disableAllTerminalCategories
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!terminalId || !terminalCategoryId}
+            onClick={() =>
+              this.runAction(
+                'actions.enableTerminalCategory({ terminalId, categoryId })',
+                () =>
+                  act.enableTerminalCategory({
+                    terminalId: Number(terminalId) || terminalId,
+                    categoryId: Number(terminalCategoryId) || terminalCategoryId,
+                  }),
+                `terminalId=${terminalId}, categoryId=${terminalCategoryId}`,
+              )
+            }
+          >
+            enableTerminalCategory
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!terminalId || !terminalCategoryId}
+            onClick={() =>
+              this.runAction(
+                'actions.disableTerminalCategory({ terminalId, categoryId })',
+                () =>
+                  act.disableTerminalCategory({
+                    terminalId: Number(terminalId) || terminalId,
+                    categoryId: Number(terminalCategoryId) || terminalCategoryId,
+                  }),
+                `terminalId=${terminalId}, categoryId=${terminalCategoryId}`,
+              )
+            }
+          >
+            disableTerminalCategory
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderSuppliersActions() {
+    const { supplierId, supplierBodyJson, suppliersReplaceJson, companyState } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadSuppliers()', () => act.loadSuppliers())}
+          >
+            actions.loadSuppliers()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.reloadSuppliers()', () => act.reloadSuppliers())}
+          >
+            actions.reloadSuppliers()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction('actions.loadAllSupplierArticles()', () => act.loadAllSupplierArticles())
+            }
+          >
+            actions.loadAllSupplierArticles()
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Supplier ID"
+            value={supplierId}
+            onChange={(e) => this.setState({ supplierId: e.target.value })}
+            sx={{ width: 150 }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!supplierId}
+            onClick={() =>
+              this.runAction(
+                'actions.loadArticlesForSupplier(supplierId)',
+                () => act.loadArticlesForSupplier(Number(supplierId) || supplierId),
+                `supplierId=${supplierId}`,
+              )
+            }
+          >
+            loadArticlesForSupplier
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!supplierId}
+            onClick={() =>
+              this.runAction(
+                'actions.removeSupplier(id)',
+                () => act.removeSupplier(Number(supplierId) || supplierId),
+                `id=${supplierId}`,
+              )
+            }
+          >
+            removeSupplier
+          </Button>
+        </Stack>
+
+        <TextField
+          size="small"
+          label="Supplier Body JSON (für createSupplier / updateSupplier)"
+          multiline
+          minRows={2}
+          maxRows={6}
+          fullWidth
+          value={supplierBodyJson}
+          onChange={(e) => this.setState({ supplierBodyJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+        <Stack direction="row" spacing={1}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createSupplier(body)',
+                () => act.createSupplier(parseJsonInput(supplierBodyJson, 'Supplier Body')),
+                supplierBodyJson,
+              )
+            }
+          >
+            createSupplier(body)
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!supplierId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateSupplier(id, body)',
+                () =>
+                  act.updateSupplier(
+                    Number(supplierId) || supplierId,
+                    parseJsonInput(supplierBodyJson, 'Supplier Body'),
+                  ),
+                `id=${supplierId}`,
+              )
+            }
+          >
+            updateSupplier(id, body)
+          </Button>
+        </Stack>
+
+        <Divider />
+
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="setSuppliers(suppliers) JSON Array"
+            value={suppliersReplaceJson}
+            onChange={(e) => this.setState({ suppliersReplaceJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                suppliersReplaceJson: safeJsonStringify(companyState.suppliers || []),
+              })
+            }
+          >
+            Füllen
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.setSuppliers(suppliers)',
+                () => act.setSuppliers(parseJsonInput(suppliersReplaceJson, 'Suppliers Array')),
+              )
+            }
+          >
+            setSuppliers
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderUnitsActions() {
+    const { unitUpsertJson, unitDeleteSi } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadUnits()', () => act.loadUnits())}
+          >
+            actions.loadUnits()
+          </Button>
+        </Box>
+
+        <TextField
+          size="small"
+          label="Unit JSON für actions.upsertUnit(body)"
+          multiline
+          minRows={2}
+          maxRows={5}
+          fullWidth
+          value={unitUpsertJson}
+          onChange={(e) => this.setState({ unitUpsertJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.upsertUnit(body)',
+                () => act.upsertUnit(parseJsonInput(unitUpsertJson, 'Unit Body')),
+                unitUpsertJson,
+              )
+            }
+          >
+            actions.upsertUnit(body)
+          </Button>
+        </Box>
+
+        <Stack direction="row" spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="SI-Einheit (si)"
+            value={unitDeleteSi}
+            onChange={(e) => this.setState({ unitDeleteSi: e.target.value })}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!unitDeleteSi.trim()}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteUnit(si)',
+                () => act.deleteUnit(unitDeleteSi.trim()),
+                unitDeleteSi.trim(),
+              )
+            }
+          >
+            actions.deleteUnit(si)
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderUserSettingsActions() {
+    const { chatDrawerWidthInput, companyState } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Box>
+          <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+            actions.setViewerPosition(position) — aktuell: &quot;{companyState.viewerPosition}&quot;
+          </Typography>
+          <Stack direction="row" spacing={1}>
+            {['top', 'right', 'below'].map((pos) => (
+              <Button
+                key={pos}
+                size="small"
+                variant={companyState.viewerPosition === pos ? 'contained' : 'outlined'}
+                onClick={() =>
+                  this.runAction(
+                    `actions.setViewerPosition("${pos}")`,
+                    () => act.setViewerPosition(pos),
+                    pos,
+                  )
+                }
+              >
+                {pos}
+              </Button>
+            ))}
+          </Stack>
+        </Box>
+
+        <Divider />
+
+        <Box>
+          <Typography variant="subtitle2" sx={{ mb: 1, fontWeight: 600 }}>
+            actions.setChatDrawerWidth(width) — aktuell: {companyState.chatDrawerWidth}px (min. 280)
+          </Typography>
+          <Stack direction="row" spacing={1} sx={{ alignItems: 'center', flexWrap: 'wrap', useFlexGap: true }}>
+            <TextField
+              size="small"
+              type="number"
+              label="Breite (px)"
+              value={chatDrawerWidthInput}
+              onChange={(e) => this.setState({ chatDrawerWidthInput: e.target.value })}
+              sx={{ width: 140 }}
+            />
+            <Button
+              size="small"
+              variant="contained"
+              onClick={() =>
+                this.runAction(
+                  `actions.setChatDrawerWidth(${chatDrawerWidthInput})`,
+                  () => act.setChatDrawerWidth(Number(chatDrawerWidthInput)),
+                  chatDrawerWidthInput,
+                )
+              }
+            >
+              Breite setzen
+            </Button>
+            {[360, 460, 600].map((preset) => (
+              <Button
+                key={preset}
+                size="small"
+                variant="outlined"
+                onClick={() => {
+                  this.setState({ chatDrawerWidthInput: String(preset) });
+                  void this.runAction(
+                    `actions.setChatDrawerWidth(${preset})`,
+                    () => act.setChatDrawerWidth(preset),
+                    String(preset),
+                  );
+                }}
+              >
+                {preset}px
+              </Button>
+            ))}
+          </Stack>
+        </Box>
+      </Stack>
+    );
+  }
+
+  renderWarehousesActions() {
+    const {
+      warehouseId,
+      warehouseBodyJson,
+      warehouseIdsJson,
+      warehousesReplaceJson,
+      companyState,
+    } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <SingleLineTextEdit
+            sx={{ flex: 1 }}
+            size="small"
+            search
+            clear
+            placeholder="actions.filterWarehouses(query)..."
+            value={companyState.warehouseFilter ?? ''}
+            onChange={(q) => act.filterWarehouses(q)}
+          />
+          <Chip
+            size="small"
+            label={`Gefiltert: ${companyState.filteredWarehouses?.length ?? 0} / ${companyState.warehouses?.length ?? 0}`}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadWarehouses()', () => act.loadWarehouses())}
+          >
+            actions.loadWarehouses()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() =>
+              this.runAction('actions.reloadWarehouses()', () => act.reloadWarehouses())
+            }
+          >
+            actions.reloadWarehouses()
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Warehouse ID"
+            value={warehouseId}
+            onChange={(e) => this.setState({ warehouseId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Body JSON (create/update/rename)"
+            value={warehouseBodyJson}
+            onChange={(e) => this.setState({ warehouseBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createWarehouse(body)',
+                () => act.createWarehouse(parseJsonInput(warehouseBodyJson, 'Warehouse Body')),
+                warehouseBodyJson,
+              )
+            }
+          >
+            createWarehouse
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!warehouseId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateWarehouse(id, body)',
+                () =>
+                  act.updateWarehouse(
+                    Number(warehouseId) || warehouseId,
+                    parseJsonInput(warehouseBodyJson, 'Warehouse Body'),
+                  ),
+                `id=${warehouseId}`,
+              )
+            }
+          >
+            updateWarehouse
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!warehouseId}
+            onClick={() =>
+              this.runAction(
+                'actions.renameWarehouse(id, body)',
+                () =>
+                  act.renameWarehouse(
+                    Number(warehouseId) || warehouseId,
+                    parseJsonInput(warehouseBodyJson, 'Warehouse Body'),
+                  ),
+                `id=${warehouseId}`,
+              )
+            }
+          >
+            renameWarehouse
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!warehouseId}
+            onClick={() =>
+              this.runAction(
+                'actions.removeWarehouse(id)',
+                () => act.removeWarehouse(Number(warehouseId) || warehouseId),
+                `id=${warehouseId}`,
+              )
+            }
+          >
+            removeWarehouse
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="warehouseIds JSON Array"
+            value={warehouseIdsJson}
+            onChange={(e) => this.setState({ warehouseIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.reorderWarehouses(warehouseIds)',
+                () => act.reorderWarehouses(parseJsonInput(warehouseIdsJson, 'warehouseIds')),
+                warehouseIdsJson,
+              )
+            }
+          >
+            reorderWarehouses
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="setWarehouses(warehouses) JSON Array"
+            value={warehousesReplaceJson}
+            onChange={(e) => this.setState({ warehousesReplaceJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                warehousesReplaceJson: safeJsonStringify(companyState.warehouses || []),
+              })
+            }
+          >
+            Füllen
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.setWarehouses(warehouses)',
+                () => act.setWarehouses(parseJsonInput(warehousesReplaceJson, 'Warehouses Array')),
+              )
+            }
+          >
+            setWarehouses
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderPropertiesActions() {
+    const { propertyId, propertyBodyJson, propertyIdsJson } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadProperties()', () => act.loadProperties())}
+          >
+            actions.loadProperties()
+          </Button>
+        </Box>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Property ID"
+            value={propertyId}
+            onChange={(e) => this.setState({ propertyId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Property Body JSON"
+            value={propertyBodyJson}
+            onChange={(e) => this.setState({ propertyBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createProperty(body)',
+                () => act.createProperty(parseJsonInput(propertyBodyJson, 'Property Body')),
+                propertyBodyJson,
+              )
+            }
+          >
+            createProperty
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!propertyId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateProperty(id, body)',
+                () =>
+                  act.updateProperty(
+                    Number(propertyId) || propertyId,
+                    parseJsonInput(propertyBodyJson, 'Property Body'),
+                  ),
+                `id=${propertyId}`,
+              )
+            }
+          >
+            updateProperty
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!propertyId}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteProperty(id)',
+                () => act.deleteProperty(Number(propertyId) || propertyId),
+                `id=${propertyId}`,
+              )
+            }
+          >
+            deleteProperty
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Property IDs JSON Array (für deleteProperties / reorderProperties)"
+            value={propertyIdsJson}
+            onChange={(e) => this.setState({ propertyIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.reorderProperties(ids)',
+                () => act.reorderProperties(parseJsonInput(propertyIdsJson, 'Property IDs')),
+                propertyIdsJson,
+              )
+            }
+          >
+            reorderProperties
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            onClick={() =>
+              this.runAction(
+                'actions.deleteProperties(ids)',
+                () => act.deleteProperties(parseJsonInput(propertyIdsJson, 'Property IDs')),
+                propertyIdsJson,
+              )
+            }
+          >
+            deleteProperties
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderCustomergroupsActions() {
+    const {
+      customergroupId,
+      customergroupBodyJson,
+      customergroupIdsJson,
+      customergroupsReplaceJson,
+      companyState,
+    } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <SingleLineTextEdit
+            sx={{ flex: 1 }}
+            size="small"
+            search
+            clear
+            placeholder="actions.filterCustomergroups(query)..."
+            value={companyState.customergroupFilter ?? ''}
+            onChange={(q) => act.filterCustomergroups(q)}
+          />
+          <Chip
+            size="small"
+            label={`Gefiltert: ${companyState.filteredCustomergroups?.length ?? 0} / ${companyState.customergroups?.length ?? 0}`}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() =>
+              this.runAction('actions.loadCustomergroups()', () => act.loadCustomergroups())
+            }
+          >
+            loadCustomergroups()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() =>
+              this.runAction('actions.reloadCustomergroups()', () => act.reloadCustomergroups())
+            }
+          >
+            reloadCustomergroups()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction('actions.ensureCustomergroupsLoaded()', () =>
+                act.ensureCustomergroupsLoaded(),
+              )
+            }
+          >
+            ensureCustomergroupsLoaded()
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Customergroup ID"
+            value={customergroupId}
+            onChange={(e) => this.setState({ customergroupId: e.target.value })}
+            sx={{ width: 150 }}
+          />
+          <TextField
+            size="small"
+            label="Body JSON"
+            value={customergroupBodyJson}
+            onChange={(e) => this.setState({ customergroupBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createCustomergroup(body)',
+                () =>
+                  act.createCustomergroup(
+                    parseJsonInput(customergroupBodyJson, 'Customergroup Body'),
+                  ),
+                customergroupBodyJson,
+              )
+            }
+          >
+            createCustomergroup
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!customergroupId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateCustomergroup(id, body)',
+                () =>
+                  act.updateCustomergroup(
+                    Number(customergroupId) || customergroupId,
+                    parseJsonInput(customergroupBodyJson, 'Customergroup Body'),
+                  ),
+                `id=${customergroupId}`,
+              )
+            }
+          >
+            updateCustomergroup
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!customergroupId}
+            onClick={() =>
+              this.runAction(
+                'actions.renameCustomergroup(id, body)',
+                () =>
+                  act.renameCustomergroup(
+                    Number(customergroupId) || customergroupId,
+                    parseJsonInput(customergroupBodyJson, 'Customergroup Body'),
+                  ),
+                `id=${customergroupId}`,
+              )
+            }
+          >
+            renameCustomergroup
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!customergroupId}
+            onClick={() =>
+              this.runAction(
+                'actions.removeCustomergroup(id)',
+                () => act.removeCustomergroup(Number(customergroupId) || customergroupId),
+                `id=${customergroupId}`,
+              )
+            }
+          >
+            removeCustomergroup
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="customergroupIds JSON Array"
+            value={customergroupIdsJson}
+            onChange={(e) => this.setState({ customergroupIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.reorderCustomergroups(ids)',
+                () =>
+                  act.reorderCustomergroups(
+                    parseJsonInput(customergroupIdsJson, 'customergroupIds'),
+                  ),
+                customergroupIdsJson,
+              )
+            }
+          >
+            reorderCustomergroups
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="replaceCustomergroups(items) JSON Array"
+            value={customergroupsReplaceJson}
+            onChange={(e) => this.setState({ customergroupsReplaceJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                customergroupsReplaceJson: safeJsonStringify(companyState.customergroups || []),
+              })
+            }
+          >
+            Füllen
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.replaceCustomergroups(items)',
+                () =>
+                  act.replaceCustomergroups(
+                    parseJsonInput(customergroupsReplaceJson, 'Customergroups Array'),
+                  ),
+              )
+            }
+          >
+            replaceCustomergroups
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderCarriersActions() {
+    const {
+      carrierId,
+      carrierBodyJson,
+      carrierIdsJson,
+      carriersReplaceJson,
+      companyState,
+    } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <SingleLineTextEdit
+            sx={{ flex: 1 }}
+            size="small"
+            search
+            clear
+            placeholder="actions.filterCarriers(query)..."
+            value={companyState.carrierFilter ?? ''}
+            onChange={(q) => act.filterCarriers(q)}
+          />
+          <Chip
+            size="small"
+            label={`Gefiltert: ${companyState.filteredCarriers?.length ?? 0} / ${companyState.carriers?.length ?? 0}`}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadCarriers()', () => act.loadCarriers())}
+          >
+            actions.loadCarriers()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.reloadCarriers()', () => act.reloadCarriers())}
+          >
+            actions.reloadCarriers()
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Carrier ID"
+            value={carrierId}
+            onChange={(e) => this.setState({ carrierId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Carrier Body JSON"
+            value={carrierBodyJson}
+            onChange={(e) => this.setState({ carrierBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createCarrier(body)',
+                () => act.createCarrier(parseJsonInput(carrierBodyJson, 'Carrier Body')),
+                carrierBodyJson,
+              )
+            }
+          >
+            createCarrier
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!carrierId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateCarrier(id, body)',
+                () =>
+                  act.updateCarrier(
+                    Number(carrierId) || carrierId,
+                    parseJsonInput(carrierBodyJson, 'Carrier Body'),
+                  ),
+                `id=${carrierId}`,
+              )
+            }
+          >
+            updateCarrier
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!carrierId}
+            onClick={() =>
+              this.runAction(
+                'actions.removeCarrier(id)',
+                () => act.removeCarrier(Number(carrierId) || carrierId),
+                `id=${carrierId}`,
+              )
+            }
+          >
+            removeCarrier
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="carrierIds JSON Array"
+            value={carrierIdsJson}
+            onChange={(e) => this.setState({ carrierIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.reorderCarriers(ids)',
+                () => act.reorderCarriers(parseJsonInput(carrierIdsJson, 'carrierIds')),
+                carrierIdsJson,
+              )
+            }
+          >
+            reorderCarriers
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="setCarriers(carriers) JSON Array"
+            value={carriersReplaceJson}
+            onChange={(e) => this.setState({ carriersReplaceJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                carriersReplaceJson: safeJsonStringify(companyState.carriers || []),
+              })
+            }
+          >
+            Füllen
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.setCarriers(carriers)',
+                () => act.setCarriers(parseJsonInput(carriersReplaceJson, 'Carriers Array')),
+              )
+            }
+          >
+            setCarriers
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderBrandsActions() {
+    const {
+      brandId,
+      brandBodyJson,
+      brandIdsJson,
+      brandImageFile,
+      companyState,
+    } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <SingleLineTextEdit
+            sx={{ flex: 1 }}
+            size="small"
+            search
+            clear
+            placeholder="actions.filterBrands(query)..."
+            value={companyState.brandFilter ?? ''}
+            onChange={(q) => act.filterBrands(q)}
+          />
+          <Chip
+            size="small"
+            label={`Gefiltert: ${companyState.filteredBrands?.length ?? 0} / ${companyState.brands?.length ?? 0}`}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadBrands(false)', () => act.loadBrands(false))}
+          >
+            actions.loadBrands(false)
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.loadBrands(true)', () => act.loadBrands(true))}
+          >
+            actions.loadBrands(true) (silent)
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Brand ID"
+            value={brandId}
+            onChange={(e) => this.setState({ brandId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Brand Body JSON (createBrand / renameBrand)"
+            value={brandBodyJson}
+            onChange={(e) => this.setState({ brandBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createBrand(body)',
+                () => act.createBrand(parseJsonInput(brandBodyJson, 'Brand Body')),
+                brandBodyJson,
+              )
+            }
+          >
+            createBrand
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!brandId}
+            onClick={() =>
+              this.runAction(
+                'actions.renameBrand(id, body)',
+                () =>
+                  act.renameBrand(
+                    Number(brandId) || brandId,
+                    parseJsonInput(brandBodyJson, 'Brand Body'),
+                  ),
+                `id=${brandId}`,
+              )
+            }
+          >
+            renameBrand
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!brandId}
+            onClick={() =>
+              this.runAction(
+                'actions.removeBrand(id)',
+                () => act.removeBrand(Number(brandId) || brandId),
+                `id=${brandId}`,
+              )
+            }
+          >
+            removeBrand
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!brandId}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteBrandImage(id)',
+                () => act.deleteBrandImage(Number(brandId) || brandId),
+                `id=${brandId}`,
+              )
+            }
+          >
+            deleteBrandImage
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <Button
+            component="label"
+            size="small"
+            variant="outlined"
+            startIcon={<UploadFileIcon />}
+          >
+            {brandImageFile ? brandImageFile.name : 'Bilddatei wählen…'}
+            <input
+              type="file"
+              accept="image/*"
+              hidden
+              onChange={(e) => this.setState({ brandImageFile: e.target.files?.[0] || null })}
+            />
+          </Button>
+          <Button
+            size="small"
+            variant="contained"
+            disabled={!brandId || !brandImageFile}
+            onClick={() =>
+              this.runAction(
+                'actions.addBrandImage(id, file)',
+                () => act.addBrandImage(Number(brandId) || brandId, brandImageFile),
+                `id=${brandId}, file=${brandImageFile?.name}`,
+              )
+            }
+          >
+            addBrandImage(id, file)
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Brand IDs JSON Array (für removeBrands)"
+            value={brandIdsJson}
+            onChange={(e) => this.setState({ brandIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            onClick={() =>
+              this.runAction(
+                'actions.removeBrands(ids)',
+                () => act.removeBrands(parseJsonInput(brandIdsJson, 'Brand IDs')),
+                brandIdsJson,
+              )
+            }
+          >
+            removeBrands(ids)
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderAttributesActions() {
+    const {
+      attributeId,
+      attributeBodyJson,
+      attributeIdsJson,
+      attributeValueId,
+      attributeValueBodyJson,
+      attributeValueIdsJson,
+    } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadAttributes()', () => act.loadAttributes())}
+          >
+            actions.loadAttributes()
+          </Button>
+        </Box>
+
+        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+          Attribute (attributename)
+        </Typography>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Attribute ID"
+            value={attributeId}
+            onChange={(e) => this.setState({ attributeId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Attribute Body JSON"
+            value={attributeBodyJson}
+            onChange={(e) => this.setState({ attributeBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.createAttribute(body)',
+                () => act.createAttribute(parseJsonInput(attributeBodyJson, 'Attribute Body')),
+                attributeBodyJson,
+              )
+            }
+          >
+            createAttribute
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!attributeId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateAttribute(id, body)',
+                () =>
+                  act.updateAttribute(
+                    Number(attributeId) || attributeId,
+                    parseJsonInput(attributeBodyJson, 'Attribute Body'),
+                  ),
+                `id=${attributeId}`,
+              )
+            }
+          >
+            updateAttribute
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!attributeId}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteAttribute(id)',
+                () => act.deleteAttribute(Number(attributeId) || attributeId),
+                `id=${attributeId}`,
+              )
+            }
+          >
+            deleteAttribute
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Attribute IDs JSON Array"
+            value={attributeIdsJson}
+            onChange={(e) => this.setState({ attributeIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction(
+                'actions.reorderAttributes(ids)',
+                () => act.reorderAttributes(parseJsonInput(attributeIdsJson, 'Attribute IDs')),
+                attributeIdsJson,
+              )
+            }
+          >
+            reorderAttributes
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            onClick={() =>
+              this.runAction(
+                'actions.deleteAttributes(ids)',
+                () => act.deleteAttributes(parseJsonInput(attributeIdsJson, 'Attribute IDs')),
+                attributeIdsJson,
+              )
+            }
+          >
+            deleteAttributes
+          </Button>
+        </Stack>
+
+        <Divider />
+
+        <Typography variant="subtitle2" sx={{ fontWeight: 700 }}>
+          Attribute Values (attributevalue)
+        </Typography>
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Value ID"
+            value={attributeValueId}
+            onChange={(e) => this.setState({ attributeValueId: e.target.value })}
+            sx={{ width: 140 }}
+          />
+          <TextField
+            size="small"
+            label="Value Body JSON"
+            value={attributeValueBodyJson}
+            onChange={(e) => this.setState({ attributeValueBodyJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+        </Stack>
+
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            disabled={!attributeId}
+            onClick={() =>
+              this.runAction(
+                'actions.createValue(attributeId, body)',
+                () =>
+                  act.createValue(
+                    Number(attributeId) || attributeId,
+                    parseJsonInput(attributeValueBodyJson, 'Value Body'),
+                  ),
+                `attributeId=${attributeId}`,
+              )
+            }
+          >
+            createValue (benötigt Attribute ID)
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!attributeValueId}
+            onClick={() =>
+              this.runAction(
+                'actions.updateValue(id, body)',
+                () =>
+                  act.updateValue(
+                    Number(attributeValueId) || attributeValueId,
+                    parseJsonInput(attributeValueBodyJson, 'Value Body'),
+                  ),
+                `id=${attributeValueId}`,
+              )
+            }
+          >
+            updateValue
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            disabled={!attributeValueId}
+            onClick={() =>
+              this.runAction(
+                'actions.deleteValue(id)',
+                () => act.deleteValue(Number(attributeValueId) || attributeValueId),
+                `id=${attributeValueId}`,
+              )
+            }
+          >
+            deleteValue
+          </Button>
+        </Stack>
+
+        <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1} sx={{ alignItems: 'center' }}>
+          <TextField
+            size="small"
+            label="Value IDs JSON Array"
+            value={attributeValueIdsJson}
+            onChange={(e) => this.setState({ attributeValueIdsJson: e.target.value })}
+            sx={{ flex: 1 }}
+            slotProps={{
+              input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+            }}
+          />
+          <Button
+            size="small"
+            variant="outlined"
+            disabled={!attributeId}
+            onClick={() =>
+              this.runAction(
+                'actions.reorderValues(attributeId, ids)',
+                () =>
+                  act.reorderValues(
+                    Number(attributeId) || attributeId,
+                    parseJsonInput(attributeValueIdsJson, 'Value IDs'),
+                  ),
+                `attributeId=${attributeId}`,
+              )
+            }
+          >
+            reorderValues
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            onClick={() =>
+              this.runAction(
+                'actions.deleteValues(ids)',
+                () => act.deleteValues(parseJsonInput(attributeValueIdsJson, 'Value IDs')),
+                attributeValueIdsJson,
+              )
+            }
+          >
+            deleteValues
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderAccountsActions() {
+    const { accountsReplaceJson, companyState } = this.state;
+    const act = companyAutomat.actions;
+
+    return (
+      <Stack spacing={2}>
+        <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={() => this.runAction('actions.loadAccounts()', () => act.loadAccounts())}
+          >
+            actions.loadAccounts()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<RefreshIcon />}
+            onClick={() => this.runAction('actions.reloadAccounts()', () => act.reloadAccounts())}
+          >
+            actions.reloadAccounts()
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            onClick={() =>
+              this.runAction('actions.ensureAccountsLoaded()', () => act.ensureAccountsLoaded())
+            }
+          >
+            actions.ensureAccountsLoaded()
+          </Button>
+          <Button
+            size="small"
+            variant="text"
+            onClick={() =>
+              this.setState({
+                accountsReplaceJson: safeJsonStringify(companyState.accounts || []),
+              })
+            }
+          >
+            Aktuelle state.accounts übernehmen
+          </Button>
+        </Stack>
+
+        <TextField
+          size="small"
+          label="Items für actions.replaceAccounts(items) (JSON Array)"
+          multiline
+          minRows={3}
+          maxRows={8}
+          fullWidth
+          value={accountsReplaceJson}
+          onChange={(e) => this.setState({ accountsReplaceJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+        <Box>
+          <Button
+            size="small"
+            variant="contained"
+            onClick={() =>
+              this.runAction(
+                'actions.replaceAccounts(items)',
+                () => act.replaceAccounts(parseJsonInput(accountsReplaceJson, 'Accounts Array')),
+                accountsReplaceJson,
+              )
+            }
+          >
+            actions.replaceAccounts(items)
+          </Button>
+        </Box>
+      </Stack>
+    );
+  }
+
+  renderDirectSetStateActions() {
+    const { directSetStateKey, directSetStateJson, companyState } = this.state;
+    const allKeys = Object.keys(companyState);
+
+    return (
+      <Stack spacing={2}>
+        <Typography variant="body2" color="text.secondary">
+          Direktes Patchen von <code>companyAutomat.setState(partial)</code> zum Testen reaktiver
+          Subscriber und UI-Zustände:
+        </Typography>
+
+        <Stack direction="row" spacing={0.75} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+          {allKeys.map((key) => (
+            <Chip
+              key={key}
+              size="small"
+              label={key}
+              color={directSetStateKey === key ? 'primary' : 'default'}
+              variant={directSetStateKey === key ? 'filled' : 'outlined'}
+              onClick={() => this.loadKeyIntoSetStateEditor(key)}
+              sx={{ cursor: 'pointer', fontFamily: 'monospace', fontSize: '0.74rem' }}
+            />
+          ))}
+        </Stack>
+
+        <TextField
+          size="small"
+          label="Partial State JSON Objekt"
+          multiline
+          minRows={5}
+          maxRows={14}
+          fullWidth
+          value={directSetStateJson}
+          onChange={(e) => this.setState({ directSetStateJson: e.target.value })}
+          slotProps={{
+            input: { sx: { fontFamily: 'monospace', fontSize: '0.8rem' } },
+          }}
+        />
+
+        <Stack direction="row" spacing={1}>
+          <Button
+            size="small"
+            variant="contained"
+            startIcon={<PlayArrowIcon />}
+            onClick={this.handleDirectSetState}
+          >
+            companyAutomat.setState(partial) ausführen
+          </Button>
+          <Button
+            size="small"
+            variant="outlined"
+            startIcon={<ContentCopyIcon />}
+            onClick={() => this.handleCopyJson(directSetStateJson, 'Partial State')}
+          >
+            JSON kopieren
+          </Button>
+        </Stack>
+      </Stack>
+    );
+  }
+
+  renderActiveDomainInputs() {
+    switch (this.state.activeDomain) {
+      case 'company':
+        return this.renderCompanyActions();
+      case 'numbers':
+        return this.renderNumbersActions();
+      case 'terminals':
+        return this.renderTerminalsActions();
+      case 'suppliers':
+        return this.renderSuppliersActions();
+      case 'units':
+        return this.renderUnitsActions();
+      case 'userSettings':
+        return this.renderUserSettingsActions();
+      case 'warehouses':
+        return this.renderWarehousesActions();
+      case 'properties':
+        return this.renderPropertiesActions();
+      case 'customergroups':
+        return this.renderCustomergroupsActions();
+      case 'carriers':
+        return this.renderCarriersActions();
+      case 'brands':
+        return this.renderBrandsActions();
+      case 'attributes':
+        return this.renderAttributesActions();
+      case 'accounts':
+        return this.renderAccountsActions();
+      case 'setState':
+        return this.renderDirectSetStateActions();
+      default:
+        return null;
+    }
+  }
+  // #endregion
+
+  // #region main render
+  render() {
+    const {
+      companyState,
+      authState,
+      automatMeta,
+      activeDomain,
+      stateKeyFilter,
+      selectorDomainFilter,
+      expandedSelectors,
+      expandedStateKeys,
+      showRawFullState,
+      mutationLog,
+      actionHistory,
+      runningAction,
+    } = this.state;
+
+    const filteredSelectors = SELECTOR_DEFINITIONS.filter(
+      (sel) => selectorDomainFilter === 'all' || sel.domain === selectorDomainFilter,
+    );
+
+    const stateEntries = Object.entries(companyState).filter(([key]) =>
+      stateKeyFilter
+        ? key.toLowerCase().includes(stateKeyFilter.trim().toLowerCase())
+        : true,
+    );
+
+    return (
+      <Stack spacing={2.5}>
+        {/* 1. Overview & Automat Lifecycle + Domain Matrix */}
+        <PanelTileGrid>
+          <PanelTile title="Automat Instanz & Auth-Kopplung" wide={1} color={PETROL_PANEL}>
+            <Stack spacing={1.5}>
+              <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+                <Chip
+                  size="small"
+                  label={`name: "${automatMeta.name}"`}
+                  sx={{ fontFamily: 'monospace', fontWeight: 600 }}
+                />
+                <Chip
+                  size="small"
+                  color={automatMeta.isReady ? 'success' : 'default'}
+                  label={`isReady: ${String(automatMeta.isReady)}`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+                <Chip
+                  size="small"
+                  color={automatMeta.isDirty ? 'warning' : 'default'}
+                  label={`isDirty: ${String(automatMeta.isDirty)}`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+                <Chip
+                  size="small"
+                  color="primary"
+                  label={`subscribers: ${automatMeta.subscriberCount}`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+              </Stack>
+
+              <Divider />
+
+              <Typography variant="caption" sx={{ fontWeight: 700, color: 'text.secondary' }}>
+                Upstream: authAutomat
+              </Typography>
+              <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+                <Chip
+                  size="small"
+                  color={statusChipColor(authState.status)}
+                  label={`auth.status: "${authState.status}"`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+                <Chip
+                  size="small"
+                  color={authState.hasCompany ? 'success' : 'warning'}
+                  label={`hasCompany: ${String(Boolean(authState.hasCompany))}`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+                <Chip
+                  size="small"
+                  label={`selectedCompanyId: ${authState.user?.selectedCompanyId ?? 'null'}`}
+                  sx={{ fontFamily: 'monospace' }}
+                />
+              </Stack>
+
+              <Divider />
+
+              <Typography variant="caption" sx={{ fontWeight: 700, color: 'text.secondary' }}>
+                Globale Steuerung (Inputs)
+              </Typography>
+              <Stack direction="row" spacing={1} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+                <Button
+                  size="small"
+                  variant="contained"
+                  startIcon={<RefreshIcon />}
+                  disabled={Boolean(runningAction)}
+                  onClick={() =>
+                    this.runAction('companyAutomat.actions.loadAll()', () =>
+                      companyAutomat.actions.loadAll(),
+                    )
+                  }
+                >
+                  loadAll()
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  startIcon={<PlayArrowIcon />}
+                  disabled={Boolean(runningAction)}
+                  onClick={() =>
+                    this.runAction('companyAutomat.actions.load()', () =>
+                      companyAutomat.actions.load(),
+                    )
+                  }
+                >
+                  load()
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  color="warning"
+                  startIcon={<RestartAltIcon />}
+                  disabled={Boolean(runningAction)}
+                  onClick={() =>
+                    this.runAction('companyAutomat.actions.reset()', () =>
+                      companyAutomat.actions.reset(),
+                    )
+                  }
+                >
+                  reset()
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  onClick={() =>
+                    this.runAction('companyAutomat.reload()', () => companyAutomat.reload())
+                  }
+                >
+                  automat.reload()
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  color="warning"
+                  onClick={() =>
+                    this.runAction('companyAutomat.setDirty()', () => companyAutomat.setDirty())
+                  }
+                >
+                  automat.setDirty()
+                </Button>
+                <Button
+                  size="small"
+                  variant="outlined"
+                  color="error"
+                  onClick={() =>
+                    this.runAction('companyAutomat.clearPersistence()', () =>
+                      companyAutomat.clearPersistence(),
+                    )
+                  }
+                >
+                  clearPersistence()
+                </Button>
+              </Stack>
+            </Stack>
+          </PanelTile>
+
+          <PanelTile title="13 Domänen-Statusübersicht (Slices)" wide={2} color={BLUE_PANEL}>
+            <Box
+              sx={{
+                display: 'grid',
+                gridTemplateColumns: {
+                  xs: '1fr',
+                  sm: 'repeat(2, 1fr)',
+                  lg: 'repeat(3, 1fr)',
+                },
+                gap: 1,
+              }}
+            >
+              {DOMAIN_DEFINITIONS.map((dom) => {
+                const status = dom.statusKey ? companyState[dom.statusKey] : 'ready';
+                const err = dom.errorKey ? companyState[dom.errorKey] : null;
+                const data = companyState[dom.dataKey];
+                const isSelected = activeDomain === dom.id;
+
+                return (
+                  <Box
+                    key={dom.id}
+                    onClick={() => this.setState({ activeDomain: dom.id })}
+                    sx={{
+                      p: 1.25,
+                      borderRadius: 1.5,
+                      bgcolor: isSelected ? SELECT_BG : SURFACE_BASE,
+                      border: '1px solid',
+                      borderColor: isSelected ? SELECT_BORDER : BORDER,
+                      cursor: 'pointer',
+                      display: 'flex',
+                      flexDirection: 'column',
+                      justifyContent: 'space-between',
+                      gap: 0.75,
+                    }}
+                  >
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+                    >
+                      <Typography variant="subtitle2" sx={{ fontWeight: 700, fontSize: '0.8rem' }}>
+                        {dom.label}
+                      </Typography>
+                      <Chip
+                        size="small"
+                        color={statusChipColor(status)}
+                        label={status}
+                        sx={{ height: 20, fontSize: '0.68rem', fontFamily: 'monospace' }}
+                      />
+                    </Stack>
+
+                    <Stack
+                      direction="row"
+                      spacing={1}
+                      sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+                    >
+                      <Typography
+                        variant="caption"
+                        sx={{ fontFamily: 'monospace', color: 'text.secondary' }}
+                      >
+                        {dom.dataKey}: {summarizeValue(data)}
+                      </Typography>
+
+                      {dom.loadAction && (
+                        <Button
+                          size="small"
+                          variant="text"
+                          sx={{ py: 0, px: 0.75, minWidth: 0, fontSize: '0.72rem' }}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            void this.runAction(`actions.${dom.loadAction}()`, () =>
+                              companyAutomat.actions[dom.loadAction](),
+                            );
+                          }}
+                        >
+                          Load
+                        </Button>
+                      )}
+                    </Stack>
+
+                    {err ? (
+                      <Typography
+                        variant="caption"
+                        color="error"
+                        sx={{ fontFamily: 'monospace', fontSize: '0.7rem' }}
+                      >
+                        Error: {err?.message ?? String(err)}
+                      </Typography>
+                    ) : null}
+                  </Box>
+                );
+              })}
+            </Box>
+          </PanelTile>
+        </PanelTileGrid>
+
+        {/* 2. Interactive Inputs (Actions & setState) + Action Execution Log */}
+        <PanelTileGrid>
+          <PanelTile title="Inputs: Actions & State Mutationen" wide={2} color={PURPLE_PANEL}>
+            <Stack spacing={2}>
+              <Stack direction="row" spacing={0.75} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+                {DOMAIN_DEFINITIONS.map((dom) => (
+                  <Chip
+                    key={dom.id}
+                    size="small"
+                    label={dom.label}
+                    color={activeDomain === dom.id ? 'primary' : 'default'}
+                    variant={activeDomain === dom.id ? 'filled' : 'outlined'}
+                    onClick={() => this.setState({ activeDomain: dom.id })}
+                    sx={{ cursor: 'pointer', fontWeight: activeDomain === dom.id ? 700 : 500 }}
+                  />
+                ))}
+                <Chip
+                  size="small"
+                  label="14. Direct setState(partial)"
+                  color={activeDomain === 'setState' ? 'secondary' : 'default'}
+                  variant={activeDomain === 'setState' ? 'filled' : 'outlined'}
+                  onClick={() => this.setState({ activeDomain: 'setState' })}
+                  sx={{ cursor: 'pointer', fontWeight: activeDomain === 'setState' ? 700 : 500 }}
+                />
+              </Stack>
+
+              <Divider />
+
+              <Box
+                sx={{
+                  p: 2,
+                  borderRadius: 2,
+                  bgcolor: SURFACE_BASE,
+                  border: '1px solid',
+                  borderColor: BORDER,
+                }}
+              >
+                {this.renderActiveDomainInputs()}
+              </Box>
+            </Stack>
+          </PanelTile>
+
+          <PanelTile title="Action-Ausführungsprotokoll (Return / Error)" wide={1} color={ORANGE_PANEL}>
+            <Stack spacing={1}>
+              <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+                <Typography variant="caption" color="text.secondary">
+                  {actionHistory.length} Aufrufe protokolliert
+                </Typography>
+                <Button
+                  size="small"
+                  variant="text"
+                  startIcon={<DeleteSweepIcon />}
+                  disabled={!actionHistory.length}
+                  onClick={() => this.setState({ actionHistory: [] })}
+                >
+                  Leeren
+                </Button>
+              </Stack>
+
+              {actionHistory.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
+                  Noch keine Action über das Debug-Panel ausgeführt.
+                </Typography>
+              ) : (
+                <Stack spacing={1} sx={{ maxHeight: 440, overflowY: 'auto', pr: 0.5 }}>
+                  {actionHistory.map((item) => (
+                    <Box
+                      key={item.id}
+                      sx={{
+                        p: 1.25,
+                        borderRadius: 1.5,
+                        bgcolor: item.status === 'rejected' ? RED_PANEL : SURFACE_BASE,
+                        border: '1px solid',
+                        borderColor: BORDER,
+                      }}
+                    >
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        sx={{ alignItems: 'center', justifyContent: 'space-between', mb: 0.5 }}
+                      >
+                        <Typography
+                          variant="caption"
+                          sx={{ fontFamily: 'monospace', fontWeight: 700 }}
+                        >
+                          {item.label}
+                        </Typography>
+                        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
+                          <Chip
+                            size="small"
+                            color={item.status === 'fulfilled' ? 'success' : 'error'}
+                            label={`${item.durationMs} ms`}
+                            sx={{ height: 18, fontSize: '0.65rem' }}
+                          />
+                          <Typography variant="caption" color="text.secondary">
+                            {item.timestamp}
+                          </Typography>
+                        </Stack>
+                      </Stack>
+
+                      {item.argsPreview ? (
+                        <Typography
+                          variant="caption"
+                          color="text.secondary"
+                          sx={{ display: 'block', fontFamily: 'monospace', mb: 0.5 }}
+                        >
+                          args: {item.argsPreview}
+                        </Typography>
+                      ) : null}
+
+                      <Box
+                        component="pre"
+                        sx={{
+                          m: 0,
+                          p: 1,
+                          borderRadius: 1,
+                          bgcolor: TINT_SUBTLE,
+                          fontFamily: 'monospace',
+                          fontSize: '0.72rem',
+                          maxHeight: 150,
+                          overflow: 'auto',
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                        }}
+                      >
+                        {item.output}
+                      </Box>
+                    </Box>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </PanelTile>
+        </PanelTileGrid>
+
+        {/* 3. Outputs: Exported Selectors Live Evaluation */}
+        <PanelTileGrid>
+          <PanelTile title="Outputs: Alle exportierten Selektoren (Live-Werte)" wide={3} color={GREEN_PANEL}>
+            <Stack spacing={1.5}>
+              <Stack
+                direction="row"
+                spacing={0.75}
+                sx={{ alignItems: 'center', flexWrap: 'wrap', useFlexGap: true }}
+              >
+                <Chip
+                  size="small"
+                  label={`Alle (${SELECTOR_DEFINITIONS.length})`}
+                  color={selectorDomainFilter === 'all' ? 'primary' : 'default'}
+                  variant={selectorDomainFilter === 'all' ? 'filled' : 'outlined'}
+                  onClick={() => this.setState({ selectorDomainFilter: 'all' })}
+                  sx={{ cursor: 'pointer' }}
+                />
+                {DOMAIN_DEFINITIONS.map((dom) => (
+                  <Chip
+                    key={dom.id}
+                    size="small"
+                    label={dom.id}
+                    color={selectorDomainFilter === dom.id ? 'primary' : 'default'}
+                    variant={selectorDomainFilter === dom.id ? 'filled' : 'outlined'}
+                    onClick={() => this.setState({ selectorDomainFilter: dom.id })}
+                    sx={{ cursor: 'pointer', fontFamily: 'monospace' }}
+                  />
+                ))}
+              </Stack>
+
+              <Box
+                sx={{
+                  display: 'grid',
+                  gridTemplateColumns: {
+                    xs: '1fr',
+                    md: 'repeat(2, 1fr)',
+                    xl: 'repeat(3, 1fr)',
+                  },
+                  gap: 1,
+                }}
+              >
+                {filteredSelectors.map((sel) => {
+                  let val;
+                  let threw = null;
+                  try {
+                    val = sel.fn();
+                  } catch (err) {
+                    threw = err;
+                  }
+                  const expanded = Boolean(expandedSelectors[sel.name]);
+                  const isComplex = val !== null && typeof val === 'object';
+
+                  return (
+                    <Box
+                      key={sel.name}
+                      sx={{
+                        p: 1.25,
+                        borderRadius: 1.5,
+                        bgcolor: SURFACE_BASE,
+                        border: '1px solid',
+                        borderColor: BORDER,
+                      }}
+                    >
+                      <Stack
+                        direction="row"
+                        spacing={1}
+                        sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+                      >
+                        <Typography
+                          variant="body2"
+                          sx={{ fontFamily: 'monospace', fontWeight: 700, fontSize: '0.78rem' }}
+                        >
+                          {sel.name}()
+                        </Typography>
+                        <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
+                          <Chip
+                            size="small"
+                            label={sel.domain}
+                            sx={{ height: 18, fontSize: '0.65rem', bgcolor: TINT_CHIP }}
+                          />
+                          {isComplex && (
+                            <Button
+                              size="small"
+                              variant="text"
+                              sx={{ minWidth: 0, p: 0.25 }}
+                              onClick={() => this.toggleSelectorExpand(sel.name)}
+                            >
+                              {expanded ? (
+                                <ExpandLessIcon fontSize="small" />
+                              ) : (
+                                <ExpandMoreIcon fontSize="small" />
+                              )}
+                            </Button>
+                          )}
+                        </Stack>
+                      </Stack>
+
+                      <Typography
+                        variant="caption"
+                        color={threw ? 'error' : 'text.secondary'}
+                        sx={{
+                          display: 'block',
+                          mt: 0.5,
+                          fontFamily: 'monospace',
+                          fontWeight: 600,
+                        }}
+                      >
+                        → {threw ? `Throws: ${threw.message}` : summarizeValue(val)}
+                      </Typography>
+
+                      {expanded && isComplex && (
+                        <Box
+                          component="pre"
+                          sx={{
+                            mt: 1,
+                            mb: 0,
+                            p: 1,
+                            borderRadius: 1,
+                            bgcolor: SURFACE_RAISED,
+                            fontFamily: 'monospace',
+                            fontSize: '0.72rem',
+                            maxHeight: 220,
+                            overflow: 'auto',
+                            whiteSpace: 'pre-wrap',
+                            wordBreak: 'break-word',
+                          }}
+                        >
+                          {safeJsonStringify(val)}
+                        </Box>
+                      )}
+                    </Box>
+                  );
+                })}
+              </Box>
+            </Stack>
+          </PanelTile>
+        </PanelTileGrid>
+
+        {/* 4. Internal State Browser & Live Subscription Event Log */}
+        <PanelTileGrid>
+          <PanelTile title="Internal State (companyAutomat.state)" wide={2} color={YELLOW_PANEL}>
+            <Stack spacing={1.5}>
+              <Stack
+                direction={{ xs: 'column', sm: 'row' }}
+                spacing={1}
+                sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+              >
+                <SingleLineTextEdit
+                  sx={{ flex: 1, width: '100%' }}
+                  size="small"
+                  search
+                  clear
+                  placeholder="State-Keys filtern (z.B. current, brands, warehouses, status)..."
+                  value={stateKeyFilter}
+                  onChange={(val) => this.setState({ stateKeyFilter: val })}
+                />
+                <Stack direction="row" spacing={1} sx={{ flexShrink: 0 }}>
+                  <Button
+                    size="small"
+                    variant={showRawFullState ? 'contained' : 'outlined'}
+                    onClick={() =>
+                      this.setState((prev) => ({ showRawFullState: !prev.showRawFullState }))
+                    }
+                  >
+                    {showRawFullState ? 'Key-Ansicht' : 'Komplettes Raw-JSON'}
+                  </Button>
+                  <Button
+                    size="small"
+                    variant="outlined"
+                    startIcon={<ContentCopyIcon />}
+                    onClick={() => this.handleCopyJson(companyState, 'companyAutomat.state')}
+                  >
+                    State kopieren
+                  </Button>
+                </Stack>
+              </Stack>
+
+              {showRawFullState ? (
+                <Box
+                  component="pre"
+                  sx={{
+                    m: 0,
+                    p: 1.5,
+                    borderRadius: 1.5,
+                    bgcolor: SURFACE_BASE,
+                    border: '1px solid',
+                    borderColor: BORDER,
+                    fontFamily: 'monospace',
+                    fontSize: '0.74rem',
+                    maxHeight: 640,
+                    overflow: 'auto',
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                  }}
+                >
+                  {safeJsonStringify(companyState)}
+                </Box>
+              ) : (
+                <Stack spacing={1} sx={{ maxHeight: 640, overflowY: 'auto', pr: 0.5 }}>
+                  {stateEntries.map(([key, value]) => {
+                    const expanded = Boolean(expandedStateKeys[key]);
+                    const isComplex = value !== null && typeof value === 'object';
+
+                    return (
+                      <Box
+                        key={key}
+                        sx={{
+                          p: 1.25,
+                          borderRadius: 1.5,
+                          bgcolor: SURFACE_BASE,
+                          border: '1px solid',
+                          borderColor: BORDER,
+                        }}
+                      >
+                        <Stack
+                          direction="row"
+                          spacing={1}
+                          sx={{ alignItems: 'center', justifyContent: 'space-between' }}
+                        >
+                          <Stack
+                            direction="row"
+                            spacing={1}
+                            sx={{ alignItems: 'center', minWidth: 0 }}
+                          >
+                            <Typography
+                              variant="body2"
+                              sx={{ fontFamily: 'monospace', fontWeight: 700 }}
+                            >
+                              {key}
+                            </Typography>
+                            <Chip
+                              size="small"
+                              label={summarizeValue(value)}
+                              color={key.endsWith('Status') ? statusChipColor(value) : 'default'}
+                              sx={{
+                                height: 20,
+                                fontSize: '0.7rem',
+                                fontFamily: 'monospace',
+                              }}
+                            />
+                          </Stack>
+
+                          <Stack direction="row" spacing={0.5} sx={{ alignItems: 'center' }}>
+                            <Button
+                              size="small"
+                              variant="text"
+                              sx={{ fontSize: '0.7rem', py: 0, px: 0.75 }}
+                              onClick={() => this.loadKeyIntoSetStateEditor(key)}
+                            >
+                              setState
+                            </Button>
+                            <Button
+                              size="small"
+                              variant="text"
+                              sx={{ fontSize: '0.7rem', py: 0, px: 0.75 }}
+                              onClick={() => this.handleCopyJson(value, `state.${key}`)}
+                            >
+                              Copy
+                            </Button>
+                            {isComplex && (
+                              <Button
+                                size="small"
+                                variant="text"
+                                sx={{ minWidth: 0, p: 0.25 }}
+                                onClick={() => this.toggleStateKeyExpand(key)}
+                              >
+                                {expanded ? (
+                                  <ExpandLessIcon fontSize="small" />
+                                ) : (
+                                  <ExpandMoreIcon fontSize="small" />
+                                )}
+                              </Button>
+                            )}
+                          </Stack>
+                        </Stack>
+
+                        {expanded && isComplex && (
+                          <Box
+                            component="pre"
+                            sx={{
+                              mt: 1,
+                              mb: 0,
+                              p: 1,
+                              borderRadius: 1,
+                              bgcolor: SURFACE_RAISED,
+                              fontFamily: 'monospace',
+                              fontSize: '0.72rem',
+                              maxHeight: 280,
+                              overflow: 'auto',
+                              whiteSpace: 'pre-wrap',
+                              wordBreak: 'break-word',
+                            }}
+                          >
+                            {safeJsonStringify(value)}
+                          </Box>
+                        )}
+                      </Box>
+                    );
+                  })}
+                </Stack>
+              )}
+            </Stack>
+          </PanelTile>
+
+          <PanelTile title="Live State-Mutations-Log (subscribe)" wide={1} color={PETROL_PANEL}>
+            <Stack spacing={1}>
+              <Stack direction="row" sx={{ alignItems: 'center', justifyContent: 'space-between' }}>
+                <Typography variant="caption" color="text.secondary">
+                  {mutationLog.length} State-Emissionen empfangen
+                </Typography>
+                <Button
+                  size="small"
+                  variant="text"
+                  startIcon={<DeleteSweepIcon />}
+                  disabled={!mutationLog.length}
+                  onClick={() => this.setState({ mutationLog: [] })}
+                >
+                  Leeren
+                </Button>
+              </Stack>
+
+              {mutationLog.length === 0 ? (
+                <Typography variant="body2" color="text.secondary" sx={{ py: 4, textAlign: 'center' }}>
+                  Warte auf State-Änderungen an companyAutomat…
+                </Typography>
+              ) : (
+                <Stack spacing={1} sx={{ maxHeight: 640, overflowY: 'auto', pr: 0.5 }}>
+                  {mutationLog.map((entry) => (
+                    <Box
+                      key={entry.id}
+                      sx={{
+                        p: 1,
+                        borderRadius: 1.5,
+                        bgcolor: SURFACE_BASE,
+                        border: '1px solid',
+                        borderColor: BORDER,
+                      }}
+                    >
+                      <Stack
+                        direction="row"
+                        spacing={0.5}
+                        sx={{
+                          alignItems: 'center',
+                          justifyContent: 'space-between',
+                          mb: 0.5,
+                          flexWrap: 'wrap',
+                        }}
+                      >
+                        <Stack direction="row" spacing={0.5} sx={{ flexWrap: 'wrap', useFlexGap: true }}>
+                          {entry.keys.length > 0 ? (
+                            entry.keys.map((k) => (
+                              <Chip
+                                key={k}
+                                size="small"
+                                label={k}
+                                color="primary"
+                                variant="outlined"
+                                sx={{ height: 18, fontSize: '0.66rem', fontFamily: 'monospace' }}
+                              />
+                            ))
+                          ) : (
+                            <Chip
+                              size="small"
+                              label="full state"
+                              sx={{ height: 18, fontSize: '0.66rem', fontFamily: 'monospace' }}
+                            />
+                          )}
+                        </Stack>
+                        <Typography variant="caption" color="text.secondary" sx={{ fontFamily: 'monospace' }}>
+                          {entry.timestamp}
+                        </Typography>
+                      </Stack>
+
+                      <Box
+                        component="pre"
+                        sx={{
+                          m: 0,
+                          p: 0.75,
+                          borderRadius: 1,
+                          bgcolor: TINT_SUBTLE,
+                          fontFamily: 'monospace',
+                          fontSize: '0.68rem',
+                          maxHeight: 120,
+                          overflow: 'auto',
+                          whiteSpace: 'pre-wrap',
+                          wordBreak: 'break-word',
+                        }}
+                      >
+                        {entry.partialSnapshot}
+                      </Box>
+                    </Box>
+                  ))}
+                </Stack>
+              )}
+            </Stack>
+          </PanelTile>
+        </PanelTileGrid>
+      </Stack>
+    );
+  }
+  // #endregion
+}