use file card in more places

web/src/components/features/layouts/AppVerticalCodeSplitter/DiffSQLContainer.tsx

@@ -13,6 +13,7 @@ import { Copy2 } from '@/components/ui/icons';
 import { Text } from '@/components/ui/typography';
 import { VersionPill } from '@/components/ui/tags/VersionPill';
 import { FileCard } from '@/components/ui/card/FileCard';
+import { TextAndVersionPill } from '@/components/ui/typography/TextAndVersionPill';
 
 export const DiffSQLContainer: React.FC<{
   className?: string;
@@ -64,10 +65,7 @@ export const DiffSQLContainer: React.FC<{
         )}
         fileName={useMemo(
           () => (
-            <div className="flex items-center gap-x-1.5">
-              <Text>{fileName}</Text>
-              {versionNumber && <VersionPill version_number={versionNumber} />}
-            </div>
+            <TextAndVersionPill fileName={fileName || ''} versionNumber={versionNumber || 0} />
           ),
           [fileName, versionNumber]
         )}>

web/src/components/ui/streaming/StreamingMessage_File.stories.tsx

@@ -38,7 +38,7 @@ const mockResponseMessage: BusterChatResponseMessage_file = {
     },
     {
       status: 'loading',
-      message: 'Analyzing file contents',
+      message: 'Analyzing file contents with a really long message that should truncate in the ui',
       timestamp: 1.2
     }
   ]

web/src/components/ui/streaming/StreamingMessage_File.tsx

@@ -7,8 +7,8 @@ import { Text } from '@/components/ui/typography';
 import { motion, AnimatePresence } from 'framer-motion';
 import { itemAnimationConfig } from './animationConfig';
 import { StatusIndicator } from '@/components/ui/indicators';
-import { VersionPill } from '@/components/ui/tags/VersionPill';
-import { cn } from '@/lib/classMerge';
+import { FileCard } from '../card/FileCard';
+import { TextAndVersionPill } from '../typography/TextAndVersionPill';
 
 export const StreamingMessage_File: React.FC<{
   isSelectedFile: boolean;
@@ -24,15 +24,11 @@ export const StreamingMessage_File: React.FC<{
 
   return (
     <AnimatePresence initial={!isCompletedStream}>
-      <motion.div
-        id={id}
-        {...itemAnimationConfig}
-        className={cn(
-          'border-border hover:border-text-tertiary flex cursor-pointer flex-col items-center overflow-hidden rounded border transition-all duration-200 hover:shadow',
-          isSelectedFile && 'border-black shadow'
-        )}>
-        <StreamHeader file_name={file_name} version_number={version_number} />
-        <StreamingMessageBody metadata={metadata} />
+      <motion.div id={id} {...itemAnimationConfig}>
+        <FileCard
+          fileName={<TextAndVersionPill fileName={file_name} versionNumber={version_number} />}>
+          <StreamingMessageBody metadata={metadata} />
+        </FileCard>
       </motion.div>
     </AnimatePresence>
   );
@@ -40,19 +36,6 @@ export const StreamingMessage_File: React.FC<{
 
 StreamingMessage_File.displayName = 'StreamingMessage_File';
 
-const StreamHeader: React.FC<{ file_name: string; version_number: number }> = React.memo(
-  ({ file_name, version_number }) => {
-    return (
-      <div className="file-header bg-item-select border-border flex h-8 w-full items-center space-x-1.5 overflow-hidden border-b px-2.5">
-        <Text truncate>{file_name}</Text>
-        <VersionPill version_number={version_number} />
-      </div>
-    );
-  }
-);
-
-StreamHeader.displayName = 'ChatResponseMessageHeader';
-
 const StreamingMessageBody: React.FC<{
   metadata: BusterChatResponseMessage_fileMetadata[];
 }> = React.memo(({ metadata }) => {
@@ -79,15 +62,13 @@ const MetadataItem: React.FC<{ metadata: BusterChatResponseMessage_fileMetadata
 
   return (
     <div
-      className="@container flex w-full items-center justify-start space-x-1.5 overflow-hidden"
+      className="@container flex w-full items-center justify-start space-x-1.5"
       style={{
         containerType: 'inline-size'
       }}>
-      <div>
-        <StatusIndicator status={status} />
-      </div>
+      <StatusIndicator status={status} />
 
-      <Text truncate size="xs" variant="secondary">
+      <Text truncate size="xs" className="leading-1.3" variant="secondary">
         {message}
       </Text>
 

web/src/controllers/ReasoningController/ReasoningMessages/ReasoningMessage_Files/ReasoningFileButtons.tsx

@@ -3,8 +3,6 @@ import { AppTooltip } from '@/components/ui/tooltip';
 import { ArrowUpRight } from '@/components/ui/icons';
 import { Button } from '@/components/ui/buttons';
 import React, { useMemo } from 'react';
-import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext';
-import { useMemoizedFn } from '@/hooks';
 import Link from 'next/link';
 import { createChatAssetRoute } from '@/layouts/ChatLayout/ChatLayoutContext/helpers';
 

web/src/styles/tailwind.css

@@ -21,25 +21,25 @@
   --text-3xs: 6px;
   --text-3xs--line-height: 1;
   --text-2xs: 8px;
-  --text-2xs--line-height: 1;
+  --text-2xs--line-height: 1.3;
   --text-xs: 11px;
-  --text-xs--line-height: 1;
+  --text-xs--line-height: 1.3;
   --text-sm: 12px;
   --text-sm--line-height: 1.3;
   --text-base: 13px;
   --text-base--line-height: 1.3;
   --text-md: 14px;
-  --text-md--line-height: 1;
+  --text-md--line-height: 1.3;
   --text-lg: 16px;
-  --text-lg--line-height: 1;
+  --text-lg--line-height: 1.3;
   --text-xl: 18px;
-  --text-xl--line-height: 1;
+  --text-xl--line-height: 1.3;
   --text-2xl: 20px;
-  --text-2xl--line-height: 1;
+  --text-2xl--line-height: 1.3;
   --text-3xl: 24px;
-  --text-3xl--line-height: 1;
+  --text-3xl--line-height: 1.3;
   --text-4xl: 30px;
-  --text-4xl--line-height: 1;
+  --text-4xl--line-height: 1.3;
   --text-size-inherit: inherit;
 
   --text-icon-size: 16px;