feat: Citizens Layer + Citizen Interact Layer + CityChatWidget

apps/web/src/components/agent-dashboard/AgentCityCard.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import Link from 'next/link';
+import { CityPresence } from '@/lib/agent-dashboard';
+
+interface AgentCityCardProps {
+  cityPresence?: CityPresence;
+}
+
+export function AgentCityCard({ cityPresence }: AgentCityCardProps) {
+  if (!cityPresence) {
+    return (
+      <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
+        <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+          <span>🏛️</span> City Presence
+        </h3>
+        <p className="text-white/50">No city presence configured</p>
+      </div>
+    );
+  }
+  
+  return (
+    <div className="bg-white/5 backdrop-blur-md rounded-2xl border border-white/10 p-6">
+      <h3 className="text-lg font-semibold text-white mb-4 flex items-center gap-2">
+        <span>🏛️</span> City Presence
+      </h3>
+      
+      <div className="space-y-3">
+        {/* District */}
+        {cityPresence.district && (
+          <div className="flex items-center gap-2">
+            <span className="text-white/50 text-sm">District:</span>
+            <span className="px-2 py-1 bg-amber-500/20 text-amber-400 rounded-md text-sm">
+              {cityPresence.district}
+            </span>
+          </div>
+        )}
+        
+        {/* Primary Room */}
+        {cityPresence.primary_room_slug && (
+          <div className="flex items-center gap-2">
+            <span className="text-white/50 text-sm">Primary:</span>
+            <Link 
+              href={`/city/${cityPresence.primary_room_slug}`}
+              className="px-2 py-1 bg-cyan-500/20 text-cyan-400 rounded-md text-sm hover:bg-cyan-500/30 transition-colors"
+            >
+              📍 {cityPresence.primary_room_slug}
+            </Link>
+          </div>
+        )}
+        
+        {/* All Rooms */}
+        {cityPresence.rooms && cityPresence.rooms.length > 0 && (
+          <div>
+            <p className="text-white/50 text-xs uppercase tracking-wider mb-2">Rooms</p>
+            <div className="space-y-1">
+              {cityPresence.rooms.map(room => (
+                <Link 
+                  key={room.room_id}
+                  href={`/city/${room.slug}`}
+                  className="flex items-center justify-between p-2 bg-white/5 rounded-lg hover:bg-white/10 transition-colors"
+                >
+                  <span className="text-white text-sm">{room.name}</span>
+                  <span className="text-white/30 text-xs">{room.role}</span>
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+