@polderlabs/bizar 5.0.2 → 5.2.0

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

@@ -0,0 +1,161 @@
+// 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>
+  );
+}

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

@@ -0,0 +1,31 @@
+// src/components/Toggle.tsx — toggle switch control.
+
+import { type InputHTMLAttributes, forwardRef } from 'react';
+import { cn } from '../lib/utils';
+
+export type ToggleProps = InputHTMLAttributes<HTMLInputElement> & {
+  /** Called with the new checked value on change. */
+  onChange?: (checked: boolean) => void;
+};
+
+export const Toggle = forwardRef<HTMLInputElement, ToggleProps>(
+  function Toggle({ className, checked, onChange, onClick, ...rest }, ref) {
+    return (
+      <label className={cn('toggle', className)}>
+        <input
+          ref={ref}
+          type="checkbox"
+          role="switch"
+          aria-checked={checked}
+          checked={checked}
+          onChange={(e) => onChange?.(e.target.checked)}
+          onClick={(e) => {
+            onClick?.(e as unknown as React.MouseEvent<HTMLInputElement>);
+          }}
+          {...rest}
+        />
+        <span className="toggle-slider" aria-hidden />
+      </label>
+    );
+  },
+);

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

@@ -24,6 +24,7 @@ import {
   Coins,
   Brain,
   Stethoscope,
+  ClipboardCheck,
   type LucideIcon,
 } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -51,8 +52,13 @@ export const TABS: TabDef[] = [
   { id: 'memory', label: 'Memory', icon: Brain },
   { id: 'mods', label: 'Mods', icon: Puzzle },
   { id: 'schedules', label: 'Schedules', icon: Clock },
+  { id: 'plugins', label: 'Plugins', icon: Puzzle },
   { id: 'history', label: 'History', icon: HistoryIcon },
   { id: 'minimax', label: 'Usage', icon: Coins },
+  // v5.2.0 — Eval framework UI. Lives next to Doctor (both are
+  // operator-quality surfaces) so the "did the last eval pass?"
+  // question is one click from the home screen.
+  { id: 'eval', label: 'Eval', icon: ClipboardCheck },
   // v6.0.0 — Doctor page. Lives between Overview and Settings so the
   // "is everything healthy?" question is always one click from the
   // home screen and from the settings surface (where an operator

package/bizar-dash/src/web/mobile/MobileChat.tsx

@@ -0,0 +1,138 @@
+// src/web/mobile/MobileChat.tsx — mobile chat UI without info/sessions sidebars.
+// No OCR capture, no clipper, no sessions panel — pure chat thread.
+import { useEffect, useRef, useState } from 'react';
+import { ChatTopBar } from '../components/chat/ChatTopBar';
+import { ChatThread } from '../components/chat/ChatThread';
+import { FloatingComposer } from '../components/chat/FloatingComposer';
+import { useChat } from '../components/chat/useChat';
+import { useSlashCommands } from '../components/chat/useSlashCommands';
+import { useToast } from '../components/Toast';
+import type { Snapshot, Settings } from '../lib/types';
+
+interface Props {
+  snapshot: Snapshot;
+  settings: Settings;
+  setActiveTab?: (id: string) => void;
+  initialTaskId?: string | null;
+  onClearTaskId?: () => void;
+}
+
+export function MobileChat({
+  snapshot,
+  settings,
+  setActiveTab,
+  initialTaskId,
+  onClearTaskId,
+}: Props) {
+  const toast = useToast();
+  const chat = useChat(snapshot, settings, initialTaskId ?? '');
+  useEffect(() => {
+    chat.setToast({
+      error: (msg: string) => toast.error(msg),
+      success: (msg: string) => toast.success(msg),
+      info: (msg: string) => toast.info(msg),
+      warning: (msg: string) => toast.warning(msg),
+    });
+  }, [chat, toast]);
+
+  const [text, setText] = useState('');
+  const [agent, setAgent] = useState(settings.defaultAgent || 'odin');
+  const [model, setModel] = useState(settings.defaultModel || '');
+  const [attachments, setAttachments] = useState<string[]>([]);
+
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const { suggestions, setQuery } = useSlashCommands(snapshot);
+  useEffect(() => {
+    setQuery(text);
+  }, [text, setQuery]);
+
+  const onAttach = () => fileInputRef.current?.click();
+  const onFiles = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const files = e.target.files;
+    if (!files) return;
+    const next: string[] = [];
+    for (let i = 0; i < files.length; i++) next.push(files[i].name);
+    setAttachments((cur) => {
+      const newNames = next.filter((n) => !cur.includes(n));
+      return [...cur, ...newNames];
+    });
+    if (fileInputRef.current) fileInputRef.current.value = '';
+  };
+
+  const handleSend = async () => {
+    const msg = text.trim();
+    if (!msg) return;
+    setText('');
+    setQuery('');
+    const result = await chat.onSend(msg, agent, model, attachments);
+    if (result.ok) chat.jumpToLatest();
+  };
+
+  return (
+    <div className="chat-shell">
+      <ChatTopBar
+        activeProject={snapshot.activeProject}
+        sessionCount={chat.sessions.length}
+        sessionsOpen={false}
+        infoOpen={false}
+        onToggleSessions={() => undefined}
+        onToggleInfo={() => undefined}
+        onOpenOverview={() => setActiveTab?.('overview')}
+      />
+      <div className="chat-body">
+        <main className="chat-main">
+          <ChatThread
+            messages={
+              chat.activeSource === 'opencode'
+                ? chat.opencodeMessages
+                : chat.bizarMessages
+            }
+            loading={chat.loading}
+            activeProject={snapshot.activeProject}
+            sessionId={
+              chat.activeSource === 'opencode'
+                ? chat.activeOpencodeSessionId ?? chat.sessionId
+                : chat.sessionId
+            }
+            pinned={chat.pinned}
+            activeSource={chat.activeSource}
+            onPickSuggestion={(t) => setText(t)}
+            onCopy={(m) =>
+              chat.copyMessage(m as Parameters<typeof chat.copyMessage>[0])
+            }
+            onDelete={() => undefined}
+            onTogglePin={chat.togglePin}
+            onRegenerate={chat.onRegenerate}
+          />
+          <FloatingComposer
+            agent={agent}
+            setAgent={setAgent}
+            model={model}
+            setModel={setModel}
+            text={text}
+            setText={setText}
+            sending={chat.sending}
+            activeSource={chat.activeSource}
+            onSend={handleSend}
+            attachments={attachments}
+            setAttachments={setAttachments}
+            suggestions={suggestions}
+            onPickSuggestion={(cmd) => setText(`${cmd.split(' ')[0]} `)}
+            agents={snapshot.agents || []}
+            onAttach={onAttach}
+            sessionsOpen={false}
+            infoOpen={false}
+          />
+          <input
+            ref={fileInputRef}
+            type="file"
+            multiple
+            style={{ display: 'none' }}
+            onChange={onFiles}
+          />
+        </main>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,196 @@
+// src/web/mobile/MobileSettings.tsx — minimal mobile settings (no companion app, no agent config).
+// Drops: Companion App (qrcode.react chunk), Tailscale Serve, Agent Behavior, Notifications toggles.
+import { useEffect, useState } from 'react';
+import { Sun, Moon, Monitor } from 'lucide-react';
+import { api } from '../lib/api';
+import { applyTheme, applyThemeTokens, type Settings, type Snapshot, type ThemeName } from '../lib/types';
+
+type Props = {
+  settings: Settings;
+  snapshot: Snapshot | null;
+  onRefresh: () => Promise<void>;
+};
+
+const THEMES: { id: ThemeName; label: string; Icon: typeof Sun }[] = [
+  { id: 'dark', label: 'Dark', Icon: Moon },
+  { id: 'light', label: 'Light', Icon: Sun },
+  { id: 'system', label: 'System', Icon: Monitor },
+];
+
+const PRESET_ACCENTS = [
+  { name: 'Purple', accent: '#8b5cf6' },
+  { name: 'Blue', accent: '#3b82f6' },
+  { name: 'Green', accent: '#10b981' },
+  { name: 'Orange', accent: '#f97316' },
+  { name: 'Red', accent: '#ef4444' },
+  { name: 'Pink', accent: '#ec4899' },
+  { name: 'Cyan', accent: '#06b6d4' },
+  { name: 'Mono', accent: '#6b7280' },
+];
+
+export function MobileSettings({ settings: initial, snapshot, onRefresh }: Props) {
+  const [settings, setSettings] = useState<Settings>(initial);
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setSettings(initial);
+    setDirty(false);
+    if (initial.theme) applyThemeTokens(initial.theme);
+  }, [initial]);
+
+  const patchTheme = (patch: Partial<Settings['theme']>) => {
+    setSettings((cur) => {
+      const next = { ...cur, theme: { ...cur.theme, ...patch } };
+      applyTheme(next.theme);
+      applyThemeTokens(next.theme);
+      return next;
+    });
+    setDirty(true);
+  };
+
+  const onSave = async () => {
+    setSaving(true);
+    try {
+      const r = await api.put<{ data: Settings }>('/settings', settings);
+      setSettings(r.data);
+      setDirty(false);
+      applyTheme(r.data.theme);
+      applyThemeTokens(r.data.theme);
+      onRefresh();
+    } catch {
+      // best-effort
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  return (
+    <div className="mobile-view">
+      {dirty && (
+        <div className="mobile-settings-save-bar">
+          <span>Unsaved changes</span>
+          <button type="button" className="mobile-btn" disabled={saving} onClick={onSave}>
+            {saving ? 'Saving…' : 'Save'}
+          </button>
+        </div>
+      )}
+
+      {/* Theme */}
+      <section className="mobile-section">
+        <h3 className="mobile-section-title">Appearance</h3>
+        <div className="mobile-card">
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Theme</span>
+            <div className="mobile-theme-btns">
+              {THEMES.map(({ id, label, Icon }) => (
+                <button
+                  key={id}
+                  type="button"
+                  className={`mobile-theme-btn ${settings.theme.mode === id ? 'active' : ''}`}
+                  onClick={() => patchTheme({ mode: id })}
+                >
+                  <Icon size={14} /> {label}
+                </button>
+              ))}
+            </div>
+          </div>
+
+          <div className="mobile-setting-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
+            <span className="mobile-setting-label">Accent color</span>
+            <div className="mobile-accent-swatches">
+              {PRESET_ACCENTS.map((p) => (
+                <button
+                  key={p.name}
+                  type="button"
+                  className={`mobile-accent-swatch ${settings.theme.accent === p.accent ? 'active' : ''}`}
+                  style={{ background: p.accent }}
+                  onClick={() => patchTheme({ accent: p.accent })}
+                  title={p.name}
+                />
+              ))}
+            </div>
+          </div>
+
+          <div className="mobile-setting-row" style={{ flexDirection: 'column', alignItems: 'flex-start', gap: 8 }}>
+            <span className="mobile-setting-label">Font size: {settings.theme.fontSize}px</span>
+            <input
+              type="range"
+              min={12}
+              max={20}
+              value={settings.theme.fontSize}
+              onChange={(e) => patchTheme({ fontSize: Number(e.target.value) })}
+              style={{ width: '100%' }}
+            />
+          </div>
+
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Compact mode</span>
+            <label className="mobile-toggle">
+              <input
+                type="checkbox"
+                checked={settings.theme.compactMode}
+                onChange={(e) => patchTheme({ compactMode: e.target.checked })}
+              />
+              <span className="mobile-toggle-slider" />
+            </label>
+          </div>
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Animations</span>
+            <label className="mobile-toggle">
+              <input
+                type="checkbox"
+                checked={settings.theme.animations}
+                onChange={(e) => patchTheme({ animations: e.target.checked })}
+              />
+              <span className="mobile-toggle-slider" />
+            </label>
+          </div>
+        </div>
+      </section>
+
+      {/* Chat defaults */}
+      <section className="mobile-section">
+        <h3 className="mobile-section-title">Chat Defaults</h3>
+        <div className="mobile-card">
+          <label className="mobile-field-label">Default Agent</label>
+          <select
+            className="mobile-input"
+            value={settings.defaultAgent || 'odin'}
+            onChange={(e) => setSettings((cur) => ({ ...cur, defaultAgent: e.target.value }))}
+          >
+            {(snapshot?.agents || []).map((a) => (
+              <option key={a.name} value={a.name}>@{a.name}</option>
+            ))}
+          </select>
+        </div>
+      </section>
+
+      {/* About */}
+      <section className="mobile-section">
+        <h3 className="mobile-section-title">About</h3>
+        <div className="mobile-card">
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Version</span>
+            <span className="mobile-setting-value mono">{settings.about?.version || '—'}</span>
+          </div>
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Agents</span>
+            <span className="mobile-setting-value">{snapshot?.agents?.length || 0}</span>
+          </div>
+          <div className="mobile-setting-row">
+            <span className="mobile-setting-label">Tasks</span>
+            <span className="mobile-setting-value">{snapshot?.tasks?.length || 0}</span>
+          </div>
+        </div>
+      </section>
+
+      {/* Switch to desktop */}
+      <div className="mobile-view-footer">
+        <a href="/?desktop=1" className="mobile-btn mobile-btn-secondary">
+          Switch to Desktop
+        </a>
+      </div>
+    </div>
+  );
+}