lightnode-sdk 0.8.2 → 0.8.4

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/* 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 declare const SCAFFOLD_GLOBALS_CSS = "@import \"tailwindcss\";\n\n/* let Tailwind v4 see streamdown's classes so markdown answers are styled\n   (harmless when streamdown isn't installed - the path just matches nothing) */\n@source \"../node_modules/streamdown/dist/index.js\";\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/* the lcai-chat connect-button gradient (pink -> purple) */\n.bg-gradient-btn {\n  background-image: linear-gradient(94deg, #dd00ac 10.66%, #7130c3 53.03%, #410093 96.34%);\n  background-size: 200% auto;\n}\n@keyframes pulse-dot {\n  0%, 100% { opacity: 1; }\n  50% { opacity: 0.4; }\n}\n.animate-pulse-dot {\n  animation: pulse-dot 1.6s ease-in-out infinite;\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

@@ -961,9 +961,10 @@ const NEXTJS_CHAT_WEB3_PAGE = `// app/chat-web3/page.tsx
 //     turn plus a small gas amount.
 "use client";
 
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useAccount, useWalletClient, usePublicClient } from "wagmi";
 import { siweSignIn, GatewayClient, runInference, estimateJobFee, NETWORKS } from "lightnode-sdk";
+import { Streamdown } from "streamdown";
 import { ConnectButton } from "@/components/connect-button";
 
 type Turn = {
@@ -990,6 +991,7 @@ export default function ChatWeb3() {
   const [busyStage, setBusyStage] = useState("");
   const [err, setErr] = useState<string | null>(null);
   const [feeLcai, setFeeLcai] = useState<number | null>(null);
+  const endRef = useRef<HTMLDivElement>(null);
 
   // Read the on-chain fee for the connected network so we can show the
   // visitor the real cost per turn before they click Send.
@@ -1003,6 +1005,11 @@ export default function ChatWeb3() {
     return () => { cancelled = true; };
   }, [network]);
 
+  // Keep the latest turn (and the "writing on chain" indicator) in view.
+  useEffect(() => {
+    endRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [turns, busy]);
+
   /** Build a single prompt from history + new user input. */
   function composePrompt(history: Turn[], next: string, system: string): string {
     const lines: string[] = [];
@@ -1074,10 +1081,10 @@ export default function ChatWeb3() {
   }
 
   return (
-    <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">
+    <main className="mx-auto flex min-h-screen w-full max-w-3xl flex-col px-4 py-6">
+      <header className="flex items-center justify-between gap-3 pb-6">
         <div className="min-w-0">
-          <h1 className="text-base font-semibold text-foreground">Chat</h1>
+          <h1 className="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</>
@@ -1089,10 +1096,12 @@ export default function ChatWeb3() {
         <ConnectButton />
       </header>
 
-      <div className="flex flex-1 flex-col gap-3 overflow-y-auto py-6">
-        {turns.length === 0 ? (
+      <div className="flex flex-1 flex-col gap-6 overflow-y-auto pb-6">
+        {turns.length === 0 && !busy ? (
           <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>
+            <h2 className="text-3xl font-medium tracking-tight text-foreground">
+              Start talking with <span className="text-gradient">AI Chat</span>
+            </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.
@@ -1104,61 +1113,88 @@ export default function ChatWeb3() {
             )}
           </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>
-                  )}
+          <>
+            {turns.map((t, i) =>
+              t.role === "user" ? (
+                <div key={i} className="flex justify-end">
+                  <div className="w-fit max-w-[85%] whitespace-pre-wrap break-words rounded-2xl bg-surface-base-faint px-4 py-2.5 text-sm text-foreground">
+                    {t.text}
+                  </div>
                 </div>
-              ) : null}
-            </div>
-          ))
+              ) : (
+                <div key={i} className="group flex flex-col gap-2">
+                  <div className="prose-sm max-w-none text-sm leading-relaxed text-foreground [&_*:first-child]:mt-0 [&_*:last-child]:mb-0">
+                    <Streamdown>{t.text}</Streamdown>
+                  </div>
+                  <div className="flex flex-wrap items-center gap-3 text-[11px] text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100">
+                    <button
+                      type="button"
+                      onClick={() => navigator.clipboard?.writeText(t.text)}
+                      className="inline-flex items-center gap-1 hover:text-foreground"
+                      aria-label="Copy"
+                    >
+                      <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <rect x="9" y="9" width="13" height="13" rx="2" ry="2" />
+                        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" />
+                      </svg>
+                      Copy
+                    </button>
+                    {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>
+                </div>
+              )
+            )}
+            {busy && (
+              <div className="animate-pulse-dot text-sm text-muted-foreground">
+                {busyStage || "Writing on chain..."}
+              </div>
+            )}
+          </>
         )}
+        <div ref={endRef} />
       </div>
 
-      <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"
-          />
+      <div className="rounded-2xl border border-border bg-card p-3">
+        <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="Send a message..."
+          className="max-h-40 min-h-[44px] w-full resize-none bg-transparent px-2 py-2 text-sm text-foreground outline-none placeholder:text-muted-foreground"
+        />
+        <div className="mt-1 flex items-center justify-between gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-medium text-muted-foreground">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="4" y="4" width="16" height="16" rx="2" />
+              <rect x="9" y="9" width="6" height="6" />
+              <path d="M9 2v2M15 2v2M9 20v2M15 20v2M2 9h2M2 15h2M20 9h2M20 15h2" />
+            </svg>
+            {MODEL}
+          </span>
           <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"
+            className="flex size-9 shrink-0 items-center justify-center rounded-full bg-gradient-primary text-white transition hover:brightness-110 disabled:cursor-not-allowed disabled:bg-none disabled:bg-muted disabled:text-muted-foreground"
+            aria-label={busy ? "Working" : "Send"}
           >
-            {busy ? (busyStage || "Sending...") : "Send"}
+            {busy ? (
+              <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor"><rect x="6" y="6" width="12" height="12" rx="2" /></svg>
+            ) : (
+              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 19V5M5 12l7-7 7 7" /></svg>
+            )}
           </button>
         </div>
         {err && (
@@ -1274,59 +1310,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>
   );
 }
@@ -1459,72 +1503,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>
   );
 }
@@ -1809,7 +1861,8 @@ export function addChatWeb3(opts = {}) {
     written.push(writeFile(path.join(cwd, "app/chat-web3/page.tsx"), NEXTJS_CHAT_WEB3_PAGE, force));
     return {
         written,
-        install: `npm install lightnode-sdk viem` + (hasWagmi ? "" : " wagmi @tanstack/react-query"),
+        // streamdown renders the assistant answers as markdown (bold, lists, code).
+        install: `npm install lightnode-sdk viem streamdown` + (hasWagmi ? "" : " wagmi @tanstack/react-query"),
         template,
         network,
         needsWagmi: !hasWagmi,
@@ -1966,9 +2019,13 @@ export function ConnectButton() {
         type="button"
         onClick={() => connect({ connector })}
         disabled={isPending}
-        style={{ padding: "8px 16px", borderRadius: 8, cursor: "pointer" }}
+        className="bg-gradient-btn inline-flex items-center gap-2 rounded-[10px] px-5 py-2.5 text-sm font-medium tracking-wide text-white transition hover:brightness-110 disabled:opacity-60"
       >
-        {isPending ? "Connecting..." : "Connect wallet"}
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+          <path d="M19 7V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2" />
+          <path d="M21 12h-6a2 2 0 0 0 0 4h6v-4Z" />
+        </svg>
+        {isPending ? "Connecting..." : "Connect Wallet"}
       </button>
     );
   }
@@ -1979,7 +2036,7 @@ export function ConnectButton() {
         type="button"
         onClick={() => switchChain({ chainId: 9200 })}
         disabled={switching}
-        style={{ padding: "8px 16px", borderRadius: 8, background: "#fee", cursor: "pointer" }}
+        className="rounded-[10px] border border-destructive/40 bg-destructive/10 px-4 py-2 text-sm font-medium text-destructive transition hover:bg-destructive/20 disabled:opacity-60"
       >
         {switching ? "Switching..." : "Switch to LightChain"}
       </button>
@@ -1990,9 +2047,12 @@ export function ConnectButton() {
     <button
       type="button"
       onClick={() => disconnect()}
-      style={{ padding: "8px 16px", borderRadius: 8, cursor: "pointer", fontFamily: "monospace" }}
+      className="group inline-flex items-center gap-2 rounded-[10px] border border-border bg-card px-4 py-2 font-mono text-sm text-foreground transition hover:border-primary"
+      title={\`\${chain?.name} - click to disconnect\`}
     >
-      {address ? shortAddress(address) : "(unknown)"} ({chain?.name}) - disconnect
+      <span className="size-2 rounded-full bg-success" />
+      {address ? shortAddress(address) : "(unknown)"}
+      <span className="text-muted-foreground group-hover:text-foreground">disconnect</span>
     </button>
   );
 }
@@ -2090,6 +2150,10 @@ export function patchLayoutWithProviders(cwd = process.cwd()) {
 // installs default to the real look instead of the create-next-app starter.
 export const SCAFFOLD_GLOBALS_CSS = `@import "tailwindcss";
 
+/* let Tailwind v4 see streamdown's classes so markdown answers are styled
+   (harmless when streamdown isn't installed - the path just matches nothing) */
+@source "../node_modules/streamdown/dist/index.js";
+
 /* dark mode via .dark class (we default the app to dark) */
 @custom-variant dark (&:is(.dark, .dark *));
 
@@ -2288,6 +2352,18 @@ body::before {
 .bg-gradient-primary {
   background-image: var(--color-gradient-primary);
 }
+/* the lcai-chat connect-button gradient (pink -> purple) */
+.bg-gradient-btn {
+  background-image: linear-gradient(94deg, #dd00ac 10.66%, #7130c3 53.03%, #410093 96.34%);
+  background-size: 200% auto;
+}
+@keyframes pulse-dot {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.4; }
+}
+.animate-pulse-dot {
+  animation: pulse-dot 1.6s ease-in-out infinite;
+}
 .text-gradient {
   background: linear-gradient(94deg, #dd00ac 10%, #7130c3 53%, #7064e9 96%);
   -webkit-background-clip: text;

package/package.json

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