@polderlabs/bizar 7.0.2 → 8.0.0

package/bizar-dash/src/web/mobile/views/MobileMods.tsx

@@ -1,149 +0,0 @@
-// src/mobile/views/MobileMods.tsx — mods list with detail sheet.
-import { useEffect, useState } from 'react';
-import { Sliders, RefreshCw, Power } from 'lucide-react';
-import { api } from '../../lib/api';
-import type { Mod, Snapshot } from '../../lib/types';
-import { MobileBottomSheet } from '../components/MobileBottomSheet';
-
-type Props = {
-  snapshot: Snapshot;
-  onBack: () => void;
-};
-
-export function MobileMods({ snapshot, onBack }: Props) {
-  const [mods, setMods] = useState<Mod[]>(snapshot.mods || []);
-  const [loading, setLoading] = useState(!snapshot.mods);
-  const [filter, setFilter] = useState('');
-  const [statusFilter, setStatusFilter] = useState<'all' | 'enabled' | 'disabled'>('all');
-  const [detailMod, setDetailMod] = useState<Mod | null>(null);
-
-  const reload = async () => {
-    try {
-      const data = await api.get<{ mods: Mod[] }>('/mods');
-      setMods(data.mods || []);
-    } catch {
-      // best-effort
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  useEffect(() => {
-    if (snapshot.mods) {
-      setMods(snapshot.mods);
-      setLoading(false);
-    } else {
-      reload();
-    }
-  }, [snapshot.mods]);
-
-  const toggleMod = async (id: string, enabled: boolean) => {
-    try {
-      await api.patch(`/mods/${encodeURIComponent(id)}`, { enabled });
-      setMods((cur) => cur.map((m) => (m.id === id ? { ...m, enabled } : m)));
-      if (detailMod?.id === id) setDetailMod((m) => m ? { ...m, enabled } : m);
-    } catch {
-      // best-effort
-    }
-  };
-
-  const filtered = mods.filter((m) => {
-    if (statusFilter === 'enabled' && !m.enabled) return false;
-    if (statusFilter === 'disabled' && m.enabled) return false;
-    if (filter) {
-      const q = filter.toLowerCase();
-      return m.name.toLowerCase().includes(q) || m.description.toLowerCase().includes(q);
-    }
-    return true;
-  });
-
-  return (
-    <div className="mobile-view">
-      <div className="mobile-tasks-toolbar">
-        <input
-          className="mobile-search-input"
-          type="text"
-          placeholder="Search mods…"
-          value={filter}
-          onChange={(e) => setFilter(e.target.value)}
-          style={{ flex: 1 }}
-        />
-        <button type="button" className="mobile-icon-btn" onClick={() => reload()} aria-label="Refresh">
-          <RefreshCw size={16} />
-        </button>
-      </div>
-
-      <div className="mobile-search-scopes">
-        {(['all', 'enabled', 'disabled'] as const).map((s) => (
-          <button key={s} type="button" className={`mobile-scope-chip ${statusFilter === s ? 'active' : ''}`}
-            onClick={() => setStatusFilter(s)}>
-            {s.charAt(0).toUpperCase() + s.slice(1)}
-          </button>
-        ))}
-      </div>
-
-      {loading ? (
-        <div className="mobile-loading"><p>Loading…</p></div>
-      ) : filtered.length === 0 ? (
-        <div className="mobile-empty">
-          <Sliders size={40} />
-          <p>No mods found.</p>
-        </div>
-      ) : (
-        <div className="mobile-card-list">
-          {filtered.map((m) => (
-            <button
-              key={m.id}
-              type="button"
-              className="mobile-list-item mobile-list-item-interactive"
-              onClick={() => setDetailMod(m)}
-            >
-              <div className="mobile-list-icon"><Sliders size={16} /></div>
-              <div className="mobile-list-content">
-                <span className="mobile-list-title">{m.name}</span>
-                <span className="mobile-list-meta">v{m.version} · {m.author}</span>
-              </div>
-              <span className={`mobile-list-badge ${m.enabled ? 'badge-on' : 'badge-off'}`}>
-                {m.enabled ? 'on' : 'off'}
-              </span>
-            </button>
-          ))}
-        </div>
-      )}
-
-      {detailMod && (
-        <MobileBottomSheet
-          open={true}
-          onClose={() => setDetailMod(null)}
-          title={detailMod.name}
-          actions={
-            <div className="mobile-task-detail-actions">
-              <button
-                type="button"
-                className="mobile-btn"
-                style={{ flex: 1 }}
-                onClick={() => { if (detailMod) toggleMod(detailMod.id, !detailMod.enabled); }}
-              >
-                <Power size={14} /> {detailMod.enabled ? 'Disable' : 'Enable'}
-              </button>
-            </div>
-          }
-        >
-          <div className="mobile-agent-detail">
-            <p className="mobile-agent-detail-desc">{detailMod.description || 'No description.'}</p>
-            <div className="mobile-agent-detail-meta">
-              <div className="mobile-task-detail-row"><span>Version</span><span className="mono">{detailMod.version}</span></div>
-              <div className="mobile-task-detail-row"><span>Author</span><span>{detailMod.author}</span></div>
-              <div className="mobile-task-detail-row"><span>Bizar</span><span className="mono">{detailMod.bizar}</span></div>
-              <div className="mobile-task-detail-row"><span>Type</span><span>{detailMod.type}</span></div>
-              <div className="mobile-task-detail-row"><span>Permissions</span><span>{detailMod.permissions.length}</span></div>
-              {detailMod.installedAt && (
-                <div className="mobile-task-detail-row"><span>Installed</span><span>{new Date(detailMod.installedAt).toLocaleDateString()}</span></div>
-              )}
-            </div>
-          </div>
-        </MobileBottomSheet>
-      )}
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/views/MobileMore.tsx

@@ -1,121 +0,0 @@
-// src/mobile/views/MobileMore.tsx — real navigation hub: Plans, Agents, Skills, Mods, Schedules, History, Config.
-import { useState } from 'react';
-import { Bot, FileText, Sliders, Clock, History, Settings, ChevronRight } from 'lucide-react';
-import type { Snapshot } from '../../lib/types';
-
-type Props = {
-  snapshot: Snapshot;
-  onNavigate: (id: string) => void;
-};
-
-export function MobileMore({ snapshot, onNavigate }: Props) {
-  const [search, setSearch] = useState('');
-
-  const entries = [
-    {
-      id: 'artifacts',
-      icon: FileText,
-      label: 'Plans',
-      count: snapshot.artifacts.length || 0,
-      desc: 'Visual artifacts with elements & comments',
-    },
-    {
-      id: 'agents',
-      icon: Bot,
-      label: 'Agents',
-      count: snapshot.agents?.length || 0,
-      desc: 'The Norse pantheon',
-    },
-    {
-      id: 'skills',
-      icon: Sliders,
-      label: 'Skills',
-      count: null,
-      desc: 'Agent capabilities & tools',
-    },
-    {
-      id: 'mods',
-      icon: Sliders,
-      label: 'Mods',
-      count: snapshot.mods?.length || 0,
-      desc: 'Installed modifications',
-    },
-    {
-      id: 'schedules',
-      icon: Clock,
-      label: 'Schedules',
-      count: snapshot.schedules?.length || 0,
-      desc: 'Cron jobs & automated tasks',
-    },
-    {
-      id: 'history',
-      icon: History,
-      label: 'History',
-      count: null,
-      desc: 'Past sessions & outputs',
-    },
-    {
-      id: 'config',
-      icon: Settings,
-      label: 'Config',
-      count: null,
-      desc: 'Key-value configuration editor',
-    },
-  ];
-
-  const filtered = search.trim()
-    ? entries.filter((e) => e.label.toLowerCase().includes(search.toLowerCase()) || e.desc.toLowerCase().includes(search.toLowerCase()))
-    : entries;
-
-  return (
-    <div className="mobile-view">
-      {/* Search */}
-      <div className="mobile-tasks-toolbar">
-        <input
-          className="mobile-search-input"
-          type="text"
-          placeholder="Search…"
-          value={search}
-          onChange={(e) => setSearch(e.target.value)}
-          style={{ flex: 1 }}
-        />
-      </div>
-
-      {/* Nav entries */}
-      <div className="mobile-card-list">
-        {filtered.map((entry) => {
-          const Icon = entry.icon;
-          return (
-            <button
-              key={entry.id}
-              type="button"
-              className="mobile-more-nav-item"
-              onClick={() => onNavigate(entry.id)}
-            >
-              <div className="mobile-more-nav-icon">
-                <Icon size={20} />
-              </div>
-              <div className="mobile-more-nav-content">
-                <span className="mobile-more-nav-label">
-                  {entry.label}
-                  {entry.count != null && (
-                    <span className="mobile-more-nav-count">{entry.count}</span>
-                  )}
-                </span>
-                <span className="mobile-more-nav-desc">{entry.desc}</span>
-              </div>
-              <ChevronRight size={16} className="mobile-more-nav-arrow" />
-            </button>
-          );
-        })}
-      </div>
-
-      {/* Footer */}
-      <div className="mobile-more-footer">
-        <a href="/?desktop=1" className="mobile-more-link">
-          Switch to Desktop <ChevronRight size={14} />
-        </a>
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/mobile/views/MobileNotifications.tsx

@@ -1,137 +0,0 @@
-// src/mobile/views/MobileNotifications.tsx — notifications bell + sheet.
-import { useEffect, useState } from 'react';
-import { Bell, CheckCheck, X } from 'lucide-react';
-import { api } from '../../lib/api';
-import type { Notification } from '../../lib/types';
-import { MobileBottomSheet } from '../components/MobileBottomSheet';
-
-type Props = {
-  onSelect: (notification: Notification) => void;
-};
-
-function notifIcon(severity: string) {
-  switch (severity) {
-    case 'success': return '✓';
-    case 'error': return '✗';
-    case 'warning': return '⚠';
-    default: return 'ℹ';
-  }
-}
-
-function formatNotifTime(ts: string): string {
-  const d = new Date(ts);
-  const now = Date.now();
-  const diff = now - d.getTime();
-  if (diff < 60000) return 'just now';
-  if (diff < 3600000) return `${Math.floor(diff / 60000)}m ago`;
-  if (diff < 86400000) return `${Math.floor(diff / 3600000)}h ago`;
-  return d.toLocaleDateString();
-}
-
-export function MobileNotifications({ onSelect }: Props) {
-  const [open, setOpen] = useState(false);
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [unread, setUnread] = useState(0);
-
-  const load = async () => {
-    try {
-      const data = await api.get<{ notifications: Notification[]; stats: { unread: number } }>('/notifications');
-      setNotifications(data.notifications || []);
-      setUnread(data.stats?.unread || 0);
-    } catch {
-      // best-effort
-    }
-  };
-
-  useEffect(() => {
-    load();
-  }, []);
-
-  useEffect(() => {
-    if (open) load();
-  }, [open]);
-
-  const markAllRead = async () => {
-    try {
-      await api.post('/notifications/read-all');
-      setNotifications((cur) => cur.map((n) => ({ ...n, read: true })));
-      setUnread(0);
-    } catch {
-      // best-effort
-    }
-  };
-
-  const markRead = async (id: string) => {
-    try {
-      await api.post(`/notifications/${encodeURIComponent(id)}/read`);
-      setNotifications((cur) =>
-        cur.map((n) => (n.id === id ? { ...n, read: true } : n)),
-      );
-      setUnread((u) => Math.max(0, u - 1));
-    } catch {
-      // best-effort
-    }
-  };
-
-  return (
-    <>
-      <button
-        type="button"
-        className="mobile-icon-btn mobile-notif-btn"
-        onClick={() => setOpen(true)}
-        aria-label={`Notifications${unread > 0 ? ` (${unread} unread)` : ''}`}
-      >
-        <Bell size={20} />
-        {unread > 0 && (
-          <span className="mobile-notif-badge">{unread > 9 ? '9+' : unread}</span>
-        )}
-      </button>
-
-      <MobileBottomSheet
-        open={open}
-        onClose={() => setOpen(false)}
-        title="Notifications"
-        actions={
-          unread > 0 ? (
-            <button type="button" className="mobile-btn mobile-btn-secondary" style={{ width: '100%' }} onClick={markAllRead}>
-              <CheckCheck size={14} /> Mark all read
-            </button>
-          ) : undefined
-        }
-      >
-        <div className="mobile-notif-list">
-          {notifications.length === 0 && (
-            <div className="mobile-empty">
-              <Bell size={32} />
-              <p>No notifications</p>
-            </div>
-          )}
-          {notifications.map((n) => (
-            <button
-              key={n.id}
-              type="button"
-              className={`mobile-notif-item ${n.read ? 'read' : 'unread'}`}
-              onClick={() => {
-                if (!n.read) markRead(n.id);
-                onSelect(n);
-                setOpen(false);
-              }}
-            >
-              <span className={`mobile-notif-icon severity-${n.severity}`}>
-                {notifIcon(n.severity)}
-              </span>
-              <div className="mobile-notif-body">
-                <span className="mobile-notif-title">{n.title || n.message}</span>
-                {n.message && n.title && (
-                  <span className="mobile-notif-text">{n.message}</span>
-                )}
-                <span className="mobile-notif-time">{formatNotifTime(n.ts)}</span>
-              </div>
-              {!n.read && <span className="mobile-notif-dot" />}
-            </button>
-          ))}
-        </div>
-      </MobileBottomSheet>
-    </>
-  );
-}

package/bizar-dash/src/web/mobile/views/MobilePlans.tsx

@@ -1,26 +0,0 @@
-// src/mobile/views/MobilePlans.tsx — alias of MobileArtifacts with the
-// `onOpenPlan` prop naming used by the mobile stack router.
-//
-// v3.20.6 — Previously this file was missing, leaving the mobile
-// `plans` stack route broken (TS error on import). MobileArtifacts
-// already implements the plan list; this thin wrapper just adapts the
-// prop name so the stack router can call `onOpenPlan(slug)` while the
-// underlying view still uses its native `onOpenArtifact(slug)`.
-import type { Snapshot } from '../../lib/types';
-import { MobileArtifacts } from './MobileArtifacts';
-
-type Props = {
-  snapshot: Snapshot;
-  onBack: () => void;
-  onOpenPlan: (slug: string) => void;
-};
-
-export function MobilePlans({ snapshot, onBack, onOpenPlan }: Props) {
-  return (
-    <MobileArtifacts
-      snapshot={snapshot}
-      onBack={onBack}
-      onOpenArtifact={onOpenPlan}
-    />
-  );
-}