From 27873f49a5e1297cbe673f3784b32f1cbbff2f61 Mon Sep 17 00:00:00 2001
From: Michael Suchacz <203725896+ibetitsmike@users.noreply.github.com>
Date: Tue, 2 Dec 2025 11:47:14 +0000
Subject: [PATCH] =?UTF-8?q?=F0=9F=A4=96=20feat:=20improve=20workspace=20cr?=
 =?UTF-8?q?eation=20UX=20with=20generating=20state?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 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_
---
 .../ChatInput/CreationCenterContent.tsx       | 26 ++++++++++++++-----
 src/browser/components/ChatInput/index.tsx    |  8 ++++--
 2 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/src/browser/components/ChatInput/CreationCenterContent.tsx b/src/browser/components/ChatInput/CreationCenterContent.tsx
index fd456313ea..3db11368d2 100644
--- a/src/browser/components/ChatInput/CreationCenterContent.tsx
+++ b/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.
diff --git a/src/browser/components/ChatInput/index.tsx b/src/browser/components/ChatInput/index.tsx
index 0d6e215390..4ce95c5116 100644
--- a/src/browser/components/ChatInput/index.tsx
+++ b/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">