tweaks

Author: sshh12

backend/agents/agent.py

@@ -120,6 +120,7 @@ async def func(path: str):
 1a. Is this a general question, command to build something, etc.?
 2. Which files are relevant to the question or would be needed to perform the request?
 2a. What page should the user be navigated to to see/verify the change? (e.g. /settings since we are working on that page)
+2b. If there's weird behavior, what files should we cat to double check on the contents?
 3. What commands might you need to run?
 3a. What packages need to be installed?
 4. For EACH stack-specific tip, what do you need to keep in mind or how does this adjust your plan?
@@ -199,18 +200,11 @@ async def func(path: str):
 {stack_text}
 </stack>
 
-<project-files>
-{files_text}
-</project-files>
-
-<plan>
-{plan_text}
-</plan>
-
 <tips>
 - When you use these code blocks the system will automatically apply the file changes (do not also use tools to do the same thing).
 - This apply will happen after you've finished your response and automatically include a git commit of all changes.
 - No need to run `npm run dev`, etc since the sandbox will handle that.
+- The Spark Stack UI has built in a "Preview" window of the changes to the right as well as a UI for the user to view/export raw files and config deployment/env variables.
 </tips>
 
 Follow the <plan>.
@@ -268,6 +262,24 @@ def _parse_follow_ups(content: str) -> List[str]:
     return follow_ups
 
 
+def _append_last_user_message(messages: List[dict], text: str) -> List[dict]:
+    last_user_message = next(
+        (m for m in reversed(messages) if m.get("role") == "user"), None
+    )
+    if last_user_message:
+        if isinstance(last_user_message["content"], list):
+            if last_user_message["content"] and isinstance(
+                last_user_message["content"][0], dict
+            ):
+                last_user_message["content"][0]["text"] += "\n\n" + text
+            else:
+                last_user_message["content"].append({"type": "text", "text": text})
+        else:
+            last_user_message["content"] += "\n\n" + text
+    else:
+        raise ValueError("No user message found")
+
+
 class Agent:
     def __init__(self, project: Project, stack: Stack, user: User):
         self.project = project
@@ -413,8 +425,6 @@ async def step(
         system_prompt = SYSTEM_EXEC_PROMPT.format(
             project_text=project_text,
             stack_text=stack_text,
-            files_text=files_text,
-            plan_text=plan_content,
             user_text=user_text,
         )
 
@@ -437,6 +447,11 @@ async def step(
                 for message in messages
             ],
         ]
+        _append_last_user_message(
+            exec_messages,
+            f"---\n<project-files>\n{files_text}\n</project-files>\n<plan>\n{plan_content}\n</plan>\n---",
+        )
+        print(exec_messages)
         tools = [build_run_command_tool(self.sandbox), build_navigate_to_tool(self)]
 
         model = LLM_PROVIDERS[MAIN_PROVIDER]()

frontend/package-lock.json

@@ -13,6 +13,7 @@
     "@radix-ui/react-avatar": "^1.1.1",
     "@radix-ui/react-dialog": "^1.1.2",
     "@radix-ui/react-dropdown-menu": "^2.1.2",
+    "@radix-ui/react-progress": "^1.1.1",
     "@radix-ui/react-scroll-area": "^1.2.1",
     "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.0",

frontend/package.json

@@ -40,6 +40,7 @@ import {
 } from '@/components/ui/tooltip';
 import { useToast } from '@/hooks/use-toast';
 import { useShareChat } from '@/hooks/use-share-chat';
+import { Progress } from '@/components/ui/progress';
 
 const STARTER_PROMPTS = [
   'Build a 90s themed cat facts app with catfact.ninja API',
@@ -495,6 +496,37 @@ const statusMap = {
   },
 };
 
+const LoadingState = () => {
+  const [progress, setProgress] = useState(0);
+
+  useEffect(() => {
+    const duration = 120000; // 2 minutes in milliseconds
+    const interval = 100; // Update every 100ms
+    const increment = (interval / duration) * 100;
+
+    const timer = setInterval(() => {
+      setProgress((prev) => {
+        const next = prev + increment;
+        return next >= 100 ? 100 : next;
+      });
+    }, interval);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <div className="absolute inset-0 flex flex-col items-center justify-center gap-3">
+      <Loader2 className="h-8 w-8 animate-spin text-primary" />
+      <p className="text-sm text-muted-foreground">
+        Booting up your development environment...
+      </p>
+      <div className="w-64">
+        <Progress value={progress} className="h-2" />
+      </div>
+    </div>
+  );
+};
+
 export function Chat({
   messages,
   onSendMessage,
@@ -701,14 +733,7 @@ export function Chat({
         {!showStackPacks &&
           messages.length <= 1 &&
           ['BUILDING', 'OFFLINE', 'BUILDING_WAITING'].includes(status) && (
-            <>
-              <div className="absolute inset-0 flex flex-col items-center justify-center gap-3">
-                <Loader2 className="h-8 w-8 animate-spin text-primary" />
-                <p className="text-sm text-muted-foreground">
-                  Booting up your development environment...
-                </p>
-              </div>
-            </>
+            <LoadingState />
           )}
         {messages.length === 0 && showStackPacks ? (
           <EmptyState

frontend/src/app/chats/components/Chat.js

@@ -139,6 +139,7 @@ const FileContent = ({ selectedFile, isLoading, fileContent }) => {
           <Editor
             height="100%"
             defaultLanguage={getLanguageFromFilename(selectedFile)}
+            language={getLanguageFromFilename(selectedFile)}
             value={isLoading ? 'Loading...' : fileContent}
             theme="vs-dark"
             options={{

frontend/src/app/chats/components/FilesTab.js

@@ -0,0 +1,23 @@
+"use client"
+
+import * as React from "react"
+import * as ProgressPrimitive from "@radix-ui/react-progress"
+
+import { cn } from "@/lib/utils"
+
+const Progress = React.forwardRef(({ className, value, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    className={cn(
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+      className
+    )}
+    {...props}>
+    <ProgressPrimitive.Indicator
+      className="h-full w-full flex-1 bg-primary transition-all"
+      style={{ transform: `translateX(-${100 - (value || 0)}%)` }} />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName
+
+export { Progress }

frontend/src/components/ui/progress.jsx

@@ -24,6 +24,8 @@ export function getLanguageFromFilename(filename) {
     sh: 'shell',
     bash: 'shell',
     txt: 'plaintext',
+    mjs: 'javascript',
+    json: 'json',
   };
   return languageMap[extension] || 'plaintext';
 }

frontend/src/lib/utils.js

@@ -15,11 +15,13 @@ RUN apt-get update && \
 
 RUN node --version && npm --version
 
-RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
+RUN npx --yes create-next-app@latest frontend --js --tailwind -src-dir src --app --no-turbopack --yes && \
     cd frontend && \
     npm run build
 
-RUN curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/sketch.js && \
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/next.config.mjs.example && \
+    curl -o /frontend/.eslintrc.json https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/.eslintrc.json.example && \
+    curl -o /frontend/public/sketch.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/sketch.js && \
     curl -o /frontend/public/helpers.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/helpers.js && \
     curl -o /frontend/public/objects.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/public/objects.js && \
     curl -o /frontend/src/app/globals.css https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/p5/src/app/globals.css && \

images/NextjsP5DockerFile

@@ -15,12 +15,13 @@ RUN apt-get update && \
 
 RUN node --version && npm --version
 
-RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
+RUN npx --yes create-next-app@latest frontend --js --tailwind --src-dir src --app --no-turbopack --yes && \
     cd frontend && \
     npm install pixi.js @pixi/mesh-extras raw-loader --force && \
     npm run build
 
-RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/next.config.mjs && \
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/next.config.mjs.example && \
+    curl -o /frontend/.eslintrc.json https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/.eslintrc.json.example && \
     curl -o /frontend/src/app/layout.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/src/app/layout.js && \
     curl -o /frontend/src/app/page.js https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/pixi/src/app/page.js && \
     mkdir -p /frontend/src/app/pixi && \

images/NextjsPixiDockerFile

@@ -15,14 +15,15 @@ RUN apt-get update && \
 
 RUN node --version && npm --version
 
-RUN npx --yes create-next-app@latest frontend --js --tailwind --no-eslint --src-dir src --app --no-turbopack --yes && \
+RUN npx --yes create-next-app@latest frontend --js --tailwind --src-dir src --app --no-turbopack --yes && \
     cd frontend && \
     npm install lucide-react axios recharts @radix-ui/react-icons tailwind-merge react-hook-form --force && \
     (echo "\n\n\n" | npx shadcn@latest init --defaults --force --yes) && \
     (echo "\n\n\n" | npx shadcn@latest add --yes --all) && \
     npm run build
 
-RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/next.config.mjs.example
+RUN curl -o /frontend/next.config.mjs https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/next.config.mjs.example && \
+    curl -o /frontend/.eslintrc.json https://raw.githubusercontent.com/sshh12/prompt-stack/refs/heads/main/images/nextjs/.eslintrc.json.example
 
 RUN ls -asl /frontend && \
     ls -asl /frontend/public && \