Val Town Code SearchReturn to Val Town

1# Usage Dashboard
2
3A dashboard for monitoring API usage and inference calls.
4
5## Features
20  index.ts                 # Main entry point and routing
21  auth.ts                  # Authentication logic
22  /api/
23    index.ts              # API request handler
24    requests.ts           # API endpoints for requests data
25    inference-calls.ts    # API endpoints for inference calls
26    user-summary.ts       # API endpoints for user summary data
27  /views/
28    layout.ts             # Common layout template
54   - Links back to the associated request
55
56### API Endpoints
57
58- `/api/requests` - Get paginated requests
59- `/api/requests?usage_id=123` - Get a specific request
60- `/api/inference-calls` - Get paginated inference calls
61- `/api/inference-calls?usage_id=123` - Get inference calls for a specific request
62- `/api/user-summary` - Get user summary data
63
64## Debugging

24       user_id = ? 
25       AND timestamp > ?
26       AND our_api_token = 1
27    `,
28    [userId, new Date().getTime() - 24 * 60 * 60 * 1000],
108  branch_id,
109  model,
110  our_api_token,
111  num_images,
112}: {
115  branch_id: string;
116  model: string;
117  our_api_token: boolean;
118  num_images: number;
119}) {
127      branch_id,
128      model,
129      our_api_token,
130      num_images
131      ) VALUES (?, ?, ?, ?, ?, ?, ?, ?)
138      branch_id,
139      model,
140      our_api_token ? 1 : 0,
141      num_images,
142    ],

90              value={customPath}
91              onChange={handlePathChange}
92              placeholder="Path (e.g., /api/data)"
93            />
94          </div>

11app.get("*", async (c, next) => {
12  const path = c.req.path;
13  if (path.startsWith("/api/") || c.req.header("Accept")?.includes("application/json")) {
14    return next();
15  }
21});
22
23app.route("/api", backend);
24app.get("/frontend/*", c => {
25  return serveFile(c.req.path, import.meta.url);

1import { basicAuthMiddleware } from "./auth.ts";
2import { handleApiRequest } from "./api/index.ts";
3import { getRequests } from "./api/requests.ts";
4import { getUserSummary } from "./api/user-summary.ts";
5import { getInferenceCalls } from "./api/inference-calls.ts";
6import { renderDashboard } from "./views/dashboard.ts";
7import { renderRequests } from "./views/requests.ts";
22  const path = url.pathname;
23
24  // Handle API requests
25  if (path.startsWith("/api/")) {
26    return handleApiRequest(req);
27  }
28

4
5/**
6 * Handle API requests
7 */
8export async function handleApiRequest(req: Request): Promise<Response> {
9  const url = new URL(req.url);
10  const path = url.pathname.replace("/api/", "");
11  
12  try {
13    // Route to the appropriate API handler
14    if (path === "requests") {
15      const usageId = url.searchParams.get("usage_id");
59    }
60  } catch (error) {
61    console.error("API error:", error);
62    return new Response(JSON.stringify({ error: error.message }), {
63      status: 500,

42        </h2>
43        <ol>
44          <li>Login with your Val Town API token (with projects:read, projects:write, user:read permissions)</li>
45          <li>Select a project to work on</li>
46          <li>Chat with Claude about your code</li>
79          </div>
80          <h3>Cost Tracking</h3>
81          <p>See estimated API usage costs for each interaction</p>
82        </div>
83      </section>
92        <ul>
93          <li>React frontend with TypeScript</li>
94          <li>Hono API server backend</li>
95          <li>Web Audio API for sound notifications</li>
96          <li>AI SDK for Claude integration</li>
97        </ul>
98        <p>
99          The application proxies requests to the Anthropic API and Val Town API, allowing Claude to view and edit your
100          project files directly.
101        </p>

63  refetch: () => void;
64}) {
65  const { token, anthropicApiKey } = useAuth();
66  const [images, setImages] = useState<(string|null)[]>([]);
67  const [selectedFiles, setSelectedFiles] = useState<string[]>([]);
81    project,
82    branchId,
83    anthropicApiKey,
84    bearerToken: token,
85    selectedFiles,

10  const [query, setQuery] = React.useState("");
11  const [targetAccount, setTargetAccount] = React.useState("");
12  const [apiKey, setApiKey] = React.useState("");
13  const [searchType, setSearchType] = React.useState("Latest");
14  const [sinceDate, setSinceDate] = React.useState("");
50  const fetchAllTweets = React.useCallback(
51    async (fullQuery, type, targetCount) => {
52      if (!apiKey.trim()) {
53        setError("Please enter your SocialData API Key.");
54        return;
55      }
79          }
80
81          const response = await fetch(`/api/search?${params.toString()}`, {
82            headers: { "X-Api-Key": apiKey },
83          });
84
88            const errorData = await response
89              .json()
90              .catch(() => ({ message: `API Error: ${response.statusText}` }));
91            throw new Error(
92              errorData.message
93                || `API Error: ${response.statusText} on page ${pageNum}`,
94            );
95          }
100          if (data.status === "error") {
101            throw new Error(
102              data.message || `API returned an error on page ${pageNum}`,
103            );
104          }
135      }
136    },
137    [apiKey],
138  );
139
144      return;
145    }
146    if (!apiKey.trim()) {
147      setError("Please enter your SocialData API Key.");
148      return;
149    }
176    { className: "app" },
177    React.createElement("h1", { className: "title" }, "X Search"),
178    // API Key Input
179    React.createElement(
180      "div",
185        React.createElement(
186          "label",
187          { htmlFor: "apiKey", className: "label" },
188          "API Key",
189        ),
190        React.createElement("input", {
191          type: "password",
192          id: "apiKey",
193          value: apiKey,
194          onChange: (e) => setApiKey(e.target.value),
195          placeholder: "Enter SocialData API Key",
196          className: "input",
197        }),
565          rel: "noopener noreferrer",
566        },
567        "SocialData API",
568      ),
569      " | ",
598  const url = new URL(request.url);
599
600  // Search API Proxy Endpoint
601  if (url.pathname === "/api/search" && request.method === "GET") {
602    const apiKey = request.headers.get("X-Api-Key");
603    if (!apiKey) {
604      return Response.json(
605        { status: "error", message: "API Key missing in request" },
606        { status: 400 },
607      );
619    }
620
621    const apiUrl = new URL("https://api.socialdata.tools/twitter/search");
622    apiUrl.searchParams.set("query", query);
623    apiUrl.searchParams.set("type", type);
624    if (cursor) apiUrl.searchParams.set("cursor", cursor);
625
626    try {
627      const apiResponse = await fetch(apiUrl.toString(), {
628        headers: {
629          Authorization: `Bearer ${apiKey}`,
630          Accept: "application/json",
631        },
634      let responseData;
635      try {
636        responseData = await apiResponse.json();
637      } catch (e) {
638        const text = await apiResponse.text();
639        console.error("Non-JSON response from SocialData:", text);
640        return Response.json(
641          {
642            status: "error",
643            message: `SocialData API non-JSON response: ${apiResponse.statusText}`,
644          },
645          { status: apiResponse.status },
646        );
647      }
648
649      if (!apiResponse.ok || responseData.status === "error") {
650        console.error(
651          `SocialData API Error (${apiResponse.status}):`,
652          responseData,
653        );
656            status: "error",
657            message: responseData?.message
658              || `SocialData API Error: ${apiResponse.statusText}`,
659          },
660          { status: apiResponse.status },
661        );
662      }

41    : `applications/${DISCORD_APP_ID}/commands`;
42
43  console.log(`📡 Using API endpoint: ${endpoint}`);
44
45  try {
49
50    // Register the command using POST for a single command
51    const response = await fetch(`https://discord.com/api/v10/${endpoint}`, {
52      method: "POST", // Using POST for single command creation
53      headers: {