Fix bugs and add features

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/context-pills/image-pill.tsx

@@ -10,14 +10,16 @@ export const ImagePill = React.forwardRef<
     {
         context: ImageMessageContext;
         onRemove: () => void;
+        onSave?: () => void;
     }
->(({ context, onRemove }, ref) => {
+>(({ context, onRemove, onSave }, ref) => {
     if (context.type !== MessageContextType.IMAGE) {
         console.warn('ImagePill received non-image context');
         return null;
     }
 
     const isVideo = isVideoFile(context.mimeType);
+    const canSave = context.source === 'external' && !!onSave;
 
     return (
         <motion.span
@@ -36,7 +38,6 @@ export const ImagePill = React.forwardRef<
             key={context.displayName}
             ref={ref}
         >
-            {/* Left side: Image/Video thumbnail */}
             <div className="w-7 h-7 flex items-center justify-center overflow-hidden relative">
                 {isVideo ? (
                     <video
@@ -55,12 +56,23 @@ export const ImagePill = React.forwardRef<
                 <div className="absolute inset-0 border-l-[1px] border-y-[1px] rounded-l-md border-white/10 pointer-events-none" />
             </div>
 
-            {/* Right side: Filename */}
             <span className="text-xs overflow-hidden whitespace-nowrap text-ellipsis max-w-[100px] pr-1">
                 {getTruncatedName(context)}
             </span>
 
-            {/* Hover X button */}
+            {canSave && (
+                <button
+                    onClick={(e) => {
+                        e.preventDefault();
+                        e.stopPropagation();
+                        onSave();
+                    }}
+                    className="absolute -top-1.5 -left-1.5 w-6 h-6 p-1 rounded-full bg-primary flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-200 cursor-pointer"
+                >
+                    <Icons.Download className="w-2.5 h-2.5 text-primary-foreground" />
+                </button>
+            )}
+
             <button
                 onClick={(e) => {
                     e.preventDefault();

apps/web/client/src/app/project/[id]/_components/right-panel/chat-tab/context-pills/input-context-pills.tsx

@@ -1,7 +1,9 @@
 import { useEditorEngine } from '@/components/store/editor';
+import { DefaultSettings } from '@onlook/constants';
 import type { ImageMessageContext, MessageContext } from '@onlook/models/chat';
 import { MessageContextType } from '@onlook/models/chat';
-import { assertNever } from '@onlook/utility';
+import { toast } from '@onlook/ui/sonner';
+import { assertNever, sanitizeFilename } from '@onlook/utility';
 import { observer } from 'mobx-react-lite';
 import { AnimatePresence } from 'motion/react';
 import { useMemo } from 'react';
@@ -17,6 +19,31 @@ const typeOrder = {
     [MessageContextType.IMAGE]: 5,
 };
 
+const mimeExtensionMap: Record<string, string> = {
+    'image/jpeg': 'jpg',
+    'image/png': 'png',
+    'image/webp': 'webp',
+    'image/gif': 'gif',
+    'image/svg+xml': 'svg',
+    'image/bmp': 'bmp',
+    'image/x-icon': 'ico',
+    'video/mp4': 'mp4',
+    'video/webm': 'webm',
+};
+
+const getExtensionFromMimeType = (mimeType: string) => {
+    return mimeExtensionMap[mimeType] ?? 'png';
+};
+
+const getSanitizedFileName = (displayName: string, mimeType: string) => {
+    const sanitizedName = sanitizeFilename(displayName || `chat-image-${Date.now()}`);
+    if (sanitizedName.includes('.')) {
+        return sanitizedName;
+    }
+    const extension = getExtensionFromMimeType(mimeType);
+    return `${sanitizedName}.${extension}`;
+};
+
 const getStableKey = (context: MessageContext, index: number): string => {
     switch (context.type) {
         case MessageContextType.FILE:
@@ -46,6 +73,55 @@ export const InputContextPills = observer(() => {
         editorEngine.chat.context.context = newContext;
     };
 
+    const handleSaveImageContext = async (imageContext: ImageMessageContext) => {
+        if (imageContext.source === 'local' && imageContext.path) {
+            toast.success('Image already exists in project assets');
+            return;
+        }
+
+        try {
+            const destinationFolder = `${DefaultSettings.IMAGE_FOLDER}/images`;
+            const fileName = getSanitizedFileName(imageContext.displayName, imageContext.mimeType);
+
+            let targetPath = `${destinationFolder}/${fileName}`;
+            let counter = 1;
+
+            while (await editorEngine.activeSandbox.fileExists(targetPath)) {
+                const lastDotIndex = fileName.lastIndexOf('.');
+                const baseName =
+                    lastDotIndex > 0 ? fileName.slice(0, lastDotIndex) : fileName;
+                const extension =
+                    lastDotIndex > 0 ? fileName.slice(lastDotIndex) : '';
+                targetPath = `${destinationFolder}/${baseName}-${counter}${extension}`;
+                counter += 1;
+            }
+
+            const imageResponse = await fetch(imageContext.content);
+            const imageBuffer = await imageResponse.arrayBuffer();
+            const imageData = new Uint8Array(imageBuffer);
+
+            await editorEngine.activeSandbox.writeFile(targetPath, imageData);
+
+            const savedImageName = targetPath.split('/').pop() ?? fileName;
+            const updatedImageContext: ImageMessageContext = {
+                ...imageContext,
+                source: 'local',
+                path: targetPath,
+                branchId: editorEngine.branches.activeBranch.id,
+                displayName: savedImageName,
+            };
+
+            editorEngine.chat.context.context = editorEngine.chat.context.context.map((context) =>
+                context === imageContext ? updatedImageContext : context,
+            );
+
+            toast.success(`Saved image to ${targetPath}`);
+        } catch (error) {
+            console.error('Failed to save image to project assets:', error);
+            toast.error('Failed to save image to project assets');
+        }
+    };
+
     const sortedContexts = useMemo(() => {
         return [...editorEngine.chat.context.context]
             .sort((a, b) => {
@@ -64,6 +140,7 @@ export const InputContextPills = observer(() => {
                             <ImagePill
                                 key={key}
                                 context={context as ImageMessageContext}
+                                onSave={() => void handleSaveImageContext(context as ImageMessageContext)}
                                 onRemove={() => handleRemoveContext(context)}
                             />
                         );

apps/web/client/src/app/projects/import/github/_hooks/use-repo-import.ts

@@ -38,10 +38,15 @@ export const useRepositoryImport = () => {
                 project: {
                     name: selectedRepo.name ?? 'New project',
                     description: selectedRepo.description || 'Imported from GitHub',
+                    tags: ['github-import'],
                 },
                 userId: user.id,
                 sandboxId,
                 sandboxUrl: previewUrl,
+                git: {
+                    repoUrl: selectedRepo.clone_url,
+                    baseBranch: selectedRepo.default_branch,
+                },
             });
 
             if (!project) {

apps/web/client/src/app/projects/import/page.tsx

@@ -1,68 +1,94 @@
 'use client';
 
 import { useGetBackground } from '@/hooks/use-get-background';
+import { Routes } from '@/utils/constants';
 import { Card, CardDescription, CardHeader, CardTitle } from '@onlook/ui/card';
 import { Icons } from '@onlook/ui/icons';
 import { useRouter } from 'next/navigation';
 import { TopBar } from '../_components/top-bar';
 
+type ImportType = 'local' | 'github' | 'figma';
+
+const importCards: {
+    type: ImportType;
+    title: string;
+    description: string;
+    icon: React.ReactNode;
+    ariaLabel: string;
+}[] = [
+    {
+        type: 'local',
+        title: 'Import a Local Project',
+        description:
+            'Select a directory from your computer to start working with your project in Pixelraft.',
+        icon: <Icons.Upload className="w-6 h-6 text-primary" />,
+        ariaLabel: 'Import local project',
+    },
+    {
+        type: 'github',
+        title: 'Import from GitHub',
+        description:
+            'Connect your GitHub account to import repositories and create pull requests from Pixelraft.',
+        icon: <Icons.GitHubLogo className="w-6 h-6 text-primary" />,
+        ariaLabel: 'Import from GitHub',
+    },
+    {
+        type: 'figma',
+        title: 'Import from Figma',
+        description:
+            'Paste a Figma file URL to generate a Pixelraft-ready starter project and synced design metadata.',
+        icon: <Icons.Layout className="w-6 h-6 text-primary" />,
+        ariaLabel: 'Import from Figma',
+    },
+];
+
+const importPathMap: Record<ImportType, string> = {
+    local: `${Routes.IMPORT_PROJECT}/local`,
+    github: Routes.IMPORT_GITHUB,
+    figma: Routes.IMPORT_FIGMA,
+};
+
 const Page = () => {
     const router = useRouter();
-    const handleCardClick = (type: 'local' | 'github') => {
-        router.push(`/projects/import/${type}`);
-    };
     const backgroundUrl = useGetBackground('create');
 
+    const handleCardClick = (type: ImportType) => {
+        router.push(importPathMap[type]);
+    };
 
     return (
-        <div className="w-screen h-screen flex flex-col"
+        <div
+            className="w-screen h-screen flex flex-col"
             style={{
                 backgroundSize: 'cover',
                 backgroundPosition: 'center',
                 backgroundImage: `url(${backgroundUrl})`,
             }}
         >
             <TopBar />
-            <div className="flex items-center justify-center overflow-hidden max-w-4xl mx-auto w-full flex-1 gap-6 p-6 select-none">
-                <Card
-                    className={`w-full h-64 cursor-pointer transition-all duration-200 bg-background/80 backdrop-blur-xl hover:shadow-lg hover:scale-[1.02] border-[0.5px] border-foreground-tertiary/50`}
-                    onClick={() => handleCardClick('local')}
-                    tabIndex={0}
-                    role="button"
-                    aria-label="Import local project"
-                >
-                    <CardHeader className="flex flex-col justify-between h-full">
-                        <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center select-none">
-                            <Icons.Upload className="w-6 h-6 text-primary" />
-                        </div>
-                        <div className="space-y-2">
-                            <CardTitle className="text-title3">Import a Local Project</CardTitle>
-                            <CardDescription className="text-sm text-balance">
-                                Select a directory from your computer to start working with your project in Onlook.
-                            </CardDescription>
-                        </div>
-                    </CardHeader>
-                </Card>
-                {/* Temporary disabled */}
-                <Card
-                    className={'w-full h-64 cursor-pointer transition-all duration-200 bg-background/80 backdrop-blur-xl hover:shadow-lg hover:scale-[1.02] border-[0.5px] border-foreground-tertiary/50 cursor-not-allowed opacity-60'}
-                    onClick={() => false && handleCardClick('github')}
-                    tabIndex={0}
-                    role="button"
-                    aria-label="Connect to GitHub"
-                >
-                    <CardHeader className="flex flex-col justify-between h-full">
-                        <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center select-none">
-                            <Icons.GitHubLogo className="w-6 h-6 text-primary" />
-                        </div>
-                        <div className="space-y-2">
-                            <CardTitle className="text-title3">Import from GitHub</CardTitle>
-                            <CardDescription className="text-sm text-balance">
-                                Connect your GitHub account to access and work with your repositories
-                            </CardDescription>
-                        </div>
-                    </CardHeader>
-                </Card>
+            <div className="flex items-center justify-center overflow-hidden max-w-6xl mx-auto w-full flex-1 gap-6 p-6 select-none">
+                {importCards.map((card) => (
+                    <Card
+                        key={card.type}
+                        className="w-full h-64 cursor-pointer transition-all duration-200 bg-background/80 backdrop-blur-xl hover:shadow-lg hover:scale-[1.02] border-[0.5px] border-foreground-tertiary/50"
+                        onClick={() => handleCardClick(card.type)}
+                        tabIndex={0}
+                        role="button"
+                        aria-label={card.ariaLabel}
+                    >
+                        <CardHeader className="flex flex-col justify-between h-full">
+                            <div className="w-12 h-12 rounded-lg bg-primary/10 flex items-center justify-center select-none">
+                                {card.icon}
+                            </div>
+                            <div className="space-y-2">
+                                <CardTitle className="text-title3">{card.title}</CardTitle>
+                                <CardDescription className="text-sm text-balance">
+                                    {card.description}
+                                </CardDescription>
+                            </div>
+                        </CardHeader>
+                    </Card>
+                ))}
             </div>
         </div>
     );

apps/web/client/src/server/api/root.ts

@@ -15,6 +15,7 @@ import {
     userCanvasRouter,
     userRouter,
     utilsRouter,
+    workspaceRouter,
 } from './routers';
 import { branchRouter } from './routers/project/branch';
 
@@ -37,6 +38,7 @@ export const appRouter = createTRPCRouter({
     member: memberRouter,
     domain: domainRouter,
     github: githubRouter,
+    workspace: workspaceRouter,
     subscription: subscriptionRouter,
     usage: usageRouter,
     publish: publishRouter,