docs: full command refernce

src/components/GrimoireWelcome.tsx

@@ -1,11 +1,7 @@
 import { Terminal } from "lucide-react";
 import { Button } from "./ui/button";
 import { Kbd, KbdGroup } from "./ui/kbd";
-import { Progress } from "./ui/progress";
 import { GrimoireLogo } from "./ui/grimoire-logo";
-import { MONTHLY_GOAL_SATS } from "@/services/supporters";
-import { useLiveQuery } from "dexie-react-hooks";
-import db from "@/services/db";
 
 interface GrimoireWelcomeProps {
   onLaunchCommand: () => void;
@@ -13,11 +9,7 @@ interface GrimoireWelcomeProps {
 }
 
 const EXAMPLE_COMMANDS = [
-  {
-    command: "zap grimoire.rocks",
-    description: "Support Grimoire development",
-    showProgress: true,
-  },
+  { command: "help", description: "Browse the command reference" },
   {
     command: "chat groups.0xchat.com'NkeVhXuWHGKKJCpn",
     description: "Join the Grimoire welcome chat",
@@ -33,33 +25,6 @@ export function GrimoireWelcome({
   onLaunchCommand,
   onExecuteCommand,
 }: GrimoireWelcomeProps) {
-  // Calculate monthly donations reactively from DB (last 30 days)
-  const monthlyDonations =
-    useLiveQuery(async () => {
-      const thirtyDaysAgo = Math.floor(Date.now() / 1000) - 30 * 24 * 60 * 60;
-      let total = 0;
-      await db.grimoireZaps
-        .where("timestamp")
-        .aboveOrEqual(thirtyDaysAgo)
-        .each((zap) => {
-          total += zap.amountSats;
-        });
-      return total;
-    }, []) ?? 0;
-
-  // Calculate progress
-  const goalProgress = (monthlyDonations / MONTHLY_GOAL_SATS) * 100;
-
-  // Format sats
-  function formatSats(sats: number): string {
-    if (sats >= 1_000_000) {
-      return `${(sats / 1_000_000).toFixed(1)}M`;
-    } else if (sats >= 1_000) {
-      return `${Math.floor(sats / 1_000)}k`;
-    }
-    return sats.toString();
-  }
-
   return (
     <div className="h-full w-full flex items-center justify-center">
       <div className="flex flex-col items-center gap-8">
@@ -122,7 +87,7 @@ export function GrimoireWelcome({
           <p className="text-muted-foreground text-xs font-mono mb-1">
             Try these commands:
           </p>
-          {EXAMPLE_COMMANDS.map(({ command, description, showProgress }) => (
+          {EXAMPLE_COMMANDS.map(({ command, description }) => (
             <button
               key={command}
               onClick={() => onExecuteCommand(command)}
@@ -134,23 +99,6 @@ export function GrimoireWelcome({
               <div className="text-xs text-muted-foreground mt-0.5">
                 {description}
               </div>
-              {showProgress && (
-                <div className="mt-2 flex flex-col gap-1">
-                  <Progress value={goalProgress} className="h-1" />
-                  <div className="flex items-center justify-between text-[10px]">
-                    <span className="text-muted-foreground">
-                      <span className="text-foreground font-medium">
-                        {formatSats(monthlyDonations)}
-                      </span>
-                      {" / "}
-                      {formatSats(MONTHLY_GOAL_SATS)}
-                    </span>
-                    <span className="text-muted-foreground">
-                      {goalProgress.toFixed(0)}%
-                    </span>
-                  </div>
-                </div>
-              )}
             </button>
           ))}
         </div>

src/components/ManPage.tsx

@@ -1,8 +1,9 @@
-import { manPages } from "@/types/man";
+import { manPages, type ManPageEntry } from "@/types/man";
 import { useAddWindow } from "@/core/state";
 import { CenteredContent } from "./ui/CenteredContent";
 import { cn } from "@/lib/utils";
 import { Button } from "./ui/button";
+import { Fragment, useMemo } from "react";
 
 interface ManPageProps {
   cmd: string;
@@ -54,7 +55,88 @@ export function ExecutableCommand({
   );
 }
 
+function CommandIndex() {
+  const grouped = useMemo(() => {
+    const groups: Record<string, { name: string; entry: ManPageEntry }[]> = {};
+    for (const [name, entry] of Object.entries(manPages)) {
+      const cat = entry.category;
+      if (!groups[cat]) groups[cat] = [];
+      groups[cat].push({ name, entry });
+    }
+    for (const cat of Object.keys(groups)) {
+      groups[cat].sort((a, b) => a.name.localeCompare(b.name));
+    }
+    return groups;
+  }, []);
+
+  // Order categories consistently
+  const categoryOrder = ["Documentation", "Nostr", "System"] as const;
+
+  return (
+    <CenteredContent maxWidth="4xl" spacing="4" className="font-mono text-sm">
+      {/* Header */}
+      <div className="flex justify-between border-b border-border pb-2">
+        <span className="font-bold">GRIMOIRE(1)</span>
+        <span className="text-muted-foreground">Grimoire Manual</span>
+        <span className="font-bold">GRIMOIRE(1)</span>
+      </div>
+
+      {/* NAME */}
+      <section>
+        <h2 className="font-bold mb-2">NAME</h2>
+        <div className="ml-8">grimoire - a nostr client for magicians</div>
+      </section>
+
+      {/* DESCRIPTION */}
+      <section>
+        <h2 className="font-bold mb-2">DESCRIPTION</h2>
+        <div className="ml-8 text-muted-foreground">
+          Grimoire is a Nostr protocol explorer and developer tool. Press Cmd+K
+          to launch commands. Type &quot;man &lt;command&gt;&quot; for details.
+        </div>
+      </section>
+
+      {/* COMMANDS */}
+      <section>
+        <h2 className="font-bold mb-2">COMMANDS</h2>
+        <div className="ml-4 space-y-4">
+          {categoryOrder.map((category) => {
+            const commands = grouped[category];
+            if (!commands) return null;
+            return (
+              <div key={category}>
+                <div className="text-muted-foreground mb-1 ml-2">
+                  {category}
+                </div>
+                <div className="ml-6 grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 items-baseline">
+                  {commands.map(({ name, entry }) => (
+                    <Fragment key={name}>
+                      <ExecutableCommand
+                        commandLine={`man ${name}`}
+                        className="p-0 h-auto justify-start"
+                      >
+                        {name}
+                      </ExecutableCommand>
+                      <span className="text-muted-foreground">
+                        {entry.description.split(".")[0]}
+                      </span>
+                    </Fragment>
+                  ))}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      </section>
+    </CenteredContent>
+  );
+}
+
 export default function ManPage({ cmd }: ManPageProps) {
+  if (cmd === "help") {
+    return <CommandIndex />;
+  }
+
   const page = manPages[cmd];
 
   if (!page) {
@@ -167,11 +249,6 @@ export default function ManPage({ cmd }: ManPageProps) {
           </div>
         </section>
       )}
-
-      {/* Footer */}
-      <div className="border-t border-border pt-2 text-muted-foreground text-xs">
-        Grimoire 1.0.0 {new Date().getFullYear()}
-      </div>
     </CenteredContent>
   );
 }

src/types/man.ts

@@ -105,7 +105,7 @@ export const manPages: Record<string, ManPageEntry> = {
     examples: ["kinds    View all supported event kinds"],
     seeAlso: ["kind", "nip", "man"],
     appId: "kinds",
-    category: "System",
+    category: "Documentation",
     defaultProps: {},
   },
   nips: {
@@ -785,7 +785,7 @@ export const manPages: Record<string, ManPageEntry> = {
     examples: ["spells          Browse your saved spells"],
     seeAlso: ["req"],
     appId: "spells",
-    category: "Nostr",
+    category: "System",
     defaultProps: {},
   },
   blossom: {