@spacemade/ui 0.0.1

package/src/pages/storage/index.tsx

@@ -0,0 +1,526 @@
+'use client'
+
+import { useEffect, useMemo } from 'react'
+import { useDisclosure } from '@chakra-ui/react'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import SideNavLayout from '@components/common/layout/SideNavLayout'
+import { VectorCreateModal } from '@components/storage/addStorageModal'
+import VectorStoresTable from '@components/storage/table/vectorStoreTable'
+import PostsByCategory from '@components/projects/postByCategory'
+import ProjectPickerNav from '@components/projects/ProjectPickerNav'
+import { useAppSelector } from '@store/hooks'
+import { selectAccountState } from '@store/slice/api/accountSlice'
+
+const PublicStorageLanding = () => {
+  const heroVideoSrc =
+    'https://s3.amazonaws.com/osirus-dev/data/video/2026/02/23/video-provider-31d25560-1106-11f1-b8ea-6f73f6cd24f8-1771885467965-1-87ee8f66-9320-4de6-948a-d29151d083b8.mp4?v=1771885467965'
+
+  const favoriteModels = [
+    { label: 'Nova Pro', href: '/marketplace/nova-pro' },
+    { label: 'GPT5 Omni', href: '/marketplace/gpt5' },
+    { label: 'Claude 4 Sonnet', href: '/marketplace/claude-4-sonnet' },
+    { label: 'Gemini 3 Pro', href: '/marketplace/gemini-3-pro' },
+    { label: 'Veo 3 Video', href: '/marketplace/veo-3' },
+    { label: 'Nano Banana', href: '/marketplace/nano-banana' },
+  ]
+
+  const benefits = [
+    {
+      title: 'Security and Data Control',
+      text: 'Keep embeddings and source documents in your own cloud account so your team controls access boundaries, encryption keys, and retention policies.',
+    },
+    {
+      title: 'Compliance by Design',
+      text: 'Run storage in the same environment where you already meet SOC2, HIPAA, GDPR, or internal governance requirements.',
+    },
+    {
+      title: 'Redundancy and Backups',
+      text: 'Use your existing cloud backup, replication, and disaster recovery strategy instead of re-building it in a third-party stack.',
+    },
+  ]
+
+  return (
+    <div className="storage-landing">
+      <section className="storage-video-hero">
+        <video
+          className="storage-video"
+          autoPlay
+          muted
+          loop
+          playsInline
+          preload="metadata"
+          aria-hidden="true"
+          src={heroVideoSrc}
+        />
+        <div className="storage-video-overlay" />
+
+        <div className="storage-hero-content">
+          <div className="hero-glow hero-glow-left" aria-hidden />
+          <div className="hero-glow hero-glow-right" aria-hidden />
+
+          <h1>Build storage for your AI stack.</h1>
+          <p>
+            Create vector stores with Osirus and connect them to your preferred models in minutes.
+            Keep your data pipeline grounded and production-ready.
+          </p>
+          <div className="hero-actions">
+            <Link href="/signup" className="hero-btn-primary">
+              Connect and Create
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      <div className="storage-content">
+        <section className="storage-steps">
+          <article className="storage-step">
+            <h3>1. Connect your stack</h3>
+            <p>
+              Add your existing model and storage credentials and keep using the cloud tools and guardrails
+              your team already trusts.
+            </p>
+          </article>
+          <article className="storage-step">
+            <h3>2. Build your vector store</h3>
+            <p>
+              Ingest files, docs, and datasets with guided setup and fast indexing so your knowledge
+              base is ready for retrieval.
+            </p>
+            <div className="step-chip-row">
+              <span>PDF</span>
+              <span>Markdown</span>
+              <span>CSV</span>
+              <span>Docs</span>
+              <span>Transcripts</span>
+            </div>
+          </article>
+          <article className="storage-step">
+            <h3>3. Use with your favorite models</h3>
+            <p>
+              Plug your store into assistants and workflows to deliver grounded answers with lower
+              hallucination risk and higher relevance.
+            </p>
+            <div className="step-tag-list">
+              {favoriteModels.map((model) => (
+                <Link key={model.label} href={model.href} className="chip-link">
+                  {model.label}
+                </Link>
+              ))}
+            </div>
+          </article>
+        </section>
+
+        <section className="storage-benefits">
+          <div className="benefits-left">
+            <h2>Why teams keep vector data in their own cloud account</h2>
+            <p>
+              Osirus makes setup simple while your infrastructure stays under your control for
+              security, compliance, and operational reliability.
+            </p>
+            <Link href="/signup" className="hero-btn-primary">
+              Connect and Create
+            </Link>
+          </div>
+          <div className="benefits-right">
+            {benefits.map((item) => (
+              <article key={item.title} className="benefit-card">
+                <h4>{item.title}</h4>
+                <p>{item.text}</p>
+              </article>
+            ))}
+          </div>
+        </section>
+      </div>
+
+      <style jsx>{`
+        .storage-landing {
+          width: 100%;
+          margin: 0 auto;
+          color: #e9edf8;
+        }
+
+        .storage-content {
+          width: 100%;
+          max-width: 1320px;
+          margin: 0 auto;
+          padding: 1.35rem 1.5rem 5rem;
+        }
+
+        .storage-video-hero {
+          position: relative;
+          overflow: hidden;
+          border-radius: 0;
+          min-height: 500px;
+          border: none;
+          background: #060b13;
+        }
+
+        .storage-video {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          z-index: 0;
+        }
+
+        .storage-video-overlay {
+          position: absolute;
+          inset: 0;
+          background:
+            radial-gradient(circle at 15% 20%, rgba(40, 95, 176, 0.35), transparent 45%),
+            radial-gradient(circle at 80% 16%, rgba(214, 179, 90, 0.22), transparent 40%),
+            linear-gradient(180deg, rgba(5, 8, 14, 0.42) 0%, rgba(5, 8, 14, 0.7) 60%, rgba(5, 8, 14, 0.82) 100%);
+          z-index: 1;
+        }
+
+        .storage-hero-content {
+          position: relative;
+          z-index: 2;
+          max-width: 850px;
+          margin: 0 auto;
+          width: 100%;
+          padding: clamp(2.4rem, 8vw, 6rem) 1.5rem;
+        }
+
+        .hero-glow {
+          position: absolute;
+          width: 270px;
+          height: 270px;
+          border-radius: 999px;
+          filter: blur(60px);
+          pointer-events: none;
+        }
+
+        .hero-glow-left {
+          background: rgba(80, 136, 210, 0.26);
+          left: -120px;
+          bottom: -120px;
+        }
+
+        .hero-glow-right {
+          background: rgba(233, 198, 96, 0.3);
+          right: -80px;
+          top: -100px;
+        }
+
+        .storage-hero-content h1 {
+          margin: 0;
+          font-family: 'Playfair Display', 'Times New Roman', serif;
+          font-size: clamp(2rem, 5vw, 3.55rem);
+          line-height: 1.02;
+          font-weight: 500;
+          letter-spacing: -0.02em;
+          color: #f5f7fd;
+        }
+
+        .storage-hero-content p {
+          margin: 1rem 0 0;
+          color: rgba(233, 237, 248, 0.88);
+          font-size: clamp(1rem, 1.4vw, 1.2rem);
+          line-height: 1.6;
+        }
+
+        .hero-actions {
+          margin-top: 1.8rem;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.85rem;
+        }
+
+        :global(a.hero-btn-primary) {
+          display: inline-flex;
+          align-items: center;
+          justify-content: center;
+          text-decoration: none;
+          border-radius: 999px;
+          padding: 0.75rem 1.35rem;
+          font-weight: 700;
+          transition: transform 0.18s ease, filter 0.18s ease, background 0.18s ease;
+        }
+
+        :global(a.hero-btn-primary) {
+          color: #13151f !important;
+          background: linear-gradient(180deg, #f5e977 0%, #d9bc43 100%);
+          border: 1px solid rgba(255, 255, 255, 0.24);
+          box-shadow: 0 6px 20px rgba(217, 188, 67, 0.22);
+        }
+
+        :global(a.hero-btn-primary:hover) {
+          transform: translateY(-1px);
+          filter: brightness(1.05);
+        }
+
+        .storage-steps {
+          margin-top: 0;
+          display: grid;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 1rem;
+        }
+
+        .storage-step {
+          border: 1px solid rgba(233, 237, 248, 0.14);
+          border-radius: 1rem;
+          background: linear-gradient(180deg, rgba(13, 18, 28, 0.93) 0%, rgba(17, 23, 35, 0.9) 100%);
+          padding: 1.2rem 1rem 1rem;
+        }
+
+        .storage-step h3 {
+          margin: 0;
+          font-size: 1.35rem;
+          line-height: 1.22;
+          font-weight: 600;
+          color: #f6f8ff;
+        }
+
+        .storage-step p {
+          margin: 0.75rem 0 0;
+          color: rgba(233, 237, 248, 0.84);
+          line-height: 1.5;
+        }
+
+        .step-chip-row,
+        .step-tag-list {
+          margin-top: 1rem;
+          display: flex;
+          flex-wrap: wrap;
+          gap: 0.45rem;
+        }
+
+        :global(a.chip-link) {
+          display: inline-flex;
+          align-items: center;
+          text-decoration: none;
+          border-radius: 999px;
+          border: 1px solid rgba(233, 237, 248, 0.24);
+          padding: 0.38rem 0.7rem;
+          color: #f7f9ff;
+          background: rgba(16, 20, 30, 0.74);
+          font-size: 0.82rem;
+          font-weight: 600;
+          letter-spacing: 0.01em;
+          transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
+        }
+
+        :global(a.chip-link:hover) {
+          color: #ffffff;
+          border-color: rgba(245, 233, 119, 0.65);
+          background: rgba(26, 34, 49, 0.9);
+          transform: translateY(-1px);
+        }
+
+        .step-chip-row span {
+          display: inline-flex;
+          align-items: center;
+          border-radius: 999px;
+          border: 1px solid rgba(233, 237, 248, 0.24);
+          padding: 0.38rem 0.7rem;
+          color: #f7f9ff;
+          background: rgba(16, 20, 30, 0.74);
+          font-size: 0.82rem;
+          font-weight: 600;
+          letter-spacing: 0.01em;
+        }
+
+        .storage-benefits {
+          margin-top: 2.7rem;
+          display: grid;
+          grid-template-columns: 1fr 1.2fr;
+          gap: 1rem;
+          align-items: start;
+        }
+
+        .benefits-left {
+          border: 1px solid rgba(233, 237, 248, 0.14);
+          border-radius: 1.2rem;
+          padding: 1.5rem;
+          background: linear-gradient(180deg, rgba(16, 22, 34, 0.92), rgba(13, 18, 28, 0.9));
+        }
+
+        .benefits-left h2 {
+          margin: 0;
+          font-family: 'Playfair Display', 'Times New Roman', serif;
+          font-size: clamp(1.7rem, 3.5vw, 2.9rem);
+          line-height: 1.04;
+          color: #f4f7ff;
+        }
+
+        .benefits-left p {
+          margin: 0.95rem 0 1.3rem;
+          color: rgba(233, 237, 248, 0.86);
+          line-height: 1.6;
+        }
+
+        .benefits-right {
+          display: grid;
+          gap: 0.8rem;
+        }
+
+        .benefit-card {
+          border: 1px solid rgba(233, 237, 248, 0.14);
+          border-radius: 1rem;
+          padding: 1.15rem 1rem;
+          background: linear-gradient(120deg, rgba(20, 25, 38, 0.9), rgba(24, 30, 44, 0.82));
+        }
+
+        .benefit-card h4 {
+          margin: 0;
+          font-size: 1.35rem;
+          color: #f4f7ff;
+          font-weight: 650;
+        }
+
+        .benefit-card p {
+          margin: 0.65rem 0 0;
+          color: rgba(233, 237, 248, 0.84);
+          line-height: 1.5;
+        }
+
+        @media (max-width: 992px) {
+          .storage-steps {
+            grid-template-columns: 1fr;
+          }
+
+          .storage-benefits {
+            grid-template-columns: 1fr;
+          }
+        }
+      `}</style>
+
+      <style jsx global>{`
+        #mainContentArea.unauthenticated-padding {
+          max-width: none !important;
+          padding: 0 !important;
+          background: radial-gradient(circle at 5% 0%, rgba(32, 52, 80, 0.45), transparent 32%),
+            radial-gradient(circle at 95% 0%, rgba(145, 119, 56, 0.22), transparent 35%),
+            #080b12;
+        }
+
+        #topNav {
+          background: rgba(8, 11, 18, 0.84) !important;
+          border-bottom-color: rgba(233, 237, 248, 0.12) !important;
+          backdrop-filter: blur(8px);
+        }
+
+        #topNav .top-nav-inner {
+          background: transparent !important;
+        }
+
+        #topNav .top-nav-link {
+          color: rgba(233, 237, 248, 0.94) !important;
+        }
+
+        #topNav .top-nav-link:hover,
+        #topNav .top-nav-link.active {
+          color: #ffffff !important;
+        }
+
+        #topNav .top-nav-link.active::after {
+          background: #f0d556;
+        }
+
+        #topNav .top-nav-left img {
+          filter: invert(1) brightness(1.2);
+        }
+
+        #topNav .top-nav-auth-wrap-on-dark {
+          padding: 0 !important;
+        }
+
+        #topNav .top-nav-right .no-min-size {
+          border-radius: 999px !important;
+          border: 1px solid rgba(233, 237, 248, 0.28) !important;
+          background: rgba(12, 16, 24, 0.72) !important;
+          color: #f3f6ff !important;
+        }
+
+        #topNav .top-nav-auth-btn-on-dark {
+          border-radius: 999px !important;
+          border: 1px solid rgba(233, 237, 248, 0.3) !important;
+          background: rgba(12, 16, 24, 0.72) !important;
+          color: #f3f6ff !important;
+        }
+
+        #topNav .top-nav-signup-btn-on-dark {
+          color: #13151f !important;
+          background: linear-gradient(180deg, #f5e977 0%, #d9bc43 100%) !important;
+          border-color: rgba(245, 233, 119, 0.66) !important;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+const Stores = () => {
+  const router = useRouter()
+  const { isOpen, onOpen, onClose } = useDisclosure()
+  const { user, isConnected } = useAppSelector(selectAccountState)
+  const isLoggedIn = Boolean(user?.id && isConnected)
+  const shouldAutoOpenCreate = String(router.query.new || '').trim() === '1'
+  const presetProviderSettingId = useMemo(() => {
+    const raw = router.query.ps
+    const value = Array.isArray(raw) ? raw[0] : raw
+    return String(value || '').trim() || null
+  }, [router.query.ps])
+  const launchSource = String(router.query.src || '').trim()
+  const shouldLockProviderSetting =
+    (launchSource === 'crawl' || launchSource === 'site') && !!presetProviderSettingId
+
+  useEffect(() => {
+    if (!router.isReady || !isLoggedIn || !shouldAutoOpenCreate) return
+    onOpen()
+  }, [isLoggedIn, onOpen, router.isReady, shouldAutoOpenCreate])
+
+  const handleCreateClose = () => {
+    onClose()
+    if (!router.isReady) return
+    const queryHasLaunchParams =
+      String(router.query.new || '').trim() ||
+      String(router.query.src || '').trim() ||
+      String(router.query.ps || '').trim()
+    if (!queryHasLaunchParams) return
+    const nextQuery = { ...router.query }
+    delete (nextQuery as any).new
+    delete (nextQuery as any).src
+    delete (nextQuery as any).ps
+    router.replace({ pathname: '/storage', query: nextQuery }, undefined, { shallow: true })
+  }
+
+  if (!isLoggedIn) {
+    return (
+      <SideNavLayout>
+        <PublicStorageLanding />
+      </SideNavLayout>
+    )
+  }
+
+  return (
+    <SideNavLayout
+      useMainContentAreaId={false}
+      mainNavMode="list"
+      sidebarTopContent={(isCollapsed) => <ProjectPickerNav isCollapsed={isCollapsed} appPath="/storage" />}
+    >
+      <div className="mt-3 w-100">
+        <h1 className="mb-4">Storage</h1>
+
+        <VectorStoresTable onCreate={onOpen} />
+
+        <PostsByCategory categorySlug="storage" title="Storage Guides" limit={4} />
+
+        <VectorCreateModal
+          isOpen={isOpen}
+          onClose={handleCreateClose}
+          presetProviderSettingId={presetProviderSettingId}
+          lockProviderSetting={shouldLockProviderSetting}
+        />
+      </div>
+    </SideNavLayout>
+  )
+}
+
+Stores.getInitialProps = async () => ({
+  pageTitle: 'Storage',
+})
+
+export default Stores

package/src/pages/update/index.tsx

@@ -0,0 +1,109 @@
+/* eslint-disable @next/next/no-img-element */
+import { useEffect } from 'react'
+import type { GetServerSideProps, NextPage } from 'next'
+import { useRouter } from 'next/router'
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import {
+  UserTokenAction,
+  useSignUpSessionDataQuery,
+  useVerifyTokenQuery,
+} from '@store/slice/api/authApiSlice'
+import LoadingScreen from '@components/common/loading/LoadingScreen'
+import { SiteLogoIcon } from '@helpers/images'
+import { PageProps } from '@helpers/types/page-props'
+
+const UpdateForm = dynamic(
+  () => import('@components/auth/form/UpdateForm'),
+  { ssr: false }
+)
+
+const Update: NextPage<PageProps> = () => {
+  const { query, push } = useRouter()
+  const token = query.token as string | undefined
+  const actionParam = query.action as UserTokenAction | undefined
+  const orgId = query.orgId as string | undefined
+  const allowedInviteActions = new Set<UserTokenAction>([
+    UserTokenAction.project_invite,
+    UserTokenAction.org_invite,
+  ])
+  const tokenAction = allowedInviteActions.has(actionParam as UserTokenAction)
+    ? (actionParam as UserTokenAction)
+    : UserTokenAction.project_invite
+
+  const { isSuccess, isError } = useVerifyTokenQuery(
+    {
+      token: token!,
+      action: tokenAction,
+      ...(tokenAction === UserTokenAction.org_invite && orgId ? { orgId } : {}),
+    },
+    { skip: !token }
+  )
+
+  const { data: sessionData } = useSignUpSessionDataQuery(undefined, {
+    skip: !isSuccess,
+  })
+
+  useEffect(() => {
+    if (isError) {
+      push('/login')
+    }
+  }, [isError, push])
+
+  if (!isSuccess) {
+    return <LoadingScreen />
+  }
+
+  return (
+    <div className="d-flex justify-content-center align-items-center">
+      <div
+        className="bg-white p-4 p-lg-5"
+        style={{ maxWidth: '600px', width: '100%' }}
+      >
+        <div className="text-center">
+          <Link href="/" aria-label="Osirus AI Home">
+            <span className="d-block p-2 bg-primary w-fit-content rounded-md mx-auto">
+              <img
+                alt="Osirus Logo"
+                src={SiteLogoIcon}
+                className="img-fluid w-xs-80p invert-filter"
+              />
+            </span>
+          </Link>
+        </div>
+
+        <h1 className="pb-1 text-center mt-4 pt-2 display-6">
+          Complete your account
+        </h1>
+
+        <p className="lead text-center mt-3 mb-3 d-none d-md-block">
+          Osirus AI Research and Development Platform
+        </p>
+
+        <UpdateForm
+          token={token!}
+          email={sessionData?.email}
+          userId={sessionData?.id}
+          orgId={orgId}
+        />
+
+        <div className="d-flex justify-content-center gap-1 mt-4">
+          <span>Already have an account?</span>
+          <Link
+            href="/login"
+            className="text-decoration-underline text-dark fw-bold"
+          >
+            Login
+          </Link>
+        </div>
+      </div>
+    </div>
+  )
+}
+export const getServerSideProps: GetServerSideProps = async () => ({
+  props: {
+    pageTitle: 'Complete Account',
+    excludeTopNav: true,
+  },
+})
+export default Update