🤖 feat: improve workspace creation UX with generating state

- Change spinner message from 'Creating workspace...' to 'Generating workspace name...'
- Show dimmed preview of user's prompt in quotes above spinner
- Dim the input section (50% opacity) when generating
- Truncate long prompts to 150 chars with ellipsis

_Generated with mux_

Author: ibetitsmike

src/browser/components/ChatInput/CreationCenterContent.tsx

@@ -3,23 +3,36 @@ import React from "react";
 interface CreationCenterContentProps {
   projectName: string;
   isSending: boolean;
+  inputPreview?: string;
 }
 
 /**
  * Center content displayed during workspace creation
- * Shows either a loading spinner or welcome message
+ * Shows either a loading state with the user's prompt or welcome message
  */
-export function CreationCenterContent({ projectName, isSending }: CreationCenterContentProps) {
+export function CreationCenterContent(props: CreationCenterContentProps) {
+  // Truncate long prompts for preview display
+  const truncatedPreview =
+    props.inputPreview && props.inputPreview.length > 150
+      ? props.inputPreview.slice(0, 150) + "..."
+      : props.inputPreview;
+
   return (
     <div className="flex flex-1 items-center justify-center">
-      {isSending ? (
-        <div className="text-center">
+      {props.isSending ? (
+        <div className="max-w-xl px-8 text-center">
+          {/* Show dimmed prompt preview */}
+          {truncatedPreview && (
+            <p className="text-muted/60 mb-6 text-sm leading-relaxed italic">
+              &ldquo;{truncatedPreview}&rdquo;
+            </p>
+          )}
           <div className="bg-accent mb-3 inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
-          <p className="text-muted text-sm">Creating workspace...</p>
+          <p className="text-muted text-sm">Generating workspace name...</p>
         </div>
       ) : (
         <div className="max-w-2xl px-8 text-center">
-          <h1 className="text-foreground mb-4 text-2xl font-semibold">{projectName}</h1>
+          <h1 className="text-foreground mb-4 text-2xl font-semibold">{props.projectName}</h1>
           <p className="text-muted text-sm leading-relaxed">
             Describe what you want to build. A new workspace will be created with an automatically
             generated branch name. Configure runtime and model options below.

src/browser/components/ChatInput/index.tsx

@@ -971,12 +971,16 @@ export const ChatInput: React.FC<ChatInputProps> = (props) => {
         <CreationCenterContent
           projectName={props.projectName}
           isSending={creationState.isSending || isSending}
+          inputPreview={creationState.isSending || isSending ? input : undefined}
         />
       )}
 
-      {/* Input section */}
+      {/* Input section - dim when creating workspace */}
       <div
-        className="bg-separator border-border-light relative flex flex-col gap-1 border-t px-[15px] pt-[5px] pb-[15px]"
+        className={cn(
+          "bg-separator border-border-light relative flex flex-col gap-1 border-t px-[15px] pt-[5px] pb-[15px]",
+          variant === "creation" && (creationState.isSending || isSending) && "opacity-50"
+        )}
         data-component="ChatInputSection"
       >
         <div className="mx-auto w-full max-w-4xl">