From c602e1e34e16adff4812df1a4040edd747cae1d8 Mon Sep 17 00:00:00 2001 From: ponderingdemocritus Date: Sat, 21 Mar 2026 19:20:20 +1100 Subject: [PATCH 1/4] refactor: redesign landing pages with minimal terminal aesthetic - Strip marketing copy from all 4 client landing pages (lucid-docs, TanStack UI/headless, Next.js) - Apply minimal dark terminal aesthetic: monospace, 1px borders, emerald accents, no rounded corners - Replace card layouts with tabular entrypoint rows showing game/name, price, streaming type - Preserve all functionality: health polling, invoke/stream, wallet integration, schema forms - Add landing.html HTML prototype for design reference --- lucid-docs/public/landing.html | 481 +++++++++++++ lucid-docs/src/routes/index.tsx | 651 +++-------------- .../adapters/next/components/dashboard.tsx | 239 +++---- .../tanstack/headless/src/routes/index.tsx | 151 ++-- .../adapters/tanstack/ui/src/routes/index.tsx | 656 ++++++++---------- 5 files changed, 1079 insertions(+), 1099 deletions(-) create mode 100644 lucid-docs/public/landing.html diff --git a/lucid-docs/public/landing.html b/lucid-docs/public/landing.html new file mode 100644 index 00000000..fadeb917 --- /dev/null +++ b/lucid-docs/public/landing.html @@ -0,0 +1,481 @@ + + + + + + Lucid + + + +
+ + +
+ + +
+ + +
+

Agent commerce
infrastructure

+

Route to paid AI agents. Pay per request. Open protocols.

+
+ $ bunx @lucid-agents/cli my-agent +
+
+ + +
+
+ game + price + +
+ + +
+
+ 01 + sentiment + text analysis & scoring +
+
$0.01
+
+
+
+ + +
+
+ 02 + code-review + automated code analysis +
+
$0.05
+
+
+
+ + +
+
+ 03 + market-feed + real-time data streams +
+
$0.10
+
+
+
+ + +
+
+ 04 + image-gen + ai image generation +
+
$0.15
+
+
+
+ + +
+
+ 05 + scheduler + autonomous task orchestration +
+
$0.03
+
+
+
+ + +
+
+ 06 + a2a-broker + agent-to-agent marketplace +
+
$0.02
+
+
+
+
+ + +
+
supporting protocols
+ +
+ + + + +
+ + diff --git a/lucid-docs/src/routes/index.tsx b/lucid-docs/src/routes/index.tsx index caedeabb..991c2214 100644 --- a/lucid-docs/src/routes/index.tsx +++ b/lucid-docs/src/routes/index.tsx @@ -6,592 +6,149 @@ export const Route = createFileRoute('/')({ component: Home, }); +const games = [ + { idx: '01', name: 'sentiment', desc: 'text analysis & scoring', price: '$0.01', href: 'examples' }, + { idx: '02', name: 'code-review', desc: 'automated code analysis', price: '$0.05', href: 'examples' }, + { idx: '03', name: 'market-feed', desc: 'real-time data streams', price: '$0.10', href: 'examples' }, + { idx: '04', name: 'image-gen', desc: 'ai image generation', price: '$0.15', href: 'examples' }, + { idx: '05', name: 'scheduler', desc: 'autonomous task orchestration', price: '$0.03', href: 'examples' }, + { idx: '06', name: 'a2a-broker', desc: 'agent-to-agent marketplace', price: '$0.02', href: 'examples' }, +] as const; + +const protocols = [ + { name: 'x402', desc: 'HTTP-native payments. USDC on Base & Solana.', color: 'bg-green-500', href: 'packages/payments' }, + { name: 'A2A', desc: 'Agent discovery & invocation protocol.', color: 'bg-blue-500', href: 'packages/a2a' }, + { name: 'ERC-8004', desc: 'On-chain identity & domain verification.', color: 'bg-violet-500', href: 'packages/identity' }, + { name: 'SIWX', desc: 'Sign-In With X. Cross-chain auth.', color: 'bg-amber-500', href: 'getting-started/introduction' }, + { name: 'MPP', desc: 'Machine Payments Protocol.', color: 'bg-pink-500', href: 'packages/mpp' }, +] as const; + function Home() { return ( -
- {/* Animated border lines */} -
-
-
-
-
-
-
-
-
- {/* Hero */} -
-

- The Agent Commerce Framework -

-

- Build. Deploy. Monetize. -

-

- TypeScript framework for AI agents with{' '} - x402 payments,{' '} - A2A interoperability, and{' '} - ERC-8004 identity. -

+
-
+ {/* Header */} +
+
+ lucid. +
+
+
+ + mainnet +
+ + + {/* Hero */} +
+

+ Agent commerce
infrastructure +

+

+ Route to paid AI agents. Pay per request. Open protocols. +

- {/* Stats Bar */} -
- - - - -
- - {/* 3 Pillars */} -
-
-
-

- x402 -

-

Monetize Instantly

-

- HTTP-native payments. Accept USDC on Base or Solana with automatic paywalls. -

-
-
-
-

- A2A -

-

Agent Interoperability

-

- Discovery and communication protocol. Agents buy and sell services from each other. -

+ {/* Games Table */} +
+ {/* Table Header */} +
+ game + price +
-
-
-

- ERC-8004 -

-

Verifiable Identity

-

- On-chain identity and reputation. Domain binding and verifiable trust signals. -

-
-
- {/* Code */} -
-
-

- Developer Experience -

-

- Ship a Paid Agent in Minutes -

-

- Define your API with Zod schemas. Add pricing. Deploy. That's it. -

-
    -
  • - - Automatic input/output validation -
  • -
  • - - Full TypeScript inference -
  • -
  • - - JSON Schema generation -
  • -
-
- - Quickstart - - - Examples - -
-
-
-
- agent.ts - - 18 lines - -
-
-              {codeExample}
-            
-
-
- - {/* Skills + Autonomous Agents */} -
-
-

- Skills -

-

- Copy the Skill in One Command -

-

- Install the `lucid-agent-creator` skill directly into your local `.claude/skills` folder. -

-
-
- skills install - -
-
-                {skillsInstallScript}
-              
-
+ {/* Rows */} + {games.map((game) => ( - Skills Documentation +
+ {game.idx} + {game.name} + {game.desc} +
+
+ {game.price} +
+
+ + → + +
-
- -
-

- Autonomous Agents -

-

- Agents That Build Applications -

-

- Use AI + skills to generate, configure, and ship new Lucid-powered applications end-to-end. -

-
    -
  • - - Generate handlers and schemas from natural language prompts -
  • -
  • - - Create and host production agents via `create_lucid_agent` -
  • -
  • - - Iterate by updating prompts instead of hand-writing boilerplate -
  • -
-
- - Autonomous Agents - - - Build Applications - -
-
+ ))}
- {/* AI Router */} -
-
-

- AI Router -

-

- OpenAI-Compatible x402 Routing -

-

- Route inference through x402 with permit sessions, async settlement, and streaming responses. -

-
    -
  • - - ERC-2612 permits in `PAYMENT-SIGNATURE` -
  • -
  • - - Session tracking via `X-Upto-Session` -
  • -
  • - - OpenCode plugin auto-signs and injects headers -
  • -
-
- - Overview - - - OpenCode - - - OpenClaw - -
-
-
-
- opencode.json - -
-
-              {opencodeRouterConfig}
-            
+ {/* Protocols */} +
+
+ supporting protocols
-
- - {/* Features Grid */} -
-
-
-

- Features -

-

- Built for Production -

-
- - Open Standards - -
-
- - - - - - -
-
- - {/* Use Cases */} -
-
-

- Use Cases -

-

- What You Can Build -

-
-
- - - - -
-
- - {/* Deploy Anywhere */} -
-
-

- Frameworks -

-
- - - - -
-
-
-

- Chains -

-
- - - -
-
-
- - {/* Final CTA */} -
-
-
-

- Start Building the Agent Economy -

-

- Open source. Open standards. No lock-in. -

- -
+
+ {protocols.map((proto) => ( - Read the Docs +
+ + {proto.name} +
+
+ {proto.desc} +
- - View Examples - -
- -

- MIT Licensed ·{' '} - - GitHub - -

+ ))}
-
- - ); -} - -const codeExample = `import { createAgent } from '@lucid-agents/core' -import { http } from '@lucid-agents/http' -import { payments } from '@lucid-agents/payments' -import { z } from 'zod' - -const agent = createAgent({ name: 'my-agent' }) - .use(http()) - .use(payments({ address: '0x...' })) - -agent.entrypoint({ - name: 'analyze', - input: z.object({ text: z.string() }), - output: z.object({ sentiment: z.string(), score: z.number() }), - price: { amount: '0.01', currency: 'USDC' }, - handler: async ({ input }) => { - // Your AI logic here - return { sentiment: 'positive', score: 0.92 } - } -})`; -const skillsInstallScript = `mkdir -p .claude/skills/lucid-agent-creator && \\ -curl -fsSL https://raw.githubusercontent.com/daydreamsai/skills-market/main/plugins/lucid-agent-creator/skills/SKILL.md \\ - -o .claude/skills/lucid-agent-creator/SKILL.md`; - -const opencodeRouterConfig = `{ - "$schema": "https://opencode.ai/config.json", - "plugin": ["@lucid-agents/opencode-x402-plugin"], - "provider": { - "x402": { - "npm": "@ai-sdk/anthropic", - "name": "x402 Router", - "options": { "baseURL": "https://ai.xgate.run/v1" } - } - } -}`; - -function StatCell({ - value, - label, - border, - className, -}: { - value: string; - label: string; - border?: boolean; - className?: string; -}) { - return ( -
-

{value}

-

{label}

-
- ); -} - -function FeatureCell({ - title, - description, - border, - accent, -}: { - title: string; - description: string; - border: string; - accent: string; -}) { - return ( -
-
-

{title}

-

- {description} -

-
- ); -} + {/* Footer */} + -function UseCaseCell({ - title, - description, - border, - tag, -}: { - title: string; - description: string; - border: string; - tag: string; -}) { - return ( -
-
-

{title}

- - {tag} -
-

- {description} -

-
- ); -} - -function Badge({ name, highlight }: { name: string; highlight?: boolean }) { - return ( - - {name} - + ); } diff --git a/packages/cli/adapters/next/components/dashboard.tsx b/packages/cli/adapters/next/components/dashboard.tsx index 9d69432b..5b7c18cf 100644 --- a/packages/cli/adapters/next/components/dashboard.tsx +++ b/packages/cli/adapters/next/components/dashboard.tsx @@ -143,145 +143,134 @@ export default function Dashboard({ ); return ( -
-
-
-
-
-
-
- 🤖 -
-
-

- {initialData.meta?.name ?? 'Lucid Agent'} -

-

- v{initialData.meta?.version ?? '0.0.0'} -

-
-
-

- {initialData.meta?.description ?? - 'Monitor agent health, review entrypoints, and interact with invoke and streaming flows.'} -

-
- -
- -
+
+
-
-
-
-
- 📊 -
-

- Configuration -

-
-
-
-
Entrypoints
-
{entrypointCount}
-
-
-
Network
-
{networkInfo.label}
-
-
-
Default Price
-
- {initialData.payments?.defaultPrice ?? 'Free'} -
-
-
+ {/* ── Header ── */} +
+
+ + {initialData.meta?.name ?? 'Lucid Agent'} + + . + + v{initialData.meta?.version ?? '0.0.0'} +
- -
-
-
- 💰 -
-

Payment

-
-
-
-
Recipient
-
- {initialData.payments?.payTo ?? '—'} -
-
-
+
+ +
-
+ -
-
-
-
- -
-
-

- {entrypointCount} {entrypointLabel} -

-

- Configure payloads and test your agent endpoints -

-
+ {/* ── Hero ── */} +
+

+ {initialData.meta?.description ?? 'Agent commerce infrastructure'} +

+

+ {entrypointCount} {entrypointLabel.toLowerCase()} available.{' '} + {initialData.payments?.defaultPrice + ? `Default price: ${initialData.payments.defaultPrice}.` + : 'Free tier.'}{' '} + Network: {networkInfo.label}. +

+ {initialData.payments?.payTo && ( +
+ payTo + + {initialData.payments.payTo} +
-
+ )} +
-
- {cards.map(card => ( - - ))} + {/* ── Entrypoints Table ── */} +
+
+ entrypoint + price + type
+ + {cards.map((card, index) => ( +
+ +
+ + {String(index + 1).padStart(2, '0')} + + + {card.key} + + + {card.description} + +
+
+ {card.priceLabel} +
+
+ {card.streaming && ( + + stream + + )} + + → + +
+
+ + {/* ── Expanded entrypoint card ── */} +
+ +
+
+ ))}
- + {/* ── Manifest ── */} +
+ +
-
-
-
- 💻 -
-
-

- Code Examples -

-

- Integration snippets for your applications -

-
+ {/* ── Code Examples ── */} +
+
+ integration
- -
- +
+
+ +
-
-
-

Powered by Lucid Agents Framework

-

Built with Next.js

-
+ {/* ── Footer ── */} +
+ + Powered by Lucid Agents Framework + + + {networkInfo.label} +
diff --git a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx index 37475329..2340599f 100644 --- a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx @@ -43,64 +43,115 @@ function HeadlessDashboard() { const loaderData = Route.useLoaderData(); const network = getNetworkInfo(); + const agentName = loaderData.meta?.name ?? 'Agent'; + return ( -
-
-

- Lucid Agent · API Runtime -

-

- {loaderData.meta?.name ?? 'Headless Agent'} -

- {loaderData.meta?.description ? ( -

{loaderData.meta.description}

- ) : null} -
+
+
-
-

- This project scaffolds the TanStack runtime without a UI shell. Invoke - entrypoints via HTTP: -

-
-          {`curl -X POST https:///api/agent/entrypoints//invoke \\
-  -H "Content-Type: application/json" \\
-  -d '{ "input": { ... } }'`}
-        
-
+ {/* Header */} +
+
+ {agentName} +
+ +
+ + {/* Hero */} +
+

+ {agentName} +

+ {loaderData.meta?.description && ( +

+ {loaderData.meta.description} +

+ )} +
+ $ + {`curl -X POST /api/agent/entrypoints//invoke`} +
+
+ + {/* Entrypoints Table */} +
+
+ entrypoint + price + +
-
-

Entrypoints

-
    {loaderData.entrypoints.map( - (entry: { - key: string; - description?: string | null; - streaming: boolean; - price?: string | null; - }) => ( -
  1. ( +
    -

    {entry.key}

    - {entry.description ? ( -

    {entry.description}

    - ) : null} -

    - Streaming: {entry.streaming ? 'yes' : 'no'} · Price:{' '} - {entry.price ?? 'free'} -

    -
  2. +
    + + {String(i + 1).padStart(2, '0')} + + {entry.key} + {entry.description && ( + + {entry.description} + + )} +
    +
    + {entry.price != null ? `$${entry.price}` : 'free'} +
    +
    + + → + +
    +
) )} - -
-
- Serving from {network.label} · Update `src/routes/index.tsx` to expose - your own status page. -
-
+ {loaderData.entrypoints.length === 0 && ( +
+ No entrypoints registered yet. +
+ )} +
+ + {/* Footer */} +
+ + {agentName} + {loaderData.meta?.version ? ` v${loaderData.meta.version}` : ''} + {' \u00B7 '} + {network.label} + + + {loaderData.entrypoints.length} entrypoint + {loaderData.entrypoints.length !== 1 ? 's' : ''} + {' \u00B7 '} + {loaderData.entrypoints.filter( + (e: { streaming: boolean }) => e.streaming + ).length}{' '} + streaming + +
+
+
); } diff --git a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx index 04833be4..a32d0aa1 100644 --- a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx @@ -258,7 +258,7 @@ const StatusChip = ({ state }: { state: HealthState }) => { return ( @@ -596,347 +596,280 @@ function HomePage() { '// Ensure WALLET_CONNECT_PROJECT_ID is configured to use WalletConnect.', ].join('\n'); + const [expandedEntry, setExpandedEntry] = useState(null); + return ( -
-
-
-
-
-
- 🤖 -
-
-

- {meta?.name ?? 'Lucid Agent'} -

-

- v{meta?.version ?? '0.0.0'} -

-
-
-

- {meta?.description ?? - 'Monitor agent health, review entrypoints, and interact with invoke and streaming flows.'} -

+
+
+ + {/* ── Header ── */} +
+
+

+ {meta?.name ?? 'agent'}. +

+ + v{meta?.version ?? '0.0.0'} + +
- -
- -
-
-
-
-
- 💚 -
-

- Health -

-
- -
-
-
-
Status
-
- {healthData?.status ?? - (healthState === 'healthy' ? 'ok' : 'unknown')} -
-
-
-
Last Checked
-
- {healthData?.timestamp ?? 'Just now'} -
-
-
+
+
+ -
-
-
- 📊 -
-

- Configuration -

-
-
-
-
Entrypoints
-
{entrypointCount}
-
-
-
Network
-
{networkInfo.label}
-
-
-
Default Price
-
- {payments?.defaultPrice ?? 'Free'} -
-
-
+ {/* ── Description ── */} + {meta?.description && ( +
+

+ {meta.description} +

+ )} -
-
-
- 💰 -
-

Payment

-
-
-
-
Recipient
-
- {payments?.payTo ?? '—'} -
-
-
+ {/* ── Stats Row ── */} +
+
+
entrypoints
+
{entrypointCount}
+
+
+
network
+
{networkInfo.label}
+
+
+
default price
+
{payments?.defaultPrice ?? 'Free'}
+
+
+
pay to
+
{payments?.payTo ?? '--'}
+
+
+ + {/* ── Entrypoints Table ── */} +
+
+ entrypoint + price + type
-
-
-
-
-
- -
-
-

- {entrypointCount} {entrypointLabel} -

-

- Configure payloads and test your agent endpoints -

-
-
-
- -
- {cards?.map(card => { - const state = getEntryState(card.key); - return ( -
{ + const state = getEntryState(card.key); + const isExpanded = expandedEntry === card.key; + + return ( +
+ {/* ── Row ── */} +
setExpandedEntry(isExpanded ? null : card.key)} > -
-
-
-

- {card.key} -

- - {card.streaming ? 'Stream' : 'Invoke'} - -
-

- {card.description} -

-
-
- -
-
- Pricing - - {card.priceLabel} - -
-
- Network - - { - getNetworkInfo( - card.networkId ?? payments?.network ?? undefined - ).label - } - -
-
- Invoke Path - - {card.invokePath} - -
- {card.streamPath && ( -
- Stream Path - - {card.streamPath} - -
- )} +
+ + {String(index + 1).padStart(2, '0')} + + {card.key} + {card.description} +
+
+ {card.priceLabel}
+
+ + {card.streaming ? 'stream' : 'invoke'} + +
+
- - updateEntryState(card.key, { payload: value }) - } - /> + {/* ── Expanded Detail ── */} + {isExpanded && ( +
- {card.outputSchema && card.outputSchema.properties && ( -
- - - ▶ + {/* Paths */} +
+
+ invoke + {card.invokePath} +
+ {card.streamPath && ( +
+ stream + {card.streamPath} +
+ )} +
+ network + + {getNetworkInfo(card.networkId ?? payments?.network ?? undefined).label} - Expected Output Schema -
-
-
- {Object.entries(card.outputSchema.properties).map( - ([name, schema]: [string, any]) => ( -
-
- {name}: -
-
- {schema.type} - {schema.description && - ` - ${schema.description}`} -
-
- ) - )} -
-
- )} - - {state.error && ( -
- -

- {state.error} -

- )} -
- - {card.streaming && ( + /> + + {/* Output Schema */} + {card.outputSchema && card.outputSchema.properties && ( +
+ + + → + + output schema + +
+
+ {Object.entries(card.outputSchema.properties).map( + ([name, schema]: [string, any]) => ( +
+
+ {name}: +
+
+ {schema.type} + {schema.description && ` -- ${schema.description}`} +
+
+ ) + )} +
+
+
+ )} + + {/* Error */} + {state.error && ( +
+ {state.error} +
+ )} + + {/* Action Buttons */} +
- )} - {card.streaming && - state.streamingStatus === 'streaming' && ( + {card.streaming && ( )} - -
+ {card.streaming && + state.streamingStatus === 'streaming' && ( + + )} + +
+ + {/* cURL preview */} +
+ + + → + + curl command + +
+                        {card.invokeCurl}
+                      
+ {card.streamCurl && ( +
+                          {card.streamCurl}
+                        
+ )} +
-
-
-
- - Response + {/* Response */} +
+
+ + response - {Boolean(state.result) && ( - - - + {state.paymentUsed && ( + + paid )}
- {state.paymentUsed && ( - - 💰 - Paid - - )} -
-
-                      {formatResult(state.result) || (
-                        
-                          Click "Invoke" to see the response here...
-                        
-                      )}
-                    
+
+                        {formatResult(state.result) || (
+                          
+                            -- invoke to see response --
+                          
+                        )}
+                      
+
+ {/* Stream Events */} {card.streaming && (
-
- - Stream Events - - {state.streamingStatus === 'streaming' && ( - - - - - )} -
+ + stream events + {state.streamingStatus === 'streaming' - ? '● Live' - : '○ Idle'} + ? '● live' + : '○ idle'}
-
+
{state.streamingEvents.length === 0 ? ( -

- Click "Start Stream" to see live events here... +

+ -- stream to see events --

) : ( -
    - {state.streamingEvents.map((event, index) => ( +
      + {state.streamingEvents.map((event, idx) => (
    • {event}
    • @@ -946,49 +879,31 @@ function HomePage() {
{state.streamingStatus === 'error' && state.streamingError && ( -
- -

- {state.streamingError} -

+
+ {state.streamingError}
)}
)} -
- - ); - })} -
+
+ )} +
+ ); + })}
-
-
-
- 📄 -
-
-

- Agent Manifest -

-

- Complete agent specification served from{' '} - - {MANIFEST_PATH} - -

-
-
- -
- + {/* ── Manifest ── */} +
+
+
- ▶ + → - View Full Manifest JSON + manifest + {MANIFEST_PATH} {manifestState === 'loading' && ( -
+ loading... )}
-
-
+            
+
                 {manifestState === 'loading' ? (
-                  
-
- Loading manifest… -
+ loading manifest... ) : ( manifestText )} @@ -1017,52 +929,42 @@ function HomePage() {
-
-
-
- 💻 -
-
-

- Code Examples -

-

- Integration snippets for your applications -

-
-
- -
-
-
-
- - WalletConnect - - - AppKit - -
- -
-
+        {/* ── Code Examples ── */}
+        
+
+ +
+ + → + + walletconnect integration + appkit +
+ +
+
+
                 {appKitSnippet}
               
-
-
+
+
-
-
-

Powered by Lucid Agents Framework

-

Built with TanStack Start

-
+ {/* ── Footer ── */} +
+ {networkInfo.label} + lucid-agents
+
); From f47ef302b4a952b41770bf64a15d574245b67e72 Mon Sep 17 00:00:00 2001 From: ponderingdemocritus Date: Sat, 21 Mar 2026 19:25:08 +1100 Subject: [PATCH 2/4] fix: address greptile review feedback - Remove duplicate custom header inside HomeLayout (lucid-docs) - Fix conflicting transition-colors/transition-transform on arrow span (next adapter) - Remove misleading cursor-pointer on non-clickable rows (headless adapter) --- lucid-docs/src/routes/index.tsx | 28 ------------------- .../adapters/next/components/dashboard.tsx | 2 +- .../tanstack/headless/src/routes/index.tsx | 2 +- 3 files changed, 2 insertions(+), 30 deletions(-) diff --git a/lucid-docs/src/routes/index.tsx b/lucid-docs/src/routes/index.tsx index 991c2214..2eb9679d 100644 --- a/lucid-docs/src/routes/index.tsx +++ b/lucid-docs/src/routes/index.tsx @@ -28,34 +28,6 @@ function Home() {
- {/* Header */} -
-
- lucid. -
- -
- {/* Hero */}

diff --git a/packages/cli/adapters/next/components/dashboard.tsx b/packages/cli/adapters/next/components/dashboard.tsx index 5b7c18cf..f288feed 100644 --- a/packages/cli/adapters/next/components/dashboard.tsx +++ b/packages/cli/adapters/next/components/dashboard.tsx @@ -222,7 +222,7 @@ export default function Dashboard({ stream )} - +

diff --git a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx index 2340599f..53331422 100644 --- a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx @@ -101,7 +101,7 @@ function HeadlessDashboard() { ) => (
From 8dcb2a15b86c14e40871e02d383bbaad78affced Mon Sep 17 00:00:00 2001 From: ponderingdemocritus Date: Sat, 21 Mar 2026 22:51:00 +1100 Subject: [PATCH 3/4] style: fix prettier formatting in adapter files --- .../adapters/next/components/dashboard.tsx | 9 +- .../tanstack/headless/src/routes/index.tsx | 9 +- .../adapters/tanstack/ui/src/routes/index.tsx | 93 +++++++++++++------ 3 files changed, 73 insertions(+), 38 deletions(-) diff --git a/packages/cli/adapters/next/components/dashboard.tsx b/packages/cli/adapters/next/components/dashboard.tsx index f288feed..e03bf49a 100644 --- a/packages/cli/adapters/next/components/dashboard.tsx +++ b/packages/cli/adapters/next/components/dashboard.tsx @@ -145,7 +145,6 @@ export default function Dashboard({ return (
- {/* ── Header ── */}
@@ -265,12 +264,8 @@ export default function Dashboard({ {/* ── Footer ── */}
- - Powered by Lucid Agents Framework - - - {networkInfo.label} - + Powered by Lucid Agents Framework + {networkInfo.label}
diff --git a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx index 53331422..fb7e6487 100644 --- a/packages/cli/adapters/tanstack/headless/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/headless/src/routes/index.tsx @@ -48,7 +48,6 @@ function HeadlessDashboard() { return (
- {/* Header */}
@@ -145,9 +144,11 @@ function HeadlessDashboard() { {loaderData.entrypoints.length} entrypoint {loaderData.entrypoints.length !== 1 ? 's' : ''} {' \u00B7 '} - {loaderData.entrypoints.filter( - (e: { streaming: boolean }) => e.streaming - ).length}{' '} + { + loaderData.entrypoints.filter( + (e: { streaming: boolean }) => e.streaming + ).length + }{' '} streaming diff --git a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx index a32d0aa1..443b78c7 100644 --- a/packages/cli/adapters/tanstack/ui/src/routes/index.tsx +++ b/packages/cli/adapters/tanstack/ui/src/routes/index.tsx @@ -601,12 +601,12 @@ function HomePage() { return (
- {/* ── Header ── */}

- {meta?.name ?? 'agent'}. + {meta?.name ?? 'agent'} + .

v{meta?.version ?? '0.0.0'} @@ -630,20 +630,34 @@ function HomePage() { {/* ── Stats Row ── */}
-
entrypoints
-
{entrypointCount}
+
+ entrypoints +
+
+ {entrypointCount} +
-
network
+
+ network +
{networkInfo.label}
-
default price
-
{payments?.defaultPrice ?? 'Free'}
+
+ default price +
+
+ {payments?.defaultPrice ?? 'Free'} +
-
pay to
-
{payments?.payTo ?? '--'}
+
+ pay to +
+
+ {payments?.payTo ?? '--'} +
@@ -670,17 +684,23 @@ function HomePage() { {String(index + 1).padStart(2, '0')} - {card.key} - {card.description} + + {card.key} + + + {card.description} +
{card.priceLabel}
- + {card.streaming ? 'stream' : 'invoke'}
@@ -689,23 +709,34 @@ function HomePage() { {/* ── Expanded Detail ── */} {isExpanded && (
- {/* Paths */}
- invoke + + invoke + {card.invokePath}
{card.streamPath && (
- stream - {card.streamPath} + + stream + + + {card.streamPath} +
)}
- network + + network + - {getNetworkInfo(card.networkId ?? payments?.network ?? undefined).label} + { + getNetworkInfo( + card.networkId ?? payments?.network ?? undefined + ).label + }
@@ -738,7 +769,8 @@ function HomePage() {
{schema.type} - {schema.description && ` -- ${schema.description}`} + {schema.description && + ` -- ${schema.description}`}
) @@ -901,9 +933,13 @@ function HomePage() { → manifest - {MANIFEST_PATH} + + {MANIFEST_PATH} + {manifestState === 'loading' && ( - loading... + + loading... + )}
); From 1b57f2b62a9eac5cd7e6f643d6d3a977c504cf25 Mon Sep 17 00:00:00 2001 From: ponderingdemocritus Date: Sat, 21 Mar 2026 23:03:51 +1100 Subject: [PATCH 4/4] fix: update headless adapter test assertion for new landing design --- packages/cli/tests/cli.test.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/cli/tests/cli.test.ts b/packages/cli/tests/cli.test.ts index ced61748..e8d738d0 100644 --- a/packages/cli/tests/cli.test.ts +++ b/packages/cli/tests/cli.test.ts @@ -407,7 +407,7 @@ describe('create-agent-kit CLI', () => { ); await expect(readdir(componentsDir)).rejects.toThrow(); - expect(indexRoute).toContain('TanStack runtime without a UI shell'); + expect(indexRoute).toContain('HeadlessDashboard'); }); it('prompts for a project name when not provided and prompt is available', async () => {