@polderlabs/bizar 7.0.4 → 8.1.0

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

@@ -1,414 +0,0 @@
-// src/MobileApp.tsx — mobile root with state-based routing + stack navigation.
-import React, { useCallback, useEffect, useMemo, useState, Suspense } from 'react';
-import {
-  Activity,
-  CheckSquare,
-  Grid,
-  MessageSquare,
-  Settings as SettingsIcon,
-} from 'lucide-react';
-import { Spinner } from './components/Spinner';
-import { api } from './lib/api';
-import type { Notification, Settings, Snapshot, WsMessage } from './lib/types';
-import { applyTheme, applyThemeTokens } from './lib/types';
-import { Ws } from './lib/ws';
-import { MobileBottomNav, type MobileTab } from './mobile/MobileBottomNav';
-import { MobileLayout, type DrawerTab } from './components/MobileLayout';
-import { MobileActivity } from './mobile/views/MobileActivity';
-import { MobileAgents } from './mobile/views/MobileAgents';
-import { MobileConfig } from './mobile/views/MobileConfig';
-import { MobileHistory } from './mobile/views/MobileHistory';
-import { MobileMods } from './mobile/views/MobileMods';
-import { MobileMore } from './mobile/views/MobileMore';
-import { MobileArtifactCanvas } from './mobile/views/MobileArtifactCanvas';
-import { MobileArtifacts } from './mobile/views/MobileArtifacts';
-import { MobileSchedules } from './mobile/views/MobileSchedules';
-import { MobileSearchModal } from './mobile/views/MobileSearchModal';
-import { MobileSkills } from './mobile/views/MobileSkills';
-import { MobileTasks } from './mobile/views/MobileTasks';
-
-// Lazy-loaded mobile-specific variants (code-split from main bundle)
-const MobileSettings = React.lazy(() => import('./mobile/MobileSettings').then(m => ({ default: m.MobileSettings })));
-const MobileChat = React.lazy(() => import('./mobile/MobileChat').then(m => ({ default: m.MobileChat })));
-
-type MainTabId = 'activity' | 'chat' | 'tasks' | 'settings' | 'more';
-
-export type MobileView =
-  | { id: MainTabId }
-  | { id: 'artifacts?' }
-  | { id: 'agents' }
-  | { id: 'skills' }
-  | { id: 'mods' }
-  | { id: 'schedules' }
-  | { id: 'history' }
-  | { id: 'config' }
-  | { id: 'artifacts?-detail'; slug: string }
-  | { id: 'agent-detail'; name: string }
-  | { id: 'task-detail'; taskId: string };
-
-const MAIN_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: SettingsIcon },
-  { id: 'more', label: 'More', icon: Grid },
-];
-
-function parseNotificationTarget(notification: Notification): MobileView | null {
-  const meta = notification.meta ?? {};
-  const taskId = typeof meta.taskId === 'string' ? meta.taskId : null;
-  const slug = typeof meta.slug === 'string' ? meta.slug : null;
-  const agentName = typeof meta.agent === 'string' ? meta.agent : null;
-  if (taskId) return { id: 'task-detail', taskId };
-  if (slug) return { id: 'artifacts?-detail', slug };
-  if (agentName) return { id: 'agent-detail', name: agentName };
-
-  const link = notification.link ?? '';
-  if (link.startsWith('/artifacts?/')) return { id: 'artifacts?-detail', slug: decodeURIComponent(link.slice('/artifacts?/'.length)) };
-  if (link.startsWith('/tasks/')) return { id: 'task-detail', taskId: decodeURIComponent(link.slice('/tasks/'.length)) };
-  if (link.startsWith('/agents/')) return { id: 'agent-detail', name: decodeURIComponent(link.slice('/agents/'.length)) };
-
-  return null;
-}
-
-export function MobileApp() {
-  const [activeTab, setActiveTab] = useState<MainTabId>('activity');
-  const [stack, setStack] = useState<MobileView[]>([]);
-  const [searchOpen, setSearchOpen] = useState(false);
-  const [drawerOpen, setDrawerOpen] = useState(false);
-  const [pendingChatTaskId, setPendingChatTaskId] = useState<string | null>(null);
-  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
-  const [settings, setSettings] = useState<Settings | null>(null);
-  const [bootError, setBootError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(true);
-  const [wsEpoch, setWsEpoch] = useState(0);
-
-  const currentView = useMemo<MobileView>(() => {
-    return stack[stack.length - 1] ?? { id: activeTab };
-  }, [activeTab, stack]);
-
-  const pushView = useCallback((view: MobileView) => {
-    setStack((cur) => [...cur, view]);
-  }, []);
-
-  const popView = useCallback(() => {
-    setStack((cur) => cur.slice(0, -1));
-  }, []);
-
-  const goToTab = useCallback((id: MainTabId) => {
-    setStack([]);
-    setActiveTab(id);
-  }, []);
-
-  const refreshSnapshot = useCallback(async (): Promise<void> => {
-    try {
-      const next = await api.get<Snapshot>('/snapshot');
-      setSnapshot(next);
-      if (next.settings?.data) {
-        setSettings(next.settings.data);
-      }
-      setBootError(null);
-    } catch (err) {
-      setBootError((err as Error).message || 'Dashboard server unreachable.');
-      throw err;
-    }
-  }, []);
-
-  useEffect(() => {
-    let cancelled = false;
-
-    Promise.all([
-      api.get<Snapshot>('/snapshot').catch(() => null),
-      api.get<{ data: Settings }>('/settings').catch(() => null),
-      api.probeAuthStatus().catch(() => null),
-    ])
-      .then(([snap, settingsResponse]) => {
-        if (cancelled) return;
-        const nextSettings = settingsResponse?.data ?? snap?.settings?.data ?? null;
-        if (snap) setSnapshot(snap);
-        if (nextSettings) setSettings(nextSettings);
-        if (!snap && !nextSettings) {
-          setBootError('Dashboard server unreachable.');
-        } else {
-          setBootError(null);
-        }
-      })
-      .catch((err) => {
-        if (!cancelled) setBootError((err as Error).message || 'Dashboard server unreachable.');
-      })
-      .finally(() => {
-        if (!cancelled) setLoading(false);
-      });
-
-    return () => {
-      cancelled = true;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!settings?.theme) return;
-    applyTheme(settings.theme);
-    applyThemeTokens(settings.theme);
-  }, [settings?.theme]);
-
-  useEffect(() => {
-    if (settings?.theme?.mode !== 'system') return;
-    const mql = window.matchMedia('(prefers-color-scheme: light)');
-    const onChange = () => {
-      if (!settings?.theme) return;
-      applyTheme(settings.theme);
-      applyThemeTokens(settings.theme);
-    };
-    mql.addEventListener('change', onChange);
-    return () => mql.removeEventListener('change', onChange);
-  }, [settings?.theme]);
-
-  useEffect(() => {
-    const reconnect = () => {
-      setWsEpoch((cur) => cur + 1);
-      refreshSnapshot().catch(() => undefined);
-    };
-    const onVisibilityChange = () => {
-      if (document.visibilityState === 'visible') reconnect();
-    };
-
-    window.addEventListener('online', reconnect);
-    window.addEventListener('pageshow', reconnect);
-    document.addEventListener('visibilitychange', onVisibilityChange);
-
-    return () => {
-      window.removeEventListener('online', reconnect);
-      window.removeEventListener('pageshow', reconnect);
-      document.removeEventListener('visibilitychange', onVisibilityChange);
-    };
-  }, [refreshSnapshot]);
-
-  useEffect(() => {
-    const ws = new Ws();
-    const offMessage = ws.on((msg: WsMessage) => {
-      if (msg.type === 'snapshot' && 'data' in msg && msg.data) {
-        setSnapshot((cur) => ({ ...(cur ?? ({} as Snapshot)), ...msg.data }));
-      } else if (msg.type === 'change') {
-        refreshSnapshot().catch(() => undefined);
-      } else if (msg.type === 'tasks:change') {
-        const nextTask = msg.task;
-        setSnapshot((cur) => {
-          if (!cur) return cur;
-          const tasks = (cur.tasks || []).map((task) => (task.id === nextTask.id ? nextTask : task));
-          const exists = tasks.some((task) => task.id === nextTask.id);
-          return { ...cur, tasks: exists ? tasks : [nextTask, ...tasks] };
-        });
-      } else if (msg.type === 'tasks:delete') {
-        setSnapshot((cur) => (
-          cur
-            ? { ...cur, tasks: (cur.tasks || []).filter((task) => task.id !== msg.id) }
-            : cur
-        ));
-      } else if (msg.type === 'settings:change') {
-        if (msg.settings) setSettings(msg.settings);
-      } else if (
-        msg.type === 'project:change' ||
-        msg.type === 'agents:change' ||
-        msg.type === 'schedules:change' ||
-        msg.type === 'artifact:change'
-      ) {
-        refreshSnapshot().catch(() => undefined);
-      } else if (msg.type === 'agent:status' || msg.type === 'agent:restarted') {
-        setSnapshot((cur) => {
-          if (!cur) return cur;
-          const agents = (cur.agents || []).map((agent) => (
-            agent.name === msg.agent.name ? msg.agent : agent
-          ));
-          return { ...cur, agents };
-        });
-      }
-    });
-
-    return () => {
-      offMessage();
-      ws.close();
-    };
-  }, [refreshSnapshot, wsEpoch]);
-
-  const handleTabChange = useCallback((id: string) => {
-    if (id === 'activity' || id === 'chat' || id === 'tasks' || id === 'settings' || id === 'more') {
-      goToTab(id);
-    }
-  }, [goToTab]);
-
-  const handleNavigate = useCallback((type: string, id: string, meta?: Record<string, unknown> | null) => {
-    if (type === 'notification') {
-      const target = parseNotificationTarget({
-        id: '',
-        ts: '',
-        severity: 'info',
-        message: '',
-        source: '',
-        link: id || null,
-        meta: meta ?? null,
-      });
-      if (target) {
-        pushView(target);
-      }
-      return;
-    }
-
-    if (type === 'task' && id) {
-      pushView({ id: 'task-detail', taskId: id });
-      return;
-    }
-    if (type === 'artifacts?' && id) {
-      pushView({ id: 'artifacts?-detail', slug: id });
-      return;
-    }
-    if (type === 'agent' && id) {
-      pushView({ id: 'agent-detail', name: id });
-      return;
-    }
-    if (type === 'project') {
-      goToTab('activity');
-      return;
-    }
-    if (type === 'setting') {
-      goToTab('settings');
-    }
-  }, [goToTab, pushView]);
-
-  const renderView = (): React.ReactNode => {
-    if (!snapshot || !settings) return null;
-
-    if (stack.length > 0) {
-      const stackedView = stack[stack.length - 1];
-      switch (stackedView.id) {
-        case 'artifacts?':
-          return <MobileArtifacts snapshot={snapshot} onBack={popView} onOpenArtifact={(slug) => pushView({ id: 'artifacts?-detail', slug })} />;
-        case 'agents':
-          return <MobileAgents snapshot={snapshot} onBack={popView} onOpenAgent={(name) => pushView({ id: 'agent-detail', name })} onRefresh={refreshSnapshot} />;
-        case 'skills':
-          return <MobileSkills snapshot={snapshot} onBack={popView} />;
-        case 'mods':
-          return <MobileMods snapshot={snapshot} onBack={popView} />;
-        case 'schedules':
-          return <MobileSchedules snapshot={snapshot} onBack={popView} />;
-        case 'history':
-          return <MobileHistory onBack={popView} />;
-        case 'config':
-          return <MobileConfig onBack={popView} />;
-        case 'artifacts?-detail':
-          return <MobileArtifactCanvas slug={stackedView.slug} onBack={popView} />;
-        case 'agent-detail':
-          return (
-            <MobileAgents
-              snapshot={snapshot}
-              onBack={popView}
-              onOpenAgent={() => undefined}
-              onRefresh={refreshSnapshot}
-              selectedAgent={stackedView.name}
-            />
-          );
-        case 'task-detail':
-          return (
-            <MobileTasks
-              snapshot={snapshot}
-              onRefresh={refreshSnapshot}
-              selectedTaskId={stackedView.taskId}
-              onCloseDetail={popView}
-              onOpenChat={(taskId) => {
-                setPendingChatTaskId(taskId);
-                goToTab('chat');
-              }}
-            />
-          );
-        default:
-          return null;
-      }
-    }
-
-    switch (activeTab) {
-      case 'activity':
-        return <MobileActivity snapshot={snapshot} onRefresh={refreshSnapshot} />;
-      case 'chat':
-        return (
-          <Suspense fallback={<div className="mobile-loading"><Spinner size="lg" /></div>}>
-            <MobileChat
-              snapshot={snapshot}
-              settings={settings}
-              initialTaskId={pendingChatTaskId}
-              onClearTaskId={() => setPendingChatTaskId(null)}
-            />
-          </Suspense>
-        );
-      case 'tasks':
-        return (
-          <MobileTasks
-            snapshot={snapshot}
-            onRefresh={refreshSnapshot}
-            onOpenChat={(taskId) => {
-              setPendingChatTaskId(taskId);
-              goToTab('chat');
-            }}
-          />
-        );
-      case 'settings':
-        return (
-          <Suspense fallback={<div className="mobile-loading"><Spinner size="lg" /></div>}>
-            <MobileSettings settings={settings} snapshot={snapshot} onRefresh={refreshSnapshot} />
-          </Suspense>
-        );
-      case 'more':
-        return (
-          <MobileMore
-            snapshot={snapshot}
-            onNavigate={(id) => {
-              if (id === 'artifacts?' || id === 'agents' || id === 'skills' || id === 'mods' || id === 'schedules' || id === 'history' || id === 'config') {
-                pushView({ id });
-              }
-            }}
-          />
-        );
-      default:
-        return null;
-    }
-  };
-
-  if (loading) {
-    return (
-      <div className="mobile-loading">
-        <Spinner size="lg" />
-        <p>Loading Bizar…</p>
-      </div>
-    );
-  }
-
-  if (bootError || !snapshot || !settings) {
-    return (
-      <div className="mobile-loading">
-        <h2>Dashboard unavailable</h2>
-        <p>{bootError || 'Dashboard server unreachable.'}</p>
-        <p className="muted">Make sure the Bizar dashboard server is running.</p>
-      </div>
-    );
-  }
-
-  return (
-    <>
-      <MobileLayout
-        activeTab={activeTab}
-        onTabChange={handleTabChange}
-        tabs={MAIN_TABS}
-        fullTabs={MAIN_TABS as DrawerTab[]}
-        onExitSettings={() => goToTab('activity')}
-        onSearch={() => setSearchOpen(true)}
-      >
-        {stack.length > 0 && (
-          <button type="button" className="mobile-back-btn" onClick={popView} aria-label="Go back">
-            ← Back
-          </button>
-        )}
-        {renderView()}
-      </MobileLayout>
-
-      <MobileSearchModal open={searchOpen} onClose={() => setSearchOpen(false)} onNavigate={handleNavigate} />
-    </>
-  );
-}

package/bizar-dash/src/web/components/ArtifactCreateDialog.tsx

@@ -1,95 +0,0 @@
-// src/components/ArtifactCreateDialog.tsx — Dialog for /artifact new command.
-
-import { useState } from 'react';
-import { Button } from './Button';
-import { api } from '../lib/api';
-
-type ArtifactCreateDialogProps = {
-  data?: Record<string, unknown>;
-  onClose: () => void;
-};
-
-const KNOWN_TEMPLATES = [
-  'blank',
-  'feature-design',
-  'bug-investigation',
-  'decision-record',
-  'horizontal',
-  'vertical',
-];
-
-export function ArtifactCreateDialog({ data, onClose }: ArtifactCreateDialogProps) {
-  const templates = (data?.templates as string[]) ?? KNOWN_TEMPLATES;
-  const defaultTemplate = (data?.defaultTemplate as string) ?? 'blank';
-
-  const [slug, setSlug] = useState('');
-  const [selectedTemplate, setSelectedTemplate] = useState(defaultTemplate);
-  const [creating, setCreating] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const handleCreate = async () => {
-    if (!slug.trim()) {
-      setError('Slug is required.');
-      return;
-    }
-    if (!/^[a-z0-9][a-z0-9-]{0,63}$/.test(slug)) {
-      setError('Invalid slug. Use lowercase letters, numbers, and hyphens. Must start with an alphanumeric character.');
-      return;
-    }
-    setCreating(true);
-    setError(null);
-    try {
-      await api.post('/artifacts', { slug, template: selectedTemplate });
-      onClose();
-    } catch (err) {
-      setError((err as Error).message);
-      setCreating(false);
-    }
-  };
-
-  return (
-    <div>
-      <p style={{ marginBottom: 16, color: 'var(--color-muted)', fontSize: 13 }}>
-        Create a new visual plan. Plans are stored in <code>artifacts/</code> in your worktree.
-      </p>
-
-      <div style={{ marginBottom: 12 }}>
-        <label className="field-label" htmlFor="plan-slug">Plan slug</label>
-        <input
-          id="plan-slug"
-          className="input"
-          type="text"
-          placeholder="e.g. my-feature"
-          value={slug}
-          onChange={(e) => { setSlug(e.target.value); setError(null); }}
-          autoFocus
-        />
-      </div>
-
-      <div style={{ marginBottom: 16 }}>
-        <label className="field-label" htmlFor="plan-template">Template</label>
-        <select
-          id="plan-template"
-          className="select"
-          value={selectedTemplate}
-          onChange={(e) => setSelectedTemplate(e.target.value)}
-        >
-          {templates.map((t) => (
-            <option key={t} value={t}>{t}</option>
-          ))}
-        </select>
-      </div>
-
-      {error && (
-        <p style={{ marginBottom: 12, color: 'var(--color-danger)', fontSize: 13 }}>{error}</p>
-      )}
-
-      <div style={{ display: 'flex', gap: 8, justifyContent: 'flex-end' }}>
-        <Button variant="ghost" onClick={onClose} disabled={creating}>Cancel</Button>
-        <Button variant="primary" onClick={handleCreate} disabled={creating || !slug.trim()}>
-          {creating ? 'Creating…' : 'Create'}
-        </Button>
-      </div>
-    </div>
-  );
-}

package/bizar-dash/src/web/components/ArtifactListDialog.tsx

@@ -1,55 +0,0 @@
-// src/components/ArtifactListDialog.tsx — Dialog for /plan list command.
-
-import { Button } from './Button';
-
-type ArtifactListDialogProps = {
-  data?: Record<string, unknown>;
-  onClose: () => void;
-};
-
-export function ArtifactListDialog({ data, onClose }: ArtifactListDialogProps) {
-  const plans = (data?.plans as string[]) ?? [];
-  const count = (data?.count as number) ?? plans.length;
-
-  const handleOpen = (slug: string) => {
-    window.open(`/artifacts/${slug}/`, '_blank');
-  };
-
-  return (
-    <div>
-      {plans.length === 0 ? (
-        <p style={{ marginBottom: 16, color: 'var(--color-muted)' }}>
-          No plans found in this worktree. Use <code>/artifact new &lt;slug&gt;</code> to create one.
-        </p>
-      ) : (
-        <div style={{ marginBottom: 16 }}>
-          <p style={{ marginBottom: 12, fontSize: 13, color: 'var(--color-muted)' }}>
-            {count} plan{count !== 1 ? 's' : ''} in this worktree:
-          </p>
-          <ul style={{ listStyle: 'none', padding: 0, margin: 0 }}>
-            {plans.map((slug) => (
-              <li
-                key={slug}
-                style={{
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'space-between',
-                  padding: '6px 0',
-                  borderBottom: '1px solid var(--color-border)',
-                }}
-              >
-                <code style={{ fontSize: 13 }}>{slug}</code>
-                <Button variant="ghost" size="sm" onClick={() => handleOpen(slug)}>
-                  Open
-                </Button>
-              </li>
-            ))}
-          </ul>
-        </div>
-      )}
-      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
-        <Button variant="ghost" onClick={onClose}>Close</Button>
-      </div>
-    </div>
-  );
-}