// Savvie · screens // Sidebar, Inbox, EmptyState, SaveModal, ItemDetail, Digest, Toast const { useState, useEffect } = React; // =================== SIDEBAR ================================= function Sidebar({ view, setView, counts, items, extraCategories = [], user, onAuthClick, onSignOut }) { const navItems = [ { id: 'inbox', label: 'saved', count: counts.total, glyph: '▤' }, { id: 'digest', label: 'digest', count: counts.stale, glyph: '◔' }, ]; const { CATEGORIES } = window.SAVVIE_DATA; const itemsByCat = {}; (items || []).forEach((it) => { itemsByCat[it.category] = (itemsByCat[it.category] || 0) + 1; }); const builtIn = Object.values(CATEGORIES) .sort((a, b) => a.order - b.order) .map(c => ({ id: c.id, label: c.label, glyph: c.emoji, count: itemsByCat[c.id] || 0 })); const userMade = extraCategories .map(c => ({ id: c.id, label: c.label, glyph: c.emoji, count: itemsByCat[c.id] || 0 })); return ( ); } // =================== EMPTY STATE ============================= function EmptyState({ onOpenSave }) { return (

nothing here yet.

that's about to change.
screenshot·link·note
); } // =================== AUTH MODAL ============================== // Sign up / sign in modal. After signup, shows "check your email". // Uses Supabase Auth when wired up; localStorage placeholder for now. function AuthModal({ onClose, onAuth, mode: initialMode = 'signup' }) { const [mode, setMode] = useState(initialMode); // signup | signin | check-email const [email, setEmail] = useState(''); const [password, setPassword] = useState(''); const [error, setError] = useState(null); const [loading, setLoading] = useState(false); const handleGoogle = async () => { setLoading(true); setError(null); try { if (window.__supabase) { const { error: err } = await window.__supabase.auth.signInWithOAuth({ provider: 'google', options: { redirectTo: window.location.origin }, }); if (err) throw err; // Supabase redirects to Google — auth completes on return } else { throw new Error('auth not available — please serve via http, not file://'); } } catch (e) { setError(e.message || 'google sign-in failed'); } setLoading(false); }; const handleSubmit = async () => { if (!email || !email.includes('@')) { setError('enter a valid email'); return; } if (!password || password.length < 6) { setError('password must be 6+ characters'); return; } setLoading(true); setError(null); try { if (window.__supabase) { // Real Supabase Auth if (mode === 'signup') { const { error: err } = await window.__supabase.auth.signUp({ email, password }); if (err) throw err; setMode('check-email'); } else { const { data, error: err } = await window.__supabase.auth.signInWithPassword({ email, password }); if (err) throw err; onAuth && onAuth({ email: data.user.email, id: data.user.id }); } } else { throw new Error('auth not available — please serve via http, not file://'); } } catch (e) { setError(e.message || 'something went wrong'); } setLoading(false); }; const inputStyle = { width: '100%', padding: '11px 14px', fontSize: 13, fontFamily: 'var(--vz-mono)', border: '1px solid var(--vz-ink-15)', borderRadius: 8, background: 'var(--vz-cream)', color: 'var(--vz-ink)', outline: 'none', boxSizing: 'border-box', }; return (
e.stopPropagation()}>
✦
{mode === 'check-email' ? ( <>
check your email
we sent a confirmation link to {email}. click it, then come back here and sign in.
) : ( <>
{mode === 'signup' ? 'create your account' : 'welcome back'}
{mode === 'signup' ? 'sign up to action your saves with claude.' : 'sign in to pick up where you left off.'}
or
email
{ setEmail(e.target.value); setError(null); }} onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }} style={inputStyle} />
password
{ setPassword(e.target.value); setError(null); }} onKeyDown={(e) => { if (e.key === 'Enter') handleSubmit(); }} style={inputStyle} />
{error && (
{error}
)}
{mode === 'signup' ? ( already have an account? { setMode('signin'); setError(null); }}>sign in ) : ( no account? { setMode('signup'); setError(null); }}>sign up free )}
)}
); } // =================== SAVE CORE =============================== // The inner save UI — tabs + body + footer. Used both inside the // modal and inline on the welcome page. // Resize image to fit within ~200KB base64 so claude.complete will accept it. // Returns a new data URL (jpeg, quality steps down until small enough). async function resizeImageForVision(dataUrl, maxBytes = 200000) { if (!dataUrl) return null; const img = await new Promise((resolve, reject) => { const i = new Image(); i.onload = () => resolve(i); i.onerror = reject; i.src = dataUrl; }); // Cap longest edge at 768px (smaller to work on mobile). Iterate quality down if still too big. const max = 768; let scale = Math.min(1, max / Math.max(img.width, img.height)); const w = Math.round(img.width * scale); const h = Math.round(img.height * scale); const canvas = document.createElement('canvas'); canvas.width = w; canvas.height = h; const ctx = canvas.getContext('2d'); ctx.drawImage(img, 0, 0, w, h); for (const q of [0.8, 0.6, 0.45, 0.3, 0.2]) { const out = canvas.toDataURL('image/jpeg', q); if (out.length < maxBytes * 1.4) return out; // base64 is ~33% bigger } return canvas.toDataURL('image/jpeg', 0.2); } // Ask Claude to clean up a title & pick the right category. // For screenshots, we send the actual image so it can SEE the content. window.inferSave = inferSave; async function inferSave(input, type, imageDataUrl) { const cats = Object.keys(window.SAVVIE_DATA.CATEGORIES); const instruction = `You are Savvie, a saved-items app. Read the image and the user's note carefully. Pick a SHORT clean title — **MAX 5 WORDS**, lowercase, no quotes, no period, no file extensions. Describe what the saved thing IS based on what you see — pull names of brands, accounts, products, dishes, places. Never say "screenshot of...". Pick the best-fit category from this list: ${cats.join(', ')}. Identify the platform (instagram, tiktok, youtube, x, reddit, linkedin, pinterest, web, note) and the account/source name if visible (e.g. @wallstreethq, @droppablestudio, "serious eats"). If you can't tell, use "web" for platform and "" for account. User's note: ${input || '(no extra context)'} Examples (note: each title is 5 words or fewer): - a tiktok showing pinterest + claude code + stitch → {"title":"pinterest + claude code workflow","category":"workflow","platform":"tiktok","account":""} - a recipe post for miso glazed eggplant → {"title":"miso glazed eggplant","category":"recipe","platform":"instagram","account":"@seriouseats"} - an instagram post from @wallstreethq about nvidia → {"title":"nvidia top 5 holdings jensen","category":"read-later","platform":"instagram","account":"@wallstreethq"} - a tutorial on capcut compositing → {"title":"capcut composite workflow","category":"tutorial","platform":"youtube","account":""} Respond with ONLY a JSON object on one line: {"title":"...","category":"...","platform":"...","account":"..."}`; let smallImage = null; if (imageDataUrl && type === 'screenshot') { try { console.log('[savvie] resizing image for vision…', 'dataUrl length:', imageDataUrl.length); smallImage = await resizeImageForVision(imageDataUrl); console.log('[savvie] resize done, smallImage length:', smallImage?.length || 0); } catch (e) { console.warn('[savvie] resize FAILED:', e.message || e); // resize failed; fall through to text-only } } // Try vision (with resized image) first, then plain text as backup. const attempts = []; if (smallImage) { const m = smallImage.match(/^data:([^;]+);base64,(.+)$/); if (m) { console.log('[savvie] sending vision request, base64 size:', m[2].length); // Pre-log for debug bar window.__dbgVision = `img: ${(m[2].length/1024).toFixed(0)}KB, key: ${window.__savvieApiKey ? window.__savvieApiKey.slice(0,12) + '…' : 'NONE'}`; attempts.push({ messages: [{ role: 'user', content: [ { type: 'image', source: { type: 'base64', media_type: m[1], data: m[2] } }, { type: 'text', text: instruction }, ], }], }); } } attempts.push(instruction); // Temporary on-screen debug (remove after fixing) — appends each line const _dbg = (msg) => { console.log('[savvie]', msg); if (!window.__savvieDebug) { const d = document.createElement('div'); Object.assign(d.style, { position: 'fixed', bottom: '60px', left: '8px', right: '8px', background: '#111', color: '#0f0', fontFamily: 'monospace', fontSize: '10px', padding: '8px 10px', borderRadius: '8px', zIndex: 99999, maxHeight: '200px', overflow: 'auto', wordBreak: 'break-all', lineHeight: '1.6', }); d.textContent = ''; document.body.appendChild(d); window.__savvieDebug = d; } window.__savvieDebug.textContent += msg + '\n'; window.__savvieDebug.scrollTop = 99999; }; if (window.__dbgVision) { _dbg(window.__dbgVision); window.__dbgVision = null; } _dbg(`${attempts.length} attempt(s) queued`); for (let ai = 0; ai < attempts.length; ai++) { const payload = attempts[ai]; try { const label = ai === 0 && smallImage ? 'vision' : 'text-only'; _dbg(`attempt ${ai + 1}/${attempts.length} (${label})…`); const result = await window.claude.complete(payload); const text = typeof result === 'string' ? result : (result?.content || result?.text || ''); _dbg(`response: ${text.slice(0, 120)}`); const match = text.match(/\{[\s\S]*?\}/); if (!match) { console.warn('[savvie] no JSON found in response'); continue; } const parsed = JSON.parse(match[0]); if (parsed.title && parsed.category && cats.includes(parsed.category)) { let cleaned = String(parsed.title) .toLowerCase() .replace(/^["']|["']$/g, '') .replace(/\.[a-z]+$/i, '') .replace(/\.$/, '') .trim(); const words = cleaned.split(/\s+/); if (words.length > 5) cleaned = words.slice(0, 5).join(' '); console.log('[savvie] inferred:', cleaned, '→', parsed.category); return { title: cleaned, category: parsed.category, platform: parsed.platform || '', account: parsed.account || '', }; } console.warn('[savvie] parsed but bad data:', parsed); } catch (e) { _dbg(`attempt ${ai + 1} FAILED: ${e.message || e}`); } } _dbg('all attempts failed — using fallback title'); return null; } // Fallback if Claude can't (or won't) help. Generates something readable. function fallbackTitle(hint, type) { if (!hint) return type === 'screenshot' ? 'new screenshot save' : 'new save'; // Strip filename-y patterns like "IMG_1991.PNG" or "pasted.png" const looksLikeFilename = /^(img[_-]?\d+|pasted|screen.?shot|untitled|file|photo|image|dcim)/i.test(hint) || /\.(png|jpe?g|gif|webp)$/i.test(hint); if (looksLikeFilename) { const now = new Date(); const hh = String(now.getHours()).padStart(2, '0'); const mm = String(now.getMinutes()).padStart(2, '0'); const labels = ['saved screenshot', 'new save', 'dropped a screenshot', 'screenshot save']; const pick = labels[Math.floor(Math.random() * labels.length)]; return `${pick} · ${hh}:${mm}`; } return hint.length > 80 ? hint.slice(0, 80) + '…' : hint; } function SaveCore({ onSave, autoFocus = true, compact = false, user, onAuthClick }) { const [tab, setTab] = useState('screenshot'); const [linkVal, setLinkVal] = useState(''); const [noteVal, setNoteVal] = useState(''); const [pretext, setPretext] = useState(null); const [drag, setDrag] = useState(false); // Multi-file: array of { name, preview, _id } const [files, setFiles] = useState([]); const [caption, setCaption] = useState(''); const [categorizing, setCategorizing] = useState(false); const [categorizingText, setCategorizingText] = useState('figuring it out…'); const [showTrialGate, setShowTrialGate] = useState(false); const fileInputRef = React.useRef(null); // Saves are unlimited — auth only gates actioning const isTrialUser = false; const MAX_FILES = 10; const { REMINDER_PRETEXTS } = window.SAVVIE_DATA; const addFiles = (newFiles) => { const arr = Array.from(newFiles || []); if (arr.length === 0) return; const room = Math.max(0, MAX_FILES - files.length); arr.slice(0, room).forEach((f) => { const reader = new FileReader(); reader.onload = (e) => { setFiles((prev) => prev.length >= MAX_FILES ? prev : [...prev, { name: f.name, preview: e.target.result, _id: Math.random() }]); }; reader.readAsDataURL(f); }); }; const removeFile = (id) => setFiles((prev) => prev.filter((f) => f._id !== id)); const handlePaste = async () => { try { if (navigator.clipboard && navigator.clipboard.read) { const items = await navigator.clipboard.read(); for (const item of items) { for (const type of item.types) { if (type.startsWith('image/')) { const blob = await item.getType(type); addFiles([new File([blob], 'pasted.png', { type })]); return; } } } } setFiles((prev) => [...prev, { name: 'pasted screenshot', preview: null, _id: Math.random() }]); } catch (err) { setFiles((prev) => [...prev, { name: 'pasted screenshot', preview: null, _id: Math.random() }]); } }; const handleSave = async () => { setCategorizing(true); // Build the list of inputs (1 for link/note · up to 10 for screenshots) let inputs = []; if (tab === 'screenshot') { if (files.length === 0) { inputs.push({ type: 'screenshot', hint: caption || 'unlabelled screenshot', thumb: null }); } else { inputs = files.map((f) => ({ type: 'screenshot', hint: caption ? `${caption} · ${f.name}` : f.name, thumb: f.preview, })); } } else if (tab === 'link') { const links = linkVal.split('\n').map(l => l.trim()).filter(Boolean); if (links.length === 0) { inputs.push({ type: 'link', hint: 'untitled link', thumb: null }); } else { links.forEach(link => { inputs.push({ type: 'link', hint: link, thumb: null }); }); } } else { // Reminders: always 1 save — keep the whole note together const fullNote = noteVal.trim(); if (!fullNote) { inputs.push({ type: 'note', hint: pretext ? `${pretext}: untitled reminder` : 'untitled reminder', thumb: null }); } else { const fullInput = pretext ? `${pretext}: ${fullNote}` : fullNote; inputs.push({ type: 'note', hint: fullInput, thumb: null }); } } // Playful rotating loading messages const funSingle = [ 'reading your mind…', 'ooh what is this…', 'claude is squinting…', 'sorting your chaos…', 'one sec, thinking…', 'hmm, interesting…', ]; const funMulti = [ `${inputs.length} saves?! ambitious.`, `speed-reading ${inputs.length} things…`, `juggling ${inputs.length} saves…`, `${inputs.length} at once — respect.`, `sorting ${inputs.length} saves, no sweat…`, `claude is multitasking ${inputs.length}…`, ]; const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; setCategorizingText(inputs.length > 1 ? pick(funMulti) : pick(funSingle)); // Categorize in parallel via claude.complete (with vision for screenshots) const results = await Promise.all( inputs.map(async (item) => { let inferred = null; try { inferred = await inferSave(item.hint, item.type, item.thumb); } catch (err) { console.error('[savvie] inferSave threw:', err); } const fallbackCat = item.type === 'link' ? 'read-later' : item.type === 'note' ? 'home' : 'home'; // If vision failed for a screenshot, show a temporary debug toast (remove later) if (!inferred && item.type === 'screenshot' && item.thumb) { console.warn('[savvie] vision failed for screenshot, using fallback title'); } return { type: item.type, title: inferred ? inferred.title : fallbackTitle(item.hint, item.type), category: inferred ? inferred.category : fallbackCat, platform: inferred?.platform || item.type, account: inferred?.account || '', thumb: item.thumb, }; }) ); results.forEach((r) => onSave(r)); // Increment trial counter try { localStorage.setItem('savvie-saves-used', String(savesUsed + results.length)); } catch(e) {} setCategorizing(false); setLinkVal(''); setNoteVal(''); setPretext(null); setFiles([]); setCaption(''); setTab('screenshot'); }; return ( <>
{[ { id: 'screenshot', label: 'screenshot', glyph: '▢' }, { id: 'link', label: 'link', glyph: '↗' }, { id: 'reminder', label: 'reminder', glyph: '✦' }, ].map(t => ( ))}
{tab === 'screenshot' && (
0 ? 'has-files' : ''}`} onDragOver={(e) => { e.preventDefault(); setDrag(true); }} onDragLeave={() => setDrag(false)} onDrop={(e) => { e.preventDefault(); setDrag(false); addFiles(e.dataTransfer.files); }} > { addFiles(e.target.files); e.target.value = ''; }} />
{files.length === 0 ? ( <>
drop a screenshot.
we'll figure it out.
drag. pick. paste. one image per save. up to 10.
) : ( <>
{files.map((f) => (
{f.preview ? ( {f.name} ) : (
)}
))} {files.length < MAX_FILES && ( )}
setCaption(e.target.value)} />
{files.length} of {MAX_FILES} · claude categorizes each on save
)}
)} {tab === 'link' && (