Build MiniApps for the SuperApp.

// public/miniApp.json
{
  "version": "2.0",
  "fullScreen": true,
  "theme": "app-default",
  "statusBar": { "theme": { "light": { "backgroundColor": "#ffffff" }, "dark": { "backgroundColor": "#ffffff" } } },
  "navigationBar": { "visible": false, "theme": { "light": { "backgroundColor": "#ffffff" }, "dark": { "backgroundColor": "#ffffff" } } }
}

<!-- Safe-Areas (viewport-fit) + ALLE Zoom-Arten aus -->
<meta name="viewport"
      content="width=device-width, initial-scale=1, viewport-fit=cover, maximum-scale=1, user-scalable=no">

/* Native SuperApp-Pille oben rechts */
:root{
  --superapp-menu-w: 128px;   /* Breite Pille + Abstand */
  --superapp-menu-h: 52px;
}
/* Vollbild-Fläche inkl. Safe-Areas */
html, body{ min-height:100svh; margin:0; }
.screen{
  padding-top:    env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:   env(safe-area-inset-left);
  padding-right:  env(safe-area-inset-right);
}
/* Eigene Kopfzeile: Titel links, rechts Platz für die Pille */
.appbar{
  display:flex; align-items:center;
  height: var(--superapp-menu-h);
  padding-left: 20px;
  padding-right: var(--superapp-menu-w);  /* ← Pille nicht überlappen */
}

/* gegen Doppeltipp-Zoom; Eingaben nie unter 16px */
html{ touch-action: manipulation; -webkit-text-size-adjust: 100%; }
input, select, textarea{ font-size: 16px; }

// PKCE + Authorize-URL
import { createHash, randomBytes } from "crypto";

export function pkce() {
  const verifier = randomBytes(32).toString("base64url");
  const challenge = createHash("sha256").update(verifier).digest("base64url");
  return { verifier, challenge };
}

export function authUrl(state, nonce, challenge) {
  const p = new URLSearchParams({
    client_id: process.env.OIDC_CLIENT_ID, response_type: "code",
    scope: "openid profile email", redirect_uri: BASE + "/api/auth/callback",
    state, nonce, code_challenge: challenge, code_challenge_method: "S256",
  });
  return ISSUER + "/protocol/openid-connect/auth?" + p;
}

// app/api/auth/login/route.ts
export async function GET(req) {
  const next = req.nextUrl.searchParams.get("next") || "/";
  const { verifier, challenge } = pkce();
  const state = randomBytes(16).toString("hex");
  const res = NextResponse.redirect(authUrl(state, state, challenge));
  res.cookies.set("oidc_tx", JSON.stringify({ state, verifier, next }), {
    httpOnly: true, sameSite: "lax", maxAge: 600,
  });
  return res;
}

// middleware.ts — schützt alles außer /api/auth/*
export function middleware(req) {
  const { pathname } = req.nextUrl;
  if (pathname.startsWith("/api/auth")) return NextResponse.next();
  if (!process.env.OIDC_CLIENT_ID) return NextResponse.next(); // Dev ohne IDP
  if (req.cookies.get("user_session")) return NextResponse.next();
  const url = req.nextUrl.clone();
  url.pathname = "/api/auth/login"; url.searchParams.set("next", pathname);
  return NextResponse.redirect(url);
}

function openMiniApp(url) {
  const a = document.createElement("a");
  a.href = url;            // <SHARE_BASE><ZIEL_SID>
  a.rel = "noreferrer"; a.style.display = "none";
  document.body.appendChild(a);
  a.click();               // ← linkActivated, vom Host abgefangen
  a.remove();
}

# Token fuer mPower (mit deinem OIDC-Client)
curl -X POST "<ISSUER>/protocol/openid-connect/token" \
  -H "Content-Type: application/x-www-form-urlencoded" \
  -d "grant_type=client_credentials" \
  -d "client_id=<DEINE_SID>" \
  -d "client_secret=<DEIN_CLIENT_SECRET>"
# → { "access_token": "eyJ…", "expires_in": 300, … }

// Token holen + cachen (~300s). Fuer Payment denselben Code mit
// den Merchant-Credentials nutzen.
let cached = { token: "", exp: 0 };

export async function mpowerToken() {
  if (cached.token && Date.now() < cached.exp) return cached.token;
  const body = new URLSearchParams({
    grant_type: "client_credentials",
    client_id: process.env.OIDC_CLIENT_ID,
    client_secret: process.env.OIDC_CLIENT_SECRET,
  });
  const r = await fetch(`${ISSUER}/protocol/openid-connect/token`, {
    method: "POST",
    headers: { "Content-Type": "application/x-www-form-urlencoded" },
    body,
  });
  const j = await r.json();
  cached = { token: j.access_token, exp: Date.now() + (j.expires_in - 30) * 1000 };
  return cached.token;
}

# Authorization: Bearer <access_token> (siehe Grundlagen)
POST <MPOWER_BASE>/auth/realms/<TENANT>/mpower/v1/users/{userId}/message

{
  "serviceUuid": "<DEINE_SID>",
  "messageType": "processChatMessage",
  "version": 3,
  "messageContent": { "messageText": "Danke! Dein Antrag ist eingegangen." }
}

{ "messageId": "a1b2c3…", "instanceId": "d4e5f6…" }
// Quittung, dass die Nachricht zugestellt wurde — NICHT die Antwort des Nutzers.

async function sendChat(userId, text) {
  const token = await mpowerToken();
  const r = await fetch(
    `${MPOWER_BASE}/auth/realms/${TENANT}/mpower/v1/users/${userId}/message`,
    { method: "POST",
      headers: { "Authorization": `Bearer ${token}`, "Content-Type": "application/json" },
      body: JSON.stringify({
        serviceUuid: process.env.MPOWER_SERVICE_UUID,
        messageType: "processChatMessage", version: 3,
        messageContent: { messageText: text },
      }),
    });
  return r.json(); // { messageId, instanceId }
}

{
  "serviceUuid": "<DEINE_SID>",
  "messageType": "choiceRequest",
  "version": 3,
  "messageContent": {
    "messageText": "Möchtest du jetzt bezahlen?",
    "choices": [{ "text": "Bezahlen" }, { "text": "Später" }]
  }
}

{
  "message": {
    "content": {
      "messageType": "choiceResponse",         // oder "processChatMessage"
      "messageContent": { "messageText": "Bezahlen" }  // gewählter Button-Text
    },
    "from": { "ecoId": "<TENANT>", "userId": "<sub>" },
    "messageId": "…"
  }
}

POST <MPOWER_BASE>/auth/realms/<TENANT>/mpower/v1/users/{userId}/signature
# Content-Type: multipart/form-data; Authorization: Bearer <token>

# Part "signatureData" (JSON-String):
{
  "version": 3,
  "pageNumber": 1,
  "bottomLeftXCoordinate": 12,
  "bottomLeftYCoordinate": 3,
  "topRightXCoordinate": 39,
  "topRightYCoordinate": 5,
  "serviceUuid": "<DEINE_SID>",
  "messageText": "Bitte unterschreiben",
  "callbackUrl": "https://deine-app.de/api/webhooks/mpower-signature"
}
# → Antwort: { "messageId": "…", "instanceId": "…" }

// X / Breite — direkt von links:
const MM = 72 / 25.4;                       // mm → pt
const pctX = Math.round(mmVonLinks * MM / seiteBreitePt * 100);

// Y — Ursprung ist UNTEN, also von oben umrechnen:
const pctY = Math.round((seiteHoehePt - mmVonOben * MM) / seiteHoehePt * 100);

{
  "message": {
    "content": {
      "messageType": "signatureResponse",
      "signatureStatus": "signed",
      "mediaContent": { "mediaId": "…", "fileName": "…",
                         "fileSize": 12345, "contentType": "application/pdf" }
    },
    "from": { "ecoId": "<TENANT>", "userId": "<sub>" }
  }
}

GET <MPOWER_BASE>/v1/mpower/tenants/<TENANT>/media/{mediaId}/download
# Authorization: Bearer <token>
# → 301 Redirect auf eine presigned S3-URL.

POST <PAYMENT_BASE>/mpay-merchant/create/transaction
# Authorization: Bearer <merchant_token>
{
  "version": 1,
  "idempotencyId": "<UUID>",            // echte UUID, gegen Doppelzahlung
  "userId": "<sub>",
  "merchantId": "<MERCHANT_ID>",
  "merchantServiceUUID": "<MERCHANT_ID>",
  "merchantName": "Stadt-Service",
  "merchantCallback": "https://deine-app.de/api/webhooks/payment?applicationId=42",
  "transactionTimeout": 10,
  "amount": 1000,                       // 10,00 € — in CENT (Ganzzahl!)
  "tenantId": "<MERCHANT_TENANT>",
  "currency": "EUR",
  "paymentContent": [[{ "key": "Antrag", "value": "10,00 €" }]]
}

{ "transactionId": "…", "status": "new" }
// Transaktion ist nur ANGELEGT — noch NICHT bezahlt.

{
  "transactionId": "…",
  "status": "finished",
  "transactionStatus": "finished",
  "message": "Payment complete.",
  "cardGatewayType": "credit_stripe"
}

draft → ready → awaiting_signature → awaiting_payment → paying → sent

claude --strict-mcp-config --mcp-config '{"mcpServers":{"1de-partner":{"type":"http","url":"https://deutschlandappwebpage.temmuz.uk/mcp","headers":{"x-api-key":"<DEIN_MCP_TOKEN>"}}}}'

# Variante A — ein Befehl (Transport http + Custom-Header):
claude mcp add --transport http 1de-partner \
  https://deutschlandappwebpage.temmuz.uk/mcp \
  --header "x-api-key: <DEIN_MCP_TOKEN>"

# Variante B — projektweit per .mcp.json (ins Repo committen, Token via Env):
{
  "mcpServers": {
    "1de-partner": {
      "type": "http",
      "url": "https://deutschlandappwebpage.temmuz.uk/mcp",
      "headers": { "x-api-key": "${MCP_TOKEN}" }
    }
  }
}
# Prüfen:  claude mcp list   ·   in der Session:  /mcp

// Settings → Developer → "Edit Config" öffnet claude_desktop_config.json
// (macOS: ~/Library/Application Support/Claude/ · Windows: %APPDATA%\Claude\)
// Danach Claude Desktop neu starten.
{
  "mcpServers": {
    "1de-partner": {
      "type": "http",
      "url": "https://deutschlandappwebpage.temmuz.uk/mcp",
      "headers": { "x-api-key": "<DEIN_MCP_TOKEN>" }
    }
  }
}
// Ältere Versionen ohne HTTP-Header-Support? → Tab "Andere KIs" (mcp-remote).

// Datei: ~/.cursor/mcp.json (global) oder .cursor/mcp.json (Projekt)
// Cursor erkennt Streamable HTTP automatisch am "url"-Feld (kein "type" nötig).
{
  "mcpServers": {
    "1de-partner": {
      "url": "https://deutschlandappwebpage.temmuz.uk/mcp",
      "headers": { "x-api-key": "<DEIN_MCP_TOKEN>" }
    }
  }
}
// Prüfen: Settings → MCP → grüner Punkt + Tool-Liste.

// Datei: .vscode/mcp.json — Schlüssel heißt "servers", "type" ist PFLICHT.
// Der inputs-Block fragt den Token sicher ab (statt Klartext im Repo).
{
  "servers": {
    "1de-partner": {
      "type": "http",
      "url": "https://deutschlandappwebpage.temmuz.uk/mcp",
      "headers": { "x-api-key": "${input:onede-key}" }
    }
  },
  "inputs": [
    { "type": "promptString", "id": "onede-key", "description": "1DE MCP-Token", "password": true }
  ]
}
// Start: CodeLens "Start" über der Definition · prüfen: "MCP: List Servers".

// Datei: ~/.codeium/windsurf/mcp_config.json — Feld heißt "serverUrl".
{
  "mcpServers": {
    "1de-partner": {
      "serverUrl": "https://deutschlandappwebpage.temmuz.uk/mcp",
      "headers": { "x-api-key": "<DEIN_MCP_TOKEN>" }
    }
  }
}
// Cascade → Plugins → Refresh; verbundener Server zeigt seine Tools.

# Jeder andere MCP-Client: zuerst nativen Streamable-HTTP-Eintrag versuchen
# (url + headers). Kann der Client NUR stdio? → mcp-remote-Bridge:
{
  "mcpServers": {
    "1de-partner": {
      "command": "npx",
      "args": [
        "-y", "mcp-remote",
        "https://deutschlandappwebpage.temmuz.uk/mcp",
        "--header", "x-api-key:<DEIN_MCP_TOKEN>"
      ]
    }
  }
}
# ⚠ Bei mcp-remote KEIN Leerzeichen nach dem Doppelpunkt im Header-Wert!

Du bist mein Entwickler für eine MiniApp im 1DE-/KOBIL-SuperApp-Ökosystem.

Lies dich ZUERST vollständig ein — rufe `get_docs` für ALLE Abschnitte auf und
verstehe: Was ist eine MiniApp, Schnellstart, miniApp.json, Design & Native Feel,
Authentifizierung (Silent SSO), Deeplinks, mPower (Chat, Signatur, Payment),
Discovery, Deploy — und wie man eine MiniApp anlegt (`create_miniapp`) und
deployt (`deploy_miniapp`).

WICHTIG zum Hosting: Soll auf 1DE gehostet werden, rufe `create_miniapp` OHNE `miniapp_url` auf —
es wird automatisch eine feste Subdomain vergeben und als URL/Redirect/Callback registriert.
Danach `deploy_miniapp` auf genau diese MiniApp → die URL stimmt immer (kein Mismatch). WebFlow bleibt aus.
Bei ÄNDERUNGEN/Updates: KEINE neue MiniApp anlegen! Dieselbe MiniApp per `deploy_miniapp` mit
derselben service_id erneut deployen (gleiche Subdomain, Container wird ersetzt). `create_miniapp` nur EINMAL.

Wenn du ALLES verstanden hast, frag NICHTS weiter ab, sondern melde dich bei mir:
„Ich bin bereit, deine MiniApp zu erstellen — was sollen wir bauen?"
und warte auf meine Idee. Erst danach legst du an, baust, und deployst.