@polderlabs/bizar 4.4.13 → 4.5.1

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

@@ -0,0 +1,213 @@
+// src/web/components/SettingsSearch.tsx — fuzzy search across Settings sections with scroll-to highlight
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { Search, X } from 'lucide-react';
+import Fuse from 'fuse.js';
+import { cn } from '../lib/utils';
+
+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;
+};
+
+type Match = {
+  item: SettingsField | SettingsSection;
+  score: number;
+  type: 'section' | 'field';
+  sectionId: string;
+  fieldKey?: string;
+};
+
+function fuseSearch(items: SettingsSection[], query: string): Match[] {
+  if (!query.trim()) return [];
+
+  const sectionFuse = new Fuse(items, {
+    keys: ['label'],
+    threshold: 0.4,
+    includeScore: true,
+  });
+
+  const fieldFuse = new Fuse(
+    items.flatMap((s) => s.fields.map((f) => ({ ...f, _sectionId: s.id }))),
+    { keys: ['label', 'key'], threshold: 0.4, includeScore: true },
+  );
+
+  const results: Match[] = [];
+
+  for (const r of sectionFuse.search(query)) {
+    results.push({
+      item: r.item,
+      score: r.score ?? 1,
+      type: 'section',
+      sectionId: r.item.id,
+    });
+  }
+
+  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,
+    });
+  }
+
+  // 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);
+}
+
+export function SettingsSearch({ sections, onJump }: Props) {
+  const [q, setQ] = useState('');
+  const [matches, setMatches] = useState<Match[]>([]);
+  const [activeIdx, setActiveIdx] = useState(0);
+  const [highlighted, setHighlighted] = useState<string | null>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+  const debounceRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const highlightTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const search = useCallback(
+    (query: string) => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (!query.trim()) {
+        setMatches([]);
+        setActiveIdx(0);
+        return;
+      }
+      debounceRef.current = setTimeout(() => {
+        setMatches(fuseSearch(sections, query));
+        setActiveIdx(0);
+      }, 200);
+    },
+    [sections],
+  );
+
+  useEffect(() => {
+    search(q);
+  }, [q, search]);
+
+  // Cleanup timers
+  useEffect(() => {
+    return () => {
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      if (highlightTimerRef.current) clearTimeout(highlightTimerRef.current);
+    };
+  }, []);
+
+  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 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' && matches[activeIdx]) {
+      const m = matches[activeIdx];
+      highlightSection(m.sectionId);
+      onJump(m.sectionId, m.fieldKey);
+      setQ('');
+    }
+  };
+
+  const handleSelect = (m: Match) => {
+    highlightSection(m.sectionId);
+    onJump(m.sectionId, m.fieldKey);
+    setQ('');
+  };
+
+  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}
+          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>
+
+      {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>
+                )}
+              </button>
+            );
+          })}
+        </div>
+      )}
+
+      {q && matches.length === 0 && (
+        <div className="settings-search-empty muted">No matching settings.</div>
+      )}
+    </div>
+  );
+}

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

@@ -22,6 +22,7 @@ import {
   Activity,
   Radio,
   Coins,
+  Brain,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -46,11 +47,11 @@ export const TABS: TabDef[] = [
   { id: 'activity', label: 'Activity', icon: Activity },
   { id: 'background', label: 'Active', icon: Radio },
   { id: 'skills', label: 'Skills', icon: Sparkles },
+  { id: 'memory', label: 'Memory', icon: Brain },
   { id: 'mods', label: 'Mods', icon: Puzzle },
   { id: 'schedules', label: 'Schedules', icon: Clock },
   { id: 'history', label: 'History', icon: HistoryIcon },
   { id: 'minimax', label: 'Usage', icon: Coins },
-  { id: 'config', label: 'Config', icon: Settings2 },
   { id: 'settings', label: 'Settings', icon: Sliders },
 ];
 

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

@@ -0,0 +1,250 @@
+// src/web/components/UsageChart.tsx
+//
+// Hand-rolled SVG chart. No external chart library — keeps bundle small.
+//
+// Props:
+//   series: { labels: string[]; requests: number[]; tokens: number[] }
+//   height?: number (default 280)
+//   onHover?: (index: number | null, x: number, y: number) => void
+
+import { useCallback, useRef, useState } from 'react';
+import { cn } from '../lib/utils';
+
+type Props = {
+  series: { labels: string[]; requests: number[]; tokens: number[] };
+  height?: number;
+  onHover?: (index: number | null, x: number, y: number) => void;
+  className?: string;
+};
+
+const PADDING = { top: 16, right: 20, bottom: 40, left: 52 };
+
+export function UsageChart({ series, height = 280, onHover, className }: Props) {
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [tooltip, setTooltip] = useState<{ index: number; x: number; y: number } | null>(null);
+
+  const { labels, requests, tokens } = series;
+  const n = labels.length;
+  if (n === 0) {
+    return (
+      <div className={cn('usage-chart-empty', className)} style={{ height }}>
+        <span>No data for this range</span>
+      </div>
+    );
+  }
+
+  const innerW = 600 - PADDING.left - PADDING.right;
+  const innerH = height - PADDING.top - PADDING.bottom;
+
+  const maxReq = Math.max(...requests, 1);
+  const maxTok = Math.max(...tokens, 1);
+  // Two separate Y scales (left = requests, right = tokens)
+  const barW = Math.max(4, Math.min(24, Math.floor(innerW / n) - 4));
+  const gap = (innerW - barW * n) / (n + 1);
+
+  function barX(i: number) {
+    return PADDING.left + gap + i * (barW + gap);
+  }
+
+  function barH(v: number) {
+    return (v / maxReq) * innerH * 0.75;
+  }
+
+  function lineY(v: number) {
+    return PADDING.top + innerH - (v / maxTok) * innerH * 0.75;
+  }
+
+  // Build polyline points for the token line.
+  const linePoints = tokens
+    .map((v, i) => `${barX(i) + barW / 2},${lineY(v)}`)
+    .join(' ');
+
+  // Y-axis ticks (left, requests).
+  const leftTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({
+    y: PADDING.top + innerH - t * innerH * 0.75,
+    label: t === 0 ? '0' : `${Math.round(maxReq * t).toLocaleString()}`,
+  }));
+
+  // Y-axis ticks (right, tokens).
+  const rightTicks = [0, 0.25, 0.5, 0.75, 1].map(t => ({
+    y: PADDING.top + innerH - t * innerH * 0.75,
+    label: t === 0 ? '0' : `${Math.round(maxTok * t / 1000)}k`,
+  }));
+
+  // X-axis labels (show at most 7 to avoid crowding).
+  const labelStep = Math.max(1, Math.floor(n / 7));
+  const xLabels = labels.map((l, i) => ({ i, l, x: barX(i) + barW / 2 })).filter((_, i) => i % labelStep === 0);
+
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent<SVGSVGElement>) => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const svgX = (e.clientX - rect.left) * (600 / rect.width);
+      const svgY = (e.clientY - rect.top) * (height / rect.height);
+      // Find closest bar.
+      const relX = svgX - PADDING.left;
+      const i = Math.round((relX - gap / 2) / (barW + gap));
+      const clamped = Math.max(0, Math.min(n - 1, i));
+      setTooltip({ index: clamped, x: e.clientX - rect.left, y: e.clientY - rect.top });
+      onHover?.(clamped, svgX, svgY);
+    },
+    [n, barW, gap, onHover, height],
+  );
+
+  const handleMouseLeave = useCallback(() => {
+    setTooltip(null);
+    onHover?.(null, 0, 0);
+  }, [onHover]);
+
+  const tip = tooltip;
+
+  return (
+    <div ref={containerRef} className={cn('usage-chart', className)} style={{ position: 'relative' }}>
+      <svg
+        viewBox={`0 0 600 ${height}`}
+        width="100%"
+        height={height}
+        style={{ display: 'block', overflow: 'visible' }}
+        onMouseMove={handleMouseMove}
+        onMouseLeave={handleMouseLeave}
+      >
+        {/* Grid lines */}
+        {leftTicks.map((tick, i) => (
+          <line
+            key={`grid-${i}`}
+            x1={PADDING.left}
+            y1={tick.y}
+            x2={600 - PADDING.right}
+            y2={tick.y}
+            stroke="var(--border)"
+            strokeWidth={1}
+            strokeDasharray="4,3"
+            opacity={0.5}
+          />
+        ))}
+
+        {/* Left Y axis — requests */}
+        {leftTicks.map((tick, i) => (
+          <text
+            key={`ly-${i}`}
+            x={PADDING.left - 6}
+            y={tick.y + 4}
+            textAnchor="end"
+            fontSize={10}
+            fill="var(--text-muted)"
+            fontFamily="var(--font-mono, ui-monospace, monospace)"
+          >
+            {tick.label}
+          </text>
+        ))}
+
+        {/* Right Y axis — tokens */}
+        {rightTicks.map((tick, i) => (
+          <text
+            key={`ry-${i}`}
+            x={600 - PADDING.right + 6}
+            y={tick.y + 4}
+            textAnchor="start"
+            fontSize={10}
+            fill="var(--text-muted)"
+            fontFamily="var(--font-mono, ui-monospace, monospace)"
+          >
+            {tick.label}
+          </text>
+        ))}
+
+        {/* Bars — requests */}
+        {requests.map((v, i) => {
+          const bh = barH(v);
+          const bx = barX(i);
+          const by = PADDING.top + innerH - bh;
+          return (
+            <rect
+              key={`bar-${i}`}
+              x={bx}
+              y={by}
+              width={barW}
+              height={bh}
+              rx={2}
+              fill={tip?.index === i ? 'var(--accent)' : 'var(--accent)'}
+              opacity={tip?.index === i ? 1 : 0.75}
+              style={{ transition: 'opacity 120ms ease' }}
+            />
+          );
+        })}
+
+        {/* Token line */}
+        <polyline
+          points={linePoints}
+          fill="none"
+          stroke="var(--warning, #d29922)"
+          strokeWidth={2}
+          strokeLinejoin="round"
+          strokeLinecap="round"
+          opacity={0.9}
+        />
+
+        {/* Token dots */}
+        {tokens.map((v, i) => (
+          <circle
+            key={`dot-${i}`}
+            cx={barX(i) + barW / 2}
+            cy={lineY(v)}
+            r={tip?.index === i ? 5 : 3}
+            fill="var(--warning, #d29922)"
+            opacity={tip?.index === i ? 1 : 0.7}
+            style={{ transition: 'r 120ms ease' }}
+          />
+        ))}
+
+        {/* X axis labels */}
+        {xLabels.map(({ i, l, x }) => (
+          <text
+            key={`xl-${i}`}
+            x={x}
+            y={PADDING.top + innerH + 18}
+            textAnchor="middle"
+            fontSize={10}
+            fill="var(--text-muted)"
+            fontFamily="var(--font-mono, ui-monospace, monospace)"
+          >
+            {l}
+          </text>
+        ))}
+
+        {/* X axis line */}
+        <line
+          x1={PADDING.left}
+          y1={PADDING.top + innerH}
+          x2={600 - PADDING.right}
+          y2={PADDING.top + innerH}
+          stroke="var(--border)"
+          strokeWidth={1}
+        />
+      </svg>
+
+      {/* Floating tooltip */}
+      {tip !== null && (
+        <div
+          className="usage-chart-tooltip"
+          style={{
+            left: Math.min(tip.x + 12, 600 - 140),
+            top: tip.y - 60,
+          }}
+        >
+          <div className="usage-tooltip-date">{labels[tip.index]}</div>
+          <div className="usage-tooltip-row">
+            <span className="usage-tooltip-dot" style={{ background: 'var(--accent)' }} />
+            <span>Requests:</span>
+            <strong>{requests[tip.index].toLocaleString()}</strong>
+          </div>
+          <div className="usage-tooltip-row">
+            <span className="usage-tooltip-dot" style={{ background: 'var(--warning, #d29922)' }} />
+            <span>Tokens:</span>
+            <strong>{tokens[tip.index].toLocaleString()}</strong>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,90 @@
+// src/web/components/UsageTable.tsx
+//
+// Sortable compact table for per-model usage breakdown.
+//
+// Props:
+//   rows: PerModelRow[]
+//   sortKey: string
+//   sortDir: 'asc' | 'desc'
+//   onSort: (key: string) => void
+
+import { cn } from '../lib/utils';
+
+export type PerModelRow = {
+  providerId: string;
+  modelId: string;
+  requests: number;
+  totalTokens: number;
+  promptTokens: number;
+  completionTokens: number;
+  errors: number;
+  avgLatencyMs: number;
+};
+
+type Props = {
+  rows: PerModelRow[];
+  sortKey: string;
+  sortDir: 'asc' | 'desc';
+  onSort: (key: string) => void;
+};
+
+function SortHeader({ label, col, sortKey, sortDir, onSort }: {
+  label: string; col: string; sortKey: string; sortDir: 'asc' | 'desc'; onSort: (k: string) => void;
+}) {
+  const active = sortKey === col;
+  return (
+    <th
+      className={cn('usage-sort-header', active && 'is-active')}
+      onClick={() => onSort(col)}
+      aria-sort={active ? (sortDir === 'asc' ? 'ascending' : 'descending') : 'none'}
+    >
+      <span>{label}</span>
+      <span className="usage-sort-icon">
+        {active ? (sortDir === 'asc' ? ' ↑' : ' ↓') : ' ↕'}
+      </span>
+    </th>
+  );
+}
+
+export function UsageTable({ rows, sortKey, sortDir, onSort }: Props) {
+  return (
+    <div className="usage-table-wrap">
+      <table className="usage-table">
+        <thead>
+          <tr>
+            <SortHeader label="Model"        col="modelId"        sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Requests"    col="requests"        sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Prompt Tok"  col="promptTokens"    sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Compl Tok"   col="completionTokens" sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Total Tok"   col="totalTokens"     sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Avg Latency" col="avgLatencyMs"   sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+            <SortHeader label="Errors"     col="errors"          sortKey={sortKey} sortDir={sortDir} onSort={onSort} />
+          </tr>
+        </thead>
+        <tbody>
+          {rows.length === 0 ? (
+            <tr>
+              <td colSpan={7} className="usage-table-empty">No data for this range</td>
+            </tr>
+          ) : (
+            rows.map((row) => (
+              <tr key={`${row.providerId}::${row.modelId}`}>
+                <td className="usage-table-model">
+                  <code>{row.modelId}</code>
+                </td>
+                <td className="mono">{row.requests.toLocaleString()}</td>
+                <td className="mono">{row.promptTokens.toLocaleString()}</td>
+                <td className="mono">{row.completionTokens.toLocaleString()}</td>
+                <td className="mono">{row.totalTokens.toLocaleString()}</td>
+                <td className="mono">{row.avgLatencyMs}ms</td>
+                <td className={cn('mono', row.errors > 0 && 'is-err')}>
+                  {row.errors > 0 ? row.errors : '—'}
+                </td>
+              </tr>
+            ))
+          )}
+        </tbody>
+      </table>
+    </div>
+  );
+}

package/bizar-dash/src/web/components/chat/ChatComposer.tsx

@@ -1,18 +1,9 @@
-// src/components/chat/ChatComposer.tsx — bottom composer pill (v3.22 design).
+// src/components/chat/ChatComposer.tsx — bottom composer pill (v4.2.5).
 //
-// Replaces FloatingComposer. Visual layout follows the design HTML:
-//
-//   [agent chip] [model badge] [──── textarea ────] [📎] [✨] [➤]
-//
-// All wrapped in a single pill (chat-composer-pill) with rounded ends
-// and a focus-within accent border. The legacy Composer component
-// already provides the textarea, agent chip menu, attachment tags,
-// and slash-command suggestion dropdown — the redesign simply nests
-// the Composer inside the new pill chrome and adds the hint row
-// (⏎ / ⇧⏎ / /) underneath.
-//
-// Props match the original FloatingComposer EXACTLY (so Chat.tsx +
-// MobileChat.tsx don't need any changes).
+// v4.2.5 — small refinement: the pill's border picks up the
+// activeSource color (opencode → accent border; bizar → neutral),
+// so the user has visual confirmation that their next message will
+// land in the right backend.
 
 import { useState } from 'react';
 import { Composer } from './Composer';
@@ -32,31 +23,29 @@ interface Props {
   onPickSuggestion: (cmd: string) => void;
   agents: Array<{ name: string }>;
   onAttach: () => void;
-  /** Backward-compat — used to be page-level panel toggles. Ignored in
-   *  the redesign (rail + info are always visible). */
+  /** Which stream will receive the next message. */
+  activeSource?: 'bizar' | 'opencode' | null;
+  /** Backward-compat — used to be page-level panel toggles. Ignored. */
   sessionsOpen?: boolean;
   /** Backward-compat — see sessionsOpen. */
   infoOpen?: boolean;
 }
 
 export function ChatComposer(props: Props) {
-  const { text, sending, onSend } = props;
+  const { text, sending, onSend, activeSource } = props;
   const [takingOff, setTakingOff] = useState(false);
 
-  // Wrap onSend with a brief takeoff animation — a small CSS hook on
-  // the wrapper pill. We don't animate a specific element here; the
-  // pill itself gets the brief `takeoff` class so the send button
-  // (the last child of Composer) gets the animation if the design
-  // wants it.
   const handleSend = () => {
-    if (!text.trim()) return;
+    if (!text.trim() || sending) return;
     setTakingOff(true);
     onSend();
     window.setTimeout(() => setTakingOff(false), 320);
   };
 
   return (
-    <div className="chat-composer-wrap">
+    <div
+      className={`chat-composer-wrap chat-composer-source-${activeSource ?? 'none'}`}
+    >
       <div className={`chat-composer-pill${takingOff ? ' takeoff' : ''}`}>
         <Composer {...props} onSend={handleSend} />
       </div>
@@ -70,7 +59,14 @@ export function ChatComposer(props: Props) {
         <span>
           <kbd>/</kbd> commands
         </span>
+        {activeSource === 'opencode' && (
+          <span className="chat-composer-source-hint">→ opencode</span>
+        )}
+        {activeSource === 'bizar' && (
+          <span className="chat-composer-source-hint">→ bizar chat</span>
+        )}
+        {sending && <span className="chat-composer-source-hint">sending…</span>}
       </div>
     </div>
   );
-}
+}