\n \n \n \n\n",[18,89],"5f739811-1dde-4cdc-8f19-c4426462bc05",["D",1784676321271],"\n",[18,95],"35fffc69-004f-47bf-902f-c8a01bf04a23",["D",1784676321271],[18,100],"pulls","branches","forks","envVars",{"_96":41,"_235":26},"connections",{"_96":26,"_234":26},"unfilledCount","emptyCount",{"_34":201,"_13":18,"_75":110,"_44":-5,"_36":37,"_204":41,"_212":24,"_38":288,"_40":26,"_78":101,"_202":-5,"_80":30,"_205":-5,"_251":289,"_17":290},{"_34":224,"_13":100,"_75":99,"_44":110,"_36":37,"_204":41,"_212":24,"_38":285,"_40":26,"_78":101,"_202":-5,"_80":30,"_205":-5,"_251":286,"_17":287},{"_34":277,"_13":278,"_75":279,"_44":99,"_36":37,"_204":280,"_212":24,"_38":281,"_40":97,"_78":79,"_202":282,"_80":30,"_205":-5,"_251":283,"_17":284},{"_34":270,"_13":271,"_75":272,"_44":99,"_36":37,"_204":41,"_212":24,"_38":273,"_40":26,"_78":79,"_202":274,"_80":30,"_205":-5,"_251":275,"_17":276},{"_34":220,"_13":95,"_75":94,"_44":110,"_36":37,"_204":41,"_212":24,"_38":267,"_40":26,"_78":21,"_202":222,"_80":30,"_205":-5,"_251":268,"_17":269},{"_34":216,"_13":89,"_75":88,"_44":110,"_36":37,"_204":104,"_212":24,"_38":264,"_40":41,"_78":21,"_202":218,"_80":30,"_205":-5,"_251":265,"_17":266},{"_34":211,"_13":77,"_75":76,"_44":110,"_36":37,"_204":41,"_212":24,"_38":261,"_40":26,"_78":79,"_202":214,"_80":30,"_205":-5,"_251":262,"_17":263},{"_34":254,"_13":255,"_75":256,"_44":-5,"_36":37,"_204":41,"_212":24,"_38":257,"_40":26,"_78":21,"_202":258,"_80":30,"_205":-5,"_251":259,"_17":260},{"_34":245,"_13":246,"_75":123,"_44":-5,"_36":37,"_204":150,"_212":24,"_38":247,"_40":248,"_78":249,"_202":250,"_80":30,"_205":-5,"_251":252,"_17":253},"96e7de1e-56e3-4035-add5-96b8fe991897","index.ts",["D",1784723243499],5,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\nimport { Hono } from \"npm:hono\";\n\nconst app = new Hono();\nconst TABLE = \"closet_items_v2\";\n\n// --- DB setup (lazy + idempotent) ---\nlet dbReady = false;\nasync function ensureDb() {\n if (dbReady) return;\n await sqlite.execute(`CREATE TABLE IF NOT EXISTS ${TABLE} (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n name TEXT NOT NULL,\n category TEXT NOT NULL DEFAULT 'Other',\n color TEXT DEFAULT '',\n formality TEXT DEFAULT '',\n season TEXT DEFAULT '',\n notes TEXT DEFAULT '',\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`);\n dbReady = true;\n}\n\n// --- Anthropic helper ---\nconst ANTHROPIC_URL = \"https://api.anthropic.com/v1/messages\";\nconst MODEL = Deno.env.get(\"ANTHROPIC_MODEL\") || \"claude-sonnet-5\";\n\nasync function callClaude(system: string, user: string, maxTokens = 1200): Promise {\n const key = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!key) return { error: \"no_key\" };\n let resp: Response;\n try {\n resp = await fetch(ANTHROPIC_URL, {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n \"x-api-key\": key,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: MODEL,\n max_tokens: maxTokens,\n system,\n messages: [{ role: \"user\", content: user }],\n }),\n });\n } catch (e) {\n return { error: \"network\", detail: String(e) };\n }\n if (!resp.ok) {\n const detail = await resp.text();\n console.error(\"Anthropic API error\", resp.status, detail);\n return { error: \"api_error\", status: resp.status, detail };\n }\n const data = await resp.json();\n const text = (data.content || [])\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\\n\");\n return { text };\n}\n\nfunction extractJson(text: string): any | null {\n if (!text) return null;\n let t = text.trim();\n const fence = t.match(/```(?:json)?\\s*([\\s\\S]*?)```/i);\n if (fence) t = fence[1].trim();\n const start = t.indexOf(\"{\");\n const end = t.lastIndexOf(\"}\");\n if (start === -1 || end === -1) return null;\n try {\n return JSON.parse(t.slice(start, end + 1));\n } catch {\n return null;\n }\n}\n\nfunction closetToText(items: any[]): string {\n return items\n .map((it) =>\n `#${it.id} | ${it.name} | category: ${it.category}` +\n (it.color ? ` | color: ${it.color}` : \"\") +\n (it.formality ? ` | formality: ${it.formality}` : \"\") +\n (it.season ? ` | season: ${it.season}` : \"\") +\n (it.notes ? ` | notes: ${it.notes}` : \"\")\n )\n .join(\"\\n\");\n}\n\n// --- Static frontend ---\napp.get(\"/\", () => serveFile(\"/frontend/index.html\"));\napp.get(\"/frontend/**/*\", (c) => serveFile(c.req.path));\napp.get(\"/source\", (c) => c.redirect(parseVal().links.self.val));\n\n// --- Items API ---\napp.get(\"/api/items\", async (c) => {\n await ensureDb();\n const r = await sqlite.execute(`SELECT * FROM ${TABLE} ORDER BY category, id DESC`);\n return c.json({ items: r.rows });\n});\n\napp.post(\"/api/items\", async (c) => {\n await ensureDb();\n const b = await c.req.json().catch(() => ({}));\n const name = String(b.name ?? \"\").trim();\n if (!name) return c.json({ error: \"Give the item a name.\" }, 400);\n const args = [\n name,\n String(b.category ?? \"Other\"),\n String(b.color ?? \"\"),\n String(b.formality ?? \"\"),\n String(b.season ?? \"\"),\n String(b.notes ?? \"\"),\n ];\n const r = await sqlite.execute({\n sql: `INSERT INTO ${TABLE} (name, category, color, formality, season, notes)\n VALUES (?, ?, ?, ?, ?, ?) RETURNING *`,\n args,\n });\n return c.json({ item: r.rows[0] });\n});\n\napp.put(\"/api/items/:id\", async (c) => {\n await ensureDb();\n const id = Number(c.req.param(\"id\"));\n if (!Number.isFinite(id)) return c.json({ error: \"Bad id\" }, 400);\n const b = await c.req.json().catch(() => ({}));\n\n const cur = await sqlite.execute({ sql: `SELECT * FROM ${TABLE} WHERE id = ?`, args: [id] });\n const existing: any = cur.rows[0];\n if (!existing) return c.json({ error: \"That item no longer exists.\" }, 404);\n\n const name = String(b.name ?? existing.name).trim();\n if (!name) return c.json({ error: \"Give the item a name.\" }, 400);\n\n const r = await sqlite.execute({\n sql: `UPDATE ${TABLE}\n SET name = ?, category = ?, color = ?, formality = ?, season = ?, notes = ?\n WHERE id = ? RETURNING *`,\n args: [\n name,\n String(b.category ?? existing.category ?? \"Other\"),\n String(b.color ?? existing.color ?? \"\"),\n String(b.formality ?? existing.formality ?? \"\"),\n String(b.season ?? existing.season ?? \"\"),\n String(b.notes ?? existing.notes ?? \"\"),\n id,\n ],\n });\n return c.json({ item: r.rows[0] });\n});\n\napp.delete(\"/api/items/:id\", async (c) => {\n await ensureDb();\n const id = Number(c.req.param(\"id\"));\n if (!Number.isFinite(id)) return c.json({ error: \"Bad id\" }, 400);\n await sqlite.execute({ sql: `DELETE FROM ${TABLE} WHERE id = ?`, args: [id] });\n return c.json({ ok: true });\n});\n\n// --- AI: build an outfit for an occasion ---\napp.post(\"/api/outfit\", async (c) => {\n await ensureDb();\n const b = await c.req.json().catch(() => ({}));\n const occasion = String(b.occasion ?? \"\").trim();\n const context = String(b.context ?? \"\").trim();\n if (!occasion) return c.json({ error: \"Tell me the occasion first.\" }, 400);\n\n const r = await sqlite.execute(`SELECT * FROM ${TABLE} ORDER BY category, id`);\n const items = r.rows;\n if (!items.length) return c.json({ error: \"Your closet is empty — add a few items first.\" }, 400);\n\n const system =\n`You are an honest, warm personal stylist helping someone dress from THEIR OWN closet.\nRules:\n- Only use items from the closet list provided. Refer to each chosen piece by its #id.\n- Build ONE coherent outfit for the occasion (e.g. top + bottom or a dress, plus shoes, plus outerwear/accessories when they help).\n- Be genuinely honest. If the closet lacks an ideal piece, say so, choose the closest workable option, and note the compromise. Never oversell a stretch as perfect.\n- Keep it practical and kind. No filler.\nReturn ONLY a JSON object (no markdown, nothing outside the JSON) with this exact shape:\n{\n \"verdict\": \"great\" | \"works\" | \"stretch\",\n \"headline\": string,\n \"items\": [ { \"id\": number, \"role\": string, \"why\": string } ],\n \"styling_tips\": string[],\n \"honest_notes\": string[],\n \"gaps\": string[]\n}\nverdict: \"great\" = confident strong fit; \"works\" = solid, does the job; \"stretch\" = doable but a compromise given what's available.\n\"gaps\" = pieces the closet is missing that would elevate this look (may be empty).`;\n\n const user =\n`Occasion: ${occasion}\n${context ? `Extra context: ${context}\\n` : \"\"}My closet:\n${closetToText(items)}`;\n\n const out = await callClaude(system, user, 1500);\n if (out.error) {\n if (out.error === \"no_key\") return c.json({ error: \"no_key\" });\n let friendly = `The stylist couldn't be reached${out.status ? ` (HTTP ${out.status})` : \"\"}.`;\n try {\n const d = JSON.parse(out.detail);\n if (d?.error?.message) friendly = d.error.message;\n } catch {\n /* keep the default message */\n }\n return c.json({ error: friendly, detail: out.detail });\n }\n const parsed = extractJson(out.text);\n if (!parsed) return c.json({ error: \"Could not read the stylist's answer.\", raw: out.text });\n return c.json({ outfit: parsed });\n});\n\n// --- AI: honest check of a chosen combination ---\napp.post(\"/api/check\", async (c) => {\n await ensureDb();\n const b = await c.req.json().catch(() => ({}));\n const ids: number[] = Array.isArray(b.ids) ? b.ids.map((x: any) => Number(x)).filter(Number.isFinite) : [];\n const occasion = String(b.occasion ?? \"\").trim();\n if (ids.length < 2) return c.json({ error: \"Pick at least two pieces to check.\" }, 400);\n\n const placeholders = ids.map(() => \"?\").join(\",\");\n const r = await sqlite.execute({ sql: `SELECT * FROM ${TABLE} WHERE id IN (${placeholders})`, args: ids });\n const items = r.rows;\n if (!items.length) return c.json({ error: \"Those items weren't found.\" }, 400);\n\n const system =\n`You are an honest, warm personal stylist. The user picked a specific combination of their OWN clothes and wants a candid gut-check.\nBe honest but kind — it's fine to say \"maybe\" and suggest a swap.\nReturn ONLY JSON (no markdown) shaped:\n{\n \"verdict\": \"yes\" | \"maybe\" | \"no\",\n \"headline\": string,\n \"reasons\": string[],\n \"tweaks\": string[]\n}\nverdict: \"yes\" = wear it; \"maybe\" = borderline, try a tweak; \"no\" = don't wear these together.\n\"tweaks\" = concrete \"try X instead / add Y\" suggestions (may be empty when verdict is yes).`;\n\n const user =\n`${occasion ? `Occasion: ${occasion}\\n` : \"\"}Pieces I'm considering wearing together:\n${closetToText(items)}`;\n\n const out = await callClaude(system, user, 900);\n if (out.error) {\n if (out.error === \"no_key\") return c.json({ error: \"no_key\" });\n let friendly = `The stylist couldn't be reached${out.status ? ` (HTTP ${out.status})` : \"\"}.`;\n try {\n const d = JSON.parse(out.detail);\n if (d?.error?.message) friendly = d.error.message;\n } catch {\n /* keep the default message */\n }\n return c.json({ error: friendly, detail: out.detail });\n }\n const parsed = extractJson(out.text);\n if (!parsed) return c.json({ error: \"Could not read the stylist's answer.\", raw: out.text });\n return c.json({ check: parsed });\n});\n\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","children",[],[246],"eaf465ff-0d5e-4eb7-8324-78cd7e948689","README.md","019f86ff-88c9-729e-b2d8-448829d52301",["D",1784676321271],"# React + Hono Starter\n\nA minimal starter template for building client-side React apps with a Hono\nbackend on Val Town. Click **Remix** to get your own copy.\n\n## Picking a starter\n\n| Starter | When to pick it |\n| --- | --- |\n| [`basic-html-starter`](https://www.val.town/x/templates/basic-html-starter) | Static HTML pages. Sprinkle of vanilla JS. No server-side rendering. |\n| [`hono-jsx-starter`](https://www.val.town/x/templates/hono-jsx-starter) | Dynamic server-rendered HTML with JSX. API routes. No React, no SPA. |\n| **[`react-hono-starter`](https://www.val.town/x/templates/react-hono-starter)** *(you're here)* | Client-side React SPA with a Hono API backend. |\n\n**Want to build UI?** Start writing React components in\n[`frontend/components/`](/frontend/components/). Import them into `App.tsx` and\nyou're good to go. Styling is [Twind](https://twind.style/) — just use Tailwind\nutility classes, zero config.\n\n**Want to add an API?** Add routes in [`index.ts`](/index.ts) (there's a\ncommented-out example). Fetch them from your React components.\n\n## Architecture\n\n```mermaid\ngraph LR\n Browser -->|\"GET /\"| Hono[\"index.ts
(Hono server)\"]\n Hono -->|serves| HTML[\"index.html\"]\n HTML -->|loads| Entry[\"index.tsx\"]\n Entry -->|renders| App[\"App.tsx\"]\n App -->|renders| Counter[\"Counter.tsx\"]\n```\n\n## File structure\n\n```\nindex.ts ← Hono backend (serves frontend + API routes)\nfrontend/\n index.html ← HTML shell (loads Twind + React)\n index.tsx ← React entrypoint (mounts )\n favicon.svg ← App icon\n components/\n App.tsx ← Root component (layout + view source link)\n Counter.tsx ← Example component with state\n```\n\n## How it works\n\n1. **`index.ts`** is the HTTP entrypoint — a Hono server that serves the\n frontend and any API routes you add.\n2. **`frontend/index.html`** loads Twind and the React entrypoint.\n3. **`frontend/index.tsx`** mounts the React app.\n4. **`frontend/components/App.tsx`** is the root layout — add new components\n alongside it.\n5. **`frontend/components/Counter.tsx`** is an example stateful component —\n replace it with your own!\n\n## Next steps\n\n- Add API routes in `index.ts`\n- Add new components in `frontend/components/`\n- Add a SQLite database — see the\n [React Hono Example](https://www.val.town/x/stevekrouse/reactHonoExample) for\n a full-stack example with database, queries, and shared types\n",[],[255],["D",1784676321271],[],[18,77],["D",1784678169338],[],[18,89],["D",1784676321271],[],[18,95],"a61876e3-fa76-4516-b759-580b4ff856bc","Counter.tsx","019f86ff-88c9-729e-b2d8-2dadf23dcb6f",["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",[],[18,100,271],"737e3e3f-d733-49ed-857f-3eeb287faee3","App.tsx","019f86ff-88c9-729e-b2d8-2ab175e7ae9e",10,["D",1784723219413],"/** @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",[],[18,100,278],["D",1784676321271],[238,239],[18,100],["D",1784676321271],[237,240,241,242],[18],["D",1784676321271],["D",1789474235934],{"_11":12,"_167":83},{"_11":12,"_162":163,"_82":83,"_31":81,"_164":165,"_166":30},{"_40":150,"_13":16,"_34":37,"_151":112,"_152":72,"_153":154,"_155":116,"_156":157,"_158":159,"_160":14,"_161":12},"ctx",{"_53":-5,"_188":329,"_330":331,"_332":333,"_334":30,"_335":30,"_336":30,"_337":24,"_338":-5,"_339":-7,"_340":-7,"_341":26,"_342":30,"_343":30,"_344":-5,"_345":30,"_346":30,"_347":30,"_348":-5},"ENV",{"_300":301,"_302":303,"_304":16,"_305":306,"_307":308,"_309":310,"_311":312,"_313":314,"_315":316,"_317":318,"_319":320,"_321":322,"_323":324,"_325":326,"_327":328},"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"]

History · frontend