\n \n \n \n\n",[],[160,199],"5f739811-1dde-4cdc-8f19-c4426462bc05","favicon.svg","019f86ff-88c9-729e-b2d8-37f7a446113d",["D",1784676321271],"\n",[],[160,207],"a61876e3-fa76-4516-b759-580b4ff856bc","Counter.tsx","019f86ff-88c9-729e-b2d8-2dadf23dcb6f","019f86ff-88c9-729e-b2d8-31c4414d597f",["D",1784676321271],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\n\nexport function Counter() {\n const [count, setCount] = useState(0);\n return (\n

\n Clicked\n setCount((c) => c + 1)}\n class=\"bg-blue-500 hover:bg-blue-600 text-white font-medium px-4 py-2 rounded-lg transition-colors cursor-pointer\"\n >\n {count}\n \n times\n

\n );\n}\n",[],[160,221,214],"components","737e3e3f-d733-49ed-857f-3eeb287faee3","App.tsx","019f86ff-88c9-729e-b2d8-2ab175e7ae9e",10,["D",1784723219413],4,"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\n\n// ---------------- Types & constants ----------------\ntype Item = {\n id: number;\n name: string;\n category: string;\n color: string;\n formality: string;\n season: string;\n notes: string;\n};\n\nconst CATEGORIES = [\"Top\", \"Bottom\", \"Dress\", \"Outerwear\", \"Shoes\", \"Accessory\", \"Other\"];\nconst FORMALITIES = [\"Casual\", \"Smart casual\", \"Business\", \"Formal\"];\nconst SEASONS = [\"All year\", \"Spring\", \"Summer\", \"Fall\", \"Winter\"];\n\nconst VAL_ENV_URL =\n \"https://www.val.town/x/wohara010/closet/environment-variables?key=ANTHROPIC_API_KEY\";\n\n// ---------------- API helper ----------------\nasync function api(path: string, options?: RequestInit): Promise {\n const res = await fetch(path, {\n ...options,\n headers: { \"content-type\": \"application/json\", ...(options?.headers || {}) },\n });\n let data: any = null;\n try {\n data = await res.json();\n } catch {\n /* ignore */\n }\n if (!res.ok || data?.error) {\n const err: any = new Error(data?.error || `Request failed (${res.status})`);\n err.data = data;\n err.status = res.status;\n throw err;\n }\n return data;\n}\n\n// ---------------- Color swatch ----------------\nconst COLOR_MAP: Record = {\n black: \"#1c1c1c\", white: \"#f4f2ee\", gray: \"#9aa0a6\", grey: \"#9aa0a6\", silver: \"#c9ccd1\",\n navy: \"#26324a\", blue: \"#3b6fb0\", teal: \"#2f8f8b\", green: \"#4b7d54\", olive: \"#6f7350\",\n sage: \"#9caa8a\", yellow: \"#e5c15a\", mustard: \"#c8992e\", orange: \"#d1793e\", red: \"#b23b3b\",\n burgundy: \"#6f2b34\", maroon: \"#6f2b34\", pink: \"#dba0b4\", rose: \"#c56b82\", purple: \"#6d4b8a\",\n lavender: \"#b6a7d6\", brown: \"#7a5230\", tan: \"#c9a97e\", beige: \"#d9c8ac\", cream: \"#eee5d0\",\n khaki: \"#b6a06b\", denim: \"#4b6a8f\", charcoal: \"#3a3d42\", gold: \"#c9a44c\",\n};\nfunction colorHex(color: string): string {\n if (!color) return \"#d9d2c5\";\n const key = color.trim().toLowerCase();\n if (COLOR_MAP[key]) return COLOR_MAP[key];\n const first = key.split(/[\\s/,-]+/)[0];\n return COLOR_MAP[first] || \"#c3bbad\";\n}\nfunction Swatch({ color, size = 36 }: { color: string; size?: number }) {\n return (\n \n );\n}\n\n// ---------------- Small UI atoms ----------------\nconst VERDICT_STYLES: Record = {\n great: { bg: \"#e7f0e8\", text: \"#2f6b3d\", label: \"Great fit\" },\n works: { bg: \"#f3ecd9\", text: \"#8a6d1f\", label: \"Works\" },\n stretch: { bg: \"#f6e3e0\", text: \"#a2443a\", label: \"A stretch\" },\n yes: { bg: \"#e7f0e8\", text: \"#2f6b3d\", label: \"Yes — wear it\" },\n maybe: { bg: \"#f3ecd9\", text: \"#8a6d1f\", label: \"Maybe — tweak it\" },\n no: { bg: \"#f6e3e0\", text: \"#a2443a\", label: \"Not together\" },\n};\nfunction VerdictBadge({ verdict }: { verdict: string }) {\n const s = VERDICT_STYLES[verdict] || { bg: \"#ece7dd\", text: \"#5b554b\", label: verdict };\n return (\n \n \n {s.label}\n \n );\n}\nfunction Chip({ children }: { children: any }) {\n return (\n {children}\n );\n}\nfunction ApiKeyNotice() {\n return (\n

One quick setup step

\n The in-app stylist runs on Claude, which needs an Anthropic API key. Add one as an\n environment variable named{\" \"}\n ANTHROPIC_API_KEY, then try again.\n

\n \n Add your API key →\n \n

\n );\n}\nfunction arr(x: any): any[] {\n return Array.isArray(x) ? x : [];\n}\nconst FIELD =\n \"w-full px-3 py-2 rounded-xl border border-[#e2dccf] bg-[#fbf9f5] text-[#2c2a26] focus:outline-none focus:border-[#9c6f52]\";\nconst BTN =\n \"px-5 py-2 rounded-full bg-[#9c6f52] hover:bg-[#855b41] disabled:opacity-60 text-white text-sm font-medium transition-colors\";\n\n// ---------------- Closet tab ----------------\nfunction Closet({ items, loading, reload }: { items: Item[]; loading: boolean; reload: () => void }) {\n const [open, setOpen] = useState(false);\n return (\n

\n {items.length} piece{items.length === 1 ? \"\" : \"s\"}\n

\n \n

\n\n {open && }\n\n {loading ? (\n

Loading your closet…

\n ) : items.length === 0 ? (\n setOpen(true)} />\n ) : (\n

\n {CATEGORIES.filter((cat) => items.some((i) => i.category === cat)).map((cat) => (\n

{cat}

\n {items\n .filter((i) => i.category === cat)\n .map((item) => (\n \n ))}\n

\n ))}\n

\n )}\n

\n );\n}\n\nfunction ItemCard({ item, reload }: { item: Item; reload: () => void }) {\n const [busy, setBusy] = useState(false);\n const [editing, setEditing] = useState(false);\n const [err, setErr] = useState(\"\");\n const fromItem = () => ({\n name: item.name,\n category: item.category || \"Other\",\n color: item.color || \"\",\n formality: item.formality || \"Casual\",\n season: item.season || \"All year\",\n notes: item.notes || \"\",\n });\n const [v, setV] = useState(fromItem);\n const set = (patch: any) => setV((cur) => ({ ...cur, ...patch }));\n\n async function del() {\n if (!confirm(`Remove \"${item.name}\"?`)) return;\n setBusy(true);\n try {\n await api(`/api/items/${item.id}`, { method: \"DELETE\" });\n reload();\n } catch {\n setBusy(false);\n }\n }\n\n async function save() {\n if (!v.name.trim()) {\n setErr(\"Give it a name\");\n return;\n }\n setBusy(true);\n setErr(\"\");\n try {\n await api(`/api/items/${item.id}`, { method: \"PUT\", body: JSON.stringify(v) });\n setEditing(false);\n reload();\n } catch (e: any) {\n setErr(e.message);\n }\n setBusy(false);\n }\n\n function startEdit() {\n setV(fromItem());\n setErr(\"\");\n setEditing(true);\n }\n\n function cancel() {\n setV(fromItem());\n setErr(\"\");\n setEditing(false);\n }\n\n if (editing) {\n return (\n

Editing

\n \n {err &&

{err}

}\n

\n \n \n Cancel\n \n

\n );\n }\n\n return (\n

\n \n

{item.name}

\n {item.formality && {item.formality}}\n {item.season && item.season !== \"All year\" && {item.season}}\n {item.color && {item.color}}\n

\n {item.notes &&

{item.notes}

}\n

\n \n ✎\n \n \n ×\n \n

\n );\n}\n\nconst BLANK = {\n name: \"\",\n category: \"Top\",\n color: \"\",\n formality: \"Casual\",\n season: \"All year\",\n notes: \"\",\n};\n\n// Shared field set used by both the add form and the inline edit form\nfunction ItemFields({ v, set }: { v: any; set: (patch: any) => void }) {\n return (\n

\n Item\n set({ name: e.target.value })}\n />\n

\n Category\n \n

\n Color\n set({ color: e.target.value })}\n />\n

\n Formality\n \n

\n Season\n \n

\n \n Notes (fit, condition, what it pairs with…)\n \n set({ notes: e.target.value })}\n />\n

\n );\n}\n\nfunction AddItemForm({ onAdded }: { onAdded: () => void }) {\n const [v, setV] = useState({ ...BLANK });\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(\"\");\n const set = (patch: any) => setV((cur) => ({ ...cur, ...patch }));\n\n async function submit() {\n if (!v.name.trim()) {\n setErr(\"Give it a name\");\n return;\n }\n setBusy(true);\n setErr(\"\");\n try {\n await api(\"/api/items\", { method: \"POST\", body: JSON.stringify(v) });\n setV({ ...BLANK });\n onAdded();\n } catch (e: any) {\n setErr(e.message);\n }\n setBusy(false);\n }\n\n return (\n

\n \n {err &&

{err}

}\n \n

\n );\n}\n\nfunction EmptyState({ onAdd }: { onAdd: () => void }) {\n return (\n

🧥

Your closet is empty.

\n \n

\n );\n}\n\n// ---------------- Style me tab ----------------\nfunction ListSection({ title, items, tone }: { title: string; items: string[]; tone?: string }) {\n const color = tone === \"warm\" ? \"#8a6d1f\" : tone === \"muted\" ? \"#6f6a61\" : \"#2c2a26\";\n if (!arr(items).length) return null;\n return (\n

{title}

\n •\n {t}\n

\n );\n}\n\nfunction StyleMe({ items }: { items: Item[] }) {\n const [occasion, setOccasion] = useState(\"\");\n const [context, setContext] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(\"\");\n const [needKey, setNeedKey] = useState(false);\n const [outfit, setOutfit] = useState(null);\n\n async function go() {\n if (!occasion.trim()) {\n setErr(\"Tell me the occasion first.\");\n return;\n }\n setBusy(true);\n setErr(\"\");\n setNeedKey(false);\n setOutfit(null);\n try {\n const d = await api(\"/api/outfit\", {\n method: \"POST\",\n body: JSON.stringify({ occasion, context }),\n });\n setOutfit(d.outfit);\n } catch (e: any) {\n if (e.data?.error === \"no_key\") setNeedKey(true);\n else setErr(e.message);\n }\n setBusy(false);\n }\n\n const byId = (id: number) => items.find((i) => i.id === id);\n const suggestions = [\"Job interview\", \"First date\", \"Wedding guest\", \"Casual Friday\", \"Weekend brunch\", \"Funeral\"];\n\n return (\n

\n {items.length === 0 && (\n

Add a few pieces in the Closet tab first, then I can style you.

\n )}\n What are you dressing for?\n setOccasion(e.target.value)}\n />\n

\n {suggestions.map((s) => (\n setOccasion(s)}\n className=\"text-xs px-3 py-1 rounded-full bg-[#f1ece2] text-[#6f6a61] hover:bg-[#e7e0d3]\"\n >\n {s}\n \n ))}\n

\n \n Anything else? (weather, vibe, dress code)\n \n setContext(e.target.value)}\n />\n \n\n {err &&

{err}

}\n {needKey && }\n\n {outfit && (\n

\n \n

{outfit.headline}

\n\n

\n {arr(outfit.items).map((oi: any, idx: number) => {\n const it = byId(oi.id);\n return (\n \n {it ? : }\n

\n {it ? it.name : `#${oi.id}`}{\" \"}\n · {oi.role}\n

\n {oi.why &&

{oi.why}

}\n

\n );\n })}\n

\n\n \n \n \n

\n )}\n \n );\n}\n\n// ---------------- Check a look tab ----------------\nfunction CheckLook({ items }: { items: Item[] }) {\n const [selected, setSelected] = useState([]);\n const [occasion, setOccasion] = useState(\"\");\n const [busy, setBusy] = useState(false);\n const [err, setErr] = useState(\"\");\n const [needKey, setNeedKey] = useState(false);\n const [result, setResult] = useState(null);\n\n function toggle(id: number) {\n setSelected((s) => (s.includes(id) ? s.filter((x) => x !== id) : [...s, id]));\n }\n\n async function go() {\n if (selected.length < 2) {\n setErr(\"Pick at least two pieces.\");\n return;\n }\n setBusy(true);\n setErr(\"\");\n setNeedKey(false);\n setResult(null);\n try {\n const d = await api(\"/api/check\", {\n method: \"POST\",\n body: JSON.stringify({ ids: selected, occasion }),\n });\n setResult(d.check);\n } catch (e: any) {\n if (e.data?.error === \"no_key\") setNeedKey(true);\n else setErr(e.message);\n }\n setBusy(false);\n }\n\n if (items.length === 0)\n return

Add pieces in the Closet tab, then come back to test combinations.

;\n\n return (\n

\n Tap the pieces you're thinking of wearing together, and I'll give you an honest read.\n

\n {items.map((it) => {\n const on = selected.includes(it.id);\n return (\n toggle(it.id)}\n className={`flex gap-3 items-center p-3 rounded-xl border text-left transition-colors ${\n on ? \"border-[#9c6f52] bg-[#f7efe8]\" : \"border-[#eae4d9] bg-white hover:border-[#d9cfbf]\"\n }`}\n >\n \n

{it.name}

\n {it.category}\n {it.formality ? \" · \" + it.formality : \"\"}\n

\n {on && ✓}\n \n );\n })}\n

\n\n \n Occasion (optional)\n \n setOccasion(e.target.value)}\n />\n\n \n\n {err &&

{err}

}\n {needKey && }\n\n {result && (\n

\n \n

{result.headline}

\n \n \n

\n )}\n

\n );\n}\n\n// ---------------- Root ----------------\ntype Tab = \"closet\" | \"style\" | \"check\";\n\nexport function App() {\n const [tab, setTab] = useState(\"closet\");\n const [items, setItems] = useState([]);\n const [loading, setLoading] = useState(true);\n const [error, setError] = useState(\"\");\n\n async function load() {\n setLoading(true);\n setError(\"\");\n try {\n const d = await api(\"/api/items\");\n setItems(d.items || []);\n } catch (e: any) {\n setError(e.message);\n }\n setLoading(false);\n }\n useEffect(() => {\n load();\n }, []);\n\n const tabs: { id: Tab; label: string }[] = [\n { id: \"closet\", label: \"Closet\" },\n { id: \"style\", label: \"Style me\" },\n { id: \"check\", label: \"Check a look\" },\n ];\n\n return (\n

Closet

Your wardrobe, and an honest second opinion.

\n\n \n\n {error && (\n

{error}

\n )}\n\n {tab === \"closet\" && }\n {tab === \"style\" && }\n {tab === \"check\" && }\n\n \n

\n );\n}\n",[],[160,221,223],"35fffc69-004f-47bf-902f-c8a01bf04a23",["D",1784676321271],[176,177],[160,221],["D",1784676321271],[175,178,179,180],[160],["D",1784676321271],["D",1789474235934],{"_11":12,"_97":93},{"_11":12,"_90":91,"_92":93,"_48":49,"_94":95,"_96":40},{"_29":30,"_13":26,"_20":21,"_27":28,"_31":32,"_33":34,"_83":42,"_84":85,"_86":87,"_88":14,"_89":12},"ctx",{"_76":-5,"_121":276,"_277":278,"_279":280,"_281":40,"_282":40,"_283":40,"_284":53,"_285":-5,"_286":-7,"_287":-7,"_288":57,"_289":40,"_290":40,"_291":-5,"_292":40,"_293":40,"_294":40,"_295":-5},"ENV",{"_247":248,"_249":250,"_251":26,"_252":253,"_254":255,"_256":257,"_258":259,"_260":261,"_262":263,"_264":265,"_266":267,"_268":269,"_270":271,"_272":273,"_274":275},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Branches1

Branches
1