x-openapi-flow 1.3.0 → 1.3.1

package/README.md

@@ -58,10 +58,115 @@ npx x-openapi-flow init [--flows path] [--force] [--dry-run]
 npx x-openapi-flow apply [openapi-file] [--flows path] [--out path]
 npx x-openapi-flow diff [openapi-file] [--flows path] [--format pretty|json]
 npx x-openapi-flow lint [openapi-file] [--format pretty|json] [--config path]
+npx x-openapi-flow analyze [openapi-file] [--format pretty|json] [--out path] [--merge] [--flows path]
+npx x-openapi-flow generate-sdk [openapi-file] --lang typescript [--output path]
+npx x-openapi-flow export-doc-flows [openapi-file] [--output path] [--format markdown|json]
+npx x-openapi-flow generate-postman [openapi-file] [--output path] [--with-scripts]
+npx x-openapi-flow generate-insomnia [openapi-file] [--output path]
+npx x-openapi-flow generate-redoc [openapi-file] [--output path]
 npx x-openapi-flow graph <openapi-file> [--format mermaid|json]
 npx x-openapi-flow doctor [--config path]
 ```
 
+## Output Adapters
+
+`x-openapi-flow` now supports modular output adapters that reuse the same internal flow graph:
+
+- OpenAPI + `x-openapi-flow` -> parser -> graph builder -> adapters
+- Adapters: docs (`export-doc-flows`), SDK (`generate-sdk`), Postman (`generate-postman`), Insomnia (`generate-insomnia`)
+  and Redoc package (`generate-redoc`)
+
+### Redoc/Docs Adapter (`export-doc-flows`)
+
+```bash
+npx x-openapi-flow export-doc-flows openapi.yaml --output ./docs/api-flows.md
+npx x-openapi-flow export-doc-flows openapi.yaml --format json --output ./docs/api-flows.json
+```
+
+Generates a lifecycle page (or JSON model) with:
+
+- Flow/Lifecycle panel per resource
+- Mermaid diagram per resource
+- Current state, prerequisites (`prerequisite_operation_ids`), next operations (`next_operation_id`)
+
+### Redoc Package Adapter (`generate-redoc`)
+
+```bash
+npx x-openapi-flow generate-redoc openapi.yaml --output ./redoc-flow
+```
+
+Generates a ready-to-open Redoc bundle with:
+
+- `index.html` (Redoc + Flow/Lifecycle panel)
+- `x-openapi-flow-redoc-plugin.js` (DOM enhancer)
+- `flow-model.json` (flow graph model)
+- copied OpenAPI spec (`openapi.yaml`/`openapi.json`)
+
+### Postman Adapter (`generate-postman`)
+
+```bash
+npx x-openapi-flow generate-postman openapi.yaml --output ./x-openapi-flow.postman_collection.json --with-scripts
+```
+
+Generates lifecycle-oriented folders/journeys and optional scripts for:
+
+- prerequisite enforcement before request execution
+- propagated operation tracking and ID persistence in collection variables
+
+### Insomnia Adapter (`generate-insomnia`)
+
+```bash
+npx x-openapi-flow generate-insomnia openapi.yaml --output ./x-openapi-flow.insomnia.json
+```
+
+Generates an Insomnia export organized by resource flow groups and ordered requests.
+
+## SDK Generator (`generate-sdk`)
+
+Generate a flow-aware SDK from OpenAPI + `x-openapi-flow` metadata.
+
+```bash
+npx x-openapi-flow generate-sdk openapi.yaml --lang typescript --output ./sdk
+```
+
+MVP output (TypeScript):
+
+- `src/resources/<Resource>.ts`: resource client + state classes (`PaymentAuthorized`, `PaymentCaptured`, etc.)
+- `src/index.ts`: root `FlowApiClient`
+- `src/http-client.ts`: pluggable HTTP client interface and fetch implementation
+- `src/flow-helpers.ts`: `runFlow("authorize -> capture")`
+- `flow-model.json`: intermediate model `{ resource, operations, prerequisites, nextOperations, states }`
+
+SDK layers (resource-centric):
+
+- Collection/service layer: `api.payments.create()`, `api.payments.retrieve(id)`, `api.payments.list()`
+- Resource instance/state layer: objects expose valid lifecycle transitions (`payment.capture()`, etc.)
+- Optional lifecycle helper methods at service level (`api.payments.capture(id, params, { autoPrerequisites: true })`)
+
+Pipeline used by the generator:
+
+- OpenAPI -> parser -> flow graph -> state machine -> templates -> SDK
+- Reuses lifecycle graph logic from the validator to stay consistent with `validate`, `graph`, and `diff`
+- Transition ordering uses `next_operation_id`, `prerequisite_operation_ids`, and state transitions from `x-openapi-flow`
+
+## Flow Analyzer (`analyze`)
+
+Use `analyze` to bootstrap a sidecar from OpenAPI paths/operation names.
+
+```bash
+npx x-openapi-flow analyze openapi.yaml --out openapi.x.yaml
+npx x-openapi-flow analyze openapi.yaml --format json
+npx x-openapi-flow analyze openapi.yaml --merge --flows openapi.x.yaml
+```
+
+Notes:
+
+- The output is heuristic and intended as a starting point.
+- Inferred states/transitions should be reviewed and adjusted by API/domain owners.
+- Default output format is `pretty`; without `--out`, the suggested sidecar is printed to stdout.
+- `--merge` merges inferred data into an existing sidecar (default path or `--flows`) while preserving existing operation fields.
+- In `json`, inferred transition confidence is available in `analysis.transitionConfidence`.
+
 `diff` now reports field-level changes for operations that already exist in the sidecar.
 In `pretty` format, this appears under `Changed details` with changed paths per operation (for example, `current_state` or `transitions[0].target_state`).
 In `json` format, this appears in `diff.changedOperationDetails`:
@@ -299,9 +404,9 @@ Field reference format:
 
 ### Swagger UI
 
-- There is no Swagger UI-based automated test in this repo today (tests are CLI-only).
-- For UI interpretation of `x-openapi-flow`, use `showExtensions: true` with the plugin at `lib/swagger-ui/x-openapi-flow-plugin.js`.
-- A ready HTML example is available at `examples/swagger-ui/index.html`.
+- UI plugin behavior is covered by tests in `tests/plugins/plugin-ui.test.js`.
+- For UI interpretation of `x-openapi-flow`, use `showExtensions: true` with the plugin at `adapters/ui/swagger-ui/x-openapi-flow-plugin.js`.
+- A ready HTML example is available at `../example-project/examples/swagger-ui/index.html`.
 - The plugin renders a global **Flow Overview** (Mermaid image) near the top of the docs, plus operation-level flow cards.
 
 ![Swagger UI integration result](../docs/assets/x-openapi-flow-extension.png)

package/adapters/collections/insomnia-adapter.js

@@ -0,0 +1,73 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { loadApi } = require("../../lib/validator");
+const { buildIntermediateModel } = require("../../lib/sdk-generator");
+const { toTitleCase, pathToPostmanUrl, buildLifecycleSequences } = require("../shared/helpers");
+
+function generateInsomniaWorkspace(options) {
+  const apiPath = path.resolve(options.apiPath);
+  const outputPath = path.resolve(options.outputPath || path.join(process.cwd(), "x-openapi-flow.insomnia.json"));
+
+  const api = loadApi(apiPath);
+  const model = buildIntermediateModel(api);
+
+  const workspaceId = "wrk_x_openapi_flow";
+  const resources = [
+    {
+      _id: workspaceId,
+      _type: "workspace",
+      name: "x-openapi-flow Workspace",
+      description: `Generated from ${apiPath}`,
+      scope: "collection",
+    },
+  ];
+
+  for (const resource of model.resources) {
+    const groupId = `fld_${resource.resourcePropertyName}`;
+    resources.push({
+      _id: groupId,
+      _type: "request_group",
+      parentId: workspaceId,
+      name: `${toTitleCase(resource.resourcePlural || resource.resource)} Flow`,
+    });
+
+    const sequences = buildLifecycleSequences(resource);
+    const operations = sequences.length > 0
+      ? Array.from(new Map(sequences.flat().map((op) => [op.operationId, op])).values())
+      : resource.operations.filter((operation) => operation.hasFlow);
+
+    operations.forEach((operation, index) => {
+      const requestId = `req_${resource.resourcePropertyName}_${index + 1}`;
+      resources.push({
+        _id: requestId,
+        _type: "request",
+        parentId: groupId,
+        name: operation.operationId,
+        method: String(operation.httpMethod || "get").toUpperCase(),
+        url: `{{ base_url }}${pathToPostmanUrl(operation.path, resource.resourcePropertyName)}`,
+        body: {},
+      });
+    });
+  }
+
+  const exportPayload = {
+    _type: "export",
+    __export_format: 4,
+    __export_date: new Date().toISOString(),
+    __export_source: "x-openapi-flow",
+    resources,
+  };
+
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, `${JSON.stringify(exportPayload, null, 2)}\n`, "utf8");
+
+  return {
+    outputPath,
+    resources: model.resources.length,
+    flowCount: model.flowCount,
+  };
+}
+
+module.exports = { generateInsomniaWorkspace };

package/adapters/collections/postman-adapter.js

@@ -0,0 +1,145 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { loadApi } = require("../../lib/validator");
+const { buildIntermediateModel } = require("../../lib/sdk-generator");
+const { toTitleCase, pathToPostmanUrl, buildLifecycleSequences } = require("../shared/helpers");
+
+function buildPostmanItem(operation, resource) {
+  const rawPath = pathToPostmanUrl(operation.path, resource.resourcePropertyName);
+  const urlRaw = `{{baseUrl}}${rawPath}`;
+
+  const item = {
+    name: operation.operationId,
+    request: {
+      method: String(operation.httpMethod || "get").toUpperCase(),
+      header: [
+        {
+          key: "Content-Type",
+          value: "application/json",
+          type: "text",
+        },
+      ],
+      url: {
+        raw: urlRaw,
+        host: ["{{baseUrl}}"],
+        path: rawPath.split("/").filter(Boolean),
+      },
+    },
+    response: [],
+  };
+
+  if (["POST", "PUT", "PATCH"].includes(item.request.method)) {
+    item.request.body = {
+      mode: "raw",
+      raw: "{}",
+      options: { raw: { language: "json" } },
+    };
+  }
+
+  return item;
+}
+
+function addPostmanScripts(item, operation, resource) {
+  const prereqs = JSON.stringify(operation.prerequisites || []);
+  const operationId = operation.operationId;
+  const idCandidateKey = `${resource.resourcePropertyName}Id`;
+
+  item.event = [
+    {
+      listen: "prerequest",
+      script: {
+        type: "text/javascript",
+        exec: [
+          `const required = ${prereqs};`,
+          "const executed = JSON.parse(pm.collectionVariables.get('flowExecutedOps') || '[]');",
+          "const missing = required.filter((operationId) => !executed.includes(operationId));",
+          "if (missing.length > 0) {",
+          `  throw new Error('Missing prerequisites for ${operationId}: ' + missing.join(', '));`,
+          "}",
+        ],
+      },
+    },
+    {
+      listen: "test",
+      script: {
+        type: "text/javascript",
+        exec: [
+          "const payload = pm.response.json ? pm.response.json() : {};",
+          `if (payload && payload.id) pm.collectionVariables.set('${idCandidateKey}', payload.id);`,
+          "const executed = JSON.parse(pm.collectionVariables.get('flowExecutedOps') || '[]');",
+          `if (!executed.includes('${operationId}')) executed.push('${operationId}');`,
+          "pm.collectionVariables.set('flowExecutedOps', JSON.stringify(executed));",
+        ],
+      },
+    },
+  ];
+}
+
+function generatePostmanCollection(options) {
+  const apiPath = path.resolve(options.apiPath);
+  const outputPath = path.resolve(options.outputPath || path.join(process.cwd(), "x-openapi-flow.postman_collection.json"));
+  const withScripts = options.withScripts !== false;
+
+  const api = loadApi(apiPath);
+  const model = buildIntermediateModel(api);
+
+  const collection = {
+    info: {
+      name: "x-openapi-flow Lifecycle Collection",
+      schema: "https://schema.getpostman.com/json/collection/v2.1.0/collection.json",
+      description: `Generated from ${apiPath}`,
+    },
+    item: [],
+    variable: [
+      { key: "baseUrl", value: "http://localhost:3000" },
+      { key: "flowExecutedOps", value: "[]" },
+    ],
+  };
+
+  for (const resource of model.resources) {
+    const sequences = buildLifecycleSequences(resource);
+    const folder = {
+      name: `${toTitleCase(resource.resourcePlural || resource.resource)} Lifecycle`,
+      item: [],
+    };
+
+    if (sequences.length === 0) {
+      const fallbackItems = resource.operations
+        .filter((operation) => operation.hasFlow)
+        .map((operation) => {
+          const item = buildPostmanItem(operation, resource);
+          if (withScripts) addPostmanScripts(item, operation, resource);
+          return item;
+        });
+      folder.item.push(...fallbackItems);
+    } else {
+      sequences.forEach((sequence, index) => {
+        const journey = {
+          name: `Journey ${index + 1}`,
+          item: sequence.map((operation) => {
+            const item = buildPostmanItem(operation, resource);
+            if (withScripts) addPostmanScripts(item, operation, resource);
+            return item;
+          }),
+        };
+        folder.item.push(journey);
+      });
+    }
+
+    collection.item.push(folder);
+  }
+
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+  fs.writeFileSync(outputPath, `${JSON.stringify(collection, null, 2)}\n`, "utf8");
+
+  return {
+    outputPath,
+    resources: model.resources.length,
+    flowCount: model.flowCount,
+    withScripts,
+  };
+}
+
+module.exports = { generatePostmanCollection };

package/adapters/docs/doc-adapter.js

@@ -0,0 +1,119 @@
+"use strict";
+
+const fs = require("fs");
+const path = require("path");
+const { loadApi } = require("../../lib/validator");
+const { buildIntermediateModel } = require("../../lib/sdk-generator");
+const { toTitleCase, buildLifecycleSequences } = require("../shared/helpers");
+
+function buildResourceMermaid(resource) {
+  const flowOperations = resource.operations.filter((operation) => operation.hasFlow);
+  const lines = ["stateDiagram-v2", "  direction LR"];
+
+  const states = new Set(flowOperations.map((operation) => operation.currentState).filter(Boolean));
+  for (const state of [...states].sort()) {
+    lines.push(`  state ${state}`);
+  }
+
+  const edgeSet = new Set();
+  for (const operation of flowOperations) {
+    for (const next of operation.nextOperations || []) {
+      const targetOperation = flowOperations.find((candidate) => candidate.operationId === next.nextOperationId);
+      const targetState = next.targetState || (targetOperation && targetOperation.currentState);
+      if (!targetState || !operation.currentState) continue;
+
+      const label = next.nextOperationId
+        ? `${operation.methodName} -> ${next.nextOperationId}`
+        : operation.methodName;
+      const edgeKey = `${operation.currentState}::${targetState}::${label}`;
+      if (edgeSet.has(edgeKey)) continue;
+      edgeSet.add(edgeKey);
+      lines.push(`  ${operation.currentState} --> ${targetState}: ${label}`);
+    }
+  }
+
+  return lines.join("\n");
+}
+
+function buildDocFlowsMarkdown(model, sourcePath) {
+  const lines = [];
+  lines.push("# API Flows");
+  lines.push("");
+  lines.push(`Source: ${sourcePath}`);
+  lines.push("");
+  lines.push("This page is generated from x-openapi-flow metadata.");
+  lines.push("");
+
+  for (const resource of model.resources) {
+    const displayName = toTitleCase(resource.resourcePlural || resource.resource);
+    lines.push(`## ${displayName} Lifecycle`);
+    lines.push("");
+    lines.push("### Flow / Lifecycle");
+    lines.push("");
+    lines.push("```mermaid");
+    lines.push(buildResourceMermaid(resource));
+    lines.push("```");
+    lines.push("");
+
+    const sequences = buildLifecycleSequences(resource);
+    if (sequences.length > 0) {
+      lines.push("### Journeys");
+      lines.push("");
+      sequences.forEach((sequence, index) => {
+        const label = sequence.map((operation) => operation.methodName).join(" -> ");
+        lines.push(`- Journey ${index + 1}: ${label}`);
+      });
+      lines.push("");
+    }
+
+    lines.push("### Operations");
+    lines.push("");
+    for (const operation of resource.operations.filter((item) => item.hasFlow)) {
+      lines.push(`#### ${operation.operationId}`);
+      lines.push(`- Endpoint: ${operation.httpMethod.toUpperCase()} ${operation.path}`);
+      lines.push(`- Current state: ${operation.currentState || "-"}`);
+      const prereqs = operation.prerequisites && operation.prerequisites.length > 0
+        ? operation.prerequisites.join(", ")
+        : "-";
+      lines.push(`- Prerequisites: ${prereqs}`);
+
+      const nextOps = (operation.nextOperations || [])
+        .map((next) => next.nextOperationId)
+        .filter(Boolean);
+      lines.push(`- Next operations: ${nextOps.length > 0 ? nextOps.join(", ") : "-"}`);
+      lines.push("");
+    }
+  }
+
+  return `${lines.join("\n").trimEnd()}\n`;
+}
+
+function exportDocFlows(options) {
+  const apiPath = path.resolve(options.apiPath);
+  const outputPath = path.resolve(options.outputPath || path.join(process.cwd(), "api-flows.md"));
+  const format = options.format || "markdown";
+
+  if (!["markdown", "json"].includes(format)) {
+    throw new Error(`Unsupported doc flow format '${format}'. Use 'markdown' or 'json'.`);
+  }
+
+  const api = loadApi(apiPath);
+  const model = buildIntermediateModel(api);
+
+  fs.mkdirSync(path.dirname(outputPath), { recursive: true });
+
+  if (format === "json") {
+    fs.writeFileSync(outputPath, `${JSON.stringify(model, null, 2)}\n`, "utf8");
+  } else {
+    fs.writeFileSync(outputPath, buildDocFlowsMarkdown(model, apiPath), "utf8");
+  }
+
+  return {
+    outputPath,
+    format,
+    resources: model.resources.length,
+    flowCount: model.flowCount,
+  };
+}
+
+module.exports = { exportDocFlows };

package/adapters/flow-output-adapters.js

@@ -0,0 +1,15 @@
+"use strict";
+
+// Barrel — re-exports all output adapters from their domain modules.
+// Add new adapters to the relevant domain folder and re-export here.
+const { exportDocFlows } = require("./docs/doc-adapter");
+const { generatePostmanCollection } = require("./collections/postman-adapter");
+const { generateInsomniaWorkspace } = require("./collections/insomnia-adapter");
+const { generateRedocPackage } = require("./ui/redoc-adapter");
+
+module.exports = {
+  exportDocFlows,
+  generatePostmanCollection,
+  generateInsomniaWorkspace,
+  generateRedocPackage,
+};

package/adapters/shared/helpers.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function toTitleCase(value) {
+  return String(value || "")
+    .replace(/([a-z0-9])([A-Z])/g, "$1 $2")
+    .replace(/[_-]+/g, " ")
+    .trim()
+    .split(/\s+/)
+    .filter(Boolean)
+    .map((word) => word[0].toUpperCase() + word.slice(1).toLowerCase())
+    .join(" ");
+}
+
+function pathToPostmanUrl(pathTemplate, resourceKey) {
+  const variablePrefix = resourceKey || "resource";
+  return String(pathTemplate || "")
+    .replace(/\{([^}]+)\}/g, (_full, name) => `{{${variablePrefix}${toTitleCase(name).replace(/\s+/g, "")}}}`);
+}
+
+function buildLifecycleSequences(resource) {
+  const flowOperations = resource.operations.filter((operation) => operation.hasFlow);
+  if (flowOperations.length === 0) {
+    return [];
+  }
+
+  const byId = new Map(flowOperations.map((operation) => [operation.operationId, operation]));
+  const indegree = new Map(flowOperations.map((operation) => [operation.operationId, 0]));
+
+  for (const operation of flowOperations) {
+    for (const next of operation.nextOperations || []) {
+      if (next.nextOperationId && indegree.has(next.nextOperationId)) {
+        indegree.set(next.nextOperationId, indegree.get(next.nextOperationId) + 1);
+      }
+    }
+  }
+
+  const starts = flowOperations
+    .filter((operation) => indegree.get(operation.operationId) === 0)
+    .map((operation) => operation.operationId);
+
+  const roots = starts.length > 0 ? starts : [flowOperations[0].operationId];
+  const sequences = [];
+
+  function walk(operationId, trail, seen) {
+    if (!byId.has(operationId) || seen.has(operationId)) {
+      sequences.push(trail.slice());
+      return;
+    }
+
+    const current = byId.get(operationId);
+    trail.push(current);
+
+    const nextIds = (current.nextOperations || [])
+      .map((next) => next.nextOperationId)
+      .filter((nextId) => nextId && byId.has(nextId));
+
+    if (nextIds.length === 0) {
+      sequences.push(trail.slice());
+      trail.pop();
+      return;
+    }
+
+    const nextSeen = new Set(seen);
+    nextSeen.add(operationId);
+    for (const nextId of nextIds) {
+      walk(nextId, trail, nextSeen);
+    }
+    trail.pop();
+  }
+
+  for (const root of roots) {
+    walk(root, [], new Set());
+  }
+
+  const dedup = new Map();
+  for (const sequence of sequences) {
+    if (!sequence || sequence.length === 0) continue;
+    const key = sequence.map((operation) => operation.operationId).join("->");
+    if (!dedup.has(key)) {
+      dedup.set(key, sequence);
+    }
+  }
+
+  return [...dedup.values()];
+}
+
+module.exports = { toTitleCase, pathToPostmanUrl, buildLifecycleSequences };

package/adapters/ui/redoc/x-openapi-flow-redoc-plugin.js

@@ -0,0 +1,127 @@
+(function () {
+  "use strict";
+
+  function createSectionTitle(text) {
+    var title = document.createElement("h3");
+    title.textContent = text;
+    title.style.margin = "16px 0 8px";
+    title.style.fontSize = "14px";
+    title.style.fontWeight = "700";
+    return title;
+  }
+
+  function listItem(text) {
+    var item = document.createElement("li");
+    item.textContent = text;
+    item.style.marginBottom = "6px";
+    return item;
+  }
+
+  function renderMermaidText(resource) {
+    var lines = ["stateDiagram-v2", "  direction LR"];
+
+    var states = Array.from(new Set((resource.states || []).filter(Boolean))).sort();
+    states.forEach(function (state) {
+      lines.push("  state " + state);
+    });
+
+    (resource.operations || []).forEach(function (operation) {
+      (operation.nextOperations || []).forEach(function (next) {
+        if (!operation.currentState || !next.targetState) return;
+        var label = next.nextOperationId || operation.operationId;
+        lines.push("  " + operation.currentState + " --> " + next.targetState + ": " + label);
+      });
+    });
+
+    return lines.join("\n");
+  }
+
+  function renderResourceBlock(resource) {
+    var container = document.createElement("div");
+    container.style.border = "1px solid #e5e7eb";
+    container.style.borderRadius = "8px";
+    container.style.padding = "12px";
+    container.style.marginBottom = "14px";
+
+    var title = document.createElement("h4");
+    title.textContent = (resource.resourcePlural || resource.resource || "Resource") + " Lifecycle";
+    title.style.margin = "0 0 8px";
+    title.style.fontSize = "13px";
+    container.appendChild(title);
+
+    var mermaid = document.createElement("pre");
+    mermaid.textContent = renderMermaidText(resource);
+    mermaid.style.background = "#f8fafc";
+    mermaid.style.border = "1px solid #e2e8f0";
+    mermaid.style.padding = "8px";
+    mermaid.style.borderRadius = "6px";
+    mermaid.style.whiteSpace = "pre-wrap";
+    mermaid.style.fontSize = "11px";
+    container.appendChild(mermaid);
+
+    var operationsTitle = createSectionTitle("Operations");
+    operationsTitle.style.marginTop = "10px";
+    operationsTitle.style.fontSize = "12px";
+    container.appendChild(operationsTitle);
+
+    var opList = document.createElement("ul");
+    opList.style.paddingLeft = "16px";
+
+    (resource.operations || []).forEach(function (operation) {
+      if (!operation.hasFlow) return;
+      var prerequisites = (operation.prerequisites || []).length > 0
+        ? operation.prerequisites.join(", ")
+        : "-";
+      var nextOps = (operation.nextOperations || [])
+        .map(function (next) { return next.nextOperationId; })
+        .filter(Boolean);
+      var nextText = nextOps.length > 0 ? nextOps.join(", ") : "-";
+
+      opList.appendChild(
+        listItem(
+          operation.operationId
+          + " | state=" + (operation.currentState || "-")
+          + " | prerequisites=" + prerequisites
+          + " | next=" + nextText
+        )
+      );
+    });
+
+    container.appendChild(opList);
+    return container;
+  }
+
+  function mount(options) {
+    var model = options && options.model;
+    if (!model || !Array.isArray(model.resources) || model.resources.length === 0) {
+      return;
+    }
+
+    var target = document.querySelector(options.targetSelector || "#x-openapi-flow-panel");
+    if (!target) {
+      return;
+    }
+
+    target.innerHTML = "";
+
+    var heading = document.createElement("h2");
+    heading.textContent = "Flow / Lifecycle";
+    heading.style.margin = "0 0 8px";
+    heading.style.fontSize = "18px";
+    target.appendChild(heading);
+
+    var subtitle = document.createElement("p");
+    subtitle.textContent = "Generated from x-openapi-flow metadata.";
+    subtitle.style.margin = "0 0 12px";
+    subtitle.style.color = "#4b5563";
+    target.appendChild(subtitle);
+
+    model.resources.forEach(function (resource) {
+      target.appendChild(renderResourceBlock(resource));
+    });
+  }
+
+  window.XOpenApiFlowRedocPlugin = {
+    mount: mount,
+  };
+})();