@polderlabs/bizar 3.23.1 → 4.0.0

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

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

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

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