- packages/core/api: HttpApi contract with ToolsApi + SecretsApi groups SDK tagged errors pass through directly with status annotations (ToolNotFoundError→404, PolicyDeniedError→403, etc.) - apps/server: API handler implementation via HttpApiBuilder Exports createApiHandler() for reuse (no baked-in server runtime) Handlers are pure pass-through — no manual error catching - apps/web: Vite + React frontend served on same port as API Vite plugin forwards /v1/*, /docs, /openapi.json to Effect handler effect-atom integration: AtomHttpApi.Tag typed client, query/mutation atoms RegistryProvider + useAtomValue with Result pattern matching - Catalog pins @effect/platform, platform-bun, platform-node, cluster - All 9 packages typecheck clean
Showing the changes to apps/web/src (5 of 26 files). Show all
Unified · Split
| @@ -0,0 +1,46 @@ | |||
| 1 | import React, { Suspense } from "react"; | ||
| 2 | import { RegistryProvider, useAtomValue, Result } from "@effect-atom/atom-react"; | ||
| 3 | |||
| 4 | import { ExecutorClient } from "./api/client"; | ||
| 5 | import { toolsAtom } from "./api/atoms"; | ||
| 6 | |||
| 7 | function ToolList() { | ||
| 8 | const tools = useAtomValue(toolsAtom()); | ||
| 9 | |||
| 10 | if (tools._tag === "Initial" || tools.waiting) { | ||
| 11 | return <p>Loading tools…</p>; | ||
| 12 | } | ||
| 13 | |||
| 14 | if (tools._tag === "Failure") { | ||
| 15 | return <p style={{ color: "red" }}>Failed to load tools</p>; | ||
| 16 | } | ||
| 17 | |||
| 18 | return ( | ||
| 19 | <div> | ||
| 20 | <h2>Tools ({tools.value.length})</h2> | ||
| 21 | {tools.value.length === 0 ? ( | ||
| 22 | <p style={{ color: "#888" }}>No tools registered yet.</p> | ||
| 23 | ) : ( | ||
| 24 | <ul> | ||
| 25 | {tools.value.map((t) => ( | ||
| 26 | <li key={t.id}> | ||
| 27 | <strong>{t.name}</strong> | ||
| 28 | {t.description && <span> — {t.description}</span>} | ||
| 29 | </li> | ||
| 30 | ))} | ||
| 31 | </ul> | ||
| 32 | )} | ||
| 33 | </div> | ||
| 34 | ); | ||
| 35 | } | ||
| 36 | |||
| 37 | export function App() { | ||
| 38 | return ( | ||
| 39 | <RegistryProvider> | ||
| 40 | <div style={{ fontFamily: "system-ui", padding: "2rem" }}> | ||
| 41 | <h1>Executor</h1> | ||
| 42 | <ToolList /> | ||
| 43 | </div> | ||
| 44 | </RegistryProvider> | ||
| 45 | ); | ||
| 46 | } | ||
| @@ -0,0 +1,40 @@ | |||
| 1 | import { ScopeId, ToolId, SecretId } from "@executor/sdk"; | ||
| 2 | import { ExecutorClient } from "./client"; | ||
| 3 | |||
| 4 | // --------------------------------------------------------------------------- | ||
| 5 | // Query atoms — typed, cached, reactive | ||
| 6 | // --------------------------------------------------------------------------- | ||
| 7 | |||
| 8 | export const toolsAtom = (scopeId: ScopeId = ScopeId.make("default")) => | ||
| 9 | ExecutorClient.query("tools", "list", { | ||
| 10 | path: { scopeId }, | ||
| 11 | timeToLive: "30 seconds", | ||
| 12 | }); | ||
| 13 | |||
| 14 | export const toolSchemaAtom = (scopeId: ScopeId, toolId: ToolId) => | ||
| 15 | ExecutorClient.query("tools", "schema", { | ||
| 16 | path: { scopeId, toolId }, | ||
| 17 | timeToLive: "1 minute", | ||
| 18 | }); | ||
| 19 | |||
| 20 | export const secretsAtom = (scopeId: ScopeId = ScopeId.make("default")) => | ||
| 21 | ExecutorClient.query("secrets", "list", { | ||
| 22 | path: { scopeId }, | ||
| 23 | timeToLive: "30 seconds", | ||
| 24 | }); | ||
| 25 | |||
| 26 | export const secretStatusAtom = (scopeId: ScopeId, secretId: SecretId) => | ||
| 27 | ExecutorClient.query("secrets", "status", { | ||
| 28 | path: { scopeId, secretId }, | ||
| 29 | timeToLive: "15 seconds", | ||
| 30 | }); | ||
| 31 | |||
| 32 | // --------------------------------------------------------------------------- | ||
| 33 | // Mutation atoms — fire-and-forget style | ||
| 34 | // --------------------------------------------------------------------------- | ||
| 35 | |||
| 36 | export const invokeTool = ExecutorClient.mutation("tools", "invoke"); | ||
| 37 | |||
| 38 | export const setSecret = ExecutorClient.mutation("secrets", "set"); | ||
| 39 | |||
| 40 | export const removeSecret = ExecutorClient.mutation("secrets", "remove"); | ||
| @@ -0,0 +1,15 @@ | |||
| 1 | import { AtomHttpApi } from "@effect-atom/atom-react"; | ||
| 2 | import { FetchHttpClient } from "@effect/platform"; | ||
| 3 | import { ExecutorApi } from "@executor/api"; | ||
| 4 | |||
| 5 | // --------------------------------------------------------------------------- | ||
| 6 | // Typed HTTP API client — uses effect-atom's AtomHttpApi.Tag | ||
| 7 | // --------------------------------------------------------------------------- | ||
| 8 | |||
| 9 | class ExecutorClient extends AtomHttpApi.Tag<ExecutorClient>()("ExecutorClient", { | ||
| 10 | api: ExecutorApi, | ||
| 11 | httpClient: FetchHttpClient.layer, | ||
| 12 | baseUrl: "/", | ||
| 13 | }) {} | ||
| 14 | |||
| 15 | export { ExecutorClient }; | ||
| @@ -0,0 +1,10 @@ | |||
| 1 | export { ExecutorClient } from "./client"; | ||
| 2 | export { | ||
| 3 | toolsAtom, | ||
| 4 | toolSchemaAtom, | ||
| 5 | secretsAtom, | ||
| 6 | secretStatusAtom, | ||
| 7 | invokeTool, | ||
| 8 | setSecret, | ||
| 9 | removeSecret, | ||
| 10 | } from "./atoms"; | ||
| @@ -0,0 +1,6 @@ | |||
| 1 | import React from "react"; | ||
| 2 | import { createRoot } from "react-dom/client"; | ||
| 3 | import { App } from "./App"; | ||
| 4 | |||
| 5 | const root = createRoot(document.getElementById("root")!); | ||
| 6 | root.render(<App />); | ||