feat(playground): home lists the projects under the composer; one cli…

…ck opens it in the pane Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01DeA8zbNdZMuB1MSNbcH6p6
simstudioai · TheodoreSpeaks · Sep 25, 2026 · Sep 25, 2026 · Sep 25, 2026 · Sep 25, 2026
commit ffc8eef5e40ba05a3cee89cda99249dbc828d8ff
diff --git a/apps/sim/app/playground/org/components/chat-surface.tsx b/apps/sim/app/playground/org/components/chat-surface.tsx
@@ -23,6 +23,7 @@ import {
 } from '@/app/playground/org/components/chat-resource-panel'
 import { type ChatMessage, ChatThread } from '@/app/playground/org/components/chat-thread'
 import { RunningDot } from '@/app/playground/org/components/glyphs'
+import { HomeView } from '@/app/playground/org/components/home-view'
 import {
   isPanelKind,
   mentionedIn,
@@ -33,7 +34,7 @@ import {
   resolvePanelResource,
 } from '@/app/playground/org/lib/chat-resources'
 import { useProtoChats } from '@/app/playground/org/lib/chat-store'
-import { type Chat, PEOPLE, WORKSPACES, workspaceById } from '@/app/playground/org/lib/mock-data'
+import { type Chat, WORKSPACES, workspaceById } from '@/app/playground/org/lib/mock-data'
 import type { ProjectSection } from '@/app/playground/org/lib/routes'
 import { WORKSPACE_SECTIONS } from '@/app/playground/org/lib/routes'
 import { protoParsers } from '@/app/playground/org/lib/search-params'
@@ -289,19 +290,20 @@ export function ChatSurface({ chat, fresh = false }: ChatSurfaceProps) {
           </span>
           {chat.id === 'c15' && <RunningDot />}
         </header>
-        <ChatThread
-          placeholder={fresh ? 'Do anything' : 'Reply to Sim…'}
-          seed={fresh ? NO_MESSAGES : chat.id === 'c15' ? SEED : undefined}
-          emptyTitle={
-            fresh ? `What should we get done, ${PEOPLE.teddy.name.split(' ')[0]}?` : undefined
-          }
-          onSend={
-            fresh && chat.title === 'New chat'
-              ? (text) => renameChat(chat.id, truncate(text, 48))
-              : undefined
-          }
-          className='mx-auto w-full max-w-[760px]'
-        />
+        {chat.id === 'new' ? (
+          <HomeView />
+        ) : (
+          <ChatThread
+            placeholder={fresh ? 'Do anything' : 'Reply to Sim…'}
+            seed={fresh ? NO_MESSAGES : chat.id === 'c15' ? SEED : undefined}
+            onSend={
+              fresh && chat.title === 'New chat'
+                ? (text) => renameChat(chat.id, truncate(text, 48))
+                : undefined
+            }
+            className='mx-auto w-full max-w-[760px]'
+          />
+        )}
       </div>
     </ChatPanelLayout>
   )

diff --git a/apps/sim/app/playground/org/components/chat-thread.tsx b/apps/sim/app/playground/org/components/chat-thread.tsx
@@ -23,8 +23,6 @@ interface ChatThreadProps {
   attachments?: React.ReactNode
   /** Called with each message the person sends. */
   onSend?: (text: string) => void
-  /** Shown in place of messages while there are none. */
-  emptyTitle?: string
   className?: string
 }
 
@@ -34,18 +32,12 @@ export function ChatThread({
   seed = SEED,
   attachments,
   onSend,
-  emptyTitle,
   className,
 }: ChatThreadProps) {
   const [messages, setMessages] = useState<ChatMessage[]>(seed)
   return (
     <div className={cn('flex min-h-0 flex-1 flex-col', className)}>
       <div className='flex min-h-0 flex-1 flex-col gap-4 overflow-y-auto px-4 py-4'>
-        {messages.length === 0 && emptyTitle && (
-          <h1 className='m-auto max-w-chat text-balance text-center font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em]'>
-            {emptyTitle}
-          </h1>
-        )}
         {messages.map((message, index) =>
           message.role === 'user' ? (
             <div

diff --git a/apps/sim/app/playground/org/components/home-view.tsx b/apps/sim/app/playground/org/components/home-view.tsx
@@ -0,0 +1,48 @@
+'use client'
+
+import { ChipTag } from '@sim/emcn'
+import { generateShortId } from '@sim/utils/id'
+import { truncate } from '@sim/utils/string'
+import { useRouter } from 'next/navigation'
+import { IdentityTile } from '@/components/identity-tile/identity-tile'
+import { BrowseRow, BrowseSection } from '@/app/playground/org/components/browse-rows'
+import { MockComposer } from '@/app/playground/org/components/mock-composer'
+import { useProtoChats } from '@/app/playground/org/lib/chat-store'
+import { PEOPLE, WORKSPACES } from '@/app/playground/org/lib/mock-data'
+import { protoRoutes } from '@/app/playground/org/lib/routes'
+
+/** Home: ask, or pick a project to open in the workspace pane. Asking starts a chat. */
+export function HomeView() {
+  const router = useRouter()
+  const createChat = useProtoChats((state) => state.createChat)
+  const firstName = PEOPLE.teddy.name.split(' ')[0]
+  return (
+    <div className='flex h-full min-h-0 flex-col items-center justify-center overflow-y-auto px-6 py-8'>
+      <div className='flex w-full max-w-chat flex-col gap-8'>
+        <h1 className='text-balance text-center font-season text-[26px] text-[var(--text-primary)] leading-[1.15] tracking-[-0.01em] sm:text-[28px]'>
+          What should we get done, {firstName}?
+        </h1>
+        <MockComposer
+          placeholder='Do anything'
+          onSubmit={(text) => {
+            const id = `c-${generateShortId(8)}`
+            createChat({ id, title: truncate(text, 48), age: 'now' })
+            router.push(protoRoutes.chat(id))
+          }}
+        />
+        <BrowseSection label='Projects'>
+          {WORKSPACES.map((workspace) => (
+            <BrowseRow key={workspace.id} href={protoRoutes.workspace(workspace.id)}>
+              <IdentityTile initial={workspace.name[0]} />
+              <span className='shrink-0 text-[var(--text-body)]'>{workspace.name}</span>
+              <span className='min-w-0 flex-1 truncate text-[var(--text-muted)]'>
+                {workspace.description}
+              </span>
+              {workspace.needsYou > 0 && <ChipTag variant='gray'>{workspace.needsYou}</ChipTag>}
+            </BrowseRow>
+          ))}
+        </BrowseSection>
+      </div>
+    </div>
+  )
+}