@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,154 +0,0 @@
-// src/web/views/settings/MemorySection.tsx — memory vault + git config for Settings.
-// v6.x — Vault path now loads from /api/memory/status (was hardcoded to '').
-// We also surface a small "Initialise" button when the vault does not exist.
-import React, { useEffect, useState } from 'react';
-import { Brain, GitBranch, Loader2, Save, FolderInput } from 'lucide-react';
-import { Button } from '../../components/Button';
-import { Card, CardTitle, CardMeta } from '../../components/Card';
-import { Spinner } from '../../components/Spinner';
-import { useToast } from '../../components/Toast';
-import { api } from '../../lib/api';
-
-type GitConfig = {
-  remoteUrl?: string;
-};
-
-type GlobalConfig = {
-  git?: GitConfig;
-};
-
-type MemoryStatus = {
-  initialized: boolean;
-  vaultRoot?: string | null;
-  mode?: string | null;
-};
-
-export function MemorySection() {
-  const toast = useToast();
-  const [loading, setLoading] = useState(true);
-  const [saving, setSaving] = useState(false);
-  const [initialising, setInitialising] = useState(false);
-  const [remoteUrl, setRemoteUrl] = useState('');
-  const [vaultPath, setVaultPath] = useState<string>('');
-  const [vaultInitialised, setVaultInitialised] = useState(false);
-  const [refreshKey, setRefreshKey] = useState(0);
-
-  useEffect(() => {
-    let cancelled = false;
-    (async () => {
-      try {
-        const [cfgRes, statusRes] = await Promise.all([
-          api.get<{ config: GlobalConfig; path?: string }>('/memory/config/global').catch(() => null),
-          api.get<MemoryStatus>('/memory/status').catch(() => null),
-        ]);
-        if (cancelled) return;
-        if (cfgRes) setRemoteUrl(cfgRes.config?.git?.remoteUrl || '');
-        if (statusRes) {
-          setVaultPath(statusRes.vaultRoot || '');
-          setVaultInitialised(!!statusRes.initialized);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => { cancelled = true; };
-  }, [refreshKey]);
-
-  const onSave = async () => {
-    setSaving(true);
-    try {
-      await api.put('/memory/config/global', { git: { remoteUrl } });
-      toast.success('Memory config saved.');
-      setRefreshKey((k) => k + 1);
-    } catch (err) {
-      toast.error(`Save failed: ${(err as Error).message}`);
-    } finally {
-      setSaving(false);
-    }
-  };
-
-  const onInitialise = async () => {
-    setInitialising(true);
-    try {
-      await api.post('/memory/init', {});
-      toast.success('Vault initialised.');
-      setRefreshKey((k) => k + 1);
-    } catch (err) {
-      toast.error(`Initialise failed: ${(err as Error).message}`);
-    } finally {
-      setInitialising(false);
-    }
-  };
-
-  return (
-    <Card id="settings-memory" data-section="memory">
-      <CardTitle><Brain size={14} /> Memory vault</CardTitle>
-      <CardMeta>
-        The vault lives at a default location on disk. Only the git remote URL
-        needs to be configured to enable sync across machines.
-      </CardMeta>
-
-      {loading ? (
-        <div className="flex-center" style={{ padding: 24 }}>
-          <Spinner size="sm" />
-        </div>
-      ) : (
-        <div className="settings-fields">
-          <div className="field">
-            <label className="field-label">
-              <FolderInput size={12} style={{ display: 'inline', marginRight: 4 }} />
-              Vault path
-            </label>
-            <div
-              className="field-readonly mono"
-              data-testid="settings-memory-vault-path"
-              style={{ fontSize: 12, padding: '6px 0' }}
-            >
-              {vaultPath || <span className="muted">not initialised</span>}
-              {vaultInitialised ? null : (
-                <Button
-                  variant="ghost"
-                  size="sm"
-                  onClick={onInitialise}
-                  disabled={initialising}
-                  style={{ marginLeft: 12 }}
-                >
-                  {initialising ? <Loader2 size={12} className="memory-spin" /> : <FolderInput size={12} />}
-                  Initialise
-                </Button>
-              )}
-            </div>
-          </div>
-
-          <div className="field">
-            <label className="field-label" htmlFor="set-memory-git-remote">
-              <GitBranch size={12} style={{ display: 'inline', marginRight: 4 }} />
-              Git remote URL
-            </label>
-            <input
-              id="set-memory-git-remote"
-              className="input mono"
-              type="text"
-              value={remoteUrl}
-              onChange={(e) => setRemoteUrl(e.target.value)}
-              placeholder="git@github.com:org/repo.git"
-            />
-            <span className="field-hint">Leave empty to use local-only mode (no git sync).</span>
-          </div>
-
-          <div style={{ marginTop: 12 }}>
-            <Button
-              variant="primary"
-              size="sm"
-              onClick={onSave}
-              disabled={saving}
-            >
-              {saving ? <Loader2 size={12} className="memory-spin" /> : <Save size={12} />}
-              Save memory config
-            </Button>
-          </div>
-        </div>
-      )}
-    </Card>
-  );
-}

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

@@ -1,87 +0,0 @@
-// 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

@@ -1,34 +0,0 @@
-// 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/SystemLlmSection.tsx

@@ -1,81 +0,0 @@
-// 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: 'cline', model: 'cline/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 || 'cline'}
-          onChange={(e) => {
-            const cur = settings.systemLlm || { enabled: true, provider: 'cline', model: 'cline/deepseek-v4-flash-free' };
-            patchTop('systemLlm', { ...cur, provider: e.target.value });
-          }}
-        >
-          <option value="cline">Cline</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="cline/deepseek-v4-flash-free"
-          value={settings.systemLlm?.model || 'cline/deepseek-v4-flash-free'}
-          onChange={(e) => {
-            const cur = settings.systemLlm || { enabled: true, provider: 'cline', model: 'cline/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

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