8b:I[903690,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"ExplicitChatIdProvider"] 8c:I[838238,["/chat-static/_next/static/immutable/chunks/19n90nb5xxg2t.js","/chat-static/_next/static/immutable/chunks/29ydngev9m3fy.js","/chat-static/_next/static/immutable/chunks/0aicokz-_c6hw.js","/chat-static/_next/static/immutable/chunks/3_-w_ojx3ellg.js","/chat-static/_next/static/immutable/chunks/02d62qecapvyp.js","/chat-static/_next/static/immutable/chunks/06l8mr_zo_pdk.js","/chat-static/_next/static/immutable/chunks/3andy-ypw7v3e.js","/chat-static/_next/static/immutable/chunks/00hu8fdgh1j4v.js","/chat-static/_next/static/immutable/chunks/1k4mzxl_vkpeo.js","/chat-static/_next/static/immutable/chunks/14j4bgae4zayv.js","/chat-static/_next/static/immutable/chunks/05ziczzmpg4l8.js","/chat-static/_next/static/immutable/chunks/2x3mu3fgb5m94.js","/chat-static/_next/static/immutable/chunks/1ca1eagukd03f.js","/chat-static/_next/static/immutable/chunks/22oy-kw0t_wik.js","/chat-static/_next/static/immutable/chunks/3_y066xfe1cmo.js","/chat-static/_next/static/immutable/chunks/0ya0e_15z9yqp.js","/chat-static/_next/static/immutable/chunks/0vmwm1j0c62ij.js","/chat-static/_next/static/immutable/chunks/22n9earcnx5_-.js","/chat-static/_next/static/immutable/chunks/19iyd8wey_a5u.js","/chat-static/_next/static/immutable/chunks/3lht6quipswa6.js","/chat-static/_next/static/immutable/chunks/1te_-knuy9ss-.js","/chat-static/_next/static/immutable/chunks/0kjwkfpw9virb.js","/chat-static/_next/static/immutable/chunks/120lp9kxd910m.js","/chat-static/_next/static/immutable/chunks/15j2l9ysttyad.js","/chat-static/_next/static/immutable/chunks/3i0ofkmfv-4g2.js","/chat-static/_next/static/immutable/chunks/3w1zcr9c32026.js","/chat-static/_next/static/immutable/chunks/1o3uedpb5nwwe.js","/chat-static/_next/static/immutable/chunks/0spguaj-i7-94.js","/chat-static/_next/static/immutable/chunks/3p3trwcegfkeh.js","/chat-static/_next/static/immutable/chunks/1fpx_rz9_3g_2.js","/chat-static/_next/static/immutable/chunks/2up2gjdyg5h_y.js","/chat-static/_next/static/immutable/chunks/2wjyldnvra4-5.js","/chat-static/_next/static/immutable/chunks/2ikegn6lkshq2.js","/chat-static/_next/static/immutable/chunks/0ea-o8jcr8uny.js","/chat-static/_next/static/immutable/chunks/01a5ye0bvehhg.js","/chat-static/_next/static/immutable/chunks/28gt91dhqr8rr.js","/chat-static/_next/static/immutable/chunks/37vtvti040ftg.js"],"SWRDataProvider"] 8d:T28d9,[V0_FILE]typescriptreact:file="/components/auth-card.tsx" 'use client' import { useCallback, useEffect, useRef, useState } from 'react' import { ConnectedView } from '@/components/connected-view' import { Wordmark } from '@/components/brand/mark' type Phase = 'idle' | 'authorizing' | 'connected' /* One breathing dot = the whole status system. */ export function LiveDot({ live }: { live: boolean }) { return ( ) } /* Shared card shell. The shadow is a STACK, not a single blur: a hairline contact shadow, a close ambient, and two wide falloffs. That is what makes a surface read as a physical object catching light rather than a div with a drop shadow. The inset top highlight is the lit edge. */ export function CardShell({ children }: { children: React.ReactNode }) { return (

{children}

) } /* The one button treatment in the product: dimensional ink pill. */ export const PILL = 'w-full rounded-full bg-primary px-4 py-3.5 text-sm font-medium tracking-[-0.01em] text-primary-foreground shadow-[0_1px_2px_oklch(0.26_0.035_185/0.18),0_6px_16px_-4px_oklch(0.26_0.035_185/0.28),inset_0_1px_0_oklch(1_0_0/0.14)] transition-[transform,box-shadow,opacity] duration-200 hover:shadow-[0_1px_2px_oklch(0.26_0.035_185/0.2),0_10px_24px_-6px_oklch(0.26_0.035_185/0.34),inset_0_1px_0_oklch(1_0_0/0.18)] hover:brightness-110 active:scale-[0.985] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:opacity-45 disabled:shadow-none' /* Quiet text link, with a real focus ring. */ export const QUIET = 'rounded-sm text-xs text-muted-foreground underline decoration-muted-foreground/40 underline-offset-4 transition-colors hover:text-foreground hover:decoration-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50' /* Optical sizing, not uniform sizing. A wordmark set to the same HEIGHT as an icon mark carries far more ink and visually dominates the rail (Bolt measured 37px wide against 16px squares). Wordmarks get a shorter cap height so every logo lands at equal optical weight. */ const VIBE_TOOLS = [ { name: 'v0', logo: '/logos/v0.svg', h: 'h-4' }, { name: 'Claude', logo: '/logos/claude.svg', h: 'h-4' }, { name: 'OpenAI', logo: '/logos/openai.svg', h: 'h-4' }, { name: 'Cursor', logo: '/logos/cursor.svg', h: 'h-4' }, { name: 'Lovable', logo: '/logos/lovable.svg', h: 'h-4' }, { name: 'Bolt', logo: '/logos/bolt.svg', h: 'h-[11px]' }, ] export function AuthCard({ initialConnected }: { initialConnected: boolean }) { const [phase, setPhase] = useState(initialConnected ? 'connected' : 'idle') const [needsPaste, setNeedsPaste] = useState(false) const [pasted, setPasted] = useState('') const [busy, setBusy] = useState(false) const [error, setError] = useState(null) const pollRef = useRef | null>(null) const stopPolling = useCallback(() => { if (pollRef.current) clearInterval(pollRef.current) pollRef.current = null }, []) useEffect(() => stopPolling, [stopPolling]) const connect = useCallback(async () => { setBusy(true) setError(null) try { const res = await fetch('/api/driggsby/connect', { method: 'POST' }) const data = (await res.json()) as { url?: string; needsPaste?: boolean; error?: string } if (!res.ok || !data.url) throw new Error(data.error ?? 'Could not start the connection.') window.open(data.url, '_blank', 'noopener') setPhase('authorizing') setNeedsPaste(Boolean(data.needsPaste)) if (!data.needsPaste) { let ticks = 0 pollRef.current = setInterval(async () => { ticks++ try { const s = await fetch('/api/driggsby/status').then((r) => r.json()) if (s.connected) { stopPolling() setPhase('connected') } } catch { // transient — keep polling } if (ticks > 30) { stopPolling() setNeedsPaste(true) } }, 2000) } } catch (err) { setError((err as Error).message) } finally { setBusy(false) } }, [stopPolling]) const completePaste = useCallback(async () => { if (!pasted.trim()) return setBusy(true) setError(null) try { const res = await fetch('/api/driggsby/complete', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ url: pasted }), }) const data = (await res.json()) as { connected?: boolean; error?: string } if (!res.ok || !data.connected) throw new Error(data.error ?? 'Could not finish connecting.') stopPolling() setPhase('connected') setPasted('') } catch (err) { setError((err as Error).message) } finally { setBusy(false) } }, [pasted, stopPolling]) const disconnect = useCallback(async () => { await fetch('/api/driggsby/disconnect', { method: 'POST' }) stopPolling() setPhase('idle') setNeedsPaste(false) setPasted('') setError(null) }, [stopPolling]) if (phase === 'connected') { return } return (

Vibe-code your money.

Connect your accounts once. Then build any finance app you can describe.

{phase === 'idle' && ( )} {phase === 'authorizing' && (

{!needsPaste ? (

Approve in the tab that opened…

) : (

You'll land on a localhost page that won't load. Paste its address here:

setPasted(e.target.value)} onKeyDown={(e) => { if (e.key !== 'Enter') return if (e.nativeEvent.isComposing || e.keyCode === 229) return completePaste() }} placeholder="http://localhost:3000/…" className="dg-nums mt-3.5 w-full rounded-2xl border border-input bg-secondary/60 px-3.5 py-3 text-center font-mono text-xs text-foreground shadow-[inset_0_1px_2px_oklch(0.26_0.035_185/0.05)] transition-shadow placeholder:text-muted-foreground/55 focus:border-ring/40 focus:bg-card focus:outline-none focus:ring-2 focus:ring-ring/25" />

)}

)} {error && (

{error}

)} {/* trust: bank-grade rail */}

Bank data secured by Plaid

{/* below the card: the vibe-code rail */}

Works with your favorite tools

{VIBE_TOOLS.map((t) => (

))}

{/* /api/open — 307s into a fresh v0 chat with this whole template loaded */} Open this template in v0

) }87:["$","$L8b",null,{"chatId":"nOVLo2pQhJ9","children":["$","$L8c",null,{"data":{"@\"active-block\",\"nOVLo2pQhJ9\",":{"id":"b_DIY6mi6VIgz","messageId":"yjLl5tATovRUUc1eq4gZgt9iu2RHgYno","source":"$8d","language":"typescriptreact","type":"code-project","closed":true,"meta":{"id":"Code","type":"code-project","taskNameActive":"Balancing v0 mark","taskNameComplete":"Balanced v0 mark"},"hasSourceBeenEdited":false,"forkedFromBlockId":"$undefined"},"@\"chat:vm-mode\",\"nOVLo2pQhJ9\",":true,"/chat/api/snapshots/proxy?blockId=b_DIY6mi6VIgz&v=v2":null},"children":"$L8e"}]}]

About

Tags

Share

About

Tags

Share