@polderlabs/bizar 4.7.2 → 4.9.0

package/bizar-dash/src/server/server.mjs

@@ -41,6 +41,7 @@ import { loadOrCreateAuth, V2_DEFAULT_PORT } from './v2-auth-file.mjs';
 import { createV2Router } from './routes-v2/index.mjs';
 import { counter, gauge, render as renderMetrics } from './metrics.mjs';
 import { warn } from './logger.mjs';
+import { initOtel, shutdownOtel } from './otel.mjs';
 
 // v4.7.0 — Prometheus-style HTTP metrics. Bound to the server-wide
 // registry; render() emits the text exposition format consumed by
@@ -57,6 +58,7 @@ const wsClientsGauge = gauge(
 );
 
 let processHandlersInstalled = false;
+let otelSigtermInstalled = false;
 let v2Bus = null;
 let v2Auth = null;
 
@@ -150,6 +152,44 @@ export async function createServer({
   bizarRoot,
 }) {
   installProcessHandlers();
+  // v4.9.0 — Initialise OpenTelemetry first so every subsequent handler
+  // (auth, rate-limit, routes) executes inside the SDK's lifecycle.
+  // Off by default; opt in via BIZAR_OTEL=1 / OTEL_ENABLED=1. The SDK
+  // itself never throws — see otel.mjs for the graceful-degradation
+  // contract — so this call is always safe to make.
+  try {
+    if (
+      process.env.OTEL_ENABLED === '1' ||
+      process.env.BIZAR_OTEL === '1'
+    ) {
+      initOtel();
+    }
+  } catch {
+    /* never block startup on OTel */
+  }
+
+  // v4.9.0 — SIGTERM handler that flushes pending spans before exit.
+  // Installed exactly once per process (mirrors `installProcessHandlers`).
+  if (!otelSigtermInstalled) {
+    otelSigtermInstalled = true;
+    const flushAndExit = async (signal) => {
+      try {
+        await shutdownOtel();
+      } finally {
+        // Re-raise the default action so kill -TERM / SIGINT still
+        // shut the rest of the server down. We do NOT process.exit(0)
+        // hard because Express needs to drain pending connections too,
+        // but a clean exit is the operator's job — we only guarantee
+        // spans are flushed.
+        if (signal === 'SIGTERM' || signal === 'SIGINT') {
+          // Allow Node's default SIGTERM behaviour to terminate the
+          // process; the small async overlap here is intentional.
+        }
+      }
+    };
+    process.on('SIGTERM', () => { void flushAndExit('SIGTERM'); });
+    process.on('SIGINT', () => { void flushAndExit('SIGINT'); });
+  }
   const app = express();
   app.disable('x-powered-by');
   // v3.5.4 (CORS) — Reflect the request Origin back as

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/lib/search.ts

@@ -0,0 +1,115 @@
+// src/web/lib/search.ts — fuzzy search with typo tolerance (Levenshtein distance).
+// Provides SearchableItem/SearchResult types and a fuzzySearch function for
+// settings, commands, and any structured UI search.
+
+export interface SearchableItem {
+  key: string;
+  label: string;
+  section: string;
+  value?: string | number | boolean;
+  description?: string;
+}
+
+export interface SearchResult extends SearchableItem {
+  score: number;
+  matchedField: 'label' | 'value' | 'description';
+  matchedTerm: string;
+}
+
+/**
+ * Levenshtein distance for typo tolerance.
+ */
+export function levenshtein(a: string, b: string): number {
+  const alen = a.length;
+  const blen = b.length;
+  const matrix: number[][] = Array.from({ length: blen + 1 }, () => Array(alen + 1).fill(0));
+  for (let i = 0; i <= alen; i++) matrix[0][i] = i;
+  for (let j = 0; j <= blen; j++) matrix[j][0] = j;
+  for (let j = 1; j <= blen; j++) {
+    for (let i = 1; i <= alen; i++) {
+      const indicator = a[i - 1] === b[j - 1] ? 0 : 1;
+      matrix[j][i] = Math.min(
+        matrix[j][i - 1] + 1,
+        matrix[j - 1][i] + 1,
+        matrix[j - 1][i - 1] + indicator,
+      );
+    }
+  }
+  return matrix[blen][alen];
+}
+
+/**
+ * Score a single field against the query.
+ * Returns a numeric score (higher = better match) or 0 if no match.
+ *
+ * Scoring tiers (mutually exclusive — first match wins):
+ *   100 — exact field match (query === field)
+ *    90 — field starts with query (prefix match)
+ *    80 — a word in the field starts with query (word boundary)
+ *    40 — typo-tolerant match (Levenshtein ≤ 2 against the first query.length chars)
+ *    30 — substring match anywhere in field (fallback)
+ */
+export function scoreField(query: string, field: string): number {
+  // Exact match
+  if (field === query) return 100;
+
+  // Field prefix match (field starts with query)
+  if (field.startsWith(query)) return 90;
+
+  // Word boundary match (any word starts with query)
+  const words = field.split(/\s+/);
+  for (const word of words) {
+    if (word.startsWith(query)) return 80;
+  }
+
+  // Typo tolerance: compare query against first query.length chars of field
+  const compareLen = Math.min(query.length, field.length);
+  const dist = levenshtein(query, field.substring(0, compareLen));
+  if (dist <= 2) return 40;
+
+  // Substring match (anywhere)
+  if (field.includes(query)) return 30;
+
+  return 0;
+}
+
+/**
+ * Fuzzy search over an array of SearchableItem.
+ * Returns results sorted by descending score. Empty query returns [].
+ */
+export function fuzzySearch(query: string, items: SearchableItem[]): SearchResult[] {
+  const q = query.toLowerCase().trim();
+  if (!q) return [];
+
+  return items
+    .map((item) => {
+      const labelScore = scoreField(q, item.label.toLowerCase());
+      const valueScore = item.value ? scoreField(q, String(item.value).toLowerCase()) : 0;
+      const descScore = item.description ? scoreField(q, item.description.toLowerCase()) : 0;
+
+      const max = Math.max(labelScore, valueScore, descScore);
+      if (max === 0) return null;
+
+      const matchedField: SearchResult['matchedField'] =
+        labelScore >= valueScore && labelScore >= descScore
+          ? 'label'
+          : valueScore >= labelScore && valueScore >= descScore
+            ? 'value'
+            : 'description';
+      const matchedTerm =
+        matchedField === 'label'
+          ? item.label
+          : matchedField === 'value'
+            ? String(item.value)
+            : item.description!;
+
+      return {
+        ...item,
+        score: max,
+        matchedField,
+        matchedTerm,
+      };
+    })
+    .filter((r): r is SearchResult => r !== null)
+    .sort((a, b) => b.score - a.score);
+}

package/bizar-dash/src/web/mobile/views/MobileSettings.tsx

@@ -1,9 +1,9 @@
 // src/mobile/views/MobileSettings.tsx — mobile settings with full desktop parity.
 import { useEffect, useState } from 'react';
-import { QrCode, RefreshCw, Smartphone, Sun, Moon, Monitor, Save } from 'lucide-react';
-import { QRCodeSVG } from 'qrcode.react';
+import { Smartphone, Sun, Moon, Monitor, Save } from 'lucide-react';
 import { api } from '../../lib/api';
 import { applyTheme, applyThemeTokens, type Settings, type Snapshot, type ThemeName } from '../../lib/types';
+import { QrCodePanel } from './QrCodePanel';
 
 type Props = {
   settings: Settings;
@@ -30,21 +30,12 @@ const PRESET_ACCENTS = [
   { name: 'Mono', accent: '#6b7280' },
 ];
 
-function formatCountdown(ms: number): string {
-  if (ms <= 0) return 'expired';
-  const s = Math.floor(ms / 1000);
-  const m = Math.floor(s / 60);
-  const r = s % 60;
-  return `${m}:${String(r).padStart(2, '0')}`;
-}
-
 export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props) {
   const [settings, setSettings] = useState<Settings>(initial);
   const [dirty, setDirty] = useState(false);
   const [saving, setSaving] = useState(false);
   const [pair, setPair] = useState<PairSession | null>(null);
   const [pairing, setPairing] = useState(false);
-  const [now, setNow] = useState(Date.now());
 
   useEffect(() => {
     setSettings(initial);
@@ -52,12 +43,6 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
     if (initial.theme) applyThemeTokens(initial.theme);
   }, [initial]);
 
-  useEffect(() => {
-    if (!pair) return;
-    const t = setInterval(() => setNow(Date.now()), 1000);
-    return () => clearInterval(t);
-  }, [pair]);
-
   const patchTheme = (patch: Partial<Settings['theme']>) => {
     setSettings((cur) => {
       const next = { ...cur, theme: { ...cur.theme, ...patch } };
@@ -101,8 +86,8 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
     }
   };
 
-  const remaining = pair ? pair.expiresAt - now : 0;
-  const expired = pair != null && remaining <= 0;
+  // remaining/expired are now managed inside QrCodePanel to keep
+  // qrcode.react out of the main mobile bundle chunk.
 
   return (
     <div className="mobile-view">
@@ -332,24 +317,14 @@ export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props
         <div className="mobile-card">
           {!pair && (
             <button type="button" className="mobile-btn" onClick={startPair} disabled={pairing} style={{ width: '100%' }}>
-              <QrCode size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
+              <Smartphone size={14} /> {pairing ? 'Generating…' : 'Generate QR Code'}
             </button>
           )}
-          {pair && !expired && (
-            <div style={{ textAlign: 'center' }}>
-              <div style={{ background: '#fff', padding: 12, borderRadius: 12, display: 'inline-block' }}>
-                <QRCodeSVG value={pair.qrPayload} size={180} level="M" />
-              </div>
-              <div style={{ marginTop: 8, fontSize: 12 }}>
-                Expires in <strong>{formatCountdown(remaining)}</strong>
-              </div>
-              <div className="mono" style={{ fontSize: 10, wordBreak: 'break-all', marginTop: 4 }}>{pair.publicUrl}</div>
-            </div>
-          )}
-          {pair && expired && (
-            <button type="button" className="mobile-btn" onClick={startPair} style={{ width: '100%' }}>
-              <RefreshCw size={14} /> Generate new QR
-            </button>
+          {pair && (
+            <QrCodePanel
+              pair={pair}
+              onStart={startPair}
+            />
           )}
         </div>
       </section>