feat(analytics): map base canvas container and localized recent gists feed

Frontend/src/components/analytics/MapBaseComponent.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+export interface MapBaseProps {
+  latitude?: number;
+  longitude?: number;
+  zoom?: number;
+  children?: React.ReactNode;
+}
+
+export const MapBaseComponent: React.FC<MapBaseProps> = ({
+  latitude = 0,
+  longitude = 0,
+  zoom = 12,
+  children,
+}) => {
+  return (
+    <div className="relative w-full h-80 bg-gray-100 dark:bg-gray-850 border border-gray-200 dark:border-gray-800 rounded-lg overflow-hidden flex flex-col items-center justify-center">
+      <div className="absolute top-2 left-2 bg-white/90 dark:bg-gray-900/90 backdrop-blur px-2 py-1 rounded text-[10px] font-mono border border-gray-200 dark:border-gray-700 z-10">
+        Lat: {latitude.toFixed(4)} | Lng: {longitude.toFixed(4)} | Zoom: {zoom}
+      </div>
+      <div className="w-full h-full flex items-center justify-center text-gray-400 text-xs">
+        [Interactive Spatial Map Canvas Viewport]
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default MapBaseComponent;

Frontend/src/components/analytics/RecentGistsFeed.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+export interface FeedGistItem {
+  id: string;
+  snippet: string;
+  timestamp: string;
+}
+
+export interface RecentGistsFeedProps {
+  items?: FeedGistItem[];
+}
+
+export const RecentGistsFeed: React.FC<RecentGistsFeedProps> = ({
+  items = [],
+}) => {
+  return (
+    <div className="p-4 bg-white dark:bg-gray-900 rounded-lg border border-gray-200 dark:border-gray-800">
+      <h4 className="text-sm font-semibold mb-3 text-gray-900 dark:text-gray-100">
+        Recent Gists in Selected Area
+      </h4>
+      <div className="space-y-2 max-h-48 overflow-y-auto">
+        {items.length === 0 ? (
+          <p className="text-xs text-gray-400">No recent gists found in this bounding box.</p>
+        ) : (
+          items.map(item => (
+            <div key={item.id} className="p-2 bg-gray-50 dark:bg-gray-800 rounded text-xs border border-gray-100 dark:border-gray-750">
+              <p className="text-gray-800 dark:text-gray-200 font-mono">{item.snippet}</p>
+              <span className="text-[10px] text-gray-400">{item.timestamp}</span>
+            </div>
+          ))
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default RecentGistsFeed;