From 6534fdb1b3cb3fb3057349642979778ae3bc7c9a Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Thu, 26 Feb 2026 09:56:45 +0200
Subject: [PATCH 1/4] feat(api): add model_name and model_type to collections
 list endpoint

Ultraworked with [Sisyphus](https://github.com/code-yeongyu/oh-my-opencode)

Co-authored-by: Sisyphus <clio-agent@sisyphuslabs.ai>
---
 embedding_cluster/server/models.py            |  2 +
 .../server/routes/collections.py              | 17 ++++--
 tests/test_server_collections.py              | 60 ++++++++++++++++++-
 3 files changed, 73 insertions(+), 6 deletions(-)

diff --git a/embedding_cluster/server/models.py b/embedding_cluster/server/models.py
index 73946fe..4b35092 100644
--- a/embedding_cluster/server/models.py
+++ b/embedding_cluster/server/models.py
@@ -8,6 +8,8 @@
 class CollectionInfo(BaseModel):
     name: str
     count: int
+    model_name: str | None = None
+    model_type: str | None = None
 
 
 class CollectionDetail(BaseModel):
diff --git a/embedding_cluster/server/routes/collections.py b/embedding_cluster/server/routes/collections.py
index 8b887bc..049ccd9 100644
--- a/embedding_cluster/server/routes/collections.py
+++ b/embedding_cluster/server/routes/collections.py
@@ -25,10 +25,19 @@ def _get_chromadb_client() -> ClientAPI:
 async def list_collections() -> list[CollectionInfo]:
     client = _get_chromadb_client()
     collection_names = client.list_collections()
-    return [
-        CollectionInfo(name=c, count=client.get_collection(c).count())
-        for c in collection_names
-    ]
+    results: list[CollectionInfo] = []
+    for name in collection_names:
+        collection = client.get_collection(name)
+        metadata = collection.metadata or {}
+        results.append(
+            CollectionInfo(
+                name=name,
+                count=collection.count(),
+                model_name=metadata.get("model_name"),
+                model_type=metadata.get("model_type"),
+            )
+        )
+    return results
 
 
 @router.get("/{name}", response_model=CollectionDetail)
diff --git a/tests/test_server_collections.py b/tests/test_server_collections.py
index 0092f83..d5783c6 100644
--- a/tests/test_server_collections.py
+++ b/tests/test_server_collections.py
@@ -30,9 +30,11 @@ async def test_list_collections(client, mock_chromadb_client):
     """Test GET /api/collections returns list of collections with counts."""
     mock_collection1 = MagicMock()
     mock_collection1.count.return_value = 10
+    mock_collection1.metadata = None
 
     mock_collection2 = MagicMock()
     mock_collection2.count.return_value = 25
+    mock_collection2.metadata = None
 
     mock_chromadb_client.list_collections.return_value = [
         "collection1",
@@ -52,8 +54,62 @@ async def test_list_collections(client, mock_chromadb_client):
     assert response.status_code == 200
     data = response.json()
     assert len(data) == 2
-    assert data[0] == {"name": "collection1", "count": 10}
-    assert data[1] == {"name": "collection2", "count": 25}
+    assert data[0] == {
+        "name": "collection1",
+        "count": 10,
+        "model_name": None,
+        "model_type": None,
+    }
+    assert data[1] == {
+        "name": "collection2",
+        "count": 25,
+        "model_name": None,
+        "model_type": None,
+    }
+
+
+async def test_list_collections_includes_model_metadata(client, mock_chromadb_client):
+    mock_collection = MagicMock()
+    mock_collection.count.return_value = 10
+    mock_collection.metadata = {
+        "model_name": "openai/clip-vit-base-patch32",
+        "model_type": "image",
+    }
+
+    mock_chromadb_client.list_collections.return_value = ["test_col"]
+    mock_chromadb_client.get_collection.return_value = mock_collection
+
+    with patch(
+        "embedding_cluster.server.routes.collections._get_chromadb_client",
+        return_value=mock_chromadb_client,
+    ):
+        response = await client.get("/api/collections")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert len(data) == 1
+    assert data[0]["model_name"] == "openai/clip-vit-base-patch32"
+    assert data[0]["model_type"] == "image"
+
+
+async def test_list_collections_no_metadata(client, mock_chromadb_client):
+    mock_collection = MagicMock()
+    mock_collection.count.return_value = 5
+    mock_collection.metadata = None
+
+    mock_chromadb_client.list_collections.return_value = ["no_meta"]
+    mock_chromadb_client.get_collection.return_value = mock_collection
+
+    with patch(
+        "embedding_cluster.server.routes.collections._get_chromadb_client",
+        return_value=mock_chromadb_client,
+    ):
+        response = await client.get("/api/collections")
+
+    assert response.status_code == 200
+    data = response.json()
+    assert data[0]["model_name"] is None
+    assert data[0]["model_type"] is None
 
 
 async def test_get_collection_success(client, mock_chromadb_client):

From 4f9554211ddde62bd7eace129076475c6c3877b3 Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Thu, 26 Feb 2026 10:08:36 +0200
Subject: [PATCH 2/4] feat(frontend): add model metadata to CollectionInfo
 type, EmptyState and StatsBar components

---
 frontend/src/components/home/EmptyState.tsx | 32 +++++++++++++++++++++
 frontend/src/components/home/StatsBar.tsx   | 26 +++++++++++++++++
 frontend/src/types/index.ts                 |  2 ++
 3 files changed, 60 insertions(+)
 create mode 100644 frontend/src/components/home/EmptyState.tsx
 create mode 100644 frontend/src/components/home/StatsBar.tsx

diff --git a/frontend/src/components/home/EmptyState.tsx b/frontend/src/components/home/EmptyState.tsx
new file mode 100644
index 0000000..16147df
--- /dev/null
+++ b/frontend/src/components/home/EmptyState.tsx
@@ -0,0 +1,32 @@
+import { Link } from 'react-router-dom'
+
+export default function EmptyState() {
+  return (
+    <div className="text-center py-20 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-16 w-16 mx-auto mb-4 text-gray-400 opacity-50"
+        fill="none"
+        viewBox="0 0 24 24"
+        stroke="currentColor"
+      >
+        <path
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          strokeWidth={1}
+          d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"
+        />
+      </svg>
+      <p className="text-gray-500 text-xl">No collections yet</p>
+      <p className="text-gray-400 mt-2">
+        Get started by indexing your first CSV
+      </p>
+      <Link
+        to="/index"
+        className="mt-6 inline-flex items-center rounded-md border border-transparent bg-blue-600 px-6 py-3 text-base font-medium text-white shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 transition-colors"
+      >
+        Index New Data
+      </Link>
+    </div>
+  )
+}
diff --git a/frontend/src/components/home/StatsBar.tsx b/frontend/src/components/home/StatsBar.tsx
new file mode 100644
index 0000000..9e0aebe
--- /dev/null
+++ b/frontend/src/components/home/StatsBar.tsx
@@ -0,0 +1,26 @@
+interface StatsBarProps {
+  collectionCount: number
+  totalItems: number
+}
+
+export default function StatsBar({
+  collectionCount,
+  totalItems,
+}: StatsBarProps) {
+  return (
+    <div className="grid grid-cols-2 gap-4 mb-8">
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+        <p className="text-sm font-medium text-gray-500">Collections</p>
+        <p className="text-3xl font-bold text-gray-900 mt-1">
+          {collectionCount.toLocaleString()}
+        </p>
+      </div>
+      <div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6">
+        <p className="text-sm font-medium text-gray-500">Total Items</p>
+        <p className="text-3xl font-bold text-gray-900 mt-1">
+          {totalItems.toLocaleString()}
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/types/index.ts b/frontend/src/types/index.ts
index c075225..72a39e5 100644
--- a/frontend/src/types/index.ts
+++ b/frontend/src/types/index.ts
@@ -2,6 +2,8 @@
 export interface CollectionInfo {
   name: string;
   count: number;
+  model_name: string | null;
+  model_type: string | null;
 }
 
 export interface CollectionDetail {

From 54e60688eb08d901ab326f6e3e089e70c878ea54 Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Thu, 26 Feb 2026 10:09:29 +0200
Subject: [PATCH 3/4] feat(frontend): add CollectionCard and CollectionGrid
 components

---
 .../src/components/home/CollectionCard.tsx    | 122 ++++++++++++++++++
 .../src/components/home/CollectionGrid.tsx    |  23 ++++
 2 files changed, 145 insertions(+)
 create mode 100644 frontend/src/components/home/CollectionCard.tsx
 create mode 100644 frontend/src/components/home/CollectionGrid.tsx

diff --git a/frontend/src/components/home/CollectionCard.tsx b/frontend/src/components/home/CollectionCard.tsx
new file mode 100644
index 0000000..45581be
--- /dev/null
+++ b/frontend/src/components/home/CollectionCard.tsx
@@ -0,0 +1,122 @@
+import { useState } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
+import { fetchCollection, deleteCollection } from '../../api/collections'
+import type { CollectionInfo } from '../../types'
+
+interface CollectionCardProps {
+  collection: CollectionInfo
+}
+
+export default function CollectionCard({ collection }: CollectionCardProps) {
+  const [isExpanded, setIsExpanded] = useState(false)
+  const navigate = useNavigate()
+  const queryClient = useQueryClient()
+
+  const { data: detail, isLoading: isDetailLoading } = useQuery({
+    queryKey: ['collection', collection.name],
+    queryFn: () => fetchCollection(collection.name),
+    enabled: isExpanded,
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteCollection,
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ['collections'] })
+    },
+  })
+
+  const handleDelete = () => {
+    if (
+      window.confirm(
+        `Are you sure you want to delete collection "${collection.name}"?`,
+      )
+    ) {
+      deleteMutation.mutate(collection.name)
+    }
+  }
+
+  return (
+    <div className="bg-white rounded-lg shadow-md border border-gray-200 hover:shadow-lg transition-shadow">
+      <div className="p-6">
+        <h3 className="text-lg font-semibold text-gray-900 truncate">
+          {collection.name}
+        </h3>
+        <p className="text-2xl font-bold text-gray-700 mt-2">
+          {collection.count.toLocaleString()}
+          <span className="text-sm font-normal text-gray-500 ml-1">items</span>
+        </p>
+        {(collection.model_type || collection.model_name) && (
+          <div className="mt-2 flex flex-wrap gap-2">
+            {collection.model_type && (
+              <span className="inline-flex items-center rounded-full bg-blue-50 px-2 py-1 text-xs font-medium text-blue-700 ring-1 ring-inset ring-blue-600/20">
+                {collection.model_type}
+              </span>
+            )}
+            {collection.model_name && (
+              <span className="inline-flex items-center rounded-full bg-gray-50 px-2 py-1 text-xs font-medium text-gray-600 ring-1 ring-inset ring-gray-500/10 truncate max-w-full">
+                {collection.model_name}
+              </span>
+            )}
+          </div>
+        )}
+      </div>
+
+      {isExpanded && (
+        <div className="border-t border-gray-100 px-6 py-4 bg-gray-50">
+          {isDetailLoading ? (
+            <div className="flex items-center text-sm text-gray-500">
+              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-600 mr-2"></div>
+              Loading details...
+            </div>
+          ) : detail ? (
+            <div>
+              <p className="text-sm font-medium text-gray-700 mb-2">
+                Metadata Fields
+              </p>
+              {detail.metadata_fields.length > 0 ? (
+                <div className="flex flex-wrap gap-1">
+                  {detail.metadata_fields.map((field) => (
+                    <span
+                      key={field}
+                      className="inline-flex items-center rounded bg-white px-2 py-0.5 text-xs text-gray-700 border border-gray-200"
+                    >
+                      {field}
+                    </span>
+                  ))}
+                </div>
+              ) : (
+                <p className="text-sm text-gray-400">No metadata fields</p>
+              )}
+            </div>
+          ) : null}
+        </div>
+      )}
+
+      <div className="border-t border-gray-100 px-6 py-3 flex items-center justify-between">
+        <div className="flex items-center space-x-3">
+          <button
+            onClick={() => navigate(`/plot?collection=${collection.name}`)}
+            className="text-sm font-medium text-blue-600 hover:text-blue-800 transition-colors"
+          >
+            Visualize
+          </button>
+          <span className="text-gray-300">|</span>
+          <button
+            onClick={() => setIsExpanded(!isExpanded)}
+            className="text-sm font-medium text-gray-600 hover:text-gray-800 transition-colors"
+          >
+            {isExpanded ? 'Collapse' : 'Inspect'}
+          </button>
+        </div>
+        <button
+          onClick={handleDelete}
+          className="text-sm font-medium text-red-600 hover:text-red-800 transition-colors"
+          disabled={deleteMutation.isPending}
+        >
+          {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/frontend/src/components/home/CollectionGrid.tsx b/frontend/src/components/home/CollectionGrid.tsx
new file mode 100644
index 0000000..20ae508
--- /dev/null
+++ b/frontend/src/components/home/CollectionGrid.tsx
@@ -0,0 +1,23 @@
+import type { CollectionInfo } from '../../types'
+import CollectionCard from './CollectionCard'
+
+interface CollectionGridProps {
+  collections: CollectionInfo[]
+}
+
+export default function CollectionGrid({
+  collections,
+}: CollectionGridProps) {
+  return (
+    <div>
+      <h2 className="text-xl font-semibold text-gray-900 mb-4">
+        Collections
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+        {collections.map((collection) => (
+          <CollectionCard key={collection.name} collection={collection} />
+        ))}
+      </div>
+    </div>
+  )
+}

From 482f04df4d746400aef569b6618bff11f0c7ecdf Mon Sep 17 00:00:00 2001
From: aGallea <asafgallea@gmail.com>
Date: Thu, 26 Feb 2026 10:13:11 +0200
Subject: [PATCH 4/4] feat(frontend): add dashboard HomePage, update routing,
 remove old CollectionsPage

---
 frontend/src/App.tsx                          | 12 +--
 .../components/collections/CollectionList.tsx | 79 -----------------
 frontend/src/pages/CollectionsPage.tsx        | 44 ----------
 frontend/src/pages/HomePage.tsx               | 85 +++++++++++++++++++
 4 files changed, 91 insertions(+), 129 deletions(-)
 delete mode 100644 frontend/src/components/collections/CollectionList.tsx
 delete mode 100644 frontend/src/pages/CollectionsPage.tsx
 create mode 100644 frontend/src/pages/HomePage.tsx

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index b2de06e..493badd 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,6 +1,6 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import { BrowserRouter, Link, NavLink, Route, Routes } from 'react-router-dom'
-import CollectionsPage from './pages/CollectionsPage'
+import HomePage from './pages/HomePage'
 import IndexPage from './pages/IndexPage'
 import PlotPage from './pages/PlotPage'
 
@@ -25,14 +25,14 @@ function NavBar() {
             </Link>
             <div className="ml-10 flex items-baseline space-x-4">
               <NavLink to="/" end className={linkClass}>
+                Home
+              </NavLink>
+              <NavLink to="/index" className={linkClass}>
                 Index
               </NavLink>
               <NavLink to="/plot" className={linkClass}>
                 Plot
               </NavLink>
-              <NavLink to="/collections" className={linkClass}>
-                Collections
-              </NavLink>
             </div>
           </div>
         </div>
@@ -49,9 +49,9 @@ export default function App() {
           <NavBar />
           <main>
             <Routes>
-              <Route path="/" element={<IndexPage />} />
+              <Route path="/" element={<HomePage />} />
+              <Route path="/index" element={<IndexPage />} />
               <Route path="/plot" element={<PlotPage />} />
-              <Route path="/collections" element={<CollectionsPage />} />
             </Routes>
           </main>
         </div>
diff --git a/frontend/src/components/collections/CollectionList.tsx b/frontend/src/components/collections/CollectionList.tsx
deleted file mode 100644
index d2a929b..0000000
--- a/frontend/src/components/collections/CollectionList.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import { useNavigate } from 'react-router-dom'
-import { useMutation, useQueryClient } from '@tanstack/react-query'
-import type { CollectionInfo } from '../../types'
-import { deleteCollection } from '../../api/collections'
-
-interface CollectionListProps {
-  collections: CollectionInfo[]
-}
-
-export default function CollectionList({ collections }: CollectionListProps) {
-  const navigate = useNavigate()
-  const queryClient = useQueryClient()
-
-  const deleteMutation = useMutation({
-    mutationFn: deleteCollection,
-    onSuccess: () => {
-      queryClient.invalidateQueries({ queryKey: ['collections'] })
-    },
-  })
-
-  const handleDelete = (name: string) => {
-    if (window.confirm(`Are you sure you want to delete collection "${name}"?`)) {
-      deleteMutation.mutate(name)
-    }
-  }
-
-  return (
-    <div className="overflow-x-auto shadow-md sm:rounded-lg bg-white border border-gray-200">
-      <table className="min-w-full text-sm text-left text-gray-500">
-        <thead className="text-xs text-gray-700 uppercase bg-gray-50 border-b border-gray-200">
-          <tr>
-            <th scope="col" className="px-6 py-3 font-semibold">
-              Name
-            </th>
-            <th scope="col" className="px-6 py-3 font-semibold">
-              Item Count
-            </th>
-            <th scope="col" className="px-6 py-3 font-semibold">
-              Actions
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          {collections.map((collection, index) => (
-            <tr
-              key={collection.name}
-              className={`border-b border-gray-100 hover:bg-gray-50 transition-colors ${
-                index % 2 === 0 ? 'bg-white' : 'bg-gray-50/50'
-              }`}
-            >
-              <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap">
-                {collection.name}
-              </td>
-              <td className="px-6 py-4 font-mono text-gray-600">
-                {collection.count.toLocaleString()}
-              </td>
-              <td className="px-6 py-4 space-x-2">
-                <button
-                  onClick={() => navigate(`/plot?collection=${collection.name}`)}
-                  className="font-medium text-blue-600 dark:text-blue-500 hover:underline hover:text-blue-800 transition-colors"
-                >
-                  Visualize
-                </button>
-                <span className="text-gray-300">|</span>
-                <button
-                  onClick={() => handleDelete(collection.name)}
-                  className="font-medium text-red-600 dark:text-red-500 hover:underline hover:text-red-800 transition-colors"
-                  disabled={deleteMutation.isPending}
-                >
-                  {deleteMutation.isPending ? 'Deleting...' : 'Delete'}
-                </button>
-              </td>
-            </tr>
-          ))}
-        </tbody>
-      </table>
-    </div>
-  )
-}
diff --git a/frontend/src/pages/CollectionsPage.tsx b/frontend/src/pages/CollectionsPage.tsx
deleted file mode 100644
index f5d5db8..0000000
--- a/frontend/src/pages/CollectionsPage.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { fetchCollections } from '../api/collections'
-import CollectionList from '../components/collections/CollectionList'
-
-export default function CollectionsPage() {
-  const { data: collections, isLoading, isError } = useQuery({
-    queryKey: ['collections'],
-    queryFn: fetchCollections,
-  })
-
-  return (
-    <div className="p-6 max-w-7xl mx-auto">
-      <div className="mb-6 border-b pb-4 border-gray-200">
-        <h1 className="text-3xl font-bold mb-2 text-gray-900">Collections</h1>
-        <p className="text-gray-500 text-lg">Manage your ChromaDB collections</p>
-      </div>
-
-      {isLoading && (
-        <div className="flex justify-center items-center py-20">
-          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
-          <span className="ml-3 text-gray-500 text-lg">Loading collections...</span>
-        </div>
-      )}
-
-      {isError && (
-        <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative" role="alert">
-          <strong className="font-bold">Error!</strong>
-          <span className="block sm:inline"> Failed to fetch collections. Please make sure the backend is running.</span>
-        </div>
-      )}
-
-      {!isLoading && !isError && collections && collections.length === 0 && (
-        <div className="text-center py-20 bg-gray-50 rounded-lg border-2 border-dashed border-gray-300">
-          <p className="text-gray-500 text-xl">No collections found</p>
-          <p className="text-gray-400 mt-2">Index some data to get started</p>
-        </div>
-      )}
-
-      {!isLoading && !isError && collections && collections.length > 0 && (
-        <CollectionList collections={collections} />
-      )}
-    </div>
-  )
-}
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
new file mode 100644
index 0000000..0c5196c
--- /dev/null
+++ b/frontend/src/pages/HomePage.tsx
@@ -0,0 +1,85 @@
+import { useQuery } from '@tanstack/react-query'
+import { Link } from 'react-router-dom'
+import { fetchCollections } from '../api/collections'
+import StatsBar from '../components/home/StatsBar'
+import CollectionGrid from '../components/home/CollectionGrid'
+import EmptyState from '../components/home/EmptyState'
+
+export default function HomePage() {
+  const { data: collections, isLoading, isError } = useQuery({
+    queryKey: ['collections'],
+    queryFn: fetchCollections,
+  })
+
+  const totalItems = collections?.reduce((sum, c) => sum + c.count, 0) ?? 0
+
+  return (
+    <div className="p-6 max-w-7xl mx-auto">
+      <div className="mb-6 border-b pb-4 border-gray-200">
+        <h1 className="text-3xl font-bold mb-2 text-gray-900">Dashboard</h1>
+        <p className="text-gray-500 text-lg">
+          Manage your embedding collections
+        </p>
+      </div>
+
+      {isLoading && (
+        <div className="flex justify-center items-center py-20">
+          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-gray-900"></div>
+          <span className="ml-3 text-gray-500 text-lg">
+            Loading collections...
+          </span>
+        </div>
+      )}
+
+      {isError && (
+        <div
+          className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded relative"
+          role="alert"
+        >
+          <strong className="font-bold">Error!</strong>
+          <span className="block sm:inline">
+            {' '}
+            Failed to fetch collections. Please make sure the backend is
+            running.
+          </span>
+        </div>
+      )}
+
+      {!isLoading && !isError && collections && (
+        <>
+          <StatsBar
+            collectionCount={collections.length}
+            totalItems={totalItems}
+          />
+
+          <Link
+            to="/index"
+            className="mb-8 flex items-center justify-center rounded-lg border-2 border-dashed border-blue-300 bg-blue-50 p-6 text-blue-700 hover:bg-blue-100 hover:border-blue-400 transition-colors group"
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              className="h-6 w-6 mr-2 group-hover:scale-110 transition-transform"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke="currentColor"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 4v16m8-8H4"
+              />
+            </svg>
+            <span className="text-lg font-medium">Index New Data</span>
+          </Link>
+
+          {collections.length === 0 ? (
+            <EmptyState />
+          ) : (
+            <CollectionGrid collections={collections} />
+          )}
+        </>
+      )}
+    </div>
+  )
+}