@polderlabs/bizar 4.8.0 → 5.0.0

package/bizar-dash/src/web/components/SettingsSearch.tsx

@@ -1,8 +1,9 @@
-// src/web/components/SettingsSearch.tsx — fuzzy search across Settings sections with scroll-to highlight
+// src/web/components/SettingsSearch.tsx — fuzzy search across Settings sections with scroll-to highlight.
+// v4.9: replaces Fuse.js with Levenshtein-based fuzzySearch; adds recent searches + match highlighting.
 import { useCallback, useEffect, useRef, useState } from 'react';
 import { Search, X } from 'lucide-react';
-import Fuse from 'fuse.js';
 import { cn } from '../lib/utils';
+import { fuzzySearch, type SearchableItem, type SearchResult } from '../lib/search';
 
 export type SettingsSection = {
   id: string;
@@ -23,85 +24,106 @@ type Props = {
   onJump: (sectionId: string, fieldKey?: string) => void;
 };
 
-type Match = {
-  item: SettingsField | SettingsSection;
-  score: number;
-  type: 'section' | 'field';
-  sectionId: string;
-  fieldKey?: string;
-};
+/* ─── Recent searches (localStorage) ─── */
 
-function fuseSearch(items: SettingsSection[], query: string): Match[] {
-  if (!query.trim()) return [];
+const RECENT_KEY = 'bizar_settings_recent';
 
-  const sectionFuse = new Fuse(items, {
-    keys: ['label'],
-    threshold: 0.4,
-    includeScore: true,
-  });
+function getRecentSearches(): string[] {
+  try {
+    const stored = localStorage.getItem(RECENT_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch {
+    return [];
+  }
+}
 
-  const fieldFuse = new Fuse(
-    items.flatMap((s) => s.fields.map((f) => ({ ...f, _sectionId: s.id }))),
-    { keys: ['label', 'key'], threshold: 0.4, includeScore: true },
-  );
+function saveRecentSearch(query: string) {
+  if (!query) return;
+  try {
+    const recent = getRecentSearches().filter((q) => q !== query);
+    recent.unshift(query);
+    localStorage.setItem(RECENT_KEY, JSON.stringify(recent.slice(0, 5)));
+  } catch {
+    // localStorage may be full or disabled — silently ignore
+  }
+}
 
-  const results: Match[] = [];
+/* ─── Highlight matched terms ─── */
 
-  for (const r of sectionFuse.search(query)) {
-    results.push({
-      item: r.item,
-      score: r.score ?? 1,
-      type: 'section',
-      sectionId: r.item.id,
-    });
-  }
+function highlightMatch(text: string, query: string): React.ReactNode {
+  if (!query) return text;
+  // Escape regex special characters in the user query
+  const escaped = query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const regex = new RegExp(`(${escaped})`, 'gi');
+  const parts = text.split(regex);
+  return parts.map((part, i) =>
+    regex.test(part) ? <mark key={i}>{part}</mark> : <span key={i}>{part}</span>,
+  );
+}
+
+/* ─── Build SearchableItems from sections ─── */
 
-  for (const r of fieldFuse.search(query)) {
-    results.push({
-      item: r.item as SettingsField,
-      score: r.score ?? 1,
-      type: 'field',
-      sectionId: (r.item as SettingsField & { _sectionId: string })._sectionId,
-      fieldKey: r.item.key,
+function toSearchableItems(sections: SettingsSection[]): SearchableItem[] {
+  const items: SearchableItem[] = [];
+  for (const section of sections) {
+    // Section itself is searchable
+    items.push({
+      key: section.id,
+      label: section.label,
+      section: section.id,
+      description: `${section.fields.length} field${section.fields.length === 1 ? '' : 's'}`,
     });
+    // Each field is searchable
+    for (const field of section.fields) {
+      items.push({
+        key: field.key,
+        label: field.label,
+        section: section.id,
+        value: field.value,
+      });
+    }
   }
-
-  // Deduplicate by sectionId+fieldKey, prefer lower score
-  const seen = new Set<string>();
-  return results
-    .filter((r) => {
-      const k = `${r.sectionId}::${r.fieldKey ?? ''}`;
-      if (seen.has(k)) return false;
-      seen.add(k);
-      return true;
-    })
-    .sort((a, b) => a.score - b.score)
-    .slice(0, 8);
+  return items;
 }
 
+/* ─── Component ─── */
+
 export function SettingsSearch({ sections, onJump }: Props) {
   const [q, setQ] = useState('');
-  const [matches, setMatches] = useState<Match[]>([]);
+  const [matches, setMatches] = useState<SearchResult[]>([]);
   const [activeIdx, setActiveIdx] = useState(0);
   const [highlighted, setHighlighted] = useState<string | null>(null);
+  const [focused, setFocused] = useState(false);
   const inputRef = useRef<HTMLInputElement>(null);
   const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
+  const allItems = useRef<SearchableItem[]>([]);
+  // Rebuild items when sections change
+  useEffect(() => {
+    allItems.current = toSearchableItems(sections);
+  }, [sections]);
+
   const search = useCallback(
-    (query: string) => {
+    (query: string, immediate = false) => {
       if (debounceRef.current) clearTimeout(debounceRef.current);
       if (!query.trim()) {
         setMatches([]);
         setActiveIdx(0);
         return;
       }
-      debounceRef.current = setTimeout(() => {
-        setMatches(fuseSearch(sections, query));
+      const run = () => {
+        const results = fuzzySearch(query, allItems.current);
+        setMatches(results);
         setActiveIdx(0);
-      }, 200);
+      };
+      if (immediate) {
+        run();
+      } else {
+        debounceRef.current = setTimeout(run, 150);
+      }
     },
-    [sections],
+    [], // stable — allItems is a ref
   );
 
   useEffect(() => {
@@ -116,6 +138,25 @@ export function SettingsSearch({ sections, onJump }: Props) {
     };
   }, []);
 
+  /* ─── Quick-jump with flash ─── */
+
+  const jumpToSection = (sectionId: string, key: string) => {
+    // Look for the field by data-setting-id within the section
+    const fieldEl = document.querySelector(
+      `[data-section="${sectionId}"] [data-setting-id="${key}"]`,
+    );
+    if (fieldEl) {
+      fieldEl.scrollIntoView({ behavior: 'smooth', block: 'center' });
+      fieldEl.classList.add('setting-flash');
+      setTimeout(() => fieldEl.classList.remove('setting-flash'), 2000);
+    }
+    // Also scroll the section Card into view
+    const sectionEl = document.querySelector(`[data-section="${sectionId}"]`);
+    if (sectionEl) {
+      sectionEl.scrollIntoView({ behavior: 'smooth', block: fieldEl ? 'nearest' : 'start' });
+    }
+  };
+
   const highlightSection = (sectionId: string) => {
     setHighlighted(sectionId);
     if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
@@ -124,6 +165,24 @@ export function SettingsSearch({ sections, onJump }: Props) {
     if (el) el.scrollIntoView({ behavior: 'smooth', block: 'start' });
   };
 
+  const commitSelection = (result: SearchResult) => {
+    saveRecentSearch(q);
+    if (result.key === result.section) {
+      // It's a section match — jump to section
+      highlightSection(result.section);
+      onJump(result.section);
+    } else {
+      // It's a field match — jump to field with flash
+      highlightSection(result.section);
+      onJump(result.section, result.key);
+      jumpToSection(result.section, result.key);
+    }
+    setQ('');
+    inputRef.current?.blur();
+  };
+
+  /* ─── Keyboard navigation ─── */
+
   const handleKey = (e: React.KeyboardEvent) => {
     if (e.key === 'Escape') {
       setQ('');
@@ -134,20 +193,45 @@ export function SettingsSearch({ sections, onJump }: Props) {
     } else if (e.key === 'ArrowUp') {
       e.preventDefault();
       setActiveIdx((i) => Math.max(i - 1, 0));
-    } else if (e.key === 'Enter' && matches[activeIdx]) {
-      const m = matches[activeIdx];
-      highlightSection(m.sectionId);
-      onJump(m.sectionId, m.fieldKey);
-      setQ('');
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      // If debounce hasn't fired yet, search immediately
+      if (matches.length === 0 && q.trim()) {
+        search(q, true);
+      }
+      if (matches[activeIdx]) {
+        commitSelection(matches[activeIdx]);
+      }
     }
   };
 
-  const handleSelect = (m: Match) => {
-    highlightSection(m.sectionId);
-    onJump(m.sectionId, m.fieldKey);
-    setQ('');
+  const handleSelect = (m: SearchResult) => {
+    commitSelection(m);
   };
 
+  /* ─── Recent searches helpers ─── */
+
+  const recent = getRecentSearches();
+
+  const handleRecentClick = (term: string) => {
+    setQ(term);
+    inputRef.current?.focus();
+  };
+
+  const clearRecent = () => {
+    try {
+      localStorage.removeItem(RECENT_KEY);
+    } catch {
+      // ignore
+    }
+    // Force re-render
+    setFocused((f) => f);
+  };
+
+  /* ─── Render ─── */
+
+  const showRecent = focused && !q.trim() && recent.length > 0;
+
   return (
     <div className="settings-search">
       <div className="settings-search-input-wrap">
@@ -159,6 +243,8 @@ export function SettingsSearch({ sections, onJump }: Props) {
           value={q}
           onChange={(e) => setQ(e.target.value)}
           onKeyDown={handleKey}
+          onFocus={() => setFocused(true)}
+          onBlur={() => setTimeout(() => setFocused(false), 150)}
           aria-label="Search settings"
         />
         {q && (
@@ -173,35 +259,64 @@ export function SettingsSearch({ sections, onJump }: Props) {
         )}
       </div>
 
+      {/* Recent searches dropdown */}
+      {showRecent && (
+        <div className="settings-search-recent">
+          <div className="settings-search-recent-header">
+            <span className="settings-search-recent-label">Recent</span>
+            <button
+              type="button"
+              className="settings-search-recent-clear"
+              onClick={clearRecent}
+              tabIndex={-1}
+            >
+              Clear
+            </button>
+          </div>
+          {recent.map((term) => (
+            <button
+              key={term}
+              type="button"
+              className="settings-search-recent-item"
+              onMouseDown={(e) => {
+                e.preventDefault();
+                handleRecentClick(term);
+              }}
+            >
+              <Search size={11} />
+              <span>{term}</span>
+            </button>
+          ))}
+        </div>
+      )}
+
+      {/* Search results */}
       {q && matches.length > 0 && (
         <div className="settings-search-results">
-          {matches.map((m, idx) => {
-            const label = m.type === 'section'
-              ? (m.item as SettingsSection).label
-              : (m.item as SettingsField).label;
-            const key = m.type === 'section'
-              ? (m.item as SettingsSection).id
-              : (m.item as SettingsField).key;
-            return (
-              <button
-                key={`${m.sectionId}::${key}`}
-                type="button"
-                className={cn('settings-search-result', idx === activeIdx && 'settings-search-result-active')}
-                onClick={() => handleSelect(m)}
-                onMouseEnter={() => setActiveIdx(idx)}
-              >
-                <span className={cn('settings-search-result-type', m.type === 'section' && 'settings-search-result-type-section')}>
-                  {m.type === 'section' ? 'section' : 'field'}
-                </span>
-                <span className="settings-search-result-label">
-                  {label}
-                </span>
-                {m.type === 'field' && (
-                  <span className="settings-search-result-key mono muted">{key}</span>
+          {matches.map((m, idx) => (
+            <button
+              key={`${m.section}::${m.key}`}
+              type="button"
+              className={cn('settings-search-result', idx === activeIdx && 'settings-search-result-active')}
+              onClick={() => handleSelect(m)}
+              onMouseEnter={() => setActiveIdx(idx)}
+            >
+              <span
+                className={cn(
+                  'settings-search-result-type',
+                  m.key === m.section && 'settings-search-result-type-section',
                 )}
-              </button>
-            );
-          })}
+              >
+                {m.key === m.section ? 'section' : 'field'}
+              </span>
+              <span className="settings-search-result-label">
+                {highlightMatch(m.label, q)}
+              </span>
+              {m.key !== m.section && (
+                <span className="settings-search-result-key mono muted">{m.key}</span>
+              )}
+            </button>
+          ))}
         </div>
       )}
 

package/bizar-dash/src/web/components/VoiceNotesPanel.tsx

@@ -0,0 +1,182 @@
+// src/web/components/VoiceNotesPanel.tsx — v5.0.0
+//
+// List + record + playback for voice notes.
+// Wire into Memory tab as the "Voice Notes" source panel.
+
+import { useEffect, useState } from 'react';
+import { Play, Pause, Trash2, Search as SearchIcon, Mic } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from './Card';
+import { VoiceRecorder } from './VoiceRecorder';
+import { Button } from './Button';
+
+type VoiceNote = {
+  id: string;
+  audioPath: string;
+  notePath: string | null;
+  transcript: string | null;
+  durationSec: number | null;
+  vaultPath: string | null;
+  createdAtMs: number;
+  updatedAtMs: number;
+};
+
+type Props = {
+  /** Vault path to scope the panel to */
+  vaultPath?: string;
+  /** Key to force reload when parent refreshes */
+  refreshKey?: number;
+};
+
+function NoteCard({ note, onDelete }: { note: VoiceNote; onDelete: (id: string) => void }) {
+  const [playing, setPlaying] = useState(false);
+  const [audio] = useState(() => {
+    if (!note.audioPath) return null;
+    const a = new Audio(`/api/voice/${note.id}/audio`);
+    a.onended = () => setPlaying(false);
+    return a;
+  });
+
+  const togglePlay = () => {
+    if (!audio) return;
+    if (playing) {
+      audio.pause();
+      audio.currentTime = 0;
+      setPlaying(false);
+    } else {
+      audio.play();
+      setPlaying(true);
+    }
+  };
+
+  const created = new Date(note.createdAtMs).toLocaleDateString('en-US', {
+    month: 'short',
+    day: 'numeric',
+    hour: '2-digit',
+    minute: '2-digit',
+  });
+
+  return (
+    <div className="voice-note-card">
+      <div className="voice-note-card-head">
+        <div className="voice-note-card-meta">
+          <span className="voice-note-date">{created}</span>
+          {note.durationSec && (
+            <span className="voice-note-duration">{Math.round(note.durationSec)}s</span>
+          )}
+        </div>
+        <div className="voice-note-card-actions">
+          {audio && (
+            <button
+              type="button"
+              className="icon-btn"
+              onClick={togglePlay}
+              aria-label={playing ? 'Pause' : 'Play'}
+              title={playing ? 'Pause' : 'Play'}
+            >
+              {playing ? <Pause size={13} /> : <Play size={13} />}
+            </button>
+          )}
+          <button
+            type="button"
+            className="icon-btn"
+            onClick={() => onDelete(note.id)}
+            aria-label="Delete note"
+            title="Delete note"
+          >
+            <Trash2 size={13} />
+          </button>
+        </div>
+      </div>
+
+      {note.transcript && (
+        <p className="voice-note-transcript">{note.transcript}</p>
+      )}
+
+      {!note.transcript && (
+        <p className="voice-note-no-transcript muted text-sm">No transcription available</p>
+      )}
+    </div>
+  );
+}
+
+export function VoiceNotesPanel({ vaultPath, refreshKey = 0 }: Props) {
+  const [notes, setNotes] = useState<VoiceNote[]>([]);
+  const [search, setSearch] = useState('');
+  const [loading, setLoading] = useState(true);
+
+  const loadNotes = async () => {
+    setLoading(true);
+    try {
+      const vaultParam = vaultPath ? `?vaultPath=${encodeURIComponent(vaultPath)}` : '';
+      const r = await fetch(`/api/voice/list${vaultParam}`);
+      const data = await r.json();
+      setNotes(data.notes || []);
+    } catch (err) {
+      console.error('[VoiceNotesPanel] failed to load notes:', err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    loadNotes();
+  }, [vaultPath, refreshKey]);
+
+  const handleDelete = async (id: string) => {
+    try {
+      const r = await fetch(`/api/voice/${id}`, { method: 'DELETE' });
+      if (r.ok || r.status === 204) {
+        setNotes((prev) => prev.filter((n) => n.id !== id));
+      }
+    } catch (err) {
+      console.error('[VoiceNotesPanel] delete failed:', err);
+    }
+  };
+
+  const filtered = notes.filter(
+    (n) =>
+      !search ||
+      (n.transcript?.toLowerCase().includes(search.toLowerCase()) ?? false),
+  );
+
+  return (
+    <Card>
+      <CardTitle>
+        <Mic size={14} /> Voice Notes
+      </CardTitle>
+      <CardMeta>Record and transcribe audio notes into your vault</CardMeta>
+
+      {/* Search */}
+      <div className="memory-search-row">
+        <input
+          type="text"
+          className="input search-input"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search transcripts…"
+          aria-label="Search voice notes"
+        />
+      </div>
+
+      {/* Recorder */}
+      <div className="voice-recorder-row">
+        <VoiceRecorder vaultPath={vaultPath} onSaved={loadNotes} />
+      </div>
+
+      {/* Note list */}
+      {loading ? (
+        <p className="muted text-sm">Loading notes…</p>
+      ) : filtered.length === 0 ? (
+        <p className="muted text-sm">
+          {search ? 'No notes match your search.' : 'No voice notes yet. Hit Record to add one.'}
+        </p>
+      ) : (
+        <div className="voice-note-list">
+          {filtered.map((n) => (
+            <NoteCard key={n.id} note={n} onDelete={handleDelete} />
+          ))}
+        </div>
+      )}
+    </Card>
+  );
+}

package/bizar-dash/src/web/components/VoiceRecorder.tsx

@@ -0,0 +1,104 @@
+// src/web/components/VoiceRecorder.tsx — v5.0.0
+//
+// MediaRecorder wrapper: records audio in webm/opus, uploads to /api/voice/upload
+// on stop, then calls onSaved(notePath, transcription) so the parent can refresh
+// the note list.
+
+import { useState, useRef } from 'react';
+import { Mic, Square, Loader2 } from 'lucide-react';
+import { Button } from './Button';
+
+export type VoiceRecorderProps = {
+  /** Vault path to store the transcript under */
+  vaultPath?: string;
+  /** Called after the note is saved with the note path and transcription text */
+  onSaved?: (notePath: string, transcription: string | null) => void;
+};
+
+export function VoiceRecorder({ vaultPath, onSaved }: VoiceRecorderProps) {
+  const [recording, setRecording] = useState(false);
+  const [transcribing, setTranscribing] = useState(false);
+  const mediaRecorderRef = useRef<MediaRecorder | null>(null);
+  const chunksRef = useRef<Blob[]>([]);
+
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      // Prefer webm/opus; fall back to whatever the browser offers
+      const mimeType =
+        MediaRecorder.isTypeSupported('audio/webm;codecs=opus')
+          ? 'audio/webm;codecs=opus'
+          : 'audio/webm';
+      const recorder = new MediaRecorder(stream, { mimeType });
+
+      recorder.ondataavailable = (e) => {
+        if (e.data && e.data.size > 0) {
+          chunksRef.current.push(e.data);
+        }
+      };
+
+      recorder.onstop = async () => {
+        const blob = new Blob(chunksRef.current, { type: 'audio/webm' });
+        chunksRef.current = [];
+        // Stop all tracks to release the microphone
+        stream.getTracks().forEach((t) => t.stop());
+        await uploadAndTranscribe(blob);
+      };
+
+      recorder.start(1000); // timeslice=1s for chunk delivery
+      mediaRecorderRef.current = recorder;
+      setRecording(true);
+    } catch (err) {
+      // getUserMedia not available or permission denied
+      console.error('[VoiceRecorder] failed to start recording:', err);
+    }
+  };
+
+  const stopRecording = () => {
+    const rec = mediaRecorderRef.current;
+    if (!rec) return;
+    rec.stop();
+    setRecording(false);
+    setTranscribing(true);
+  };
+
+  const uploadAndTranscribe = async (blob: Blob) => {
+    try {
+      const form = new FormData();
+      form.append('audio', blob, 'voice-note.webm');
+      form.append('vaultPath', vaultPath || '');
+      const res = await fetch('/api/voice/upload', { method: 'POST', body: form });
+      if (!res.ok) {
+        console.error('[VoiceRecorder] upload failed:', res.status, await res.text());
+        setTranscribing(false);
+        return;
+      }
+      const { notePath, transcription } = await res.json();
+      onSaved?.(notePath, transcription);
+    } catch (err) {
+      console.error('[VoiceRecorder] upload error:', err);
+    } finally {
+      setTranscribing(false);
+    }
+  };
+
+  return (
+    <div className="voice-recorder">
+      {!recording && !transcribing && (
+        <Button variant="accent" size="sm" onClick={startRecording} aria-label="Start recording">
+          <Mic size={14} /> Record
+        </Button>
+      )}
+      {recording && (
+        <Button variant="danger" size="sm" onClick={stopRecording} aria-label="Stop recording">
+          <Square size={14} /> Stop
+        </Button>
+      )}
+      {transcribing && (
+        <Button variant="secondary" size="sm" disabled>
+          <Loader2 size={14} className="spinning" /> Transcribing…
+        </Button>
+      )}
+    </div>
+  );
+}