@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,328 +0,0 @@
-// 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 { cn } from '../lib/utils';
-import { fuzzySearch, type SearchableItem, type SearchResult } from '../lib/search';
-
-export type SettingsSection = {
-  id: string;
-  label: string;
-  icon?: string;
-  fields: SettingsField[];
-};
-
-export type SettingsField = {
-  key: string;       // e.g. "theme.accent"
-  label: string;     // e.g. "Accent color"
-  value?: string;    // current value (masked if secret)
-  section: string;   // parent section id
-};
-
-type Props = {
-  sections: SettingsSection[];
-  onJump: (sectionId: string, fieldKey?: string) => void;
-};
-
-/* ─── Recent searches (localStorage) ─── */
-
-const RECENT_KEY = 'bizar_settings_recent';
-
-function getRecentSearches(): string[] {
-  try {
-    const stored = localStorage.getItem(RECENT_KEY);
-    return stored ? JSON.parse(stored) : [];
-  } catch {
-    return [];
-  }
-}
-
-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
-  }
-}
-
-/* ─── Highlight matched terms ─── */
-
-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 ─── */
-
-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,
-      });
-    }
-  }
-  return items;
-}
-
-/* ─── Component ─── */
-
-export function SettingsSearch({ sections, onJump }: Props) {
-  const [q, setQ] = useState('');
-  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, immediate = false) => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (!query.trim()) {
-        setMatches([]);
-        setActiveIdx(0);
-        return;
-      }
-      const run = () => {
-        const results = fuzzySearch(query, allItems.current);
-        setMatches(results);
-        setActiveIdx(0);
-      };
-      if (immediate) {
-        run();
-      } else {
-        debounceRef.current = setTimeout(run, 150);
-      }
-    },
-    [], // stable — allItems is a ref
-  );
-
-  useEffect(() => {
-    search(q);
-  }, [q, search]);
-
-  // Cleanup timers
-  useEffect(() => {
-    return () => {
-      if (debounceRef.current) clearTimeout(debounceRef.current);
-      if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
-    };
-  }, []);
-
-  /* ─── 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);
-    highlightTimerRef.current = setTimeout(() => setHighlighted(null), 1500);
-    const el = document.querySelector(`[data-section="${sectionId}"]`);
-    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('');
-      inputRef.current?.blur();
-    } else if (e.key === 'ArrowDown') {
-      e.preventDefault();
-      setActiveIdx((i) => Math.min(i + 1, matches.length - 1));
-    } else if (e.key === 'ArrowUp') {
-      e.preventDefault();
-      setActiveIdx((i) => Math.max(i - 1, 0));
-    } 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: 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">
-        <Search size={13} className="settings-search-icon" />
-        <input
-          ref={inputRef}
-          className="settings-search-input"
-          placeholder="Search settings…"
-          value={q}
-          onChange={(e) => setQ(e.target.value)}
-          onKeyDown={handleKey}
-          onFocus={() => setFocused(true)}
-          onBlur={() => setTimeout(() => setFocused(false), 150)}
-          aria-label="Search settings"
-        />
-        {q && (
-          <button
-            type="button"
-            className="icon-btn settings-search-clear"
-            onClick={() => setQ('')}
-            aria-label="Clear search"
-          >
-            <X size={12} />
-          </button>
-        )}
-      </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) => (
-            <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',
-                )}
-              >
-                {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>
-      )}
-
-      {q && matches.length === 0 && (
-        <div className="settings-search-empty muted">No matching settings.</div>
-      )}
-    </div>
-  );
-}

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

@@ -1,89 +0,0 @@
-// src/components/Sidebar.tsx — vertical navigation rail for sidebar/both layouts.
-import type { TabDef } from './Topbar';
-import { SettingsNav } from './SettingsNav';
-import { cn } from '../lib/utils';
-
-export type SidebarProps = {
-  tabs: TabDef[];
-  activeTab: string;
-  onTabChange: (id: string) => void;
-  /** v4.9.0 — When true, show the full settings sidebar nav instead of tabs. */
-  settingsMode?: boolean;
-  /** v4.9.0 — The currently highlighted settings section. */
-  settingsActiveSection?: string | null;
-  /** v4.9.0 — Called when user clicks a section in the settings sidebar. */
-  onSettingsSectionChange?: (id: string | null) => void;
-  /** v4.9.0 — Called when user clicks the back button in settings mode. */
-  onExitSettings?: () => void;
-};
-
-export function Sidebar({ tabs, activeTab, onTabChange, settingsMode, settingsActiveSection, onSettingsSectionChange, onExitSettings }: SidebarProps) {
-  // v4.9.0 — When settingsMode is active, render the full settings nav instead
-  // of the normal tab rail. This lets users see all sections at a glance.
-  if (settingsMode) {
-    return (
-      <aside className="sidebar sidebar-settings-mode" aria-label="Settings navigation">
-        <SettingsNav
-          activeSection={settingsActiveSection ?? null}
-          onSectionChange={onSettingsSectionChange ?? (() => {})}
-          onExitSettings={onExitSettings ?? (() => {})}
-        />
-      </aside>
-    );
-  }
-
-  // Split tabs into built-in (no `isMod` flag) and mod-added entries.
-  // Render a separator + small "Mods" label between them so users can
-  // tell what's part of Bizar vs what an installed mod contributed.
-  const builtIn = tabs.filter((t) => !(t as TabDef & { isMod?: boolean }).isMod);
-  const modTabs = tabs.filter((t) => (t as TabDef & { isMod?: boolean }).isMod);
-
-  return (
-    <aside className="sidebar" aria-label="Primary navigation">
-      <nav className="sidebar-nav" role="tablist">
-        {builtIn.map((t) => {
-          const Icon = t.icon;
-          const active = t.id === activeTab;
-          return (
-            <button
-              key={t.id}
-              type="button"
-              role="tab"
-              aria-selected={active}
-              className={cn('sidebar-tab', active && 'sidebar-tab-active')}
-              onClick={() => onTabChange(t.id)}
-              title={t.label}
-            >
-              <Icon size={18} aria-hidden />
-              <span className="sidebar-tab-label">{t.label}</span>
-            </button>
-          );
-        })}
-        {modTabs.length > 0 && (
-          <>
-            <div className="sidebar-section-divider" aria-hidden="true" />
-            <div className="sidebar-section-label">Mods</div>
-            {modTabs.map((t) => {
-              const Icon = t.icon;
-              const active = t.id === activeTab;
-              return (
-                <button
-                  key={t.id}
-                  type="button"
-                  role="tab"
-                  aria-selected={active}
-                  className={cn('sidebar-tab', 'sidebar-tab-mod', active && 'sidebar-tab-active')}
-                  onClick={() => onTabChange(t.id)}
-                  title={`${t.label} (mod)`}
-                >
-                  <Icon size={18} aria-hidden />
-                  <span className="sidebar-tab-label">{t.label}</span>
-                </button>
-              );
-            })}
-          </>
-        )}
-      </nav>
-    </aside>
-  );
-}

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

@@ -1,19 +0,0 @@
-// src/components/Spinner.tsx — loading indicator.
-
-import { cn } from '../lib/utils';
-
-export type SpinnerProps = {
-  size?: 'sm' | 'md' | 'lg';
-  className?: string;
-  label?: string;
-};
-
-export function Spinner({ size = 'md', className, label }: SpinnerProps) {
-  return (
-    <span
-      className={cn('spinner', `spinner-${size}`, className)}
-      role="status"
-      aria-label={label || 'Loading'}
-    />
-  );
-}

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

@@ -1,56 +0,0 @@
-// src/components/StatusBadge.tsx — small colored pill.
-
-import type { ReactNode } from 'react';
-import { cn } from '../lib/utils';
-
-/**
- * v6.0.0 — Doctor variants. 'ok' / 'warn' / 'fail' map onto
- * 'success' / 'warning' / 'error' respectively so existing CSS
- * rules cover the Doctor page without a new palette entry. The
- * `kind` union is widened (additive only) so every existing caller
- * keeps type-checking against the same set.
- */
-export type StatusKind =
-  | 'success'
-  | 'warning'
-  | 'error'
-  | 'info'
-  | 'accent'
-  | 'neutral'
-  | 'ok'
-  | 'warn'
-  | 'fail';
-
-export type StatusBadgeProps = {
-  kind?: StatusKind;
-  children: ReactNode;
-  className?: string;
-  dot?: boolean;
-};
-
-/**
- * Map a doctor-style status to the underlying badge kind. Done at
- * render time so callers don't have to translate; the CSS class is
- * always one of `badge-success | badge-warning | badge-error | …`.
- */
-function normalizeKind(kind: StatusKind): Exclude<StatusKind, 'ok' | 'warn' | 'fail'> {
-  if (kind === 'ok') return 'success';
-  if (kind === 'warn') return 'warning';
-  if (kind === 'fail') return 'error';
-  return kind;
-}
-
-export function StatusBadge({
-  kind = 'neutral',
-  children,
-  className,
-  dot = false,
-}: StatusBadgeProps) {
-  const normalized = normalizeKind(kind);
-  return (
-    <span className={cn('badge', `badge-${normalized}`, className)} title={`status: ${kind}`}>
-      {dot && <span className="badge-dot" />}
-      {children}
-    </span>
-  );
-}

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

@@ -1,41 +0,0 @@
-// src/components/Tag.tsx — pill for tags.
-
-import type { HTMLAttributes, ReactNode } from 'react';
-import { cn } from '../lib/utils';
-
-export type TagVariant =
-  | "neutral"
-  | "info"
-  | "accent"
-  | "primary"
-  | "success"
-  | "warning"
-  | "error";
-
-export type TagProps = HTMLAttributes<HTMLSpanElement> & {
-  children: ReactNode;
-  className?: string;
-  variant?: TagVariant;
-  onRemove?: () => void;
-};
-
-export function Tag({ children, className, variant, onRemove, ...rest }: TagProps) {
-  return (
-    <span
-      className={cn('tag', variant ? `tag-${variant}` : undefined, className)}
-      {...rest}
-    >
-      {children}
-      {onRemove && (
-        <button
-          type="button"
-          className="tag-remove"
-          aria-label={`Remove ${typeof children === 'string' ? children : 'tag'}`}
-          onClick={onRemove}
-        >
-          ×
-        </button>
-      )}
-    </span>
-  );
-}

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

@@ -1,161 +0,0 @@
-// src/web/components/TailscaleSettings.tsx
-//
-// v5.2 — Tailscale auth key integration UI.
-//
-// Allows users to authenticate with Tailscale using an auth key and
-// set up tailscale serve for the dashboard without using the CLI.
-import React, { useEffect, useState } from 'react';
-import { CheckCircle, Link as LinkIcon, Plug } from 'lucide-react';
-import { Card, CardTitle, CardMeta } from './Card';
-import { Button } from './Button';
-import { api } from '../lib/api';
-import type { TailscaleStatus } from '../lib/types';
-
-type Props = {
-  /** Existing tailscale status from Settings-level fetch. If provided, used as initial value. */
-  initialStatus?: TailscaleStatus | null;
-};
-
-export function TailscaleSettings({ initialStatus }: Props) {
-  const [status, setStatus] = useState<TailscaleStatus | null>(initialStatus ?? null);
-  const [authKey, setAuthKey] = useState('');
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    if (status === null) {
-      api.get<TailscaleStatus>('/tailscale/status')
-        .then((r) => setStatus(r))
-        .catch(() => setStatus(null));
-    }
-  }, []);
-
-  const loadStatus = async () => {
-    try {
-      const r = await api.get<TailscaleStatus>('/tailscale/status');
-      setStatus(r);
-    } catch {
-      setError('Failed to load Tailscale status');
-    }
-  };
-
-  const handleAuthenticate = async () => {
-    if (!authKey.trim()) return;
-    setLoading(true);
-    setError(null);
-    try {
-      await api.post('/tailscale/setup', { authKey: authKey.trim() });
-      await loadStatus();
-      setAuthKey('');
-    } catch (err) {
-      setError((err as Error).message || 'Authentication failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleSetupServe = async () => {
-    if (!status) return;
-    setLoading(true);
-    setError(null);
-    try {
-      await api.post('/tailscale/setup', {
-        port: status.settings?.port || 4321,
-        https: status.settings?.https !== false,
-        hostname: status.settings?.hostname || '',
-      });
-      await loadStatus();
-    } catch (err) {
-      setError((err as Error).message || 'Setup failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const handleRemoveServe = async () => {
-    setLoading(true);
-    setError(null);
-    try {
-      await api.post('/tailscale/unserve');
-      await loadStatus();
-    } catch (err) {
-      setError((err as Error).message || 'Remove failed');
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const isInstalled = status?.installed ?? false;
-  const isAuthenticated = status?.authenticated ?? false;
-  const isServeEnabled = status?.settings?.enabled ?? false;
-  const serveUrl = isServeEnabled ? `https://${status?.hostname || 'bizar-dash'}` : null;
-
-  if (!isInstalled) {
-    return (
-      <Card id="settings-tailscale-auth" data-section="tailscale">
-        <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
-        <CardMeta>Tailscale is not installed on this machine.</CardMeta>
-        <p className="muted">
-          Install from{' '}
-          <a href="https://tailscale.com/download" target="_blank" rel="noreferrer">
-            tailscale.com/download
-          </a>
-        </p>
-      </Card>
-    );
-  }
-
-  return (
-    <Card id="settings-tailscale-auth" data-section="tailscale">
-      <CardTitle><Plug size={14} /> Tailscale Integration</CardTitle>
-      <CardMeta>Expose the dashboard over your Tailscale network using an auth key.</CardMeta>
-
-      {error && (
-        <p style={{ color: 'var(--color-error, #f85149)', fontSize: '0.85rem' }}>{error}</p>
-      )}
-
-      {isAuthenticated ? (
-        <>
-          <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
-            <CheckCircle size={16} style={{ color: 'var(--color-success, #3fb950)' }} />
-            <span>Authenticated as <strong>{status?.hostname || 'unknown'}</strong></span>
-          </div>
-
-          {isServeEnabled && serveUrl ? (
-            <>
-              <div className="status-row" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', marginBottom: '0.75rem' }}>
-                <LinkIcon size={16} />
-                <a href={serveUrl} target="_blank" rel="noreferrer">{serveUrl}</a>
-              </div>
-              <Button variant="secondary" size="sm" onClick={handleRemoveServe} disabled={loading}>
-                Remove serve
-              </Button>
-            </>
-          ) : (
-            <Button variant="primary" size="sm" onClick={handleSetupServe} disabled={loading}>
-              Set up Tailscale serve
-            </Button>
-          )}
-        </>
-      ) : (
-        <>
-          <p className="muted" style={{ marginBottom: '0.75rem' }}>Not authenticated with Tailscale.</p>
-          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
-            <input
-              type="text"
-              className="input"
-              placeholder="tskey-..."
-              value={authKey}
-              onChange={(e) => setAuthKey(e.target.value)}
-              style={{ flex: 1, minWidth: '200px' }}
-              disabled={loading}
-            />
-            <Button variant="primary" size="sm" onClick={handleAuthenticate} disabled={loading || !authKey.trim()}>
-              Authenticate
-            </Button>
-          </div>
-        </>
-      )}
-    </Card>
-  );
-}