From 0c9eab5b0c352d5ddc2c60225620dc81e529c207 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Alejandro=20G=C3=B3mez?= <alejandrogomez@bitrefill.com>
Date: Sun, 5 Apr 2026 22:46:59 +0200
Subject: [PATCH] fix: show all known kinds and mark supported ones

---
 src/components/KindRenderer.tsx | 14 ++++++++++++-
 src/components/KindsViewer.tsx  | 36 ++++++++++++++++++++++++---------
 2 files changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/components/KindRenderer.tsx b/src/components/KindRenderer.tsx
index 5ede7a4..f121b0d 100644
--- a/src/components/KindRenderer.tsx
+++ b/src/components/KindRenderer.tsx
@@ -1,6 +1,7 @@
 import { getKindInfo } from "@/constants/kinds";
+import { kindRenderers } from "./nostr/kinds";
 import { NIPBadge } from "./NIPBadge";
-import { Copy, CopyCheck } from "lucide-react";
+import { Copy, CopyCheck, Sparkles } from "lucide-react";
 import { Button } from "./ui/button";
 import { useCopy } from "@/hooks/useCopy";
 import {
@@ -95,6 +96,17 @@ export default function KindRenderer({ kind }: { kind: number }) {
             <NIPBadge nipNumber={kindInfo.nip} />
           </>
         )}
+        <div className="text-muted-foreground">Grimoire Support</div>
+        <div className="flex items-center gap-1.5">
+          {kind in kindRenderers ? (
+            <>
+              <Sparkles className="h-3.5 w-3.5 text-accent" />
+              <span>Rich rendering</span>
+            </>
+          ) : (
+            <span className="text-muted-foreground">Raw content only</span>
+          )}
+        </div>
       </div>
 
       {/* Schema Information */}
diff --git a/src/components/KindsViewer.tsx b/src/components/KindsViewer.tsx
index 41fcea2..53c0048 100644
--- a/src/components/KindsViewer.tsx
+++ b/src/components/KindsViewer.tsx
@@ -1,14 +1,18 @@
 import { useState, useRef, useEffect } from "react";
-import { Search, X } from "lucide-react";
-import { getKindInfo } from "@/constants/kinds";
+import { Search, X, Sparkles } from "lucide-react";
+import { EVENT_KINDS, getKindInfo } from "@/constants/kinds";
 import { kindRenderers } from "./nostr/kinds";
 import { NIPBadge } from "./NIPBadge";
 import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { CenteredContent } from "./ui/CenteredContent";
+import { useAddWindow } from "@/core/state";
 
-// Dynamically derive supported kinds from renderer registry
-const SUPPORTED_KINDS = Object.keys(kindRenderers).map(Number);
+// All known event kinds from the registry
+const ALL_KINDS = Object.keys(EVENT_KINDS).map(Number);
+
+// Kinds with rich rendering support
+const RICH_KINDS = new Set(Object.keys(kindRenderers).map(Number));
 
 /**
  * KindsViewer - System introspection command
@@ -17,6 +21,7 @@ const SUPPORTED_KINDS = Object.keys(kindRenderers).map(Number);
 export default function KindsViewer() {
   const [search, setSearch] = useState("");
   const searchInputRef = useRef<HTMLInputElement>(null);
+  const addWindow = useAddWindow();
 
   // Autofocus on mount
   useEffect(() => {
@@ -24,7 +29,7 @@ export default function KindsViewer() {
   }, []);
 
   // Sort kinds in ascending order
-  const sortedKinds = [...SUPPORTED_KINDS].sort((a, b) => a - b);
+  const sortedKinds = [...ALL_KINDS].sort((a, b) => a - b);
 
   // Filter kinds by search term (matches kind number or name)
   const filteredKinds = search
@@ -61,11 +66,12 @@ export default function KindsViewer() {
         <h1 className="text-2xl font-bold mb-2">
           {search
             ? `Showing ${filteredKinds.length} of ${sortedKinds.length} Kinds`
-            : `Supported Event Kinds (${sortedKinds.length})`}
+            : `Known Event Kinds (${sortedKinds.length})`}
         </h1>
         <p className="text-sm text-muted-foreground mb-4">
-          Event kinds with rich rendering support in Grimoire. Default kinds
-          display raw content only.
+          All known Nostr event kinds. Kinds marked with{" "}
+          <Sparkles className="inline h-3.5 w-3.5 text-accent" /> have rich
+          rendering support in Grimoire.
         </p>
 
         {/* Search Input */}
@@ -101,6 +107,8 @@ export default function KindsViewer() {
             const kindInfo = getKindInfo(kind);
             const Icon = kindInfo?.icon;
 
+            const hasRichRenderer = RICH_KINDS.has(kind);
+
             return (
               <div
                 key={kind}
@@ -120,14 +128,22 @@ export default function KindsViewer() {
 
                   {/* Content */}
                   <div className="flex-1 min-w-0">
-                    <div className="flex items-baseline gap-2 mb-1">
+                    <button
+                      className="flex items-center gap-2 mb-1 hover:underline cursor-crosshair"
+                      onClick={() =>
+                        addWindow("kind", { number: String(kind) })
+                      }
+                    >
                       <code className="text-sm font-mono font-semibold">
                         {kind}
                       </code>
                       <span className="text-sm font-semibold">
                         {kindInfo?.name || `Kind ${kind}`}
                       </span>
-                    </div>
+                      {hasRichRenderer && (
+                        <Sparkles className="h-3.5 w-3.5 text-accent flex-shrink-0" />
+                      )}
+                    </button>
                     <p className="text-sm text-muted-foreground mb-2">
                       {kindInfo?.description || "No description available"}
                     </p>