feat: Add presence heartbeat for Matrix online status

- 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

src/components/navigation/NavigationBreadcrumbs.tsx

@@ -0,0 +1,76 @@
+/**
+ * NavigationBreadcrumbs Component
+ * 
+ * Навігація між шарами: Space → City → DAO → Agent
+ */
+
+import { Link, useLocation } from 'react-router-dom';
+import { ChevronRight } from 'lucide-react';
+
+interface NavigationLevel {
+  label: string;
+  path: string;
+  icon?: string;
+}
+
+export function NavigationBreadcrumbs() {
+  const location = useLocation();
+
+  // Визначити поточний рівень навігації
+  const levels: NavigationLevel[] = [];
+
+  if (location.pathname.startsWith('/space')) {
+    levels.push({ label: 'Space', path: '/space', icon: '🌌' });
+  }
+
+  if (location.pathname.startsWith('/city') || location.pathname.startsWith('/space')) {
+    if (!location.pathname.startsWith('/space')) {
+      levels.push({ label: 'City', path: '/city-v2', icon: '🏙️' });
+    }
+  }
+
+  if (location.pathname.startsWith('/microdao/')) {
+    const parts = location.pathname.split('/');
+    const daoId = parts[2];
+    levels.push(
+      { label: 'City', path: '/city-v2', icon: '🏙️' },
+      { label: daoId, path: `/microdao/${daoId}`, icon: '🏛️' }
+    );
+  }
+
+  if (location.pathname.startsWith('/agent/')) {
+    const parts = location.pathname.split('/');
+    const agentId = parts[2];
+    levels.push(
+      { label: 'City', path: '/city-v2', icon: '🏙️' },
+      { label: agentId, path: `/agent/${agentId}`, icon: '🤖' }
+    );
+  }
+
+  if (levels.length === 0) return null;
+
+  return (
+    <div className="flex items-center gap-2 px-4 py-2 bg-slate-900/50 border-b border-white/10">
+      {levels.map((level, index) => (
+        <div key={level.path} className="flex items-center gap-2">
+          {index > 0 && (
+            <ChevronRight className="w-4 h-4 text-gray-500" />
+          )}
+          <Link
+            to={level.path}
+            className="flex items-center gap-2 px-3 py-1.5 rounded-lg hover:bg-white/10 transition-colors"
+          >
+            {level.icon && <span className="text-lg">{level.icon}</span>}
+            <span className="text-sm font-medium text-white">
+              {level.label}
+            </span>
+          </Link>
+        </div>
+      ))}
+    </div>
+  );
+}
+
+
+
+