refactor: restructure for better ai comprehension

src/components/ui/tabs/ContextTab.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import { useMiniApp } from "@neynar/react";
+
+/**
+ * ContextTab component displays the current mini app context in JSON format.
+ * 
+ * This component provides a developer-friendly view of the Farcaster mini app context,
+ * including user information, client details, and other contextual data. It's useful
+ * for debugging and understanding what data is available to the mini app.
+ * 
+ * The context includes:
+ * - User information (FID, username, display name, profile picture)
+ * - Client information (safe area insets, platform details)
+ * - Mini app configuration and state
+ * 
+ * @example
+ * ```tsx
+ * <ContextTab />
+ * ```
+ */
+export function ContextTab() {
+  const { context } = useMiniApp();
+  
+  return (
+    <div className="mx-6">
+      <h2 className="text-lg font-semibold mb-2">Context</h2>
+      <div className="p-4 bg-gray-100 dark:bg-gray-800 rounded-lg">
+        <pre className="font-mono text-xs whitespace-pre-wrap break-words w-full">
+          {JSON.stringify(context, null, 2)}
+        </pre>
+      </div>
+    </div>
+  );
+}