voyageai-cli 1.24.0 → 1.26.0

package/src/lib/templates/nextjs/page-home.jsx.tpl

@@ -0,0 +1,201 @@
+/**
+ * Landing Page — branded hero with quick stats
+ * Generated by vai v{{vaiVersion}} on {{generatedAt}}
+ */
+
+'use client';
+
+import {
+  Box,
+  Container,
+  Typography,
+  Button,
+  Grid,
+  Card,
+  CardContent,
+  Stack,
+  Chip,
+  useTheme,
+  alpha,
+} from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
+import StorageIcon from '@mui/icons-material/Storage';
+import BoltIcon from '@mui/icons-material/Bolt';
+import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+const features = [
+  {
+    icon: <AutoAwesomeIcon />,
+    title: 'Voyage AI Embeddings',
+    desc: 'State-of-the-art {{model}} model with {{dimensions}}-dimensional vectors for precise semantic understanding.',
+  },
+  {
+    icon: <StorageIcon />,
+    title: 'MongoDB Atlas Vector Search',
+    desc: 'Lightning-fast approximate nearest-neighbor search on your {{db}}.{{collection}} collection.',
+  },
+  {
+    icon: <BoltIcon />,
+    title: 'Full RAG Pipeline',
+    desc: 'Ingest, chunk, embed, store, and search — a complete retrieval-augmented generation stack out of the box.',
+  },
+];
+
+export default function HomePage() {
+  const theme = useTheme();
+
+  return (
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <Navbar />
+
+      {/* ── Hero ──────────────────────────────── */}
+      <Box
+        sx={{
+          position: 'relative',
+          overflow: 'hidden',
+          pt: { xs: 8, md: 14 },
+          pb: { xs: 8, md: 12 },
+        }}
+      >
+        {/* gradient accent */}
+        <Box
+          sx={{
+            position: 'absolute',
+            top: -120,
+            right: -120,
+            width: 480,
+            height: 480,
+            borderRadius: '50%',
+            background: `radial-gradient(circle, ${alpha(theme.palette.primary.main, 0.15)} 0%, transparent 70%)`,
+            pointerEvents: 'none',
+          }}
+        />
+
+        <Container maxWidth="md" sx={{ position: 'relative', textAlign: 'center' }}>
+          <Box
+            component="img"
+            src="/vai-logo.png"
+            alt="vai logo"
+            sx={{ width: 64, height: 64, mb: 2, mx: 'auto', display: 'block' }}
+          />
+
+          <Chip
+            label="Scaffolded with vai"
+            size="small"
+            color="success"
+            sx={{ mb: 3 }}
+          />
+
+          <Typography variant="h2" component="h1" gutterBottom>
+            <Box
+              component="span"
+              sx={{
+                background: `linear-gradient(135deg, ${theme.palette.primary.main}, ${theme.palette.primary.light})`,
+                WebkitBackgroundClip: 'text',
+                WebkitTextFillColor: 'transparent',
+              }}
+            >
+              {{projectName}}
+            </Box>
+          </Typography>
+
+          <Typography variant="h5" component="p" color="text.secondary" gutterBottom>
+            Semantic search powered by Voyage AI
+          </Typography>
+
+          <Typography
+            variant="h6"
+            color="text.secondary"
+            sx={{ maxWidth: 560, mx: 'auto', mb: 4, fontWeight: 400 }}
+          >
+            Ask questions in natural language and find the most relevant documents
+            using vector embeddings{{#if rerank}} with reranking{{/if}}.
+          </Typography>
+
+          <Stack direction="row" spacing={2} justifyContent="center">
+            <Button
+              variant="contained"
+              size="large"
+              href="/search"
+              startIcon={<SearchIcon />}
+              sx={{ px: 4 }}
+            >
+              Try Search
+            </Button>
+            <Button
+              variant="outlined"
+              size="large"
+              href="/api/health"
+              sx={{ px: 4 }}
+            >
+              API Health
+            </Button>
+          </Stack>
+        </Container>
+      </Box>
+
+      {/* ── Feature cards ────────────────────── */}
+      <Container maxWidth="lg" sx={{ pb: 10 }}>
+        <Grid container spacing={3}>
+          {features.map((f, i) => (
+            <Grid item xs={12} md={4} key={i}>
+              <Card sx={{ height: '100%' }}>
+                <CardContent sx={{ p: 3 }}>
+                  <Box
+                    sx={{
+                      width: 48,
+                      height: 48,
+                      borderRadius: 2,
+                      display: 'flex',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                      mb: 2,
+                      bgcolor: alpha(theme.palette.primary.main, 0.1),
+                      color: 'primary.main',
+                    }}
+                  >
+                    {f.icon}
+                  </Box>
+                  <Typography variant="h6" gutterBottom>
+                    {f.title}
+                  </Typography>
+                  <Typography variant="body2" color="text.secondary">
+                    {f.desc}
+                  </Typography>
+                </CardContent>
+              </Card>
+            </Grid>
+          ))}
+        </Grid>
+
+        {/* ── Config overview ────────────────── */}
+        <Box
+          sx={{
+            mt: 6,
+            p: 3,
+            borderRadius: 3,
+            bgcolor: theme.palette.mode === 'dark' ? 'rgba(255,255,255,0.03)' : 'grey.50',
+            border: `1px solid ${theme.palette.divider}`,
+          }}
+        >
+          <Typography variant="overline" color="text.secondary" gutterBottom>
+            Configuration
+          </Typography>
+          <Stack direction="row" flexWrap="wrap" gap={1} sx={{ mt: 1 }}>
+            <Chip label="Model: {{model}}" size="small" variant="outlined" sx={{ fontFamily: 'monospace' }} />
+            <Chip label="Dims: {{dimensions}}" size="small" variant="outlined" sx={{ fontFamily: 'monospace' }} />
+            <Chip label="DB: {{db}}.{{collection}}" size="small" variant="outlined" sx={{ fontFamily: 'monospace' }} />
+            <Chip label="Index: {{index}}" size="small" variant="outlined" sx={{ fontFamily: 'monospace' }} />
+            {{#if rerank}}
+            <Chip label="Rerank: {{rerankModel}}" size="small" color="success" sx={{ fontFamily: 'monospace' }} />
+            {{/if}}
+          </Stack>
+        </Box>
+      </Container>
+
+      <Footer />
+    </Box>
+  );
+}

package/src/lib/templates/nextjs/page-search.jsx.tpl

@@ -1,5 +1,5 @@
 /**
- * Search Page (MUI)
+ * Search Page — branded semantic search UI
  * Generated by vai v{{vaiVersion}} on {{generatedAt}}
  */
 
@@ -14,21 +14,52 @@ import {
   Card,
   CardContent,
   Typography,
-  List,
-  ListItem,
   Chip,
   CircularProgress,
   Alert,
   InputAdornment,
+  Stack,
+  LinearProgress,
+  Tooltip,
+  IconButton,
+  Fade,
+  useTheme,
+  alpha,
 } from '@mui/material';
 import SearchIcon from '@mui/icons-material/Search';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Navbar from '@/components/Navbar';
+import Footer from '@/components/Footer';
+
+function ScoreBar({ score }) {
+  const pct = Math.round(score * 100);
+  const color = pct >= 80 ? 'success' : pct >= 50 ? 'primary' : 'warning';
+  return (
+    <Tooltip title={`Relevance: ${score.toFixed(4)}`}>
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, minWidth: 120 }}>
+        <LinearProgress
+          variant="determinate"
+          value={pct}
+          color={color}
+          sx={{ flex: 1, height: 6, borderRadius: 3 }}
+        />
+        <Typography variant="caption" fontWeight={700} sx={{ fontFamily: 'monospace', minWidth: 36 }}>
+          {pct}%
+        </Typography>
+      </Box>
+    </Tooltip>
+  );
+}
 
 export default function SearchPage() {
+  const theme = useTheme();
   const [query, setQuery] = useState('');
   const [results, setResults] = useState([]);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState(null);
   const [meta, setMeta] = useState(null);
+  const [copied, setCopied] = useState(null);
 
   const handleSearch = async (e) => {
     e.preventDefault();
@@ -60,88 +91,159 @@ export default function SearchPage() {
     }
   };
 
+  const copyText = (text, idx) => {
+    navigator.clipboard.writeText(text);
+    setCopied(idx);
+    setTimeout(() => setCopied(null), 1500);
+  };
+
   return (
-    <Container maxWidth="md" sx={{ py: 4 }}>
-      <Typography variant="h4" component="h1" gutterBottom>
-        Semantic Search
-      </Typography>
-      
-      <Typography variant="body1" color="text.secondary" sx={{ mb: 3 }}>
-        Search your documents using {{model}} embeddings
-        {{#if rerank}} with {{rerankModel}} reranking{{/if}}.
-      </Typography>
-
-      <Box component="form" onSubmit={handleSearch} sx={{ mb: 4 }}>
-        <TextField
-          fullWidth
-          value={query}
-          onChange={(e) => setQuery(e.target.value)}
-          placeholder="Enter your search query..."
-          variant="outlined"
-          InputProps={{
-            startAdornment: (
-              <InputAdornment position="start">
-                <SearchIcon />
-              </InputAdornment>
-            ),
-            endAdornment: (
-              <InputAdornment position="end">
-                <Button
-                  type="submit"
-                  variant="contained"
-                  disabled={loading || !query.trim()}
-                >
-                  {loading ? <CircularProgress size={24} /> : 'Search'}
-                </Button>
-              </InputAdornment>
-            ),
-          }}
-        />
-      </Box>
+    <Box sx={{ display: 'flex', flexDirection: 'column', minHeight: '100vh' }}>
+      <Navbar />
+
+      <Container maxWidth="md" sx={{ py: 5, flex: 1 }}>
+        {/* Header */}
+        <Stack direction="row" alignItems="center" spacing={1} sx={{ mb: 1 }}>
+          <IconButton href="/" size="small" sx={{ color: 'text.secondary' }}>
+            <ArrowBackIcon fontSize="small" />
+          </IconButton>
+          <Typography variant="h4" component="h1" fontWeight={800}>
+            Semantic Search
+          </Typography>
+        </Stack>
 
-      {error && (
-        <Alert severity="error" sx={{ mb: 3 }}>
-          {error}
-        </Alert>
-      )}
-
-      {meta && (
-        <Box sx={{ mb: 2, display: 'flex', gap: 1 }}>
-          <Chip label={`${results.length} results`} size="small" />
-          <Chip label={`${meta.took}ms`} size="small" variant="outlined" />
-          <Chip label={meta.model} size="small" variant="outlined" />
+        <Typography variant="subtitle1" sx={{ mb: 4, pl: 5.5 }}>
+          Using <strong>{{model}}</strong> embeddings{{#if rerank}} with <strong>{{rerankModel}}</strong> reranking{{/if}}
+        </Typography>
+
+        {/* Search form */}
+        <Box component="form" onSubmit={handleSearch} sx={{ mb: 4 }}>
+          <TextField
+            fullWidth
+            value={query}
+            onChange={(e) => setQuery(e.target.value)}
+            placeholder="Ask a question in natural language…"
+            variant="outlined"
+            autoFocus
+            InputProps={{
+              startAdornment: (
+                <InputAdornment position="start">
+                  <SearchIcon sx={{ color: 'primary.main' }} />
+                </InputAdornment>
+              ),
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Button
+                    type="submit"
+                    variant="contained"
+                    disabled={loading || !query.trim()}
+                    sx={{ minWidth: 100 }}
+                  >
+                    {loading ? <CircularProgress size={22} color="inherit" /> : 'Search'}
+                  </Button>
+                </InputAdornment>
+              ),
+              sx: { pr: 1 },
+            }}
+          />
         </Box>
-      )}
-
-      <List>
-        {results.map((result, index) => (
-          <ListItem key={index} sx={{ px: 0 }}>
-            <Card sx={{ width: '100%' }}>
-              <CardContent>
-                <Box sx={{ display: 'flex', justifyContent: 'space-between', mb: 1 }}>
-                  <Typography variant="subtitle2" color="text.secondary">
-                    {result.metadata?.source || 'Document'}
+
+        {/* Error */}
+        {error && (
+          <Alert severity="error" sx={{ mb: 3, borderRadius: 2 }}>
+            {error}
+          </Alert>
+        )}
+
+        {/* Meta chips */}
+        {meta && (
+          <Stack direction="row" spacing={1} sx={{ mb: 3 }} flexWrap="wrap">
+            <Chip label={`${results.length} results`} size="small" color="primary" />
+            <Chip label={`${meta.took} ms`} size="small" variant="outlined" />
+            <Chip label={meta.model} size="small" variant="outlined" sx={{ fontFamily: 'monospace', fontSize: '0.7rem' }} />
+            {{#if rerank}}
+            <Chip label={`reranked: ${meta.rerankModel}`} size="small" color="success" sx={{ fontFamily: 'monospace', fontSize: '0.7rem' }} />
+            {{/if}}
+          </Stack>
+        )}
+
+        {/* Results */}
+        <Stack spacing={2}>
+          {results.map((result, index) => (
+            <Fade in key={index} timeout={200 + index * 80}>
+              <Card>
+                <CardContent sx={{ p: 3, '&:last-child': { pb: 3 } }}>
+                  <Stack direction="row" justifyContent="space-between" alignItems="center" sx={{ mb: 1.5 }}>
+                    <Stack direction="row" alignItems="center" spacing={1}>
+                      <Chip
+                        label={`#${index + 1}`}
+                        size="small"
+                        sx={{
+                          fontWeight: 700,
+                          bgcolor: alpha(theme.palette.primary.main, 0.1),
+                          color: 'primary.dark',
+                        }}
+                      />
+                      {result.metadata?.source && (
+                        <Typography variant="caption" color="text.secondary" fontFamily="monospace">
+                          {result.metadata.source}
+                        </Typography>
+                      )}
+                    </Stack>
+                    <ScoreBar score={result.score} />
+                  </Stack>
+
+                  <Typography
+                    variant="body2"
+                    sx={{
+                      whiteSpace: 'pre-wrap',
+                      lineHeight: 1.7,
+                      color: 'text.primary',
+                    }}
+                  >
+                    {result.text}
                   </Typography>
-                  <Chip
-                    label={`Score: ${result.score.toFixed(3)}`}
-                    size="small"
-                    color={result.score > 0.8 ? 'success' : 'default'}
-                  />
-                </Box>
-                <Typography variant="body2" sx={{ whiteSpace: 'pre-wrap' }}>
-                  {result.text}
-                </Typography>
-              </CardContent>
-            </Card>
-          </ListItem>
-        ))}
-      </List>
-
-      {results.length === 0 && !loading && query && !error && (
-        <Typography color="text.secondary" align="center">
-          No results found for "{query}"
-        </Typography>
-      )}
-    </Container>
+
+                  <Stack direction="row" justifyContent="flex-end" sx={{ mt: 1.5 }}>
+                    <Tooltip title={copied === index ? 'Copied!' : 'Copy text'}>
+                      <IconButton size="small" onClick={() => copyText(result.text, index)}>
+                        <ContentCopyIcon fontSize="small" />
+                      </IconButton>
+                    </Tooltip>
+                  </Stack>
+                </CardContent>
+              </Card>
+            </Fade>
+          ))}
+        </Stack>
+
+        {/* Empty state */}
+        {results.length === 0 && !loading && query && !error && (
+          <Box sx={{ textAlign: 'center', py: 8 }}>
+            <Typography variant="h6" color="text.secondary" gutterBottom>
+              No results found
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Try rephrasing your query or ingest some documents first.
+            </Typography>
+          </Box>
+        )}
+
+        {/* Initial state */}
+        {!meta && !loading && !error && (
+          <Box sx={{ textAlign: 'center', py: 8 }}>
+            <SearchIcon sx={{ fontSize: 48, color: 'text.disabled', mb: 2 }} />
+            <Typography variant="h6" color="text.secondary" gutterBottom>
+              Start searching
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Enter a natural-language query to find semantically similar documents.
+            </Typography>
+          </Box>
+        )}
+      </Container>
+
+      <Footer />
+    </Box>
   );
 }

package/src/lib/templates/nextjs/theme-registry.jsx.tpl

@@ -0,0 +1,51 @@
+/**
+ * Theme Registry — light/dark toggle with localStorage persistence
+ * Generated by vai v{{vaiVersion}} on {{generatedAt}}
+ */
+
+'use client';
+
+import { createContext, useContext, useMemo, useState, useEffect } from 'react';
+import { ThemeProvider } from '@mui/material/styles';
+import CssBaseline from '@mui/material/CssBaseline';
+import { lightTheme, darkTheme } from '@/lib/theme';
+
+const ColorModeContext = createContext({ toggle: () => {}, mode: 'light' });
+
+export function useColorMode() {
+  return useContext(ColorModeContext);
+}
+
+export function ThemeRegistry({ children }) {
+  const [mode, setMode] = useState('light');
+
+  useEffect(() => {
+    const stored = localStorage.getItem('vai-color-mode');
+    if (stored === 'dark' || stored === 'light') {
+      setMode(stored);
+    } else if (window.matchMedia?.('(prefers-color-scheme: dark)').matches) {
+      setMode('dark');
+    }
+  }, []);
+
+  const colorMode = useMemo(() => ({
+    mode,
+    toggle: () =>
+      setMode((prev) => {
+        const next = prev === 'light' ? 'dark' : 'light';
+        localStorage.setItem('vai-color-mode', next);
+        return next;
+      }),
+  }), [mode]);
+
+  const theme = mode === 'dark' ? darkTheme : lightTheme;
+
+  return (
+    <ColorModeContext.Provider value={colorMode}>
+      <ThemeProvider theme={theme}>
+        <CssBaseline />
+        {children}
+      </ThemeProvider>
+    </ColorModeContext.Provider>
+  );
+}