@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/lib/utils.ts

@@ -0,0 +1,114 @@
+// src/lib/utils.ts — tiny shared helpers.
+
+export function cn(...parts: (string | false | null | undefined)[]): string {
+  return parts.filter(Boolean).join(' ');
+}
+
+/** Compact relative time. */
+export function formatRelative(ts: number | string | Date | undefined | null): string {
+  if (!ts && ts !== 0) return '';
+  const t = typeof ts === 'number' ? ts : new Date(ts).getTime();
+  if (Number.isNaN(t)) return '';
+  const diff = Date.now() - t;
+  if (diff < 0) return 'just now';
+  if (diff < 60_000) return 'just now';
+  if (diff < 3_600_000) return `${Math.floor(diff / 60_000)}m ago`;
+  if (diff < 86_400_000) return `${Math.floor(diff / 3_600_000)}h ago`;
+  if (diff < 7 * 86_400_000) return `${Math.floor(diff / 86_400_000)}d ago`;
+  return new Date(t).toLocaleDateString();
+}
+
+/** Full localized timestamp. */
+export function formatTime(ts: number | string | Date | undefined | null): string {
+  if (!ts) return '';
+  const d = typeof ts === 'number' ? new Date(ts) : new Date(ts);
+  if (Number.isNaN(d.getTime())) return '';
+  return d.toLocaleString();
+}
+
+/** Trailing-suffix truncation. */
+export function truncate(s: string | undefined | null, max = 160): string {
+  if (!s) return '';
+  return s.length > max ? s.slice(0, max) + '…' : s;
+}
+
+/** Debounce. */
+export function debounce<T extends (...args: never[]) => void>(
+  fn: T,
+  ms = 200,
+): (...args: Parameters<T>) => void {
+  let timer: ReturnType<typeof setTimeout> | null = null;
+  return (...args: Parameters<T>) => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(() => fn(...args), ms);
+  };
+}
+
+/** Color helpers (status badges). */
+export const priorityColors: Record<string, string> = {
+  low: 'var(--text-dim)',
+  normal: 'var(--info)',
+  high: 'var(--error)',
+};
+
+export const statusBadgeKind = (
+  status: string,
+): 'success' | 'warning' | 'error' | 'info' | 'accent' | '' => {
+  switch (status) {
+    case 'approved':
+    case 'done':
+      return 'success';
+    case 'draft':
+    case 'queued':
+      return '';
+    case 'in-progress':
+    case 'doing':
+      return 'info';
+    case 'rejected':
+      return 'error';
+    default:
+      return 'accent';
+  }
+};
+
+/** Cheap hash for change-detection on text (e.g. raw JSON). */
+export function hashText(s: string): string {
+  let h = 5381;
+  for (let i = 0; i < s.length; i++) h = ((h << 5) + h) ^ s.charCodeAt(i);
+  return (h >>> 0).toString(36);
+}
+
+/**
+ * v3.7.1 — Auto-generate a task title from a prompt body when the user
+ * didn't provide one. Strips markdown headers, takes the first non-empty
+ * line, truncates to ~60 chars at a word boundary. Falls back to a
+ * timestamped placeholder if there's nothing to summarize.
+ */
+export function autoTitleFromContent(
+  body: string | undefined | null,
+  fallback = true,
+): string {
+  const raw = (body || '').replace(/\r\n?/g, '\n').trim();
+  if (!raw) {
+    if (!fallback) return '';
+    const now = new Date();
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `Untitled task — ${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;
+  }
+  // Take first non-empty line; strip leading markdown heading hashes + quotes.
+  const firstLine = raw
+    .split('\n')
+    .map((l) => l.replace(/^[\s>#*\-]+/, '').trim())
+    .find((l) => l.length > 0) || '';
+  if (!firstLine) {
+    if (!fallback) return '';
+    const now = new Date();
+    const pad = (n: number) => String(n).padStart(2, '0');
+    return `Untitled task — ${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}`;
+  }
+  if (firstLine.length <= 60) return firstLine;
+  // Truncate at last word boundary within 60 chars.
+  const cut = firstLine.slice(0, 60);
+  const lastSpace = cut.lastIndexOf(' ');
+  return (lastSpace > 20 ? cut.slice(0, lastSpace) : cut).trimEnd() + '…';
+}

package/bizar-dash/src/web/lib/ws.ts

@@ -0,0 +1,176 @@
+// src/lib/ws.ts — WebSocket with auto-reconnect + status + handlers.
+//
+// v3.6.0 — Bearer-token authentication. Browsers cannot set the
+// Authorization header on the native WebSocket constructor, so we
+// append the token as a `?token=<token>` query parameter on the
+// connection URL. The server (auth.mjs) accepts both forms.
+import type { WsMessage, WsStatus } from './types';
+import { TOKEN_KEY } from './api';
+
+type Handler = (msg: WsMessage) => void;
+type StatusHandler = (status: WsStatus) => void;
+
+/**
+ * Build the WS URL with the auth token query param appended.
+ * Returns just the bare /ws URL if no token is set (the server
+ * will 401 and the connection will fail fast — the UI surfaces
+ * "auth required" in that case).
+ */
+function buildWsUrl(): string {
+  if (typeof location === 'undefined') return 'ws://localhost/ws';
+  const base = `${location.protocol === 'https:' ? 'wss' : 'ws'}://${location.host}/ws`;
+  let tok = '';
+  try {
+    tok = localStorage.getItem(TOKEN_KEY) || '';
+  } catch {
+    /* localStorage unavailable */
+  }
+  if (!tok) return base;
+  return `${base}?token=${encodeURIComponent(tok)}`;
+}
+
+export class Ws {
+  private readonly urlOverride?: string;
+  private handlers = new Set<Handler>();
+  private statusHandlers = new Set<StatusHandler>();
+  private ws: WebSocket | null = null;
+  private reconnectDelay = 1000;
+  private readonly maxReconnectDelay = 15000;
+  private reconnectTimer: ReturnType<typeof setTimeout> | null = null;
+  private _status: WsStatus = 'connecting';
+  private pingTimer: ReturnType<typeof setInterval> | null = null;
+  private closed = false;
+
+  constructor(url?: string) {
+    this.urlOverride = url;
+    this.connect();
+  }
+
+  on(handler: Handler): () => void {
+    this.handlers.add(handler);
+    return () => {
+      this.handlers.delete(handler);
+    };
+  }
+
+  onStatus(handler: StatusHandler): () => void {
+    this.statusHandlers.add(handler);
+    // Fire current status immediately
+    handler(this._status);
+    return () => {
+      this.statusHandlers.delete(handler);
+    };
+  }
+
+  get status(): WsStatus {
+    return this._status;
+  }
+
+  send(msg: unknown): boolean {
+    if (this.ws && this.ws.readyState === WebSocket.OPEN) {
+      this.ws.send(JSON.stringify(msg));
+      return true;
+    }
+    return false;
+  }
+
+  close(): void {
+    this.closed = true;
+    if (this.reconnectTimer) clearTimeout(this.reconnectTimer);
+    this.reconnectTimer = null;
+    if (this.pingTimer) clearInterval(this.pingTimer);
+    this.pingTimer = null;
+    try {
+      this.ws?.close();
+    } catch {
+      /* ignore */
+    }
+    this.ws = null;
+    this.setStatus('disconnected');
+  }
+
+  private connect(): void {
+    if (this.closed) return;
+    if (this.reconnectTimer) {
+      clearTimeout(this.reconnectTimer);
+      this.reconnectTimer = null;
+    }
+    this.setStatus('connecting');
+    const url = this.urlOverride ?? buildWsUrl();
+    let socket: WebSocket;
+    try {
+      // Re-resolve the URL on every (re)connect — the token may have
+      // changed since the last attempt (e.g. after Regenerate).
+      socket = new WebSocket(url);
+      this.ws = socket;
+    } catch (err) {
+      console.warn('[ws] construct failed:', err);
+      this.scheduleReconnect();
+      return;
+    }
+    socket.addEventListener('open', () => {
+      if (this.ws !== socket || this.closed) return;
+      this.reconnectDelay = 1000;
+      this.setStatus('connected');
+      // Keep-alive ping every 30s
+      if (this.pingTimer) clearInterval(this.pingTimer);
+      this.pingTimer = setInterval(() => {
+        if (this._status === 'connected') this.send({ type: 'ping' });
+      }, 30_000);
+    });
+    socket.addEventListener('close', () => {
+      if (this.ws !== socket) return;
+      this.ws = null;
+      this.setStatus('disconnected');
+      if (this.pingTimer) {
+        clearInterval(this.pingTimer);
+        this.pingTimer = null;
+      }
+      if (!this.closed) this.scheduleReconnect();
+    });
+    socket.addEventListener('error', () => {
+      if (this.ws !== socket) return;
+      // 'close' will follow — keep this for logs
+      console.warn('[ws] error');
+    });
+    socket.addEventListener('message', (e) => {
+      let msg: WsMessage;
+      try {
+        msg = JSON.parse(e.data);
+      } catch {
+        console.warn('[ws] bad message');
+        return;
+      }
+      for (const h of this.handlers) {
+        try {
+          h(msg);
+        } catch (err) {
+          console.error('[ws] handler error:', err);
+        }
+      }
+    });
+  }
+
+  private scheduleReconnect(): void {
+    if (this.closed || this.reconnectTimer) return;
+    this.reconnectTimer = setTimeout(() => {
+      this.reconnectTimer = null;
+      this.connect();
+    }, this.reconnectDelay);
+    this.reconnectDelay = Math.min(
+      this.reconnectDelay * 1.6,
+      this.maxReconnectDelay,
+    );
+  }
+
+  private setStatus(s: WsStatus): void {
+    this._status = s;
+    for (const h of this.statusHandlers) {
+      try {
+        h(s);
+      } catch (err) {
+        console.error('[ws] status handler error:', err);
+      }
+    }
+  }
+}

package/bizar-dash/src/web/main.tsx

@@ -0,0 +1,34 @@
+// src/main.tsx — viewport-based entry: mobile or desktop
+import { StrictMode, useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import { MobileApp } from './MobileApp';
+// Import mobile CSS so the MobileApp renders with styles when served
+// from index.html (e.g. when the auto-redirect to /m is bypassed).
+import './styles/main.css';
+import './styles/mobile.css';
+import './styles/glyphs.css';
+
+function Root() {
+  const [isMobile, setIsMobile] = useState(() => {
+    if (typeof window === 'undefined') return false;
+    return window.matchMedia('(max-width: 767px)').matches;
+  });
+
+  useEffect(() => {
+    const mql = window.matchMedia('(max-width: 767px)');
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
+
+  return isMobile ? <MobileApp /> : <App />;
+}
+
+const root = document.getElementById('root');
+if (!root) throw new Error('Root element #root not found');
+createRoot(root).render(
+  <StrictMode>
+    <Root />
+  </StrictMode>,
+);

package/bizar-dash/src/web/mobile/MobileApp.tsx

@@ -0,0 +1,278 @@
+// src/mobile/MobileApp.tsx — mobile root with state-based routing + stack navigation.
+import { useCallback, useEffect, useState } from 'react';
+import { Activity, MessageSquare, CheckSquare, Settings, Grid } from 'lucide-react';
+import { api } from '../lib/api';
+import type { Snapshot, Settings as SettingsType } from '../lib/types';
+import { MobileTopbar } from './MobileTopbar';
+import { MobileBottomNav, type MobileTab } from './MobileBottomNav';
+import { MobileSearchModal } from './views/MobileSearchModal';
+import { MobileNotifications } from './views/MobileNotifications';
+import { MobileActivity } from './views/MobileActivity';
+import { MobileChat } from './views/MobileChat';
+import { MobileTasks } from './views/MobileTasks';
+import { MobileSettings } from './views/MobileSettings';
+import { MobileMore } from './views/MobileMore';
+import { MobilePlans } from './views/MobilePlans';
+import { MobileAgents } from './views/MobileAgents';
+import { MobileSkills } from './views/MobileSkills';
+import { MobileMods } from './views/MobileMods';
+import { MobileSchedules } from './views/MobileSchedules';
+import { MobileHistory } from './views/MobileHistory';
+import { MobileConfig } from './views/MobileConfig';
+
+export type MobileView =
+  | { id: 'activity' }
+  | { id: 'chat' }
+  | { id: 'tasks' }
+  | { id: 'settings' }
+  | { id: 'more' }
+  | { id: 'plans' }
+  | { id: 'agents' }
+  | { id: 'skills' }
+  | { id: 'mods' }
+  | { id: 'schedules' }
+  | { id: 'history' }
+  | { id: 'config' }
+  | { id: 'plan-detail'; slug: string }
+  | { id: 'agent-detail'; name: string }
+  | { id: 'task-detail'; taskId: string };
+
+const TABS: MobileTab[] = [
+  { id: 'activity', label: 'Activity', icon: Activity },
+  { id: 'chat', label: 'Chat', icon: MessageSquare },
+  { id: 'tasks', label: 'Tasks', icon: CheckSquare },
+  { id: 'settings', label: 'Settings', icon: Settings },
+  { id: 'more', label: 'More', icon: Grid },
+];
+
+export function MobileApp() {
+  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
+  const [settings, setSettings] = useState<SettingsType | null>(null);
+  const [activeTab, setActiveTab] = useState('activity');
+  const [stack, setStack] = useState<MobileView[]>([]);
+  const [searchOpen, setSearchOpen] = useState(false);
+  const [loading, setLoading] = useState(true);
+  // v3.6.2 — Pipeline: pending taskId to open in chat when switching tabs.
+  const [pendingChatTaskId, setPendingChatTaskId] = useState<string | null>(null);
+
+  const refreshSnapshot = useCallback(async () => {
+    try {
+      const data = await api.get<Snapshot>('/snapshot');
+      setSnapshot(data);
+      if (data.settings) setSettings(data.settings.data);
+    } catch {
+      // best-effort
+    }
+  }, []);
+
+  useEffect(() => {
+    refreshSnapshot().finally(() => setLoading(false));
+    // Poll every 10s
+    const t = setInterval(refreshSnapshot, 10000);
+    return () => clearInterval(t);
+  }, [refreshSnapshot]);
+
+  // WebSocket for live updates
+  useEffect(() => {
+    const proto = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    const ws = new WebSocket(`${proto}//${window.location.host}/ws`);
+    ws.onmessage = (e) => {
+      try {
+        const msg = JSON.parse(e.data as string);
+        if (msg.type === 'refresh' || msg.type === 'snapshot') {
+          refreshSnapshot();
+        }
+      } catch {
+        // ignore
+      }
+    };
+    ws.onerror = () => ws.close();
+    return () => ws.close();
+  }, [refreshSnapshot]);
+
+  const push = (view: MobileView) => setStack((s) => [...s, view]);
+  const pop = () => setStack((s) => s.slice(0, -1));
+  const goToTab = (id: string) => {
+    setStack([]);
+    setActiveTab(id);
+  };
+
+  const handleNavigate = (type: string, id: string) => {
+    switch (type) {
+      case 'task': push({ id: 'task-detail', taskId: id }); break;
+      case 'plan': push({ id: 'plan-detail', slug: id }); break;
+      case 'agent': push({ id: 'agent-detail', name: id }); break;
+      default: break;
+    }
+  };
+
+  // v3.6.2 — Switch to chat tab and signal a task session to load.
+  const onOpenChat = (taskId: string) => {
+    setPendingChatTaskId(taskId);
+    goToTab('chat');
+  };
+
+  const currentView = stack.length > 0 ? stack[stack.length - 1] : { id: activeTab };
+
+  const renderView = () => {
+    // If we have a stack view, render it; otherwise render the tab
+    if (stack.length > 0) {
+      switch (stack[stack.length - 1].id) {
+        case 'plans': return (
+          <MobilePlans
+            snapshot={snapshot!}
+            onBack={pop}
+            onOpenPlan={(slug) => push({ id: 'plan-detail', slug })}
+          />
+        );
+        case 'agents': return (
+          <MobileAgents
+            snapshot={snapshot!}
+            onBack={pop}
+            onOpenAgent={(name) => push({ id: 'agent-detail', name })}
+          />
+        );
+        case 'skills': return (
+          <MobileSkills snapshot={snapshot!} onBack={pop} />
+        );
+        case 'mods': return (
+          <MobileMods snapshot={snapshot!} onBack={pop} />
+        );
+        case 'schedules': return (
+          <MobileSchedules snapshot={snapshot!} onBack={pop} />
+        );
+        case 'history': return (
+          <MobileHistory onBack={pop} />
+        );
+        case 'config': return (
+          <MobileConfig onBack={pop} />
+        );
+        case 'plan-detail': return (
+          <PlanDetailView
+            slug={(stack[stack.length - 1] as { id: 'plan-detail'; slug: string }).slug}
+            snapshot={snapshot!}
+            onBack={pop}
+          />
+        );
+        case 'agent-detail': return (
+          <AgentDetailView
+            name={(stack[stack.length - 1] as { id: 'agent-detail'; name: string }).name}
+            snapshot={snapshot!}
+            onBack={pop}
+            onRefresh={refreshSnapshot}
+          />
+        );
+        case 'task-detail': return (
+          <TaskDetailView
+            taskId={(stack[stack.length - 1] as { id: 'task-detail'; taskId: string }).taskId}
+            snapshot={snapshot!}
+            onBack={pop}
+            onRefresh={refreshSnapshot}
+          />
+        );
+        default:
+          return null;
+      }
+    }
+
+    switch (activeTab) {
+      case 'activity': return <MobileActivity snapshot={snapshot!} onRefresh={refreshSnapshot} />;
+      case 'chat': return <MobileChat snapshot={snapshot!} settings={settings!} initialTaskId={pendingChatTaskId} onClearTaskId={() => setPendingChatTaskId(null)} />;
+      case 'tasks': return <MobileTasks snapshot={snapshot!} onRefresh={refreshSnapshot} onOpenChat={onOpenChat} />;
+      case 'settings': return <MobileSettings settings={settings!} snapshot={snapshot} onRefresh={refreshSnapshot} />;
+      case 'more': return (
+        <MobileMore
+          snapshot={snapshot!}
+          onNavigate={(id) => {
+            if (['plans', 'agents', 'skills', 'mods', 'schedules', 'history', 'config'].includes(id)) {
+              push({ id: id as MobileView['id'] } as MobileView);
+            }
+          }}
+        />
+      );
+      default: return null;
+    }
+  };
+
+  if (loading || !snapshot) {
+    return (
+      <div className="mobile-loading">
+        <p>Loading…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-app">
+      <MobileTopbar
+        activeTab={currentView.id}
+        snapshot={snapshot}
+        onSearch={() => setSearchOpen(true)}
+        onNavigate={handleNavigate}
+      />
+
+      <main className="mobile-content">
+        {renderView()}
+      </main>
+
+      {/* Bottom nav only on main tabs */}
+      {stack.length === 0 && (
+        <MobileBottomNav
+          tabs={TABS}
+          activeTab={activeTab}
+          onChange={(id) => goToTab(id)}
+        />
+      )}
+
+      {/* Back button when on stack */}
+      {stack.length > 0 && (
+        <button
+          type="button"
+          className="mobile-back-btn"
+          onClick={pop}
+          aria-label="Go back"
+        >
+          ← Back
+        </button>
+      )}
+
+      <MobileSearchModal
+        open={searchOpen}
+        onClose={() => setSearchOpen(false)}
+        onNavigate={handleNavigate}
+      />
+    </div>
+  );
+}
+
+// ── Inline detail views ─────────────────────────────────────────────────────
+
+function PlanDetailView({ slug, snapshot, onBack }: { slug: string; snapshot: Snapshot; onBack: () => void }) {
+  const { MobilePlanCanvas } = require('./views/MobilePlanCanvas');
+  return <MobilePlanCanvas slug={slug} onBack={onBack} />;
+}
+
+function AgentDetailView({ name, snapshot, onBack, onRefresh }: { name: string; snapshot: Snapshot; onBack: () => void; onRefresh: () => void }) {
+  const { MobileAgents } = require('./views/MobileAgents');
+  return (
+    <MobileAgents
+      snapshot={snapshot}
+      onBack={onBack}
+      onOpenAgent={() => {}}
+      selectedAgent={name}
+      onRefresh={onRefresh}
+    />
+  );
+}
+
+function TaskDetailView({ taskId, snapshot, onBack, onRefresh }: { taskId: string; snapshot: Snapshot; onBack: () => void; onRefresh: () => void }) {
+  const { MobileTasks } = require('./views/MobileTasks');
+  return (
+    <MobileTasks
+      snapshot={snapshot}
+      onRefresh={onRefresh}
+      selectedTaskId={taskId}
+      onCloseDetail={onBack}
+    />
+  );
+}

package/bizar-dash/src/web/mobile/MobileBottomNav.tsx

@@ -0,0 +1,38 @@
+// src/mobile/MobileBottomNav.tsx — bottom tab bar for mobile.
+import type { LucideIcon } from 'lucide-react';
+import { cn } from '../lib/utils';
+
+export type MobileTab = {
+  id: string;
+  label: string;
+  icon: LucideIcon;
+};
+
+type Props = {
+  tabs: MobileTab[];
+  activeTab: string;
+  onChange: (id: string) => void;
+};
+
+export function MobileBottomNav({ tabs, activeTab, onChange }: Props) {
+  return (
+    <nav className="mobile-bottom-nav" role="navigation" aria-label="Mobile navigation">
+      {tabs.map((t) => {
+        const Icon = t.icon;
+        return (
+          <button
+            key={t.id}
+            type="button"
+            className={cn('mobile-nav-btn', activeTab === t.id && 'mobile-nav-btn-active')}
+            onClick={() => onChange(t.id)}
+            aria-label={t.label}
+            aria-current={activeTab === t.id ? 'page' : undefined}
+          >
+            <Icon size={22} />
+            <span className="mobile-nav-label">{t.label}</span>
+          </button>
+        );
+      })}
+    </nav>
+  );
+}