lightnode-sdk 0.8.0 → 0.8.2

package/dist/add.d.ts

@@ -119,6 +119,20 @@ export interface LayoutPatch {
  * Returns what happened so the CLI can report it; never throws.
  */
 export declare function patchLayoutWithProviders(cwd?: string): LayoutPatch;
+export declare const SCAFFOLD_GLOBALS_CSS = "@import \"tailwindcss\";\n\n/* dark mode via .dark class (we default the app to dark) */\n@custom-variant dark (&:is(.dark, .dark *));\n\n/* design tokens (light) - ported from lcai-chat-v2 */\n:root {\n  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;\n\n  --background: #ffffff;\n  --primary: #6767e9;\n  --primary-600: #5a4fd8;\n  --foreground: #09090b;\n  --card: #ffffff;\n  --card-foreground: #09090b;\n  --popover: #ffffff;\n  --popover-foreground: hsl(240 10% 3.9%);\n  --primary-foreground: #fafafa;\n  --secondary: hsl(240 4.8% 95.9%);\n  --secondary-foreground: hsl(240 5.9% 10%);\n  --muted: hsl(240 4.8% 95.9%);\n  --muted-foreground: hsl(240 3.8% 46.1%);\n  --accent: hsl(240 4.8% 95.9%);\n  --accent-foreground: hsl(240 5.9% 10%);\n  --destructive: #ef4d6a;\n  --destructive-foreground: hsl(0 0% 98%);\n  --success: #15bd77;\n  --warning: #eaa53d;\n  --border: hsl(240 5.9% 90%);\n  --input: hsl(240 5.9% 90%);\n  --ring: hsl(240 10% 3.9%);\n  --radius: 0.625rem;\n\n  --surface-base-subtle: rgba(34, 35, 42, 0.02);\n  --surface-base-faint: rgba(14, 18, 27, 0.04);\n  --surface-base-light: rgba(204, 206, 239, 0.16);\n  --surface-elevation-light: #ffffff;\n\n  --content-primary: #0f0f14;\n  --content-default: #373842;\n  --content-soft: #656678;\n  --content-extraLight: #9798b6;\n\n  --border-soft: rgba(14, 18, 27, 0.08);\n  --border-light: rgba(14, 18, 27, 0.06);\n}\n\n/* design tokens (dark) */\n.dark {\n  --background: #070710;\n  --foreground: hsl(0 0% 98%);\n  --card: #0f0f14;\n  --card-foreground: hsl(0 0% 98%);\n  --popover: #0f0f14;\n  --popover-foreground: hsl(0 0% 98%);\n  --primary: #7064e9;\n  --primary-600: #8c71f6;\n  --primary-foreground: hsl(0 0% 98%);\n  --secondary: hsl(240 3.7% 15.9%);\n  --secondary-foreground: hsl(0 0% 98%);\n  --muted: hsl(240 3.7% 15.9%);\n  --muted-foreground: hsl(240 5% 64.9%);\n  --accent: hsl(240 3.7% 15.9%);\n  --accent-foreground: hsl(0 0% 98%);\n  --destructive: #fb5a76;\n  --destructive-foreground: hsl(0 0% 98%);\n  --success: #22d68a;\n  --warning: #f5be5c;\n  --border: hsl(240 3.7% 15.9%);\n  --input: hsl(240 3.7% 15.9%);\n  --ring: hsl(240 4.9% 83.9%);\n\n  --surface-base-subtle: rgba(204, 206, 239, 0.02);\n  --surface-base-faint: rgba(204, 206, 239, 0.04);\n  --surface-base-light: rgba(204, 206, 239, 0.08);\n  --surface-elevation-light: #0f0f14;\n\n  --content-primary: #cccef0;\n  --content-default: #9798b6;\n  --content-soft: rgba(154, 156, 207, 0.8);\n  --content-extraLight: #9798b6;\n\n  --border-soft: rgba(204, 206, 239, 0.12);\n  --border-light: rgba(204, 206, 239, 0.08);\n}\n\n/* theme mapping (Tailwind v4 @theme) */\n@theme inline {\n  --radius-md: calc(var(--radius) - 2px);\n  --radius-sm: calc(var(--radius) - 4px);\n  --radius-lg: var(--radius);\n\n  --color-background: var(--background);\n  --color-foreground: var(--foreground);\n  --color-card: var(--card);\n  --color-card-foreground: var(--card-foreground);\n  --color-popover: var(--popover);\n  --color-popover-foreground: var(--popover-foreground);\n  --color-primary: var(--primary);\n  --color-primary-600: var(--primary-600);\n  --color-primary-foreground: var(--primary-foreground);\n  --color-secondary: var(--secondary);\n  --color-secondary-foreground: var(--secondary-foreground);\n  --color-muted: var(--muted);\n  --color-muted-foreground: var(--muted-foreground);\n  --color-accent: var(--accent);\n  --color-accent-foreground: var(--accent-foreground);\n  --color-destructive: var(--destructive);\n  --color-destructive-foreground: var(--destructive-foreground);\n  --color-success: var(--success);\n  --color-warning: var(--warning);\n  --color-border: var(--border);\n  --color-input: var(--input);\n  --color-ring: var(--ring);\n\n  --color-surface-base-subtle: var(--surface-base-subtle);\n  --color-surface-base-faint: var(--surface-base-faint);\n  --color-surface-base-light: var(--surface-base-light);\n  --color-surface-elevation-light: var(--surface-elevation-light);\n  --color-surface-base-brand-default: #693ee0;\n  --color-surface-base-brand-strong: #8c71f6;\n\n  --color-content-primary: var(--content-primary);\n  --color-content-default: var(--content-default);\n  --color-content-soft: var(--content-soft);\n  --color-content-extraLight: var(--content-extraLight);\n\n  --color-bdr-soft: var(--border-soft);\n  --color-bdr-light: var(--border-light);\n\n  --color-gradient-primary: linear-gradient(270deg, #7064e9 0%, #dd00ac 100%);\n}\n\n@layer base {\n  * {\n    border-color: var(--border);\n  }\n  body {\n    background-color: var(--background);\n    color: var(--foreground);\n    overflow-x: hidden;\n  }\n  html {\n    overflow-x: hidden;\n  }\n  button {\n    cursor: pointer;\n  }\n  button:disabled {\n    cursor: not-allowed;\n  }\n  /* visible keyboard focus across interactive elements */\n  a:focus-visible,\n  button:focus-visible,\n  input:focus-visible,\n  select:focus-visible,\n  textarea:focus-visible {\n    outline: 2px solid var(--primary);\n    outline-offset: 2px;\n    border-radius: 6px;\n  }\n}\n\n/* respect reduced-motion: kill non-essential animation */\n@media (prefers-reduced-motion: reduce) {\n  *,\n  ::before,\n  ::after {\n    animation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n    scroll-behavior: auto !important;\n  }\n}\n\n/* ambient app background (gradient mesh behind everything) */\nbody::before {\n  content: \"\";\n  position: fixed;\n  inset: 0;\n  z-index: -1;\n  pointer-events: none;\n  background:\n    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.10), transparent 60%),\n    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.14), transparent 60%),\n    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.12), transparent 60%),\n    radial-gradient(45% 45% at 50% 115%, rgba(112, 100, 233, 0.07), transparent 60%);\n}\n.dark body::before {\n  background:\n    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.12), transparent 60%),\n    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.18), transparent 60%),\n    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.14), transparent 60%),\n    radial-gradient(45% 45% at 50% 118%, rgba(112, 100, 233, 0.10), transparent 60%);\n}\n\n/* signature lcai gradient (primary buttons / accents) */\n.bg-gradient-primary {\n  background-image: var(--color-gradient-primary);\n}\n.text-gradient {\n  background: linear-gradient(94deg, #dd00ac 10%, #7130c3 53%, #7064e9 96%);\n  -webkit-background-clip: text;\n  background-clip: text;\n  color: transparent;\n}\n\n/* minimal scrollbar */\n::-webkit-scrollbar {\n  width: 6px;\n  height: 6px;\n}\n::-webkit-scrollbar-track {\n  background: transparent;\n}\n::-webkit-scrollbar-thumb {\n  background: var(--border);\n  border-radius: 3px;\n}\n* {\n  scrollbar-width: thin;\n  scrollbar-color: var(--border) transparent;\n}\n";
+export interface ScaffoldWiring {
+    written: WrittenFile[];
+    /** The route now also served at `/` (e.g. "/chat-web3"), or null if nothing was wired. */
+    homepageRoute: string | null;
+    /** Whether the `dark` class was added to <html> (dark kept as the default). */
+    darkDefault: boolean;
+}
+/**
+ * Wire a freshly scaffolded Next.js app so the generated -web3 page is the
+ * homepage and the LightChain theme + dark default are in place. No-op for any
+ * target without a known route folder.
+ */
+export declare function wireFreshScaffold(target: string, opts?: AddOpts): ScaffoldWiring;
 export declare function addJudge(opts?: AddOpts): {
     written: WrittenFile[];
     install: string;

package/dist/add.js

@@ -1074,83 +1074,99 @@ export default function ChatWeb3() {
   }
 
   return (
-    <main style={{ maxWidth: 720, margin: "32px auto", padding: 16, fontFamily: "system-ui" }}>
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 12 }}>
-        <h1>Chat (user-pays)</h1>
-        <ConnectButton />
-      </div>
-      <p style={{ color: "#666" }}>
-        Each turn signs one createSession transaction from your wallet on{" "}
-        <code>{network ?? "(connect a wallet)"}</code>. Fee:{" "}
-        <code>{feeLcai != null ? \`\${feeLcai} LCAI\` : "(fetching)"}</code> per turn plus a small gas amount.
-      </p>
-      {!address && (
-        <div style={{ border: "1px solid #ddd", borderRadius: 8, padding: 12, margin: "12px 0", display: "flex", alignItems: "center", gap: 12 }}>
-          <span>Connect a wallet to start chatting.</span>
-          <ConnectButton />
+    <main className="mx-auto flex min-h-screen w-full max-w-2xl flex-col px-4 py-6">
+      <header className="flex items-center justify-between gap-3 border-b border-border pb-4">
+        <div className="min-w-0">
+          <h1 className="text-base font-semibold text-foreground">Chat</h1>
+          <p className="truncate text-xs text-muted-foreground">
+            {network ? (
+              <>Signed from your wallet on {network} · {feeLcai != null ? feeLcai + " LCAI" : "..."}/turn + gas</>
+            ) : (
+              "Connect a wallet on LightChain to start"
+            )}
+          </p>
         </div>
-      )}
+        <ConnectButton />
+      </header>
 
-      <div style={{ display: "flex", flexDirection: "column", gap: 8, margin: "16px 0" }}>
-        {turns.map((t, i) => (
-          <div
-            key={i}
-            style={{
-              alignSelf: t.role === "user" ? "flex-end" : "flex-start",
-              maxWidth: "85%",
-              borderRadius: 12,
-              padding: "8px 12px",
-              background: t.role === "user" ? "#e9e7ff" : "#f5f5f7",
-            }}
-          >
-            <div style={{ whiteSpace: "pre-wrap", wordBreak: "break-word" }}>{t.text}</div>
-            {t.role === "assistant" && t.submitTx ? (
-              <div style={{ marginTop: 6, fontSize: 11, color: "#666", display: "flex", gap: 8, flexWrap: "wrap" }}>
-                {t.worker && (
-                  <a href={\`https://\${network}.lightscan.app/address/\${t.worker}\`} target="_blank" rel="noopener noreferrer">
-                    worker
-                  </a>
-                )}
-                {t.jobId && <span>job #{t.jobId}</span>}
-                {t.submitTx && (
-                  <a href={\`https://\${network}.lightscan.app/tx/\${t.submitTx}\`} target="_blank" rel="noopener noreferrer">
-                    submitJob
-                  </a>
-                )}
-                {t.jobCompletedTx && (
-                  <a href={\`https://\${network}.lightscan.app/tx/\${t.jobCompletedTx}\`} target="_blank" rel="noopener noreferrer">
-                    completed
-                  </a>
-                )}
+      <div className="flex flex-1 flex-col gap-3 overflow-y-auto py-6">
+        {turns.length === 0 ? (
+          <div className="flex flex-1 flex-col items-center justify-center gap-3 text-center">
+            <h2 className="text-2xl font-medium text-foreground">How can I help?</h2>
+            <p className="max-w-sm text-sm text-muted-foreground">
+              Connect your wallet and send a message. Each turn is signed and paid from your
+              own wallet, no backend required.
+            </p>
+            {!address && (
+              <div className="mt-2">
+                <ConnectButton />
               </div>
-            ) : null}
+            )}
           </div>
-        ))}
+        ) : (
+          turns.map((t, i) => (
+            <div
+              key={i}
+              className={
+                "max-w-[85%] whitespace-pre-wrap break-words rounded-2xl px-4 py-2.5 text-sm " +
+                (t.role === "user"
+                  ? "self-end rounded-br-md bg-primary text-primary-foreground"
+                  : "self-start rounded-bl-md border border-border bg-card text-foreground")
+              }
+            >
+              <div>{t.text}</div>
+              {t.role === "assistant" && t.submitTx ? (
+                <div className="mt-2 flex flex-wrap gap-3 text-[11px] text-muted-foreground">
+                  {t.worker && (
+                    <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/address/\${t.worker}\`} target="_blank" rel="noopener noreferrer">
+                      worker
+                    </a>
+                  )}
+                  {t.jobId && <span>job #{t.jobId}</span>}
+                  {t.submitTx && (
+                    <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${t.submitTx}\`} target="_blank" rel="noopener noreferrer">
+                      submitJob
+                    </a>
+                  )}
+                  {t.jobCompletedTx && (
+                    <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${t.jobCompletedTx}\`} target="_blank" rel="noopener noreferrer">
+                      completed
+                    </a>
+                  )}
+                </div>
+              ) : null}
+            </div>
+          ))
+        )}
       </div>
 
-      <textarea
-        value={input}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => {
-          if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (!busy && input.trim()) send(); }
-        }}
-        rows={2}
-        placeholder={turns.length === 0 ? "Say hello (cmd+enter to send)" : "Reply..."}
-        style={{ width: "100%", padding: 8, fontFamily: "inherit" }}
-      />
-      <button
-        type="button"
-        onClick={() => send()}
-        disabled={busy || !input.trim() || !address || !network}
-        style={{ marginTop: 8, padding: "8px 16px" }}
-      >
-        {busy ? (busyStage || "Sending...") : (turns.length === 0 ? "Send first message" : "Send")}
-      </button>
-      {err && (
-        <p style={{ marginTop: 8, padding: "8px 12px", border: "1px solid #f5c2c7", background: "#f8d7da", color: "#842029", borderRadius: 6 }}>
-          {err}
-        </p>
-      )}
+      <div className="border-t border-border pt-4">
+        <div className="flex items-end gap-2 rounded-2xl border border-border bg-card p-2 transition focus-within:ring-2 focus-within:ring-primary">
+          <textarea
+            value={input}
+            onChange={(e) => setInput(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (!busy && input.trim()) send(); }
+            }}
+            rows={1}
+            placeholder={turns.length === 0 ? "Say hello (cmd+enter to send)" : "Reply... (cmd+enter)"}
+            className="max-h-40 min-h-[40px] flex-1 resize-none bg-transparent px-2 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+          />
+          <button
+            type="button"
+            onClick={() => send()}
+            disabled={busy || !input.trim() || !address || !network}
+            className="shrink-0 rounded-xl bg-gradient-primary px-4 py-2 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:cursor-not-allowed disabled:opacity-40"
+          >
+            {busy ? (busyStage || "Sending...") : "Send"}
+          </button>
+        </div>
+        {err && (
+          <p className="mt-2 rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {err}
+          </p>
+        )}
+      </div>
     </main>
   );
 }
@@ -2058,6 +2074,362 @@ export function patchLayoutWithProviders(cwd = process.cwd()) {
     }
     return { path: rel, patched: true };
 }
+// ---------------------------------------------------------------------------
+// Fresh-scaffold wiring: when `add <x>-web3` scaffolds a brand-new Next.js app
+// (bare folder), the create-next-app starter page sits at `/` and the generated
+// page sits at `/<x>-web3`, so `npm run dev` + localhost:3000 lands on the
+// starter, not the chat. This makes the generated page the homepage and ships
+// the LightChain theme so the first render is the real thing.
+//
+// Only ever invoked on a scaffold WE just created, so overwriting page.tsx and
+// globals.css is safe - there is no user content to clobber. In an existing app
+// none of this runs; the page keeps its dedicated /<x>-web3 route untouched.
+// ---------------------------------------------------------------------------
+// The LightChain chat theme (Tailwind v4 tokens, light + dark), ported from the
+// lightnode app's globals.css. Shipped as the scaffold's app/globals.css so
+// installs default to the real look instead of the create-next-app starter.
+export const SCAFFOLD_GLOBALS_CSS = `@import "tailwindcss";
+
+/* dark mode via .dark class (we default the app to dark) */
+@custom-variant dark (&:is(.dark, .dark *));
+
+/* design tokens (light) - ported from lcai-chat-v2 */
+:root {
+  font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif;
+
+  --background: #ffffff;
+  --primary: #6767e9;
+  --primary-600: #5a4fd8;
+  --foreground: #09090b;
+  --card: #ffffff;
+  --card-foreground: #09090b;
+  --popover: #ffffff;
+  --popover-foreground: hsl(240 10% 3.9%);
+  --primary-foreground: #fafafa;
+  --secondary: hsl(240 4.8% 95.9%);
+  --secondary-foreground: hsl(240 5.9% 10%);
+  --muted: hsl(240 4.8% 95.9%);
+  --muted-foreground: hsl(240 3.8% 46.1%);
+  --accent: hsl(240 4.8% 95.9%);
+  --accent-foreground: hsl(240 5.9% 10%);
+  --destructive: #ef4d6a;
+  --destructive-foreground: hsl(0 0% 98%);
+  --success: #15bd77;
+  --warning: #eaa53d;
+  --border: hsl(240 5.9% 90%);
+  --input: hsl(240 5.9% 90%);
+  --ring: hsl(240 10% 3.9%);
+  --radius: 0.625rem;
+
+  --surface-base-subtle: rgba(34, 35, 42, 0.02);
+  --surface-base-faint: rgba(14, 18, 27, 0.04);
+  --surface-base-light: rgba(204, 206, 239, 0.16);
+  --surface-elevation-light: #ffffff;
+
+  --content-primary: #0f0f14;
+  --content-default: #373842;
+  --content-soft: #656678;
+  --content-extraLight: #9798b6;
+
+  --border-soft: rgba(14, 18, 27, 0.08);
+  --border-light: rgba(14, 18, 27, 0.06);
+}
+
+/* design tokens (dark) */
+.dark {
+  --background: #070710;
+  --foreground: hsl(0 0% 98%);
+  --card: #0f0f14;
+  --card-foreground: hsl(0 0% 98%);
+  --popover: #0f0f14;
+  --popover-foreground: hsl(0 0% 98%);
+  --primary: #7064e9;
+  --primary-600: #8c71f6;
+  --primary-foreground: hsl(0 0% 98%);
+  --secondary: hsl(240 3.7% 15.9%);
+  --secondary-foreground: hsl(0 0% 98%);
+  --muted: hsl(240 3.7% 15.9%);
+  --muted-foreground: hsl(240 5% 64.9%);
+  --accent: hsl(240 3.7% 15.9%);
+  --accent-foreground: hsl(0 0% 98%);
+  --destructive: #fb5a76;
+  --destructive-foreground: hsl(0 0% 98%);
+  --success: #22d68a;
+  --warning: #f5be5c;
+  --border: hsl(240 3.7% 15.9%);
+  --input: hsl(240 3.7% 15.9%);
+  --ring: hsl(240 4.9% 83.9%);
+
+  --surface-base-subtle: rgba(204, 206, 239, 0.02);
+  --surface-base-faint: rgba(204, 206, 239, 0.04);
+  --surface-base-light: rgba(204, 206, 239, 0.08);
+  --surface-elevation-light: #0f0f14;
+
+  --content-primary: #cccef0;
+  --content-default: #9798b6;
+  --content-soft: rgba(154, 156, 207, 0.8);
+  --content-extraLight: #9798b6;
+
+  --border-soft: rgba(204, 206, 239, 0.12);
+  --border-light: rgba(204, 206, 239, 0.08);
+}
+
+/* theme mapping (Tailwind v4 @theme) */
+@theme inline {
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-lg: var(--radius);
+
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-600: var(--primary-600);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-success: var(--success);
+  --color-warning: var(--warning);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-surface-base-subtle: var(--surface-base-subtle);
+  --color-surface-base-faint: var(--surface-base-faint);
+  --color-surface-base-light: var(--surface-base-light);
+  --color-surface-elevation-light: var(--surface-elevation-light);
+  --color-surface-base-brand-default: #693ee0;
+  --color-surface-base-brand-strong: #8c71f6;
+
+  --color-content-primary: var(--content-primary);
+  --color-content-default: var(--content-default);
+  --color-content-soft: var(--content-soft);
+  --color-content-extraLight: var(--content-extraLight);
+
+  --color-bdr-soft: var(--border-soft);
+  --color-bdr-light: var(--border-light);
+
+  --color-gradient-primary: linear-gradient(270deg, #7064e9 0%, #dd00ac 100%);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    overflow-x: hidden;
+  }
+  html {
+    overflow-x: hidden;
+  }
+  button {
+    cursor: pointer;
+  }
+  button:disabled {
+    cursor: not-allowed;
+  }
+  /* visible keyboard focus across interactive elements */
+  a:focus-visible,
+  button:focus-visible,
+  input:focus-visible,
+  select:focus-visible,
+  textarea:focus-visible {
+    outline: 2px solid var(--primary);
+    outline-offset: 2px;
+    border-radius: 6px;
+  }
+}
+
+/* respect reduced-motion: kill non-essential animation */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  ::before,
+  ::after {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
+
+/* ambient app background (gradient mesh behind everything) */
+body::before {
+  content: "";
+  position: fixed;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  background:
+    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.10), transparent 60%),
+    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.14), transparent 60%),
+    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.12), transparent 60%),
+    radial-gradient(45% 45% at 50% 115%, rgba(112, 100, 233, 0.07), transparent 60%);
+}
+.dark body::before {
+  background:
+    radial-gradient(60% 50% at 50% -6%, rgba(221, 0, 172, 0.12), transparent 60%),
+    radial-gradient(55% 45% at 12% -8%, rgba(112, 100, 233, 0.18), transparent 60%),
+    radial-gradient(50% 40% at 88% -2%, rgba(112, 100, 233, 0.14), transparent 60%),
+    radial-gradient(45% 45% at 50% 118%, rgba(112, 100, 233, 0.10), transparent 60%);
+}
+
+/* signature lcai gradient (primary buttons / accents) */
+.bg-gradient-primary {
+  background-image: var(--color-gradient-primary);
+}
+.text-gradient {
+  background: linear-gradient(94deg, #dd00ac 10%, #7130c3 53%, #7064e9 96%);
+  -webkit-background-clip: text;
+  background-clip: text;
+  color: transparent;
+}
+
+/* minimal scrollbar */
+::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 3px;
+}
+* {
+  scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+}
+`;
+/** Map an `add` target to the route folder its page lives in. */
+const WEB3_ROUTE_DIR = {
+    "chat-web3": "chat-web3",
+    "inference-web3": "inference-web3",
+    "judge-web3": "judge-web3",
+};
+/** The app/page.tsx we drop in to make the generated page the homepage. It
+ *  re-exports the real page so its documented /<target> route still works. */
+function homepageReexport(dir, target) {
+    return `// app/page.tsx
+// Generated by 'lightnode add ${target}'. Makes the ${dir} page the homepage so
+// 'npm run dev' + http://localhost:3000 lands on it directly. The page itself
+// still lives at app/${dir}/page.tsx and is also served at /${dir}.
+export { default } from "./${dir}/page";
+`;
+}
+/** Add the \`dark\` class to the layout's <html> element so dark stays the
+ *  default theme. Returns the patched source, or null if <html> was not found
+ *  or already carries a \`dark\` class. Handles className as a template literal,
+ *  a string literal, or absent. */
+function withDarkHtml(source) {
+    const match = source.match(/<html\b[^>]*>/);
+    if (!match)
+        return null;
+    const tag = match[0];
+    // Already dark? Cover both className={`...dark...`} and className="...dark...".
+    if (/className=\{`[^`]*\bdark\b/.test(tag) || /className=(["'])[^"']*\bdark\b/.test(tag))
+        return null;
+    if (/className=\{`/.test(tag)) {
+        return source.replace(tag, tag.replace(/className=\{`/, "className={`dark "));
+    }
+    if (/className=(["'])/.test(tag)) {
+        return source.replace(tag, tag.replace(/className=(["'])/, 'className=$1dark '));
+    }
+    // No className on <html>: add one.
+    return source.replace(tag, tag.replace(/<html\b/, '<html className="dark"'));
+}
+function setDarkDefaultOnLayout(cwd) {
+    const abs = findLayoutFile(cwd);
+    if (!abs)
+        return false;
+    let source;
+    try {
+        source = fs.readFileSync(abs, "utf8");
+    }
+    catch {
+        return false;
+    }
+    const patched = withDarkHtml(source);
+    if (patched === null)
+        return false;
+    try {
+        fs.writeFileSync(abs, patched);
+    }
+    catch {
+        return false;
+    }
+    return true;
+}
+/** One-line description of what each scaffold target gives the dev. */
+const SCAFFOLD_README_WHAT = {
+    "chat-web3": "A self-contained, wallet-signed chat you can drop into any project - for example, to give an agent a chat UI.",
+    "inference-web3": "A self-contained, wallet-signed one-shot inference page you can drop into any project.",
+    "judge-web3": "A self-contained, wallet-signed pass/fail evaluator page you can drop into any project.",
+};
+/** A real README for a freshly scaffolded app, replacing the create-next-app
+ *  default so the dev knows what they got and how to use it. */
+function scaffoldReadme(target, dir) {
+    const what = SCAFFOLD_README_WHAT[target] ?? "A self-contained, wallet-signed page.";
+    return `# LightNode ${dir}
+
+Generated by \`lightnode add ${target}\`. ${what}
+No backend, no database, no API keys: each visitor signs and pays for their own
+turns from their own wallet on LightChain.
+
+## Run it
+
+    npm run dev
+
+Open http://localhost:3000 and click **Connect wallet** (LightChain mainnet
+9200 or testnet 8200). Free testnet LCAI: https://lightfaucet.ai
+
+## Where things live
+
+- \`app/page.tsx\` - re-exports the page below as the homepage
+- \`app/${dir}/page.tsx\` - the UI (also served at /${dir}). Edit this.
+- \`app/providers.tsx\` + \`lib/wagmi.ts\` - wagmi + React Query setup
+- \`components/connect-button.tsx\` - the Connect wallet button
+- \`app/globals.css\` - the theme (light + dark design tokens)
+
+## Customize
+
+It is a normal React client component using \`lightnode-sdk\` wired to the
+connected wallet. Change the model or system prompt, restyle it, or call it
+from your own agent. Builder docs: https://lightnode.app/build
+`;
+}
+/**
+ * Wire a freshly scaffolded Next.js app so the generated -web3 page is the
+ * homepage and the LightChain theme + dark default are in place. No-op for any
+ * target without a known route folder.
+ */
+export function wireFreshScaffold(target, opts = {}) {
+    const cwd = opts.cwd ?? process.cwd();
+    const dir = WEB3_ROUTE_DIR[target];
+    const written = [];
+    if (!dir)
+        return { written, homepageRoute: null, darkDefault: false };
+    // 1. Ship the LightChain theme, replacing the create-next-app starter globals.
+    written.push(writeFile(path.join(cwd, "app/globals.css"), SCAFFOLD_GLOBALS_CSS, true));
+    // 2. Make the generated page the homepage (replaces the starter page.tsx).
+    written.push(writeFile(path.join(cwd, "app/page.tsx"), homepageReexport(dir, target), true));
+    // 3. Replace create-next-app's default README with one about this scaffold.
+    written.push(writeFile(path.join(cwd, "README.md"), scaffoldReadme(target, dir), true));
+    // 4. Keep dark as the default theme (matches lightnode.app).
+    const darkDefault = setDarkDefaultOnLayout(cwd);
+    return { written, homepageRoute: `/${dir}`, darkDefault };
+}
 const NEXTJS_JUDGE_ROUTE = `// app/api/judge/route.ts
 // Generated by 'lightnode add judge'. See https://lightnode.app/build
 // The LightChallenge-style evaluator: post evidence + criteria, get a

package/dist/cli.js

@@ -1,6 +1,6 @@
 #!/usr/bin/env node
 import { LightNode, modelStatsCsv, workerStatsCsv, workerJobsCsv, runInferenceWithKey, runInferenceBatch, Agent, isStalledWorker, workerPreflight, workerWatch, WorkerOperator, isWorkerOpError, BRIDGE_ROUTE, DAO, DAO_ADDRESSES, SDK_VERSION } from "./index.js";
-import { addInference, addInferenceWeb3, addJudgeWeb3, addAnalyticsDashboard, addNftMint, addChat, addChatWeb3, addAgent, addJudge, addWagmiSetup, patchLayoutWithProviders } from "./add.js";
+import { addInference, addInferenceWeb3, addJudgeWeb3, addAnalyticsDashboard, addNftMint, addChat, addChatWeb3, addAgent, addJudge, addWagmiSetup, patchLayoutWithProviders, wireFreshScaffold } from "./add.js";
 import { createPublicClient, createWalletClient, http, parseEther } from "viem";
 import { privateKeyToAccount, generatePrivateKey } from "viem/accounts";
 import { existsSync, readdirSync, renameSync, rmSync } from "node:fs";
@@ -47,6 +47,10 @@ function scaffoldNextApp(cwd, target) {
         "--yes", "create-next-app@latest", stageName,
         "--ts", "--app", "--no-src-dir", "--eslint", "--tailwind",
         "--use-npm", "--no-turbopack", "--import-alias", "@/*",
+        // Don't dump create-next-app's AGENTS.md (the nextjs-agent-rules block)
+        // into the user's project. Supported by current create-next-app, which is
+        // what `@latest` resolves to here.
+        "--no-agents-md",
     ];
     const r = spawnSync("npx", args, { cwd, stdio: "inherit" });
     if (r.status !== 0) {
@@ -579,9 +583,9 @@ async function main() {
             // A Next.js client page needs a Next.js app to live in. In a bare folder,
             // scaffold one first so the generated page renders instead of throwing
             // "Cannot find module 'react'". Opt out with --no-scaffold.
-            if (NEXT_PAGE_TARGETS.has(sub ?? "") && !existsSync(join(cwd, "package.json")) && !noScaffold) {
-                scaffoldNextApp(cwd, sub ?? "");
-            }
+            const didScaffold = NEXT_PAGE_TARGETS.has(sub ?? "") && !existsSync(join(cwd, "package.json")) && !noScaffold
+                ? scaffoldNextApp(cwd, sub ?? "")
+                : false;
             // ---- write the requested files ----
             const result = sub === "analytics-dashboard" ? addAnalyticsDashboard({ template, network, force })
                 : sub === "nft-mint-with-inference" ? addNftMint({ template, network, force })
@@ -609,6 +613,18 @@ async function main() {
                 else
                     console.log(`  ⤴ ${layout.path} (${layout.reason})`);
             }
+            // ---- fresh scaffold only: make the generated page the homepage and ship
+            // the LightChain theme so localhost:3000 lands on the chat, not the
+            // create-next-app starter. Skipped in an existing app (nothing to clobber).
+            let wiring = null;
+            if (didScaffold && isWeb3Page) {
+                wiring = wireFreshScaffold(sub, { cwd });
+                printWritten(wiring.written);
+                if (wiring.homepageRoute)
+                    console.log(`  ✓ app/page.tsx (chat is now the homepage at /)`);
+                if (wiring.darkDefault)
+                    console.log(`  ✓ app/layout.tsx (dark theme default)`);
+            }
             // ---- install dependencies (opt out with --no-install) ----
             const installed = noInstall ? false : installDeps(result.install, cwd);
             // ---- next steps ----
@@ -620,7 +636,10 @@ async function main() {
                 if (!installed)
                     console.log(`  ${result.install}`);
                 console.log(`  npm run dev`);
-                console.log(`  open http://localhost:3000${route}  and click Connect wallet (chainId ${chainId})`);
+                const openPath = wiring ? "" : route; // fresh scaffold serves the page at /
+                console.log(`  open http://localhost:3000${openPath}  and click Connect wallet (chainId ${chainId})`);
+                if (wiring)
+                    console.log(`  (also reachable at ${route})`);
                 console.log(`  ${result.network === "mainnet" ? "llama3-8b costs 0.02 LCAI per call" : "testnet is free"}`);
                 if (layoutNeedsManual) {
                     console.log(`\nHeads up: couldn't auto-wire the layout (${layout?.reason}).`);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightnode-sdk",
-  "version": "0.8.0",
+  "version": "0.8.2",
   "description": "Read-only TypeScript client for LightChain AI: workers, jobs, models, on-chain registration, and per-model network analytics. Independent, community-built (not an official LightChain package).",
   "type": "module",
   "main": "./dist/index.js",