tpmjs/apps/playground/src/app/page.tsx
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

24 lines
728 B
TypeScript

'use client';
import { ChatHeader } from '~/components/chat/ChatHeader';
import { ChatInterface } from '~/components/chat/ChatInterface';
import { SettingsSidebar } from '~/components/sidebar/SettingsSidebar';
import { ToolsSidebar } from '~/components/sidebar/ToolsSidebar';
export default function PlaygroundPage(): React.ReactElement {
const handleClearChat = () => {
// Refresh the page to clear chat
window.location.reload();
};
return (
<div className="flex h-screen flex-col bg-background">
<ChatHeader onClear={handleClearChat} />
<div className="flex flex-1 overflow-hidden">
<ToolsSidebar />
<ChatInterface />
<SettingsSidebar />
</div>
</div>
);
}