Merge pull request #1 from rubyad/feature/mobile-phone-verification

fix: login verification + db connection health + migration docs

Author: rubyad

assets/js/app.js

@@ -38,6 +38,7 @@ import { TwitterWidgets } from "./twitter_widgets.js";
 import { HomeHooks, ModalHooks, DropdownHooks, SearchHooks, ThirdwebLogin, ThirdwebWallet } from "./home_hooks.js";
 import { TimeTracker } from "./time_tracker.js";
 import { EngagementTracker } from "./engagement_tracker.js";
+import { PhoneNumberFormatter } from "./phone_number_formatter.js";
 import { BannerUpload } from "./banner_upload.js";
 import { BannerDrag } from "./banner_drag.js";
 import { TextBlockDrag, TextBlockDragResize, ButtonDrag, AdminControlsDrag } from "./text_block_drag.js";
@@ -312,7 +313,7 @@ const liveSocket = new LiveSocket("/live", Socket, {
       pending_claims: pendingClaims.length > 0 ? pendingClaims : null
     };
   },
-  hooks: { TipTapEditor, FeaturedImageUpload, HubLogoUpload, HubLogoFormUpload, TwitterWidgets, HomeHooks, ModalHooks, DropdownHooks, SearchHooks, ThirdwebLogin, ThirdwebWallet, TagInput, Autocomplete, CopyToClipboard, ClaimCleanup, InfiniteScroll, TimeTracker, EngagementTracker, BannerUpload, BannerDrag, TextBlockDrag, TextBlockDragResize, ButtonDrag, AdminControlsDrag, ProductImageUpload, TokenInput, ProductDescriptionEditor, ArtistImageUpload, CoinFlip, BuxBoosterOnchain, DepositBuxInput, VideoWatchTracker, FingerprintHook },
+  hooks: { TipTapEditor, FeaturedImageUpload, HubLogoUpload, HubLogoFormUpload, TwitterWidgets, HomeHooks, ModalHooks, DropdownHooks, SearchHooks, ThirdwebLogin, ThirdwebWallet, TagInput, Autocomplete, CopyToClipboard, ClaimCleanup, InfiniteScroll, TimeTracker, EngagementTracker, PhoneNumberFormatter, BannerUpload, BannerDrag, TextBlockDrag, TextBlockDragResize, ButtonDrag, AdminControlsDrag, ProductImageUpload, TokenInput, ProductDescriptionEditor, ArtistImageUpload, CoinFlip, BuxBoosterOnchain, DepositBuxInput, VideoWatchTracker, FingerprintHook },
 });
 
 // connect if there are any LiveViews on the page

assets/js/fingerprint_hook.js

@@ -4,6 +4,9 @@ export const FingerprintHook = {
   async mounted() {
     console.log('FingerprintHook mounted');
 
+    // Store this hook instance globally so ThirdwebLogin can access it
+    window.FingerprintHookInstance = this;
+
     // Check if we already have a fingerprint in localStorage from a previous session
     const cachedFingerprint = localStorage.getItem('fp_visitor_id');
     const cachedConfidence = localStorage.getItem('fp_confidence');

assets/js/phone_number_formatter.js

@@ -0,0 +1,57 @@
+// Real-time phone number formatting as user types
+
+export const PhoneNumberFormatter = {
+  mounted() {
+    this.input = this.el;
+
+    // Add input listener for formatting
+    this.input.addEventListener('input', (e) => {
+      this.formatPhoneNumber(e);
+    });
+
+    // Add paste listener
+    this.input.addEventListener('paste', (e) => {
+      setTimeout(() => this.formatPhoneNumber(e), 10);
+    });
+  },
+
+  formatPhoneNumber(e) {
+    let value = this.input.value;
+
+    // Remove all non-digit characters except +
+    let cleaned = value.replace(/[^\d+]/g, '');
+
+    // If starts with +, preserve it and format intelligently
+    if (cleaned.startsWith('+')) {
+      // Just add space after country code if user is typing
+      // Keep it simple - server will validate
+      return;
+    }
+
+    // If starts with 1 and has more digits, format as US: +1 (XXX) XXX-XXXX
+    if (cleaned.startsWith('1') && cleaned.length > 1) {
+      let digits = cleaned.substring(1); // Remove the leading 1
+      let formatted = '+1';
+
+      if (digits.length > 6) {
+        formatted = `+1 (${digits.slice(0, 3)}) ${digits.slice(3, 6)}-${digits.slice(6, 10)}`;
+      } else if (digits.length > 3) {
+        formatted = `+1 (${digits.slice(0, 3)}) ${digits.slice(3)}`;
+      } else if (digits.length > 0) {
+        formatted = `+1 ${digits}`;
+      }
+
+      this.input.value = formatted;
+      return;
+    }
+
+    // For other numbers starting with digits (not 1), add + and space
+    if (cleaned.length > 0) {
+      this.input.value = '+' + cleaned;
+    }
+  },
+
+  destroyed() {
+    // Cleanup if needed
+  }
+};

claude.md

@@ -2300,3 +2300,43 @@ The `ratePerSecond` is stored in wei (e.g., `1.062454e18` for Aurora). Multiplyi
 - Updated top box links to use this new function
 
 **Documentation**: See [high-rollers-nfts/docs/nft_revenues.md](high-rollers-nfts/docs/nft_revenues.md) for complete implementation plan.
+
+---
+
+## Known Issues
+
+### Claude API Error: "tool_use ids must be unique"
+
+**Error**: When using Read or Grep tools, the API returns `{"type":"error","error":{"type":"invalid_request_error","message":"tool_use ids must be unique"}}`
+
+**When It Happens**:
+- Even at the start of fresh conversations
+- Across different Claude models (Sonnet, Opus)
+- Consistently reproducible when trying to read files directly
+- Appears to be a platform-level issue with tool ID generation
+
+**Workaround**: Use the Task tool with general-purpose agent to read files instead of direct Read/Grep calls:
+```
+Instead of:
+  Read file directly → API error
+
+Use:
+  Task tool → spawns separate agent context → agent uses Read/Grep → succeeds
+```
+
+**Why It Works**: Task agents run in a separate context with their own tool ID space, avoiding ID collisions that cause the error.
+
+**Recommendation**:
+- When encountering "tool_use ids must be unique" error, switch to using Task tool for file reading operations
+- Task tool is reliable for reading, grepping, and analyzing files
+- This is a temporary workaround until the underlying API issue is resolved
+- Do NOT waste time debugging tool call syntax - it's not a code issue, it's a platform issue
+
+**Example**:
+```
+User: "Read the config file"
+
+Instead of calling Read tool directly (which may error):
+  Use Task tool: "Read /path/to/config.exs and summarize the configuration"
+  The spawned agent will successfully read and return the contents
+```

config/runtime.exs

@@ -46,7 +46,10 @@ config :blockster_v2,
       if(config_env() == :prod,
         do: "https://blockster-v2.fly.dev",
         else: "http://localhost:4000"
-      )
+      ),
+  twilio_account_sid: System.get_env("TWILIO_ACCOUNT_SID"),
+  twilio_auth_token: System.get_env("TWILIO_AUTH_TOKEN"),
+  twilio_verify_service_sid: System.get_env("TWILIO_VERIFY_SERVICE_SID")
 
 # Mnesia configuration
 # In production, Mnesia data is stored in /data/mnesia/blockster (Fly.io persistent volume)
@@ -98,6 +101,13 @@ if config_env() == :prod do
     # ssl: true,
     url: database_url,
     pool_size: String.to_integer(System.get_env("POOL_SIZE") || "10"),
+    # Connection pool health settings - help detect and recover from connection issues
+    queue_target: 50,
+    queue_interval: 1000,
+    # Timeout settings to detect dead connections faster
+    timeout: 15000,
+    connect_timeout: 15000,
+    handshake_timeout: 15000,
     # For machines with several cores, consider starting multiple pools of `pool_size`
     # pool_count: 4,
     socket_options: maybe_ipv6

config/test.exs

@@ -38,3 +38,6 @@ config :phoenix_live_view,
 
 # Disable GenServers that could interfere with tests
 config :blockster_v2, :start_genservers, false
+
+# Use mock Twilio client in tests
+config :blockster_v2, :twilio_client, TwilioClientMock