@stripe/link-cli 0.3.0 → 0.3.1

package/dist/cli.js

@@ -11358,7 +11358,7 @@ var Login = ({
     ] });
   }
   return /* @__PURE__ */ jsxs(Box, { flexDirection: "column", paddingY: 1, children: [
-    /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, children: "Link CLI Authentication" }) }),
+    /* @__PURE__ */ jsx(Box, { marginBottom: 1, children: /* @__PURE__ */ jsx(Text, { bold: true, children: "Authentication" }) }),
     /* @__PURE__ */ jsxs(
       Box,
       {
@@ -11432,8 +11432,62 @@ var statusOptions = z.object({
   timeout: z.coerce.number().default(300).describe("Polling timeout in seconds.")
 });
 
+// src/commands/auth/status.tsx
+import { Box as Box3, Text as Text3 } from "ink";
+import { useEffect as useEffect3, useState as useState3 } from "react";
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var AuthStatus = ({ onComplete }) => {
+  const [checked, setChecked] = useState3(false);
+  const [authenticated, setAuthenticated] = useState3(false);
+  const [tokenPreview, setTokenPreview] = useState3("");
+  const [tokenType, setTokenType] = useState3("");
+  const [credentialsPath, setCredentialsPath] = useState3("");
+  useEffect3(() => {
+    const auth = storage.getAuth();
+    const credentialsPath2 = storage.getPath();
+    if (auth) {
+      setAuthenticated(true);
+      setTokenPreview(`${auth.access_token.substring(0, 20)}...`);
+      setTokenType(auth.token_type);
+    }
+    setCredentialsPath(credentialsPath2);
+    setChecked(true);
+    setTimeout(onComplete, 1e3);
+  }, [onComplete]);
+  if (!checked) {
+    return null;
+  }
+  if (authenticated) {
+    return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx3(Text3, { color: "green", children: "\u2713 Authenticated" }),
+      /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, paddingX: 2, children: [
+        /* @__PURE__ */ jsxs2(Text3, { children: [
+          "Access token: ",
+          /* @__PURE__ */ jsx3(Text3, { bold: true, children: tokenPreview })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text3, { children: [
+          "Token type: ",
+          /* @__PURE__ */ jsx3(Text3, { bold: true, children: tokenType })
+        ] }),
+        /* @__PURE__ */ jsxs2(Text3, { children: [
+          "Credentials: ",
+          /* @__PURE__ */ jsx3(Text3, { bold: true, children: credentialsPath })
+        ] })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", children: [
+    /* @__PURE__ */ jsx3(Text3, { color: "yellow", children: "\u2717 Not authenticated" }),
+    /* @__PURE__ */ jsx3(Text3, { dimColor: true, children: 'Run "link-cli auth login" to authenticate' }),
+    /* @__PURE__ */ jsx3(Box3, { marginTop: 1, paddingX: 2, children: /* @__PURE__ */ jsxs2(Text3, { children: [
+      "Credentials: ",
+      /* @__PURE__ */ jsx3(Text3, { bold: true, children: credentialsPath })
+    ] }) })
+  ] });
+};
+
 // src/commands/auth/index.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx4 } from "react/jsx-runtime";
 function createAuthCli(authResource, updateInfo) {
   const cli2 = Cli.create("auth", {
     description: "Authentication commands"
@@ -11453,7 +11507,7 @@ function createAuthCli(authResource, updateInfo) {
       if (!c.agent && !c.formatExplicit) {
         return new Promise((resolve) => {
           const { waitUntilExit } = render(
-            /* @__PURE__ */ jsx3(
+            /* @__PURE__ */ jsx4(
               Login,
               {
                 authResource,
@@ -11506,7 +11560,7 @@ function createAuthCli(authResource, updateInfo) {
       if (!c.agent && !c.formatExplicit) {
         return new Promise((resolve) => {
           const { waitUntilExit } = render(
-            /* @__PURE__ */ jsx3(Logout, { authResource, onComplete: () => {
+            /* @__PURE__ */ jsx4(Logout, { authResource, onComplete: () => {
             } })
           );
           waitUntilExit().then(() => resolve(result));
@@ -11520,6 +11574,25 @@ function createAuthCli(authResource, updateInfo) {
     options: statusOptions,
     outputPolicy: "agent-only",
     async *run(c) {
+      if (!c.agent && !c.formatExplicit) {
+        return new Promise((resolve) => {
+          const { waitUntilExit } = render(
+            /* @__PURE__ */ jsx4(AuthStatus, { onComplete: () => {
+            } })
+          );
+          waitUntilExit().then(() => {
+            const auth = storage.getAuth();
+            resolve({
+              authenticated: !!auth,
+              ...auth ? {
+                access_token: `${auth.access_token.substring(0, 20)}...`,
+                token_type: auth.token_type
+              } : {},
+              credentials_path: storage.getPath()
+            });
+          });
+        });
+      }
       const opts = c.options;
       const interval = opts.interval;
       const maxAttempts = opts.maxAttempts;
@@ -11586,24 +11659,24 @@ import { render as render2 } from "ink";
 
 // src/commands/demo/demo-runner.tsx
 import { Box as Box8, Text as Text9, useInput as useInput4 } from "ink";
-import { useCallback, useState as useState6 } from "react";
+import { useCallback, useState as useState7 } from "react";
 
 // src/utils/markdown-text.tsx
-import { Text as Text3 } from "ink";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { Text as Text4 } from "ink";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var MarkdownText = ({
   children,
   dimColor
 }) => {
   const parts = tokenize(children);
-  return /* @__PURE__ */ jsx4(Text3, { dimColor, children: parts.map((part) => {
+  return /* @__PURE__ */ jsx5(Text4, { dimColor, children: parts.map((part) => {
     if (part.type === "bold") {
-      return /* @__PURE__ */ jsx4(Text3, { bold: true, children: part.text }, part.key);
+      return /* @__PURE__ */ jsx5(Text4, { bold: true, children: part.text }, part.key);
     }
     if (part.type === "code") {
-      return /* @__PURE__ */ jsx4(Text3, { color: "yellow", children: part.text }, part.key);
+      return /* @__PURE__ */ jsx5(Text4, { color: "yellow", children: part.text }, part.key);
     }
-    return /* @__PURE__ */ jsx4(Text3, { children: part.text }, part.key);
+    return /* @__PURE__ */ jsx5(Text4, { children: part.text }, part.key);
   }) });
 };
 function tokenize(input) {
@@ -11638,7 +11711,7 @@ function tokenize(input) {
 }
 
 // src/commands/spend-request/app-download-qr-codes.tsx
-import { Box as Box3, Text as Text4 } from "ink";
+import { Box as Box4, Text as Text5 } from "ink";
 import { useMemo } from "react";
 
 // src/utils/render-qr-matrix.ts
@@ -11675,25 +11748,25 @@ function renderQrMatrix(url) {
 }
 
 // src/commands/spend-request/app-download-qr-codes.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var DOWNLOAD_URL = "https://link.com/download";
 var AppDownloadQrCodes = () => {
   const qrLines = useMemo(() => renderQrMatrix(DOWNLOAD_URL), []);
-  return /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", marginTop: 1, children: [
-    /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: "Get the Link app to approve spend requests from your phone" }),
-    /* @__PURE__ */ jsxs2(Box3, { flexDirection: "column", alignItems: "flex-start", marginTop: 1, children: [
+  return /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", marginTop: 1, children: [
+    /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: "Get the Link app to approve spend requests from your phone" }),
+    /* @__PURE__ */ jsxs3(Box4, { flexDirection: "column", alignItems: "flex-start", marginTop: 1, children: [
       qrLines.map((line, i) => (
         // biome-ignore lint/suspicious/noArrayIndexKey: stable static array
-        /* @__PURE__ */ jsx5(Text4, { children: line }, i)
+        /* @__PURE__ */ jsx6(Text5, { children: line }, i)
       )),
-      /* @__PURE__ */ jsx5(Text4, { dimColor: true, children: DOWNLOAD_URL })
+      /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: DOWNLOAD_URL })
     ] })
   ] });
 };
 
 // src/commands/demo/card-flow.tsx
 import { Box as Box5, Text as Text6, useInput as useInput2 } from "ink";
-import { useEffect as useEffect3, useRef, useState as useState3 } from "react";
+import { useEffect as useEffect4, useRef, useState as useState4 } from "react";
 
 // src/utils/poll-until-approved.ts
 function pollUntilApproved(repository, id, options = {}) {
@@ -11721,12 +11794,12 @@ function pollUntilApproved(repository, id, options = {}) {
 
 // src/commands/demo/constants.ts
 var DEMO_MERCHANT_NAME = "Galtee Outdoor";
-var DEMO_MERCHANT_URL = "https://galtee.stripedemos.com/";
+var DEMO_MERCHANT_URL = "https://galtee.stripedemos.com/en/products/prod_RtAl1kmlzvL8oj";
 var DEMO_MPP_DEV_URL = "https://mpp.dev";
 var DEMO_CLIMATE_API_URL = "https://climate.stripe.dev/api/test/contribute";
 var DEMO_CARD_AMOUNT = 12900;
 var DEMO_SPT_AMOUNT = 100;
-var DEMO_CARD_CONTEXT = "Link CLI onboarding demo: Merino Trail Jacket (size M, Forest) from Galtee Outdoor. Agent completing checkout using a virtual card credential.";
+var DEMO_CARD_CONTEXT = "Link CLI onboarding demo: Errigal Puffer Jacket from Galtee Outdoor. Agent completing checkout using a virtual card credential.";
 var DEMO_SPT_CONTEXT = "Demo purchase: Testing the Link CLI machine payment flow by making an automated HTTP 402 payment to Stripe Climate. This demonstrates the shared payment token credential and machine payment protocol.";
 
 // src/commands/demo/content.ts
@@ -11735,100 +11808,103 @@ var sptAmount = `$${(DEMO_SPT_AMOUNT / 100).toFixed(2)}`;
 var CARD_FLOW = {
   title: "Flow 1: Virtual Card",
   intro: {
-    description: `An agent buys a Merino Trail Jacket (${cardAmount}) from Galtee Outdoor using a **virtual card** \u2014 a one-time card number issued from your Link wallet. Your real payment details are never shared with the agent or the business.`,
+    description: `Agent buys a Errigal Puffer Jacket (${cardAmount}) with a one-time virtual card from your Link wallet. Your real card is never shared.`,
     steps: [
-      `The agent calls \`spend-request create\` to request ${cardAmount} at Galtee Outdoor`,
-      "You approve in the Link app",
-      "Link issues a one-time virtual card",
-      "Open the checkout page and enter the card details"
+      "Select payment method",
+      `Create spend request for ${cardAmount}`,
+      "Approve in Link",
+      "Get virtual card and open checkout"
     ],
     prompt: "Press [Enter] to start"
   },
+  explainPm: {
+    prompt: "Press [Enter] to create a spend request"
+  },
   createSpend: {
-    description: `\`spend-request create\` sends the business name, URL, amount (${cardAmount}), and purchase description to Link. No credentials are issued until you approve.`,
+    description: `Requests ${cardAmount} from your wallet. No credentials issued until you approve.`,
     loading: "Creating spend request..."
   },
   approval: {
-    description: "Open the URL to approve the spend request. The CLI polls and continues once approved.",
+    description: "Open the URL to approve. CLI continues once approved.",
     loading: "Waiting for approval...",
     browserHint: "Press [Enter] to open in browser"
   },
   showCard: {
-    description: "Link issued a one-time virtual card. An agent fills these into the checkout form. Single-use \u2014 expires in minutes:",
-    openUrl: "Open Galtee Outdoor and enter these details at checkout.",
+    description: "One-time virtual card issued. Enter these at Galtee Outdoor checkout:",
     prompt: "Press [Enter] to open Galtee Outdoor"
   },
   done: {
     success: "Opened Galtee Outdoor in your browser",
-    detail: "Enter the card details above at checkout. Galtee Outdoor runs in testmode \u2014 no real charge."
+    detail: "Testmode \u2014 no real charge."
   }
 };
 var SPT_FLOW = {
   title: "Flow 2: Machine Payment (SPT)",
   intro: {
-    description: "Some APIs accept payment without a checkout form. When called without credentials, the server responds with **HTTP 402** and a payment challenge. The agent signs that challenge with a **shared payment token** (SPT) and retries \u2014 this is the Machine Payment Protocol (MPP).",
-    preamble: `A ${sptAmount} donation to Stripe Climate (climate.stripe.dev) demonstrates:`,
+    description: "No checkout form. The server returns **HTTP 402** with a payment challenge. The link-cli creates and sends a **Shared Payment Token** (SPT) programmaticaly scoped to the business and amount.",
+    preamble: `${sptAmount} donation to Stripe Climate demonstrates:`,
     steps: [
-      "Probe the API \u2014 server responds HTTP 402 with a challenge",
-      "Decode the challenge to extract the `network_id`",
-      "Call `spend-request create` for an SPT credential",
-      "Approve the spend request",
-      "`mpp pay` signs the challenge and retries with an Authorization header"
+      "Select payment method",
+      "Probe API \u2014 get HTTP 402 challenge and decode `network_id`",
+      "Create SPT spend request",
+      "Approve",
+      "`mpp pay` signs and retries"
     ],
     prompt: "Press [Enter] to start"
   },
   probe: {
-    description: `The agent POSTs to ${DEMO_CLIMATE_API_URL}. Without a payment credential, the server returns HTTP 402 with a \`WWW-Authenticate\` challenge header.`,
+    description: `POST to ${DEMO_CLIMATE_API_URL} without credentials \u2014 server returns 402 with a \`WWW-Authenticate\` challenge.`,
     loading: "Probing...",
-    detail: "The challenge contains a **network_id** \u2014 the business identifier on the Stripe network. The agent uses it to request the matching SPT credential."
+    detail: "Challenge contains a `network_id` \u2014 the business identifier on Stripe's network.",
+    prompt: "Press [Enter] to create a spend request"
   },
   createSpend: {
-    description: `\`spend-request create\` with \`credential_type: "shared_payment_token"\`, the decoded \`network_id\`, and amount (${sptAmount}). The \`network_id\` identifies the business \u2014 no name or URL needed.`,
+    description: `Request an SPT using the decoded \`network_id\` and amount (${sptAmount}).`,
     loading: "Creating spend request..."
   },
   approval: {
-    description: "Approve the spend request. Once approved, Link issues an SPT the agent uses to sign the 402 challenge.",
+    description: "Approve to issue the SPT.",
     loading: "Waiting for approval...",
     browserHint: "Press [Enter] to open in browser"
   },
   mppPay: {
-    description: "`mpp pay` retrieves the SPT, re-probes the API, signs the 402 challenge, and retries with an `Authorization: Payment` header.",
+    description: "`mpp pay` retrieves the SPT, signs the challenge, retries with `Authorization: Payment`.",
     loading: "Completing payment...",
     prompt: "Press [Enter] to pay"
   },
   done: {
     success: "Payment complete",
-    detail: `The ${sptAmount} donation went through entirely via API \u2014 no forms, no browser.`
+    detail: `${sptAmount} donation completed via API \u2014 no forms, no browser.`
   }
 };
 var DEMO_MENU = {
   title: "Link CLI Demo",
-  subtitle: "Two flows showing how agents request and use payment credentials with Link.",
+  subtitle: "See how agents use Link to make payments.",
   question: "Which flow would you like to run?",
   hint: "Use \u2191\u2193 to select, [Enter] to confirm",
   options: [
     {
       key: "both",
       label: "Both flows",
-      description: "Walk through both flows end-to-end."
+      description: "Run both end-to-end."
     },
     {
       key: "card",
       label: "Virtual card",
-      description: "The agent requests a one-time card number and fills it into a checkout form."
+      description: "One-time card number for checkout forms."
     },
     {
       key: "spt",
       label: "Machine payment (SPT)",
-      description: "The agent pays via API using the Machine Payment Protocol \u2014 no browser, no forms."
+      description: "Pay via API \u2014 no browser, no forms."
     }
   ],
-  transition: "Virtual card flow done. Next: **machine payment** \u2014 the agent pays an API directly, no checkout form needed.",
+  transition: "Card flow done. Next: **machine payment** \u2014 paying an API directly.",
   transitionPrompt: "Press [Enter] to continue to Flow 2"
 };
 var ONBOARD = {
   title: "Welcome to Link CLI",
-  subtitle: "Set up Link CLI to let agents make secure payments on your behalf.",
+  subtitle: "Let agents make secure payments on your behalf.",
   auth: {
     alreadyLoggedIn: "Already logged in",
     authenticated: "Authenticated",
@@ -11838,48 +11914,23 @@ var ONBOARD = {
     loading: "Checking payment methods...",
     pickPrompt: "Which payment method should we use for the demo?",
     pickHint: "Use \u2191\u2193 to select, [Enter] to confirm",
-    missing: "No payment methods found in your Link wallet.",
+    missing: "No payment methods in your Link wallet.",
     missingSteps: [
       "Open the Link app or visit link.com",
       "Add a payment method",
-      "Come back here and press [Enter] to retry"
+      "Press [Enter] to retry"
     ],
     retryPrompt: "Press [Enter] to retry"
   },
   appTip: {
     title: "Get the Link app",
-    description: "Approve spend requests from your phone. Push notifications let you approve or deny instantly.",
+    description: "Approve spend requests from your phone with push notifications.",
     url: "https://link.com/download"
   }
 };
 
-// src/commands/demo/step-data.tsx
-import { Box as Box4, Text as Text5 } from "ink";
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var StepData = ({ data }) => {
-  const entries = Object.entries(data).filter(
-    ([, v]) => v !== void 0 && v !== null
-  );
-  const maxKeyLen = Math.max(...entries.map(([k]) => k.length));
-  return /* @__PURE__ */ jsx6(
-    Box4,
-    {
-      flexDirection: "column",
-      paddingX: 2,
-      marginTop: 1,
-      borderStyle: "single",
-      borderColor: "gray",
-      children: entries.map(([key, value]) => /* @__PURE__ */ jsxs3(Text5, { children: [
-        /* @__PURE__ */ jsx6(Text5, { dimColor: true, children: key.padEnd(maxKeyLen) }),
-        "  ",
-        /* @__PURE__ */ jsx6(Text5, { children: typeof value === "object" ? JSON.stringify(value) : String(value) })
-      ] }, key))
-    }
-  );
-};
-
 // src/commands/demo/card-flow.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 function formatPmLabel(pm) {
   return `${pm.card_details?.brand ?? pm.type} ****${pm.card_details?.last4 ?? ""}`;
 }
@@ -11895,15 +11946,14 @@ var CardFlow = ({
   paymentMethodId: initialPaymentMethodId,
   onComplete
 }) => {
-  const [step, setStep] = useState3("intro");
-  const [paymentMethod, setPaymentMethod] = useState3(
+  const [step, setStep] = useState4("intro");
+  const [paymentMethod, setPaymentMethod] = useState4(
     null
   );
-  const [paymentMethods, setPaymentMethods] = useState3([]);
-  const [selectedPmIndex, setSelectedPmIndex] = useState3(0);
-  const [spendRequest, setSpendRequest] = useState3(null);
-  const [spendRequestPayload, setSpendRequestPayload] = useState3(null);
-  const [error, setError] = useState3("");
+  const [paymentMethods, setPaymentMethods] = useState4([]);
+  const [selectedPmIndex, setSelectedPmIndex] = useState4(0);
+  const [spendRequest, setSpendRequest] = useState4(null);
+  const [error, setError] = useState4("");
   const approvalUrl = spendRequest?.approval_url ?? "";
   const enterResolver = useRef(null);
   const pmResolver = useRef(null);
@@ -11956,7 +12006,7 @@ var CardFlow = ({
     }
   });
   const started = useRef(false);
-  useEffect3(() => {
+  useEffect4(() => {
     if (started.current) return;
     started.current = true;
     const run = async () => {
@@ -11992,7 +12042,7 @@ var CardFlow = ({
           await waitForEnter();
         }
         setStep("create-spend");
-        const payload = {
+        const result = await spendRequestRepo2.createSpendRequest({
           payment_details: pmId,
           credential_type: "card",
           amount: DEMO_CARD_AMOUNT,
@@ -12001,9 +12051,7 @@ var CardFlow = ({
           merchant_url: DEMO_MERCHANT_URL,
           request_approval: true,
           test: true
-        };
-        setSpendRequestPayload(payload);
-        const result = await spendRequestRepo2.createSpendRequest(payload);
+        });
         setSpendRequest(result);
         setStep("await-approval");
         for (; ; ) {
@@ -12075,177 +12123,160 @@ var CardFlow = ({
         /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: DEMO_MERCHANT_URL })
       ] }),
       /* @__PURE__ */ jsx7(MarkdownText, { children: CARD_FLOW.intro.description }),
-      /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsxs4(Text6, { children: [
-        "What happens:",
-        "\n",
-        CARD_FLOW.intro.steps.map((s, i) => ` ${i + 1}. ${s}`).join("\n")
-      ] }) }),
+      /* @__PURE__ */ jsxs4(Box5, { marginTop: 1, flexDirection: "column", children: [
+        /* @__PURE__ */ jsx7(Text6, { children: "What happens:" }),
+        CARD_FLOW.intro.steps.map((s, i) => {
+          const doneAfter = [
+            "pick-pm",
+            "create-spend",
+            "await-approval",
+            "show-card"
+          ];
+          const activeFrom = [
+            "fetch-pm",
+            "create-spend",
+            "await-approval",
+            "show-card"
+          ];
+          const done = pastStep(doneAfter[i]);
+          const active = !done && (step === activeFrom[i] || pastStep(activeFrom[i]));
+          return done ? /* @__PURE__ */ jsxs4(Text6, { dimColor: true, strikethrough: true, children: [
+            " ",
+            i + 1,
+            ". ",
+            s
+          ] }, s) : active ? /* @__PURE__ */ jsxs4(Text6, { bold: true, color: "cyan", children: [
+            " ",
+            i + 1,
+            ". ",
+            s
+          ] }, s) : /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+            " ",
+            i + 1,
+            ". ",
+            s
+          ] }, s);
+        })
+      ] }),
       step === "intro" && prompt(CARD_FLOW.intro.prompt)
     ] }),
     step === "fetch-pm" && /* @__PURE__ */ jsx7(Box5, { flexDirection: "column", children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Fetching payment methods from your Link wallet..." }) }),
-    step === "pick-pm" && paymentMethods.length > 1 && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx7(Text6, { children: "Which payment method should we use for the demo?" }),
-      /* @__PURE__ */ jsx7(Box5, { flexDirection: "column", marginTop: 1, children: paymentMethods.map((pm, i) => /* @__PURE__ */ jsx7(Text6, { children: i === selectedPmIndex ? /* @__PURE__ */ jsxs4(Text6, { color: "cyan", bold: true, children: [
-        ">",
-        " ",
-        formatPmLabel(pm),
-        pm.is_default ? " (default)" : ""
-      ] }) : /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
-        "  ",
-        formatPmLabel(pm),
-        pm.is_default ? " (default)" : ""
-      ] }) }, pm.id)) }),
-      /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Use \u2191\u2193 to select, [Enter] to confirm" }) })
-    ] }),
-    pastStep("fetch-pm") && paymentMethod && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
-        "\u2713 Using ",
-        /* @__PURE__ */ jsx7(Text6, { bold: true, children: pmLabel }),
-        paymentMethod.is_default ? " (default)" : ""
+    (step === "pick-pm" || step === "explain-pm") && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+      step === "pick-pm" && paymentMethods.length > 1 && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsx7(Text6, { children: "Which payment method should we use for the demo?" }),
+        /* @__PURE__ */ jsx7(Box5, { flexDirection: "column", marginTop: 1, children: paymentMethods.map((pm, i) => /* @__PURE__ */ jsx7(Text6, { children: i === selectedPmIndex ? /* @__PURE__ */ jsxs4(Text6, { color: "cyan", bold: true, children: [
+          ">",
+          " ",
+          formatPmLabel(pm),
+          pm.is_default ? " (default)" : ""
+        ] }) : /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+          "  ",
+          formatPmLabel(pm),
+          pm.is_default ? " (default)" : ""
+        ] }) }, pm.id)) }),
+        /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Use \u2191\u2193 to select, [Enter] to confirm" }) })
       ] }),
-      step === "explain-pm" && prompt()
+      paymentMethod && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+        /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
+          "\u2713 Using ",
+          /* @__PURE__ */ jsx7(Text6, { bold: true, children: pmLabel }),
+          paymentMethod.is_default ? " (default)" : ""
+        ] }),
+        step === "explain-pm" && prompt(CARD_FLOW.explainPm.prompt)
+      ] })
     ] }),
-    pastStep("explain-pm") && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+    step === "create-spend" && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx7(MarkdownText, { children: CARD_FLOW.createSpend.description }),
-      spendRequestPayload && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "spend-request create" }),
-        /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx7(Box5, { marginY: 1, children: /* @__PURE__ */ jsx7(Text6, { color: "cyan", children: CARD_FLOW.createSpend.loading }) })
+    ] }),
+    (step === "await-approval" || step === "approval-timeout") && spendRequest && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
+        "\u2713 Spend request created (",
+        spendRequest.id,
+        ")"
+      ] }),
+      step === "await-approval" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx7(Text6, { children: CARD_FLOW.approval.description }),
+        /* @__PURE__ */ jsxs4(
           Box5,
           {
             flexDirection: "column",
-            borderStyle: "single",
-            borderColor: "gray",
+            borderStyle: "round",
+            borderColor: "cyan",
             paddingX: 2,
-            children: /* @__PURE__ */ jsx7(Text6, { children: JSON.stringify(
-              spendRequestPayload,
-              null,
-              2
-            ) })
+            paddingY: 1,
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsxs4(Text6, { children: [
+                "Approve at:",
+                " ",
+                /* @__PURE__ */ jsx7(Text6, { bold: true, color: "cyan", children: approvalUrl })
+              ] }),
+              /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: CARD_FLOW.approval.browserHint })
+            ]
           }
-        )
-      ] }),
-      step === "create-spend" && /* @__PURE__ */ jsx7(Box5, { marginY: 1, children: /* @__PURE__ */ jsx7(Text6, { color: "cyan", children: CARD_FLOW.createSpend.loading }) })
-    ] }),
-    (step === "await-approval" || step === "approval-timeout" || pastStep("await-approval")) && spendRequest && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
-        "\u2713 Spend request created (ID: ",
-        /* @__PURE__ */ jsx7(Text6, { bold: true, children: spendRequest.id }),
-        ")"
+        ),
+        /* @__PURE__ */ jsx7(Box5, { marginY: 1, children: /* @__PURE__ */ jsx7(Text6, { color: "cyan", children: CARD_FLOW.approval.loading }) })
       ] }),
-      /* @__PURE__ */ jsx7(
-        StepData,
-        {
-          data: {
-            id: spendRequest.id,
-            status: spendRequest.status,
-            credential_type: spendRequest.credential_type,
-            amount: spendRequest.amount,
-            merchant_name: spendRequest.merchant_name,
-            merchant_url: spendRequest.merchant_url,
-            context: spendRequest.context,
-            approval_url: spendRequest.approval_url
+      step === "approval-timeout" && /* @__PURE__ */ jsxs4(Fragment, { children: [
+        /* @__PURE__ */ jsx7(Text6, { color: "yellow", children: "\u26A0 Approval timed out (5 min). Still pending \u2014 you can still approve." }),
+        /* @__PURE__ */ jsxs4(
+          Box5,
+          {
+            flexDirection: "column",
+            borderStyle: "round",
+            borderColor: "yellow",
+            paddingX: 2,
+            paddingY: 1,
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsxs4(Text6, { children: [
+                "Approve at:",
+                " ",
+                /* @__PURE__ */ jsx7(Text6, { bold: true, color: "cyan", children: approvalUrl })
+              ] }),
+              /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Press [Enter] to open in browser" })
+            ]
           }
-        }
-      )
-    ] }),
-    step === "await-approval" && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx7(Text6, { children: CARD_FLOW.approval.description }),
-      /* @__PURE__ */ jsxs4(
-        Box5,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "cyan",
-          paddingX: 2,
-          paddingY: 1,
-          marginTop: 1,
-          children: [
-            /* @__PURE__ */ jsxs4(Text6, { children: [
-              "Approve at:",
-              " ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, color: "cyan", children: approvalUrl })
-            ] }),
-            /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: CARD_FLOW.approval.browserHint })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx7(Box5, { marginY: 1, children: /* @__PURE__ */ jsx7(Text6, { color: "cyan", children: CARD_FLOW.approval.loading }) })
-    ] }),
-    step === "approval-timeout" && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx7(Text6, { color: "yellow", children: "\u26A0 Approval timed out (5 min). The spend request is still pending \u2014 you can still approve it." }),
-      /* @__PURE__ */ jsxs4(
-        Box5,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "yellow",
-          paddingX: 2,
-          paddingY: 1,
-          marginTop: 1,
-          children: [
-            /* @__PURE__ */ jsxs4(Text6, { children: [
-              "Approve at:",
-              " ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, color: "cyan", children: approvalUrl })
-            ] }),
-            /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Press [Enter] to open in browser" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "r Retry polling q Quit demo" }) })
+        ),
+        /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "r Retry polling q Quit demo" }) })
+      ] })
     ] }),
-    pastStep("await-approval") && card && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
+    (step === "show-card" || step === "open-url" || step === "done") && card && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx7(Text6, { color: "green", children: "\u2713 Approved!" }),
       /* @__PURE__ */ jsx7(MarkdownText, { children: CARD_FLOW.showCard.description }),
-      /* @__PURE__ */ jsxs4(
-        Box5,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "green",
-          paddingX: 2,
-          paddingY: 1,
-          marginTop: 1,
-          children: [
-            /* @__PURE__ */ jsx7(Text6, { color: "yellow", dimColor: true, children: "[testmode card]" }),
-            /* @__PURE__ */ jsxs4(Text6, { children: [
-              "Number: ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, children: formatCardNumber(card.number) })
-            ] }),
-            /* @__PURE__ */ jsxs4(Text6, { children: [
-              "Exp:",
-              " ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, children: formatExpiry(card.exp_month, card.exp_year) })
-            ] }),
-            /* @__PURE__ */ jsxs4(Text6, { children: [
-              "CVC: ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, children: card.cvc })
-            ] }),
-            card.billing_address?.postal_code && /* @__PURE__ */ jsxs4(Text6, { children: [
-              "Zip: ",
-              /* @__PURE__ */ jsx7(Text6, { bold: true, children: card.billing_address.postal_code })
-            ] }),
-            card.valid_until && /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
-              "Expires:",
-              " ",
-              new Date(card.valid_until).toLocaleTimeString([], {
-                hour: "2-digit",
-                minute: "2-digit"
-              })
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx7(Box5, { marginTop: 1, children: /* @__PURE__ */ jsx7(MarkdownText, { children: CARD_FLOW.showCard.openUrl }) }),
+      /* @__PURE__ */ jsx7(Box5, { flexDirection: "column", paddingX: 2, marginTop: 1, children: /* @__PURE__ */ jsxs4(Text6, { children: [
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Number " }),
+        /* @__PURE__ */ jsx7(Text6, { bold: true, children: formatCardNumber(card.number) }),
+        "  ",
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Exp " }),
+        /* @__PURE__ */ jsx7(Text6, { bold: true, children: formatExpiry(card.exp_month, card.exp_year) }),
+        "  ",
+        /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "CVC " }),
+        /* @__PURE__ */ jsx7(Text6, { bold: true, children: card.cvc }),
+        card.billing_address?.postal_code && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          "  ",
+          /* @__PURE__ */ jsx7(Text6, { dimColor: true, children: "Zip " }),
+          /* @__PURE__ */ jsx7(Text6, { bold: true, children: card.billing_address.postal_code })
+        ] }),
+        card.valid_until && /* @__PURE__ */ jsxs4(Fragment, { children: [
+          "  ",
+          /* @__PURE__ */ jsxs4(Text6, { dimColor: true, children: [
+            "expires",
+            " ",
+            new Date(card.valid_until).toLocaleTimeString([], {
+              hour: "2-digit",
+              minute: "2-digit"
+            })
+          ] })
+        ] })
+      ] }) }),
       step === "show-card" && prompt(CARD_FLOW.showCard.prompt)
     ] }),
     step === "done" && /* @__PURE__ */ jsxs4(Box5, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs4(Box5, { flexDirection: "row", gap: 1, children: [
-        /* @__PURE__ */ jsx7(Text6, { color: "yellow", children: "[testmode]" }),
-        /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
-          "\u2713 ",
-          CARD_FLOW.done.success
-        ] })
+      /* @__PURE__ */ jsxs4(Text6, { color: "green", children: [
+        "\u2713 ",
+        CARD_FLOW.done.success
       ] }),
       /* @__PURE__ */ jsx7(Text6, { children: CARD_FLOW.done.detail })
     ] }),
@@ -12258,7 +12289,7 @@ var CardFlow = ({
 
 // src/commands/demo/spt-flow.tsx
 import { Box as Box7, Text as Text8, useInput as useInput3 } from "ink";
-import { useEffect as useEffect5, useRef as useRef2, useState as useState5 } from "react";
+import { useEffect as useEffect6, useRef as useRef2, useState as useState6 } from "react";
 
 // src/commands/mpp/decode.ts
 import { Challenge } from "mppx";
@@ -12344,7 +12375,7 @@ import Spinner2 from "ink-spinner";
 import { Credential, Method } from "mppx";
 import { Mppx, Transport } from "mppx/client";
 import { Methods as StripeMethods } from "mppx/stripe";
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function buildHeaders(data, headers) {
   const result = {};
@@ -12450,10 +12481,10 @@ function MppPay({
   repository,
   onComplete
 }) {
-  const [step, setStep] = useState4("retrieving");
-  const [result, setResult] = useState4(null);
-  const [error, setError] = useState4(null);
-  useEffect4(() => {
+  const [step, setStep] = useState5("retrieving");
+  const [result, setResult] = useState5(null);
+  const [error, setError] = useState5(null);
+  useEffect5(() => {
     (async () => {
       try {
         setStep("retrieving");
@@ -12545,22 +12576,20 @@ function MppPay({
 }
 
 // src/commands/demo/spt-flow.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var SptFlow = ({
   spendRequestRepo: spendRequestRepo2,
   paymentMethodsResource,
   paymentMethodId: initialPaymentMethodId,
   onComplete
 }) => {
-  const [step, setStep] = useState5("intro");
-  const [networkId, setNetworkId] = useState5("");
-  const [paymentMethods, setPaymentMethods] = useState5([]);
-  const [selectedPmIndex, setSelectedPmIndex] = useState5(0);
-  const [spendRequest, setSpendRequest] = useState5(null);
-  const [spendRequestPayload, setSpendRequestPayload] = useState5(null);
-  const [payResult, setPayResult] = useState5(null);
-  const [challengeData, setChallengeData] = useState5(null);
-  const [error, setError] = useState5("");
+  const [step, setStep] = useState6("intro");
+  const [networkId, setNetworkId] = useState6("");
+  const [paymentMethods, setPaymentMethods] = useState6([]);
+  const [selectedPmIndex, setSelectedPmIndex] = useState6(0);
+  const [spendRequest, setSpendRequest] = useState6(null);
+  const [payResult, setPayResult] = useState6(null);
+  const [error, setError] = useState6("");
   const approvalUrl = spendRequest?.approval_url ?? "";
   const enterResolver = useRef2(null);
   const pmResolver = useRef2(null);
@@ -12613,7 +12642,7 @@ var SptFlow = ({
     }
   });
   const started = useRef2(false);
-  useEffect5(() => {
+  useEffect6(() => {
     if (started.current) return;
     started.current = true;
     const run = async () => {
@@ -12652,17 +12681,10 @@ var SptFlow = ({
         const wwwAuth = probeResponse.headers.get("www-authenticate") ?? "";
         const decoded = decodeStripeChallenge(wwwAuth);
         setNetworkId(decoded.network_id);
-        setChallengeData({
-          status: probeResponse.status,
-          method: decoded.method,
-          intent: decoded.intent,
-          network_id: decoded.network_id,
-          realm: decoded.realm
-        });
         setStep("explain-402");
         await waitForEnter();
         setStep("create-spend");
-        const payload = {
+        const result = await spendRequestRepo2.createSpendRequest({
           payment_details: pmId,
           credential_type: "shared_payment_token",
           network_id: decoded.network_id,
@@ -12670,9 +12692,7 @@ var SptFlow = ({
           context: DEMO_SPT_CONTEXT,
           request_approval: true,
           test: true
-        };
-        setSpendRequestPayload(payload);
-        const result = await spendRequestRepo2.createSpendRequest(payload);
+        });
         setSpendRequest(result);
         setStep("await-approval");
         for (; ; ) {
@@ -12754,7 +12774,41 @@ var SptFlow = ({
       /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.intro.description }),
       /* @__PURE__ */ jsxs6(Box7, { marginTop: 1, flexDirection: "column", children: [
         /* @__PURE__ */ jsx9(Text8, { children: SPT_FLOW.intro.preamble }),
-        SPT_FLOW.intro.steps.map((s, i) => /* @__PURE__ */ jsx9(MarkdownText, { children: ` ${i + 1}. ${s}` }, s))
+        SPT_FLOW.intro.steps.map((s, i) => {
+          const doneAfter = [
+            "pick-pm",
+            "probe",
+            "create-spend",
+            "await-approval",
+            "mpp-pay"
+          ];
+          const activeFrom = [
+            "fetch-pm",
+            "probe",
+            "create-spend",
+            "await-approval",
+            "mpp-pay-gate"
+          ];
+          const done = pastStep(doneAfter[i]);
+          const active = !done && (step === activeFrom[i] || pastStep(activeFrom[i]));
+          const label = s.replace(/`/g, "");
+          return done ? /* @__PURE__ */ jsxs6(Text8, { dimColor: true, strikethrough: true, children: [
+            " ",
+            i + 1,
+            ". ",
+            label
+          ] }, s) : active ? /* @__PURE__ */ jsxs6(Text8, { bold: true, color: "cyan", children: [
+            " ",
+            i + 1,
+            ". ",
+            label
+          ] }, s) : /* @__PURE__ */ jsxs6(Text8, { dimColor: true, children: [
+            " ",
+            i + 1,
+            ". ",
+            label
+          ] }, s);
+        })
       ] }),
       step === "intro" && prompt(SPT_FLOW.intro.prompt)
     ] }),
@@ -12773,146 +12827,90 @@ var SptFlow = ({
       ] }) }, pm.id)) }),
       /* @__PURE__ */ jsx9(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "Use \u2191\u2193 to select, [Enter] to confirm" }) })
     ] }),
-    pastStep("fetch-pm") && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+    (step === "probe" || step === "explain-402") && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.probe.description }),
-      step === "probe" && /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.probe.loading }) })
+      step === "probe" && /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.probe.loading }) }),
+      step === "explain-402" && networkId && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.probe.detail }),
+        /* @__PURE__ */ jsxs6(Text8, { color: "green", children: [
+          "\u2713 Got HTTP 402 \u2014 network_id: ",
+          /* @__PURE__ */ jsx9(Text8, { bold: true, children: networkId })
+        ] }),
+        prompt(SPT_FLOW.probe.prompt)
+      ] })
+    ] }),
+    step === "create-spend" && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.createSpend.description }),
+      /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.createSpend.loading }) })
     ] }),
-    pastStep("probe") && networkId && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+    (step === "await-approval" || step === "approval-timeout") && spendRequest && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
       /* @__PURE__ */ jsxs6(Text8, { color: "green", children: [
-        "\u2713 Got HTTP 402 with a ",
-        /* @__PURE__ */ jsx9(Text8, { bold: true, children: "WWW-Authenticate" }),
-        " challenge"
+        "\u2713 Spend request created (",
+        spendRequest.id,
+        ")"
       ] }),
-      challengeData && /* @__PURE__ */ jsx9(StepData, { data: challengeData }),
-      /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.probe.detail }),
-      step === "explain-402" && prompt()
-    ] }),
-    pastStep("explain-402") && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.createSpend.description }),
-      spendRequestPayload && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", marginTop: 1, children: [
-        /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "spend-request create" }),
-        /* @__PURE__ */ jsx9(
+      step === "await-approval" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(Text8, { children: SPT_FLOW.approval.description }),
+        /* @__PURE__ */ jsxs6(
           Box7,
           {
             flexDirection: "column",
-            borderStyle: "single",
-            borderColor: "gray",
+            borderStyle: "round",
+            borderColor: "cyan",
             paddingX: 2,
-            children: /* @__PURE__ */ jsx9(Text8, { children: JSON.stringify(
-              spendRequestPayload,
-              null,
-              2
-            ) })
+            paddingY: 1,
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsxs6(Text8, { children: [
+                "Approve at:",
+                " ",
+                /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: approvalUrl })
+              ] }),
+              /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: SPT_FLOW.approval.browserHint })
+            ]
           }
-        )
-      ] }),
-      step === "create-spend" && /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.createSpend.loading }) })
-    ] }),
-    (step === "await-approval" || step === "approval-timeout" || pastStep("await-approval")) && spendRequest && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs6(Text8, { color: "green", children: [
-        "\u2713 Spend request created (ID: ",
-        /* @__PURE__ */ jsx9(Text8, { bold: true, children: spendRequest.id }),
-        ")"
+        ),
+        /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.approval.loading }) })
       ] }),
-      /* @__PURE__ */ jsx9(
-        StepData,
-        {
-          data: {
-            id: spendRequest.id,
-            status: spendRequest.status,
-            credential_type: spendRequest.credential_type,
-            network_id: spendRequest.network_id,
-            amount: spendRequest.amount,
-            context: spendRequest.context,
-            approval_url: spendRequest.approval_url
+      step === "approval-timeout" && /* @__PURE__ */ jsxs6(Fragment2, { children: [
+        /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: "\u26A0 Approval timed out (5 min). Still pending \u2014 you can still approve." }),
+        /* @__PURE__ */ jsxs6(
+          Box7,
+          {
+            flexDirection: "column",
+            borderStyle: "round",
+            borderColor: "yellow",
+            paddingX: 2,
+            paddingY: 1,
+            marginTop: 1,
+            children: [
+              /* @__PURE__ */ jsxs6(Text8, { children: [
+                "Approve at:",
+                " ",
+                /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: approvalUrl })
+              ] }),
+              /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "Press [Enter] to open in browser" })
+            ]
           }
-        }
-      )
-    ] }),
-    step === "await-approval" && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx9(Text8, { children: SPT_FLOW.approval.description }),
-      /* @__PURE__ */ jsxs6(
-        Box7,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "cyan",
-          paddingX: 2,
-          paddingY: 1,
-          marginTop: 1,
-          children: [
-            /* @__PURE__ */ jsxs6(Text8, { children: [
-              "Approve at:",
-              " ",
-              /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: approvalUrl })
-            ] }),
-            /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: SPT_FLOW.approval.browserHint })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.approval.loading }) })
-    ] }),
-    step === "approval-timeout" && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsx9(Text8, { color: "yellow", children: "\u26A0 Approval timed out (5 min). The spend request is still pending \u2014 you can still approve it." }),
-      /* @__PURE__ */ jsxs6(
-        Box7,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "yellow",
-          paddingX: 2,
-          paddingY: 1,
-          marginTop: 1,
-          children: [
-            /* @__PURE__ */ jsxs6(Text8, { children: [
-              "Approve at:",
-              " ",
-              /* @__PURE__ */ jsx9(Text8, { bold: true, color: "cyan", children: approvalUrl })
-            ] }),
-            /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "Press [Enter] to open in browser" })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx9(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "r Retry polling q Quit demo" }) })
+        ),
+        /* @__PURE__ */ jsx9(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx9(Text8, { dimColor: true, children: "r Retry polling q Quit demo" }) })
+      ] })
     ] }),
-    pastStep("await-approval") && step !== "error" && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      (step === "mpp-pay-gate" || pastStep("mpp-pay-gate")) && /* @__PURE__ */ jsxs6(Fragment, { children: [
-        /* @__PURE__ */ jsx9(Text8, { color: "green", children: "\u2713 Approved!" }),
-        /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.mppPay.description })
-      ] }),
+    (step === "mpp-pay-gate" || step === "mpp-pay") && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
+      /* @__PURE__ */ jsx9(Text8, { color: "green", children: "\u2713 Approved!" }),
+      /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.mppPay.description }),
       step === "mpp-pay-gate" && prompt(SPT_FLOW.mppPay.prompt),
       step === "mpp-pay" && /* @__PURE__ */ jsx9(Box7, { marginY: 1, children: /* @__PURE__ */ jsx9(Text8, { color: "cyan", children: SPT_FLOW.mppPay.loading }) })
     ] }),
     step === "done" && payResult && /* @__PURE__ */ jsxs6(Box7, { flexDirection: "column", children: [
-      /* @__PURE__ */ jsxs6(
-        Box7,
-        {
-          flexDirection: "column",
-          borderStyle: "round",
-          borderColor: "green",
-          paddingX: 2,
-          paddingY: 1,
-          children: [
-            /* @__PURE__ */ jsx9(Text8, { bold: true, color: "green", children: SPT_FLOW.done.success }),
-            /* @__PURE__ */ jsxs6(Text8, { children: [
-              "Status: ",
-              /* @__PURE__ */ jsxs6(Text8, { bold: true, children: [
-                "HTTP ",
-                payResult.status
-              ] })
-            ] }),
-            payResult.body && (() => {
-              const body = payResult.body;
-              try {
-                return /* @__PURE__ */ jsx9(Text8, { children: JSON.stringify(JSON.parse(body), null, 2) });
-              } catch {
-                return /* @__PURE__ */ jsx9(Text8, { children: body });
-              }
-            })()
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx9(Box7, { marginTop: 1, children: /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.done.detail }) })
+      /* @__PURE__ */ jsxs6(Text8, { bold: true, color: "green", children: [
+        "\u2713 ",
+        SPT_FLOW.done.success,
+        " (HTTP ",
+        payResult.status,
+        ")"
+      ] }),
+      /* @__PURE__ */ jsx9(MarkdownText, { children: SPT_FLOW.done.detail })
     ] }),
     step === "error" && /* @__PURE__ */ jsxs6(Text8, { color: "red", children: [
       "Error: ",
@@ -12922,7 +12920,7 @@ var SptFlow = ({
 };
 
 // src/commands/demo/demo-runner.tsx
-import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var DemoRunner = ({
   authRepo: authRepo2,
   spendRequestRepo: spendRequestRepo2,
@@ -12933,17 +12931,17 @@ var DemoRunner = ({
   onComplete
 }) => {
   const preselected = onlyCard ? "card" : onlySpt ? "spt" : null;
-  const [choice, setChoice] = useState6(preselected);
-  const [menuIndex, setMenuIndex] = useState6(0);
+  const [choice, setChoice] = useState7(preselected);
+  const [menuIndex, setMenuIndex] = useState7(0);
   const postAuthPhase = preselected === "spt" ? "spt-flow" : preselected ? "card-flow" : "menu";
-  const [phase, setPhase] = useState6(
+  const [phase, setPhase] = useState7(
     storage.isAuthenticated() ? postAuthPhase : "auth"
   );
-  const [paymentMethodId, setPaymentMethodId] = useState6(
+  const [paymentMethodId, setPaymentMethodId] = useState7(
     preselectedPmId ?? ""
   );
-  const [cardSuccess, setCardSuccess] = useState6(null);
-  const [sptSuccess, setSptSuccess] = useState6(null);
+  const [cardSuccess, setCardSuccess] = useState7(null);
+  const [sptSuccess, setSptSuccess] = useState7(null);
   const runCard = choice === "card" || choice === "both";
   const runSpt = choice === "spt" || choice === "both";
   useInput4((_input, key) => {
@@ -12997,7 +12995,7 @@ var DemoRunner = ({
     ),
     phase === "menu" && /* @__PURE__ */ jsxs7(Box8, { flexDirection: "column", children: [
       /* @__PURE__ */ jsx10(Text9, { children: DEMO_MENU.question }),
-      /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", marginTop: 1, gap: 1, children: DEMO_MENU.options.map((opt, i) => /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", children: i === menuIndex ? /* @__PURE__ */ jsxs7(Fragment2, { children: [
+      /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", marginTop: 1, gap: 1, children: DEMO_MENU.options.map((opt, i) => /* @__PURE__ */ jsx10(Box8, { flexDirection: "column", children: i === menuIndex ? /* @__PURE__ */ jsxs7(Fragment3, { children: [
         /* @__PURE__ */ jsxs7(Text9, { color: "cyan", bold: true, children: [
           ">",
           " ",
@@ -13244,7 +13242,7 @@ import { render as render4 } from "ink";
 
 // src/commands/onboard/onboard-runner.tsx
 import { Box as Box10, Text as Text11, useInput as useInput5 } from "ink";
-import { useEffect as useEffect6, useRef as useRef3, useState as useState7 } from "react";
+import { useEffect as useEffect7, useRef as useRef3, useState as useState8 } from "react";
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var OnboardRunner = ({
   authRepo: authRepo2,
@@ -13252,10 +13250,10 @@ var OnboardRunner = ({
   paymentMethodsResource,
   onComplete
 }) => {
-  const [phase, setPhase] = useState7("welcome");
-  const [authSkipped, setAuthSkipped] = useState7(false);
-  const [pmMissing, setPmMissing] = useState7(false);
-  const [error, setError] = useState7("");
+  const [phase, setPhase] = useState8("welcome");
+  const [authSkipped, setAuthSkipped] = useState8(false);
+  const [pmMissing, setPmMissing] = useState8(false);
+  const [error, setError] = useState8("");
   const enterResolver = useRef3(null);
   function waitForEnter() {
     return new Promise((resolve) => {
@@ -13276,7 +13274,7 @@ var OnboardRunner = ({
     }
   });
   const started = useRef3(false);
-  useEffect6(() => {
+  useEffect7(() => {
     if (started.current) return;
     started.current = true;
     const run = async () => {
@@ -13437,18 +13435,18 @@ var AddPaymentMethod = () => {
 // src/commands/payment-methods/list.tsx
 import { Box as Box12, Text as Text13 } from "ink";
 import Spinner3 from "ink-spinner";
-import { useEffect as useEffect7, useState as useState8 } from "react";
+import { useEffect as useEffect8, useState as useState9 } from "react";
 import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 var PaymentMethodsList = ({
   resource,
   onComplete
 }) => {
-  const [status, setStatus] = useState8(
+  const [status, setStatus] = useState9(
     "loading"
   );
-  const [methods, setMethods] = useState8([]);
-  const [error, setError] = useState8("");
-  useEffect7(() => {
+  const [methods, setMethods] = useState9([]);
+  const [error, setError] = useState9("");
+  useEffect8(() => {
     const fetch2 = async () => {
       try {
         const result = await resource.listPaymentMethods();
@@ -13621,7 +13619,7 @@ function parseTotalFlag(raw) {
 // src/commands/spend-request/create.tsx
 import { Box as Box14, Text as Text15 } from "ink";
 import Spinner5 from "ink-spinner";
-import { useCallback as useCallback2, useEffect as useEffect9, useState as useState9 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect10, useState as useState10 } from "react";
 
 // src/commands/spend-request/approval-waiting-view.tsx
 import { Box as Box13, Text as Text14 } from "ink";
@@ -13658,7 +13656,7 @@ var ApprovalWaitingView = ({
 
 // src/commands/spend-request/use-approval-polling.ts
 import { useInput as useInput7 } from "ink";
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect9 } from "react";
 function useApprovalPolling({
   status,
   setStatus,
@@ -13676,12 +13674,12 @@ function useApprovalPolling({
     },
     { isActive: isWaiting }
   );
-  useEffect8(() => {
+  useEffect9(() => {
     if (status !== "waiting") return;
     const timeout = setTimeout(() => setStatus("polling"), 1e3);
     return () => clearTimeout(timeout);
   }, [status, setStatus]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (status !== "polling" || !requestId) return;
     let cancelled = false;
     const poll = async () => {
@@ -13715,16 +13713,16 @@ function useApprovalPolling({
 }
 
 // src/commands/spend-request/create.tsx
-import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
 var CreateSpendRequest = ({
   repository,
   params,
   requestApproval = false,
   onComplete
 }) => {
-  const [status, setStatus] = useState9("creating");
-  const [request, setRequest] = useState9(null);
-  const [error, setError] = useState9("");
+  const [status, setStatus] = useState10("creating");
+  const [request, setRequest] = useState10(null);
+  const [error, setError] = useState10("");
   const approvalUrl = request?.approval_url ?? "";
   const onSuccess = useCallback2(
     (result) => setRequest(result),
@@ -13741,7 +13739,7 @@ var CreateSpendRequest = ({
     onSuccess,
     onError
   });
-  useEffect9(() => {
+  useEffect10(() => {
     const create = async () => {
       try {
         const result = await repository.createSpendRequest(params);
@@ -13805,7 +13803,7 @@ var CreateSpendRequest = ({
       /* @__PURE__ */ jsx20(AppDownloadQrCodes, {})
     ] });
   }
-  return /* @__PURE__ */ jsxs13(Fragment3, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment4, { children: [
     /* @__PURE__ */ jsx20(Box14, { children: /* @__PURE__ */ jsxs13(Text15, { color: "green", children: [
       "\u2713 Spend request created (ID: ",
       /* @__PURE__ */ jsx20(Text15, { bold: true, children: request?.id }),
@@ -13824,17 +13822,17 @@ var CreateSpendRequest = ({
 // src/commands/spend-request/request-approval.tsx
 import { Box as Box15, Text as Text16 } from "ink";
 import Spinner6 from "ink-spinner";
-import { useCallback as useCallback3, useEffect as useEffect10, useState as useState10 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect11, useState as useState11 } from "react";
 import { jsx as jsx21, jsxs as jsxs14 } from "react/jsx-runtime";
 var RequestApproval = ({
   repository,
   id,
   onComplete
 }) => {
-  const [status, setStatus] = useState10("requesting");
-  const [approvalUrl, setApprovalUrl] = useState10("");
-  const [result, setResult] = useState10(null);
-  const [error, setError] = useState10("");
+  const [status, setStatus] = useState11("requesting");
+  const [approvalUrl, setApprovalUrl] = useState11("");
+  const [result, setResult] = useState11(null);
+  const [error, setError] = useState11("");
   const onSuccess = useCallback3((r) => setResult(r), []);
   const onError = useCallback3((msg) => setError(msg), []);
   useApprovalPolling({
@@ -13847,7 +13845,7 @@ var RequestApproval = ({
     onSuccess,
     onError
   });
-  useEffect10(() => {
+  useEffect11(() => {
     const request = async () => {
       try {
         const res = await repository.requestApproval(id);
@@ -13911,7 +13909,7 @@ var RequestApproval = ({
 // src/commands/spend-request/retrieve.tsx
 import { Box as Box16, Text as Text17 } from "ink";
 import Spinner7 from "ink-spinner";
-import { useEffect as useEffect11, useRef as useRef4, useState as useState11 } from "react";
+import { useEffect as useEffect12, useRef as useRef4, useState as useState12 } from "react";
 import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
 var RetrieveSpendRequest = ({
   repository,
@@ -13920,20 +13918,20 @@ var RetrieveSpendRequest = ({
   include,
   onComplete
 }) => {
-  const [phase, setPhase] = useState11("fetching");
-  const [request, setRequest] = useState11(null);
-  const [error, setError] = useState11("");
-  const [elapsed, setElapsed] = useState11(0);
+  const [phase, setPhase] = useState12("fetching");
+  const [request, setRequest] = useState12(null);
+  const [error, setError] = useState12("");
+  const [elapsed, setElapsed] = useState12(0);
   const startTimeRef = useRef4(Date.now());
   const pollRef = useRef4(null);
   const timerRef = useRef4(null);
-  useEffect11(() => {
+  useEffect12(() => {
     return () => {
       if (pollRef.current) clearInterval(pollRef.current);
       if (timerRef.current) clearInterval(timerRef.current);
     };
   }, []);
-  useEffect11(() => {
+  useEffect12(() => {
     const fetch2 = async () => {
       try {
         const result = await repository.getSpendRequest(id, { include });
@@ -13962,7 +13960,7 @@ var RetrieveSpendRequest = ({
     };
     fetch2();
   }, [repository, id, include, onComplete]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (phase !== "polling") return;
     timerRef.current = setInterval(() => {
       const secs = Math.floor((Date.now() - startTimeRef.current) / 1e3);
@@ -14231,7 +14229,7 @@ var updateOptions = z6.object({
 // src/commands/spend-request/update.tsx
 import { Box as Box17, Text as Text18 } from "ink";
 import Spinner8 from "ink-spinner";
-import { useEffect as useEffect12, useState as useState12 } from "react";
+import { useEffect as useEffect13, useState as useState13 } from "react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 var UpdateSpendRequest = ({
   repository,
@@ -14239,12 +14237,12 @@ var UpdateSpendRequest = ({
   params,
   onComplete
 }) => {
-  const [status, setStatus] = useState12(
+  const [status, setStatus] = useState13(
     "loading"
   );
-  const [request, setRequest] = useState12(null);
-  const [error, setError] = useState12("");
-  useEffect12(() => {
+  const [request, setRequest] = useState13(null);
+  const [error, setError] = useState13("");
+  useEffect13(() => {
     const update = async () => {
       try {
         const result = await repository.updateSpendRequest(id, params);
@@ -14915,7 +14913,7 @@ var ResourceFactory = class {
 };
 
 // src/cli.tsx
-var cliVersion = "0.3.0";
+var cliVersion = "0.3.1";
 var buildNumber = "1";
 var cliName = "@stripe/link-cli";
 var defaultHeaders = {