[Improve] Share product tips while task environments start

apps/web/src/app/(sandbox)/task/[taskId]/LiveContent.tsx

@@ -32,6 +32,7 @@ import { ConnectionStatusBanner } from './ErrorFallback';
 import { PendingUserInputRequestStateProvider } from './PendingUserInputRequestPanel';
 import { TaskInputStack } from './TaskInputStack';
 import { OnboardingCompletionMessage } from './OnboardingCompletionMessage';
+import { ProductTips, Startup } from './startup';
 
 interface LiveContentProps {
   session: TaskSession;
@@ -89,6 +90,8 @@ function LiveContentInner({
   }, [onTaskPhaseChange, taskPhase]);
 
   const asleep = isTaskRunAsleep(session.taskRun);
+  const bootingTaskRun =
+    session.sessionState === 'booting' ? session.taskRun : null;
 
   const [messagesInitialScrollBehavior, setMessagesInitialScrollBehavior] =
     useState<'smooth' | 'instant'>('smooth');
@@ -251,11 +254,33 @@ function LiveContentInner({
                   scrollRef={messagesRef}
                   initialScrollBehavior={messagesInitialScrollBehavior}
                   footer={
-                    session.onboardingEnvironment ? (
-                      <OnboardingCompletionMessage
-                        environment={session.onboardingEnvironment}
-                      />
-                    ) : undefined
+                    <>
+                      {session.onboardingEnvironment && (
+                        <OnboardingCompletionMessage
+                          environment={session.onboardingEnvironment}
+                        />
+                      )}
+                      {bootingTaskRun && (
+                        <>
+                          <Startup
+                            runId={bootingTaskRun.id}
+                            taskId={session.taskId}
+                            initialTaskRun={bootingTaskRun}
+                            prompt={
+                              session.prompt &&
+                              session.prompt.visibleInTranscript !== false
+                                ? {
+                                    text: session.prompt.text,
+                                    images: session.prompt.images,
+                                  }
+                                : null
+                            }
+                            onStatusChange={onBootStatusChange}
+                          />
+                          <ProductTips />
+                        </>
+                      )}
+                    </>
                   }
                 />
                 <div className="mx-auto w-full overflow-clip rounded-t-md bg-card @[56rem]:rounded-t-lg transition-colors border-2 border-background rounded-b-3xl">
@@ -265,7 +290,6 @@ function LiveContentInner({
                       promptInputRef={promptInputRef}
                       onFileSearchOpen={handleFileSearchOpen}
                       onCommandSearchOpen={handleCommandSearchOpen}
-                      onBootStatusChange={onBootStatusChange}
                       scrollToBottom={scrollToBottom}
                     />
                   </PendingUserInputRequestStateProvider>

apps/web/src/app/(sandbox)/task/[taskId]/TaskInputStack.tsx

@@ -10,7 +10,6 @@ import {
 import { PendingEnvVarRequestPanel } from './PendingEnvVarRequestPanel';
 import { PromptInput, type PromptInputHandle } from './prompt-input';
 import { QueuedMessages } from './QueuedMessages';
-import { Startup } from './startup';
 import { ActiveSubtasksList } from './ActiveSubtasksList';
 import { TodoList } from './TodoList';
 
@@ -19,22 +18,19 @@ export function TaskInputStack({
   promptInputRef,
   onFileSearchOpen,
   onCommandSearchOpen,
-  onBootStatusChange,
   scrollToBottom,
 }: {
   session: TaskSession;
   promptInputRef: { current: PromptInputHandle | null };
   onFileSearchOpen: (insertPosition?: number) => void;
   onCommandSearchOpen: (insertPosition?: number) => void;
-  onBootStatusChange?: () => void;
   scrollToBottom: () => void;
 }) {
   const { shouldHidePromptInput } = usePendingUserInputRequestState();
   const [visibleEnvVarRequestKey, setVisibleEnvVarRequestKey] = useState<
     string | null
   >(null);
-  const bootingTaskRun =
-    session.sessionState === 'booting' ? session.taskRun : null;
+  const isBooting = session.sessionState === 'booting';
 
   useEffect(() => {
     setVisibleEnvVarRequestKey(null);
@@ -53,24 +49,7 @@ export function TaskInputStack({
         onVisibleRequestKeyChange={setVisibleEnvVarRequestKey}
       />
       <QueuedMessages />
-      {bootingTaskRun ? (
-        <div className="mx-auto flex max-h-[50vh] min-h-0 w-full max-w-4xl flex-col">
-          <Startup
-            runId={bootingTaskRun.id}
-            taskId={session.taskId}
-            initialTaskRun={bootingTaskRun}
-            prompt={
-              session.prompt && session.prompt.visibleInTranscript !== false
-                ? {
-                    text: session.prompt.text,
-                    images: session.prompt.images,
-                  }
-                : null
-            }
-            onStatusChange={onBootStatusChange}
-          />
-        </div>
-      ) : (
+      {!isBooting && (
         <div className={shouldHidePromptInput ? 'hidden' : undefined}>
           <PromptInput
             ref={promptInputRef}

apps/web/src/app/(sandbox)/task/[taskId]/page.tsx

@@ -34,7 +34,7 @@ import {
   useTaskMessageEnvelopes,
 } from './hooks';
 
-import { SnapshotResumeFailureFooter, Startup } from './startup';
+import { ProductTips, SnapshotResumeFailureFooter, Startup } from './startup';
 import { DraftPromptBanner } from './DraftPromptBanner';
 import { Header } from './Header';
 import { HistoricalContent } from './HistoricalContent';
@@ -280,13 +280,17 @@ export default function SandboxPage() {
     return (
       <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
         <Header session={session} />
-        <Startup
-          runId={taskRun.id}
-          taskId={taskId}
-          initialTaskRun={taskRun}
-          prompt={startupPrompt}
-          onStatusChange={handleBootStatusChange}
-        />
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">
+          <div className="mx-auto flex w-full max-w-4xl flex-col gap-2">
+            <Startup
+              runId={taskRun.id}
+              taskId={taskId}
+              initialTaskRun={taskRun}
+              prompt={startupPrompt}
+              onStatusChange={handleBootStatusChange}
+            />
+          </div>
+        </div>
         {session.draftPrompt && (
           <DraftPromptBanner draftPrompt={session.draftPrompt} />
         )}
@@ -298,13 +302,18 @@ export default function SandboxPage() {
     return (
       <div className="flex h-full min-h-0 min-w-0 flex-1 flex-col">
         <Header session={session} />
-        <Startup
-          runId={taskRun.id}
-          taskId={taskId}
-          initialTaskRun={taskRun}
-          prompt={startupPrompt}
-          onStatusChange={handleBootStatusChange}
-        />
+        <div className="min-h-0 flex-1 overflow-y-auto p-4">
+          <div className="mx-auto flex w-full max-w-4xl flex-col gap-2">
+            <Startup
+              runId={taskRun.id}
+              taskId={taskId}
+              initialTaskRun={taskRun}
+              prompt={startupPrompt}
+              onStatusChange={handleBootStatusChange}
+            />
+            <ProductTips />
+          </div>
+        </div>
         {session.draftPrompt && (
           <DraftPromptBanner draftPrompt={session.draftPrompt} />
         )}