From 462138dfae9ac880ea2fe3a078f0f604f3c0abb3 Mon Sep 17 00:00:00 2001
From: MananTank <manantankm@gmail.com>
Date: Tue, 10 Dec 2024 21:58:32 +0000
Subject: [PATCH] Add Nebula Chat UI (#5483)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

DASH-444

<!-- start pr-codex -->

---

## PR-Codex overview
This PR primarily focuses on adding new features and enhancements to the `Nebula` application, including updates to environment variables, improved session handling, and new UI components.

### Detailed summary
- Added `fetch-event-stream` dependency.
- Introduced `NEXT_PUBLIC_NEBULA_URL` in environment variables.
- Enhanced `loginRedirect` to handle optional paths.
- Updated `getValidAccount` to accept optional `pagePath`.
- Implemented new stores for session management.
- Improved UI components like `Chatbar`, `ChatPageLayout`, and `EmptyStateChatPageContent`.
- Added `isValidEncodedRedirectPath` function for redirect validation.
- Modified `NebulaWaitListPage` to directly use team data.
- Enhanced session handling functions in `api/session.ts`.
- Created new types for session management and context filters.
- Updated styles and class names for better UI consistency.

> The following files were skipped due to too many changes: `apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/NebulaAccountButton.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx`, `apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx`, `apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx`, `pnpm-lock.yaml`

> ✨ Ask PR-Codex anything about this PR by commenting with `/codex {your question}`

<!-- end pr-codex -->
---
 apps/dashboard/.env.example                   |   5 +-
 apps/dashboard/package.json                   |   1 +
 apps/dashboard/src/@/api/team.ts              |  12 +
 .../blocks/DangerSettingCard.stories.tsx      |  56 ++-
 .../@/components/blocks/NetworkSelectors.tsx  |   5 +-
 .../src/@/components/blocks/multi-select.tsx  |  13 +-
 .../ui/ScrollShadow/ScrollShadow.tsx          |  25 +-
 .../src/@/components/ui/code/code.client.tsx  |   7 +-
 .../src/@/components/ui/code/getCodeHtml.tsx  |  19 +-
 .../src/@/components/ui/inline-code.tsx       |   2 +-
 apps/dashboard/src/@/components/ui/tabs.tsx   |  12 +
 .../src/@/components/ui/textarea.tsx          |  24 ++
 apps/dashboard/src/@/constants/env.ts         |   2 +
 .../src/app/account/settings/getAccount.ts    |   2 +-
 .../Header/SecondaryNav/SecondaryNav.tsx      |   3 +-
 apps/dashboard/src/app/login/LoginPage.tsx    |  30 +-
 .../app/login/isValidEncodedRedirectPath.ts   |  12 +
 apps/dashboard/src/app/login/loginRedirect.ts |   6 +-
 apps/dashboard/src/app/login/page.tsx         |   8 +-
 .../src/app/nebula-app/(app)/api/chat.ts      | 162 ++++++++
 .../src/app/nebula-app/(app)/api/feedback.ts  |  25 ++
 .../src/app/nebula-app/(app)/api/session.ts   | 131 +++++++
 .../src/app/nebula-app/(app)/api/types.ts     |  49 +++
 .../(app)/chat/[session_id]/page.tsx          |  49 +++
 .../chat/history/ChatHistoryPage.stories.tsx  |  99 +++++
 .../(app)/chat/history/ChatHistoryPage.tsx    | 218 +++++++++++
 .../nebula-app/(app)/chat/history/page.tsx    |  15 +
 .../src/app/nebula-app/(app)/chat/page.tsx    |  32 ++
 .../nebula-app/(app)/components/ChatBar.tsx   |  70 ++++
 .../(app)/components/ChatPageContent.tsx      | 367 ++++++++++++++++++
 .../components/ChatPageLayout.stories.tsx     |  86 ++++
 .../(app)/components/ChatPageLayout.tsx       |  40 ++
 .../(app)/components/ChatSidebar.tsx          |  87 +++++
 .../(app)/components/ChatSidebarLink.tsx      |  91 +++++
 .../(app)/components/Chatbar.stories.tsx      |  74 ++++
 .../(app)/components/Chats.stories.tsx        | 216 +++++++++++
 .../app/nebula-app/(app)/components/Chats.tsx | 279 +++++++++++++
 .../components/ContextFilters.stories.tsx     |  73 ++++
 .../(app)/components/ContextFilters.tsx       | 212 ++++++++++
 .../EmptyStateChatPageContent.stories.tsx     |  42 ++
 .../components/EmptyStateChatPageContent.tsx  | 150 +++++++
 .../(app)/components/NebulaAccountButton.tsx  | 181 +++++++++
 .../(app)/components/NebulaMobileNav.tsx      |  73 ++++
 .../hooks/useSessionsWithLocalOverrides.ts    |  13 +
 .../app/nebula-app/(app)/icons/NebulaIcon.tsx |  20 +
 .../src/app/nebula-app/(app)/layout.tsx       | 103 +++++
 .../src/app/nebula-app/(app)/page.tsx         |  32 ++
 .../src/app/nebula-app/(app)/stores.ts        |   9 +
 .../src/app/nebula-app/login/page.tsx         |  19 +
 apps/dashboard/src/app/nebula-app/readme.md   |  10 +
 .../team/[team_slug]/(team)/~/nebula/page.tsx |  14 +-
 .../nebula-waitlist-page-ui.client.tsx        |  35 +-
 .../components/nebula-waitlist-page.tsx       |  28 +-
 .../[project_slug]/nebula/page.tsx            |  14 +-
 .../src/components/ClientOnly/ClientOnly.tsx  |   5 +-
 .../markdown-renderer.stories.tsx             |  14 +-
 .../published-contract/markdown-renderer.tsx  |  38 +-
 .../components/notices/AnnouncementBanner.tsx |  22 +-
 apps/dashboard/src/middleware.ts              |  25 +-
 apps/dashboard/src/stories/stubs.ts           |  57 ++-
 .../dashboard/src/utils/fetchWithAuthToken.ts |  50 +++
 pnpm-lock.yaml                                | 278 ++++++-------
 turbo.json                                    |   3 +-
 63 files changed, 3553 insertions(+), 301 deletions(-)
 create mode 100644 apps/dashboard/src/app/login/isValidEncodedRedirectPath.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/api/chat.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/api/session.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/api/types.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/NebulaAccountButton.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/layout.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/page.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/(app)/stores.ts
 create mode 100644 apps/dashboard/src/app/nebula-app/login/page.tsx
 create mode 100644 apps/dashboard/src/app/nebula-app/readme.md
 create mode 100644 apps/dashboard/src/utils/fetchWithAuthToken.ts

diff --git a/apps/dashboard/.env.example b/apps/dashboard/.env.example
index d0bd739a0f6..27bf2a4453f 100644
--- a/apps/dashboard/.env.example
+++ b/apps/dashboard/.env.example
@@ -94,4 +94,7 @@ NEXT_PUBLIC_TURNSTILE_SITE_KEY=""
 TURNSTILE_SECRET_KEY=""
 REDIS_URL=""
 
-ANALYTICS_SERVICE_URL=""
\ No newline at end of file
+ANALYTICS_SERVICE_URL=""
+
+# Required for Nebula Chat
+NEXT_PUBLIC_NEBULA_URL=""
\ No newline at end of file
diff --git a/apps/dashboard/package.json b/apps/dashboard/package.json
index c2377dc61f8..71b75059aee 100644
--- a/apps/dashboard/package.json
+++ b/apps/dashboard/package.json
@@ -60,6 +60,7 @@
     "color": "^4.2.3",
     "compare-versions": "^6.1.0",
     "date-fns": "4.1.0",
+    "fetch-event-stream": "0.1.5",
     "flat": "^6.0.1",
     "framer-motion": "11.13.3",
     "fuse.js": "7.0.0",
diff --git a/apps/dashboard/src/@/api/team.ts b/apps/dashboard/src/@/api/team.ts
index a7ac5fa0ed5..6569df0fa2c 100644
--- a/apps/dashboard/src/@/api/team.ts
+++ b/apps/dashboard/src/@/api/team.ts
@@ -2,6 +2,17 @@ import "server-only";
 import { API_SERVER_URL } from "@/constants/env";
 import { getAuthToken } from "../../app/api/lib/getAuthToken";
 
+type EnabledTeamScope =
+  | "pay"
+  | "storage"
+  | "rpc"
+  | "bundler"
+  | "insight"
+  | "embeddedWallets"
+  | "relayer"
+  | "chainsaw"
+  | "nebula";
+
 export type Team = {
   id: string;
   name: string;
@@ -15,6 +26,7 @@ export type Team = {
   billingStatus: "validPayment" | (string & {}) | null;
   billingEmail: string | null;
   growthTrialEligible: boolean | null;
+  enabledScopes: EnabledTeamScope[];
 };
 
 export async function getTeamBySlug(slug: string) {
diff --git a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx b/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
index e7124337ae7..5db6a5eb906 100644
--- a/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
+++ b/apps/dashboard/src/@/components/blocks/DangerSettingCard.stories.tsx
@@ -28,36 +28,34 @@ export const Mobile: Story = {
 
 function Story() {
   return (
-    <div className="min-h-screen bg-background py-4 text-foreground">
-      <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
-        <BadgeContainer label="Base">
-          <DangerSettingCard
-            title="This is a title"
-            description="This is a description"
-            buttonLabel="Some Action"
-            buttonOnClick={() => {}}
-            isPending={false}
-            confirmationDialog={{
-              title: "This is confirmation title",
-              description: "This is confirmation description",
-            }}
-          />
-        </BadgeContainer>
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <BadgeContainer label="Base">
+        <DangerSettingCard
+          title="This is a title"
+          description="This is a description"
+          buttonLabel="Some Action"
+          buttonOnClick={() => {}}
+          isPending={false}
+          confirmationDialog={{
+            title: "This is confirmation title",
+            description: "This is confirmation description",
+          }}
+        />
+      </BadgeContainer>
 
-        <BadgeContainer label="Loading">
-          <DangerSettingCard
-            title="This is a title"
-            description="This is a description"
-            buttonLabel="Some Action"
-            buttonOnClick={() => {}}
-            isPending={true}
-            confirmationDialog={{
-              title: "This is confirmation title",
-              description: "This is confirmation description",
-            }}
-          />
-        </BadgeContainer>
-      </div>
+      <BadgeContainer label="Loading">
+        <DangerSettingCard
+          title="This is a title"
+          description="This is a description"
+          buttonLabel="Some Action"
+          buttonOnClick={() => {}}
+          isPending={true}
+          confirmationDialog={{
+            title: "This is confirmation title",
+            description: "This is confirmation description",
+          }}
+        />
+      </BadgeContainer>
     </div>
   );
 }
diff --git a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
index d8740d69d23..40cf87b008b 100644
--- a/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
+++ b/apps/dashboard/src/@/components/blocks/NetworkSelectors.tsx
@@ -72,7 +72,10 @@ export function MultiNetworkSelector(props: {
       onSelectedValuesChange={(chainIds) => {
         props.onChange(chainIds.map(Number));
       }}
-      placeholder="Select Chains"
+      placeholder={
+        allChains.length === 0 ? "Loading Chains..." : "Select Chains"
+      }
+      disabled={allChains.length === 0}
       overrideSearchFn={searchFn}
       renderOption={renderOption}
     />
diff --git a/apps/dashboard/src/@/components/blocks/multi-select.tsx b/apps/dashboard/src/@/components/blocks/multi-select.tsx
index 4ca98cb78e3..ae025280626 100644
--- a/apps/dashboard/src/@/components/blocks/multi-select.tsx
+++ b/apps/dashboard/src/@/components/blocks/multi-select.tsx
@@ -59,6 +59,9 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
       maxCount = Number.POSITIVE_INFINITY,
       className,
       selectedValues,
+      overrideSearchFn,
+      renderOption,
+      searchPlaceholder,
       ...props
     },
     ref,
@@ -105,8 +108,6 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     // show 50 initially and then 20 more when reaching the end
     const { itemsToShow, lastItemRef } = useShowMore<HTMLButtonElement>(50, 20);
 
-    const { overrideSearchFn } = props;
-
     const optionsToShow = useMemo(() => {
       const filteredOptions: {
         label: string;
@@ -152,7 +153,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
     }, [searchValue]);
 
     return (
-      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen}>
+      <Popover open={isPopoverOpen} onOpenChange={setIsPopoverOpen} modal>
         <PopoverTrigger asChild>
           <Button
             ref={ref}
@@ -238,7 +239,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
             {/* Search */}
             <div className="relative">
               <Input
-                placeholder={props.searchPlaceholder || "Search"}
+                placeholder={searchPlaceholder || "Search"}
                 value={searchValue}
                 onChange={(e) => setSearchValue(e.target.value)}
                 className="!h-auto rounded-b-none border-0 border-border border-b py-4 pl-10 focus-visible:ring-0 focus-visible:ring-offset-0"
@@ -285,9 +286,7 @@ export const MultiSelect = forwardRef<HTMLButtonElement, MultiSelectProps>(
                       </div>
 
                       <div className="min-w-0 grow">
-                        {props.renderOption
-                          ? props.renderOption(option)
-                          : option.label}
+                        {renderOption ? renderOption(option) : option.label}
                       </div>
                     </Button>
                   );
diff --git a/apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx b/apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
index a1e08d27cfa..85f605ce09a 100644
--- a/apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
+++ b/apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.tsx
@@ -11,6 +11,7 @@ export function ScrollShadow(props: {
   scrollableClassName?: string;
   disableTopShadow?: boolean;
   shadowColor?: string;
+  shadowClassName?: string;
 }) {
   const scrollableEl = useRef<HTMLDivElement>(null);
   const shadowTopEl = useRef<HTMLDivElement>(null);
@@ -94,7 +95,11 @@ export function ScrollShadow(props: {
       }
     >
       <div
-        className={cn(styles.scrollShadowTop, styles.scrollShadowY)}
+        className={cn(
+          styles.scrollShadowTop,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
         ref={shadowTopEl}
         style={{
           opacity: "0",
@@ -102,21 +107,33 @@ export function ScrollShadow(props: {
         }}
       />
       <div
-        className={cn(styles.scrollShadowBottom, styles.scrollShadowY)}
+        className={cn(
+          styles.scrollShadowBottom,
+          styles.scrollShadowY,
+          props.shadowClassName,
+        )}
         ref={shadowBottomEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={cn(styles.scrollShadowLeft, styles.scrollShadowX)}
+        className={cn(
+          styles.scrollShadowLeft,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
         ref={shadowLeftEl}
         style={{
           opacity: "0",
         }}
       />
       <div
-        className={cn(styles.scrollShadowRight, styles.scrollShadowX)}
+        className={cn(
+          styles.scrollShadowRight,
+          styles.scrollShadowX,
+          props.shadowClassName,
+        )}
         ref={shadowRightEl}
         style={{
           opacity: "0",
diff --git a/apps/dashboard/src/@/components/ui/code/code.client.tsx b/apps/dashboard/src/@/components/ui/code/code.client.tsx
index d36da1075f6..021b84c8c07 100644
--- a/apps/dashboard/src/@/components/ui/code/code.client.tsx
+++ b/apps/dashboard/src/@/components/ui/code/code.client.tsx
@@ -12,6 +12,7 @@ export type CodeProps = {
   scrollableClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
   copyButtonClassName?: string;
+  ignoreFormattingErrors?: boolean;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -21,10 +22,14 @@ export const CodeClient: React.FC<CodeProps> = ({
   scrollableClassName,
   keepPreviousDataOnCodeChange = false,
   copyButtonClassName,
+  ignoreFormattingErrors,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
-    queryFn: () => getCodeHtml(code, lang),
+    queryFn: () =>
+      getCodeHtml(code, lang, {
+        ignoreFormattingErrors: ignoreFormattingErrors,
+      }),
     placeholderData: keepPreviousDataOnCodeChange
       ? keepPreviousData
       : undefined,
diff --git a/apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx b/apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx
index 43ea0dcd758..bcc6bf5780a 100644
--- a/apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx
+++ b/apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx
@@ -16,15 +16,28 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
   );
 }
 
-export async function getCodeHtml(code: string, lang: BundledLanguage) {
+export async function getCodeHtml(
+  code: string,
+  lang: BundledLanguage,
+  options?: {
+    ignoreFormattingErrors?: boolean;
+  },
+) {
   const formattedCode = isPrettierSupportedLang(lang)
     ? await format(code, {
         parser: "babel-ts",
         plugins: [parserBabel, estree],
         printWidth: 60,
       }).catch((e) => {
-        console.error(e);
-        console.error("Failed to format code");
+        if (!options?.ignoreFormattingErrors) {
+          console.error(e);
+          console.error("Failed to format code");
+          console.log({
+            code,
+            lang,
+          });
+        }
+
         return code;
       })
     : code;
diff --git a/apps/dashboard/src/@/components/ui/inline-code.tsx b/apps/dashboard/src/@/components/ui/inline-code.tsx
index 1426ede4d7f..e7e9765242e 100644
--- a/apps/dashboard/src/@/components/ui/inline-code.tsx
+++ b/apps/dashboard/src/@/components/ui/inline-code.tsx
@@ -7,7 +7,7 @@ export function InlineCode({
   return (
     <code
       className={cn(
-        "mx-0.5 inline rounded-lg border border-border px-1.5 py-[3px] font-mono text-[0.85em] text-foreground",
+        "mx-0.5 inline rounded-lg border border-border bg-muted px-[0.4em] py-[0.25em] font-mono text-[0.85em] text-foreground",
         className,
       )}
     >
diff --git a/apps/dashboard/src/@/components/ui/tabs.tsx b/apps/dashboard/src/@/components/ui/tabs.tsx
index 58cde11e601..f74a9e74e6c 100644
--- a/apps/dashboard/src/@/components/ui/tabs.tsx
+++ b/apps/dashboard/src/@/components/ui/tabs.tsx
@@ -171,10 +171,22 @@ function useUnderline<El extends HTMLElement>() {
     }
 
     update();
+    let resizeObserver: ResizeObserver | undefined = undefined;
+
+    if (containerRef.current) {
+      resizeObserver = new ResizeObserver(() => {
+        setTimeout(() => {
+          update();
+        }, 100);
+      });
+      resizeObserver.observe(containerRef.current);
+    }
+
     // add event listener for resize
     window.addEventListener("resize", update);
     return () => {
       window.removeEventListener("resize", update);
+      resizeObserver?.disconnect();
     };
   }, [activeTabEl]);
 
diff --git a/apps/dashboard/src/@/components/ui/textarea.tsx b/apps/dashboard/src/@/components/ui/textarea.tsx
index 67ff936bcf6..4144b3d35d1 100644
--- a/apps/dashboard/src/@/components/ui/textarea.tsx
+++ b/apps/dashboard/src/@/components/ui/textarea.tsx
@@ -22,3 +22,27 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 Textarea.displayName = "Textarea";
 
 export { Textarea };
+
+export function AutoResizeTextarea(props: TextareaProps) {
+  const textareaRef = React.useRef<HTMLTextAreaElement>(null);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: value is needed in deps array
+  React.useEffect(() => {
+    const textarea = textareaRef.current;
+    if (textarea) {
+      textarea.style.height = "auto";
+      textarea.style.height = `${textarea.scrollHeight}px`;
+    }
+  }, [props.value]);
+
+  return (
+    <Textarea
+      ref={textareaRef}
+      {...props}
+      style={{
+        ...props.style,
+        overflowY: "hidden",
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/@/constants/env.ts b/apps/dashboard/src/@/constants/env.ts
index ed27ccb246a..79c790ac975 100644
--- a/apps/dashboard/src/@/constants/env.ts
+++ b/apps/dashboard/src/@/constants/env.ts
@@ -39,3 +39,5 @@ export const BASE_URL = isProd
   : (process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL
       ? `https://${process.env.NEXT_PUBLIC_VERCEL_BRANCH_URL}`
       : "http://localhost:3000") || "https://thirdweb-dev.com";
+
+export const NEXT_PUBLIC_NEBULA_URL = process.env.NEXT_PUBLIC_NEBULA_URL;
diff --git a/apps/dashboard/src/app/account/settings/getAccount.ts b/apps/dashboard/src/app/account/settings/getAccount.ts
index 96c505650a9..fe1ea5f1612 100644
--- a/apps/dashboard/src/app/account/settings/getAccount.ts
+++ b/apps/dashboard/src/app/account/settings/getAccount.ts
@@ -36,7 +36,7 @@ export async function getRawAccount() {
  * If there's no account or account onboarding not complete, redirect to login page
  * @param pagePath - the path of the current page to redirect back to after login/onboarding
  */
-export async function getValidAccount(pagePath: string) {
+export async function getValidAccount(pagePath?: string) {
   const account = await getRawAccount();
 
   // enforce login & onboarding
diff --git a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
index 5db64c627be..1ae713eed4e 100644
--- a/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
+++ b/apps/dashboard/src/app/components/Header/SecondaryNav/SecondaryNav.tsx
@@ -30,7 +30,8 @@ export function SecondaryNavLinks() {
       <ResourcesDropdownButton />
 
       <Link
-        href="/support"
+        target="_blank"
+        href="https://thirdweb.com/support"
         className="text-muted-foreground text-sm hover:text-foreground"
       >
         Support
diff --git a/apps/dashboard/src/app/login/LoginPage.tsx b/apps/dashboard/src/app/login/LoginPage.tsx
index 9ec4a579f2b..69ca561531e 100644
--- a/apps/dashboard/src/app/login/LoginPage.tsx
+++ b/apps/dashboard/src/app/login/LoginPage.tsx
@@ -45,7 +45,7 @@ const wallets = [
 
 export function LoginAndOnboardingPage(props: {
   account: Account | undefined;
-  nextPath: string | undefined;
+  redirectPath: string;
 }) {
   return (
     <div className="relative flex min-h-screen flex-col overflow-hidden bg-background">
@@ -79,7 +79,10 @@ export function LoginAndOnboardingPage(props: {
 
       <main className="container z-10 flex grow flex-col items-center justify-center gap-6 py-12">
         <ClientOnly ssr={<LoadingCard />}>
-          <PageContent nextPath={props.nextPath} account={props.account} />
+          <PageContent
+            redirectPath={props.redirectPath}
+            account={props.account}
+          />
         </ClientOnly>
       </main>
 
@@ -108,7 +111,7 @@ function LoadingCard() {
 }
 
 function PageContent(props: {
-  nextPath: string | undefined;
+  redirectPath: string;
   account: Account | undefined;
 }) {
   const [screen, setScreen] = useState<
@@ -127,11 +130,7 @@ function PageContent(props: {
 
   function onComplete() {
     setScreen({ id: "complete" });
-    if (props.nextPath && isValidRedirectPath(props.nextPath)) {
-      router.replace(props.nextPath);
-    } else {
-      router.replace("/team");
-    }
+    router.replace(props.redirectPath);
   }
 
   if (connectionStatus === "connecting") {
@@ -148,7 +147,7 @@ function PageContent(props: {
         <LazyOnboardingUI
           account={screen.account}
           onComplete={onComplete}
-          redirectPath={props.nextPath || "/team"}
+          redirectPath={props.redirectPath}
           redirectToCheckout={redirectToCheckout}
         />
       </Suspense>
@@ -215,19 +214,6 @@ function CustomConnectEmbed(props: {
   );
 }
 
-function isValidRedirectPath(encodedPath: string): boolean {
-  try {
-    // Decode the URI component
-    const decodedPath = decodeURIComponent(encodedPath);
-    // ensure the path always starts with a _single_ slash
-    // double slash could be interpreted as `//example.com` which is not allowed
-    return decodedPath.startsWith("/") && !decodedPath.startsWith("//");
-  } catch {
-    // If decoding fails, return false
-    return false;
-  }
-}
-
 type AuroraProps = {
   size: { width: string; height: string };
   pos: { top: string; left: string };
diff --git a/apps/dashboard/src/app/login/isValidEncodedRedirectPath.ts b/apps/dashboard/src/app/login/isValidEncodedRedirectPath.ts
new file mode 100644
index 00000000000..79f8255975f
--- /dev/null
+++ b/apps/dashboard/src/app/login/isValidEncodedRedirectPath.ts
@@ -0,0 +1,12 @@
+export function isValidEncodedRedirectPath(encodedPath: string): boolean {
+  try {
+    // Decode the URI component
+    const decodedPath = decodeURIComponent(encodedPath);
+    // ensure the path always starts with a _single_ slash
+    // double slash could be interpreted as `//example.com` which is not allowed
+    return decodedPath.startsWith("/") && !decodedPath.startsWith("//");
+  } catch {
+    // If decoding fails, return false
+    return false;
+  }
+}
diff --git a/apps/dashboard/src/app/login/loginRedirect.ts b/apps/dashboard/src/app/login/loginRedirect.ts
index f6985a4bdd9..829403ebb97 100644
--- a/apps/dashboard/src/app/login/loginRedirect.ts
+++ b/apps/dashboard/src/app/login/loginRedirect.ts
@@ -1,5 +1,9 @@
 import { redirect } from "next/navigation";
 
-export function loginRedirect(path: string): never {
+export function loginRedirect(path?: string): never {
+  if (!path) {
+    redirect("/login");
+  }
+
   redirect(`/login?next=${encodeURIComponent(path)}`);
 }
diff --git a/apps/dashboard/src/app/login/page.tsx b/apps/dashboard/src/app/login/page.tsx
index 9d86a8e0224..1364df759bc 100644
--- a/apps/dashboard/src/app/login/page.tsx
+++ b/apps/dashboard/src/app/login/page.tsx
@@ -1,5 +1,6 @@
 import { getRawAccount } from "../account/settings/getAccount";
 import { LoginAndOnboardingPage } from "./LoginPage";
+import { isValidEncodedRedirectPath } from "./isValidEncodedRedirectPath";
 
 export default async function Page(props: {
   searchParams: Promise<{
@@ -15,5 +16,10 @@ export default async function Page(props: {
   // if the user is already logged in, wallet is connected and onboarding is complete
   // user will be redirected to the next path on the client side without having to do anything
 
-  return <LoginAndOnboardingPage account={account} nextPath={nextPath} />;
+  const redirectPath =
+    nextPath && isValidEncodedRedirectPath(nextPath) ? nextPath : "/team";
+
+  return (
+    <LoginAndOnboardingPage account={account} redirectPath={redirectPath} />
+  );
 }
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/chat.ts b/apps/dashboard/src/app/nebula-app/(app)/api/chat.ts
new file mode 100644
index 00000000000..1135e87c3f9
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/api/chat.ts
@@ -0,0 +1,162 @@
+import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/env";
+// TODO - copy the source of this library to dashboard
+import { stream } from "fetch-event-stream";
+import type { SendTransactionOption } from "thirdweb/dist/types/wallets/interfaces/wallet";
+import type { ExecuteConfig } from "./types";
+
+export type ContextFilters = {
+  chainIds?: string[];
+  contractAddresses?: string[];
+};
+
+export async function promptNebula(params: {
+  message: string;
+  sessionId: string;
+  config: ExecuteConfig;
+  authToken: string;
+  handleStream: (res: ChatStreamedResponse) => void;
+  abortController: AbortController;
+  contextFilters: undefined | ContextFilters;
+}) {
+  const body: Record<string, string | boolean | object> = {
+    message: params.message,
+    user_id: "default-user",
+    session_id: params.sessionId,
+    stream: true,
+    execute_config: params.config,
+  };
+
+  if (params.contextFilters) {
+    body.context_filter = {
+      chain_ids: params.contextFilters.chainIds || [],
+      contract_addresses: params.contextFilters.contractAddresses || [],
+    };
+  }
+
+  const events = await stream(`${NEXT_PUBLIC_NEBULA_URL}/chat`, {
+    method: "POST",
+    headers: {
+      Authorization: `Bearer ${params.authToken}`,
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify(body),
+    signal: params.abortController.signal,
+  });
+
+  for await (const _event of events) {
+    if (!_event.data) {
+      continue;
+    }
+
+    const event = _event as ChatStreamedEvent;
+
+    switch (event.event) {
+      case "delta": {
+        params.handleStream({
+          event: "delta",
+          data: {
+            v: JSON.parse(event.data).v,
+          },
+        });
+        break;
+      }
+
+      case "presence": {
+        params.handleStream({
+          event: "presence",
+          data: JSON.parse(event.data),
+        });
+        break;
+      }
+
+      case "action": {
+        const data = JSON.parse(event.data);
+
+        if (data.type === "sign_transaction") {
+          let txData = null;
+
+          try {
+            const parsedTxData = JSON.parse(data.data);
+            if (
+              parsedTxData !== null &&
+              typeof parsedTxData === "object" &&
+              parsedTxData.chainId
+            ) {
+              txData = parsedTxData;
+            }
+          } catch (e) {
+            console.error("failed to parse action data", e);
+          }
+
+          params.handleStream({
+            event: "action",
+            type: "sign_transaction",
+            data: txData,
+          });
+        }
+
+        break;
+      }
+
+      case "init": {
+        const data = JSON.parse(event.data);
+        params.handleStream({
+          event: "init",
+          data: {
+            session_id: data.session_id,
+            request_id: data.request_id,
+          },
+        });
+        break;
+      }
+    }
+  }
+}
+
+type ChatStreamedResponse =
+  | {
+      event: "init";
+      data: {
+        session_id: string;
+        request_id: string;
+      };
+    }
+  | {
+      event: "presence";
+      data: {
+        session_id: string;
+        request_id: string;
+        source: "user" | "reviewer" | (string & {});
+        data: string;
+      };
+    }
+  | {
+      event: "delta";
+      data: {
+        v: string;
+      };
+    }
+  | {
+      event: "action";
+      type: "sign_transaction" & (string & {});
+      data: SendTransactionOption;
+    };
+
+type ChatStreamedEvent =
+  | {
+      event: "init";
+      data: string;
+    }
+  | {
+      event: "presence";
+      data: string;
+    }
+  | {
+      event: "delta";
+      data: string;
+    }
+  | {
+      event: "action";
+      type: "sign_transaction" & (string & {});
+      data: string;
+    };
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts b/apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts
new file mode 100644
index 00000000000..a1104ff98e1
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/api/feedback.ts
@@ -0,0 +1,25 @@
+import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/env";
+import { fetchWithAuthToken } from "../../../../utils/fetchWithAuthToken";
+
+export async function submitFeedback(params: {
+  authToken: string;
+  sessionId: string;
+  requestId: string;
+  rating: "good" | "bad" | "neutral";
+}) {
+  const res = await fetchWithAuthToken({
+    method: "POST",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/feedback`,
+    body: {
+      session_id: params.sessionId,
+      request_id: params.requestId,
+      feedback_rating:
+        params.rating === "good" ? 1 : params.rating === "bad" ? -1 : 0,
+    },
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to submit feedback");
+  }
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/session.ts b/apps/dashboard/src/app/nebula-app/(app)/api/session.ts
new file mode 100644
index 00000000000..23581e990cc
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/api/session.ts
@@ -0,0 +1,131 @@
+import { NEXT_PUBLIC_NEBULA_URL } from "@/constants/env";
+import { fetchWithAuthToken } from "../../../../utils/fetchWithAuthToken";
+import type { ContextFilters } from "./chat";
+import type { ExecuteConfig, SessionInfo, TruncatedSessionInfo } from "./types";
+
+// TODO - get the spec for return types on /session POST and PUT
+
+export async function createSession(params: {
+  authToken: string;
+  config: ExecuteConfig | null;
+  contextFilters: ContextFilters | undefined;
+}) {
+  const body: Record<string, string | boolean | object> = {
+    can_execute: !!params.config,
+  };
+  if (params.config) {
+    body.execute_config = params.config;
+  }
+
+  if (params.contextFilters) {
+    body.context_filter = {
+      chain_ids: params.contextFilters.chainIds || [],
+      contract_addresses: params.contextFilters.contractAddresses || [],
+    };
+  }
+
+  const res = await fetchWithAuthToken({
+    method: "POST",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session`,
+    body: body,
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to create session");
+  }
+  const data = await res.json();
+
+  return data.result as SessionInfo;
+}
+
+export async function updateSession(params: {
+  authToken: string;
+  config: ExecuteConfig | null;
+  sessionId: string;
+  contextFilters: ContextFilters | undefined;
+}) {
+  const body: Record<string, string | boolean | object> = {
+    can_execute: !!params.config,
+  };
+  if (params.config) {
+    body.execute_config = params.config;
+  }
+
+  if (params.contextFilters) {
+    body.context_filter = {
+      chain_ids: params.contextFilters.chainIds || [],
+      contract_addresses: params.contextFilters.contractAddresses || [],
+    };
+  }
+
+  const res = await fetchWithAuthToken({
+    method: "PUT",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session/${params.sessionId}`,
+    body: body,
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update session");
+  }
+  const data = await res.json();
+
+  return data.result as SessionInfo;
+}
+
+export async function deleteSession(params: {
+  authToken: string;
+  sessionId: string;
+}) {
+  const res = await fetchWithAuthToken({
+    method: "DELETE",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session/${params.sessionId}`,
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update session");
+  }
+  const data = await res.json();
+
+  return data.result as {
+    id: string;
+    deleted_at: string;
+  };
+}
+
+export async function getSessions(params: {
+  authToken: string;
+}) {
+  const res = await fetchWithAuthToken({
+    method: "GET",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session/list`,
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update session");
+  }
+  const data = await res.json();
+
+  return data.result as TruncatedSessionInfo[];
+}
+
+export async function getSessionById(params: {
+  authToken: string;
+  sessionId: string;
+}) {
+  const res = await fetchWithAuthToken({
+    method: "GET",
+    endpoint: `${NEXT_PUBLIC_NEBULA_URL}/session/${params.sessionId}`,
+    authToken: params.authToken,
+  });
+
+  if (!res.ok) {
+    throw new Error("Failed to update session");
+  }
+  const data = await res.json();
+
+  return data.result as SessionInfo;
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/api/types.ts b/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
new file mode 100644
index 00000000000..e2663ac95d7
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/api/types.ts
@@ -0,0 +1,49 @@
+type EngineConfig = {
+  mode: "engine";
+  engine_url: string;
+  engine_authorization_token: string;
+  engine_backend_wallet_address: string;
+};
+
+type SessionKeyConfig = {
+  mode: "session_key";
+  smart_account_address: string;
+  smart_account_factory_address: string;
+  smart_account_session_key: string;
+};
+
+type ClientConfig = {
+  mode: "client";
+  signer_wallet_address: string;
+};
+
+export type ExecuteConfig = EngineConfig | SessionKeyConfig | ClientConfig;
+
+export type SessionInfo = {
+  id: string;
+  account_id: string;
+  modal_name: string;
+  archive_at: string | null;
+  can_execute: boolean;
+  execute_config: ExecuteConfig | null;
+  created_at: string;
+  deleted_at: string | null;
+  history: Array<{
+    role: "user" | "assistant"; // role: action is coming up
+    content: string;
+    timestamp: number;
+  }> | null;
+  updated_at: string;
+  archived_at: string | null;
+  title: string | null;
+  is_public: boolean | null;
+  // memory
+  // action: array<object> | null; <-- type of this is not available on https://nebula-api.thirdweb-dev.com/docs#/default/get_session_session__session_id__get
+};
+
+export type TruncatedSessionInfo = {
+  created_at: string;
+  id: string;
+  updated_at: string;
+  title: string | null;
+};
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
new file mode 100644
index 00000000000..fc9b054e04d
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/[session_id]/page.tsx
@@ -0,0 +1,49 @@
+import { redirect } from "next/navigation";
+import { getValidAccount } from "../../../../account/settings/getAccount";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../login/loginRedirect";
+import { getSessionById } from "../../api/session";
+import { ChatPageContent } from "../../components/ChatPageContent";
+
+export default async function Page(props: {
+  params: Promise<{
+    session_id: string;
+  }>;
+}) {
+  const params = await props.params;
+  const pagePath = `/chat/${params.session_id}`;
+  const authToken = await getAuthToken();
+  const account = await getValidAccount();
+
+  if (!authToken) {
+    loginRedirect(pagePath);
+  }
+
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    loginRedirect(pagePath);
+  }
+
+  const session = await getSessionById({
+    authToken,
+    sessionId: params.session_id,
+  }).catch(() => undefined);
+
+  if (!session) {
+    redirect("/");
+  }
+
+  return (
+    <ChatPageContent
+      accountAddress={accountAddress}
+      authToken={authToken}
+      session={session}
+      type="new-chat"
+      account={account}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx
new file mode 100644
index 00000000000..9bd0059bae4
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.stories.tsx
@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { subDays } from "date-fns";
+import { ThirdwebProvider } from "thirdweb/react";
+import { accountStub, randomLorem } from "../../../../../stories/stubs";
+import { BadgeContainer, mobileViewport } from "../../../../../stories/utils";
+import { ChatPageLayout } from "../../components/ChatPageLayout";
+import { ChatHistoryPageUI } from "./ChatHistoryPage";
+
+const meta = {
+  title: "Nebula/history",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {
+    length: 10,
+  },
+};
+
+export const Mobile: Story = {
+  args: {
+    length: 10,
+  },
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function createRandomSessions(length: number) {
+  const sessions = [];
+  for (let i = 0; i < length; i++) {
+    sessions.push({
+      created_at: new Date().toISOString(),
+      id: Math.random().toString(),
+      updated_at: subDays(
+        new Date(),
+        Math.floor(Math.random() * 10),
+      ).toISOString(),
+      title: randomLorem(Math.floor(5 + Math.random() * 15)),
+    });
+  }
+
+  return sessions;
+}
+
+function Story() {
+  return (
+    <ThirdwebProvider>
+      <div className="flex flex-col gap-10 py-10">
+        <BadgeContainer label="10 chats">
+          <Variant length={10} />
+        </BadgeContainer>
+
+        <BadgeContainer label="0 chats">
+          <Variant length={0} />
+        </BadgeContainer>
+
+        <BadgeContainer label="1 chat">
+          <Variant length={1} />
+        </BadgeContainer>
+
+        <BadgeContainer label="No search result">
+          <Variant length={10} prefillSearch="xxxxxxxxxxxx" />
+        </BadgeContainer>
+      </div>
+    </ThirdwebProvider>
+  );
+}
+
+function Variant(props: {
+  length: number;
+  prefillSearch?: string;
+}) {
+  return (
+    <ChatPageLayout
+      account={accountStub()}
+      accountAddress="0x1234567890"
+      authToken="xxxxxxxx"
+      sessions={createRandomSessions(props.length)}
+      className="h-[700px] border-b lg:h-[800px]"
+    >
+      <ChatHistoryPageUI
+        sessions={createRandomSessions(props.length)}
+        prefillSearch={props.prefillSearch}
+        deleteSession={async () => {
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
+      />
+    </ChatPageLayout>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
new file mode 100644
index 00000000000..efc24f3caeb
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/ChatHistoryPage.tsx
@@ -0,0 +1,218 @@
+"use client";
+
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useMutation } from "@tanstack/react-query";
+import { formatDistance } from "date-fns";
+import Fuse from "fuse.js";
+import {
+  EllipsisIcon,
+  MessageCircleIcon,
+  SearchIcon,
+  TrashIcon,
+} from "lucide-react";
+import Link from "next/link";
+import { useMemo, useState } from "react";
+import { toast } from "sonner";
+import { deleteSession } from "../../api/session";
+import type { TruncatedSessionInfo } from "../../api/types";
+import { useSessionsWithLocalOverrides } from "../../hooks/useSessionsWithLocalOverrides";
+import { deletedSessionsStore } from "../../stores";
+
+export function ChatHistoryPage(props: {
+  sessions: TruncatedSessionInfo[];
+  prefillSearch?: string;
+  authToken: string;
+}) {
+  return (
+    <ChatHistoryPageUI
+      {...props}
+      deleteSession={async (s) => {
+        await deleteSession({ sessionId: s, authToken: props.authToken });
+      }}
+    />
+  );
+}
+
+export function ChatHistoryPageUI(props: {
+  sessions: TruncatedSessionInfo[];
+  prefillSearch?: string;
+  deleteSession: (sessionId: string) => Promise<void>;
+}) {
+  const [searchVal, setSearchVal] = useState(props.prefillSearch ?? "");
+  const allSessions = useSessionsWithLocalOverrides(props.sessions);
+
+  const fuse = useMemo(() => {
+    return new Fuse(allSessions, {
+      keys: [
+        {
+          name: "title",
+          weight: 1,
+        },
+      ],
+      threshold: 0.5,
+    });
+  }, [allSessions]);
+
+  const filteredSessions = useMemo(() => {
+    if (!searchVal) {
+      return allSessions;
+    }
+
+    return fuse.search(searchVal).map((e) => e.item);
+  }, [allSessions, searchVal, fuse]);
+  return (
+    <div className="flex grow flex-col overflow-hidden">
+      <header className="border-b py-4">
+        <h1 className="px-6 font-semibold text-lg tracking-tight">All Chats</h1>
+      </header>
+      <SearchInput
+        placeholder="Search for a chat"
+        value={searchVal}
+        onValueChange={setSearchVal}
+      />
+
+      {filteredSessions.length > 0 && (
+        <ScrollShadow
+          className="container flex-1"
+          scrollableClassName="max-h-full py-6"
+          shadowColor="hsl(var(--background))"
+        >
+          {filteredSessions.length > 0 && (
+            <div className="flex flex-col gap-4">
+              {filteredSessions.map((session) => (
+                <SessionCard
+                  key={session.id + session.updated_at + session.created_at}
+                  session={session}
+                  deleteSession={props.deleteSession}
+                />
+              ))}
+            </div>
+          )}
+        </ScrollShadow>
+      )}
+
+      {/* No Search Results */}
+      {allSessions.length > 0 && filteredSessions.length === 0 && (
+        <div className="flex grow flex-col justify-center rounded-lg">
+          <div className="flex flex-col items-center">
+            <div className="rounded-xl border bg-muted/50 p-2">
+              <MessageCircleIcon className="size-5 text-muted-foreground" />
+            </div>
+            <div className="h-4" />
+            <h3 className="text-center"> No Chats Found </h3>
+            <div className="h-1" />
+            <p className="text-center text-muted-foreground text-sm">
+              Try a different search term
+            </p>
+          </div>
+        </div>
+      )}
+
+      {/* No Chats at all */}
+      {allSessions.length === 0 && (
+        <div className="flex grow flex-col justify-center">
+          <div className="flex flex-col items-center">
+            <div className="rounded-xl border bg-muted/50 p-2">
+              <MessageCircleIcon className="size-5 text-muted-foreground" />
+            </div>
+            <div className="h-4" />
+            <h3 className="text-center"> No Chats Created </h3>
+            <div className="h-1" />
+            <p className="text-center text-muted-foreground text-sm">
+              Start a new chat to get started.
+            </p>
+            <div className="h-5" />
+            <Button asChild size="sm">
+              <Link href="/">New Chat</Link>
+            </Button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+function SearchInput(props: {
+  placeholder: string;
+  value: string;
+  onValueChange: (value: string) => void;
+}) {
+  return (
+    <div className="relative">
+      <Input
+        placeholder={props.placeholder}
+        value={props.value}
+        onChange={(e) => props.onValueChange(e.target.value)}
+        className="!border-b h-auto rounded-none border-0 px-6 py-4 pl-11 focus-visible:ring-0 focus-visible:ring-offset-0"
+      />
+      <SearchIcon className="-translate-y-1/2 absolute top-1/2 left-5 size-4 text-muted-foreground" />
+    </div>
+  );
+}
+
+// TODO - add delete chat confirmation dialog
+
+function SessionCard(props: {
+  session: TruncatedSessionInfo;
+  deleteSession: (sessionId: string) => Promise<void>;
+}) {
+  const deleteChat = useMutation({
+    mutationFn: () => {
+      return props.deleteSession(props.session.id);
+    },
+    onSuccess: () => {
+      const prev = deletedSessionsStore.getValue();
+      deletedSessionsStore.setValue([...prev, props.session.id]);
+    },
+  });
+
+  return (
+    <div className="rounded-lg border bg-muted/50 p-4">
+      <h3>{props.session.title}</h3>
+      <div className="mt-4 flex items-center justify-between gap-6 border-t pt-3">
+        <p className="text-muted-foreground text-sm">
+          Updated{" "}
+          {formatDistance(new Date(props.session.updated_at), new Date(), {
+            addSuffix: true,
+          })}
+        </p>
+
+        <Popover>
+          <PopoverTrigger asChild>
+            <Button className="h-auto w-auto p-1.5" variant="ghost">
+              <EllipsisIcon className="size-4 text-muted-foreground" />
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent className="w-44 p-1" side="top" align="end">
+            <Button
+              variant="ghost"
+              className="!text-destructive-text flex w-full justify-start gap-2.5 px-2"
+              onClick={() => {
+                const promise = deleteChat.mutateAsync();
+                toast.promise(promise, {
+                  success: "Chat deleted successfully",
+                  error: "Failed to delete chat",
+                });
+              }}
+            >
+              {deleteChat.isPending ? (
+                <Spinner className="size-4" />
+              ) : (
+                <TrashIcon className="size-4" />
+              )}
+              Delete
+            </Button>
+          </PopoverContent>
+        </Popover>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx
new file mode 100644
index 00000000000..d3ea224a333
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/history/page.tsx
@@ -0,0 +1,15 @@
+import { getAuthToken } from "../../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../../login/loginRedirect";
+import { getSessions } from "../../api/session";
+import { ChatHistoryPage } from "./ChatHistoryPage";
+
+export default async function Page() {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect();
+  }
+
+  const sessions = await getSessions({ authToken }).catch(() => []);
+  return <ChatHistoryPage sessions={sessions} authToken={authToken} />;
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
new file mode 100644
index 00000000000..31300c2f23f
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/chat/page.tsx
@@ -0,0 +1,32 @@
+import { getValidAccount } from "../../../account/settings/getAccount";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../../api/lib/getAuthToken";
+import { loginRedirect } from "../../../login/loginRedirect";
+import { ChatPageContent } from "../components/ChatPageContent";
+
+export default async function Page() {
+  const authToken = await getAuthToken();
+  const account = await getValidAccount();
+
+  if (!authToken) {
+    loginRedirect();
+  }
+
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    loginRedirect();
+  }
+
+  return (
+    <ChatPageContent
+      accountAddress={accountAddress}
+      authToken={authToken}
+      session={undefined}
+      type="new-chat"
+      account={account}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
new file mode 100644
index 00000000000..ae93e963366
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatBar.tsx
@@ -0,0 +1,70 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import { AutoResizeTextarea } from "@/components/ui/textarea";
+import { cn } from "@/lib/utils";
+import { ArrowUpIcon, CircleStopIcon } from "lucide-react";
+import { useState } from "react";
+import type { ExecuteConfig } from "../api/types";
+
+export function Chatbar(props: {
+  updateConfig: (config: ExecuteConfig) => void;
+  config: ExecuteConfig;
+  sendMessage: (message: string) => void;
+  isChatStreaming: boolean;
+  abortChatStream: () => void;
+}) {
+  const [message, setMessage] = useState("");
+
+  return (
+    <div className="rounded-2xl border border-border bg-muted/50 p-2">
+      <AutoResizeTextarea
+        placeholder={"Ask Nebula"}
+        value={message}
+        onChange={(e) => setMessage(e.target.value)}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" && !props.isChatStreaming) {
+            setMessage("");
+            props.sendMessage(message);
+          }
+        }}
+        className="min-h-[40px] resize-none border-none bg-transparent pt-2 leading-relaxed focus-visible:ring-0 focus-visible:ring-offset-0"
+        disabled={props.isChatStreaming}
+      />
+
+      <div className="-mt-3 flex justify-end gap-3 px-2 pb-2">
+        {/* Send / Stop */}
+        {props.isChatStreaming ? (
+          <Button
+            variant="default"
+            className="!h-auto w-auto gap-2 p-2"
+            onClick={() => {
+              props.abortChatStream();
+            }}
+          >
+            <CircleStopIcon className="size-4" />
+            Stop
+          </Button>
+        ) : (
+          <Button
+            aria-label="Send"
+            disabled={message.trim() === ""}
+            variant="primary"
+            className={cn(
+              "!h-auto w-auto border border-transparent p-2 disabled:opacity-100",
+              message === "" &&
+                "border-border bg-muted text-muted-foreground hover:border-transparent hover:text-foreground",
+            )}
+            onClick={() => {
+              if (message.trim() === "") return;
+              setMessage("");
+              props.sendMessage(message);
+            }}
+          >
+            <ArrowUpIcon className="size-4" />
+          </Button>
+        )}
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
new file mode 100644
index 00000000000..6eb87336894
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageContent.tsx
@@ -0,0 +1,367 @@
+"use client";
+
+/* eslint-disable no-restricted-syntax */
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { useMutation } from "@tanstack/react-query";
+import { useEffect, useRef, useState } from "react";
+import { type ContextFilters, promptNebula } from "../api/chat";
+import { createSession, updateSession } from "../api/session";
+import type { ExecuteConfig, SessionInfo } from "../api/types";
+import { newChatPageUrlStore, newSessionsStore } from "../stores";
+import { Chatbar } from "./ChatBar";
+import { type ChatMessage, Chats } from "./Chats";
+import ContextFiltersButton from "./ContextFilters";
+import { EmptyStateChatPageContent } from "./EmptyStateChatPageContent";
+
+export function ChatPageContent(props: {
+  session: SessionInfo | undefined;
+  authToken: string;
+  accountAddress: string;
+  type: "landing" | "new-chat";
+  account: Account;
+}) {
+  const client = useThirdwebClient();
+  const [userHasSubmittedMessage, setUserHasSubmittedMessage] = useState(false);
+  const [messages, setMessages] = useState<Array<ChatMessage>>(() => {
+    if (props.session?.history) {
+      return props.session.history.map((message) => ({
+        text: message.content,
+        type: message.role,
+        request_id: undefined,
+      }));
+    }
+    return [];
+  });
+
+  const [_config, setConfig] = useState<ExecuteConfig | null>();
+  const [contextFilters, setContextFilters] = useState<
+    ContextFilters | undefined
+  >(undefined);
+
+  const config = _config || {
+    mode: "client",
+    signer_wallet_address: props.accountAddress,
+  };
+
+  const [sessionId, _setSessionId] = useState<string | undefined>(
+    props.session?.id,
+  );
+
+  const [chatAbortController, setChatAbortController] = useState<
+    AbortController | undefined
+  >();
+
+  function setSessionId(sessionId: string) {
+    _setSessionId(sessionId);
+    // update page URL without reloading
+    window.history.replaceState({}, "", `/chat/${sessionId}`);
+
+    const url = new URL(window.location.origin);
+
+    // if the current page is landing page, link to /chat
+    // if current page is new /chat page, link to landing page
+    if (props.type === "landing") {
+      url.pathname = "/chat";
+    } else {
+      url.pathname = "/";
+    }
+
+    newChatPageUrlStore.setValue(url.href);
+  }
+
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const [isChatStreaming, setIsChatStreaming] = useState(false);
+  const [isUserSubmittedMessage, setIsUserSubmittedMessage] = useState(false);
+
+  // biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+  useEffect(() => {
+    if (!isUserSubmittedMessage) {
+      return;
+    }
+
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isUserSubmittedMessage]);
+
+  async function initSession() {
+    const session = await createSession({
+      authToken: props.authToken,
+      config,
+      contextFilters,
+    });
+    setSessionId(session.id);
+    return session;
+  }
+
+  async function handleSendMessage(message: string) {
+    setUserHasSubmittedMessage(true);
+    setMessages((prev) => [
+      ...prev,
+      { text: message, type: "user" },
+      // instant loading indicator feedback to user
+      {
+        type: "presence",
+        text: "Thinking...",
+      },
+    ]);
+
+    setIsChatStreaming(true);
+    setIsUserSubmittedMessage(true);
+    const abortController = new AbortController();
+
+    try {
+      // Ensure we have a session ID
+      let currentSessionId = sessionId;
+      if (!currentSessionId) {
+        const session = await initSession();
+        currentSessionId = session.id;
+      }
+
+      let requestIdForMessage = "";
+
+      // add this session on sidebar
+      if (messages.length === 0) {
+        const prevValue = newSessionsStore.getValue();
+        newSessionsStore.setValue([
+          {
+            id: currentSessionId,
+            title: message,
+            created_at: new Date().toISOString(),
+            updated_at: new Date().toISOString(),
+          },
+          ...prevValue,
+        ]);
+      }
+
+      setChatAbortController(abortController);
+
+      await promptNebula({
+        abortController,
+        message: message,
+        sessionId: currentSessionId,
+        config: config,
+        authToken: props.authToken,
+        handleStream(res) {
+          if (abortController.signal.aborted) {
+            return;
+          }
+
+          if (res.event === "init") {
+            requestIdForMessage = res.data.request_id;
+          }
+
+          if (res.event === "delta") {
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              // if last message is presence, overwrite it
+              if (lastMessage?.type === "presence") {
+                return [
+                  ...prev.slice(0, -1),
+                  {
+                    text: res.data.v,
+                    type: "assistant",
+                    request_id: requestIdForMessage,
+                  },
+                ];
+              }
+
+              // if last message is from chat, append to it
+              if (lastMessage?.type === "assistant") {
+                return [
+                  ...prev.slice(0, -1),
+                  {
+                    text: lastMessage.text + res.data.v,
+                    type: "assistant",
+                    request_id: requestIdForMessage,
+                  },
+                ];
+              }
+
+              // otherwise, add a new message
+              return [
+                ...prev,
+                {
+                  text: res.data.v,
+                  type: "assistant",
+                  request_id: requestIdForMessage,
+                },
+              ];
+            });
+          }
+
+          if (res.event === "presence") {
+            setMessages((prev) => {
+              const lastMessage = prev[prev.length - 1];
+              // if last message is presence, overwrite it
+              if (lastMessage?.type === "presence") {
+                return [
+                  ...prev.slice(0, -1),
+                  { text: res.data.data, type: "presence" },
+                ];
+              }
+              // otherwise, add a new message
+              return [...prev, { text: res.data.data, type: "presence" }];
+            });
+          }
+
+          if (res.event === "action") {
+            if (res.type === "sign_transaction") {
+              setMessages((prev) => {
+                let prevMessages = prev;
+                // if last message is presence, remove it
+                if (
+                  prevMessages[prevMessages.length - 1]?.type === "presence"
+                ) {
+                  prevMessages = prevMessages.slice(0, -1);
+                }
+
+                return [
+                  ...prevMessages,
+                  {
+                    type: "send_transaction",
+                    data: res.data,
+                  },
+                ];
+              });
+            }
+          }
+        },
+        contextFilters: contextFilters,
+      });
+    } catch (error) {
+      if (abortController.signal.aborted) {
+        return;
+      }
+      console.error(error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: `Error: ${error instanceof Error ? error.message : "Failed to execute command"}`,
+          type: "error",
+        },
+      ]);
+    } finally {
+      setIsChatStreaming(false);
+    }
+  }
+
+  async function handleUpdateConfig(newConfig: ExecuteConfig) {
+    setConfig(newConfig);
+
+    try {
+      if (!sessionId) {
+        // If no session exists, create a new one
+        await initSession();
+      } else {
+        const newSession = await updateSession({
+          authToken: props.authToken,
+          config: newConfig,
+          sessionId,
+          contextFilters,
+        });
+
+        if (newSession) {
+          setSessionId(newSession.id);
+        }
+      }
+    } catch (error) {
+      console.error("Failed to update session", error);
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: `Error: Failed to ${sessionId ? "update" : "create"} session`,
+          type: "error",
+        },
+      ]);
+    }
+  }
+
+  const updateConfig = useMutation({
+    mutationFn: handleUpdateConfig,
+  });
+
+  const showEmptyState = !userHasSubmittedMessage && messages.length === 0;
+
+  return (
+    <div className="flex grow flex-col overflow-hidden">
+      <header className="flex justify-end border-b bg-background p-4">
+        <ContextFiltersButton
+          contextFilters={contextFilters}
+          setContextFilters={setContextFilters}
+          updateContextFilters={async (values) => {
+            // if session is not yet created, don't need to update sessions - starting a chat will create a session with the context filters
+            if (sessionId) {
+              const newSession = await updateSession({
+                authToken: props.authToken,
+                config,
+                sessionId,
+                contextFilters: values,
+              });
+              // setting new id - but it doesn't actually change if the session was already created ( which is the case here )
+              if (newSession) {
+                setSessionId(newSession.id);
+              }
+            }
+          }}
+        />
+      </header>
+      <div className="container relative flex max-w-[800px] grow flex-col overflow-hidden rounded-lg pb-6">
+        {showEmptyState ? (
+          <div className="fade-in-0 flex grow animate-in flex-col justify-center">
+            <EmptyStateChatPageContent
+              sendMessage={handleSendMessage}
+              config={config}
+              updateConfig={() => {
+                updateConfig.mutate(config);
+              }}
+            />
+          </div>
+        ) : (
+          <div className="fade-in-0 relative z-[0] flex max-h-full flex-1 animate-in flex-col overflow-hidden">
+            <ScrollShadow
+              className="flex-1"
+              scrollableClassName="max-h-full"
+              shadowColor="hsl(var(--background))"
+              shadowClassName="z-[1]"
+            >
+              <Chats
+                messages={messages}
+                isChatStreaming={isChatStreaming}
+                authToken={props.authToken}
+                sessionId={sessionId}
+                className="min-w-0 pt-10 pb-32"
+                account={props.account}
+                client={client}
+              />
+              {/* Scroll anchor */}
+              <div ref={messagesEndRef} />
+            </ScrollShadow>
+
+            <Chatbar
+              sendMessage={handleSendMessage}
+              config={config}
+              isChatStreaming={isChatStreaming}
+              updateConfig={() => {
+                updateConfig.mutate(config);
+              }}
+              abortChatStream={() => {
+                chatAbortController?.abort();
+                setChatAbortController(undefined);
+                setIsChatStreaming(false);
+                // if last message is presence, remove it
+                if (messages[messages.length - 1]?.type === "presence") {
+                  setMessages((prev) => prev.slice(0, -1));
+                }
+              }}
+            />
+          </div>
+        )}
+
+        <p className="mt-4 text-center text-muted-foreground text-xs opacity-75 lg:text-sm">
+          Nebula may make mistakes. Please use with discretion
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx
new file mode 100644
index 00000000000..07b1f6108a1
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.stories.tsx
@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "sonner";
+import { ThirdwebProvider } from "thirdweb/react";
+import { accountStub, randomLorem } from "../../../../stories/stubs";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import type { TruncatedSessionInfo } from "../api/types";
+import { ChatPageLayout } from "./ChatPageLayout";
+
+const meta = {
+  title: "Nebula/ChatPageLayout",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function generateRandomSessions(count: number): TruncatedSessionInfo[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: i.toString(),
+    title: randomLorem(Math.floor(Math.random() * 10) + 1),
+    created_at: new Date().toISOString(),
+    updated_at: new Date().toISOString(),
+  }));
+}
+
+function Story() {
+  return (
+    <ThirdwebProvider>
+      <div className="flex flex-col gap-10 py-10 lg:container">
+        <Variant label="No Recent Chats" sessions={[]} />
+        <Variant label="3  Chats" sessions={generateRandomSessions(3)} />
+        <Variant label="30  Chats" sessions={generateRandomSessions(30)} />
+        <Variant
+          label="No Email"
+          sessions={generateRandomSessions(30)}
+          noEmail
+        />
+      </div>
+    </ThirdwebProvider>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  sessions: TruncatedSessionInfo[];
+  noEmail?: boolean;
+}) {
+  return (
+    <BadgeContainer label={props.label}>
+      <ChatPageLayout
+        accountAddress="0xC569B9FD77d132e10954cA5E6EF617414e314b11"
+        authToken="xxxxx"
+        sessions={props.sessions}
+        className="h-[200px] lg:h-[800px] lg:border"
+        account={accountStub(
+          props.noEmail
+            ? {
+                email: undefined,
+              }
+            : undefined,
+        )}
+      >
+        <div className="flex h-full w-full items-center justify-center">
+          CHILDREN
+        </div>
+      </ChatPageLayout>
+      <Toaster richColors />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
new file mode 100644
index 00000000000..26114cf3d5a
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatPageLayout.tsx
@@ -0,0 +1,40 @@
+import { cn } from "@/lib/utils";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import type { TruncatedSessionInfo } from "../api/types";
+import { ChatSidebar } from "./ChatSidebar";
+import { MobileNav } from "./NebulaMobileNav";
+
+export function ChatPageLayout(props: {
+  authToken: string;
+  accountAddress: string;
+  sessions: TruncatedSessionInfo[];
+  children: React.ReactNode;
+  className?: string;
+  account: Account;
+}) {
+  return (
+    <div
+      className={cn(
+        "flex h-screen flex-col overflow-hidden bg-background lg:flex-row",
+        props.className,
+      )}
+    >
+      <aside className="hidden w-[280px] shrink-0 border-border border-r bg-muted/50 lg:block">
+        <ChatSidebar
+          sessions={props.sessions}
+          authToken={props.authToken}
+          type="desktop"
+          account={props.account}
+        />
+      </aside>
+
+      <MobileNav
+        sessions={props.sessions}
+        authToken={props.authToken}
+        account={props.account}
+      />
+
+      {props.children}
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
new file mode 100644
index 00000000000..1985a5b285c
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebar.tsx
@@ -0,0 +1,87 @@
+"use client";
+import { ScrollShadow } from "@/components/ui/ScrollShadow/ScrollShadow";
+import { Button } from "@/components/ui/button";
+import { useStore } from "@/lib/reactive";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { ChevronRightIcon, MessageSquareDashedIcon } from "lucide-react";
+import Link from "next/link";
+import type { TruncatedSessionInfo } from "../api/types";
+import { useSessionsWithLocalOverrides } from "../hooks/useSessionsWithLocalOverrides";
+import { NebulaIcon } from "../icons/NebulaIcon";
+import { newChatPageUrlStore } from "../stores";
+import { ChatSidebarLink } from "./ChatSidebarLink";
+import { NebulaAccountButton } from "./NebulaAccountButton";
+
+export function ChatSidebar(props: {
+  sessions: TruncatedSessionInfo[];
+  authToken: string;
+  type: "desktop" | "mobile";
+  account: Account;
+}) {
+  const sessions = useSessionsWithLocalOverrides(props.sessions);
+  const sessionsToShow = sessions.slice(0, 10);
+  const newChatPage = useNewChatPageLink();
+
+  return (
+    <div className="flex h-full flex-col p-2">
+      <div className="flex justify-start p-2">
+        <Link href="/">
+          <NebulaIcon className="size-8 text-foreground" />
+        </Link>
+      </div>
+
+      <div className="p-2">
+        <div className="h-3" />
+        <Button asChild variant="primary" className="w-full gap-2">
+          <Link href={newChatPage}>
+            <MessageSquareDashedIcon className="size-4" />
+            New Chat
+          </Link>
+        </Button>
+      </div>
+
+      {sessionsToShow.length > 0 && (
+        <ScrollShadow
+          className="my-5 flex-1 border-t border-dashed pt-2"
+          scrollableClassName="max-h-full"
+          shadowColor="hsl(var(--muted))"
+          shadowClassName="z-10"
+        >
+          <div className="flex flex-col gap-1">
+            <h3 className="px-2 py-3 text-muted-foreground text-sm">
+              Recent Chats
+            </h3>
+            {sessionsToShow.map((session) => {
+              return (
+                <ChatSidebarLink
+                  sessionId={session.id}
+                  title={session.title || session.id}
+                  key={session.id}
+                  authToken={props.authToken}
+                />
+              );
+            })}
+
+            <Link
+              href="/chat/history"
+              className="inline-flex items-center gap-1.5 px-2 py-3 text-muted-foreground text-sm underline-offset-4 hover:text-foreground hover:underline"
+            >
+              View All <ChevronRightIcon className="size-4 text-foreground" />
+            </Link>
+          </div>
+        </ScrollShadow>
+      )}
+
+      <NebulaAccountButton
+        account={props.account}
+        className="mt-auto"
+        type="full"
+      />
+    </div>
+  );
+}
+
+export function useNewChatPageLink() {
+  const newChatPage = useStore(newChatPageUrlStore);
+  return newChatPage || "/chat";
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
new file mode 100644
index 00000000000..09477ae0c87
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ChatSidebarLink.tsx
@@ -0,0 +1,91 @@
+"use client";
+
+import { NavLink } from "@/components/ui/NavLink";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { useMutation } from "@tanstack/react-query";
+import { EllipsisIcon, TrashIcon } from "lucide-react";
+import { usePathname } from "next/navigation";
+import { toast } from "sonner";
+import { deleteSession } from "../api/session";
+import { deletedSessionsStore } from "../stores";
+
+// TODO - add delete chat confirmation dialog
+
+export function ChatSidebarLink(props: {
+  sessionId: string;
+  title: string;
+  authToken: string;
+}) {
+  const router = useDashboardRouter();
+  const pathname = usePathname();
+  const linkPath = `/chat/${props.sessionId}`;
+  const isDeletingCurrentPage = pathname === linkPath;
+  const deleteChat = useMutation({
+    mutationFn: () => {
+      return deleteSession({
+        authToken: props.authToken,
+        sessionId: props.sessionId,
+      });
+    },
+    onSuccess: () => {
+      const prev = deletedSessionsStore.getValue();
+      deletedSessionsStore.setValue([...prev, props.sessionId]);
+      if (isDeletingCurrentPage) {
+        router.replace("/");
+      }
+    },
+  });
+  return (
+    <div
+      className="group relative rounded-lg hover:bg-muted"
+      key={props.sessionId}
+    >
+      <Button
+        asChild
+        variant="ghost"
+        className="!h-auto !w-full items-center justify-between px-2 text-left text-sm hover:bg-transparent"
+      >
+        <NavLink href={`/chat/${props.sessionId}`} activeClassName="bg-muted">
+          <span className="line-clamp-1 block truncate">{props.title}</span>
+        </NavLink>
+      </Button>
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            className="-translate-y-1/2 !bg-background absolute top-1/2 right-1 z-10 h-auto w-auto p-1.5 opacity-0 group-hover:opacity-100"
+            variant="ghost"
+          >
+            <EllipsisIcon className="size-4" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-44 p-1" side="right">
+          <Button
+            variant="ghost"
+            className="!text-destructive-text flex w-full justify-start gap-2.5 px-2"
+            onClick={() => {
+              const promise = deleteChat.mutateAsync();
+              toast.promise(promise, {
+                success: "Chat deleted successfully",
+                error: "Failed to delete chat",
+              });
+            }}
+          >
+            {deleteChat.isPending ? (
+              <Spinner className="size-4" />
+            ) : (
+              <TrashIcon className="size-4" />
+            )}
+            Delete
+          </Button>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
new file mode 100644
index 00000000000..cb73d8486f1
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chatbar.stories.tsx
@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { Chatbar } from "./ChatBar";
+
+const meta = {
+  title: "Nebula/Chatbar",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[800px] flex-col gap-14 py-10">
+      <BadgeContainer label="Not Streaming - Client Config">
+        <Chatbar
+          abortChatStream={() => {}}
+          config={{
+            mode: "client",
+            signer_wallet_address: "xxxxx",
+          }}
+          isChatStreaming={false}
+          sendMessage={() => {}}
+          updateConfig={() => {}}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Streaming - Client Config">
+        <Chatbar
+          abortChatStream={() => {}}
+          config={{
+            mode: "client",
+            signer_wallet_address: "xxxxx",
+          }}
+          isChatStreaming={true}
+          sendMessage={() => {}}
+          updateConfig={() => {}}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="Not Streaming - Engine Config">
+        <Chatbar
+          abortChatStream={() => {}}
+          config={{
+            mode: "engine",
+            engine_authorization_token: "xxxxx",
+            engine_backend_wallet_address: "0x1234",
+            engine_url: "https://some-engine-url.com",
+          }}
+          isChatStreaming={false}
+          sendMessage={() => {}}
+          updateConfig={() => {}}
+        />
+      </BadgeContainer>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
new file mode 100644
index 00000000000..099e33d19ed
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.stories.tsx
@@ -0,0 +1,216 @@
+import { getThirdwebClient } from "@/constants/thirdweb.server";
+import type { Meta, StoryObj } from "@storybook/react";
+import { Toaster } from "sonner";
+import { accountStub, randomLorem } from "../../../../stories/stubs";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import { Chats } from "./Chats";
+
+const meta = {
+  title: "Nebula/Chats",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+const markdownExample = `\
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+
+
+This a paragraph
+
+This is another paragraph
+
+This a very long paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+ipsum dolor sit amet, consectetur adipiscing elit. Nullam nec pur us. Donec euismod, nunc nec vehicula.
+
+
+## Empasis
+
+*Italic text*
+_Also italic text_
+
+**Bold text**
+__Also bold text__
+
+***Bold and italic***
+___Also bold and italic___
+
+## Blockquote
+> This is a blockquote.
+
+## Lists
+
+### Unordered list
+- Item 1
+- Item 2
+  - Nested Item 1
+  - Nested Item 2
+
+### Ordered list
+1. First item
+2. Second item
+   1. Sub-item 1
+   2. Sub-item 2
+
+### Mixed Nested lists
+
+- Item 1
+- Item 2
+  1. Sub-item 1
+  2. Sub-item 2
+
+
+1. First item
+2. Second item
+   - Sub-item 1
+   - Sub-item 2
+
+### Code
+This a a paragraph with some \`inlineCode()\`
+
+This a \`const longerCodeSnippet = "Example. This should be able to handle line breaks as well, it should not be overflowing the page";\`
+
+\`\`\`javascript
+// Code block with syntax highlighting
+function example() {
+  console.log("Hello, world!");
+}
+\`\`\`
+
+### Links
+[thirdweb](https://www.thirdweb.com)
+
+### Images
+![Alt text](https://picsum.photos/2000/500)
+
+
+### Horizontal Rule
+
+
+
+---
+
+
+
+### Tables
+| Header 1 | Header 2 | Header 3 |
+|----------|----------|----------|
+| Row 1    | Data     | More Data|
+| Row 2    | Data     | More Data|
+
+
+| Column 1     | Column 2         | Column 3     | Column 4         | Column 5     |
+|--------------|------------------|--------------|------------------|--------------|
+| Row 1 Cell 1 | Row 1 Cell 2     | Row 1 Cell 3 | Row 1 Cell 4     | Row 1 Cell 5 |
+| Row 2 Cell 1 | Row 2 Cell 2     | Row 2 Cell 3 | Row 2 Cell 4     | Row 2 Cell 5 |
+| Row 3 Cell 1 | Row 3 Cell 2     | Row 3 Cell 3 | Row 3 Cell 4     | Row 3 Cell 5 |
+| Row 4 Cell 1 | Row 4 Cell 2     | Row 4 Cell 3 | Row 4 Cell 4     | Row 4 Cell 5 |
+| Row 5 Cell 1 | Row 5 Cell 2     | Row 5 Cell 3 | Row 5 Cell 4     | Row 5 Cell 5 |
+
+`;
+
+const responseWithCodeMarkdown = `
+${randomLorem(20)}
+
+${markdownExample}
+`;
+
+function Story() {
+  return (
+    <div className="container flex max-w-[800px] flex-col gap-14 py-10">
+      <BadgeContainer label="User + Presence">
+        <Chats
+          authToken="xxxxx"
+          isChatStreaming={false}
+          sessionId="xxxxx"
+          account={accountStub()}
+          messages={[
+            {
+              text: randomLorem(10),
+              type: "user",
+            },
+            {
+              text: randomLorem(20),
+              type: "presence",
+            },
+          ]}
+          client={getThirdwebClient()}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="User + Error">
+        <Chats
+          client={getThirdwebClient()}
+          authToken="xxxxx"
+          isChatStreaming={false}
+          sessionId="xxxxx"
+          account={accountStub()}
+          messages={[
+            {
+              text: randomLorem(10),
+              type: "user",
+            },
+            {
+              text: randomLorem(20),
+              type: "error",
+            },
+          ]}
+        />
+      </BadgeContainer>
+
+      <BadgeContainer label="User + Assistant responses">
+        <Chats
+          client={getThirdwebClient()}
+          authToken="xxxxx"
+          isChatStreaming={false}
+          sessionId="xxxxx"
+          account={accountStub()}
+          messages={[
+            {
+              text: randomLorem(10),
+              type: "user",
+            },
+            {
+              text: randomLorem(40),
+              type: "assistant",
+              request_id: "xxxxx",
+            },
+            {
+              text: randomLorem(50),
+              type: "assistant",
+              request_id: undefined,
+            },
+            {
+              text: responseWithCodeMarkdown,
+              type: "assistant",
+              request_id: undefined,
+            },
+          ]}
+        />
+      </BadgeContainer>
+      <Toaster richColors />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
new file mode 100644
index 00000000000..d3b559a7d57
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/Chats.tsx
@@ -0,0 +1,279 @@
+import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Alert, AlertTitle } from "@/components/ui/alert";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import type { Account as TWAccount } from "@3rdweb-sdk/react/hooks/useApi";
+import { useMutation } from "@tanstack/react-query";
+import {
+  AlertCircleIcon,
+  CheckIcon,
+  CopyIcon,
+  ThumbsDownIcon,
+  ThumbsUpIcon,
+} from "lucide-react";
+import { useState } from "react";
+import { toast } from "sonner";
+import type { ThirdwebClient } from "thirdweb";
+import { useActiveAccount } from "thirdweb/react";
+import type { Account } from "thirdweb/wallets";
+import { TransactionButton } from "../../../../components/buttons/TransactionButton";
+import { MarkdownRenderer } from "../../../../components/contract-components/published-contract/markdown-renderer";
+import { submitFeedback } from "../api/feedback";
+import { NebulaIcon } from "../icons/NebulaIcon";
+
+type SendTransactionOption = Parameters<Account["sendTransaction"]>[0];
+
+export type ChatMessage =
+  | {
+      text: string;
+      type: "user" | "error" | "presence";
+    }
+  | {
+      // assistant type message loaded from history doesn't have request_id
+      request_id: string | undefined;
+      text: string;
+      type: "assistant";
+    }
+  | {
+      type: "send_transaction";
+      data: SendTransactionOption | null;
+    };
+
+export function Chats(props: {
+  messages: Array<ChatMessage>;
+  isChatStreaming: boolean;
+  authToken: string;
+  sessionId: string | undefined;
+  className?: string;
+  account: TWAccount | undefined;
+  client: ThirdwebClient;
+}) {
+  return (
+    <div className={cn("flex flex-col gap-5 py-4", props.className)}>
+      {props.messages.map((message, index) => {
+        const isMessagePending =
+          props.isChatStreaming && index === props.messages.length - 1;
+        return (
+          <div
+            // biome-ignore lint/suspicious/noArrayIndexKey: index is the unique key
+            key={index}
+          >
+            <div
+              className={cn(
+                "fade-in-0 flex min-w-0 animate-in gap-3 duration-300",
+              )}
+            >
+              <div className="-translate-y-[2px] relative shrink-0 ">
+                {message.type === "user" ? (
+                  <GradientAvatar
+                    id={props.account?.id || "default"}
+                    // TODO- set account image when available in account object
+                    src={""}
+                    className="size-8 shrink-0 rounded-lg"
+                    client={props.client}
+                  />
+                ) : (
+                  <div
+                    className={cn(
+                      "flex size-8 items-center justify-center rounded-lg",
+                      message.type === "assistant" && "border bg-muted/50",
+                      message.type === "error" && "border",
+                      message.type === "presence" && "border bg-muted/50",
+                    )}
+                  >
+                    {message.type === "presence" && (
+                      <Spinner className="size-4" />
+                    )}
+
+                    {message.type === "assistant" && (
+                      <NebulaIcon className="size-5 text-muted-foreground" />
+                    )}
+
+                    {message.type === "error" && (
+                      <AlertCircleIcon className="size-5 text-destructive-text" />
+                    )}
+                  </div>
+                )}
+              </div>
+              <div className="min-w-0 grow">
+                {message.type === "assistant" ? (
+                  <MarkdownRenderer
+                    skipHtml
+                    markdownText={message.text}
+                    code={{
+                      disableCodeHighlight: isMessagePending,
+                      ignoreFormattingErrors: true,
+                    }}
+                    className="text-foreground"
+                    p={{ className: "text-foreground" }}
+                    li={{ className: "text-foreground" }}
+                  />
+                ) : message.type === "error" ? (
+                  <span className="text-destructive-text leading-loose">
+                    {message.text}
+                  </span>
+                ) : message.type === "send_transaction" ? (
+                  <SendTransactionButton txData={message.data} />
+                ) : (
+                  <span className="leading-loose">{message.text}</span>
+                )}
+
+                {message.type === "assistant" &&
+                  !props.isChatStreaming &&
+                  props.sessionId &&
+                  message.request_id && (
+                    <MessageActions
+                      messageText={message.text}
+                      authToken={props.authToken}
+                      requestId={message.request_id}
+                      sessionId={props.sessionId}
+                      className="mt-4"
+                    />
+                  )}
+              </div>
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+function MessageActions(props: {
+  authToken: string;
+  requestId: string;
+  sessionId: string;
+  messageText: string;
+  className?: string;
+}) {
+  const [isCopied, setIsCopied] = useState(false);
+  function sendRating(rating: "good" | "bad") {
+    return submitFeedback({
+      authToken: props.authToken,
+      rating,
+      requestId: props.requestId,
+      sessionId: props.sessionId,
+    });
+  }
+  const sendPositiveRating = useMutation({
+    mutationFn: () => sendRating("good"),
+    onSuccess() {
+      toast.info("Thanks for the feedback!");
+    },
+    onError() {
+      toast.error("Failed to send feedback");
+    },
+  });
+
+  const sendBadRating = useMutation({
+    mutationFn: () => sendRating("bad"),
+    onSuccess() {
+      toast.info("Thanks for the feedback!");
+    },
+    onError() {
+      toast.error("Failed to send feedback");
+    },
+  });
+
+  return (
+    <div
+      className={cn("flex items-center gap-2 text-foreground", props.className)}
+    >
+      <Button
+        variant="outline"
+        size="sm"
+        className="h-8 gap-2 rounded-lg text-sm"
+        onClick={() => {
+          navigator.clipboard.writeText(props.messageText);
+          setIsCopied(true);
+          setTimeout(() => {
+            setIsCopied(false);
+          }, 1000);
+        }}
+      >
+        {isCopied ? (
+          <CheckIcon className="size-3.5 text-green-500" />
+        ) : (
+          <CopyIcon className="size-3.5" />
+        )}
+        Copy
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="size-8 rounded-lg p-0"
+        onClick={() => {
+          sendPositiveRating.mutate();
+        }}
+      >
+        {sendPositiveRating.isPending ? (
+          <Spinner className="size-4" />
+        ) : (
+          <ThumbsUpIcon className="size-4" />
+        )}
+      </Button>
+
+      <Button
+        variant="outline"
+        size="sm"
+        className="size-8 rounded-lg p-0"
+        onClick={() => {
+          sendBadRating.mutate();
+        }}
+      >
+        {sendBadRating.isPending ? (
+          <Spinner className="size-4" />
+        ) : (
+          <ThumbsDownIcon className="size-4" />
+        )}
+      </Button>
+    </div>
+  );
+}
+
+function SendTransactionButton(props: {
+  txData: SendTransactionOption | null;
+}) {
+  const account = useActiveAccount();
+  const sendTxMutation = useMutation({
+    mutationFn: () => {
+      if (!account) {
+        throw new Error("No active account");
+      }
+
+      if (!props.txData) {
+        throw new Error("Invalid transaction");
+      }
+      return account.sendTransaction(props.txData);
+    },
+  });
+
+  if (!props.txData) {
+    return (
+      <Alert variant="destructive">
+        <AlertCircleIcon className="size-5" />
+        <AlertTitle>Failed to parse transaction data</AlertTitle>
+      </Alert>
+    );
+  }
+
+  return (
+    <TransactionButton
+      isPending={sendTxMutation.isPending}
+      transactionCount={1}
+      txChainID={props.txData.chainId}
+      onClick={() => {
+        const promise = sendTxMutation.mutateAsync();
+        toast.promise(promise, {
+          success: "Transaction sent successfully",
+          error: "Failed to send transaction",
+        });
+      }}
+      className="gap-2"
+    >
+      Execute Transaction
+    </TransactionButton>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.stories.tsx
new file mode 100644
index 00000000000..28b82f25688
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.stories.tsx
@@ -0,0 +1,73 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { useState } from "react";
+import { Toaster } from "sonner";
+import { BadgeContainer, mobileViewport } from "../../../../stories/utils";
+import type { ContextFilters } from "../api/chat";
+import ContextFiltersButton from "./ContextFilters";
+
+const meta = {
+  title: "Nebula/ContextFilters",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[1000px] flex-col gap-8 lg:p-10">
+      <Variant contextFilters={undefined} label="No Filters Set" />
+      <Variant
+        contextFilters={{
+          chainIds: ["1", "2", "3"],
+        }}
+        label="Chain ids Set"
+      />
+
+      <Variant
+        contextFilters={{
+          contractAddresses: ["0x1E51e33F9838A5a043E099C60409f62aA564272f"],
+        }}
+        label="Contract addresses set"
+      />
+      <Toaster richColors />
+    </div>
+  );
+}
+
+function Variant(props: {
+  label: string;
+  contextFilters: ContextFilters | undefined;
+}) {
+  const [contextFilters, setContextFilters] = useState<
+    ContextFilters | undefined
+  >(props.contextFilters);
+  return (
+    <BadgeContainer label={props.label}>
+      <ContextFiltersButton
+        contextFilters={contextFilters}
+        setContextFilters={setContextFilters}
+        updateContextFilters={async (values) => {
+          console.log("Updating context filters", values);
+          await new Promise((resolve) => setTimeout(resolve, 1000));
+        }}
+      />
+    </BadgeContainer>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
new file mode 100644
index 00000000000..03cdb98c952
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/ContextFilters.tsx
@@ -0,0 +1,212 @@
+"use client";
+
+import { Spinner } from "@/components/ui/Spinner/Spinner";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import {
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form";
+import { AutoResizeTextarea } from "@/components/ui/textarea";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { DialogDescription } from "@radix-ui/react-dialog";
+import { useMutation } from "@tanstack/react-query";
+import { SlidersHorizontalIcon } from "lucide-react";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import { isAddress } from "thirdweb";
+import { z } from "zod";
+import { MultiNetworkSelector } from "../../../../@/components/blocks/NetworkSelectors";
+import type { ContextFilters } from "../api/chat";
+
+export default function ContextFiltersButton(props: {
+  contextFilters: ContextFilters | undefined;
+  setContextFilters: (filters: ContextFilters | undefined) => void;
+  updateContextFilters: (filters: ContextFilters | undefined) => Promise<void>;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const updateMutation = useMutation({
+    mutationFn: props.updateContextFilters,
+  });
+
+  return (
+    <Dialog open={isOpen} onOpenChange={setIsOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant="outline" className="gap-2">
+          <SlidersHorizontalIcon className="size-4" />
+          {props.contextFilters
+            ? "Edit Context Filters"
+            : "Set context filters"}
+        </Button>
+      </DialogTrigger>
+      <ContextFilterDialogContent
+        contextFilters={props.contextFilters}
+        isPending={updateMutation.isPending}
+        updateFilters={async (data) => {
+          const promise = updateMutation.mutateAsync(data);
+          toast.promise(promise, {
+            success: "Context filters updated",
+            error: "Failed to update context filters",
+          });
+
+          promise.then(() => {
+            props.setContextFilters(data);
+            setIsOpen(false);
+          });
+        }}
+      />
+    </Dialog>
+  );
+}
+
+const formSchema = z.object({
+  chainIds: z.string().refine(
+    (s) => {
+      if (s.trim() === "") {
+        return true;
+      }
+      return s
+        .trim()
+        .split(",")
+        .every((id) => Number.isInteger(Number(id)));
+    },
+    {
+      message: "Chain IDs must be a comma-separated list of integers",
+    },
+  ),
+  contractAddresses: z.string().refine(
+    (s) => {
+      if (s.trim() === "") {
+        return true;
+      }
+      return s.trim().split(",").every(isAddress);
+    },
+    {
+      message:
+        "Contract addresses must be a comma-separated list of valid addresses",
+    },
+  ),
+});
+
+function ContextFilterDialogContent(props: {
+  contextFilters: ContextFilters | undefined;
+  updateFilters: (filters: ContextFilters | undefined) => void;
+  isPending: boolean;
+}) {
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    values: {
+      chainIds: props.contextFilters?.chainIds
+        ? props.contextFilters.chainIds.join(",")
+        : "",
+      contractAddresses: props.contextFilters?.contractAddresses
+        ? props.contextFilters.contractAddresses.join(",")
+        : "",
+    },
+    reValidateMode: "onChange",
+  });
+
+  function onSubmit(values: z.infer<typeof formSchema>) {
+    const { chainIds, contractAddresses } = values;
+    const chainIdsArray = chainIds.trim().split(",").filter(Boolean);
+    const contractAddressesArray = contractAddresses
+      .trim()
+      .split(",")
+      .filter(Boolean);
+    if (chainIdsArray.length === 0 && contractAddressesArray.length === 0) {
+      props.updateFilters(undefined);
+    } else {
+      props.updateFilters({
+        chainIds: chainIdsArray,
+        contractAddresses: contractAddressesArray,
+      });
+    }
+  }
+
+  return (
+    <DialogContent className="p-0">
+      <Form {...form}>
+        <DialogHeader className="px-6 pt-6 pb-1">
+          <DialogTitle className="font-semibold text-xl">
+            Context Filters
+          </DialogTitle>
+          <DialogDescription className="text-muted-foreground">
+            Provide context information to Nebula for your prompts
+          </DialogDescription>
+        </DialogHeader>
+
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <div className="flex flex-col gap-5 px-6">
+            <FormField
+              control={form.control}
+              name="chainIds"
+              render={() => (
+                <FormItem>
+                  <FormLabel>Chain IDs</FormLabel>
+                  <FormControl>
+                    <MultiNetworkSelector
+                      selectedChainIds={form
+                        .watch()
+                        .chainIds.split(",")
+                        .filter(Boolean)
+                        .map(Number)}
+                      onChange={(values) => {
+                        console.log("values", values);
+                        form.setValue("chainIds", values.join(","));
+                      }}
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="contractAddresses"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Contract Addresses</FormLabel>
+                  <FormControl>
+                    <AutoResizeTextarea
+                      {...field}
+                      placeholder="0x123..., 0x456..."
+                      className="min-h-[32px] resize-none"
+                    />
+                  </FormControl>
+                  <FormDescription>
+                    Comma separated list of contract addresses
+                  </FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <div className="mt-10 flex justify-end gap-3 border-t bg-muted/50 p-6">
+            <DialogClose asChild>
+              <Button variant="outline">Cancel</Button>
+            </DialogClose>
+            <Button className="min-w-28 gap-2" type="submit">
+              {props.isPending && <Spinner className="size-4" />}
+              Update
+            </Button>
+          </div>
+        </form>
+      </Form>
+    </DialogContent>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
new file mode 100644
index 00000000000..4cb7d39c107
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.stories.tsx
@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { mobileViewport } from "../../../../stories/utils";
+import { EmptyStateChatPageContent } from "./EmptyStateChatPageContent";
+
+const meta = {
+  title: "Nebula/EmptyStateChatPage",
+  component: Story,
+  parameters: {
+    nextjs: {
+      appDirectory: true,
+    },
+  },
+} satisfies Meta<typeof Story>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Desktop: Story = {
+  args: {},
+};
+
+export const Mobile: Story = {
+  args: {},
+  parameters: {
+    viewport: mobileViewport("iphone14"),
+  },
+};
+
+function Story() {
+  return (
+    <div className="container flex max-w-[800px] grow flex-col justify-center overflow-hidden">
+      <EmptyStateChatPageContent
+        config={{
+          mode: "client",
+          signer_wallet_address: "xxxxx",
+        }}
+        sendMessage={() => {}}
+        updateConfig={() => {}}
+      />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
new file mode 100644
index 00000000000..21903104452
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/EmptyStateChatPageContent.tsx
@@ -0,0 +1,150 @@
+"use client";
+
+import { ArrowUpRightIcon } from "lucide-react";
+import { Button } from "../../../../@/components/ui/button";
+import type { ExecuteConfig } from "../api/types";
+import { NebulaIcon } from "../icons/NebulaIcon";
+import { Chatbar } from "./ChatBar";
+
+export function EmptyStateChatPageContent(props: {
+  updateConfig: (config: ExecuteConfig) => void;
+  sendMessage: (message: string) => void;
+  config: ExecuteConfig;
+}) {
+  return (
+    <div className="py-16">
+      <div className="relative py-10">
+        <FancyBorders />
+        <div className="flex justify-center">
+          <div className="rounded-lg border p-1">
+            <div className="rounded border bg-muted p-1.5">
+              <NebulaIcon className="size-7 text-muted-foreground" />
+            </div>
+          </div>
+        </div>
+        <div className="h-5" />
+        <h1 className="text-center font-semibold text-4xl tracking-tight">
+          How can I help you <br className="max-sm:hidden" />
+          with the blockchain today?
+        </h1>
+        <div className="h-5" />
+        <div className="mx-auto max-w-[600px]">
+          <Chatbar
+            sendMessage={props.sendMessage}
+            config={props.config}
+            isChatStreaming={false}
+            updateConfig={props.updateConfig}
+            abortChatStream={() => {
+              // the page will switch so, no need to handle abort here
+            }}
+          />
+          <div className="h-5" />
+          <div className="flex flex-wrap justify-center gap-2.5">
+            <ExamplePrompt
+              label="USDC contract address on ethereum"
+              onClick={() => {
+                props.sendMessage(
+                  "What is the contract address of USDC on ethereum?",
+                );
+              }}
+            />
+
+            <ExamplePrompt
+              label="last 5 blocks on polygon"
+              onClick={() => {
+                props.sendMessage("What are last 5 blocks on polygon?");
+              }}
+            />
+
+            <ExamplePrompt
+              label="What is thirdweb SDK?"
+              onClick={() => {
+                props.sendMessage("What is thirdweb SDK?");
+              }}
+            />
+            <ExamplePrompt
+              label="How to add connect wallet button"
+              onClick={() => {
+                props.sendMessage(
+                  "How to add connect wallet button on React app?",
+                );
+              }}
+            />
+            <ExamplePrompt
+              label="Show transaction details"
+              onClick={() => {
+                props.sendMessage(
+                  "Show transaction details of 0xff9624116c352c8b090203fbbb563baf32d2b1944f9ac281ff2de6b7d948030e on ethereum",
+                );
+              }}
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function ExamplePrompt(props: {
+  label: string;
+  onClick: () => void;
+}) {
+  return (
+    <Button
+      variant="outline"
+      className="h-auto gap-1.5 rounded-full bg-muted/50 px-3 py-1 text-muted-foreground text-xs"
+      onClick={props.onClick}
+    >
+      {props.label} <ArrowUpRightIcon className="size-3" />
+    </Button>
+  );
+}
+
+function FancyBorders() {
+  return (
+    <>
+      {/* fancy borders */}
+      <div className="">
+        {/* top */}
+        <DashedBgDiv
+          className="-translate-x-1/2 -translate-y-5 absolute top-0 right-0 left-1/2 hidden h-[1px] w-[calc(100%+200px)] lg:block"
+          type="horizontal"
+        />
+        {/* bottom */}
+        <DashedBgDiv
+          className="-translate-x-1/2 absolute right-0 bottom-0 left-1/2 hidden h-[1px] w-[calc(100%+200px)] translate-y-5 lg:block"
+          type="horizontal"
+        />
+        {/* left */}
+        <DashedBgDiv
+          className="-translate-y-1/2 absolute top-1/2 left-8 hidden h-[calc(100%+200px)] w-[1px] lg:block"
+          type="vertical"
+        />
+        {/* right */}
+        <DashedBgDiv
+          className="-translate-y-1/2 absolute top-1/2 right-8 hidden h-[calc(100%+200px)] w-[1px] lg:block"
+          type="vertical"
+        />
+      </div>
+    </>
+  );
+}
+
+function DashedBgDiv(props: {
+  className?: string;
+  type: "horizontal" | "vertical";
+}) {
+  return (
+    <div
+      className={props.className}
+      style={{
+        backgroundImage: `linear-gradient(${props.type === "horizontal" ? "90deg" : "180deg"}, hsl(var(--foreground)/20%) 0 30%, transparent 0 100%)`,
+        backgroundRepeat: "repeat",
+        backgroundSize: "10px 10px",
+        maskImage: `linear-gradient(${
+          props.type === "horizontal" ? "to right" : "to bottom"
+        }, rgba(0,0,0,0.1), black 20%, black 80%, rgba(0,0,0,0.1))`,
+      }}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaAccountButton.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaAccountButton.tsx
new file mode 100644
index 00000000000..98895c60099
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaAccountButton.tsx
@@ -0,0 +1,181 @@
+"use client";
+
+import { GradientAvatar } from "@/components/blocks/Avatars/GradientAvatar";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { useThirdwebClient } from "@/constants/thirdweb.client";
+import { useDashboardRouter } from "@/lib/DashboardRouter";
+import { cn } from "@/lib/utils";
+import { CustomConnectWallet } from "@3rdweb-sdk/react/components/connect-wallet";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { LogOutIcon, Moon, Sun } from "lucide-react";
+import { useTheme } from "next-themes";
+import Link from "next/link";
+import { useCallback, useState } from "react";
+import { useActiveWallet, useDisconnect } from "thirdweb/react";
+import { doLogout } from "../../../login/auth-actions";
+
+export function NebulaAccountButton(props: {
+  account: Account;
+  className?: string;
+  type: "compact" | "full";
+}) {
+  const { setTheme, theme } = useTheme();
+  const [isOpen, setIsOpen] = useState(false);
+  const client = useThirdwebClient();
+  const router = useDashboardRouter();
+  const wallet = useActiveWallet();
+  const { disconnect } = useDisconnect();
+
+  const logout = useCallback(async () => {
+    try {
+      await doLogout();
+      if (wallet) {
+        disconnect(wallet);
+      }
+      router.replace("/");
+    } catch (e) {
+      console.error("Failed to log out", e);
+    }
+  }, [router, disconnect, wallet]);
+
+  const nebulaOrigin =
+    typeof window !== "undefined" ? window.location.origin : "";
+  const baseOrigin = nebulaOrigin.replace("nebula.", "");
+
+  return (
+    <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+      <DropdownMenuTrigger asChild>
+        {props.type === "full" ? (
+          <Button
+            variant="ghost"
+            className={cn(
+              "flex h-auto w-full items-center justify-start gap-3 p-2",
+              props.className,
+            )}
+          >
+            <div className="shrink-0">
+              <GradientAvatar
+                id={props.account?.id || "default"}
+                src={""}
+                className="size-9 rounded-lg"
+                client={client}
+              />
+            </div>
+            <div className="min-w-0 flex-1 text-left">
+              <div className="text-foreground text-sm">
+                {props.account.name}
+              </div>
+              {props.account.email && (
+                <div className="truncate text-muted-foreground text-sm lowercase">
+                  {props.account.email}
+                </div>
+              )}
+            </div>
+          </Button>
+        ) : (
+          <Button
+            variant="ghost"
+            className={cn(
+              "flex h-auto w-full items-center justify-start gap-3 rounded-full p-1",
+              props.className,
+            )}
+          >
+            <div className="shrink-0">
+              <GradientAvatar
+                id={props.account?.id || "default"}
+                src={""}
+                className="size-9 rounded-full"
+                client={client}
+              />
+            </div>
+          </Button>
+        )}
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="ml-2 w-[300px] rounded-lg p-0"
+        align="end"
+        sideOffset={10}
+        onClick={(e) => {
+          if (e.target instanceof HTMLAnchorElement) {
+            setIsOpen(false);
+          }
+        }}
+      >
+        <div className="border-border border-b p-4 pb-5">
+          <div>
+            <p className="text-foreground text-sm">{props.account.name}</p>
+            {props.account.email && (
+              <p className="text-muted-foreground text-sm">
+                {props.account.email}
+              </p>
+            )}
+          </div>
+
+          <div className="h-3" />
+          <div className="[&>*]:!w-full">
+            <CustomConnectWallet
+              signInLinkButtonClassName="!w-full"
+              loadingButtonClassName="!w-full"
+              connectButtonClassName="!w-full"
+              detailsButtonClassName="!w-full"
+            />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-1 p-2">
+          <Button
+            asChild
+            variant="ghost"
+            className="justify-start px-3 text-muted-foreground text-sm hover:text-foreground"
+          >
+            <Link href={`${baseOrigin}/account`} target="_blank">
+              My Account
+            </Link>
+          </Button>
+
+          <Button
+            variant="ghost"
+            className="flex items-center justify-between gap-2 px-3 text-muted-foreground text-sm hover:text-foreground"
+            onClick={() => {
+              setTheme(theme === "light" ? "dark" : "light");
+            }}
+          >
+            <p className="text-sm">Theme</p>
+
+            <div className="ml-auto flex items-center gap-2 rounded-lg border border-border px-3 py-1.5 text-foreground">
+              <Sun
+                className={cn(
+                  "size-4",
+                  theme === "light" ? "opacity-100" : "opacity-30",
+                )}
+              />
+              <Moon
+                className={cn(
+                  "size-4",
+                  theme === "dark" ? "opacity-100" : "opacity-30",
+                )}
+              />
+            </div>
+          </Button>
+
+          <Button
+            variant="ghost"
+            onClick={() => {
+              logout();
+              setIsOpen(false);
+            }}
+            className="justify-between gap-2 px-3 text-muted-foreground hover:text-foreground"
+          >
+            Log Out
+            <LogOutIcon className="size-4" />
+          </Button>
+        </div>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
new file mode 100644
index 00000000000..1d25150b621
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/components/NebulaMobileNav.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import { MenuIcon } from "lucide-react";
+import Link from "next/link";
+import { useState } from "react";
+import type { TruncatedSessionInfo } from "../api/types";
+import { ChatSidebar, useNewChatPageLink } from "./ChatSidebar";
+
+export function MobileNav(props: {
+  sessions: TruncatedSessionInfo[];
+  authToken: string;
+  account: Account;
+}) {
+  const [isOpen, setIsOpen] = useState(false);
+  const newChatPage = useNewChatPageLink();
+
+  return (
+    <nav className="flex justify-between border-b bg-muted/50 px-4 py-4 lg:hidden">
+      <Sheet open={isOpen} onOpenChange={setIsOpen}>
+        <SheetTrigger asChild>
+          <Button
+            variant="ghost"
+            onClick={() => setIsOpen(!isOpen)}
+            className="h-auto w-auto p-0.5"
+          >
+            <MenuIcon className="size-6" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent
+          side="left"
+          className="w-[calc(100vw-80px)] max-w-[300px] p-0"
+          onClick={(e) => {
+            if (!(e.target instanceof HTMLElement)) {
+              return;
+            }
+            if (
+              e.target instanceof HTMLAnchorElement ||
+              e.target.closest("a")
+            ) {
+              setIsOpen(false);
+            }
+          }}
+        >
+          <SheetTitle className="sr-only"> Menu </SheetTitle>
+          <ChatSidebar
+            type="mobile"
+            authToken={props.authToken}
+            sessions={props.sessions}
+            account={props.account}
+          />
+        </SheetContent>
+      </Sheet>
+
+      <div className="flex items-center gap-5">
+        <Button
+          asChild
+          variant="primary"
+          className="h-auto w-auto rounded-lg px-2.5 py-1.5"
+        >
+          <Link href={newChatPage}>New Chat</Link>
+        </Button>
+      </div>
+    </nav>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts b/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
new file mode 100644
index 00000000000..eb8cd56ed43
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/hooks/useSessionsWithLocalOverrides.ts
@@ -0,0 +1,13 @@
+import { useStore } from "@/lib/reactive";
+import type { TruncatedSessionInfo } from "../api/types";
+import { deletedSessionsStore, newSessionsStore } from "../stores";
+
+export function useSessionsWithLocalOverrides(
+  _sessions: TruncatedSessionInfo[],
+) {
+  const newAddedSessions = useStore(newSessionsStore);
+  const deletedSessions = useStore(deletedSessionsStore);
+  return [...newAddedSessions, ..._sessions].filter((s) => {
+    return !deletedSessions.some((d) => d === s.id);
+  });
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx b/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
new file mode 100644
index 00000000000..281ecc27ec8
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/icons/NebulaIcon.tsx
@@ -0,0 +1,20 @@
+export function NebulaIcon(props: { className?: string }) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={props.className}
+      aria-hidden="true"
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M11.6615 11.6615C14.1068 9.21621 16.8483 7.67011 19.223 7.07642C21.6439 6.47122 23.3052 6.91518 24.1951 7.80503C24.9754 8.58537 25.4129 9.95904 25.1006 11.9179C25.0142 11.9124 24.9272 11.9097 24.8395 11.9097C22.5804 11.9097 20.7491 13.741 20.7491 16.0001C20.7491 17.0477 21.1429 18.0033 21.7905 18.7269C21.3485 19.2734 20.8643 19.8129 20.3386 20.3386C17.8933 22.7839 15.1519 24.33 12.7771 24.9237C10.3563 25.5289 8.69492 25.0849 7.80507 24.195C7.02475 23.4147 6.5873 22.0411 6.89956 20.0823C6.98571 20.0877 7.07259 20.0905 7.16011 20.0905C9.41918 20.0905 11.2505 18.2592 11.2505 16.0001C11.2505 14.9526 10.8568 13.9971 10.2093 13.2735C10.6514 12.7269 11.1357 12.1873 11.6615 11.6615ZM7.20428 13.9554C7.20426 13.9554 7.20424 13.9554 7.20422 13.9554C7.29523 13.9573 7.38479 13.9652 7.47251 13.9786C8.45376 14.129 9.20531 14.9768 9.20531 16.0001C9.20531 17.1296 8.28964 18.0453 7.16011 18.0453C7.05596 18.0453 6.95362 18.0375 6.85365 18.0225C6.32546 17.9429 5.86345 17.6614 5.5488 17.259C5.54873 17.2592 5.54866 17.2594 5.5486 17.2596C5.27687 16.9124 5.11491 16.4751 5.11491 16.0001C5.11491 14.8706 6.03057 13.9549 7.16011 13.9549C7.17487 13.9549 7.18959 13.955 7.20428 13.9554ZM8.50119 12.1346C9.02224 11.4789 9.59433 10.8364 10.2154 10.2153C15.54 4.89065 22.4465 3.16405 25.6413 6.35885C27.1026 7.82023 27.5343 10.0582 27.0628 12.5661C28.1865 13.2952 28.9299 14.5608 28.9299 16.0001C28.9299 18.2592 27.0985 20.0905 24.8395 20.0905C24.3699 20.0905 23.9188 20.0114 23.4988 19.8657C22.9778 20.5213 22.4058 21.1638 21.7848 21.7847C16.4601 27.1094 9.5537 28.836 6.3589 25.6412C4.8976 24.1799 4.46592 21.9421 4.93723 19.4344C3.81325 18.7053 3.0697 17.4396 3.0697 16.0001C3.0697 13.741 4.90104 11.9097 7.16011 11.9097C7.62984 11.9097 8.08107 11.9889 8.50119 12.1346ZM24.5541 13.9746C24.554 13.9747 24.554 13.9747 24.554 13.9748C24.6473 13.9617 24.7426 13.955 24.8395 13.955C25.4942 13.955 26.077 14.2626 26.4513 14.7411C26.4513 14.7411 26.4513 14.7411 26.4513 14.7411C26.7229 15.0882 26.8847 15.5252 26.8847 16.0001C26.8847 17.1296 25.969 18.0453 24.8395 18.0453C23.7099 18.0453 22.7943 17.1296 22.7943 16.0001C22.7943 14.9674 23.5596 14.1135 24.5541 13.9746ZM16 13.9548C17.1295 13.9548 18.0452 14.8705 18.0452 16C18.0452 17.1296 17.1295 18.0452 16 18.0452C14.8705 18.0452 13.9548 17.1296 13.9548 16C13.9548 14.8705 14.8705 13.9548 16 13.9548Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/layout.tsx b/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
new file mode 100644
index 00000000000..bc7ac6dd3e8
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/layout.tsx
@@ -0,0 +1,103 @@
+import { type Team, getTeams } from "@/api/team";
+import type { Account } from "@3rdweb-sdk/react/hooks/useApi";
+import Link from "next/link";
+import type React from "react";
+import { getValidAccount } from "../../account/settings/getAccount";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../api/lib/getAuthToken";
+import { loginRedirect } from "../../login/loginRedirect";
+import { NebulaWaitListPage } from "../../team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page";
+import { getSessions } from "./api/session";
+import { ChatPageLayout } from "./components/ChatPageLayout";
+import { NebulaAccountButton } from "./components/NebulaAccountButton";
+import { NebulaIcon } from "./icons/NebulaIcon";
+
+export default async function Layout(props: {
+  children: React.ReactNode;
+}) {
+  const account = await getValidAccount();
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect();
+  }
+
+  const accountAddress = await getAuthTokenWalletAddress();
+
+  if (!accountAddress) {
+    loginRedirect();
+  }
+
+  const teams = await getTeams();
+  const firstTeam = teams?.[0];
+
+  if (!firstTeam) {
+    loginRedirect();
+  }
+
+  const teamWithNebulaAccess = teams.find((team) =>
+    team.enabledScopes.includes("nebula"),
+  );
+
+  // if none of them teams have nebula access, request access on first team, and show waitlist page
+  if (!teamWithNebulaAccess) {
+    return <NebulaWaitlistPage account={account} team={firstTeam} />;
+  }
+
+  const sessions = await getSessions({
+    authToken,
+  }).catch(() => []);
+
+  return (
+    <ChatPageLayout
+      accountAddress={accountAddress}
+      authToken={authToken}
+      sessions={sessions}
+      account={account}
+    >
+      {props.children}
+    </ChatPageLayout>
+  );
+}
+
+function NebulaWaitlistPage(props: {
+  account: Account;
+  team: Team;
+}) {
+  return (
+    <div className="flex min-h-screen flex-col overflow-hidden">
+      <header className="border-b">
+        <div className="container flex items-center justify-between px-4 py-3">
+          <div className="flex items-center gap-2 font-medium text-xl tracking-tight">
+            <NebulaIcon className="size-8 text-foreground" />
+            Nebula
+          </div>
+          <div className="flex items-center gap-6">
+            <Link
+              href="https://thirdweb.com/support"
+              className="text-muted-foreground text-sm hover:text-foreground"
+              target="_blank"
+            >
+              Support
+            </Link>
+
+            <Link
+              href="https://portal.thirdweb.com/"
+              className="text-muted-foreground text-sm hover:text-foreground"
+              target="_blank"
+            >
+              Docs
+            </Link>
+
+            <NebulaAccountButton account={props.account} type="compact" />
+          </div>
+        </div>
+      </header>
+
+      {/* page */}
+      <NebulaWaitListPage team={props.team} hideHeader />
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/page.tsx b/apps/dashboard/src/app/nebula-app/(app)/page.tsx
new file mode 100644
index 00000000000..136b38d5a2e
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/page.tsx
@@ -0,0 +1,32 @@
+import { getValidAccount } from "../../account/settings/getAccount";
+import {
+  getAuthToken,
+  getAuthTokenWalletAddress,
+} from "../../api/lib/getAuthToken";
+import { loginRedirect } from "../../login/loginRedirect";
+import { ChatPageContent } from "./components/ChatPageContent";
+
+export default async function Page() {
+  const authToken = await getAuthToken();
+
+  if (!authToken) {
+    loginRedirect();
+  }
+
+  const accountAddress = await getAuthTokenWalletAddress();
+  const account = await getValidAccount();
+
+  if (!accountAddress) {
+    loginRedirect();
+  }
+
+  return (
+    <ChatPageContent
+      accountAddress={accountAddress}
+      authToken={authToken}
+      session={undefined}
+      type="landing"
+      account={account}
+    />
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/(app)/stores.ts b/apps/dashboard/src/app/nebula-app/(app)/stores.ts
new file mode 100644
index 00000000000..8e4304cc853
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/(app)/stores.ts
@@ -0,0 +1,9 @@
+import { createStore } from "@/lib/reactive";
+import type { TruncatedSessionInfo } from "./api/types";
+
+export const newChatPageUrlStore = createStore<string | undefined>(undefined);
+
+export const newSessionsStore = createStore<TruncatedSessionInfo[]>([]);
+
+// array of deleted session ids
+export const deletedSessionsStore = createStore<string[]>([]);
diff --git a/apps/dashboard/src/app/nebula-app/login/page.tsx b/apps/dashboard/src/app/nebula-app/login/page.tsx
new file mode 100644
index 00000000000..05e92f2870b
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/login/page.tsx
@@ -0,0 +1,19 @@
+import { getRawAccount } from "../../account/settings/getAccount";
+import { LoginAndOnboardingPage } from "../../login/LoginPage";
+import { isValidEncodedRedirectPath } from "../../login/isValidEncodedRedirectPath";
+
+export default async function NebulaLogin(props: {
+  searchParams: Promise<{
+    next?: string;
+  }>;
+}) {
+  const nextPath = (await props.searchParams).next;
+  const account = await getRawAccount();
+
+  const redirectPath =
+    nextPath && isValidEncodedRedirectPath(nextPath) ? nextPath : "/";
+
+  return (
+    <LoginAndOnboardingPage account={account} redirectPath={redirectPath} />
+  );
+}
diff --git a/apps/dashboard/src/app/nebula-app/readme.md b/apps/dashboard/src/app/nebula-app/readme.md
new file mode 100644
index 00000000000..4237fa2b56c
--- /dev/null
+++ b/apps/dashboard/src/app/nebula-app/readme.md
@@ -0,0 +1,10 @@
+# Nebula App
+
+- This section of dashboard is only accessible via `nebula` subdomain and not from the `/nebula-app` route. This is done using `middleware.ts`
+- Treat this section of dashboard as a completely separate app from the rest of the dashboard.
+- For example: redirecting to `/login` inside this layout will render `nebula-app/login` page and not the global login page because this layout is only rendered at top level from `nebula` subdomain.
+
+## Development
+
+- Start dev server - `pnpm run dashboard`
+- Go to `http://nebula.localhost:3000` to test the nebula app.
diff --git a/apps/dashboard/src/app/team/[team_slug]/(team)/~/nebula/page.tsx b/apps/dashboard/src/app/team/[team_slug]/(team)/~/nebula/page.tsx
index e919b4cd522..37991880188 100644
--- a/apps/dashboard/src/app/team/[team_slug]/(team)/~/nebula/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/(team)/~/nebula/page.tsx
@@ -1,3 +1,5 @@
+import { getTeamBySlug } from "@/api/team";
+import { loginRedirect } from "../../../../../login/loginRedirect";
 import { NebulaWaitListPage } from "../../../[project_slug]/nebula/components/nebula-waitlist-page";
 
 export default async function Page(props: {
@@ -6,11 +8,11 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
+  const team = await getTeamBySlug(params.team_slug);
 
-  return (
-    <NebulaWaitListPage
-      redirectOnNoTeam={`/login?next=${encodeURIComponent(`/team/${params.team_slug}/~/nebula`)}`}
-      teamSlug={params.team_slug}
-    />
-  );
+  if (!team) {
+    loginRedirect(`/team/${params.team_slug}/~/nebula`);
+  }
+
+  return <NebulaWaitListPage team={team} />;
 }
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
index 3a693f15c54..f84dc36f382 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page-ui.client.tsx
@@ -1,24 +1,31 @@
 import { Button } from "@/components/ui/button";
-import { OrbitIcon } from "lucide-react";
+import { cn } from "@/lib/utils";
 import Link from "next/link";
+import { NebulaIcon } from "../../../../../nebula-app/(app)/icons/NebulaIcon";
 import { ShareButton } from "./share-button.client";
 
-export function NebulaWaitListPageUI(props: { teamId: string }) {
+export function NebulaWaitListPageUI(props: {
+  teamId: string;
+  className?: string;
+  hideHeader?: boolean;
+}) {
   return (
-    <div className="flex grow flex-col">
+    <div className={cn("flex grow flex-col", props.className)}>
       {/* Header */}
-      <div className="border-b py-10">
-        <div className="container flex items-center justify-between">
-          <h1 className="font-semibold text-3xl tracking-tight"> Nebula </h1>
-          <Button asChild variant="outline">
-            <Link href="/contact-us" target="_blank">
-              Contact Us
-            </Link>
-          </Button>
+      {!props.hideHeader && (
+        <div className="border-b py-10">
+          <div className="container flex items-center justify-between">
+            <h1 className="font-semibold text-3xl tracking-tight"> Nebula </h1>
+            <Button asChild variant="outline">
+              <Link href="/contact-us" target="_blank">
+                Contact Us
+              </Link>
+            </Button>
+          </div>
         </div>
-      </div>
+      )}
 
-      <div className="container flex grow flex-col overflow-hidden pt-32 pb-48">
+      <div className="container flex grow flex-col overflow-hidden py-32">
         <CenteredCard
           title="You're on the waitlist"
           description="You should receive access to Nebula soon!"
@@ -74,7 +81,7 @@ function CenteredCard(props: {
             {/* Icon */}
             <div className="rounded-xl border p-1">
               <div className="rounded-lg border bg-muted/50 p-2">
-                <OrbitIcon className="size-5 text-muted-foreground" />
+                <NebulaIcon className="size-5 text-muted-foreground" />
               </div>
             </div>
 
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
index faedc079f7d..b8eea5c61aa 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/components/nebula-waitlist-page.tsx
@@ -1,21 +1,15 @@
 import { joinTeamWaitlist } from "@/actions/joinWaitlist";
-import { getTeamBySlug, getTeamNebulaWaitList } from "@/api/team";
+import { type Team, getTeamNebulaWaitList } from "@/api/team";
 import { Button } from "@/components/ui/button";
 import Link from "next/link";
-import { redirect } from "next/navigation";
 import { NebulaWaitListPageUI } from "./nebula-waitlist-page-ui.client";
 
 export async function NebulaWaitListPage(props: {
-  redirectOnNoTeam: string;
-  teamSlug: string;
+  team: Team;
+  className?: string;
+  hideHeader?: boolean;
 }) {
-  const team = await getTeamBySlug(props.teamSlug);
-
-  if (!team) {
-    redirect(props.redirectOnNoTeam);
-  }
-
-  const nebulaWaitList = await getTeamNebulaWaitList(team.slug);
+  const nebulaWaitList = await getTeamNebulaWaitList(props.team.slug);
 
   // this should never happen
   if (!nebulaWaitList) {
@@ -28,18 +22,24 @@ export async function NebulaWaitListPage(props: {
   if (!nebulaWaitList.onWaitlist) {
     const res = await joinTeamWaitlist({
       scope: "nebula",
-      teamSlug: team.slug,
+      teamSlug: props.team.slug,
     }).catch(() => null);
 
     // this should never happen
     if (!res?.success) {
       return (
-        <UnexpectedErrorPage message="Failed to join Nebula waitlist status for your team" />
+        <UnexpectedErrorPage message="Failed to join Nebula waitlist. Please try again later" />
       );
     }
   }
 
-  return <NebulaWaitListPageUI teamId={team.id} />;
+  return (
+    <NebulaWaitListPageUI
+      teamId={props.team.id}
+      className={props.className}
+      hideHeader={props.hideHeader}
+    />
+  );
 }
 
 function UnexpectedErrorPage(props: {
diff --git a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
index 1b8d9088423..d7afd42ac0f 100644
--- a/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
+++ b/apps/dashboard/src/app/team/[team_slug]/[project_slug]/nebula/page.tsx
@@ -1,3 +1,5 @@
+import { getTeamBySlug } from "@/api/team";
+import { loginRedirect } from "../../../../login/loginRedirect";
 import { NebulaWaitListPage } from "./components/nebula-waitlist-page";
 
 export default async function Page(props: {
@@ -7,11 +9,11 @@ export default async function Page(props: {
   }>;
 }) {
   const params = await props.params;
+  const team = await getTeamBySlug(params.team_slug);
 
-  return (
-    <NebulaWaitListPage
-      redirectOnNoTeam={`/login?next=${encodeURIComponent(`/team/${params.team_slug}/${params.project_slug}/nebula`)}`}
-      teamSlug={params.team_slug}
-    />
-  );
+  if (!team) {
+    loginRedirect(`/team/${params.team_slug}/${params.project_slug}/nebula`);
+  }
+
+  return <NebulaWaitListPage team={team} />;
 }
diff --git a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx b/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
index 8ecd1e0b7f5..d175fd6af4f 100644
--- a/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
+++ b/apps/dashboard/src/components/ClientOnly/ClientOnly.tsx
@@ -2,6 +2,7 @@
 
 import { type ReactNode, useEffect, useState } from "react";
 import type { ComponentWithChildren } from "types/component-with-children";
+import { cn } from "../../@/lib/utils";
 import styles from "./ClientOnly.module.css";
 
 interface ClientOnlyProps {
@@ -11,6 +12,7 @@ interface ClientOnlyProps {
   ssr: ReactNode;
   fadeInDuration?: number;
   style?: React.CSSProperties;
+  className?: string;
 }
 
 export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
@@ -18,6 +20,7 @@ export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
   fadeInDuration,
   ssr,
   style,
+  className,
 }) => {
   const hasMounted = useIsClientMounted();
 
@@ -27,7 +30,7 @@ export const ClientOnly: ComponentWithChildren<ClientOnlyProps> = ({
 
   return (
     <div
-      className={styles.fadeIn}
+      className={cn(styles.fadeIn, className)}
       style={{
         animationDuration: `${fadeInDuration}ms`,
         opacity: fadeInDuration ? 0 : 1,
diff --git a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx
index 8dbf0e170ba..efddf336123 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.stories.tsx
@@ -25,6 +25,12 @@ export const DisableCodeHighlight: Story = {
   },
 };
 
+export const SkipHTML: Story = {
+  args: {
+    skipHtml: true,
+  },
+};
+
 export const Mobile: Story = {
   args: {},
   parameters: {
@@ -143,17 +149,23 @@ function example() {
 ### Strikethrough
 ~~This is strikethrough text.~~
 
+### HTML Elements
 
+<br />
 `;
 
 function Story(props: {
   disableCodeHighlight?: boolean;
+  skipHtml?: boolean;
 }) {
   return (
     <div className="container max-w-[800px] py-10">
       <MarkdownRenderer
         markdownText={markdownExample}
-        disableCodeHighlight={props.disableCodeHighlight}
+        code={{
+          disableCodeHighlight: props.disableCodeHighlight,
+        }}
+        skipHtml={props.skipHtml}
       />
     </div>
   );
diff --git a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
index bbf0815a4af..63619c9e737 100644
--- a/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
+++ b/apps/dashboard/src/components/contract-components/published-contract/markdown-renderer.tsx
@@ -19,8 +19,19 @@ import remarkGfm from "remark-gfm";
 export const MarkdownRenderer: React.FC<{
   markdownText: string;
   className?: string;
-  disableCodeHighlight?: boolean;
-}> = ({ markdownText, className, disableCodeHighlight }) => {
+  code?: {
+    disableCodeHighlight?: boolean;
+    ignoreFormattingErrors?: boolean;
+  };
+  p?: {
+    className?: string;
+  };
+  li?: {
+    className?: string;
+  };
+  skipHtml?: boolean;
+}> = (markdownProps) => {
+  const { markdownText, className, code } = markdownProps;
   const commonHeadingClassName =
     "mb-2 pb-2 leading-5 font-semibold tracking-tight";
 
@@ -28,6 +39,7 @@ export const MarkdownRenderer: React.FC<{
     <div className={className}>
       <ReactMarkdown
         remarkPlugins={[remarkGfm]}
+        skipHtml={markdownProps.skipHtml}
         components={{
           h1: (props) => (
             <h2
@@ -88,9 +100,9 @@ export const MarkdownRenderer: React.FC<{
 
           code: ({ ...props }) => {
             if (props?.className) {
-              if (disableCodeHighlight) {
+              if (code?.disableCodeHighlight) {
                 return (
-                  <div className="mb-4">
+                  <div className="my-4">
                     <PlainTextCodeBlock
                       {...cleanedProps(props)}
                       code={onlyText(props.children).trim()}
@@ -100,11 +112,12 @@ export const MarkdownRenderer: React.FC<{
               }
               const language = props.className.replace("language-", "");
               return (
-                <div className="mb-4">
+                <div className="my-4">
                   <CodeClient
                     lang={language}
                     {...cleanedProps(props)}
                     code={onlyText(props.children).trim()}
+                    ignoreFormattingErrors={code?.ignoreFormattingErrors}
                   />
                 </div>
               );
@@ -115,7 +128,10 @@ export const MarkdownRenderer: React.FC<{
 
           p: (props) => (
             <p
-              className="mb-4 text-muted-foreground leading-relaxed"
+              className={cn(
+                "mb-4 text-muted-foreground leading-loose",
+                markdownProps.p?.className,
+              )}
               {...cleanedProps(props)}
             />
           ),
@@ -159,12 +175,20 @@ export const MarkdownRenderer: React.FC<{
           ),
           li: ({ children: c, ...props }) => (
             <li
-              className="mb-1.5 text-muted-foreground"
+              className={cn(
+                "mb-2 text-muted-foreground [&>p]:m-0",
+                markdownProps.li?.className,
+              )}
               {...cleanedProps(props)}
             >
               {c}
             </li>
           ),
+          strong(props) {
+            return (
+              <strong className="font-semibold" {...cleanedProps(props)} />
+            );
+          },
         }}
       >
         {markdownText}
diff --git a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
index 8acc4240754..74e44a0975c 100644
--- a/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
+++ b/apps/dashboard/src/components/notices/AnnouncementBanner.tsx
@@ -3,30 +3,22 @@ import { Button } from "@/components/ui/button";
 import { TrackedLinkTW } from "@/components/ui/tracked-link";
 import { useLocalStorage } from "hooks/useLocalStorage";
 import { ChevronRightIcon, XIcon } from "lucide-react";
-import { usePathname } from "next/navigation";
-
-function shouldHideAnnouncement(pathname: string) {
-  const paths = pathname.slice(1).split("/");
-
-  // hide on /login
-  if (paths.length === 1 && paths[0] === "login") {
-    return true;
-  }
-
-  return false;
-}
+import { useSelectedLayoutSegment } from "next/navigation";
 
 function AnnouncementBanner(props: {
   href: string;
   label: string;
   trackingLabel: string;
 }) {
-  const pathname = usePathname();
-
+  const layoutSegment = useSelectedLayoutSegment();
   const [hasDismissedAnnouncement, setHasDismissedAnnouncement] =
     useLocalStorage(`dismissed-${props.trackingLabel}`, false, true);
 
-  if (hasDismissedAnnouncement || shouldHideAnnouncement(pathname || "")) {
+  if (
+    hasDismissedAnnouncement ||
+    layoutSegment === "login" ||
+    layoutSegment === "nebula-app"
+  ) {
     return null;
   }
 
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
index 799fe8945d7..8a17f6336e1 100644
--- a/apps/dashboard/src/middleware.ts
+++ b/apps/dashboard/src/middleware.ts
@@ -22,8 +22,30 @@ export const config = {
 };
 
 export async function middleware(request: NextRequest) {
-  let cookiesToSet: Record<string, string> | undefined = undefined;
   const { pathname } = request.nextUrl;
+
+  // nebula subdomain handling
+  const host = request.headers.get("host");
+  const subdomain = host?.split(".")[0];
+  const paths = pathname.slice(1).split("/");
+
+  // nebula.thirdweb.com -> render page at app/nebula-app
+  if (subdomain === "nebula" && host) {
+    const newPaths = ["nebula-app", ...paths];
+    return rewrite(request, `/${newPaths.join("/")}`, undefined);
+  }
+
+  // requesting page at app/nebula-app on thirdweb.com -> redirect to nebula.thirdweb.com
+  if (paths[0] === "nebula-app") {
+    const newPaths = paths.slice(1);
+    const url = new URL(request.nextUrl.href);
+    url.host = `nebula.${host}`;
+    url.pathname = `/${newPaths.join("/")}`;
+
+    return NextResponse.redirect(url.href);
+  }
+
+  let cookiesToSet: Record<string, string> | undefined = undefined;
   const activeAccount = request.cookies.get(COOKIE_ACTIVE_ACCOUNT)?.value;
   const authCookie = activeAccount
     ? request.cookies.get(COOKIE_PREFIX_TOKEN + getAddress(activeAccount))
@@ -73,7 +95,6 @@ export async function middleware(request: NextRequest) {
   }
 
   // remove '/' in front and then split by '/'
-  const paths = pathname.slice(1).split("/");
 
   // if it's the homepage and we have an auth cookie, redirect to the dashboard
   if (paths.length === 1 && paths[0] === "" && authCookie) {
diff --git a/apps/dashboard/src/stories/stubs.ts b/apps/dashboard/src/stories/stubs.ts
index 36a73f1232a..51ac911e36a 100644
--- a/apps/dashboard/src/stories/stubs.ts
+++ b/apps/dashboard/src/stories/stubs.ts
@@ -1,7 +1,11 @@
 import type { Project } from "@/api/projects";
 import type { Team } from "@/api/team";
 import type { TeamSubscription } from "@/api/team-subscription";
-import type { ApiKey, ApiKeyService } from "@3rdweb-sdk/react/hooks/useApi";
+import type {
+  Account,
+  ApiKey,
+  ApiKeyService,
+} from "@3rdweb-sdk/react/hooks/useApi";
 import type {
   EngineAlert,
   EngineAlertRule,
@@ -39,6 +43,16 @@ export function teamStub(id: string, billingPlan: Team["billingPlan"]): Team {
     updatedAt: new Date().toISOString(),
     billingEmail: "foo@example.com",
     growthTrialEligible: true,
+    enabledScopes: [
+      "pay",
+      "storage",
+      "rpc",
+      "bundler",
+      "insight",
+      "embeddedWallets",
+      "relayer",
+      "chainsaw",
+    ],
   };
 
   return team;
@@ -262,3 +276,44 @@ export function teamSubscriptionsStub(
     },
   ];
 }
+
+export function randomLorem(length: number) {
+  const loremWords = [
+    "lorem",
+    "ipsum",
+    "dolor",
+    "sit",
+    "amet",
+    "consectetur",
+    "adipiscing",
+    "elit",
+    "sed",
+    "do",
+    "eiusmod",
+    "tempor",
+    "incididunt",
+    "ut",
+    "labore",
+    "et",
+    "dolore",
+    "magna",
+    "aliqua",
+  ];
+
+  return Array.from({ length }, () => {
+    const randomIndex = Math.floor(Math.random() * loremWords.length);
+    return loremWords[randomIndex];
+  }).join(" ");
+}
+
+export function accountStub(overrides?: Partial<Account>): Account {
+  return {
+    email: "user@example.com",
+    name: "John Doe",
+    id: "foo",
+    isStaff: false,
+    advancedEnabled: false,
+    creatorWalletAddress: "0x1F846F6DAE38E1C88D71EAA191760B15f38B7A37",
+    ...overrides,
+  };
+}
diff --git a/apps/dashboard/src/utils/fetchWithAuthToken.ts b/apps/dashboard/src/utils/fetchWithAuthToken.ts
new file mode 100644
index 00000000000..516fd3dc805
--- /dev/null
+++ b/apps/dashboard/src/utils/fetchWithAuthToken.ts
@@ -0,0 +1,50 @@
+type FetchWithKeyOptions = {
+  endpoint: string;
+  authToken: string;
+  timeout?: number;
+} & (
+  | {
+      method: "POST" | "PUT";
+      body: Record<string, unknown>;
+    }
+  | {
+      method: "GET" | "DELETE";
+    }
+);
+
+export async function fetchWithAuthToken(options: FetchWithKeyOptions) {
+  const timeout = options.timeout || 30000;
+
+  const controller = new AbortController();
+  const timeoutId = setTimeout(() => controller.abort(), timeout);
+
+  try {
+    const response = await fetch(options.endpoint, {
+      method: options.method,
+      headers: {
+        "Content-Type": "application/json",
+        Accept: "application/json",
+        Authorization: `Bearer ${options.authToken}`,
+      },
+      body: "body" in options ? JSON.stringify(options.body) : undefined,
+      signal: controller.signal,
+    });
+
+    if (!response.ok) {
+      if (response.status === 504) {
+        throw new Error("Request timed out. Please try again.");
+      }
+
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+
+    return response;
+  } catch (error: unknown) {
+    if (error instanceof Error && error.name === "AbortError") {
+      throw new Error("Request timed out. Please try again.");
+    }
+    throw error;
+  } finally {
+    clearTimeout(timeoutId);
+  }
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1729bc2c6b9..c2015b964e7 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,7 +135,7 @@ importers:
         version: 1.1.4(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       '@sentry/nextjs':
         specifier: 8.42.0
-        version: 8.42.0(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+        version: 8.42.0(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       '@shazow/whatsabi':
         specifier: ^0.17.0
         version: 0.17.0(@noble/hashes@1.6.1)(typescript@5.7.2)(zod@3.23.8)
@@ -150,7 +150,7 @@ importers:
         version: link:../../packages/service-utils
       '@vercel/functions':
         specifier: ^1.5.1
-        version: 1.5.1(@aws-sdk/credential-provider-web-identity@3.696.0(@aws-sdk/client-sts@3.699.0))
+        version: 1.5.1(@aws-sdk/credential-provider-web-identity@3.696.0)
       '@vercel/og':
         specifier: ^0.6.4
         version: 0.6.4
@@ -175,6 +175,9 @@ importers:
       date-fns:
         specifier: 4.1.0
         version: 4.1.0
+      fetch-event-stream:
+        specifier: 0.1.5
+        version: 0.1.5
       flat:
         specifier: ^6.0.1
         version: 6.0.1
@@ -276,7 +279,7 @@ importers:
         version: 2.5.5
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)))
+        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)))
       thirdweb:
         specifier: workspace:*
         version: link:../../packages/thirdweb
@@ -325,7 +328,7 @@ importers:
         version: 8.4.7(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))
       '@storybook/nextjs':
         specifier: 8.4.7
-        version: 8.4.7(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(type-fest@4.30.0)(typescript@5.7.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+        version: 8.4.7(@swc/core@1.10.1)(esbuild@0.24.0)(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(type-fest@4.30.0)(typescript@5.7.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       '@storybook/react':
         specifier: 8.4.7
         version: 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
@@ -373,7 +376,7 @@ importers:
         version: 10.4.20(postcss@8.4.49)
       checkly:
         specifier: ^4.14.0
-        version: 4.14.0(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(bufferutil@4.0.8)(typescript@5.7.2)(utf-8-validate@5.0.10)
+        version: 4.14.0(@swc/core@1.10.1)(@types/node@22.10.1)(bufferutil@4.0.8)(typescript@5.7.2)(utf-8-validate@5.0.10)
       eslint:
         specifier: 8.57.0
         version: 8.57.0
@@ -400,7 +403,7 @@ importers:
         version: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
       tailwindcss:
         specifier: 3.4.16
-        version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
       typescript:
         specifier: 5.7.2
         version: 5.7.2
@@ -524,10 +527,10 @@ importers:
         version: 8.4.49
       tailwindcss:
         specifier: 3.4.16
-        version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)))
+        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)))
       typescript:
         specifier: 5.7.2
         version: 5.7.2
@@ -539,13 +542,13 @@ importers:
         version: 1.0.6(react@19.0.0)
       '@mdx-js/loader':
         specifier: ^2.3.0
-        version: 2.3.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15)))
+        version: 2.3.0(webpack@5.97.1)
       '@mdx-js/react':
         specifier: ^2.3.0
         version: 2.3.0(react@19.0.0)
       '@next/mdx':
         specifier: 15.0.4
-        version: 15.0.4(@mdx-js/loader@2.3.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))))(@mdx-js/react@2.3.0(react@19.0.0))
+        version: 15.0.4(@mdx-js/loader@2.3.0(webpack@5.97.1))(@mdx-js/react@2.3.0(react@19.0.0))
       '@radix-ui/react-dialog':
         specifier: 1.1.2
         version: 1.1.2(@types/react-dom@19.0.2(@types/react@19.0.1))(@types/react@19.0.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
@@ -626,7 +629,7 @@ importers:
         version: 2.5.5
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)))
+        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)))
       thirdweb:
         specifier: workspace:*
         version: link:../../packages/thirdweb
@@ -684,7 +687,7 @@ importers:
         version: 1.2.4
       eslint-plugin-tailwindcss:
         specifier: ^3.17.5
-        version: 3.17.5(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)))
+        version: 3.17.5(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)))
       next-sitemap:
         specifier: ^4.2.3
         version: 4.2.3(next@15.0.4(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))
@@ -693,7 +696,7 @@ importers:
         version: 8.4.49
       tailwindcss:
         specifier: 3.4.16
-        version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
       tsx:
         specifier: 4.19.2
         version: 4.19.2
@@ -762,7 +765,7 @@ importers:
         version: 2.5.5
       tailwindcss-animate:
         specifier: ^1.0.7
-        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)))
+        version: 1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)))
       thirdweb:
         specifier: workspace:*
         version: link:../../packages/thirdweb
@@ -811,7 +814,7 @@ importers:
         version: 6.0.1(jiti@2.4.1)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.6.1)
       tailwindcss:
         specifier: 3.4.16
-        version: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+        version: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
       typescript:
         specifier: 5.7.2
         version: 5.7.2
@@ -4038,7 +4041,7 @@ packages:
   '@radix-ui/react-compose-refs@1.1.0':
     resolution: {integrity: sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -4056,7 +4059,7 @@ packages:
   '@radix-ui/react-context@1.1.1':
     resolution: {integrity: sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -4087,8 +4090,8 @@ packages:
   '@radix-ui/react-dismissable-layer@1.1.1':
     resolution: {integrity: sha512-QSxg29lfr/xcev6kSz7MAlmDnzbP1eI/Dwn3Tp1ip0KT5CUELsxkekFEMVBEoykI3oV39hKT4TKZzBNMbcTZYQ==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -4113,7 +4116,7 @@ packages:
   '@radix-ui/react-focus-guards@1.1.1':
     resolution: {integrity: sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -4201,8 +4204,8 @@ packages:
   '@radix-ui/react-popper@1.2.0':
     resolution: {integrity: sha512-ZnRMshKF43aBxVWPWvbj21+7TQCvhuULWJ4gNIKYpRlQt5xGRhLx66tMp8pya2UkGHTSlhpXwmjqltDYHhw7Vg==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -4214,8 +4217,8 @@ packages:
   '@radix-ui/react-portal@1.1.2':
     resolution: {integrity: sha512-WeDYLGPxJb/5EGBoedyJbT0MpoULmwnIPMJMSldkuiMsBAv7N1cRdsTWZWht9vpPOiN3qyiGAtbK2is47/uMFg==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -4227,8 +4230,8 @@ packages:
   '@radix-ui/react-presence@1.1.1':
     resolution: {integrity: sha512-IeFXVi4YS1K0wVZzXNrbaaUvIJ3qdY+/Ih4eHFhWA9SwGR9UDX7Ck8abvL57C4cv3wwMvUE0OG69Qc3NCcTe/A==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -4388,7 +4391,7 @@ packages:
   '@radix-ui/react-use-controllable-state@1.1.0':
     resolution: {integrity: sha512-MtfMVJiSr2NjzS0Aa90NPTnvTSg6C/JLCV7ma0W6+OMV78vd8OyRpID+Ng9LxzsPbLeuBnWBA1Nq30AtBIDChw==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -4433,7 +4436,7 @@ packages:
   '@radix-ui/react-use-size@1.1.0':
     resolution: {integrity: sha512-XW3/vWuIXHa+2Uwcc2ABSfcCledmXhhQPlGbfcRXbiUQI5Icjcg19BGCZVKKInYbvUCut/ufbbLLPFC5cbb1hw==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
+      '@types/react': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
       '@types/react':
@@ -4442,8 +4445,8 @@ packages:
   '@radix-ui/react-visually-hidden@1.1.0':
     resolution: {integrity: sha512-N8MDZqtgCgG5S3aV60INAB475osJousYpZ4cTJ2cFbMpdHS5Y6loLTH8LPtkj2QN0x93J30HT/M3qJXM0+lyeQ==}
     peerDependencies:
-      '@types/react': npm:types-react@19.0.0-rc.1
-      '@types/react-dom': npm:types-react-dom@19.0.0-rc.1
+      '@types/react': '*'
+      '@types/react-dom': '*'
       react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
       react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
     peerDependenciesMeta:
@@ -5510,9 +5513,6 @@ packages:
   '@swc/helpers@0.5.13':
     resolution: {integrity: sha512-UoKGxQ3r5kYI9dALKJapMmuK+1zWM/H17Z1+iwnNmzcJRnfFuevZs375TA5rW31pu4BS4NoSy1fRsexDXfWn5w==}
 
-  '@swc/helpers@0.5.15':
-    resolution: {integrity: sha512-JQ5TuMi45Owi4/BIMAJBoSQoOJu12oOk/gADqlcUL9JEdHB8vyjUSsxqeNXnmXHjYKMi2WcYtezGEEhqUI/E2g==}
-
   '@swc/types@0.1.17':
     resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==}
 
@@ -5907,7 +5907,7 @@ packages:
     resolution: {integrity: sha512-/MzmgNd3nnbDbOi3LfasXWWe292+iuo+umJ0bCCMCPc1jLO/z2BQmWUUUXvXLbrQey/JgzdF/OV+I5bzEGwJkQ==}
     engines: {node: ^18.18.0 || >=20.0.0}
     peerDependencies:
-      eslint: 8.57.0
+      eslint: ^8.56.0
       typescript: '*'
     peerDependenciesMeta:
       typescript:
@@ -8360,6 +8360,9 @@ packages:
       picomatch:
         optional: true
 
+  fetch-event-stream@0.1.5:
+    resolution: {integrity: sha512-V1PWovkspxQfssq/NnxoEyQo1DV+MRK/laPuPblIZmSjMN8P5u46OhlFQznSr9p/t0Sp8Uc6SbM3yCMfr0KU8g==}
+
   fetch-retry@4.1.1:
     resolution: {integrity: sha512-e6eB7zN6UBSwGVwrbWVH+gdLnkW9WwHhmq2YDK1Sh30pzx1onRVGBvogTlUeWxwTa+L86NYdo4hFkh7O8ZjSnA==}
 
@@ -17239,11 +17242,11 @@ snapshots:
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
 
-  '@mdx-js/loader@2.3.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15)))':
+  '@mdx-js/loader@2.3.0(webpack@5.97.1)':
     dependencies:
       '@mdx-js/mdx': 2.3.0
       source-map: 0.7.4
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))
+      webpack: 5.97.1
     transitivePeerDependencies:
       - supports-color
 
@@ -17383,11 +17386,11 @@ snapshots:
     dependencies:
       fast-glob: 3.3.1
 
-  '@next/mdx@15.0.4(@mdx-js/loader@2.3.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))))(@mdx-js/react@2.3.0(react@19.0.0))':
+  '@next/mdx@15.0.4(@mdx-js/loader@2.3.0(webpack@5.97.1))(@mdx-js/react@2.3.0(react@19.0.0))':
     dependencies:
       source-map: 0.7.4
     optionalDependencies:
-      '@mdx-js/loader': 2.3.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15)))
+      '@mdx-js/loader': 2.3.0(webpack@5.97.1)
       '@mdx-js/react': 2.3.0(react@19.0.0)
 
   '@next/swc-darwin-arm64@15.0.4':
@@ -17539,7 +17542,7 @@ snapshots:
       widest-line: 3.1.0
       wrap-ansi: 7.0.0
 
-  '@oclif/core@2.8.11(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)':
+  '@oclif/core@2.8.11(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)':
     dependencies:
       '@types/cli-progress': 3.11.6
       ansi-escapes: 4.3.2
@@ -17565,7 +17568,7 @@ snapshots:
       strip-ansi: 6.0.1
       supports-color: 8.1.1
       supports-hyperlinks: 2.3.0
-      ts-node: 10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      ts-node: 10.9.2(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       tslib: 2.8.1
       widest-line: 3.1.0
       wordwrap: 1.0.0
@@ -17603,10 +17606,10 @@ snapshots:
     dependencies:
       '@oclif/core': 1.26.2
 
-  '@oclif/plugin-not-found@2.3.23(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)':
+  '@oclif/plugin-not-found@2.3.23(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)':
     dependencies:
       '@oclif/color': 1.0.13
-      '@oclif/core': 2.8.11(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      '@oclif/core': 2.8.11(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       fast-levenshtein: 3.0.0
       lodash: 4.17.21
     transitivePeerDependencies:
@@ -17631,9 +17634,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  '@oclif/plugin-warn-if-update-available@2.0.24(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)':
+  '@oclif/plugin-warn-if-update-available@2.0.24(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)':
     dependencies:
-      '@oclif/core': 2.8.11(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      '@oclif/core': 2.8.11(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       chalk: 4.1.2
       debug: 4.4.0(supports-color@8.1.1)
       fs-extra: 9.1.0
@@ -18024,7 +18027,7 @@ snapshots:
     dependencies:
       playwright: 1.49.1
 
-  '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.2)(type-fest@4.30.0)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))':
+  '@pmmmwh/react-refresh-webpack-plugin@0.5.15(react-refresh@0.14.2)(type-fest@4.30.0)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))':
     dependencies:
       ansi-html: 0.0.9
       core-js-pure: 3.39.0
@@ -18034,7 +18037,7 @@ snapshots:
       react-refresh: 0.14.2
       schema-utils: 4.2.0
       source-map: 0.7.4
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     optionalDependencies:
       type-fest: 4.30.0
       webpack-hot-middleware: 2.26.1
@@ -19119,7 +19122,7 @@ snapshots:
 
   '@sentry/core@8.42.0': {}
 
-  '@sentry/nextjs@8.42.0(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))':
+  '@sentry/nextjs@8.42.0(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react@19.0.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))':
     dependencies:
       '@opentelemetry/api': 1.9.0
       '@opentelemetry/instrumentation-http': 0.53.0(@opentelemetry/api@1.9.0)
@@ -19131,7 +19134,7 @@ snapshots:
       '@sentry/opentelemetry': 8.42.0(@opentelemetry/api@1.9.0)(@opentelemetry/core@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/instrumentation@0.54.2(@opentelemetry/api@1.9.0))(@opentelemetry/sdk-trace-base@1.28.0(@opentelemetry/api@1.9.0))(@opentelemetry/semantic-conventions@1.28.0)
       '@sentry/react': 8.42.0(react@19.0.0)
       '@sentry/vercel-edge': 8.42.0
-      '@sentry/webpack-plugin': 2.22.6(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      '@sentry/webpack-plugin': 2.22.6(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       chalk: 3.0.0
       next: 15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
       resolve: 1.22.8
@@ -19207,12 +19210,12 @@ snapshots:
       '@opentelemetry/api': 1.9.0
       '@sentry/core': 8.42.0
 
-  '@sentry/webpack-plugin@2.22.6(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))':
+  '@sentry/webpack-plugin@2.22.6(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))':
     dependencies:
       '@sentry/bundler-plugin-core': 2.22.6
       unplugin: 1.0.1
       uuid: 9.0.1
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     transitivePeerDependencies:
       - encoding
       - supports-color
@@ -19947,7 +19950,7 @@ snapshots:
       ts-dedent: 2.2.0
       vite: 6.0.3(@types/node@22.10.1)(jiti@2.4.1)(lightningcss@1.28.2)(terser@5.37.0)(tsx@4.19.2)(yaml@2.6.1)
 
-  '@storybook/builder-webpack5@8.4.7(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)':
+  '@storybook/builder-webpack5@8.4.7(@swc/core@1.10.1)(esbuild@0.24.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)':
     dependencies:
       '@storybook/core-webpack': 8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))
       '@types/node': 22.10.1
@@ -19956,23 +19959,23 @@ snapshots:
       case-sensitive-paths-webpack-plugin: 2.4.0
       cjs-module-lexer: 1.4.1
       constants-browserify: 1.0.0
-      css-loader: 6.11.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      css-loader: 6.11.0(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       es-module-lexer: 1.5.4
-      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
-      html-webpack-plugin: 5.6.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      fork-ts-checker-webpack-plugin: 8.0.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
+      html-webpack-plugin: 5.6.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       magic-string: 0.30.14
       path-browserify: 1.0.1
       process: 0.11.10
       semver: 7.6.3
       storybook: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
-      style-loader: 3.3.4(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
-      terser-webpack-plugin: 5.3.10(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      style-loader: 3.3.4(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.10.1)(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       ts-dedent: 2.2.0
       url: 0.11.4
       util: 0.12.5
       util-deprecate: 1.0.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
-      webpack-dev-middleware: 6.1.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
+      webpack-dev-middleware: 6.1.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       webpack-hot-middleware: 2.26.1
       webpack-virtual-modules: 0.6.2
     optionalDependencies:
@@ -20084,7 +20087,7 @@ snapshots:
     dependencies:
       storybook: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
 
-  '@storybook/nextjs@8.4.7(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(type-fest@4.30.0)(typescript@5.7.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))':
+  '@storybook/nextjs@8.4.7(@swc/core@1.10.1)(esbuild@0.24.0)(next@15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(type-fest@4.30.0)(typescript@5.7.2)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))':
     dependencies:
       '@babel/core': 7.26.0
       '@babel/plugin-syntax-bigint': 7.8.3(@babel/core@7.26.0)
@@ -20099,31 +20102,31 @@ snapshots:
       '@babel/preset-react': 7.26.3(@babel/core@7.26.0)
       '@babel/preset-typescript': 7.26.0(@babel/core@7.26.0)
       '@babel/runtime': 7.26.0
-      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.30.0)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
-      '@storybook/builder-webpack5': 8.4.7(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
-      '@storybook/preset-react-webpack': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
+      '@pmmmwh/react-refresh-webpack-plugin': 0.5.15(react-refresh@0.14.2)(type-fest@4.30.0)(webpack-hot-middleware@2.26.1)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
+      '@storybook/builder-webpack5': 8.4.7(@swc/core@1.10.1)(esbuild@0.24.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
+      '@storybook/preset-react-webpack': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(@swc/core@1.10.1)(esbuild@0.24.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
       '@storybook/react': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
       '@storybook/test': 8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))
       '@types/node': 22.10.1
       '@types/semver': 7.5.8
-      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
-      css-loader: 6.11.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      babel-loader: 9.2.1(@babel/core@7.26.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
+      css-loader: 6.11.0(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       find-up: 5.0.0
       image-size: 1.1.1
       loader-utils: 3.3.1
       next: 15.0.4(@babel/core@7.26.0)(@opentelemetry/api@1.9.0)(@playwright/test@1.49.1)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)
-      node-polyfill-webpack-plugin: 2.0.1(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      node-polyfill-webpack-plugin: 2.0.1(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       pnp-webpack-plugin: 1.7.0(typescript@5.7.2)
       postcss: 8.4.49
-      postcss-loader: 8.1.1(postcss@8.4.49)(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      postcss-loader: 8.1.1(postcss@8.4.49)(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       react: 19.0.0
       react-dom: 19.0.0(react@19.0.0)
       react-refresh: 0.14.2
       resolve-url-loader: 5.0.0
-      sass-loader: 13.3.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      sass-loader: 13.3.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       semver: 7.6.3
       storybook: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
-      style-loader: 3.3.4(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      style-loader: 3.3.4(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       styled-jsx: 5.1.6(@babel/core@7.26.0)(react@19.0.0)
       ts-dedent: 2.2.0
       tsconfig-paths: 4.2.0
@@ -20131,7 +20134,7 @@ snapshots:
     optionalDependencies:
       sharp: 0.33.5
       typescript: 5.7.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     transitivePeerDependencies:
       - '@rspack/core'
       - '@swc/core'
@@ -20151,11 +20154,11 @@ snapshots:
       - webpack-hot-middleware
       - webpack-plugin-serve
 
-  '@storybook/preset-react-webpack@8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)':
+  '@storybook/preset-react-webpack@8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(@swc/core@1.10.1)(esbuild@0.24.0)(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)':
     dependencies:
       '@storybook/core-webpack': 8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))
       '@storybook/react': 8.4.7(@storybook/test@8.4.7(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)))(react-dom@19.0.0(react@19.0.0))(react@19.0.0)(storybook@8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10))(typescript@5.7.2)
-      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      '@storybook/react-docgen-typescript-plugin': 1.0.6--canary.9.0c3f3b7.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       '@types/node': 22.10.1
       '@types/semver': 7.5.8
       find-up: 5.0.0
@@ -20167,7 +20170,7 @@ snapshots:
       semver: 7.6.3
       storybook: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
       tsconfig-paths: 4.2.0
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     optionalDependencies:
       typescript: 5.7.2
     transitivePeerDependencies:
@@ -20186,7 +20189,7 @@ snapshots:
     dependencies:
       storybook: 8.4.7(bufferutil@4.0.8)(prettier@3.4.2)(utf-8-validate@5.0.10)
 
-  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))':
+  '@storybook/react-docgen-typescript-plugin@1.0.6--canary.9.0c3f3b7.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))':
     dependencies:
       debug: 4.4.0(supports-color@8.1.1)
       endent: 2.1.0
@@ -20196,7 +20199,7 @@ snapshots:
       react-docgen-typescript: 2.2.2(typescript@5.7.2)
       tslib: 2.8.1
       typescript: 5.7.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     transitivePeerDependencies:
       - supports-color
 
@@ -20684,7 +20687,7 @@ snapshots:
   '@swc/core-win32-x64-msvc@1.10.1':
     optional: true
 
-  '@swc/core@1.10.1(@swc/helpers@0.5.15)':
+  '@swc/core@1.10.1':
     dependencies:
       '@swc/counter': 0.1.3
       '@swc/types': 0.1.17
@@ -20699,7 +20702,6 @@ snapshots:
       '@swc/core-win32-arm64-msvc': 1.10.1
       '@swc/core-win32-ia32-msvc': 1.10.1
       '@swc/core-win32-x64-msvc': 1.10.1
-      '@swc/helpers': 0.5.15
     optional: true
 
   '@swc/counter@0.1.3': {}
@@ -20708,11 +20710,6 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
-  '@swc/helpers@0.5.15':
-    dependencies:
-      tslib: 2.8.1
-    optional: true
-
   '@swc/types@0.1.17':
     dependencies:
       '@swc/counter': 0.1.3
@@ -21259,7 +21256,7 @@ snapshots:
       '@urql/core': 5.1.0(graphql@16.9.0)
       wonka: 6.3.4
 
-  '@vercel/functions@1.5.1(@aws-sdk/credential-provider-web-identity@3.696.0(@aws-sdk/client-sts@3.699.0))':
+  '@vercel/functions@1.5.1(@aws-sdk/credential-provider-web-identity@3.696.0)':
     optionalDependencies:
       '@aws-sdk/credential-provider-web-identity': 3.696.0(@aws-sdk/client-sts@3.699.0)
 
@@ -22143,12 +22140,12 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  babel-loader@9.2.1(@babel/core@7.26.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       '@babel/core': 7.26.0
       find-cache-dir: 4.0.0
       schema-utils: 4.2.0
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   babel-plugin-istanbul@6.1.1:
     dependencies:
@@ -22609,13 +22606,13 @@ snapshots:
 
   check-error@2.1.1: {}
 
-  checkly@4.14.0(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(bufferutil@4.0.8)(typescript@5.7.2)(utf-8-validate@5.0.10):
+  checkly@4.14.0(@swc/core@1.10.1)(@types/node@22.10.1)(bufferutil@4.0.8)(typescript@5.7.2)(utf-8-validate@5.0.10):
     dependencies:
-      '@oclif/core': 2.8.11(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      '@oclif/core': 2.8.11(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       '@oclif/plugin-help': 5.1.20
-      '@oclif/plugin-not-found': 2.3.23(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      '@oclif/plugin-not-found': 2.3.23(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       '@oclif/plugin-plugins': 5.4.4
-      '@oclif/plugin-warn-if-update-available': 2.0.24(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      '@oclif/plugin-warn-if-update-available': 2.0.24(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
       '@typescript-eslint/typescript-estree': 6.19.0(typescript@5.7.2)
       acorn: 8.8.1
       acorn-walk: 8.2.0
@@ -23061,7 +23058,7 @@ snapshots:
 
   css-gradient-parser@0.0.16: {}
 
-  css-loader@6.11.0(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  css-loader@6.11.0(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       icss-utils: 5.1.0(postcss@8.4.49)
       postcss: 8.4.49
@@ -23072,7 +23069,7 @@ snapshots:
       postcss-value-parser: 4.2.0
       semver: 7.6.3
     optionalDependencies:
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   css-select@4.3.0:
     dependencies:
@@ -23958,11 +23955,11 @@ snapshots:
 
   eslint-plugin-svg-jsx@1.2.4: {}
 
-  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))):
+  eslint-plugin-tailwindcss@3.17.5(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))):
     dependencies:
       fast-glob: 3.3.2
       postcss: 8.4.49
-      tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+      tailwindcss: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
 
   eslint-scope@5.1.1:
     dependencies:
@@ -24523,6 +24520,8 @@ snapshots:
     optionalDependencies:
       picomatch: 4.0.2
 
+  fetch-event-stream@0.1.5: {}
+
   fetch-retry@4.1.1: {}
 
   fflate@0.4.8: {}
@@ -24642,7 +24641,7 @@ snapshots:
       cross-spawn: 7.0.6
       signal-exit: 4.1.0
 
-  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  fork-ts-checker-webpack-plugin@8.0.0(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       '@babel/code-frame': 7.26.2
       chalk: 4.1.2
@@ -24657,7 +24656,7 @@ snapshots:
       semver: 7.6.3
       tapable: 2.2.1
       typescript: 5.7.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   form-data-encoder@2.1.4: {}
 
@@ -25125,7 +25124,7 @@ snapshots:
 
   html-void-elements@3.0.0: {}
 
-  html-webpack-plugin@5.6.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  html-webpack-plugin@5.6.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       '@types/html-minifier-terser': 6.1.0
       html-minifier-terser: 6.1.0
@@ -25133,7 +25132,7 @@ snapshots:
       pretty-error: 4.0.0
       tapable: 2.2.1
     optionalDependencies:
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   htmlparser2@3.10.1:
     dependencies:
@@ -27629,7 +27628,7 @@ snapshots:
 
   node-int64@0.4.0: {}
 
-  node-polyfill-webpack-plugin@2.0.1(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  node-polyfill-webpack-plugin@2.0.1(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       assert: 2.1.0
       browserify-zlib: 0.2.0
@@ -27656,7 +27655,7 @@ snapshots:
       url: 0.11.4
       util: 0.12.5
       vm-browserify: 1.1.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   node-releases@2.0.18: {}
 
@@ -28281,13 +28280,13 @@ snapshots:
       camelcase-css: 2.0.1
       postcss: 8.4.49
 
-  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)):
+  postcss-load-config@4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)):
     dependencies:
       lilconfig: 3.1.3
       yaml: 2.6.1
     optionalDependencies:
       postcss: 8.4.49
-      ts-node: 10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)
+      ts-node: 10.9.2(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2)
 
   postcss-load-config@6.0.1(jiti@2.4.1)(postcss@8.4.49)(tsx@4.19.2)(yaml@2.6.1):
     dependencies:
@@ -28298,14 +28297,14 @@ snapshots:
       tsx: 4.19.2
       yaml: 2.6.1
 
-  postcss-loader@8.1.1(postcss@8.4.49)(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  postcss-loader@8.1.1(postcss@8.4.49)(typescript@5.7.2)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       cosmiconfig: 9.0.0(typescript@5.7.2)
       jiti: 1.21.6
       postcss: 8.4.49
       semver: 7.6.3
     optionalDependencies:
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     transitivePeerDependencies:
       - typescript
 
@@ -29461,10 +29460,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
-  sass-loader@13.3.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  sass-loader@13.3.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       neo-async: 2.6.2
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   satori@0.12.0:
     dependencies:
@@ -29991,9 +29990,9 @@ snapshots:
 
   structured-headers@0.4.1: {}
 
-  style-loader@3.3.4(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  style-loader@3.3.4(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   style-to-object@0.4.4:
     dependencies:
@@ -30138,11 +30137,11 @@ snapshots:
 
   tailwind-merge@2.5.5: {}
 
-  tailwindcss-animate@1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))):
+  tailwindcss-animate@1.0.7(tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))):
     dependencies:
-      tailwindcss: 3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+      tailwindcss: 3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
 
-  tailwindcss@3.4.16(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2)):
+  tailwindcss@3.4.16(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2)):
     dependencies:
       '@alloc/quick-lru': 5.2.0
       arg: 5.0.2
@@ -30161,7 +30160,7 @@ snapshots:
       postcss: 8.4.49
       postcss-import: 15.1.0(postcss@8.4.49)
       postcss-js: 4.0.1(postcss@8.4.49)
-      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2))
+      postcss-load-config: 4.0.2(postcss@8.4.49)(ts-node@10.9.2(@types/node@22.10.1)(typescript@5.7.2))
       postcss-nested: 6.2.0(postcss@8.4.49)
       postcss-selector-parser: 6.1.2
       resolve: 1.22.8
@@ -30223,29 +30222,18 @@ snapshots:
       ansi-escapes: 4.3.2
       supports-hyperlinks: 2.3.0
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  terser-webpack-plugin@5.3.10(@swc/core@1.10.1)(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
       jest-worker: 27.5.1
       schema-utils: 3.3.0
       serialize-javascript: 6.0.2
       terser: 5.37.0
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
     optionalDependencies:
-      '@swc/core': 1.10.1(@swc/helpers@0.5.15)
+      '@swc/core': 1.10.1
       esbuild: 0.24.0
 
-  terser-webpack-plugin@5.3.10(@swc/core@1.10.1(@swc/helpers@0.5.15))(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))):
-    dependencies:
-      '@jridgewell/trace-mapping': 0.3.25
-      jest-worker: 27.5.1
-      schema-utils: 3.3.0
-      serialize-javascript: 6.0.2
-      terser: 5.37.0
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))
-    optionalDependencies:
-      '@swc/core': 1.10.1(@swc/helpers@0.5.15)
-
   terser-webpack-plugin@5.3.10(webpack@5.97.1):
     dependencies:
       '@jridgewell/trace-mapping': 0.3.25
@@ -30383,7 +30371,7 @@ snapshots:
 
   ts-mixer@6.0.4: {}
 
-  ts-node@10.9.2(@swc/core@1.10.1(@swc/helpers@0.5.15))(@types/node@22.10.1)(typescript@5.7.2):
+  ts-node@10.9.2(@swc/core@1.10.1)(@types/node@22.10.1)(typescript@5.7.2):
     dependencies:
       '@cspotcode/source-map-support': 0.8.1
       '@tsconfig/node10': 1.0.11
@@ -30401,7 +30389,7 @@ snapshots:
       v8-compile-cache-lib: 3.0.1
       yn: 3.1.1
     optionalDependencies:
-      '@swc/core': 1.10.1(@swc/helpers@0.5.15)
+      '@swc/core': 1.10.1
 
   ts-pnp@1.2.0(typescript@5.7.2):
     optionalDependencies:
@@ -31151,7 +31139,7 @@ snapshots:
       - bufferutil
       - utf-8-validate
 
-  webpack-dev-middleware@6.1.3(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)):
+  webpack-dev-middleware@6.1.3(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)):
     dependencies:
       colorette: 2.0.20
       memfs: 3.5.3
@@ -31159,7 +31147,7 @@ snapshots:
       range-parser: 1.2.1
       schema-utils: 4.2.0
     optionalDependencies:
-      webpack: 5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)
+      webpack: 5.97.1(@swc/core@1.10.1)(esbuild@0.24.0)
 
   webpack-hot-middleware@2.26.1:
     dependencies:
@@ -31203,37 +31191,7 @@ snapshots:
       - esbuild
       - uglify-js
 
-  webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15)):
-    dependencies:
-      '@types/eslint-scope': 3.7.7
-      '@types/estree': 1.0.6
-      '@webassemblyjs/ast': 1.14.1
-      '@webassemblyjs/wasm-edit': 1.14.1
-      '@webassemblyjs/wasm-parser': 1.14.1
-      acorn: 8.14.0
-      browserslist: 4.24.2
-      chrome-trace-event: 1.0.4
-      enhanced-resolve: 5.17.1
-      es-module-lexer: 1.5.4
-      eslint-scope: 5.1.1
-      events: 3.3.0
-      glob-to-regexp: 0.4.1
-      graceful-fs: 4.2.11
-      json-parse-even-better-errors: 2.3.1
-      loader-runner: 4.3.0
-      mime-types: 2.1.35
-      neo-async: 2.6.2
-      schema-utils: 3.3.0
-      tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.10.1(@swc/helpers@0.5.15))(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15)))
-      watchpack: 2.4.2
-      webpack-sources: 3.2.3
-    transitivePeerDependencies:
-      - '@swc/core'
-      - esbuild
-      - uglify-js
-
-  webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0):
+  webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0):
     dependencies:
       '@types/eslint-scope': 3.7.7
       '@types/estree': 1.0.6
@@ -31255,7 +31213,7 @@ snapshots:
       neo-async: 2.6.2
       schema-utils: 3.3.0
       tapable: 2.2.1
-      terser-webpack-plugin: 5.3.10(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1(@swc/helpers@0.5.15))(esbuild@0.24.0))
+      terser-webpack-plugin: 5.3.10(@swc/core@1.10.1)(esbuild@0.24.0)(webpack@5.97.1(@swc/core@1.10.1)(esbuild@0.24.0))
       watchpack: 2.4.2
       webpack-sources: 3.2.3
     transitivePeerDependencies:
diff --git a/turbo.json b/turbo.json
index 46278485305..d6ba6d2034f 100644
--- a/turbo.json
+++ b/turbo.json
@@ -47,7 +47,8 @@
         "API_SERVER_SECRET",
         "TURNSTILE_SECRET_KEY",
         "NEXT_PUBLIC_TURNSTILE_SITE_KEY",
-        "NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET"
+        "NEXT_PUBLIC_THIRDWEB_ENGINE_FAUCET_WALLET",
+        "NEXT_PUBLIC_NEBULA_URL"
       ],
       "outputs": [".next/**", "!.next/cache/**"],
       "dependsOn": ["^build"]