${escapeHtml(storyTitle)} — HN Comments Grouped

[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8,"_9":10},"actionData","errors","root",{"_154":155,"_156":157},"routes/_app.x.$handle.$name",{"_96":95,"_32":45,"_104":86,"_27":53,"_13":14,"_105":-5,"_11":106,"_107":108,"_109":110,"_111":112,"_113":114,"_20":-5,"_115":-5,"_116":-5,"_117":25,"_118":119,"_120":58,"_121":-5,"_122":-5,"_123":124},"routes/_app.x.$handle.$name.branch.$branch.version.$version.diff",{"_11":12,"_13":14,"_15":16,"_17":-5,"_18":-5},"project",{"_43":44,"_32":45,"_38":46,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":79,"_80":81,"_82":83,"_84":25},"version",3,"changes",[19],"aiChatInfo","userId",{"_20":21,"_22":23,"_24":25,"_26":25,"_27":28,"_29":28},"file",{"_30":31,"_32":28,"_33":37,"_35":36,"_38":39,"_40":14,"_41":42,"_24":25},"previous",{"_30":31,"_32":28,"_33":34,"_35":36},"deleted",false,"deletedHere","path","main.ts","latestPath","fileId","3da0e3aa-8c37-11f1-a1bf-1607ee4eb77e","name","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\nconst MODEL = \"claude-sonnet-5\";\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 // 1. Fetch the full thread tree from the Algolia HN API.\n const algoliaRes = await fetch(\n `https://hn.algolia.com/api/v1/items/${itemId}`,\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 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 = 300;\n const MAX_CHARS_PER_COMMENT = 600;\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\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\": \"one to two sentence paraphrased summary\", \"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 terse and factual.`;\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 const 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: 4096,\n system: systemPrompt,\n messages: [{ role: \"user\", content: userPrompt }],\n }),\n });\n\n if (!claudeRes.ok) {\n const errText = await claudeRes.text();\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 let parsed: { groups: any[] };\n try {\n const cleaned = rawText.replace(/^```json\\s*/i, \"\").replace(/```\\s*$/, \"\")\n .trim();\n parsed = JSON.parse(cleaned);\n } catch {\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}","http","createdAt",["D",1785430450389],"branchVersion","branchId","63df5dcc-b154-41a6-997f-aaf0b00012c0","id","1886612c-f437-4019-a1f3-befb8902b1fd","hacker-new-summarizer",["D",1785430430997],"deletedAt","legacyEnvVars","privacy","public","httpPrivacy","description","","imageUrl","e0205ce6-2a0e-47e7-881c-9086b72d3653","pinnedFileId","pinPreview",true,"pinMigrated","screenshotVersion","likeCount",0,"orgId","dfcc7e70-ed38-441f-aaef-ee50575723d5","tursoName","tursoHostname","tursoMeasuredAt","pinned","userPerm","r","valPerm","blobPerm","rw","emailPerm","sqlitePerm","projectPerm","telemetryPerm","user",{"_96":95,"_103":99},"org",{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},"branch",{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"isOwned",13,"main","projectId","forkedBranchId","forkedBranchVersion","forkedProjectPrivacy","forkedProjectId","forkedProjectOrgId","projectName","userHandle","cufaoil","handle","displayName","avatar","https://images.clerk.dev/oauth_github/img_2Ohvm5Ijs4ypaheCWKTZFdYS9HH.png","tier","free","canRestrictVals","profileImageUrl","branchName","adoptOrgId",{"_43":44,"_32":45,"_38":150,"_47":-5,"_48":25,"_49":50,"_51":50,"_52":53,"_54":-5,"_18":55,"_56":31,"_57":58,"_59":-5,"_60":-5,"_61":62,"_63":64,"_65":-5,"_66":-5,"_67":-5,"_68":-5,"_69":70,"_71":70,"_72":73,"_74":73,"_75":73,"_76":70,"_77":70,"_78":151,"_80":152,"_82":153,"_84":25},"tree",[145],"files",[145],"counts",{"_134":62,"_135":136,"_137":62,"_138":139,"_140":141},"contents",[125],"upstreamProject","upstreamBranch","emptyEnvVars","flags",[],"hasHttpFiles","grants","orgs","customDomains",{},{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":129,"_13":130,"_33":37,"_35":36,"_24":25,"_131":132,"_27":133},"9c41ed17-c5eb-4679-86a6-3dca6baa2083","parentId","latest",["D",1785430450389],2,"label","hncommentsummarizer",[28],"pulls","branches",1,"forks","envVars",{"_142":136,"_144":62},"connections",{"_142":62,"_143":62},"count","unfilledCount","emptyCount",{"_43":126,"_32":28,"_30":31,"_127":-5,"_41":42,"_40":14,"_128":25,"_38":146,"_13":130,"_33":37,"_35":36,"_24":25,"_131":132,"_147":148,"_27":149},["D",1785430450389],"children",[],[28],["D",1785430430997],{"_96":95,"_103":99},{"_96":95,"_97":-5,"_98":99,"_18":55,"_100":101,"_102":25},{"_13":85,"_32":86,"_43":42,"_87":44,"_88":-5,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":45,"_94":95},"ctx",{"_78":-5,"_122":187,"_188":189,"_190":191,"_192":25,"_193":25,"_194":25,"_195":58,"_196":-5,"_197":-7,"_198":-7,"_199":62,"_200":25,"_201":25,"_202":-5,"_203":25,"_204":25,"_205":25,"_206":-5},"ENV",{"_158":159,"_160":161,"_162":86,"_163":164,"_165":166,"_167":168,"_169":170,"_171":172,"_173":174,"_175":176,"_177":178,"_179":180,"_181":182,"_183":184,"_185":186},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","5015b8df46402d8bba4f485ecc37aec202b0e06b","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 · v3