refactor: simplify metadata display using ExpandableMessage

- Remove separate MetadataSection component
- Update ExpandableMessage to handle metadata display
- Clean up ChatMessage component
- Improve metadata styling with border and spacing

frontend/src/components/features/chat/chat-message.tsx

@@ -6,18 +6,15 @@ import { cn } from "#/utils/utils";
 import { ul, ol } from "../markdown/list";
 import { CopyToClipboardButton } from "#/components/shared/buttons/copy-to-clipboard-button";
 import { anchor } from "../markdown/anchor";
-import { MetadataSection } from "./metadata-section";
 
 interface ChatMessageProps {
   type: "user" | "assistant";
   message: string;
-  metadata?: Record<string, unknown>;
 }
 
 export function ChatMessage({
   type,
   message,
-  metadata,
   children,
 }: React.PropsWithChildren<ChatMessageProps>) {
   const [isHovering, setIsHovering] = React.useState(false);
@@ -72,7 +69,6 @@ export function ChatMessage({
       >
         {message}
       </Markdown>
-      {metadata && <MetadataSection metadata={metadata} />}
       {children}
     </article>
   );

frontend/src/components/features/chat/expandable-message.tsx

@@ -15,13 +15,15 @@ interface ExpandableMessageProps {
   message: string;
   type: string;
   success?: boolean;
+  metadata?: Record<string, unknown>;
 }
 
 export function ExpandableMessage({
   id,
   message,
   type,
   success,
+  metadata,
 }: ExpandableMessageProps) {
   const { t, i18n } = useTranslation();
   const [showDetails, setShowDetails] = useState(true);
@@ -46,15 +48,15 @@ export function ExpandableMessage({
       )}
     >
       <div className="text-sm w-full">
-        {headline && (
+        {(headline || metadata) && (
           <div className="flex flex-row justify-between items-center w-full">
             <span
               className={cn(
                 "font-bold",
                 type === "error" ? "text-danger" : "text-neutral-300",
               )}
             >
-              {headline}
+              {headline || "Command Metadata"}
               <button
                 type="button"
                 onClick={() => setShowDetails(!showDetails)}
@@ -95,17 +97,29 @@ export function ExpandableMessage({
           </div>
         )}
         {showDetails && (
-          <Markdown
-            className="text-sm overflow-auto"
-            components={{
-              code,
-              ul,
-              ol,
-            }}
-            remarkPlugins={[remarkGfm]}
-          >
-            {details}
-          </Markdown>
+          <>
+            <Markdown
+              className="text-sm overflow-auto"
+              components={{
+                code,
+                ul,
+                ol,
+              }}
+              remarkPlugins={[remarkGfm]}
+            >
+              {details}
+            </Markdown>
+            {metadata && (
+              <div className="mt-4 text-sm text-neutral-300 border-t border-neutral-700 pt-4">
+                {Object.entries(metadata).map(([key, value]) => (
+                  <div key={key} className="flex gap-2">
+                    <strong className="text-neutral-400">{key}:</strong>
+                    <span>{String(value)}</span>
+                  </div>
+                ))}
+              </div>
+            )}
+          </>
         )}
       </div>
     </div>

frontend/src/components/features/chat/messages.tsx

@@ -21,6 +21,7 @@ export const Messages: React.FC<MessagesProps> = React.memo(
             id={message.translationID}
             message={message.content}
             success={message.success}
+            metadata={message.metadata}
           />
         );
       }
@@ -30,7 +31,6 @@ export const Messages: React.FC<MessagesProps> = React.memo(
           key={index}
           type={message.sender}
           message={message.content}
-          metadata={message.metadata}
         >
           {message.imageUrls && message.imageUrls.length > 0 && (
             <ImageCarousel size="small" images={message.imageUrls} />