${escapeHtml(storyTitle)} — HN Comments Grouped

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_153":154,"_155":156},"routes/_app.x.$handle.$name",{"_11":12,"_13":14,"_15":16,"_18":19,"_17":-7,"_116":-5,"_20":117,"_22":118,"_119":120,"_121":122,"_25":123,"_24":-5,"_124":-5,"_125":-5,"_126":53,"_127":128,"_129":53,"_130":-5,"_131":-5,"_132":133},"routes/_app.x.$handle.$name.branch.$branch.code.$",{"_11":12,"_13":14,"_15":16,"_17":-7,"_18":19,"_20":21,"_22":23,"_24":-7,"_25":26,"_27":-5,"_28":-5,"_29":-5,"_30":-5,"_31":-5},"handle","cufaoil","name","hacker-new-summarizer","branchName","main","version","path","","project",{"_33":62,"_13":14,"_45":63,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":19,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":95,"_96":97,"_98":99,"_100":53},"tree",[57],"file","contents",[32],"upstream","pull","ahead","behind","envVars",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":56},"id","560c6106-08e6-4403-8cd4-2ea94fe1f681","main.ts","fileId","3da0e3aa-8c37-11f1-a1bf-1607ee4eb77e","parentId","branchId","63df5dcc-b154-41a6-997f-aaf0b00012c0","branchVersion",13,"latest",true,"createdAt",["D",1785676786581],12,"fileType","script","content","/**\n * HN Comment Grouper — Val Town HTTP val\n *\n * Usage:\n * https://-hnCommentGrouper.web.val.run/?url=\n *\n * e.g. .../?url=https%3A%2F%2Fnews.ycombinator.com%2Fitem%3Fid%3D49098510\n *\n * Setup:\n * 1. Create this as an HTTP val on val.town.\n * 2. Add a val.town environment variable (Settings → Secrets, NOT hardcoded here):\n * ANTHROPIC_API_KEY = sk-ant-...\n * It's read server-side only via Deno.env.get and is never sent to the client.\n */\n\n// Haiku is much faster than Sonnet for a classification+summarization task like\n// this, which matters because Val Town's free tier kills a run after 60s wall-clock\n// — a big thread on Sonnet can blow past that and come back as a raw \"Bad Gateway\"\n// instead of a useful error. Bump to \"claude-sonnet-5\" if you want better grouping\n// quality and are on a paid Val Town plan (10 min timeout) or working with small threads.\nconst MODEL = \"claude-haiku-4-5-20251001\";\n\nfunction extractItemId(hnUrl: string): string | null {\n const match = hnUrl.match(/[?&]id=(\\d+)/);\n return match ? match[1] : null;\n}\n\nfunction stripHtml(html: string): string {\n return html\n .replace(/

/g, \"\\n\")\n .replace(/<[^>]+>/g, \"\")\n .replace(/>/g, \">\")\n .replace(/</g, \"<\")\n .replace(/&/g, \"&\")\n .replace(/'/g, \"'\")\n .replace(/"/g, '\"')\n .replace(/\\s+/g, \" \")\n .trim();\n}\n\ninterface FlatComment {\n id: string;\n author: string;\n text: string;\n parentId: string | null;\n depth: number;\n}\n\nfunction flattenTree(\n node: any,\n parentId: string | null,\n depth: number,\n out: FlatComment[],\n): void {\n if (!node) return;\n if (node.author && node.text) {\n out.push({\n id: String(node.id),\n author: node.author,\n text: stripHtml(node.text),\n parentId,\n depth,\n });\n }\n const kids = node.children || [];\n for (const kid of kids) {\n flattenTree(kid, node.author ? String(node.id) : parentId, depth + 1, out);\n }\n}\n\nfunction escapeHtml(s: string): string {\n return s\n .replace(/&/g, \"&\")\n .replace(//g, \">\")\n .replace(/\"/g, \""\");\n}\n\nexport default async function (req: Request): Promise {\n const reqUrl = new URL(req.url);\n const targetUrl = reqUrl.searchParams.get(\"url\");\n\n if (!targetUrl) {\n return new Response(\n \"Usage: ?url=\\ne.g. ?url=\" +\n encodeURIComponent(\"https://news.ycombinator.com/item?id=49098510\"),\n { status: 400, headers: { \"content-type\": \"text/plain\" } },\n );\n }\n\n const itemId = extractItemId(targetUrl);\n if (!itemId) {\n return new Response(\"Could not find an item id in that URL.\", {\n status: 400,\n headers: { \"content-type\": \"text/plain\" },\n });\n }\n\n console.log(`[hn-grouper] item id: ${itemId}`);\n\n // 1. Fetch the full thread tree from the Algolia HN API.\n const algoliaStart = Date.now();\n const algoliaRes = await fetch(\n `https://hn.algolia.com/api/v1/items/${itemId}`,\n );\n console.log(\n `[hn-grouper] algolia fetch: ${algoliaRes.status} in ${\n Date.now() - algoliaStart\n }ms`,\n );\n if (!algoliaRes.ok) {\n return new Response(\"Failed to fetch the HN thread.\", { status: 502 });\n }\n const story = await algoliaRes.json();\n\n const storyTitle: string = story.title || \"(untitled)\";\n const storyAuthor: string = story.author || \"\";\n const storyUrl: string | null = story.url || null;\n const storyPoints: number = story.points ?? 0;\n const hnThreadUrl = `https://news.ycombinator.com/item?id=${itemId}`;\n\n const flat: FlatComment[] = [];\n for (const kid of story.children || []) {\n flattenTree(kid, itemId, 1, flat);\n }\n\n console.log(`[hn-grouper] total comments found: ${flat.length}`);\n\n if (flat.length === 0) {\n return new Response(\"No comments found on that thread.\", { status: 200 });\n }\n\n // Cap + truncate to keep the prompt reasonably sized.\n const MAX_COMMENTS = 60;\n const MAX_CHARS_PER_COMMENT = 350;\n const trimmed = flat.slice(0, MAX_COMMENTS).map((c) => ({\n ...c,\n text: c.text.length > MAX_CHARS_PER_COMMENT\n ? c.text.slice(0, MAX_CHARS_PER_COMMENT) + \"…\"\n : c.text,\n }));\n console.log(\n `[hn-grouper] comments sent to Claude after cap: ${trimmed.length}`,\n );\n\n // 2. Ask Claude to group the comments by theme.\n const commentList = trimmed\n .map((c) =>\n `[${c.id}] (by ${c.author}${\n c.author === storyAuthor ? \", OP\" : \"\"\n }) ${c.text}`\n )\n .join(\"\\n\\n\");\n\n const systemPrompt =\n `You group Hacker News comments into thematic clusters and write a short, neutral, paraphrased summary of each comment. Never quote verbatim — always paraphrase in your own words. Respond with ONLY valid JSON, no markdown fences, no commentary, matching this exact shape:\n{\n \"groups\": [\n {\n \"title\": \"short theme title\",\n \"description\": \"one sentence describing what this group covers\",\n \"comment_ids\": [\"id1\", \"id2\"],\n \"summaries\": {\"id1\": \"under 15 words, paraphrased\", \"id2\": \"...\"}\n }\n ]\n}\nOrder groups roughly by how much discussion they generated. Every comment id from the input must appear in exactly one group. Keep summaries as short as possible while staying accurate — a phrase or short clause is fine, full sentences are not required.`;\n\n const userPrompt =\n `Story title: ${storyTitle}\\n\\nComments (format: [id] (by author) text):\\n\\n${commentList}`;\n\n const apiKey = Deno.env.get(\"ANTHROPIC_API_KEY\");\n if (!apiKey) {\n return new Response(\n \"Server misconfigured: missing ANTHROPIC_API_KEY secret.\",\n { status: 500 },\n );\n }\n\n // Val Town's free tier kills the whole run at 60s wall-clock with a bare\n // \"Bad Gateway\" and no useful message. Bail out at 45s with a clear error instead.\n const controller = new AbortController();\n const timeout = setTimeout(() => controller.abort(), 45_000);\n\n console.log(`[hn-grouper] prompt length (chars): ${userPrompt.length}`);\n const claudeStart = Date.now();\n\n let claudeRes: Response;\n try {\n claudeRes = await fetch(\"https://api.anthropic.com/v1/messages\", {\n method: \"POST\",\n headers: {\n \"content-type\": \"application/json\",\n \"x-api-key\": apiKey,\n \"anthropic-version\": \"2023-06-01\",\n },\n body: JSON.stringify({\n model: MODEL,\n max_tokens: 8192,\n system: systemPrompt,\n messages: [{ role: \"user\", content: userPrompt }],\n }),\n signal: controller.signal,\n });\n } catch (err) {\n console.log(\n `[hn-grouper] claude call threw after ${Date.now() - claudeStart}ms: ${\n String(err)\n }`,\n );\n return new Response(\n `Claude call timed out or failed before completing: ${String(err)}. ` +\n `Try a smaller thread, or lower MAX_COMMENTS further.`,\n { status: 504 },\n );\n } finally {\n clearTimeout(timeout);\n }\n\n console.log(\n `[hn-grouper] claude responded: ${claudeRes.status} in ${\n Date.now() - claudeStart\n }ms`,\n );\n\n if (!claudeRes.ok) {\n const errText = await claudeRes.text();\n console.log(`[hn-grouper] claude error body: ${errText.slice(0, 500)}`);\n return new Response(`Claude API error: ${errText}`, { status: 502 });\n }\n\n const claudeData = await claudeRes.json();\n const rawText = (claudeData.content || [])\n .filter((b: any) => b.type === \"text\")\n .map((b: any) => b.text)\n .join(\"\");\n\n console.log(`[hn-grouper] raw response length (chars): ${rawText.length}`);\n\n let parsed: { groups: any[] };\n try {\n const cleaned = rawText.replace(/^```json\\s*/i, \"\").replace(/```\\s*$/, \"\")\n .trim();\n parsed = JSON.parse(cleaned);\n console.log(`[hn-grouper] parsed ${parsed.groups?.length ?? 0} groups`);\n } catch (err) {\n console.log(\n `[hn-grouper] JSON parse failed: ${String(err)}. First 500 chars: ${\n rawText.slice(0, 500)\n }`,\n );\n return new Response(\"Could not parse Claude's grouping response.\", {\n status: 502,\n });\n }\n\n const commentById = new Map(trimmed.map((c) => [c.id, c]));\n\n // 3. Render the styled HTML page.\n const tocHtml = parsed.groups\n .map(\n (g, i) =>\n `${g.comment_ids.length} ${\n escapeHtml(g.title)\n }`,\n )\n .join(\"\\n\");\n\n const groupsHtml = parsed.groups\n .map((g, i) => {\n const commentsHtml = g.comment_ids\n .map((id: string) => {\n const c = commentById.get(id);\n if (!c) return \"\";\n const summary = g.summaries?.[id] || \"\";\n const isOp = c.author === storyAuthor;\n const indentClass = c.depth > 1 ? \" indent\" : \"\";\n return `\n

\n ${escapeHtml(c.author)}\n ${isOp ? 'OP' : \"\"}\n

${escapeHtml(summary)}

\n ↗ view on HN\n

`;\n })\n .join(\"\\n\");\n\n return `\n

${\n escapeHtml(g.title)\n }

${g.comment_ids.length}

${escapeHtml(g.description)}

\n ${commentsHtml}\n

`;\n })\n .join(\"\\n\");\n\n const html = `\n\n\n\n\n${escapeHtml(storyTitle)} — HN Comments Grouped\n\n\n\n

\n Y\n ${escapeHtml(storyTitle)} — comment groups\n ${flat.length} comments, organized by theme\n

\n ${\n storyUrl\n ? `Story: ${\n escapeHtml(storyUrl)\n } · `\n : \"\"\n }\n Thread: ${\n escapeHtml(storyTitle)\n }\n — by ${\n escapeHtml(storyAuthor)\n }, ${storyPoints} points.\n

\n \n ${groupsHtml}\n

\n\n\n`;\n\n return new Response(html, {\n headers: { \"content-type\": \"text/html; charset=utf-8\" },\n });\n}","deleted",false,"label","hncommentsummarizer",[35],{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":60,"_18":61},["D",1785676786581],"children",[],[35],"1886612c-f437-4019-a1f3-befb8902b1fd",["D",1785430430997],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","imageUrl","userId","e0205ce6-2a0e-47e7-881c-9086b72d3653","pinnedFileId","pinPreview","pinMigrated","screenshotVersion","likeCount",0,"orgId","dfcc7e70-ed38-441f-aaef-ee50575723d5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_11":12,"_115":111},"org",{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},"branch",{"_17":42,"_13":16,"_33":40,"_101":62,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"isOwned","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2Ohvm5Ijs4ypaheCWKTZFdYS9HH.png","tier","free","canRestrictVals","profileImageUrl","adoptOrgId",{"_33":62,"_13":14,"_45":149,"_64":-5,"_65":53,"_66":67,"_68":67,"_69":19,"_70":-5,"_71":72,"_73":37,"_74":44,"_75":-5,"_76":-5,"_77":78,"_79":80,"_81":-5,"_82":-5,"_83":-5,"_84":-5,"_85":86,"_87":86,"_88":89,"_90":89,"_91":89,"_92":86,"_93":86,"_94":150,"_96":151,"_98":152,"_100":53},[146],"files",[146],"counts",{"_136":78,"_137":138,"_139":78,"_31":140,"_141":142},[134],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":46,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_18":135},[35],"pulls","branches",1,"forks",{"_143":138,"_145":78},"connections",{"_143":78,"_144":78},"count","unfilledCount","emptyCount",{"_33":34,"_13":35,"_36":37,"_38":-5,"_39":40,"_41":42,"_43":44,"_45":58,"_17":47,"_48":49,"_50":51,"_52":53,"_54":55,"_59":147,"_18":148},[],[35],["D",1785430430997],{"_11":12,"_115":111},{"_11":12,"_109":-5,"_110":111,"_71":72,"_112":113,"_114":53},{"_17":42,"_13":16,"_33":40,"_101":62,"_102":-5,"_103":-5,"_104":-5,"_105":-5,"_106":-5,"_107":14,"_108":12},"ctx",{"_94":-5,"_131":186,"_187":188,"_189":190,"_191":53,"_192":53,"_193":53,"_194":44,"_195":-5,"_196":-7,"_197":-7,"_198":78,"_199":53,"_200":53,"_201":-5,"_202":53,"_203":53,"_204":53,"_205":-5},"ENV",{"_157":158,"_159":160,"_161":16,"_162":163,"_164":165,"_166":167,"_168":169,"_170":171,"_172":173,"_174":175,"_176":177,"_178":179,"_180":181,"_182":183,"_184":185},"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"]

Code