@polderlabs/bizar 2.4.0 → 2.6.0

package/src/views/Projects.tsx

@@ -0,0 +1,155 @@
+// src/views/Projects.tsx — discovered projects + activate.
+import { useEffect, useMemo, useState } from 'react';
+import { Folder, RefreshCw, FolderOpen } from 'lucide-react';
+import { Button } from '../components/Button';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { EmptyState } from '../components/EmptyState';
+import { Spinner } from '../components/Spinner';
+import { StatusBadge } from '../components/StatusBadge';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+import { cn, formatRelative } from '../lib/utils';
+import type { Project, Settings, Snapshot } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+export function Projects({ snapshot }: Props) {
+  const toast = useToast();
+  const [projects, setProjects] = useState<Project[]>(snapshot.projects || []);
+  const [loading, setLoading] = useState(!snapshot.projects);
+
+  useEffect(() => {
+    if (snapshot.projects?.length) {
+      setProjects(snapshot.projects);
+      setLoading(false);
+      return;
+    }
+    let cancelled = false;
+    api
+      .get<{ projects: Project[] }>('/projects')
+      .then((d) => {
+        if (!cancelled) {
+          setProjects(d.projects || []);
+          setLoading(false);
+        }
+      })
+      .catch((err) => {
+        if (!cancelled) {
+          setLoading(false);
+          toast.error(`Could not load projects: ${(err as Error).message}`);
+        }
+      });
+    return () => {
+      cancelled = true;
+    };
+  }, [snapshot.projects, toast]);
+
+  const sorted = useMemo(
+    () =>
+      [...projects].sort((a, b) => {
+        if (a.active && !b.active) return -1;
+        if (!a.active && b.active) return 1;
+        return b.mtime - a.mtime;
+      }),
+    [projects],
+  );
+
+  const refresh = async () => {
+    try {
+      const d = await api.get<{ projects: Project[] }>('/projects');
+      setProjects(d.projects || []);
+      toast.info('Projects refreshed.', 1500);
+    } catch (err) {
+      toast.error(`Refresh failed: ${(err as Error).message}`);
+    }
+  };
+
+  const activate = async (name: string) => {
+    try {
+      await api.post(`/projects/${encodeURIComponent(name)}/activate`);
+      toast.success(
+        `Activated "${name}". Restart the TUI in that directory to fully switch.`,
+      );
+      await refresh();
+    } catch (err) {
+      toast.error(`Activate failed: ${(err as Error).message}`);
+    }
+  };
+
+  return (
+    <div className="view view-projects">
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Folder size={18} /> Projects ({projects.length})
+          </h2>
+          <p className="view-subtitle">
+            Discovered from .bizar/PROJECT.md markers in cwd and ~/Projects.
+          </p>
+        </div>
+        <div className="view-actions">
+          <Button variant="secondary" size="sm" onClick={refresh}>
+            <RefreshCw size={14} /> Refresh
+          </Button>
+        </div>
+      </header>
+
+      {loading ? (
+        <div className="view-loading">
+          <Spinner size="lg" />
+        </div>
+      ) : sorted.length === 0 ? (
+        <EmptyState
+          icon={<FolderOpen size={32} />}
+          title="No projects found"
+          message={
+            <>
+              No <code>.bizar/PROJECT.md</code> files in cwd or <code>~/Projects</code>.
+            </>
+          }
+        />
+      ) : (
+        <div className="project-grid">
+          {sorted.map((p) => (
+            <Card
+              key={p.path}
+              variant="elevated"
+              className={cn('project-card', p.active && 'project-card-active')}
+            >
+              <div className="project-card-head">
+                <CardTitle>{p.name}</CardTitle>
+                {p.active && <StatusBadge kind="accent">active</StatusBadge>}
+              </div>
+              <div className="project-card-path mono" title={p.path}>
+                {p.path}
+              </div>
+              <CardMeta>
+                {p.projectMdSize
+                  ? `PROJECT.md: ${p.projectMdSize} bytes`
+                  : 'no PROJECT.md'}
+                {p.hindsightCount > 0 && ` · .hindsight: ${p.hindsightCount}`}
+                {' · '}accessed {formatRelative(p.mtime)}
+              </CardMeta>
+              <div className="project-card-actions">
+                <Button
+                  variant={p.active ? 'ghost' : 'primary'}
+                  size="sm"
+                  disabled={p.active}
+                  onClick={() => activate(p.name)}
+                >
+                  <FolderOpen size={12} /> Activate
+                </Button>
+              </div>
+            </Card>
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}

package/src/views/Settings.tsx

@@ -0,0 +1,253 @@
+// src/views/Settings.tsx — user settings form.
+import { useEffect, useMemo, useState } from 'react';
+import {
+  Sliders,
+  Save,
+  RefreshCw,
+  Sun,
+  Moon,
+  Monitor,
+  Info,
+} from 'lucide-react';
+import { Button } from '../components/Button';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+import { cn } from '../lib/utils';
+import { applyTheme, type Settings, type SettingsResponse, type Snapshot, type ThemeName } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => 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 },
+];
+
+export function SettingsView({ settings: initial, refreshSnapshot }: Props) {
+  const toast = useToast();
+  const [settings, setSettings] = useState<Settings>(initial);
+  const [dirty, setDirty] = useState(false);
+  const [saving, setSaving] = useState(false);
+
+  useEffect(() => {
+    setSettings(initial);
+    setDirty(false);
+  }, [initial]);
+
+  const patch = <K extends keyof Settings>(key: K, value: Settings[K]) => {
+    setSettings((cur) => ({ ...cur, [key]: value }));
+    setDirty(true);
+  };
+
+  const onSave = async () => {
+    setSaving(true);
+    try {
+      const r = await api.put<SettingsResponse>('/settings', settings);
+      setSettings(r.data);
+      setDirty(false);
+      applyTheme(r.data.theme);
+      toast.success('Settings saved.');
+      await refreshSnapshot();
+    } catch (err) {
+      toast.error(`Save failed: ${(err as Error).message}`);
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const onReload = async () => {
+    try {
+      const r = await api.get<SettingsResponse>('/settings');
+      setSettings(r.data);
+      setDirty(false);
+      applyTheme(r.data.theme);
+      toast.info('Settings reloaded.', 1500);
+    } catch (err) {
+      toast.error(`Reload failed: ${(err as Error).message}`);
+    }
+  };
+
+  const about = settings.about || {
+    version: '2.6.0',
+    homepage: 'https://github.com/DrB0rk/BizarHarness',
+    license: 'MIT',
+  };
+  const notif = settings.notifications || {
+    onAgentComplete: true,
+    onPlanApproval: true,
+  };
+
+  return (
+    <div className="view view-settings">
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <Sliders size={18} /> Settings
+          </h2>
+          <p className="view-subtitle">
+            Personal preferences. Changes are saved to{' '}
+            <code>~/.config/bizar/settings.json</code>.
+          </p>
+        </div>
+        <div className="view-actions">
+          <Button variant="secondary" size="sm" onClick={onReload}>
+            <RefreshCw size={14} /> Reload
+          </Button>
+          <Button
+            variant="primary"
+            size="sm"
+            disabled={!dirty || saving}
+            onClick={onSave}
+          >
+            {saving ? <span className="btn-spinner" /> : <Save size={14} />}
+            {saving ? 'Saving…' : 'Save'}
+          </Button>
+        </div>
+      </header>
+
+      <div className="settings-grid">
+        <Card>
+          <CardTitle>General</CardTitle>
+          <CardMeta>Theme, default agent, model override.</CardMeta>
+
+          <div className="field">
+            <label className="field-label">Theme</label>
+            <div className="theme-row">
+              {THEMES.map(({ id, label, Icon }) => {
+                const active = settings.theme === id;
+                return (
+                  <button
+                    key={id}
+                    type="button"
+                    className={cn(
+                      'theme-card',
+                      active && 'theme-card-active',
+                    )}
+                    onClick={() => {
+                      patch('theme', id);
+                      applyTheme(id);
+                    }}
+                  >
+                    <Icon size={16} />
+                    <span className="theme-card-label">{label}</span>
+                    <span
+                      className={cn(
+                        'theme-card-swatch',
+                        `theme-card-swatch-${id}`,
+                      )}
+                    />
+                  </button>
+                );
+              })}
+            </div>
+            <span className="field-help">
+              Dark is the default; Light is a low-contrast variant; System follows your OS.
+            </span>
+          </div>
+
+          <div className="field">
+            <label className="field-label" htmlFor="set-default-agent">
+              Default agent
+            </label>
+            <input
+              id="set-default-agent"
+              className="input"
+              type="text"
+              placeholder="e.g. odin"
+              value={settings.defaultAgent || ''}
+              onChange={(e) => patch('defaultAgent', e.target.value)}
+            />
+            <span className="field-help">
+              Agent used when none is specified.
+            </span>
+          </div>
+
+          <div className="field">
+            <label className="field-label" htmlFor="set-default-model">
+              Model override
+            </label>
+            <input
+              id="set-default-model"
+              className="input"
+              type="text"
+              placeholder="(leave empty to use provider default)"
+              value={settings.defaultModel || ''}
+              onChange={(e) => patch('defaultModel', e.target.value)}
+            />
+          </div>
+        </Card>
+
+        <Card>
+          <CardTitle>Notifications</CardTitle>
+          <CardMeta>Toast triggers inside the dashboard.</CardMeta>
+
+          <label className="checkbox-row">
+            <input
+              type="checkbox"
+              checked={!!notif.onAgentComplete}
+              onChange={(e) =>
+                setSettings((cur) => ({
+                  ...cur,
+                  notifications: {
+                    ...(cur.notifications || {
+                      onAgentComplete: false,
+                      onPlanApproval: false,
+                    }),
+                    onAgentComplete: e.target.checked,
+                  },
+                }))
+              }
+            />
+            <span>Notify when an agent invocation completes</span>
+          </label>
+
+          <label className="checkbox-row">
+            <input
+              type="checkbox"
+              checked={!!notif.onPlanApproval}
+              onChange={(e) =>
+                setSettings((cur) => ({
+                  ...cur,
+                  notifications: {
+                    ...(cur.notifications || {
+                      onAgentComplete: false,
+                      onPlanApproval: false,
+                    }),
+                    onPlanApproval: e.target.checked,
+                  },
+                }))
+              }
+            />
+            <span>Notify when a plan needs approval</span>
+          </label>
+        </Card>
+      </div>
+
+      <Card>
+        <CardTitle>
+          <Info size={14} /> About
+        </CardTitle>
+        <CardMeta>Build metadata.</CardMeta>
+        <dl className="about-table">
+          <dt>Version</dt>
+          <dd className="mono">{about.version}</dd>
+          <dt>Homepage</dt>
+          <dd>
+            <a href={about.homepage} target="_blank" rel="noopener noreferrer">
+              {about.homepage}
+            </a>
+          </dd>
+          <dt>License</dt>
+          <dd>{about.license}</dd>
+        </dl>
+      </Card>
+    </div>
+  );
+}