@stigg/terminal 0.0.1-alpha

package/dist/ui/screens/InitScreen.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Box, Text, useInput } from "ink";
+import { useMemo, useReducer } from "react";
+import { claudeCodeHandler, cursorHandler, } from "../../mcp/clients.js";
+import { Card } from "../components/Card.js";
+import { ContextRow } from "../components/ContextRow.js";
+import { Footer } from "../components/Footer.js";
+import { INITIAL_STATE, wizardReducer, } from "../state.js";
+import { AccountStep } from "../steps/AccountStep.js";
+import { ApiKeyStep } from "../steps/ApiKeyStep.js";
+import { ClientsStep } from "../steps/ClientsStep.js";
+import { CredentialKindStep } from "../steps/CredentialKindStep.js";
+import { EnvironmentStep } from "../steps/EnvironmentStep.js";
+import { LoginStep } from "../steps/LoginStep.js";
+import { SkillsStep } from "../steps/SkillsStep.js";
+import { SummaryStep } from "../steps/SummaryStep.js";
+import { WritingStep } from "../steps/WritingStep.js";
+const TITLE = "stigg · cyberdeck · init";
+const NAV_HINTS = [
+    { key: "↑↓", label: "nav" },
+    { key: "enter", label: "confirm" },
+    { key: "esc", label: "menu" },
+    { key: "ctrl+c", label: "quit" },
+];
+const MULTISELECT_HINTS = [
+    { key: "↑↓", label: "nav" },
+    { key: "space", label: "toggle" },
+    { key: "enter", label: "confirm" },
+    { key: "esc", label: "menu" },
+    { key: "ctrl+c", label: "quit" },
+];
+const HINTS_FOR = {
+    login: [
+        { key: "enter", label: "continue" },
+        { key: "esc", label: "menu" },
+        { key: "ctrl+c", label: "cancel" },
+    ],
+    account: NAV_HINTS,
+    credentialKind: NAV_HINTS,
+    environment: NAV_HINTS,
+    apiKey: NAV_HINTS,
+    clients: MULTISELECT_HINTS,
+    skills: [
+        { key: "y/n", label: "" },
+        { key: "esc", label: "menu" },
+        { key: "ctrl+c", label: "quit" },
+    ],
+    writing: [{ key: "ctrl+c", label: "cancel" }],
+    summary: [{ key: "any key", label: "menu" }],
+};
+function stepPath(state) {
+    const path = ["login"];
+    const hideAccount = state.accounts != null && state.accounts.length === 1;
+    if (!hideAccount)
+        path.push("account");
+    path.push("credentialKind", "environment");
+    if (state.credentialKind === "scoped")
+        path.push("apiKey");
+    path.push("clients");
+    const hasClaudeCode = (state.selectedClients ?? []).includes("claude-code");
+    if (hasClaudeCode)
+        path.push("skills");
+    path.push("writing");
+    path.push("summary");
+    return path;
+}
+function stepNumber(state) {
+    const path = stepPath(state);
+    const idx = path.indexOf(state.step);
+    const total = path.length - 1;
+    return { current: idx >= 0 ? idx + 1 : 1, total };
+}
+function contextEntries(state) {
+    const entries = [];
+    if (state.session) {
+        entries.push({ label: "user", value: state.session.email });
+    }
+    if (state.account) {
+        entries.push({ label: "account", value: state.account.displayName });
+    }
+    if (state.credentialKind) {
+        entries.push({
+            label: "credential",
+            value: state.credentialKind === "scoped" ? "API key" : "User JWT",
+        });
+    }
+    if (state.environment) {
+        entries.push({ label: "environment", value: state.environment.name });
+    }
+    if (state.selectedKey) {
+        entries.push({
+            label: "key",
+            value: `${state.selectedKey.name}  (sk_…${state.selectedKey.lastFour})`,
+        });
+    }
+    return entries;
+}
+function renderStep(state, dispatch, handlers, onDone) {
+    switch (state.step) {
+        case "login":
+            return _jsx(LoginStep, { dispatch: dispatch });
+        case "account":
+            return _jsx(AccountStep, { state: state, dispatch: dispatch });
+        case "credentialKind":
+            return _jsx(CredentialKindStep, { dispatch: dispatch });
+        case "environment":
+            return _jsx(EnvironmentStep, { state: state, dispatch: dispatch });
+        case "apiKey":
+            return _jsx(ApiKeyStep, { state: state, dispatch: dispatch });
+        case "clients":
+            return (_jsx(ClientsStep, { state: state, dispatch: dispatch, handlers: handlers }));
+        case "skills":
+            return _jsx(SkillsStep, { dispatch: dispatch });
+        case "writing":
+            return (_jsx(WritingStep, { state: state, dispatch: dispatch, handlers: handlers }));
+        case "summary":
+            return _jsx(SummaryStep, { state: state, onDone: onDone });
+    }
+}
+export function InitScreen({ onDone }) {
+    const [state, dispatch] = useReducer(wizardReducer, INITIAL_STATE);
+    const handlers = useMemo(() => ({
+        "claude-code": claudeCodeHandler(),
+        cursor: cursorHandler(),
+    }), []);
+    useInput((_input, key) => {
+        if (key.escape && state.step !== "summary") {
+            onDone();
+        }
+    });
+    const { current, total } = stepNumber(state);
+    const status = state.error != null
+        ? "error"
+        : state.step === "summary"
+            ? "done"
+            : "active";
+    return (_jsxs(Card, { title: TITLE, subtitle: `step ${current} of ${total}`, status: status, footer: _jsx(Footer, { hints: HINTS_FOR[state.step] }), children: [_jsx(ContextRow, { entries: contextEntries(state) }), renderStep(state, dispatch, handlers, onDone), state.error && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { color: "red", children: ["\u2717 ", state.error] }) }))] }));
+}

package/dist/ui/screens/MenuScreen.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export type MenuChoice = "init" | "dash" | "debug";
+interface Props {
+    onPick: (choice: MenuChoice) => void;
+}
+export declare function MenuScreen({ onPick }: Props): React.ReactElement;
+export {};

package/dist/ui/screens/MenuScreen.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from "@inkjs/ui";
+import { Box, Text, useApp } from "ink";
+import { Card } from "../components/Card.js";
+import { Footer } from "../components/Footer.js";
+const OPTIONS = [
+    {
+        value: "init",
+        label: "init    Set up Stigg in this project — auth, MCP config, skills",
+    },
+    {
+        value: "dash",
+        label: "dash    Open the Stigg dashboard in your browser",
+    },
+    {
+        value: "debug",
+        label: "debug   Stream Stigg audit + usage logs (placeholder)",
+    },
+    {
+        value: "exit",
+        label: "exit    Quit cyberdeck",
+    },
+];
+const HINTS = [
+    { key: "↑↓", label: "nav" },
+    { key: "enter", label: "confirm" },
+    { key: "ctrl+c", label: "quit" },
+];
+export function MenuScreen({ onPick }) {
+    const { exit } = useApp();
+    return (_jsxs(Card, { title: "stigg \u00B7 cyberdeck", footer: _jsx(Footer, { hints: HINTS }), children: [_jsx(Box, { marginBottom: 1, children: _jsx(Text, { children: "What do you want to do?" }) }), _jsx(Select, { options: OPTIONS, onChange: (value) => {
+                    if (value === "exit") {
+                        exit();
+                        return;
+                    }
+                    onPick(value);
+                } })] }));
+}

package/dist/ui/state.d.ts

@@ -0,0 +1,72 @@
+import type { InstallResult as SkillsInstallResult } from '../skills/install.js';
+import type { Account, ApiKey, ClientId, Credential, Environment, Session, WriteResult } from '../types.js';
+export type StepId = 'login' | 'account' | 'environment' | 'apiKey' | 'clients' | 'skills' | 'writing' | 'summary';
+export type { ApiKey };
+export interface WizardState {
+    step: StepId;
+    history: StepId[];
+    session?: Session;
+    accounts?: Account[];
+    account?: Account;
+    environments?: Environment[];
+    environment?: Environment;
+    apiKeys?: ApiKey[];
+    selectedKey?: ApiKey;
+    credential?: Credential;
+    detectedClients?: ClientId[];
+    selectedClients?: ClientId[];
+    installSkills?: boolean;
+    writes: WriteResult[];
+    installedSkills?: SkillsInstallResult;
+    error?: string;
+}
+export type Action = {
+    type: 'LOGIN_OK';
+    session: Session;
+} | {
+    type: 'ACCOUNTS_LOADED';
+    accounts: Account[];
+} | {
+    type: 'PICK_ACCOUNT';
+    account: Account;
+} | {
+    type: 'ENVS_LOADED';
+    environments: Environment[];
+} | {
+    type: 'PICK_ENV';
+    environment: Environment;
+} | {
+    type: 'KEYS_LOADED';
+    apiKeys: ApiKey[];
+} | {
+    type: 'PICK_KEY';
+    key: ApiKey;
+    credentialValue: string;
+} | {
+    type: 'DETECT_OK';
+    clients: ClientId[];
+} | {
+    type: 'PICK_CLIENTS';
+    clients: ClientId[];
+} | {
+    type: 'SKILLS_CHOICE';
+    install: boolean;
+} | {
+    type: 'WRITE_OK';
+    result: WriteResult;
+} | {
+    type: 'SKILLS_INSTALL_OK';
+    result: SkillsInstallResult;
+} | {
+    type: 'ADVANCE';
+} | {
+    type: 'BACK';
+} | {
+    type: 'ERROR';
+    message: string;
+} | {
+    type: 'RESET';
+};
+export declare const INITIAL_STATE: WizardState;
+export declare function nextStep(step: StepId, selectedClients: ClientId[] | undefined): StepId;
+export declare function wizardReducer(state: WizardState, action: Action): WizardState;

package/dist/ui/state.js

@@ -0,0 +1,107 @@
+export const INITIAL_STATE = {
+    step: 'login',
+    history: [],
+    writes: [],
+};
+export function nextStep(step, selectedClients) {
+    switch (step) {
+        case 'login':
+            return 'account';
+        case 'account':
+            return 'environment';
+        case 'environment':
+            return 'apiKey';
+        case 'apiKey':
+            return 'clients';
+        case 'clients':
+            return (selectedClients?.length ?? 0) > 0 ? 'skills' : 'writing';
+        case 'skills':
+            return 'writing';
+        case 'writing':
+            return 'summary';
+        case 'summary':
+            return 'summary';
+    }
+}
+function advance(state) {
+    const target = nextStep(state.step, state.selectedClients);
+    if (target === state.step)
+        return state;
+    return {
+        ...state,
+        step: target,
+        history: [...state.history, state.step],
+    };
+}
+export function wizardReducer(state, action) {
+    switch (action.type) {
+        case 'LOGIN_OK':
+            return advance({ ...state, session: action.session });
+        case 'ACCOUNTS_LOADED':
+            return { ...state, accounts: action.accounts };
+        case 'PICK_ACCOUNT':
+            return advance({
+                ...state,
+                account: action.account,
+                environments: undefined,
+                environment: undefined,
+                apiKeys: undefined,
+                selectedKey: undefined,
+            });
+        case 'ENVS_LOADED':
+            return { ...state, environments: action.environments };
+        case 'PICK_ENV': {
+            // Reset everything that was scoped to the previous environment so the
+            // next step refetches and we never write a credential that mixes
+            // env A's key with env B's id.
+            const envChanged = state.environment?.id !== action.environment.id;
+            return advance({
+                ...state,
+                environment: action.environment,
+                apiKeys: envChanged ? undefined : state.apiKeys,
+                selectedKey: envChanged ? undefined : state.selectedKey,
+                credential: envChanged ? undefined : state.credential,
+            });
+        }
+        case 'KEYS_LOADED':
+            return { ...state, apiKeys: action.apiKeys };
+        case 'PICK_KEY':
+            return advance({
+                ...state,
+                selectedKey: action.key,
+                credential: {
+                    value: action.credentialValue,
+                    accountId: state.account?.id,
+                    environmentId: state.environment?.id,
+                    environmentSlug: state.environment?.slug,
+                },
+            });
+        case 'DETECT_OK':
+            return { ...state, detectedClients: action.clients };
+        case 'PICK_CLIENTS':
+            return advance({ ...state, selectedClients: action.clients });
+        case 'SKILLS_CHOICE':
+            return advance({ ...state, installSkills: action.install });
+        case 'WRITE_OK':
+            return { ...state, writes: [...state.writes, action.result] };
+        case 'SKILLS_INSTALL_OK':
+            return advance({ ...state, installedSkills: action.result });
+        case 'ADVANCE':
+            return advance(state);
+        case 'BACK': {
+            if (state.history.length === 0)
+                return state;
+            const prev = state.history[state.history.length - 1];
+            return {
+                ...state,
+                step: prev,
+                history: state.history.slice(0, -1),
+                error: undefined,
+            };
+        }
+        case 'ERROR':
+            return { ...state, error: action.message };
+        case 'RESET':
+            return INITIAL_STATE;
+    }
+}

package/dist/ui/steps/AccountStep.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Action, WizardState } from "../state.js";
+interface Props {
+    state: WizardState;
+    dispatch: React.Dispatch<Action>;
+}
+export declare function AccountStep({ state, dispatch }: Props): React.ReactElement;
+export {};

package/dist/ui/steps/AccountStep.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Spinner } from "@inkjs/ui";
+import { Box } from "ink";
+import { useEffect } from "react";
+import { listAccounts } from "../../api/client.js";
+import { SectionTitle } from "../components/SectionTitle.js";
+import { useAsyncEffect } from "../hooks/useAsyncEffect.js";
+export function AccountStep({ state, dispatch }) {
+    useAsyncEffect(async (signal) => {
+        if (state.accounts || !state.session)
+            return;
+        const accounts = await listAccounts(state.session.accessToken);
+        if (signal.cancelled)
+            return;
+        dispatch({ type: "ACCOUNTS_LOADED", accounts });
+    }, [state.session?.accessToken], (err) => dispatch({
+        type: "ERROR",
+        message: err instanceof Error ? err.message : String(err),
+    }));
+    useEffect(() => {
+        if (state.accounts &&
+            state.accounts.length === 1 &&
+            !state.account &&
+            state.step === "account") {
+            dispatch({ type: "PICK_ACCOUNT", account: state.accounts[0] });
+        }
+    }, [state.accounts, state.account, state.step, dispatch]);
+    if (!state.accounts) {
+        return _jsx(Spinner, { label: "Loading accounts\u2026" });
+    }
+    if (state.accounts.length === 1) {
+        return _jsx(Spinner, { label: `Using ${state.accounts[0].displayName}…` });
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SectionTitle, { children: "Which account?" }), _jsx(Select, { options: state.accounts.map((a) => ({
+                    label: a.displayName,
+                    value: a.id,
+                })), onChange: (v) => {
+                    const account = state.accounts?.find((a) => a.id === v);
+                    if (account)
+                        dispatch({ type: "PICK_ACCOUNT", account });
+                } })] }));
+}

package/dist/ui/steps/ApiKeyStep.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Action, WizardState } from "../state.js";
+interface Props {
+    state: WizardState;
+    dispatch: React.Dispatch<Action>;
+}
+export declare function ApiKeyStep({ state, dispatch }: Props): React.ReactElement;
+export {};

package/dist/ui/steps/ApiKeyStep.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Spinner } from "@inkjs/ui";
+import { Box, Text } from "ink";
+import { useState } from "react";
+import { createScopedApiKey, listApiKeys } from "../../api/client.js";
+import { SectionTitle } from "../components/SectionTitle.js";
+import { useAsyncEffect } from "../hooks/useAsyncEffect.js";
+const CREATE_NEW = "__create_new__";
+function timeAgo(iso) {
+    const ms = Date.now() - new Date(iso).getTime();
+    const days = Math.floor(ms / (1000 * 60 * 60 * 24));
+    if (days < 1)
+        return "today";
+    if (days < 7)
+        return `${days}d ago`;
+    if (days < 30)
+        return `${Math.floor(days / 7)}w ago`;
+    if (days < 365)
+        return `${Math.floor(days / 30)}mo ago`;
+    return `${Math.floor(days / 365)}y ago`;
+}
+export function ApiKeyStep({ state, dispatch }) {
+    const [minting, setMinting] = useState(false);
+    useAsyncEffect(async (signal) => {
+        if (state.apiKeys ||
+            !state.session ||
+            !state.environment ||
+            !state.account) {
+            return;
+        }
+        const keys = await listApiKeys(state.session.accessToken, state.account.id, state.environment.id);
+        if (signal.cancelled)
+            return;
+        dispatch({ type: "KEYS_LOADED", apiKeys: keys });
+    }, [
+        state.session?.accessToken,
+        state.account?.id,
+        state.environment?.id,
+    ], (err) => dispatch({
+        type: "ERROR",
+        message: err instanceof Error ? err.message : String(err),
+    }));
+    if (!state.apiKeys) {
+        return _jsx(Spinner, { label: `Loading API keys for ${state.environment?.name}…` });
+    }
+    if (minting) {
+        return _jsx(Spinner, { label: "Minting new key\u2026" });
+    }
+    const handleSelect = async (value) => {
+        if (value === CREATE_NEW) {
+            setMinting(true);
+            try {
+                const newKey = await createScopedApiKey(state.session.accessToken, state.account.id, state.environment.id, { name: "cyberdeck-mcp" });
+                const minted = {
+                    id: `key_${Date.now().toString(36)}`,
+                    name: "cyberdeck-mcp",
+                    lastFour: newKey.slice(-4),
+                    scopes: ["read", "write"],
+                    createdAt: new Date().toISOString(),
+                    value: newKey,
+                };
+                dispatch({
+                    type: "PICK_KEY",
+                    key: minted,
+                    credentialValue: newKey,
+                });
+            }
+            catch (err) {
+                dispatch({
+                    type: "ERROR",
+                    message: err instanceof Error ? err.message : String(err),
+                });
+                setMinting(false);
+            }
+            return;
+        }
+        const key = state.apiKeys?.find((k) => k.id === value);
+        if (!key || !key.value)
+            return;
+        dispatch({ type: "PICK_KEY", key, credentialValue: key.value });
+    };
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SectionTitle, { children: "Pick an existing key, or create a new one" }), _jsx(Select, { options: [
+                    ...state.apiKeys.map((k) => ({
+                        label: `${k.name.padEnd(20)} sk_…${k.lastFour}  ${k.scopes.join(", ").padEnd(14)} ${timeAgo(k.createdAt)}`,
+                        value: k.id,
+                    })),
+                    { label: "+ Create new key", value: CREATE_NEW },
+                ], onChange: (v) => {
+                    void handleSelect(v);
+                } }), state.apiKeys.length === 0 && (_jsx(Box, { marginTop: 1, children: _jsxs(Text, { dimColor: true, children: ["No keys yet for ", state.environment?.name, ". Pick \"Create new\" to mint one."] }) }))] }));
+}

package/dist/ui/steps/ClientsStep.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+import type { ClientId, McpClientHandler } from "../../types.js";
+import type { Action, WizardState } from "../state.js";
+interface Props {
+    state: WizardState;
+    dispatch: React.Dispatch<Action>;
+    handlers: Record<ClientId, McpClientHandler>;
+}
+export declare function ClientsStep({ state, dispatch, handlers, }: Props): React.ReactElement;
+export {};

package/dist/ui/steps/ClientsStep.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MultiSelect, Spinner } from "@inkjs/ui";
+import { Box, Text } from "ink";
+import { useState } from "react";
+import { buildMcpEntry } from "../../mcp/writer.js";
+import { SectionTitle } from "../components/SectionTitle.js";
+import { useAsyncEffect } from "../hooks/useAsyncEffect.js";
+const ALL_CLIENTS = [
+    { id: "claude-code", label: "Claude Code", configPath: "~/.claude.json" },
+    { id: "cursor", label: "Cursor", configPath: "~/.cursor/mcp.json" },
+];
+const MCP_URL = "https://mcp.stigg.io";
+function maskValue(v, keep = 4) {
+    if (v.length <= keep + 4)
+        return v;
+    return `${v.slice(0, 6)}…${v.slice(-keep)}`;
+}
+function maskedEntry(credential) {
+    if (!credential)
+        return null;
+    const entry = buildMcpEntry(credential, MCP_URL);
+    const maskedHeaders = Object.fromEntries(Object.entries(entry.headers).map(([k, v]) => {
+        if (k === "X-Environment")
+            return [k, v];
+        return [k, maskValue(v)];
+    }));
+    return { entry: { ...entry, headers: maskedHeaders } };
+}
+export function ClientsStep({ state, dispatch, handlers, }) {
+    useAsyncEffect(async (signal) => {
+        if (state.detectedClients)
+            return;
+        const detected = [];
+        for (const id of ALL_CLIENTS.map((c) => c.id)) {
+            if (await handlers[id].isInstalled()) {
+                detected.push(id);
+            }
+        }
+        if (signal.cancelled)
+            return;
+        dispatch({ type: "DETECT_OK", clients: detected });
+    }, [], (err) => dispatch({
+        type: "ERROR",
+        message: err instanceof Error ? err.message : String(err),
+    }));
+    const initial = state.selectedClients ??
+        (state.detectedClients && state.detectedClients.length > 0
+            ? state.detectedClients
+            : ["claude-code"]);
+    const [, setSelected] = useState(initial);
+    if (!state.detectedClients) {
+        return _jsx(Spinner, { label: "Detecting installed AI clients\u2026" });
+    }
+    const masked = maskedEntry(state.credential);
+    const previewLines = masked
+        ? JSON.stringify({ stigg: masked.entry }, null, 2).split("\n")
+        : [];
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SectionTitle, { children: "Which clients should we configure?" }), _jsxs(Box, { flexDirection: "row", gap: 4, children: [_jsx(Box, { flexDirection: "column", minWidth: 42, children: _jsx(MultiSelect, { options: ALL_CLIENTS.map((c) => {
+                                const detected = state.detectedClients?.includes(c.id);
+                                const suffix = detected ? "  (detected)" : "  (not installed)";
+                                return {
+                                    label: `${c.label.padEnd(13)} ${c.configPath.padEnd(22)}${suffix}`,
+                                    value: c.id,
+                                };
+                            }), defaultValue: initial, onChange: (values) => setSelected(values), onSubmit: (values) => dispatch({
+                                type: "PICK_CLIENTS",
+                                clients: values,
+                            }) }) }), _jsxs(Box, { flexDirection: "column", flexGrow: 1, children: [_jsx(Text, { dimColor: true, children: "Preview \u00B7 mcpServers.stigg" }), previewLines.length === 0 ? (_jsx(Text, { dimColor: true, children: "(no credential yet)" })) : (previewLines.map((line, i) => (_jsx(Text, { color: "green", children: line.trim() === "" ? "" : `+ ${line}` }, i))))] })] })] }));
+}

package/dist/ui/steps/CredentialKindStep.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+import type { Action } from "../state.js";
+interface Props {
+    dispatch: React.Dispatch<Action>;
+}
+export declare function CredentialKindStep({ dispatch, }: Props): React.ReactElement;
+export {};

package/dist/ui/steps/CredentialKindStep.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select } from "@inkjs/ui";
+import { Box, Text } from "ink";
+import { SectionTitle } from "../components/SectionTitle.js";
+export function CredentialKindStep({ dispatch, }) {
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SectionTitle, { children: "Which credential should the MCP use?" }), _jsx(Select, { options: [
+                    {
+                        label: "User JWT   ·  your user identity, broad access across envs",
+                        value: "jwt",
+                    },
+                    {
+                        label: "API key    ·  single env, limited permissions  (recommended)",
+                        value: "scoped",
+                    },
+                ], onChange: (v) => {
+                    dispatch({ type: "PICK_CRED_KIND", kind: v });
+                } }), _jsxs(Box, { marginTop: 1, flexDirection: "column", children: [_jsx(Text, { dimColor: true, children: "Scoped keys are safer (smaller blast radius if leaked)." }), _jsx(Text, { dimColor: true, children: "JWT is your full user identity and follows your role across envs." })] })] }));
+}

package/dist/ui/steps/EnvironmentStep.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type { Action, WizardState } from "../state.js";
+interface Props {
+    state: WizardState;
+    dispatch: React.Dispatch<Action>;
+}
+export declare function EnvironmentStep({ state, dispatch, }: Props): React.ReactElement;
+export {};

package/dist/ui/steps/EnvironmentStep.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Select, Spinner } from "@inkjs/ui";
+import { Box } from "ink";
+import { listEnvironments } from "../../api/client.js";
+import { SectionTitle } from "../components/SectionTitle.js";
+import { useAsyncEffect } from "../hooks/useAsyncEffect.js";
+export function EnvironmentStep({ state, dispatch, }) {
+    useAsyncEffect(async (signal) => {
+        if (state.environments || !state.session || !state.account)
+            return;
+        const envs = await listEnvironments(state.session.accessToken, state.account.id);
+        if (signal.cancelled)
+            return;
+        dispatch({
+            type: "ENVS_LOADED",
+            environments: envs.map((e) => ({
+                id: e.id,
+                name: e.name,
+                slug: e.slug,
+            })),
+        });
+    }, [state.session?.accessToken, state.account?.id], (err) => dispatch({
+        type: "ERROR",
+        message: err instanceof Error ? err.message : String(err),
+    }));
+    if (!state.environments) {
+        return _jsx(Spinner, { label: "Loading environments\u2026" });
+    }
+    return (_jsxs(Box, { flexDirection: "column", children: [_jsx(SectionTitle, { children: "Which environment?" }), _jsx(Select, { options: state.environments.map((e) => ({
+                    label: e.name,
+                    value: e.id,
+                })), onChange: (v) => {
+                    const env = state.environments?.find((e) => e.id === v);
+                    if (env)
+                        dispatch({ type: "PICK_ENV", environment: env });
+                } })] }));
+}