change semantics

Update README deployment steps and add deploy:secrets script to package.json

update local inference script and README

update lockfile

reconfigure package scripts for development

update test execution

pass server tests

Update README with revised Bun commands and workspace details

remove pnpm package manager designator

create bun server

packages/client/src/layout/Content.tsx

@@ -0,0 +1,14 @@
+import { Flex } from "@chakra-ui/react";
+import React from "react";
+import { useIsMobile } from "../components/contexts/MobileContext";
+
+function Content({ children }) {
+  const isMobile = useIsMobile();
+  return (
+    <Flex flexDirection="column" w="100%" h="100vh" p={!isMobile ? 4 : 1}>
+      {children}
+    </Flex>
+  );
+}
+
+export default Content;

packages/client/src/layout/Hero.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Box, Heading, Text } from "@chakra-ui/react";
+import { usePageContext } from "../renderer/usePageContext";
+import Routes from "../renderer/routes";
+import { useIsMobile } from "../components/contexts/MobileContext";
+
+export default function Hero() {
+  const pageContext = usePageContext();
+  const isMobile = useIsMobile();
+
+  return (
+    <Box p={2}>
+      <Box>
+        <Heading
+          textAlign={isMobile ? "left" : "right"}
+          minWidth="90px"
+          maxWidth={"220px"}
+          color="text.accent"
+          as="h3"
+          letterSpacing={"tight"}
+          size="lg"
+        >
+          {Routes[normalizePath(pageContext.urlPathname)]?.heroLabel}
+        </Heading>
+      </Box>
+
+      <Text
+        isTruncated
+        maxWidth="100%"
+        whiteSpace="nowrap"
+        letterSpacing={"tight"}
+        color="text.accent"
+        textAlign={isMobile ? "left" : "right"}
+        overflow="hidden"
+      >
+        {new Date().toLocaleDateString()}
+      </Text>
+    </Box>
+  );
+}
+
+const normalizePath = (path) => {
+  if (!path) return "/";
+  if (path.length > 1 && path.endsWith("/")) {
+    path = path.slice(0, -1);
+  }
+  return path.toLowerCase();
+};

packages/client/src/layout/Layout.css

@@ -0,0 +1,21 @@
+/* CSS for people who'd rather be coding */
+
+* {
+  box-sizing: border-box; /* Because guessing sizes is for amateurs */
+}
+
+a {
+  text-decoration: none;
+  color: #fffff0; /* White, like the light at the end of a dark terminal */
+}
+
+a:hover {
+  color: #c0c0c0; /* Light gray, like the reflections of your code */
+}
+
+/* Media query, because even I have standards */
+@media (max-width: 600px) {
+  body {
+    font-size: 14px; /* For ants */
+  }
+}

packages/client/src/layout/Layout.tsx

@@ -0,0 +1,52 @@
+import React, { useEffect, useState } from "react";
+import { PageContextProvider } from "../renderer/usePageContext";
+import { MobileProvider } from "../components/contexts/MobileContext";
+import LayoutComponent from "./LayoutComponent";
+import userOptionsStore from "../stores/UserOptionsStore";
+import { observer } from "mobx-react-lite";
+import { Chakra } from "../components/contexts/ChakraContext";
+import { getTheme } from "./theme/color-themes";
+
+export { Layout };
+
+const Layout = observer(({ pageContext, children }) => {
+  const [activeTheme, setActiveTheme] = useState<string>("darknight");
+
+  useEffect(() => {
+    if (userOptionsStore.theme !== activeTheme) {
+      setActiveTheme(userOptionsStore.theme);
+    }
+  }, [userOptionsStore.theme]);
+
+  try {
+    if (pageContext?.headersOriginal) {
+      const headers = new Headers(pageContext.headersOriginal);
+
+      const cookies = headers.get("cookie");
+
+      const userPreferencesCookie = cookies
+        ?.split("; ")
+        .find((row) => row.startsWith("user_preferences="))
+        ?.split("=")[1];
+
+      try {
+        const { theme: receivedTheme } = JSON.parse(
+          atob(userPreferencesCookie ?? "{}"),
+        );
+        setActiveTheme(receivedTheme);
+      } catch (e) {}
+    }
+  } catch (e) {}
+
+  return (
+    <React.StrictMode>
+      <PageContextProvider pageContext={pageContext}>
+        <MobileProvider>
+          <Chakra theme={getTheme(activeTheme)}>
+            <LayoutComponent>{children}</LayoutComponent>
+          </Chakra>
+        </MobileProvider>
+      </PageContextProvider>
+    </React.StrictMode>
+  );
+});

packages/client/src/layout/LayoutComponent.tsx

@@ -0,0 +1,35 @@
+import React from "react";
+import { Grid, GridItem } from "@chakra-ui/react";
+import Navigation from "./Navigation";
+import Routes from "../renderer/routes";
+import Hero from "./Hero";
+import Content from "./Content";
+import { useIsMobile } from "../components/contexts/MobileContext";
+
+export default function LayoutComponent({ children }) {
+  const isMobile = useIsMobile();
+
+  return (
+    <Grid
+      templateAreas={
+        isMobile
+          ? `"nav"
+                               "main"`
+          : `"nav main"`
+      }
+      gridTemplateRows={isMobile ? "auto 1fr" : "1fr"}
+      gridTemplateColumns={isMobile ? "1fr" : "auto 1fr"}
+      minHeight="100vh"
+      gap="1"
+    >
+      <GridItem area={"nav"} hidden={false}>
+        <Navigation routeRegistry={Routes}>
+          <Hero />
+        </Navigation>
+      </GridItem>
+      <GridItem area={"main"}>
+        <Content>{children}</Content>
+      </GridItem>
+    </Grid>
+  );
+}

packages/client/src/layout/NavItem.tsx

@@ -0,0 +1,43 @@
+import { Box } from "@chakra-ui/react";
+import React from "react";
+
+function NavItem({ path, children, color, onClick, as, cursor }) {
+  return (
+    <Box
+      as={as ?? "a"}
+      href={path}
+      mb={2}
+      cursor={cursor}
+      // ml={5}
+      mr={2}
+      color={color ?? "text.accent"}
+      letterSpacing="normal"
+      display="block"
+      position="relative"
+      textAlign="right"
+      onClick={onClick}
+      _after={{
+        content: '""',
+        position: "absolute",
+        width: "100%",
+        height: "2px",
+        bottom: "0",
+        left: "0",
+        bg: "accent.secondary",
+        transform: "scaleX(0)",
+        transformOrigin: "right",
+        transition: "transform 0.3s ease-in-out",
+      }}
+      _hover={{
+        color: "tertiary.tertiary",
+        _after: {
+          transform: "scaleX(1)",
+        },
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+export default NavItem;

packages/client/src/layout/Navigation.tsx

@@ -0,0 +1,132 @@
+import React, { useEffect } from "react";
+import { observer } from "mobx-react-lite";
+import {
+  Box,
+  Collapse,
+  Grid,
+  GridItem,
+  useBreakpointValue,
+} from "@chakra-ui/react";
+import { MenuIcon } from "lucide-react";
+import Sidebar from "./Sidebar";
+import NavItem from "./NavItem";
+import menuState from "../stores/AppMenuStore";
+import { usePageContext } from "../renderer/usePageContext";
+import { useIsMobile } from "../components/contexts/MobileContext";
+import { getTheme } from "./theme/color-themes";
+import userOptionsStore from "../stores/UserOptionsStore";
+
+const Navigation = observer(({ children, routeRegistry }) => {
+  const isMobile = useIsMobile();
+  const pageContext = usePageContext();
+
+  const currentPath = pageContext.urlPathname || "/";
+
+  const getTopValue = () => {
+    if (!isMobile) return undefined;
+    if (currentPath === "/") return 12;
+    return 0;
+  };
+
+  const variant = useBreakpointValue(
+    {
+      base: "outline",
+      md: "solid",
+    },
+    {
+      fallback: "md",
+    },
+  );
+
+  useEffect(() => {
+    menuState.closeMenu();
+  }, [variant]);
+
+  return (
+    <Grid templateColumns="1fr" templateRows="auto 1fr">
+      <GridItem
+        p={4}
+        position="fixed"
+        top={0}
+        left={0}
+        zIndex={1100}
+        width={isMobile ? "20%" : "100%"}
+        hidden={!isMobile}
+      >
+        <Grid templateColumns="auto 1fr" alignItems="center">
+          <GridItem>
+            <MenuIcon
+              cursor="pointer"
+              w={6}
+              h={6}
+              stroke={getTheme(userOptionsStore.theme).colors.text.accent}
+              onClick={() => {
+                switch (menuState.isOpen) {
+                  case true:
+                    menuState.closeMenu();
+                    break;
+                  case false:
+                    menuState.openMenu();
+                    break;
+                }
+              }}
+            />
+          </GridItem>
+          <GridItem>{children}</GridItem>
+        </Grid>
+      </GridItem>
+      <GridItem>
+        <Collapse
+          hidden={isMobile && !menuState.isOpen}
+          in={(isMobile && menuState.isOpen) || !isMobile}
+          animateOpacity
+        >
+          <Grid
+            as="nav"
+            templateColumns="1fr"
+            width="100%"
+            h={isMobile ? "100vh" : "100vh"}
+            top={getTopValue()}
+            position={"relative"}
+            bg={"transparent"}
+            zIndex={1000}
+            gap={4}
+            p={isMobile ? 4 : 0}
+          >
+            <GridItem>{!isMobile && children}</GridItem>
+            <GridItem>
+              <Sidebar>
+                {Object.keys(routeRegistry)
+                  .filter((p) => !routeRegistry[p].hideNav)
+                  .map((path) => (
+                    <NavItem key={path} path={path}>
+                      {routeRegistry[path].sidebarLabel}
+                    </NavItem>
+                  ))}
+              </Sidebar>
+            </GridItem>
+          </Grid>
+        </Collapse>
+      </GridItem>
+      {isMobile && (
+        <Box
+          position="fixed"
+          top="0"
+          left="0"
+          right="0"
+          height={menuState.isOpen ? "100vh" : "auto"}
+          pointerEvents="none"
+          zIndex={900}
+        >
+          <Box
+            height="100%"
+            transition="all 0.3s"
+            opacity={menuState.isOpen ? 1 : 0}
+          />
+        </Box>
+      )}
+    </Grid>
+  );
+});
+
+export default Navigation;

packages/client/src/layout/Sidebar.tsx

@@ -0,0 +1,152 @@
+import React, { useState } from "react";
+import { Box, Flex, VStack } from "@chakra-ui/react";
+import NavItem from "./NavItem";
+import ToolBar from "../components/toolbar/Toolbar";
+import { useIsMobile } from "../components/contexts/MobileContext";
+import FeedbackModal from "../components/feedback/FeedbackModal";
+import { ThemeSelectionOptions } from "../components/ThemeSelection";
+
+function LowerSidebarContainer({ children, isMobile, ...props }) {
+  const bottom = isMobile ? undefined : "6rem";
+  const position = isMobile ? "relative" : "absolute";
+  return (
+    <Box width="100%" m={0.99} position={position} bottom={bottom} {...props}>
+      {children}
+    </Box>
+  );
+}
+
+function Sidebar({ children: navLinks }) {
+  const isMobile = useIsMobile();
+
+  return (
+    <SidebarContainer isMobile={isMobile}>
+      <VStack
+        spacing={6}
+        alignItems={isMobile ? "flex-start" : "flex-end"}
+        letterSpacing="tighter"
+        width="100%"
+        height="100%"
+      >
+        {navLinks}
+
+        <Box
+          alignItems={isMobile ? "flex-start" : "flex-end"}
+          bg="background.primary"
+          zIndex={1000}
+          width="100%"
+          fontSize={"x-small"}
+        >
+          <LowerSidebarContainer isMobile={isMobile}>
+            <ToolBar isMobile={isMobile} />
+            <RegulatoryItems isMobile={isMobile} />
+            <ThemeSelectionOptions />
+          </LowerSidebarContainer>
+        </Box>
+      </VStack>
+
+      {!isMobile && <BreathingVerticalDivider />}
+    </SidebarContainer>
+  );
+}
+
+function RegulatoryItems({ isMobile }) {
+  const [isFeedbackModalOpen, setFeedbackModalOpen] = useState(false);
+
+  const openFeedbackModal = () => setFeedbackModalOpen(true);
+  const closeFeedbackModal = () => setFeedbackModalOpen(false);
+
+  return (
+    <>
+      <VStack alignItems={isMobile ? "flex-start" : "flex-end"} spacing={1}>
+        <NavItem
+            color="text.tertiary"
+            as={"span"}
+            path=""
+            cursor={"pointer"}
+            onClick={() => {
+              window.open("https://geoff.seemueller.io");
+            }}
+        >
+          geoff.seemueller.io
+        </NavItem>
+        <NavItem
+          color="text.tertiary"
+          as={"span"}
+          path=""
+          cursor={"pointer"}
+          onClick={() => {
+            window.open("https://seemueller.ai");
+          }}
+        >
+          seemueller.ai
+        </NavItem>
+        <NavItem
+          color="text.tertiary"
+          as={"span"}
+          path=""
+          cursor={"pointer"}
+          onClick={openFeedbackModal}
+        >
+          Feedback
+        </NavItem>
+        <NavItem color="text.tertiary" path="/privacy-policy">
+          Privacy Policy
+        </NavItem>
+        <NavItem color="text.tertiary" path="/terms-of-service">
+          Terms of Service
+        </NavItem>
+      </VStack>
+
+      {/* Feedback Modal */}
+      <FeedbackModal
+        isOpen={isFeedbackModalOpen}
+        onClose={closeFeedbackModal}
+      />
+    </>
+  );
+}
+
+function SidebarContainer({ children, isMobile }) {
+  return (
+    <Flex
+      mt={isMobile ? 28 : undefined}
+      position="relative"
+      height="100vh"
+      width="100%"
+    >
+      {children}
+    </Flex>
+  );
+}
+
+function BreathingVerticalDivider() {
+  return (
+    <Box
+      position="absolute"
+      h="150%"
+      right={0}
+      bottom={0}
+      width="2px"
+      background="text.secondary"
+      animation="breathing 3s ease-in-out infinite"
+    >
+      <style>
+        {`
+                    @keyframes breathing {
+                        0%, 100% {
+                            opacity: 0.7;
+                            transform: scaleY(1);
+                        }
+                        50% {
+                            opacity: 1;
+                            transform: scaleY(1.2);
+                        }
+                    }
+                `}
+      </style>
+    </Box>
+  );
+}
+
+export default Sidebar;

packages/client/src/layout/theme/base_theme.ts

@@ -0,0 +1,178 @@
+import { extendTheme } from "@chakra-ui/react";
+
+const fonts = {
+  body: "monospace",
+  heading: "monospace",
+};
+
+const styles = {
+  global: {
+    body: {
+      fontFamily: fonts.body,
+      bg: "background.primary",
+      color: "text.primary",
+      margin: 0,
+      overflow: "hidden",
+    },
+    html: {
+      overflow: "hidden",
+    },
+    "::selection": {
+      backgroundColor: "accent.secondary",
+      color: "background.primary",
+    },
+  },
+};
+
+const components = {
+  Button: {
+    baseStyle: {
+      fontWeight: "bold",
+      borderRadius: "md", // Slightly rounded corners
+    },
+    variants: {
+      solid: {
+        bg: "accent.primary",
+        color: "background.primary",
+        _hover: {
+          bg: "accent.primary",
+          color: "background.primary",
+        },
+      },
+      outline: {
+        borderColor: "accent.primary",
+        color: "text.primary",
+        _hover: {
+          bg: "accent.primary",
+          color: "background.primary",
+        },
+      },
+      ghost: {
+        color: "text.primary",
+        _hover: {
+          bg: "background.secondary",
+        },
+      },
+    },
+  },
+  Link: {
+    baseStyle: {
+      color: "accent.secondary",
+      _hover: {
+        color: "accent.primary",
+        textDecoration: "none",
+      },
+    },
+  },
+  Heading: {
+    baseStyle: {
+      color: "text.primary",
+      letterSpacing: "tight",
+    },
+    sizes: {
+      "4xl": { fontSize: ["6xl", null, "7xl"], lineHeight: 1 },
+      "3xl": { fontSize: ["5xl", null, "6xl"], lineHeight: 1.2 },
+      "2xl": { fontSize: ["4xl", null, "5xl"] },
+      xl: { fontSize: ["3xl", null, "4xl"] },
+      lg: { fontSize: ["2xl", null, "3xl"] },
+      md: { fontSize: "xl" },
+      sm: { fontSize: "md" },
+      xs: { fontSize: "sm" },
+    },
+  },
+  Text: {
+    baseStyle: {
+      color: "text.primary",
+    },
+    variants: {
+      secondary: {
+        color: "text.secondary",
+      },
+      accent: {
+        color: "text.accent",
+      },
+    },
+  },
+  Input: {
+    variants: {
+      filled: {
+        field: {
+          bg: "background.secondary",
+          _hover: {
+            bg: "background.tertiary",
+          },
+          _focus: {
+            bg: "background.tertiary",
+            borderColor: "accent.primary",
+          },
+        },
+      },
+    },
+  },
+  CodeBlocks: {
+    baseStyle: (props) => ({
+      bg: "background.primary",
+      // color: 'text.primary',
+    }),
+  },
+};
+
+const Base_theme = extendTheme({
+  config: {
+    cssVarPrefix: "wgs",
+    initialColorMode: "dark",
+    useSystemColorMode: false,
+  },
+  fonts,
+  styles,
+  components,
+  letterSpacings: {
+    tighter: "-0.05em",
+    tight: "-0.025em",
+    normal: "0",
+    wide: "0.025em",
+    wider: "0.05em",
+    widest: "0.1em",
+  },
+  space: {
+    px: "1px",
+    0.5: "0.125rem",
+    1: "0.25rem",
+    1.5: "0.375rem",
+    2: "0.5rem",
+    2.5: "0.625rem",
+    3: "0.75rem",
+    3.5: "0.875rem",
+    4: "1rem",
+    5: "1.25rem",
+    6: "1.5rem",
+    7: "1.75rem",
+    8: "2rem",
+    9: "2.25rem",
+    10: "2.5rem",
+    12: "3rem",
+    14: "3.5rem",
+    16: "4rem",
+    18: "4.5rem",
+    20: "5rem",
+    22: "5.5rem",
+    24: "6rem",
+    28: "7rem",
+    32: "8rem",
+    34: "8.5rem",
+    36: "9rem",
+    38: "9.5rem",
+    40: "10rem",
+    44: "11rem",
+    48: "12rem",
+    52: "13rem",
+    56: "14rem",
+    60: "15rem",
+    64: "16rem",
+    72: "18rem",
+    80: "20rem",
+    96: "24rem",
+  },
+});
+
+export default Base_theme;

packages/client/src/layout/theme/color-themes/AtomOne.ts

@@ -0,0 +1,32 @@
+export default {
+  brand: {
+    900: "#21252b",
+    800: "#343a40",
+    750: "#495057",
+    700: "#525c65",
+    600: "#90ee90",
+    500: "#ffa07a",
+    400: "#e0e0e0",
+    300: "#ff69b4",
+    200: "#da70d6",
+    100: "#ffffff",
+  },
+  background: {
+    primary: "#21252b",
+    secondary: "#343a40",
+    tertiary: "#495057",
+  },
+  text: {
+    primary: "#e0e0e0",
+    secondary: "#c0c0c0",
+    tertiary: "#a9a9a9",
+    accent: "#87cefa",
+    link: "#87cefa",
+  },
+  accent: {
+    primary: "#90ee90",
+    secondary: "#ffa07a",
+    danger: "#ff69b4",
+    confirm: "#90ee90",
+  },
+};

packages/client/src/layout/theme/color-themes/Capuchin.ts

@@ -0,0 +1,32 @@
+export default {
+  brand: {
+    900: "#1E1E2E",
+    800: "#302D41",
+    750: "#332E41",
+    700: "#575268",
+    600: "#6E6C7E",
+    500: "#988BA2",
+    400: "#C3BAC6",
+    300: "#D9E0EE",
+    200: "#F5E0DC",
+    100: "#FAE3B0",
+  },
+  background: {
+    primary: "#1E1E2E",
+    secondary: "#302D41",
+    tertiary: "#575268",
+  },
+  text: {
+    primary: "#D9E0EE",
+    secondary: "#C3BAC6",
+    tertiary: "#988BA2",
+    accent: "#F5E0DC",
+    link: "#96CDFB",
+  },
+  accent: {
+    primary: "#F5C2E7",
+    secondary: "#DDB6F2",
+    danger: "#F28FAD",
+    confirm: "#ABE9B3",
+  },
+};

packages/client/src/layout/theme/color-themes/Darknight.ts

@@ -0,0 +1,32 @@
+export default {
+  brand: {
+    900: "#000000",
+    800: "#333333",
+    750: "#2B2B2B",
+    700: "#666666",
+    600: "#999999",
+    500: "#CCCCCC",
+    400: "#FFFFFF",
+    300: "#F0F0F0",
+    200: "#F8F9FA",
+    100: "#FFFFFF",
+  },
+  background: {
+    primary: "#000000",
+    secondary: "#222222",
+    tertiary: "#333333",
+  },
+  text: {
+    primary: "#F0F0F0",
+    secondary: "#CCCCCC",
+    tertiary: "#999999",
+    accent: "#FFFFFF",
+    link: "#0d9488",
+  },
+  accent: {
+    primary: "#FFFFFF",
+    secondary: "#c0c0c0",
+    danger: "#E53E3E",
+    confirm: "#00D26A",
+  },
+};

packages/client/src/layout/theme/color-themes/OneDark.ts

@@ -0,0 +1,40 @@
+export default {
+  brand: {
+    colors: {
+      900: "#2C2E43",
+      800: "#3D4162",
+      750: "#4F5285",
+      700: "#6076AC",
+      600: "#7693D6",
+      500: "#8DAFF0",
+      400: "#A3C7FF",
+      300: "#B9E0FF",
+      200: "#CDF4FE",
+      100: "#E1FEFF",
+    },
+  },
+
+  background: {
+    primary: "linear-gradient(360deg, #15171C 100%, #353A47 100%)",
+
+    secondary: "#1B1F26",
+    tertiary: "#1E1E2E",
+  },
+
+  text: {
+    primary: "#f8f8f8",
+    secondary: "#3D4162",
+    tertiary: "#e5ebff",
+    accent: "#e6e6e6",
+    link: "aquamarine",
+  },
+
+  accent: {
+    primary: "#127c91",
+
+    secondary: "#39b4bf",
+
+    danger: "#E74C3C",
+    confirm: "#27AE60",
+  },
+};

packages/client/src/layout/theme/color-themes/VsCode.ts

@@ -0,0 +1,35 @@
+export default {
+  brand: {
+    900: "#15171C",
+    800: "#1B1F26",
+    750: "#222731",
+    700: "#353A47",
+    600: "#535966",
+    500: "#747C88",
+    400: "#A0A4AC",
+    300: "#C6CBDC",
+    200: "#E6E9F0",
+    100: "#F3F4F8",
+  },
+
+  background: {
+    primary: "#15171C",
+    secondary: "#1B1F26",
+    tertiary: "#353A47",
+  },
+
+  text: {
+    primary: "#ffffff",
+    secondary: "#A0A4AC",
+    tertiary: "#747C88",
+    accent: "#E6E9F0",
+    link: "#96CDFB",
+  },
+
+  accent: {
+    primary: "#0095ff",
+    secondary: "#00acff",
+    danger: "#EA4D4D",
+    confirm: "#10CE8D",
+  },
+};

packages/client/src/layout/theme/color-themes/index.ts

@@ -0,0 +1,50 @@
+import { extendTheme } from "@chakra-ui/react";
+import BaseTheme from "../base_theme";
+import DarknightColors from "./Darknight";
+import CapuchinColors from "./Capuchin";
+import VsCodeColors from "./VsCode";
+import OneDark from "./OneDark";
+
+export function getColorThemes() {
+  return [
+    { name: "darknight", colors: DarknightColors },
+    { name: "onedark", colors: OneDark },
+    { name: "capuchin", colors: CapuchinColors },
+    { name: "vscode", colors: VsCodeColors },
+  ];
+}
+
+const darknight = extendTheme({
+  ...BaseTheme,
+  colors: DarknightColors,
+});
+
+const capuchin = extendTheme({
+  ...BaseTheme,
+  colors: CapuchinColors,
+});
+
+const vsCode = extendTheme({
+  ...BaseTheme,
+  colors: VsCodeColors,
+});
+
+const onedark = extendTheme({
+  ...BaseTheme,
+  colors: OneDark,
+});
+
+export function getTheme(theme: string) {
+  switch (theme) {
+    case "onedark":
+      return onedark;
+    case "darknight":
+      return darknight;
+    case "capuchin":
+      return capuchin;
+    case "vscode":
+      return vsCode;
+    default:
+      return darknight;
+  }
+}