[STORY] Enhanced Repo Details Card #60
Description
Part of: #53
Story: Enhanced Repo Details Card
Feature: Web UI Integration
Priority: P1
Overview
As a CIDX Web UI user
I want to see comprehensive index metadata and health status in the repository details card
So that I can understand my index configuration and verify its integrity visually
Context
The Web UI has an existing repository details component. This story enhances it to display:
- Voyage-AI model information
- Vector storage details (count, files, dimensions, path, index files/sizes)
- Temporal index presence and metadata
- Last index datetime
- Full HNSW health check results
Acceptance Criteria
Feature: Enhanced Repo Details Card
Scenario: Display Voyage-AI model information
Given a repository is selected in the Web UI
When the repo details card is displayed
Then the embedding model name is shown (e.g., "voyage-3")
And the embedding dimensions are displayed (e.g., "1024")
Scenario: Display vector storage information
Given a repository with indexed vectors exists
When the repo details card is displayed
Then total vector count is shown
And number of indexed files is shown
And index path is displayed
And index file sizes are shown (HNSW bin, FTS, etc.)
Scenario: Display temporal index metadata
Given a repository with temporal indexing enabled
When the repo details card is displayed
Then temporal index presence is indicated
And temporal index metadata is shown (commit range, file count, etc.)
Scenario: Display temporal index absence
Given a repository without temporal indexing
When the repo details card is displayed
Then "Temporal index: Not configured" is shown
And suggestion to enable temporal indexing may be displayed
Scenario: Display last index datetime
Given a repository has been indexed
When the repo details card is displayed
Then the last indexing timestamp is shown
And relative time is displayed (e.g., "2 hours ago")
Scenario: Display healthy HNSW status
Given a repository with healthy HNSW index
When the repo details card is displayed
Then health status shows "Healthy" with green indicator
And integrity metrics are shown (element count, connections)
And last check time is displayed
Scenario: Display unhealthy HNSW status
Given a repository with corrupted HNSW index
When the repo details card is displayed
Then health status shows "Unhealthy" with red indicator
And error summary is displayed
And recommendation to re-index is shown
Scenario: Trigger manual health check
Given a repository details card is displayed
When user clicks "Check Health" button
Then a fresh health check is triggered (force_refresh=true)
And loading indicator is shown during check
And results update when check completes
Scenario: Health check loading state
Given a health check is in progress
When viewing the repo details card
Then a loading spinner is shown in health section
And previous results are dimmed or hidden
And user cannot trigger another checkTechnical Requirements
Component Structure
Pseudocode:
RepoDetailsCard:
├── Header (repo name, alias)
│
├── EmbeddingInfo
│ ├── Model name (voyage-3, voyage-3-large)
│ └── Dimensions (1024, 1536)
│
├── VectorStorageInfo
│ ├── Total vector count
│ ├── Indexed file count
│ ├── Index path
│ └── Index file sizes (HNSW, FTS, SCIP)
│
├── TemporalIndexInfo
│ ├── Enabled/Disabled status
│ └── Metadata (if enabled)
│
├── LastIndexedInfo
│ ├── Timestamp
│ └── Relative time
│
└── HNSWHealthInfo
├── Status indicator (green/yellow/red)
├── Health metrics
├── Errors (if any)
├── Last check time
└── "Check Health" button
API Calls Required
- Repository metadata: Existing endpoint for basic info
- Index statistics: May need new endpoint or enhanced existing
- Health check: Uses new REST endpoint from Story 4
Pseudocode for data fetching:
async function loadRepoDetails(repoAlias):
// Parallel fetch for performance
[metadata, stats, health] = await Promise.all([
fetchRepoMetadata(repoAlias),
fetchIndexStatistics(repoAlias),
fetchHealthStatus(repoAlias)
])
return {
embedding: {
model: metadata.embedding_model,
dimensions: metadata.embedding_dimensions
},
storage: {
vectorCount: stats.vector_count,
fileCount: stats.file_count,
indexPath: stats.index_path,
indexSizes: stats.index_file_sizes
},
temporal: {
enabled: stats.temporal_enabled,
metadata: stats.temporal_metadata
},
lastIndexed: stats.last_indexed_at,
health: health
}
Health Status Display Logic
Pseudocode:
function getHealthDisplay(health):
if health.valid:
return {
status: "Healthy",
color: "green",
icon: "check-circle"
}
else if health.loadable and not health.valid:
return {
status: "Integrity Issues",
color: "red",
icon: "x-circle",
errorSummary: health.errors[0]
}
else if not health.file_exists:
return {
status: "Not Found",
color: "gray",
icon: "question-circle"
}
else:
return {
status: "Error",
color: "orange",
icon: "alert-triangle",
errorSummary: health.errors[0]
}
UI Layout (Descriptive)
┌─────────────────────────────────────────────────────────┐
│ Repository: my-project-global │
├─────────────────────────────────────────────────────────┤
│ EMBEDDING MODEL │
│ Model: voyage-3 │
│ Dimensions: 1024 │
├─────────────────────────────────────────────────────────┤
│ VECTOR STORAGE │
│ Vectors: 46,234 │
│ Indexed Files: 1,523 │
│ Path: /data/repos/my-project/.code-indexer/index/ │
│ HNSW Index: 45.2 MB │
│ FTS Index: 12.8 MB │
│ SCIP Index: 8.4 MB │
├─────────────────────────────────────────────────────────┤
│ TEMPORAL INDEX │
│ Status: Enabled │
│ Commits Indexed: 2,456 │
│ Date Range: 2022-01-15 to 2024-01-20 │
├─────────────────────────────────────────────────────────┤
│ LAST INDEXED │
│ 2024-01-20 14:32:15 (2 hours ago) │
├─────────────────────────────────────────────────────────┤
│ INDEX HEALTH [Check Now] │
│ ● Healthy │
│ Elements: 46,234 │
│ Connections Checked: 1,234,567 │
│ Last Check: 5 minutes ago │
└─────────────────────────────────────────────────────────┘
Error State Display
When index is unhealthy:
│ INDEX HEALTH [Check Now] │
│ ● Unhealthy │
│ Errors: 2 integrity violations found │
│ - Element 12345 has orphaned connections │
│ - Element 67890 has broken neighbor link │
│ Recommendation: Re-index repository │
│ Last Check: 1 minute ago │
Implementation Status
| Task | Status | Notes |
|---|---|---|
| Component design | ❌ | Layout and sections |
| EmbeddingInfo section | ❌ | Model and dimensions |
| VectorStorageInfo section | ❌ | Counts, paths, sizes |
| TemporalIndexInfo section | ❌ | Status and metadata |
| LastIndexedInfo section | ❌ | Timestamp display |
| HNSWHealthInfo section | ❌ | Status, metrics, errors |
| Health check button | ❌ | Trigger force_refresh |
| Loading states | ❌ | Spinner, disabled button |
| API integration | ❌ | Fetch and display data |
| Responsive design | ❌ | Mobile/tablet views |
Testing Requirements
Unit Tests
- Component renders with valid data
- Health status colors correct for each state
- Loading state displays correctly
- Error states handled gracefully
- Button triggers health check
Integration Tests
- Data fetches successfully from API
- Health check button triggers API call
- Results update after check completes
- Concurrent requests handled
Visual/E2E Tests
- Layout matches design spec
- Responsive behavior on different screens
- Color indicators visible and accessible
- Loading animations smooth
Accessibility Tests
- Color indicators have text alternatives
- Screen reader announcements for status
- Keyboard navigation works
- Focus management during loading
Definition of Done
- All UI sections implemented per spec
- Embedding model info displayed
- Vector storage details complete
- Temporal index status shown
- Last indexed timestamp with relative time
- HNSW health status with metrics
- Check Health button functional
- Loading states implemented
- Error states handled gracefully
- Unit tests pass
- Visual tests pass
- Accessibility requirements met
- Responsive design verified
Conversation References
- Web UI details requirement: "Show Voyage-AI model info"
- Web UI details requirement: "Vector storage info (count, files, dims, path, index files/sizes)"
- Web UI details requirement: "Temporal index presence and metadata"
- Web UI details requirement: "Last index datetime"
- Web UI details requirement: "Full HNSW health check results"
- Priority: "P1" as specified in Feature/Story Structure