[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_338":339,"_340":341},"routes/_app.x.$handle.$name",{"_105":104,"_32":46,"_114":91,"_27":115,"_13":14,"_116":-5,"_11":117,"_118":119,"_120":121,"_122":123,"_124":125,"_20":-5,"_126":127,"_128":129,"_130":25,"_131":132,"_133":61,"_134":-5,"_135":-5,"_136":137},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_44":45,"_32":46,"_39":47,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":73,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":85,"_86":87,"_88":89,"_90":25},"version",37,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":33,"_34":35,"_36":38,"_39":40,"_41":14,"_42":43,"_24":25},"previous",{"_30":31,"_32":33,"_34":35,"_36":37},"deleted",false,"deletedHere","path","frontend/components/CarDetail.tsx","latestPath","fileId","d7dd0b70-78e0-11f1-af42-1607ee4eb77e","name","CarDetail.tsx","fileType","script","content","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum, ownedFor } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\nimport { Timeline } from \"./Timeline.tsx\";\nimport { DocsSection, PhotosSection } from \"./MediaSections.tsx\";\n\nexport function CarDetail({ carId }: { carId: number }) {\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n const [tab, setTab] = useState(\"timeline\");\n const [editing, setEditing] = useState(null);\n\n async function load() {\n try {\n const d = await api(`/api/cars/${carId}`);\n setData(d);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, [carId]);\n\n if (error) return

Couldn't load this car: {error}

;\n if (!data) return

Pulling it out of the garage…

;\n\n const { car, events, files } = data;\n const photos = files.filter((f: any) => f.kind === \"photo\");\n const docs = files.filter((f: any) => f.kind === \"document\");\n const cover = car.cover_file_id ? photos.find((p: any) => p.id === car.cover_file_id) : null;\n const milesDriven = car.current_mileage != null && car.purchase_mileage != null\n ? car.current_mileage - car.purchase_mileage\n : null;\n const owned = ownedFor(car.purchase_date, car.status === \"previous\" ? car.sold_date : null);\n\n async function deleteCar() {\n if (!confirm(`Delete ${carTitle(car)} and all its events, photos, and documents? This can't be undone.`)) return;\n await api(`/api/cars/${car.id}`, { method: \"DELETE\" });\n window.location.hash = \"#/\";\n }\n\n const tabs = [\n { id: \"timeline\", label: `History · ${events.length}` },\n { id: \"photos\", label: `Photos · ${photos.length}` },\n { id: \"docs\", label: `Documents · ${docs.length}` },\n ];\n\n return (\n

\n \n ← Back to garage\n \n\n {/* Hero */}\n

\n {cover\n ?

\n : (\n

\n 🚗\n

\n )}\n

{carTitle(car)}

\n {car.status === \"previous\" && (\n \n Previously owned\n \n )}\n {car.status === \"wishlist\" && (\n \n 💭 Wishlist\n \n )}\n

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.color && {car.color}}\n {car.vin && VIN {car.vin}}\n {car.listing_url && (\n \n Listing ↗\n \n )}\n

\n {car.status === \"wishlist\" && (\n setEditing({ ...car, status: \"current\" })}\n className=\"px-3 py-1.5 rounded-lg text-sm font-semibold bg-amber-500 hover:bg-amber-400 text-neutral-950\"\n >\n 🎉 I bought it\n \n )}\n setEditing(car)}\n className=\"px-3 py-1.5 rounded-lg text-sm bg-neutral-800/90 border border-neutral-700 hover:bg-neutral-700\"\n >\n ✎ Edit\n \n \n Delete\n \n

\n\n {/* Stats */}\n

\n {car.current_mileage != null && (\n = 0 ? `+${fmtNum(milesDriven)} while owned` : undefined}\n />\n )}\n {car.avg_mpg != null && }\n {(car.purchase_date || car.purchase_price != null) && (\n \n )}\n {car.status === \"previous\" && (car.sold_date || car.sold_price != null) && (\n \n )}\n {owned && }\n {car.status === \"wishlist\" && car.target_price != null && (\n \n )}\n

\n\n {car.notes && (\n

\n {car.notes}\n

\n )}\n\n {/* Tabs */}\n

\n {tabs.map((t) => (\n setTab(t.id)}\n className={`px-3 py-1.5 rounded-lg text-sm border transition-colors ${\n tab === t.id\n ? \"bg-amber-500/10 text-amber-400 border-amber-500/40\"\n : \"border-neutral-800 text-neutral-400 hover:text-neutral-200 hover:border-neutral-600\"\n }`}\n >\n {t.label}\n \n ))}\n

\n\n {tab === \"timeline\" && }\n {tab === \"photos\" && }\n {tab === \"docs\" && }\n\n {editing && (\n setEditing(null)}\n onSaved={() => {\n setEditing(null);\n load();\n }}\n />\n )}\n

\n );\n}\n\nfunction Stat({ label, value, sub }: any) {\n return (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n );\n}\n","/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum, ownedFor } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\nimport { Timeline } from \"./Timeline.tsx\";\nimport { DocsSection, PhotosSection } from \"./MediaSections.tsx\";\n\nexport function CarDetail({ carId }: { carId: number }) {\n const [data, setData] = useState(null);\n const [error, setError] = useState(\"\");\n const [tab, setTab] = useState(\"timeline\");\n const [editing, setEditing] = useState(null);\n\n async function load() {\n try {\n const d = await api(`/api/cars/${carId}`);\n setData(d);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, [carId]);\n\n if (error) return

Couldn't load this car: {error}

;\n if (!data) return

Pulling it out of the garage…

\n \n ← Back to garage\n \n\n {/* Hero */}\n

\n {cover\n ?

\n : (\n

\n 🚗\n

\n )}\n

{carTitle(car)}

\n {car.status === \"previous\" && (\n \n Previously owned\n \n )}\n {car.status === \"wishlist\" && (\n \n 💭 Wishlist\n \n )}\n

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.color && {car.color}}\n {car.vin && VIN {car.vin}}\n {car.listing_url && (\n \n Listing ↗\n \n )}\n

\n\n {/* Stats */}\n

\n\n {car.notes && (\n

\n {car.notes}\n

\n )}\n\n {/* Tabs */}\n

\n\n {tab === \"timeline\" && }\n {tab === \"photos\" && }\n {tab === \"docs\" && }\n\n {editing && (\n setEditing(null)}\n onSaved={() => {\n setEditing(null);\n load();\n }}\n />\n )}\n

\n );\n}\n\nfunction Stat({ label, value, sub }: any) {\n return (\n

{label}

{value}

\n {sub &&

{sub}

}\n

\n );\n}\n","createdAt",["D",1786630287524],"branchVersion","branchId","cddd876e-a6b9-40d9-97c3-50585f7c6ffb","id","86ecd649-9083-4db7-bedd-f9cb29edf0e9","garage",["D",1783303808467],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","Track cars you own & owned: mileage, MPG, docs, photos, history","imageUrl","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/64dc00cc-94d9-47dd-81b1-dde02610d900/square512?exp=1789585199&sig=1baafecf11cec877edc88f123efd7f687a508ecc290c26f9eecfc4b3e272df79","019c452d-eb8d-7124-ac84-fd3eee7429af","pinnedFileId","019f3530-a79e-72d4-b6fb-089843f6f1ee","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","019c452d-eb8d-7124-ac85-003287cdb181","tursoName","86ecd64990834db7beddf9cb29edf0e9","tursoHostname","86ecd64990834db7beddf9cb29edf0e9-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789524079207],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_105":104,"_113":109},"org",{"_105":104,"_106":107,"_108":109,"_18":57,"_110":111,"_112":25},"branch",{"_13":14,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"isOwned","main","projectId","forkedBranchId","961078ea-f528-11ef-aa68-569c3dd06744","forkedBranchVersion",89,"forkedProjectPrivacy","forkedProjectId","96102714-f528-11ef-aa68-569c3dd06744","forkedProjectOrgId","019aa807-52c2-709c-928b-2029bae9a558","projectName","userHandle","wohara010","handle","displayName","Billy","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/189d5be3-0aea-450f-0b6c-366cb482cb00/square512?exp=1789585199&sig=7455354b1d51675b869e816675f83a593e54464e0d3990292fa362a7b94cfd65","tier","pro","canRestrictVals","profileImageUrl","branchName","","adoptOrgId",{"_44":45,"_32":46,"_39":333,"_48":-5,"_49":25,"_50":51,"_52":51,"_53":54,"_55":56,"_18":57,"_58":59,"_60":61,"_62":-5,"_63":-5,"_64":65,"_66":67,"_68":69,"_70":71,"_72":334,"_74":-5,"_75":76,"_77":76,"_78":79,"_80":79,"_81":79,"_82":76,"_83":76,"_84":335,"_86":336,"_88":337,"_90":25},"tree",[201,203,215,217,218],"files",[201,202,203,204,205,206,207,208,209,210,211,212,213,214,215,216,217,218],"counts",{"_191":65,"_192":170,"_193":65,"_194":195,"_196":197},"contents",[149,150,151,152,153],"upstreamProject",{"_44":99,"_32":145,"_53":146,"_55":56,"_50":51,"_84":147},"upstreamBranch",{"_44":94,"_39":138,"_139":140,"_32":91,"_92":99,"_13":141,"_93":-5,"_95":-5,"_142":143,"_48":-5,"_90":25,"_50":51,"_103":144,"_66":101,"_102":145},"emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},["D",1740674013689],"updatedAt",["D",1785420707976],91,"lockfileKey","1785420708123-esm.town_v_templates_react-hono-starter@91-main","templates","react-hono-starter","Starter template with client-side React & Hono server",{"_105":144,"_113":148},"https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/129cab32-3bd7-4c3e-f39b-f12900c76100/square512?exp=1789585199&sig=e0ad9b96a0e58967744de3785adb3e9a68085da5b0c135b58439da2ef923cdc0",{"_44":185,"_32":186,"_30":187,"_156":-5,"_42":43,"_41":188,"_158":61,"_39":189,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_27":190},{"_44":180,"_32":181,"_30":182,"_156":-5,"_42":43,"_41":170,"_158":61,"_39":183,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_27":184},{"_44":173,"_32":174,"_30":175,"_156":-5,"_42":43,"_41":176,"_158":61,"_39":177,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_27":179},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":169,"_13":170,"_34":20,"_36":171,"_24":25,"_163":-5,"_27":172},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":61,"_39":159,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_27":164},"2067a8fb-924b-4b52-b3fb-06bbc19fb74c","index.ts","parentId",31,"latest",["D",1786630228230],5,"http","import { parseVal, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\nimport { blob } from \"https://esm.town/v/std/blob/main.ts\";\nimport { Hono } from \"npm:hono\";\nimport { initDb, sqlite } from \"./backend/db.ts\";\n\nawait initDb();\n\nconst app = new Hono();\n\n// --- 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\nconst CAR_FIELDS = [\n \"nickname\", \"year\", \"make\", \"model\", \"trim\", \"color\", \"vin\", \"status\",\n \"purchase_date\", \"purchase_price\", \"purchase_mileage\", \"current_mileage\",\n \"avg_mpg\", \"sold_date\", \"sold_price\", \"notes\", \"cover_file_id\",\n \"target_price\", \"listing_url\",\n];\nconst EVENT_FIELDS = [\"type\", \"title\", \"description\", \"date\", \"mileage\", \"cost\"];\n\n// ---------- Cars ----------\n\napp.get(\"/api/cars\", async (c) => {\n const result = await sqlite.execute(`\n SELECT c.*,\n (SELECT COUNT(*) FROM events e WHERE e.car_id = c.id) AS event_count,\n (SELECT COUNT(*) FROM files f WHERE f.car_id = c.id AND f.kind = 'photo') AS photo_count\n FROM cars c\n ORDER BY CASE c.status WHEN 'current' THEN 0 WHEN 'wishlist' THEN 1 ELSE 2 END, c.year DESC, c.created_at DESC\n `);\n return c.json({ cars: result.rows });\n});\n\napp.post(\"/api/cars\", async (c) => {\n const body = await c.req.json();\n if (!body.make || !body.model) return c.json({ error: \"Make and model are required\" }, 400);\n const cols = CAR_FIELDS.filter((f) => body[f] !== undefined);\n const res = await sqlite.execute({\n sql: `INSERT INTO cars (${cols.join(\", \")}) VALUES (${cols.map(() => \"?\").join(\", \")})`,\n args: cols.map((f) => body[f]),\n });\n const row = await sqlite.execute({\n sql: \"SELECT * FROM cars WHERE id = ?\",\n args: [Number(res.lastInsertRowid)],\n });\n return c.json({ car: row.rows[0] }, 201);\n});\n\napp.get(\"/api/cars/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const carRes = await sqlite.execute({ sql: \"SELECT * FROM cars WHERE id = ?\", args: [id] });\n if (!carRes.rows.length) return c.json({ error: \"Car not found\" }, 404);\n const [events, files] = await Promise.all([\n sqlite.execute({ sql: \"SELECT * FROM events WHERE car_id = ? ORDER BY id DESC\", args: [id] }),\n sqlite.execute({ sql: \"SELECT * FROM files WHERE car_id = ? ORDER BY id DESC\", args: [id] }),\n ]);\n return c.json({ car: carRes.rows[0], events: events.rows, files: files.rows });\n});\n\napp.put(\"/api/cars/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const cols = CAR_FIELDS.filter((f) => body[f] !== undefined);\n if (!cols.length) return c.json({ error: \"Nothing to update\" }, 400);\n await sqlite.execute({\n sql: `UPDATE cars SET ${cols.map((f) => `${f} = ?`).join(\", \")} WHERE id = ?`,\n args: [...cols.map((f) => body[f]), id],\n });\n const row = await sqlite.execute({ sql: \"SELECT * FROM cars WHERE id = ?\", args: [id] });\n return c.json({ car: row.rows[0] });\n});\n\napp.delete(\"/api/cars/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const files = await sqlite.execute({ sql: \"SELECT blob_key FROM files WHERE car_id = ?\", args: [id] });\n for (const row of files.rows) {\n try {\n await blob.delete(String((row as any).blob_key));\n } catch { /* blob may already be gone */ }\n }\n await sqlite.batch([\n { sql: \"DELETE FROM files WHERE car_id = ?\", args: [id] },\n { sql: \"DELETE FROM events WHERE car_id = ?\", args: [id] },\n { sql: \"DELETE FROM cars WHERE id = ?\", args: [id] },\n ]);\n return c.json({ ok: true });\n});\n\n// ---------- Events ----------\n\napp.post(\"/api/cars/:id/events\", async (c) => {\n const carId = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n if (!body.title) return c.json({ error: \"Title is required\" }, 400);\n const cols = EVENT_FIELDS.filter((f) => body[f] !== undefined);\n const res = await sqlite.execute({\n sql: `INSERT INTO events (car_id, ${cols.join(\", \")}) VALUES (?, ${cols.map(() => \"?\").join(\", \")})`,\n args: [carId, ...cols.map((f) => body[f])],\n });\n // If the event logs a higher mileage, roll the car's odometer forward\n if (body.mileage != null) {\n await sqlite.execute({\n sql: \"UPDATE cars SET current_mileage = ? WHERE id = ? AND (current_mileage IS NULL OR current_mileage < ?)\",\n args: [body.mileage, carId, body.mileage],\n });\n }\n const row = await sqlite.execute({\n sql: \"SELECT * FROM events WHERE id = ?\",\n args: [Number(res.lastInsertRowid)],\n });\n return c.json({ event: row.rows[0] }, 201);\n});\n\napp.put(\"/api/events/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const body = await c.req.json();\n const cols = EVENT_FIELDS.filter((f) => body[f] !== undefined);\n if (!cols.length) return c.json({ error: \"Nothing to update\" }, 400);\n await sqlite.execute({\n sql: `UPDATE events SET ${cols.map((f) => `${f} = ?`).join(\", \")} WHERE id = ?`,\n args: [...cols.map((f) => body[f]), id],\n });\n const row = await sqlite.execute({ sql: \"SELECT * FROM events WHERE id = ?\", args: [id] });\n return c.json({ event: row.rows[0] });\n});\n\napp.delete(\"/api/events/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n // Keep any attached files, but detach them so they revert to general car media\n await sqlite.execute({ sql: \"UPDATE files SET event_id = NULL WHERE event_id = ?\", args: [id] });\n await sqlite.execute({ sql: \"DELETE FROM events WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// ---------- Files (photos + documents, stored in blob storage) ----------\n\napp.post(\"/api/cars/:id/files\", async (c) => {\n const carId = Number(c.req.param(\"id\"));\n const form = await c.req.formData();\n const file = form.get(\"file\");\n const kind = form.get(\"kind\") === \"photo\" ? \"photo\" : \"document\";\n const caption = (form.get(\"caption\") as string) || null;\n if (!(file instanceof File)) return c.json({ error: \"No file provided\" }, 400);\n if (file.size > 9_000_000) return c.json({ error: \"File too large (9 MB max)\" }, 413);\n\n // Optionally attach the file to a specific event (must belong to this car)\n let eventId: number | null = null;\n const eventIdRaw = form.get(\"event_id\");\n if (eventIdRaw != null && String(eventIdRaw) !== \"\") {\n const eid = Number(eventIdRaw);\n const ev = await sqlite.execute({\n sql: \"SELECT id FROM events WHERE id = ? AND car_id = ?\",\n args: [eid, carId],\n });\n if (ev.rows.length) eventId = eid;\n }\n\n const key = `car${carId}-${crypto.randomUUID()}`;\n await blob.set(key, await file.arrayBuffer());\n\n const res = await sqlite.execute({\n sql: `INSERT INTO files (car_id, event_id, kind, filename, mime_type, size, blob_key, caption)\n VALUES (?, ?, ?, ?, ?, ?, ?, ?)`,\n args: [carId, eventId, kind, file.name, file.type || \"application/octet-stream\", file.size, key, caption],\n });\n const fileId = Number(res.lastInsertRowid);\n\n // First general (non-event) photo automatically becomes the cover\n if (kind === \"photo\" && eventId == null) {\n await sqlite.execute({\n sql: \"UPDATE cars SET cover_file_id = ? WHERE id = ? AND cover_file_id IS NULL\",\n args: [fileId, carId],\n });\n }\n const row = await sqlite.execute({ sql: \"SELECT * FROM files WHERE id = ?\", args: [fileId] });\n return c.json({ file: row.rows[0] }, 201);\n});\n\napp.get(\"/api/files/:id/raw\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const row = await sqlite.execute({ sql: \"SELECT * FROM files WHERE id = ?\", args: [id] });\n const f = row.rows[0] as any;\n if (!f) return c.json({ error: \"Not found\" }, 404);\n try {\n const res = await blob.get(String(f.blob_key));\n const headers = new Headers({\n \"Content-Type\": String(f.mime_type || \"application/octet-stream\"),\n \"Cache-Control\": \"private, max-age=31536000, immutable\",\n });\n if (c.req.query(\"download\") != null) {\n headers.set(\"Content-Disposition\", `attachment; filename=\"${String(f.filename).replace(/\"/g, \"\")}\"`);\n }\n return new Response(res.body, { headers });\n } catch {\n return c.json({ error: \"File data missing\" }, 404);\n }\n});\n\napp.delete(\"/api/files/:id\", async (c) => {\n const id = Number(c.req.param(\"id\"));\n const row = await sqlite.execute({ sql: \"SELECT * FROM files WHERE id = ?\", args: [id] });\n const f = row.rows[0] as any;\n if (!f) return c.json({ error: \"Not found\" }, 404);\n // If this photo was a cover, fall back to the next newest photo (or none)\n await sqlite.execute({\n sql: `UPDATE cars SET cover_file_id =\n (SELECT id FROM files WHERE car_id = cars.id AND kind = 'photo' AND id != ? ORDER BY id DESC LIMIT 1)\n WHERE cover_file_id = ?`,\n args: [id, id],\n });\n try {\n await blob.delete(String(f.blob_key));\n } catch { /* ignore */ }\n await sqlite.execute({ sql: \"DELETE FROM files WHERE id = ?\", args: [id] });\n return c.json({ ok: true });\n});\n\n// Unwrap and rethrow Hono errors as the original error\napp.onError((err) => Promise.reject(err));\n\nexport default app.fetch;\n","label",[155],"5c97674b-d308-4ab5-b7a8-eb55bf0adc5c","README.md","019f3530-a79e-72d4-b6fb-0794aaee1ad7",15,["D",1783304390278],1,"# 🏁 Garage\n\nA personal car-history tracker. Log every car you own or have owned, and keep its full story in one place: purchase details, mileage, average MPG, photos, documents, and a timeline of services, mods, and repairs.\n\n## Features\n\n- **Garage view** — cars split into *Currently own* and *Previously owned*\n- **Car detail page** — purchase date/price/mileage, current mileage (+ miles driven while owned), avg MPG, ownership duration, sold date/price, notes\n- **History timeline** — log services, mods, repairs, inspections with date, mileage, and cost. Purchase and sale appear automatically. Logging a higher mileage rolls the odometer forward.\n- **Photos** — upload multiple, click to view, set a cover photo. Images are resized client-side (~1600px JPEG) to save storage.\n- **Documents** — titles, receipts, window stickers, insurance… view, download, delete.\n\n## Architecture\n\n- `index.ts` — Hono server: serves the frontend + REST API (`/api/cars`, `/api/events`, `/api/files`)\n- `backend/db.ts` — SQLite schema (`cars`, `events`, `files`)\n- Uploads live in the val's blob storage; metadata in SQLite\n- `frontend/` — React 18 + Twind, hash routing (`#/car/:id`)\n- `scripts/smoke.ts` — in-process API smoke test (run it with `run_file`)\n\n## Notes\n\n- Blob storage is shared account-wide: 10 MB on Val Town free, 1 GB on Pro.\n- There's no auth — anyone with the URL can view/edit. Keep the URL private or make the val unlisted/private (Pro).\n",[166],"01849e93-10c1-4961-a30a-ab2f101d6b38","scripts","afce3da8-5a38-487c-bc33-9ab1acd96636",13,["D",1783304351298],"directory",[174],"6aadff12-1aae-4b3c-8714-b52f9fbe42a1","frontend","019f3530-a79e-72d4-b6fb-012e96d91805",["D",1783303808467],[181],"2c81f632-1519-4353-b465-5b0146de628b","backend","82c14309-152d-495d-9f2a-8b8f5e901108",2,["D",1783304096563],[186],"pulls","branches","forks","envVars",{"_198":65,"_200":65},"connections",{"_198":65,"_199":65},"count","unfilledCount","emptyCount",{"_44":185,"_32":186,"_30":187,"_156":-5,"_42":43,"_41":188,"_158":61,"_39":330,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_220":331,"_27":332},{"_44":322,"_32":323,"_30":324,"_156":187,"_42":43,"_41":325,"_158":61,"_39":326,"_13":188,"_34":35,"_36":327,"_24":25,"_163":-5,"_220":328,"_27":329},{"_44":180,"_32":181,"_30":182,"_156":-5,"_42":43,"_41":170,"_158":61,"_39":319,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_220":320,"_27":321},{"_44":315,"_32":277,"_30":271,"_156":182,"_42":43,"_41":170,"_158":61,"_39":316,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_220":317,"_27":318},{"_44":307,"_32":308,"_30":309,"_156":271,"_42":43,"_41":310,"_158":61,"_39":311,"_13":188,"_34":35,"_36":312,"_24":25,"_163":-5,"_220":313,"_27":314},{"_44":302,"_32":33,"_30":31,"_156":271,"_42":43,"_41":14,"_158":61,"_39":303,"_13":304,"_34":35,"_36":38,"_24":25,"_163":-5,"_220":305,"_27":306},{"_44":294,"_32":295,"_30":296,"_156":271,"_42":43,"_41":297,"_158":61,"_39":298,"_13":170,"_34":35,"_36":299,"_24":25,"_163":-5,"_220":300,"_27":301},{"_44":286,"_32":287,"_30":288,"_156":271,"_42":43,"_41":289,"_158":61,"_39":290,"_13":170,"_34":35,"_36":291,"_24":25,"_163":-5,"_220":292,"_27":293},{"_44":278,"_32":279,"_30":280,"_156":271,"_42":43,"_41":281,"_158":61,"_39":282,"_13":65,"_34":35,"_36":283,"_24":25,"_163":-5,"_220":284,"_27":285},{"_44":268,"_32":269,"_30":270,"_156":271,"_42":43,"_41":272,"_158":61,"_39":273,"_13":160,"_34":35,"_36":274,"_24":25,"_163":-5,"_220":275,"_27":276},{"_44":260,"_32":261,"_30":262,"_156":182,"_42":43,"_41":263,"_158":61,"_39":264,"_13":170,"_34":20,"_36":265,"_24":25,"_163":-5,"_220":266,"_27":267},{"_44":252,"_32":253,"_30":254,"_156":182,"_42":43,"_41":255,"_158":61,"_39":256,"_13":170,"_34":35,"_36":257,"_24":25,"_163":-5,"_220":258,"_27":259},{"_44":244,"_32":245,"_30":246,"_156":182,"_42":43,"_41":247,"_158":61,"_39":248,"_13":170,"_34":20,"_36":249,"_24":25,"_163":-5,"_220":250,"_27":251},{"_44":237,"_32":238,"_30":239,"_156":182,"_42":43,"_41":170,"_158":61,"_39":240,"_13":65,"_34":35,"_36":241,"_24":25,"_163":-5,"_220":242,"_27":243},{"_44":173,"_32":174,"_30":175,"_156":-5,"_42":43,"_41":176,"_158":61,"_39":234,"_13":65,"_34":178,"_36":-5,"_24":25,"_163":-5,"_220":235,"_27":236},{"_44":226,"_32":227,"_30":228,"_156":175,"_42":43,"_41":229,"_158":61,"_39":230,"_13":170,"_34":35,"_36":231,"_24":25,"_163":-5,"_220":232,"_27":233},{"_44":165,"_32":166,"_30":167,"_156":-5,"_42":43,"_41":168,"_158":61,"_39":223,"_13":170,"_34":20,"_36":171,"_24":25,"_163":-5,"_220":224,"_27":225},{"_44":154,"_32":155,"_30":59,"_156":-5,"_42":43,"_41":157,"_158":61,"_39":219,"_13":160,"_34":161,"_36":162,"_24":25,"_163":-5,"_220":221,"_27":222},["D",1786630228230],"children",[],[155],["D",1783304390278],[],[166],"5b32baae-bbd7-42db-8ed9-4e4a4ace6620","smoke.ts","135e6ef0-78e1-11f1-b8c7-1607ee4eb77e",28,["D",1785284695224],"// In-process smoke test: exercises every API route through the Hono app, then cleans up.\nimport handler from \"../index.ts\";\n\nconst base = \"http://garage.test\";\n\nasync function call(method: string, path: string, body?: BodyInit, headers?: HeadersInit) {\n const res = await (handler as any)(new Request(base + path, { method, body, headers }));\n const text = await res.text();\n let json: any = null;\n try {\n json = JSON.parse(text);\n } catch { /* not json */ }\n return { status: res.status, json, text: json ? undefined : text.slice(0, 120) };\n}\n\nconst json = { \"content-type\": \"application/json\" };\nconst results: any[] = [];\nconst ok = (name: string, pass: boolean, extra?: any) => results.push({ name, pass, extra });\n\n// 1. Create car\nconst created = await call(\n \"POST\",\n \"/api/cars\",\n JSON.stringify({\n make: \"Smoke\",\n model: \"Test\",\n year: 2020,\n status: \"current\",\n purchase_date: \"2020-05-01\",\n purchase_mileage: 10,\n current_mileage: 100,\n avg_mpg: 30,\n target_price: 25000,\n listing_url: \"https://example.com/listing\",\n }),\n json,\n);\nconst carId = created.json?.car?.id;\nok(\n \"create car (+ wishlist cols)\",\n created.status === 201 && !!carId && created.json?.car?.target_price === 25000,\n carId,\n);\n\n// 2. List\nconst list = await call(\"GET\", \"/api/cars\");\nok(\"list cars\", list.status === 200 && Array.isArray(list.json?.cars));\n\n// 3. Event (mileage 5000 should roll odometer forward from 100)\nconst ev = await call(\n \"POST\",\n `/api/cars/${carId}/events`,\n JSON.stringify({ type: \"service\", title: \"Oil change\", date: \"2021-01-01\", mileage: 5000, cost: 59.99 }),\n json,\n);\nconst evId = ev.json?.event?.id;\nok(\"create event\", ev.status === 201 && !!evId);\n\n// 4. Detail — check mileage bump + event present\nconst det = await call(\"GET\", `/api/cars/${carId}`);\nok(\n \"detail + odometer bump\",\n det.status === 200 && det.json?.car?.current_mileage === 5000 && det.json?.events?.length === 1,\n det.json?.car?.current_mileage,\n);\n\n// 5. Update event\nconst evUp = await call(\"PUT\", `/api/events/${evId}`, JSON.stringify({ cost: 65 }), json);\nok(\"update event\", evUp.status === 200 && evUp.json?.event?.cost === 65);\n\n// 6. Upload a document\nconst fd = new FormData();\nfd.append(\"kind\", \"document\");\nfd.append(\"file\", new File([\"hello garage\"], \"note.txt\", { type: \"text/plain\" }));\nconst up = await call(\"POST\", `/api/cars/${carId}/files`, fd);\nconst fileId = up.json?.file?.id;\nok(\"upload file\", up.status === 201 && !!fileId, up.json?.file?.blob_key);\n\n// 7. Read it back\nconst raw = await call(\"GET\", `/api/files/${fileId}/raw`);\nok(\"read file raw\", raw.status === 200 && raw.text === \"hello garage\", raw.text);\n\n// 8. Update car\nconst carUp = await call(\n \"PUT\",\n `/api/cars/${carId}`,\n JSON.stringify({ status: \"previous\", sold_date: \"2024-01-01\", sold_price: 9000 }),\n json,\n);\nok(\"update car\", carUp.status === 200 && carUp.json?.car?.status === \"previous\");\n\n// 9. Delete file, event, car (car delete also removes blobs + rows)\nok(\"delete file\", (await call(\"DELETE\", `/api/files/${fileId}`)).status === 200);\nok(\"delete event\", (await call(\"DELETE\", `/api/events/${evId}`)).status === 200);\nok(\"delete car\", (await call(\"DELETE\", `/api/cars/${carId}`)).status === 200);\n\n// 10. Confirm gone\nconst gone = await call(\"GET\", `/api/cars/${carId}`);\nok(\"car gone\", gone.status === 404);\n\nconst failed = results.filter((r) => !r.pass);\nconsole.log(JSON.stringify({ passed: results.length - failed.length, failed: failed.length, results }, null, 2));\n",[],[174,227],["D",1783304351298],[216],[174],"9241087d-c63a-41ae-93de-1d445a625876","index.tsx","019f3530-a79e-72d4-b6fa-fffe2266ad02",["D",1783303808467],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { createRoot } from \"https://esm.sh/react-dom@18.2.0/client\";\nimport { App } from \"./components/App.tsx\";\n\nconst root = document.getElementById(\"root\");\nif (!root) {\n throw new Error(\"No root element found\");\n}\n\ncreateRoot(root).render();",[],[181,238],"332ade62-9e30-4032-8ebf-9980143a625d","index.html","019f3530-a79e-72d4-b6fa-fa2c3e1aca82",11,["D",1783304325212],"\n\n \n \n \n Garage — car history tracker\n \n \n \n \n \n

\n \n \n \n\n",[],[181,245],"422a8e08-864c-46f1-bd81-1582feb2e36c","helpers.ts","9ffcae7c-78e0-11f1-896f-1607ee4eb77e",32,["D",1786630240383],"// Shared formatting + API helpers for the Garage frontend\n\nexport const EVENT_TYPES: Record = {\n service: { label: \"Service\", icon: \"🔧\", badge: \"text-sky-400 bg-sky-400/10 border-sky-400/20\", dot: \"bg-sky-400\" },\n mod: { label: \"Mod\", icon: \"⚡\", badge: \"text-purple-400 bg-purple-400/10 border-purple-400/20\", dot: \"bg-purple-400\" },\n repair: { label: \"Repair\", icon: \"🛠️\", badge: \"text-orange-400 bg-orange-400/10 border-orange-400/20\", dot: \"bg-orange-400\" },\n inspection: { label: \"Inspection\", icon: \"📋\", badge: \"text-emerald-400 bg-emerald-400/10 border-emerald-400/20\", dot: \"bg-emerald-400\" },\n purchase: { label: \"Purchased\", icon: \"🔑\", badge: \"text-amber-400 bg-amber-400/10 border-amber-400/20\", dot: \"bg-amber-400\" },\n sale: { label: \"Sold\", icon: \"🤝\", badge: \"text-rose-400 bg-rose-400/10 border-rose-400/20\", dot: \"bg-rose-400\" },\n other: { label: \"Other\", icon: \"📌\", badge: \"text-neutral-300 bg-neutral-400/10 border-neutral-500/30\", dot: \"bg-neutral-400\" },\n};\n\nexport function eventType(t: string) {\n return EVENT_TYPES[t] || EVENT_TYPES.other;\n}\n\nexport function carTitle(car: any) {\n return car.nickname || [car.year, car.make, car.model].filter(Boolean).join(\" \");\n}\n\nexport function carSubtitle(car: any) {\n const full = [car.year, car.make, car.model, car.trim].filter(Boolean).join(\" \");\n return car.nickname ? full : (car.trim || \"\");\n}\n\nexport function fmtDate(d?: string | null) {\n if (!d) return null;\n const [y, m, day] = String(d).split(\"-\").map(Number);\n if (!y || !m || !day) return String(d);\n return new Date(y, m - 1, day).toLocaleDateString(undefined, {\n year: \"numeric\",\n month: \"short\",\n day: \"numeric\",\n });\n}\n\nexport function fmtNum(n?: number | null) {\n return n == null ? null : Number(n).toLocaleString();\n}\n\nexport function fmtMoney(n?: number | null) {\n if (n == null) return null;\n const v = Number(n);\n return \"$\" + (Number.isInteger(v)\n ? v.toLocaleString()\n : v.toLocaleString(undefined, { minimumFractionDigits: 2, maximumFractionDigits: 2 }));\n}\n\nexport function fmtBytes(n?: number | null) {\n if (n == null) return \"\";\n if (n < 1024) return n + \" B\";\n if (n < 1048576) return (n / 1024).toFixed(0) + \" KB\";\n return (n / 1048576).toFixed(1) + \" MB\";\n}\n\nexport function ownedFor(from?: string | null, to?: string | null) {\n if (!from) return null;\n const start = new Date(from);\n const end = to ? new Date(to) : new Date();\n let months = (end.getFullYear() - start.getFullYear()) * 12 + (end.getMonth() - start.getMonth());\n if (isNaN(months) || months < 0) return null;\n const y = Math.floor(months / 12);\n const m = months % 12;\n if (y && m) return `${y} yr ${m} mo`;\n if (y) return `${y} yr`;\n return m ? `${m} mo` : \"< 1 mo\";\n}\n\nexport async function api(path: string, opts: any = {}) {\n const headers: Record = { ...(opts.headers || {}) };\n if (opts.body && typeof opts.body === \"string\") headers[\"Content-Type\"] = \"application/json\";\n const res = await fetch(path, { ...opts, headers });\n if (!res.ok) {\n let msg = `Request failed (${res.status})`;\n try {\n const j = await res.json();\n if (j.error) msg = j.error;\n } catch { /* not json */ }\n throw new Error(msg);\n }\n return res.json();\n}\n\n// Downscale + JPEG-compress photos client-side before upload to save blob storage\nexport async function compressImage(file: File, maxDim = 1600, quality = 0.82): Promise {\n if (!file.type.startsWith(\"image/\")) return file;\n try {\n const bmp = await createImageBitmap(file);\n const scale = Math.min(1, maxDim / Math.max(bmp.width, bmp.height));\n const w = Math.round(bmp.width * scale);\n const h = Math.round(bmp.height * scale);\n const canvas = document.createElement(\"canvas\");\n canvas.width = w;\n canvas.height = h;\n canvas.getContext(\"2d\")!.drawImage(bmp, 0, 0, w, h);\n const out: Blob | null = await new Promise((r) => canvas.toBlob(r, \"image/jpeg\", quality));\n return out && out.size < file.size ? out : file;\n } catch {\n return file;\n }\n}\n\n// Upload a file to a car, optionally linked to a specific event.\n// Images are compressed and treated as photos; everything else is a document.\nexport async function uploadCarFile(\n carId: number,\n file: File,\n opts: { kind?: \"photo\" | \"document\"; eventId?: number | null } = {},\n) {\n const kind = opts.kind || (file.type.startsWith(\"image/\") ? \"photo\" : \"document\");\n let payload: Blob = file;\n let name = file.name;\n if (kind === \"photo\") {\n payload = await compressImage(file);\n if (payload !== file) name = file.name.replace(/\\.[^.]+$/, \"\") + \".jpg\";\n }\n const fd = new FormData();\n fd.append(\"file\", payload, name);\n fd.append(\"kind\", kind);\n if (opts.eventId != null) fd.append(\"event_id\", String(opts.eventId));\n return api(`/api/cars/${carId}/files`, { method: \"POST\", body: fd });\n}\n",[],[181,253],"42f87b76-162c-4e7f-8007-67f70a2cb01a","favicon.svg","019f3530-a79e-72d4-b6fa-f7c02721a6e8",12,["D",1783304331722],"\n\n",[],[181,261],"2b9d9b81-f3a6-4649-95e2-755459b0f021","Timeline.tsx","ec757f86-78e0-11f1-af42-1607ee4eb77e","019f3530-a79e-72d4-b6fa-f3b35a448671",36,["D",1786630282551],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, EVENT_TYPES, eventType, fmtBytes, fmtDate, fmtMoney, fmtNum, uploadCarFile } from \"../helpers.ts\";\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function Timeline({ car, events, files = [], onChange }: any) {\n const [adding, setAdding] = useState(false);\n const [editing, setEditing] = useState(null);\n const [lightbox, setLightbox] = useState(null);\n const [attaching, setAttaching] = useState(null);\n const attachInput = useRef(null);\n const attachTarget = useRef(null);\n\n const items = buildTimeline(car, events);\n const attachmentsFor = (id: number) => files.filter((f: any) => f.event_id === id);\n\n async function remove(ev: any) {\n if (!confirm(`Delete \"${ev.title}\"?`)) return;\n await api(`/api/events/${ev.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n function pickAttachment(eventId: number) {\n attachTarget.current = eventId;\n attachInput.current?.click();\n }\n\n async function onAttachPicked(e: any) {\n const picked: File[] = Array.from(e.target.files || []);\n e.target.value = \"\";\n const eventId = attachTarget.current;\n if (!picked.length || eventId == null) return;\n setAttaching(eventId);\n let err = \"\";\n for (const f of picked) {\n try {\n await uploadCarFile(car.id, f, { eventId });\n } catch (e2: any) {\n err = e2.message;\n }\n }\n setAttaching(null);\n if (err) alert(\"Some attachments failed: \" + err);\n onChange();\n }\n\n async function removeAttachment(f: any) {\n if (!confirm(`Remove ${f.filename} from this event?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n {!adding && (\n {\n setAdding(true);\n setEditing(null);\n }}\n className=\"mb-4 bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Log event\n \n )}\n {(adding || editing) && (\n {\n setAdding(false);\n setEditing(null);\n }}\n onSaved={() => {\n setAdding(false);\n setEditing(null);\n onChange();\n }}\n />\n )}\n\n {items.length === 0 && (\n

\n {car.status === \"wishlist\"\n ? \"Nothing logged yet. Track test drives, listings you're watching, or price drops.\"\n : \"No history yet. Log services, mods, repairs — anything that happens to this car.\"}\n

\n )}\n\n

\n {items.map((ev: any, i: number) => {\n const t = eventType(ev.type);\n const meta = [fmtDate(ev.date), ev.mileage != null ? `${fmtNum(ev.mileage)} mi` : null, fmtMoney(ev.cost)]\n .filter(Boolean);\n return (\n \n \n

\n \n {t.icon} {t.label}\n \n

{ev.title}

\n {meta.length > 0 &&

{meta.join(\" · \")}

}\n {ev.description && (\n

{ev.description}

\n )}\n

\n {!ev.synthetic && (\n

\n pickAttachment(ev.id)}\n disabled={attaching === ev.id}\n title=\"Attach photo or invoice\"\n className=\"text-neutral-500 hover:text-amber-400 px-1.5 disabled:opacity-50\"\n >\n {attaching === ev.id ? \"…\" : \"📎\"}\n \n {\n setEditing(ev);\n setAdding(false);\n }}\n title=\"Edit\"\n className=\"text-neutral-500 hover:text-neutral-200 px-1.5\"\n >\n ✎\n \n \n

\n )}\n

\n {!ev.synthetic && (() => {\n const atts = attachmentsFor(ev.id);\n if (!atts.length) return null;\n const pics = atts.filter((f: any) => f.kind === \"photo\");\n const docs = atts.filter((f: any) => f.kind !== \"photo\");\n return (\n

\n {pics.length > 0 && (\n

\n {pics.map((f: any) => (\n

\n setLightbox(f)}\n className=\"h-20 w-20 object-cover rounded-lg border border-neutral-700 cursor-pointer\"\n />\n removeAttachment(f)}\n title=\"Remove\"\n className=\"absolute -top-1.5 -right-1.5 w-5 h-5 rounded-full bg-neutral-950/90 border border-neutral-600 text-neutral-300 hover:text-rose-400 text-xs leading-none opacity-0 group-hover/att:opacity-100 transition-opacity\"\n >\n ✕\n \n

\n ))}\n

\n )}\n {docs.map((f: any) => (\n

\n \n 📄\n {f.filename}\n {fmtBytes(f.size)}\n \n removeAttachment(f)}\n title=\"Remove\"\n className=\"text-neutral-500 hover:text-rose-400 px-1\"\n >\n ✕\n \n

\n ))}\n

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

\n );\n })}\n

\n\n \n\n {lightbox && (\n setLightbox(null)}\n >\n e.stopPropagation()}\n />\n

{lightbox.filename}

\n \n

\n )}\n

\n );\n}\n\n// Merge real events with synthetic purchase/sale entries derived from the car itself\nfunction buildTimeline(car: any, events: any[]) {\n const items: any[] = events.map((e) => ({ ...e }));\n if (car.purchase_date || car.purchase_price != null || car.purchase_mileage != null) {\n items.push({\n id: \"purchase\",\n synthetic: true,\n type: \"purchase\",\n title: \"Purchased\",\n date: car.purchase_date,\n mileage: car.purchase_mileage,\n cost: car.purchase_price,\n });\n }\n if (car.status === \"previous\" && (car.sold_date || car.sold_price != null)) {\n items.push({\n id: \"sale\",\n synthetic: true,\n type: \"sale\",\n title: \"Sold\",\n date: car.sold_date,\n cost: car.sold_price,\n });\n }\n return items.sort((a, b) =>\n String(b.date || \"9999-12-31\").localeCompare(String(a.date || \"9999-12-31\")) ||\n (Number(b.id) || Infinity) - (Number(a.id) || Infinity)\n );\n}\n\nfunction EventForm({ carId, initial, onClose, onSaved }: any) {\n const [form, setForm] = useState({\n type: initial?.type || \"service\",\n title: initial?.title || \"\",\n date: initial?.date || \"\",\n mileage: initial?.mileage ?? \"\",\n cost: initial?.cost ?? \"\",\n description: initial?.description || \"\",\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.title.trim()) {\n setError(\"Give the event a title\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n type: form.type,\n title: form.title.trim(),\n date: form.date || null,\n mileage: form.mileage === \"\" ? null : Number(form.mileage),\n cost: form.cost === \"\" ? null : Number(form.cost),\n description: form.description.trim() || null,\n };\n try {\n if (initial) {\n await api(`/api/events/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) });\n } else {\n await api(`/api/cars/${carId}/events`, { method: \"POST\", body: JSON.stringify(payload) });\n }\n onSaved();\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n );\n}\n",[],[181,277,269],"components","b9d65a74-1133-40d1-acfb-4296adf677bd","MediaSections.tsx","fe9e6d12-78e0-11f1-9c8f-1607ee4eb77e",10,["D",1783304316490],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useRef, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, compressImage, fmtBytes, fmtDate } from \"../helpers.ts\";\n\nfunction useUploader(carId: number, kind: \"photo\" | \"document\", onChange: () => void) {\n const inputRef = useRef(null);\n const [busy, setBusy] = useState<{ done: number; total: number } | null>(null);\n\n async function onPick(e: any) {\n const files: File[] = Array.from(e.target.files || []);\n e.target.value = \"\";\n if (!files.length) return;\n setBusy({ done: 0, total: files.length });\n let err = \"\";\n for (let i = 0; i < files.length; i++) {\n try {\n const f = files[i];\n let payload: Blob = f;\n let name = f.name;\n if (kind === \"photo\") {\n payload = await compressImage(f);\n if (payload !== f) name = f.name.replace(/\\.[^.]+$/, \"\") + \".jpg\";\n }\n const fd = new FormData();\n fd.append(\"file\", payload, name);\n fd.append(\"kind\", kind);\n await api(`/api/cars/${carId}/files`, { method: \"POST\", body: fd });\n } catch (e2: any) {\n err = e2.message;\n }\n setBusy({ done: i + 1, total: files.length });\n }\n setBusy(null);\n if (err) alert(\"Some uploads failed: \" + err);\n onChange();\n }\n\n return { inputRef, busy, onPick, open: () => inputRef.current?.click() };\n}\n\nexport function PhotosSection({ carId, photos, coverId, onChange }: any) {\n const up = useUploader(carId, \"photo\", onChange);\n const [lightbox, setLightbox] = useState(null);\n\n async function setCover(f: any) {\n await api(`/api/cars/${carId}`, { method: \"PUT\", body: JSON.stringify({ cover_file_id: f.id }) });\n onChange();\n }\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload photos\"}\n \n\n {photos.length === 0 && !up.busy && (\n

No photos yet. Uploads are resized automatically to save space.

\n )}\n\n

\n {photos.map((f: any) => (\n

\n setLightbox(f)}\n />\n {coverId === f.id && (\n \n ★ Cover\n \n )}\n

\n {coverId !== f.id && (\n setCover(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 hover:border-amber-500/60\"\n >\n ★ Set cover\n \n )}\n remove(f)}\n className=\"text-[11px] px-2 py-1 rounded-lg bg-black/70 border border-neutral-600 text-rose-400 hover:border-rose-500/60\"\n >\n ✕\n \n

\n ))}\n

\n\n {lightbox && (\n setLightbox(null)}\n >\n e.stopPropagation()}\n />\n

{lightbox.filename} · {fmtDate(String(lightbox.created_at).slice(0, 10))}

\n \n

\n )}\n \n );\n}\n\nexport function DocsSection({ carId, docs, onChange }: any) {\n const up = useUploader(carId, \"document\", onChange);\n\n async function remove(f: any) {\n if (!confirm(`Delete ${f.filename}?`)) return;\n await api(`/api/files/${f.id}`, { method: \"DELETE\" });\n onChange();\n }\n\n function icon(f: any) {\n const m = String(f.mime_type || \"\");\n if (m.includes(\"pdf\")) return \"📕\";\n if (m.startsWith(\"image/\")) return \"🖼️\";\n if (m.includes(\"sheet\") || m.includes(\"csv\") || m.includes(\"excel\")) return \"📊\";\n return \"📄\";\n }\n\n return (\n

\n \n \n {up.busy ? `Uploading ${up.busy.done}/${up.busy.total}…` : \"+ Upload documents\"}\n \n\n {docs.length === 0 && !up.busy && (\n

\n No documents yet. Keep titles, receipts, window stickers, insurance docs — anything tied to this car.\n

\n )}\n\n

\n {docs.map((f: any) => (\n

\n {icon(f)}\n

{f.filename}

\n {fmtBytes(f.size)} · {fmtDate(String(f.created_at).slice(0, 10))}\n

\n \n Open\n \n \n ↓\n \n remove(f)}\n className=\"px-2.5 py-1.5 rounded-lg border border-neutral-700 text-rose-400 hover:bg-rose-950/50\"\n >\n ✕\n \n

\n ))}\n

\n );\n}\n",[],[181,277,279],"0eb8d795-178a-41bb-80a3-431c9155235a","GarageView.tsx","b4aa603a-78e0-11f1-8076-1607ee4eb77e",21,["D",1785284654528],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { api, carSubtitle, carTitle, fmtDate, fmtMoney, fmtNum } from \"../helpers.ts\";\nimport { CarForm } from \"./CarForm.tsx\";\n\nexport function GarageView() {\n const [cars, setCars] = useState(null);\n const [error, setError] = useState(\"\");\n const [showForm, setShowForm] = useState(false);\n\n async function load() {\n try {\n const data = await api(\"/api/cars\");\n setCars(data.cars);\n } catch (e: any) {\n setError(e.message);\n }\n }\n useEffect(() => {\n load();\n }, []);\n\n if (error) return

Couldn't load the garage: {error}

;\n if (!cars) return

Opening the garage…

;\n\n const current = cars.filter((c) => c.status === \"current\");\n const wishlist = cars.filter((c) => c.status === \"wishlist\");\n const previous = cars.filter((c) => c.status === \"previous\");\n\n const summary = [`${current.length} in the garage`];\n if (wishlist.length) summary.push(`${wishlist.length} on the wishlist`);\n if (previous.length) summary.push(`${previous.length} previously owned`);\n\n return (\n

My Garage

{summary.join(\" · \")}

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm transition-colors\"\n >\n + Add car\n \n

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

🚗

The garage is empty

\n Add your first car — one you own, used to own, or dream about.\n

\n setShowForm(true)}\n className=\"bg-amber-500 hover:bg-amber-400 text-neutral-950 font-semibold px-4 py-2 rounded-xl text-sm\"\n >\n + Add your first car\n \n

\n )}\n\n {current.length > 0 && (\n

\n {current.map((car) => )}\n

\n )}\n {wishlist.length > 0 && (\n

\n {wishlist.map((car) => )}\n

\n )}\n {previous.length > 0 && (\n

\n {previous.map((car) => )}\n

\n )}\n\n {showForm && (\n setShowForm(false)}\n onSaved={(car: any) => {\n setShowForm(false);\n window.location.hash = `#/car/${car.id}`;\n }}\n />\n )}\n

\n );\n}\n\nfunction Section({ title, count, children }: any) {\n return (\n

\n {title} · {count}\n

{children}

\n );\n}\n\nfunction CarCard({ car }: any) {\n return (\n \n

\n {car.cover_file_id\n ? (\n \n )\n : (\n

\n {car.status === \"wishlist\" ? \"💭\" : \"🚗\"}\n

\n )}\n {car.status === \"previous\" && (\n \n Sold{car.sold_date ? ` · ${fmtDate(car.sold_date)}` : \"\"}\n \n )}\n

{carTitle(car)}

\n {carSubtitle(car) &&

{carSubtitle(car)}

}\n

\n {car.status === \"wishlist\" && car.target_price != null && 🎯 {fmtMoney(car.target_price)}}\n {car.current_mileage != null && 🛞 {fmtNum(car.current_mileage)} mi}\n {car.avg_mpg != null && ⛽ {car.avg_mpg} mpg}\n 📖 {car.event_count} {car.event_count === 1 ? \"event\" : \"events\"}\n {car.photo_count > 0 && 📷 {car.photo_count}}\n

\n \n );\n}\n",[],[181,277,287],"6195f193-fa16-442e-b341-07ab51e79dd1","CarForm.tsx","c5fae364-78e0-11f1-aba5-1607ee4eb77e",20,["D",1785284634074],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useState } from \"https://esm.sh/react@18.2.0\";\nimport { api } from \"../helpers.ts\";\n\nconst EMPTY: Record = {\n nickname: \"\",\n year: \"\",\n make: \"\",\n model: \"\",\n trim: \"\",\n color: \"\",\n vin: \"\",\n status: \"current\",\n purchase_date: \"\",\n purchase_price: \"\",\n purchase_mileage: \"\",\n current_mileage: \"\",\n avg_mpg: \"\",\n sold_date: \"\",\n sold_price: \"\",\n target_price: \"\",\n listing_url: \"\",\n notes: \"\",\n};\n\nconst inputCls =\n \"w-full bg-neutral-800 border border-neutral-700 rounded-lg px-3 py-2 text-sm text-neutral-100 placeholder-neutral-500 focus:outline-none focus:border-amber-500/70\";\n\nexport function CarForm({ initial, onClose, onSaved }: any) {\n const [form, setForm] = useState(() => {\n const f = { ...EMPTY };\n if (initial) for (const k of Object.keys(EMPTY)) f[k] = initial[k] ?? \"\";\n return f;\n });\n const [saving, setSaving] = useState(false);\n const [error, setError] = useState(\"\");\n\n const set = (k: string) => (e: any) => setForm((f: any) => ({ ...f, [k]: e.target.value }));\n const num = (v: any) => (v === \"\" || v == null ? null : Number(v));\n const str = (v: any) => (v === \"\" || v == null ? null : String(v).trim() || null);\n\n const isWish = form.status === \"wishlist\";\n\n async function submit(e: any) {\n e.preventDefault();\n if (!form.make.trim() || !form.model.trim()) {\n setError(\"Make and model are required\");\n return;\n }\n setSaving(true);\n setError(\"\");\n const payload = {\n nickname: str(form.nickname),\n year: num(form.year),\n make: form.make.trim(),\n model: form.model.trim(),\n trim: str(form.trim),\n color: str(form.color),\n vin: str(form.vin),\n status: form.status,\n purchase_date: str(form.purchase_date),\n purchase_price: num(form.purchase_price),\n purchase_mileage: num(form.purchase_mileage),\n current_mileage: num(form.current_mileage),\n avg_mpg: num(form.avg_mpg),\n sold_date: form.status === \"previous\" ? str(form.sold_date) : null,\n sold_price: form.status === \"previous\" ? num(form.sold_price) : null,\n target_price: num(form.target_price),\n listing_url: str(form.listing_url),\n notes: str(form.notes),\n };\n try {\n const data = initial?.id\n ? await api(`/api/cars/${initial.id}`, { method: \"PUT\", body: JSON.stringify(payload) })\n : await api(\"/api/cars\", { method: \"POST\", body: JSON.stringify(payload) });\n onSaved(data.car);\n } catch (err: any) {\n setError(err.message);\n setSaving(false);\n }\n }\n\n return (\n \n e.stopPropagation()}\n onSubmit={submit}\n className=\"w-full max-w-xl bg-neutral-900 border border-neutral-800 rounded-2xl p-5 my-8\"\n >\n

{initial?.id ? \"Edit car\" : \"Add a car\"}

\n \n

\n\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n {!isWish && (\n \n \n \n )}\n \n \n \n {isWish\n ? (\n \n \n \n )\n : (\n \n \n \n )}\n {isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {!isWish && (\n \n \n \n )}\n {form.status === \"previous\" && (\n \n \n \n )}\n {form.status === \"previous\" && (\n \n \n \n )}\n \n \n \n

\n\n {error &&

{error}

}\n\n

\n \n Cancel\n \n \n {saving ? \"Saving…\" : initial?.id ? \"Save changes\" : \"Add car\"}\n \n

\n \n \n );\n}\n\nfunction Field({ label, children, span }: any) {\n return (\n \n {label}\n {children}\n \n );\n}\n",[],[181,277,295],"60186706-4333-4d27-8464-cf481861c6e3",["D",1786630287524],6,[],[181,277,33],"d93feeae-34aa-4c26-bfb3-6efb5c364f3a","App.tsx","019f3530-a79e-72d4-b6fa-eb9c37956012",16,["D",1785284590626],"/** @jsxImportSource https://esm.sh/react@18.2.0 */\nimport { useEffect, useState } from \"https://esm.sh/react@18.2.0\";\nimport { GarageView } from \"./GarageView.tsx\";\nimport { CarDetail } from \"./CarDetail.tsx\";\n\nfunction useHashRoute() {\n const [hash, setHash] = useState(window.location.hash);\n useEffect(() => {\n const fn = () => setHash(window.location.hash);\n window.addEventListener(\"hashchange\", fn);\n return () => window.removeEventListener(\"hashchange\", fn);\n }, []);\n return hash;\n}\n\nexport function App() {\n const route = useHashRoute();\n const carMatch = route.match(/^#\\/car\\/(\\d+)/);\n\n return (\n

\n \n 🏁\n Garage\n \n

\n {carMatch ? : }\n

\n );\n}\n",[],[181,277,308],"8530d7fc-e53c-48e0-9d35-5e1c489f4208",["D",1783303808467],[205,206,207,208,209,210],[181,277],["D",1783303808467],[204,211,212,213,214],[181],"7d30f0fe-534d-4c09-baaa-a10281a25bc6","db.ts","7b886d06-78e0-11f1-afce-1607ee4eb77e",29,["D",1786630211604],"import { sqlite } from \"https://esm.town/v/std/sqlite/main.ts\";\n\nexport { sqlite };\n\nexport async function initDb() {\n await sqlite.batch([\n {\n sql: `CREATE TABLE IF NOT EXISTS cars (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n nickname TEXT,\n year INTEGER,\n make TEXT NOT NULL,\n model TEXT NOT NULL,\n trim TEXT,\n color TEXT,\n vin TEXT,\n status TEXT NOT NULL DEFAULT 'current',\n purchase_date TEXT,\n purchase_price REAL,\n purchase_mileage INTEGER,\n current_mileage INTEGER,\n avg_mpg REAL,\n sold_date TEXT,\n sold_price REAL,\n notes TEXT,\n cover_file_id INTEGER,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS events (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n car_id INTEGER NOT NULL,\n type TEXT NOT NULL DEFAULT 'service',\n title TEXT NOT NULL,\n description TEXT,\n date TEXT,\n mileage INTEGER,\n cost REAL,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n {\n sql: `CREATE TABLE IF NOT EXISTS files (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n car_id INTEGER NOT NULL,\n kind TEXT NOT NULL,\n filename TEXT NOT NULL,\n mime_type TEXT,\n size INTEGER,\n blob_key TEXT NOT NULL,\n caption TEXT,\n created_at TEXT NOT NULL DEFAULT (datetime('now'))\n )`,\n },\n ]);\n\n // Lightweight migrations — ignore \"duplicate column\" errors on re-run\n for (const sql of [\n \"ALTER TABLE cars ADD COLUMN target_price REAL\",\n \"ALTER TABLE cars ADD COLUMN listing_url TEXT\",\n \"ALTER TABLE files ADD COLUMN event_id INTEGER\",\n ]) {\n try {\n await sqlite.execute(sql);\n } catch { /* column already exists */ }\n }\n}\n",[],[186,323],["D",1783304096563],[202],[186],["D",1783303808467],["D",1789524079207],{"_105":104,"_113":109},{"_105":104,"_106":107,"_108":109,"_18":57,"_110":111,"_112":25},{"_13":14,"_32":91,"_44":43,"_92":45,"_93":94,"_95":96,"_97":51,"_98":99,"_100":101,"_102":46,"_103":104},"ctx",{"_84":-5,"_135":371,"_372":373,"_374":375,"_376":25,"_377":25,"_378":25,"_379":61,"_380":-5,"_381":-7,"_382":-7,"_383":65,"_384":25,"_385":25,"_386":-5,"_387":25,"_388":25,"_389":25,"_390":-5},"ENV",{"_342":343,"_344":345,"_346":91,"_347":348,"_349":350,"_351":352,"_353":354,"_355":356,"_357":358,"_359":360,"_361":362,"_363":364,"_365":366,"_367":368,"_369":370},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","fdb67791413f4386b4dbf18f354029a617f6160f","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"]

Diff · v37