Val Town Code SearchReturn to Val Town

2import { blob } from "https://esm.town/v/std/blob";
3
4const KEY = Deno.env.get("NEWSDATA")!; // API key
5const KEEP = 20; // store up to 20
6const WINDOW_MIN = 1440; // last 24 h
9  /* 1 ─ build query (size 10, English) */
10  const q = encodeURIComponent("bitcoin OR btc OR ethereum OR eth OR solana OR sol");
11  const url = `https://newsdata.io/api/1/latest?apikey=${KEY}&q=${q}&language=en&size=10`;
12
13  /* 2 ─ fetch & peek */

51async function sendWhatsApp(text: string) {
52  const enc = encodeURIComponent(text.substring(0, 900)); // 900 char max
53  const url = `https://api.callmebot.com/whatsapp.php?phone=${PHONE}`
54    + `&text=${enc}&apikey=${KEY}`;
55  await fetch(url).then(r => r.text());
56}

9}
10
11interface MCPContextAPI {
12  // Tool operations
13  listTools: () => Promise<any[]>;
37 * - Renders HTML in a secure iframe
38 * - Provides fullscreen enter/exit affordances
39 * - Exposes MCP context API to iframe content
40 * - Handles iframe communication via postMessage
41 */
47  console.log("[MCP/Browser Renderer] HTMLRenderer: Rendering HTML:", { mcpClients });
48
49  // Create MCP context API that will be exposed to iframe
50  const createMCPContext = useCallback((): MCPContextAPI => {
51    const findClientByName = (serverName: string) => {
52      console.log("[MCP/Browser Renderer] Finding client by name:", serverName, mcpClients);
177      const { type, id, method, args } = event.data;
178
179      if (type !== "mcp-api-call") {
180        return;
181      }
186
187        if (typeof methodFunc !== "function") {
188          throw new Error(`Unknown MCP API method: ${method}`);
189        }
190
192
193        iframe.contentWindow?.postMessage({
194          type: "mcp-api-response",
195          id,
196          success: true,
199      } catch (error) {
200        iframe.contentWindow?.postMessage({
201          type: "mcp-api-response",
202          id,
203          success: false,
222    </script>
223      <script>
224        // MCP Context API for iframe content
225        window.mcpContext = {
226          // Async wrapper for postMessage communication
227          async callAPI(method, ...args) {
228            return new Promise((resolve, reject) => {
229              const id = Math.random().toString(36).substr(2, 9);
230              
231              const handleResponse = (event) => {
232                if (event.data.type === 'mcp-api-response' && event.data.id === id) {
233                  window.removeEventListener('message', handleResponse);
234                  if (event.data.success) {
243              
244              window.parent.postMessage({
245                type: 'mcp-api-call',
246                id,
247                method,
252              setTimeout(() => {
253                window.removeEventListener('message', handleResponse);
254                reject(new Error('MCP API call timeout'));
255              }, 30000);
256            });
258          
259          // Convenience methods
260          async listTools() { return this.callAPI('listTools'); },
261          async callTool(serverName, toolName, args) { return this.callAPI('callTool', serverName, toolName, args); },
262          async listPrompts() { return this.callAPI('listPrompts'); },
263          async getPrompt(serverName, promptName, args) { return this.callAPI('getPrompt', serverName, promptName, args); },
264          async listResources() { return this.callAPI('listResources'); },
265          async readResource(serverName, uri) { return this.callAPI('readResource', serverName, uri); },
266          log(level, message, data) { this.callAPI('log', level, message, data); },
267          requestFullscreen() { this.callAPI('requestFullscreen'); },
268          exitFullscreen() { this.callAPI('exitFullscreen'); },
269          async isFullscreen() { return this.callAPI('isFullscreen'); }
270        };
271        

1import { getArticle, getAuthor } from "./_api.ts";
2import { createServer } from "./_server.ts";
3

1import { getArticle } from "./_api.ts";
2import { createServer } from "./_server.ts";
3

1import { getArticle } from "./_api.ts";
2import { createServer } from "./_server.ts";
3

1import { setTimeout } from "node:timers/promises";
2
3const articles = [{
4  id: 0,
5  title: "A Crash Course in GraphQL",

6## Phase Completion Checklist
7- [x] Phase 1: Foundation & Database Setup
8- [x] Phase 2: Core Backend API  
9- [x] Phase 3: Frontend Foundation
10- [x] Phase 4: Enhanced UI & Interactions
59---
60
61## Phase 2: Core Backend API
62**Goal**: Build RESTful API endpoints for invoice management
63
64### Tasks:
651. **Main API Setup**
66   - Create `main.tsx` with Hono app configuration
67   - Set up error handling and static file serving
68   - Configure CORS if needed
69
702. **Invoice API Endpoints**
71   - `GET /api/invoices` - List all invoices with filtering
72   - `POST /api/invoices` - Create new invoice
73   - `PUT /api/invoices/:id` - Update invoice (mainly status changes)
74   - `GET /api/invoices/stats` - Dashboard statistics
75
763. **Vendor API Endpoints**
77   - `GET /api/vendors` - List all vendors
78
79### Deliverables:
80- Complete REST API for invoice management
81- API endpoints tested via admin tools or direct calls
82- Proper error handling and validation
83
171
172## Technical Stack
173- **Backend**: Hono.js for API routes
174- **Database**: SQLite with Val Town's sqlite service
175- **Frontend**: React 18.2.0 with TypeScript

64                {getStatusIcon(status, index)}
65              </span>
66              <span className="text-xs mt-1 capitalize">
67                {status}
68              </span>
76          <div className="text-sm opacity-70">
77            Step {currentIndex + 1} of {statuses.length}: 
78            <span className="font-medium capitalize ml-1">{currentStatus}</span>
79          </div>
80          {interactive && currentIndex < statuses.length - 1 && (
124        max="100"
125      ></progress>
126      <span className="text-xs capitalize font-medium">
127        {currentStatus}
128      </span>

2
3import React, { useState, useEffect } from "https://esm.sh/react@18.2.0";
4import { InvoiceWithVendor, Vendor, InvoiceFilters, InvoiceStats, InvoiceStatus, ApiResponse } from "../../shared/types.ts";
5import InvoiceList from "./InvoiceList.tsx";
6import InvoiceForm from "./InvoiceForm.tsx";
18  const [activeTab, setActiveTab] = useState<'dashboard' | 'invoices' | 'add'>('dashboard');
19
20  // Fetch data from API
21  useEffect(() => {
22    fetchData();
40      
41      const [invoicesResponse, vendorsResponse] = await Promise.all([
42        fetch(`/api/invoices?${queryParams.toString()}`),
43        fetch('/api/vendors')
44      ]);
45
48      }
49
50      const invoicesData: ApiResponse<InvoiceWithVendor[]> = await invoicesResponse.json();
51      const vendorsData: ApiResponse<Vendor[]> = await vendorsResponse.json();
52
53      if (!invoicesData.success || !vendorsData.success) {
69    try {
70      setStatsLoading(true);
71      const response = await fetch('/api/invoices/stats');
72      
73      if (!response.ok) {
75      }
76
77      const data: ApiResponse<InvoiceStats> = await response.json();
78      
79      if (!data.success) {
92  const handleAddInvoice = async (invoiceData: any) => {
93    try {
94      const response = await fetch('/api/invoices', {
95        method: 'POST',
96        headers: {
104      }
105
106      const data: ApiResponse<InvoiceWithVendor> = await response.json();
107      
108      if (!data.success) {
123  const handleStatusUpdate = async (invoiceId: number, newStatus: InvoiceStatus) => {
124    try {
125      const response = await fetch(`/api/invoices/${invoiceId}`, {
126        method: 'PUT',
127        headers: {
135      }
136
137      const data: ApiResponse<InvoiceWithVendor> = await response.json();
138      
139      if (!data.success) {