update the script to support running in docker

fixed background image not showing at desktop application (electron)

.claude/.gitignore

@@ -0,0 +1 @@
+hans/

.dockerignore

@@ -0,0 +1 @@
+node_modules/

apps/ui/src/components/dialogs/board-background-modal.tsx

@@ -13,7 +13,8 @@ import { Label } from '@/components/ui/label';
 import { Checkbox } from '@/components/ui/checkbox';
 import { cn } from '@/lib/utils';
 import { useAppStore, defaultBackgroundSettings } from '@/store/app-store';
-import { getHttpApiClient, getServerUrlSync } from '@/lib/http-api-client';
+import { getHttpApiClient } from '@/lib/http-api-client';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { useBoardBackgroundSettings } from '@/hooks/use-board-background-settings';
 import { toast } from 'sonner';
 import {
@@ -62,12 +63,13 @@ export function BoardBackgroundModal({ open, onOpenChange }: BoardBackgroundModa
   // Update preview image when background settings change
   useEffect(() => {
     if (currentProject && backgroundSettings.imagePath) {
-      const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
       // Add cache-busting query parameter to force browser to reload image
-      const cacheBuster = imageVersion ? `&v=${imageVersion}` : `&v=${Date.now()}`;
-      const imagePath = `${serverUrl}/api/fs/image?path=${encodeURIComponent(
-        backgroundSettings.imagePath
-      )}&projectPath=${encodeURIComponent(currentProject.path)}${cacheBuster}`;
+      const cacheBuster = imageVersion ?? Date.now().toString();
+      const imagePath = getAuthenticatedImageUrl(
+        backgroundSettings.imagePath,
+        currentProject.path,
+        cacheBuster
+      );
       setPreviewImage(imagePath);
     } else {
       setPreviewImage(null);

apps/ui/src/components/ui/description-image-dropzone.tsx

@@ -3,7 +3,7 @@ import { cn } from '@/lib/utils';
 import { ImageIcon, X, Loader2, FileText } from 'lucide-react';
 import { Textarea } from '@/components/ui/textarea';
 import { getElectronAPI } from '@/lib/electron';
-import { getServerUrlSync } from '@/lib/http-api-client';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { useAppStore, type FeatureImagePath, type FeatureTextFilePath } from '@/store/app-store';
 import {
   sanitizeFilename,
@@ -94,9 +94,8 @@ export function DescriptionImageDropZone({
   // Construct server URL for loading saved images
   const getImageServerUrl = useCallback(
     (imagePath: string): string => {
-      const serverUrl = import.meta.env.VITE_SERVER_URL || getServerUrlSync();
       const projectPath = currentProject?.path || '';
-      return `${serverUrl}/api/fs/image?path=${encodeURIComponent(imagePath)}&projectPath=${encodeURIComponent(projectPath)}`;
+      return getAuthenticatedImageUrl(imagePath, projectPath);
     },
     [currentProject?.path]
   );

apps/ui/src/components/views/board-view/hooks/use-board-background.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { useAppStore, defaultBackgroundSettings } from '@/store/app-store';
-import { getServerUrlSync } from '@/lib/http-api-client';
+import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 
 interface UseBoardBackgroundProps {
   currentProject: { path: string; id: string } | null;
@@ -22,14 +22,14 @@ export function useBoardBackground({ currentProject }: UseBoardBackgroundProps)
       return {};
     }
 
+    const imageUrl = getAuthenticatedImageUrl(
+      backgroundSettings.imagePath,
+      currentProject.path,
+      backgroundSettings.imageVersion
+    );
+
     return {
-      backgroundImage: `url(${
-        import.meta.env.VITE_SERVER_URL || getServerUrlSync()
-      }/api/fs/image?path=${encodeURIComponent(
-        backgroundSettings.imagePath
-      )}&projectPath=${encodeURIComponent(currentProject.path)}${
-        backgroundSettings.imageVersion ? `&v=${backgroundSettings.imageVersion}` : ''
-      })`,
+      backgroundImage: `url(${imageUrl})`,
       backgroundSize: 'cover',
       backgroundPosition: 'center',
       backgroundRepeat: 'no-repeat',

apps/ui/src/lib/api-fetch.ts

@@ -153,3 +153,37 @@ export async function apiDeleteRaw(
 ): Promise<Response> {
   return apiFetch(endpoint, 'DELETE', options);
 }
+
+/**
+ * Build an authenticated image URL for use in <img> tags or CSS background-image
+ * Adds authentication via query parameter since headers can't be set for image loads
+ *
+ * @param path - Image path
+ * @param projectPath - Project path
+ * @param version - Optional cache-busting version
+ * @returns Full URL with auth credentials
+ */
+export function getAuthenticatedImageUrl(
+  path: string,
+  projectPath: string,
+  version?: string | number
+): string {
+  const serverUrl = getServerUrl();
+  const params = new URLSearchParams({
+    path,
+    projectPath,
+  });
+
+  if (version !== undefined) {
+    params.set('v', String(version));
+  }
+
+  // Add auth credential as query param (needed for image loads that can't set headers)
+  const apiKey = getApiKey();
+  if (apiKey) {
+    params.set('apiKey', apiKey);
+  }
+  // Note: Session token auth relies on cookies which are sent automatically by the browser
+
+  return `${serverUrl}/api/fs/image?${params.toString()}`;
+}

apps/ui/tests/context/add-context-image.spec.ts

@@ -5,6 +5,7 @@
  */
 
 import { test, expect } from '@playwright/test';
+import { Buffer } from 'buffer';
 import * as fs from 'fs';
 import * as path from 'path';
 import {
@@ -118,21 +119,10 @@ test.describe('Add Context Image', () => {
 
   test('should import an image file to context', async ({ page }) => {
     await setupProjectWithFixture(page, getFixturePath());
-
+    await authenticateForTests(page);
     await page.goto('/');
     await waitForNetworkIdle(page);
 
-    // Check if we're on the login screen and authenticate if needed
-    const loginInput = page.locator('input[type="password"][placeholder*="API key"]');
-    const isLoginScreen = await loginInput.isVisible({ timeout: 2000 }).catch(() => false);
-    if (isLoginScreen) {
-      const apiKey = process.env.AUTOMAKER_API_KEY || 'test-api-key-for-e2e-tests';
-      await loginInput.fill(apiKey);
-      await page.locator('button:has-text("Login")').click();
-      await page.waitForURL('**/', { timeout: 5000 });
-      await waitForNetworkIdle(page);
-    }
-
     await navigateToContext(page);
 
     // Wait for the file input to be attached to the DOM before setting files

init.mjs

@@ -516,6 +516,7 @@ async function main() {
   console.log('═══════════════════════════════════════════════════════');
   console.log('  1) Web Application (Browser)');
   console.log('  2) Desktop Application (Electron)');
+  console.log('  3) Docker Container');
   console.log('═══════════════════════════════════════════════════════');
   console.log('');
 
@@ -533,7 +534,7 @@ async function main() {
 
   // Prompt for choice
   while (true) {
-    const choice = await prompt('Enter your choice (1 or 2): ');
+    const choice = await prompt('Enter your choice (1, 2, or 3): ');
 
     if (choice === '1') {
       console.log('');
@@ -634,9 +635,23 @@ async function main() {
         electronProcess.on('close', resolve);
       });
 
+      break;
+    } else if (choice === '3') {
+      console.log('');
+      log('Launching Docker Container...', 'blue');
+      console.log('');
+
+      // Run docker compose up --build via npm run dev:docker
+      const dockerProcess = runNpm(['run', 'dev:docker'], {
+        stdio: 'inherit',
+      });
+      await new Promise((resolve) => {
+        dockerProcess.on('close', resolve);
+      });
+
       break;
     } else {
-      log('Invalid choice. Please enter 1 or 2.', 'red');
+      log('Invalid choice. Please enter 1, 2, or 3.', 'red');
     }
   }
 }

package.json

@@ -45,7 +45,7 @@
     "test:server:coverage": "npm run test:cov --workspace=apps/server",
     "test:packages": "npm run test -w @automaker/types -w @automaker/utils -w @automaker/prompts -w @automaker/platform -w @automaker/model-resolver -w @automaker/dependency-resolver -w @automaker/git-utils --if-present",
     "test:all": "npm run test:packages && npm run test:server",
-    "lint:lockfile": "! grep -q 'git+ssh://' package-lock.json || (echo 'Error: package-lock.json contains git+ssh:// URLs. Run: git config --global url.\"https://github.com/\".insteadOf \"git@github.com:\"' && exit 1)",
+    "lint:lockfile": "node scripts/lint-lockfile.mjs",
     "format": "prettier --write .",
     "format:check": "prettier --check .",
     "prepare": "husky && npm run build:packages"

scripts/lint-lockfile.mjs

@@ -0,0 +1,33 @@
+#!/usr/bin/env node
+
+/**
+ * Script to check for git+ssh:// URLs in package-lock.json
+ * This ensures compatibility with CI/CD environments that don't support SSH.
+ */
+
+import { readFileSync } from 'fs';
+import { join } from 'path';
+
+const lockfilePath = join(process.cwd(), 'package-lock.json');
+
+try {
+  const content = readFileSync(lockfilePath, 'utf8');
+
+  // Check for git+ssh:// URLs
+  if (content.includes('git+ssh://')) {
+    console.error('Error: package-lock.json contains git+ssh:// URLs.');
+    console.error('Run: git config --global url."https://github.com/".insteadOf "git@github.com:"');
+    console.error('Or run: npm run fix:lockfile');
+    process.exit(1);
+  }
+
+  console.log('✓ No git+ssh:// URLs found in package-lock.json');
+  process.exit(0);
+} catch (error) {
+  if (error.code === 'ENOENT') {
+    console.error('Error: package-lock.json not found');
+    process.exit(1);
+  }
+  console.error('Error checking package-lock.json:', error.message);
+  process.exit(1);
+}