General fixes

.env.local

@@ -8,7 +8,7 @@ PLAYGROUND_MOCK_DIR=#./mock
 PLAYGROUND_FRAME_ANCESTORS=#"'self'"
 
 NEXT_PUBLIC_SCULPTOR_VERSION=0.0.0
-NEXT_PUBLIC_PICTOR_VERSION=0.17.1
+NEXT_PUBLIC_PICTOR_VERSION=0.18.0
 NEXT_PUBLIC_ALLOWED_REDIRECT_DOMAINS=*.code0.tech,*.codezero.build
 NEXT_PUBLIC_SUBSCRIPTION_URL=https://codezero.build/subscription
 

next.config.ts

@@ -44,6 +44,17 @@ const nextConfig: NextConfig = {
     // per-file Babel pass (the compiler is a Babel plugin) which is the
     // dominant cost of Turbopack dev compile time and memory here.
     reactCompiler: process.env.NODE_ENV === "production",
+    // Rewrite barrel imports from the code0 UI packages into direct submodule
+    // imports. Without this, each of the ~186 files importing from
+    // "@code0-tech/pictor" pulls the entire dist/index.js barrel (~364 modules)
+    // into that route's Turbopack compile graph. This is the dominant dev
+    // compile cost. date-fns/lodash/@radix-ui are already optimized by default.
+    experimental: {
+        optimizePackageImports: [
+            "@code0-tech/pictor",
+            "@code0-tech/triangulum",
+        ],
+    },
     turbopack: {
         resolveAlias: {
             "@edition": path.resolve(__dirname, `src/packages/${EDITION}/src`),

package.json

@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@apollo/client": "^4.0.9",
-    "@code0-tech/pictor": "^0.17.1",
+    "@code0-tech/pictor": "^0.18.0",
     "@code0-tech/triangulum": "^0.33.0",
     "@code0-tech/tucana": "^0.0.82",
     "@codemirror/lang-javascript": "^6.2.5",

src/app/(dashboard)/layout.tsx

@@ -2,7 +2,7 @@
 
 import React from "react";
 import {useApolloClient} from "@apollo/client/react";
-import {ContextStoreProvider} from "@code0-tech/pictor";
+import {AuroraBackground, ContextStoreProvider} from "@code0-tech/pictor";
 import {UserService} from "@edition/user/services/User.service";
 import {GraphqlClient} from "@core/util/graphql-client";
 import {useParams, usePathname} from "next/navigation";
@@ -20,12 +20,14 @@ import {RoleView} from "@edition/role/services/Role.view";
 import {Layout} from "@code0-tech/pictor/dist/components/layout/Layout";
 import {
     DataType,
-    Flow, FlowType,
+    Flow,
+    FlowType,
     FunctionDefinition,
     Namespace,
     NamespaceMember,
     NamespaceProject,
-    Runtime, RuntimeModule,
+    Runtime,
+    RuntimeModule,
     User
 } from "@code0-tech/sagittarius-graphql-types";
 import {ApplicationMiddlewareComponent} from "@edition/application/components/ApplicationMiddlewareComponent";
@@ -93,20 +95,56 @@ const ApplicationLayout: React.FC<ApplicationLayoutProps> = ({children, sidebar,
         services={[application, user, organization, member, namespace, runtime, project, role, flow, functions, datatype, flowtype, module, ai]}>
         <ApplicationMiddlewareComponent>
             <MfaProviderComponent>
-            <FullScreen bg={"var(--secondary)"}>
-                <Layout p={1} showLayoutSplitter={false} layoutGap={32} leftContent={<ApplicationNavigationView/>}>
-                    <Layout showLayoutSplitter={false} layoutGap={32} leftContent={<div style={{
+                <FullScreen bg={"var(--primary)"}>
+                    <div style={{
+                        position: "absolute",
+                        top: 0,
+                        left: 0,
+                        width: "100%",
+                        transform: "scaleX(-1)",
+                        height: "50%",
+                        opacity: "0.25"
+                    }}>
+                        <div style={{
+                            position: "absolute",
+                            top: "0",
+                            left: 0,
+                            width: "100%",
+                            height: "100%",
+                            background: "radial-gradient(circle at top right,rgba(25, 24, 37, 0) 0%, var(--primary) 35%)",
+                            zIndex: "1",
+                            WebkitBackdropFilter: "blur(5rem)",
+                        }}/>
+                        <AuroraBackground/>
+
+                    </div>
+
+                    <div style={{
+                        position: "absolute",
+                        top: 0,
+                        right: 0,
+                        width: "100%",
+                        transform: "",
                         height: "100%",
-                        boxSizing: "border-box",
-                        maxWidth: "20vw"
-                    }}>{sidebar}</div>}>
-                        <>
-                            {children}
-                            {modal}
-                        </>
+                        opacity: "0.25",
+                        filter: "blur(5rem)",
+                    }}>
+                        <AuroraBackground/>
+
+                    </div>
+                    <Layout p={1} showLayoutSplitter={false} layoutGap={32} leftContent={<ApplicationNavigationView/>}>
+                        <Layout showLayoutSplitter={false} layoutGap={32} leftContent={<div style={{
+                            height: "100%",
+                            boxSizing: "border-box",
+                            maxWidth: "20vw"
+                        }}>{sidebar}</div>}>
+                            <>
+                                {children}
+                                {modal}
+                            </>
+                        </Layout>
                     </Layout>
-                </Layout>
-            </FullScreen>
+                </FullScreen>
             </MfaProviderComponent>
         </ApplicationMiddlewareComponent>
     </ContextStoreProvider>

src/app/(dashboard)/namespace/[namespaceId]/project/[projectId]/module/page.tsx

@@ -1,3 +1,3 @@
-import {ModulesPage} from "@ce-internal/module/pages/ModulesPage";
+import {ModuleOverviewPage} from "@edition/module/pages/ModuleOverviewPage";
 
-export default ModulesPage
+export default ModuleOverviewPage

src/app/global.scss

@@ -21,7 +21,6 @@ a {
 }
 
 .scroll-area__viewport > div {
-  display: block !important;
   height: 100%;
 }
 

src/packages/ce/src/ai/components/AIChatComponent.tsx

@@ -7,7 +7,7 @@ import {
     EditorInputValue,
     EditorTokenRule,
     Flex, getSize,
-    Progress,
+    ProgressLinear,
     SelectContent,
     SelectItem,
     SelectItemText,
@@ -309,7 +309,7 @@ export const AIChatComponent: React.FC<AIChatComponentProps> = (props) => {
                             <Text>
                                 Upgrade your license to increase your AI usage limit
                             </Text>
-                            <Progress w={"100px"} h={"7.5px"} value={0} max={100}
+                            <ProgressLinear w={"100px"} h={"7.5px"} value={0} max={100}
                                       color={"#70ffb2"}/>
                         </Flex>
                     ) : (

src/packages/ce/src/application/components/ApplicationAttentionFlowsComponent.tsx

@@ -100,7 +100,7 @@ export const ApplicationAttentionFlowsComponent: React.FC<ApplicationAttentionFl
 
     const count = attentionFlows.length
 
-    return <Card color={"secondary"} clickable onClick={() => setOpen(previous => !previous)}>
+    return <Card color={"secondary"} paddingSize={"lg"} clickable onClick={() => setOpen(previous => !previous)}>
         <Flex align={"center"} justify={"space-between"} style={{gap: "0.75rem"}}>
             <Flex align={"center"} style={{gap: "0.75rem", minWidth: 0}}>
                 <IconPointFilled size={16} color={"#FFBE0B"} style={{flexShrink: 0}}/>

src/packages/ce/src/application/pages/ApplicationPage.tsx

@@ -13,15 +13,13 @@ import {ApplicationAttentionFlowsComponent} from "@edition/application/component
 
 export const ApplicationPage = () => {
     return <div style={{
-        background: "var(--primary)",
         height: "100%",
         position: "relative",
         boxSizing: "border-box",
-        borderRadius: "1rem"
     }}>
         <ScrollArea h={"100%"} type={"scroll"}>
             <ScrollAreaViewport>
-                <div style={{maxWidth: "52rem", margin: "0 auto", padding: "4rem 1rem"}}>
+                 <div style={{maxWidth: "52rem", margin: "0 auto", padding: "1rem 1rem"}}>
                     <ApplicationStatsView/>
                     <Spacing spacing={"xl"}/>
                     <ApplicationAttentionFlowsComponent/>

src/packages/ce/src/application/views/ApplicationNavigationView.tsx

@@ -4,7 +4,7 @@ import React, {startTransition} from "react";
 import {
     Avatar,
     Button,
-    Flex,
+    Flex, getSize,
     Icon,
     Menu,
     MenuContent,
@@ -70,7 +70,7 @@ export const ApplicationNavigationView: React.FC = () => {
         <Tooltip>
             <TooltipTrigger asChild>
                 <Link href={"/"} prefetch>
-                    <Button variant={"none"} p={0.5}>
+                    <Button variant={"none"} style={{padding: getSize("xs")}}>
                         <Icon icon={"codezero:codezero"} color={"#fff"} size={16}/>
                     </Button>
                 </Link>
@@ -87,7 +87,7 @@ export const ApplicationNavigationView: React.FC = () => {
             <Tooltip>
                 <TooltipTrigger asChild>
                     <Link href={"/settings"} prefetch>
-                        <Button variant={"none"} p={0.5}>
+                        <Button variant={"none"} style={{padding: getSize("xs")}}>
                             <IconAdjustmentsFilled color={"#fff"} size={16}/>
                         </Button>
                     </Link>
@@ -105,7 +105,7 @@ export const ApplicationNavigationView: React.FC = () => {
             <Tooltip>
                 <TooltipTrigger asChild>
                     <Link href={"/users/@me/settings"} prefetch>
-                        <Button variant={"none"} p={0.5} style={{marginTop: 'auto'}}>
+                        <Button variant={"none"} style={{padding: getSize("xs"), marginTop: 'auto'}}>
                             <IconSettingsFilled color={"#fff"} size={16}/>
                         </Button>
                     </Link>
@@ -120,7 +120,7 @@ export const ApplicationNavigationView: React.FC = () => {
             </Tooltip>
             <Tooltip>
                 <TooltipTrigger asChild>
-                    <Button onClick={userLogout} variant={"none"} p={0.5} style={{marginTop: 'auto'}}>
+                    <Button onClick={userLogout} variant={"none"} style={{padding: getSize("xs"), marginTop: 'auto'}}>
                         <IconArrowAutofitLeftFilled color={"#fff"} size={16}/>
                     </Button>
                 </TooltipTrigger>
@@ -134,7 +134,7 @@ export const ApplicationNavigationView: React.FC = () => {
             </Tooltip>
             <Menu>
                 <MenuTrigger asChild>
-                    <Button variant={"none"} p={0.5} style={{marginTop: 'auto'}}>
+                    <Button variant={"none"} style={{marginTop: 'auto', padding: getSize("xs")}}>
                         <Avatar type={"character"} identifier={currentUser?.username ?? ""} size={16}/>
                     </Button>
                 </MenuTrigger>

src/packages/ce/src/flow/components/folder/FlowFolderComponent.style.scss

@@ -54,7 +54,7 @@
 
     &:before {
       height: 100%;
-      width: 2px;
+      width: 1px;
       background: helpers.backgroundColor(variables.$tertiary);
       position: absolute;
       content: "";

src/packages/ce/src/flow/views/FlowExecutionResultView.tsx

@@ -115,7 +115,9 @@ export const FlowExecutionResultView: React.FC = () => {
     const flowTypeStore = useStore(FlowTypeService)
     const projectService = useService(ProjectService)
     const projectStore = useStore(ProjectService)
+
     const [activeTab, setActiveTab] = React.useState<string>()
+    const previousPendingRef = React.useRef<string[]>([])
 
     const namespaceIndex = params.namespaceId as any as number
     const projectIndex = params.projectId as any as number
@@ -161,23 +163,19 @@ export const FlowExecutionResultView: React.FC = () => {
     )
 
     const executions = useFlowExecutionStore(s => s.executions)
+
     const pendingExecutions = React.useMemo(
         () => executions.filter(execution => execution.flowId === flowId),
         [executions, flowId]
     )
 
-    // When a manual execution is triggered elsewhere (the definition panel) its pending
-    // entry appears here; focus its loading tab so the user sees the spinner immediately.
-    const previousPendingRef = React.useRef<string[]>([])
     React.useEffect(() => {
         const currentIds = pendingExecutions.map(execution => execution.executionIdentifier)
         const newlyAdded = currentIds.find(id => !previousPendingRef.current.includes(id))
         if (newlyAdded) setActiveTab(newlyAdded)
         previousPendingRef.current = currentIds
     }, [pendingExecutions])
 
-    // Once the pending execution resolves its loading tab disappears; fall back to the
-    // newest result so the freshly arrived execution result becomes visible.
     React.useEffect(() => {
         if (!activeTab) return
         const stillPending = pendingExecutions.some(execution => execution.executionIdentifier === activeTab)
@@ -312,7 +310,7 @@ export const FlowExecutionResultView: React.FC = () => {
                         <Flex align={"center"} style={{gap: "0.35rem"}}>
                             <IconPlayerPlayFilled size={13} color={hashToColor(id ?? "")}/>
                             <Text size={"sm"}>
-                                #{id?.match(/ExecutionResult\/(\d+)$/)?.[1]}
+                                #{id?.match(/\/ExecutionResult\/(\d+)(?:\/|$)/)?.[1]}
                             </Text>
                             <Text size={"sm"} hierarchy={"tertiary"}>
                                 {formatDistanceToNow(execution?.createdAt ?? "")}

src/packages/ce/src/flow/views/FlowFolderView.tsx

@@ -76,7 +76,7 @@ export const FlowFolderView: React.FC = () => {
             <Text pl={0.7} hierarchy={"tertiary"}>
                 Explorer
             </Text>
-            <ButtonGroup color={"secondary"} style={{boxShadow: "none"}} p={0}>
+            <ButtonGroup bg={"transparent"} style={{boxShadow: "none"}} p={0}>
                 <Tooltip>
                     <TooltipTrigger asChild>
                         <Button variant={"none"} paddingSize={"xxs"}
@@ -123,19 +123,17 @@ export const FlowFolderView: React.FC = () => {
         </Flex>
         <Spacing spacing={"xxs"}/>
         <Link href={`/namespace/${namespaceIndex}/project/${projectIndex}/module`} style={{width: "100%"}}>
-            <Button style={{borderRadius: "50rem"}} w={"100%"} paddingSize={"xxs"} color={"tertiary"} variant={"none"}
-                    justify={"start"}>
+            <Button variant={"none"} w={"100%"} justify={"flex-start"} paddingSize={"xxs"}>
                 <IconApps size={13}/>
-                Integrations
+                <Text size={"md"} hierarchy={"tertiary"}>Integrations</Text>
             </Button>
         </Link>
-        <Button style={{borderRadius: "50rem"}} w={"100%"} paddingSize={"xxs"} color={"tertiary"} variant={"none"}
-                justify={"start"} onClick={() => {
+        <Button variant={"none"} w={"100%"} justify={"flex-start"} paddingSize={"xxs"} onClick={() => {
             setCreateDialogOpen(true)
             setFlowTypeId(undefined)
         }}>
             <IconPlus size={13}/>
-            Create workflow
+            <Text size={"md"} hierarchy={"tertiary"}>Create workflow</Text>
         </Button>
         <Spacing spacing={"lg"}/>
         <div style={{borderTop: "1px dashed rgba(255,255,255, .1)"}}/>