bloby-bot 0.17.2

package/supervisor/chat/src/components/Chat/MessageBubble.tsx

@@ -0,0 +1,226 @@
+import { useState } from 'react';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneDark } from 'react-syntax-highlighter/dist/esm/styles/prism';
+import { Paperclip, Copy, Check, ExternalLink } from 'lucide-react';
+import AudioBubble from './AudioBubble';
+import type { StoredAttachment } from '../../hooks/useChat';
+
+interface Props {
+  role: 'user' | 'assistant';
+  content: string;
+  timestamp?: string;
+  hasAttachments?: boolean;
+  audioData?: string;
+  attachments?: StoredAttachment[];
+  onImageClick?: (images: string[], index: number) => void;
+}
+
+function formatTime(iso: string): string {
+  try {
+    const d = new Date(iso);
+    return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+  } catch {
+    return '';
+  }
+}
+
+/** Convert backtick-wrapped WhatsApp QR URL into a markdown link so ReactMarkdown renders it as <a> */
+function preprocessContent(text: string): string {
+  return text.replace(
+    /`http:\/\/localhost:3000\/api\/channels\/whatsapp\/qr-page`/g,
+    '[pair-whatsapp](http://localhost:3000/api/channels/whatsapp/qr-page)'
+  );
+}
+
+function CopyButton({ text }: { text: string }) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch { /* clipboard not available */ }
+  };
+  return (
+    <button
+      onClick={handleCopy}
+      className="shrink-0 opacity-0 group-hover:opacity-100 transition-opacity p-1 rounded hover:bg-muted-foreground/10 text-muted-foreground/50 hover:text-muted-foreground"
+      title="Copy message"
+    >
+      {copied ? <Check className="h-3.5 w-3.5" /> : <Copy className="h-3.5 w-3.5" />}
+    </button>
+  );
+}
+
+export default function MessageBubble({ role, content, timestamp, hasAttachments, audioData, attachments, onImageClick }: Props) {
+  const isUser = role === 'user';
+  const time = timestamp ? formatTime(timestamp) : '';
+
+  // Separate image and document attachments
+  const imageAtts = attachments?.filter((a) => a.mediaType?.startsWith('image/')) || [];
+  const docAtts = attachments?.filter((a) => !a.mediaType?.startsWith('image/')) || [];
+
+  // Resolve image URLs
+  const imageUrls = imageAtts
+    .filter((a) => a.filePath)
+    .map((a) =>
+      a.filePath.startsWith('data:') ? a.filePath : `/api/files/${a.filePath}`
+    );
+
+  if (isUser) {
+    // Voice message: audio-only, no transcript text
+    if (audioData) {
+      return (
+        <div className="flex flex-col items-end gap-0.5">
+          <div className="group flex items-start gap-1.5 justify-end">
+            <CopyButton text={content} />
+            <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-primary text-primary-foreground">
+              <AudioBubble audioData={audioData} />
+            </div>
+          </div>
+          {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+        </div>
+      );
+    }
+
+    return (
+      <div className="flex flex-col items-end gap-0.5">
+        <div className="group flex items-start gap-1.5 justify-end">
+          <CopyButton text={content} />
+          <div className="max-w-[92%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed whitespace-pre-wrap bg-primary text-primary-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
+            {/* Image thumbnails */}
+            {imageUrls.length > 0 && (
+              <div className="flex gap-1.5 flex-wrap mb-2">
+                {imageUrls.map((url, i) => (
+                  <img
+                    key={i}
+                    src={url}
+                    alt={imageAtts[i]?.name || 'attachment'}
+                    className="w-28 h-28 rounded-lg object-cover cursor-pointer border border-white/10 hover:opacity-80 transition-opacity"
+                    onClick={() => onImageClick?.(imageUrls, i)}
+                  />
+                ))}
+              </div>
+            )}
+            {/* Document attachments */}
+            {docAtts.length > 0 && (
+              <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
+                <Paperclip className="h-3 w-3" />
+                {docAtts.length > 1 && <span className="text-xs">{docAtts.length}</span>}
+              </span>
+            )}
+            {/* Fallback paperclip for legacy messages with no parsed attachments */}
+            {!attachments?.length && hasAttachments && (
+              <span className="inline-flex items-center gap-1 text-primary-foreground/60 mr-1.5">
+                <Paperclip className="h-3 w-3" />
+              </span>
+            )}
+            {content}
+          </div>
+        </div>
+        {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col items-start gap-0.5">
+      <div className="group flex items-start gap-1.5">
+      <div className="min-w-0 rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground prose prose-sm prose-invert max-w-none [&>*:first-child]:mt-0 [&>*:last-child]:mb-0 break-words overflow-hidden" style={{ maxWidth: '92%', overflowWrap: 'anywhere' }}>
+        <ReactMarkdown
+          remarkPlugins={[remarkGfm]}
+          components={{
+            pre({ children }) {
+              return <pre className="overflow-x-auto my-2">{children}</pre>;
+            },
+            code({ className, children, ...props }) {
+              const match = /language-(\w+)/.exec(className || '');
+              const code = String(children).replace(/\n$/, '');
+              if (match) {
+                return (
+                  <SyntaxHighlighter
+                    style={oneDark}
+                    language={match[1]}
+                    PreTag="div"
+                    customStyle={{ margin: '0.5rem 0', borderRadius: '0.5rem', fontSize: '0.8rem', overflowX: 'auto' }}
+                  >
+                    {code}
+                  </SyntaxHighlighter>
+                );
+              }
+              return (
+                <code className="bg-white/10 rounded px-1 py-0.5 text-[0.8rem] break-all" style={{ whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }} {...props}>
+                  {children}
+                </code>
+              );
+            },
+            p({ children }) {
+              return <p className="my-1.5">{children}</p>;
+            },
+            ul({ children }) {
+              return <ul className="my-1.5 pl-4 list-disc">{children}</ul>;
+            },
+            ol({ children }) {
+              return <ol className="my-1.5 pl-4 list-decimal">{children}</ol>;
+            },
+            table({ children }) {
+              return (
+                <div className="overflow-x-auto my-2">
+                  <table className="border-collapse text-xs">{children}</table>
+                </div>
+              );
+            },
+            th({ children }) {
+              return <th className="border border-white/10 px-2 py-1 text-left bg-white/5">{children}</th>;
+            },
+            td({ children }) {
+              return <td className="border border-white/10 px-2 py-1">{children}</td>;
+            },
+            a({ href, children }) {
+              // WhatsApp QR pairing page → styled CTA card
+              if (href?.includes('/api/channels/whatsapp/qr-page')) {
+                return (
+                  <a
+                    href={href}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    className="flex items-center gap-3 my-2 px-3.5 py-2.5 rounded-xl bg-[#25D366]/10 border border-[#25D366]/20 hover:bg-[#25D366]/15 transition-colors no-underline"
+                  >
+                    <div className="flex items-center justify-center w-8 h-8 rounded-lg bg-[#25D366] shrink-0">
+                      <svg viewBox="0 0 24 24" className="w-4 h-4 fill-white">
+                        <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893a11.821 11.821 0 00-3.48-8.413z" />
+                      </svg>
+                    </div>
+                    <div className="flex flex-col min-w-0">
+                      <span className="text-[#25D366] font-medium text-sm">Click here to pair your WhatsApp</span>
+                      <span className="text-muted-foreground text-xs">Opens QR code pairing page</span>
+                    </div>
+                    <ExternalLink className="w-3.5 h-3.5 text-muted-foreground/50 ml-auto shrink-0" />
+                  </a>
+                );
+              }
+              // All other links: styled + open in new tab
+              return (
+                <a
+                  href={href}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-[#3C8FFF] underline decoration-[#3C8FFF]/30 underline-offset-2 hover:decoration-[#3C8FFF] transition-colors"
+                >
+                  {children}
+                </a>
+              );
+            },
+          }}
+        >
+          {preprocessContent(content)}
+        </ReactMarkdown>
+      </div>
+      <CopyButton text={content} />
+      </div>
+      {time && <span className="text-[10px] text-muted-foreground/50 px-1">{time}</span>}
+    </div>
+  );
+}

package/supervisor/chat/src/components/Chat/MessageList.tsx

@@ -0,0 +1,126 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type { ChatMessage, ToolActivity } from '../../hooks/useChat';
+import MessageBubble from './MessageBubble';
+import TypingIndicator from './TypingIndicator';
+import ImageLightbox from './ImageLightbox';
+
+interface Props {
+  messages: ChatMessage[];
+  streaming: boolean;
+  streamBuffer: string;
+  tools: ToolActivity[];
+  hasMore?: boolean;
+  onLoadOlder?: () => void;
+}
+
+export default function MessageList({ messages, streaming, streamBuffer, tools, hasMore, onLoadOlder }: Props) {
+  const bottomRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const isInitialLoad = useRef(true);
+  const [loadingOlder, setLoadingOlder] = useState(false);
+  const [lightbox, setLightbox] = useState<{ images: string[]; index: number } | null>(null);
+
+  const handleImageClick = useCallback((images: string[], index: number) => {
+    setLightbox({ images, index });
+  }, []);
+
+  // Scroll to bottom — instant on initial load, smooth afterwards
+  useEffect(() => {
+    if (!bottomRef.current) return;
+    if (isInitialLoad.current && messages.length > 0) {
+      bottomRef.current.scrollIntoView({ behavior: 'instant' as ScrollBehavior });
+      isInitialLoad.current = false;
+    } else if (!isInitialLoad.current) {
+      bottomRef.current.scrollIntoView({ behavior: 'smooth' });
+    }
+  }, [messages, streamBuffer, tools, streaming]);
+
+  // IntersectionObserver for infinite scroll up
+  useEffect(() => {
+    if (!sentinelRef.current || !onLoadOlder) return;
+    const sentinel = sentinelRef.current;
+
+    const observer = new IntersectionObserver(
+      async (entries) => {
+        if (entries[0].isIntersecting && hasMore && !loadingOlder) {
+          const container = scrollContainerRef.current;
+          if (!container) return;
+
+          // Save scroll position before loading
+          const prevScrollHeight = container.scrollHeight;
+
+          setLoadingOlder(true);
+          await onLoadOlder();
+          setLoadingOlder(false);
+
+          // Restore scroll position after DOM update
+          requestAnimationFrame(() => {
+            const newScrollHeight = container.scrollHeight;
+            container.scrollTop += newScrollHeight - prevScrollHeight;
+          });
+        }
+      },
+      { root: scrollContainerRef.current, threshold: 0.1 },
+    );
+
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [hasMore, loadingOlder, onLoadOlder]);
+
+  // Get the latest running tool name (only the current one)
+  const currentTool = tools.length > 0 ? tools[tools.length - 1] : null;
+  const currentToolName = currentTool?.status === 'running' ? currentTool.name : undefined;
+
+  return (
+    <div ref={scrollContainerRef} className="flex-1 overflow-y-auto overflow-x-hidden p-4 flex flex-col min-h-0">
+      {/* Spacer pushes messages to the bottom when few */}
+      <div className="flex-1" />
+
+      {/* Sentinel for infinite scroll + loading spinner */}
+      {hasMore && (
+        <div ref={sentinelRef} className="flex justify-center py-2">
+          {loadingOlder && (
+            <div className="w-5 h-5 border-2 border-muted-foreground/20 border-t-muted-foreground/60 rounded-full animate-spin" />
+          )}
+        </div>
+      )}
+
+      {messages.length === 0 && !streaming && (
+        <div className="flex items-center justify-center py-8 text-muted-foreground text-sm">
+          Start a conversation
+        </div>
+      )}
+
+      <div className="space-y-3">
+        {messages.map((msg) => (
+          <MessageBubble
+            key={msg.id}
+            role={msg.role}
+            content={msg.content}
+            timestamp={msg.timestamp}
+            hasAttachments={msg.hasAttachments}
+            audioData={msg.audioData}
+            attachments={msg.attachments}
+            onImageClick={handleImageClick}
+          />
+        ))}
+
+        {/* Typing / streaming bubble — shown as soon as agent starts */}
+        {streaming && (
+          <TypingIndicator text={streamBuffer} toolName={currentToolName} />
+        )}
+      </div>
+      <div ref={bottomRef} />
+
+      {lightbox && (
+        <ImageLightbox
+          images={lightbox.images}
+          index={lightbox.index}
+          onClose={() => setLightbox(null)}
+          onNavigate={(i) => setLightbox((prev) => prev ? { ...prev, index: i } : null)}
+        />
+      )}
+    </div>
+  );
+}

package/supervisor/chat/src/components/Chat/TypingIndicator.tsx

@@ -0,0 +1,47 @@
+interface Props {
+  text: string;
+  toolName?: string;
+}
+
+/** Friendly label for SDK tool names */
+function toolLabel(name: string): string {
+  const labels: Record<string, string> = {
+    Read: 'Reading file',
+    Write: 'Writing file',
+    Edit: 'Editing file',
+    Bash: 'Running command',
+    Grep: 'Searching code',
+    Glob: 'Finding files',
+    Task: 'Running task',
+    WebFetch: 'Fetching URL',
+    WebSearch: 'Searching web',
+  };
+  return labels[name] || `Using ${name}`;
+}
+
+export default function TypingIndicator({ text, toolName }: Props) {
+  return (
+    <div className="flex justify-start">
+      <div className="max-w-[75%] rounded-2xl px-4 py-2.5 text-sm leading-relaxed bg-muted text-foreground break-words overflow-hidden" style={{ overflowWrap: 'anywhere' }}>
+        {text ? (
+          <>
+            <span className="whitespace-pre-wrap">{text}</span>
+            <span className="inline-block w-2 h-4 ml-0.5 bg-muted-foreground animate-pulse" />
+          </>
+        ) : (
+          <span className="inline-flex items-center gap-1 h-5">
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '0ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '150ms' }} />
+            <span className="w-1.5 h-1.5 rounded-full bg-muted-foreground/60 animate-bounce" style={{ animationDelay: '300ms' }} />
+          </span>
+        )}
+        {toolName && (
+          <div className="flex items-center gap-1.5 mt-1 text-xs text-muted-foreground">
+            <div className="w-2.5 h-2.5 border-[1.5px] border-muted-foreground/30 border-t-primary rounded-full animate-spin" />
+            <span>{toolLabel(toolName)}...</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/supervisor/chat/src/components/LoginScreen.tsx

@@ -0,0 +1,280 @@
+import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
+import { Lock, LoaderCircle, ArrowRight, ArrowLeft, Shield, Check } from 'lucide-react';
+import { motion, AnimatePresence } from 'framer-motion';
+
+const LOGIN_STORAGE_KEY = 'bloby_login_totp';
+
+interface Props {
+  onLogin: (token: string) => void;
+  totpEnabled?: boolean;
+}
+
+export default function LoginScreen({ onLogin, totpEnabled }: Props) {
+  const [password, setPassword] = useState('');
+  const [error, setError] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  // TOTP state
+  const [phase, setPhase] = useState<'password' | 'totp'>('password');
+  const [totpCode, setTotpCode] = useState('');
+  const [pendingToken, setPendingToken] = useState('');
+  const [trustDevice, setTrustDevice] = useState(true);
+  const [useRecovery, setUseRecovery] = useState(false);
+  const totpInputRef = useRef<HTMLInputElement>(null);
+
+  // Restore TOTP phase after page reload (mobile: OS suspends PWA on app-switch)
+  useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem(LOGIN_STORAGE_KEY);
+      if (!raw) return;
+      const saved = JSON.parse(raw);
+      if (saved.pendingToken && saved.expiresAt > Date.now()) {
+        setPendingToken(saved.pendingToken);
+        setPhase('totp');
+      } else {
+        sessionStorage.removeItem(LOGIN_STORAGE_KEY);
+      }
+    } catch {}
+  }, []);
+
+  // Auto-focus TOTP input when switching to TOTP phase
+  useEffect(() => {
+    if (phase === 'totp') {
+      setTimeout(() => totpInputRef.current?.focus(), 100);
+    }
+  }, [phase]);
+
+  function saveLoginState(token: string) {
+    try {
+      // Pending token has 5min server expiry — save with matching client expiry
+      sessionStorage.setItem(LOGIN_STORAGE_KEY, JSON.stringify({
+        pendingToken: token,
+        expiresAt: Date.now() + 4.5 * 60 * 1000,
+      }));
+    } catch {}
+  }
+
+  function clearLoginState() {
+    try { sessionStorage.removeItem(LOGIN_STORAGE_KEY); } catch {}
+  }
+
+  const handleSubmit = async () => {
+    if (!password.trim() || loading) return;
+    setLoading(true);
+    setError('');
+
+    try {
+      const credentials = btoa(`admin:${password}`);
+      const res = await fetch('/api/portal/login', {
+        headers: { 'Authorization': `Basic ${credentials}` },
+        credentials: 'include',
+      });
+      const data = await res.json();
+
+      if (res.ok && data.token) {
+        clearLoginState();
+        onLogin(data.token);
+      } else if (res.ok && data.requiresTOTP) {
+        setPendingToken(data.pendingToken);
+        saveLoginState(data.pendingToken);
+        setPhase('totp');
+        setError('');
+      } else {
+        setError(data.error || 'Invalid password');
+      }
+    } catch {
+      setError('Could not reach server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleTotpSubmit = async () => {
+    if (!totpCode.trim() || loading) return;
+    setLoading(true);
+    setError('');
+
+    try {
+      const res = await fetch(
+        `/api/portal/login/totp?pending=${encodeURIComponent(pendingToken)}&code=${encodeURIComponent(totpCode)}&trust=${trustDevice ? '1' : '0'}`,
+        { credentials: 'include' },
+      );
+      const data = await res.json();
+
+      if (res.ok && data.token) {
+        clearLoginState();
+        onLogin(data.token);
+      } else {
+        setError(data.error || 'Invalid code');
+      }
+    } catch {
+      setError('Could not reach server');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Enter') {
+      if (phase === 'password') handleSubmit();
+      else handleTotpSubmit();
+    }
+  };
+
+  const handleBackToPassword = () => {
+    setPhase('password');
+    setError('');
+    setTotpCode('');
+    setUseRecovery(false);
+    clearLoginState();
+  };
+
+  const inputCls = 'w-full bg-white/[0.05] border border-white/[0.08] text-white rounded-xl px-4 py-3 text-base outline-none input-glow placeholder:text-white/20 transition-all';
+
+  return (
+    <div className="flex flex-col items-center justify-center h-dvh px-6">
+      <div className="w-full max-w-[320px] flex flex-col items-center">
+        <AnimatePresence mode="wait">
+          {phase === 'password' ? (
+            <motion.div
+              key="password"
+              initial={{ opacity: 0, x: -20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: -20 }}
+              transition={{ duration: 0.2 }}
+              className="w-full flex flex-col items-center"
+            >
+              <div className="w-14 h-14 rounded-2xl bg-white/[0.04] border border-white/[0.08] flex items-center justify-center mb-5">
+                <Lock className="h-6 w-6 text-white/40" />
+              </div>
+
+              <h1 className="text-xl font-bold text-white tracking-tight mb-1">
+                Welcome back
+              </h1>
+              <p className="text-white/40 text-[13px] mb-6">
+                Enter your password to continue.
+              </p>
+
+              {error && (
+                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
+                  <p className="text-red-400/90 text-[12px]">{error}</p>
+                </div>
+              )}
+
+              <input
+                type="password"
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                onKeyDown={handleKeyDown}
+                placeholder="Password"
+                autoFocus
+                autoComplete="current-password"
+                className={inputCls}
+              />
+
+              <button
+                onClick={handleSubmit}
+                disabled={!password.trim() || loading}
+                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+              >
+                {loading ? (
+                  <><LoaderCircle className="h-4 w-4 animate-spin" />Signing in...</>
+                ) : (
+                  <>Sign In<ArrowRight className="h-4 w-4" /></>
+                )}
+              </button>
+            </motion.div>
+          ) : (
+            <motion.div
+              key="totp"
+              initial={{ opacity: 0, x: 20 }}
+              animate={{ opacity: 1, x: 0 }}
+              exit={{ opacity: 0, x: 20 }}
+              transition={{ duration: 0.2 }}
+              className="w-full flex flex-col items-center"
+            >
+              <div className="w-14 h-14 rounded-2xl bg-[#AF27E3]/10 border border-[#AF27E3]/20 flex items-center justify-center mb-5">
+                <Shield className="h-6 w-6 text-[#AF27E3]" />
+              </div>
+
+              <h1 className="text-xl font-bold text-white tracking-tight mb-1">
+                {useRecovery ? 'Recovery code' : 'Enter your 2FA code'}
+              </h1>
+              <p className="text-white/40 text-[13px] mb-6">
+                {useRecovery
+                  ? 'Enter one of your recovery codes.'
+                  : 'Open your authenticator app and enter the 6-digit code.'}
+              </p>
+
+              {error && (
+                <div className="w-full bg-red-500/8 border border-red-500/15 rounded-xl px-4 py-2.5 mb-4">
+                  <p className="text-red-400/90 text-[12px]">{error}</p>
+                </div>
+              )}
+
+              <input
+                ref={totpInputRef}
+                type="text"
+                inputMode={useRecovery ? 'text' : 'numeric'}
+                autoComplete="one-time-code"
+                maxLength={useRecovery ? 20 : 6}
+                value={totpCode}
+                onChange={(e) => {
+                  setTotpCode(useRecovery ? e.target.value : e.target.value.replace(/\D/g, ''));
+                  setError('');
+                }}
+                onKeyDown={handleKeyDown}
+                placeholder={useRecovery ? 'Recovery code' : '000000'}
+                autoFocus
+                className={inputCls + (useRecovery ? '' : ' tracking-[0.3em] text-center font-mono')}
+              />
+
+              {/* Trust device checkbox */}
+              <label className="flex items-center gap-2.5 mt-4 w-full cursor-pointer">
+                <div
+                  onClick={() => setTrustDevice(v => !v)}
+                  className={`w-5 h-5 rounded-md border flex items-center justify-center transition-all ${
+                    trustDevice
+                      ? 'bg-[#AF27E3] border-[#AF27E3]'
+                      : 'bg-white/[0.04] border-white/[0.12]'
+                  }`}
+                >
+                  {trustDevice && <Check className="h-3.5 w-3.5 text-white" />}
+                </div>
+                <span className="text-[13px] text-white/50">Trust this device for 90 days</span>
+              </label>
+
+              <button
+                onClick={handleTotpSubmit}
+                disabled={!totpCode.trim() || loading}
+                className="w-full mt-4 py-3 bg-gradient-brand hover:opacity-90 text-white text-[14px] font-semibold rounded-full transition-colors flex items-center justify-center gap-2 disabled:opacity-40"
+              >
+                {loading ? (
+                  <><LoaderCircle className="h-4 w-4 animate-spin" />Verifying...</>
+                ) : (
+                  <>Verify<ArrowRight className="h-4 w-4" /></>
+                )}
+              </button>
+
+              <div className="flex items-center gap-4 mt-4">
+                <button
+                  onClick={handleBackToPassword}
+                  className="text-[12px] text-white/30 hover:text-white/50 flex items-center gap-1 transition-colors"
+                >
+                  <ArrowLeft className="h-3 w-3" />
+                  Back
+                </button>
+                <button
+                  onClick={() => { setUseRecovery(v => !v); setTotpCode(''); setError(''); }}
+                  className="text-[12px] text-white/30 hover:text-white/50 transition-colors"
+                >
+                  {useRecovery ? 'Use authenticator code' : 'Use a recovery code'}
+                </button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </div>
+    </div>
+  );
+}