Merge pull request #52 from AutoMaker-Org/new-project-from-template

feat: Add new project from template feature and UI enhancements

Author: webdevcody

.github/scripts/upload-to-r2.js

@@ -1,10 +1,14 @@
-const { S3Client, PutObjectCommand, GetObjectCommand } = require('@aws-sdk/client-s3');
-const fs = require('fs');
-const path = require('path');
+const {
+  S3Client,
+  PutObjectCommand,
+  GetObjectCommand,
+} = require("@aws-sdk/client-s3");
+const fs = require("fs");
+const path = require("path");
 
 const s3Client = new S3Client({
-  region: 'auto',
-  endpoint: `https://${process.env.R2_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  region: "auto",
+  endpoint: process.env.R2_ENDPOINT,
   credentials: {
     accessKeyId: process.env.R2_ACCESS_KEY_ID,
     secretAccessKey: process.env.R2_SECRET_ACCESS_KEY,
@@ -18,15 +22,17 @@ const GITHUB_REPO = process.env.GITHUB_REPOSITORY;
 
 async function fetchExistingReleases() {
   try {
-    const response = await s3Client.send(new GetObjectCommand({
-      Bucket: BUCKET,
-      Key: 'releases.json',
-    }));
+    const response = await s3Client.send(
+      new GetObjectCommand({
+        Bucket: BUCKET,
+        Key: "releases.json",
+      })
+    );
     const body = await response.Body.transformToString();
     return JSON.parse(body);
   } catch (error) {
-    if (error.name === 'NoSuchKey' || error.$metadata?.httpStatusCode === 404) {
-      console.log('No existing releases.json found, creating new one');
+    if (error.name === "NoSuchKey" || error.$metadata?.httpStatusCode === 404) {
+      console.log("No existing releases.json found, creating new one");
       return { latestVersion: null, releases: [] };
     }
     throw error;
@@ -37,12 +43,14 @@ async function uploadFile(localPath, r2Key, contentType) {
   const fileBuffer = fs.readFileSync(localPath);
   const stats = fs.statSync(localPath);
 
-  await s3Client.send(new PutObjectCommand({
-    Bucket: BUCKET,
-    Key: r2Key,
-    Body: fileBuffer,
-    ContentType: contentType,
-  }));
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: r2Key,
+      Body: fileBuffer,
+      ContentType: contentType,
+    })
+  );
 
   console.log(`Uploaded: ${r2Key} (${stats.size} bytes)`);
   return stats.size;
@@ -51,44 +59,44 @@ async function uploadFile(localPath, r2Key, contentType) {
 function findArtifacts(dir, pattern) {
   if (!fs.existsSync(dir)) return [];
   const files = fs.readdirSync(dir);
-  return files.filter(f => pattern.test(f)).map(f => path.join(dir, f));
+  return files.filter((f) => pattern.test(f)).map((f) => path.join(dir, f));
 }
 
 async function main() {
-  const artifactsDir = 'artifacts';
+  const artifactsDir = "artifacts";
 
   // Find all artifacts
   const artifacts = {
-    windows: findArtifacts(
-      path.join(artifactsDir, 'windows-builds'),
-      /\.exe$/
-    ),
-    macos: findArtifacts(
-      path.join(artifactsDir, 'macos-builds'),
-      /-x64\.dmg$/
-    ),
+    windows: findArtifacts(path.join(artifactsDir, "windows-builds"), /\.exe$/),
+    macos: findArtifacts(path.join(artifactsDir, "macos-builds"), /-x64\.dmg$/),
     macosArm: findArtifacts(
-      path.join(artifactsDir, 'macos-builds'),
+      path.join(artifactsDir, "macos-builds"),
       /-arm64\.dmg$/
     ),
     linux: findArtifacts(
-      path.join(artifactsDir, 'linux-builds'),
+      path.join(artifactsDir, "linux-builds"),
       /\.AppImage$/
     ),
   };
 
-  console.log('Found artifacts:');
+  console.log("Found artifacts:");
   for (const [platform, files] of Object.entries(artifacts)) {
-    console.log(`  ${platform}: ${files.length > 0 ? files.map(f => path.basename(f)).join(', ') : 'none'}`);
+    console.log(
+      `  ${platform}: ${
+        files.length > 0
+          ? files.map((f) => path.basename(f)).join(", ")
+          : "none"
+      }`
+    );
   }
 
   // Upload each artifact to R2
   const assets = {};
   const contentTypes = {
-    windows: 'application/x-msdownload',
-    macos: 'application/x-apple-diskimage',
-    macosArm: 'application/x-apple-diskimage',
-    linux: 'application/x-executable',
+    windows: "application/x-msdownload",
+    macos: "application/x-apple-diskimage",
+    macosArm: "application/x-apple-diskimage",
+    linux: "application/x-executable",
   };
 
   for (const [platform, files] of Object.entries(artifacts)) {
@@ -107,7 +115,7 @@ async function main() {
       url: `${PUBLIC_URL}/releases/${VERSION}/${filename}`,
       filename,
       size,
-      arch: platform === 'macosArm' ? 'arm64' : 'x64',
+      arch: platform === "macosArm" ? "arm64" : "x64",
     };
   }
 
@@ -122,27 +130,31 @@ async function main() {
   };
 
   // Remove existing entry for this version if re-running
-  releasesData.releases = releasesData.releases.filter(r => r.version !== VERSION);
+  releasesData.releases = releasesData.releases.filter(
+    (r) => r.version !== VERSION
+  );
 
   // Prepend new release
   releasesData.releases.unshift(newRelease);
   releasesData.latestVersion = VERSION;
 
   // Upload updated releases.json
-  await s3Client.send(new PutObjectCommand({
-    Bucket: BUCKET,
-    Key: 'releases.json',
-    Body: JSON.stringify(releasesData, null, 2),
-    ContentType: 'application/json',
-    CacheControl: 'public, max-age=60',
-  }));
-
-  console.log('Successfully updated releases.json');
+  await s3Client.send(
+    new PutObjectCommand({
+      Bucket: BUCKET,
+      Key: "releases.json",
+      Body: JSON.stringify(releasesData, null, 2),
+      ContentType: "application/json",
+      CacheControl: "public, max-age=60",
+    })
+  );
+
+  console.log("Successfully updated releases.json");
   console.log(`Latest version: ${VERSION}`);
   console.log(`Total releases: ${releasesData.releases.length}`);
 }
 
-main().catch(err => {
-  console.error('Failed to upload to R2:', err);
+main().catch((err) => {
+  console.error("Failed to upload to R2:", err);
   process.exit(1);
 });

.github/workflows/release.yml

@@ -129,7 +129,7 @@ jobs:
 
       - name: Upload to R2 and update releases.json
         env:
-          R2_ACCOUNT_ID: ${{ secrets.R2_ACCOUNT_ID }}
+          R2_ENDPOINT: ${{ secrets.R2_ENDPOINT }}
           R2_ACCESS_KEY_ID: ${{ secrets.R2_ACCESS_KEY_ID }}
           R2_SECRET_ACCESS_KEY: ${{ secrets.R2_SECRET_ACCESS_KEY }}
           R2_BUCKET_NAME: ${{ secrets.R2_BUCKET_NAME }}

.gitignore

@@ -7,7 +7,6 @@ node_modules/
 # Build outputs
 dist/
 .next/
-node_modules
 .automaker/images/
 .automaker/
 /.automaker/*

apps/app/src/app/globals.css

@@ -12,6 +12,7 @@
 @custom-variant catppuccin (&:is(.catppuccin *));
 @custom-variant onedark (&:is(.onedark *));
 @custom-variant synthwave (&:is(.synthwave *));
+@custom-variant red (&:is(.red *));
 
 @theme inline {
   --color-background: var(--background);
@@ -1072,6 +1073,75 @@
   --running-indicator-text: oklch(0.75 0.26 350);
 }
 
+/* Red Theme - Bold crimson/red aesthetic */
+.red {
+  --background: oklch(0.12 0.03 15); /* Deep dark red-tinted black */
+  --background-50: oklch(0.12 0.03 15 / 0.5);
+  --background-80: oklch(0.12 0.03 15 / 0.8);
+
+  --foreground: oklch(0.95 0.01 15); /* Off-white with warm tint */
+  --foreground-secondary: oklch(0.7 0.02 15);
+  --foreground-muted: oklch(0.5 0.03 15);
+
+  --card: oklch(0.18 0.04 15); /* Slightly lighter dark red */
+  --card-foreground: oklch(0.95 0.01 15);
+  --popover: oklch(0.15 0.035 15);
+  --popover-foreground: oklch(0.95 0.01 15);
+
+  --primary: oklch(0.55 0.25 25); /* Vibrant crimson red */
+  --primary-foreground: oklch(0.98 0 0);
+
+  --brand-400: oklch(0.6 0.23 25);
+  --brand-500: oklch(0.55 0.25 25); /* Crimson */
+  --brand-600: oklch(0.5 0.27 25);
+
+  --secondary: oklch(0.22 0.05 15);
+  --secondary-foreground: oklch(0.95 0.01 15);
+
+  --muted: oklch(0.22 0.05 15);
+  --muted-foreground: oklch(0.5 0.03 15);
+
+  --accent: oklch(0.28 0.06 15);
+  --accent-foreground: oklch(0.95 0.01 15);
+
+  --destructive: oklch(0.6 0.28 30); /* Bright orange-red for destructive */
+
+  --border: oklch(0.35 0.08 15);
+  --border-glass: oklch(0.55 0.25 25 / 0.3);
+
+  --input: oklch(0.18 0.04 15);
+  --ring: oklch(0.55 0.25 25);
+
+  --chart-1: oklch(0.55 0.25 25); /* Crimson */
+  --chart-2: oklch(0.7 0.2 50); /* Orange */
+  --chart-3: oklch(0.8 0.18 80); /* Gold */
+  --chart-4: oklch(0.6 0.22 0); /* Pure red */
+  --chart-5: oklch(0.65 0.2 350); /* Pink-red */
+
+  --sidebar: oklch(0.1 0.025 15);
+  --sidebar-foreground: oklch(0.95 0.01 15);
+  --sidebar-primary: oklch(0.55 0.25 25);
+  --sidebar-primary-foreground: oklch(0.98 0 0);
+  --sidebar-accent: oklch(0.22 0.05 15);
+  --sidebar-accent-foreground: oklch(0.95 0.01 15);
+  --sidebar-border: oklch(0.35 0.08 15);
+  --sidebar-ring: oklch(0.55 0.25 25);
+
+  /* Action button colors - Red theme */
+  --action-view: oklch(0.55 0.25 25); /* Crimson */
+  --action-view-hover: oklch(0.5 0.27 25);
+  --action-followup: oklch(0.7 0.2 50); /* Orange */
+  --action-followup-hover: oklch(0.65 0.22 50);
+  --action-commit: oklch(0.6 0.2 140); /* Green for positive actions */
+  --action-commit-hover: oklch(0.55 0.22 140);
+  --action-verify: oklch(0.6 0.2 140); /* Green */
+  --action-verify-hover: oklch(0.55 0.22 140);
+
+  /* Running indicator - Crimson */
+  --running-indicator: oklch(0.55 0.25 25);
+  --running-indicator-text: oklch(0.6 0.23 25);
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;
@@ -1327,6 +1397,39 @@
   .text-running-indicator {
     color: var(--running-indicator-text);
   }
+
+  /* Animated border for in-progress cards */
+  @keyframes border-rotate {
+    0% {
+      background-position: 0% 50%;
+    }
+    50% {
+      background-position: 100% 50%;
+    }
+    100% {
+      background-position: 0% 50%;
+    }
+  }
+
+  .animated-border-wrapper {
+    position: relative;
+    border-radius: 0.75rem;
+    padding: 2px;
+    background: linear-gradient(
+      90deg,
+      var(--running-indicator),
+      color-mix(in oklch, var(--running-indicator), transparent 50%),
+      var(--running-indicator),
+      color-mix(in oklch, var(--running-indicator), transparent 50%),
+      var(--running-indicator)
+    );
+    background-size: 200% 100%;
+    animation: border-rotate 3s ease infinite;
+  }
+
+  .animated-border-wrapper > * {
+    border-radius: calc(0.75rem - 2px);
+  }
 }
 
 /* Retro Overrides for Utilities */

apps/app/src/app/page.tsx

@@ -15,7 +15,11 @@ import { RunningAgentsView } from "@/components/views/running-agents-view";
 import { useAppStore } from "@/store/app-store";
 import { useSetupStore } from "@/store/setup-store";
 import { getElectronAPI, isElectron } from "@/lib/electron";
-import { FileBrowserProvider, useFileBrowser, setGlobalFileBrowser } from "@/contexts/file-browser-context";
+import {
+  FileBrowserProvider,
+  useFileBrowser,
+  setGlobalFileBrowser,
+} from "@/contexts/file-browser-context";
 
 function HomeContent() {
   const {
@@ -24,6 +28,8 @@ function HomeContent() {
     setIpcConnected,
     theme,
     currentProject,
+    previewTheme,
+    getEffectiveTheme,
   } = useAppStore();
   const { isFirstRun, setupComplete } = useSetupStore();
   const [isMounted, setIsMounted] = useState(false);
@@ -72,9 +78,9 @@ function HomeContent() {
     };
   }, [handleStreamerPanelShortcut]);
 
-  // Compute the effective theme: project theme takes priority over global theme
-  // This is reactive because it depends on currentProject and theme from the store
-  const effectiveTheme = currentProject?.theme || theme;
+  // Compute the effective theme: previewTheme takes priority, then project theme, then global theme
+  // This is reactive because it depends on previewTheme, currentProject, and theme from the store
+  const effectiveTheme = getEffectiveTheme();
 
   // Prevent hydration issues
   useEffect(() => {
@@ -122,7 +128,7 @@ function HomeContent() {
     testConnection();
   }, [setIpcConnected]);
 
-  // Apply theme class to document (uses effective theme - project-specific or global)
+  // Apply theme class to document (uses effective theme - preview, project-specific, or global)
   useEffect(() => {
     const root = document.documentElement;
     root.classList.remove(
@@ -137,7 +143,8 @@ function HomeContent() {
       "gruvbox",
       "catppuccin",
       "onedark",
-      "synthwave"
+      "synthwave",
+      "red"
     );
 
     if (effectiveTheme === "dark") {
@@ -162,6 +169,8 @@ function HomeContent() {
       root.classList.add("onedark");
     } else if (effectiveTheme === "synthwave") {
       root.classList.add("synthwave");
+    } else if (effectiveTheme === "red") {
+      root.classList.add("red");
     } else if (effectiveTheme === "light") {
       root.classList.add("light");
     } else if (effectiveTheme === "system") {
@@ -173,7 +182,7 @@ function HomeContent() {
         root.classList.add("light");
       }
     }
-  }, [effectiveTheme]);
+  }, [effectiveTheme, previewTheme, currentProject, theme]);
 
   const renderView = () => {
     switch (currentView) {