attio 0.0.1-experimental.20241219 → 0.0.1-experimental.20250101

package/lib/machines/dev-machine.js

@@ -1,6 +1,5 @@
 import chokidar from "chokidar";
 import open from "open";
-import readline from "readline";
 import { assign, fromCallback, setup, enqueueActions } from "xstate";
 import { APP } from "../env.js";
 import { completeBundleUpload } from "../api/complete-bundle-upload.js";
@@ -9,13 +8,27 @@ import { startGraphqlServer } from "../api/start-graphql-server.js";
 import { startUpload } from "../api/start-upload.js";
 import { loadAppConfigFile } from "../util/app-config.js";
 import { loadDeveloperConfig, loadInitialDeveloperConfig, } from "../util/load-developer-config.js";
+import notifier from "node-notifier";
 import { loadEnv } from "../util/load-env.js";
 import { codeGenMachine } from "./code-gen-machine.js";
 import { envMachine } from "./env-machine.js";
 import { jsMachine } from "./js-machine.js";
 import { tsMachine } from "./ts-machine.js";
-import { error as logError } from "../components/Log.js";
 import { fetchInstallation } from "../api/fetch-installation.js";
+import Spinner from "tiny-spinner";
+import { printMessage } from "../util/print-message.js";
+import { printError } from "../util/typescript.js";
+import { clearTerminal } from "../util/clear-terminal.js";
+import { setTerminalTitle } from "../util/set-terminal-title.js";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
+import { printLogo } from "./actions.js";
+process.on("SIGINT", () => {
+    process.stdout.write("\x1B[?25h");
+    process.exit();
+});
+process.on("exit", () => {
+    process.stdout.write("\x1B[?25h");
+});
 export const devMachine = setup({
     types: {
         context: {},
@@ -24,6 +37,7 @@ export const devMachine = setup({
     },
     guards: {
         "have dev version": ({ context }) => Boolean(context.devVersion),
+        "have typescript errors": (_, params) => Boolean(params.typeScriptErrors?.length),
     },
     actors: {
         "javascript": jsMachine,
@@ -38,45 +52,54 @@ export const devMachine = setup({
             }
             sendBack({ type: "Initialized", config });
         }),
-        "listenForGraphqlOpen": fromCallback(({ input }) => {
-            readline.emitKeypressEvents(process.stdin);
-            if (process.stdin.isTTY) {
-                process.stdin.setRawMode(true);
-            }
-            const handleKeyPress = (_, key) => {
-                if (key.name?.toLowerCase() === "o") {
-                    open(`http://localhost:${input.graphqlPort}/graphql`);
-                }
-            };
-            process.stdin.on("keypress", handleKeyPress);
-            return () => {
-                process.stdin.removeListener("keypress", handleKeyPress);
+        "keyboard": fromCallback(({ sendBack }) => {
+            if (!process.stdin.isTTY)
+                return;
+            const originalIsRaw = process.stdin.isRaw;
+            const originalIsTTY = process.stdin.isTTY;
+            const ensureRawMode = () => {
                 if (process.stdin.isTTY) {
-                    process.stdin.setRawMode(false);
+                    process.stdin.setRawMode(true);
                 }
             };
-        }),
-        "listenForInstallOpen": fromCallback(({ input, sendBack }) => {
-            readline.emitKeypressEvents(process.stdin);
-            if (process.stdin.isTTY) {
-                process.stdin.setRawMode(true);
-            }
-            const handleKeyPress = (_, key) => {
-                if (key.name?.toLowerCase() === "i") {
-                    open(`${APP}/_/settings/apps/${input.appSlug}`);
-                    sendBack({ type: "Install Opened" });
+            const handleData = (data) => {
+                ensureRawMode();
+                const str = data.toString();
+                if (str === "\u0003") {
+                    process.stdout.write("\x1B[?25h");
+                    process.stdin.setRawMode(originalIsRaw);
+                    process.exit();
+                }
+                switch (str) {
+                    case "o":
+                        sendBack({ type: "Open GraphQL Explorer" });
+                        break;
+                    case "i":
+                        sendBack({ type: "Install Opened" });
+                        break;
                 }
             };
-            process.stdin.on("keypress", handleKeyPress);
+            process.stdin.setRawMode(true);
+            process.stdin.resume();
+            process.stdin.on("data", handleData);
+            process.stdin.on("focus", ensureRawMode);
+            process.stdout.on("focus", ensureRawMode);
+            process.on("focus", ensureRawMode);
             return () => {
-                process.stdin.removeListener("keypress", handleKeyPress);
-                if (process.stdin.isTTY) {
-                    process.stdin.setRawMode(false);
+                process.stdin.removeListener("data", handleData);
+                process.stdin.removeListener("focus", ensureRawMode);
+                process.stdout.removeListener("focus", ensureRawMode);
+                process.removeListener("focus", ensureRawMode);
+                process.stdin.setRawMode(originalIsRaw);
+                if (originalIsTTY) {
+                    process.stdin.pause();
                 }
             };
         }),
         "prepareUpload": fromCallback(({ sendBack }) => {
+            const spinner = new Spinner();
             const prepareUpload = async () => {
+                spinner.start("Preparing upload...");
                 const config = await loadDeveloperConfig();
                 if (typeof config === "string")
                     throw config;
@@ -93,18 +116,24 @@ export const devMachine = setup({
                     targetWorkspaceId: config.target_workspace_id,
                     environmentVariables,
                 });
+                spinner.success("Upload prepared");
                 sendBack({
                     type: "Upload Prepared",
                     devVersion: { ...devVersion, app_slug: app.slug },
                 });
             };
-            prepareUpload().catch((error) => sendBack({
-                type: "Upload Error",
-                error: typeof error === "string" ? new Error(error) : error,
-            }));
+            prepareUpload().catch((error) => {
+                spinner.error(`Upload failed: ${error.message}`);
+                sendBack({
+                    type: "Upload Error",
+                    error: typeof error === "string" ? new Error(error) : error,
+                });
+            });
         }),
         "upload": fromCallback(({ sendBack, input: { config: { token, developer_slug: developerSlug }, contents, devVersion: { app_id: appId, app_dev_version_id: devVersionId }, }, }) => {
+            const spinner = new Spinner();
             const upload = async () => {
+                spinner.start("Uploading...");
                 const { client_bundle_upload_url, server_bundle_upload_url, app_dev_version_bundle_id: bundleId, } = await startUpload({
                     token,
                     developerSlug,
@@ -130,7 +159,7 @@ export const devMachine = setup({
                         },
                     }),
                 ]).catch((error) => {
-                    logError("Upload Error", error);
+                    process.stderr.write(`Upload Error: ${error}`);
                 });
                 await completeBundleUpload({
                     token,
@@ -139,9 +168,21 @@ export const devMachine = setup({
                     devVersionId,
                     bundleId,
                 });
+                spinner.success(`Upload completed at ${new Date().toLocaleString()}.`);
                 sendBack({ type: "Upload Complete" });
+                notifier.notify({
+                    title: "Upload Complete",
+                    message: "New bundle uploaded to Attio",
+                });
             };
-            upload().catch((error) => sendBack({ type: "Upload Error", error }));
+            upload().catch((error) => {
+                spinner.error(`Upload failed: ${error.message}`);
+                sendBack({ type: "Upload Error", error });
+                notifier.notify({
+                    title: "Upload Failed",
+                    message: "Bundle upload to Attio failed",
+                });
+            });
         }),
         "watch": fromCallback(({ sendBack }) => {
             const watcher = chokidar.watch(["src", ".env"], {
@@ -188,6 +229,44 @@ export const devMachine = setup({
     },
     actions: {
         clearUploadError: assign({ uploadError: undefined }),
+        showConfigInstructions: ({ context }) => {
+            printInstallInstructions(context.configError);
+        },
+        printLogo: (_) => {
+            process.stdout.write("\x1B[?25l");
+            printLogo();
+        },
+        printWatching: (_) => {
+            printMessage("👀 Watching for changes...");
+        },
+        printTypeScriptErrors: (_, params) => {
+            if (params.errors.length) {
+                clearTerminal();
+                params.errors.forEach(printError);
+                notifier.notify({
+                    title: "TypeScript Errors",
+                    message: `There were ${params.errors.length === 1 ? "one error" : `${params.errors.length} errors`} in your TypeScript code`,
+                });
+            }
+        },
+        promptToInstall: (_) => {
+            process.stdout.write(`\n\n🚨 IMPORTANT: You will need to install your app in your workspace. Press "i" to open the app settings page, and then click "Install".\n\n`);
+        },
+        promptToOpenGraphQLExplorer: (_) => {
+            process.stdout.write(`\n\n Press "o" to open GraphQL Explorer.\n\n`);
+        },
+        openGraphQLExplorer: ({ context }) => {
+            open(`http://localhost:${context.graphqlPort}/graphql`);
+        },
+        openInstallPage: ({ context }) => {
+            open(`${APP}/_/settings/apps/${context.devVersion?.app_slug}`);
+        },
+        saveTypeScriptErrors: assign({
+            typeScriptErrors: (_, params) => params.errors,
+        }),
+        clearTypeScriptErrors: assign({
+            typeScriptErrors: () => [],
+        }),
         sendChange: enqueueActions(({ enqueue, event }) => {
             enqueue.sendTo("javascript", event);
             enqueue.sendTo("typescript", event);
@@ -209,6 +288,11 @@ export const devMachine = setup({
         setGraphqlPort: assign({
             graphqlPort: (_, params) => params.port,
         }),
+        setTerminalTitle: ({ context }) => {
+            setTerminalTitle(context.devVersion?.app_id
+                ? `attio dev – ${context.devVersion.app_id}`
+                : `attio dev`);
+        },
         setSuccess: assign({
             jsContents: (_, params) => params.contents,
             lastSuccessfulJavaScriptBuild: (_, params) => params.time,
@@ -245,6 +329,9 @@ export const devMachine = setup({
                     input: ({ self }) => ({ parentRef: self }),
                 },
                 { src: "watch" },
+                {
+                    src: "keyboard",
+                },
             ],
             states: {
                 JavaScript: {
@@ -264,7 +351,9 @@ export const devMachine = setup({
                                 },
                             },
                         },
-                        "Watching": {},
+                        "Watching": {
+                            entry: "printWatching",
+                        },
                         "Uploading": {
                             on: {
                                 "Upload Complete": "Watching",
@@ -286,13 +375,15 @@ export const devMachine = setup({
                         },
                         "Upload When Ready": {
                             always: {
-                                target: "Uploading",
+                                target: "Can Upload?",
                                 guard: "have dev version",
+                                reenter: true,
                             },
                             on: {
                                 "Upload Prepared": {
-                                    target: "Uploading",
+                                    target: "Can Upload?",
                                     actions: { type: "setDevVersion", params: ({ event }) => event },
+                                    reenter: true,
                                 },
                             },
                         },
@@ -307,12 +398,28 @@ export const devMachine = setup({
                                 },
                             },
                         },
+                        "Can Upload?": {
+                            always: [
+                                {
+                                    target: "Watching",
+                                    guard: {
+                                        type: "have typescript errors",
+                                        params: ({ context }) => context,
+                                    },
+                                    reenter: true,
+                                },
+                                "Uploading",
+                            ],
+                        },
                     },
                     initial: "Building",
                     on: {
                         "Upload Prepared": {
                             target: "JavaScript",
-                            actions: { type: "setDevVersion", params: ({ event }) => event },
+                            actions: [
+                                { type: "setDevVersion", params: ({ event }) => event },
+                                "setTerminalTitle",
+                            ],
                         },
                         "Change": {
                             target: "JavaScript",
@@ -331,9 +438,19 @@ export const devMachine = setup({
                     states: {
                         Validating: {
                             on: {
-                                "TypeScript Success": "Watching",
+                                "TypeScript Success": {
+                                    target: "Watching",
+                                    actions: "clearTypeScriptErrors",
+                                },
                                 "TypeScript Error": {
                                     target: "Watching",
+                                    actions: [
+                                        {
+                                            type: "printTypeScriptErrors",
+                                            params: ({ event }) => event,
+                                        },
+                                        { type: "saveTypeScriptErrors", params: ({ event }) => event },
+                                    ],
                                 },
                             },
                         },
@@ -369,9 +486,11 @@ export const devMachine = setup({
                             },
                         },
                         "Started": {
-                            invoke: {
-                                src: "listenForGraphqlOpen",
-                                input: ({ context }) => ({ graphqlPort: context.graphqlPort }),
+                            on: {
+                                "Open GraphQL Explorer": {
+                                    target: "Started",
+                                    actions: "openGraphQLExplorer",
+                                },
                             },
                         },
                     },
@@ -396,15 +515,7 @@ export const devMachine = setup({
                             type: "final",
                         },
                         "Prompt to Install": {
-                            invoke: {
-                                src: "listenForInstallOpen",
-                                input: ({ context }) => ({
-                                    appSlug: context.devVersion.app_slug,
-                                }),
-                            },
-                            on: {
-                                "Install Opened": "Poll For Installation",
-                            },
+                            entry: "promptToInstall",
                         },
                         "Poll For Installation": {
                             invoke: {
@@ -428,9 +539,16 @@ export const devMachine = setup({
                         },
                     },
                     initial: "Waiting for App ID",
+                    on: {
+                        "Install Opened": {
+                            target: ".Poll For Installation",
+                            actions: "openInstallPage",
+                        },
+                    },
                 },
             },
             type: "parallel",
+            entry: "promptToOpenGraphQLExplorer",
         },
         "Read Config": {
             on: {
@@ -452,6 +570,8 @@ export const devMachine = setup({
         },
         "No Config": {
             type: "final",
+            entry: "showConfigInstructions",
         },
     },
+    entry: "printLogo",
 });

package/lib/machines/generate-invite-machine.js

@@ -1,8 +1,13 @@
 import { assign, setup, fromCallback } from "xstate";
+import clipboard from "clipboardy";
 import { fetchUnpublishedVersions } from "../api/fetch-versions.js";
 import { generateInviteLink } from "../api/generate-invite-link.js";
 import { emptyConfig } from "../schema.js";
-import { loadAppConfig, loadDeveloperConfig } from "./actors.js";
+import { askWithTypedChoices, loadAppConfig, loadDeveloperConfig } from "./actors.js";
+import { printLogo, showError } from "./actions.js";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
+import Spinner from "tiny-spinner";
+import chalk from "chalk";
 export const connectionTypes = [
     { value: "secret", label: "Secret" },
     { value: "oauth2-code", label: "OAuth2" },
@@ -18,19 +23,27 @@ export const generateInviteMachine = setup({
         input: {},
     },
     actors: {
+        askForVersion: askWithTypedChoices(),
         fetchVersions: fromCallback(({ sendBack, input: { developer: { token, slug: devSlug }, config, }, }) => {
             const getVersions = async () => {
+                const spinner = new Spinner();
+                spinner.start("Loading versions...");
                 const versions = await fetchUnpublishedVersions({
                     token,
                     devSlug,
                     appId: config.id,
                 });
+                spinner.success("Versions loaded");
                 sendBack({ type: "Versions Fetched", versions });
             };
             getVersions();
         }),
-        generateInviteLink: fromCallback(({ sendBack, input: { developer: { token, slug: devSlug }, config, major, minor, }, }) => {
+        generateInviteLink: fromCallback(({ sendBack, input: { developer: { token, slug: devSlug }, config, versionProvided, major, minor, }, }) => {
             const add = async () => {
+                const spinner = new Spinner();
+                if (!versionProvided) {
+                    spinner.start("Generating invite link...");
+                }
                 try {
                     const inviteLink = await generateInviteLink({
                         token,
@@ -39,9 +52,15 @@ export const generateInviteMachine = setup({
                         major: major,
                         minor: minor,
                     });
+                    if (!versionProvided) {
+                        spinner.success("Invite link generated");
+                    }
                     sendBack({ type: "Invite Link Generated", inviteLink });
                 }
                 catch (error) {
+                    if (!versionProvided) {
+                        spinner.error("Error generating invite link");
+                    }
                     sendBack({ type: "Error", error: error.message });
                 }
             };
@@ -51,6 +70,27 @@ export const generateInviteMachine = setup({
         loadAppConfig,
     },
     actions: {
+        printLogo,
+        showError,
+        showConfigInstructions: ({ context }) => {
+            printLogo();
+            printInstallInstructions(context.configError);
+        },
+        showNoUnpublishedVersions: () => {
+            process.stdout.write("No unpublished versions found.");
+        },
+        printInviteLink: ({ context }) => {
+            if (context.versionProvided) {
+                process.stdout.write(context.inviteLink);
+                return;
+            }
+            process.stdout.write(`\nInvite link for version ${context.major}.${context.minor} successfully generated. It will expire in 24 hours.\n\n`);
+            process.stdout.write(chalk.blue(context.inviteLink));
+            process.stdout.write("\n\n📋 It's already on your clipboard!\n");
+        },
+        copyToInviteLinkToClipboard: ({ context }) => {
+            clipboard.writeSync(context.inviteLink);
+        },
         clearError: assign({
             error: () => undefined,
         }),
@@ -70,8 +110,8 @@ export const generateInviteMachine = setup({
             inviteLink: (_, params) => params.inviteLink,
         }),
         setVersion: assign({
-            major: (_, params) => params.version.major,
-            minor: (_, params) => params.version.minor,
+            major: (_, params) => params.output.major,
+            minor: (_, params) => params.output.minor,
         }),
         setVersions: assign({
             versions: (_, params) => params.versions,
@@ -86,6 +126,7 @@ export const generateInviteMachine = setup({
         developer: { slug: "", token: "" },
         config: emptyConfig,
         versions: [],
+        versionProvided: input.major !== undefined && input.minor !== undefined,
         major: input.major,
         minor: input.minor,
     }),
@@ -108,6 +149,7 @@ export const generateInviteMachine = setup({
         },
         "Show config instructions": {
             type: "final",
+            entry: "showConfigInstructions",
         },
         "Loading App Config": {
             invoke: {
@@ -127,9 +169,11 @@ export const generateInviteMachine = setup({
         },
         "Error": {
             type: "final",
+            entry: { type: "showError", params: ({ context }) => ({ error: context.error }) },
         },
         "Display Invite Link": {
             type: "final",
+            entry: ["copyToInviteLinkToClipboard", "printInviteLink"],
         },
         "Fetching Versions": {
             on: {
@@ -158,6 +202,7 @@ export const generateInviteMachine = setup({
                 {
                     target: "Fetching Versions",
                     reenter: true,
+                    actions: "printLogo",
                 },
             ],
         },
@@ -178,12 +223,6 @@ export const generateInviteMachine = setup({
             },
         },
         "Ask for version": {
-            on: {
-                "Select Version": {
-                    target: "Generating Invite Link",
-                    actions: { type: "setVersion", params: ({ event }) => event },
-                },
-            },
             always: {
                 target: "No unpublished versions",
                 guard: {
@@ -191,9 +230,24 @@ export const generateInviteMachine = setup({
                     params: ({ context }) => context,
                 },
             },
+            invoke: {
+                src: "askForVersion",
+                input: ({ context }) => ({
+                    choices: context.versions.map((version) => ({
+                        name: `${version.major}.${version.minor}`,
+                        value: version,
+                    })),
+                    message: "Select an unpublished version to invite someone to:",
+                }),
+                onDone: {
+                    target: "Generating Invite Link",
+                    actions: { type: "setVersion", params: ({ event }) => event },
+                },
+            },
         },
         "No unpublished versions": {
             type: "final",
+            entry: "showNoUnpublishedVersions",
         },
     },
     initial: "Loading Developer Config",

package/lib/machines/list-connections-machine.js

@@ -2,6 +2,12 @@ import { assign, setup, fromCallback } from "xstate";
 import { fetchConnections } from "../api/fetch-connections.js";
 import { emptyConfig } from "../schema.js";
 import { loadAppConfig, loadDeveloperConfig } from "./actors.js";
+import Table from "cli-table3";
+import { showError, printLogo } from "./actions.js";
+import { printInstallInstructions } from "../util/print-install-instructions.js";
+import boxen from "boxen";
+import chalk from "chalk";
+import Spinner from "tiny-spinner";
 export const listConnectionsMachine = setup({
     types: {
         context: {},
@@ -11,17 +17,61 @@ export const listConnectionsMachine = setup({
         loadDeveloperConfig,
         loadAppConfig,
         loadConnections: fromCallback(({ sendBack, input }) => {
+            const spinner = new Spinner();
+            spinner.start("Loading connections...");
             fetchConnections({
                 token: input.developer.token,
                 devSlug: input.developer.slug,
                 appId: input.config.id,
                 major: input.config.major,
             })
-                .then((connections) => sendBack({ type: "Connections Loaded", connections }))
-                .catch((error) => sendBack({ type: "Error", error: error.message }));
+                .then((connections) => {
+                spinner.success("Connections loaded");
+                sendBack({ type: "Connections Loaded", connections });
+            })
+                .catch((error) => {
+                spinner.error("Error loading connections");
+                sendBack({ type: "Error", error: error.message });
+            });
         }),
     },
     actions: {
+        printLogo,
+        showError,
+        showConfigInstructions: ({ context }) => printInstallInstructions(context.configError),
+        showNoConnections: () => {
+            process.stdout.write(chalk.red("This app has no connections.\n\n"));
+            process.stdout.write("To add one, use:\n");
+            process.stdout.write(boxen("attio connection add", {
+                padding: 1,
+                margin: 1,
+                borderStyle: "round",
+            }) + "\n");
+        },
+        showConnections: ({ context: { connections } }) => {
+            const maxWidth = process.stdout.columns - 10;
+            const table = new Table({
+                head: ["Name", "Level", "Type"].map((h) => chalk.bold(h)),
+                style: {
+                    head: [],
+                    border: [],
+                },
+                colWidths: [
+                    Math.floor(maxWidth * 0.5),
+                    Math.floor(maxWidth * 0.2),
+                    Math.floor(maxWidth * 0.3),
+                ],
+                colAligns: ["left", "center", "center"],
+                wordWrap: true,
+                wrapOnWordBoundary: true,
+            });
+            table.push(...connections.map((connection) => [
+                connection.label,
+                connection.global ? "Workspace" : "User",
+                connection.connection_type === "secret" ? "Secret" : "OAuth2 Code",
+            ]));
+            process.stdout.write(table.toString());
+        },
         setError: assign({
             error: (_, params) => params.error,
         }),
@@ -66,6 +116,7 @@ export const listConnectionsMachine = setup({
         },
         "Show config instructions": {
             type: "final",
+            entry: "showConfigInstructions",
         },
         "Loading App Config": {
             invoke: {
@@ -84,6 +135,7 @@ export const listConnectionsMachine = setup({
         },
         "Error": {
             type: "final",
+            entry: { type: "showError", params: ({ context }) => ({ error: context.error }) },
         },
         "Loading Connections": {
             invoke: {
@@ -110,10 +162,13 @@ export const listConnectionsMachine = setup({
         },
         "No Connections": {
             type: "final",
+            entry: "showNoConnections",
         },
         "Display Connections": {
             type: "final",
+            entry: "showConnections",
         },
     },
     initial: "Loading Developer Config",
+    entry: "printLogo",
 });