@polderlabs/bizar 3.23.1 → 4.2.0

package/bizar-dash/src/web/views/History.tsx

@@ -0,0 +1,335 @@
+// src/views/History.tsx — v3.4.0: cross-project history view.
+// Shows per-project timelines (task events, plan events, project lifecycle)
+// aggregated from the activity log.
+
+import { useEffect, useState } from 'react';
+import {
+  History as HistoryIcon,
+  RefreshCw,
+  Folder,
+  CheckSquare,
+  Filter,
+  ChevronDown,
+  ChevronRight,
+  Download,
+  FileText,
+} from 'lucide-react';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { Button } from '../components/Button';
+import { Spinner } from '../components/Spinner';
+import { useToast } from '../components/Toast';
+import { api } from '../lib/api';
+import { cn, formatRelative } from '../lib/utils';
+import type { Settings, Snapshot } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot;
+  settings: Settings;
+  activeTab: string;
+  setActiveTab: (id: string) => void;
+  refreshSnapshot: () => Promise<void>;
+};
+
+type HistoryEvent = {
+  ts: string;
+  kind: string;
+  nodeId?: string;
+  text?: string;
+  author?: string;
+  taskId?: string;
+  [k: string]: unknown;
+};
+
+type ProjectHistory = {
+  id: string;
+  name: string;
+  path: string;
+  status: string;
+  lastAccessed?: string | null;
+  tasks: { total: number; done: number; doing: number; blocked: number; queued: number };
+  plans: number;
+};
+
+type HistoryResponse = {
+  events: HistoryEvent[];
+  projects: ProjectHistory[];
+  stats: { file: string; size: number; lines: number; lastTs: string | null; counts: Record<string, number> };
+  generatedAt: string;
+};
+
+const TIME_RANGES = [
+  { id: '1h', label: 'Last hour', ms: 60 * 60 * 1000 },
+  { id: '1d', label: 'Last day', ms: 24 * 60 * 60 * 1000 },
+  { id: '7d', label: 'Last 7 days', ms: 7 * 24 * 60 * 60 * 1000 },
+  { id: '30d', label: 'Last 30 days', ms: 30 * 24 * 60 * 60 * 1000 },
+  { id: 'all', label: 'All time', ms: 0 },
+];
+
+export function History({ snapshot }: Props) {
+  const toast = useToast();
+  const [data, setData] = useState<HistoryResponse | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [rangeId, setRangeId] = useState<string>('1d');
+  const [expanded, setExpanded] = useState<Set<string>>(new Set());
+  const [tick, setTick] = useState(0);
+
+  const load = async (since?: string) => {
+    try {
+      const q = since ? `?since=${encodeURIComponent(since)}&limit=1000` : '?limit=1000';
+      const r = await api.get<HistoryResponse>(`/history${q}`);
+      setData(r);
+      setExpanded(
+        new Set(
+          r.projects
+            .filter((project) => r.events.some((ev) => (ev as { projectId?: string }).projectId === project.id))
+            .map((project) => project.id),
+        ),
+      );
+    } catch (err) {
+      toast.error(`History load failed: ${(err as Error).message}`);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  useEffect(() => {
+    setLoading(true);
+    const range = TIME_RANGES.find((r) => r.id === rangeId) || TIME_RANGES[1];
+    if (range.ms > 0) {
+      const since = new Date(Date.now() - range.ms).toISOString();
+      load(since);
+    } else {
+      load();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rangeId]);
+
+  useEffect(() => {
+    const id = setInterval(() => setTick((t) => t + 1), 30_000);
+    return () => clearInterval(id);
+  }, []);
+
+  // Group events by project — use projectId where present, otherwise 'global'
+  const eventsByProject = new Map<string, HistoryEvent[]>();
+  for (const ev of data?.events || []) {
+    const pid = (ev as { projectId?: string }).projectId || 'global';
+    if (!eventsByProject.has(pid)) eventsByProject.set(pid, []);
+    eventsByProject.get(pid)!.push(ev);
+  }
+
+  const toggleProject = (id: string) => {
+    setExpanded((cur) => {
+      const next = new Set(cur);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      return next;
+    });
+  };
+
+  const onExportJson = () => {
+    if (!data) return;
+    const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement('a');
+    a.href = url;
+    a.download = `bizar-history-${new Date().toISOString().replace(/[:.]/g, '-')}.json`;
+    a.click();
+    URL.revokeObjectURL(url);
+    toast.success('History exported.');
+  };
+
+  return (
+    <div className="view view-history" data-tick={tick}>
+      <header className="view-header">
+        <div className="view-header-text">
+          <h2 className="view-title">
+            <HistoryIcon size={18} /> History
+          </h2>
+          <p className="view-subtitle">
+            Cross-project history of events, tasks, and plans.
+            {data?.stats?.lastTs && (
+              <> · last event {formatRelative(data.stats.lastTs)}</>
+            )}
+          </p>
+        </div>
+        <div className="view-actions">
+          <div className="tasks-toolbar-group">
+            <Filter size={14} style={{ color: 'var(--text-dim)' }} />
+            <select
+              className="select select-sm"
+              value={rangeId}
+              onChange={(e) => setRangeId(e.target.value)}
+              title="Time range"
+            >
+              {TIME_RANGES.map((r) => (
+                <option key={r.id} value={r.id}>{r.label}</option>
+              ))}
+            </select>
+          </div>
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => {
+              setLoading(true);
+              const range = TIME_RANGES.find((r) => r.id === rangeId) || TIME_RANGES[1];
+              if (range.ms > 0) {
+                load(new Date(Date.now() - range.ms).toISOString());
+              } else {
+                load();
+              }
+            }}
+          >
+            <RefreshCw size={14} /> Refresh
+          </Button>
+          <Button variant="secondary" size="sm" onClick={onExportJson}>
+            <Download size={14} /> Export
+          </Button>
+        </div>
+      </header>
+
+      {loading && (
+        <div className="view-loading">
+          <Spinner size="lg" />
+          <p>Loading history…</p>
+        </div>
+      )}
+
+      {!loading && data && (
+        <div className="history-list">
+          {data.projects.length === 0 && (
+            <Card>
+              <CardTitle><Folder size={14} /> No projects</CardTitle>
+              <CardMeta>Register a project in Overview to start tracking history.</CardMeta>
+            </Card>
+          )}
+
+          {data.projects.map((p) => {
+            const events = eventsByProject.get(p.id) || [];
+            const isOpen = expanded.has(p.id);
+            return (
+              <Card key={p.id} className="history-project">
+                <div className="history-project-head">
+                  <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
+                    <div className="history-project-name">
+                      <Folder size={16} /> {p.name}
+                    </div>
+                    <div className="history-project-meta">{p.path}</div>
+                  </div>
+                  <div className="history-project-stats">
+                    <span className="history-project-stat">
+                      <span className="history-project-stat-num">{p.tasks.done}</span>
+                      <span className="muted">/ {p.tasks.total} done</span>
+                    </span>
+                    {p.tasks.doing > 0 && (
+                      <span className="history-project-stat">
+                        <span className="history-project-stat-num">{p.tasks.doing}</span>
+                        <span className="muted">doing</span>
+                      </span>
+                    )}
+                    {p.tasks.blocked > 0 && (
+                      <span className="history-project-stat">
+                        <span className="history-project-stat-num">{p.tasks.blocked}</span>
+                        <span className="muted">blocked</span>
+                      </span>
+                    )}
+                    <span className="history-project-stat">
+                      <FileText size={11} /> <span className="history-project-stat-num">{p.plans}</span>
+                      <span className="muted"> plan{p.plans === 1 ? '' : 's'}</span>
+                    </span>
+                    {p.lastAccessed && (
+                      <span className="history-project-stat">
+                        <span className="muted">last opened {formatRelative(p.lastAccessed)}</span>
+                      </span>
+                    )}
+                  </div>
+                  <button
+                    type="button"
+                    className="icon-btn"
+                    onClick={() => toggleProject(p.id)}
+                    aria-label={isOpen ? 'Collapse' : 'Expand'}
+                  >
+                    {isOpen ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
+                  </button>
+                </div>
+
+                {isOpen && (
+                  <div className="history-timeline-mini">
+                    {events.length === 0 ? (
+                      <div className="muted" style={{ padding: '12px 8px', fontSize: 12 }}>
+                        No events in this time range.
+                      </div>
+                    ) : (
+                      events.slice(-100).reverse().map((ev, i) => (
+                        <div key={i} className="history-timeline-row">
+                          <span className="history-timeline-ts">
+                            {new Date(ev.ts).toLocaleTimeString()}
+                          </span>
+                          <span className="history-timeline-kind">{ev.kind || 'event'}</span>
+                          <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
+                            {ev.author ? `@${ev.author} ` : ''}
+                            {String(ev.text ?? ev.title ?? ev.name ?? '')}
+                          </span>
+                        </div>
+                      ))
+                    )}
+                  </div>
+                )}
+              </Card>
+            );
+          })}
+
+          {/* Global / unassigned events */}
+          {eventsByProject.has('global') && (
+            <Card className="history-project">
+              <div className="history-project-head">
+                <div style={{ display: 'flex', flexDirection: 'column', gap: 4, minWidth: 0, flex: 1 }}>
+                  <div className="history-project-name">
+                    <HistoryIcon size={16} /> Global events
+                  </div>
+                  <div className="history-project-meta">
+                    Activity not tied to a specific project
+                  </div>
+                </div>
+              </div>
+              <div className="history-timeline-mini">
+                {(eventsByProject.get('global') || []).slice(-100).reverse().map((ev, i) => (
+                  <div key={i} className="history-timeline-row">
+                    <span className="history-timeline-ts">
+                      {new Date(ev.ts).toLocaleTimeString()}
+                    </span>
+                    <span className="history-timeline-kind">{ev.kind || 'event'}</span>
+                    <span className="history-timeline-msg" title={String(ev.text || ev.title || '')}>
+                      {ev.author ? `@${ev.author} ` : ''}
+                      {String(ev.text ?? ev.title ?? ev.name ?? '')}
+                    </span>
+                  </div>
+                ))}
+              </div>
+            </Card>
+          )}
+
+          {data.stats?.counts && Object.keys(data.stats.counts).length > 0 && (
+            <Card>
+              <CardTitle>Event counts by kind</CardTitle>
+              <CardMeta>{data.stats.lines} total lines in log</CardMeta>
+              <div style={{ display: 'flex', flexWrap: 'wrap', gap: 8, marginTop: 8 }}>
+                {Object.entries(data.stats.counts)
+                  .sort((a, b) => b[1] - a[1])
+                  .slice(0, 30)
+                  .map(([kind, count]) => (
+                    <span
+                      key={kind}
+                      className={cn('tag', 'tag-neutral')}
+                      style={{ fontFamily: 'var(--font-mono)' }}
+                    >
+                      {kind}: {count}
+                    </span>
+                  ))}
+              </div>
+            </Card>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}

package/bizar-dash/src/web/views/ModView.tsx

@@ -0,0 +1,207 @@
+// src/views/ModView.tsx — render an installed mod's view (iframe or TSX tab).
+//
+// Mounted as a top-level tab in App.tsx when a mod contributes a view via
+// `entry.view` or `web/index.html`. Mods become first-class nav items
+// alongside Overview, Chat, Mods, etc.
+
+import { Suspense, lazy, useEffect, useState } from 'react';
+import { Card, CardTitle, CardMeta } from '../components/Card';
+import { EmptyState } from '../components/EmptyState';
+import { Button } from '../components/Button';
+import { Spinner } from '../components/Spinner';
+import { ExternalLink, Globe, LayoutTemplate, RefreshCw, AlertTriangle } from 'lucide-react';
+import { api } from '../lib/api';
+import { useToast } from '../components/Toast';
+
+export type ModView = {
+  id: string;
+  modId: string;
+  kind: 'iframe' | 'tab';
+  label: string;
+  description?: string;
+  path?: string;
+  icon?: string;
+  component?: string | null;
+};
+
+type Props = {
+  /** Mod view id, e.g. 'graphify:web'. */
+  viewId: string;
+  /** Force a refresh of the iframe key — bumped when the user clicks Reload. */
+  reloadKey?: number;
+  /** Currently active tab id — kept on the Props surface so the parent
+   * (App.tsx) doesn't have to know which props the mod view consumes. */
+  activeTab?: string;
+  setActiveTab: (id: string) => void;
+};
+
+export function ModView({ viewId, reloadKey, setActiveTab }: Props) {
+  const toast = useToast();
+  const [view, setView] = useState<ModView | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [iframeReload, setIframeReload] = useState(0);
+
+  useEffect(() => {
+    let cancelled = false;
+    (async () => {
+      try {
+        const r = await api.get<{ views: ModView[] }>('/mods/views');
+        if (cancelled) return;
+        const found = (r.views || []).find((v) => v.id === viewId);
+        setView(found || null);
+      } catch (err) {
+        toast.error(`Failed to load mod view: ${(err as Error).message}`);
+      } finally {
+        if (!cancelled) setLoading(false);
+      }
+    })();
+    return () => { cancelled = true; };
+  }, [viewId, toast]);
+
+  if (loading) {
+    return <EmptyState title="Loading mod view…" />;
+  }
+
+  if (!view) {
+    return (
+      <EmptyState
+        title="Mod view not found"
+        message={`No view with id "${viewId}" is currently installed.`}
+        action={<Button onClick={() => setActiveTab('mods')} variant="primary" size="sm">
+          Open Mods
+        </Button>}
+      />
+    );
+  }
+
+  // Iframe view: embed the mod's web/index.html in the dashboard.
+  if (view.kind === 'iframe') {
+    const src = `/api/mods/${view.modId}/web/index.html?t=${iframeReload + (reloadKey || 0)}`;
+    return (
+      <div className="mod-view-iframe-pane">
+        <div className="mod-view-iframe-header">
+          <span className="mod-view-iframe-label">
+            <Globe size={14} />
+            {view.label}
+            <span className="muted" style={{ fontSize: 11, fontWeight: 400 }}>by {view.modId}</span>
+          </span>
+          <div className="mod-view-iframe-actions">
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={() => setIframeReload((n) => n + 1)}
+              title="Reload this view"
+            >
+              <RefreshCw size={11} /> Reload
+            </Button>
+            <a
+              href={src}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="icon-btn"
+              title="Open in new tab"
+            >
+              <ExternalLink size={12} />
+            </a>
+          </div>
+        </div>
+        <iframe
+          key={iframeReload + (reloadKey || 0)}
+          src={src}
+          className="mod-view-iframe"
+          title={view.label}
+        />
+      </div>
+    );
+  }
+
+  // v3.20.5 — Tab view (React component shipped with the mod). The
+  // component is dynamically imported from /api/mods/<id>/views/<file>.
+  // Mods ship a pre-built ES module (default export = React component).
+  // If the registry declared a component path, we lazy-load it.
+  if (view.component) {
+    // Capture the narrowed values into locals so the lazy() closure
+    // doesn't have to re-check nullability through `view`.
+    const componentPath: string = view.component;
+    const modId: string = view.modId;
+    const ModComponent = lazy(() =>
+      import(
+        /* @vite-ignore */
+        `/api/mods/${encodeURIComponent(modId)}/views/${encodeURIComponent(componentPath)}`
+      ).then((m) => ({ default: m.default ?? (() => null) })),
+    );
+    return (
+      <div className="mod-view-tab-pane">
+        <div className="mod-view-iframe-header">
+          <span className="mod-view-iframe-label">
+            <LayoutTemplate size={14} />
+            {view.label}
+            <span className="muted" style={{ fontSize: 11, fontWeight: 400 }}>by {view.modId}</span>
+          </span>
+        </div>
+        <div className="mod-view-tab-body">
+          <ErrorBoundary modId={view.modId} component={view.component}>
+            <Suspense fallback={<div style={{ padding: 24 }}><Spinner size="md" /> <span className="muted">Loading mod view…</span></div>}>
+              <ModComponent />
+            </Suspense>
+          </ErrorBoundary>
+        </div>
+      </div>
+    );
+  }
+
+  // Tab kind with no component path — show a placeholder.
+  return (
+    <Card>
+      <CardTitle>
+        <LayoutTemplate size={14} /> {view.label}
+      </CardTitle>
+      <CardMeta>by {view.modId}</CardMeta>
+      {view.description && <p className="muted" style={{ marginTop: 8 }}>{view.description}</p>}
+      <p className="muted" style={{ fontSize: 12, marginTop: 12 }}>
+        This mod declared a tab view but did not provide a component path in views/registry.json.
+        Add a <code>component</code> field (e.g. <code>"MyView.js"</code>) and ship the file under <code>views/</code>.
+      </p>
+      <div style={{ marginTop: 12 }}>
+        <Button variant="secondary" size="sm" onClick={() => setActiveTab('mods')}>
+          Open Mods page
+        </Button>
+      </div>
+    </Card>
+  );
+}
+
+/**
+ * Minimal error boundary for dynamically imported mod views. Catches
+ * a failure to load the module (404, syntax error in the mod's code,
+ * React.render-time throw) and renders a clean fallback instead of
+ * crashing the dashboard shell.
+ */
+import { Component as ReactComponent, type ReactNode } from 'react';
+
+class ErrorBoundary extends ReactComponent<
+  { children: ReactNode; modId: string; component: string },
+  { error: Error | null }
+> {
+  state = { error: null as Error | null };
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+  override componentDidCatch() {
+    /* swallow — error surfaced via state */
+  }
+  override render() {
+    if (this.state.error) {
+      return (
+        <div className="mod-view-error">
+          <AlertTriangle size={16} />
+          <strong>Failed to render mod view</strong>
+          <div className="muted" style={{ fontSize: 12, marginTop: 6 }}>
+            {this.props.modId} → {this.props.component}: {this.state.error.message}
+          </div>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}