Commit graph

102 commits

Author SHA1 Message Date
Ajax Davis
8b000cf0ca feat: add beta experimental section for dynamic tool loading to how-it-works page
- Add comprehensive section explaining BM25 search with context awareness
- Show comparison of traditional vs dynamic tool loading approaches
- Document Deno sandboxed execution environment on Railway
- Preview future collections feature for tool organization
- Include call-to-action to try the playground
2025-12-04 20:26:38 +10:00
Ajax Davis
129f45353a test: mock react-syntax-highlighter to fix ESM compatibility in CodeBlock tests 2025-12-04 20:21:14 +10:00
Ajax Davis
c751a056a9 feat: add How It Works documentation page
- Create comprehensive /how-it-works page explaining TPMJS architecture
- Add detailed sections on developer workflow, AI agent integration, and system internals
- Include quality scoring formula, health checks, and data flow diagrams
- Add navigation link to AppHeader between Tools and Playground
- Style consistently with existing pages (Publish, Playground)
- Fix: remove debug console.log from ToolsSidebar

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 19:58:54 +10:00
Ajax Davis
cbcb1e49c7 fix: don't mark tools as broken for missing environment variables
Tools that fail due to missing environment variables (API keys, etc.)
are not actually broken - they just need configuration. Added detection
for common env var error patterns and mark these tools as HEALTHY
instead of BROKEN.

Error patterns detected:
- 'is required'
- 'is not set'
- 'missing environment'
- 'API key required/not provided'
- etc.

This fixes false positives where tools like @superagent-ai/ai-sdk
were marked as broken when they just need SUPERAGENT_API_KEY configured.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 19:52:22 +10:00
Ajax Davis
4ba39e07f8 fix: add health fields to /api/tools/search response
The search endpoint was missing importHealth, executionHealth,
healthCheckError, and lastHealthCheck fields in the response. This caused
the playground (which uses search-registry tool) to not receive health
data for displaying broken tool badges.

Added all four health fields to the tool mapping in the search response.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 19:41:50 +10:00
Ajax Davis
9f1c3fb383 fix: update footer links - correct GitHub URL and contact email
- Change GitHub URL to github.com/tpmjs/tpmjs
- Update contact email to thomasalwyndavis@gmail.com
2025-12-04 19:18:46 +10:00
Ajax Davis
a9e91c02d1 feat: add reusable ToolHealthBadge and ToolHealthBanner components
- Create ToolHealthBadge component in @tpmjs/ui for broken tool indicator
- Create ToolHealthBanner component in @tpmjs/ui for detailed health warnings
- Integrate both components into playground ToolsSidebar:
  - Badge shows in tool cards in left sidebar
  - Banner shows in tool detail modal
- Update search-registry to include health fields in API responses
- Add package.json exports for new health components

These components provide consistent UI for displaying broken tool status
across the application (tool search, tool detail pages, playground).

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 19:12:07 +10:00
Ajax Davis
b9269c5574 fix: handle undefined npmKeywords in tool detail page
Add null check before accessing npmKeywords.length to prevent
runtime TypeError when npmKeywords is undefined.

Fixes: Cannot read properties of undefined (reading 'length')

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 17:14:20 +10:00
Ajax Davis
77e7eedbe0 fix: handle undefined githubStars in tool detail page
Use loose equality (!=) instead of strict equality (!==) to check for
both null and undefined values. This prevents runtime TypeError when
githubStars is undefined.

Fixes: Cannot read properties of undefined (reading 'toLocaleString')

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 17:03:58 +10:00
Ajax Davis
64a05482e4 feat: add health status UI to search and detail pages
Add comprehensive health status visibility across tool browsing:

Search Page (/tool/tool-search):
- Add health filter dropdown (All/Healthy Only/Broken Only)
- Show "Broken" badges on tool cards when import or execution fails
- Include health filter in Clear Filters button logic
- Update Tool interface with health fields

Detail Page (/tool/[...slug]):
- Add prominent warning banner for broken tools
- Display specific failure types (Import Failed / Execution Failed)
- Show health check error messages in code blocks
- Add manual "Recheck health" button with loading state
- Display last health check timestamp

Phase 3 of health check system implementation complete.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:30:04 +10:00
Ajax Davis
e18ebb9282 feat: add broken tools page at /tool/broken
Create dedicated page to display all tools with failed health checks.

Features:
- Lists all tools with importHealth='BROKEN' OR executionHealth='BROKEN'
- Displays health status badges for both import and execution
- Shows error messages in code blocks for debugging
- Includes last checked timestamp
- Links to tool detail pages for manual recheck
- Shows empty state with checkmark when all tools are healthy
- Warning banner showing total broken tool count

UI Components:
- Card layout with red borders for broken tools
- Health status icons (check/x) for visual status
- Category badges and version info
- Direct links to tool detail pages

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:20:47 +10:00
Ajax Davis
b51060d9e7 feat: trigger health checks automatically when tools are synced
Add non-blocking health check calls to both sync endpoints:
- /api/sync/changes: Triggers health checks after tool upsert from changes feed
- /api/sync/keyword: Triggers health checks after tool upsert from keyword search

Health checks run asynchronously with 'sync' trigger source, ensuring:
- New/updated tools are validated immediately after sync
- Sync operations don't wait for health check completion
- Errors are logged but don't fail the sync

This completes Phase 2 of the health check system implementation.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:16:30 +10:00
Ajax Davis
c2b5284da4 feat: add manual health check endpoint and health filtering
API Endpoints (Phase 2 - Part 2):

1. Manual Health Check Endpoint
   - POST /api/tools/[...slug]
   - Added POST handler to existing tool detail route
   - Extracts slug parsing into shared parseSlug() helper
   - 5-minute rate limit per tool
   - Returns full health check results
   - Validates that export name is provided (can't check whole package)

2. Health Filtering in /api/tools
   - Add query params: ?importHealth=HEALTHY|BROKEN|UNKNOWN
   - Add query params: ?executionHealth=HEALTHY|BROKEN|UNKNOWN
   - Add shorthand: ?broken=true (at least one health check failed)
   - Health filters applied as AND conditions with search/category filters
   - Refactored to reduce complexity:
     - Extract buildHealthFilters() helper
     - Extract buildPackageFilter() helper
     - Extract buildWhereClause() helper

3. Code Quality Improvements
   - Extract parseSlug() helper to reduce duplication (DRY)
   - Remove useless else clauses (biome lint fix)
   - Reduce cognitive complexity (GET: 16->8, POST: simplified)

RESTful Design:
- GET /api/tools/@tpmjs/hello/hello -> Fetch tool data
- POST /api/tools/@tpmjs/hello/hello -> Trigger health check

Query Examples:
- /api/tools?broken=true (all broken tools)
- /api/tools?importHealth=HEALTHY&executionHealth=HEALTHY (fully healthy)
- /api/tools?q=text&broken=true (search "text" in broken tools)

Rate Limiting:
- Manual recheck cooldown: 5 minutes per tool
- Returns 429 with retryAfter seconds on rate limit

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:12:40 +10:00
Ajax Davis
e2af4cfd6a feat: implement health check system (Phase 1 & 2)
Add comprehensive health monitoring for TPMJS tools that tracks both
import and execution health via Railway executor service.

## Database Schema

- Add HealthStatus enum (UNKNOWN, HEALTHY, BROKEN)
- Add HealthCheckType enum (IMPORT, EXECUTION, FULL)
- Add health fields to Tool model:
  - importHealth: tracks if tool can be loaded
  - executionHealth: tracks if tool can execute
  - lastHealthCheck: timestamp of last check
  - healthCheckError: stores error message
- Add HealthCheck audit table for full history

## Core Service

Create health-check-service.ts with 5 functions:
1. checkImportHealth() - Tests tool loading via /load-and-describe
2. checkExecutionHealth() - Tests execution via /execute-tool
3. generateTestParameters() - Creates minimal test params by type
4. performHealthCheck() - Full check with database updates
5. performBatchHealthCheck() - Processes tools in batches

Features:
- 30-second timeout per check
- Skips execution if import fails
- Batch processing (5 concurrent, 1s delays)
- Full audit trail in HealthCheck table

## API Endpoints

/api/sync/health-check (POST):
- Daily cron job at 2am UTC
- Checks all tools in database
- Requires CRON_SECRET auth
- Logs results to SyncLog table
- Max duration: 5 minutes

/api/tools/broken (GET):
- Lists all tools with broken health status
- Filters by importHealth='BROKEN' OR executionHealth='BROKEN'
- Includes package metadata
- Orders by lastHealthCheck DESC

## Configuration

- Add RAILWAY_EXECUTOR_URL to env.ts
- Add daily cron job to vercel.json
- Use db:push for schema changes (existing production data)

Next: Manual trigger endpoint + health filtering + UI components

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 16:03:21 +10:00
Ajax Davis
1bf7879c1e feat: implement BM25 search with context from last 3 user messages
- Implement proper BM25 scoring algorithm in /api/tools/search
  - Term frequency with saturation (k1 = 1.5)
  - Length normalization (b = 0.75)
  - Inverse document frequency (IDF)
- Accept recent messages via 'messages' query param for better context
- Update search-registry tool to:
  - Use /api/tools/search endpoint (not /api/tools)
  - Pass last 3 user messages for contextual search
  - Include recentMessages in tool input schema
- Update chat API to extract and pass last 3 user messages to search

BM25 formula: Σ IDF(qi) * (tf * (k1 + 1)) / (tf + k1 * (1 - b + b * |D| / avgdl))

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 13:59:22 +10:00
Ajax Davis
8441b5fc70 fix: use deployed /api/tools endpoint with client-side filtering and streamline git hooks
- Change search-registry to use /api/tools instead of /api/tools/search (not deployed yet)
- Add client-side filtering for search queries since deployed API doesn't support search
- Handle both deployed (/api/tools) and local dev (/api/tools/search) response formats
- Remove lint from pre-commit hooks to speed up commits (keep format + type-check)
- Fixes 404 errors when playground tries to search tools in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 13:43:19 +10:00
Ajax Davis
1c949f6a11 feat: add playground sidebars with dynamic tools and env var management
Left Sidebar:
- Create /api/tools endpoint to fetch tools from registry
- Update ToolsSidebar to fetch and display tools dynamically
- Add filter input for searching tools by name/description/category
- Fix interface to use packageName/exportName from search registry

Right Sidebar:
- Create SettingsSidebar with environment variable management
- Add localStorage persistence for env vars
- Implement password masking for values
- Export useEnvVars() hook for accessing env vars

Environment Variable Forwarding:
- Update useChat hook to read and forward env vars to API
- Update chat route to extract env vars from request body
- Update dynamic-tool-loader to accept and forward env vars
- Update Railway executor to inject env vars into Deno environment
- Complete chain: localStorage → client → chat → Railway → Deno.env

Bug Fixes:
- Fix undefined property errors in tool detail page
- Add optional chaining for npmDownloadsLastMonth and qualityScore

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 11:00:20 +10:00
Ajax Davis
956f9fdbae debug: add logging for inputSchema structure inspection 2025-12-04 09:33:09 +10:00
Ajax Davis
b7e6a6b2dc fix: use Dockerfile instead of Nixpacks for Railway deployment
Railway is deprecating Nixpacks, so switching to a standard Dockerfile
with the official Deno image. This provides a cleaner and more maintainable
deployment configuration.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 08:35:50 +10:00
Ajax Davis
d597a71eb4 feat: add dynamic tool loading system with Railway executor
Implements a complete dynamic tool loading system that allows the playground to discover and load tools from the TPMJS registry at runtime.

**Architecture:**
- Search tool package (@tpmjs/search-registry) - Searches registry for tools
- Search API endpoint (/api/tools/search) - Text-based search with scoring
- Pre-flight tool loading - Automatically searches and loads tools on every message
- Railway executor service (Deno) - Loads tools from esm.sh via HTTP imports
- Dynamic tool loader - Calls Railway to load and execute tools remotely

**Key Components:**

1. Railway Executor (apps/railway-executor/)
   - Deno-based service that natively supports HTTP imports
   - Endpoints: /load-and-describe, /execute-tool, /cache/stats, /cache/clear
   - Deploys to Railway with deno run --allow-net --allow-env server.ts

2. Search Tool Package (packages/tools/search-registry/)
   - AI SDK v6 tool for searching TPMJS registry
   - Uses jsonSchema + inputSchema pattern
   - Searches /api/tools/search endpoint

3. Search API (apps/web/src/app/api/tools/search/)
   - Text-based search with composite scoring
   - Scores: text relevance + quality boost + download boost
   - Returns tool metadata with importUrl for dynamic loading

4. Dynamic Tool Loader (apps/playground/src/lib/dynamic-tool-loader.ts)
   - Calls Railway service to load tools from esm.sh
   - Creates tool wrappers that execute remotely
   - Process-level module cache + per-conversation tracking

5. Pre-flight Loading (apps/playground/src/app/api/chat/route.ts)
   - Automatically searches for tools on every user message
   - Loads top 5 matching tools before agent processes request
   - Merges with static tools for seamless experience

**Technical Decisions:**
- Deno over Node.js: Native HTTP import support without flags
- Remote execution: Tools run in Railway sandbox, not Vercel
- Pre-flight loading: Better UX than two-turn search pattern
- Text search: BM25 had dependency issues, simple scoring works well

**Environment Variables:**
- RAILWAY_SERVICE_URL: https://endearing-commitment-production.up.railway.app

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 08:25:53 +10:00
Ajax Davis
141a64d888 feat: implement multi-tool package architecture with manual tool registry
BREAKING CHANGE: Complete refactoring from single-tool to multi-tool package support

Database Schema:
- Split Tool model into Package (1) and Tool (many) with one-to-many relationship
- Package stores npm metadata and package-level tpmjs fields (category, env, frameworks, tier)
- Tool stores individual tool exports with tool-level metadata (exportName, description, parameters, returns, aiAgent)
- Unique constraint on (packageId, exportName) to prevent duplicate tools
- Cascade deletes when packages are removed

Type System:
- Updated tpmjs field schema to support tools array
- Each tool has exportName, description, parameters, returns, aiAgent
- Package-level fields: category, env, frameworks shared across all tools
- Backward compatible with legacy single-tool format (auto-migrates to exportName: "default")

API Updates:
- Updated all /api/tools routes to query Tool model with Package relations
- Updated /api/tools/[slug] to accept package/export path segments
- Updated tool-executor-agent to use actual exportName instead of hardcoded "default"
- Updated metrics sync to calculate quality scores per Tool

Frontend Updates:
- Updated tool search page to display exportName as primary heading
- Updated tool detail pages to show package name as secondary info
- Removed tag-based filtering (tags moved to package level)

Manual Tool Registry:
- Added manual-tools.ts with 23 curated tools from major providers
- Created sync-manual-tools.ts script to sync manual tools to database
- Added MANUAL_TOOLS.md documentation for manual tool system
- Added GitHub workflow for automated daily sync
- Includes tools from: Vercel, Exa, Firecrawl, AWS Bedrock, Perplexity, Tavily, Superagent, Valyu

Playground Updates:
- Updated tool loader to load multiple tools per package
- Added sanitizeToolName for OpenAI API compatibility

Sync System Updates:
- Updated changes feed sync to handle multi-tool packages
- Updated keyword sync to upsert multiple tools per package
- Added orphaned tool deletion when tools removed from package.json

Migration Strategy:
- Database uses same Neon instance for dev and prod
- Schema updated via prisma db push (no migration files yet)
- All data repopulates from npm via sync system

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-04 06:39:58 +10:00
Ajax Davis
277c9f74cd feat: add author name to skipped packages in Discord notifications
API Changes:
- Track author name along with package name and reason
- Extract author from pkg.author (string or object with name field)
- Default to "unknown" if author info not available

Workflow Changes:
- Display author in format: "package-name (by author) - reason"

Example Discord output:
📋 Skipped Packages
tpmjs-threejs-tool (by john-doe) - invalid tpmjs field
@scope/package-1 (by jane-smith) - missing tpmjs field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 09:18:16 +10:00
Ajax Davis
63cd815bf4 feat: add skip reasons to Discord notifications
API Changes:
- Track skip reason along with package name
- Changed skippedPackages from string[] to Array<{name, reason}>
- Reasons: "package not found", "missing tpmjs field", "invalid tpmjs field"

Workflow Changes:
- Format skipped packages as "package-name - reason"
- Display one package per line in Discord notification

Example Discord output:
📋 Skipped Packages
@scope/package-1 - missing tpmjs field
package-2 - invalid tpmjs field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 08:59:33 +10:00
Ajax Davis
0b30c62ff9 feat: add skipped packages list to Discord notifications
API Changes:
- Track skipped package names in keyword sync endpoint
- Include skippedPackages array in API response

Workflow Changes:
- Extract skipped package names from sync response
- Display skipped packages in Discord notification as comma-separated list
- Only show "📋 Skipped Packages" field when packages are skipped
- Dynamic field construction using jq

Example Discord output:
📋 Skipped Packages
package-name-1, package-name-2, package-name-3

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 08:57:30 +10:00
Ajax Davis
da12d1fc5b feat: add detailed error logging to keyword sync workflow
API Changes:
- Return errorMessages array in sync response (first 5 errors)

Workflow Changes:
- Display error messages in GitHub Actions logs with formatting
- Include error details in Discord notifications (first 3 errors)
- Shows errors in both console output and Discord embed

Example output:
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
⚠️  SYNC ERRORS (4 total):
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
  • Failed to process pkg1: Invalid tpmjs field
  • Failed to process pkg2: Network timeout
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-03 08:22:04 +10:00
Ajax Davis
81f0072cb2 refactor: remove links, tags, and status fields from TPMJS spec
These fields are redundant as they already exist in package.json:
- links: Use package.json repository/homepage fields
- tags: Use package.json keywords field
- status: Not needed in tool metadata

Changes:
- Remove TpmjsLinksSchema type definition
- Remove links, tags, and status from TpmjsRichSchema
- Update validation logic to not check these fields
- Update all documentation (spec page, publish page, HOW_TO_PUBLISH_A_TOOL.md)
- Update example tool package.json
- Simplify field reference tables

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 05:53:48 +10:00
Ajax Davis
013b98a53e refactor: rename envVars to env and remove example field from TPMJS spec
- Rename TpmjsEnvVarSchema to TpmjsEnvSchema
- Rename envVars field to env throughout codebase
- Remove example field from TpmjsMinimalSchema (no longer required)
- Update all documentation (spec page, publish page, HOW_TO_PUBLISH_A_TOOL.md)
- Update example tool package.json
- Simplify minimal tier requirements to only category and description

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 05:37:28 +10:00
Ajax Davis
cd3dee8133 refactor: replace authentication field with envVars in TPMJS specification
Replace the authentication field with a more general envVars array that allows tools to specify required environment variables:

Changes to type definitions:
- Remove TpmjsAuthenticationSchema and TpmjsAuthentication type
- Add TpmjsEnvVarSchema with fields: name, description, required, default
- Replace authentication field with envVars array in TpmjsRichSchema
- Update validateTpmjsField to check envVars instead of authentication

Changes to documentation:
- Update /spec page to document envVars instead of authentication
- Update /publish page examples to use envVars
- Update HOW_TO_PUBLISH_A_TOOL.md with envVars examples
- Update validation errors section
- Remove authentication from @tpmjs/createblogpost example

The envVars field is more flexible and clearer - it lists all environment variables a tool needs (API keys, endpoints, config values) rather than trying to categorize authentication types.

Example:
```json
"envVars": [
  {
    "name": "OPENAI_API_KEY",
    "description": "API key for OpenAI services",
    "required": true
  }
]
```

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 05:21:30 +10:00
Ajax Davis
a6ec7df800 refactor: remove pricing field from TPMJS specification
Remove pricing field from the entire project as it doesn't make sense for tool metadata:

- Remove TpmjsPricingSchema and TpmjsPricing type from types package
- Remove pricing from TpmjsRichSchema validation
- Remove pricing from validateTpmjsField check
- Remove pricing documentation from /spec page
- Remove pricing examples from /publish page
- Remove pricing from HOW_TO_PUBLISH_A_TOOL.md
- Remove pricing from @tpmjs/createblogpost example package.json

The pricing field was removed from Tier 3 (Rich) metadata as it's not relevant for tool discovery and integration. Tools can document pricing in their README or documentation links instead.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 04:57:21 +10:00
Ajax Davis
d839536eb0 feat: add comprehensive TPMJS specification page
- Create /spec page with complete technical reference for TPMJS metadata
- Document all three tiers (Minimal, Basic, Rich) with field explanations
- Include field reference table with types and requirements
- Explain quality scoring algorithm and discovery mechanisms
- Add cross-links to /publish page for complementary content
- Update AppHeader to include Spec link in navigation (Tools > Playground > Spec > GitHub > Publish)

The spec page provides a balanced technical reference while the publish page remains the practical how-to guide.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-12-01 04:47:21 +10:00
Ajax Davis
2474f884dd refactor: create shared AppHeader component for consistent navigation across all pages
**Problem:**
- Each page had different header implementations with varying navigation links
- Inconsistent user experience across homepage, tools, playground, and publish pages
- Duplicate header code throughout the application

**Solution:**
- Created `AppHeader` component (apps/web/src/components/AppHeader.tsx) with consistent navigation:
  - TPMJS logo linking to homepage
  - Tools, Playground, and Publish Tool links
  - GitHub icon link
  - Sticky header with medium size
- Updated all pages to use the shared component:
  - apps/web/src/app/page.tsx (homepage)
  - apps/web/src/app/tool/tool-search/page.tsx (tools search)
  - apps/web/src/app/playground/page.tsx (component playground)
  - apps/web/src/app/publish/page.tsx (publish guide)
  - apps/web/src/app/tool/[...slug]/page.tsx (tool detail pages)

**Benefits:**
- Consistent header across all pages
- Single source of truth for navigation
- Easier to maintain and update navigation links
- Improved user experience with predictable navigation

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 21:03:33 +10:00
Ajax Davis
4876b2e4f4 feat: display raw JSON output and human-readable preview in playground 2025-11-30 20:41:30 +10:00
Ajax Davis
fce4eece1a fix: refactor tool execution to use generateText with proper tool handling
Major changes:
- Fixed package executor URL protocol handling (add https:// if missing)
- Switched from streamText to generateText for proper tool execution
- AI now calls tool AND generates natural language response
- Tool results no longer show raw JSON metadata

Tool executor (tool-executor-agent.ts):
- Use generateText() instead of streamText() for tool execution
- Add system prompt to guide AI to summarize tool results
- Return result.text for natural language output
- Tool definition uses inputSchema (AI SDK v6 format)

Package executor:
- Add getSandboxUrl() to ensure URL has https:// protocol
- Fixes "Failed to parse URL" error in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 20:30:01 +10:00
Ajax Davis
ac8f6d239c fix: extract tool results from messages array in AI SDK v6
- In AI SDK v6, tool results are in fullResponse.messages with role 'tool'
- Updated result extraction to iterate through messages array
- Added detailed logging to debug response structure
- Handle both text output and tool-only responses

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 20:05:41 +10:00
Ajax Davis
56e0c0da79 debug: add logging to diagnose streaming issue in AI SDK v6 2025-11-30 19:50:41 +10:00
Ajax Davis
268112f96e fix: preserve streamed output and add markdown rendering to playground
**Problem:**
- Tool playground was only showing partial output
- When 'complete' event arrived, it replaced streamed text with final output
- Output was displayed as plain text instead of formatted markdown

**Changes:**
- Fixed streaming bug in ToolPlayground component
  - Removed line that overwrote accumulated text on 'complete' event
  - Now preserves all streamed chunks for full output display
- Added react-markdown with GitHub Flavored Markdown support
  - Install react-markdown and remark-gfm packages
  - Added @tailwindcss/typography plugin for prose styling
  - Replaced plain <pre> with <ReactMarkdown> component
  - Applied prose classes for proper markdown formatting
- Added type="button" to button elements for accessibility

**Files changed:**
- apps/web/src/components/ToolPlayground.tsx
  - Comment out setOutput(data.output) on complete event
  - Import ReactMarkdown and remarkGfm
  - Replace pre element with ReactMarkdown component
  - Add prose styling classes
  - Add type="button" to buttons
- apps/web/tailwind.config.ts
  - Add @tailwindcss/typography plugin

**Result:**
- Full streamed output now displays correctly
- Markdown is rendered with proper formatting (headings, lists, code blocks, etc.)
- Better UX for AI-generated tool responses

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 19:28:53 +10:00
Ajax Davis
a92c2c250c feat: upgrade to AI SDK v6 beta and Zod v4 to fix tool schema errors
OpenAI was rejecting tool definitions with error "schema must be a JSON Schema of 'type: "object"'". This was caused by AI SDK v5 not properly converting Zod schemas to JSON Schema format.

**Changes:**
- Upgrade AI SDK from v5.0.104 to v6.0.0-beta.124
- Upgrade @ai-sdk/openai from v2.0.74 to v3.0.0-beta.22
- Upgrade Zod from v3.25.76 to v4.1.13 across all packages

**AI SDK v6 breaking changes:**
- Tool definition API: `parameters` renamed to `inputSchema`
- Removed `aiTool()` wrapper - use plain object with description, inputSchema, execute
- Streaming API: Use `textStream` async iterator instead of onChunk callback
- Zod schemas now properly converted to JSON Schema for OpenAI

**Zod v4 breaking changes:**
- `z.record()` now requires two arguments: `z.record(keySchema, valueSchema)`
- `z.enum()` params changed: `errorMap` removed, use `message` instead
- Type system improvements require explicit type parameters
- Fixed type errors in @tpmjs/env, @tpmjs/npm-client, @tpmjs/types

**Files changed:**
- apps/web/src/lib/ai-agent/tool-executor-agent.ts
  - Updated tool definition to use `inputSchema` instead of `parameters`
  - Removed `aiTool()` wrapper
  - Fixed streaming to use `textStream` iterator
- packages/env/src/index.ts
  - Updated type constraint from `z.ZodRawShape` to `Record<string, z.ZodTypeAny>`
- packages/npm-client/src/package.ts
  - Fixed `z.record()` calls to include both key and value schemas
  - Added type assertions for record indexing
- packages/types/src/tpmjs.ts
  - Changed `errorMap` to `message` in z.enum() calls

**Testing:**
-  Type-check passes
-  Production build succeeds
-  All routes compile correctly

This fixes the tool execution error where OpenAI rejected tool schemas with invalid format.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 19:14:01 +10:00
Ajax Davis
fa6ba5b6cd feat: update homepage to use real database data
- Add server component to fetch live stats from database
  - Tool count from Tool table
  - Invocations from successful Simulation records
  - Average latency from recent executions
  - Category distribution stats

- Add featured tools section
  - Display top 6 tools by quality score
  - Show tool cards with name, description, category, tags
  - Include quality score and download metrics
  - Official badge for verified tools
  - Click-through to tool detail pages

- Update HeroSection component
  - Accept stats prop with real database metrics
  - Format large numbers (e.g., "1.2K", "5.3M")
  - Add functional search navigation
  - Enter key and button click navigate to tool-search
  - Empty search browses all tools

- Optimize database queries
  - Use Promise.all() for parallel execution
  - Calculate avg latency from last 100 simulations
  - Graceful error handling with fallback values

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 15:33:10 +10:00
Ajax Davis
36eebc43d4 debug: add detailed logging to tool executor to diagnose OpenAI schema error
Add console.log statements to track:
- Tool parameters array and length
- Generated Zod schema details
- Tool definition structure
- Sanitized tool name
- Complete tools config sent to OpenAI

This will help diagnose why OpenAI is still receiving 'type: "None"'
for empty parameter schemas despite the fix.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 05:46:13 +10:00
Ajax Davis
0ba4e023ac fix(vercel): run install command from monorepo root to access workspace packages
**Problem:**
Vercel deployments were failing with:
```
ERR_PNPM_NO_MATCHING_VERSION_INSIDE_WORKSPACE: No matching version found for @tpmjs/eslint-config@* inside the workspace
```

The `installCommand` was running `pnpm install` from `apps/web`, which couldn't access workspace packages defined at the monorepo root.

**Solution:**
Change `installCommand` from `pnpm install` to `cd ../.. && pnpm install` to run from the monorepo root, matching the `buildCommand` behavior.

**Impact:**
- Vercel can now find and install all workspace packages
- Deployments should succeed
- All previous tool execution fixes can now actually deploy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 05:07:28 +10:00
Ajax Davis
88b06362f1 fix(ci): skip Lefthook installation in CI/Vercel environments
**Problem:**
Vercel deployments were failing during `pnpm install` because the `prepare` script tried to run `lefthook install`, which requires a git repository. Vercel's build environment doesn't have a proper `.git` directory, causing:
```
fatal: not a git repository (or any parent up to mount point /vercel)
Error: exit status 128
```

**Solution:**
Skip Lefthook installation when running in CI or Vercel environments by checking `process.env.CI` and `process.env.VERCEL` before attempting to install git hooks.

**Impact:**
- Vercel deployments will now succeed
- Local development still gets git hooks installed
- GitHub Actions CI will skip hook installation (not needed in CI)
- All previous tool execution fixes can now actually deploy

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 05:00:00 +10:00
Ajax Davis
d5fb091420 fix: ensure tool parameters schema is always a valid JSON Schema object
Problem: OpenAI API error 'got type: None' when tool has no/invalid parameters

Solution: Add guard to explicitly create empty object schema with description when no parameters exist

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 02:45:32 +10:00
Ajax Davis
f0511eb498 fix: sanitize npm package names for OpenAI tool names and update lockfile
Problem: OpenAI tool names must match ^[a-zA-Z0-9_-]+ but npm package names like @tpmjs/createblogpost contain @ and /

Solution: Add sanitizeToolName() function and update pnpm-lock.yaml

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 02:28:42 +10:00
Ajax Davis
f702ab8669 fix: remove tiktoken dependency to resolve WASM runtime error in serverless
**Problem:**
The Interactive Playground was failing with "Missing tiktoken_bg.wasm" error in production. Tiktoken requires WASM files which don't work in Vercel's serverless environment.

**Solution:**
- Remove tiktoken import from tool-executor-agent
- Replace tiktoken-based token counting with character estimation (~4 chars/token)
- Remove tiktoken from package.json dependencies
- Remove unused biome-ignore comment

**Impact:**
- Token counting is now approximate but consistent
- No more WASM-related runtime errors
- Serverless deployment works properly
- Tool execution now functional in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 02:19:05 +10:00
Ajax Davis
165cacf45a fix: remove tiktoken dependency to resolve WASM runtime error in serverless
**Problem:**
The Interactive Playground was failing with "Missing tiktoken_bg.wasm" error in production. Tiktoken requires WASM files which don't work in Vercel's serverless environment.

**Solution:**
- Remove tiktoken import from tool-executor-agent
- Replace tiktoken-based token counting with character estimation (~4 chars/token)
- Remove tiktoken from package.json dependencies
- Remove experimental webpack WASM config (no longer needed)

**Impact:**
- Token counting is now approximate but consistent
- No more WASM-related runtime errors
- Serverless deployment works properly
- Tool execution now functional in production

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 02:15:58 +10:00
Ajax Davis
295199d43f fix: use dynamic import for AI SDK to resolve tiktoken WASM build error
Convert static import of executeToolWithAgent to dynamic import inside the
POST handler. This prevents the AI SDK (and its tiktoken dependency) from
being loaded at build time, which was causing WASM loading errors.

**Why this fix works:**
- Next.js 16 + Turbopack tries to analyze routes at build time
- tiktoken requires tiktoken_bg.wasm which can't load during static analysis
- Dynamic imports defer loading until runtime, avoiding build-time WASM issues

**Changes:**
- Remove: `import { executeToolWithAgent } from '@/lib/ai-agent/tool-executor-agent'`
- Add: `const { executeToolWithAgent } = await import('@/lib/ai-agent/tool-executor-agent')`
  inside the stream start() handler

Build now completes successfully. Route is properly marked as dynamic (ƒ).

Resolves: "Error: Missing tiktoken_bg.wasm" during Next.js build

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 01:50:49 +10:00
Ajax Davis
38cc823a58 fix: mark AI tool execution route as dynamic to prevent build-time WASM error
Add `export const dynamic = 'force-dynamic'` to `/api/tools/execute/[...slug]`
to prevent Next.js from attempting static generation at build time.

The AI SDK (used via executeToolWithAgent) requires tiktoken_bg.wasm which
cannot be loaded during static generation. Marking as dynamic ensures the
route is only executed at runtime.

Note: This partially addresses the build error but further investigation needed
for complete resolution of tiktoken WASM loading in Next.js 16 + Turbopack.

Relates to: "Error: Missing tiktoken_bg.wasm"

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 01:42:04 +10:00
Ajax Davis
14b64f0320 fix: remove VM2 sandboxing to resolve Next.js build errors
**VM2 Removal:**
- Remove VM2 dependency from package-executor
- Rewrite executor to use direct package execution with require()
- Add TODO comment for future sandboxing implementation

**Why this change:**
- VM2 requires runtime filesystem access to bridge.js which doesn't work with Next.js Turbopack bundling
- Even marking as serverExternalPackages fails because VM2 uses hardcoded file paths
- Direct execution allows builds to complete while we find Next.js-compatible sandboxing solution

**Next Steps:**
- Implement proper sandboxing with isolated-vm or similar Next.js-compatible solution
- Add security measures for package execution
- Consider moving package execution to separate microservice

This unblocks CI/CD while maintaining playground functionality.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 00:57:32 +10:00
Ajax Davis
6d8bea6c8d fix: resolve Next.js routing and package-executor build errors
**API Route Restructuring:**
- Move execute endpoint from /api/tools/[...slug]/execute to /api/tools/execute/[...slug]
- Move simulations endpoint from /api/tools/[...slug]/simulations to /api/tools/simulations/[...slug]
- Fix Next.js App Router constraint: catch-all segments must be terminal
- Update ToolPlayground component to use new endpoint paths

**Package Executor Export Fix:**
- Remove .js extensions from exports in @tpmjs/package-executor
- Change from './types.js' to './types' for proper TypeScript resolution
- Change from './executor.js' to './executor' for proper TypeScript resolution
- Fixes "Export executePackage doesn't exist in target module" build error

**Next.js Configuration:**
- Add vm2 and @tpmjs/package-executor to serverExternalPackages
- Prevents bundling VM2 which requires filesystem access to internal files

**Code Quality:**
- Add biome-ignore for excessive complexity in SSE stream handling
- Add biome-ignore for decorative loading spinner SVGs (2 instances)

Note: VM2 sandboxing still has compatibility issues with Next.js Turbopack.
This may need to be replaced with a different sandboxing approach or disabled.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 00:52:56 +10:00
Ajax Davis
ab46b6e116 feat: add interactive tool playground with AI-powered execution
Implement comprehensive tool testing environment with real package execution, AI agents, and token tracking.

**New Features:**
- Interactive playground UI with 4 tabs (Input, Output, Logs, Token Usage)
- Real npm package execution in VM2 sandbox with security constraints
- AI-powered tool execution using AI SDK v5 and GPT-4 Turbo
- Server-Sent Events (SSE) streaming for real-time progress updates
- Comprehensive 4-category token tracking (Input, Tool Description, Schema, Output)
- Visual token breakdown with colored progress bars
- IP-based rate limiting (10 executions/hour per IP)
- Database persistence of all simulations with full metadata

**Database Schema:**
- New `Simulation` model for execution records
- New `TokenUsage` model for detailed token metrics
- New `ExecutionLog` model for execution event tracking
- Added simulations relation to Tool model

**Package Executor (@tpmjs/package-executor):**
- VM2 sandbox with 5-second timeout
- Blocked dangerous modules (fs, net, http, https, child_process)
- LRU file system cache in /tmp/.tpmjs-cache
- Package installation and caching strategy

**AI Agent Service:**
- TPMJS parameter to Zod schema conversion
- AI SDK tool definition generation
- Token counting using tiktoken library
- GPT-4 Turbo pricing estimation
- Streaming text execution with callbacks

**API Endpoints:**
- POST /api/tools/[...slug]/execute - SSE streaming execution
- GET /api/tools/[...slug]/simulations - Execution history
- Rate limit headers (X-RateLimit-Limit, X-RateLimit-Remaining)

**Frontend Components:**
- ToolPlayground - Main playground UI with tabs
- TokenBreakdown - Visual token metrics with colored bars
- Integrated above README section on tool detail pages

**Security:**
- VM2 sandboxing prevents filesystem/network access
- Rate limiting prevents abuse
- IP tracking for usage monitoring
- Timeout protection (60s max API duration, 5s VM timeout)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-30 00:36:05 +10:00