sea-dev 1.0.0

package/apps/main/src/components/sidebar/app-sidebar.tsx

@@ -0,0 +1,417 @@
+import { NewDealModal } from "@/components/modals/new-deal";
+import { NewPipelineModal } from "@/components/modals/new-pipeline";
+import { getSession } from "@/lib/auth";
+import { authClient } from "@/lib/auth-client";
+import { cn } from "@/lib/utils";
+import { membershipMiddleware } from "@/middleware";
+import { switchOrganization } from "@sea/dal/session";
+import type { Deal, Organization, PipelineWithSteps } from "@sea/db/types";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuPortal,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@sea/ui/components/ui/multisidebar";
+import { Link, useLocation, useNavigate, useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { getWebRequest } from "@tanstack/react-start/server";
+import {
+  ApertureIcon,
+  BotIcon,
+  ChevronDownIcon,
+  CrosshairIcon,
+  FileTextIcon,
+  FolderIcon,
+  HandshakeIcon,
+  LayersIcon,
+  PlusIcon,
+  SettingsIcon,
+  UserPlusIcon,
+  XIcon,
+  type LucideProps,
+} from "lucide-react";
+import * as React from "react";
+import { StopImpersonate } from "./stop-impersonate";
+
+export interface MenuItem {
+  group: string | undefined;
+  actionButton?: React.ReactNode;
+  items: {
+    href: string;
+    label: string;
+    icon?: React.ForwardRefExoticComponent<
+      Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>
+    >;
+    nohl?: boolean;
+  }[];
+  fallback?: React.ReactNode;
+}
+
+const DOCS_BANNER_STORAGE_KEY = "sidebar_docs_banner_dismissed";
+
+const switchOrganizationFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { organizationId: string }) => data)
+  .handler(async ({ context: { member }, data: { organizationId } }) => {
+    const request = getWebRequest();
+    const { session } = await getSession(request);
+    await switchOrganization({ session, member, organizationId });
+  });
+
+export function AppSidebar({
+  organization,
+  organizations,
+  deals,
+  pipelines,
+  impersonating,
+}: {
+  organization: Organization;
+  organizations?: Organization[];
+  deals: Deal[];
+  pipelines: PipelineWithSteps[];
+  impersonating: boolean;
+}) {
+  const { pathname } = useLocation();
+  const isActive = (href: string) => (href === "/" ? pathname === href : pathname.startsWith(href));
+  const navigate = useNavigate();
+  const router = useRouter();
+
+  const menuItemsTop: MenuItem[] = [
+    {
+      group: undefined,
+      items: [
+        {
+          href: "/",
+          label: "Dashboard",
+          icon: CrosshairIcon,
+        },
+        {
+          href: "/agents",
+          label: "Agents",
+          icon: BotIcon,
+        },
+        {
+          href: "/deals",
+          label: "Deals",
+          icon: HandshakeIcon,
+        },
+        {
+          href: "/workflows",
+          label: "Workflows",
+          icon: LayersIcon,
+        },
+        {
+          href: "/submissions",
+          label: "Submissions",
+          icon: ApertureIcon,
+        },
+      ],
+    },
+  ];
+
+  const menuItemsBottom: MenuItem[] = [
+    {
+      group: "More",
+      items: [
+        {
+          href: "/settings/members",
+          label: "Invite People",
+          icon: UserPlusIcon,
+        },
+        {
+          href: "/settings/workspace",
+          label: "Settings",
+          icon: SettingsIcon,
+        },
+      ],
+    },
+  ];
+
+  const signout = async () => {
+    await authClient.signOut({
+      fetchOptions: {
+        onSuccess: () => {
+          navigate({ to: "/sign-in" });
+        },
+      },
+    });
+  };
+
+  const switchOrg = async (organizationId: string) => {
+    await switchOrganizationFn({ data: { organizationId } });
+    navigate({ to: "/", replace: true });
+    router.invalidate();
+  };
+
+  const menuItemDeals: MenuItem = {
+    group: "Deals",
+    actionButton: (
+      <NewDealModal>
+        <PlusIcon className="text-brand-foreground size-4" />
+      </NewDealModal>
+    ),
+    fallback: (
+      <NewDealModal>
+        <span>Create your first deal</span>
+      </NewDealModal>
+    ),
+    items: [
+      ...deals.map((deal) => ({
+        href: `/deals/${deal.id}`,
+        label: deal.name,
+        icon: FolderIcon,
+      })),
+    ],
+  };
+
+  const menuItemTemplates: MenuItem = {
+    group: "Pipelines",
+    actionButton: (
+      <NewPipelineModal>
+        <PlusIcon className="text-brand-foreground size-4" />
+      </NewPipelineModal>
+    ),
+    fallback: (
+      <NewPipelineModal>
+        <span>Create your first pipeline</span>
+      </NewPipelineModal>
+    ),
+    items: [
+      ...pipelines.map((pipeline) => ({
+        href: `/pipelines/${pipeline.id}`,
+        label: pipeline.name,
+        icon: FileTextIcon,
+      })),
+    ],
+  };
+
+  const menuItems = [...menuItemsTop, menuItemDeals, menuItemTemplates, ...menuItemsBottom];
+  const [showOrgScrollHint, setShowOrgScrollHint] = React.useState(false);
+  const [showDocsBanner, setShowDocsBanner] = React.useState(true);
+
+  React.useEffect(() => {
+    if (typeof window === "undefined") return;
+    try {
+      const dismissed = localStorage.getItem(DOCS_BANNER_STORAGE_KEY) === "true";
+      if (dismissed) {
+        setShowDocsBanner(false);
+      }
+    } catch {
+      // Ignore storage errors
+    }
+  }, []);
+
+  const handleDismissDocsBanner = () => {
+    setShowDocsBanner(false);
+    if (typeof window === "undefined") return;
+    try {
+      localStorage.setItem(DOCS_BANNER_STORAGE_KEY, "true");
+    } catch {
+      // Ignore storage errors
+    }
+  };
+  const detachObserversRef = React.useRef<() => void>(() => {});
+  const setListRef = React.useCallback((el: HTMLDivElement | null) => {
+    // Clean up any existing observers tied to a previous element
+    detachObserversRef.current?.();
+    if (!el) return;
+
+    const update = () => setShowOrgScrollHint(el.scrollHeight > el.clientHeight);
+    update();
+
+    const ro = new ResizeObserver(update);
+    ro.observe(el);
+
+    const mo = new MutationObserver(update);
+    mo.observe(el, { childList: true, subtree: true });
+
+    const onResize = () => update();
+    window.addEventListener("resize", onResize);
+
+    detachObserversRef.current = () => {
+      ro.disconnect();
+      mo.disconnect();
+      window.removeEventListener("resize", onResize);
+    };
+  }, []);
+
+  // Ensure observers are cleaned up on component unmount
+  React.useEffect(() => () => detachObserversRef.current?.(), []);
+  return (
+    <Sidebar
+      side="left"
+      variant="inset"
+      collapsible="icon"
+      className={impersonating ? "bg-red-400" : ""}
+    >
+      <SidebarHeader className="p-2 py-4">
+        {impersonating && <StopImpersonate />}
+        <SidebarGroup className="flex flex-row items-center justify-start">
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <SidebarMenuButton
+                size="lg"
+                className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden"
+              >
+                {organization.name}
+                <ChevronDownIcon className="size-4" />
+              </SidebarMenuButton>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="start" className="w-48">
+              <DropdownMenuGroup>
+                <DropdownMenuItem className="cursor-pointer" asChild>
+                  <Link to="/settings">Settings</Link>
+                </DropdownMenuItem>
+                <DropdownMenuItem onClick={signout} className="cursor-pointer">
+                  Sign Out
+                </DropdownMenuItem>
+              </DropdownMenuGroup>
+              <DropdownMenuSeparator />
+              <DropdownMenuGroup>
+                <DropdownMenuSub>
+                  <DropdownMenuSubTrigger>Switch organization</DropdownMenuSubTrigger>
+                  <DropdownMenuPortal>
+                    <DropdownMenuSubContent className="relative max-h-80 overflow-hidden p-0">
+                      <div
+                        ref={setListRef}
+                        className={cn(
+                          "max-h-80 overflow-y-auto overscroll-y-contain p-1",
+                          showOrgScrollHint && "pb-6",
+                        )}
+                      >
+                        {organizations?.map((organization) => (
+                          <DropdownMenuItem
+                            key={organization.id}
+                            className="cursor-pointer"
+                            onClick={() => switchOrg(organization.id)}
+                          >
+                            {organization.name}
+                          </DropdownMenuItem>
+                        ))}
+                      </div>
+                      {showOrgScrollHint && (
+                        <div
+                          className="from-popover pointer-events-none absolute inset-x-0 bottom-0 flex h-8 items-end justify-center bg-gradient-to-t to-transparent"
+                          aria-hidden="true"
+                        >
+                          <ChevronDownIcon
+                            className="text-muted-foreground mb-1 size-4"
+                            aria-hidden="true"
+                          />
+                        </div>
+                      )}
+                    </DropdownMenuSubContent>
+                  </DropdownMenuPortal>
+                </DropdownMenuSub>
+              </DropdownMenuGroup>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </SidebarGroup>
+      </SidebarHeader>
+      <SidebarContent>
+        {menuItems.map((group, idx) => (
+          <SidebarGroup key={idx}>
+            {group.group && (
+              <>
+                <SidebarGroupLabel>{group.group}</SidebarGroupLabel>
+                {group.actionButton && (
+                  <SidebarGroupAction className="hover:bg-brand">
+                    {group.actionButton}
+                  </SidebarGroupAction>
+                )}
+              </>
+            )}
+            <SidebarGroupContent>
+              <SidebarMenu className="text-muted-foreground">
+                {group.items.length === 0 ? (
+                  <SidebarMenuItem>
+                    <SidebarMenuButton className="hover:bg-muted">
+                      {group.fallback}
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ) : (
+                  group.items.map((item) => (
+                    <SidebarMenuItem key={item.href}>
+                      <SidebarMenuButton
+                        asChild
+                        isActive={!item.nohl && isActive(item.href)}
+                        className="hover:bg-muted"
+                      >
+                        <Link to={item.href}>
+                          {item.icon && (
+                            <item.icon
+                              className={cn(
+                                !item.nohl && isActive(item.href) && "text-brand-foreground",
+                              )}
+                            />
+                          )}
+                          <span className="group-data-[collapsible=icon]:hidden">{item.label}</span>
+                        </Link>
+                      </SidebarMenuButton>
+                    </SidebarMenuItem>
+                  ))
+                )}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+      <SidebarFooter className="p-4 group-data-[collapsible=icon]:hidden">
+        {organization.plan === "free" ? (
+          <Link
+            to="/settings/billing"
+            className="border-border bg-card shadow-brand border-brand block rounded-lg border p-3 shadow-sm transition-transform duration-200 hover:-translate-y-1 hover:shadow-md"
+          >
+            <div className="text-brand-foreground text-sm font-medium">Upgrade for more</div>
+            <div className="text-muted-foreground mt-1 text-xs">
+              Access our full set of features
+            </div>
+          </Link>
+        ) : (
+          showDocsBanner && (
+            <div className="border-border bg-card relative block rounded-lg border p-3 shadow-sm transition-transform duration-200 hover:-translate-y-1 hover:shadow-md">
+              <a
+                href="https://docs.sea.dev"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="block pr-8"
+              >
+                <div className="text-sm font-medium">Read the docs</div>
+                <div className="text-muted-foreground mt-1 text-xs">
+                  Learn about new features and updates
+                </div>
+              </a>
+              <button
+                type="button"
+                className="text-muted-foreground hover:text-foreground absolute top-2 right-2 rounded p-1 transition-colors"
+                onClick={handleDismissDocsBanner}
+                aria-label="Dismiss"
+              >
+                <XIcon className="size-4" />
+              </button>
+            </div>
+          )
+        )}
+      </SidebarFooter>
+    </Sidebar>
+  );
+}

package/apps/main/src/components/sidebar/model-select.tsx

@@ -0,0 +1,134 @@
+import { getAppConfig } from "@/lib/config";
+import { membershipMiddleware } from "@/middleware";
+import { getChatModel, summarizeAndEraseConversation } from "@sea/core";
+import { eraseConversation, setConversationModel } from "@sea/dal/conversation";
+import type { ChatModel } from "@sea/db/schema";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@sea/ui/components/ui/dropdown-menu";
+import { SidebarMenuButton, useSidebar } from "@sea/ui/components/ui/multisidebar";
+import { useRouter } from "@tanstack/react-router";
+import { createServerFn } from "@tanstack/react-start";
+import { ChevronsUpDown, RabbitIcon, SettingsIcon } from "lucide-react";
+import type { Dispatch, SetStateAction } from "react";
+import { ConfirmationModal } from "../modals/modals";
+
+const modelDisplayName = {
+  "gpt-4.1": "General",
+  "gpt-5.1": "Smart",
+} satisfies Record<ChatModel, string>;
+
+const setChatModelFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string; chatModel: ChatModel }) => data)
+  .handler(async ({ context: { member }, data: { conversationId, chatModel } }) => {
+    await setConversationModel({ member, conversationId, chatModel });
+  });
+
+export const eraseChatFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string }) => data)
+  .handler(async ({ context: { member }, data: { conversationId } }) => {
+    await eraseConversation({ member, conversationId });
+  });
+
+const summarizeAndEraseChatFn = createServerFn({ method: "POST" })
+  .middleware([membershipMiddleware])
+  .validator((data: { conversationId: string; modelId: string }) => data)
+  .handler(async ({ context: { member }, data: { conversationId, modelId } }) => {
+    const config = getAppConfig();
+    const model = getChatModel({
+      aiGatewayApiKey: config.vercel.aiGatewayApiKey,
+      modelId,
+    });
+    await summarizeAndEraseConversation(model, member, conversationId);
+  });
+
+export function ModelSelect({
+  conversationId,
+  chatModel,
+  setChatIsLoading,
+}: {
+  conversationId: string;
+  chatModel: ChatModel;
+  setChatIsLoading: Dispatch<SetStateAction<boolean>>;
+}) {
+  const router = useRouter();
+  const {
+    rightSidebar: { isMobile },
+  } = useSidebar();
+
+  const setChatModel = async (chatModel: ChatModel) => {
+    await setChatModelFn({ data: { conversationId, chatModel } });
+    router.invalidate();
+  };
+
+  const eraseChat = async () => {
+    await eraseChatFn({ data: { conversationId } });
+    window.location.reload();
+  };
+  const summarizeAndErase = async () => {
+    setChatIsLoading(true);
+    try {
+      await summarizeAndEraseChatFn({ data: { conversationId, modelId: chatModel } });
+    } finally {
+      setChatIsLoading(false);
+    }
+    window.location.reload();
+  };
+
+  return (
+    <DropdownMenu modal={false}>
+      <DropdownMenuTrigger asChild>
+        <SidebarMenuButton
+          size="lg"
+          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+        >
+          <SettingsIcon />
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <span className="truncate font-semibold">Model Settings</span>
+            <span className="truncate text-xs">{modelDisplayName[chatModel]}</span>
+          </div>
+          <ChevronsUpDown className="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        className="mt-4 min-w-56"
+        side={isMobile ? "bottom" : "right"}
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            onClick={() => setChatModel("gpt-4.1")}
+            className={chatModel === "gpt-4.1" ? "bg-muted" : ""}
+          >
+            <RabbitIcon />
+            General
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator />
+        <DropdownMenuGroup>
+          <ConfirmationModal title="Erase all messages" message="Are you sure?" action={eraseChat}>
+            <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground !py-0 group-data-[collapsible=icon]:hidden">
+              Erase chat
+            </SidebarMenuButton>
+          </ConfirmationModal>
+          <ConfirmationModal
+            title="Summarise and erase"
+            message="A summary of your conversation will be inserted into the context for future messages. Continue?"
+            action={summarizeAndErase}
+          >
+            <SidebarMenuButton className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground !py-0 group-data-[collapsible=icon]:hidden">
+              Summarise and erase
+            </SidebarMenuButton>
+          </ConfirmationModal>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/apps/main/src/components/sidebar/settings-sidebar.tsx

@@ -0,0 +1,132 @@
+import { cn } from "@/lib/utils";
+import {
+  Sidebar,
+  SidebarContent,
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@sea/ui/components/ui/multisidebar";
+import { Link, useLocation } from "@tanstack/react-router";
+import {
+  BarChart3Icon,
+  BuildingIcon,
+  ChevronLeftIcon,
+  CodeIcon,
+  CreditCardIcon,
+  KeyIcon,
+  UserIcon,
+  UserPlusIcon,
+} from "lucide-react";
+import { StopImpersonate } from "./stop-impersonate";
+
+const MENU_ITEMS = [
+  {
+    group: undefined,
+    items: [
+      {
+        href: "/",
+        label: "Back to app",
+        icon: ChevronLeftIcon,
+      },
+    ],
+  },
+  {
+    group: "Workspace",
+    items: [
+      {
+        href: "/settings/workspace",
+        label: "Settings",
+        icon: BuildingIcon,
+      },
+      {
+        href: "/settings/analytics",
+        label: "Analytics",
+        icon: BarChart3Icon,
+      },
+      {
+        href: "/settings/members",
+        label: "Members",
+        icon: UserPlusIcon,
+      },
+      {
+        href: "/settings/billing",
+        label: "Billing",
+        icon: CreditCardIcon,
+      },
+    ],
+  },
+  {
+    group: "Integrations",
+    items: [
+      {
+        href: "/settings/keys",
+        label: "API Keys",
+        icon: KeyIcon,
+      },
+      {
+        href: "/settings/embed",
+        label: "Embed",
+        icon: CodeIcon,
+      },
+    ],
+  },
+  {
+    group: "User",
+    items: [
+      {
+        href: "/settings/user",
+        label: "User settings",
+        icon: UserIcon,
+      },
+    ],
+  },
+];
+
+export function SettingsSidebar({ impersonating }: { impersonating: boolean }) {
+  const { pathname } = useLocation();
+  const isActive = (href: string) => (href === "/" ? pathname === href : pathname.startsWith(href));
+
+  return (
+    <Sidebar
+      side="left"
+      variant="inset"
+      collapsible="icon"
+      className={impersonating ? "bg-red-500" : ""}
+    >
+      <SidebarHeader className="p-2 py-4">{impersonating && <StopImpersonate />}</SidebarHeader>
+      <SidebarContent>
+        {MENU_ITEMS.map((group, idx) => (
+          <SidebarGroup key={idx}>
+            {group.group && <SidebarGroupLabel>{group.group}</SidebarGroupLabel>}
+            <SidebarGroupContent>
+              <SidebarMenu className="text-muted-foreground">
+                {group.items.map((item) => (
+                  <SidebarMenuItem key={item.href}>
+                    <SidebarMenuButton
+                      asChild
+                      isActive={isActive(item.href)}
+                      className="hover:bg-muted"
+                    >
+                      <Link to={item.href}>
+                        {item.icon && (
+                          <item.icon
+                            className={cn(isActive(item.href) && "text-brand-foreground")}
+                          />
+                        )}
+                        <span className="group-data-[collapsible=icon]:hidden">{item.label}</span>
+                      </Link>
+                    </SidebarMenuButton>
+                  </SidebarMenuItem>
+                ))}
+              </SidebarMenu>
+            </SidebarGroupContent>
+          </SidebarGroup>
+        ))}
+      </SidebarContent>
+    </Sidebar>
+  );
+}

package/apps/main/src/components/sidebar/sidebar-right.tsx

@@ -0,0 +1,22 @@
+import { cn } from "@/lib/utils";
+import { Sidebar, SidebarContent } from "@sea/ui/components/ui/multisidebar";
+
+export function SidebarRight({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<typeof Sidebar> & {
+  children?: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <Sidebar
+      side="right"
+      collapsible="icon"
+      className={cn("static hidden h-full w-full max-w-full border-l lg:block", className)}
+      {...props}
+    >
+      <SidebarContent className="group-data-[collapsible=icon]:hidden">{children}</SidebarContent>
+    </Sidebar>
+  );
+}