feat: rebrand CryptoLogin to CryptID

- Rename CryptoLogin component to CryptID
- Update all imports and usages across the codebase
- Display 'CryptID: username' in user dropdown menu
- Update UI text to reference CryptID branding
- Update Profile component header to show CryptID
- Update component comments and documentation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

src/App.tsx

@@ -31,7 +31,7 @@ import NotificationsDisplay from './components/NotificationsDisplay';
 import { ErrorBoundary } from './components/ErrorBoundary';
 
 // Import auth components
-import CryptoLogin from './components/auth/CryptoLogin';
+import CryptID from './components/auth/CryptID';
 import CryptoDebug from './components/auth/CryptoDebug';
 
 // Initialize Daily.co call object with error handling
@@ -89,7 +89,7 @@ const AppWithProviders = () => {
 
     return (
       <div className="auth-page">
-        <CryptoLogin onSuccess={() => window.location.href = '/'} />
+        <CryptID onSuccess={() => window.location.href = '/'} />
       </div>
     );
   };

src/components/auth/CryptID.tsx

@@ -4,15 +4,15 @@ import { useAuth } from '../../context/AuthContext';
 import { useNotifications } from '../../context/NotificationContext';
 import { checkBrowserSupport, isSecureContext } from '../../lib/utils/browser';
 
-interface CryptoLoginProps {
+interface CryptIDProps {
   onSuccess?: () => void;
   onCancel?: () => void;
 }
 
 /**
- * WebCryptoAPI-based authentication component
+ * CryptID - WebCryptoAPI-based authentication component
  */
-const CryptoLogin: React.FC<CryptoLoginProps> = ({ onSuccess, onCancel }) => {
+const CryptID: React.FC<CryptIDProps> = ({ onSuccess, onCancel }) => {
   const [username, setUsername] = useState('');
   const [isRegistering, setIsRegistering] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -178,7 +178,7 @@ const CryptoLogin: React.FC<CryptoLoginProps> = ({ onSuccess, onCancel }) => {
 
   return (
     <div className="crypto-login-container">
-      <h2>{isRegistering ? 'Create Cryptographic Account' : 'Cryptographic Sign In'}</h2>
+      <h2>{isRegistering ? 'Create CryptID Account' : 'CryptID Sign In'}</h2>
       
       {/* Show existing users if available */}
       {existingUsers.length > 0 && !isRegistering && (
@@ -206,11 +206,11 @@ const CryptoLogin: React.FC<CryptoLoginProps> = ({ onSuccess, onCancel }) => {
       
       <div className="crypto-info">
         <p>
-          {isRegistering 
-            ? 'Create a new account using WebCryptoAPI for secure authentication.'
-            : existingUsers.length > 0 
+          {isRegistering
+            ? 'Create a new CryptID account using WebCryptoAPI for secure authentication.'
+            : existingUsers.length > 0
               ? 'Select an account above or enter a different username to sign in.'
-              : 'Sign in using your cryptographic credentials.'
+              : 'Sign in using your CryptID credentials.'
           }
         </p>
         <div className="crypto-features">
@@ -276,4 +276,4 @@ const CryptoLogin: React.FC<CryptoLoginProps> = ({ onSuccess, onCancel }) => {
   );
 };
 
-export default CryptoLogin; 
+export default CryptID; 

src/components/auth/CryptoDebug.tsx

@@ -145,7 +145,7 @@ const CryptoDebug: React.FC = () => {
       const storedUsers = JSON.parse(localStorage.getItem('registeredUsers') || '[]');
       addResult(`All registered users: ${JSON.stringify(storedUsers)}`);
       
-      // Filter for users with valid keys (same logic as CryptoLogin)
+      // Filter for users with valid keys (same logic as CryptID)
       const validUsers = storedUsers.filter((user: string) => {
         const publicKey = localStorage.getItem(`${user}_publicKey`);
         if (!publicKey) return false;

src/components/auth/LoginButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useAuth } from '../../context/AuthContext';
 import { useNotifications } from '../../context/NotificationContext';
-import CryptoLogin from './CryptoLogin';
+import CryptID from './CryptID';
 
 interface LoginButtonProps {
   className?: string;
@@ -42,7 +42,7 @@ const LoginButton: React.FC<LoginButtonProps> = ({ className = '' }) => {
       {showLogin && (
         <div className="login-overlay">
           <div className="login-modal">
-            <CryptoLogin 
+            <CryptID
               onSuccess={handleLoginSuccess}
               onCancel={handleLoginCancel}
             />

src/components/auth/Profile.tsx

@@ -63,7 +63,7 @@ export const Profile: React.FC<ProfileProps> = ({ onLogout, onOpenVaultBrowser }
   return (
     <div className="profile-container">
       <div className="profile-header">
-        <h3>Welcome, {session.username}!</h3>
+        <h3>CryptID: {session.username}</h3>
       </div>
       
       <div className="profile-settings">

src/routes/Auth.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import CryptoLogin from '../components/auth/CryptoLogin';
+import CryptID from '../components/auth/CryptID';
 import { useAuth } from '../context/AuthContext';
 
 export const Auth: React.FC = () => {
@@ -37,7 +37,7 @@ export const Auth: React.FC = () => {
 
   return (
     <div className="auth-page">
-      <CryptoLogin onSuccess={() => navigate('/')} />
+      <CryptID onSuccess={() => navigate('/')} />
     </div>
   );
 };

src/ui/CustomToolbar.tsx

@@ -583,7 +583,7 @@ export function CustomToolbar() {
               <span style={{ fontSize: "12px" }}>
                 {hasApiKey ? "🔑" : "❌"}
               </span>
-              <span>{session.username}</span>
+              <span>CryptID: {session.username}</span>
             </button>
           
             {showProfilePopup && (
@@ -602,7 +602,7 @@ export function CustomToolbar() {
                 }}
               >
                 <div style={{ marginBottom: "12px", fontWeight: "bold" }}>
-                  Hello, {session.username}!
+                  CryptID: {session.username}
                 </div>
                 
                 {/* API Key Status */}
@@ -1044,6 +1044,14 @@ export function CustomToolbar() {
             isSelected={tools["Holon"].id === editor.getCurrentToolId()}
           />
         )}
+        {tools["ImageGen"] && (
+          <TldrawUiMenuItem
+            {...tools["ImageGen"]}
+            icon="image"
+            label="Image Generation"
+            isSelected={tools["ImageGen"].id === editor.getCurrentToolId()}
+          />
+        )}
         {/* Share Location tool removed for now */}
         {/* Refresh All ObsNotes Button */}
         {(() => {