update build files to match pathing

Co-authored-by: bflatastic <bombayapirat@gmail.com>

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+    "files.exclude": {
+        "**/*~": true,
+        "frontend_old/**": true
+    }
+}

crates/lib/api_clients/openai_sora_client/src/image_gen/image_gen_status.rs

@@ -83,16 +83,16 @@ pub struct Generation {
   pub created_at: String,
   pub deleted_at: Option<String>,
   pub url: String,
-  pub seed: i64,
-  pub can_download: bool,
-  pub download_status: String,
-  pub is_favorite: bool,
-  pub is_liked: bool,
-  pub is_public: bool,
-  pub is_archived: bool,
-  pub is_featured: bool,
-  pub has_feedback: bool,
-  pub like_count: i32,
+  pub seed: Option<i64>,
+  pub can_download: Option<bool>,
+  pub download_status: Option<String>,
+  pub is_favorite: Option<bool>,
+  pub is_liked: Option<bool>,
+  pub is_public: Option<bool>,
+  pub is_archived: Option<bool>,
+  pub is_featured: Option<bool>,
+  pub has_feedback: Option<bool>,
+  pub like_count: Option<i32>,
   pub cloudflare_metadata: Option<serde_json::Value>,
   pub cf_thumbnail_url: Option<String>,
   pub encodings: Encodings,

crates/lib/api_clients/openai_sora_client/src/lib.rs

@@ -2,4 +2,5 @@ pub mod credentials;
 pub mod image_gen;
 pub mod job;
 pub mod upload;
-pub mod sentinel_refresh;
+pub mod sentinel_refresh;
+mod sora_error;

crates/lib/api_clients/openai_sora_client/src/sora_error.rs

@@ -0,0 +1,48 @@
+use std::error::Error;
+use std::fmt::{Display, Formatter};
+
+#[derive(Debug)]
+pub enum SoraError {
+  /// Unauthorized, cookie and/or bearer token expired. We'll need to ask for a refreshed login.
+  ///
+  /// Example message, e.g. from the upload endpoint:
+  ///   {
+  ///     "error": {
+  ///       "message": "Your authentication token has expired. Please try signing in again.",
+  ///       "type": "invalid_request_error",
+  ///       "param": null,
+  ///       "code": "token_expired"
+  ///     }
+  ///   }
+  UnauthorizedCookieOrBearerExpired,
+
+  /// Another error occurred.
+  OtherBadStatus(anyhow::Error),
+
+  /// Reqwest Error
+  ReqwestError(reqwest::Error),
+}
+
+impl Error for SoraError {}
+
+impl Display for SoraError {
+  fn fmt(&self, f: &mut Formatter<'_>) -> std::fmt::Result {
+    match self {
+      SoraError::UnauthorizedCookieOrBearerExpired => {
+        write!(f, "Unauthorized: cookie and/or bearer token expired")
+      }
+      SoraError::OtherBadStatus(err) => {
+        write!(f, "Other error: {}", err)
+      }
+      SoraError::ReqwestError(err) => {
+        write!(f, "Reqwest error: {}", err)
+      }
+    }
+  }
+}
+
+impl From<reqwest::Error> for SoraError {
+  fn from(err: reqwest::Error) -> SoraError {
+    SoraError::ReqwestError(err)
+  }
+}

crates/lib/api_clients/openai_sora_client/src/upload/upload_media_http_request.rs

@@ -3,6 +3,7 @@ use errors::AnyhowResult;
 use reqwest::multipart::{Form, Part};
 use reqwest::Client;
 use serde::Deserialize;
+use crate::sora_error::SoraError;
 
 const SORA_UPLOAD_MEDIA_URL: &str = "https://sora.com/backend/uploads";
 
@@ -25,6 +26,17 @@ Response:
   "size_bytes": 118501,
   "thumbnail_url": "https://videos.openai.com/vg-assets/assets%2Fclient_upload%2Fmedia%2Fuser-9wf6JFdgRSJLjvSJ53LNAbV8%2Fmedia_01jqt9vt20erx9zvryf3v1pecx.jpg?st=2025-04-02T02%3A39%3A01Z&se=2025-04-08T03%3A39%3A01Z&sks=b&skt=2025-04-02T02%3A39%3A01Z&ske=2025-04-08T03%3A39%3A01Z&sktid=a48cca56-e6da-484e-a814-9c849652bcb3&skoid=3d249c53-07fa-4ba4-9b65-0bf8eb4ea46a&skv=2019-02-02&sv=2018-11-09&sr=b&sp=r&spr=https%2Chttp&sig=9aU9xKI0BkhRtrTb0RD05%2BT6prBnmXk1I7nV2nTsFbY%3D&az=oaivgprodscus"
 }
+
+Error response:
+
+Failed to upload scene media to Sora: Upload failed with status 401 Unauthorized: {
+      "error": {
+        "message": "Your authentication token has expired. Please try signing in again.",
+        "type": "invalid_request_error",
+        "param": null,
+        "code": "token_expired"
+      }
+    }
 */
 
 #[derive(Debug, Deserialize)]
@@ -50,7 +62,13 @@ pub (crate) struct SoraMediaUploadRequest<'a> {
   pub credentials: &'a SoraCredentials,
 }
 
-pub (crate) async fn upload_media_http_request(file_bytes: Vec<u8>, filename: String, mime_type: &str, credentials: &SoraCredentials) -> AnyhowResult<SoraMediaUploadResponse> {
+pub (crate) async fn upload_media_http_request(
+  file_bytes: Vec<u8>,
+  filename: String,
+  mime_type: &str,
+  credentials: &SoraCredentials,
+) -> Result<SoraMediaUploadResponse, SoraError> {
+
   // Create multipart form
   let part = Part::bytes(file_bytes) // NB: Reqwest needs to own the bytes.
     .file_name(filename) // NB: Reqwest needs to own the bytes
@@ -70,12 +88,29 @@ pub (crate) async fn upload_media_http_request(file_bytes: Vec<u8>, filename: St
 
   // Check response status
   if !response.status().is_success() {
-    let status = response.status();
-    let text = response.text().await?;
-    return Err(anyhow::anyhow!("Upload failed with status {}: {}", status, text));
+    let error = classify_error(response).await;
+    return Err(error);
   }
 
   // Parse response
   let upload_response = response.json::<SoraMediaUploadResponse>().await?;
   Ok(upload_response)
 }
+
+async fn classify_error(response: reqwest::Response) -> SoraError {
+  let status = response.status();
+  let message = match response.text().await {
+    Ok(text) => text,
+    Err(err) => return SoraError::ReqwestError(err),
+  };
+
+  let cookie_expired =
+      message.contains("Your authentication token has expired. Please try signing in again.")
+      || message.contains("token_expired");
+
+  if cookie_expired {
+    SoraError::UnauthorizedCookieOrBearerExpired
+  } else {
+    SoraError::OtherBadStatus(anyhow::anyhow!("Upload failed with status {}: {}", status, message))
+  }
+}

crates/lib/deprecated/config/src/shared_constants.rs

@@ -4,7 +4,6 @@
 /// NB: `sqlx::query` is spammy and dumps all queries as "info"-level log lines.
 /// NB: `hyper::proto::h1::io` is incredibly spammy and logs every chunk of bytes in very large files being downloaded.
 pub const DEFAULT_RUST_LOG: &str = concat!(
-  "debug,",
   "actix_web=info,",
   "sqlx::query=warn,",
   "hyper::proto::h1::io=warn,",

frontend/README.md

@@ -27,4 +27,21 @@ Run dev server:
 nx dev editor3d
 ```
 
+```
+call when starting on main or a new branch:
+./clean_modules
+
+The names for @frontend and @storyteller come from the package.json file in the libs folder.
+import { Login } from "@frontend/login";
+import { api } from "@storyteller/api";
+
+building:
+npx nx build editor3d
+npx nx build editor2d
+
+dev:
+npx nx dev editor3d
+npx nx dev editor2d
+```
+
 

frontend/apps/editor2d/package.json

@@ -4,7 +4,14 @@
   "version": "0.0.0",
   "type": "module",
   "nx": {
-    "name": "editor2d"
+    "name": "editor2d",
+    "targets": {
+      "build": {
+        "dependsOn": [
+          "^build"
+        ]
+      }
+    }
   },
   "scripts": {
     "dev": "echo 'editor2d' && vite",

frontend/apps/editor2d/src/app/global.css

@@ -125,6 +125,10 @@
     @apply relative border border-ui-border shadow-lg backdrop-blur-xl transition-colors duration-300;
     @apply bg-ui-controls/50 hover:bg-ui-controls/90 !important;
   }
+
+  .glass-no-hover {
+    @apply hover:bg-ui-controls/50 !important;
+  }
 }
 
 @keyframes glow {

frontend/apps/editor2d/src/app/pages/login.tsx

@@ -1,12 +1,9 @@
 import { useRef } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
-
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button, Input, LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
-
-import { paperWrapperStyles } from "~/components/styles";
 import { twMerge } from "tailwind-merge";
 
 export const Login = () => {
@@ -62,24 +59,21 @@ export const Login = () => {
   });
 
   return (
-    <div className="fixed flex h-full w-full flex-col items-center justify-center bg-[url('/svg/bg-dots.svg')] bg-[length:200px_200px] bg-center bg-repeat">
-      <div className="my-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+    <div className="pegboard fixed flex h-full w-full flex-col items-center justify-center bg-center bg-repeat">
+      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
         <img
-          src="/brand/Storyteller-Logo-Black.png"
-          alt="Storyteller Logo"
-          className="h-11 select-none"
+          src="/brand/artcraft-logo.png"
+          alt="ArtCraft Logo"
+          className="h-9 select-none"
         />
       </div>
       <div className="w-full max-w-xl rounded-xl shadow-lg">
         <div
           className={twMerge(
-            paperWrapperStyles,
-            "relative mx-auto w-full rounded-none rounded-t-xl p-8 shadow-none",
+            "glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none",
           )}
         >
-          <h1 className="mb-9 text-center text-2xl font-bold">
-            Log in to Board
-          </h1>
+          <h1 className="mb-6 text-center text-2xl font-bold">Log in</h1>
           <form
             ref={formRef}
             onSubmit={handleOnSumbit}
@@ -106,7 +100,7 @@ export const Login = () => {
               required
             />
 
-            <Button className="mt-6 py-3">Continue</Button>
+            <Button className="mt-4 py-3">Continue</Button>
           </form>
           {shouldShowLoader && (
             <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
@@ -114,10 +108,10 @@ export const Login = () => {
             </div>
           )}
         </div>
-        <div className="align-items flex w-full max-w-xl rounded-b-xl border border-t-0 bg-gray-100 px-8 py-4">
+        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
           <a
             href="https://storyteller.ai/password-reset"
-            className="text-brand-primary hover:text-brand-primary-400 grow text-sm transition-all duration-150"
+            className="grow text-sm !text-primary-400 transition-all duration-150 hover:!text-primary-300"
           >
             Forgot your password?
           </a>

frontend/apps/editor2d/src/app/pages/main/index.tsx

@@ -14,10 +14,17 @@ import { appMode } from "~/signals";
 import { useSignals } from "@preact/signals-react/runtime";
 import { GenerationRootComponent } from "~/GenerationRootComponent/GenerationRootComponent";
 import { EditModeRootComponent } from "~/EditModeRootComponent/EditModeRootComponent";
-import { useRef } from "react";
+import { useRef, useState } from "react";
 import { EngineType } from "~/KonvaApp";
 import { GenerationEngine } from "~/KonvaApp/GenerationEngine";
 import { GalleryRootComponent } from "~/GalleryRootComponent";
+import { BaseDialog } from "~/components/ui/BaseDialog";
+import { Button } from "~/components/ui/Button";
+import {
+  faArrowRight,
+  faMagicWandSparkles,
+} from "@fortawesome/pro-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
 export const Main = withProtectionRoute(() => {
   // This is a hook that will log the number of times the component has rerendered
@@ -32,6 +39,7 @@ export const Main = withProtectionRoute(() => {
 
   const realtimeEngineRef = useRef<EngineType | null>(null);
   const generationEngineRef = useRef<GenerationEngine | null>(null);
+  const [firstTimeDialogOpen, setFirstTimeDialogOpen] = useState(true);
 
   const appModeValue = appMode.value;
   let childView;
@@ -60,25 +68,72 @@ export const Main = withProtectionRoute(() => {
   }
 
   return (
-    <div className="fixed h-full w-full">
-      <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
-        {childView}
-      </div>
-      <div className="absolute top-0 w-full p-3.5">
-        <div className="relative flex w-full">
-          <div className="absolute left-0">
-            <ToolbarTopLeft />
-          </div>
-          <div className="flex w-full justify-center">
-            <ToolbarTopCenter />
-          </div>
-          <div className="absolute right-0">
-            <ToolbarTopRight />
+    <>
+      <div className="fixed h-full w-full">
+        <div className="fixed grid h-full w-full grid-cols-12 grid-rows-12">
+          {childView}
+        </div>
+        <div className="absolute top-0 w-full p-3.5">
+          <div className="relative flex w-full">
+            <div className="absolute left-0">
+              <ToolbarTopLeft />
+            </div>
+            <div className="flex w-full justify-center">
+              <ToolbarTopCenter />
+            </div>
+            <div className="absolute right-0">
+              <ToolbarTopRight />
+            </div>
           </div>
         </div>
+        {appModeValue === "gallery" && (
+          <GalleryRootComponent className="z-1 fixed h-full w-full bg-black" />
+        )}
       </div>
-      {appModeValue === "gallery" &&
-      (<GalleryRootComponent className="fixed h-full w-full z-1 bg-black" />)}
-    </div>
+      <BaseDialog
+        isOpen={firstTimeDialogOpen}
+        onClose={() => {
+          setFirstTimeDialogOpen(false);
+        }}
+        className="max-w-5xl"
+      >
+        <div className="flex flex-col items-center justify-center gap-6">
+          <div className="flex flex-col items-center gap-3">
+            <h1 className="text-3xl font-bold">
+              <FontAwesomeIcon
+                icon={faMagicWandSparkles}
+                className="mr-3 text-[24px]"
+              />
+              Welcome to ArtCraft
+            </h1>
+            <div className="text-center">
+              <p className="text-lg font-medium text-white/80">
+                Your creative canvas for digital art and design
+              </p>
+              <p className="text-white/60">
+                Draw freely, create collages, and design with our intuitive
+                tool. Bring your ideas to life in seconds!
+              </p>
+            </div>
+          </div>
+
+          <div className="aspect-video w-full overflow-hidden rounded-md">
+            <video autoPlay muted loop controls={false}>
+              <source src="/videos/demo_video.mp4" type="video/mp4" />
+            </video>
+          </div>
+          <Button
+            className="px-4 py-3 font-semibold"
+            icon={faArrowRight}
+            iconFlip={true}
+            onClick={() => {
+              setFirstTimeDialogOpen(false);
+            }}
+          >
+            Start creating now
+          </Button>
+        </div>
+      </BaseDialog>
+    </>
   );
 });

frontend/apps/editor2d/src/app/pages/signup.tsx

@@ -1,12 +1,9 @@
 import { useRef } from "react";
 import { useNavigate, useSearchParams, Link } from "react-router-dom";
 import { useSignalEffect } from "@preact/signals-react/runtime";
-
 import { faKey, faUser } from "@fortawesome/pro-solid-svg-icons";
 import { Button, Input, LoadingSpinner } from "~/components/ui";
 import { authentication } from "~/signals";
-
-import { paperWrapperStyles } from "~/components/styles";
 import { twMerge } from "tailwind-merge";
 
 export const Signup = () => {
@@ -77,22 +74,21 @@ export const Signup = () => {
   });
 
   return (
-    <div className="fixed flex h-full w-full flex-col items-center justify-center bg-[url('/svg/bg-dots.svg')] bg-[length:200px_200px] bg-center bg-repeat">
-      <div className="my-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
+    <div className="pegboard fixed flex h-full w-full flex-col items-center justify-center bg-center bg-repeat">
+      <div className="mb-7 flex w-10/12 max-w-2xl items-center justify-center gap-4">
         <img
-          src="/brand/Storyteller-Logo-Black.png"
-          alt="Storyteller Logo"
-          className="h-11 select-none"
+          src="/brand/artcraft-logo.png"
+          alt="ArtCraft Logo"
+          className="h-9 select-none"
         />
       </div>
       <div className="w-full max-w-xl rounded-xl shadow-lg">
         <div
           className={twMerge(
-            paperWrapperStyles,
-            "relative mx-auto w-full rounded-none rounded-t-xl p-8 shadow-none",
+            "glass glass-no-hover relative mx-auto w-full rounded-none rounded-t-xl p-6 shadow-none",
           )}
         >
-          <h1 className="mb-9 text-center text-2xl font-bold">
+          <h1 className="mb-6 text-center text-2xl font-bold">
             Create your Account
           </h1>
           <form
@@ -139,7 +135,7 @@ export const Signup = () => {
               required
             />
 
-            <Button className="mt-6 py-3">Create Account</Button>
+            <Button className="mt-4 py-3">Create Account</Button>
           </form>
           {shouldShowLoader && (
             <div className="absolute left-0 top-0 flex h-full w-full items-center justify-center">
@@ -147,7 +143,7 @@ export const Signup = () => {
             </div>
           )}
         </div>
-        <div className="align-items flex w-full max-w-xl rounded-b-xl border border-t-0 bg-gray-100 px-8 py-4">
+        <div className="align-items flex w-full max-w-xl rounded-b-xl bg-ui-controls px-6 py-4">
           <div className="flex w-full justify-end gap-1 text-sm">
             <p className="opacity-75">Already have an account?</p>
             <Link to="/login">Log In</Link>

frontend/apps/editor2d/src/components/features/ToolbarTopLeft/index.tsx

@@ -7,6 +7,8 @@ import {
   GenerationLoadingState,
   generationSignal,
 } from "~/signals";
+import { faChevronRight } from "@fortawesome/pro-solid-svg-icons";
+import { Button } from "~/components/ui/Button";
 
 // import { paperWrapperStyles } from "~/components/styles";
 // import { faPlus, faQuestion } from "@fortawesome/pro-solid-svg-icons";
@@ -32,6 +34,10 @@ export const ToolbarTopLeft = () => {
 
   const generationState = generationSignal.value;
 
+  const handleClick = () => {
+    window.location.href = "https://storyteller-3d.netlify.app/";
+  };
+
   console.log(appMode.value);
 
   return (
@@ -41,19 +47,30 @@ export const ToolbarTopLeft = () => {
       )}
     >
       <img
-        src="/brand/mira-logo.png"
+        src="/brand/artcraft-logo.png"
         alt="logo"
-        className="h-[30px] select-none pb-1"
+        className="h-[28px] select-none"
       />
 
-      <TabSelector
+      <Button
+        variant="secondary"
+        icon={faChevronRight}
+        iconClassName="text-xs"
+        iconFlip={true}
+        onClick={handleClick}
+        className="bg-transparent p-0 text-sm text-white/80 hover:bg-transparent hover:text-white hover:underline hover:underline-offset-2"
+      >
+        Go to 3D Stage Editor
+      </Button>
+
+      {/* <TabSelector
         tabs={tabs}
         activeTab={activeTab.value}
         onTabChange={handleTabChange}
         disabled={
           generationState.loadingState === GenerationLoadingState.GENERATING
         }
-      />
+      /> */}
 
       {/* <ToolbarButton icon={faPlus}>
         <span className="font-semibold">New Board</span>

frontend/apps/editor3d/app/components/signaled/TopBar/AuthButtons.tsx

@@ -1,26 +0,0 @@
-import { useSignals } from "@preact/signals-react/runtime";
-
-import { AUTH_STATUS } from "~/enums";
-import { authentication } from "~/signals";
-
-import { ButtonLink } from "~/components";
-import ProfileDropdown from "./ProfileDropdown";
-
-export const AuthButtons = () => {
-  useSignals();
-
-  const { status } = authentication;
-
-  if (status.value === AUTH_STATUS.LOGGED_IN) {
-    return <ProfileDropdown />;
-  } else {
-    return (
-      <>
-        <ButtonLink variant="secondary" to="/login">
-          Login
-        </ButtonLink>
-        <ButtonLink to="/signup">Sign Up</ButtonLink>
-      </>
-    );
-  }
-};

frontend/apps/editor3d/app/index.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>ArtCraft 3D</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <!-- <link rel="stylesheet" href="/src/styles.css" /> -->
+  </head>
+  <body className="overflow-hidden bg-ui-background">
+    <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
+  </body>
+</html>

frontend/apps/editor3d/app/login.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Login | ArtCraft 3D</title>
+    <base href="/" />
+
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
+    <!-- <link rel="stylesheet" href="/src/styles.css" /> -->
+  </head>
+  <body className="overflow-hidden bg-ui-background">
+    <div id="root"></div>
+    <script type="module" src="/src/login.tsx"></script>
+  </body>
+</html>

frontend/apps/editor3d/app/pages/PageEnigma/comps/GenerateModals/Activity.tsx

@@ -1,230 +0,0 @@
-import { useSignals } from "@preact/signals-react/runtime";
-import { faBell, faSpinnerThird } from "@fortawesome/pro-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { PopoverMenu } from "~/components/reusable/Popover/Popover";
-import { CompletedCard } from "./CompletedCard";
-import { InProgressCard } from "./InProgressCard";
-import { H3, P, Tooltip } from "~/components";
-import { activeImageGenerationJobs, toasts, userMovies } from "~/signals";
-import { useEffect, useState } from "react";
-import { JobsApi } from "~/Classes/ApiManager/JobsApi";
-import { toast } from "sonner";
-
-// TODO ensure we de-dupe all this extra code.
-interface CompletedItem {
-  token: string;
-  maybe_title: string;
-  public_bucket_path: string;
-  updated_at: string;
-}
-
-interface ActiveJob {
-  job_token: string;
-  request: {
-    maybe_model_title: string;
-  };
-  status: {
-    status: string;
-    progress_percentage: number;
-  };
-}
-
-// {
-//   "job_token": "jinf_421nnr6rj8wy2sj0s11v9fns32s",
-//   "request": {
-//       "inference_category": "image_generation",
-//       "maybe_model_type": "image_gen_api",
-//       "maybe_model_token": null,
-//       "maybe_model_title": "Image Generation",
-//       "maybe_raw_inference_text": null,
-//       "maybe_style_name": null,
-//       "maybe_live_portrait_details": null,
-//       "maybe_lipsync_details": null
-//   },
-//   "status": {
-//       "status": "complete_success",
-//       "maybe_extra_status_description": null,
-//       "maybe_assigned_worker": "inference-job-4o-image-848c55d5dd-555kn",
-//       "maybe_assigned_cluster": "storyteller-eks-1",
-//       "maybe_first_started_at": "2025-04-15T04:41:01Z",
-//       "maybe_current_execution_duration_seconds": null,
-//       "attempt_count": 1,
-//       "requires_keepalive": false,
-//       "maybe_failure_category": null,
-//       "progress_percentage": 100
-//   },
-//   "maybe_result": {
-//       "entity_type": "media_file",
-//       "entity_token": "m_ytrjp1fcd5tb43ebcs3ewhq6y05tfb",
-//       "maybe_public_bucket_media_path": "/media/p/t/7/y/g/pt7yg2xfv4ynemssfv1mwb7yxe26e2nb/image_pt7yg2xfv4ynemssfv1mwb7yxe26e2nb.png",
-//       "media_links": {
-//           "cdn_url": "https://cdn-2.fakeyou.com/media/p/t/7/y/g/pt7yg2xfv4ynemssfv1mwb7yxe26e2nb/image_pt7yg2xfv4ynemssfv1mwb7yxe26e2nb.png",
-//           "maybe_thumbnail_template": "https://cdn-2.fakeyou.com/cdn-cgi/image/width={WIDTH},quality=95/media/p/t/7/y/g/pt7yg2xfv4ynemssfv1mwb7yxe26e2nb/image_pt7yg2xfv4ynemssfv1mwb7yxe26e2nb.png",
-//           "maybe_video_previews": null
-//       },
-//       "maybe_successfully_completed_at": "2025-04-15T04:42:14Z"
-//   },
-//   "created_at": "2025-04-15T04:41:01Z",
-//   "updated_at": "2025-04-15T04:42:14Z"
-// }
-
-export function Activity() {
-  useSignals();
-  const [completedItems, setCompletedItems] = useState<CompletedItem[]>([]);
-  const [loading, setLoading] = useState(true);
-  const [jobs, setJobs] = useState<ActiveJob[]>([]);
-
-  useEffect(() => {
-    const pollData = async () => {
-      const fetchJobs = async () => {
-        try {
-          const jobsApi = new JobsApi();
-          const jobsResponse = await jobsApi.ListRecentJobs();
-          
-          if (jobsResponse.success && jobsResponse.data) {
-            // Process active jobs
-            const activeJobs = jobsResponse.data
-              .filter(job => {
-                const status = job.status?.status?.toLowerCase();
-                return status && status !== "complete_success" && status !== "failed";
-              })
-              .map(job => ({
-                job_token: job.job_token,
-                request: {
-                  maybe_model_title: job.request?.maybe_model_title || "Image Generation"
-                },
-                status: {
-                  status: job.status?.status?.toUpperCase() || "",
-                  progress_percentage: job.status?.progress_percentage || 0
-                }
-              }));
-            
-            // Process completed items
-            // Get completed items and filter out any that are already in our list
-            const successfulJobs = jobsResponse.data
-              .filter(job => job.status?.status?.toLowerCase() === "complete_success");
-            
-            // Create a set of existing tokens for faster lookup
-            const existingTokens = new Set(completedItems.map(item => item.token));
-            
-            // Filter out jobs we already have in our list
-            const newCompletedItems = successfulJobs
-              .filter(job => !existingTokens.has(job.job_token))
-              .map(job => ({
-                token: job.job_token,
-                maybe_title: job.request?.maybe_model_title || "Image Generation",
-                public_bucket_path: job.maybe_result?.maybe_public_bucket_media_path || "",
-                updated_at: job.updated_at || new Date().toISOString()
-              }));
-              
-            // Show toast notification for newly completed items
-            if (newCompletedItems.length > 0) {
-              const count = newCompletedItems.length;
-              const message = count === 1 
-                ? `${newCompletedItems[0].maybe_title} completed successfully`
-                : `${count} images completed successfully`;
-              toast.success(message);
-            }
-
-            // Update completed items with a maximum limit of 50 items
-            setCompletedItems(prev => {
-              const combined = [...newCompletedItems, ...prev];
-              // Remove duplicates based on token
-              const uniqueItems = Array.from(
-                new Map(combined.map(item => [item.token, item])).values()
-              );
-              // Sort by updated_at in descending order and limit to 50 items
-              return uniqueItems
-                .sort((a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime())
-                .slice(0, 50);
-            });
-            setJobs(activeJobs);
-            setLoading(false);
-          }
-        } catch (error) {
-          toast.error("Error Fetching Recent Jobs");
-          console.error("Failed to fetch recent jobs:", error);
-        }
-      };
-      await fetchJobs();
-    };
-
-    // Initial load
-    // Initial call to pollData
-    pollData();
-    // Set up polling interval (every 5 seconds)
-    const interval = setInterval(async () => {
-      await pollData();
-    }, 5000);
-
-    return () => clearInterval(interval);
-  }, []);
-
-  return (
-    <Tooltip content="Activity" position="bottom" closeOnClick={true}>
-      <PopoverMenu
-        mode="default"
-        buttonClassName="h-[38px] w-[38px] !p-0"
-        panelClassName="w-[360px] p-2"
-        position="bottom"
-        align="end"
-        triggerIcon={
-          <div>
-            <FontAwesomeIcon icon={faBell} />
-            {activeImageGenerationJobs.value &&
-              activeImageGenerationJobs.value.length > 0 && (
-                <div className="bg-blue-500 absolute -right-1 -top-1 h-3 w-3 animate-pulse rounded-full" />
-              )}
-          </div>
-        }
-      >
-        <div className="max-h-[480px] overflow-y-auto">
-          {/* In progress */}
-          {jobs && jobs.length > 0 && (
-              <div>
-                {jobs.map((job) => (
-                  <InProgressCard key={job.job_token} movie={job} />
-                ))}
-              </div>
-            )}
-
-          {!userMovies.value && !activeImageGenerationJobs.value ? (
-            <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
-              <FontAwesomeIcon
-                icon={faSpinnerThird}
-                spin
-                size="2x"
-                className="text-gray-400"
-              />
-              <H3 className="text-gray-300">Retrieving Activities</H3>
-            </div>
-          ) : userMovies.value &&
-            userMovies.value.length === 0 &&
-            !activeImageGenerationJobs.value ? (
-            <div className="flex h-48 w-full flex-col justify-center gap-4 p-4 text-center align-middle">
-              <H3 className="text-gray-300">No activities yet</H3>
-              <P className="text-gray-400">
-                Try generating something new from the featured scenes
-              </P>
-            </div>
-          ) : (
-            <div>
-              {/* Completed */}
-              <div className="flex flex-col">
-                {completedItems.map((item) => (
-                  <CompletedCard 
-                    key={item.token} 
-                    movie={item} 
-                    setMovieId={(item_id) => {
-                      console.log("item_id", item_id);
-                    }}
-                  />
-                ))}
-              </div>
-              </div>
-          )}
-        </div>
-      </PopoverMenu>
-    </Tooltip>
-  );
-}

frontend/apps/editor3d/app/pages/PageEnigma/comps/GenerateModals/CompletedCard.tsx

@@ -1,98 +0,0 @@
-import { MediaInfo } from "~/pages/PageEnigma/models/movies";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faArrowDownToLine } from "@fortawesome/pro-solid-svg-icons";
-import { useRef, useState } from "react";
-import { BucketConfig } from "~/api/BucketConfig";
-import dayjs from "dayjs";
-import environmentVariables from "~/Classes/EnvironmentVariables";
-import { useSignals } from "@preact/signals-react/runtime";
-import { downloadFileImage } from "~/pages/PageEnigma/comps/GenerateModals/utils/downloadFile";
-import { styleList } from "~/pages/PageEnigma/styleList";
-import { GetCdnOrigin } from "~/api/GetCdnOrigin";
-
-export function getStyleName(typeInput: string) {
-  const foundStyle = styleList.find((style) => {
-    return style.type === typeInput;
-  });
-  return foundStyle ? foundStyle.label : "Unknown Style";
-}
-
-interface Props {
-  movie: MediaInfo;
-  setMovieId?: (id: string) => void;
-}
-
-export function CompletedCard({ movie, setMovieId }: Props) {
-  useSignals();
-  const bucketConfig = useRef<BucketConfig>(new BucketConfig());
-  const [loadError, setLoadError] = useState(false);
-  const cdnOrigin = GetCdnOrigin();
-
-
-  const downloadLink = `${cdnOrigin}${movie.public_bucket_path}`;
-  
-  // console.log(downloadLink);
-  // console.log("This is the completed item", movie);
-  // console.log("item completed card", movie);
-
-  // to do use the thumbnail image
-  const imageUrl = downloadLink; // bucketConfig.current.getCdnUrl(
-  //   movie.public_bucket_path + "-thumb.gif",
-  //   360,
-  //   20,
-  // );
-  const styleName =
-    movie.maybe_style_name && getStyleName(movie.maybe_style_name);
-
-  const handleClick = () => {
-    setMovieId?.(movie.token);
-  };
-
-  return (
-    <div
-      className="flex w-full items-center justify-between rounded-lg p-2 text-start transition-all duration-150 hover:cursor-pointer hover:bg-white/10"
-      onClick={handleClick}
-    >
-      <div className="flex gap-4">
-        <div className="flex aspect-square h-14 w-14 justify-center overflow-hidden rounded-lg border border-[#A9A9A9]/50 bg-black/60">
-          <img
-            src={
-              loadError ? "/resources/images/movie-placeholder.png" : imageUrl
-            }
-            className="h-full w-full object-cover"
-            alt={movie.maybe_title ?? "unknown"}
-            crossOrigin="anonymous"
-            onError={() => setLoadError(true)}
-            loading="lazy"
-          />
-        </div>
-        <div className="flex flex-col justify-center gap-1">
-          <div className="font-medium">{movie.maybe_title || "Untitled"}</div>
-          <div>
-            {/* {styleName && (
-              <div className="text-sm text-white/60">{styleName}</div>
-            )} */}
-            <div className="text-sm text-white/60">
-              {dayjs(movie.updated_at).format("MMM D, YYYY HH:mm:ss")}
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="pr-5">
-        <button
-          onClick={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            const title =
-              movie.maybe_title !== null ? movie.maybe_title : "Untitled";
-            downloadFileImage({ url: downloadLink, title });
-          }}
-          className="text-[15px] font-medium text-white/50 transition-all duration-150 hover:text-white/100"
-        >
-          <FontAwesomeIcon icon={faArrowDownToLine} className="mr-2" />
-          Download
-        </button>
-      </div>
-    </div>
-  );
-}