From b80f52cb502d7250822aa82eacb7b484dedbbe74 Mon Sep 17 00:00:00 2001
From: Lars <Lars@stommer.de>
Date: Wed, 29 Jul 2026 08:17:39 +0200
Subject: [PATCH] =?UTF-8?q?feat(plan):=20Join-Gate=20im=20Gate-Designer=20?=
 =?UTF-8?q?f=C3=BCr=20alle=20Archetypen?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Typ Join/Schaltknoten anlegbar, Detail ohne Verify, visuelle Kennzeichnung im Graph.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 .../src/components/GateDesignerNodePanel.jsx  | 13 +++++-
 frontend/src/components/GateGraphDesigner.jsx |  1 +
 frontend/src/components/GateMapView.jsx       |  1 +
 frontend/src/components/RoadmapItemForm.jsx   | 43 ++++++++++++++-----
 frontend/src/constants/status.js              | 12 ++++++
 .../initiative/RoadmapItemDetailPage.jsx      | 41 +++++++++++++-----
 frontend/src/styles/components.css            |  7 +++
 7 files changed, 95 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/GateDesignerNodePanel.jsx b/frontend/src/components/GateDesignerNodePanel.jsx
index be454e7..ecddf72 100644
--- a/frontend/src/components/GateDesignerNodePanel.jsx
+++ b/frontend/src/components/GateDesignerNodePanel.jsx
@@ -3,6 +3,7 @@ import { gatePath } from '../utils/routes.js'
 import {
   MILESTONE_STATUS_LABELS,
   ROADMAP_ITEM_TYPE_LABELS,
+  isJoinGateItem,
 } from '../constants/status.js'
 import { StatusBadge } from './StatusBadge.jsx'
 
@@ -25,6 +26,7 @@ export function GateDesignerNodePanel({
 }) {
   if (!item) return null
 
+  const joinGate = isJoinGateItem(item)
   const graphItem = graphState?.items?.[item.id]
 
   const progress = criteriaProgress?.[item.id]
@@ -72,8 +74,15 @@ export function GateDesignerNodePanel({
         )}
       </dl>
 
-        {item.goal_description && (
-          <p className="gate-designer-node-panel__goal muted">{item.goal_description}</p>
+      {joinGate && (
+        <p className="gate-designer-node-panel__topology muted">
+          Schaltknoten — schaltet, wenn alle Eingänge (requires) erreicht sind. Keine Checkliste,
+          kein manuelles Verify.
+        </p>
+      )}
+
+      {item.goal_description && (
+        <p className="gate-designer-node-panel__goal muted">{item.goal_description}</p>
       )}
 
       {graphItem?.parallel_group_keys?.length > 0 && (
diff --git a/frontend/src/components/GateGraphDesigner.jsx b/frontend/src/components/GateGraphDesigner.jsx
index bb2602b..09e23a2 100644
--- a/frontend/src/components/GateGraphDesigner.jsx
+++ b/frontend/src/components/GateGraphDesigner.jsx
@@ -610,6 +610,7 @@ export function GateGraphDesigner({
               const nodeClass =
                 'gate-map-view__node gate-map-view__node--' +
                 (item.status || 'planned') +
+                (item.item_type === 'join_gate' ? ' gate-map-view__node--join_gate' : '') +
                 (isSelected ? ' gate-graph-designer__node--selected' : '') +
                 (draggingNodeId === node.id ? ' gate-graph-designer__node--dragging' : '')
               return (
diff --git a/frontend/src/components/GateMapView.jsx b/frontend/src/components/GateMapView.jsx
index db164e7..a8cd291 100644
--- a/frontend/src/components/GateMapView.jsx
+++ b/frontend/src/components/GateMapView.jsx
@@ -171,6 +171,7 @@ export function GateMapView({ initiativeId, items, graphState: graphStateProp, e
             const nodeClass =
               'gate-map-view__node gate-map-view__node--' +
               (item.status || 'planned') +
+              (item.item_type === 'join_gate' ? ' gate-map-view__node--join_gate' : '') +
               (enforceBlocking && nodeGraph?.blocked ? ' gate-map-view__node--blocked' : '') +
               (nodeGraph?.ready ? ' gate-map-view__node--ready' : '')
             return (
diff --git a/frontend/src/components/RoadmapItemForm.jsx b/frontend/src/components/RoadmapItemForm.jsx
index 51cbf5c..27e860e 100644
--- a/frontend/src/components/RoadmapItemForm.jsx
+++ b/frontend/src/components/RoadmapItemForm.jsx
@@ -1,10 +1,11 @@
+import { useState } from 'react'
 import {
   MILESTONE_STATUSES,
   MILESTONE_STATUS_LABELS,
+  ROADMAP_ITEM_TYPES_FOR_DESIGNER,
   ROADMAP_ITEM_TYPE_LABELS,
 } from '../constants/status.js'
 
-const ITEM_TYPES = ['milestone', 'review_gate', 'maturity_stage']
 const EDITABLE_STATUSES = MILESTONE_STATUSES.filter(
   (s) => !['reached', 'moved', 'discarded'].includes(s),
 )
@@ -17,6 +18,9 @@ export function RoadmapItemForm({
   submitLabel = 'Anlegen',
   mode = 'create',
 }) {
+  const [itemType, setItemType] = useState(initial.item_type || 'milestone')
+  const isJoinGate = itemType === 'join_gate'
+
   async function handleSubmit(e) {
     e.preventDefault()
     const form = e.target
@@ -27,7 +31,7 @@ export function RoadmapItemForm({
       item_type: form.item_type.value,
       sequencing_mode: initial.sequencing_mode || 'sequential',
     }
-    if (mode === 'create') {
+    if (mode === 'create' && !isJoinGate) {
       const initialCriterion = form.initial_criterion_title?.value?.trim()
       if (initialCriterion) {
         payload.initial_criterion_title = initialCriterion
@@ -46,13 +50,23 @@ export function RoadmapItemForm({
       {mode === 'create' && (
         <label>
           Typ
-          <select name="item_type" defaultValue={initial.item_type || 'milestone'}>
-            {ITEM_TYPES.map((t) => (
+          <select
+            name="item_type"
+            value={itemType}
+            onChange={(e) => setItemType(e.target.value)}
+          >
+            {ROADMAP_ITEM_TYPES_FOR_DESIGNER.map((t) => (
               <option key={t} value={t}>
                 {ROADMAP_ITEM_TYPE_LABELS[t] || t}
               </option>
             ))}
           </select>
+          {isJoinGate && (
+            <span className="muted form-hint">
+              Schaltknoten: sammelt Eingänge (AND) und schaltet Ausgänge — keine Übungen, kein
+              manuelles Verify.
+            </span>
+          )}
         </label>
       )}
       <label>
@@ -62,7 +76,9 @@ export function RoadmapItemForm({
           defaultValue={initial.title || ''}
           maxLength={255}
           required
-          placeholder="z. B. MVP nutzbar im Alltag"
+          placeholder={
+            isJoinGate ? 'z. B. Integration abgeschlossen' : 'z. B. MVP nutzbar im Alltag'
+          }
           disabled={statusLocked}
         />
       </label>
@@ -72,14 +88,20 @@ export function RoadmapItemForm({
           name="goal_description"
           rows={3}
           defaultValue={initial.goal_description || ''}
-          placeholder="Kurzer Kontext — prüfbare Akzeptanz legst du als Kriterien an."
+          placeholder={
+            isJoinGate
+              ? 'Konsolidierter Meilenstein — welche Pfade laufen hier zusammen?'
+              : 'Kurzer Kontext — prüfbare Akzeptanz legst du als Kriterien an.'
+          }
           disabled={statusLocked}
         />
-        <span className="muted form-hint">
-          Die Checkliste auf der Gate-Detailseite ist führend für Verify.
-        </span>
+        {!isJoinGate && (
+          <span className="muted form-hint">
+            Die Checkliste auf der Gate-Detailseite ist führend für Verify.
+          </span>
+        )}
       </label>
-      {mode === 'create' && (
+      {mode === 'create' && !isJoinGate && (
         <label>
           Erstes Kriterium (optional)
           <input
@@ -104,6 +126,7 @@ export function RoadmapItemForm({
       <p className="muted form-hint">
         Reihenfolge und Parallelität steuerst du über Kanten auf der Gate-Detailseite — nicht mehr
         über ein Abfolge-Feld.
+        {isJoinGate && ' Eingänge: Join → Work-Gate (requires). Ausgänge: Work-Gate → Join.'}
       </p>
       {mode === 'edit' && (
         <label>
diff --git a/frontend/src/constants/status.js b/frontend/src/constants/status.js
index a95534a..573e619 100644
--- a/frontend/src/constants/status.js
+++ b/frontend/src/constants/status.js
@@ -95,6 +95,18 @@ export const ROADMAP_ITEM_TYPE_LABELS = {
   join_gate: 'Join / Schaltknoten',
 }
 
+/** Plan-Designer: anlegbare Gate-Typen (archetypübergreifend; später pro Archetyp konfigurierbar). */
+export const ROADMAP_ITEM_TYPES_FOR_DESIGNER = [
+  'milestone',
+  'review_gate',
+  'maturity_stage',
+  'join_gate',
+]
+
+export function isJoinGateItem(item) {
+  return item?.item_type === 'join_gate'
+}
+
 export const SEQUENCING_MODE_LABELS = {
   sequential: 'Sequenziell',
   parallel: 'Parallel',
diff --git a/frontend/src/pages/initiative/RoadmapItemDetailPage.jsx b/frontend/src/pages/initiative/RoadmapItemDetailPage.jsx
index 1d34c86..372ec6a 100644
--- a/frontend/src/pages/initiative/RoadmapItemDetailPage.jsx
+++ b/frontend/src/pages/initiative/RoadmapItemDetailPage.jsx
@@ -18,6 +18,7 @@ import { StatusBadge } from '../../components/StatusBadge.jsx'
 import {
   MILESTONE_STATUS_LABELS,
   ROADMAP_ITEM_TYPE_LABELS,
+  isJoinGateItem,
 } from '../../constants/status.js'
 import { useCapabilities } from '../../hooks/useCapabilities.js'
 import { useInitiativeOperations } from '../../context/InitiativeOperationsContext.jsx'
@@ -143,6 +144,8 @@ export function RoadmapItemDetailPage({ overrideItemId }) {
   if (error && !item) return <ErrorState message={error} onRetry={load} />
   if (!item) return <ErrorState message="Plan-Element nicht gefunden." onRetry={load} />
 
+  const joinGate = isJoinGateItem(item)
+
   return (
     <section className="card roadmap-item-detail">
       <p className="breadcrumb muted">
@@ -197,19 +200,35 @@ export function RoadmapItemDetailPage({ overrideItemId }) {
         onDelete={(dependencyId) => runAction(() => deleteRoadmapDependency(dependencyId))}
       />
 
-      <GateCriteriaSection
-        itemId={itemId}
-        itemStatus={item.status}
-        criteria={criteria}
-        progress={progress}
-        canManage={canManage}
-        busy={busy}
-        onChanged={reloadCriteria}
-        onAction={runCriteriaAction}
-      />
+      {joinGate ? (
+        <section className="card join-gate-detail">
+          <h3>Join / Schaltknoten</h3>
+          <p className="muted">
+            Kein Activity Set und kein manuelles Verify. Der Join schaltet automatisch auf{' '}
+            <strong>Erreicht</strong>, wenn alle eingehenden Voraussetzungen (Kanten{' '}
+            <em>requires</em> von diesem Join zu Work-Gates) erfüllt sind — danach werden
+            ausgehende Gates freigegeben.
+          </p>
+          <p className="muted">
+            Eingang: Join benötigt Gate · Ausgang: Gate benötigt Join (unter Abhängigkeiten
+            konfigurieren).
+          </p>
+        </section>
+      ) : (
+        <GateCriteriaSection
+          itemId={itemId}
+          itemStatus={item.status}
+          criteria={criteria}
+          progress={progress}
+          canManage={canManage}
+          busy={busy}
+          onChanged={reloadCriteria}
+          onAction={runCriteriaAction}
+        />
+      )}
 
       <div className="gate-detail-actions">
-        {canManage && ['planned', 'active', 'at_risk'].includes(item.status) && (
+        {canManage && !joinGate && ['planned', 'active', 'at_risk'].includes(item.status) && (
           <button
             type="button"
             className="btn btn-primary"
diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css
index 6e34c2b..1a89b02 100644
--- a/frontend/src/styles/components.css
+++ b/frontend/src/styles/components.css
@@ -2046,6 +2046,13 @@
   opacity: 0.92;
 }
 
+.gate-map-view__node--join_gate .gate-map-view__node-box {
+  stroke: #5b6ee1;
+  stroke-width: 2;
+  stroke-dasharray: 6 4;
+  fill: #eef0ff;
+}
+
 .status-pill {
   display: inline-block;
   padding: 0.15rem 0.5rem;