From 86e523f3dc51248a046c71f042d4ea64d7cb9966 Mon Sep 17 00:00:00 2001 From: Ajax Davis Date: Wed, 4 Feb 2026 04:12:04 +1000 Subject: [PATCH] Revert "feat(homepage): update positioning to "Infinite Toolspace"" This reverts commit ce44aeab3aee35babdb7092ab66cc3cee2027d70. --- apps/web/src/app/page.tsx | 52 ++++----- .../src/components/home/FeaturesSection.tsx | 63 ++++------- apps/web/src/components/home/HeroSection.tsx | 20 +--- .../src/components/home/ToolspaceSection.tsx | 107 ------------------ 4 files changed, 52 insertions(+), 190 deletions(-) delete mode 100644 apps/web/src/components/home/ToolspaceSection.tsx diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx index 1c0e8ae..db0e83e 100644 --- a/apps/web/src/app/page.tsx +++ b/apps/web/src/app/page.tsx @@ -7,7 +7,6 @@ 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'; @@ -136,9 +135,6 @@ export default async function HomePage(): Promise { {/* Hero Section - Dithered Design */} - {/* Toolspace Virtualization Concept */} - - {/* Features Section */} @@ -162,14 +158,11 @@ export default async function HomePage(): Promise {
-

- from the toolspace -

-

- top quality tools +

+ Featured Tools

-

- Surfaced by quality signals: health checks, downloads, documentation richness. +

+ Production-ready tools you can use today. Add to your AI agent in one line.

@@ -365,14 +358,13 @@ export default async function HomePage(): Promise { {/* Section Header */}

- mcp is the socket + universal compatibility

- plug into the toolspace + works everywhere

- Any MCP client becomes a window into the infinite toolspace. One URL unlocks - everything. + Use TPMJS tools with any MCP-compatible AI client. One URL, instant access.

@@ -430,7 +422,7 @@ export default async function HomePage(): Promise { {/* Code Example - Fieldset Style */}
- connect to the toolspace + quick start

@@ -466,8 +458,8 @@ export default async function HomePage(): Promise {

- one url → infinite toolspace →{' '} - tools load on-demand + add to config → instant access to{' '} + 170+ tools

@@ -479,11 +471,11 @@ export default async function HomePage(): Promise {

- Join the Infinite Toolspace + Publish Your AI Tool

- Publish to npm, reach every agent. Your tool becomes discoverable to any AI that - needs it, without manual integration. + Share your tool with the AI community. Automatic discovery, quality scoring, and + integration with Vercel AI SDK, LangChain, and more.

{/* Generator Highlight Box */} @@ -494,11 +486,11 @@ export default async function HomePage(): Promise {

- One Command. Infinite Reach. + Start with Our Package Generator

- Generate a production-ready tool package in seconds. Once published, your tool - is discoverable by every agent in the toolspace. + Create a production-ready TPMJS tool package in seconds with our CLI + generator. Includes 2-3 tools, complete setup, and best practices.

@@ -523,27 +515,27 @@ export default async function HomePage(): Promise { -

Publish Once

+

Quick Setup

- Add one keyword. Publish to npm. Done. + Add one keyword to package.json and publish to NPM

-

Reach All Agents

+

Auto Discovery

- Discoverable by every agent using the toolspace + Your tool appears on tpmjs.com within 15 minutes

-

Surface Quality

+

Quality Metrics

- Health checks and metrics help tools get discovered + Automatic scoring based on docs, downloads, and stars

diff --git a/apps/web/src/components/home/FeaturesSection.tsx b/apps/web/src/components/home/FeaturesSection.tsx index fd0abdf..84bf869 100644 --- a/apps/web/src/components/home/FeaturesSection.tsx +++ b/apps/web/src/components/home/FeaturesSection.tsx @@ -3,7 +3,6 @@ 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'; @@ -12,26 +11,20 @@ import Link from 'next/link'; // ============================================================================ interface FeatureCardProps { - icon: IconName; + icon: string; 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 = (
{/* Icon */}
@@ -68,34 +61,28 @@ function FeatureCard({ // ============================================================================ export function FeaturesSection(): React.ReactElement { - const features: Array<{ - icon: IconName; - title: string; - description: string; - badge: string; - href?: string; - }> = [ + const features = [ { icon: 'search', - title: 'semantic retrieval', + title: 'tool registry', description: - 'Agent describes what it needs, TPMJS returns the right tools. Selection at scale through semantic search and quality scoring.', - badge: 'core', + 'Browse 1M+ AI tools from npm. Auto-discovered within minutes of publication with quality scoring and health monitoring.', + badge: 'auto-sync', href: '/tool/tool-search', }, { icon: 'puzzle', title: 'omega agent', description: - 'See toolspace virtualization in action. Omega discovers and executes from 1M+ tools on-demand. No pre-configuration.', - badge: 'demo', + 'Chat with an AI that dynamically discovers and executes tools based on your requests. No configuration needed.', + badge: 'live', href: '/omega', }, { icon: 'folder', title: 'collections', description: - 'Curate domain-specific toolsets. Collections become instant MCP servers with stable URLs and progressive tool loading.', + 'Curate tool sets for specific use cases. Add test scenarios to validate behavior and generate living documentation.', badge: 'shareable', href: '/collections', }, @@ -103,7 +90,7 @@ export function FeaturesSection(): React.ReactElement { icon: 'user', title: 'custom agents', description: - 'Build agents with any LLM and custom prompts. The toolspace scales independently of agent complexity.', + 'Build AI agents with your choice of LLM, custom prompts, and curated tool collections. Share publicly or keep private.', badge: 'unlimited', href: '/agents', }, @@ -111,22 +98,22 @@ export function FeaturesSection(): React.ReactElement { icon: 'link', title: 'mcp protocol', description: - 'MCP is the socket. TPMJS is the operating system. Works with Claude, Cursor, Windsurf, and any MCP client.', + 'Works with Claude Desktop, Cursor, Windsurf, and any MCP-compatible client. One URL, instant access to all tools.', badge: 'universal', href: '/integrations', }, { icon: 'key', - title: 'sandboxed execution', + title: 'secure execution', description: - 'Every tool runs isolated with timeouts and rate limits. npm is storage, TPMJS is the secure runtime.', - badge: 'secure', + 'Every tool runs in an isolated sandbox with rate limiting and timeout handling. Your credentials are encrypted at rest.', + badge: 'sandboxed', }, { icon: 'checkCircle', - title: 'quality signals', + title: 'test scenarios', description: - 'Health checks, test scenarios, and usage metrics. Surface the best tools from the infinite toolspace.', + 'AI-generated test scenarios validate tool behavior. Track pass rates, execution times, and quality scores.', badge: 'automated', href: '/scenarios', }, @@ -134,15 +121,15 @@ export function FeaturesSection(): React.ReactElement { icon: 'message', title: 'living skills', description: - 'Documentation emerges from real usage. Tools teach agents how to use them through proven patterns.', - badge: 'evolving', + 'Documentation that evolves from real usage. Skills emerge from question patterns and proven behaviors.', + badge: 'new', href: '/docs/skills', }, { icon: 'terminal', - title: 'publish once', + title: 'developer sdk', description: - 'Add one keyword to package.json. Your tool joins the infinite toolspace within minutes. Zero configuration.', + 'Publish tools with one keyword. Full TypeScript support, Vercel AI SDK integration, and automatic schema extraction.', badge: 'npm', href: '/publish', }, @@ -154,14 +141,14 @@ export function FeaturesSection(): React.ReactElement { {/* Section Header */}

- toolspace virtualization + platform capabilities

- the retrieval layer + everything you need

- npm stores the tools. TPMJS retrieves the right ones. Agents get infinite capabilities - without infinite context windows. + From discovery to execution, TPMJS provides the complete infrastructure for AI tool + development and deployment.

diff --git a/apps/web/src/components/home/HeroSection.tsx b/apps/web/src/components/home/HeroSection.tsx index f88e15c..a277d59 100644 --- a/apps/web/src/components/home/HeroSection.tsx +++ b/apps/web/src/components/home/HeroSection.tsx @@ -62,19 +62,14 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement { {/* Main Heading */}

- INFINITE TOOLSPACE + THE NPM FOR AI TOOLS

- {/* Tagline */} -

- A million tools. Zero configuration. -

- {/* Live Metrics Strip */} -
+
{formatNumber(stats.packageCount)} PACKAGES @@ -84,17 +79,12 @@ export function HeroSection({ stats }: HeroSectionProps): React.ReactElement { {formatNumber(stats.toolCount)} TOOLS
- / -
- 1M+ - ON NPM -
{/* Subheading */}

- Any agent can use a million tools without loading a million tools. TPMJS is the - retrieval layer between npm and AI agents. + Discover and use npm packages as AI agent tools. Works with Claude, GPT, LangChain, and + any MCP-compatible client.

{/* Brutalist Search Interface */} diff --git a/apps/web/src/components/home/ToolspaceSection.tsx b/apps/web/src/components/home/ToolspaceSection.tsx deleted file mode 100644 index 9cd7a03..0000000 --- a/apps/web/src/components/home/ToolspaceSection.tsx +++ /dev/null @@ -1,107 +0,0 @@ -'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 Header */} -
-

- how it works -

-

- toolspace virtualization -

-

- Use a million tools without loading a million tools. TPMJS is the retrieval layer - between npm and your agent. -

-
- - {/* Pipeline Visualization */} -
-
- {stages.map((stage, index) => ( -
- {/* Connector Line (hidden on mobile, between cards on desktop) */} - {index < stages.length - 1 && ( -
- )} - -
- {/* Stage Number */} -
- - {stage.number} - -
- -
-
- - {/* Content */} -

- {stage.title} -

-

- {stage.description} -

-
-
- ))} -
- - {/* Bottom Tagline */} -
-
- -

- npm is storage.{' '} - TPMJS is the operating system - for tool access. -

-
-
-
- -
- ); -}