@learnpack/learnpack 5.0.355 → 5.0.357

package/src/creator/src/utils/completionResult.ts

@@ -0,0 +1,154 @@
+/**
+ * Interpretation of the completion payloads Rigobot delivers over the socket.
+ *
+ * Course generation is asynchronous: `publicInteractiveCreation` gets a 201 back
+ * with a pending job, and the real outcome arrives later through the webhook the
+ * CLI relays. A 2xx on the initial POST therefore says nothing about success —
+ * the job can still fail against the LLM provider and reach us as
+ * `{ status: "ERROR", status_text: "...", parsed: null }`.
+ *
+ * Every consumer used to read `payload.parsed.listOfSteps` directly, which threw
+ * a TypeError inside the socket.io listener and left the UI on its loading
+ * screen forever. Everything now goes through `interpretCompletionPayload`, which
+ * never throws and always returns a branch the caller has to handle.
+ */
+
+export type TCompletionErrorCode =
+  | "QUOTA_EXCEEDED"
+  | "RATE_LIMITED"
+  | "PROVIDER_UNAVAILABLE"
+  | "MALFORMED_RESPONSE"
+  | "TIMEOUT"
+  | "UNKNOWN";
+
+/** The shape the syllabus screens consume, with every field guaranteed present. */
+export type TSyllabusPayload = {
+  listOfSteps: string[];
+  title: string;
+  description: string;
+  languageCode: string;
+  technologies: string[];
+  aiMessage: string;
+};
+
+export type TCompletionResult =
+  | { ok: true; parsed: TSyllabusPayload }
+  | { ok: false; code: TCompletionErrorCode; detail: string };
+
+/**
+ * i18n key per failure code.
+ *
+ * Declared as a total Record rather than a lookup with a fallback: adding a code
+ * to the union without deciding what the user is told then fails the build,
+ * instead of quietly rendering a raw key or an empty toast.
+ */
+export const COMPLETION_ERROR_I18N_KEY: Record<TCompletionErrorCode, string> = {
+  QUOTA_EXCEEDED: "completionError.quotaExceeded",
+  RATE_LIMITED: "completionError.rateLimited",
+  PROVIDER_UNAVAILABLE: "completionError.providerUnavailable",
+  MALFORMED_RESPONSE: "completionError.malformedResponse",
+  TIMEOUT: "completionError.timeout",
+  UNKNOWN: "completionError.unknown",
+};
+
+/**
+ * Which failure a Rigobot `status_text` describes.
+ *
+ * The provider errors reach us as the string body of an OpenAI-compatible SDK
+ * exception, so matching is by substring and deliberately loose. The quota case
+ * is the one worth naming: it is not transient, and telling the user to retry
+ * would be wrong.
+ * @param statusText - The `status_text` field of an errored completion job.
+ * @returns The failure code the message describes.
+ */
+const classifyStatusText = (statusText: string): TCompletionErrorCode => {
+  const text = statusText.toLowerCase();
+
+  if (
+    text.includes("permission-denied") ||
+    text.includes("credit") ||
+    text.includes("spending limit") ||
+    text.includes("quota")
+  ) {
+    return "QUOTA_EXCEEDED";
+  }
+
+  if (text.includes("rate limit") || text.includes("429")) {
+    return "RATE_LIMITED";
+  }
+
+  if (
+    text.includes("unavailable") ||
+    text.includes("timeout") ||
+    text.includes("timed out") ||
+    /\b5\d{2}\b/.test(text)
+  ) {
+    return "PROVIDER_UNAVAILABLE";
+  }
+
+  return "UNKNOWN";
+};
+
+const asString = (value: unknown): string =>
+  typeof value === "string" ? value : "";
+
+const asStringArray = (value: unknown): string[] =>
+  Array.isArray(value) ? value.filter((item) => typeof item === "string") : [];
+
+/**
+ * Turns a raw notification payload into a result the caller must branch on.
+ *
+ * Never throws: anything unrecognisable comes back as `MALFORMED_RESPONSE`
+ * rather than as an exception inside a socket listener, where nothing catches it.
+ * @param payload - Whatever arrived over the socket.
+ * @returns The parsed syllabus, or the failure to report.
+ */
+export function interpretCompletionPayload(
+  payload: unknown
+): TCompletionResult {
+  if (typeof payload !== "object" || payload === null) {
+    return {
+      ok: false,
+      code: "MALFORMED_RESPONSE",
+      detail: `Expected an object, received ${typeof payload}`,
+    };
+  }
+
+  const job = payload as Record<string, unknown>;
+
+  if (job.status === "ERROR") {
+    const detail = asString(job.status_text) || "No status text provided";
+    return { ok: false, code: classifyStatusText(detail), detail };
+  }
+
+  const parsed = job.parsed;
+
+  // Also covers a SUCCESS job whose output degenerated: the syllabus screens
+  // cannot render without a list of steps, so it is a malformed response
+  // regardless of what the job status claims.
+  if (
+    typeof parsed !== "object" ||
+    parsed === null ||
+    !Array.isArray((parsed as Record<string, unknown>).listOfSteps)
+  ) {
+    return {
+      ok: false,
+      code: "MALFORMED_RESPONSE",
+      detail: "The completion carried no list of steps",
+    };
+  }
+
+  const fields = parsed as Record<string, unknown>;
+
+  return {
+    ok: true,
+    parsed: {
+      listOfSteps: asStringArray(fields.listOfSteps),
+      title: asString(fields.title),
+      description: asString(fields.description),
+      languageCode: asString(fields.languageCode),
+      technologies: asStringArray(fields.technologies),
+      aiMessage: asString(fields.aiMessage),
+    },
+  };
+}

package/src/creator/src/utils/constants.ts

@@ -1,13 +1,26 @@
-export const DEV_MODE = false
+export const DEV_MODE = false;
 
 export const RIGOBOT_HOST = DEV_MODE
   ? "https://rigobot-test-cca7d841c9d8.herokuapp.com"
   : // "https://8000-charlytoc-rigobot-bmwdeam7cev.ws-us120.gitpod.io"
-    "https://rigobot.herokuapp.com"
+    "https://rigobot.herokuapp.com";
 
 export const BREATHECODE_HOST = DEV_MODE
   ? "https://breathecode-test.herokuapp.com"
-  : "https://breathecode.herokuapp.com"
+  : "https://breathecode.herokuapp.com";
+
+/**
+ * How long to wait for a completion notification before giving up.
+ *
+ * The trade-off runs both ways. Too long and a user whose notification is never
+ * coming stares at a spinner; too short and a slow but healthy job is reported
+ * as a failure, because giving up also unsubscribes — a result arriving after
+ * the deadline is lost even though the server produced it.
+ *
+ * A minute is the agreed ceiling. If timeouts start showing up on generations
+ * that actually succeed, raise this rather than making the user retry.
+ */
+export const COMPLETION_TIMEOUT_MS = 60_000;
 
 export const RIGO_FLOAT_GIF =
-  "https://raw.githubusercontent.com/learnpack/ide/20ed3f4c3ead9b33d5d6acb20154dcd93a0ec4af/public/rigo-float.gif"
+  "https://raw.githubusercontent.com/learnpack/ide/20ed3f4c3ead9b33d5d6acb20154dcd93a0ec4af/public/rigo-float.gif";

package/src/creator/src/utils/socket.test.ts

@@ -0,0 +1,113 @@
+import { describe, it, expect, vi, beforeEach } from "vitest";
+
+const mocks = vi.hoisted(() => {
+  const created: Array<Record<string, ReturnType<typeof vi.fn>>> = [];
+
+  const io = vi.fn(() => {
+    const socket = {
+      on: vi.fn(),
+      off: vi.fn(),
+      emit: vi.fn(),
+      connect: vi.fn(),
+      disconnect: vi.fn(),
+    };
+    created.push(socket);
+    return socket;
+  });
+
+  return { io, created };
+});
+
+vi.mock("socket.io-client", () => ({ io: mocks.io }));
+
+import CreatorSocket from "./socket";
+
+const lastSocket = () => mocks.created[mocks.created.length - 1];
+
+describe("CreatorSocket", () => {
+  beforeEach(() => {
+    mocks.io.mockClear();
+    mocks.created.length = 0;
+  });
+
+  it("opens one connection and reuses it for further subscribers", () => {
+    const client = new CreatorSocket("");
+
+    client.subscribe("notification-1", vi.fn());
+    client.subscribe("notification-2", vi.fn());
+
+    expect(mocks.io).toHaveBeenCalledTimes(1);
+    expect(client.subscriptionCount()).toBe(2);
+  });
+
+  it("registers the channel with the server", () => {
+    const client = new CreatorSocket("");
+    const callback = vi.fn();
+
+    client.subscribe("notification-1", callback);
+
+    expect(lastSocket().on).toHaveBeenCalledWith("notification-1", callback);
+    expect(lastSocket().emit).toHaveBeenCalledWith("registerNotification", {
+      notificationId: "notification-1",
+    });
+  });
+
+  // The bug: disconnect() used to close the shared socket for everybody, so
+  // unmounting one uploaded-file card killed the subscription the wizard was
+  // waiting on.
+  it("keeps the connection open while another subscriber remains", () => {
+    const client = new CreatorSocket("");
+    const releaseFirst = client.subscribe("notification-1", vi.fn());
+    client.subscribe("notification-2", vi.fn());
+
+    releaseFirst();
+
+    expect(lastSocket().off).toHaveBeenCalledTimes(1);
+    expect(lastSocket().disconnect).not.toHaveBeenCalled();
+    expect(client.subscriptionCount()).toBe(1);
+  });
+
+  it("closes the connection when the last subscriber leaves", () => {
+    const client = new CreatorSocket("");
+    const releaseFirst = client.subscribe("notification-1", vi.fn());
+    const releaseSecond = client.subscribe("notification-2", vi.fn());
+
+    releaseFirst();
+    releaseSecond();
+
+    expect(lastSocket().disconnect).toHaveBeenCalledTimes(1);
+    expect(client.subscriptionCount()).toBe(0);
+  });
+
+  it("ignores a repeated unsubscribe instead of miscounting", () => {
+    const client = new CreatorSocket("");
+    const release = client.subscribe("notification-1", vi.fn());
+    client.subscribe("notification-2", vi.fn());
+
+    release();
+    release();
+
+    expect(client.subscriptionCount()).toBe(1);
+    expect(lastSocket().disconnect).not.toHaveBeenCalled();
+  });
+
+  it("opens a fresh connection after the previous one was closed", () => {
+    const client = new CreatorSocket("");
+
+    client.subscribe("notification-1", vi.fn())();
+    client.subscribe("notification-2", vi.fn());
+
+    expect(mocks.io).toHaveBeenCalledTimes(2);
+    expect(client.subscriptionCount()).toBe(1);
+  });
+
+  it("does not connect for an empty notification id", () => {
+    const client = new CreatorSocket("");
+
+    const release = client.subscribe("", vi.fn());
+
+    expect(mocks.io).not.toHaveBeenCalled();
+    expect(client.subscriptionCount()).toBe(0);
+    expect(() => release()).not.toThrow();
+  });
+});

package/src/creator/src/utils/socket.ts

@@ -1,61 +1,84 @@
-import { io, Socket } from "socket.io-client"
+import { io, Socket } from "socket.io-client";
 
-type EventCallback = (...args: any[]) => void
+type EventCallback = (...args: any[]) => void;
 
+/**
+ * A socket.io connection shared by every notification listener in the app.
+ *
+ * The connection is shared but its lifetime is not owned by any one caller,
+ * which the previous API got wrong: `disconnect()` tore down the socket for
+ * everybody, so unmounting one uploaded-file card killed the subscription the
+ * wizard was waiting on. Callers now get an unsubscribe function that only
+ * releases their own listener, and the socket closes when the last one goes.
+ */
 class CreatorSocket {
-  private socket: Socket | null = null
-  private readonly url: string
+  private socket: Socket | null = null;
+
+  private subscriptions = 0;
+
+  private readonly url: string;
 
   constructor(url: string) {
-    this.url = url
+    this.url = url;
   }
 
   /**
-   * Conecta manualmente al servidor de websockets
+   * Listens for one notification, connecting on the first subscriber.
+   * @param notificationId - Channel to join; also the event name the server emits.
+   * @param callback - Called with the notification payload.
+   * @returns Releases this subscription, and the socket once it is the last one.
    */
-  connect() {
-    if (this.socket) return
-    this.socket = io(this.url, { autoConnect: false, path: "/sockete" })
-    this.socket.connect()
-  }
+  subscribe(notificationId: string, callback: EventCallback): () => void {
+    if (!notificationId) {
+      return () => {};
+    }
 
-  /**
-   * Desconecta del servidor
-   */
-  disconnect() {
-    if (this.socket) {
-      this.socket.disconnect()
-      this.socket = null
+    if (!this.socket) {
+      this.socket = io(this.url, { autoConnect: false, path: "/sockete" });
+      this.socket.connect();
     }
-  }
 
-  /**
-   * Verifica si está conectado
-   */
-  isConnected(): boolean {
-    return !!this.socket?.connected
-  }
+    // Captured so a late unsubscribe cannot act on a socket that has since been
+    // replaced by a newer connection.
+    const socket = this.socket;
 
-  /**
-   * Registra un evento personalizado
-   */
-  on(event: string, callback: EventCallback) {
-    this.socket?.on(event, callback)
+    socket.on(notificationId, callback);
+    socket.emit("registerNotification", { notificationId });
+    this.subscriptions += 1;
+
+    let released = false;
+
+    return () => {
+      if (released) {
+        return;
+      }
+      released = true;
+
+      socket.off(notificationId, callback);
+      this.subscriptions -= 1;
+
+      if (this.subscriptions === 0 && this.socket === socket) {
+        socket.disconnect();
+        this.socket = null;
+      }
+    };
   }
 
   /**
-   * Emite un evento al servidor
+   * Whether the shared connection is currently open.
+   * @returns True while connected.
    */
-  emit(event: string, ...args: any[]) {
-    this.socket?.emit(event, ...args)
+  isConnected(): boolean {
+    return Boolean(this.socket?.connected);
   }
 
   /**
-   * Elimina un evento registrado
+   * How many live subscriptions the connection is serving.
+   * @returns The current subscriber count.
    */
-  off(event: string, callback?: EventCallback) {
-    this.socket?.off(event, callback)
+  subscriptionCount(): number {
+    return this.subscriptions;
   }
 }
 
-export default CreatorSocket
+export default CreatorSocket;

package/src/creator/src/utils/store.ts

@@ -1,77 +1,77 @@
-import { create } from "zustand"
-import { persist } from "zustand/middleware"
-import { Lesson } from "../components/LessonItem"
-import { ParsedFile } from "../components/FileUploader"
-import { TMessage } from "../components/Message"
+import { create } from "zustand";
+import { persist } from "zustand/middleware";
+import { Lesson } from "../components/LessonItem";
+import { ParsedFile } from "../components/FileUploader";
+import { TMessage } from "../components/Message";
 // import { ParsedLink } from "../components/LinkUploader"
-export type TDifficulty = "easy" | "beginner" | "intermediate" | "hard"
+export type TDifficulty = "easy" | "beginner" | "intermediate" | "hard";
 
 export type FormState = {
-  description: string
-  duration: number
-  hasContentIndex: boolean
-  contentIndex: string
-  purpose: string
-  difficulty: TDifficulty
-  slug: string
-  language?: string
-  isCompleted: boolean
-  variables: string[]
-  currentStep: string
-  title?: string
-  technologies?: string[]
-}
+  description: string;
+  duration: number;
+  hasContentIndex: boolean;
+  contentIndex: string;
+  purpose: string;
+  difficulty: TDifficulty;
+  slug: string;
+  language?: string;
+  isCompleted: boolean;
+  variables: string[];
+  currentStep: string;
+  title?: string;
+  technologies?: string[];
+};
 
 type Auth = {
-  bcToken: string
-  rigoToken: string
-  userId: string
-  user: any
-  publicToken: string
-}
+  bcToken: string;
+  rigoToken: string;
+  userId: string;
+  user: any;
+  publicToken: string;
+};
 export type Syllabus = {
-  lessons: Lesson[]
-  courseInfo: FormState
+  lessons: Lesson[];
+  courseInfo: FormState;
   // messages: TMessage[]
-}
+};
 
 type Consumables = {
-  [key: string]: number
-}
+  [key: string]: number;
+};
 
 type TTechnology = {
-  slug: string
-  lang: string
-}
+  slug: string;
+  lang: string;
+};
 
 type Store = {
-  auth: Auth
-  formState: FormState
-  setFormState: (formState: Partial<FormState>) => void
-  resetFormState: () => void
-  setAuth: (auth: Auth) => void
+  auth: Auth;
+  formState: FormState;
+  setFormState: (formState: Partial<FormState>) => void;
+  resetFormState: () => void;
+  setAuth: (auth: Auth) => void;
   // syllabus: Syllabus
-  planToRedirect: string
-  setPlanToRedirect: (planToRedirect: string) => void
-  uploadedFiles: ParsedFile[]
-  setUploadedFiles: (uploadedFiles: ParsedFile[]) => void
-  messages: TMessage[]
+  planToRedirect: string;
+  setPlanToRedirect: (planToRedirect: string) => void;
+  uploadedFiles: ParsedFile[];
+  setUploadedFiles: (uploadedFiles: ParsedFile[]) => void;
+  messages: TMessage[];
   setMessages: (
     messages: TMessage[] | ((prev: TMessage[]) => TMessage[])
-  ) => void
-  cleanHistory: () => void
-  history: Syllabus[]
-  technologies: TTechnology[]
-  setTechnologies: (technologies: TTechnology[]) => void
-  undo: () => void
-  push: (syllabus: Syllabus) => void
-  cleanAll: () => void
+  ) => void;
+  cleanHistory: () => void;
+  history: Syllabus[];
+  technologies: TTechnology[];
+  setTechnologies: (technologies: TTechnology[]) => void;
+  undo: () => void;
+  push: (syllabus: Syllabus) => void;
+  cleanAll: () => void;
   // setSyllabus: (syllabus: Partial<Syllabus>) => void
-  consumables: Consumables
-  setConsumables: (consumables: Partial<Consumables>) => void
-  mode: "student" | "teacher"
-  setMode: (mode: "student" | "teacher") => void
-}
+  consumables: Consumables;
+  setConsumables: (consumables: Partial<Consumables>) => void;
+  mode: "student" | "teacher";
+  setMode: (mode: "student" | "teacher") => void;
+};
 
 const useStore = create<Store>()(
   persist(
@@ -117,7 +117,7 @@ const useStore = create<Store>()(
             typeof messages === "function"
               ? messages(state.messages)
               : messages,
-        }))
+        }));
       },
       setFormState: (formState: Partial<FormState>) =>
         set((state) => ({ formState: { ...state.formState, ...formState } })),
@@ -154,18 +154,18 @@ const useStore = create<Store>()(
       push: (syllabus: Syllabus) => {
         set((state) => ({
           history: [...state.history, syllabus],
-        }))
+        }));
       },
 
       undo: () => {
         set((state) => {
           return {
             history: state.history.slice(0, -1),
-          }
-        })
+          };
+        });
       },
       cleanHistory: () => {
-        set(() => ({ history: [] }))
+        set(() => ({ history: [] }));
       },
       cleanAll: () => {
         set({
@@ -193,20 +193,20 @@ const useStore = create<Store>()(
             ],
             currentStep: "description",
           },
-        })
+        });
       },
       consumables: {},
       setConsumables: (consumables: Partial<Consumables>) =>
         set((state) => {
           const sanitized: Consumables = Object.fromEntries(
             Object.entries(consumables).map(([k, v]) => [k, v ?? 0])
-          )
+          );
           return {
             consumables: {
               ...state.consumables,
               ...sanitized,
             },
-          }
+          };
         }),
 
       setAuth: (auth: Auth) => set({ auth }),
@@ -215,8 +215,25 @@ const useStore = create<Store>()(
     }),
     {
       name: "syllabus-storage",
+      /**
+       * Never resume a page load already claiming the wizard is finished.
+       *
+       * `formState.isCompleted` drives an effect in App.tsx that fires course
+       * generation. Persisting it meant that a generation which failed without
+       * clearing the flag came back on every reload and fired again, so the user
+       * could not escape the loading screen without wiping localStorage.
+       *
+       * Handled on rehydration rather than with `partialize` because that only
+       * governs what gets written: users whose storage already holds a stuck
+       * `true` need it cleared on the way in.
+       */
+      onRehydrateStorage: () => (state) => {
+        if (state?.formState.isCompleted) {
+          state.formState.isCompleted = false;
+        }
+      },
     }
   )
-)
+);
 
-export default useStore
+export default useStore;