attio 0.0.1-experimental.20250311 → 0.0.1-experimental.20250324

package/lib/api/add-connection-definition.js

@@ -7,7 +7,7 @@ const addConnectionSchema = z.object({
     app_id: z.string(),
     connection_definition_id: z.string(),
 });
-export async function addConnectionDefinition({ token, devSlug, appId, label, description, global, connectionType, clientId, clientSecret, authorizeUrl, accessTokenUrl, major, scopes, }) {
+export async function addConnectionDefinition({ token, appId, label, description, global, connectionType, clientId, clientSecret, authorizeUrl, accessTokenUrl, major, scopes, }) {
     const connectionDefinitionId = uuid();
     const body = {
         connection_type: connectionType,
@@ -22,7 +22,7 @@ export async function addConnectionDefinition({ token, devSlug, appId, label, de
         body.client_secret = clientSecret;
         body.scopes = scopes.split(",").map((scope) => scope.trim());
     }
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/versions/${major}/connection-definitions/${connectionDefinitionId}`, {
+    const response = await fetch(`${API}/apps/${appId}/versions/${major}/connection-definitions/${connectionDefinitionId}`, {
         method: "PUT",
         headers: makeHeaders(token),
         body: JSON.stringify(body),

package/lib/api/auth.js

@@ -0,0 +1,114 @@
+import { Hono } from "hono";
+import { serve } from "@hono/node-server";
+import { randomBytes, createHash } from "crypto";
+import open from "open";
+import { APP } from "../env.js";
+import { findAvailablePort } from "../util/find-available-port.js";
+import { loadAuthToken, saveAuthToken } from "./keychain.js";
+import { z } from "zod";
+const CLIENT_ID = "f881c6f1-82d7-48a5-a581-649596167845";
+const tokenResponseSchema = z.object({
+    access_token: z.string(),
+    token_type: z.string(),
+    expires_in: z.number(),
+});
+async function exchangeCodeForToken(code, codeVerifier, redirectUri) {
+    const tokenUrl = `${APP}/oidc/token`;
+    const params = new URLSearchParams();
+    params.append("grant_type", "authorization_code");
+    params.append("code", code);
+    params.append("client_id", CLIENT_ID);
+    params.append("redirect_uri", redirectUri);
+    params.append("code_verifier", codeVerifier);
+    const response = await fetch(tokenUrl, {
+        method: "POST",
+        headers: {
+            "Content-Type": "application/x-www-form-urlencoded",
+        },
+        body: params.toString(),
+    });
+    if (!response.ok) {
+        const errorText = await response.text();
+        throw new Error(`Token exchange failed: ${response.status} ${errorText}`);
+    }
+    return tokenResponseSchema.parse(await response.json());
+}
+export async function auth() {
+    const existingToken = await loadAuthToken();
+    if (existingToken) {
+        return existingToken;
+    }
+    const verifier = randomBytes(32);
+    const verifierString = verifier.toString("base64url");
+    const hash = createHash("sha256");
+    hash.update(verifier);
+    const challenge = hash.digest();
+    const challengeString = challenge.toString("base64url");
+    const state = randomBytes(32).toString("base64url");
+    const port = await findAvailablePort(3000, 65000);
+    const redirectUri = `http://localhost:${port}`;
+    const { promise: tokenPromise, resolve: resolveToken, reject: rejectToken, } = Promise.withResolvers();
+    const app = new Hono();
+    let serverRef;
+    app.get("/", async (c) => {
+        try {
+            const query = c.req.query();
+            const receivedCode = query.authorization_code;
+            const receivedState = query.state;
+            if (receivedState !== state) {
+                throw new Error("State mismatch - possible CSRF attack");
+            }
+            if (!receivedCode) {
+                throw new Error("No authorization code received");
+            }
+            const tokenResponse = await exchangeCodeForToken(receivedCode, verifierString, redirectUri);
+            setTimeout(() => {
+                serverRef.close();
+            }, 1000);
+            resolveToken(tokenResponse.access_token);
+            return c.html(`
+        <html>
+          <body>
+            <h1>Authentication Successful</h1>
+            <p>You can close this window and return to the CLI.</p>
+            <script>window.close();</script>
+          </body>
+        </html>
+      `);
+        }
+        catch (error) {
+            rejectToken(error instanceof Error ? error : new Error(String(error)));
+            return c.html(`
+        <html>
+          <body>
+            <h1>Authentication Failed</h1>
+            <p>Error: ${error instanceof Error ? error.message : String(error)}</p>
+            <p>Please close this window and try again.</p>
+          </body>
+        </html>
+      `);
+        }
+    });
+    serverRef = serve({
+        fetch: app.fetch,
+        port,
+    });
+    const authUrl = new URL(`${APP}/oidc/authorize`);
+    authUrl.searchParams.append("scope", "openid");
+    authUrl.searchParams.append("response_type", "code");
+    authUrl.searchParams.append("client_id", CLIENT_ID);
+    authUrl.searchParams.append("redirect_uri", redirectUri);
+    authUrl.searchParams.append("state", state);
+    authUrl.searchParams.append("code_challenge", challengeString);
+    authUrl.searchParams.append("code_challenge_method", "S256");
+    await open(authUrl.toString());
+    try {
+        const accessToken = await tokenPromise;
+        await saveAuthToken(accessToken);
+        return accessToken;
+    }
+    catch (error) {
+        serverRef.close();
+        throw error;
+    }
+}

package/lib/api/complete-bundle-upload.js

@@ -5,8 +5,8 @@ import { makeHeaders } from "./make-headers.js";
 const completeBundleUploadSchema = z.object({
     success: z.literal(true),
 });
-export async function completeBundleUpload({ token, developerSlug, appId, devVersionId, bundleId, }) {
-    const response = await fetch(`${API}/developer-accounts/${developerSlug}/apps/${appId}/dev-versions/${devVersionId}/bundles/${bundleId}/complete`, {
+export async function completeBundleUpload({ token, appId, devVersionId, bundleId, }) {
+    const response = await fetch(`${API}/apps/${appId}/dev-versions/${devVersionId}/bundles/${bundleId}/complete`, {
         method: "POST",
         headers: makeHeaders(token),
     });

package/lib/api/complete-prod-bundle-upload.js

@@ -5,8 +5,8 @@ import { makeHeaders } from "./make-headers.js";
 const completeBundleUploadSchema = z.object({
     success: z.literal(true),
 });
-export async function completeProdBundleUpload({ token, developerSlug, appId, bundleId, major, minor, }) {
-    const response = await fetch(`${API}/developer-accounts/${developerSlug}/apps/${appId}/prod-versions/${major}/${minor}/bundles/${bundleId}/complete`, {
+export async function completeProdBundleUpload({ token, appId, bundleId, major, minor, }) {
+    const response = await fetch(`${API}/apps/${appId}/prod-versions/${major}/${minor}/bundles/${bundleId}/complete`, {
         method: "POST",
         headers: makeHeaders(token),
     });

package/lib/api/create-dev-version.js

@@ -6,8 +6,8 @@ const createDevVersionSchema = z.object({
     app_id: z.string(),
     app_dev_version_id: z.string(),
 });
-export async function createDevVersion({ token, devSlug, appId, targetWorkspaceId, environmentVariables, cliVersion, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/dev-versions`, {
+export async function createDevVersion({ token, appId, targetWorkspaceId, environmentVariables, cliVersion, }) {
+    const response = await fetch(`${API}/apps/${appId}/dev-versions`, {
         method: "POST",
         headers: makeHeaders(token),
         body: JSON.stringify({

package/lib/api/create-version.js

@@ -10,8 +10,8 @@ const createVersionSchema = z.object({
     client_bundle_upload_url: z.string(),
     server_bundle_upload_url: z.string(),
 });
-export async function createVersion({ token, devSlug, appId, major, cliVersion, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/prod-versions`, {
+export async function createVersion({ token, appId, major, cliVersion, }) {
+    const response = await fetch(`${API}/apps/${appId}/prod-versions`, {
         method: "POST",
         headers: makeHeaders(token),
         body: JSON.stringify({

package/lib/api/ensure-authed.js

@@ -0,0 +1,24 @@
+import { auth as authApi } from "./auth.js";
+import { deleteAuthToken, loadAuthToken } from "./keychain.js";
+import { whoami } from "./whoami.js";
+async function auth() {
+    process.stdout.write("You need to log in with Attio.\n\n");
+    await deleteAuthToken();
+    return await authApi();
+}
+export async function ensureAuthed() {
+    let token = await loadAuthToken();
+    if (!token) {
+        token = await auth();
+    }
+    try {
+        const user = await whoami({ token });
+        if (!user) {
+            token = await auth();
+        }
+    }
+    catch (error) {
+        return await auth();
+    }
+    return token;
+}

package/lib/api/fetch-connections.js

@@ -10,8 +10,8 @@ const connectionDefinitionsResponseSchema = z.object({
         global: z.boolean(),
     })),
 });
-export async function fetchConnections({ token, devSlug, appId, major, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/versions/${major}/connection-definitions`, {
+export async function fetchConnections({ token, appId, major, }) {
+    const response = await fetch(`${API}/apps/${appId}/versions/${major}/connection-definitions`, {
         method: "GET",
         headers: makeHeaders(token),
     });

package/lib/api/fetch-installation.js

@@ -8,8 +8,8 @@ const installationSchema = z.object({
     app_id: z.string().uuid(),
     installation_id: z.string().uuid(),
 });
-export async function fetchInstallation({ token, devSlug, appId, workspaceId, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/workspace/${workspaceId}/dev-installation`, {
+export async function fetchInstallation({ token, appId, workspaceId, }) {
+    const response = await fetch(`${API}/apps/${appId}/workspace/${workspaceId}/dev-installation`, {
         method: "GET",
         headers: makeHeaders(token),
     });

package/lib/api/fetch-versions.js

@@ -31,8 +31,8 @@ function onlyPublishableVersions(versions) {
             (v.major === highestPublishedVersion.major &&
                 v.minor > highestPublishedVersion.minor)));
 }
-export async function fetchVersions({ token, devSlug, appId, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/prod-versions`, {
+export async function fetchVersions({ token, appId, }) {
+    const response = await fetch(`${API}/apps/${appId}/prod-versions`, {
         method: "GET",
         headers: makeHeaders(token),
     });

package/lib/api/keychain.js

@@ -0,0 +1,30 @@
+let keytar = null;
+if (process.env.NODE_ENV !== "test") {
+    try {
+        keytar = (await import("keytar")).default;
+    }
+    catch (e) {
+        console.warn("Keychain functionality not available");
+    }
+}
+const SERVICE_NAME = "attio-cli";
+const ACCOUNT_NAME = "developer";
+export async function saveAuthToken(token) {
+    if (!keytar) {
+        return;
+    }
+    await keytar.setPassword(SERVICE_NAME, ACCOUNT_NAME, token);
+}
+export async function loadAuthToken() {
+    if (!keytar) {
+        return "TEST";
+    }
+    const token = await keytar.getPassword(SERVICE_NAME, ACCOUNT_NAME);
+    return token || null;
+}
+export async function deleteAuthToken() {
+    if (!keytar) {
+        return true;
+    }
+    return await keytar.deletePassword(SERVICE_NAME, ACCOUNT_NAME);
+}

package/lib/api/load-app-id.js

@@ -0,0 +1,9 @@
+import { loadAppConfigFile } from "../util/app-config.js";
+export function loadAppId() {
+    const appConfig = loadAppConfigFile();
+    if (typeof appConfig === "string") {
+        process.stderr.write(`❌ App config not found\n\n${appConfig}\n`);
+        process.exit(1);
+    }
+    return appConfig.id;
+}

package/lib/api/load-dev-slug.js

@@ -0,0 +1,9 @@
+import { loadDeveloperConfig } from "../util/load-developer-config.js";
+export async function loadDevSlug() {
+    const devConfig = await loadDeveloperConfig();
+    if (typeof devConfig === "string") {
+        process.stderr.write(`❌ Developer config not found\n\n${devConfig}\n`);
+        process.exit(1);
+    }
+    return devConfig.developer_slug;
+}

package/lib/api/make-headers.js

@@ -1,6 +1,6 @@
 export function makeHeaders(token) {
     return {
-        "x-attio-platform": "web-app",
+        "x-attio-platform": "developer-cli",
         "Authorization": `Bearer ${token}`,
         "Content-Type": "application/json",
     };

package/lib/api/remove-connection-definition.js

@@ -1,8 +1,8 @@
 import { API } from "../env.js";
 import { handleError } from "./handle-error.js";
 import { makeHeaders } from "./make-headers.js";
-export async function removeConnectionDefinition({ token, devSlug, appId, global, major, }) {
-    const response = await fetch(`${API}/developer-accounts/${devSlug}/apps/${appId}/versions/${major}/connection-definitions/${global ? "workspace" : "user"}/remove`, {
+export async function removeConnectionDefinition({ token, appId, global, major, }) {
+    const response = await fetch(`${API}/apps/${appId}/versions/${major}/connection-definitions/${global ? "workspace" : "user"}/remove`, {
         method: "DELETE",
         headers: makeHeaders(token),
     });

package/lib/api/start-upload.js

@@ -8,8 +8,8 @@ const startUploadSchema = z.object({
     client_bundle_upload_url: z.string(),
     server_bundle_upload_url: z.string(),
 });
-export async function startUpload({ token, developerSlug, appId, devVersionId, }) {
-    const response = await fetch(`${API}/developer-accounts/${developerSlug}/apps/${appId}/dev-versions/${devVersionId}/bundles`, {
+export async function startUpload({ token, appId, devVersionId, }) {
+    const response = await fetch(`${API}/apps/${appId}/dev-versions/${devVersionId}/bundles`, {
         method: "POST",
         headers: makeHeaders(token),
     });

package/lib/api/whoami.js

@@ -0,0 +1,21 @@
+import { z } from "zod";
+import { APP } from "../env.js";
+import { handleError } from "./handle-error.js";
+import { makeHeaders } from "./make-headers.js";
+const whoamiSchema = z.object({
+    user: z.object({
+        id: z.string(),
+        email_address: z.string(),
+        name: z.object({
+            full: z.string(),
+        }),
+    }),
+});
+export async function whoami({ token }) {
+    const response = await fetch(`${APP}/api/auth/whoami`, {
+        method: "GET",
+        headers: makeHeaders(token),
+    });
+    await handleError(response);
+    return whoamiSchema.parse(await response.json()).user;
+}

package/lib/attio.js

@@ -3,8 +3,10 @@ import { Command } from "commander";
 import { init } from "./commands/init.js";
 import { build } from "./commands/build.js";
 import { dev } from "./commands/dev.js";
-import { connection } from "./commands/connection/index.js";
 import { version } from "./commands/version/index.js";
+import { login } from "./commands/login.js";
+import { logout } from "./commands/logout.js";
+import { whoami } from "./commands/whoami.js";
 const program = new Command();
 program
     .name("attio")
@@ -13,6 +15,8 @@ program
     .addCommand(init)
     .addCommand(build)
     .addCommand(dev)
-    .addCommand(connection)
     .addCommand(version)
+    .addCommand(login)
+    .addCommand(logout)
+    .addCommand(whoami)
     .parse();

package/lib/commands/login.js

@@ -0,0 +1,11 @@
+import { Command } from "commander";
+import { auth as authApi } from "../api/auth.js";
+export const login = new Command("login").description("Authenticate with Attio").action(() => {
+    authApi()
+        .then((token) => {
+        process.stdout.write("🔓 Successfully authenticated.\n");
+    })
+        .catch((error) => {
+        process.stderr.write(`❌ Authentication failed\n\n${error}\n`);
+    });
+});

package/lib/commands/logout.js

@@ -0,0 +1,11 @@
+import { Command } from "commander";
+import { deleteAuthToken } from "../api/keychain.js";
+export const logout = new Command("logout").description("Log out from Attio").action(() => {
+    deleteAuthToken()
+        .then(() => {
+        process.stdout.write("🔒 Successfully logged out.\n");
+    })
+        .catch((error) => {
+        process.stderr.write(`❌ Logout failed\n\n${error}\n`);
+    });
+});

package/lib/commands/version/index.js

@@ -1,9 +1,7 @@
 import { Command } from "commander";
 import { versionCreate } from "./create.js";
 import { versionList } from "./list.js";
-import { versionPublish } from "./publish.js";
 export const version = new Command("version")
     .description("Manage app versions")
     .addCommand(versionCreate)
-    .addCommand(versionList)
-    .addCommand(versionPublish);
+    .addCommand(versionList);

package/lib/commands/version/list.js

@@ -1,21 +1,35 @@
-import { Command, Option } from "commander";
-import { createActor } from "xstate";
-import { z } from "zod";
-import { listVersionsMachine } from "../../machines/list-versions-machine.js";
-export const optionsSchema = z.object({
-    dev: z.boolean().default(false),
-});
+import { Command } from "commander";
+import { fetchVersions } from "../../api/fetch-versions.js";
+import Table from "cli-table3";
+import chalk from "chalk";
+import formatDate from "date-fns/format/index.js";
+import { loadAppId } from "../../api/load-app-id.js";
+import { loadDevSlug } from "../../api/load-dev-slug.js";
+import { ensureAuthed } from "../../api/ensure-authed.js";
 export const versionList = new Command("list")
     .description("List all versions of your Attio app")
-    .addOption(new Option("--dev", "Run in development mode (additional debugging info)"))
     .alias("ls")
-    .action((unparsedOptions) => {
-    const options = optionsSchema.parse(unparsedOptions);
-    const actor = createActor(listVersionsMachine);
-    if (options.dev) {
-        actor.subscribe((state) => {
-            console.log("state:", state.value);
-        });
-    }
-    actor.start();
+    .action(async () => {
+    const token = await ensureAuthed();
+    const [appId, devSlug] = await Promise.all([loadAppId(), loadDevSlug()]);
+    const versions = await fetchVersions({
+        token,
+        devSlug,
+        appId,
+    });
+    const table = new Table({
+        head: ["Version", "Published", "Installations", "Created"].map((h) => chalk.bold(h)),
+        style: {
+            head: [],
+            border: [],
+        },
+        colAligns: ["center", "center", "right", "left"],
+    });
+    table.push(...versions.map((version) => [
+        `${version.major}.${version.minor}`,
+        version.is_published ? "Yes" : "No",
+        version.num_installations.toLocaleString(),
+        formatDate(new Date(version.created_at), "MMMM d, yyyy, HH:mm"),
+    ]));
+    process.stdout.write(table.toString());
 });

package/lib/commands/whoami.js

@@ -0,0 +1,19 @@
+import { Command } from "commander";
+import { auth as authApi } from "../api/auth.js";
+import { whoami as whoamiApi } from "../api/whoami.js";
+export const whoami = new Command("whoami")
+    .description("Identify the current user")
+    .action(async () => {
+    const token = await authApi();
+    if (!token) {
+        process.stdout.write("🔒 Not logged in.\n");
+        return;
+    }
+    try {
+        const user = await whoamiApi({ token });
+        process.stdout.write(`👤 ${user.name.full} (${user.email_address})\n`);
+    }
+    catch (error) {
+        process.stderr.write(`❌ User lookup failed\n\n${error}\n`);
+    }
+});

package/lib/graphql/graphql-error.js

@@ -1,5 +1,8 @@
 import { codeFrameColumns } from "@babel/code-frame";
 export class GraphQLError extends Error {
+    locations;
+    source;
+    filename;
     constructor(message, locations, source, filename) {
         super(message);
         this.locations = locations;

package/lib/machines/actors.js

@@ -4,6 +4,7 @@ import { fromCallback, fromPromise } from "xstate";
 import { loadAppConfigFile } from "../util/app-config.js";
 import { loadDeveloperConfig as loadDeveloperConfigFile } from "../util/load-developer-config.js";
 import Spinner from "tiny-spinner";
+import { ensureAuthed } from "../api/ensure-authed.js";
 export const loadDeveloperConfig = fromCallback(({ sendBack }) => {
     const load = async () => {
         const config = await loadDeveloperConfigFile();
@@ -11,9 +12,10 @@ export const loadDeveloperConfig = fromCallback(({ sendBack }) => {
             sendBack({ type: "No Developer Config", configError: config });
             return;
         }
+        const token = await ensureAuthed();
         sendBack({
             type: "Developer Config Loaded",
-            token: config.token,
+            token,
             slug: config.developer_slug,
         });
     };

package/lib/machines/dev-machine.js

@@ -25,6 +25,7 @@ import { printInstallInstructions } from "../util/print-install-instructions.js"
 import { printLogo } from "./actions.js";
 import { askWithTypedChoices, fromCallbackWithErrorHandling } from "./actors.js";
 import { fetchWorkspaces } from "../api/fetch-workspaces.js";
+import { ensureAuthed } from "../api/ensure-authed.js";
 process.on("SIGINT", () => {
     process.stdout.write("\x1B[?25h");
     process.exit();
@@ -59,7 +60,9 @@ export const devMachine = setup({
                 sendBack({ type: "Initialization Error", error: config });
                 return;
             }
-            sendBack({ type: "Initialized", config });
+            ensureAuthed().then((token) => {
+                sendBack({ type: "Initialized", config: { ...config, token } });
+            });
         }),
         "keyboard": fromCallbackWithErrorHandling(({ sendBack }) => {
             if (!process.stdin.isTTY)
@@ -129,7 +132,7 @@ export const devMachine = setup({
                 if (typeof packageJson === "string")
                     throw packageJson;
                 const devVersion = await createDevVersion({
-                    token: config.token,
+                    token: await ensureAuthed(),
                     devSlug: config.developer_slug,
                     appId: app.id,
                     targetWorkspaceId: config.target_workspace_id,

package/lib/machines/init-machine.js

@@ -13,6 +13,7 @@ import chalk from "chalk";
 import boxen from "boxen";
 import { printInstallInstructions } from "../util/print-install-instructions.js";
 import { getAppInfo } from "../api/get-app-info.js";
+import { ensureAuthed } from "../api/ensure-authed.js";
 export const languages = [
     { name: "TypeScript (recommended)", value: "typescript" },
     { name: "JavaScript", value: "javascript" },
@@ -75,9 +76,10 @@ export const initMachine = setup({
                     sendBack({ type: "No Config", configError: config });
                     return;
                 }
+                const token = await ensureAuthed();
                 sendBack({
                     type: "Config Loaded",
-                    token: config.token,
+                    token,
                     developerSlug: config.developer_slug,
                 });
             };
@@ -86,13 +88,18 @@ export const initMachine = setup({
         loadAppInfo: fromPromise(async ({ input: { token, developerSlug, appSlug } }) => {
             const spinner = new Spinner();
             spinner.start("Loading app information...");
-            const appInfo = await getAppInfo({ token, developerSlug, appSlug });
-            if (appInfo === null) {
-                spinner.error("App not found");
-                return null;
+            try {
+                const appInfo = await getAppInfo({ token, developerSlug, appSlug });
+                if (appInfo === null) {
+                    spinner.error("App not found");
+                    return null;
+                }
+                spinner.success(`App found: ${appInfo.title}`);
+                return appInfo;
+            }
+            finally {
+                spinner.stop();
             }
-            spinner.success(`App found: ${appInfo.title}`);
-            return appInfo;
         }),
     },
     actions: {

package/lib/templates/javascript/src/cat-fact.jsx

@@ -0,0 +1,16 @@
+import React from "react"
+import {TextBlock, useAsyncCache} from "attio/client"
+import getCatFact from "./get-cat-fact.server"
+
+export function CatFact({recordId}) {
+  // By passing in the recordId, the result will be cached for each recordId
+  const {
+    values: {catFact},
+    //       ^^^^^^^– this key matches
+    //               vvvvvvv– this key
+  } = useAsyncCache({catFact: [getCatFact, recordId]})
+  //                           ^^^^^^^^^^  ^^^^^^^^
+  //                           async fn    parameter(s)
+
+  return <TextBlock align="center">{`"${catFact}"`}</TextBlock>
+}

package/lib/templates/javascript/src/get-cat-fact.server.js

@@ -0,0 +1,6 @@
+export default async function getCatFact(recordId) {
+    // We don't really need the recordId for this API, but this is how we could use a parameter
+    const response = await fetch(`https://catfact.ninja/fact?${recordId}`)
+    const data = await response.json()
+    return data.fact
+}

package/lib/templates/javascript/src/hello-world-dialog.jsx

@@ -1,10 +1,11 @@
 import React from "react"
 import {TextBlock} from "attio/client"
-import {Advice} from "./advice"
+import {CatFact} from "./cat-fact"
 
-const Loading = () => <TextBlock>Loading advice...</TextBlock>
+const Loading = () => <TextBlock>Loading cat fact...</TextBlock>
 
-export function HelloWorldDialog ({recordId}) {
+export function HelloWorldDialog({recordId}) {
+    // A simple counter to demonstrate that this is just regular React code.
     const [seconds, setSeconds] = React.useState(0)
     React.useEffect(() => {
         const timeout = setTimeout(() => setSeconds(seconds + 1), 1000)
@@ -16,9 +17,9 @@ export function HelloWorldDialog ({recordId}) {
             <TextBlock align="left">
                 I am a dialog. I have been open for: {seconds} second{seconds === 1 ? "" : "s"}
             </TextBlock>
-            {/* The hook in Advice will suspend until the advice is loaded. */}
+            {/* The hook in CatFact will suspend until the cat fact is loaded. */}
             <React.Suspense fallback={<Loading />}>
-                <Advice recordId={recordId} />
+                <CatFact recordId={recordId} />
             </React.Suspense>
         </>
     )