Initial commit: MVP structure + Cursor documentation + Onboarding components

micro_dao_orchestrator_ui_react_layout_shell.jsx

@@ -0,0 +1,363 @@
+import React from "react";
+import {
+  Activity,
+  AlertTriangle,
+  CheckCircle2,
+  Cpu,
+  Database,
+  GitBranch,
+  LineChart,
+  MessageSquare,
+  Settings,
+  ShieldCheck,
+  User,
+  Vote,
+  Wallet,
+  Zap,
+  Bot,
+  Boxes,
+  BookOpen,
+  FileText,
+  Network,
+  Video,
+  Palette,
+  Bell,
+  Store,
+  Plug,
+} from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Textarea } from "@/components/ui/textarea";
+import { Badge } from "@/components/ui/badge";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
+
+// ---------- Utility types ----------
+type ModuleKey =
+  | "home"
+  | "messenger"
+  | "projects"
+  | "memory"
+  | "parser"
+  | "graph"
+  | "meetings"
+  | "agents"
+  | "training"
+  | "dao"
+  | "treasury"
+  | "integrations"
+  | "market"
+  | "analytics"
+  | "notifications"
+  | "admin"
+  | "creative"
+  | "security"
+  | "profile";
+
+const MODULES: Array<{
+  key: ModuleKey;
+  label: string;
+  icon: React.ElementType;
+}> = [
+  { key: "home", label: "Головна / Оркестратор", icon: Cpu },
+  { key: "messenger", label: "Чати та канали", icon: MessageSquare },
+  { key: "projects", label: "Проєкти", icon: Boxes },
+  { key: "memory", label: "База знань", icon: BookOpen },
+  { key: "parser", label: "Парсер документів", icon: FileText },
+  { key: "graph", label: "Граф знань", icon: Network },
+  { key: "meetings", label: "Зустрічі", icon: Video },
+  { key: "agents", label: "Агенти", icon: Bot },
+  { key: "training", label: "Навчальний кабінет", icon: GitBranch },
+  { key: "dao", label: "Голосування / DAO", icon: Vote },
+  { key: "treasury", label: "Фінанси / Казна", icon: Wallet },
+  { key: "integrations", label: "Інтеграції", icon: Plug },
+  { key: "market", label: "Маркетплейс", icon: Store },
+  { key: "analytics", label: "Аналітика", icon: LineChart },
+  { key: "notifications", label: "Сповіщення", icon: Bell },
+  { key: "admin", label: "Адмін-панель", icon: Settings },
+  { key: "creative", label: "Креативна студія", icon: Palette },
+  { key: "security", label: "Безпека / Аудит", icon: ShieldCheck },
+  { key: "profile", label: "Профіль", icon: User },
+];
+
+// ---------- Reusable UI blocks ----------
+function Sidebar({ active, onSelect }: { active: ModuleKey; onSelect: (k: ModuleKey) => void }) {
+  return (
+    <aside className="h-full w-72 border-r bg-white/60 backdrop-blur-sm">
+      <div className="p-4 border-b flex items-center gap-2">
+        <Cpu className="h-5 w-5" />
+        <span className="font-semibold">MicroDAO</span>
+        <Badge variant="secondary" className="ml-auto">orchestrator</Badge>
+      </div>
+      <nav className="p-2 space-y-1 overflow-y-auto h-[calc(100%-3.5rem)]">
+        {MODULES.map((m) => (
+          <button
+            key={m.key}
+            onClick={() => onSelect(m.key)}
+            className={`w-full flex items-center gap-3 rounded-xl px-3 py-2 hover:bg-slate-100 transition ${
+              active === m.key ? "bg-slate-900 text-white hover:bg-slate-900" : ""
+            }`}
+            aria-current={active === m.key}
+          >
+            <m.icon className="h-4 w-4" />
+            <span className="text-sm text-left truncate">{m.label}</span>
+            {m.key === "notifications" && (
+              <Badge className={`ml-auto ${active === m.key ? "bg-white text-slate-900" : ""}`}>3</Badge>
+            )}
+          </button>
+        ))}
+      </nav>
+    </aside>
+  );
+}
+
+function Topbar() {
+  return (
+    <div className="h-14 border-b flex items-center gap-3 px-4 bg-white/70 backdrop-blur">
+      <Input placeholder="Пошук по всіх модулях" className="max-w-md" />
+      <Tabs defaultValue="dao" className="ml-2">
+        <TabsList>
+          <TabsTrigger value="private">Private</TabsTrigger>
+          <TabsTrigger value="dao">DAO</TabsTrigger>
+          <TabsTrigger value="public">Public</TabsTrigger>
+        </TabsList>
+      </Tabs>
+      <div className="ml-auto flex items-center gap-2">
+        <Badge variant="outline" className="flex items-center gap-1"><Database className="h-4 w-4"/>DB ok</Badge>
+        <Badge variant="outline" className="flex items-center gap-1"><Zap className="h-4 w-4"/>DAGI sync</Badge>
+        <Button variant="secondary" size="sm" className="gap-2"><Settings className="h-4 w-4"/>Налаштування</Button>
+      </div>
+    </div>
+  );
+}
+
+function HealthGrid() {
+  const items = [
+    { title: "Messenger", ok: true },
+    { title: "Parser", ok: false },
+    { title: "KB Core", ok: true },
+    { title: "RAG", ok: true },
+    { title: "Wallet", ok: true },
+    { title: "DAO", ok: true },
+  ];
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-3 gap-3">
+      {items.map((x) => (
+        <Card key={x.title} className="rounded-2xl">
+          <CardHeader className="py-3">
+            <CardTitle className="text-sm font-medium flex items-center gap-2">
+              {x.ok ? (
+                <CheckCircle2 className="h-4 w-4 text-emerald-600" />
+              ) : (
+                <AlertTriangle className="h-4 w-4 text-amber-600" />
+              )}
+              {x.title}
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="py-2">
+            <div className="text-xs text-slate-500">{x.ok ? "Працює стабільно" : "Черга задач > p95"}</div>
+          </CardContent>
+        </Card>
+      ))}
+    </div>
+  );
+}
+
+function OrchestratorChat() {
+  return (
+    <Card className="rounded-2xl h-full flex flex-col">
+      <CardHeader className="py-3">
+        <CardTitle className="text-sm">Чат з Оркестратором</CardTitle>
+      </CardHeader>
+      <CardContent className="flex-1 flex flex-col gap-3">
+        <div className="flex-1 rounded-xl border bg-slate-50 p-3 text-sm overflow-auto">
+          <div className="text-slate-500">Вітаю. Чим допомогти? Наприклад: "Розбери PDF та створй короткий бріф у Проєктах".</div>
+        </div>
+        <div className="flex items-center gap-2">
+          <Textarea placeholder="Запитайте або використайте @agent" className="min-h-[44px]" />
+          <Button className="whitespace-nowrap">Надіслати</Button>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function ActivityFeed() {
+  const rows = [
+    { t: "ingest.completed", d: "USDO готово", ts: "09:15" },
+    { t: "message.created", d: "#general", ts: "09:12" },
+    { t: "vote.finalized", d: "Постанова #12", ts: "08:55" },
+    { t: "payment.sent", d: "Reward 2.5 μUTIL", ts: "08:40" },
+  ];
+  return (
+    <Card className="rounded-2xl h-full">
+      <CardHeader className="py-3"><CardTitle className="text-sm">Стрічка подій</CardTitle></CardHeader>
+      <CardContent>
+        <ul className="space-y-2 text-sm">
+          {rows.map((r, i) => (
+            <li key={i} className="flex items-center gap-2">
+              <Activity className="h-4 w-4 text-slate-500"/>
+              <span className="font-medium">{r.t}</span>
+              <span className="text-slate-500">— {r.d}</span>
+              <span className="ml-auto text-xs text-slate-400">{r.ts}</span>
+            </li>
+          ))}
+        </ul>
+      </CardContent>
+    </Card>
+  );
+}
+
+function TasksTable() {
+  const rows = [
+    { agent: "parser-agent", task: "PDF→USDO", status: "running", eta: "2m" },
+    { agent: "project-agent", task: "Бріф + Kanban", status: "queued", eta: "—" },
+    { agent: "wallet-agent", task: "Нарахувати винагороду", status: "completed", eta: "0" },
+  ];
+  const color = (s: string) => (s === "completed" ? "text-emerald-600" : s === "running" ? "text-amber-600" : "text-slate-500");
+  return (
+    <Card className="rounded-2xl h-full">
+      <CardHeader className="py-3"><CardTitle className="text-sm">Поточні задачі агентів</CardTitle></CardHeader>
+      <CardContent>
+        <div className="overflow-x-auto">
+          <table className="w-full text-sm">
+            <thead className="text-left text-slate-500">
+              <tr>
+                <th className="py-2 pr-4">Агент</th>
+                <th className="py-2 pr-4">Задача</th>
+                <th className="py-2 pr-4">Статус</th>
+                <th className="py-2">ETA</th>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((r, i) => (
+                <tr key={i} className="border-t">
+                  <td className="py-2 pr-4 font-mono text-xs">{r.agent}</td>
+                  <td className="py-2 pr-4">{r.task}</td>
+                  <td className={`py-2 pr-4 ${color(r.status)}`}>{r.status}</td>
+                  <td className="py-2">{r.eta}</td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+
+function AgentGraph() {
+  // Minimal static SVG graph placeholder
+  return (
+    <Card className="rounded-2xl h-full">
+      <CardHeader className="py-3"><CardTitle className="text-sm">Граф агентів</CardTitle></CardHeader>
+      <CardContent>
+        <svg viewBox="0 0 400 220" className="w-full h-48">
+          <defs>
+            <filter id="shadow" x="-50%" y="-50%" width="200%" height="200%">
+              <feDropShadow dx="0" dy="1" stdDeviation="2" floodOpacity="0.2" />
+            </filter>
+          </defs>
+          <g filter="url(#shadow)">
+            <circle cx="200" cy="110" r="28" className="fill-slate-900" />
+            <text x="200" y="115" textAnchor="middle" className="fill-white text-xs">Orch</text>
+            {[
+              { x: 80, y: 40, t: "Parser" },
+              { x: 320, y: 40, t: "KB" },
+              { x: 80, y: 180, t: "Wallet" },
+              { x: 320, y: 180, t: "DAO" },
+            ].map((n, i) => (
+              <g key={i}>
+                <line x1="200" y1="110" x2={n.x} y2={n.y} stroke="#94a3b8" />
+                <circle cx={n.x} cy={n.y} r="22" className="fill-white stroke-slate-300" />
+                <text x={n.x} y={n.y + 4} textAnchor="middle" className="fill-slate-700 text-xs">{n.t}</text>
+              </g>
+            ))}
+          </g>
+        </svg>
+      </CardContent>
+    </Card>
+  );
+}
+
+function HomeOrchestrator() {
+  return (
+    <div className="p-4 space-y-4">
+      <HealthGrid />
+      <div className="grid grid-cols-1 xl:grid-cols-2 gap-4">
+        <OrchestratorChat />
+        <div className="grid grid-rows-2 gap-4">
+          <ActivityFeed />
+          <TasksTable />
+        </div>
+      </div>
+      <AgentGraph />
+    </div>
+  );
+}
+
+function Placeholder({ title }: { title: string }) {
+  return (
+    <div className="p-6 text-sm text-slate-600">
+      <p className="mb-2">Розділ: <span className="font-medium">{title}</span></p>
+      <p>Тут буде детальний екран модуля. Структура готова до підключення реальних даних та маршрутів.</p>
+    </div>
+  );
+}
+
+export default function OrchestratorLayout() {
+  const [active, setActive] = React.useState<ModuleKey>("home");
+
+  const content = () => {
+    switch (active) {
+      case "home":
+        return <HomeOrchestrator />;
+      case "messenger":
+        return <Placeholder title="Чати та канали" />;
+      case "projects":
+        return <Placeholder title="Проєкти" />;
+      case "memory":
+        return <Placeholder title="База знань" />;
+      case "parser":
+        return <Placeholder title="Парсер документів" />;
+      case "graph":
+        return <Placeholder title="Граф знань" />;
+      case "meetings":
+        return <Placeholder title="Зустрічі" />;
+      case "agents":
+        return <Placeholder title="Агенти" />;
+      case "training":
+        return <Placeholder title="Навчальний кабінет" />;
+      case "dao":
+        return <Placeholder title="Голосування / DAO" />;
+      case "treasury":
+        return <Placeholder title="Фінанси / Казна" />;
+      case "integrations":
+        return <Placeholder title="Інтеграції" />;
+      case "market":
+        return <Placeholder title="Маркетплейс" />;
+      case "analytics":
+        return <Placeholder title="Аналітика" />;
+      case "notifications":
+        return <Placeholder title="Сповіщення" />;
+      case "admin":
+        return <Placeholder title="Адмін-панель" />;
+      case "creative":
+        return <Placeholder title="Креативна студія" />;
+      case "security":
+        return <Placeholder title="Безпека / Аудит" />;
+      case "profile":
+        return <Placeholder title="Профіль" />;
+    }
+  };
+
+  return (
+    <div className="h-[100vh] w-full grid grid-cols-[18rem_1fr] bg-slate-50 text-slate-900">
+      <Sidebar active={active} onSelect={setActive} />
+      <main className="flex flex-col">
+        <Topbar />
+        <div className="flex-1 overflow-auto">{content()}</div>
+      </main>
+    </div>
+  );
+}