feat(homepage): update positioning to "Infinite Toolspace"

Rebrand homepage messaging around toolspace virtualization concept:
- Hero: "INFINITE TOOLSPACE" with "A million tools. Zero configuration."
- New ToolspaceSection explaining the three-stage pipeline
- FeaturesSection emphasizes retrieval layer and selection at scale
- Integration section: "MCP is the socket, TPMJS is the OS"
- Publish section: "Join the Infinite Toolspace"

apps/web/src/app/page.tsx

@@ -7,6 +7,7 @@ import Link from 'next/link';
 import { AppHeader } from '../components/AppHeader';
 import { FeaturesSection } from '../components/home/FeaturesSection';
 import { HeroSection } from '../components/home/HeroSection';
+import { ToolspaceSection } from '../components/home/ToolspaceSection';
 
 export const dynamic = 'force-dynamic';
 
@@ -135,6 +136,9 @@ export default async function HomePage(): Promise<React.ReactElement> {
         {/* Hero Section - Dithered Design */}
         <HeroSection stats={data.stats} />
 
+        {/* Toolspace Virtualization Concept */}
+        <ToolspaceSection />
+
         {/* Features Section */}
         <FeaturesSection />
 
@@ -158,11 +162,14 @@ export default async function HomePage(): Promise<React.ReactElement> {
         <section className="py-16 bg-background">
           <Container size="xl" padding="lg">
             <div className="text-center mb-12">
-              <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
+              <p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
-                Featured Tools
+                from the toolspace
+              </p>
+              <h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
+                top quality tools
               </h2>
-              <p className="text-lg text-foreground-secondary max-w-2xl mx-auto mb-8">
+              <p className="text-base text-foreground-secondary max-w-2xl mx-auto mb-8 font-sans">
-                Production-ready tools you can use today. Add to your AI agent in one line.
+                Surfaced by quality signals: health checks, downloads, documentation richness.
               </p>
             </div>
 
@@ -358,13 +365,14 @@ export default async function HomePage(): Promise<React.ReactElement> {
             {/* Section Header */}
             <div className="text-center mb-16">
               <p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
-                universal compatibility
+                mcp is the socket
               </p>
               <h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
-                works everywhere
+                plug into the toolspace
               </h2>
               <p className="text-base text-foreground-secondary max-w-xl mx-auto font-sans">
-                Use TPMJS tools with any MCP-compatible AI client. One URL, instant access.
+                Any MCP client becomes a window into the infinite toolspace. One URL unlocks
+                everything.
               </p>
             </div>
 
@@ -422,7 +430,7 @@ export default async function HomePage(): Promise<React.ReactElement> {
             {/* Code Example - Fieldset Style */}
             <fieldset className="border border-dashed border-border p-8 max-w-2xl mx-auto">
               <legend className="font-mono text-sm text-foreground-secondary px-3 lowercase">
-                quick start
+                connect to the toolspace
               </legend>
               <div className="mb-4">
                 <p className="font-mono text-xs text-foreground-tertiary uppercase tracking-wider mb-2">
@@ -458,8 +466,8 @@ export default async function HomePage(): Promise<React.ReactElement> {
               <div className="flex items-center gap-3 pt-4 border-t border-dashed border-border">
                 <div className="w-2 h-2 bg-success rounded-full animate-pulse" />
                 <p className="font-mono text-xs text-foreground-secondary">
-                  add to config → instant access to{' '}
+                  one url → infinite toolspace →{' '}
-                  <span className="text-primary font-medium">170+ tools</span>
+                  <span className="text-primary font-medium">tools load on-demand</span>
                 </p>
               </div>
             </fieldset>
@@ -471,11 +479,11 @@ export default async function HomePage(): Promise<React.ReactElement> {
           <Container size="xl" padding="lg">
             <div className="text-center max-w-3xl mx-auto">
               <h2 className="text-3xl md:text-4xl font-bold mb-4 text-foreground">
-                Publish Your AI Tool
+                Join the Infinite Toolspace
               </h2>
               <p className="text-lg text-foreground-secondary mb-8">
-                Share your tool with the AI community. Automatic discovery, quality scoring, and
+                Publish to npm, reach every agent. Your tool becomes discoverable to any AI that
-                integration with Vercel AI SDK, LangChain, and more.
+                needs it, without manual integration.
               </p>
 
               {/* Generator Highlight Box */}
@@ -486,11 +494,11 @@ export default async function HomePage(): Promise<React.ReactElement> {
                   </div>
                   <div className="flex-1">
                     <h3 className="text-xl font-bold mb-2 text-foreground">
-                      Start with Our Package Generator
+                      One Command. Infinite Reach.
                     </h3>
                     <p className="text-sm text-foreground-secondary mb-4">
-                      Create a production-ready TPMJS tool package in seconds with our CLI
+                      Generate a production-ready tool package in seconds. Once published, your tool
-                      generator. Includes 2-3 tools, complete setup, and best practices.
+                      is discoverable by every agent in the toolspace.
                     </p>
                     <div className="flex flex-col sm:flex-row gap-3">
                       <code className="text-sm bg-surface px-4 py-2 rounded text-foreground border border-border">
@@ -515,27 +523,27 @@ export default async function HomePage(): Promise<React.ReactElement> {
                   <div className="text-3xl mb-2" aria-hidden="true">
                     🚀
                   </div>
-                  <h3 className="font-semibold mb-1 text-foreground">Quick Setup</h3>
+                  <h3 className="font-semibold mb-1 text-foreground">Publish Once</h3>
                   <p className="text-sm text-foreground-secondary">
-                    Add one keyword to package.json and publish to NPM
+                    Add one keyword. Publish to npm. Done.
                   </p>
                 </div>
                 <div className="p-4">
                   <div className="text-3xl mb-2" aria-hidden="true">
                     ⚡
                   </div>
-                  <h3 className="font-semibold mb-1 text-foreground">Auto Discovery</h3>
+                  <h3 className="font-semibold mb-1 text-foreground">Reach All Agents</h3>
                   <p className="text-sm text-foreground-secondary">
-                    Your tool appears on tpmjs.com within 15 minutes
+                    Discoverable by every agent using the toolspace
                   </p>
                 </div>
                 <div className="p-4">
                   <div className="text-3xl mb-2" aria-hidden="true">
                     📊
                   </div>
-                  <h3 className="font-semibold mb-1 text-foreground">Quality Metrics</h3>
+                  <h3 className="font-semibold mb-1 text-foreground">Surface Quality</h3>
                   <p className="text-sm text-foreground-secondary">
-                    Automatic scoring based on docs, downloads, and stars
+                    Health checks and metrics help tools get discovered
                   </p>
                 </div>
               </div>

apps/web/src/components/home/FeaturesSection.tsx

@@ -3,6 +3,7 @@
 import { Badge } from '@tpmjs/ui/Badge/Badge';
 import { Button } from '@tpmjs/ui/Button/Button';
 import { Container } from '@tpmjs/ui/Container/Container';
+import type { IconName } from '@tpmjs/ui/Icon/Icon';
 import { Icon } from '@tpmjs/ui/Icon/Icon';
 import Link from 'next/link';
 
@@ -11,20 +12,26 @@ import Link from 'next/link';
 // ============================================================================
 
 interface FeatureCardProps {
-  icon: string;
+  icon: IconName;
   title: string;
   description: string;
   badge?: string;
   href?: string;
 }
 
-function FeatureCard({ icon, title, description, badge, href }: FeatureCardProps): React.ReactElement {
+function FeatureCard({
+  icon,
+  title,
+  description,
+  badge,
+  href,
+}: FeatureCardProps): React.ReactElement {
   const content = (
     <div className="group h-full p-6 border border-dashed border-border bg-surface hover:border-primary hover:bg-primary/5 transition-all duration-200">
       {/* Icon */}
       <div className="w-12 h-12 flex items-center justify-center mb-4 border border-dashed border-border bg-background group-hover:border-primary group-hover:bg-primary/10 transition-all duration-200">
         <Icon
-          icon={icon as any}
+          icon={icon}
           size="md"
           className="text-foreground-secondary group-hover:text-primary transition-colors duration-200"
         />
@@ -61,28 +68,34 @@ function FeatureCard({ icon, title, description, badge, href }: FeatureCardProps
 // ============================================================================
 
 export function FeaturesSection(): React.ReactElement {
-  const features = [
+  const features: Array<{
+    icon: IconName;
+    title: string;
+    description: string;
+    badge: string;
+    href?: string;
+  }> = [
     {
       icon: 'search',
-      title: 'tool registry',
+      title: 'semantic retrieval',
       description:
-        'Browse 1M+ AI tools from npm. Auto-discovered within minutes of publication with quality scoring and health monitoring.',
+        'Agent describes what it needs, TPMJS returns the right tools. Selection at scale through semantic search and quality scoring.',
-      badge: 'auto-sync',
+      badge: 'core',
       href: '/tool/tool-search',
     },
     {
       icon: 'puzzle',
       title: 'omega agent',
       description:
-        'Chat with an AI that dynamically discovers and executes tools based on your requests. No configuration needed.',
+        'See toolspace virtualization in action. Omega discovers and executes from 1M+ tools on-demand. No pre-configuration.',
-      badge: 'live',
+      badge: 'demo',
       href: '/omega',
     },
     {
       icon: 'folder',
       title: 'collections',
       description:
-        'Curate tool sets for specific use cases. Add test scenarios to validate behavior and generate living documentation.',
+        'Curate domain-specific toolsets. Collections become instant MCP servers with stable URLs and progressive tool loading.',
       badge: 'shareable',
       href: '/collections',
     },
@@ -90,7 +103,7 @@ export function FeaturesSection(): React.ReactElement {
       icon: 'user',
       title: 'custom agents',
       description:
-        'Build AI agents with your choice of LLM, custom prompts, and curated tool collections. Share publicly or keep private.',
+        'Build agents with any LLM and custom prompts. The toolspace scales independently of agent complexity.',
       badge: 'unlimited',
       href: '/agents',
     },
@@ -98,22 +111,22 @@ export function FeaturesSection(): React.ReactElement {
       icon: 'link',
       title: 'mcp protocol',
       description:
-        'Works with Claude Desktop, Cursor, Windsurf, and any MCP-compatible client. One URL, instant access to all tools.',
+        'MCP is the socket. TPMJS is the operating system. Works with Claude, Cursor, Windsurf, and any MCP client.',
       badge: 'universal',
       href: '/integrations',
     },
     {
       icon: 'key',
-      title: 'secure execution',
+      title: 'sandboxed execution',
       description:
-        'Every tool runs in an isolated sandbox with rate limiting and timeout handling. Your credentials are encrypted at rest.',
+        'Every tool runs isolated with timeouts and rate limits. npm is storage, TPMJS is the secure runtime.',
-      badge: 'sandboxed',
+      badge: 'secure',
     },
     {
       icon: 'checkCircle',
-      title: 'test scenarios',
+      title: 'quality signals',
       description:
-        'AI-generated test scenarios validate tool behavior. Track pass rates, execution times, and quality scores.',
+        'Health checks, test scenarios, and usage metrics. Surface the best tools from the infinite toolspace.',
       badge: 'automated',
       href: '/scenarios',
     },
@@ -121,15 +134,15 @@ export function FeaturesSection(): React.ReactElement {
       icon: 'message',
       title: 'living skills',
       description:
-        'Documentation that evolves from real usage. Skills emerge from question patterns and proven behaviors.',
+        'Documentation emerges from real usage. Tools teach agents how to use them through proven patterns.',
-      badge: 'new',
+      badge: 'evolving',
       href: '/docs/skills',
     },
     {
       icon: 'terminal',
-      title: 'developer sdk',
+      title: 'publish once',
       description:
-        'Publish tools with one keyword. Full TypeScript support, Vercel AI SDK integration, and automatic schema extraction.',
+        'Add one keyword to package.json. Your tool joins the infinite toolspace within minutes. Zero configuration.',
       badge: 'npm',
       href: '/publish',
     },
@@ -141,14 +154,14 @@ export function FeaturesSection(): React.ReactElement {
         {/* Section Header */}
         <div className="text-center mb-16">
           <p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
-            platform capabilities
+            toolspace virtualization
           </p>
           <h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
-            everything you need
+            the retrieval layer
           </h2>
           <p className="text-base text-foreground-secondary max-w-2xl mx-auto font-sans">
-            From discovery to execution, TPMJS provides the complete infrastructure for AI tool
+            npm stores the tools. TPMJS retrieves the right ones. Agents get infinite capabilities
-            development and deployment.
+            without infinite context windows.
           </p>
         </div>
 

apps/web/src/components/home/HeroSection.tsx

@@ -62,14 +62,19 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
         {/* Main Heading */}
         <div className="max-w-7xl">
           <h1
-            className="mb-8 font-bold leading-none tracking-tight text-foreground"
+            className="mb-4 font-bold leading-none tracking-tight text-foreground"
             style={{ fontSize: 'clamp(48px, 10vw, 96px)' }}
           >
-            THE NPM FOR AI TOOLS
+            INFINITE TOOLSPACE
           </h1>
 
+          {/* Tagline */}
+          <p className="mb-8 font-mono text-lg md:text-xl text-brutalist-accent uppercase tracking-wide">
+            A million tools. Zero configuration.
+          </p>
+
           {/* Live Metrics Strip */}
-          <div className="mb-12 flex flex-wrap items-center gap-3 border-l-[6px] border-brutalist-accent pl-6 font-mono text-base md:text-lg font-bold uppercase tracking-wider">
+          <div className="mb-10 flex flex-wrap items-center gap-3 border-l-[6px] border-foreground/20 pl-6 font-mono text-base md:text-lg font-bold uppercase tracking-wider">
             <div className="flex items-center gap-2">
               <span className="text-foreground">{formatNumber(stats.packageCount)}</span>
               <span className="text-foreground-secondary">PACKAGES</span>
@@ -79,12 +84,17 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement {
               <span className="text-foreground">{formatNumber(stats.toolCount)}</span>
               <span className="text-foreground-secondary">TOOLS</span>
             </div>
+            <span className="text-foreground-tertiary">/</span>
+            <div className="flex items-center gap-2">
+              <span className="text-foreground">1M+</span>
+              <span className="text-foreground-secondary">ON NPM</span>
+            </div>
           </div>
 
           {/* Subheading */}
           <p className="mb-12 max-w-3xl text-xl md:text-2xl font-medium leading-relaxed text-foreground-secondary tracking-tight">
-            Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and
+            Any agent can use a million tools without loading a million tools. TPMJS is the
-            any MCP-compatible client.
+            retrieval layer between npm and AI agents.
           </p>
 
           {/* Brutalist Search Interface */}

apps/web/src/components/home/ToolspaceSection.tsx

@@ -0,0 +1,107 @@
+'use client';
+
+import { Container } from '@tpmjs/ui/Container/Container';
+import type { IconName } from '@tpmjs/ui/Icon/Icon';
+import { Icon } from '@tpmjs/ui/Icon/Icon';
+
+const stages: Array<{
+  number: string;
+  title: string;
+  description: string;
+  icon: IconName;
+  color: string;
+}> = [
+  {
+    number: '01',
+    title: 'npm stores everything',
+    description: '1M+ packages. Every tool ever published. Too many for any context window.',
+    icon: 'box',
+    color: 'text-foreground-tertiary',
+  },
+  {
+    number: '02',
+    title: 'TPMJS retrieves what matters',
+    description:
+      'Semantic search + quality signals surface the right tools for any task. Selection at scale.',
+    icon: 'search',
+    color: 'text-primary',
+  },
+  {
+    number: '03',
+    title: 'Agent uses what it needs',
+    description:
+      'Progressive disclosure. Tools load on-demand. Infinite capabilities, finite tokens.',
+    icon: 'puzzle',
+    color: 'text-brutalist-accent',
+  },
+];
+
+export function ToolspaceSection(): React.ReactElement {
+  return (
+    <section className="py-20 bg-surface border-t border-border">
+      <Container size="xl" padding="lg">
+        {/* Section Header */}
+        <div className="text-center mb-16">
+          <p className="font-mono text-xs text-primary uppercase tracking-widest mb-3">
+            how it works
+          </p>
+          <h2 className="font-mono text-3xl md:text-4xl font-semibold mb-4 text-foreground lowercase">
+            toolspace virtualization
+          </h2>
+          <p className="text-base text-foreground-secondary max-w-2xl mx-auto font-sans">
+            Use a million tools without loading a million tools. TPMJS is the retrieval layer
+            between npm and your agent.
+          </p>
+        </div>
+
+        {/* Pipeline Visualization */}
+        <div className="max-w-4xl mx-auto">
+          <div className="grid grid-cols-1 md:grid-cols-3 gap-6 md:gap-4">
+            {stages.map((stage, index) => (
+              <div key={stage.number} className="relative">
+                {/* Connector Line (hidden on mobile, between cards on desktop) */}
+                {index < stages.length - 1 && (
+                  <div className="hidden md:block absolute top-1/2 -right-2 w-4 h-[2px] bg-border" />
+                )}
+
+                <div className="p-6 border border-dashed border-border bg-background h-full">
+                  {/* Stage Number */}
+                  <div className="flex items-center gap-4 mb-4">
+                    <span className={`font-mono text-3xl font-bold ${stage.color}`}>
+                      {stage.number}
+                    </span>
+                    <div
+                      className={`w-10 h-10 flex items-center justify-center border border-dashed border-border ${stage.color}`}
+                    >
+                      <Icon icon={stage.icon} size="sm" />
+                    </div>
+                  </div>
+
+                  {/* Content */}
+                  <h3 className="font-mono text-lg font-semibold text-foreground mb-2 lowercase">
+                    {stage.title}
+                  </h3>
+                  <p className="text-sm text-foreground-secondary leading-relaxed">
+                    {stage.description}
+                  </p>
+                </div>
+              </div>
+            ))}
+          </div>
+
+          {/* Bottom Tagline */}
+          <div className="mt-12 text-center">
+            <div className="inline-flex items-center gap-4 px-6 py-4 border border-dashed border-primary bg-primary/5">
+              <Icon icon="star" size="md" className="text-primary" />
+              <p className="font-mono text-sm text-foreground">
+                <span className="text-primary font-semibold">npm</span> is storage.{' '}
+                <span className="text-primary font-semibold">TPMJS</span> is the operating system
+                for tool access.
+              </p>
+            </div>
+          </div>
+        </div>
+      </Container>
+    </section>
+  );
+}