@polderlabs/bizar 5.3.1 → 5.4.1

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

@@ -0,0 +1,106 @@
+// src/web/mobile/MobileMarketplace.tsx — v5.4 mobile plugin marketplace with search.
+import { useEffect, useState } from 'react';
+import { Store, Search } from 'lucide-react';
+import { api } from '../lib/api';
+import { MarketplacePluginCard, type MarketplacePlugin } from '../components/MarketplacePluginCard';
+
+type RegistryResponse = {
+  plugins: MarketplacePlugin[];
+};
+
+export function MobileMarketplace() {
+  const [registry, setRegistry] = useState<RegistryResponse | null>(null);
+  const [search, setSearch] = useState('');
+  const [installing, setInstalling] = useState<MarketplacePlugin | null>(null);
+  const [selected, setSelected] = useState<MarketplacePlugin | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    api.get<RegistryResponse>('/plugins/registry')
+      .then((r) => setRegistry(r))
+      .catch(() => {/* best-effort */})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const install = async (plugin: MarketplacePlugin) => {
+    setInstalling(plugin);
+    try {
+      await api.post('/plugins/install', { pluginId: plugin.id });
+      setInstalling(null);
+      setSelected(null);
+    } catch {
+      setInstalling(null);
+    }
+  };
+
+  const filtered = (registry?.plugins ?? []).filter(
+    (p) => !search || p.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  if (loading) {
+    return (
+      <div className="mobile-loading">
+        <p>Loading marketplace…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-marketplace">
+      <div className="mobile-marketplace-search">
+        <Search size={16} aria-hidden />
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search plugins…"
+          aria-label="Search plugins"
+        />
+      </div>
+
+      <div className="mobile-marketplace-list">
+        {filtered.length === 0 ? (
+          <div className="mobile-empty">
+            <Store size={32} />
+            <p>No plugins{search ? ` match "${search}"` : ' in marketplace'}.</p>
+          </div>
+        ) : (
+          filtered.map((p) => (
+            <MarketplacePluginCard
+              key={p.id}
+              plugin={p}
+              onInstall={() => setSelected(p)}
+              onView={() => setSelected(p)}
+            />
+          ))
+        )}
+      </div>
+
+      {selected && (
+        <div className="mobile-plugin-install-dialog">
+          <div className="mobile-plugin-install-dialog-head">
+            <h3>{selected.name}</h3>
+            <p>{selected.description}</p>
+          </div>
+          <div className="mobile-plugin-install-dialog-actions">
+            <button
+              type="button"
+              className="mobile-btn mobile-btn-secondary"
+              onClick={() => setSelected(null)}
+            >
+              Cancel
+            </button>
+            <button
+              type="button"
+              className="mobile-btn mobile-btn-primary"
+              disabled={installing?.id === selected.id}
+              onClick={() => install(selected)}
+            >
+              {installing?.id === selected.id ? 'Installing…' : 'Install'}
+            </button>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,108 @@
+// src/web/mobile/MobileMemory.tsx — v5.4 mobile memory view with tabbed sources.
+// Tab bar at top, scrollable source panels below.
+import { useState } from 'react';
+import {
+  Brain,
+  BarChart,
+  FileText,
+  GitBranch,
+  Search,
+  Mic,
+  Settings,
+  Network,
+  Clipboard,
+  Scan,
+} from 'lucide-react';
+import { cn } from '../lib/utils';
+import { MemoryOverview } from '../views/memory/MemoryOverview';
+import { LightragPanel } from '../views/memory/LightragPanel';
+import { ObsidianPanel } from '../views/memory/ObsidianPanel';
+import { GitSyncPanel } from '../views/memory/GitSyncPanel';
+import { SemanticSearchPanel } from '../views/memory/SemanticSearchPanel';
+import { ConfigPanel } from '../views/memory/ConfigPanel';
+import { MemoryGraphPanel } from '../views/memory/MemoryGraphPanel';
+import { VaultFromClipboardPanel } from '../views/memory/VaultFromClipboardPanel';
+import { FromScreenshotPanel } from '../views/memory/FromScreenshotPanel';
+import { VoiceNotesPanel } from '../components/VoiceNotesPanel';
+
+type SubPanel = 'overview' | 'lightrag' | 'obsidian' | 'git' | 'semantic' | 'config' | 'graph' | 'webclip' | 'screenshot' | 'voice';
+
+type Props = {
+  snapshot?: unknown;
+  settings?: unknown;
+  vaultPath?: string;
+};
+
+const SOURCES: Array<{ id: SubPanel; label: string; icon: typeof BarChart }> = [
+  { id: 'overview', label: 'Overview', icon: BarChart },
+  { id: 'lightrag', label: 'LightRAG', icon: Brain },
+  { id: 'obsidian', label: 'Obsidian', icon: FileText },
+  { id: 'git', label: 'Git Sync', icon: GitBranch },
+  { id: 'semantic', label: 'Search', icon: Search },
+  { id: 'voice', label: 'Voice', icon: Mic },
+  { id: 'config', label: 'Config', icon: Settings },
+  { id: 'graph', label: 'Graph', icon: Network },
+  { id: 'webclip', label: 'Web Clip', icon: Clipboard },
+  { id: 'screenshot', label: 'OCR', icon: Scan },
+];
+
+export function MobileMemory({ vaultPath }: Props) {
+  const [activeSource, setActiveSource] = useState<SubPanel>('overview');
+  const [refreshKey, setRefreshKey] = useState(0);
+
+  const refresh = () => setRefreshKey((k) => k + 1);
+
+  const renderPanel = () => {
+    const key = refreshKey;
+    switch (activeSource) {
+      case 'overview':
+        return <MemoryOverview refreshKey={key} onRefresh={refresh} setActiveSubPanel={setActiveSource as (s: string) => void} />;
+      case 'lightrag':
+        return <LightragPanel refreshKey={key} />;
+      case 'obsidian':
+        return <ObsidianPanel refreshKey={key} />;
+      case 'git':
+        return <GitSyncPanel refreshKey={key} />;
+      case 'semantic':
+        return <SemanticSearchPanel refreshKey={key} />;
+      case 'config':
+        return <ConfigPanel refreshKey={key} />;
+      case 'graph':
+        return <MemoryGraphPanel refreshKey={key} />;
+      case 'webclip':
+        return <VaultFromClipboardPanel refreshKey={key} />;
+      case 'screenshot':
+        return <FromScreenshotPanel refreshKey={key} />;
+      case 'voice':
+        return <VoiceNotesPanel refreshKey={key} />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <div className="mobile-memory">
+      <div className="mobile-memory-tabs">
+        {SOURCES.map((s) => {
+          const Icon = s.icon;
+          return (
+            <button
+              key={s.id}
+              type="button"
+              className={cn('mobile-memory-tab', activeSource === s.id && 'is-active')}
+              onClick={() => setActiveSource(s.id)}
+              aria-pressed={activeSource === s.id}
+            >
+              <Icon size={14} aria-hidden />
+              {s.label}
+            </button>
+          );
+        })}
+      </div>
+
+      <div className="mobile-memory-content">
+        {renderPanel()}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,213 @@
+// src/mobile/MobileOverview.tsx — mobile-optimized overview with vertical scrolling
+// stat cards, a submit hero, recent activity feed, and quick action shortcuts.
+import { useState } from 'react';
+import {
+  CheckSquare,
+  Clock,
+  Bot,
+  Coins,
+  Plus,
+  MessageSquare,
+  Stethoscope,
+  Send,
+} from 'lucide-react';
+import { api } from '../lib/api';
+import type { Snapshot } from '../lib/types';
+
+type Props = {
+  snapshot: Snapshot | null;
+  refreshSnapshot: () => Promise<void>;
+};
+
+type StatColor = 'blue' | 'purple' | 'green' | 'yellow';
+
+export function MobileOverview({ snapshot, refreshSnapshot }: Props) {
+  const [submitText, setSubmitText] = useState('');
+  const [submitting, setSubmitting] = useState(false);
+
+  const tasks = snapshot?.tasks || [];
+  const schedules = snapshot?.schedules || [];
+  const agents = snapshot?.agents || [];
+  const activeAgents = agents.filter((a) => a.status === 'running' || a.status === 'active').length;
+
+  const handleSubmit = async () => {
+    const text = submitText.trim();
+    if (!text || submitting) return;
+    setSubmitting(true);
+    try {
+      await api.post('/chat', { message: text, agent: 'odin' });
+      setSubmitText('');
+      await refreshSnapshot().catch(() => undefined);
+    } catch {
+      // best-effort; the input stays so the user can retry
+    } finally {
+      setSubmitting(false);
+    }
+  };
+
+  const goToTasks = () => {
+    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { tab: 'tasks' } }));
+  };
+  const goToChat = () => {
+    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { tab: 'chat' } }));
+  };
+  const runDoctor = () => {
+    window.dispatchEvent(new CustomEvent('mobile-navigate', { detail: { view: 'doctor' } }));
+  };
+
+  return (
+    <div className="mobile-overview mobile-view">
+      <HeroCard
+        value={submitText}
+        onChange={setSubmitText}
+        onSubmit={handleSubmit}
+        submitting={submitting}
+      />
+
+      <div className="mobile-stats-stack">
+        <StatCard
+          icon={<CheckSquare size={20} />}
+          label="Tasks"
+          value={tasks.length}
+          subtext={`${tasks.filter((t) => t.status === 'doing').length} active`}
+          color="blue"
+        />
+        <StatCard
+          icon={<Clock size={20} />}
+          label="Schedules"
+          value={schedules.length}
+          color="purple"
+        />
+        <StatCard
+          icon={<Bot size={20} />}
+          label="Active Agents"
+          value={activeAgents}
+          color="green"
+        />
+        <StatCard
+          icon={<Coins size={20} />}
+          label="API Tokens"
+          value={'0'}
+          subtext="last 24h"
+          color="yellow"
+        />
+      </div>
+
+      <RecentActivityCard snapshot={snapshot} />
+
+      <QuickActionsCard onNewTask={goToTasks} onNewChat={goToChat} onRunDoctor={runDoctor} />
+    </div>
+  );
+}
+
+type HeroCardProps = {
+  value: string;
+  onChange: (next: string) => void;
+  onSubmit: () => void;
+  submitting: boolean;
+};
+
+function HeroCard({ value, onChange, onSubmit, submitting }: HeroCardProps) {
+  return (
+    <div className="mobile-hero">
+      <h1>What do you want to do?</h1>
+      <p>
+        Describe what you want — Odin will split it into tasks, create a plan, delegate to
+        background agents, and track progress in real time.
+      </p>
+      <textarea
+        placeholder="e.g. Implement user authentication with email + password..."
+        className="mobile-hero-input"
+        rows={3}
+        value={value}
+        onChange={(e) => onChange(e.target.value)}
+      />
+      <button
+        type="button"
+        className="mobile-hero-submit"
+        onClick={onSubmit}
+        disabled={!value.trim() || submitting}
+      >
+        {submitting ? 'Submitting…' : (
+          <>
+            <Send size={14} /> Submit
+          </>
+        )}
+      </button>
+    </div>
+  );
+}
+
+type StatCardProps = {
+  icon: React.ReactNode;
+  label: string;
+  value: number | string;
+  subtext?: string;
+  color: StatColor;
+};
+
+function StatCard({ icon, label, value, subtext, color }: StatCardProps) {
+  return (
+    <div className={`mobile-stat-card is-${color}`}>
+      <div className="mobile-stat-icon">{icon}</div>
+      <div className="mobile-stat-body">
+        <div className="mobile-stat-label">{label}</div>
+        <div className="mobile-stat-value">{value}</div>
+        {subtext && <div className="mobile-stat-subtext">{subtext}</div>}
+      </div>
+    </div>
+  );
+}
+
+function RecentActivityCard({ snapshot }: { snapshot: Snapshot | null }) {
+  const items = (snapshot?.overview?.recentActivity || []).slice(0, 8);
+  return (
+    <div className="mobile-activity-card">
+      <h3>Recent Activity</h3>
+      {items.length === 0 ? (
+        <p className="mobile-empty">No recent activity</p>
+      ) : (
+        <ul className="mobile-activity-list">
+          {items.map((a, i) => {
+            const ts = typeof a.ts === 'string' ? a.ts : '';
+            const text = (a as Record<string, unknown>).message
+              || (a as Record<string, unknown>).text
+              || (a as Record<string, unknown>).title
+              || a.kind
+              || '';
+            return (
+              <li key={`${ts}-${i}`} className="mobile-activity-item">
+                <span className="mobile-activity-time">
+                  {ts ? new Date(ts).toLocaleTimeString() : ''}
+                </span>
+                <span className="mobile-activity-text">{String(text)}</span>
+              </li>
+            );
+          })}
+        </ul>
+      )}
+    </div>
+  );
+}
+
+type QuickActionsCardProps = {
+  onNewTask: () => void;
+  onNewChat: () => void;
+  onRunDoctor: () => void;
+};
+
+function QuickActionsCard({ onNewTask, onNewChat, onRunDoctor }: QuickActionsCardProps) {
+  return (
+    <div className="mobile-quick-actions">
+      <button type="button" className="mobile-quick-action" onClick={onNewTask}>
+        <Plus size={16} /> New task
+      </button>
+      <button type="button" className="mobile-quick-action" onClick={onNewChat}>
+        <MessageSquare size={16} /> New chat
+      </button>
+      <button type="button" className="mobile-quick-action" onClick={onRunDoctor}>
+        <Stethoscope size={16} /> Run doctor
+      </button>
+    </div>
+  );
+}

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

@@ -0,0 +1,71 @@
+// src/web/mobile/MobilePlugins.tsx — v5.4 mobile installed plugins list with search.
+import { useEffect, useState } from 'react';
+import { Puzzle, Search } from 'lucide-react';
+import { api } from '../lib/api';
+import { PluginPermissions } from '../components/PluginPermissions';
+import type { InstalledPlugin } from '../components/PluginCard';
+
+export function MobilePlugins() {
+  const [plugins, setPlugins] = useState<InstalledPlugin[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [search, setSearch] = useState('');
+
+  useEffect(() => {
+    api.get<{ plugins: InstalledPlugin[] }>('/plugins/installed')
+      .then((r) => setPlugins(r.plugins ?? []))
+      .catch(() => {/* best-effort */})
+      .finally(() => setLoading(false));
+  }, []);
+
+  const filtered = plugins.filter(
+    (p) => !search || p.name.toLowerCase().includes(search.toLowerCase()),
+  );
+
+  if (loading) {
+    return (
+      <div className="mobile-loading">
+        <p>Loading plugins…</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="mobile-plugins">
+      <div className="mobile-plugins-search">
+        <Search size={16} aria-hidden />
+        <input
+          type="search"
+          value={search}
+          onChange={(e) => setSearch(e.target.value)}
+          placeholder="Search installed plugins…"
+          aria-label="Search plugins"
+        />
+      </div>
+
+      <div className="mobile-plugins-list">
+        {filtered.length === 0 ? (
+          <div className="mobile-empty">
+            <Puzzle size={32} />
+            <p>{search ? `No plugins match "${search}".` : 'No plugins installed.'}</p>
+          </div>
+        ) : (
+          filtered.map((p) => (
+            <div key={p.id} className="mobile-plugin-card">
+              <div className="mobile-plugin-card-head">
+                <div className="mobile-plugin-name">{p.name}</div>
+                <div className="mobile-plugin-version">v{p.version}</div>
+              </div>
+              {p.description && (
+                <p className="mobile-plugin-description">{p.description}</p>
+              )}
+              <PluginPermissions permissions={p.permissions ?? []} />
+              <div className="mobile-plugin-stats">
+                {p.invocations ?? 0} invocations
+              </div>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+}