🤖 feat: improve workspace creation UX with generating state (#842)

Improves the UX when creating a new workspace and an LLM is generating
the workspace name.

## Changes

- Changed spinner message from 'Creating workspace...' to 'Generating
workspace name...'
- Show a dimmed, italicized preview of the user's prompt (in quotes)
above the spinner
- Dim the input section (50% opacity) while generating
- Truncate long prompts to 150 chars with ellipsis for clean display

_Generated with `mux`_

Author: ibetitsmike

src/browser/components/ChatInput/CreationCenterContent.tsx

@@ -3,23 +3,35 @@ 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">
-          <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>
+      {props.isSending ? (
+        <div className="max-w-xl px-8 text-center">
+          <div className="bg-accent mb-4 inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent"></div>
+          <h2 className="text-foreground mb-2 text-lg font-medium">Creating workspace</h2>
+          {truncatedPreview && (
+            <p className="text-muted text-sm leading-relaxed">
+              Generating name for &ldquo;{truncatedPreview}&rdquo;
+            </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">