update remaining variable names for GeneratedCodeConfig

frontend/src/App.tsx

@@ -18,13 +18,7 @@ import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/ui/tabs";
 import SettingsDialog from "./components/SettingsDialog";
-import {
+import { AppState, CodeGenerationParams, EditorTheme, Settings } from "./types";
-  AppState,
-  CodeGenerationParams,
-  EditorTheme,
-  GeneratedCodeConfig,
-  Settings,
-} from "./types";
 import { IS_RUNNING_ON_CLOUD } from "./config";
 import { PicoBadge } from "./components/PicoBadge";
 import { OnboardingNote } from "./components/OnboardingNote";
@@ -40,6 +34,7 @@ import HistoryDisplay from "./components/history/HistoryDisplay";
 import { extractHistoryTree } from "./components/history/utils";
 import toast from "react-hot-toast";
 import ImportCodeSection from "./components/ImportCodeSection";
+import { Stack } from "./lib/stacks/types";
 
 const IS_OPENAI_DOWN = false;
 
@@ -60,7 +55,7 @@ function App() {
       screenshotOneApiKey: null,
       isImageGenerationEnabled: true,
       editorTheme: EditorTheme.COBALT,
-      generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND,
+      generatedCodeConfig: Stack.HTML_TAILWIND,
       // Only relevant for hosted version
       isTermOfServiceAccepted: false,
       accessCode: null,
@@ -85,7 +80,7 @@ function App() {
     if (!settings.generatedCodeConfig) {
       setSettings((prev) => ({
         ...prev,
-        generatedCodeConfig: GeneratedCodeConfig.HTML_TAILWIND,
+        generatedCodeConfig: Stack.HTML_TAILWIND,
       }));
     }
   }, [settings.generatedCodeConfig, setSettings]);
@@ -289,15 +284,14 @@ function App() {
     }));
   };
 
-  // TODO: Rename everything to "stack" instead of "config"
+  function setStack(stack: Stack) {
-  function setStack(stack: GeneratedCodeConfig) {
     setSettings((prev) => ({
       ...prev,
       generatedCodeConfig: stack,
     }));
   }
 
-  function importFromCode(code: string, stack: GeneratedCodeConfig) {
+  function importFromCode(code: string, stack: Stack) {
     setIsImportedFromCode(true);
 
     // Set up this project
@@ -333,8 +327,8 @@ function App() {
           </div>
 
           <OutputSettingsSection
-            generatedCodeConfig={settings.generatedCodeConfig}
+            stack={settings.generatedCodeConfig}
-            setGeneratedCodeConfig={(config) => setStack(config)}
+            setStack={(config) => setStack(config)}
             shouldDisableUpdates={
               appState === AppState.CODING || appState === AppState.CODE_READY
             }

frontend/src/components/ImportCodeSection.tsx

@@ -11,18 +11,16 @@ import {
 } from "./ui/dialog";
 import { Textarea } from "./ui/textarea";
 import OutputSettingsSection from "./OutputSettingsSection";
-import { GeneratedCodeConfig } from "../types";
 import toast from "react-hot-toast";
+import { Stack } from "../lib/stacks/types";
 
 interface Props {
-  importFromCode: (code: string, stack: GeneratedCodeConfig) => void;
+  importFromCode: (code: string, stack: Stack) => void;
 }
 
 function ImportCodeSection({ importFromCode }: Props) {
   const [code, setCode] = useState("");
-  const [stack, setStack] = useState<GeneratedCodeConfig | undefined>(
+  const [stack, setStack] = useState<Stack | undefined>(undefined);
-    undefined
-  );
 
   const doImport = () => {
     if (code === "") {
@@ -57,10 +55,8 @@ function ImportCodeSection({ importFromCode }: Props) {
         />
 
         <OutputSettingsSection
-          generatedCodeConfig={stack}
+          stack={stack}
-          setGeneratedCodeConfig={(config: GeneratedCodeConfig) =>
+          setStack={(config: Stack) => setStack(config)}
-            setStack(config)
-          }
           label="Stack:"
           shouldDisableUpdates={false}
         />

frontend/src/components/OutputSettingsSection.tsx

@@ -7,10 +7,10 @@ import {
   SelectTrigger,
 } from "./ui/select";
 import { Badge } from "./ui/badge";
-import { GeneratedCodeConfig } from "../lib/stacks/types";
+import { Stack } from "../lib/stacks/types";
 import { STACK_DESCRIPTIONS } from "../lib/stacks/descriptions";
 
-function generateDisplayComponent(stack: GeneratedCodeConfig) {
+function generateDisplayComponent(stack: Stack) {
   const stackComponents = STACK_DESCRIPTIONS[stack].components;
 
   return (
@@ -26,15 +26,15 @@ function generateDisplayComponent(stack: GeneratedCodeConfig) {
 }
 
 interface Props {
-  generatedCodeConfig: GeneratedCodeConfig | undefined;
+  stack: Stack | undefined;
-  setGeneratedCodeConfig: (config: GeneratedCodeConfig) => void;
+  setStack: (config: Stack) => void;
   label?: string;
   shouldDisableUpdates?: boolean;
 }
 
 function OutputSettingsSection({
-  generatedCodeConfig,
+  stack,
-  setGeneratedCodeConfig,
+  setStack,
   label = "Generating:",
   shouldDisableUpdates = false,
 }: Props) {
@@ -43,20 +43,16 @@ function OutputSettingsSection({
       <div className="grid grid-cols-3 items-center gap-4">
         <span>{label}</span>
         <Select
-          value={generatedCodeConfig}
+          value={stack}
-          onValueChange={(value: string) =>
+          onValueChange={(value: string) => setStack(value as Stack)}
-            setGeneratedCodeConfig(value as GeneratedCodeConfig)
-          }
           disabled={shouldDisableUpdates}
         >
           <SelectTrigger className="col-span-2" id="output-settings-js">
-            {generatedCodeConfig
+            {stack ? generateDisplayComponent(stack) : "Select a stack"}
-              ? generateDisplayComponent(generatedCodeConfig)
-              : "Select a stack"}
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
-              {Object.values(GeneratedCodeConfig).map((stack) => (
+              {Object.values(Stack).map((stack) => (
                 <SelectItem value={stack}>
                   <div className="flex items-center">
                     {generateDisplayComponent(stack)}

frontend/src/lib/stacks/descriptions.ts

@@ -1,7 +1,7 @@
-import { GeneratedCodeConfig } from "./types";
+import { Stack } from "./types";
 
 export const STACK_DESCRIPTIONS: {
-  [key in GeneratedCodeConfig]: { components: string[]; inBeta: boolean };
+  [key in Stack]: { components: string[]; inBeta: boolean };
 } = {
   html_tailwind: { components: ["HTML", "Tailwind"], inBeta: false },
   react_tailwind: { components: ["React", "Tailwind"], inBeta: false },

frontend/src/lib/stacks/types.ts

@@ -1,5 +1,5 @@
 // Keep in sync with backend (prompts/types.py)
-export enum GeneratedCodeConfig {
+export enum Stack {
   HTML_TAILWIND = "html_tailwind",
   REACT_TAILWIND = "react_tailwind",
   BOOTSTRAP = "bootstrap",

frontend/src/types.ts

@@ -1,4 +1,4 @@
-import { GeneratedCodeConfig } from "./lib/stacks/types";
+import { Stack } from "./lib/stacks/types";
 
 export enum EditorTheme {
   ESPRESSO = "espresso",
@@ -11,7 +11,7 @@ export interface Settings {
   screenshotOneApiKey: string | null;
   isImageGenerationEnabled: boolean;
   editorTheme: EditorTheme;
-  generatedCodeConfig: GeneratedCodeConfig;
+  generatedCodeConfig: Stack;
   // Only relevant for hosted version
   isTermOfServiceAccepted: boolean;
   accessCode: string | null;
@@ -32,4 +32,3 @@ export interface CodeGenerationParams {
 }
 
 export type FullGenerationSettings = CodeGenerationParams & Settings;
-export { GeneratedCodeConfig };