@namiml/cli 3.4.11-dev.202609230307 → 3.4.11-dev.202609231629

package/dist/cli.js

@@ -15,6 +15,7 @@ import { use } from "./commands/use.js";
 import { config } from "./commands/config.js";
 import { onboarding } from "./commands/onboarding.js";
 import { devices } from "./commands/devices.js";
+import { placements } from "./commands/placements.js";
 const program = createProgram({
     shell: async (opts) => shell(opts, await buildContext(opts.host)),
     demo: () => { render(_jsx(App, {})); },
@@ -28,5 +29,6 @@ const program = createProgram({
     config: async (opts) => config(opts, await buildContext(opts.host)),
     onboarding: async (opts) => onboarding(opts, await buildContext(opts.host)),
     devices: async (opts) => devices(opts, await buildContext(opts.host)),
+    placements: async (opts) => placements(opts, await buildContext(opts.host)),
 });
 await program.parseAsync(process.argv);

package/dist/commands/placements.js

@@ -0,0 +1,56 @@
+import { corePlacementData, listPlacements } from "../placements/list.js";
+import { configureSdk } from "../sdk/configure.js";
+import { VerifyError } from "../sdk/verify.js";
+import { renderTable } from "./list-output.js";
+const NOT_CONFIGURED = "Nothing is configured yet. Run nami to pick an app and platform, or nami configure --app-platform-id <uuid> to name one directly.";
+/**
+ * The real source: configure the SDK against the persisted selection, then read
+ * `NamiCampaignManager.allCampaigns()`. Paywalls come along because a campaign
+ * rule names its paywall by id only (see `listPlacements`).
+ */
+const configuredSource = async (selection, host) => {
+    await configureSdk({
+        host,
+        appPlatformId: selection.appPlatformId,
+        device: { platformType: selection.platformType, id: selection.device?.id },
+    });
+    return corePlacementData();
+};
+/**
+ * `nami placements [--json]` — the placements the configured SDK can launch.
+ *
+ * Every `nami` run is a fresh process, so "the SDK is configured" means
+ * `config.json` names an app platform to configure against. Without one there is
+ * nothing to read, and the command says what to run instead. Returns the exit code.
+ */
+export async function placements(opts, ctx, deps = {}) {
+    const { config, warning } = await ctx.config.load();
+    if (warning)
+        ctx.err(warning);
+    if (!config.current) {
+        ctx.err(NOT_CONFIGURED);
+        return 2;
+    }
+    let rows;
+    try {
+        const { campaigns, paywalls } = await (deps.source ?? configuredSource)(config.current, ctx.host);
+        rows = listPlacements(campaigns, paywalls);
+    }
+    catch (error) {
+        if (error instanceof VerifyError) {
+            ctx.err(error.message);
+            return error.code === "invalid_id" ? 2 : 1;
+        }
+        throw error;
+    }
+    if (opts.json) {
+        ctx.out(JSON.stringify(rows, null, 2));
+        return 0;
+    }
+    if (rows.length === 0) {
+        ctx.out("No placements — add a campaign in the Control Center, then run nami placements again.");
+        return 0;
+    }
+    ctx.out(renderTable(rows.map((p) => ({ placement: p.label, kind: p.kind, campaign: p.campaignName ?? "", paywall: p.paywallName ?? "" })), ["placement", "kind", "campaign", "paywall"]));
+    return 0;
+}

package/dist/events/bus.js

@@ -0,0 +1,58 @@
+/**
+ * The recorder behind the Events pane.
+ *
+ * Everything the SDK emits while a placement is on screen lands here: paywall
+ * actions, flow events and handoffs. The bus is deliberately plain — no React,
+ * no `@namiml/sdk-core` import — so the adapters can feed it, the screens can
+ * read it and the tests can drive it without any of them dragging the others in.
+ */
+/**
+ * How many events a session keeps. A long paywall session emits thousands;
+ * the pane only ever shows the recent tail, so the oldest are dropped first.
+ */
+export const EVENT_BUFFER_MAX = 500;
+export class EventBus {
+    #now;
+    #buffer = [];
+    #subscribers = new Set();
+    #seq = 0;
+    constructor({ now = () => new Date() } = {}) {
+        this.#now = now;
+    }
+    /** Stamp, store and fan out one event. Never throws on a subscriber's behalf. */
+    record(input) {
+        this.#seq += 1;
+        const event = { ...input, seq: this.#seq, at: this.#now().toISOString() };
+        this.#buffer.push(event);
+        while (this.#buffer.length > EVENT_BUFFER_MAX)
+            this.#buffer.shift();
+        for (const subscriber of [...this.#subscribers]) {
+            try {
+                subscriber(event);
+            }
+            catch {
+                // A broken listener is not allowed to stop the others, drop the event or
+                // take down the render loop. There is no log sink in a TUI to report to.
+            }
+        }
+        return event;
+    }
+    /** A copy, oldest first — callers cannot reach into the buffer. */
+    all() {
+        return [...this.#buffer];
+    }
+    /** Empty the buffer. `seq` keeps climbing: it identifies events, it is not a count. */
+    clear() {
+        this.#buffer.length = 0;
+    }
+    subscribe(fn) {
+        this.#subscribers.add(fn);
+        return () => {
+            this.#subscribers.delete(fn);
+        };
+    }
+    /** One JSON object per line, carrying the SDK's own field names verbatim. */
+    toJsonl() {
+        return this.#buffer.map((event) => JSON.stringify(event)).join("\n");
+    }
+}

package/dist/placements/launch.js

@@ -0,0 +1,160 @@
+import { getPaywallDataFromLabel, NamiCampaignManager, NamiEventEmitter, NamiFlowManager, NamiPaywallAction, NamiPaywallManager, PAYWALL_ACTION_EVENT, } from "@namiml/sdk-core";
+import { compositeForPage, currentPageName } from "../render/composite.js";
+import { actionForOnTap, noEventReason } from "../render/action-map.js";
+/**
+ * Purchase outcomes. The CLI registers `TerminalPurchaseAdapter` and nothing
+ * else, so every one of these it ever sees was simulated — and a simulated
+ * PURCHASE_SUCCESS read as a real one is exactly the misreading to prevent.
+ */
+const SIMULATED_ACTIONS = new Set([
+    NamiPaywallAction.PURCHASE_SUCCESS,
+    NamiPaywallAction.PURCHASE_FAILED,
+    NamiPaywallAction.PURCHASE_CANCELLED,
+    NamiPaywallAction.PURCHASE_PENDING,
+    NamiPaywallAction.PURCHASE_UNKNOWN,
+    NamiPaywallAction.PURCHASE_DEFERRED,
+]);
+/** Keys a flow author may have named their event with; the first one present wins. */
+const FLOW_NAME_KEYS = ["name", "event", "eventName", "type"];
+/** A flow event has no schema, so its name is the author's own or a neutral stand-in. */
+function flowEventName(event) {
+    for (const key of FLOW_NAME_KEYS) {
+        const value = event[key];
+        if (typeof value === "string" && value.trim() !== "")
+            return value;
+    }
+    return "flow event";
+}
+/** Subscribes the three sources into the bus and launches the placement. */
+export async function startLaunch(label, bus, deps = {}) {
+    const flow = deps.flowManager ?? NamiFlowManager;
+    const paywalls = deps.paywallManager ?? NamiPaywallManager;
+    const emitter = deps.emitter ?? NamiEventEmitter.getInstance();
+    const unsubscribes = [
+        flow.registerEventHandler((event) => {
+            const payload = { ...event };
+            bus.record({ source: "flow", name: flowEventName(payload), payload });
+        }),
+        flow.registerStepHandoff((tag, data, complete) => {
+            bus.record({
+                source: "handoff",
+                name: tag,
+                payload: {
+                    tag,
+                    data,
+                    outcome: "done",
+                    handler: "NamiFlowManager.registerStepHandoff",
+                    note: "the CLI completed this handoff so the flow could continue — your app decides the real outcome",
+                },
+            });
+            // A flow waits on `complete`; leaving it uncalled would wedge the launch.
+            // Handlers written against the pre-outcome signature get no `complete`.
+            if (typeof complete === "function")
+                complete();
+        }),
+        paywalls.registerDeeplinkActionHandler((url) => {
+            bus.record({
+                source: "paywall",
+                name: NamiPaywallAction.DEEPLINK,
+                payload: {
+                    deeplinkUrl: url,
+                    handler: "NamiPaywallManager.registerDeeplinkActionHandler",
+                    note: "this arrived on the deeplink handler, not the paywall action event — namiDeeplink never reports as an action",
+                },
+            });
+        }),
+    ];
+    const dispose = () => {
+        for (const unsubscribe of unsubscribes) {
+            try {
+                unsubscribe();
+            }
+            catch {
+                // One broken unregister is not allowed to strand the others.
+            }
+        }
+        unsubscribes.length = 0;
+    };
+    const record = (event) => {
+        const payload = { ...event };
+        delete payload.action;
+        const name = String(event.action);
+        bus.record({ source: "paywall", name, payload, ...(SIMULATED_ACTIONS.has(name) ? { simulated: true } : {}) });
+    };
+    try {
+        if (deps.launch)
+            deps.launch(label, record);
+        else
+            NamiCampaignManager.launch(label, undefined, undefined, undefined, record);
+    }
+    catch (error) {
+        dispose();
+        throw error;
+    }
+    // `sdk/web`'s PaywallScreen reports SHOW_PAYWALL the moment the paywall
+    // renders (`postPaywallScreenData`). The CLI is the renderer here, so it owes
+    // the same event — and it goes out on the shared emitter, which is where
+    // `launch` just added the action callback.
+    emitter.emit(PAYWALL_ACTION_EVENT, { action: NamiPaywallAction.SHOW_PAYWALL, campaignLabel: label });
+    return { dispose };
+}
+/** Nothing to outline: a flow placement, or a paywall core could not resolve. */
+const NO_PAGE = { pageName: "", sections: [], truncated: 0, unresolved: true };
+/**
+ * The page outline for a placement, from core's own lookup.
+ *
+ * `getPaywallDataFromLabel` is the same lookup `NamiCampaignManager.launch`
+ * performs, so the pane outlines the page the launch actually served. A flow
+ * placement carries no paywall here — its screens report as flow events.
+ */
+/**
+ * The outline for a placement, or an `unresolved` composite.
+ *
+ * A placement only resolves a paywall when that paywall was in the set the SDK
+ * fetched for the **configured device's form factor**. Verified against staging
+ * Test Nami: as a host desktop only 12 paywalls come back and this label
+ * resolves nothing, while as an iPhone 150 come back and it resolves — and even
+ * then 12 of 103 paywall placements stay unresolved because they are authored
+ * for other form factors. So an empty outline is usually a device mismatch, not
+ * an authoring mistake, and the screen has to say which.
+ */
+export function compositeForPlacement(label) {
+    try {
+        const { paywall } = getPaywallDataFromLabel(label, "label");
+        if (!paywall)
+            return NO_PAGE;
+        return compositeForPage(paywall, currentPageName(paywall));
+    }
+    catch {
+        // A placement the SDK cannot resolve is an empty outline, never a crash:
+        // the events pane is still the point of the screen.
+        return NO_PAGE;
+    }
+}
+/**
+ * Press one node the way the web SDK does: map its `onTap`, then report the
+ * action on the shared emitter so it reaches the developer's own
+ * `actionCallback` on exactly the path a real app uses.
+ *
+ * A control the SDK maps to no action reports nothing and says why — inventing
+ * an event the SDK would never have sent is the one thing this screen must not do.
+ */
+export function pressNode(node, deps = {}) {
+    const fn = node.onTap?.function;
+    if (fn === undefined)
+        return { reason: "This part of the page is not a control — there is nothing to press." };
+    const mapped = actionForOnTap(node.onTap);
+    if (!mapped)
+        return { reason: noEventReason(fn) };
+    if (mapped.requiresSku) {
+        return {
+            reason: `${fn} needs a SKU in play, and the CLI has no product selected — the SDK sends nothing without one.`,
+        };
+    }
+    const emitter = deps.emitter ?? NamiEventEmitter.getInstance();
+    emitter.emit(PAYWALL_ACTION_EVENT, {
+        action: mapped.action,
+        ...(mapped.componentChange ? { componentChange: mapped.componentChange } : {}),
+    });
+    return { action: mapped.action };
+}

package/dist/placements/list.js

@@ -0,0 +1,52 @@
+import { isNamiFlowCampaign, NamiCampaignManager, NamiPaywallManager } from "@namiml/sdk-core";
+import { placementLabel } from "../sdk/summary.js";
+/**
+ * One row per campaign rule, de-duplicated by label and sorted, mirroring
+ * `summarizePlacements()` — both take the label from `placementLabel()`.
+ *
+ * `kind` comes from the campaign's own `flow` field, which core's exported
+ * `isNamiFlowCampaign()` guard is defined on: a rule that carries a flow object
+ * serves a flow, everything else serves a paywall. Nothing is inferred.
+ *
+ * `paywallName` needs `paywalls` because a rule carries only the paywall's **id**
+ * (`NamiCampaign.paywall`), never its name; without the list it stays unset.
+ */
+export function listPlacements(campaigns, paywalls) {
+    if (!Array.isArray(campaigns))
+        return [];
+    const names = new Map();
+    for (const p of paywalls ?? [])
+        if (p?.id && p.name)
+            names.set(p.id, p.name);
+    const byLabel = new Map();
+    for (const campaign of campaigns) {
+        const label = placementLabel(campaign);
+        // First rule wins: `allCampaigns()` returns API rules before initial-config ones.
+        if (!label || byLabel.has(label))
+            continue;
+        const paywallName = typeof campaign.paywall === "string" ? names.get(campaign.paywall) : undefined;
+        byLabel.set(label, {
+            label,
+            kind: isNamiFlowCampaign(campaign) ? "flow" : "paywall",
+            ...(campaign.name?.trim() ? { campaignName: campaign.name.trim() } : {}),
+            ...(campaign.segment === undefined ? {} : { segmentId: campaign.segment }),
+            ...(paywallName ? { paywallName } : {}),
+        });
+    }
+    return [...byLabel.values()].sort((a, b) => a.label.localeCompare(b.label));
+}
+/**
+ * What the configured core currently holds: its campaign rules and its paywalls.
+ *
+ * One pair, read in one place, so `nami placements` and the Shell's launch
+ * picker can never end up listing different things. Paywalls come along because
+ * a rule names its paywall by id only (see `listPlacements`).
+ */
+export function corePlacementData() {
+    return { campaigns: NamiCampaignManager.allCampaigns(), paywalls: NamiPaywallManager.allPaywalls() };
+}
+/** `corePlacementData()` as rows. Throws if the SDK is not configured in this process. */
+export function corePlacements() {
+    const { campaigns, paywalls } = corePlacementData();
+    return listPlacements(campaigns, paywalls);
+}

package/dist/program.js

@@ -79,6 +79,14 @@ export function createProgram(h, options = {}) {
         .action(async (_opts, cmd) => {
         process.exitCode = await h.configure(cmd.optsWithGlobals());
     });
+    program
+        .command("placements")
+        .description("List the placements the configured SDK can launch. Needs a current selection (run nami or nami configure first).")
+        .option(HOST_FLAG, HOST_HELP)
+        .option("--json", "machine-readable output")
+        .action(async (_opts, cmd) => {
+        process.exitCode = await h.placements(cmd.optsWithGlobals());
+    });
     program
         .command("use")
         .description("Switch the current organization, app, app platform or device (headless).")

package/dist/render/action-map.js

@@ -0,0 +1,101 @@
+import { NamiPaywallAction } from "@namiml/sdk-core";
+/**
+ * The one mapping from a component's `onTap.function` to the paywall action the
+ * SDK reports — the CLI's copy of what the web SDK does.
+ *
+ * The strings below are redeclared from `sdk/web/src/components/utils/eventConst.ts`
+ * (`NAMI_CLOSE_PAYWALL = "namiClosePaywall"` and friends); the CLI must not
+ * import from `sdk/web`, so that file is the source and this is the copy.
+ *
+ * The mapping itself is `handleAction` in `sdk/web/src/components/utils/actionTap.ts`.
+ * It initialises `action = UNKNOWN`, runs one switch, and emits on
+ * `PAYWALL_ACTION_EVENT` **only when the switch moved `action` off `UNKNOWN`**.
+ * So the table here is not "every function web handles" — it is every function
+ * that leaves web with an action to emit:
+ *
+ * | onTap.function            | NamiPaywallAction       |
+ * |---------------------------|-------------------------|
+ * | namiClosePaywall          | CLOSE_PAYWALL           |
+ * | namiRestorePurchases      | RESTORE_PURCHASES       |
+ * | namiSignIn                | SIGN_IN                 |
+ * | namiBuySKU                | BUY_SKU (with a SKU)    |
+ * | namiSelectSKU             | SELECT_SKU (with a SKU) |
+ * | namiPurchaseSelectedSKU   | PURCHASE_SELECTED_SKU (with a SKU) |
+ * | namiNavigateToScreen      | PAGE_CHANGE             |
+ * | setState                  | TOGGLE_CHANGE           |
+ *
+ * Everything else deliberately emits nothing: `namiDeeplink` reports through
+ * `NamiPaywallManager.registerDeeplinkActionHandler` instead, the four video
+ * functions go to web's VideoService (which emits its own video events),
+ * `namiReloadProducts` reloads store products, `""` is web's `UNSUPPORTED`, and
+ * an unrecognised function falls through web's `default:` branch untouched.
+ */
+/** `onTap.function` values, from `sdk/web/src/components/utils/eventConst.ts`. */
+const NAMI_CLOSE_PAYWALL = "namiClosePaywall";
+const NAMI_RESTORE_PURCHASES = "namiRestorePurchases";
+const NAMI_SIGN_IN = "namiSignIn";
+const NAMI_BUY_SKU = "namiBuySKU";
+const SET_STATE = "setState";
+const NAMI_SELECT_SKU = "namiSelectSKU";
+const NAMI_PURCHASE_SELECTED_SKU = "namiPurchaseSelectedSKU";
+const NAMI_DEEP_LINK = "namiDeeplink";
+const NAMI_NAVIGATE_TO_SCREEN = "namiNavigateToScreen";
+const NAMI_RELOAD_PRODUCTS = "namiReloadProducts";
+const UNSUPPORTED = "";
+const NAMI_PLAY_VIDEO = "namiPlayVideo";
+const NAMI_PAUSE_VIDEO = "namiPauseVideo";
+const NAMI_MUTE_VIDEO = "namiMuteVideo";
+const NAMI_UNMUTE_VIDEO = "namiUnmuteVideo";
+/** The actions web guards behind `if (sku)`. */
+const SKU_ACTIONS = {
+    [NAMI_BUY_SKU]: NamiPaywallAction.BUY_SKU,
+    [NAMI_SELECT_SKU]: NamiPaywallAction.SELECT_SKU,
+    [NAMI_PURCHASE_SELECTED_SKU]: NamiPaywallAction.PURCHASE_SELECTED_SKU,
+};
+/** The actions web emits unconditionally. */
+const PLAIN_ACTIONS = {
+    [NAMI_CLOSE_PAYWALL]: NamiPaywallAction.CLOSE_PAYWALL,
+    [NAMI_RESTORE_PURCHASES]: NamiPaywallAction.RESTORE_PURCHASES,
+    [NAMI_SIGN_IN]: NamiPaywallAction.SIGN_IN,
+    [SET_STATE]: NamiPaywallAction.TOGGLE_CHANGE,
+};
+/** null when this onTap emits no paywall action event — see the table in the header comment. */
+export function actionForOnTap(onTap) {
+    const fn = onTap?.function;
+    if (fn === undefined)
+        return null;
+    const withSku = SKU_ACTIONS[fn];
+    if (withSku)
+        return { action: withSku, requiresSku: true };
+    if (fn === NAMI_NAVIGATE_TO_SCREEN) {
+        const screen = onTap?.parameters?.screen;
+        return {
+            action: NamiPaywallAction.PAGE_CHANGE,
+            // Web sets `componentChange = { name: onTap.parameters.screen }`.
+            ...(screen === undefined ? {} : { componentChange: { name: screen } }),
+            requiresSku: false,
+        };
+    }
+    const plain = PLAIN_ACTIONS[fn];
+    return plain ? { action: plain, requiresSku: false } : null;
+}
+/** Why a press produced no event, for the "pressed, no event" note in the UI. */
+export function noEventReason(fn) {
+    switch (fn) {
+        case NAMI_DEEP_LINK:
+            return "namiDeeplink reports through NamiPaywallManager.registerDeeplinkActionHandler, not the paywall action event — watch for a deeplink row instead.";
+        case NAMI_RELOAD_PRODUCTS:
+            return "namiReloadProducts re-fetches store products; the SDK sends no paywall action for it.";
+        case NAMI_PLAY_VIDEO:
+        case NAMI_PAUSE_VIDEO:
+        case NAMI_MUTE_VIDEO:
+        case NAMI_UNMUTE_VIDEO:
+            return `${fn} is handled by the platform's video service, which reports its own video events; the CLI has no video to play.`;
+        case UNSUPPORTED:
+            return "This control carries no action — the paywall marked it unsupported, so nothing is sent.";
+        default:
+            return actionForOnTap({ function: fn })
+                ? undefined
+                : `${fn} is not one of the actions the SDK maps to a paywall event, so pressing it sends nothing.`;
+    }
+}

package/dist/render/composite.js

@@ -0,0 +1,161 @@
+/** Nodes one composite may carry; the rest are counted into `truncated`. */
+export const COMPOSITE_MAX_NODES = 200;
+/** Page keys in the order a page reads, paired with the section they become. */
+const SECTIONS = [
+    { name: "header", key: "header" },
+    { name: "content", key: "contentContainer" },
+    { name: "footer", key: "footer" },
+    { name: "background", key: "backgroundContainer" },
+];
+/** Child arrays, in the order the SDKs render them. */
+const CHILD_LIST_KEYS = [
+    "components",
+    "productFeaturedComponents",
+    "productBaseComponents",
+    "pausedComponents",
+    "playingComponents",
+    "mutedComponents",
+    "volumeComponents",
+];
+/** Single-child slots. */
+const CHILD_NODE_KEYS = ["collapseHeader", "groupHeaderTemplate"];
+/**
+ * Walk one page of a paywall template into a flat, depth-tagged outline.
+ *
+ * The walk follows the TV full-page announcement contract documented on
+ * `TPages.screenreaderText`: source order throughout, containers recurse,
+ * `text` / `text-list` carry their strings. It differs in two ways, because a
+ * pane has to show structure rather than speak it: media components render a
+ * placeholder naming the media instead of being skipped, and a `hidden: true`
+ * node (and its subtree) is emitted flagged rather than dropped, so the pane
+ * can dim it. A hidden node is never focusable.
+ *
+ * This is a structural outline, not a layout engine — no positions, sizes or
+ * colours are computed.
+ */
+export function compositeForPage(paywall, pageName) {
+    const page = pagesOf(paywall).find((candidate) => candidate.name === pageName);
+    if (!page)
+        return { pageName, sections: [], truncated: 0 };
+    const walked = SECTIONS.map(({ name, key }) => {
+        const nodes = [];
+        for (const root of rootsOf(page[key]))
+            walk(root, 0, false, nodes);
+        return { name, nodes };
+    });
+    const sections = [];
+    let remaining = COMPOSITE_MAX_NODES;
+    let truncated = 0;
+    for (const section of walked) {
+        const kept = section.nodes.slice(0, Math.max(remaining, 0));
+        truncated += section.nodes.length - kept.length;
+        remaining -= kept.length;
+        if (kept.length > 0)
+            sections.push({ name: section.name, nodes: kept });
+    }
+    return { pageName: typeof page.name === "string" ? page.name : pageName, sections, truncated };
+}
+/** The page the live state says is showing, falling back to template.initialState.currentPage. */
+export function currentPageName(paywall, state) {
+    const live = text(state?.currentPage);
+    if (live)
+        return live;
+    const initial = text(paywall?.template?.initialState?.currentPage);
+    if (initial)
+        return initial;
+    return text(pagesOf(paywall)[0]?.name) ?? "";
+}
+function walk(node, depth, inheritedHidden, out) {
+    const hidden = inheritedHidden || node.hidden === true;
+    const onTap = userAction(node.onTap);
+    const entry = { depth, kind: text(node.component) ?? "unknown" };
+    const content = labelFor(node, onTap !== undefined);
+    if (content)
+        entry.content = content;
+    if (onTap && !hidden)
+        entry.onTap = onTap;
+    const id = text(node.id);
+    if (id)
+        entry.id = id;
+    const testId = text(node.testId);
+    if (testId)
+        entry.testId = testId;
+    if (hidden)
+        entry.hidden = true;
+    out.push(entry);
+    for (const key of CHILD_LIST_KEYS) {
+        for (const child of rootsOf(node[key]))
+            walk(child, depth + 1, hidden, out);
+    }
+    for (const key of CHILD_NODE_KEYS) {
+        const child = node[key];
+        if (isNode(child))
+            walk(child, depth + 1, hidden, out);
+    }
+}
+/** A focusable node is labelled by its screenreaderText when it has one. */
+function labelFor(node, focusable) {
+    if (focusable) {
+        const spoken = text(node.screenreaderText);
+        if (spoken)
+            return spoken;
+    }
+    return contentFor(node);
+}
+function contentFor(node) {
+    switch (text(node.component)) {
+        case "text-list":
+            return lines(node.texts);
+        case "image":
+        case "svgImage":
+            return `[image: ${mediaName(node)}]`;
+        case "videoUrl":
+            return `[video: ${mediaName(node)}]`;
+        case "symbol":
+            return `[icon: ${text(node.name) ?? "symbol"}]`;
+        case "productContainer":
+        case "flexProductContainer":
+            return `[products: ${text(node.subsetGroup) ?? text(node.products) ?? "all"}]`;
+        default:
+            return text(node.text);
+    }
+}
+/** The media's own name: its alt text, else the last segment of its url. */
+function mediaName(node) {
+    const alt = text(node.alt);
+    if (alt)
+        return alt;
+    const url = text(node.url);
+    if (!url)
+        return "media";
+    const path = url.split(/[?#]/)[0];
+    const last = path.split("/").filter(Boolean).pop();
+    return last ?? url;
+}
+function lines(value) {
+    if (!Array.isArray(value))
+        return undefined;
+    const items = value.map(text).filter((item) => item !== undefined);
+    return items.length > 0 ? items.join(" · ") : undefined;
+}
+function userAction(value) {
+    if (!isNode(value))
+        return undefined;
+    return typeof value.function === "string" ? value : undefined;
+}
+function pagesOf(paywall) {
+    const pages = paywall?.template?.pages;
+    return Array.isArray(pages) ? pages.filter(isNode) : [];
+}
+/** A section's roots: an array of components, a single container, or nothing. */
+function rootsOf(value) {
+    if (Array.isArray(value))
+        return value.filter(isNode);
+    return isNode(value) ? [value] : [];
+}
+function isNode(value) {
+    return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function text(value) {
+    return typeof value === "string" && value.trim() !== "" ? value : undefined;
+}

package/dist/screens/EventsPane.js

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { palette } from "../theme.js";
+/**
+ * The known `NamiPaywallEvent` fields, in the order the pane shows them.
+ * Copied from `sdk/core/src/types/externals/paywall.ts` — the whole point of
+ * the expanded view is that a field the SDK did **not** send is still visible,
+ * so this list has to be the SDK's, not whatever happened to arrive.
+ */
+export const PAYWALL_EVENT_KEYS = [
+    "sku",
+    "campaignId",
+    "campaignName",
+    "campaignType",
+    "campaignLabel",
+    "campaignUrl",
+    "paywallId",
+    "paywallName",
+    "componentChange",
+    "segmentId",
+    "externalSegmentId",
+    "deeplinkUrl",
+    "purchaseError",
+    "purchases",
+    "timeSpentOnPaywall",
+    "videoMetaData",
+    "purchaseChannel",
+];
+/** A handoff carries these three; a flow event has no schema at all. */
+export const HANDOFF_KEYS = ["tag", "data", "outcome"];
+/** Stands in for a field the SDK did not send. */
+const ABSENT = "—";
+const SOURCE_COLOR = {
+    paywall: palette.secondaryBlue,
+    flow: palette.aqua,
+    handoff: palette.primaryBlue,
+};
+const pad2 = (n) => String(n).padStart(2, "0");
+/** `hh:mm:ss` in the developer's own zone — they are watching this live. */
+function formatTime(at) {
+    const d = new Date(at);
+    if (Number.isNaN(d.getTime()))
+        return "--:--:--";
+    return `${pad2(d.getHours())}:${pad2(d.getMinutes())}:${pad2(d.getSeconds())}`;
+}
+/** `null` means "the SDK did not send this", which the caller renders as a dash. */
+function formatValue(value) {
+    if (value === undefined || value === null)
+        return null;
+    if (typeof value === "string")
+        return value === "" ? '""' : value;
+    if (typeof value === "number" || typeof value === "boolean")
+        return String(value);
+    try {
+        return JSON.stringify(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function clip(text, max) {
+    if (max <= 1 || text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}…`;
+}
+/** Read a nested string-ish field, e.g. an object's `name` or `id`. */
+function nameOf(value) {
+    if (typeof value === "string")
+        return value;
+    if (value && typeof value === "object") {
+        const record = value;
+        for (const key of ["skuId", "name", "id", "displayName"]) {
+            const inner = record[key];
+            if (typeof inner === "string" && inner !== "")
+                return inner;
+        }
+    }
+    return null;
+}
+/**
+ * The one field worth putting on a collapsed row. Never guesses at a schema for
+ * a flow event: it just shows that event's first author-defined key.
+ */
+export function salientField(event) {
+    const { payload } = event;
+    if (event.source === "paywall") {
+        for (const key of ["sku", "purchaseError", "deeplinkUrl", "componentChange", "paywallName", "campaignName"]) {
+            const value = nameOf(payload[key]) ?? formatValue(payload[key]);
+            if (value)
+                return value;
+        }
+        return null;
+    }
+    if (event.source === "handoff") {
+        return formatValue(payload.tag);
+    }
+    const [firstKey] = Object.keys(payload);
+    if (firstKey === undefined)
+        return null;
+    const value = formatValue(payload[firstKey]);
+    return value === null ? firstKey : `${firstKey}=${value}`;
+}
+/** The known keys for a source, then anything extra the payload carried. */
+function fieldsFor(event) {
+    const known = event.source === "paywall" ? PAYWALL_EVENT_KEYS : event.source === "handoff" ? HANDOFF_KEYS : [];
+    const extras = Object.keys(event.payload).filter((key) => !known.includes(key));
+    return [...known, ...extras].map((key) => [key, formatValue(event.payload[key])]);
+}
+function EventRow({ event, selected, width }) {
+    const head = `${formatTime(event.at)} · ${event.source} · ${event.name}`;
+    // "simulated" is part of the head: it must never be the thing that gets dropped.
+    const mark = event.simulated ? " · simulated" : "";
+    const salient = salientField(event);
+    const room = width - 2 - head.length - mark.length;
+    // A narrow row drops the salient column rather than clipping the name into ambiguity.
+    const tail = salient !== null && room >= salient.length + 3 ? ` · ${salient}` : "";
+    return (_jsxs(Text, { children: [_jsx(Text, { color: palette.aqua, children: selected ? "›" : " " }), " ", _jsx(Text, { dimColor: true, children: formatTime(event.at) }), " · ", _jsx(Text, { color: SOURCE_COLOR[event.source], children: event.source }), " · ", _jsx(Text, { bold: selected, children: event.name }), event.simulated && _jsx(Text, { color: palette.coral, children: " \u00B7 simulated" }), tail && _jsx(Text, { dimColor: true, children: tail })] }));
+}
+function ExpandedEvent({ event, width }) {
+    const fields = fieldsFor(event);
+    const labelWidth = fields.reduce((longest, [key]) => Math.max(longest, key.length), 0);
+    const valueWidth = Math.max(12, width - labelWidth - 4);
+    return (_jsxs(Box, { flexDirection: "column", marginTop: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: palette.aqua, children: event.name }), _jsxs(Text, { dimColor: true, children: [" \u00B7 seq ", event.seq, " \u00B7 ", formatTime(event.at), " \u00B7 ", event.source] })] }), event.simulated && (_jsx(Text, { color: palette.coral, children: "simulated \u00B7 the CLI's purchase adapter produced this, not a real store" })), fields.length === 0 ? (_jsx(Text, { dimColor: true, children: "this event carried no fields" })) : (fields.map(([key, value]) => (_jsxs(Text, { children: [_jsx(Text, { dimColor: true, children: key.padEnd(labelWidth) }), " ", value === null ? _jsx(Text, { dimColor: true, children: ABSENT }) : _jsx(Text, { children: clip(value, valueWidth) })] }, key))))] }));
+}
+/**
+ * What the SDK just sent, as it sent it.
+ *
+ * Pure: it renders the props it is handed and nothing else. A field the SDK
+ * omitted still gets a row with a dash, because "did my paywall send this?" is
+ * the question this pane exists to answer, and an omitted row cannot answer it.
+ */
+export function EventsPane({ events, selectedSeq, paused, expanded, width }) {
+    const selected = selectedSeq === null ? undefined : events.find((event) => event.seq === selectedSeq);
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Events" }), " ", _jsx(Text, { bold: true, children: events.length }), paused && _jsx(Text, { color: palette.coral, children: " \u00B7 paused" })] }), events.length === 0 ? (_jsx(Text, { dimColor: true, children: "No events yet \u2014 interact with the placement and what it sends shows up here." })) : (events.map((event) => (_jsx(EventRow, { event: event, selected: event.seq === selectedSeq, width: width }, event.seq)))), expanded && selected && _jsx(ExpandedEvent, { event: selected, width: width })] }));
+}

package/dist/screens/LaunchScreen.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { palette } from "../theme.js";
+import { EventsPane } from "./EventsPane.js";
+/**
+ * A launched placement: the page outline on one side, what the SDK reported on
+ * the other.
+ *
+ * Pure presentation plus input — it renders the props it is handed and turns
+ * keys into callbacks. The subscriptions, the bus and the focus index live in
+ * `src/placements/launch.ts` and `Shell`, so this file can be rendered from a
+ * test with nothing configured.
+ */
+/** At or above this many columns the two panes sit side by side; below it they stack. */
+export const SIDE_BY_SIDE_MIN_WIDTH = 100;
+/** Columns between the two panes when they sit side by side. */
+const GUTTER = 2;
+/**
+ * What the arrows move between: a node the paywall gave an action to, that is
+ * actually on screen. The walker already drops `onTap` from a hidden subtree;
+ * the `hidden` check here means a change there can never make an invisible
+ * control pressable.
+ */
+export function focusableNodes(composite) {
+    return composite.sections.flatMap((section) => section.nodes).filter((node) => node.onTap && !node.hidden);
+}
+function clip(text, max) {
+    if (max <= 1 || text.length <= max)
+        return text;
+    return `${text.slice(0, max - 1)}…`;
+}
+/** One outline row: `kind content → action`, indented by depth. */
+function nodeLine(node) {
+    const parts = [node.kind];
+    if (node.content)
+        parts.push(node.content);
+    if (node.onTap)
+        parts.push(`→ ${node.onTap.function}`);
+    // A word, never colour alone — the dim is a second signal, not the only one.
+    if (node.hidden)
+        parts.push("· hidden");
+    return `${"  ".repeat(node.depth)}${parts.join(" ")}`;
+}
+function CompositePane({ composite, placement, focused, width, deviceName }) {
+    const empty = composite.sections.length === 0;
+    return (_jsxs(Box, { flexDirection: "column", width: width, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: "Page" }), " ", _jsx(Text, { children: composite.pageName || "—" })] }), empty && placement.kind === "flow" && (_jsx(Text, { dimColor: true, children: "A flow has no one page to outline \u2014 its screens and steps report as flow events in the pane." })), empty && placement.kind !== "flow" && composite.unresolved && (_jsxs(Text, { dimColor: true, children: ["No paywall for this placement on ", deviceName ? `a ${deviceName}` : "the configured device", " \u2014 it is probably authored for another form factor. Switch device (d on the home screen, or --device) and launch again."] })), empty && placement.kind !== "flow" && !composite.unresolved && (_jsx(Text, { dimColor: true, children: "Nothing to outline on this page \u2014 the paywall resolved but served no components." })), composite.sections.map((section) => (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: section.name }), section.nodes.map((node, index) => {
+                        const isFocused = node === focused;
+                        return (_jsxs(Text, { dimColor: node.hidden, children: [_jsx(Text, { color: palette.aqua, children: isFocused ? "›" : " " }), " ", _jsx(Text, { bold: isFocused, children: clip(nodeLine(node), Math.max(width - 2, 1)) })] }, `${section.name}-${index}`));
+                    })] }, section.name))), composite.truncated > 0 && _jsxs(Text, { dimColor: true, children: ["+", composite.truncated, " more"] })] }));
+}
+export function LaunchScreen({ placement, composite, events, width, paused, expanded, selectedSeq, focusIndex, onPress, onMove, onTogglePause, onClear, onToggleExpand, onBack, notice, deviceName }) {
+    const focusable = focusableNodes(composite);
+    const focused = focusable[focusIndex];
+    useInput((input, key) => {
+        if (key.upArrow || key.leftArrow)
+            return onMove(-1);
+        if (key.downArrow || key.rightArrow)
+            return onMove(1);
+        if (key.return)
+            return void (focused && onPress(focused));
+        if (input === "p")
+            return onTogglePause();
+        if (input === "c")
+            return onClear();
+        if (input === "x")
+            return onToggleExpand();
+        if (input === "q" || key.escape)
+            return onBack();
+    });
+    const sideBySide = width >= SIDE_BY_SIDE_MIN_WIDTH;
+    const paneWidth = sideBySide ? Math.floor(width / 2) - 1 : width;
+    const eventsWidth = sideBySide ? width - paneWidth - GUTTER : width;
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, children: placement.label }), " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", placement.kind, "]"] }), placement.campaignName && _jsxs(Text, { dimColor: true, children: [" \u00B7 ", placement.campaignName] })] }), _jsxs(Box, { flexDirection: sideBySide ? "row" : "column", marginTop: 1, children: [_jsx(CompositePane, { composite: composite, placement: placement, focused: focused, width: paneWidth, deviceName: deviceName }), _jsx(Box, { flexDirection: "column", marginLeft: sideBySide ? GUTTER : 0, marginTop: sideBySide ? 0 : 1, children: _jsx(EventsPane, { events: events, selectedSeq: selectedSeq ?? null, paused: paused, expanded: expanded, width: eventsWidth }) })] }), notice && (_jsx(Box, { marginTop: 1, children: _jsx(Text, { color: palette.coral, children: notice }) })), _jsx(Text, { dimColor: true, children: "\u2191\u2193 move \u00B7 enter press \u00B7 p pause \u00B7 c clear \u00B7 x expand \u00B7 q back" })] }));
+}

package/dist/screens/PickPlacement.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text } from "ink";
+import { SelectList } from "../components/SelectList.js";
+/** Pure picker over what `listPlacements()` found — it never fetches. */
+export function PickPlacement({ placements, onSelect, onCancel }) {
+    if (placements.length === 0) {
+        return (_jsxs(Box, { flexDirection: "column", children: [_jsx(Text, { bold: true, children: "No placements yet." }), _jsx(Text, { children: "Add a campaign in the Control Center, then run nami again." })] }));
+    }
+    return (_jsx(SelectList, { title: "Placements", items: placements.map((p) => ({ key: p.label, label: p.label, badge: p.kind, hint: p.campaignName })), onSelect: (key) => { const placement = placements.find((p) => p.label === key); if (placement)
+            onSelect(placement); }, onCancel: onCancel }));
+}

package/dist/screens/Shell.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useState } from "react";
-import { Box, Text, useApp, useInput } from "ink";
+import { useEffect, useRef, useState } from "react";
+import { Box, Text, useApp, useInput, useStdout } from "ink";
 import { LoginFlow } from "./LoginFlow.js";
 import { PickApp } from "./PickApp.js";
 import { PickPlatform } from "./PickPlatform.js";
@@ -10,6 +10,12 @@ import { SwitchScreen } from "./SwitchScreen.js";
 import { WelcomeScreen } from "./WelcomeScreen.js";
 import { NewToNami } from "./NewToNami.js";
 import { SuccessScreen } from "./SuccessScreen.js";
+import { PickPlacement } from "./PickPlacement.js";
+import { LaunchScreen, focusableNodes } from "./LaunchScreen.js";
+import { corePlacements } from "../placements/list.js";
+import { compositeForPlacement, pressNode, startLaunch as startLaunchFn } from "../placements/launch.js";
+import { EventBus } from "../events/bus.js";
+import { terminalColumns } from "../utils/terminal.js";
 import { deviceById, presetsFor, resolveDevice, toSelection } from "../devices/presets.js";
 import { SelectionHeader } from "./SelectionHeader.js";
 import { Thinking } from "../components/Thinking.js";
@@ -31,8 +37,9 @@ import TextInput from "ink-text-input";
  * pasted App Platform ID. Every path funnels back through `configure`, so the
  * SDK is re-configured in place and each platform keeps its own storage file.
  */
-export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitWhenDone = true, phase, hostWasExplicit = false, verify, configure }) {
+export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitWhenDone = true, phase, hostWasExplicit = false, verify, configure, placementsSource, compositeSource, startLaunch }) {
     const { exit } = useApp();
+    const { stdout } = useStdout();
     const [state, setState] = useState({ kind: "boot" });
     const [orgName, setOrgName] = useState(null);
     const [orgId, setOrgId] = useState(null);
@@ -41,6 +48,16 @@ export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitW
     const [pasted, setPasted] = useState("");
     // The paste route may retry on another host after a 404, without re-typing the id.
     const [pasteHost, setPasteHost] = useState(ctx.host);
+    // One bus for the whole session. A launch clears it, so a run always starts
+    // empty, but `seq` keeps climbing — it identifies events, it is not a count.
+    const [bus] = useState(() => new EventBus());
+    const [events, setEvents] = useState([]);
+    const [paused, setPaused] = useState(false);
+    const [expanded, setExpanded] = useState(false);
+    const [focusIndex, setFocusIndex] = useState(0);
+    const [notice, setNotice] = useState(undefined);
+    // The bus subscriber runs outside React's render, so pause is read from a ref.
+    const pausedRef = useRef(false);
     const finish = (code) => {
         onExit?.(code);
         if (exitWhenDone)
@@ -146,6 +163,68 @@ export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitW
         const named = (await findAppPlatformById(ctx.session, id)) ?? pastedStandIn(id);
         chooseDevice(named.app, named.platform);
     };
+    /** `l`: the placements this configured platform can launch. */
+    const openPlacements = (home) => {
+        try {
+            setState({ kind: "pick-placement", home, placements: (placementsSource ?? corePlacements)() });
+        }
+        catch (error) {
+            handleError(error);
+        }
+    };
+    /** Enter on a placement: reset the pane, outline the page, then subscribe and launch. */
+    const openLaunch = (home, placement) => {
+        bus.clear();
+        setEvents([]);
+        setFocusIndex(0);
+        setExpanded(false);
+        setNotice(undefined);
+        pausedRef.current = false;
+        setPaused(false);
+        setState({ kind: "launch", home, placement, composite: (compositeSource ?? compositeForPlacement)(placement.label) });
+    };
+    // Subscriptions live and die with the launch state, so leaving the screen
+    // unregisters every handler it added.
+    const launchLabel = state.kind === "launch" ? state.placement.label : null;
+    useEffect(() => {
+        if (launchLabel === null)
+            return;
+        let live = true;
+        let session;
+        const unsubscribe = bus.subscribe(() => {
+            if (!pausedRef.current)
+                setEvents(bus.all());
+        });
+        void (startLaunch ?? startLaunchFn)(launchLabel, bus)
+            .then((started) => {
+            if (live)
+                session = started;
+            else
+                started.dispose();
+        })
+            .catch((error) => setNotice(error instanceof Error ? error.message : String(error)));
+        return () => {
+            live = false;
+            unsubscribe();
+            session?.dispose();
+        };
+    }, [launchLabel]);
+    /** Press: report the mapped action, or say why this control reports nothing. */
+    const press = (node) => {
+        setNotice(pressNode(node).reason);
+    };
+    const togglePause = () => {
+        const next = !pausedRef.current;
+        pausedRef.current = next;
+        setPaused(next);
+        // Resuming catches up on everything that arrived while paused.
+        if (!next)
+            setEvents(bus.all());
+    };
+    const clearEvents = () => {
+        bus.clear();
+        setEvents([]);
+    };
     const onWelcomeChoice = (choice) => {
         if (choice === "signin") {
             step("signin");
@@ -259,7 +338,7 @@ export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitW
         if (input === "d" && presetsFor(state.platform.type).length > 1)
             return setState({ kind: "pick-device", app: state.app, platform: state.platform, current: state.device ?? undefined });
         if (input === "l")
-            return setState({ ...state, launchHint: true });
+            return openPlacements(state);
     }, { isActive: state.kind === "home" });
     // The hub and its sub-screens keep the home state they came from, so the header
     // keeps showing what is loaded while you choose what to switch to.
@@ -271,5 +350,8 @@ export function Shell({ ctx, appQuery, platformQuery, deviceQuery, onExit, exitW
                                 .then(() => ctx.config.markOnboardingDone())
                                 .catch(() => { });
                             setState({ kind: "home", app: state.app, platform: state.platform, device: state.device, result });
-                        }, onBack: () => chooseDevice(state.app, state.platform, state.device ?? undefined) })), state.kind === "home" && (_jsx(SuccessScreen, { app: state.app, platform: state.platform, device: state.device, result: state.result, host: ctx.host, canSwitchDevice: presetsFor(state.platform.type).length > 1, launchHint: state.launchHint })), state.kind === "welcome" && (_jsx(WelcomeScreen, { host: ctx.host, onChoose: onWelcomeChoice, onCancel: () => finish(0) })), state.kind === "new-to-nami" && (_jsx(NewToNami, { host: ctx.host, onContinue: () => { step("configure"); setState({ kind: "paste-id", home: null }); }, onBack: () => setState({ kind: "welcome" }) })), state.kind === "switch" && (_jsx(SwitchScreen, { recent: state.recent, current: state.current, orgName: orgName, canSwitchDevice: presetsFor(state.home.platform.type).length > 1, canSwitchOrg: true, onChoose: (action) => onSwitchChoice(state.home, action), onCancel: () => setState(state.home) })), state.kind === "pick-org" && (_jsx(PickOrg, { orgs: state.orgs, currentOrgId: orgId, onSelect: (org) => void switchOrg(org), onCancel: () => setState(state.home) })), state.kind === "paste-id" && (_jsxs(Box, { flexDirection: "column", children: [state.notice && _jsx(Text, { color: palette.coral, children: state.notice }), _jsxs(Box, { children: [_jsx(Text, { children: "App Platform ID: " }), _jsx(TextInput, { value: pasted, onChange: setPasted, onSubmit: (v) => { setPasted(""); void usePastedId(state.home, v); } })] }), _jsxs(Text, { dimColor: true, children: ["Checking ", pasteHost.name, ". nami platforms --app <app> lists them. Esc to go back."] })] })), state.kind === "fatal" && _jsx(Text, { color: palette.coral, children: state.message })] })] }));
+                        }, onBack: () => chooseDevice(state.app, state.platform, state.device ?? undefined) })), state.kind === "home" && (_jsx(SuccessScreen, { app: state.app, platform: state.platform, device: state.device, result: state.result, host: ctx.host, canSwitchDevice: presetsFor(state.platform.type).length > 1 })), state.kind === "pick-placement" && (_jsx(PickPlacement, { placements: state.placements, onSelect: (placement) => openLaunch(state.home, placement), onCancel: () => setState(state.home) })), state.kind === "launch" && (_jsx(LaunchScreen, { placement: state.placement, composite: state.composite, deviceName: state.home.device?.displayName, events: events, width: Math.max(terminalColumns(stdout) - 2, 40), paused: paused, expanded: expanded, selectedSeq: events.at(-1)?.seq, focusIndex: focusIndex, onPress: press, onMove: (delta) => {
+                            const count = focusableNodes(state.composite).length;
+                            setFocusIndex((index) => (count === 0 ? 0 : (index + delta + count) % count));
+                        }, onTogglePause: togglePause, onClear: clearEvents, onToggleExpand: () => setExpanded((on) => !on), onBack: () => setState(state.home), notice: notice })), state.kind === "welcome" && (_jsx(WelcomeScreen, { host: ctx.host, onChoose: onWelcomeChoice, onCancel: () => finish(0) })), state.kind === "new-to-nami" && (_jsx(NewToNami, { host: ctx.host, onContinue: () => { step("configure"); setState({ kind: "paste-id", home: null }); }, onBack: () => setState({ kind: "welcome" }) })), state.kind === "switch" && (_jsx(SwitchScreen, { recent: state.recent, current: state.current, orgName: orgName, canSwitchDevice: presetsFor(state.home.platform.type).length > 1, canSwitchOrg: true, onChoose: (action) => onSwitchChoice(state.home, action), onCancel: () => setState(state.home) })), state.kind === "pick-org" && (_jsx(PickOrg, { orgs: state.orgs, currentOrgId: orgId, onSelect: (org) => void switchOrg(org), onCancel: () => setState(state.home) })), state.kind === "paste-id" && (_jsxs(Box, { flexDirection: "column", children: [state.notice && _jsx(Text, { color: palette.coral, children: state.notice }), _jsxs(Box, { children: [_jsx(Text, { children: "App Platform ID: " }), _jsx(TextInput, { value: pasted, onChange: setPasted, onSubmit: (v) => { setPasted(""); void usePastedId(state.home, v); } })] }), _jsxs(Text, { dimColor: true, children: ["Checking ", pasteHost.name, ". nami platforms --app <app> lists them. Esc to go back."] })] })), state.kind === "fatal" && _jsx(Text, { color: palette.coral, children: state.message })] })] }));
 }

package/dist/screens/SuccessScreen.js

@@ -3,9 +3,9 @@ import { Box, Text } from "ink";
 import { palette } from "../theme.js";
 export const PLACEMENT_LIST_MAX = 8;
 /** The payoff after onboarding: what the SDK found, and what to do next. */
-export function SuccessScreen({ app, platform, device, result, host, canSwitchDevice, launchHint }) {
+export function SuccessScreen({ app, platform, device, result, host, canSwitchDevice }) {
     const { counts, placements } = result;
     const shown = placements.slice(0, PLACEMENT_LIST_MAX);
     const more = placements.length - shown.length;
-    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: palette.aqua, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: palette.aqua, children: "Connected" }), " \u00B7 ", app.name, " \u00B7 ", platform.name, " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", platform.typeLabel, "]"] }), device && _jsxs(Text, { children: [" \u00B7 ", device.displayName, " ", _jsxs(Text, { dimColor: true, children: ["(", device.width, "\u00D7", device.height, ")"] })] })] }), _jsxs(Text, { dimColor: true, children: ["App Platform ID ", result.appPlatformId, " \u00B7 ", host.name] }), _jsxs(Text, { children: ["SDK ", result.configureState, " \u00B7 pinned to @namiml/sdk-core ", result.sdkVersion, " \u00B7 ", result.sdkEnabled ? "SDK enabled" : _jsx(Text, { color: palette.coral, children: "SDK disabled" })] }), result.deviceId && _jsxs(Text, { dimColor: true, children: ["device ", result.deviceId] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["placements ", _jsx(Text, { bold: true, children: counts.placements }), " \u00B7 products ", _jsx(Text, { bold: true, children: counts.products }), " \u00B7 paywalls ", _jsx(Text, { bold: true, children: counts.paywalls })] }) }), shown.length > 0 && (_jsxs(Text, { dimColor: true, children: [shown.join(" · "), more > 0 ? ` · +${more} more` : ""] })), launchHint && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: palette.aqua, children: ["Launching a placement lands in the next release.", placements.length > 0 ? ` The SDK found: ${shown.join(", ")}${more > 0 ? ` and ${more} more` : ""}.` : " This platform has no placements yet — add a campaign in the Control Center."] }) }))] }), _jsxs(Text, { dimColor: true, children: ["l launch a placement \u00B7 s switch app \u00B7 p switch platform", canSwitchDevice ? " · d switch device" : "", " \u00B7 q quit"] })] }));
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsxs(Box, { flexDirection: "column", borderStyle: "round", borderColor: palette.aqua, paddingX: 1, children: [_jsxs(Text, { children: [_jsx(Text, { bold: true, color: palette.aqua, children: "Connected" }), " \u00B7 ", app.name, " \u00B7 ", platform.name, " ", _jsxs(Text, { color: palette.secondaryBlue, children: ["[", platform.typeLabel, "]"] }), device && _jsxs(Text, { children: [" \u00B7 ", device.displayName, " ", _jsxs(Text, { dimColor: true, children: ["(", device.width, "\u00D7", device.height, ")"] })] })] }), _jsxs(Text, { dimColor: true, children: ["App Platform ID ", result.appPlatformId, " \u00B7 ", host.name] }), _jsxs(Text, { children: ["SDK ", result.configureState, " \u00B7 pinned to @namiml/sdk-core ", result.sdkVersion, " \u00B7 ", result.sdkEnabled ? "SDK enabled" : _jsx(Text, { color: palette.coral, children: "SDK disabled" })] }), result.deviceId && _jsxs(Text, { dimColor: true, children: ["device ", result.deviceId] }), _jsx(Box, { marginTop: 1, children: _jsxs(Text, { children: ["placements ", _jsx(Text, { bold: true, children: counts.placements }), " \u00B7 products ", _jsx(Text, { bold: true, children: counts.products }), " \u00B7 paywalls ", _jsx(Text, { bold: true, children: counts.paywalls })] }) }), shown.length > 0 && (_jsxs(Text, { dimColor: true, children: [shown.join(" · "), more > 0 ? ` · +${more} more` : ""] }))] }), _jsxs(Text, { dimColor: true, children: ["l launch a placement \u00B7 s switch app \u00B7 p switch platform", canSwitchDevice ? " · d switch device" : "", " \u00B7 q quit"] })] }));
 }

package/dist/sdk/summary.js

@@ -1,10 +1,22 @@
-/** One human label per campaign rule: the placement label for label rules, else the rule name. */
+/**
+ * The one human label a campaign rule goes by: the placement label for label
+ * rules, else the rule name. Empty when the rule carries neither.
+ *
+ * This is the single copy of that rule — `summarizePlacements()` (the configure
+ * summary and the Success screen) and `listPlacements()` (`src/placements/list.ts`,
+ * the picker and `nami placements`) both go through it so they cannot drift.
+ */
+export function placementLabel(campaign) {
+    const label = campaign.type === "label" && typeof campaign.value === "string" && campaign.value.trim() ? campaign.value.trim() : campaign.name?.trim();
+    return label || undefined;
+}
+/** One human label per campaign rule, de-duplicated and sorted. */
 export function summarizePlacements(campaigns) {
     if (!Array.isArray(campaigns))
         return [];
     const labels = new Set();
     for (const c of campaigns) {
-        const label = c.type === "label" && typeof c.value === "string" && c.value.trim() ? c.value.trim() : c.name?.trim();
+        const label = placementLabel(c);
         if (label)
             labels.add(label);
     }

package/dist/version.js

@@ -1,2 +1,2 @@
 /** CLI package version. Stamped by scripts/version.sh from the repo VERSION file — do not hand-edit. */
-export const NAMI_CLI_VERSION = "3.4.11-dev.202609230307";
+export const NAMI_CLI_VERSION = "3.4.11-dev.202609231629";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@namiml/cli",
-  "version": "3.4.11-dev.202609230307",
+  "version": "3.4.11-dev.202609231629",
   "description": "Nami SDK developer CLI — terminal test app, implementation and flow checks",
   "keywords": [
     "nami",
@@ -35,7 +35,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@namiml/sdk-core": "3.4.11-dev.202609230307",
+    "@namiml/sdk-core": "3.4.11-dev.202609231629",
     "commander": "^15",
     "env-paths": "^4",
     "ink": "^6.0.0",