@learnpack/learnpack 5.0.355 → 5.0.357

package/src/creator/package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",
+    "test": "vitest run",
     "lint": "eslint .",
     "preview": "vite preview",
     "watch": "vite build --watch"
@@ -41,6 +42,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^9.21.0",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.4",
     "@vitejs/plugin-react-swc": "^3.8.0",
@@ -49,10 +51,12 @@
     "eslint-plugin-react-hooks": "^5.1.0",
     "eslint-plugin-react-refresh": "^0.4.19",
     "globals": "^15.15.0",
+    "jsdom": "^29.1.1",
     "postcss": "^8.5.3",
     "tailwindcss": "^4.1.3",
     "typescript": "~5.7.2",
     "typescript-eslint": "^8.24.1",
-    "vite": "^6.2.0"
+    "vite": "^6.2.0",
+    "vitest": "^4.1.11"
   }
 }

package/src/creator/src/App.tsx

@@ -28,9 +28,16 @@ import ResumeCourseModal from "./components/ResumeCourseModal"
 import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 import { useTranslation } from "react-i18next"
 import NotificationListener from "./components/NotificationListener"
+import {
+  COMPLETION_ERROR_I18N_KEY,
+  interpretCompletionPayload,
+  TCompletionErrorCode,
+} from "./utils/completionResult"
+import { useCompletionWatchdog } from "./utils/useCompletionWatchdog"
 import { slugify } from "./utils/creatorUtils"
 import TurnstileModal from "./components/TurnstileModal"
 import { TMessage } from "./components/Message"
+import { Lesson } from "./components/LessonItem"
 import LanguageDetectionModal from "./components/LanguageDetectionModal"
 
 function App() {
@@ -88,6 +95,13 @@ function App() {
     checkTechs()
   }, [])
 
+  useCompletionWatchdog(notificationId, () => {
+    handleCompletionFailure(
+      "TIMEOUT",
+      `No notification arrived for ${notificationId}`
+    )
+  })
+
   const verifyToken = async () => {
     const { token } = checkParams(["token"])
     if (token) {
@@ -267,6 +281,111 @@ function App() {
     }
   }
 
+  /**
+   * Leaves the loading screen and puts the user back on the last wizard step.
+   *
+   * Their answers stay in the store, so retrying costs them nothing. The raw
+   * detail goes to the console rather than the toast: it carries provider
+   * internals, such as the Rigobot team id, that mean nothing to the user.
+   * @param code - The failure to report.
+   * @param detail - The underlying message, for the console.
+   */
+  const handleCompletionFailure = (
+    code: TCompletionErrorCode,
+    detail: string
+  ) => {
+    console.error("COURSE GENERATION FAILED", code, detail)
+    toast.error(t(COMPLETION_ERROR_I18N_KEY[code]))
+    setNotificationId("")
+    setFormState({
+      isCompleted: false,
+      currentStep: "hasContentIndex",
+    })
+  }
+
+  const handleNotification = (payload: unknown) => {
+    try {
+      const result = interpretCompletionPayload(payload)
+
+      if (!result.ok) {
+        handleCompletionFailure(result.code, result.detail)
+        return
+      }
+
+      const { parsed } = result
+      // parseLesson returns null for a step that does not match the expected
+      // "01.0 - Title [TYPE: description]" format. Those nulls used to slip into
+      // the syllabus unnoticed, because listOfSteps was typed as any.
+      const lessons = parsed.listOfSteps
+        .map((lesson) => parseLesson(lesson, []))
+        .filter((lesson): lesson is Lesson => lesson !== null)
+
+      if (lessons.length < parsed.listOfSteps.length) {
+        console.warn(
+          `Dropped ${
+            parsed.listOfSteps.length - lessons.length
+          } unparseable step(s)`,
+          parsed.listOfSteps
+        )
+      }
+
+      push({
+        lessons,
+        courseInfo: {
+          ...formState,
+          title: parsed.title,
+          slug: slugify(fixTitleLength(parsed.title)),
+          description: parsed.description,
+          language: parsed.languageCode || formState.language || "en",
+          technologies:
+            parsed.technologies.length > 0
+              ? parsed.technologies
+              : ["education", "quizzes"],
+        },
+      })
+
+      if (parsed.languageCode) {
+        i18n.changeLanguage(parsed.languageCode)
+      }
+
+      const initialMessages: TMessage[] = [
+        {
+          type: "user",
+          content: formState.description,
+        },
+        {
+          type: "assistant",
+          content: parsed.aiMessage,
+        },
+      ]
+
+      if (lessons.length > 0) {
+        initialMessages.push({
+          type: "assistant",
+          content: t("contentIndex.okMessage"),
+        })
+        initialMessages.push({
+          type: "assistant",
+          content: t("contentIndex.instructionsMessage"),
+        })
+      }
+
+      setMessages(initialMessages)
+      setNotificationId("")
+      navigate("/creator/syllabus")
+      setFormState({
+        isCompleted: false,
+        currentStep: "description",
+      })
+    } catch (error) {
+      // Nothing catches a throw from inside a socket.io listener, so a bug in
+      // this handler would strand the UI on the loading screen. Fail loudly
+      // into the wizard instead.
+      console.error(error, "ERROR HANDLING COURSE NOTIFICATION")
+      handleCompletionFailure("MALFORMED_RESPONSE", String(error))
+    }
+  }
+
   const checkTechs = async () => {
     if (technologies.length === 0) {
       const technologies = await getTechnologies()
@@ -518,60 +637,7 @@ function App() {
           />
           {notificationId && (
             <NotificationListener
-              onNotification={(res) => {
-                const lessons = res.parsed.listOfSteps.map((lesson: any) => {
-                  return parseLesson(lesson, [])
-                })
-
-                push({
-                  lessons,
-                  courseInfo: {
-                    ...formState,
-                    title: res.parsed.title,
-                    slug: slugify(fixTitleLength(res.parsed.title)),
-                    description: res.parsed.description,
-                    language:
-                      res.parsed.languageCode || formState.language || "en",
-                    technologies:
-                      res.parsed.technologies.length > 0
-                        ? res.parsed.technologies
-                        : ["education", "quizzes"],
-                  },
-                })
-
-                if (res.parsed.languageCode) {
-                  i18n.changeLanguage(res.parsed.languageCode)
-                }
-
-                let initialMessages: TMessage[] = [
-                  {
-                    type: "user",
-                    content: formState.description,
-                  },
-                  {
-                    type: "assistant",
-                    content: res.parsed.aiMessage,
-                  },
-                ]
-
-                if (lessons.length > 0) {
-                  initialMessages.push({
-                    type: "assistant",
-                    content: t("contentIndex.okMessage"),
-                  })
-                  initialMessages.push({
-                    type: "assistant",
-                    content: t("contentIndex.instructionsMessage"),
-                  })
-                }
-
-                setMessages(initialMessages)
-                navigate("/creator/syllabus")
-                setFormState({
-                  isCompleted: false,
-                  currentStep: "description",
-                })
-              }}
+              onNotification={handleNotification}
               notificationId={notificationId}
             />
           )}

package/src/creator/src/components/FileUploader.tsx

@@ -70,18 +70,7 @@ const UploadedFileCard = ({ idx, file }: { idx: number; file: ParsedFile }) => {
   useEffect(() => {
     if (file.status === "SUCCESS") return
 
-    console.log("CONNECTING TO SOCKET", file.notificationId)
-    socketClient.connect()
-    socketClient.on(file.notificationId, handleUpdate)
-
-    socketClient.emit("registerNotification", {
-      notificationId: file.notificationId,
-    })
-
-    return () => {
-      socketClient.off(file.notificationId, handleUpdate)
-      socketClient.disconnect()
-    }
+    return socketClient.subscribe(file.notificationId, handleUpdate)
   }, [])
 
   return (

package/src/creator/src/components/NotificationListener.tsx

@@ -16,14 +16,7 @@ const NotificationListener: React.FC<NotificationListenerProps> = ({
   useEffect(() => {
     if (!notificationId) return
 
-    socketClient.connect()
-    socketClient.on(notificationId, onNotification)
-    socketClient.emit("registerNotification", { notificationId })
-
-    return () => {
-      socketClient.off(notificationId, onNotification)
-      socketClient.disconnect()
-    }
+    return socketClient.subscribe(notificationId, onNotification)
   }, [notificationId, onNotification])
 
   return null

package/src/creator/src/components/syllabus/SyllabusEditor.tsx

@@ -30,10 +30,16 @@ import { randomUUID } from "../../utils/creatorUtils"
 import { RIGO_FLOAT_GIF } from "../../utils/constants"
 import { useTranslation } from "react-i18next"
 import NotificationListener from "../NotificationListener"
+import {
+  COMPLETION_ERROR_I18N_KEY,
+  interpretCompletionPayload,
+  TCompletionErrorCode,
+} from "../../utils/completionResult"
+import { useCompletionWatchdog } from "../../utils/useCompletionWatchdog"
 
 const SyllabusEditor: React.FC = () => {
   const navigate = useNavigate()
-  const { i18n } = useTranslation()
+  const { t, i18n } = useTranslation()
 
   const {
     history,
@@ -155,6 +161,9 @@ const SyllabusEditor: React.FC = () => {
       }
 
       if (!isAuthenticated) {
+        // Without this the chat stays on "Thinking..." forever, because nothing
+        // downstream ever runs to turn it off.
+        setIsThinking(false)
         setShowLoginModal(true)
         return
       }
@@ -200,6 +209,96 @@ const SyllabusEditor: React.FC = () => {
     }
   }
 
+  /**
+   * Ends the "Thinking..." state and tells the user why.
+   *
+   * Drops the empty assistant placeholder that `sendPrompt` optimistically
+   * pushed, so the chat does not keep a blank bubble. The syllabus itself is
+   * untouched: a failed refinement leaves the previous version in place.
+   * @param code - The failure to report.
+   * @param detail - The underlying message, for the console.
+   */
+  const handleCompletionFailure = (
+    code: TCompletionErrorCode,
+    detail: string
+  ) => {
+    console.error("SYLLABUS UPDATE FAILED", code, detail)
+    toast.error(t(COMPLETION_ERROR_I18N_KEY[code]))
+    setMessages((prev) => prev.filter((m) => Boolean(m.content)))
+    setIsThinking(false)
+    setNotificationId("")
+  }
+
+  const handleNotification = (payload: unknown) => {
+    try {
+      const result = interpretCompletionPayload(payload)
+
+      if (!result.ok) {
+        handleCompletionFailure(result.code, result.detail)
+        return
+      }
+
+      const { parsed } = result
+      // parseLesson returns null for a step that does not match the expected
+      // "01.0 - Title [TYPE: description]" format. Those nulls used to slip into
+      // the syllabus unnoticed, because listOfSteps was typed as any.
+      const lessons: Lesson[] = parsed.listOfSteps
+        .map((step) => parseLesson(step, syllabus.lessons))
+        .filter((lesson): lesson is Lesson => lesson !== null)
+
+      if (lessons.length < parsed.listOfSteps.length) {
+        console.warn(
+          `Dropped ${
+            parsed.listOfSteps.length - lessons.length
+          } unparseable step(s)`,
+          parsed.listOfSteps
+        )
+      }
+
+      push({
+        ...syllabus,
+        lessons: lessons,
+        courseInfo: {
+          ...syllabus.courseInfo,
+          title: parsed.title || syllabus.courseInfo.title,
+          description: parsed.description || syllabus.courseInfo.description,
+          language:
+            parsed.languageCode || syllabus.courseInfo.language || "en",
+          technologies:
+            parsed.technologies.length > 0
+              ? parsed.technologies
+              : syllabus.courseInfo.technologies || [],
+        },
+      })
+
+      if (parsed.languageCode) {
+        i18n.changeLanguage(parsed.languageCode)
+      }
+
+      setMessages((prev) => [
+        ...prev.filter((m) => Boolean(m.content)),
+        {
+          type: "assistant",
+          content: parsed.aiMessage,
+        },
+      ])
+      setIsThinking(false)
+      setNotificationId("")
+    } catch (error) {
+      // A throw inside a socket.io listener is caught by nobody and would leave
+      // the chat stuck on "Thinking...".
+      console.error(error, "ERROR HANDLING SYLLABUS NOTIFICATION")
+      handleCompletionFailure("MALFORMED_RESPONSE", String(error))
+    }
+  }
+
+  useCompletionWatchdog(notificationId, () => {
+    handleCompletionFailure(
+      "TIMEOUT",
+      `No notification arrived for ${notificationId}`
+    )
+  })
+
   const handleSubmit = async () => {
     if (!auth.bcToken || !auth.rigoToken) {
       setShowLoginModal(true)
@@ -284,41 +383,7 @@ It may take a moment..."
     <div className="flex w-full bg-white rounded-md shadow-md overflow-hidden h-screen ">
       <ParamsChecker />
       <NotificationListener
-        onNotification={(res) => {
-          const lessons: Lesson[] = res.parsed.listOfSteps.map((step: any) =>
-            parseLesson(step, syllabus.lessons)
-          )
-          push({
-            ...syllabus,
-            lessons: lessons,
-            courseInfo: {
-              ...syllabus.courseInfo,
-              title: res.parsed.title || syllabus.courseInfo.title,
-              description:
-                res.parsed.description || syllabus.courseInfo.description,
-              language:
-                res.parsed.languageCode || syllabus.courseInfo.language || "en",
-              technologies:
-                res.parsed.technologies.length > 0
-                  ? res.parsed.technologies
-                  : syllabus.courseInfo.technologies || [],
-            },
-          })
-
-          if (res.parsed.languageCode) {
-            i18n.changeLanguage(res.parsed.languageCode)
-          }
-
-          setMessages((prev) => [
-            ...prev.filter((m) => Boolean(m.content)),
-            {
-              type: "assistant",
-              content: res.parsed.aiMessage,
-            },
-          ])
-          setIsThinking(false)
-          setNotificationId("")
-        }}
+        onNotification={handleNotification}
         notificationId={notificationId}
       />
       {showLoginModal && (

package/src/creator/src/locales/en.json

@@ -87,6 +87,14 @@
         "text": "Learnpack is setting up your tutorial. It may take a moment...",
         "thinking": "Thinking..."
     },
+    "completionError": {
+        "quotaExceeded": "The course generation service has run out of capacity right now. Please try again later or contact support.",
+        "rateLimited": "Too many requests at the moment. Please wait a few seconds and try again.",
+        "providerUnavailable": "The course generation service is temporarily unavailable. Please try again in a few minutes.",
+        "malformedResponse": "We couldn't read the generated syllabus. Please try again.",
+        "timeout": "This is taking longer than expected, so we stopped waiting. Your answers were kept, please try again.",
+        "unknown": "Something went wrong while generating the course. Please try again."
+    },
     "sidebar": {
         "chatWithMe": "Chat with me to update the course content",
         "howCanLearnPackHelpYou": "How can LearnPack help you?"

package/src/creator/src/locales/es.json

@@ -87,6 +87,14 @@
         "text": "Learnpack está configurando tu tutorial. Puede que tarde un momento...",
         "thinking": "Pensando..."
     },
+    "completionError": {
+        "quotaExceeded": "El servicio de generación de cursos no tiene capacidad disponible en este momento. Inténtalo más tarde o contacta con soporte.",
+        "rateLimited": "Demasiadas solicitudes en este momento. Espera unos segundos e inténtalo de nuevo.",
+        "providerUnavailable": "El servicio de generación de cursos no está disponible temporalmente. Inténtalo de nuevo en unos minutos.",
+        "malformedResponse": "No pudimos leer el temario generado. Inténtalo de nuevo.",
+        "timeout": "Esto está tardando más de lo esperado y dejamos de esperar. Guardamos tus respuestas, inténtalo de nuevo.",
+        "unknown": "Algo salió mal al generar el curso. Inténtalo de nuevo."
+    },
     "sidebar": {
         "chatWithMe": "Chatea conmigo para actualizar el contenido del curso",
         "howCanLearnPackHelpYou": "¿Cómo puede LearnPack ayudarte?"

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

@@ -0,0 +1,144 @@
+import { describe, it, expect } from "vitest";
+import {
+  COMPLETION_ERROR_I18N_KEY,
+  interpretCompletionPayload,
+  TCompletionErrorCode,
+} from "./completionResult";
+
+/**
+ * The payload that actually stranded the creator: a job Rigobot ran and failed,
+ * with `parsed: null`. Reading `parsed.listOfSteps` on this is what threw inside
+ * the socket listener.
+ */
+const QUOTA_FAILURE = {
+  id: 642271,
+  status: "ERROR",
+  status_text:
+    "Error code: 403 - {'code': 'permission-denied', 'error': 'Your team " +
+    "fde60f91-0622-41c0-a31a-566d8df3497b has either used all available " +
+    "credits or reached its monthly spending limit. To continue making API " +
+    "requests, please purchase more credits or raise your spending limit.'}",
+  answer: null,
+  parsed: null,
+};
+
+const SUCCESSFUL_JOB = {
+  id: 1,
+  status: "SUCCESS",
+  status_text: "",
+  parsed: {
+    title: "Claude Code Skills",
+    description: "A short course about writing skills for Claude Code.",
+    languageCode: "en",
+    technologies: ["agent-skills", "ai"],
+    aiMessage: "Here is the syllabus I drafted.",
+    listOfSteps: ["00.0 - Welcome [READ: ...]", "01.0 - Skills [READ: ...]"],
+  },
+};
+
+describe("interpretCompletionPayload", () => {
+  it("returns the parsed syllabus for a successful job", () => {
+    const result = interpretCompletionPayload(SUCCESSFUL_JOB);
+
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+
+    expect(result.parsed.listOfSteps).toHaveLength(2);
+    expect(result.parsed.title).toBe("Claude Code Skills");
+    expect(result.parsed.languageCode).toBe("en");
+    expect(result.parsed.technologies).toEqual(["agent-skills", "ai"]);
+  });
+
+  it("reports the credits failure from the incident as a quota problem", () => {
+    const result = interpretCompletionPayload(QUOTA_FAILURE);
+
+    expect(result.ok).toBe(false);
+    if (result.ok) return;
+
+    expect(result.code).toBe("QUOTA_EXCEEDED");
+    expect(result.detail).toContain("permission-denied");
+  });
+
+  it("does not throw on the payload shape that used to crash the listener", () => {
+    expect(() => interpretCompletionPayload(QUOTA_FAILURE)).not.toThrow();
+  });
+
+  const statusTexts: Array<[string, TCompletionErrorCode]> = [
+    ["Your team has used all available credits", "QUOTA_EXCEEDED"],
+    ["monthly spending limit reached", "QUOTA_EXCEEDED"],
+    ["Error code: 429 - rate limit exceeded", "RATE_LIMITED"],
+    ["Error code: 503 - service unavailable", "PROVIDER_UNAVAILABLE"],
+    ["The request timed out", "PROVIDER_UNAVAILABLE"],
+    ["Missing key description inside inputs dictionary", "UNKNOWN"],
+  ];
+
+  statusTexts.forEach(([statusText, expected]) => {
+    it(`classifies "${statusText.slice(0, 40)}..." as ${expected}`, () => {
+      const result = interpretCompletionPayload({
+        status: "ERROR",
+        status_text: statusText,
+        parsed: null,
+      });
+
+      expect(result.ok).toBe(false);
+      if (result.ok) return;
+      expect(result.code).toBe(expected);
+    });
+  });
+
+  it("treats a SUCCESS job without a list of steps as malformed", () => {
+    const result = interpretCompletionPayload({
+      status: "SUCCESS",
+      parsed: { title: "Something", listOfSteps: null },
+    });
+
+    expect(result.ok).toBe(false);
+    if (result.ok) return;
+    expect(result.code).toBe("MALFORMED_RESPONSE");
+  });
+
+  it("fills in the optional fields the syllabus screens read", () => {
+    const result = interpretCompletionPayload({
+      status: "SUCCESS",
+      parsed: { listOfSteps: ["00.0 - Welcome [READ: ...]"] },
+    });
+
+    expect(result.ok).toBe(true);
+    if (!result.ok) return;
+
+    // The screens do `parsed.technologies.length > 0` and `parsed.title || ...`,
+    // so these have to exist even when Rigobot omits them.
+    expect(result.parsed.technologies).toEqual([]);
+    expect(result.parsed.title).toBe("");
+    expect(result.parsed.aiMessage).toBe("");
+  });
+
+  const junk: Array<[string, unknown]> = [
+    ["null", null],
+    ["undefined", undefined],
+    ["a string", "not a job"],
+    ["a number", 42],
+    ["an empty object", {}],
+    ["a job with no parsed field", { status: "SUCCESS" }],
+  ];
+
+  junk.forEach(([label, payload]) => {
+    it(`reports ${label} as malformed instead of throwing`, () => {
+      const result = interpretCompletionPayload(payload);
+
+      expect(result.ok).toBe(false);
+      if (result.ok) return;
+      expect(result.code).toBe("MALFORMED_RESPONSE");
+    });
+  });
+});
+
+describe("COMPLETION_ERROR_I18N_KEY", () => {
+  it("has a distinct key for every failure code", () => {
+    const keys = Object.values(COMPLETION_ERROR_I18N_KEY);
+
+    expect(keys.length).toBeGreaterThan(0);
+    expect(new Set(keys).size).toBe(keys.length);
+    keys.forEach((key) => expect(key).toMatch(/^completionError\./));
+  });
+});