@gmickel/gno 0.3.4 → 0.4.0

package/src/serve/public/pages/DocView.tsx

@@ -0,0 +1,302 @@
+import {
+  ArrowLeft,
+  Calendar,
+  FileText,
+  FolderOpen,
+  HardDrive,
+} from 'lucide-react';
+import { useEffect, useState } from 'react';
+import {
+  CodeBlock,
+  CodeBlockCopyButton,
+} from '../components/ai-elements/code-block';
+import { Loader } from '../components/ai-elements/loader';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from '../components/ui/card';
+import { Separator } from '../components/ui/separator';
+import { apiFetch } from '../hooks/use-api';
+
+interface PageProps {
+  navigate: (to: string | number) => void;
+}
+
+interface DocData {
+  docid: string;
+  uri: string;
+  title: string | null;
+  content: string | null;
+  contentAvailable: boolean;
+  collection: string;
+  relPath: string;
+  source: {
+    mime: string;
+    ext: string;
+    modifiedAt?: string;
+    sizeBytes?: number;
+  };
+}
+
+function formatBytes(bytes: number): string {
+  if (bytes === 0) {
+    return '0 B';
+  }
+  const k = 1024;
+  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  return `${Number.parseFloat((bytes / k ** i).toFixed(1))} ${sizes[i]}`;
+}
+
+function formatDate(dateStr: string): string {
+  try {
+    return new Date(dateStr).toLocaleDateString('en-US', {
+      year: 'numeric',
+      month: 'short',
+      day: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  } catch {
+    return dateStr;
+  }
+}
+
+// Shiki BundledLanguage subset we actually use
+type SupportedLanguage =
+  | 'markdown'
+  | 'javascript'
+  | 'jsx'
+  | 'typescript'
+  | 'tsx'
+  | 'python'
+  | 'rust'
+  | 'go'
+  | 'json'
+  | 'yaml'
+  | 'html'
+  | 'css'
+  | 'sql'
+  | 'bash'
+  | 'text';
+
+function getLanguageFromExt(ext: string): SupportedLanguage {
+  const map: Record<string, SupportedLanguage> = {
+    '.md': 'markdown',
+    '.markdown': 'markdown',
+    '.js': 'javascript',
+    '.jsx': 'jsx',
+    '.ts': 'typescript',
+    '.tsx': 'tsx',
+    '.py': 'python',
+    '.rs': 'rust',
+    '.go': 'go',
+    '.json': 'json',
+    '.yaml': 'yaml',
+    '.yml': 'yaml',
+    '.html': 'html',
+    '.css': 'css',
+    '.sql': 'sql',
+    '.sh': 'bash',
+    '.bash': 'bash',
+  };
+  return map[ext.toLowerCase()] || 'text';
+}
+
+export default function DocView({ navigate }: PageProps) {
+  const [doc, setDoc] = useState<DocData | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    const uri = params.get('uri');
+
+    if (!uri) {
+      setError('No document URI provided');
+      setLoading(false);
+      return;
+    }
+
+    apiFetch<DocData>(`/api/doc?uri=${encodeURIComponent(uri)}`).then(
+      ({ data, error }) => {
+        setLoading(false);
+        if (error) {
+          setError(error);
+        } else if (data) {
+          setDoc(data);
+        }
+      }
+    );
+  }, []);
+
+  const isCodeFile =
+    doc?.source.ext &&
+    [
+      '.md',
+      '.js',
+      '.jsx',
+      '.ts',
+      '.tsx',
+      '.py',
+      '.rs',
+      '.go',
+      '.json',
+      '.yaml',
+      '.yml',
+      '.html',
+      '.css',
+      '.sql',
+      '.sh',
+      '.bash',
+    ].includes(doc.source.ext.toLowerCase());
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="glass sticky top-0 z-10 border-border/50 border-b">
+        <div className="flex items-center gap-4 px-8 py-4">
+          <Button
+            className="gap-2"
+            onClick={() => navigate(-1)}
+            size="sm"
+            variant="ghost"
+          >
+            <ArrowLeft className="size-4" />
+            Back
+          </Button>
+          <Separator className="h-6" orientation="vertical" />
+          <div className="flex min-w-0 flex-1 items-center gap-2">
+            <FileText className="size-4 shrink-0 text-muted-foreground" />
+            <h1 className="truncate font-semibold text-xl">
+              {doc?.title || 'Document'}
+            </h1>
+          </div>
+          {doc?.source.ext && (
+            <Badge className="shrink-0 font-mono" variant="outline">
+              {doc.source.ext}
+            </Badge>
+          )}
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-5xl p-8">
+        {/* Loading */}
+        {loading && (
+          <div className="flex flex-col items-center justify-center gap-4 py-20">
+            <Loader className="text-primary" size={32} />
+            <p className="text-muted-foreground">Loading document...</p>
+          </div>
+        )}
+
+        {/* Error */}
+        {error && (
+          <Card className="border-destructive bg-destructive/10">
+            <CardContent className="py-6 text-center">
+              <FileText className="mx-auto mb-4 size-12 text-destructive" />
+              <h3 className="mb-2 font-medium text-destructive text-lg">
+                Failed to load document
+              </h3>
+              <p className="text-muted-foreground">{error}</p>
+            </CardContent>
+          </Card>
+        )}
+
+        {/* Document */}
+        {doc && (
+          <div className="animate-fade-in space-y-6 opacity-0">
+            {/* Metadata */}
+            <Card>
+              <CardContent className="py-4">
+                <div className="grid gap-4 sm:grid-cols-3">
+                  <div className="flex items-center gap-3">
+                    <FolderOpen className="size-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-muted-foreground text-xs">
+                        Collection
+                      </div>
+                      <div className="font-medium">
+                        {doc.collection || 'Unknown'}
+                      </div>
+                    </div>
+                  </div>
+                  {doc.source.sizeBytes !== undefined && (
+                    <div className="flex items-center gap-3">
+                      <HardDrive className="size-4 text-muted-foreground" />
+                      <div>
+                        <div className="text-muted-foreground text-xs">
+                          Size
+                        </div>
+                        <div className="font-medium">
+                          {formatBytes(doc.source.sizeBytes)}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                  {doc.source.modifiedAt && (
+                    <div className="flex items-center gap-3">
+                      <Calendar className="size-4 text-muted-foreground" />
+                      <div>
+                        <div className="text-muted-foreground text-xs">
+                          Modified
+                        </div>
+                        <div className="font-medium">
+                          {formatDate(doc.source.modifiedAt)}
+                        </div>
+                      </div>
+                    </div>
+                  )}
+                </div>
+                <div className="mt-4 border-border/50 border-t pt-4">
+                  <div className="mb-1 text-muted-foreground text-xs">Path</div>
+                  <code className="break-all font-mono text-muted-foreground text-sm">
+                    {doc.uri}
+                  </code>
+                </div>
+              </CardContent>
+            </Card>
+
+            {/* Content */}
+            <Card>
+              <CardHeader className="pb-0">
+                <CardTitle className="flex items-center gap-2 text-lg">
+                  <FileText className="size-4" />
+                  Content
+                </CardTitle>
+              </CardHeader>
+              <CardContent className="pt-4">
+                {!doc.contentAvailable && (
+                  <div className="rounded-lg border border-border/50 bg-muted/30 p-6 text-center">
+                    <p className="text-muted-foreground">
+                      Content not available (document may need re-indexing)
+                    </p>
+                  </div>
+                )}
+                {doc.contentAvailable && isCodeFile && (
+                  <CodeBlock
+                    code={doc.content ?? ''}
+                    language={getLanguageFromExt(doc.source.ext)}
+                    showLineNumbers
+                  >
+                    <CodeBlockCopyButton />
+                  </CodeBlock>
+                )}
+                {doc.contentAvailable && !isCodeFile && (
+                  <div className="rounded-lg border border-border/50 bg-muted/30 p-6">
+                    <pre className="whitespace-pre-wrap font-mono text-sm leading-relaxed">
+                      {doc.content}
+                    </pre>
+                  </div>
+                )}
+              </CardContent>
+            </Card>
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}

package/src/serve/public/pages/Search.tsx

@@ -0,0 +1,335 @@
+import { ArrowLeft, FileText, Search as SearchIcon, Zap } from 'lucide-react';
+import { useEffect, useState } from 'react';
+import { Loader } from '../components/ai-elements/loader';
+import { Badge } from '../components/ui/badge';
+import { Button } from '../components/ui/button';
+import { ButtonGroup } from '../components/ui/button-group';
+import { Card, CardContent } from '../components/ui/card';
+import { Input } from '../components/ui/input';
+import { apiFetch } from '../hooks/use-api';
+
+/**
+ * Render snippet with <mark> tags as highlighted spans.
+ * Only allows mark tags - strips all other HTML for safety.
+ */
+function renderSnippet(snippet: string): React.ReactNode {
+  const parts: React.ReactNode[] = [];
+  let remaining = snippet;
+  let key = 0;
+
+  while (remaining.length > 0) {
+    const markStart = remaining.indexOf('<mark>');
+    if (markStart === -1) {
+      parts.push(remaining);
+      break;
+    }
+
+    if (markStart > 0) {
+      parts.push(remaining.slice(0, markStart));
+    }
+
+    const markEnd = remaining.indexOf('</mark>', markStart);
+    if (markEnd === -1) {
+      parts.push(remaining.slice(markStart));
+      break;
+    }
+
+    const highlighted = remaining.slice(markStart + 6, markEnd);
+    parts.push(
+      <mark
+        className="rounded bg-primary/20 px-0.5 font-medium text-primary"
+        key={key++}
+      >
+        {highlighted}
+      </mark>
+    );
+    remaining = remaining.slice(markEnd + 7);
+  }
+
+  return parts;
+}
+
+interface PageProps {
+  navigate: (to: string | number) => void;
+}
+
+interface SearchResult {
+  docid: string;
+  uri: string;
+  title?: string;
+  snippet: string;
+  score: number;
+  snippetRange?: {
+    startLine: number;
+    endLine: number;
+  };
+}
+
+interface SearchResponse {
+  results: SearchResult[];
+  meta: {
+    query: string;
+    mode: string;
+    totalResults: number;
+    expanded?: boolean;
+    reranked?: boolean;
+    vectorsUsed?: boolean;
+  };
+}
+
+interface Capabilities {
+  bm25: boolean;
+  vector: boolean;
+  hybrid: boolean;
+  answer: boolean;
+}
+
+type SearchMode = 'bm25' | 'hybrid';
+
+export default function Search({ navigate }: PageProps) {
+  const [query, setQuery] = useState('');
+  const [mode, setMode] = useState<SearchMode>('bm25');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [meta, setMeta] = useState<SearchResponse['meta'] | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [searched, setSearched] = useState(false);
+  const [capabilities, setCapabilities] = useState<Capabilities | null>(null);
+
+  // Fetch capabilities on mount
+  useEffect(() => {
+    async function fetchCapabilities() {
+      const { data } = await apiFetch<Capabilities>('/api/capabilities');
+      if (data) {
+        setCapabilities(data);
+        // Auto-select hybrid if available
+        if (data.hybrid) {
+          setMode('hybrid');
+        }
+      }
+    }
+    fetchCapabilities();
+  }, []);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!query.trim()) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+    setSearched(true);
+
+    // Use /api/query for hybrid, /api/search for bm25
+    const endpoint = mode === 'hybrid' ? '/api/query' : '/api/search';
+
+    const { data, error } = await apiFetch<SearchResponse>(endpoint, {
+      method: 'POST',
+      body: JSON.stringify({ query, limit: 20 }),
+    });
+
+    setLoading(false);
+    if (error) {
+      setError(error);
+      setResults([]);
+      setMeta(null);
+    } else if (data) {
+      setResults(data.results);
+      setMeta(data.meta);
+    }
+  };
+
+  const hybridAvailable = capabilities?.hybrid ?? false;
+
+  return (
+    <div className="min-h-screen">
+      {/* Header */}
+      <header className="glass sticky top-0 z-10 border-border/50 border-b">
+        <div className="flex items-center gap-4 px-8 py-4">
+          <Button
+            className="gap-2"
+            onClick={() => navigate(-1)}
+            size="sm"
+            variant="ghost"
+          >
+            <ArrowLeft className="size-4" />
+            Back
+          </Button>
+          <h1 className="font-semibold text-xl">Search</h1>
+        </div>
+      </header>
+
+      <main className="mx-auto max-w-4xl p-8">
+        {/* Search Form */}
+        <form className="mb-8" onSubmit={handleSearch}>
+          <div className="relative">
+            <SearchIcon className="absolute top-1/2 left-4 size-5 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              className="border-border bg-card py-6 pr-4 pl-12 text-lg focus:border-primary"
+              onChange={(e) => setQuery(e.target.value)}
+              placeholder="Search your documents..."
+              type="text"
+              value={query}
+            />
+            <Button
+              className="absolute top-1/2 right-2 -translate-y-1/2"
+              disabled={loading || !query.trim()}
+              size="sm"
+              type="submit"
+            >
+              {loading ? <Loader size={16} /> : 'Search'}
+            </Button>
+          </div>
+
+          {/* Mode selector */}
+          <div className="mt-4 flex items-center gap-4">
+            <span className="text-muted-foreground text-sm">Mode:</span>
+            <ButtonGroup>
+              <Button
+                className={
+                  mode === 'bm25'
+                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                    : ''
+                }
+                onClick={() => setMode('bm25')}
+                size="sm"
+                type="button"
+                variant={mode === 'bm25' ? 'default' : 'outline'}
+              >
+                BM25
+              </Button>
+              <Button
+                className={
+                  mode === 'hybrid'
+                    ? 'bg-primary text-primary-foreground hover:bg-primary/90'
+                    : ''
+                }
+                disabled={!hybridAvailable}
+                onClick={() => setMode('hybrid')}
+                size="sm"
+                title={
+                  hybridAvailable
+                    ? 'Hybrid search with vector + reranking'
+                    : 'Hybrid search not available (no embedding model)'
+                }
+                type="button"
+                variant={mode === 'hybrid' ? 'default' : 'outline'}
+              >
+                <Zap className="mr-1 size-3" />
+                Hybrid
+              </Button>
+            </ButtonGroup>
+            <span className="text-muted-foreground/70 text-xs">
+              {mode === 'bm25'
+                ? 'Keyword-based full-text search'
+                : 'BM25 + vector + query expansion + reranking'}
+            </span>
+          </div>
+        </form>
+
+        {/* Error */}
+        {error && (
+          <Card className="mb-6 border-destructive bg-destructive/10">
+            <CardContent className="py-4 text-destructive">{error}</CardContent>
+          </Card>
+        )}
+
+        {/* Loading */}
+        {loading && (
+          <div className="flex flex-col items-center justify-center gap-4 py-20">
+            <Loader className="text-primary" size={32} />
+            <p className="text-muted-foreground">Searching...</p>
+          </div>
+        )}
+
+        {/* Empty state */}
+        {!loading && searched && results.length === 0 && !error && (
+          <div className="py-20 text-center">
+            <FileText className="mx-auto mb-4 size-12 text-muted-foreground" />
+            <h3 className="mb-2 font-medium text-lg">No results found</h3>
+            <p className="text-muted-foreground">
+              Try adjusting your search terms
+            </p>
+          </div>
+        )}
+
+        {/* Results */}
+        {!loading && results.length > 0 && (
+          <div className="space-y-4">
+            <div className="mb-6 flex items-center justify-between">
+              <p className="text-muted-foreground text-sm">
+                {results.length} result{results.length !== 1 ? 's' : ''}
+              </p>
+              {meta && (
+                <div className="flex items-center gap-2">
+                  {meta.vectorsUsed && (
+                    <Badge
+                      className="font-mono text-[10px]"
+                      variant="secondary"
+                    >
+                      vectors
+                    </Badge>
+                  )}
+                  {meta.expanded && (
+                    <Badge
+                      className="font-mono text-[10px]"
+                      variant="secondary"
+                    >
+                      expanded
+                    </Badge>
+                  )}
+                  {meta.reranked && (
+                    <Badge
+                      className="font-mono text-[10px]"
+                      variant="secondary"
+                    >
+                      reranked
+                    </Badge>
+                  )}
+                </div>
+              )}
+            </div>
+            {results.map((r, i) => (
+              <Card
+                className="group animate-fade-in cursor-pointer opacity-0 transition-all hover:border-primary/50 hover:bg-card/80"
+                key={`${r.docid}-${i}`}
+                onClick={() =>
+                  navigate(`/doc?uri=${encodeURIComponent(r.uri)}`)
+                }
+                style={{ animationDelay: `${i * 0.05}s` }}
+              >
+                <CardContent className="py-4">
+                  <div className="mb-2 flex items-start justify-between gap-4">
+                    <h3 className="font-medium text-primary underline-offset-2 group-hover:underline">
+                      {r.title || r.uri.split('/').pop()}
+                    </h3>
+                    <Badge
+                      className="shrink-0 font-mono text-xs"
+                      variant="secondary"
+                    >
+                      {(r.score * 100).toFixed(0)}%
+                    </Badge>
+                  </div>
+                  <p className="line-clamp-3 text-muted-foreground text-sm leading-relaxed">
+                    {renderSnippet(r.snippet)}
+                  </p>
+                  <div className="mt-2 flex items-center gap-2">
+                    <p className="truncate font-mono text-muted-foreground/60 text-xs">
+                      {r.uri}
+                    </p>
+                    {r.snippetRange && (
+                      <span className="shrink-0 font-mono text-[10px] text-muted-foreground/40">
+                        L{r.snippetRange.startLine}-{r.snippetRange.endLine}
+                      </span>
+                    )}
+                  </div>
+                </CardContent>
+              </Card>
+            ))}
+          </div>
+        )}
+      </main>
+    </div>
+  );
+}