From 266a80bed312400b41958602f4f35c2ce0fdf485 Mon Sep 17 00:00:00 2001
From: flakronademi <flakronflaki0@gmail.com>
Date: Mon, 13 Jul 2026 14:28:40 +0200
Subject: [PATCH 1/5] added Create Pipeline button and template modal to file
 explorer - Show "Create Pipeline" button at the bottom of the file explorer  
 when no .rosetta pipeline files exist; hides automatically once   a pipeline
 is created - Add CreatePipelineModal with two selectable templates:  
 "Getting Started" (deps + test + teardown) and   "Full CI/CD" (deps + run +
 test + freshness + deploy + teardown) - Auto-open the newly created
 pipeline.yml in the editor on creation

---
 .../modals/createPipelineModal/index.tsx      | 358 ++++++++++++++++++
 src/renderer/components/modals/index.ts       |   1 +
 .../components/sidebar/project-sidebar.tsx    | 115 +++++-
 3 files changed, 459 insertions(+), 15 deletions(-)
 create mode 100644 src/renderer/components/modals/createPipelineModal/index.tsx

diff --git a/src/renderer/components/modals/createPipelineModal/index.tsx b/src/renderer/components/modals/createPipelineModal/index.tsx
new file mode 100644
index 00000000..1818fe5f
--- /dev/null
+++ b/src/renderer/components/modals/createPipelineModal/index.tsx
@@ -0,0 +1,358 @@
+import React from 'react';
+import {
+  Box,
+  Button,
+  Typography,
+  Stack,
+  Paper,
+  alpha,
+  CircularProgress,
+  Chip,
+} from '@mui/material';
+import {
+  Close,
+  AccountTree,
+  CheckCircleOutline,
+  PlayArrow,
+  Code,
+} from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
+import { toast } from 'react-toastify';
+import { Modal } from '../modal';
+import { projectsServices } from '../../../services';
+import { Project } from '../../../../types/backend';
+
+interface PipelineTemplate {
+  id: string;
+  label: string;
+  description: string;
+  badge?: string;
+  steps: string[];
+  content: string;
+}
+
+const TEMPLATES: PipelineTemplate[] = [
+  {
+    id: 'getting-started',
+    label: 'Getting Started',
+    badge: 'Recommended',
+    description:
+      'A simple pipeline that runs dbt deps, dbt test, and a teardown step. Perfect for new projects.',
+    steps: ['dbt deps', 'dbt test', 'teardown'],
+    content: `name: "CI"
+jobs:
+  - name: "setup"
+    steps:
+      - name: Install dependencies
+        plugin: dbt@v1
+        command: dbt deps
+  - name: "run-dbt-command"
+    steps:
+      - name: dbt test
+        plugin: dbt@v1
+        command: dbt test
+  - name: "teardown"
+    type: "cleanup"
+    steps:
+      - name: Run teardown
+        plugin: command@v1
+        command: echo "TEARDOWN"
+`,
+  },
+  {
+    id: 'full-ci',
+    label: 'Full CI/CD',
+    badge: 'Advanced',
+    description:
+      'A complete pipeline with dependency install, model runs, tests, freshness checks, and a deploy notification step.',
+    steps: [
+      'dbt deps',
+      'dbt run',
+      'dbt test',
+      'dbt source freshness',
+      'deploy',
+    ],
+    content: `name: "Full CI/CD"
+jobs:
+  - name: "setup"
+    steps:
+      - name: Install dependencies
+        plugin: dbt@v1
+        command: dbt deps
+  - name: "build"
+    steps:
+      - name: Run models
+        plugin: dbt@v1
+        command: dbt run
+  - name: "test"
+    steps:
+      - name: Run tests
+        plugin: dbt@v1
+        command: dbt test
+      - name: Check source freshness
+        plugin: dbt@v1
+        command: dbt source freshness
+  - name: "deploy"
+    steps:
+      - name: Notify deployment
+        plugin: command@v1
+        command: echo "Deployment complete"
+  - name: "teardown"
+    type: "cleanup"
+    steps:
+      - name: Run teardown
+        plugin: command@v1
+        command: echo "TEARDOWN"
+`,
+  },
+];
+
+interface CreatePipelineModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  project: Project;
+  onCreated: (filePath: string) => void;
+}
+
+export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
+  isOpen,
+  onClose,
+  project,
+  onCreated,
+}) => {
+  const theme = useTheme();
+  const [selectedTemplateId, setSelectedTemplateId] = React.useState<
+    string | null
+  >(null);
+  const [isCreating, setIsCreating] = React.useState(false);
+
+  // Reset selection when modal opens
+  React.useEffect(() => {
+    if (isOpen) {
+      setSelectedTemplateId(null);
+    }
+  }, [isOpen]);
+
+  const handleCreate = async () => {
+    if (!selectedTemplateId) return;
+
+    const template = TEMPLATES.find((t) => t.id === selectedTemplateId);
+    if (!template) return;
+
+    setIsCreating(true);
+    try {
+      // Ensure .rosetta directory exists
+      await projectsServices.createFolder({
+        filePath: project.path,
+        name: '.rosetta',
+      });
+
+      const pipelinePath = `${project.path}/.rosetta/pipeline.yml`;
+      await projectsServices.saveFileContent({
+        path: pipelinePath,
+        content: template.content,
+      });
+
+      toast.success('Pipeline created successfully.');
+      onCreated(pipelinePath);
+      onClose();
+    } catch (error) {
+      const msg =
+        error instanceof Error ? error.message : 'Failed to create pipeline';
+      toast.error(msg);
+    } finally {
+      setIsCreating(false);
+    }
+  };
+
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title="Create Pipeline"
+      maxWidth="sm"
+    >
+      <Stack spacing={3}>
+        {/* Header description */}
+        <Typography variant="body2" color="text.secondary">
+          Choose a template to scaffold your pipeline. The file will be created
+          at <code>.rosetta/pipeline.yml</code> in your project.
+        </Typography>
+
+        {/* Template cards */}
+        <Stack spacing={1.5}>
+          {TEMPLATES.map((template) => {
+            const isSelected = selectedTemplateId === template.id;
+            return (
+              <Paper
+                key={template.id}
+                variant="outlined"
+                onClick={() => setSelectedTemplateId(template.id)}
+                sx={{
+                  p: 2,
+                  cursor: 'pointer',
+                  border: '1px solid',
+                  borderColor: isSelected
+                    ? 'primary.main'
+                    : theme.palette.divider,
+                  bgcolor: isSelected
+                    ? alpha(
+                        theme.palette.primary.main,
+                        theme.palette.mode === 'dark' ? 0.1 : 0.04,
+                      )
+                    : 'background.paper',
+                  transition: 'border-color 0.15s, background-color 0.15s',
+                  '&:hover': {
+                    borderColor: 'primary.main',
+                    bgcolor: alpha(
+                      theme.palette.primary.main,
+                      theme.palette.mode === 'dark' ? 0.08 : 0.03,
+                    ),
+                  },
+                }}
+              >
+                <Box
+                  sx={{
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    gap: 1.5,
+                  }}
+                >
+                  {/* Icon */}
+                  <Box
+                    sx={{
+                      mt: 0.25,
+                      p: 0.75,
+                      borderRadius: 1,
+                      bgcolor: isSelected
+                        ? alpha(theme.palette.primary.main, 0.12)
+                        : alpha(theme.palette.text.secondary, 0.08),
+                      color: isSelected ? 'primary.main' : 'text.secondary',
+                      display: 'flex',
+                      flexShrink: 0,
+                    }}
+                  >
+                    <AccountTree sx={{ fontSize: 18 }} />
+                  </Box>
+
+                  {/* Content */}
+                  <Box sx={{ flex: 1, minWidth: 0 }}>
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 1,
+                        mb: 0.5,
+                      }}
+                    >
+                      <Typography
+                        variant="body2"
+                        fontWeight={600}
+                        color={isSelected ? 'primary.main' : 'text.primary'}
+                      >
+                        {template.label}
+                      </Typography>
+                      {template.badge && (
+                        <Chip
+                          label={template.badge}
+                          size="small"
+                          color="primary"
+                          variant="outlined"
+                          sx={{ height: 18, fontSize: '0.6rem' }}
+                        />
+                      )}
+                    </Box>
+                    <Typography
+                      variant="caption"
+                      color="text.secondary"
+                      sx={{ lineHeight: 1.5, display: 'block' }}
+                    >
+                      {template.description}
+                    </Typography>
+
+                    {/* Steps preview */}
+                    <Box
+                      sx={{
+                        mt: 1,
+                        display: 'flex',
+                        gap: 0.5,
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      {template.steps.map((step) => (
+                        <Box
+                          key={step}
+                          sx={{
+                            display: 'inline-flex',
+                            alignItems: 'center',
+                            gap: 0.4,
+                            px: 0.75,
+                            py: 0.25,
+                            borderRadius: 0.75,
+                            bgcolor: alpha(theme.palette.text.secondary, 0.07),
+                          }}
+                        >
+                          <Code sx={{ fontSize: 10, opacity: 0.6 }} />
+                          <Typography
+                            variant="caption"
+                            sx={{ fontSize: '0.65rem', opacity: 0.8 }}
+                          >
+                            {step}
+                          </Typography>
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
+
+                  {/* Checkmark */}
+                  {isSelected && (
+                    <CheckCircleOutline
+                      sx={{
+                        color: 'primary.main',
+                        fontSize: 20,
+                        flexShrink: 0,
+                      }}
+                    />
+                  )}
+                </Box>
+              </Paper>
+            );
+          })}
+        </Stack>
+
+        {/* Footer actions */}
+        <Box
+          display="flex"
+          justifyContent="flex-end"
+          gap={1.5}
+          pt={1}
+          borderTop={`1px solid ${theme.palette.divider}`}
+        >
+          <Button
+            variant="outlined"
+            onClick={onClose}
+            startIcon={<Close />}
+            sx={{
+              minWidth: 100,
+              borderColor: alpha(theme.palette.divider, 0.5),
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={handleCreate}
+            disabled={!selectedTemplateId || isCreating}
+            startIcon={
+              isCreating ? <CircularProgress size={16} /> : <PlayArrow />
+            }
+            sx={{ minWidth: 140, fontWeight: 600 }}
+          >
+            {isCreating ? 'Creating...' : 'Create Pipeline'}
+          </Button>
+        </Box>
+      </Stack>
+    </Modal>
+  );
+};
diff --git a/src/renderer/components/modals/index.ts b/src/renderer/components/modals/index.ts
index 4f5d776e..a602eb79 100644
--- a/src/renderer/components/modals/index.ts
+++ b/src/renderer/components/modals/index.ts
@@ -17,4 +17,5 @@ export * from './pushToCloudModal';
 export * from './rawLayerModal';
 export * from './removeConnectionModal';
 export * from './pipelineSelectorModal';
+export * from './createPipelineModal';
 export * from './sshPassphraseModal';
diff --git a/src/renderer/components/sidebar/project-sidebar.tsx b/src/renderer/components/sidebar/project-sidebar.tsx
index 3999e4df..cc5a00c1 100644
--- a/src/renderer/components/sidebar/project-sidebar.tsx
+++ b/src/renderer/components/sidebar/project-sidebar.tsx
@@ -8,6 +8,7 @@ import {
   CardContent,
   Chip,
   Divider,
+  Tooltip,
 } from '@mui/material';
 import {
   Add,
@@ -15,8 +16,9 @@ import {
   DeleteOutline,
   Storage as DatabaseIcon,
   SwapHoriz,
+  AccountTree,
 } from '@mui/icons-material';
-import { useTheme } from '@mui/material/styles';
+import { useTheme, alpha } from '@mui/material/styles';
 import { FileTreeViewer } from '../index';
 import { FileTreeContainer } from '../../screens/projectDetails/styles';
 import {
@@ -27,6 +29,8 @@ import {
 } from '../../../types/backend';
 import { SourceControlView } from '../sourceControl';
 import connectionIcons from '../../../../assets/connectionIcons';
+import { useListPipelines } from '../../controllers';
+import { CreatePipelineModal } from '../modals';
 
 export type SidebarTab = 'explorer' | 'scm' | 'connections';
 
@@ -252,6 +256,7 @@ interface ExplorerTabProps {
   statuses: FileStatus[];
   isLoadingDirectories: boolean;
   selectedFilePath?: string;
+  project?: Project;
   onDeleteFile: (deletedFile: string) => void;
   onFileSelect: (fileNode: any) => Promise<void>;
   onRefreshFiles: () => Promise<void>;
@@ -266,6 +271,7 @@ const ExplorerTab: React.FC<ExplorerTabProps> = ({
   statuses,
   isLoadingDirectories,
   selectedFilePath,
+  project,
   onDeleteFile,
   onFileSelect,
   onRefreshFiles,
@@ -274,21 +280,99 @@ const ExplorerTab: React.FC<ExplorerTabProps> = ({
   onRenameFile,
   onRunPipeline,
 }) => {
+  const theme = useTheme();
+  const [createPipelineOpen, setCreatePipelineOpen] = React.useState(false);
+
+  const { data: pipelines = [], refetch: refetchPipelines } = useListPipelines(
+    project?.id,
+  );
+
+  const hasPipelines = pipelines.length > 0;
+
+  const handlePipelineCreated = React.useCallback(
+    async (filePath: string) => {
+      await refetchPipelines();
+      await onRefreshFiles();
+      // Open the newly created pipeline file in the editor
+      onFileSelect({
+        id: filePath,
+        name: 'pipeline.yml',
+        path: filePath,
+        type: 'file' as const,
+      });
+    },
+    [refetchPipelines, onRefreshFiles, onFileSelect],
+  );
+
   return (
-    <FileTreeContainer>
-      {directories && (
-        <FileTreeViewer
-          statuses={statuses}
-          node={directories}
-          onDeleteFileCallback={onDeleteFile}
-          onFileSelect={onFileSelect}
-          isLoadingFiles={isLoadingDirectories}
-          refreshFiles={onRefreshFiles}
-          copyPath={onCopyPath}
-          onNewFileCallback={onNewFile}
-          selectedPath={selectedFilePath}
-          onRenameCallback={onRenameFile}
-          onRunPipeline={onRunPipeline}
+    <FileTreeContainer sx={{ gap: 0, p: 0 }}>
+      {/* Tree takes all remaining space */}
+      <Box sx={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+        {directories && (
+          <FileTreeViewer
+            statuses={statuses}
+            node={directories}
+            onDeleteFileCallback={onDeleteFile}
+            onFileSelect={onFileSelect}
+            isLoadingFiles={isLoadingDirectories}
+            refreshFiles={onRefreshFiles}
+            copyPath={onCopyPath}
+            onNewFileCallback={onNewFile}
+            selectedPath={selectedFilePath}
+            onRenameCallback={onRenameFile}
+            onRunPipeline={onRunPipeline}
+          />
+        )}
+      </Box>
+
+      {/* Create Pipeline button — only rendered (and takes space) when no pipelines exist */}
+      {project && !hasPipelines && (
+        <Box
+          sx={{
+            px: 1,
+            pb: 1,
+            pt: 0.75,
+            flexShrink: 0,
+            borderTop: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Tooltip
+            title="No pipeline found in .rosetta/ — create one to run jobs on the cloud"
+            placement="top"
+            arrow
+          >
+            <Button
+              fullWidth
+              variant="outlined"
+              size="small"
+              startIcon={<AccountTree sx={{ fontSize: 16 }} />}
+              onClick={() => setCreatePipelineOpen(true)}
+              sx={{
+                fontSize: '0.72rem',
+                py: 0.75,
+                borderStyle: 'dashed',
+                color: 'text.secondary',
+                borderColor: alpha(theme.palette.text.secondary, 0.3),
+                '&:hover': {
+                  borderColor: 'primary.main',
+                  color: 'primary.main',
+                  borderStyle: 'dashed',
+                  bgcolor: alpha(theme.palette.primary.main, 0.04),
+                },
+              }}
+            >
+              Create Pipeline
+            </Button>
+          </Tooltip>
+        </Box>
+      )}
+
+      {project && (
+        <CreatePipelineModal
+          isOpen={createPipelineOpen}
+          onClose={() => setCreatePipelineOpen(false)}
+          project={project}
+          onCreated={(filePath) => handlePipelineCreated(filePath)}
         />
       )}
     </FileTreeContainer>
@@ -405,6 +489,7 @@ export const ProjectSidebar: React.FC<ProjectSidebarProps> = ({
             statuses={statuses}
             isLoadingDirectories={isLoadingDirectories}
             selectedFilePath={selectedFilePath}
+            project={project}
             onDeleteFile={onDeleteFile}
             onFileSelect={onFileSelect}
             onRefreshFiles={onRefreshFiles}

From becf0c585d744a3727be947d7a1830d95d840738 Mon Sep 17 00:00:00 2001
From: flakronademi <flakronflaki0@gmail.com>
Date: Thu, 16 Jul 2026 10:36:53 +0200
Subject: [PATCH 2/5] made Create Pipeline button always visible in sidebar
 instead of conditional on missing pipelines and changed button styling from
 outlined dashed to contained variant

---
 .../modals/createPipelineModal/index.tsx      | 27 ++++++++++++++++---
 .../components/sidebar/project-sidebar.tsx    | 17 +++---------
 2 files changed, 27 insertions(+), 17 deletions(-)

diff --git a/src/renderer/components/modals/createPipelineModal/index.tsx b/src/renderer/components/modals/createPipelineModal/index.tsx
index 1818fe5f..535fc813 100644
--- a/src/renderer/components/modals/createPipelineModal/index.tsx
+++ b/src/renderer/components/modals/createPipelineModal/index.tsx
@@ -28,6 +28,7 @@ interface PipelineTemplate {
   description: string;
   badge?: string;
   steps: string[];
+  fileName: string;
   content: string;
 }
 
@@ -39,6 +40,7 @@ const TEMPLATES: PipelineTemplate[] = [
     description:
       'A simple pipeline that runs dbt deps, dbt test, and a teardown step. Perfect for new projects.',
     steps: ['dbt deps', 'dbt test', 'teardown'],
+    fileName: 'pipeline.yml',
     content: `name: "CI"
 jobs:
   - name: "setup"
@@ -72,6 +74,7 @@ jobs:
       'dbt source freshness',
       'deploy',
     ],
+    fileName: 'pipeline-full-ci.yml',
     content: `name: "Full CI/CD"
 jobs:
   - name: "setup"
@@ -147,7 +150,7 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
         name: '.rosetta',
       });
 
-      const pipelinePath = `${project.path}/.rosetta/pipeline.yml`;
+      const pipelinePath = `${project.path}/.rosetta/${template.fileName}`;
       await projectsServices.saveFileContent({
         path: pipelinePath,
         content: template.content,
@@ -175,8 +178,8 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
       <Stack spacing={3}>
         {/* Header description */}
         <Typography variant="body2" color="text.secondary">
-          Choose a template to scaffold your pipeline. The file will be created
-          at <code>.rosetta/pipeline.yml</code> in your project.
+          Choose a template to scaffold your pipeline. Each template creates its
+          own file inside <code>.rosetta/</code> in your project.
         </Typography>
 
         {/* Template cards */}
@@ -187,7 +190,9 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
               <Paper
                 key={template.id}
                 variant="outlined"
-                onClick={() => setSelectedTemplateId(template.id)}
+                onClick={() => {
+                  setSelectedTemplateId(template.id);
+                }}
                 sx={{
                   p: 2,
                   cursor: 'pointer',
@@ -270,6 +275,20 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
                       {template.description}
                     </Typography>
 
+                    {/* File name */}
+                    <Typography
+                      variant="caption"
+                      sx={{
+                        mt: 0.5,
+                        display: 'block',
+                        fontFamily: 'monospace',
+                        fontSize: '0.65rem',
+                        color: isSelected ? 'primary.main' : 'text.disabled',
+                      }}
+                    >
+                      .rosetta/{template.fileName}
+                    </Typography>
+
                     {/* Steps preview */}
                     <Box
                       sx={{
diff --git a/src/renderer/components/sidebar/project-sidebar.tsx b/src/renderer/components/sidebar/project-sidebar.tsx
index cc5a00c1..00f4ccf9 100644
--- a/src/renderer/components/sidebar/project-sidebar.tsx
+++ b/src/renderer/components/sidebar/project-sidebar.tsx
@@ -325,8 +325,8 @@ const ExplorerTab: React.FC<ExplorerTabProps> = ({
         )}
       </Box>
 
-      {/* Create Pipeline button — only rendered (and takes space) when no pipelines exist */}
-      {project && !hasPipelines && (
+      {/* Create Pipeline button — always visible */}
+      {project && (
         <Box
           sx={{
             px: 1,
@@ -337,28 +337,19 @@ const ExplorerTab: React.FC<ExplorerTabProps> = ({
           }}
         >
           <Tooltip
-            title="No pipeline found in .rosetta/ — create one to run jobs on the cloud"
+            title="Create a pipeline to run jobs on the cloud"
             placement="top"
             arrow
           >
             <Button
               fullWidth
-              variant="outlined"
+              variant="contained"
               size="small"
               startIcon={<AccountTree sx={{ fontSize: 16 }} />}
               onClick={() => setCreatePipelineOpen(true)}
               sx={{
                 fontSize: '0.72rem',
                 py: 0.75,
-                borderStyle: 'dashed',
-                color: 'text.secondary',
-                borderColor: alpha(theme.palette.text.secondary, 0.3),
-                '&:hover': {
-                  borderColor: 'primary.main',
-                  color: 'primary.main',
-                  borderStyle: 'dashed',
-                  bgcolor: alpha(theme.palette.primary.main, 0.04),
-                },
               }}
             >
               Create Pipeline

From 0f6a295b123c1ed9fe76be7710c340d19532b266 Mon Sep 17 00:00:00 2001
From: flakronademi <flakronflaki0@gmail.com>
Date: Thu, 16 Jul 2026 10:43:33 +0200
Subject: [PATCH 3/5] fix lint error

---
 src/renderer/components/sidebar/project-sidebar.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/renderer/components/sidebar/project-sidebar.tsx b/src/renderer/components/sidebar/project-sidebar.tsx
index 00f4ccf9..352cf274 100644
--- a/src/renderer/components/sidebar/project-sidebar.tsx
+++ b/src/renderer/components/sidebar/project-sidebar.tsx
@@ -18,7 +18,7 @@ import {
   SwapHoriz,
   AccountTree,
 } from '@mui/icons-material';
-import { useTheme, alpha } from '@mui/material/styles';
+import { useTheme } from '@mui/material/styles';
 import { FileTreeViewer } from '../index';
 import { FileTreeContainer } from '../../screens/projectDetails/styles';
 import {
@@ -283,11 +283,7 @@ const ExplorerTab: React.FC<ExplorerTabProps> = ({
   const theme = useTheme();
   const [createPipelineOpen, setCreatePipelineOpen] = React.useState(false);
 
-  const { data: pipelines = [], refetch: refetchPipelines } = useListPipelines(
-    project?.id,
-  );
-
-  const hasPipelines = pipelines.length > 0;
+  const { refetch: refetchPipelines } = useListPipelines(project?.id);
 
   const handlePipelineCreated = React.useCallback(
     async (filePath: string) => {

From 825c2d4767381eba46583043b38ae608e94ab5f9 Mon Sep 17 00:00:00 2001
From: flakronademi <flakronflaki0@gmail.com>
Date: Thu, 16 Jul 2026 10:54:22 +0200
Subject: [PATCH 4/5] feat(createPipelineModal): redesign with gradient header
 and improved UX

---
 .../modals/createPipelineModal/index.tsx      | 392 ++++++++++++------
 1 file changed, 272 insertions(+), 120 deletions(-)

diff --git a/src/renderer/components/modals/createPipelineModal/index.tsx b/src/renderer/components/modals/createPipelineModal/index.tsx
index 535fc813..b76274df 100644
--- a/src/renderer/components/modals/createPipelineModal/index.tsx
+++ b/src/renderer/components/modals/createPipelineModal/index.tsx
@@ -4,21 +4,24 @@ import {
   Button,
   Typography,
   Stack,
-  Paper,
   alpha,
   CircularProgress,
   Chip,
+  Dialog,
+  DialogContent,
+  IconButton,
+  Divider,
 } from '@mui/material';
 import {
   Close,
   AccountTree,
-  CheckCircleOutline,
+  CheckCircle,
   PlayArrow,
   Code,
+  ArrowForward,
 } from '@mui/icons-material';
 import { useTheme } from '@mui/material/styles';
 import { toast } from 'react-toastify';
-import { Modal } from '../modal';
 import { projectsServices } from '../../../services';
 import { Project } from '../../../../types/backend';
 
@@ -27,6 +30,7 @@ interface PipelineTemplate {
   label: string;
   description: string;
   badge?: string;
+  badgeColor?: 'success' | 'warning' | 'primary' | 'info';
   steps: string[];
   fileName: string;
   content: string;
@@ -37,6 +41,7 @@ const TEMPLATES: PipelineTemplate[] = [
     id: 'getting-started',
     label: 'Getting Started',
     badge: 'Recommended',
+    badgeColor: 'success',
     description:
       'A simple pipeline that runs dbt deps, dbt test, and a teardown step. Perfect for new projects.',
     steps: ['dbt deps', 'dbt test', 'teardown'],
@@ -65,6 +70,7 @@ jobs:
     id: 'full-ci',
     label: 'Full CI/CD',
     badge: 'Advanced',
+    badgeColor: 'warning',
     description:
       'A complete pipeline with dependency install, model runs, tests, freshness checks, and a deploy notification step.',
     steps: [
@@ -124,12 +130,13 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
   onCreated,
 }) => {
   const theme = useTheme();
+  const isDark = theme.palette.mode === 'dark';
+
   const [selectedTemplateId, setSelectedTemplateId] = React.useState<
     string | null
   >(null);
   const [isCreating, setIsCreating] = React.useState(false);
 
-  // Reset selection when modal opens
   React.useEffect(() => {
     if (isOpen) {
       setSelectedTemplateId(null);
@@ -138,13 +145,11 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
 
   const handleCreate = async () => {
     if (!selectedTemplateId) return;
-
     const template = TEMPLATES.find((t) => t.id === selectedTemplateId);
     if (!template) return;
 
     setIsCreating(true);
     try {
-      // Ensure .rosetta directory exists
       await projectsServices.createFolder({
         filePath: project.path,
         name: '.rosetta',
@@ -169,79 +174,176 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
   };
 
   return (
-    <Modal
-      isOpen={isOpen}
+    <Dialog
+      open={isOpen}
       onClose={onClose}
-      title="Create Pipeline"
+      fullWidth
       maxWidth="sm"
+      PaperProps={{
+        sx: {
+          borderRadius: 2.5,
+          overflow: 'hidden',
+          backgroundImage: 'none',
+          boxShadow: isDark
+            ? '0 24px 48px rgba(0,0,0,0.6)'
+            : '0 24px 48px rgba(0,0,0,0.16)',
+        },
+      }}
     >
-      <Stack spacing={3}>
-        {/* Header description */}
-        <Typography variant="body2" color="text.secondary">
-          Choose a template to scaffold your pipeline. Each template creates its
-          own file inside <code>.rosetta/</code> in your project.
+      {/* Gradient header */}
+      <Box
+        sx={{
+          px: 3,
+          pt: 3,
+          pb: 2.5,
+          background: isDark
+            ? `linear-gradient(135deg, ${alpha(theme.palette.primary.dark, 0.5)} 0%, ${alpha(theme.palette.primary.main, 0.2)} 100%)`
+            : `linear-gradient(135deg, ${theme.palette.primary.main} 0%, ${alpha(theme.palette.primary.light, 0.85)} 100%)`,
+          position: 'relative',
+        }}
+      >
+        {/* Close button */}
+        <IconButton
+          onClick={onClose}
+          size="small"
+          sx={{
+            position: 'absolute',
+            top: 12,
+            right: 12,
+            color: isDark
+              ? alpha(theme.palette.common.white, 0.7)
+              : alpha(theme.palette.common.white, 0.9),
+            '&:hover': {
+              bgcolor: alpha(theme.palette.common.white, 0.15),
+            },
+          }}
+        >
+          <Close fontSize="small" />
+        </IconButton>
+
+        <Box sx={{ display: 'flex', alignItems: 'center', gap: 1.5, mb: 1 }}>
+          <Box
+            sx={{
+              p: 1,
+              borderRadius: 1.5,
+              bgcolor: alpha(theme.palette.common.white, isDark ? 0.1 : 0.2),
+              display: 'flex',
+            }}
+          >
+            <AccountTree
+              sx={{
+                fontSize: 22,
+                color: isDark ? theme.palette.primary.light : '#fff',
+              }}
+            />
+          </Box>
+          <Typography
+            variant="h6"
+            fontWeight={700}
+            sx={{ color: isDark ? theme.palette.primary.light : '#fff' }}
+          >
+            Create Pipeline
+          </Typography>
+        </Box>
+
+        <Typography
+          variant="body2"
+          sx={{
+            color: isDark
+              ? alpha(theme.palette.common.white, 0.6)
+              : alpha(theme.palette.common.white, 0.85),
+            maxWidth: 420,
+          }}
+        >
+          Choose a template to scaffold your pipeline. Files are created inside{' '}
+          <Box
+            component="code"
+            sx={{
+              fontFamily: 'monospace',
+              fontSize: '0.8em',
+              px: 0.5,
+              py: 0.1,
+              borderRadius: 0.5,
+              bgcolor: alpha(theme.palette.common.white, 0.15),
+            }}
+          >
+            .rosetta/
+          </Box>
         </Typography>
+      </Box>
 
-        {/* Template cards */}
-        <Stack spacing={1.5}>
+      <DialogContent sx={{ p: 0, overflow: 'hidden' }}>
+        <Stack spacing={0} divider={<Divider />}>
           {TEMPLATES.map((template) => {
             const isSelected = selectedTemplateId === template.id;
+
+            const selectedBgColor = isDark
+              ? alpha(theme.palette.primary.main, 0.12)
+              : alpha(theme.palette.primary.main, 0.05);
+
+            const hoverSelectedBg = isDark
+              ? alpha(theme.palette.primary.main, 0.16)
+              : alpha(theme.palette.primary.main, 0.07);
+
+            const hoverBgColor = isSelected ? hoverSelectedBg : 'transparent';
+
+            const unselectedIconBg = isDark
+              ? alpha(theme.palette.common.white, 0.06)
+              : alpha(theme.palette.common.black, 0.05);
+
             return (
-              <Paper
+              <Box
                 key={template.id}
-                variant="outlined"
-                onClick={() => {
-                  setSelectedTemplateId(template.id);
-                }}
+                onClick={() => setSelectedTemplateId(template.id)}
                 sx={{
-                  p: 2,
+                  px: 3,
+                  py: 2.5,
                   cursor: 'pointer',
-                  border: '1px solid',
-                  borderColor: isSelected
-                    ? 'primary.main'
-                    : theme.palette.divider,
-                  bgcolor: isSelected
-                    ? alpha(
-                        theme.palette.primary.main,
-                        theme.palette.mode === 'dark' ? 0.1 : 0.04,
-                      )
-                    : 'background.paper',
-                  transition: 'border-color 0.15s, background-color 0.15s',
+                  position: 'relative',
+                  bgcolor: isSelected ? selectedBgColor : 'background.paper',
+                  transition: 'background-color 0.15s',
                   '&:hover': {
-                    borderColor: 'primary.main',
-                    bgcolor: alpha(
-                      theme.palette.primary.main,
-                      theme.palette.mode === 'dark' ? 0.08 : 0.03,
-                    ),
+                    bgcolor: hoverBgColor,
                   },
                 }}
               >
-                <Box
-                  sx={{
-                    display: 'flex',
-                    alignItems: 'flex-start',
-                    gap: 1.5,
-                  }}
-                >
+                {/* Selected accent bar */}
+                {isSelected && (
+                  <Box
+                    sx={{
+                      position: 'absolute',
+                      left: 0,
+                      top: 0,
+                      bottom: 0,
+                      width: 3,
+                      bgcolor: 'primary.main',
+                      borderRadius: '0 2px 2px 0',
+                    }}
+                  />
+                )}
+
+                <Box sx={{ display: 'flex', gap: 2, alignItems: 'flex-start' }}>
                   {/* Icon */}
                   <Box
                     sx={{
                       mt: 0.25,
-                      p: 0.75,
-                      borderRadius: 1,
+                      p: 1,
+                      borderRadius: 1.5,
+                      flexShrink: 0,
                       bgcolor: isSelected
-                        ? alpha(theme.palette.primary.main, 0.12)
-                        : alpha(theme.palette.text.secondary, 0.08),
+                        ? alpha(theme.palette.primary.main, 0.15)
+                        : unselectedIconBg,
                       color: isSelected ? 'primary.main' : 'text.secondary',
                       display: 'flex',
-                      flexShrink: 0,
+                      transition: 'background-color 0.15s',
                     }}
                   >
-                    <AccountTree sx={{ fontSize: 18 }} />
+                    <AccountTree sx={{ fontSize: 20 }} />
                   </Box>
 
                   {/* Content */}
                   <Box sx={{ flex: 1, minWidth: 0 }}>
+                    {/* Title row */}
                     <Box
                       sx={{
                         display: 'flex',
@@ -261,101 +363,140 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
                         <Chip
                           label={template.badge}
                           size="small"
-                          color="primary"
-                          variant="outlined"
-                          sx={{ height: 18, fontSize: '0.6rem' }}
+                          color={template.badgeColor ?? 'primary'}
+                          variant={isSelected ? 'filled' : 'outlined'}
+                          sx={{
+                            height: 18,
+                            fontSize: '0.6rem',
+                            fontWeight: 600,
+                            letterSpacing: '0.03em',
+                          }}
                         />
                       )}
                     </Box>
+
                     <Typography
                       variant="caption"
                       color="text.secondary"
-                      sx={{ lineHeight: 1.5, display: 'block' }}
+                      sx={{ lineHeight: 1.6, display: 'block', mb: 1.25 }}
                     >
                       {template.description}
                     </Typography>
 
-                    {/* File name */}
+                    {/* Pipeline steps flow */}
+                    <Box
+                      sx={{
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: 0.5,
+                        flexWrap: 'wrap',
+                      }}
+                    >
+                      {template.steps.map((step, i) => (
+                        <React.Fragment key={step}>
+                          <Box
+                            sx={{
+                              display: 'inline-flex',
+                              alignItems: 'center',
+                              gap: 0.4,
+                              px: 0.75,
+                              py: 0.3,
+                              borderRadius: 1,
+                              border: '1px solid',
+                              borderColor: isSelected
+                                ? alpha(theme.palette.primary.main, 0.3)
+                                : alpha(theme.palette.divider, 1),
+                              bgcolor: isSelected
+                                ? alpha(theme.palette.primary.main, 0.08)
+                                : 'transparent',
+                              transition: 'all 0.15s',
+                            }}
+                          >
+                            <Code
+                              sx={{
+                                fontSize: 10,
+                                color: isSelected
+                                  ? 'primary.main'
+                                  : 'text.disabled',
+                              }}
+                            />
+                            <Typography
+                              variant="caption"
+                              sx={{
+                                fontSize: '0.65rem',
+                                fontFamily: 'monospace',
+                                color: isSelected
+                                  ? 'primary.main'
+                                  : 'text.secondary',
+                                fontWeight: isSelected ? 500 : 400,
+                              }}
+                            >
+                              {step}
+                            </Typography>
+                          </Box>
+                          {i < template.steps.length - 1 && (
+                            <ArrowForward
+                              sx={{
+                                fontSize: 10,
+                                color: isSelected
+                                  ? alpha(theme.palette.primary.main, 0.5)
+                                  : alpha(theme.palette.text.disabled, 0.5),
+                                flexShrink: 0,
+                              }}
+                            />
+                          )}
+                        </React.Fragment>
+                      ))}
+                    </Box>
+
+                    {/* File path */}
                     <Typography
                       variant="caption"
                       sx={{
-                        mt: 0.5,
+                        mt: 1,
                         display: 'block',
                         fontFamily: 'monospace',
                         fontSize: '0.65rem',
                         color: isSelected ? 'primary.main' : 'text.disabled',
+                        opacity: 0.8,
                       }}
                     >
                       .rosetta/{template.fileName}
                     </Typography>
-
-                    {/* Steps preview */}
-                    <Box
-                      sx={{
-                        mt: 1,
-                        display: 'flex',
-                        gap: 0.5,
-                        flexWrap: 'wrap',
-                      }}
-                    >
-                      {template.steps.map((step) => (
-                        <Box
-                          key={step}
-                          sx={{
-                            display: 'inline-flex',
-                            alignItems: 'center',
-                            gap: 0.4,
-                            px: 0.75,
-                            py: 0.25,
-                            borderRadius: 0.75,
-                            bgcolor: alpha(theme.palette.text.secondary, 0.07),
-                          }}
-                        >
-                          <Code sx={{ fontSize: 10, opacity: 0.6 }} />
-                          <Typography
-                            variant="caption"
-                            sx={{ fontSize: '0.65rem', opacity: 0.8 }}
-                          >
-                            {step}
-                          </Typography>
-                        </Box>
-                      ))}
-                    </Box>
                   </Box>
 
                   {/* Checkmark */}
-                  {isSelected && (
-                    <CheckCircleOutline
-                      sx={{
-                        color: 'primary.main',
-                        fontSize: 20,
-                        flexShrink: 0,
-                      }}
-                    />
-                  )}
+                  <Box
+                    sx={{
+                      mt: 0.25,
+                      flexShrink: 0,
+                      opacity: isSelected ? 1 : 0,
+                      transition: 'opacity 0.15s',
+                    }}
+                  >
+                    <CheckCircle sx={{ color: 'primary.main', fontSize: 20 }} />
+                  </Box>
                 </Box>
-              </Paper>
+              </Box>
             );
           })}
         </Stack>
 
-        {/* Footer actions */}
+        {/* Footer */}
         <Box
-          display="flex"
-          justifyContent="flex-end"
-          gap={1.5}
-          pt={1}
-          borderTop={`1px solid ${theme.palette.divider}`}
+          sx={{
+            px: 3,
+            py: 2,
+            display: 'flex',
+            justifyContent: 'flex-end',
+            gap: 1.5,
+            bgcolor: isDark
+              ? alpha(theme.palette.common.white, 0.02)
+              : alpha(theme.palette.common.black, 0.02),
+            borderTop: `1px solid ${theme.palette.divider}`,
+          }}
         >
-          <Button
-            variant="outlined"
-            onClick={onClose}
-            startIcon={<Close />}
-            sx={{
-              minWidth: 100,
-              borderColor: alpha(theme.palette.divider, 0.5),
-            }}
-          >
+          <Button variant="outlined" onClick={onClose} sx={{ minWidth: 90 }}>
             Cancel
           </Button>
           <Button
@@ -364,14 +505,25 @@ export const CreatePipelineModal: React.FC<CreatePipelineModalProps> = ({
             onClick={handleCreate}
             disabled={!selectedTemplateId || isCreating}
             startIcon={
-              isCreating ? <CircularProgress size={16} /> : <PlayArrow />
+              isCreating ? (
+                <CircularProgress size={15} color="inherit" />
+              ) : (
+                <PlayArrow />
+              )
             }
-            sx={{ minWidth: 140, fontWeight: 600 }}
+            sx={{
+              minWidth: 150,
+              fontWeight: 600,
+              boxShadow: selectedTemplateId
+                ? `0 4px 14px ${alpha(theme.palette.primary.main, 0.4)}`
+                : 'none',
+              transition: 'box-shadow 0.2s',
+            }}
           >
-            {isCreating ? 'Creating...' : 'Create Pipeline'}
+            {isCreating ? 'Creating…' : 'Create Pipeline'}
           </Button>
         </Box>
-      </Stack>
-    </Modal>
+      </DialogContent>
+    </Dialog>
   );
 };

From 3b24a7bb11057a6b3d1cd81a6a5a372058564418 Mon Sep 17 00:00:00 2001
From: flakronademi <flakronflaki0@gmail.com>
Date: Thu, 16 Jul 2026 14:55:28 +0200
Subject: [PATCH 5/5] renamed getting started pipeline from pipeline.yml to
 pipeline-getting-started.yml

---
 src/renderer/components/modals/createPipelineModal/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/components/modals/createPipelineModal/index.tsx b/src/renderer/components/modals/createPipelineModal/index.tsx
index b76274df..1532174d 100644
--- a/src/renderer/components/modals/createPipelineModal/index.tsx
+++ b/src/renderer/components/modals/createPipelineModal/index.tsx
@@ -45,7 +45,7 @@ const TEMPLATES: PipelineTemplate[] = [
     description:
       'A simple pipeline that runs dbt deps, dbt test, and a teardown step. Perfect for new projects.',
     steps: ['dbt deps', 'dbt test', 'teardown'],
-    fileName: 'pipeline.yml',
+    fileName: 'pipeline-getting-started.yml',
     content: `name: "CI"
 jobs:
   - name: "setup"