From 8f902b3d4702af45fac72293a18dda72e3b128b8 Mon Sep 17 00:00:00 2001
From: Prajna1999 <gituprajna20@gmail.com>
Date: Mon, 2 Feb 2026 11:14:17 +0530
Subject: [PATCH 1/2] fix: add tools, vector store ids to the config cards

---
 app/components/ConfigCard.tsx | 97 ++++++++++++++++++++++++++++++++++-
 1 file changed, 96 insertions(+), 1 deletion(-)

diff --git a/app/components/ConfigCard.tsx b/app/components/ConfigCard.tsx
index 04f2d08..90f5a4b 100644
--- a/app/components/ConfigCard.tsx
+++ b/app/components/ConfigCard.tsx
@@ -5,7 +5,7 @@
  */
 
 "use client"
-import React from 'react';
+import React, { useState } from 'react';
 import { useRouter } from 'next/navigation';
 import { colors } from '@/app/lib/colors';
 import { ConfigGroup, SavedConfig, formatRelativeTime } from '@/app/lib/useConfigs';
@@ -23,6 +23,8 @@ export default function ConfigCard({
 }: ConfigCardProps) {
   const router = useRouter();
   const { latestVersion, totalVersions } = configGroup;
+  const [showTools, setShowTools] = useState(false);
+  const [showVectorStores, setShowVectorStores] = useState(false);
 
   const handleEdit = () => {
     router.push(`/configurations/prompt-editor?config=${latestVersion.config_id}&version=${latestVersion.version}`);
@@ -101,6 +103,99 @@ export default function ConfigCard({
           </div>
         </div>
 
+        {/* Tools Dropdown */}
+        {latestVersion.tools && latestVersion.tools.length > 0 && (
+          <div className="mb-4">
+            <button
+              onClick={() => setShowTools(!showTools)}
+              className="w-full flex items-center justify-between px-2.5 py-1.5 rounded-md text-xs transition-colors"
+              style={{
+                backgroundColor: colors.bg.secondary,
+                border: `1px solid ${colors.border}`,
+              }}
+            >
+              <span style={{ color: colors.text.secondary }}>
+                Tools ({latestVersion.tools.length})
+              </span>
+              <svg
+                className={`w-3 h-3 transition-transform ${showTools ? 'rotate-180' : ''}`}
+                style={{ color: colors.text.secondary }}
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor"
+              >
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+              </svg>
+            </button>
+            {showTools && (
+              <div
+                className="mt-1 p-2 rounded-md text-xs space-y-2"
+                style={{
+                  backgroundColor: colors.bg.secondary,
+                  border: `1px solid ${colors.border}`,
+                }}
+              >
+                {latestVersion.tools.map((tool, idx) => (
+                  <div key={idx} className="space-y-1">
+                    <div style={{ color: colors.text.primary, fontWeight: 500 }}>
+                      {tool.type}
+                    </div>
+                    {tool.knowledge_base_ids && tool.knowledge_base_ids.length > 0 && (
+                      <div style={{ color: colors.text.secondary }}>
+                        Knowledge Bases: {tool.knowledge_base_ids.length}
+                      </div>
+                    )}
+                    {tool.max_num_results && (
+                      <div style={{ color: colors.text.secondary }}>
+                        Max Results: {tool.max_num_results}
+                      </div>
+                    )}
+                  </div>
+                ))}
+
+                {/* Vector Stores Section inside Tools */}
+                {latestVersion.vectorStoreIds && (
+                  <div className="mt-3 pt-2" style={{ borderTop: `1px solid ${colors.border}` }}>
+                    <button
+                      onClick={() => setShowVectorStores(!showVectorStores)}
+                      className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
+                      style={{
+                        backgroundColor: colors.bg.primary,
+                      }}
+                    >
+                      <span style={{ color: colors.text.secondary, fontSize: '11px' }}>
+                        Vector Store IDs
+                      </span>
+                      <svg
+                        className={`w-3 h-3 transition-transform ${showVectorStores ? 'rotate-180' : ''}`}
+                        style={{ color: colors.text.secondary }}
+                        fill="none"
+                        viewBox="0 0 24 24"
+                        stroke="currentColor"
+                      >
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </button>
+                    {showVectorStores && (
+                      <div
+                        className="mt-1 p-2 rounded-md break-all"
+                        style={{
+                          backgroundColor: colors.bg.primary,
+                          color: colors.text.primary,
+                          fontFamily: 'monospace',
+                          fontSize: '10px',
+                        }}
+                      >
+                        {latestVersion.vectorStoreIds}
+                      </div>
+                    )}
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+        )}
+
         {/* Prompt Preview */}
         <div
           className="rounded-md p-3 mb-4 text-xs font-mono overflow-hidden"

From 89216f92f7ecf81e92fdcca5ceb7e072043a120c Mon Sep 17 00:00:00 2001
From: Prajna1999 <gituprajna20@gmail.com>
Date: Mon, 2 Feb 2026 11:18:12 +0530
Subject: [PATCH 2/2] fix: vector store ids all visible in the config card
 listing

---
 app/components/ConfigCard.tsx | 82 +++++++++++++++++++++--------------
 1 file changed, 49 insertions(+), 33 deletions(-)

diff --git a/app/components/ConfigCard.tsx b/app/components/ConfigCard.tsx
index 90f5a4b..770a1f4 100644
--- a/app/components/ConfigCard.tsx
+++ b/app/components/ConfigCard.tsx
@@ -154,43 +154,59 @@ export default function ConfigCard({
                 ))}
 
                 {/* Vector Stores Section inside Tools */}
-                {latestVersion.vectorStoreIds && (
-                  <div className="mt-3 pt-2" style={{ borderTop: `1px solid ${colors.border}` }}>
-                    <button
-                      onClick={() => setShowVectorStores(!showVectorStores)}
-                      className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
-                      style={{
-                        backgroundColor: colors.bg.primary,
-                      }}
-                    >
-                      <span style={{ color: colors.text.secondary, fontSize: '11px' }}>
-                        Vector Store IDs
-                      </span>
-                      <svg
-                        className={`w-3 h-3 transition-transform ${showVectorStores ? 'rotate-180' : ''}`}
-                        style={{ color: colors.text.secondary }}
-                        fill="none"
-                        viewBox="0 0 24 24"
-                        stroke="currentColor"
-                      >
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
-                      </svg>
-                    </button>
-                    {showVectorStores && (
-                      <div
-                        className="mt-1 p-2 rounded-md break-all"
+                {(() => {
+                  // Collect all knowledge_base_ids from all tools
+                  const allVectorStoreIds = latestVersion.tools
+                    .flatMap(tool => tool.knowledge_base_ids || [])
+                    .filter(id => id);
+
+                  return allVectorStoreIds.length > 0 && (
+                    <div className="mt-3 pt-2" style={{ borderTop: `1px solid ${colors.border}` }}>
+                      <button
+                        onClick={() => setShowVectorStores(!showVectorStores)}
+                        className="w-full flex items-center justify-between px-2 py-1 rounded-md transition-colors"
                         style={{
                           backgroundColor: colors.bg.primary,
-                          color: colors.text.primary,
-                          fontFamily: 'monospace',
-                          fontSize: '10px',
                         }}
                       >
-                        {latestVersion.vectorStoreIds}
-                      </div>
-                    )}
-                  </div>
-                )}
+                        <span style={{ color: colors.text.secondary, fontSize: '11px' }}>
+                          Vector Store IDs ({allVectorStoreIds.length})
+                        </span>
+                        <svg
+                          className={`w-3 h-3 transition-transform ${showVectorStores ? 'rotate-180' : ''}`}
+                          style={{ color: colors.text.secondary }}
+                          fill="none"
+                          viewBox="0 0 24 24"
+                          stroke="currentColor"
+                        >
+                          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                        </svg>
+                      </button>
+                      {showVectorStores && (
+                        <div
+                          className="mt-1 p-2 rounded-md space-y-1"
+                          style={{
+                            backgroundColor: colors.bg.primary,
+                            color: colors.text.primary,
+                          }}
+                        >
+                          {allVectorStoreIds.map((id, idx) => (
+                            <div
+                              key={idx}
+                              className="break-all"
+                              style={{
+                                fontFamily: 'monospace',
+                                fontSize: '10px',
+                              }}
+                            >
+                              {id}
+                            </div>
+                          ))}
+                        </div>
+                      )}
+                    </div>
+                  );
+                })()}
               </div>
             )}
           </div>
