feat(studio): Coding agent chat history

web/packages/common/src/components/AssistantChat/AssistantChatThread.tsx

@@ -13,10 +13,12 @@ import {
   Button,
   Flex,
   Skeleton,
+  Stack,
   Text,
   TextArea,
   Tooltip,
 } from '@nvidia/foundations-react-core';
+import cn from 'classnames';
 import { Check, Copy, Pencil, RefreshCw, RotateCcw, Send, Square, X } from 'lucide-react';
 
 import { ChatEmptyState } from '../Chat/ChatEmptyState';
@@ -30,6 +32,9 @@ interface AssistantChatThreadProps {
     slotHeading?: string;
     slotSubheading?: string;
   };
+  contentClassName?: string;
+  composerContainerClassName?: string;
+  viewportClassName?: string;
 }
 
 const AssistantChatTextPart: TextMessagePartComponent = ({ text }) => (
@@ -165,8 +170,25 @@ const UserEditComposer = () => (
   </MessagePrimitive.Root>
 );
 
-const AssistantComposer = ({ disabled, placeholder, onReset }: AssistantChatThreadProps) => (
-  <ComposerPrimitive.Root className="flex items-end gap-1 rounded border border-base bg-surface-base p-1">
+type AssistantComposerProps = Pick<
+  AssistantChatThreadProps,
+  'disabled' | 'placeholder' | 'onReset'
+> & {
+  className?: string;
+};
+
+const AssistantComposer = ({
+  disabled,
+  placeholder,
+  onReset,
+  className,
+}: AssistantComposerProps) => (
+  <ComposerPrimitive.Root
+    className={cn(
+      'flex w-full items-end gap-1 rounded border border-base bg-surface-base p-1',
+      className
+    )}
+  >
     <ComposerPrimitive.Input
       aria-label="Task prompt"
       addAttachmentOnPaste={false}
@@ -209,28 +231,37 @@ export const AssistantChatThread = ({
   placeholder,
   onReset,
   emptyState,
+  contentClassName,
+  composerContainerClassName,
+  viewportClassName,
 }: AssistantChatThreadProps) => (
   <ThreadPrimitive.Root className="flex h-full w-full flex-col" role="log">
-    <ThreadPrimitive.Viewport className="relative flex min-h-0 flex-1 flex-col overflow-y-auto gap-4">
-      <ThreadPrimitive.Empty>
-        <ChatEmptyState
-          className="h-full min-h-[250px] w-full"
-          slotHeading={emptyState?.slotHeading}
-          slotSubheading={emptyState?.slotSubheading}
+    <ThreadPrimitive.Viewport
+      className={cn('relative flex min-h-0 flex-1 flex-col overflow-y-auto', viewportClassName)}
+    >
+      <Stack gap="density-md" className={cn('min-h-full w-full', contentClassName)}>
+        <ThreadPrimitive.Empty>
+          <ChatEmptyState
+            className="h-full min-h-[250px] w-full"
+            slotHeading={emptyState?.slotHeading}
+            slotSubheading={emptyState?.slotSubheading}
+          />
+        </ThreadPrimitive.Empty>
+        <ThreadPrimitive.Messages
+          components={{
+            AssistantMessage,
+            UserMessage,
+            UserEditComposer,
+            SystemMessage: AssistantMessage,
+          }}
         />
-      </ThreadPrimitive.Empty>
-      <ThreadPrimitive.Messages
-        components={{
-          AssistantMessage,
-          UserMessage,
-          UserEditComposer,
-          SystemMessage: AssistantMessage,
-        }}
-      />
+      </Stack>
       <ThreadPrimitive.ScrollToBottom className="sticky bottom-density-sm self-center rounded border border-base bg-surface-raised px-density-sm py-density-xs text-sm shadow disabled:hidden">
         Scroll to bottom
       </ThreadPrimitive.ScrollToBottom>
     </ThreadPrimitive.Viewport>
-    <AssistantComposer disabled={disabled} placeholder={placeholder} onReset={onReset} />
+    <Flex className={cn('w-full', composerContainerClassName)}>
+      <AssistantComposer disabled={disabled} placeholder={placeholder} onReset={onReset} />
+    </Flex>
   </ThreadPrimitive.Root>
 );

web/packages/studio/src/routes/DashboardLandingRoute/index.spec.tsx

@@ -8,6 +8,16 @@ import { render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { createMemoryRouter, generatePath, RouterProvider, useLocation } from 'react-router';
 
+vi.mock('@studio/routes/agents/ClaudeCodeChatRoute/api', async (importOriginal) => {
+  const actual =
+    await importOriginal<typeof import('@studio/routes/agents/ClaudeCodeChatRoute/api')>();
+
+  return {
+    ...actual,
+    listClaudeCodeHistorySessions: vi.fn(async () => []),
+  };
+});
+
 const workspace = 'default';
 const CHAT_ROUTE_TEST_ID = 'chat-route';
 

web/packages/studio/src/routes/DashboardLandingRoute/index.tsx

@@ -1,10 +1,12 @@
 // SPDX-FileCopyrightText: Copyright (c) 2025-2026 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { GradientBackground } from '@nemo/common/src/components/GradientBackground';
 import { Button, Card, Flex, Text, TextArea, Tooltip } from '@nvidia/foundations-react-core';
 import { AccessibleTitle } from '@studio/components/AccessibleTitle';
 import { useWorkspaceFromPath } from '@studio/hooks/useWorkspaceFromPath';
 import { useBreadcrumbs } from '@studio/providers/breadcrumbs/useBreadcrumbs';
+import { ClaudeCodeLayout } from '@studio/routes/agents/ClaudeCodeChatRoute/ClaudeCodeLayout';
 import type { ClaudeCodeChatRouteState } from '@studio/routes/agents/ClaudeCodeChatRoute/types';
 import { getClaudeCodeChatRoute } from '@studio/routes/utils';
 import { GitBranch, Hammer, Search, Send, Terminal } from 'lucide-react';
@@ -138,28 +140,32 @@ export const DashboardLandingRoute: FC = () => {
   );
 
   return (
-    <AccessibleTitle title="Dashboard">
-      <main className="flex h-full min-h-[calc(100vh-var(--nv-app-bar-height))] items-center justify-center bg-surface-sunken px-4 py-10 text-primary">
-        <Flex className="mx-auto flex w-full max-w-4xl flex-col items-center gap-8">
-          <Flex className="flex flex-col items-center gap-3 text-center">
-            <Text kind="body/bold/2xl" className="text-center">
-              What would you like to do?
-            </Text>
-          </Flex>
+    <ClaudeCodeLayout>
+      <AccessibleTitle title="Dashboard">
+        <GradientBackground className="h-full w-full">
+          <main className="relative flex h-full w-full items-center justify-center px-4 py-10 text-primary">
+            <Flex className="mx-auto flex w-full max-w-4xl flex-col items-center gap-8">
+              <Flex className="flex flex-col items-center gap-3 text-center">
+                <Text kind="body/bold/2xl" className="text-center">
+                  What would you like to do?
+                </Text>
+              </Flex>
 
-          <LandingComposer input={input} onChange={setInput} onSubmit={handleSubmit} />
+              <LandingComposer input={input} onChange={setInput} onSubmit={handleSubmit} />
 
-          <Flex className="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
-            {PROMPT_SUGGESTIONS.map((suggestion) => (
-              <PromptCard
-                key={suggestion.title}
-                suggestion={suggestion}
-                onSelect={() => handlePromptSelect(suggestion.prompt)}
-              />
-            ))}
-          </Flex>
-        </Flex>
-      </main>
-    </AccessibleTitle>
+              <Flex className="grid w-full grid-cols-1 gap-3 md:grid-cols-3">
+                {PROMPT_SUGGESTIONS.map((suggestion) => (
+                  <PromptCard
+                    key={suggestion.title}
+                    suggestion={suggestion}
+                    onSelect={() => handlePromptSelect(suggestion.prompt)}
+                  />
+                ))}
+              </Flex>
+            </Flex>
+          </main>
+        </GradientBackground>
+      </AccessibleTitle>
+    </ClaudeCodeLayout>
   );
 };