<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Divyesh</title>
    <description>The latest articles on DEV Community by Divyesh (@divyesh5981).</description>
    <link>https://dev.to/divyesh5981</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1348271%2F3ca8b508-9d30-4c3c-919f-084e4d0a26ec.jpeg</url>
      <title>DEV Community: Divyesh</title>
      <link>https://dev.to/divyesh5981</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/divyesh5981"/>
    <language>en</language>
    <item>
      <title>Your AI Forgets Everything. Here's How Cognee Fixes It.</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Sun, 05 Jul 2026 06:36:55 +0000</pubDate>
      <link>https://dev.to/divyesh5981/your-ai-forgets-everything-heres-how-cognee-fixes-it-4hoe</link>
      <guid>https://dev.to/divyesh5981/your-ai-forgets-everything-heres-how-cognee-fixes-it-4hoe</guid>
      <description>&lt;p&gt;Have you ever noticed this?&lt;/p&gt;

&lt;p&gt;You explain your project to an AI chatbot, have a great conversation, then come back later... and it asks you to explain everything again. Start a new chat, and it's like meeting you for the first time.&lt;/p&gt;

&lt;p&gt;This isn't a bug. It's how most AI models work—they don't remember past conversations on their own.&lt;/p&gt;

&lt;p&gt;That's where &lt;a href="https://github.com/topoteretes/cognee" rel="noopener noreferrer"&gt;Cognee&lt;/a&gt; comes in. Instead of making AI start from scratch every time, it gives AI a way to remember what matters.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why does AI forget everything?
&lt;/h2&gt;

&lt;p&gt;Most AI models don't have long-term memory.&lt;/p&gt;

&lt;p&gt;Every time you start a new chat, the AI only knows what you send in that conversation. It doesn't remember your previous chats, your project, or your preferences unless you provide them again.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F87t3fegvvrktoda99icz.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F87t3fegvvrktoda99icz.png" alt="AI models forget everything" width="800" height="533"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A common solution is &lt;strong&gt;RAG (Retrieval-Augmented Generation)&lt;/strong&gt;. It stores your documents in a searchable database so the AI can look up relevant information when needed.&lt;/p&gt;

&lt;p&gt;RAG genuinely helps, but it only knows what &lt;em&gt;sounds&lt;/em&gt; similar. It doesn't know "Priya" and "the payments lead" are the same person, or that this week's ticket shares a root cause with one from March. Similarity search finds neighbors — it doesn't understand relationships.&lt;/p&gt;

&lt;p&gt;That's where &lt;strong&gt;Cognee&lt;/strong&gt; takes a different approach.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Cognee?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Cognee&lt;/strong&gt; is an open-source memory layer for AI applications.&lt;/p&gt;

&lt;p&gt;Instead of making an AI start from scratch every time, Cognee helps it remember information across conversations. It can learn from your documents, files, websites, or notes and use that knowledge whenever it's needed.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7i9yiw5lpxywkj00eza7.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F7i9yiw5lpxywkj00eza7.png" alt="Cognee" width="800" height="336"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Unlike traditional RAG systems that mainly find similar text, Cognee also understands how different pieces of information are connected. That gives AI more accurate and meaningful answers.&lt;/p&gt;

&lt;p&gt;It's Apache-2.0, runs locally by default, and has 27k+ GitHub stars.&lt;/p&gt;

&lt;h2&gt;
  
  
  How does it work?
&lt;/h2&gt;

&lt;p&gt;At a high level, the process is simple:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flowchart LR
    A[Text, Files, URLs] --&amp;gt; B[remember()]
    B --&amp;gt; C[Cognee builds AI memory]
    C --&amp;gt; D[recall()]
    D --&amp;gt; E[AI answers using remembered knowledge]
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Alice bought a Pro subscription."&lt;/p&gt;

&lt;p&gt;"Her latest payment failed."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Later, if you ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"Why can't Alice access Pro features?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Cognee connects those facts and answers:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Alice's payment failed, so her Pro subscription isn't active.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;h2&gt;
  
  
  Four operations, one lifecycle
&lt;/h2&gt;

&lt;p&gt;Cognee keeps its API simple:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Operation&lt;/th&gt;
&lt;th&gt;What it does&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;remember()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Stores new information.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;recall()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Retrieves relevant knowledge.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;code&gt;improve()&lt;/code&gt; &lt;em&gt;(&lt;code&gt;memify&lt;/code&gt;)&lt;/em&gt;
&lt;/td&gt;
&lt;td&gt;Organizes and improves stored memory over time.&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;&lt;code&gt;forget()&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Removes information when it's no longer needed.&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  Try it in 60 seconds
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pip &lt;span class="nb"&gt;install &lt;/span&gt;cognee
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;os&lt;/span&gt;
&lt;span class="n"&gt;os&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="n"&gt;environ&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;LLM_API_KEY&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;YOUR_OPENAI_API_KEY&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;cognee&lt;/span&gt;
&lt;span class="kn"&gt;import&lt;/span&gt; &lt;span class="n"&gt;asyncio&lt;/span&gt;

&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;():&lt;/span&gt;
    &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;cognee&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;remember&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;Cognee turns documents into AI memory.&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="n"&gt;results&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="n"&gt;cognee&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;recall&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;What does Cognee do?&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
    &lt;span class="k"&gt;for&lt;/span&gt; &lt;span class="n"&gt;result&lt;/span&gt; &lt;span class="ow"&gt;in&lt;/span&gt; &lt;span class="n"&gt;results&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;
        &lt;span class="nf"&gt;print&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;result&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;

&lt;span class="n"&gt;asyncio&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;run&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nf"&gt;main&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That's it. With just a few lines of code, your AI can start remembering information instead of treating every conversation like the first one.&lt;/p&gt;

&lt;h2&gt;
  
  
  Where this shows up
&lt;/h2&gt;

&lt;p&gt;Anywhere you want your AI to remember things.&lt;/p&gt;

&lt;p&gt;For example, if you tell your AI:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"I'm building a React app."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;A few days later, you ask:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;"How should I structure my project?"&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Instead of asking you to explain everything again, Cognee remembers your earlier conversation and gives a more relevant answer.&lt;/p&gt;

&lt;p&gt;This is useful for AI assistants, chatbots, coding assistants, customer support, and any application where remembering past information makes conversations smarter.&lt;/p&gt;

&lt;h2&gt;
  
  
  Cognee vs. plain RAG
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Vector DB / basic RAG&lt;/th&gt;
&lt;th&gt;Cognee&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Storage&lt;/td&gt;
&lt;td&gt;Chunks + embeddings&lt;/td&gt;
&lt;td&gt;Chunks + embeddings + knowledge graph + provenance&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Retrieval&lt;/td&gt;
&lt;td&gt;Similarity search&lt;/td&gt;
&lt;td&gt;Similarity &lt;em&gt;and&lt;/em&gt; graph traversal (12+ modes)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Relationships&lt;/td&gt;
&lt;td&gt;Not modeled&lt;/td&gt;
&lt;td&gt;Explicit graph edges&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Improves over time&lt;/td&gt;
&lt;td&gt;No&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;improve()&lt;/code&gt; prunes and reweights&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Deleting data&lt;/td&gt;
&lt;td&gt;Manual / all-or-nothing&lt;/td&gt;
&lt;td&gt;
&lt;code&gt;forget()&lt;/code&gt; at item, dataset, or user level&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Setup&lt;/td&gt;
&lt;td&gt;Minimal&lt;/td&gt;
&lt;td&gt;Minimal locally; more knobs in production&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;h2&gt;
  
  
  When to use it
&lt;/h2&gt;

&lt;p&gt;Use Cognee if your AI needs to remember users, projects, or previous conversations over time.&lt;/p&gt;

&lt;p&gt;If you only need to search a few documents, a traditional RAG setup is usually enough.&lt;/p&gt;

&lt;h2&gt;
  
  
  Wrapping up
&lt;/h2&gt;

&lt;p&gt;LLMs are great at answering questions, but they don't remember anything on their own.&lt;/p&gt;

&lt;p&gt;Cognee fills that gap by giving AI long-term memory. Instead of starting from scratch every time, your AI can remember what it has learned and use that knowledge in future conversations.&lt;/p&gt;

&lt;p&gt;If you're building AI agents, chatbots, or assistants, Cognee is definitely worth exploring.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What's the one thing you'd want an AI agent to remember about you, permanently?&lt;/strong&gt; Drop it in the comments and if you're building for the Cognee hackathon, link it below.&lt;/p&gt;

</description>
      <category>cognee</category>
      <category>ai</category>
      <category>opensource</category>
      <category>rag</category>
    </item>
    <item>
      <title>OSS Maintainers Lose Hours to Vague Issues. I Built a GitHub Action to Fix That.</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Wed, 24 Jun 2026 04:33:55 +0000</pubDate>
      <link>https://dev.to/divyesh5981/oss-maintainers-lose-hours-to-vague-issues-i-built-a-github-action-to-fix-that-4kce</link>
      <guid>https://dev.to/divyesh5981/oss-maintainers-lose-hours-to-vague-issues-i-built-a-github-action-to-fix-that-4kce</guid>
      <description>&lt;p&gt;I've been on both sides of the GitHub issue wall.&lt;/p&gt;

&lt;p&gt;As a contributor, I've spent time writing what I thought was a decent bug report, only to get a one-liner back: &lt;em&gt;"Can you share a repro?"&lt;/em&gt; Three days later I reply. No response. Issue goes stale.&lt;/p&gt;

&lt;p&gt;As someone who's poked around in open source repos, I've seen maintainers close issues with a "not enough info" label that they clearly copy-pasted from a template. You can't blame them — doing that manually for every bad issue is exhausting.&lt;/p&gt;

&lt;p&gt;That friction is what I tried to fix.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Context: A 72-Hour Hackathon About Slop Detection
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.linkedin.com/company/hackathonraptors/" rel="noopener noreferrer"&gt;Hackathon Raptors&lt;/a&gt; ran the Slop Scan hackathon with a clear brief: build something that detects low-quality content. Most participants went after social media posts or AI-generated text.&lt;/p&gt;

&lt;p&gt;I looked at GitHub issues.&lt;/p&gt;

&lt;p&gt;They're a form of content too, and they have a very clear quality signal: does this issue give a maintainer enough information to act on it, or not? That's binary and measurable. I could build a scoring system around it.&lt;/p&gt;

&lt;p&gt;The result was &lt;strong&gt;Signal-OSS&lt;/strong&gt; — a GitHub Action that scores every new issue from 0 to 10, always posts a structured comment with a checklist tailored to that score, and edits that comment if the contributor updates their issue.&lt;/p&gt;

&lt;p&gt;I placed 5th overall and won the &lt;strong&gt;Best Detection Accuracy Award&lt;/strong&gt;. Here's what I actually built.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Problem With Current Issue Triage
&lt;/h2&gt;

&lt;p&gt;Most repos handle bad issues in one of two ways:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The maintainer manually replies asking for more info. This is time-consuming and inconsistent.&lt;/li&gt;
&lt;li&gt;A generic bot closes the issue after N days of inactivity. This is blunt and often alienates contributors who just forgot to follow up.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Neither approach tells the contributor &lt;em&gt;what&lt;/em&gt; is actually missing. That's the gap Signal-OSS targets.&lt;/p&gt;

&lt;p&gt;The goal isn't to reject bad issues — it's to convert them into good ones by being specific about what's missing.&lt;/p&gt;




&lt;h2&gt;
  
  
  What It Looks Like in Practice
&lt;/h2&gt;

&lt;p&gt;When a new issue is opened, Signal-OSS runs and always posts a comment — within seconds. What changes based on the score is the &lt;em&gt;content&lt;/em&gt; of that comment: a high-scoring issue gets a checklist confirming what's already present, while a low-scoring one gets a checklist of what's specifically missing from that issue.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyy48vi28wbblcd9xgexd.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fyy48vi28wbblcd9xgexd.png" alt="a newly opened GitHub issue with the bot comment appearing automatically at the bottom" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;a newly opened GitHub issue with the bot comment appearing automatically at the bottom&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The comment isn't generic. It's generated based on the actual signals detected in &lt;em&gt;that&lt;/em&gt; issue — not a boilerplate reply, but a specific breakdown the contributor can act on.&lt;/p&gt;




&lt;h2&gt;
  
  
  How the Scoring Engine Works
&lt;/h2&gt;

&lt;p&gt;This is the part I find most interesting to explain.&lt;/p&gt;

&lt;p&gt;The naive approach would be: send the issue to an LLM, ask it to score it, done. That works, but it couples every issue to an external API call — slow, potentially costly, and requires a key just to get started.&lt;/p&gt;

&lt;p&gt;Signal-OSS takes a different approach: &lt;strong&gt;heuristics first, LLM only as an optional tiebreaker.&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 1: 7 Heuristic Signals
&lt;/h3&gt;

&lt;p&gt;Before any LLM is involved, the action checks 7 rule-based signals:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Does it include a stack trace?&lt;/li&gt;
&lt;li&gt;Are reproduction steps present?&lt;/li&gt;
&lt;li&gt;Is a version number mentioned?&lt;/li&gt;
&lt;li&gt;Is there expected vs actual behavior described?&lt;/li&gt;
&lt;li&gt;Is there a code block with relevant code?&lt;/li&gt;
&lt;li&gt;Is there an environment description?&lt;/li&gt;
&lt;li&gt;Does the issue have a clear, descriptive title (not just "bug" or "error")?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Each signal contributes to the score. Issues that pass most of these signals will likely land above 7. Issues that fail most will land below 3. Both cases get handled without any LLM call.&lt;/p&gt;

&lt;h3&gt;
  
  
  Step 2: The Ambiguous Zone (4–6)
&lt;/h3&gt;

&lt;p&gt;Issues that land in the 4–6 range are genuinely ambiguous. Maybe the repro steps are there but vague. Maybe there's a stack trace but no environment context. For these, the heuristics can't reliably decide.&lt;/p&gt;

&lt;p&gt;This is the only zone where an LLM &lt;em&gt;can&lt;/em&gt; get called — and only if you've provided an API key. Signal-OSS is BYOK: bring your own LLM key if you want the smarter scoring, leave it out and the action still works. For the ambiguous zone specifically, omitting the key falls back to the standard heuristic checklist, which is good enough for most repos.&lt;/p&gt;

&lt;p&gt;The result: &lt;strong&gt;the action is fully functional with zero external API keys&lt;/strong&gt;. The LLM layer is an opt-in upgrade, not a requirement.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Comment and Labels
&lt;/h3&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0qabozutbuhqt2d90552.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F0qabozutbuhqt2d90552.png" alt="the bot's comment showing the checklist and  raw `needs-info` endraw  label option" width="800" height="450"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;the bot's comment showing the checklist and &lt;code&gt;needs-info&lt;/code&gt; label option&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdnxlgcv9h4plpxpqx6t9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fdnxlgcv9h4plpxpqx6t9.png" alt="the bot's comment showing the  raw `signal-oss-ignore` endraw  label option" width="800" height="474"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;the bot's comment showing the &lt;code&gt;signal-oss-ignore&lt;/code&gt; label option&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;The bot also:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Applies a &lt;code&gt;needs-info&lt;/code&gt; label automatically on low scores&lt;/li&gt;
&lt;li&gt;Adds a &lt;code&gt;signal-oss-ignore&lt;/code&gt; label option — if a maintainer adds this to any issue, the bot stays completely silent for that issue&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Edits its own comment&lt;/strong&gt; if the contributor updates the issue and the score improves — no spamming the thread with multiple bot replies&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Setup Is One File
&lt;/h2&gt;

&lt;p&gt;This was a deliberate design constraint I set early: the activation path has to be a single YAML file. No secrets to configure, no dashboard to sign up for.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight yaml"&gt;&lt;code&gt;&lt;span class="c1"&gt;# .github/workflows/triage.yml&lt;/span&gt;
&lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Signal-OSS Issue Triage&lt;/span&gt;

&lt;span class="na"&gt;on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;issues&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;types&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="pi"&gt;[&lt;/span&gt;&lt;span class="nv"&gt;opened&lt;/span&gt;&lt;span class="pi"&gt;,&lt;/span&gt; &lt;span class="nv"&gt;reopened&lt;/span&gt;&lt;span class="pi"&gt;]&lt;/span&gt;

&lt;span class="na"&gt;permissions&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;contents&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;read&lt;/span&gt;
  &lt;span class="na"&gt;issues&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;write&lt;/span&gt;

&lt;span class="na"&gt;jobs&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
  &lt;span class="na"&gt;triage&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
    &lt;span class="na"&gt;runs-on&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;ubuntu-latest&lt;/span&gt;
    &lt;span class="na"&gt;if&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;github.actor != 'github-actions[bot]'&lt;/span&gt;
    &lt;span class="na"&gt;steps&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
      &lt;span class="pi"&gt;-&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Triage issue&lt;/span&gt;
        &lt;span class="na"&gt;uses&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;Divyesh-5981/signal-oss@v1&lt;/span&gt;
        &lt;span class="na"&gt;env&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt;
          &lt;span class="na"&gt;GITHUB_TOKEN&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s"&gt;${{ secrets.GITHUB_TOKEN }}&lt;/span&gt;
          &lt;span class="na"&gt;model&lt;/span&gt;&lt;span class="pi"&gt;:&lt;/span&gt; &lt;span class="s1"&gt;'&lt;/span&gt;&lt;span class="s"&gt;none'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The &lt;code&gt;GITHUB_TOKEN&lt;/code&gt; is automatically provided by GitHub Actions — no setup needed. The action works fully without the LLM key, using the standard heuristic checklist for all issues including the ambiguous 4–6 zone. If you add a key, ambiguous issues get LLM-refined scoring instead. Drop the file into &lt;code&gt;.github/workflows/&lt;/code&gt; and you're done either way.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6qz94p7ym1elhjvnuf8p.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F6qz94p7ym1elhjvnuf8p.png" alt=" " width="800" height="651"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;the summary view in the Actions tab showing the run result and the score output&lt;/em&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Benchmark Numbers (and Why Precision Is Lower Than Recall)
&lt;/h2&gt;

&lt;p&gt;I benchmarked Signal-OSS on real issues from three large repositories: &lt;code&gt;microsoft/vscode&lt;/code&gt;, &lt;code&gt;facebook/react&lt;/code&gt;, and &lt;code&gt;rust-lang/rust&lt;/code&gt;.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Metric&lt;/th&gt;
&lt;th&gt;Score&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Precision&lt;/td&gt;
&lt;td&gt;0.66&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Recall&lt;/td&gt;
&lt;td&gt;0.93&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;F1&lt;/td&gt;
&lt;td&gt;0.77&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;The precision being lower than recall was intentional. Here's the tradeoff:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;High recall&lt;/strong&gt; means the system rarely misses a bad issue. If something is genuinely low-quality, Signal-OSS will catch it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Lower precision&lt;/strong&gt; means it sometimes flags issues that are actually fine. This results in false positives — good issues that get a comment asking for more detail.&lt;/p&gt;

&lt;p&gt;For this use case, that's the right tradeoff. Missing a bad issue (false negative) wastes maintainer time. Flagging a good issue (false positive) is slightly annoying for the contributor but recoverable — they can see the score is borderline and move on, or the maintainer can apply &lt;code&gt;signal-oss-ignore&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;If I'd optimized for precision, I'd be missing bad issues constantly. That defeats the purpose.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I'd Do Differently
&lt;/h2&gt;

&lt;p&gt;A few honest notes from the hackathon:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The 4–6 threshold was arbitrary.&lt;/strong&gt; I chose it based on intuition and tested it during the benchmark, but a configurable threshold would make Signal-OSS more useful across different repo cultures. A high-volume OSS project might want stricter rules than a small internal tool.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The heuristics are English-biased.&lt;/strong&gt; All 7 signal checks were designed for English-language issues. Issues written in other languages will score lower by default, which isn't fair. This is worth fixing before any serious adoption.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;I benchmarked on large repos.&lt;/strong&gt; The issue quality distribution in &lt;code&gt;vscode&lt;/code&gt; or &lt;code&gt;react&lt;/code&gt; is probably different from smaller, less-structured projects. The benchmark numbers may not generalize.&lt;/p&gt;




&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;

&lt;p&gt;The repo is linked below. If you maintain an open-source project and issue triage is eating your time, this is worth a look.&lt;/p&gt;

&lt;p&gt;Two things I'd find genuinely useful from you:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;If you test it&lt;/strong&gt;: tell me in the comments whether the false positive rate felt acceptable on your repo.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;If you've solved this differently&lt;/strong&gt;: I'm curious what other approaches people have tried. Probot? Custom webhooks? Just closing everything immediately?&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;👇 Drop your thoughts below. And if this was useful, the ❤️ helps other maintainers find it.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Built during the Slop Scan hackathon organized by &lt;a href="https://www.linkedin.com/company/hackathonraptors/" rel="noopener noreferrer"&gt;Hackathon Raptors&lt;/a&gt;. Repo in the comments.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Note: The code, benchmarks, and project idea in this post are 100% my own work from the Slop Scan hackathon, but I used AI assistance to help structure and write this article.&lt;/p&gt;

</description>
      <category>github</category>
      <category>opensource</category>
      <category>githubactions</category>
      <category>devops</category>
    </item>
    <item>
      <title>We Added React Doctor to Our UI Kit Monorepo. Here's What It Found.</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Fri, 19 Jun 2026 06:00:37 +0000</pubDate>
      <link>https://dev.to/divyesh5981/we-added-react-doctor-to-our-ui-kit-monorepo-heres-what-it-found-eef</link>
      <guid>https://dev.to/divyesh5981/we-added-react-doctor-to-our-ui-kit-monorepo-heres-what-it-found-eef</guid>
      <description>&lt;p&gt;Maintaining a component library means living with a specific kind of anxiety.&lt;/p&gt;

&lt;p&gt;Not the obvious bugs — those get caught. It's the quiet ones: a &lt;code&gt;useEffect&lt;/code&gt; that shouldn't exist, a re-render that compounds across ten consuming apps, an accessibility gap that slipped through because ESLint didn't have a rule for it.&lt;/p&gt;

&lt;p&gt;That's the gap React Doctor fills.&lt;/p&gt;




&lt;h2&gt;
  
  
  What Is React Doctor?
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://www.react.doctor/" rel="noopener noreferrer"&gt;React Doctor&lt;/a&gt; is a static analyzer built specifically for React and React Native codebases. One command scans your project and surfaces issues across:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;State and effect anti-patterns&lt;/li&gt;
&lt;li&gt;Performance regressions&lt;/li&gt;
&lt;li&gt;Accessibility risks&lt;/li&gt;
&lt;li&gt;Architecture smells&lt;/li&gt;
&lt;li&gt;Security concerns&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's not a replacement for ESLint — it's a second opinion that catches what ESLint misses.&lt;/p&gt;




&lt;h2&gt;
  
  
  Setup in a Monorepo
&lt;/h2&gt;

&lt;p&gt;Adding it to our &lt;code&gt;ui-kit-lib&lt;/code&gt; took about five minutes:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;package.json&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"scripts"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"doctor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"react-doctor"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;},&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"devDependencies"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"react-doctor"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="s2"&gt;"0.2.5"&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For a monorepo with Storybook, generated output, and test artifacts, a scoped ignore config keeps the signal clean:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight json"&gt;&lt;code&gt;&lt;span class="err"&gt;//&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="err"&gt;react-doctor.config.json&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="nl"&gt;"ignore"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="nl"&gt;"files"&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt;&lt;span class="w"&gt; &lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"**/dist/**"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"**/storybook-static/**"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"**/coverage/**"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"**/.cache/**"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;&lt;span class="w"&gt;
      &lt;/span&gt;&lt;span class="s2"&gt;"**/tmp/**"&lt;/span&gt;&lt;span class="w"&gt;
    &lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;&lt;span class="w"&gt;
  &lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="w"&gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Without this, React Doctor scans build output and inflates the findings with noise.&lt;/p&gt;




&lt;h2&gt;
  
  
  What It Actually Caught
&lt;/h2&gt;

&lt;p&gt;Our workspace includes UI components, primitives, icons, locale packages, and a Storybook app. Each package passes TypeScript, formatting, and linting — but that's not the same as being &lt;em&gt;clean&lt;/em&gt;.&lt;/p&gt;

&lt;p&gt;Here are two patterns it flagged that are easy to miss in review:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Inline array computation on every render:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ Runs filter on every render&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filteredItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;visible&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Select&lt;/span&gt; &lt;span class="na"&gt;options&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filteredItems&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ✅ Stable reference, only recomputes when items changes&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;filteredItems&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useMemo&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;item&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;visible&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt;
  &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;items&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Select&lt;/span&gt; &lt;span class="na"&gt;options&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="nx"&gt;filteredItems&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Derived state copied through &lt;code&gt;useEffect&lt;/code&gt;:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ❌ Extra render cycle, unnecessary sync&lt;/span&gt;
&lt;span class="nf"&gt;useEffect&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nf"&gt;setActive&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;},&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;





&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="c1"&gt;// ✅ Just read the prop directly during render&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;active&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;value&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These patterns work. They compile, they test, they ship. But at component-library scale where one primitive gets consumed across an entire product they compound quietly.&lt;/p&gt;

&lt;p&gt;After running React Doctor, we revisited and cleaned up real components including &lt;code&gt;Accordion&lt;/code&gt;, &lt;code&gt;Avatar&lt;/code&gt;, &lt;code&gt;ComboBox&lt;/code&gt;, &lt;code&gt;Modal&lt;/code&gt;, &lt;code&gt;Select&lt;/code&gt;, &lt;code&gt;SearchBox&lt;/code&gt;, &lt;code&gt;Popper&lt;/code&gt;, and &lt;code&gt;ThemeProvider&lt;/code&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Use It Effectively
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;1. Run it locally first&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;pnpm doctor
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Don't panic if the count is high on the first run. Triage by category.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;2. Fix high-signal issues first&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Prioritize in this order:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Errors before warnings&lt;/li&gt;
&lt;li&gt;Performance and re-render issues&lt;/li&gt;
&lt;li&gt;State/effect anti-patterns&lt;/li&gt;
&lt;li&gt;Accessibility findings&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;3. Add it to CI&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx react-doctor@latest &lt;span class="nb"&gt;install&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Choose &lt;strong&gt;Yes&lt;/strong&gt; when it prompts for GitHub Actions. From that point, every PR gets inline comments on the exact lines that introduced a regression — before merge, not after.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Real Value
&lt;/h2&gt;

&lt;p&gt;React Doctor won't replace code review or architectural judgment. What it does is shift the quality conversation earlier.&lt;/p&gt;

&lt;p&gt;For a UI kit, that matters more than for most projects. Every component is a shared primitive. A fragile pattern in &lt;code&gt;Select&lt;/code&gt; doesn't stay in &lt;code&gt;Select&lt;/code&gt; it lives in every form across every app that consumes the library.&lt;/p&gt;

&lt;p&gt;The shift React Doctor enabled for us:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Before:&lt;/strong&gt; "This component works."&lt;br&gt;&lt;br&gt;
&lt;strong&gt;After:&lt;/strong&gt; "This component is cleaner, safer, and less likely to regress."&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That's the kind of improvement that compounds.&lt;/p&gt;




&lt;h2&gt;
  
  
  Try It
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npx react-doctor@latest
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;No config needed to start. See what it finds on your codebase. If you maintain a design system, component library, or internal UI package, there's a good chance it surfaces something worth fixing.&lt;/p&gt;




&lt;p&gt;&lt;em&gt;Do you use any React-specific quality gates in your component library or monorepo? Curious what others are using — React Doctor, custom ESLint rules, Storybook interaction tests, visual regression, or something else.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>react</category>
      <category>webdev</category>
      <category>productivity</category>
      <category>javascript</category>
    </item>
    <item>
      <title>I Added an AI Gate Before Every git push with no-mistakes 🛡️</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Fri, 12 Jun 2026 06:14:08 +0000</pubDate>
      <link>https://dev.to/divyesh5981/i-added-an-ai-gate-before-every-git-push-with-no-mistakes-57kf</link>
      <guid>https://dev.to/divyesh5981/i-added-an-ai-gate-before-every-git-push-with-no-mistakes-57kf</guid>
      <description>&lt;p&gt;We are all using AI to write code now. Whether it's Claude Code, Aider, or Copilot, the speed is incredible. But there is a glaring bottleneck we don't talk about enough: &lt;strong&gt;AI code is often just slightly broken.&lt;/strong&gt; 🤖💥&lt;/p&gt;

&lt;p&gt;It forgets an import, misses a type definition, or fails a test.&lt;/p&gt;

&lt;p&gt;Usually, you only find out &lt;em&gt;after&lt;/em&gt; you push to GitHub. Your CI/CD pipeline turns red 🔴, and you end up polluting your Git history with a dozen commits titled &lt;code&gt;fix: linting&lt;/code&gt; or &lt;code&gt;fix: missing test variable&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;I recently found a repository called &lt;a href="https://kunchenguid.github.io/no-mistakes/" rel="noopener noreferrer"&gt;no-mistakes&lt;/a&gt; that solves this brilliantly. It acts as a local proxy between your terminal and GitHub, forcing AI to test and fix its own code before anyone else sees it.&lt;/p&gt;

&lt;p&gt;Here is why it's worth a look. 👇&lt;/p&gt;




&lt;h2&gt;
  
  
  😩 The Problem With Traditional Workflows
&lt;/h2&gt;

&lt;p&gt;Right now, developers handle broken code in two ways:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;The CI/CD Walk of Shame 🚶:&lt;/strong&gt; You push code, wait 5 minutes for GitHub Actions to fail, pull the error locally, fix it, and push again.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Pre-commit Hooks (Husky) 🐶:&lt;/strong&gt; You set up local hooks. When you try to commit, it yells at you about formatting and blocks the commit until you manually fix it.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Both methods are &lt;strong&gt;passive&lt;/strong&gt;. They tell you something is broken, but they leave the cleanup to you. When you're using an AI coding agent to generate the code in the first place, manually babysitting its output defeats the purpose.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 Enter &lt;code&gt;no-mistakes&lt;/code&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;no-mistakes&lt;/code&gt; is a CLI tool that intercepts your &lt;code&gt;git push&lt;/code&gt;. Instead of sending your code straight to origin, it routes it through a localized validation pipeline.&lt;/p&gt;

&lt;h3&gt;
  
  
  ⚙️ How it actually works:
&lt;/h3&gt;

&lt;ol&gt;
&lt;li&gt;🧱 &lt;strong&gt;The Hidden Sandbox:&lt;/strong&gt; When you trigger it, it creates a temporary git worktree in the background. Your active editor stays completely undisturbed.&lt;/li&gt;
&lt;li&gt;✅ &lt;strong&gt;Validation:&lt;/strong&gt; It runs your tests, linter, and build steps inside that isolated sandbox.&lt;/li&gt;
&lt;li&gt;🔁 &lt;strong&gt;The AI Feedback Loop:&lt;/strong&gt; If a test fails, it captures the error log and hands it back to an AI agent, essentially saying: &lt;em&gt;"You broke this test. Fix it."&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;🟢 &lt;strong&gt;The Clean Push:&lt;/strong&gt; Once the AI patches the code and all tests pass, it pushes the clean code to GitHub and auto-opens a Pull Request. It then deletes the temporary sandbox.&lt;/li&gt;
&lt;/ol&gt;




&lt;h2&gt;
  
  
  🌟 What Makes It Stand Out
&lt;/h2&gt;

&lt;p&gt;The biggest differentiator is that &lt;strong&gt;it is active, not passive.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;If a pre-commit hook fails, the process stops. If &lt;code&gt;no-mistakes&lt;/code&gt; fails, it initiates an &lt;strong&gt;agentic review loop&lt;/strong&gt;. It uses an interactive Terminal UI (TUI) to show you exactly what the AI is trying to fix. If the AI gets stuck, you can step in and provide guidance right in the terminal.&lt;/p&gt;

&lt;p&gt;It also integrates natively with tools like Claude Code. You can literally tell your agent, &lt;em&gt;"Use the /no-mistakes skill to verify and gate these changes,"&lt;/em&gt; and it will handle the entire lifecycle. 🤯&lt;/p&gt;




&lt;h2&gt;
  
  
  ✨ Key Features at a Glance
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;🔇 &lt;strong&gt;Non-Blocking:&lt;/strong&gt; Because it uses hidden worktrees, you can immediately start working on your next feature while it tests and fixes the last one in the background.&lt;/li&gt;
&lt;li&gt;🔀 &lt;strong&gt;Auto-Rebase:&lt;/strong&gt; It automatically rebases your code on top of the latest &lt;code&gt;main&lt;/code&gt; branch before testing, preventing hidden merge conflicts.&lt;/li&gt;
&lt;li&gt;📝 &lt;strong&gt;Auto-Documentation:&lt;/strong&gt; It reviews the code changes and updates your &lt;code&gt;README.md&lt;/code&gt; to keep documentation from going stale.&lt;/li&gt;
&lt;li&gt;💚 &lt;strong&gt;Clean PRs:&lt;/strong&gt; You never push failing builds upstream.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🛠️ How to Get Started
&lt;/h2&gt;

&lt;p&gt;Setup takes about 30 seconds. ⚡&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;1. Install the CLI tool globally:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl &lt;span class="nt"&gt;-fsSL&lt;/span&gt; https://raw.githubusercontent.com/kunchenguid/no-mistakes/main/docs/install.sh | sh
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;2. Initialize it in your project folder:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;no-mistakes init
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This wires up a new git remote proxy called &lt;code&gt;no-mistakes&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;3. Change how you push:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;The next time you (or your AI) finish a feature, skip &lt;code&gt;git push origin&lt;/code&gt;. Instead, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git push no-mistakes
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The tool will take over, spin up the worktree, run your suites, fix the AI's slop, and open the PR for you. 🎉&lt;/p&gt;




&lt;h2&gt;
  
  
  💬 Let's Discuss
&lt;/h2&gt;

&lt;p&gt;As AI agents write more of our code, our tooling needs to shift from &lt;strong&gt;writing&lt;/strong&gt; to &lt;strong&gt;verifying&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;How are you currently handling AI-generated bugs in your workflow? Are you still manually running tests and fixing the AI's mistakes, or have you started automating the review loop? Let me know in the comments! 👇&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>git</category>
      <category>webdev</category>
    </item>
    <item>
      <title>I Tested Nex-N2-Pro — A Free Open-Source Model That's Matching GPT-5.5 on Coding Benchmarks</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Tue, 09 Jun 2026 07:01:12 +0000</pubDate>
      <link>https://dev.to/divyesh5981/i-tested-nex-n2-pro-a-free-open-source-model-thats-matching-gpt-55-on-coding-benchmarks-3dmd</link>
      <guid>https://dev.to/divyesh5981/i-tested-nex-n2-pro-a-free-open-source-model-thats-matching-gpt-55-on-coding-benchmarks-3dmd</guid>
      <description>&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;TL;DR:&lt;/strong&gt; Nex-N2-Pro by Nex AGI is a free, open-source MoE model (397B params, 17B active) built on Qwen3.5. It scores 75.3 on Terminal-Bench 2.1 — top-3 globally, open or closed — and introduces "Adaptive Thinking" that dynamically scales its reasoning depth per task. You can run it right now on OpenRouter for free.&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  The Problem With Most Reasoning Models Today
&lt;/h2&gt;

&lt;p&gt;Every modern reasoning model has the same flaw: they think at the same depth regardless of what you ask.&lt;/p&gt;

&lt;p&gt;Ask one to add two numbers? Full chain-of-thought. 2,000 tokens of internal monologue. For &lt;code&gt;1 + 1&lt;/code&gt;.&lt;/p&gt;

&lt;p&gt;Ask it to architect a distributed system? Same 2,000 tokens. Not enough.&lt;/p&gt;

&lt;p&gt;It's like hiring someone who takes a three-hour meeting to answer "yes" and a three-hour meeting to redesign your database. The fixed-depth reasoning budget is wasteful on simple tasks and dangerously shallow on complex ones.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Nex-N2-Pro just shipped a real answer to this problem.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What Is Nex-N2-Pro?
&lt;/h2&gt;

&lt;p&gt;Nex-N2-Pro is an open-source agentic reasoning model by &lt;a href="https://nexagi.ai" rel="noopener noreferrer"&gt;Nex AGI&lt;/a&gt;, released June 2, 2026. It's post-trained on &lt;code&gt;Qwen3.5-397B-A17B&lt;/code&gt; and built specifically for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Agentic coding loops (write → run → debug → iterate)&lt;/li&gt;
&lt;li&gt;Long-horizon software engineering tasks&lt;/li&gt;
&lt;li&gt;Deep research across large document sets&lt;/li&gt;
&lt;li&gt;Tool use and function calling in agent pipelines&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It comes in two variants:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Variant&lt;/th&gt;
&lt;th&gt;Base&lt;/th&gt;
&lt;th&gt;Total Params&lt;/th&gt;
&lt;th&gt;Active Params&lt;/th&gt;
&lt;th&gt;Best for&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Nex-N2-Pro&lt;/td&gt;
&lt;td&gt;Qwen3.5-397B&lt;/td&gt;
&lt;td&gt;397B&lt;/td&gt;
&lt;td&gt;17B&lt;/td&gt;
&lt;td&gt;Full agentic workloads&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Nex-N2-mini&lt;/td&gt;
&lt;td&gt;Qwen3.5-35B&lt;/td&gt;
&lt;td&gt;35B&lt;/td&gt;
&lt;td&gt;3B&lt;/td&gt;
&lt;td&gt;Low-latency, edge deployment&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;h2&gt;
  
  
  The Architecture: Why 397B Parameters Costs Less Than You Think
&lt;/h2&gt;

&lt;p&gt;This is a &lt;strong&gt;Mixture-of-Experts (MoE)&lt;/strong&gt; model. That means despite 397B total parameters, only &lt;strong&gt;17B are active per forward pass&lt;/strong&gt;. In practice, the inference cost is closer to a 17B dense model — not a 397B one.&lt;/p&gt;

&lt;p&gt;Other key specs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Context window:&lt;/strong&gt; 262,144 tokens (262K) — load an entire codebase, no chunking needed&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Max output:&lt;/strong&gt; 256K tokens&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Native capabilities:&lt;/strong&gt; Vision, Reasoning, Tool Calling, Structured Outputs, Function Calling&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Recommended serving:&lt;/strong&gt; Nex AGI's customized &lt;code&gt;sglang&lt;/code&gt; fork (&lt;code&gt;nexagi/sglang:v0.5.12&lt;/code&gt;)&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  The Core Innovation: Agentic Thinking = Adaptive + Coherent
&lt;/h2&gt;

&lt;p&gt;Nex-N2-Pro's "Agentic Thinking" framework has two components that work together:&lt;/p&gt;

&lt;h3&gt;
  
  
  1. Adaptive Thinking — Efficiency by Design
&lt;/h3&gt;

&lt;p&gt;The model dynamically decides &lt;em&gt;whether&lt;/em&gt; to reason deeply and &lt;em&gt;how much&lt;/em&gt;, based on task complexity. Simple prompts execute fast. Multi-step agent tasks trigger structured, deep planning.&lt;/p&gt;

&lt;p&gt;This isn't just a nice property — it's architecturally enforced at training. The result:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Faster responses on straightforward tasks&lt;/li&gt;
&lt;li&gt;More reliable outcomes on hard, multi-step problems&lt;/li&gt;
&lt;li&gt;No wasted token budget on tasks that don't need it&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Coherent Thinking — One Reasoning Paradigm, All Tasks
&lt;/h3&gt;

&lt;p&gt;A single consistent reasoning framework is applied across coding, research, tool use, and multimodal tasks. No context-switching penalty when a task crosses domains (e.g., "research this API, then write code that calls it").&lt;/p&gt;

&lt;p&gt;This is what makes it genuinely useful for agentic pipelines — the model doesn't lose context or change behavior when switching between subtasks.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Full Agentic Loop
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Requirement Understanding
       ↓
   Task Planning
       ↓
 Code Implementation
       ↓
Environment Feedback (actual execution output)
       ↓
Evaluation &amp;amp; Debugging
       ↓
Continuous Iteration → back to Task Planning if needed
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The key word is &lt;strong&gt;Environment Feedback&lt;/strong&gt; — the model actually runs code, reads the output, and incorporates it. It's not simulating execution. It's doing it.&lt;/p&gt;




&lt;h2&gt;
  
  
  Benchmark Results
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Benchmark&lt;/th&gt;
&lt;th&gt;What It Measures&lt;/th&gt;
&lt;th&gt;Nex-N2-Pro Score&lt;/th&gt;
&lt;th&gt;Context&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Terminal-Bench 2.1&lt;/td&gt;
&lt;td&gt;Real terminal/coding tasks&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;75.3&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Top-3 globally (open + closed)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;GDPval&lt;/td&gt;
&lt;td&gt;Long-horizon task planning&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;1585&lt;/strong&gt;&lt;/td&gt;
&lt;td&gt;Competes with GPT-5.5&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;SWE-Atlas&lt;/td&gt;
&lt;td&gt;Real software engineering&lt;/td&gt;
&lt;td&gt;Strong&lt;/td&gt;
&lt;td&gt;Verified generalization&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;DeepSWE&lt;/td&gt;
&lt;td&gt;Agentic SWE tasks&lt;/td&gt;
&lt;td&gt;Strong&lt;/td&gt;
&lt;td&gt;End-to-end dev loops&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;For context: these aren't "write a function" benchmarks. Terminal-Bench 2.1 and SWE-Atlas test actual software engineering workflows — the kind you'd run in a real development loop.&lt;/p&gt;




&lt;h2&gt;
  
  
  How to Try It Right Now (Free)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Via OpenRouter (Zero Setup)
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;curl https://openrouter.ai/api/v1/chat/completions &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Authorization: Bearer &lt;/span&gt;&lt;span class="nv"&gt;$OPENROUTER_API_KEY&lt;/span&gt;&lt;span class="s2"&gt;"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-H&lt;/span&gt; &lt;span class="s2"&gt;"Content-Type: application/json"&lt;/span&gt; &lt;span class="se"&gt;\&lt;/span&gt;
  &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="s1"&gt;'{
    "model": "nexagi/nex-n2-pro",
    "messages": [
      {"role": "user", "content": "Refactor this function to use async/await and add error handling: [your code here]"}
    ]
  }'&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Via SiliconFlow (Free Tier — $0/M Tokens)
&lt;/h3&gt;

&lt;p&gt;Available at &lt;a href="https://siliconflow.cn" rel="noopener noreferrer"&gt;siliconflow.cn&lt;/a&gt; — model string: &lt;code&gt;Nex-AGI/Nex-N2-Pro&lt;/code&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  Self-Hosted
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;docker pull nexagi/sglang:v0.5.12
&lt;span class="c"&gt;# Then load the model weights from HuggingFace: NexAGI/Nex-N2-Pro&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  Real-World Performance: What It Actually Feels Like
&lt;/h2&gt;

&lt;p&gt;The benchmark numbers tell one story. Here's the practical one:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What it does well:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Multi-file refactoring tasks where it needs to hold context across the whole repo&lt;/li&gt;
&lt;li&gt;Debugging loops — it reads the stack trace, forms a hypothesis, patches, re-runs&lt;/li&gt;
&lt;li&gt;Tool-calling workflows where it needs to chain 5–10 API calls in sequence&lt;/li&gt;
&lt;li&gt;Research-to-code tasks (read a paper, then implement the algorithm)&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Where you'll hit limits:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Very low-latency use cases (it's still a large model; mini variant helps here)&lt;/li&gt;
&lt;li&gt;Highly specialized domain knowledge outside its training distribution&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Watch: Benchmark Review &amp;amp; Speed Test
&lt;/h2&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/HDaUWU-3NyE"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;A deep-dive benchmark review comparing Nex-N2-Pro against closed-source giants. Worth watching before you decide whether to integrate it into your stack.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Bigger Picture
&lt;/h2&gt;

&lt;p&gt;For the last two years, the open-source vs. closed-source AI gap looked like this: open models were 6–12 months behind frontier commercial models on coding benchmarks.&lt;/p&gt;

&lt;p&gt;Nex-N2-Pro changes that calculus. A 75.3 Terminal-Bench 2.1 score puts it in the same conversation as GPT-5.5 and Claude Opus 4.7 — and it's &lt;strong&gt;completely free to use&lt;/strong&gt; and &lt;strong&gt;open-weight&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;The trend is clear: the next competitive battleground isn't just raw reasoning ability. It's &lt;strong&gt;execution reliability&lt;/strong&gt; — can the model actually complete a real task end-to-end, in a real environment, without falling apart?&lt;/p&gt;

&lt;p&gt;Nex-N2-Pro's Adaptive Thinking and closed agentic loop are a serious answer to that question.&lt;/p&gt;




&lt;h2&gt;
  
  
  Discussion
&lt;/h2&gt;

&lt;p&gt;For those who've tried it: &lt;strong&gt;how does the agentic loop hold up on your actual codebase vs. your current daily driver?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Specifically curious whether the "Environment Feedback" loop meaningfully reduces back-and-forth compared to, say, Claude Code or Cursor. Drop your experience below — benchmark scores are one thing, but real-world dev workflow is another.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>opensource</category>
      <category>llm</category>
      <category>programming</category>
    </item>
    <item>
      <title>Odysseus: The Self-Hosted AI Workspace That Bundles Everything (60k+ ⭐)</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Mon, 08 Jun 2026 03:35:21 +0000</pubDate>
      <link>https://dev.to/divyesh5981/odysseus-the-self-hosted-ai-workspace-that-bundles-everything-59k--5cln</link>
      <guid>https://dev.to/divyesh5981/odysseus-the-self-hosted-ai-workspace-that-bundles-everything-59k--5cln</guid>
      <description>&lt;h2&gt;
  
  
  I Tried PewDiePie's Open-Source AI Workspace. It's Actually Good.
&lt;/h2&gt;

&lt;p&gt;Yes, that PewDiePie.&lt;/p&gt;

&lt;p&gt;Felix Kjellberg (110M YouTube subscribers) spent late 2025 building a home AI lab — 8 modified RTX 4090s, 256GB of VRAM, running on Arch Linux. He called it "The Swarm." He crashed it running 64 models in parallel.&lt;/p&gt;

&lt;p&gt;The web frontend he built for it? He open-sourced it. Called it &lt;strong&gt;Odysseus&lt;/strong&gt;. It hit 59,000 GitHub stars fast.&lt;/p&gt;

&lt;p&gt;I dug into the code expecting a glorified Ollama wrapper. It's not.&lt;/p&gt;




&lt;h2&gt;
  
  
  What it actually is
&lt;/h2&gt;

&lt;p&gt;Odysseus isn't just another chat UI. It bundles things no other self-hosted tool does in one place:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Chat&lt;/strong&gt; — local or cloud models (Ollama, vLLM, llama.cpp, OpenAI, OpenRouter, GitHub Copilot)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent mode&lt;/strong&gt; — shell, files, web, MCP tools, per-tool toggles&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Cookbook&lt;/strong&gt; — scans your GPU, recommends models that actually fit, downloads and serves them in one click&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Deep Research&lt;/strong&gt; — multi-step web research that writes you a cited report&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Email&lt;/strong&gt; — IMAP/SMTP with AI triage, auto-tagging, draft replies&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Calendar&lt;/strong&gt; — CalDAV sync with Radicale, Nextcloud, Apple, Fastmail&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Memory&lt;/strong&gt; — persistent, evolving across all your conversations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;No cloud account. No telemetry. MIT license. Everything lives in your &lt;code&gt;data/&lt;/code&gt; folder.&lt;/p&gt;




&lt;h2&gt;
  
  
  The Cookbook is the standout feature
&lt;/h2&gt;

&lt;p&gt;Every other self-hosted UI assumes you already know what model to run. Odysseus doesn't.&lt;/p&gt;

&lt;p&gt;It scans your hardware, scores 270+ models against your actual VRAM, and gives you a one-click download-and-serve. It understands GGUF vs FP8 vs AWQ. It picks the right backend (vLLM, llama.cpp, Metal on Apple Silicon). Downloaded models persist in a volume — no re-downloading after container restarts.&lt;/p&gt;

&lt;p&gt;For someone who wants local AI but finds the ecosystem confusing, this is the most accessible on-ramp that currently exists.&lt;/p&gt;




&lt;h2&gt;
  
  
  The code is better than the meme suggests
&lt;/h2&gt;

&lt;p&gt;The README has a little ASCII bear face. Don't let it fool you.&lt;/p&gt;

&lt;p&gt;The entry point &lt;code&gt;app.py&lt;/code&gt; is 1,092 lines of real production thinking. A few things that stood out:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;The &lt;code&gt;.env&lt;/code&gt; loader handles Windows BOM silently:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="nf"&gt;load_dotenv&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;encoding&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="s"&gt;utf-8-sig&lt;/span&gt;&lt;span class="sh"&gt;"&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
&lt;span class="c1"&gt;# Notepad saves UTF-8 with a BOM. Without this, AUTH_ENABLED=false
# parses as ﻿AUTH_ENABLED=false — auth is never actually disabled.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Hard timeouts on all requests, except streaming:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="n"&gt;REQUEST_HARD_TIMEOUT&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;45&lt;/span&gt;  &lt;span class="c1"&gt;# seconds
# /api/chat, /api/research, /api/shell/stream are exempt
# Everything else gets killed — no event loop lockups for all users
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Proxy-aware localhost bypass:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight python"&gt;&lt;code&gt;&lt;span class="k"&gt;def&lt;/span&gt; &lt;span class="nf"&gt;_is_trusted_loopback&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="n"&gt;request&lt;/span&gt;&lt;span class="p"&gt;):&lt;/span&gt;
    &lt;span class="c1"&gt;# Cloudflare tunnels connect FROM 127.0.0.1
&lt;/span&gt;    &lt;span class="c1"&gt;# Without this, tunnel traffic looks like localhost and bypasses auth.
&lt;/span&gt;    &lt;span class="c1"&gt;# Check for forwarding headers first.
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;There's also a full &lt;code&gt;THREAT_MODEL.md&lt;/code&gt; — rare for a project this young. It's honest about the open gaps: no shell sandbox, coarse token scopes, one SSRF vector in active remediation. That kind of transparency matters.&lt;/p&gt;




&lt;h2&gt;
  
  
  How it compares
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;Odysseus&lt;/th&gt;
&lt;th&gt;Open WebUI&lt;/th&gt;
&lt;th&gt;AnythingLLM&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Model serving (one-click)&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Email + Calendar&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Scheduled agent tasks&lt;/td&gt;
&lt;td&gt;✅&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;td&gt;❌&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Community maturity&lt;/td&gt;
&lt;td&gt;Young&lt;/td&gt;
&lt;td&gt;Established&lt;/td&gt;
&lt;td&gt;Stable&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Production-ready&lt;/td&gt;
&lt;td&gt;Not yet&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;td&gt;Yes&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;&lt;strong&gt;Open WebUI&lt;/strong&gt; (124k stars) is the mature, team-ready choice. &lt;strong&gt;AnythingLLM&lt;/strong&gt; wins on document RAG. Odysseus bets on &lt;em&gt;integration depth&lt;/em&gt; — the only tool that connects models, memory, email, calendar, and research in a single local stack.&lt;/p&gt;

&lt;p&gt;That bet is interesting even if it's not fully baked yet.&lt;/p&gt;




&lt;h2&gt;
  
  
  Getting started
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;git clone https://github.com/pewdiepie-archdaemon/odysseus.git
&lt;span class="nb"&gt;cd &lt;/span&gt;odysseus
docker compose up &lt;span class="nt"&gt;-d&lt;/span&gt; &lt;span class="nt"&gt;--build&lt;/span&gt;
&lt;span class="c"&gt;# Opens at http://localhost:7000&lt;/span&gt;
&lt;span class="c"&gt;# Temporary admin password prints in terminal on first boot&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;NVIDIA GPU passthrough:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;scripts/check-docker-gpu.sh &lt;span class="nt"&gt;--install-nvidia-toolkit&lt;/span&gt; &lt;span class="nt"&gt;--enable-nvidia-overlay&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Apple Silicon (Metal — Docker on Mac can't access the GPU):&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;./start-macos.sh  &lt;span class="c"&gt;# Opens at http://127.0.0.1:7860&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;






&lt;h2&gt;
  
  
  What's rough right now
&lt;/h2&gt;

&lt;p&gt;The roadmap says: &lt;em&gt;"I don't know what I'm doing, help."&lt;/em&gt; Appreciate the honesty.&lt;/p&gt;

&lt;p&gt;Real rough edges:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Cookbook is fragile&lt;/strong&gt; on non-standard GPU/driver combos&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Agent context bloat&lt;/strong&gt; — on 8k-context local models, tool schemas eat your window before your prompt starts&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Wide attack surface&lt;/strong&gt; — shell + email + browser + MCP in one process is a lot of trust before the sandbox PR lands&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For personal home lab: run it now. For team deployments: give it six months.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why it matters
&lt;/h2&gt;

&lt;p&gt;Subscriptions are getting expensive. Privacy policies keep shifting. A capable 12B model on a consumer GPU now costs only electricity.&lt;/p&gt;

&lt;p&gt;The missing piece has always been the &lt;em&gt;workspace layer&lt;/em&gt; — something that treats local AI as a real daily tool, not a demo. Odysseus is the most serious attempt at building that in one deployable package.&lt;/p&gt;

&lt;p&gt;It started from one person's janky home lab. It's MIT-licensed with no sales funnel. The data directory is yours. The model weights are yours.&lt;/p&gt;

&lt;p&gt;That framing matters more in 2026 than it did a year ago.&lt;/p&gt;




&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/pewdiepie-archdaemon/odysseus" rel="noopener noreferrer"&gt;pewdiepie-archdaemon/odysseus&lt;/a&gt;&lt;/p&gt;




&lt;p&gt;&lt;em&gt;What's your current self-hosted AI setup — and what would it actually take for you to move your workflows off cloud providers?&lt;/em&gt;&lt;/p&gt;

</description>
      <category>selfhosted</category>
      <category>ai</category>
      <category>opensource</category>
      <category>llm</category>
    </item>
    <item>
      <title>Reviving a 12K+ Star Abandoned Library: toastr-next v3 🍞</title>
      <dc:creator>Divyesh</dc:creator>
      <pubDate>Wed, 27 May 2026 04:59:28 +0000</pubDate>
      <link>https://dev.to/divyesh5981/reviving-a-12k-star-abandoned-library-toastr-next-v3-25mf</link>
      <guid>https://dev.to/divyesh5981/reviving-a-12k-star-abandoned-library-toastr-next-v3-25mf</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for the &lt;a href="https://dev.to/challenges/github-2026-05-21"&gt;GitHub Finish-Up-A-Thon Challenge&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;toastr-next v3&lt;/strong&gt; a complete revival of &lt;a href="https://github.com/CodeSeven/toastr" rel="noopener noreferrer"&gt;CodeSeven/toastr&lt;/a&gt;, one of the most-starred abandoned JavaScript libraries on GitHub with &lt;strong&gt;12,000+ stars&lt;/strong&gt; and no meaningful commits since 2016.&lt;/p&gt;

&lt;p&gt;toastr was the go-to notification library for millions of developers. But time wasn't kind to it. it required jQuery, had no TypeScript, no dark mode, no accessibility, and its Gulp + LESS build chain was completely dead. It was a library everyone knew but nobody could use in a modern project without guilt.&lt;/p&gt;

&lt;p&gt;I picked it up, stripped it to the bones, and rebuilt it from scratch for 2026.&lt;/p&gt;

&lt;p&gt;From this 👇🏻:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// 2015 — drag in jQuery just to show a toast&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;jquery.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&amp;gt;  /&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;30&lt;/span&gt; &lt;span class="nx"&gt;KB&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;script&lt;/span&gt; &lt;span class="nx"&gt;src&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;toastr.min.js&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/script&amp;gt;  /&lt;/span&gt;&lt;span class="o"&gt;/&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt; &lt;span class="nx"&gt;KB&lt;/span&gt;
&lt;span class="c1"&gt;// Total: ~87 KB of dead weight&lt;/span&gt;

&lt;span class="nx"&gt;toastr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;success&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;To this 👇🏻:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// 2026 — zero dependencies, full TypeScript, ~4 KB gzipped&lt;/span&gt;
&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;toastr&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;toastr-next&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;toast&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;toastr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;success&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Hello!&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;toast&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;dismissed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="c1"&gt;// Promise API!&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;~4 KB&lt;/strong&gt; gzipped. No jQuery. No bloat. Just toasts. 🍞&lt;/p&gt;




&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffh6xdq3g1i3agb8356zr.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Ffh6xdq3g1i3agb8356zr.png" alt="toastr-next live demo — dark mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Dark mode — toasts firing with progress bar&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyv9u2zb7vszq0j3nmfys.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fyv9u2zb7vszq0j3nmfys.png" alt="toastr-next live demo — light mode"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Light mode — same demo, toggled with the ☀️ button&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;🌐 &lt;strong&gt;Live Demo:&lt;/strong&gt; &lt;a href="https://toastr-next.vercel.app/" rel="noopener noreferrer"&gt;toastr-next.vercel.app/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;📦 &lt;strong&gt;npm:&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/toastr-next" rel="noopener noreferrer"&gt;npmjs.com/package/toastr-next&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;🐙 &lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/Divyesh-5981/toastr-next" rel="noopener noreferrer"&gt;github.com/Divyesh-5981/toastr-next&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  The Comeback Story
&lt;/h2&gt;

&lt;h3&gt;
  
  
  Where it was
&lt;/h3&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy3w8skipe3pmn92xhkwk.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy3w8skipe3pmn92xhkwk.png" alt="Original CodeSeven/toastr repo — last commit 8 years ago"&gt;&lt;/a&gt;&lt;br&gt;
&lt;em&gt;The original repo — abandoned since 2016, 12k stars, zero recent activity&lt;/em&gt;&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Problem&lt;/th&gt;
&lt;th&gt;Detail&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;jQuery required&lt;/td&gt;
&lt;td&gt;~87 KB overhead just to show a notification&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No TypeScript&lt;/td&gt;
&lt;td&gt;No types, no IntelliSense, no safety&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No dark mode&lt;/td&gt;
&lt;td&gt;Hard-coded colors, no CSS variables&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No accessibility&lt;/td&gt;
&lt;td&gt;Screen readers couldn't detect toasts at all&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;JS-driven animations&lt;/td&gt;
&lt;td&gt;Layout thrash, janky on low-end devices&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No Promise API&lt;/td&gt;
&lt;td&gt;No way to await a toast dismissal&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No keyboard support&lt;/td&gt;
&lt;td&gt;Couldn't dismiss with Escape key&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dead build toolchain&lt;/td&gt;
&lt;td&gt;Gulp + LESS, completely unmaintained since 2016&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;No ESM support&lt;/td&gt;
&lt;td&gt;Global UMD only, no tree-shaking&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;
&lt;h3&gt;
  
  
  What I built
&lt;/h3&gt;
&lt;h4&gt;
  
  
  🏗 TypeScript Rewrite (Zero Dependencies)
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;No jQuery:&lt;/strong&gt; 100% strict TypeScript with full JSDoc.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Universal Formats:&lt;/strong&gt; Ships in ESM, CJS, UMD, and IIFE (works from Vite to raw &lt;code&gt;&amp;lt;script&amp;gt;&lt;/code&gt; tags).&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  🎨 CSS-First Theming
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Modern CSS:&lt;/strong&gt; Uses CSS variables instead of inline JS styles.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Themes &amp;amp; Motion:&lt;/strong&gt; Auto dark mode (&lt;code&gt;prefers-color-scheme&lt;/code&gt;), manual toggle (&lt;code&gt;localStorage&lt;/code&gt;), and &lt;code&gt;prefers-reduced-motion&lt;/code&gt; support.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Layouts:&lt;/strong&gt; 4 pure CSS animation presets (Fade, Slide, Bounce, Flip) and native RTL support.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  ♿ Accessibility (built to WCAG 2.1 AA practices)
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Screen Readers:&lt;/strong&gt; Dynamic ARIA live regions &lt;code&gt;role="alert"&lt;/code&gt; (assertive) for errors/warnings and &lt;code&gt;role="status"&lt;/code&gt; (polite) for success/info, with &lt;code&gt;aria-atomic&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Keyboard Navigation:&lt;/strong&gt; Toasts are focusable and sit in the natural tab order; pressing Escape while a toast is focused dismisses it, and auto-dismiss pauses while a toast holds focus.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  🔌 Modern API
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;Async &amp;amp; Events:&lt;/strong&gt; Promises (&lt;code&gt;await toast.dismissed&lt;/code&gt;) and lifecycle event subscriptions (&lt;code&gt;toastr.subscribe&lt;/code&gt;, which returns an unsubscribe function).&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;&lt;strong&gt;DX &amp;amp; Security:&lt;/strong&gt; Automatic CSS injection (no separate stylesheet import), native React wrapper (&lt;code&gt;useToastr&lt;/code&gt;), and built-in XSS protection.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  📦 Production Ready
&lt;/h4&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Lightweight:&lt;/strong&gt; ~4 KB gzipped (~2 KB JS + ~2 KB CSS) vs the original ~87 KB jQuery version.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Live:&lt;/strong&gt; Available on npm as &lt;code&gt;toastr-next&lt;/code&gt; with a live Vercel demo.&lt;/li&gt;
&lt;/ul&gt;
&lt;h4&gt;
  
  
  Size comparison
&lt;/h4&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;&lt;/th&gt;
&lt;th&gt;toastr v2 (old)&lt;/th&gt;
&lt;th&gt;toastr-next v3&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Total size&lt;/td&gt;
&lt;td&gt;~87 KB (with jQuery)&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;~4 KB gzipped&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dependencies&lt;/td&gt;
&lt;td&gt;jQuery required&lt;/td&gt;
&lt;td&gt;&lt;strong&gt;Zero&lt;/strong&gt;&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;TypeScript&lt;/td&gt;
&lt;td&gt;✕&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Dark mode&lt;/td&gt;
&lt;td&gt;✕&lt;/td&gt;
&lt;td&gt;✓ Auto + manual toggle&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Accessibility&lt;/td&gt;
&lt;td&gt;✕&lt;/td&gt;
&lt;td&gt;✓ WCAG 2.1 AA practices&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Promise API&lt;/td&gt;
&lt;td&gt;✕&lt;/td&gt;
&lt;td&gt;✓&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;React support&lt;/td&gt;
&lt;td&gt;Third-party only&lt;/td&gt;
&lt;td&gt;✓ Built-in&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Animations&lt;/td&gt;
&lt;td&gt;JS (jQuery)&lt;/td&gt;
&lt;td&gt;✓ CSS @keyframes&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Bundle formats&lt;/td&gt;
&lt;td&gt;Global UMD only&lt;/td&gt;
&lt;td&gt;✓ ESM, CJS, UMD, IIFE&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;CSS import&lt;/td&gt;
&lt;td&gt;Required&lt;/td&gt;
&lt;td&gt;✓ Auto-injected&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;


&lt;h2&gt;
  
  
  My Experience with GitHub Copilot
&lt;/h2&gt;

&lt;p&gt;I used GitHub Copilot as a pair programmer throughout the entire revival not for autocomplete, but as a genuine collaborator at every architectural decision.&lt;/p&gt;

&lt;p&gt;Here's exactly how it helped, step by step.&lt;/p&gt;
&lt;h3&gt;
  
  
  1. Deciding what to keep
&lt;/h3&gt;

&lt;p&gt;Before writing a single line, I needed to know what was worth saving from 14 years of jQuery-tangled code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"Here is the original toastr v2 source. What's worth keeping
for backward compatibility and what should be completely rewritten?"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot identified the API surface &lt;code&gt;success&lt;/code&gt;, &lt;code&gt;error&lt;/code&gt;, &lt;code&gt;info&lt;/code&gt;, &lt;code&gt;warning&lt;/code&gt; — as the only thing worth preserving. Everything underneath needed to go. This became the guiding rule for the entire rewrite.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. TypeScript interfaces
&lt;/h3&gt;

&lt;p&gt;With the API surface locked, I needed a clean type system built around it.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Design TypeScript interfaces for ToastrOptions, ToastResponse,
and ToastEvent. I want every toast call to return a Promise
that resolves when the toast is dismissed.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot designed all three interfaces. The standout was the &lt;code&gt;dismissed: Promise&amp;lt;void&amp;gt;&lt;/code&gt; pattern on &lt;code&gt;ToastResponse&lt;/code&gt; making every toast awaitable:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight typescript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;dismissed&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;toastr&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;success&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Changes saved&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nx"&gt;dismissed&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="c1"&gt;// runs after the toast closes&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I didn't ask for this pattern specifically. Copilot suggested it unprompted, and it became the most-loved feature of the rewrite.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. Theming system
&lt;/h3&gt;

&lt;p&gt;I wanted dark mode to work automatically &lt;em&gt;and&lt;/em&gt; be manually overridable without JavaScript touching the CSS side.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight css"&gt;&lt;code&gt;&lt;span class="s1"&gt;"I need a CSS theming system that supports auto dark mode via
prefers-color-scheme AND manual override via a data-theme attribute
on the html element. No JavaScript should be needed for the CSS side."&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot proposed the &lt;code&gt;[data-theme]&lt;/code&gt; + &lt;code&gt;@media (prefers-color-scheme)&lt;/code&gt; layering pattern. The media query handles auto mode; a single attribute flip handles manual override. No JS. No flicker. Just CSS doing its job.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. Accessibility
&lt;/h3&gt;

&lt;p&gt;I had applied &lt;code&gt;role="alert"&lt;/code&gt; to all four toast types, assuming it was correct. I asked Copilot to review before shipping.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;"What ARIA roles and aria-live values should toast notifications use
to be WCAG 2.1 AA compliant? Should all toasts use the same role?"
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot flagged that &lt;code&gt;role="alert"&lt;/code&gt; is &lt;em&gt;assertive&lt;/em&gt; it interrupts a screen reader mid-sentence. That's right for errors and warnings, but jarring for a success message. The fix:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Type&lt;/th&gt;
&lt;th&gt;Role&lt;/th&gt;
&lt;th&gt;Behaviour&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;code&gt;error&lt;/code&gt;, &lt;code&gt;warning&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;role="alert"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Interrupts immediately&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;
&lt;code&gt;success&lt;/code&gt;, &lt;code&gt;info&lt;/code&gt;
&lt;/td&gt;
&lt;td&gt;&lt;code&gt;role="status"&lt;/code&gt;&lt;/td&gt;
&lt;td&gt;Waits for a pause&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;A subtle WCAG 2.1 distinction I would have shipped wrong without this review.&lt;/p&gt;

&lt;h3&gt;
  
  
  5. CSS auto-injection
&lt;/h3&gt;

&lt;p&gt;Early users kept asking why they had to import the CSS separately. That broke the drop-in promise. I needed the stylesheet bundled &lt;em&gt;inside&lt;/em&gt; the JS, self-injecting on import.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Write a Vite generateBundle plugin that reads the extracted CSS asset
and injects it into every JS chunk as a self-executing style injector.
Add a guard so it only injects once even if the module is imported
multiple times, and make it safe to run during SSR.&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot drafted the &lt;code&gt;generateBundle&lt;/code&gt; plugin — CSS-to-string conversion plus a self-executing injector that appends a &lt;code&gt;&amp;lt;style id="__toastr_next_css__"&amp;gt;&lt;/code&gt; to &lt;code&gt;&amp;lt;head&amp;gt;&lt;/code&gt;. The guard checks &lt;code&gt;document.getElementById(...)&lt;/code&gt; so it only injects once even if multiple bundles (core + React) load on the same page, and it bails out when &lt;code&gt;document&lt;/code&gt; is undefined (SSR-safe). I later refactored it into one shared plugin reused across the core, IIFE, and React builds.&lt;/p&gt;

&lt;p&gt;This was the most technically complex Copilot collaboration in the project and the one that impressed me most.&lt;/p&gt;

&lt;h3&gt;
  
  
  6. Demo page
&lt;/h3&gt;

&lt;p&gt;The final piece was a demo site that actually showed off everything that changed.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prompt:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;"Build a demo page for toastr-next with a quick fire section,
a live playground with dropdowns for type/animation/position,
an animation showcase, a before/after comparison, and a light/dark
theme toggle that persists to localStorage."
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Copilot built the full &lt;code&gt;index.html&lt;/code&gt; iteratively playground, comparison table, custom ARIA dropdown, and the light/dark toggle with &lt;code&gt;localStorage&lt;/code&gt; persistence. I directed; it executed. The entire demo came together in an afternoon.&lt;/p&gt;




&lt;h3&gt;
  
  
  What I took away
&lt;/h3&gt;

&lt;p&gt;Copilot wasn't writing boilerplate it was catching real bugs, proposing patterns I hadn't considered, and solving problems I didn't know how to start. The &lt;code&gt;dismissed: Promise&amp;lt;void&amp;gt;&lt;/code&gt; feature, the WCAG role distinction, and the CSS-injection plugin were all things I got from Copilot that I wouldn't have shipped on my own.&lt;/p&gt;

&lt;p&gt;That's the kind of collaboration this challenge is designed to reward.&lt;/p&gt;

&lt;p&gt;After the main rewrite, I ran the entire codebase through GitHub Copilot to audit for hidden anti-patterns and code smells. It helped me spot subtle optimizations and edge cases, allowing me to refine the code into a truly polished, production-grade architecture.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpfi8sclgg45w1ivnc7a4.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fpfi8sclgg45w1ivnc7a4.png" alt="audit for hidden anti-patterns and code smells."&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;The audit - for hidden anti-patterns and code smells.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwv1wdgt15t8nec1g2dg0.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fwv1wdgt15t8nec1g2dg0.png" alt="fixes for anti-patterns and code smells"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Improvements - for hidden anti-patterns and code smells.&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;Working with Copilot felt less like using a tool and more like having a senior developer who knew every API, caught every edge case, and never got tired. The revival that would have taken weeks took days.&lt;/p&gt;




&lt;h2&gt;
  
  
  Acknowledgements
&lt;/h2&gt;

&lt;p&gt;Huge respect to the original authors — &lt;a href="https://twitter.com/John_Papa" rel="noopener noreferrer"&gt;John Papa&lt;/a&gt;, &lt;a href="https://twitter.com/ferrell_tim" rel="noopener noreferrer"&gt;Tim Ferrell&lt;/a&gt;, and &lt;br&gt;
&lt;a href="https://twitter.com/hfjallemark" rel="noopener noreferrer"&gt;Hans Fjällemark&lt;/a&gt; - who built something so good that developers were still reaching for it a decade later. &lt;/p&gt;

&lt;p&gt;This revival exists because their original work was worth finishing ❤️&lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>githubchallenge</category>
      <category>typescript</category>
      <category>opensource</category>
    </item>
  </channel>
</rss>
