Add error modal when you run out of tokens

components/programs/Alert.module.css

@@ -24,4 +24,5 @@
   display: flex;
   justify-content: flex-end;
   margin-top: 16px;
+  gap: 8px;
 }

components/programs/Alert.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import styles from "./Alert.module.css";
 import { useSetAtom, useAtomValue } from "jotai";
 import { windowsListAtom } from "@/state/windowsList";
@@ -19,7 +19,18 @@ export function Alert({ id }: { id: string }) {
     return null;
   }
 
-  const { message, icon } = windowState.program;
+  const { message, icon, actions } = windowState.program;
+
+  const renderActions = () => {
+    if (actions && actions.length > 0) {
+      return actions.map((action, index) => (
+        <button key={index} onClick={() => action.callback(handleClose)}>
+          {action.label}
+        </button>
+      ));
+    }
+    return <button onClick={handleClose}>OK</button>;
+  };
 
   return (
     <div className={styles.alertContainer}>
@@ -31,9 +42,7 @@ export function Alert({ id }: { id: string }) {
         )}
         <div className={styles.alertMessage}>{message}</div>
       </div>
-      <div className={styles.alertActions}>
-        <button onClick={handleClose}>OK</button>
-      </div>
+      <div className={styles.alertActions}>{renderActions()}</div>
     </div>
   );
 }

components/programs/Iframe.tsx

@@ -9,6 +9,7 @@ import { getURLForProgram } from "@/lib/getURLForProgram";
 import { getSettings } from "@/lib/getSettings";
 import { settingsAtom } from "@/state/settings";
 import wrappedFetch from "@/lib/wrappedFetch";
+import { showUpsell } from "@/lib/showUpsell";
 
 export function Iframe({ id }: { id: string }) {
   const window = useAtomValue(windowAtomFamily(id));
@@ -163,6 +164,9 @@ function IframeInner({ id }: { id: string }) {
       src={!program?.code ? url : undefined}
       srcDoc={program?.code || undefined}
       style={{ width: "100%", flexGrow: 1, border: "none" }}
+      onError={() => {
+        showUpsell();
+      }}
       onLoad={() => {
         assert(state.program.type === "iframe", "Program is not an iframe");
 

lib/alert.ts

@@ -1,16 +1,17 @@
 import { createWindow } from "@/lib/createWindow";
 import { getDefaultStore } from "jotai";
-import { WindowState } from "@/state/window";
+import { AlertAction, WindowState } from "@/state/window";
 import { allWindowsAtom } from "@/state/allWindows";
 import { ReactNode } from "react";
 
 type AlertOptions = {
   message: ReactNode;
   alertId?: string;
   icon?: "x";
+  actions?: AlertAction[];
 };
 
-export function alert({ message, alertId, icon }: AlertOptions) {
+export function alert({ message, alertId, icon, actions }: AlertOptions) {
   const store = getDefaultStore();
   const existingWindows = store.get(allWindowsAtom);
 
@@ -27,19 +28,16 @@ export function alert({ message, alertId, icon }: AlertOptions) {
 
   createWindow({
     title: "Alert",
+    size: {
+      width: 400,
+      height: "auto",
+    },
     program: {
       type: "alert",
       message,
       alertId,
       icon,
+      actions,
     },
   });
 }
-
-declare global {
-  interface Window {
-    myAlert: typeof alert;
-  }
-}
-
-window.myAlert = alert;

lib/showUpsell.tsx

@@ -0,0 +1,48 @@
+import { settingsAtom } from "@/state/settings";
+import { getDefaultStore } from "jotai";
+import { alert } from "./alert";
+
+export function showUpsell() {
+  alert({
+    alertId: "OUT_OF_CREDITS",
+    message: (
+      <div style={{ display: "flex", flexDirection: "column", gap: "8px" }}>
+        <p>
+          You&apos;ve used all your available tokens for high-quality
+          generations with Claude 3.5 Sonnet.
+        </p>
+        <p>To continue using Windows 9X, you have two options:</p>
+        <ul style={{ paddingLeft: "20px", marginTop: "4px" }}>
+          <li>Purchase additional quality tokens</li>
+          <li>Switch to our free model (with reduced capabilities)</li>
+        </ul>
+      </div>
+    ),
+    icon: "x",
+    actions: [
+      {
+        label: "Use Free Model",
+        callback: (close) => {
+          getDefaultStore().set(settingsAtom, {
+            ...getDefaultStore().get(settingsAtom),
+            model: "cheap",
+          });
+          close();
+        },
+      },
+      {
+        label: "Get Tokens",
+        callback: (close) => {
+          const form = document.createElement("form");
+          form.method = "POST";
+          form.action = "/api/checkout";
+          form.target = "_blank";
+          document.body.appendChild(form);
+          form.submit();
+          document.body.removeChild(form);
+          close();
+        },
+      },
+    ],
+  });
+}

lib/wrappedFetch.ts → lib/wrappedFetch.tsx

@@ -1,11 +1,13 @@
+import { showUpsell } from "./showUpsell";
+
 export async function wrappedFetch(
   input: RequestInfo | URL,
   init?: RequestInit
 ): Promise<Response> {
   try {
     const response = await fetch(input, init);
     if (!response.ok && response.status === 402) {
-      // TODO: show an alert to the user.
+      showUpsell();
     }
     return response;
   } catch (error) {

state/window.tsx

@@ -18,8 +18,18 @@ export type Program =
       action?: (path: string) => void;
       actionText?: string;
     }
-  | { type: "alert"; message: ReactNode; alertId?: string; icon?: "x" };
+  | {
+      type: "alert";
+      message: ReactNode;
+      alertId?: string;
+      icon?: "x";
+      actions?: AlertAction[];
+    };
 
+export type AlertAction = {
+  label: string;
+  callback: (close: () => void) => void;
+};
 export type WindowState = {
   status: "maximized" | "minimized" | "normal";
   pos: {