@polderlabs/bizar 4.7.0 → 4.7.2

package/bizar-dash/src/web/views/settings/NetworkSection.tsx

@@ -0,0 +1,87 @@
+// src/web/views/settings/NetworkSection.tsx
+import React from 'react';
+import { Server as ServerIcon, Plug } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+import { Button } from '../../components/Button';
+import type { TailscaleStatus } from '../../lib/types';
+
+type Props = {
+  tailscale: TailscaleStatus | null;
+  tailscaleDraft: { port: number; https: boolean; hostname: string };
+  setTailscaleDraft: React.Dispatch<React.SetStateAction<{ port: number; https: boolean; hostname: string }>>;
+  onTailscaleToggle: () => void;
+};
+
+export function NetworkSection({ tailscale, tailscaleDraft, setTailscaleDraft, onTailscaleToggle }: Props) {
+  return (
+    <>
+      {/* Service */}
+      <Card id="settings-service" data-section="service">
+        <CardTitle><ServerIcon size={14} /> Service</CardTitle>
+        <CardMeta>Background daemon that runs schedules.</CardMeta>
+        <div data-setting-id="service.enabled">
+          {tailscale ? (
+            <div className="service-card">
+              <p>
+                Status: <strong>{tailscale.settings.enabled ? 'enabled' : 'disabled'}</strong>
+                {' '}· Tailscale installed: <strong>{tailscale.installed ? 'yes' : 'no'}</strong>
+                {' '}· authenticated: <strong>{tailscale.authenticated ? 'yes' : 'no'}</strong>
+              </p>
+              <p className="muted">
+                Use <code>bizar service start</code> / <code>bizar service stop</code> in
+                your terminal to control the daemon.
+              </p>
+            </div>
+          ) : (
+            <p className="muted">Loading service status…</p>
+          )}
+        </div>
+      </Card>
+
+      {/* Tailscale */}
+      <Card id="settings-tailscale" data-section="tailscale">
+        <CardTitle><Plug size={14} /> Tailscale serve</CardTitle>
+        <CardMeta>Expose the dashboard over your Tailscale network.</CardMeta>
+        {tailscale ? (
+          <>
+            <p>
+              Installed: <strong>{tailscale.installed ? 'yes' : 'no'}</strong>{' '}
+              {tailscale.version && <span className="muted">({tailscale.version})</span>}
+            </p>
+            <p>
+              Authenticated: <strong>{tailscale.authenticated ? 'yes' : 'no'}</strong>
+            </p>
+            <p>
+              Serve enabled: <strong>{tailscale.settings.enabled ? 'yes' : 'no'}</strong>
+            </p>
+            <div className="task-form-row">
+              <div className="task-form-field">
+                <label className="field-label">Port</label>
+                <input
+                  type="number"
+                  className="input"
+                  value={tailscaleDraft.port}
+                  onChange={(e) => setTailscaleDraft((cur) => ({ ...cur, port: Number(e.target.value) || 4321 }))}
+                />
+              </div>
+              <div className="task-form-field">
+                <label className="field-label" htmlFor="tailscale-https">Use HTTPS</label>
+                <input
+                  id="tailscale-https"
+                  type="checkbox"
+                  checked={tailscaleDraft.https}
+                  onChange={(e) => setTailscaleDraft((cur) => ({ ...cur, https: e.target.checked }))}
+                />
+              </div>
+            </div>
+            <Button variant="primary" onClick={onTailscaleToggle}>
+              {tailscale.settings.enabled ? 'Disable serve' : 'Enable serve'}
+            </Button>
+          </>
+        ) : (
+          <p className="muted">Loading Tailscale status…</p>
+        )}
+      </Card>
+    </>
+  );
+}

package/bizar-dash/src/web/views/settings/NotificationsSection.tsx

@@ -0,0 +1,34 @@
+// src/web/views/settings/NotificationsSection.tsx
+import React from 'react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+import type { Settings } from '../../lib/types';
+
+type Props = {
+  settings: Settings;
+  patchNotifications: (patch: Partial<Settings['notifications']>) => void;
+};
+
+export function NotificationsSection({ settings, patchNotifications }: Props) {
+  return (
+    <Card id="settings-notifications" data-section="notifications">
+      <CardTitle>Notifications</CardTitle>
+      <CardMeta>Toast triggers inside the dashboard.</CardMeta>
+      <label className="checkbox-row" data-setting-id="notifications.onAgentComplete">
+        <input
+          type="checkbox"
+          checked={!!settings.notifications.onAgentComplete}
+          onChange={(e) => patchNotifications({ onAgentComplete: e.target.checked })}
+        />
+        <span>Notify when an agent invocation completes</span>
+      </label>
+      <label className="checkbox-row" data-setting-id="notifications.onPlanApproval">
+        <input
+          type="checkbox"
+          checked={!!settings.notifications.onPlanApproval}
+          onChange={(e) => patchNotifications({ onPlanApproval: e.target.checked })}
+        />
+        <span>Notify when a plan needs approval</span>
+      </label>
+    </Card>
+  );
+}

package/bizar-dash/src/web/views/settings/ProvidersSection.tsx

@@ -0,0 +1,16 @@
+// src/web/views/settings/ProvidersSection.tsx
+// Placeholder — ProvidersPanel integration to be added in a future PR.
+import React from 'react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+
+export function ProvidersSection() {
+  return (
+    <Card id="settings-providers" data-section="providers">
+      <CardTitle>AI Providers</CardTitle>
+      <CardMeta>Configure API keys and endpoints for AI providers.</CardMeta>
+      <p className="muted" style={{ fontSize: 12 }}>
+        Provider management is coming soon.
+      </p>
+    </Card>
+  );
+}

package/bizar-dash/src/web/views/settings/SkillsSection.tsx

@@ -0,0 +1,16 @@
+// src/web/views/settings/SkillsSection.tsx
+// Placeholder — Skills paths + refresh to be added in a future PR.
+import React from 'react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+
+export function SkillsSection() {
+  return (
+    <Card id="settings-skills" data-section="skills">
+      <CardTitle>Skills</CardTitle>
+      <CardMeta>Manage agent skill paths and refresh available skills.</CardMeta>
+      <p className="muted" style={{ fontSize: 12 }}>
+        Skills configuration is coming soon.
+      </p>
+    </Card>
+  );
+}

package/bizar-dash/src/web/views/settings/SystemLlmSection.tsx

@@ -0,0 +1,81 @@
+// src/web/views/settings/SystemLlmSection.tsx
+import React from 'react';
+import { Sparkles } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+import type { Settings } from '../../lib/types';
+
+type Props = {
+  settings: Settings;
+  patchTop: <K extends keyof Settings>(key: K, value: Settings[K]) => void;
+};
+
+export function SystemLlmSection({ settings, patchTop }: Props) {
+  return (
+    <Card id="settings-system-llm" data-section="system-llm">
+      <CardTitle><Sparkles size={14} /> System LLM API</CardTitle>
+      <CardMeta>
+        Configures the LLM used for automatic title generation, prompt enhancement,
+        summarization, and other system-level calls.
+      </CardMeta>
+
+      <label className="checkbox-row" data-setting-id="systemLlm.enabled">
+        <input
+          type="checkbox"
+          checked={!!settings.systemLlm?.enabled}
+          onChange={(e) => {
+            const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
+            patchTop('systemLlm', { ...cur, enabled: e.target.checked });
+          }}
+        />
+        <span>Enable system LLM calls</span>
+      </label>
+
+      <div className="field" data-setting-id="systemLlm.provider" style={{ marginTop: 'var(--space-3)' }}>
+        <label className="field-label" htmlFor="set-system-llm-provider">Provider</label>
+        <select
+          id="set-system-llm-provider"
+          className="select"
+          value={settings.systemLlm?.provider || 'opencode'}
+          onChange={(e) => {
+            const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
+            patchTop('systemLlm', { ...cur, provider: e.target.value });
+          }}
+        >
+          <option value="opencode">Opencode</option>
+          <option value="openrouter">OpenRouter</option>
+          <option value="minimax">MiniMax</option>
+        </select>
+      </div>
+
+      <div className="field" data-setting-id="systemLlm.model">
+        <label className="field-label" htmlFor="set-system-llm-model">Model</label>
+        <input
+          id="set-system-llm-model"
+          className="input mono"
+          type="text"
+          placeholder="opencode/deepseek-v4-flash-free"
+          value={settings.systemLlm?.model || 'opencode/deepseek-v4-flash-free'}
+          onChange={(e) => {
+            const cur = settings.systemLlm || { enabled: true, provider: 'opencode', model: 'opencode/deepseek-v4-flash-free' };
+            patchTop('systemLlm', { ...cur, model: e.target.value });
+          }}
+        />
+        <p className="field-help">
+          The API key is read from <code>auth.json</code> for the selected provider.
+          Leave the default model for best results.
+        </p>
+      </div>
+
+      <div style={{ marginTop: 'var(--space-4)' }}>
+        <h4 style={{ margin: '0 0 var(--space-2)' }}>Features using this API</h4>
+        <ul className="settings-feature-list" style={{ margin: 0, paddingLeft: 'var(--space-4)', lineHeight: 1.8 }}>
+          <li>Auto-title generation for new chat sessions</li>
+          <li>Auto-title generation for new tasks</li>
+          <li>&quot;Enhance prompt&quot; button in the task input</li>
+          <li>&quot;Enhance prompt&quot; button in the chat composer</li>
+          <li className="muted" style={{ fontSize: 12 }}>Future: summarization, name generation, and more</li>
+        </ul>
+      </div>
+    </Card>
+  );
+}

package/bizar-dash/src/web/views/settings/ThemeSection.tsx

@@ -0,0 +1,168 @@
+// src/web/views/settings/ThemeSection.tsx
+import React from 'react';
+import { Palette, Sun, Moon, Monitor } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+import { cn } from '../../lib/utils';
+import type { Settings, ThemeName } from '../../lib/types';
+
+type Props = {
+  settings: Settings;
+  patchTheme: (patch: Partial<Settings['theme']>) => void;
+  patchUi: (patch: Partial<Settings['ui']>) => 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_THEMES = [
+  { 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' },
+];
+
+const FONT_FAMILIES = [
+  'Inter',
+  'system-ui',
+  'Segoe UI',
+  'Roboto',
+  'JetBrains Mono',
+  'SF Mono',
+  'Cascadia Code',
+];
+
+export function ThemeSection({ settings, patchTheme, patchUi }: Props) {
+  return (
+    <Card id="settings-theme" data-section="theme">
+      <CardTitle><Palette size={14} /> Theme</CardTitle>
+      <CardMeta>Mode, accent, and colors. Live preview as you tweak.</CardMeta>
+
+      {/* Accent presets */}
+      <div className="field" data-setting-id="theme.presets">
+        <label className="field-label">Accent presets</label>
+        <div className="theme-presets">
+          {PRESET_THEMES.map((t) => (
+            <button
+              key={t.name}
+              type="button"
+              className={cn(
+                'theme-preset',
+                settings.theme.accent === t.accent && 'theme-preset-active',
+              )}
+              onClick={() => patchTheme({ accent: t.accent })}
+              title={t.name}
+            >
+              <span
+                className="theme-preset-swatch"
+                style={{ background: t.accent }}
+              />
+              <span className="theme-preset-name">{t.name}</span>
+            </button>
+          ))}
+        </div>
+      </div>
+
+      {/* Mode */}
+      <div className="field" data-setting-id="theme.mode">
+        <label className="field-label">Mode</label>
+        <div className="theme-row">
+          {THEMES.map(({ id, label, Icon }) => {
+            const active = settings.theme.mode === id;
+            return (
+              <button
+                key={id}
+                type="button"
+                className={cn('theme-card', active && 'theme-card-active')}
+                onClick={() => patchTheme({ mode: id })}
+              >
+                <Icon size={16} />
+                <span className="theme-card-label">{label}</span>
+                <span
+                  className={cn(
+                    'theme-card-swatch',
+                    `theme-card-swatch-${id}`,
+                  )}
+                />
+              </button>
+            );
+          })}
+        </div>
+      </div>
+
+      {/* Custom colors */}
+      <div className="theme-colors">
+        {(['accent', 'success', 'warning', 'error', 'info'] as const).map((c) => (
+          <div key={c} className="field" data-setting-id={`theme.${c}`}>
+            <label className="field-label">{c.charAt(0).toUpperCase() + c.slice(1)}</label>
+            <div className="color-row">
+              <input
+                type="color"
+                className="input color-input"
+                value={settings.theme[c]}
+                onChange={(e) => patchTheme({ [c]: e.target.value })}
+                aria-label={`${c} color`}
+              />
+              <input
+                type="text"
+                className="input"
+                value={settings.theme[c]}
+                onChange={(e) => patchTheme({ [c]: e.target.value })}
+                aria-label={`${c} color hex`}
+              />
+            </div>
+          </div>
+        ))}
+      </div>
+
+      {/* Font */}
+      <div className="field" data-setting-id="theme.fontFamily">
+        <label className="field-label">Font family</label>
+        <select
+          className="select"
+          value={settings.theme.fontFamily}
+          onChange={(e) => patchTheme({ fontFamily: e.target.value })}
+        >
+          {FONT_FAMILIES.map((f) => (
+            <option key={f} value={f}>{f}</option>
+          ))}
+        </select>
+      </div>
+
+      <div className="field" data-setting-id="theme.fontSize">
+        <label className="field-label">Font size: {settings.theme.fontSize}px</label>
+        <input
+          type="range"
+          min={12}
+          max={20}
+          value={settings.theme.fontSize}
+          onChange={(e) => patchTheme({ fontSize: Number(e.target.value) })}
+        />
+      </div>
+
+      <label className="checkbox-row" data-setting-id="theme.compactMode">
+        <input
+          type="checkbox"
+          checked={settings.theme.compactMode}
+          onChange={(e) => patchTheme({ compactMode: e.target.checked })}
+        />
+        <span>Compact mode (denser UI)</span>
+      </label>
+
+      <label className="checkbox-row" data-setting-id="theme.animations">
+        <input
+          type="checkbox"
+          checked={settings.theme.animations}
+          onChange={(e) => patchTheme({ animations: e.target.checked })}
+        />
+        <span>Enable animations</span>
+      </label>
+    </Card>
+  );
+}

package/bizar-dash/src/web/views/settings/UpdatesSection.tsx

@@ -0,0 +1,256 @@
+// src/web/views/settings/UpdatesSection.tsx
+import React, { useEffect, useState } from 'react';
+import { Download, RefreshCw, CheckCircle, AlertCircle, AlertTriangle } from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../../components/Card';
+import { Button } from '../../components/Button';
+import { useToast } from '../../components/Toast';
+import { api } from '../../lib/api';
+import { Ws } from '../../lib/ws';
+
+type PkgStatus = {
+  status: 'idle' | 'starting' | 'installing' | 'done' | 'error';
+  error?: string;
+  newVersion?: string;
+  logs: string[];
+};
+
+type StatusState = {
+  current: Record<string, string | null>;
+  latest: Record<string, string | null> | null;
+  checking: boolean;
+  updating: boolean;
+  hasUpdates: boolean;
+  requiresRestart: boolean;
+  perPackage: Record<string, PkgStatus>;
+  error?: string;
+};
+
+const PACKAGES = [
+  { id: 'bizar', name: 'Bizar CLI' },
+  { id: 'bizar-dash', name: 'Dashboard' },
+  { id: 'bizar-plugin', name: 'Opencode Plugin' },
+];
+
+export function UpdatesSection() {
+  const toast = useToast();
+  const [status, setStatus] = useState<StatusState>({
+    current: {},
+    latest: null,
+    checking: false,
+    updating: false,
+    hasUpdates: false,
+    requiresRestart: false,
+    perPackage: {},
+  });
+
+  // WebSocket subscription for live update progress
+  useEffect(() => {
+    const ws = new Ws();
+    ws.on((msg: Record<string, unknown>) => {
+      if (msg.type === 'update:progress' || msg.type === 'update:log' || msg.type === 'update:complete') {
+        setStatus((s) => {
+          if (msg.type === 'update:complete') {
+            return {
+              ...s,
+              updating: false,
+              requiresRestart: Boolean((msg as { requiresRestart?: boolean }).requiresRestart),
+            };
+          }
+          if (msg.type === 'update:log') {
+            const m = msg as { pkg: string; line: string };
+            const existing = s.perPackage[m.pkg] || { logs: [] };
+            return {
+              ...s,
+              perPackage: {
+                ...s.perPackage,
+                [m.pkg]: {
+                  ...existing,
+                  logs: [...(existing.logs || []).slice(-50), m.line],
+                },
+              },
+            };
+          }
+          // update:progress
+          const m = msg as { pkg: string; status: PkgStatus['status']; error?: string; newVersion?: string };
+          return {
+            ...s,
+            perPackage: {
+              ...s.perPackage,
+              [m.pkg]: {
+                ...s.perPackage[m.pkg],
+                status: m.status,
+                error: m.error,
+                newVersion: m.newVersion,
+              },
+            },
+          };
+        });
+      }
+    });
+    return () => ws.close();
+  }, []);
+
+  // Load current versions on mount
+  useEffect(() => {
+    api.get<{ current: Record<string, string | null> }>('/updates/status')
+      .then((r) => setStatus((s) => ({ ...s, current: r.current })))
+      .catch((e) => setStatus((s) => ({ ...s, error: e.message })));
+  }, []);
+
+  const check = async () => {
+    setStatus((s) => ({ ...s, checking: true, error: undefined }));
+    try {
+      const r = await api.get<{
+        current: Record<string, string | null>;
+        latest: Record<string, string | null>;
+        hasUpdates: boolean;
+      }>('/updates/check');
+      setStatus((s) => ({
+        ...s,
+        checking: false,
+        current: r.current,
+        latest: r.latest,
+        hasUpdates: r.hasUpdates,
+      }));
+    } catch (err) {
+      setStatus((s) => ({ ...s, checking: false, error: (err as Error).message }));
+    }
+  };
+
+  const applyUpdate = async () => {
+    if (!confirm('Update Bizar packages? The dashboard will restart automatically.')) return;
+    setStatus((s) => ({
+      ...s,
+      updating: true,
+      requiresRestart: false,
+      perPackage: {},
+      error: undefined,
+    }));
+    try {
+      await api.post('/updates/apply', { packages: ['bizar', 'bizar-dash', 'bizar-plugin'] });
+    } catch (err) {
+      setStatus((s) => ({ ...s, updating: false, error: (err as Error).message }));
+    }
+  };
+
+  const restart = async () => {
+    if (!confirm('Restart the dashboard? You will be disconnected briefly.')) return;
+    try {
+      await api.post('/restart');
+      toast.info('Restarting…', 3000);
+      setTimeout(() => window.location.reload(), 3000);
+    } catch {
+      toast.error('Restart failed');
+    }
+  };
+
+  const isBusy = status.checking || status.updating;
+
+  return (
+    <Card id="settings-updates" data-section="updates">
+      <CardTitle><Download size={14} /> Updates</CardTitle>
+      <CardMeta>Check installed Bizar packages and apply dashboard updates.</CardMeta>
+
+      {/* Current versions */}
+      <div className="updates-current">
+        <h4>Installed versions</h4>
+        <ul>
+          {PACKAGES.map((p) => (
+            <li key={p.id}>
+              <span>{p.name}</span>
+              <code className="mono">{status.current[p.id] || '—'}</code>
+            </li>
+          ))}
+        </ul>
+      </div>
+
+      {/* Latest + per-package status */}
+      {status.latest && (
+        <div className="updates-latest">
+          <h4>Latest available</h4>
+          <ul>
+            {PACKAGES.map((p) => {
+              const cur = status.current[p.id];
+              const lat = status.latest?.[p.id];
+              const isOutdated = cur && lat && cur !== lat;
+              return (
+                <li key={p.id} className={isOutdated ? 'updates-outdated' : 'updates-current-version'}>
+                  <span>{p.name}</span>
+                  <code className="mono">
+                    {lat || '—'}
+                    {isOutdated && <span className="updates-badge">update available</span>}
+                  </code>
+                </li>
+              );
+            })}
+          </ul>
+        </div>
+      )}
+
+      {/* Per-package progress rows */}
+      {status.updating && (
+        <div className="updates-progress-rows">
+          {PACKAGES.map((p) => {
+            const pkgStatus = status.perPackage[p.id] || { status: 'idle', logs: [] as string[] };
+            return (
+              <div key={p.id} className="updates-pkg-row">
+                <div className="updates-pkg-row-header">
+                  <span className="updates-pkg-name">{p.name}</span>
+                  <div className="updates-pkg-status">
+                    {pkgStatus.status === 'starting' && <span className="btn-spinner" />}
+                    {pkgStatus.status === 'installing' && <span className="btn-spinner" />}
+                    {pkgStatus.status === 'done' && <CheckCircle size={14} className="icon-success" />}
+                    {pkgStatus.status === 'error' && <AlertCircle size={14} className="icon-error" />}
+                    <span>{pkgStatus.status}</span>
+                    {pkgStatus.newVersion && (
+                      <code className="mono" style={{ fontSize: 11 }}>→ {pkgStatus.newVersion}</code>
+                    )}
+                  </div>
+                </div>
+                {pkgStatus.logs.length > 0 && (
+                  <details className="updates-pkg-logs">
+                    <summary>npm output ({pkgStatus.logs.length} lines)</summary>
+                    <pre>{pkgStatus.logs.join('\n')}</pre>
+                  </details>
+                )}
+                {pkgStatus.status === 'error' && pkgStatus.error && (
+                  <div className="updates-pkg-error">
+                    <AlertTriangle size={12} /> {pkgStatus.error}
+                  </div>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      )}
+
+      {/* Actions */}
+      <div className="updates-actions">
+        <Button onClick={check} disabled={isBusy}>
+          {status.checking ? <span className="btn-spinner" /> : <RefreshCw size={14} />}
+          Check for updates
+        </Button>
+        <Button
+          variant="primary"
+          onClick={applyUpdate}
+          disabled={!status.hasUpdates || status.updating}
+        >
+          {status.updating ? <span className="btn-spinner" /> : <Download size={14} />}
+          {status.updating ? 'Updating…' : (status.hasUpdates ? 'Update now' : 'Up to date')}
+        </Button>
+        {status.requiresRestart && (
+          <Button variant="danger" onClick={restart}>
+            <RefreshCw size={14} /> Restart Dashboard
+          </Button>
+        )}
+      </div>
+
+      {status.error && (
+        <div className="updates-error">
+          <AlertTriangle size={14} />
+          <span>{status.error}</span>
+        </div>
+      )}
+    </Card>
+  );
+}