[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_220":221,"_222":223},"routes/_app.x.$handle.$name",{"_96":95,"_31":43,"_104":86,"_26":51,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":24,"_118":119,"_120":121,"_122":-5,"_123":-5,"_124":125},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_41":42,"_31":43,"_36":44,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":67,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":24},"version",31,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":-7,"_23":24,"_25":24,"_26":27,"_28":27},"file",{"_29":30,"_31":27,"_32":33,"_34":35,"_36":37,"_38":14,"_39":40,"_23":24},"previous","deleted",false,"deletedHere","path","prototypes.ts","latestPath","fileId","49878248-68c2-11f1-aac8-1607ee4eb77e","name","fileType","script","content","export const prototypesHtml = `\n\n\n \n \n Static Prototypes • Val Collections\n \n \n\n\n

Static Prototypes

Early design explorations for the Val Collections dashboard. All data is fake to protect privacy.

\n ← Back to Live Dashboard\n

\n\n

\n \n

\n \n \n \n

\n\n \n

Option 1: Lightweight Tags

Multi-label system. Filter by clicking tags. Vals can have multiple tags.

\n \n \n

FILTER BY TAGS

\n\n

\n\n \n

Option 4: Dashboard Sections

Presentational grouping. Sections like Pinned, Public, Automations, Tools.

\n\n

\n\n \n

Option 5: Hybrid (Collections + Filters)

Sidebar collections + quick filters. Clicking a collection filters the grid.

\n\n

\n \n

\n\n \n

COLLECTIONS

\n\n

QUICK FILTERS

\n\n

\n These prototypes use completely fake data. They were created during the initial exploration phase before the live React version.\n

\n\n \n\n`;\n","createdAt",["D",1781531909110],"branchVersion","branchId","6fff2bea-0f51-421d-9da1-44c78781fd3f","id","d86312ad-c8d2-4bd1-8d63-6e855917a197","dashboard-collections",["D",1781468494407],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","f4bbf016-9695-4c5a-a450-16ea687f5ce9","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",2,"orgId","320a2e78-168c-40d7-8c03-3f5809852127","tursoName","d86312adc8d24bd18d636e855917a197","tursoHostname","d86312adc8d24bd18d636e855917a197-val-town.aws-us-east-2.turso.io","tursoMeasuredAt",["D",1789591905500],"pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":95,"_98":99,"_18":53,"_100":101,"_102":24},"branch",{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"isOwned",44,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","IshStahelin","handle","displayName","avatar","https://imagedelivery.net/iHX6Ovru0O7AjmyT5yZRoA/5d28a860-21fd-48d3-76db-9e82b9f09b00/square512?exp=1789614942&sig=e230466491985d1960efb5cc35462bcd58abcf32d1e963e9ed9bc97dc574f7c6","tier","pro","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_41":42,"_31":43,"_36":215,"_45":-5,"_46":24,"_47":48,"_49":48,"_50":51,"_52":-5,"_18":53,"_54":-5,"_55":24,"_56":-5,"_57":-5,"_58":59,"_60":61,"_62":63,"_64":65,"_66":216,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":217,"_80":218,"_82":219,"_84":24},"tree",[190,191,192,193,194,195],"files",[190,191,192,193,194,195],"counts",{"_180":136,"_181":169,"_182":59,"_183":184,"_185":186},"contents",[126,127,128,129,130,131],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles",true,"grants","orgs","customDomains",{},{"_41":172,"_31":173,"_29":174,"_133":-5,"_39":40,"_38":175,"_134":121,"_36":176,"_13":177,"_32":33,"_34":178,"_23":24,"_137":-5,"_26":179},{"_41":164,"_31":165,"_29":166,"_133":-5,"_39":40,"_38":167,"_134":24,"_36":168,"_13":169,"_32":20,"_34":170,"_23":24,"_137":-5,"_26":171},{"_41":157,"_31":158,"_29":159,"_133":-5,"_39":40,"_38":160,"_134":121,"_36":161,"_13":136,"_32":33,"_34":162,"_23":24,"_137":-5,"_26":163},{"_41":149,"_31":150,"_29":151,"_133":-5,"_39":40,"_38":152,"_134":24,"_36":153,"_13":154,"_32":33,"_34":155,"_23":24,"_137":-5,"_26":156},{"_41":139,"_31":140,"_29":141,"_133":-5,"_39":40,"_38":142,"_134":24,"_36":143,"_13":144,"_32":145,"_34":146,"_23":24,"_137":147,"_26":148},{"_41":132,"_31":27,"_29":30,"_133":-5,"_39":40,"_38":14,"_134":121,"_36":135,"_13":136,"_32":33,"_34":35,"_23":24,"_137":-5,"_26":138},"795ffd42-7669-4aff-a43c-a8023a32c36a","parentId","latest",["D",1781531909110],0,"label",[27],"46ef1e86-51b0-4b8b-8359-c4d6d91a6eb0","index.ts","65d798c6-6830-11f1-863a-1607ee4eb77e",27,["D",1781476515584],12,"http","import { Hono } from \"npm:hono\";\nimport ValTown from \"npm:@valtown/sdk\";\nimport sqlite from \"https://esm.town/v/std/sqlite/main.ts\";\nimport Dashboard from \"./Dashboard.tsx\";\nimport { clientScript as clientCode } from \"./client.ts\";\n\nconst app = new Hono();\n\n// Serve the client React code as /client.js (imported as string from its own .ts file, served with correct MIME type)\napp.get(\"/client.js\", (c) => {\n return c.text(clientCode, 200, { \"content-type\": \"application/javascript\" });\n});\n\n// --- DB helpers (user-private) ---\nasync function initDb() {\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS collections (\n id TEXT PRIMARY KEY,\n name TEXT NOT NULL,\n created_at INTEGER DEFAULT (unixepoch())\n )\n `);\n await sqlite.execute(`\n CREATE TABLE IF NOT EXISTS val_collections (\n val_id TEXT NOT NULL,\n collection_id TEXT NOT NULL,\n added_at INTEGER DEFAULT (unixepoch()),\n PRIMARY KEY (val_id, collection_id)\n )\n `);\n}\n\nasync function getCollections() {\n const res = await sqlite.execute(`SELECT id, name FROM collections ORDER BY name`);\n const cols = res.rows.map((r: any) => ({ id: r.id, name: r.name }));\n // Note: counts are computed in the caller or Dashboard for simplicity here\n return cols;\n}\n\nasync function createCollection(name: string) {\n const id = crypto.randomUUID();\n await sqlite.execute(\n `INSERT INTO collections (id, name) VALUES (?, ?)`,\n [id, name]\n );\n return { id, name };\n}\n\nasync function getValCollectionIds(valId: string): Promise {\n const res = await sqlite.execute(\n `SELECT collection_id FROM val_collections WHERE val_id = ?`,\n [valId]\n );\n return res.rows.map((r: any) => r.collection_id as string);\n}\n\nasync function addValToCollection(valId: string, collectionId: string) {\n await sqlite.execute(\n `INSERT OR IGNORE INTO val_collections (val_id, collection_id) VALUES (?, ?)`,\n [valId, collectionId]\n );\n}\n\nasync function removeValFromCollection(valId: string, collectionId: string) {\n await sqlite.execute(\n `DELETE FROM val_collections WHERE val_id = ? AND collection_id = ?`,\n [valId, collectionId]\n );\n}\n\n// --- API data mapping (live vals) ---\nfunction mapVal(raw: any) {\n return {\n id: raw.id,\n name: raw.name,\n desc: raw.description || \"\",\n vis: (raw.privacy || raw.visibility || \"private\").toLowerCase() === \"public\" ? \"Public\" : \"Private\",\n bigImage: false,\n };\n}\n\nasync function getLiveVals() {\n const apiKey = Deno.env.get(\"VAL_TOWN_API_KEY\");\n const vt = new ValTown(apiKey ? { bearerToken: apiKey } : {});\n let rawVals: any[] = [];\n try {\n for await (const val of vt.me.vals.list({})) {\n rawVals.push(val);\n if (rawVals.length >= 500) break;\n }\n } catch (err: any) {\n console.error(\"Failed to fetch vals via SDK:\", err?.message || err);\n throw new Error(`SDK list failed (hasToken=${!!apiKey}): ${err?.message || String(err)}`);\n }\n\n const mapped = rawVals.map(mapVal);\n for (const v of mapped) {\n (v as any).collectionIds = await getValCollectionIds(v.id);\n }\n return mapped;\n}\n\n// --- Routes ---\n\napp.get(\"/api/vals\", async (c) => {\n await initDb();\n const apiKey = Deno.env.get(\"VAL_TOWN_API_KEY\");\n const hasToken = !!apiKey;\n try {\n const vals = await getLiveVals();\n return c.json({ vals, meta: { count: vals.length, hasToken } });\n } catch (err: any) {\n console.error(\"Error in /api/vals:\", err);\n return c.json({\n error: \"Failed to load vals\",\n message: err?.message || String(err),\n hasToken,\n stack: err?.stack?.split(\"\\n\").slice(0, 8).join(\"\\n\")\n }, 500);\n }\n});\n\napp.get(\"/api/collections\", async (c) => {\n await initDb();\n try {\n const cols = await getCollections();\n const vals = await getLiveVals();\n const counts: Record = {};\n for (const col of cols) {\n counts[col.id] = vals.filter((v: any) => (v.collectionIds || []).includes(col.id)).length;\n }\n return c.json({ collections: cols.map((col) => ({ ...col, count: counts[col.id] || 0 })) });\n } catch (err: any) {\n console.error(\"Error in /api/collections:\", err);\n return c.json({ collections: [], error: err?.message || String(err) });\n }\n});\n\napp.post(\"/api/collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const name = (body.name || \"\").trim();\n if (!name) return c.json({ error: \"name required\" }, 400);\n const created = await createCollection(name);\n return c.json(created, 201);\n});\n\napp.post(\"/api/val-collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const { valId, collectionId } = body;\n if (!valId || !collectionId) return c.json({ error: \"valId and collectionId required\" }, 400);\n await addValToCollection(valId, collectionId);\n return c.json({ ok: true });\n});\n\napp.delete(\"/api/val-collections\", async (c) => {\n await initDb();\n const body = await c.req.json().catch(() => ({}));\n const { valId, collectionId } = body;\n if (!valId || !collectionId) return c.json({ error: \"valId and collectionId required\" }, 400);\n await removeValFromCollection(valId, collectionId);\n return c.json({ ok: true });\n});\n\n\n// Main page - serves the React client app shell.\n// The React app (in Dashboard.tsx) fetches data client-side from the /api/* endpoints\n// and handles all interactivity (filter by collection, create, add/remove).\napp.get(\"/\", (c) => {\n return c.html(Dashboard());\n});\n\n// Debug: plain text dump of the raw SDK response + collections\n// Visit /debug to validate that the Val Town SDK integration is returning your vals.\napp.get(\"/debug\", async (c) => {\n await initDb();\n try {\n const vals = await getLiveVals();\n const cols = await getCollections();\n const hasToken = !!Deno.env.get(\"VAL_TOWN_API_KEY\");\n return c.text(\n JSON.stringify(\n {\n hasToken,\n valCount: vals.length,\n vals, // full raw list from the SDK\n collections: cols,\n },\n null,\n 2\n ),\n 200,\n { \"content-type\": \"text/plain; charset=utf-8\" }\n );\n } catch (e: any) {\n return c.text(\"Error loading data via SDK: \" + (e?.message || String(e)), 500, { \"content-type\": \"text/plain; charset=utf-8\" });\n }\n});\n\n// Fallback\napp.all(\"*\", (c) => c.text(\"Not found\", 404));\n\nexport default app.fetch;\n","valton-collections",[140],"14387e90-e524-4af9-ac4e-c891fef2dd8c","client.ts","b4361880-6835-11f1-a579-1607ee4eb77e",28,["D",1781476669823],4,"export const clientScript = `\n// client.js - React client app for Val Collections dashboard\n// Loaded via \n \n \n \n\n\n

Val Town

Collections

\n val.town\n

\n\n \n\n

Loading React app...

\n\n \n\n`;\n}\n",[173],"pulls","branches","forks","envVars",{"_187":169,"_189":136},"connections",{"_187":136,"_188":136},"count","unfilledCount","emptyCount",{"_41":172,"_31":173,"_29":174,"_133":-5,"_39":40,"_38":175,"_134":121,"_36":212,"_13":177,"_32":33,"_34":178,"_23":24,"_137":-5,"_197":213,"_26":214},{"_41":164,"_31":165,"_29":166,"_133":-5,"_39":40,"_38":167,"_134":24,"_36":209,"_13":169,"_32":20,"_34":170,"_23":24,"_137":-5,"_197":210,"_26":211},{"_41":157,"_31":158,"_29":159,"_133":-5,"_39":40,"_38":160,"_134":121,"_36":206,"_13":136,"_32":33,"_34":162,"_23":24,"_137":-5,"_197":207,"_26":208},{"_41":149,"_31":150,"_29":151,"_133":-5,"_39":40,"_38":152,"_134":24,"_36":203,"_13":154,"_32":33,"_34":155,"_23":24,"_137":-5,"_197":204,"_26":205},{"_41":139,"_31":140,"_29":141,"_133":-5,"_39":40,"_38":142,"_134":24,"_36":200,"_13":144,"_32":145,"_34":146,"_23":24,"_137":147,"_197":201,"_26":202},{"_41":132,"_31":27,"_29":30,"_133":-5,"_39":40,"_38":14,"_134":121,"_36":196,"_13":136,"_32":33,"_34":35,"_23":24,"_137":-5,"_197":198,"_26":199},["D",1781531909110],"children",[],[27],["D",1781476515584],[],[140],["D",1781476669823],[],[150],["D",1781476246656],[],[158],["D",1781531909092],[],[165],["D",1781476246641],[],[173],["D",1781468494407],["D",1789591905500],{"_96":95,"_103":99},{"_96":95,"_97":95,"_98":99,"_18":53,"_100":101,"_102":24},{"_13":85,"_31":86,"_41":40,"_87":42,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":43,"_94":95},"ctx",{"_78":-5,"_123":253,"_254":255,"_256":257,"_258":24,"_259":24,"_260":24,"_261":121,"_262":-5,"_263":-7,"_264":-7,"_265":136,"_266":24,"_267":24,"_268":-5,"_269":24,"_270":24,"_271":24,"_272":-5},"ENV",{"_224":225,"_226":227,"_228":86,"_229":230,"_231":232,"_233":234,"_235":236,"_237":238,"_239":240,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","c73f21da490985bff19c279eb0e09db24d688e4f","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 · v31