@polderlabs/bizar 7.0.2 → 8.0.0

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

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

@@ -1,177 +0,0 @@
-// 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';
-import { logger } from '../lib/logger';
-
-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) {
-      logger.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
-      logger.warn('[ws] error');
-    });
-    socket.addEventListener('message', (e) => {
-      let msg: WsMessage;
-      try {
-        msg = JSON.parse(e.data);
-      } catch {
-        logger.warn('[ws] bad message');
-        return;
-      }
-      for (const h of this.handlers) {
-        try {
-          h(msg);
-        } catch (err) {
-          logger.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) {
-        logger.error('[ws] status handler error:', err);
-      }
-    }
-  }
-}

package/bizar-dash/src/web/locales/en.json

@@ -1,52 +0,0 @@
-{
-  "settings.title": "Settings",
-  "settings.general": "General",
-  "settings.envVars": "Environment Variables",
-  "settings.providers": "Providers",
-  "settings.theme": "Theme",
-  "settings.themeMode": "Mode",
-  "settings.themeAccent": "Accent",
-  "settings.layout": "Layout",
-  "settings.notifications": "Notifications",
-  "settings.activity": "Activity",
-  "settings.save": "Save",
-  "settings.reset": "Reset",
-  "settings.reload": "Reload",
-  "settings.dashboard": "Dashboard",
-  "settings.background": "Background Agents",
-  "settings.systemLlm": "System LLM API",
-  "settings.headroom": "Headroom",
-  "settings.updates": "Updates",
-  "settings.about": "About",
-  "settings.auth": "Authentication",
-  "settings.agents": "Agent Behavior",
-  "settings.service": "Service",
-  "settings.tailscale": "Tailscale Serve",
-  "chat.title": "Chat",
-  "chat.newSession": "New session",
-  "chat.sendMessage": "Send message",
-  "chat.placeholder": "Type your message…",
-  "chat.export": "Export transcript",
-  "chat.rename": "Rename session",
-  "chat.delete": "Delete session",
-  "memory.title": "Memory",
-  "memory.overview": "Overview",
-  "memory.lightrag": "LightRAG",
-  "memory.obsidian": "Obsidian Vault",
-  "memory.gitSync": "Git Sync",
-  "memory.semantic": "Semantic Search",
-  "memory.config": "Config",
-  "memory.refresh": "Refresh memory",
-  "tasks.title": "Tasks",
-  "tasks.create": "Create task",
-  "tasks.complete": "Mark complete",
-  "tasks.delete": "Delete task",
-  "activity.title": "Activity",
-  "activity.live": "Live",
-  "activity.paused": "Paused",
-  "activity.refresh": "Refresh",
-  "history.title": "History",
-  "history.export": "Export",
-  "overview.title": "Overview",
-  "overview.submit": "Submit to Odin"
-}

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

@@ -1,43 +0,0 @@
-// 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 en from './locales/en.json';
-import { setLocale } from './lib/i18n';
-
-// Initialize i18n
-setLocale('en', en);
-// 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/mobile-layout.css';
-import './styles/glyphs.css';
-import './styles/minimax-usage.css';
-import './styles/skills.css';
-import './styles/memory.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

@@ -1,309 +0,0 @@
-// src/mobile/MobileApp.tsx — mobile root with state-based routing + stack navigation.
-import { Component, useCallback, useEffect, useState, type ReactNode } 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';
-
-/** Tiny ErrorBoundary for mobile views — keeps a render error from
- *  blanking the whole shell so the user sees a "Reload" prompt with
- *  the chrome (topbar + back button) still intact. */
-class MobileViewBoundary extends Component<{ children: ReactNode }, { error: Error | null }> {
-  constructor(props: { children: ReactNode }) {
-    super(props);
-    this.state = { error: null };
-  }
-  componentDidCatch(error: Error) {
-    this.setState({ error });
-  }
-  render() {
-    if (this.state.error) {
-      return (
-        <div className="mobile-view-error">
-          <h2>Something went wrong</h2>
-          <p>{this.state.error.message}</p>
-          <button
-            type="button"
-            className="mobile-btn mobile-btn-secondary"
-            onClick={() => window.location.reload()}
-          >
-            Reload
-          </button>
-        </div>
-      );
-    }
-    return this.props.children;
-  }
-}
-
-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">
-        <MobileViewBoundary>{renderView()}</MobileViewBoundary>
-      </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}
-    />
-  );
-}