daarion-admin/microdao-daarion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add presence heartbeat for Matrix online status

Browse Source 
- matrix-gateway: POST /internal/matrix/presence/online endpoint
- usePresenceHeartbeat hook with activity tracking
- Auto away after 5 min inactivity
- Offline on page close/visibility change
- Integrated in MatrixChatRoom component
This commit is contained in:
Apple
2025-11-27 00:19:40 -08:00
parent 5bed515852
commit 3de3c8cb36
6371 changed files with 1317450 additions and 932 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/features/microdao/MicrodaoConsolePage.tsx Normal file
View File

@@ -0,0 +1,305 @@
/**
* MicrodaoConsolePage Component
* Phase 7: microDAO Console (MVP)
*/
import { useState, useEffect } from 'react';
import { useParams, useNavigate, Link } from 'react-router-dom';
import { getMicrodao, getMembers, getTreasury, type MicrodaoRead, type MicrodaoMember, type TreasuryItem } from '@/api/microdao';
import { getAgents, type AgentListItem } from '@/api/agents';
type TabType = 'overview' | 'members' | 'agents' | 'treasury';
export function MicrodaoConsolePage() {
const { slug } = useParams<{ slug: string }>();
const navigate = useNavigate();
const [activeTab, setActiveTab] = useState<TabType>('overview');
const [microdao, setMicrodao] = useState<MicrodaoRead | null>(null);
const [members, setMembers] = useState<MicrodaoMember[]>([]);
const [agents, setAgents] = useState<AgentListItem[]>([]);
const [treasury, setTreasury] = useState<TreasuryItem[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
if (slug) {
loadData();
}
}, [slug]);
const loadData = async () => {
try {
setLoading(true);
setError(null);
const daoData = await getMicrodao(slug!);
setMicrodao(daoData);
// Load additional data based on tab
const [membersData, treasuryData] = await Promise.all([
getMembers(slug!).catch(() => []),
getTreasury(slug!).catch(() => []),
]);
setMembers(membersData);
setTreasury(treasuryData);
// Load agents (if microDAO has external_id)
if (daoData.external_id) {
try {
const agentsData = await getAgents(daoData.external_id);
setAgents(agentsData);
} catch (err) {
console.error('Failed to load agents:', err);
}
}
} catch (err) {
console.error('Failed to load microDAO:', err);
setError((err as Error).message);
} finally {
setLoading(false);
}
};
if (loading) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="text-center">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
<div className="text-gray-600">Завантаження microDAO...</div>
</div>
</div>
);
}
if (error || !microdao) {
return (
<div className="min-h-screen bg-gray-50 flex items-center justify-center">
<div className="bg-red-50 border border-red-200 rounded-lg p-8 text-center max-w-md">
<div className="text-6xl mb-4">❌</div>
<h2 className="text-xl font-semibold text-red-900 mb-2">
MicroDAO не знайдено
</h2>
<p className="text-red-600 mb-4">{error || 'MicroDAO не існує'}</p>
<button
onClick={() => navigate('/microdao')}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
← Назад до списку
</button>
</div>
</div>
);
}
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
<button
onClick={() => navigate('/microdao')}
className="text-blue-600 hover:text-blue-700 mb-4 flex items-center gap-2"
>
← Назад до списку
</button>
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">
{microdao.name}
</h1>
{microdao.description && (
<p className="text-gray-600 mt-1">{microdao.description}</p>
)}
<div className="mt-2 text-sm text-gray-500">
<span className="font-mono">{microdao.slug}</span> · {microdao.external_id}
</div>
</div>
<div>
<Link
to={`/dao/${microdao.slug}-governance`}
className="px-6 py-3 bg-gradient-to-r from-blue-600 to-purple-600 text-white rounded-lg hover:from-blue-700 hover:to-purple-700 transition flex items-center gap-2 shadow-md"
>
<span className="text-xl">🗳️</span>
<span className="font-semibold">DAO Governance</span>
</Link>
</div>
</div>
{/* Tabs */}
<div className="flex gap-1 border-b border-gray-200 mt-6">
<button
onClick={() => setActiveTab('overview')}
className={`px-6 py-3 font-medium transition-colors ${
activeTab === 'overview'
? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-600 hover:text-gray-900'
}`}
>
📊 Огляд
</button>
<button
onClick={() => setActiveTab('members')}
className={`px-6 py-3 font-medium transition-colors ${
activeTab === 'members'
? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-600 hover:text-gray-900'
}`}
>
👥 Учасники ({members.length})
</button>
<button
onClick={() => setActiveTab('agents')}
className={`px-6 py-3 font-medium transition-colors ${
activeTab === 'agents'
? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-600 hover:text-gray-900'
}`}
>
🤖 Агенти ({agents.length})
</button>
<button
onClick={() => setActiveTab('treasury')}
className={`px-6 py-3 font-medium transition-colors ${
activeTab === 'treasury'
? 'text-blue-600 border-b-2 border-blue-600'
: 'text-gray-600 hover:text-gray-900'
}`}
>
💰 Казна
</button>
</div>
</div>
</div>
{/* Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Overview Tab */}
{activeTab === 'overview' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="text-3xl font-bold text-blue-900">{members.length}</div>
<div className="text-sm text-gray-600">Учасників</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="text-3xl font-bold text-green-900">{agents.length}</div>
<div className="text-sm text-gray-600">Агентів</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="text-3xl font-bold text-purple-900">{treasury.length}</div>
<div className="text-sm text-gray-600">Токенів</div>
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<h3 className="text-lg font-semibold mb-4">Швидкі дії</h3>
<div className="space-y-3">
<Link
to={`/agent-hub?microdao=${microdao.external_id}`}
className="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
>
🤖 Відкрити Agent Hub
</Link>
<Link
to={`/messenger?microdao=${microdao.slug}`}
className="block p-4 border border-gray-200 rounded-lg hover:bg-gray-50"
>
💬 Відкрити Messenger
</Link>
</div>
</div>
</div>
)}
{/* Members Tab */}
{activeTab === 'members' && (
<div className="bg-white border border-gray-200 rounded-lg">
<div className="p-6 border-b border-gray-200">
<h3 className="text-lg font-semibold">Учасники microDAO</h3>
</div>
<div className="divide-y divide-gray-200">
{members.map((member) => (
<div key={member.id} className="p-4 flex items-center justify-between">
<div>
<div className="font-medium">{member.user_id}</div>
<div className="text-sm text-gray-500">
Роль: {member.role} · Приєднався: {new Date(member.joined_at).toLocaleDateString('uk-UA')}
</div>
</div>
</div>
))}
{members.length === 0 && (
<div className="p-8 text-center text-gray-500">
Немає учасників
</div>
)}
</div>
</div>
)}
{/* Agents Tab */}
{activeTab === 'agents' && (
<div className="bg-white border border-gray-200 rounded-lg">
<div className="p-6 border-b border-gray-200 flex items-center justify-between">
<h3 className="text-lg font-semibold">Агенти microDAO</h3>
<Link
to="/agent-hub"
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Відкрити Agent Hub
</Link>
</div>
<div className="divide-y divide-gray-200">
{agents.map((agent) => (
<Link
key={agent.id}
to={`/agent/${agent.id}`}
className="p-4 flex items-center justify-between hover:bg-gray-50"
>
<div>
<div className="font-medium">{agent.name}</div>
<div className="text-sm text-gray-500">
{agent.kind} · {agent.model}
</div>
</div>
<div className="text-blue-600">→</div>
</Link>
))}
{agents.length === 0 && (
<div className="p-8 text-center text-gray-500">
Немає агентів
</div>
)}
</div>
</div>
)}
{/* Treasury Tab */}
{activeTab === 'treasury' && (
<div className="bg-white border border-gray-200 rounded-lg">
<div className="p-6 border-b border-gray-200">
<h3 className="text-lg font-semibold">Казна microDAO</h3>
</div>
<div className="divide-y divide-gray-200">
{treasury.map((item) => (
<div key={item.token_symbol} className="p-4 flex items-center justify-between">
<div className="font-medium">{item.token_symbol}</div>
<div className="text-xl font-bold">{item.balance.toLocaleString()}</div>
</div>
))}
{treasury.length === 0 && (
<div className="p-8 text-center text-gray-500">
Казна пуста
</div>
)}
</div>
</div>
)}
</div>
</div>
);
}

237
src/features/microdao/MicrodaoListPage.tsx Normal file
View File

@@ -0,0 +1,237 @@
/**
* MicrodaoListPage Component
* Phase 7: List of user's microDAOs
*/
import { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useMicrodaos } from './hooks/useMicrodaos';
import { createMicrodao, type MicrodaoCreate } from '@/api/microdao';
export function MicrodaoListPage() {
const navigate = useNavigate();
const { microdaos, loading, error, refetch } = useMicrodaos();
const [createDialogOpen, setCreateDialogOpen] = useState(false);
const [creating, setCreating] = useState(false);
const [createError, setCreateError] = useState<string | null>(null);
const [newName, setNewName] = useState('');
const [newSlug, setNewSlug] = useState('');
const [newDescription, setNewDescription] = useState('');
const handleCreate = async (e: React.FormEvent) => {
e.preventDefault();
try {
setCreating(true);
setCreateError(null);
const data: MicrodaoCreate = {
name: newName,
slug: newSlug,
description: newDescription || undefined,
};
const microdao = await createMicrodao(data);
// Success
setCreateDialogOpen(false);
setNewName('');
setNewSlug('');
setNewDescription('');
refetch();
// Navigate to new microDAO
navigate(`/microdao/${microdao.slug}`);
} catch (err) {
console.error('Failed to create microDAO:', err);
setCreateError((err as Error).message);
} finally {
setCreating(false);
}
};
return (
<div className="min-h-screen bg-gray-50">
{/* Header */}
<div className="bg-white border-b border-gray-200">
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-bold text-gray-900">
🏛️ Мої microDAO
</h1>
<p className="text-gray-600 mt-1">
Керуйте вашими спільнотами та організаціями
</p>
</div>
<button
onClick={() => setCreateDialogOpen(true)}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
➕ Створити microDAO
</button>
</div>
</div>
</div>
{/* Content */}
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Loading */}
{loading && (
<div className="text-center py-12">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto mb-4" />
<div className="text-gray-600">Завантаження...</div>
</div>
)}
{/* Error */}
{error && (
<div className="bg-red-50 border border-red-200 rounded-lg p-6 text-center">
<div className="text-red-600 mb-2">❌ Помилка завантаження</div>
<div className="text-sm text-red-500">{error.message}</div>
</div>
)}
{/* Empty */}
{!loading && !error && microdaos.length === 0 && (
<div className="bg-gray-50 border border-gray-200 rounded-lg p-12 text-center">
<div className="text-6xl mb-4">🏛️</div>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
Немає microDAO
</h3>
<p className="text-gray-600 mb-4">
Створіть ваше перше microDAO
</p>
<button
onClick={() => setCreateDialogOpen(true)}
className="px-6 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
>
Створити microDAO
</button>
</div>
)}
{/* List */}
{!loading && microdaos.length > 0 && (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{microdaos.map((dao) => (
<div
key={dao.id}
onClick={() => navigate(`/microdao/${dao.slug}`)}
className="bg-white border border-gray-200 rounded-lg p-6 hover:shadow-lg hover:border-blue-500 transition-all cursor-pointer"
>
<h3 className="text-xl font-semibold text-gray-900 mb-2">
{dao.name}
</h3>
{dao.description && (
<p className="text-sm text-gray-600 mb-4 line-clamp-2">
{dao.description}
</p>
)}
<div className="flex items-center gap-4 text-sm text-gray-500">
<div>
👥 {dao.member_count || 0} учасників
</div>
<div>
🤖 {dao.agent_count || 0} агентів
</div>
</div>
</div>
))}
</div>
)}
</div>
{/* Create Dialog */}
{createDialogOpen && (
<div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
<div className="bg-white rounded-lg shadow-xl max-w-md w-full mx-4">
<div className="flex items-center justify-between p-6 border-b border-gray-200">
<h2 className="text-xl font-bold text-gray-900">
Створити microDAO
</h2>
<button
onClick={() => setCreateDialogOpen(false)}
className="text-gray-400 hover:text-gray-600 text-2xl"
>
×
</button>
</div>
<form onSubmit={handleCreate} className="p-6 space-y-4">
{createError && (
<div className="bg-red-50 border border-red-200 rounded p-3 text-red-700 text-sm">
{createError}
</div>
)}
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Назва *
</label>
<input
type="text"
value={newName}
onChange={(e) => setNewName(e.target.value)}
required
placeholder="DAARION Core"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Slug (URL) *
</label>
<input
type="text"
value={newSlug}
onChange={(e) => setNewSlug(e.target.value.toLowerCase().replace(/[^a-z0-9-]/g, ''))}
required
placeholder="daarion-core"
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-1">
Опис
</label>
<textarea
value={newDescription}
onChange={(e) => setNewDescription(e.target.value)}
rows={3}
placeholder="Короткий опис microDAO..."
className="w-full px-3 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500"
/>
</div>
<div className="flex justify-end gap-3 pt-4">
<button
type="button"
onClick={() => setCreateDialogOpen(false)}
disabled={creating}
className="px-4 py-2 border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-50"
>
Скасувати
</button>
<button
type="submit"
disabled={creating || !newName || !newSlug}
className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-300"
>
{creating ? 'Створення...' : 'Створити'}
</button>
</div>
</form>
</div>
</div>
)}
</div>
);
}

45
src/features/microdao/hooks/useMicrodaos.ts Normal file
View File

@@ -0,0 +1,45 @@
/**
* useMicrodaos Hook
* Fetch list of user's microDAOs
*/
import { useState, useEffect } from 'react';
import { getMicrodaos, type MicrodaoRead } from '@/api/microdao';
interface UseMicrodaosResult {
microdaos: MicrodaoRead[];
loading: boolean;
error: Error | null;
refetch: () => Promise<void>;
}
export function useMicrodaos(): UseMicrodaosResult {
const [microdaos, setMicrodaos] = useState<MicrodaoRead[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<Error | null>(null);
const fetchMicrodaos = async () => {
try {
setLoading(true);
setError(null);
const data = await getMicrodaos();
setMicrodaos(data);
} catch (err) {
console.error('❌ Failed to fetch microDAOs:', err);
setError(err as Error);
} finally {
setLoading(false);
}
};
useEffect(() => {
fetchMicrodaos();
}, []);
return {
microdaos,
loading,
error,
refetch: fetchMicrodaos,
};
}