Fix input size on Studio Code Agent and hide articaft panel on landing (#485)

Signed-off-by: Henrique Tolentino <htolentino@nvidia.com>

Author: htolentino-nvidia

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

@@ -45,6 +45,7 @@ export const AssistantChatThread = ({
   composerOverride,
   messageContentProps,
   enableImageAttachments,
+  minInputRows,
 }: AssistantChatThreadProps) => {
   const { className: threadViewportClassName, ...threadViewportAttributes } =
     attributes?.ThreadViewport ?? {};
@@ -122,6 +123,7 @@ export const AssistantChatThread = ({
               onReset={onReset}
               slotComposerStart={slotComposerStart}
               enableImageAttachments={enableImageAttachments}
+              minInputRows={minInputRows}
             />
           )}
         </Flex>

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

@@ -10,7 +10,12 @@ import { ArrowUp, ImagePlus, RotateCcw, Square } from 'lucide-react';
 
 type AssistantComposerProps = Pick<
   AssistantChatThreadProps,
-  'disabled' | 'placeholder' | 'onReset' | 'slotComposerStart' | 'enableImageAttachments'
+  | 'disabled'
+  | 'placeholder'
+  | 'onReset'
+  | 'slotComposerStart'
+  | 'enableImageAttachments'
+  | 'minInputRows'
 > & {
   className?: string;
 };
@@ -22,6 +27,7 @@ export const AssistantComposer = ({
   slotComposerStart,
   className,
   enableImageAttachments = true,
+  minInputRows,
 }: AssistantComposerProps) => (
   <div className="flex w-full flex-col gap-2">
     {slotComposerStart && <div className="shrink-0">{slotComposerStart}</div>}
@@ -40,6 +46,7 @@ export const AssistantComposer = ({
           disabled={disabled}
           placeholder={placeholder}
           submitMode="enter"
+          minRows={minInputRows}
           className="max-h-32 min-h-[24px] flex-1 resize-none border-0 bg-transparent px-density-md py-density-md text-sm leading-6 outline-none disabled:cursor-not-allowed disabled:text-fg-disabled"
         />
         {enableImageAttachments && (

web/packages/common/src/components/AssistantChat/types.ts

@@ -48,6 +48,7 @@ export interface AssistantChatThreadProps {
   composerOverride?: ReactNode;
   messageContentProps?: AssistantChatMessageContentProps;
   enableImageAttachments?: boolean;
+  minInputRows?: number;
 }
 
 export interface AssistantChatProps {

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

@@ -162,7 +162,7 @@ export const DashboardLandingRoute: FC = () => {
   );
 
   return (
-    <ClaudeCodeLayout>
+    <ClaudeCodeLayout hideArtifacts>
       <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">

web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeChatThread.tsx

@@ -163,6 +163,7 @@ export const ClaudeCodeChatThread: FC<ClaudeCodeChatThreadProps> = ({
           },
         }}
         placeholder="Ask Claude Code to work in this workspace"
+        minInputRows={3}
         onReset={handleChatReset}
         showRunningIndicator={!studioNavigationRequest && !decisionRequest && !inputRequest}
         messageContentProps={MESSAGE_CONTENT_PROPS}

web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeHistoryPanel.tsx

@@ -10,10 +10,13 @@ import { SkillsPanelContents } from '@studio/routes/agents/ClaudeCodeChatRoute/h
 import type { ClaudeCodeHistoryPanelProps } from '@studio/routes/agents/ClaudeCodeChatRoute/historyPanel/types';
 import { useLocalStorage } from '@studio/util/hooks/useLocalStorage';
 import { CLAUDE_CODE_HISTORY_OPEN_KEY, CLAUDE_CODE_PANEL_TAB_KEY } from '@studio/util/localStorage';
-import { PanelRightOpen } from 'lucide-react';
+import { PanelRightClose, PanelRightOpen } from 'lucide-react';
 import { type FC } from 'react';
 
-export const ClaudeCodeHistoryPanel: FC<ClaudeCodeHistoryPanelProps> = (props) => {
+export const ClaudeCodeHistoryPanel: FC<ClaudeCodeHistoryPanelProps> = ({
+  hideArtifacts,
+  ...props
+}) => {
   const [historyOpen, setHistoryOpen] = useLocalStorage(CLAUDE_CODE_HISTORY_OPEN_KEY, 'true');
   const [panelTab, setPanelTab] = useLocalStorage(CLAUDE_CODE_PANEL_TAB_KEY, 'history');
   const isOpen = historyOpen !== 'false';
@@ -44,12 +47,14 @@ export const ClaudeCodeHistoryPanel: FC<ClaudeCodeHistoryPanelProps> = (props) =
 
   return (
     <aside className="flex min-h-80 w-full shrink-0 flex-col border-t border-base bg-surface-base lg:w-[30rem] lg:border-l lg:border-t-0 xl:w-[32rem]">
-      <ClaudeCodeArtifactsPane
-        artifacts={props.artifacts}
-        collapseLabel={toggleLabel}
-        onCollapse={() => setHistoryOpen('false')}
-      />
-      <section className="flex min-h-0 basis-1/2 flex-col">
+      {!hideArtifacts && (
+        <ClaudeCodeArtifactsPane
+          artifacts={props.artifacts}
+          collapseLabel={toggleLabel}
+          onCollapse={() => setHistoryOpen('false')}
+        />
+      )}
+      <section className={`flex min-h-0 flex-col ${hideArtifacts ? 'flex-1' : 'basis-1/2'}`}>
         <Flex
           align="center"
           justify="between"
@@ -63,6 +68,19 @@ export const ClaudeCodeHistoryPanel: FC<ClaudeCodeHistoryPanelProps> = (props) =
             items={PANEL_TAB_ITEMS}
             className="min-w-0 flex-1"
           />
+          {hideArtifacts && (
+            <Tooltip slotContent={toggleLabel} side="left">
+              <Button
+                aria-label={toggleLabel}
+                kind="tertiary"
+                size="small"
+                type="button"
+                onClick={() => setHistoryOpen('false')}
+              >
+                <PanelRightClose size={18} />
+              </Button>
+            </Tooltip>
+          )}
         </Flex>
         <div className="flex min-h-0 flex-1 flex-col">
           {selectedTab === 'history' ? (

web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/ClaudeCodeLayout.tsx

@@ -14,13 +14,15 @@ interface ClaudeCodeLayoutProps {
   activeSessionId?: string;
   artifacts?: ClaudeCodeChatArtifacts;
   children: ReactNode;
+  hideArtifacts?: boolean;
   onNewChat?: () => void;
 }
 
 export const ClaudeCodeLayout: FC<ClaudeCodeLayoutProps> = ({
   activeSessionId,
   artifacts,
   children,
+  hideArtifacts,
   onNewChat,
 }) => {
   const workspace = useWorkspaceFromPath();
@@ -46,6 +48,7 @@ export const ClaudeCodeLayout: FC<ClaudeCodeLayoutProps> = ({
       <ClaudeCodeHistoryPanel
         activeSessionId={activeSessionId}
         artifacts={artifacts}
+        hideArtifacts={hideArtifacts}
         onNewChat={handleNewChat}
         onSelectSession={handleSelectSession}
       />

web/packages/studio/src/routes/agents/ClaudeCodeChatRoute/historyPanel/types.ts

@@ -6,6 +6,7 @@ import type { ClaudeCodeChatArtifacts } from '@studio/routes/agents/ClaudeCodeCh
 export interface ClaudeCodeHistoryPanelProps {
   activeSessionId?: string;
   artifacts?: ClaudeCodeChatArtifacts;
+  hideArtifacts?: boolean;
   onNewChat: () => void;
   onSelectSession: (sessionId: string) => void;
 }