From 9207fc104f0203b54b01ca0515a187ef158ccd32 Mon Sep 17 00:00:00 2001
From: George Parker <george@piebald.ai>
Date: Sat, 24 Jan 2026 08:35:56 -0700
Subject: [PATCH] Move Raw JSON button to the user/assistant+time row, and make
 the header a bit more responsive

---
 .gitignore                                   |  1 +
 frontend/src/components/layout/AppHeader.tsx | 10 +---
 frontend/src/pages/HomeDashboard.tsx         | 63 ++++++++++----------
 3 files changed, 34 insertions(+), 40 deletions(-)

diff --git a/.gitignore b/.gitignore
index 6bda4db..37e2b2c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -27,6 +27,7 @@ frontend/public/pdf.worker.min.mjs
 *.sw?
 
 target
+ratarget
 
 # Gemini CLI Desktop test artifacts
 .gemini-cli-desktop/
diff --git a/frontend/src/components/layout/AppHeader.tsx b/frontend/src/components/layout/AppHeader.tsx
index 2025d4d..b7d5360 100644
--- a/frontend/src/components/layout/AppHeader.tsx
+++ b/frontend/src/components/layout/AppHeader.tsx
@@ -33,9 +33,9 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
   return (
     <div className="border-b border-gray-200 dark:border-neutral-700 bg-white dark:bg-neutral-900 flex-shrink-0">
       <div className="px-6 py-4">
-        <div className="flex items-center w-full">
+        <div className="flex items-center w-full justify-between">
           {/* Left section - Sidebar trigger + Desktop Logo */}
-          <div className="flex flex-1 items-center gap-3">
+          <div className="flex items-center gap-3">
             <SidebarTrigger />
             <div
               className={`flex items-center gap-1 ${
@@ -59,12 +59,8 @@ export const AppHeader: React.FC<AppHeaderProps> = ({
               )}
             </div>
           </div>
-
-          {/* Center section - Empty spacer */}
-          <div className="flex-1"></div>
-
           {/* Right section - Settings + Directory Toggle + Piebald branding */}
-          <div className="flex flex-1 items-center justify-end gap-2">
+          <div className="flex items-center justify-end gap-2">
             {onOpenSettings && (
               <Button
                 variant="ghost"
diff --git a/frontend/src/pages/HomeDashboard.tsx b/frontend/src/pages/HomeDashboard.tsx
index 3deb2cc..94da9f0 100644
--- a/frontend/src/pages/HomeDashboard.tsx
+++ b/frontend/src/pages/HomeDashboard.tsx
@@ -64,7 +64,7 @@ export const HomeDashboard: React.FC = () => {
                 >
                   <div className="w-full">
                     {/* Header with logo and timestamp */}
-                    <div className="flex items-center gap-2 mb-4">
+                    <div className="flex items-center gap-2 mb-2">
                       {message.sender === "assistant" ? (
                         <div>
                           <SmartLogo />
@@ -91,6 +91,33 @@ export const HomeDashboard: React.FC = () => {
                           minute: "2-digit",
                         })}
                       </span>
+                      {/* Info button for raw JSON */}
+                      <Dialog>
+                        <DialogTrigger asChild>
+                          <Button
+                            variant="ghost"
+                            size="sm"
+                            className="h-[unset] mt-0 py-1 text-xs text-muted-foreground hover:text-foreground"
+                          >
+                            <Info className="size-3" />
+                            {t("dashboard.rawJsonButton")}
+                          </Button>
+                        </DialogTrigger>
+                        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+                          <DialogHeader>
+                            <DialogTitle>
+                              {t("dashboard.rawJsonTitle")}
+                            </DialogTitle>
+                          </DialogHeader>
+                          <div className="rounded-lg overflow-hidden border border-border">
+                            <CodeMirrorViewer
+                              code={JSON.stringify(message, null, 2)}
+                              language="json"
+                              readOnly={true}
+                            />
+                          </div>
+                        </DialogContent>
+                      </Dialog>
                     </div>
 
                     <>
@@ -99,7 +126,7 @@ export const HomeDashboard: React.FC = () => {
                           return message.parts.map((msgPart, partIndex) => (
                             <div
                               key={partIndex}
-                              className="text-sm text-gray-900 dark:text-gray-100 mb-2"
+                              className="text-sm text-gray-900 dark:text-gray-100"
                             >
                               <MessageContent content={msgPart.text} />
                             </div>
@@ -130,7 +157,7 @@ ${part.thinking}`;
                             {msgPart.type === "thinking" ? (
                               <ThinkingBlock thinking={msgPart.thinking} />
                             ) : msgPart.type === "text" ? (
-                              <div className="text-sm text-gray-900 dark:text-gray-100 mb-2">
+                              <div className="text-sm text-gray-900 dark:text-gray-100">
                                 <MessageContent content={msgPart.text} />
                               </div>
                             ) : msgPart.type === "toolCall" ? (
@@ -173,36 +200,6 @@ ${part.thinking}`;
                         ));
                       })()}
                     </>
-
-                    {/* Info button for raw JSON */}
-                    <div className="mt-2 flex justify-start">
-                      <Dialog>
-                        <DialogTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="sm"
-                            className="h-6 px-2 text-xs text-muted-foreground hover:text-foreground"
-                          >
-                            <Info className="h-3 w-3 mr-1" />
-                            {t("dashboard.rawJsonButton")}
-                          </Button>
-                        </DialogTrigger>
-                        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
-                          <DialogHeader>
-                            <DialogTitle>
-                              {t("dashboard.rawJsonTitle")}
-                            </DialogTitle>
-                          </DialogHeader>
-                          <div className="rounded-lg overflow-hidden border border-border">
-                            <CodeMirrorViewer
-                              code={JSON.stringify(message, null, 2)}
-                              language="json"
-                              readOnly={true}
-                            />
-                          </div>
-                        </DialogContent>
-                      </Dialog>
-                    </div>
                   </div>
                 </div>
               ))}