@karmaniverous/jeeves-server 3.0.0-0

package/client/src/components/SearchModal.tsx

@@ -0,0 +1,424 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { ChevronDown, ChevronRight, FileText, RotateCcw, Search, X } from 'lucide-react';
+
+import { fetchFacets, searchDocuments, type SearchFacet, type SearchResult, type SearchMetadata } from '@/lib/api';
+
+type DatePreset = '24h' | '7d' | '30d' | 'custom' | null;
+
+const DATE_PRESETS: { label: string; value: DatePreset }[] = [
+  { label: '24h', value: '24h' },
+  { label: '7 days', value: '7d' },
+  { label: '30 days', value: '30d' },
+  { label: 'Custom', value: 'custom' },
+];
+
+function getPresetDate(preset: DatePreset): Date | null {
+  if (!preset || preset === 'custom') return null;
+  const now = new Date();
+  if (preset === '24h') return new Date(now.getTime() - 24 * 60 * 60 * 1000);
+  if (preset === '7d') return new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000);
+  if (preset === '30d') return new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000);
+  return null;
+}
+
+interface SearchModalProps {
+  open: boolean;
+  onClose: () => void;
+}
+
+function FilterChips({
+  label,
+  values,
+  selected,
+  onToggle,
+}: {
+  label: string;
+  values: string[];
+  selected: Set<string>;
+  onToggle: (value: string) => void;
+}) {
+  if (values.length === 0) return null;
+  return (
+    <div className="flex items-center gap-1.5 flex-wrap">
+      <span className="text-xs text-muted-foreground font-medium">{label}:</span>
+      {values.map((v) => (
+        <button
+          key={v}
+          onClick={() => onToggle(v)}
+          className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
+            selected.has(v)
+              ? 'bg-primary text-primary-foreground border-primary'
+              : 'bg-muted text-muted-foreground border-border hover:bg-accent'
+          }`}
+        >
+          {v}
+        </button>
+      ))}
+    </div>
+  );
+}
+
+function ResultRow({ result, onNavigate }: { result: SearchResult; onNavigate: (path: string) => void }) {
+  const [expanded, setExpanded] = useState(false);
+  const preview = result.chunks[0]?.text ?? '';
+  const truncatedPreview = preview.length > 150 ? preview.slice(0, 150) + '…' : preview;
+
+  return (
+    <div className="border-b border-border last:border-0 px-4 py-2">
+      <div className="flex items-start gap-2">
+        <FileText className="h-4 w-4 text-zinc-400 shrink-0 mt-1" />
+        <div className="min-w-0 flex-1">
+          {/* Header row: file name, domain, score, expand toggle */}
+          <div className="flex items-center gap-2">
+            <button
+              onClick={() => onNavigate(`/browse/${result.browsePath}`)}
+              className="text-blue-500 hover:underline text-sm font-medium truncate"
+            >
+              {result.fileName}
+            </button>
+            {result.domains && result.domains.length > 0 && (
+              <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground border border-border">
+                {result.domains.join(', ')}
+              </span>
+            )}
+            <span className="text-[10px] text-muted-foreground shrink-0">
+              {(result.bestScore * 100).toFixed(0)}%
+            </span>
+            <span className="text-[10px] text-muted-foreground shrink-0">
+              {result.chunks.length} chunk{result.chunks.length !== 1 ? 's' : ''}
+            </span>
+            {result.mtime && (
+              <span className="text-[10px] text-muted-foreground shrink-0">
+                {new Date(result.mtime).toLocaleDateString()}
+              </span>
+            )}
+            <button
+              onClick={() => setExpanded(!expanded)}
+              className="ml-auto text-muted-foreground hover:text-foreground shrink-0"
+              title={expanded ? 'Collapse chunks' : 'Expand chunks'}
+            >
+              {expanded ? <ChevronDown className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
+            </button>
+          </div>
+          <div className="text-xs text-muted-foreground mt-0.5 break-words leading-relaxed">
+            {result.browsePath}
+          </div>
+          {/* Collapsed: one-line preview */}
+          {!expanded && (
+            <div className="text-sm text-foreground/70 mt-1 truncate">
+              {truncatedPreview}
+            </div>
+          )}
+          {/* Expanded: scrollable chunk accordion */}
+          {expanded && (
+            <div className="mt-2 max-h-48 overflow-y-auto border border-border rounded bg-muted/30 divide-y divide-border">
+              {result.chunks.map((chunk, i) => (
+                <div key={i} className="px-3 py-2 text-sm text-foreground/80 leading-relaxed">
+                  <span className="text-[10px] text-muted-foreground mr-2">#{chunk.index}</span>
+                  {chunk.text}
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export function SearchModal({ open, onClose }: SearchModalProps) {
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<SearchResult[]>([]);
+  const [metadata, setMetadata] = useState<SearchMetadata>({ domains: [], authors: [], participants: [] });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [domainFilter, setDomainFilter] = useState<Set<string>>(new Set());
+  const [authorFilter, setAuthorFilter] = useState<Set<string>>(new Set());
+  const [extFilter, setExtFilter] = useState<Set<string>>(new Set());
+  const [datePreset, setDatePreset] = useState<DatePreset>(null);
+  const [dateFrom, setDateFrom] = useState('');
+  const [dateTo, setDateTo] = useState('');
+  const [facets, setFacets] = useState<SearchFacet[]>([]);
+  const [facetSelections, setFacetSelections] = useState<Record<string, Set<string>>>({});
+  const inputRef = useRef<HTMLInputElement>(null);
+  const navigate = useNavigate();
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>(undefined);
+
+  useEffect(() => {
+    if (open) {
+      setTimeout(() => inputRef.current?.focus(), 50);
+      // Fetch facets on modal open
+      void fetchFacets()
+        .then((res) => setFacets(res.facets))
+        .catch(() => setFacets([]));
+    }
+  }, [open]);
+
+  const resetSearch = useCallback(() => {
+    setQuery('');
+    setResults([]);
+    setMetadata({ domains: [], authors: [], participants: [] });
+    setError(null);
+    setDomainFilter(new Set());
+    setAuthorFilter(new Set());
+    setExtFilter(new Set());
+    setDatePreset(null);
+    setDateFrom('');
+    setDateTo('');
+    setFacetSelections({});
+    inputRef.current?.focus();
+  }, []);
+
+  const doSearch = useCallback(async (q: string) => {
+    if (!q.trim()) {
+      setResults([]);
+      setMetadata({ domains: [], authors: [], participants: [] });
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      // Build Qdrant filter from facet selections
+      const mustClauses: Record<string, unknown>[] = [];
+      for (const [field, selected] of Object.entries(facetSelections)) {
+        if (selected.size > 0) {
+          mustClauses.push({
+            key: field,
+            match: { any: [...selected] },
+          });
+        }
+      }
+      const filter = mustClauses.length > 0
+        ? { must: mustClauses }
+        : undefined;
+      const res = await searchDocuments(q, 30, filter);
+      setResults(res.results);
+      setMetadata(res.metadata);
+    } catch (err) {
+      setError(String(err));
+    } finally {
+      setLoading(false);
+    }
+  }, [facetSelections]);
+
+  const handleInputChange = useCallback(
+    (value: string) => {
+      setQuery(value);
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => void doSearch(value), 400);
+    },
+    [doSearch],
+  );
+
+  const handleNavigate = useCallback(
+    (path: string) => {
+      onClose();
+      navigate(path);
+    },
+    [navigate, onClose],
+  );
+
+  const toggleFilter = useCallback(
+    (set: Set<string>, setFn: React.Dispatch<React.SetStateAction<Set<string>>>, value: string) => {
+      const next = new Set(set);
+      if (next.has(value)) next.delete(value);
+      else next.add(value);
+      setFn(next);
+    },
+    [],
+  );
+
+  const toggleFacet = useCallback(
+    (field: string, value: string) => {
+      setFacetSelections((prev) => {
+        const current = prev[field] ?? new Set<string>();
+        const next = new Set(current);
+        if (next.has(value)) next.delete(value);
+        else next.add(value);
+        return { ...prev, [field]: next };
+      });
+    },
+    [],
+  );
+
+  // Re-search when facet selections change
+  useEffect(() => {
+    if (query.trim()) {
+      void doSearch(query);
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [facetSelections]);
+
+  // Extract extensions from results
+  const extensions = [...new Set(results.map((r) => {
+    const dot = r.fileName.lastIndexOf('.');
+    return dot > 0 ? r.fileName.slice(dot).toLowerCase() : '(none)';
+  }))].sort();
+
+  // Compute effective date range
+  const effectiveDateFrom = datePreset && datePreset !== 'custom'
+    ? getPresetDate(datePreset)
+    : dateFrom ? new Date(dateFrom) : null;
+  const effectiveDateTo = datePreset === 'custom' && dateTo
+    ? new Date(dateTo + 'T23:59:59.999Z') : null;
+
+  // Apply client-side filters
+  const filtered = results.filter((r) => {
+    if (domainFilter.size > 0 && (!r.domains || !r.domains.some(d => domainFilter.has(d)))) return false;
+    if (authorFilter.size > 0 && (!r.author || !authorFilter.has(r.author))) return false;
+    if (extFilter.size > 0) {
+      const dot = r.fileName.lastIndexOf('.');
+      const ext = dot > 0 ? r.fileName.slice(dot).toLowerCase() : '(none)';
+      if (!extFilter.has(ext)) return false;
+    }
+    if (effectiveDateFrom && r.mtime) {
+      if (new Date(r.mtime) < effectiveDateFrom) return false;
+    }
+    if (effectiveDateTo && r.mtime) {
+      if (new Date(r.mtime) > effectiveDateTo) return false;
+    }
+    return true;
+  });
+
+  if (!open) return null;
+
+  return (
+    <div className="fixed inset-0 z-[100] flex items-start justify-center pt-[5vh]" onClick={onClose}>
+      <div className="absolute inset-0 bg-black/50 backdrop-blur-sm" />
+      <div
+        className="relative bg-background border border-border rounded-lg shadow-2xl w-full max-w-4xl max-h-[85vh] flex flex-col"
+        onClick={(e) => e.stopPropagation()}
+      >
+        {/* Search input */}
+        <div className="flex items-center gap-3 px-4 py-3 border-b border-border">
+          <Search className="h-5 w-5 text-muted-foreground shrink-0" />
+          <input
+            ref={inputRef}
+            type="text"
+            value={query}
+            onChange={(e) => handleInputChange(e.target.value)}
+            onKeyDown={(e) => { if (e.key === 'Escape') onClose(); }}
+            placeholder="Search documents..."
+            className="flex-1 bg-transparent outline-none text-foreground placeholder:text-muted-foreground"
+          />
+          {loading && <div className="h-4 w-4 border-2 border-primary border-t-transparent rounded-full animate-spin" />}
+          {(query || results.length > 0) && (
+            <button onClick={resetSearch} className="text-muted-foreground hover:text-foreground" title="Reset search">
+              <RotateCcw className="h-4 w-4" />
+            </button>
+          )}
+          <button onClick={onClose} className="text-muted-foreground hover:text-foreground" title="Close (Esc)">
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Schema-driven facet filters */}
+        {facets.length > 0 && (
+          <div className="px-4 py-2 border-b border-border flex flex-col gap-1.5">
+            {facets
+              .filter((f) => f.values.length > 0 && f.uiHint !== 'hidden')
+              .map((f) => (
+                <FilterChips
+                  key={f.field}
+                  label={f.field.replace(/_/g, ' ').replace(/\b\w/g, (c) => c.toUpperCase())}
+                  values={f.values}
+                  selected={facetSelections[f.field] ?? new Set()}
+                  onToggle={(v) => toggleFacet(f.field, v)}
+                />
+              ))}
+          </div>
+        )}
+
+        {/* Post-hoc filter chips — Type always shown when results exist */}
+        {results.length > 0 && (
+          <div className="px-4 py-2 border-b border-border flex flex-col gap-1.5">
+            <FilterChips
+              label="Type"
+              values={extensions}
+              selected={extFilter}
+              onToggle={(v) => toggleFilter(extFilter, setExtFilter, v)}
+            />
+            <FilterChips
+              label="Domain"
+              values={metadata.domains}
+              selected={domainFilter}
+              onToggle={(v) => toggleFilter(domainFilter, setDomainFilter, v)}
+            />
+            <FilterChips
+              label="Author"
+              values={metadata.authors}
+              selected={authorFilter}
+              onToggle={(v) => toggleFilter(authorFilter, setAuthorFilter, v)}
+            />
+            {/* Date range filter */}
+            <div className="flex items-center gap-1.5 flex-wrap">
+              <span className="text-xs text-muted-foreground font-medium">Date:</span>
+              {DATE_PRESETS.map((p) => (
+                <button
+                  key={p.value}
+                  onClick={() => setDatePreset(datePreset === p.value ? null : p.value)}
+                  className={`text-xs px-2 py-0.5 rounded-full border transition-colors ${
+                    datePreset === p.value
+                      ? 'bg-primary text-primary-foreground border-primary'
+                      : 'bg-muted text-muted-foreground border-border hover:bg-accent'
+                  }`}
+                >
+                  {p.label}
+                </button>
+              ))}
+              {datePreset === 'custom' && (
+                <>
+                  <input
+                    type="month"
+                    value={dateFrom}
+                    onChange={(e) => setDateFrom(e.target.value ? e.target.value + '-01' : '')}
+                    className="text-xs px-1.5 py-0.5 rounded border border-border bg-muted text-foreground w-28"
+                    placeholder="From"
+                  />
+                  <span className="text-xs text-muted-foreground">to</span>
+                  <input
+                    type="month"
+                    value={dateTo}
+                    onChange={(e) => setDateTo(e.target.value ? e.target.value + '-28' : '')}
+                    className="text-xs px-1.5 py-0.5 rounded border border-border bg-muted text-foreground w-28"
+                    placeholder="To"
+                  />
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* Results */}
+        <div className="overflow-y-auto flex-1">
+          {error && (
+            <div className="px-4 py-3 text-sm text-red-500">{error}</div>
+          )}
+          {!error && filtered.length === 0 && query.trim() && !loading && (
+            <div className="px-4 py-8 text-center text-muted-foreground text-sm">
+              No results found
+            </div>
+          )}
+          {!error && !query.trim() && !loading && (
+            <div className="px-4 py-8 text-center text-muted-foreground text-sm">
+              Type a query to search across all documents
+            </div>
+          )}
+          {filtered.map((r) => (
+            <ResultRow key={r.browsePath} result={r} onNavigate={handleNavigate} />
+          ))}
+        </div>
+
+        {/* Footer */}
+        {filtered.length > 0 && (
+          <div className="px-4 py-2 border-t border-border text-xs text-muted-foreground">
+            {filtered.length} result{filtered.length !== 1 ? 's' : ''}
+            {filtered.length < results.length && ` (${results.length} total, ${results.length - filtered.length} filtered)`}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+

package/client/src/components/SvgViewer.tsx

@@ -0,0 +1,107 @@
+import Panzoom from '@panzoom/panzoom';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { normalizeSvg } from '@/lib/svg';
+
+interface SvgViewerProps {
+  content: string;
+}
+
+/**
+ * Pre-process SVG for the full-page viewer.
+ * Uses shared normalization then adds viewer-specific overrides.
+ */
+function prepareSvgContent(raw: string): string {
+  // Use shared normalization (viewBox, preserveAspectRatio, strip sizing)
+  const normalized = normalizeSvg(raw);
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(normalized, 'image/svg+xml');
+  const svg = doc.querySelector('svg');
+  if (!svg) return normalized;
+
+  // Viewer-specific: fill container in both dimensions
+  svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+  svg.setAttribute('height', '100%');
+  svg.style.display = 'block';
+
+  return new XMLSerializer().serializeToString(doc);
+}
+
+export function SvgViewer({ content }: SvgViewerProps) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const innerRef = useRef<HTMLDivElement>(null);
+  const panzoomRef = useRef<ReturnType<typeof Panzoom> | null>(null);
+  const wheelCleanupRef = useRef<(() => void) | null>(null);
+  const [ready, setReady] = useState(false);
+
+  const html = useMemo(() => prepareSvgContent(content), [content]);
+
+  const initPanzoom = useCallback(() => {
+    // Clean up previous instance
+    wheelCleanupRef.current?.();
+    wheelCleanupRef.current = null;
+    if (panzoomRef.current) {
+      panzoomRef.current.destroy();
+      panzoomRef.current = null;
+    }
+    if (!innerRef.current || !containerRef.current) return;
+
+    const container = containerRef.current;
+    const inner = innerRef.current;
+    const cw = container.clientWidth;
+    const ch = container.clientHeight;
+
+    if (cw === 0 || ch === 0) return;
+
+    // Inner div fills the container; the SVG inside zoom-to-fits via
+    // viewBox + preserveAspectRatio. Panzoom then handles user zoom/pan
+    // starting from this natural fit.
+    inner.style.width = `${cw}px`;
+    inner.style.height = `${ch}px`;
+
+    const pz = Panzoom(inner, {
+      maxScale: 20,
+      minScale: 0.1,
+      startScale: 1,
+    });
+    panzoomRef.current = pz;
+
+    const wheelHandler = (e: WheelEvent) => {
+      pz.zoomWithWheel(e);
+    };
+    container.addEventListener('wheel', wheelHandler, { passive: false });
+    wheelCleanupRef.current = () => container.removeEventListener('wheel', wheelHandler);
+
+    setReady(true);
+  }, []);
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+
+    const observer = new ResizeObserver(() => {
+      initPanzoom();
+    });
+    observer.observe(container);
+
+    return () => {
+      observer.disconnect();
+      wheelCleanupRef.current?.();
+      panzoomRef.current?.destroy();
+    };
+  }, [html, initPanzoom]);
+
+  return (
+    <div className="relative bg-white rounded-lg border border-border overflow-hidden">
+      <div
+        ref={containerRef}
+        className="overflow-hidden cursor-grab active:cursor-grabbing w-full h-[calc(100vh-8rem)]"
+      >
+        <div
+          ref={innerRef}
+          className={ready ? '' : 'invisible'}
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+      </div>
+    </div>
+  );
+}

package/client/src/components/TabBar.tsx

@@ -0,0 +1,96 @@
+/**
+ * Tab bar for file views — Rendered/Raw tabs, prose width toggle, and edit button.
+ */
+import { Menu, Minus, Minimize2, Maximize2, Pencil, X } from 'lucide-react';
+
+import type { FileContent } from '@/lib/api';
+import { isRenderable, isRenderableExt } from './renderableUtils';
+
+interface TabBarProps {
+  reqPath: string;
+  file: FileContent | null;
+  fileRendered: FileContent | null;
+  viewTab: 'rendered' | 'raw';
+  setViewTab: (tab: 'rendered' | 'raw') => void;
+  proseWidth: 'narrow' | 'medium' | 'wide';
+  toggleProseWidth: (w: 'narrow' | 'medium' | 'wide') => void;
+  isInsider: boolean;
+  editing: boolean;
+  setEditing: (editing: boolean) => void;
+  mobileTocOpen: boolean;
+  setMobileTocOpen: (open: boolean) => void;
+  loading: boolean;
+}
+
+export function TabBar({
+  reqPath, file, fileRendered, viewTab, setViewTab,
+  proseWidth, toggleProseWidth,
+  isInsider, editing, setEditing,
+  mobileTocOpen, setMobileTocOpen, loading,
+}: TabBarProps) {
+  if (!file && !loading) return null;
+
+  const renderable = file ? isRenderable(file) : isRenderableExt(reqPath);
+  const activeTab = renderable ? viewTab : 'raw';
+
+  return (
+    <div className="flex items-center gap-1 border-b border-border bg-background px-4 md:px-6">
+      {fileRendered?.headings && fileRendered.headings.length > 2 && (
+        <button
+          onClick={() => setMobileTocOpen(!mobileTocOpen)}
+          className="lg:hidden p-1.5 mr-1 text-muted-foreground hover:text-foreground transition-colors"
+          title="Table of contents"
+        >
+          {mobileTocOpen ? <X className="h-4 w-4" /> : <Menu className="h-4 w-4" />}
+        </button>
+      )}
+      {renderable && (
+        <button
+          onClick={() => setViewTab('rendered')}
+          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+            activeTab === 'rendered'
+              ? 'border-blue-500 text-blue-500'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
+          }`}
+        >
+          Rendered
+        </button>
+      )}
+      <button
+        onClick={() => setViewTab('raw')}
+        className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+          activeTab === 'raw'
+            ? 'border-blue-500 text-blue-500'
+            : 'border-transparent text-muted-foreground hover:text-foreground'
+        }`}
+      >
+        Raw
+      </button>
+      {file?.type === 'markdown' && activeTab === 'rendered' && (
+        <div className="hidden md:flex items-center ml-2 border border-border rounded-md overflow-hidden">
+          {(['narrow', 'medium', 'wide'] as const).map((w) => (
+            <button
+              key={w}
+              onClick={() => toggleProseWidth(w)}
+              className={`p-1.5 transition-colors ${
+                proseWidth === w ? 'bg-muted text-foreground' : 'text-muted-foreground hover:text-foreground'
+              }`}
+              title={`${w.charAt(0).toUpperCase() + w.slice(1)} width`}
+            >
+              {w === 'narrow' ? <Minimize2 className="h-3.5 w-3.5" /> : w === 'medium' ? <Minus className="h-3.5 w-3.5" /> : <Maximize2 className="h-3.5 w-3.5" />}
+            </button>
+          ))}
+        </div>
+      )}
+      {isInsider && activeTab === 'raw' && file?.content != null && !editing && (
+        <button
+          onClick={() => setEditing(true)}
+          className="ml-2 flex items-center gap-1 px-2 py-1 text-sm text-muted-foreground hover:text-foreground border border-border rounded transition-colors"
+          title="Edit file"
+        >
+          <Pencil className="h-3.5 w-3.5" /> Edit
+        </button>
+      )}
+    </div>
+  );
+}