lightnode-sdk 0.8.1 → 0.8.3

package/dist/add.d.ts

@@ -119,7 +119,7 @@ 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/* 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 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. */

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>
   );
 }
@@ -1258,59 +1274,67 @@ export default function InferenceWeb3() {
   }
 
   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>Inference (user-pays)</h1>
-        <ConnectButton />
-      </div>
-      <p style={{ color: "#666" }}>
-        Signs one encrypted inference from your wallet on{" "}
-        <code>{network ?? "(connect a wallet)"}</code>. Fee:{" "}
-        <code>{feeLcai != null ? \`\${feeLcai} LCAI\` : "(fetching)"}</code> per call 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 run inference.</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">Inference</h1>
+          <p className="truncate text-xs text-muted-foreground">
+            {network ? (
+              <>Signed from your wallet on {network} · {feeLcai != null ? feeLcai + " LCAI" : "..."}/call + gas</>
+            ) : (
+              "Connect a wallet on LightChain to start"
+            )}
+          </p>
         </div>
-      )}
+        <ConnectButton />
+      </header>
 
-      <label style={{ display: "block", margin: "12px 0" }}>
-        <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>System prompt</div>
-        <textarea value={system} onChange={(e) => setSystem(e.target.value)} rows={2}
-          style={{ width: "100%", padding: 8, fontFamily: "monospace", fontSize: 12 }} />
-      </label>
-      <label style={{ display: "block", margin: "12px 0" }}>
-        <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>Prompt</div>
-        <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={5}
-          style={{ width: "100%", padding: 8, fontFamily: "monospace", fontSize: 12 }} />
-      </label>
-      <button type="button" onClick={() => run()} disabled={busy || !prompt.trim() || !address || !network}
-        style={{ padding: "8px 16px", borderRadius: 8, cursor: busy ? "wait" : "pointer" }}>
-        {busy ? (busyStage || "Running...") : "Run inference"}
-      </button>
+      <div className="flex flex-col gap-4 py-6">
+        {!address && (
+          <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3 text-sm text-muted-foreground">
+            <span>Connect a wallet to run inference.</span>
+            <ConnectButton />
+          </div>
+        )}
 
-      {err && (
-        <p style={{ marginTop: 12, padding: "8px 12px", border: "1px solid #f5c2c7", background: "#f8d7da", color: "#842029", borderRadius: 6 }}>
-          {err}
-        </p>
-      )}
+        <label className="flex flex-col gap-1.5">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">System prompt</span>
+          <textarea value={system} onChange={(e) => setSystem(e.target.value)} rows={2}
+            className="resize-none rounded-xl border border-border bg-card px-3 py-2 font-mono text-xs text-foreground outline-none focus:ring-2 focus:ring-primary" />
+        </label>
+        <label className="flex flex-col gap-1.5">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Prompt</span>
+          <textarea value={prompt} onChange={(e) => setPrompt(e.target.value)} rows={5}
+            className="resize-none rounded-xl border border-border bg-card px-3 py-2 font-mono text-xs text-foreground outline-none focus:ring-2 focus:ring-primary" />
+        </label>
+
+        <button type="button" onClick={() => run()} disabled={busy || !prompt.trim() || !address || !network}
+          className="self-start 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 || "Running...") : "Run inference"}
+        </button>
 
-      {result && (
-        <div style={{ marginTop: 16, padding: 16, border: "1px solid #ddd", borderRadius: 8 }}>
-          <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 8 }}>Answer</div>
-          <pre style={{ whiteSpace: "pre-wrap", margin: 0, fontFamily: "inherit" }}>{result.answer}</pre>
-          <div style={{ marginTop: 12, fontSize: 12, color: "#666", display: "flex", gap: 12, flexWrap: "wrap" }}>
-            <span>elapsed {Math.round(result.elapsedMs / 1000)}s</span>
-            <span>job #{result.jobId}</span>
-            <a href={\`https://\${network}.lightscan.app/address/\${result.worker}\`} target="_blank" rel="noopener noreferrer">worker</a>
-            <a href={\`https://\${network}.lightscan.app/tx/\${result.submitJob}\`} target="_blank" rel="noopener noreferrer">submitJob</a>
-            {result.jobCompleted && (
-              <a href={\`https://\${network}.lightscan.app/tx/\${result.jobCompleted}\`} target="_blank" rel="noopener noreferrer">jobCompleted</a>
-            )}
+        {err && (
+          <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {err}
+          </p>
+        )}
+
+        {result && (
+          <div className="rounded-2xl border border-border bg-card p-4">
+            <div className="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Answer</div>
+            <pre className="m-0 whitespace-pre-wrap break-words font-sans text-sm text-foreground">{result.answer}</pre>
+            <div className="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground">
+              <span>elapsed {Math.round(result.elapsedMs / 1000)}s</span>
+              <span>job #{result.jobId}</span>
+              <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/address/\${result.worker}\`} target="_blank" rel="noopener noreferrer">worker</a>
+              <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${result.submitJob}\`} target="_blank" rel="noopener noreferrer">submitJob</a>
+              {result.jobCompleted && (
+                <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${result.jobCompleted}\`} target="_blank" rel="noopener noreferrer">jobCompleted</a>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </main>
   );
 }
@@ -1443,72 +1467,80 @@ Reply with STRICT JSON only, matching: { "passed": boolean, "confidence": 0-1, "
   }
 
   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>AI Judge (user-pays)</h1>
-        <ConnectButton />
-      </div>
-      <p style={{ color: "#666" }}>
-        Each submission signs one inference from your wallet on{" "}
-        <code>{network ?? "(connect a wallet)"}</code>. Cost:{" "}
-        <code>{feeLcai != null ? \`\${feeLcai} LCAI\` : "(fetching)"}</code> plus gas. Verdict comes back with on-chain proof.
-      </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 submit.</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">AI Judge</h1>
+          <p className="truncate text-xs text-muted-foreground">
+            {network ? (
+              <>Signed from your wallet on {network} · {feeLcai != null ? feeLcai + " LCAI" : "..."} + gas · verdict has on-chain proof</>
+            ) : (
+              "Connect a wallet on LightChain to start"
+            )}
+          </p>
         </div>
-      )}
+        <ConnectButton />
+      </header>
 
-      <label style={{ display: "block", margin: "12px 0" }}>
-        <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>Criteria</div>
-        <textarea value={criteria} onChange={(e) => setCriteria(e.target.value)} rows={2}
-          style={{ width: "100%", padding: 8, fontFamily: "monospace", fontSize: 12 }} />
-      </label>
-      <label style={{ display: "block", margin: "12px 0" }}>
-        <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 4 }}>Evidence (JSON)</div>
-        <textarea value={evidence} onChange={(e) => setEvidence(e.target.value)} rows={5}
-          style={{ width: "100%", padding: 8, fontFamily: "monospace", fontSize: 12 }} />
-      </label>
-      <button type="button" onClick={() => run()} disabled={busy || !criteria.trim() || !evidence.trim() || !address || !network}
-        style={{ padding: "8px 16px", borderRadius: 8, cursor: busy ? "wait" : "pointer" }}>
-        {busy ? (busyStage || "Judging...") : "Get AI verdict"}
-      </button>
+      <div className="flex flex-col gap-4 py-6">
+        {!address && (
+          <div className="flex items-center justify-between gap-3 rounded-xl border border-border bg-card px-4 py-3 text-sm text-muted-foreground">
+            <span>Connect a wallet to submit.</span>
+            <ConnectButton />
+          </div>
+        )}
 
-      {err && (
-        <p style={{ marginTop: 12, padding: "8px 12px", border: "1px solid #f5c2c7", background: "#f8d7da", color: "#842029", borderRadius: 6 }}>
-          {err}
-        </p>
-      )}
+        <label className="flex flex-col gap-1.5">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Criteria</span>
+          <textarea value={criteria} onChange={(e) => setCriteria(e.target.value)} rows={2}
+            className="resize-none rounded-xl border border-border bg-card px-3 py-2 font-mono text-xs text-foreground outline-none focus:ring-2 focus:ring-primary" />
+        </label>
+        <label className="flex flex-col gap-1.5">
+          <span className="text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Evidence (JSON)</span>
+          <textarea value={evidence} onChange={(e) => setEvidence(e.target.value)} rows={5}
+            className="resize-none rounded-xl border border-border bg-card px-3 py-2 font-mono text-xs text-foreground outline-none focus:ring-2 focus:ring-primary" />
+        </label>
+
+        <button type="button" onClick={() => run()} disabled={busy || !criteria.trim() || !evidence.trim() || !address || !network}
+          className="self-start 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 || "Judging...") : "Get AI verdict"}
+        </button>
 
-      {result && (
-        <div style={{ marginTop: 16, padding: 16, border: "1px solid #ddd", borderRadius: 8 }}>
-          <div style={{ fontSize: 11, textTransform: "uppercase", color: "#888", marginBottom: 8 }}>Verdict</div>
-          {result.verdict ? (
-            <div>
-              <div style={{ fontSize: 24, fontWeight: 600, color: result.verdict.passed ? "#2e7d32" : "#c62828" }}>
-                {result.verdict.passed ? "PASSED" : "FAILED"}
-                <span style={{ marginLeft: 12, fontSize: 14, color: "#666" }}>
-                  confidence {Math.round(result.verdict.confidence * 100)}%
-                </span>
+        {err && (
+          <p className="rounded-lg border border-destructive/30 bg-destructive/10 px-3 py-2 text-sm text-destructive">
+            {err}
+          </p>
+        )}
+
+        {result && (
+          <div className="rounded-2xl border border-border bg-card p-4">
+            <div className="mb-2 text-[11px] font-medium uppercase tracking-wide text-muted-foreground">Verdict</div>
+            {result.verdict ? (
+              <div>
+                <div className={"flex items-baseline gap-3 text-2xl font-semibold " + (result.verdict.passed ? "text-success" : "text-destructive")}>
+                  {result.verdict.passed ? "PASSED" : "FAILED"}
+                  <span className="text-sm font-normal text-muted-foreground">
+                    confidence {Math.round(result.verdict.confidence * 100)}%
+                  </span>
+                </div>
+                <p className="mt-2 text-sm text-foreground">{result.verdict.reason}</p>
               </div>
-              <p style={{ marginTop: 8, color: "#444" }}>{result.verdict.reason}</p>
-            </div>
-          ) : (
-            <pre style={{ whiteSpace: "pre-wrap", margin: 0, fontFamily: "monospace", fontSize: 12, color: "#666" }}>
-              {result.raw}
-            </pre>
-          )}
-          <div style={{ marginTop: 12, fontSize: 12, color: "#666", display: "flex", gap: 12, flexWrap: "wrap" }}>
-            <span>job #{result.jobId}</span>
-            <a href={\`https://\${network}.lightscan.app/address/\${result.worker}\`} target="_blank" rel="noopener noreferrer">worker</a>
-            <a href={\`https://\${network}.lightscan.app/tx/\${result.submitJob}\`} target="_blank" rel="noopener noreferrer">submitJob</a>
-            {result.jobCompleted && (
-              <a href={\`https://\${network}.lightscan.app/tx/\${result.jobCompleted}\`} target="_blank" rel="noopener noreferrer">jobCompleted</a>
+            ) : (
+              <pre className="m-0 whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground">
+                {result.raw}
+              </pre>
             )}
+            <div className="mt-3 flex flex-wrap gap-3 text-xs text-muted-foreground">
+              <span>job #{result.jobId}</span>
+              <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/address/\${result.worker}\`} target="_blank" rel="noopener noreferrer">worker</a>
+              <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${result.submitJob}\`} target="_blank" rel="noopener noreferrer">submitJob</a>
+              {result.jobCompleted && (
+                <a className="hover:text-foreground hover:underline" href={\`https://\${network}.lightscan.app/tx/\${result.jobCompleted}\`} target="_blank" rel="noopener noreferrer">jobCompleted</a>
+              )}
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </main>
   );
 }
@@ -2268,6 +2300,17 @@ body::before {
     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;
@@ -2344,6 +2387,44 @@ function setDarkDefaultOnLayout(cwd) {
     }
     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
@@ -2359,7 +2440,9 @@ export function wireFreshScaffold(target, opts = {}) {
     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. Keep dark as the default theme (matches lightnode.app).
+    // 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 };
 }

package/dist/cli.js

@@ -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) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lightnode-sdk",
-  "version": "0.8.1",
+  "version": "0.8.3",
   "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",