From a4848dce8a3b7befcec9bad6d92d552d8c7fbad7 Mon Sep 17 00:00:00 2001
From: leex279 <thomas@thirty3.de>
Date: Mon, 22 Sep 2025 11:15:04 +0200
Subject: [PATCH] fix: Move metadata panel to bottom and improve visibility
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Move metadata panel from top to bottom of content viewer
- Place scroll on outer container to show more metadata (max-h-64)
- Keep metadata section always accessible at the bottom
- Maintain clear visual separation with border-top
- Ensure better visibility of all metadata properties

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../inspector/components/ContentViewer.tsx    | 56 +++++++++----------
 1 file changed, 28 insertions(+), 28 deletions(-)

diff --git a/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx b/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
index 0b6bc1e4..caaf36ec 100644
--- a/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
+++ b/archon-ui-main/src/features/knowledge/inspector/components/ContentViewer.tsx
@@ -107,34 +107,6 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
 
       {/* Main Content Area with Metadata Panel */}
       <div className="flex-1 flex flex-col min-h-0">
-        {/* Metadata Section - Always visible as collapsible */}
-        {selectedItem.metadata && Object.keys(selectedItem.metadata).length > 0 && (
-          <div className="border-b border-white/10 flex-shrink-0">
-            <button
-              type="button"
-              onClick={() => setShowMetadata(!showMetadata)}
-              className="w-full px-4 py-3 flex items-center gap-2 text-sm font-medium text-cyan-400 hover:bg-white/5 transition-colors text-left"
-            >
-              {showMetadata ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
-              <Info className="w-4 h-4" />
-              Metadata
-              <span className="ml-auto text-xs text-gray-500">
-                {Object.keys(selectedItem.metadata).length} properties
-              </span>
-            </button>
-
-            {showMetadata && (
-              <div className="px-4 pb-4">
-                <div className="bg-black/40 border border-white/10 rounded-lg p-4 max-h-48 overflow-y-auto">
-                  <pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap overflow-x-auto">
-                    {JSON.stringify(selectedItem.metadata, null, 2)}
-                  </pre>
-                </div>
-              </div>
-            )}
-          </div>
-        )}
-
         {/* Content Body */}
         <div className="flex-1 overflow-y-auto min-h-0 p-6 scrollbar-thin">
           {selectedItem.type === "document" ? (
@@ -153,6 +125,34 @@ export const ContentViewer: React.FC<ContentViewerProps> = ({ selectedItem, onCo
             </div>
           )}
         </div>
+
+        {/* Metadata Section - Always visible as collapsible at bottom */}
+        {selectedItem.metadata && Object.keys(selectedItem.metadata).length > 0 && (
+          <div className="border-t border-white/10 flex-shrink-0">
+            <button
+              type="button"
+              onClick={() => setShowMetadata(!showMetadata)}
+              className="w-full px-4 py-3 flex items-center gap-2 text-sm font-medium text-cyan-400 hover:bg-white/5 transition-colors text-left"
+            >
+              {showMetadata ? <ChevronDown className="w-4 h-4" /> : <ChevronRight className="w-4 h-4" />}
+              <Info className="w-4 h-4" />
+              Metadata
+              <span className="ml-auto text-xs text-gray-500">
+                {Object.keys(selectedItem.metadata).length} properties
+              </span>
+            </button>
+
+            {showMetadata && (
+              <div className="px-4 pb-4 overflow-y-auto max-h-64">
+                <div className="bg-black/40 border border-white/10 rounded-lg p-4">
+                  <pre className="text-xs text-gray-400 font-mono whitespace-pre-wrap overflow-x-auto">
+                    {JSON.stringify(selectedItem.metadata, null, 2)}
+                  </pre>
+                </div>
+              </div>
+            )}
+          </div>
+        )}
       </div>
 
       {/* Content Footer - Show quick info */}