feat(plan): Join-Gate im Gate-Designer für alle Archetypen

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

Co-authored-by: Cursor <cursoragent@cursor.com>

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,6 +74,13 @@ export function GateDesignerNodePanel({
         )}
       </dl>
 
+      {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>
       )}

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 (

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 (

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'}>
+          <select
-            {ITEM_TYPES.map((t) => (
+            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}
         />
+        {!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>

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',

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,6 +200,21 @@ export function RoadmapItemDetailPage({ overrideItemId }) {
         onDelete={(dependencyId) => runAction(() => deleteRoadmapDependency(dependencyId))}
       />
 
+      {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}
@@ -207,9 +225,10 @@ export function RoadmapItemDetailPage({ overrideItemId }) {
           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"

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;