refactor: remove legacy react ui
This commit is contained in:
a.tolmachev
@@ -65,24 +65,14 @@ jobs:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v5
|
||||
|
||||
- name: Install Node.js
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: 22
|
||||
cache: npm
|
||||
cache-dependency-path: apps/ui/package-lock.json
|
||||
- name: Validate static UI files
|
||||
run: |
|
||||
test -f apps/ui/Dockerfile
|
||||
test -f apps/ui/index.html
|
||||
test -f apps/ui/nginx.conf
|
||||
|
||||
- name: Install UI dependencies
|
||||
working-directory: apps/ui
|
||||
run: npm ci
|
||||
|
||||
- name: Build UI
|
||||
working-directory: apps/ui
|
||||
run: npm run build
|
||||
|
||||
- name: Run UI tests
|
||||
working-directory: apps/ui
|
||||
run: npm run test -- --run
|
||||
- name: Build UI image
|
||||
run: docker build -f apps/ui/Dockerfile .
|
||||
|
||||
deployment:
|
||||
name: Deployment Artifacts
|
||||
|
||||
@@ -2,22 +2,21 @@
|
||||
|
||||
## Current
|
||||
|
||||
### `feat/crank-rebrand`
|
||||
### `feat/remove-legacy-ui`
|
||||
|
||||
Status: completed
|
||||
|
||||
DoD:
|
||||
|
||||
- проект переименован в `Crank` в документации, UI и package metadata
|
||||
- workspace и crate package names согласованы с новым брендом
|
||||
- `README.md` использует `Crank.png` как главное изображение
|
||||
- `origin` указывает на `git@github.com:bsodfather/crank.git`
|
||||
- Rust workspace и UI build остаются зелеными
|
||||
- текущая React/Vite UI-кодовая база удалена
|
||||
- `apps/ui` сохранен как статический placeholder для будущей замены
|
||||
- compose, deploy и CI не ломаются после удаления legacy UI
|
||||
|
||||
## Next
|
||||
|
||||
- `feat/demo-assets`
|
||||
- `feat/alpine-ui`
|
||||
|
||||
## Backlog
|
||||
|
||||
- `feat/alpine-ui`
|
||||
- `feat/demo-assets`
|
||||
|
||||
+2
-10
@@ -1,15 +1,7 @@
|
||||
FROM node:22-alpine AS build
|
||||
|
||||
WORKDIR /app
|
||||
|
||||
COPY apps/ui/package.json apps/ui/package-lock.json ./
|
||||
RUN npm ci
|
||||
COPY apps/ui/ ./
|
||||
RUN npm run build
|
||||
|
||||
FROM nginx:1.27-alpine
|
||||
|
||||
COPY apps/ui/nginx.conf /etc/nginx/conf.d/default.conf
|
||||
COPY --from=build /app/dist /usr/share/nginx/html
|
||||
COPY apps/ui/index.html /usr/share/nginx/html/index.html
|
||||
COPY Crank.png /usr/share/nginx/html/Crank.png
|
||||
|
||||
EXPOSE 3000
|
||||
|
||||
+84
-2
@@ -4,9 +4,91 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Crank Console</title>
|
||||
<style>
|
||||
:root {
|
||||
color-scheme: light;
|
||||
font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
|
||||
background: #eef3f7;
|
||||
color: #162433;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-height: 100vh;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(0, 148, 134, 0.12), transparent 28rem),
|
||||
linear-gradient(180deg, #f5f8fb 0%, #ebf1f6 100%);
|
||||
}
|
||||
|
||||
main {
|
||||
width: min(42rem, calc(100vw - 3rem));
|
||||
padding: 3rem;
|
||||
border-radius: 1.5rem;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
border: 1px solid rgba(22, 36, 51, 0.08);
|
||||
box-shadow: 0 24px 60px rgba(22, 36, 51, 0.12);
|
||||
}
|
||||
|
||||
img {
|
||||
width: 5rem;
|
||||
height: 5rem;
|
||||
display: block;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0 0 0.75rem;
|
||||
font-size: clamp(2rem, 5vw, 3rem);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0 0 1rem;
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
color: #516070;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
margin-bottom: 1rem;
|
||||
padding: 0.45rem 0.8rem;
|
||||
border-radius: 999px;
|
||||
font-size: 0.85rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.03em;
|
||||
text-transform: uppercase;
|
||||
color: #0f766e;
|
||||
background: rgba(15, 118, 110, 0.12);
|
||||
}
|
||||
|
||||
.muted {
|
||||
font-size: 0.95rem;
|
||||
color: #6a7b8d;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
<script type="module" src="/src/main.tsx"></script>
|
||||
<main>
|
||||
<img src="/Crank.png" alt="Crank logo" />
|
||||
<div class="badge">UI replacement in progress</div>
|
||||
<h1>Crank Console</h1>
|
||||
<p>
|
||||
The legacy React/Vite UI has been removed. A new operator console is being integrated on top of the same
|
||||
deployment path.
|
||||
</p>
|
||||
<p class="muted">
|
||||
Backend services, MCP endpoints and deployment contracts remain intact. Replace this static entrypoint with
|
||||
the new Alpine.js UI when it is ready.
|
||||
</p>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Generated
-3266
File diff suppressed because it is too large
Load Diff
@@ -1,33 +0,0 @@
|
||||
{
|
||||
"name": "crank-ui",
|
||||
"private": true,
|
||||
"version": "0.1.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite",
|
||||
"build": "tsc --noEmit -p tsconfig.app.json && tsc --noEmit -p tsconfig.node.json && vite build",
|
||||
"preview": "vite preview",
|
||||
"test": "vitest"
|
||||
},
|
||||
"dependencies": {
|
||||
"@hookform/resolvers": "^5.2.2",
|
||||
"@tanstack/react-query": "^5.90.5",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"react-hook-form": "^7.62.0",
|
||||
"react-router-dom": "^7.9.3",
|
||||
"zod": "^4.1.11"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@testing-library/jest-dom": "^6.8.0",
|
||||
"@testing-library/react": "^16.3.0",
|
||||
"@testing-library/user-event": "^14.6.1",
|
||||
"@types/react": "^19.1.16",
|
||||
"@types/react-dom": "^19.1.9",
|
||||
"@vitejs/plugin-react": "^5.0.4",
|
||||
"jsdom": "^27.0.0",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.1.7",
|
||||
"vitest": "^3.2.4"
|
||||
}
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { ReactNode, useState } from "react";
|
||||
|
||||
type AppProvidersProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function AppProviders({ children }: AppProvidersProps) {
|
||||
const [queryClient] = useState(
|
||||
() =>
|
||||
new QueryClient({
|
||||
defaultOptions: {
|
||||
queries: {
|
||||
staleTime: 15_000,
|
||||
retry: 1,
|
||||
},
|
||||
},
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
);
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import { BrowserRouter, Navigate, Route, Routes } from "react-router-dom";
|
||||
|
||||
import { AppShell } from "../shared/ui/app-shell";
|
||||
import { OperationCreatePage } from "../pages/operation-create/page";
|
||||
import { OperationDetailPage } from "../pages/operation-detail/page";
|
||||
import { OperationListPage } from "../pages/operation-list/page";
|
||||
|
||||
export function AppRouter() {
|
||||
return (
|
||||
<BrowserRouter>
|
||||
<AppShell>
|
||||
<Routes>
|
||||
<Route path="/" element={<Navigate to="/operations" replace />} />
|
||||
<Route path="/operations" element={<OperationListPage />} />
|
||||
<Route path="/operations/new" element={<OperationCreatePage />} />
|
||||
<Route
|
||||
path="/operations/:operationId"
|
||||
element={<OperationDetailPage />}
|
||||
/>
|
||||
</Routes>
|
||||
</AppShell>
|
||||
</BrowserRouter>
|
||||
);
|
||||
}
|
||||
@@ -1,128 +0,0 @@
|
||||
import {
|
||||
getJson,
|
||||
getText,
|
||||
postBytes,
|
||||
postJson,
|
||||
postText,
|
||||
} from "../../shared/api/client";
|
||||
import type {
|
||||
AuthProfile,
|
||||
DraftGenerationResult,
|
||||
GrpcServiceSummary,
|
||||
OperationRecord,
|
||||
OperationSummary,
|
||||
TestRunResult,
|
||||
} from "./types";
|
||||
|
||||
export function listOperations() {
|
||||
return getJson<{ items: OperationSummary[] }>("/api/admin/operations");
|
||||
}
|
||||
|
||||
export function getOperation(operationId: string) {
|
||||
return getJson<OperationSummary>(`/api/admin/operations/${operationId}`);
|
||||
}
|
||||
|
||||
export function getOperationVersion(operationId: string, version: number) {
|
||||
return getJson<OperationRecord>(
|
||||
`/api/admin/operations/${operationId}/versions/${version}`,
|
||||
);
|
||||
}
|
||||
|
||||
export function createOperation(payload: unknown) {
|
||||
return postJson<{
|
||||
operation_id: string;
|
||||
version: number;
|
||||
status: string;
|
||||
}>("/api/admin/operations", payload);
|
||||
}
|
||||
|
||||
export function publishOperation(operationId: string, version: number) {
|
||||
return postJson<{ published_version: number; published_at: string }>(
|
||||
`/api/admin/operations/${operationId}/publish`,
|
||||
{ version },
|
||||
);
|
||||
}
|
||||
|
||||
export function runOperationTest(
|
||||
operationId: string,
|
||||
version: number,
|
||||
input: unknown,
|
||||
) {
|
||||
return postJson<TestRunResult>(`/api/admin/operations/${operationId}/test-runs`, {
|
||||
version,
|
||||
input,
|
||||
});
|
||||
}
|
||||
|
||||
export function uploadInputJsonSample(operationId: string, payload: unknown) {
|
||||
return postJson(`/api/admin/operations/${operationId}/samples/input-json`, payload);
|
||||
}
|
||||
|
||||
export function uploadOutputJsonSample(operationId: string, payload: unknown) {
|
||||
return postJson(
|
||||
`/api/admin/operations/${operationId}/samples/output-json`,
|
||||
payload,
|
||||
);
|
||||
}
|
||||
|
||||
export function generateDraft(operationId: string) {
|
||||
return postJson<DraftGenerationResult>(
|
||||
`/api/admin/operations/${operationId}/drafts/generate`,
|
||||
{
|
||||
sources: ["input_json_sample", "output_json_sample"],
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function exportOperationYaml(operationId: string, version?: number) {
|
||||
const query = version === undefined ? "" : `?version=${version}`;
|
||||
return getText(`/api/admin/operations/${operationId}/export${query}`);
|
||||
}
|
||||
|
||||
export function importOperationYaml(yamlText: string, mode: "create" | "upsert") {
|
||||
return postText<{ operation_id: string; version: number; import_mode: string }>(
|
||||
`/api/admin/operations/import?mode=${mode}`,
|
||||
yamlText,
|
||||
);
|
||||
}
|
||||
|
||||
export function listAuthProfiles() {
|
||||
return getJson<{ items: AuthProfile[] }>("/api/admin/auth-profiles");
|
||||
}
|
||||
|
||||
export function uploadProtoDescriptor(
|
||||
operationId: string,
|
||||
fileName: string,
|
||||
bytes: ArrayBuffer,
|
||||
) {
|
||||
return postBytes<{ descriptor_id: string; version: number }>(
|
||||
`/api/admin/operations/${operationId}/descriptors/proto`,
|
||||
bytes,
|
||||
{
|
||||
"Content-Type": "application/octet-stream",
|
||||
"x-file-name": fileName,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function uploadDescriptorSet(
|
||||
operationId: string,
|
||||
fileName: string,
|
||||
bytes: ArrayBuffer,
|
||||
) {
|
||||
return postBytes<{ descriptor_id: string; version: number }>(
|
||||
`/api/admin/operations/${operationId}/descriptors/descriptor-set`,
|
||||
bytes,
|
||||
{
|
||||
"Content-Type": "application/octet-stream",
|
||||
"x-file-name": fileName,
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
export function listGrpcServices(operationId: string, version?: number) {
|
||||
const query = version === undefined ? "" : `?version=${version}`;
|
||||
return getJson<{ services: GrpcServiceSummary[] }>(
|
||||
`/api/admin/operations/${operationId}/grpc/services${query}`,
|
||||
);
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
export type Protocol = "rest" | "graphql" | "grpc";
|
||||
export type OperationStatus = "draft" | "testing" | "published" | "archived";
|
||||
|
||||
export type RestTarget = {
|
||||
kind: "rest";
|
||||
base_url: string;
|
||||
method: "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
|
||||
path_template: string;
|
||||
static_headers?: Record<string, string>;
|
||||
};
|
||||
|
||||
export type GraphqlTarget = {
|
||||
kind: "graphql";
|
||||
endpoint: string;
|
||||
operation_type: "query" | "mutation";
|
||||
operation_name: string;
|
||||
query_template: string;
|
||||
response_path: string;
|
||||
};
|
||||
|
||||
export type GrpcTarget = {
|
||||
kind: "grpc";
|
||||
server_addr: string;
|
||||
package: string;
|
||||
service: string;
|
||||
method: string;
|
||||
descriptor_ref: string;
|
||||
descriptor_set_b64: string;
|
||||
};
|
||||
|
||||
export type OperationTarget = RestTarget | GraphqlTarget | GrpcTarget;
|
||||
|
||||
export type OperationSummary = {
|
||||
id: string;
|
||||
name: string;
|
||||
display_name: string;
|
||||
protocol: Protocol;
|
||||
status: OperationStatus;
|
||||
current_draft_version: number;
|
||||
latest_published_version: number | null;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
published_at: string | null;
|
||||
};
|
||||
|
||||
export type OperationRecord = {
|
||||
operation_id: string;
|
||||
version: number;
|
||||
status: OperationStatus;
|
||||
change_note: string | null;
|
||||
created_at: string;
|
||||
created_by: string | null;
|
||||
snapshot: OperationSnapshot;
|
||||
};
|
||||
|
||||
export type OperationSnapshot = {
|
||||
id: string;
|
||||
name: string;
|
||||
display_name: string;
|
||||
protocol: Protocol;
|
||||
status: OperationStatus;
|
||||
version: number;
|
||||
target: OperationTarget;
|
||||
input_schema: unknown;
|
||||
output_schema: unknown;
|
||||
input_mapping: unknown;
|
||||
output_mapping: unknown;
|
||||
execution_config: unknown;
|
||||
tool_description: {
|
||||
title: string;
|
||||
description: string;
|
||||
tags: string[];
|
||||
examples: Array<{ input: unknown }>;
|
||||
};
|
||||
};
|
||||
|
||||
export type DraftGenerationResult = {
|
||||
generated_draft: {
|
||||
status: string;
|
||||
source_types: string[];
|
||||
generated_at: string | null;
|
||||
input_schema_generated: boolean;
|
||||
output_schema_generated: boolean;
|
||||
input_mapping_generated: boolean;
|
||||
output_mapping_generated: boolean;
|
||||
warnings: string[];
|
||||
};
|
||||
input_schema: unknown;
|
||||
output_schema: unknown;
|
||||
input_mapping: unknown;
|
||||
output_mapping: unknown;
|
||||
};
|
||||
|
||||
export type TestRunResult = {
|
||||
ok: boolean;
|
||||
request_preview: unknown;
|
||||
response_preview: unknown;
|
||||
errors: Array<{ code: string; message: string }>;
|
||||
};
|
||||
|
||||
export type AuthProfile = {
|
||||
id: string;
|
||||
name: string;
|
||||
kind: string;
|
||||
config: unknown;
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
};
|
||||
|
||||
export type GrpcMethodSummary = {
|
||||
name: string;
|
||||
kind: string;
|
||||
input_schema: unknown;
|
||||
output_schema: unknown;
|
||||
};
|
||||
|
||||
export type GrpcServiceSummary = {
|
||||
package: string;
|
||||
service: string;
|
||||
methods: GrpcMethodSummary[];
|
||||
};
|
||||
@@ -1,160 +0,0 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
listGrpcServices,
|
||||
uploadDescriptorSet,
|
||||
uploadProtoDescriptor,
|
||||
} from "../../entities/operation/api";
|
||||
import type { GrpcServiceSummary } from "../../entities/operation/types";
|
||||
import { ApiError } from "../../shared/api/client";
|
||||
|
||||
type GrpcDescriptorPanelProps = {
|
||||
operationId: string;
|
||||
version: number;
|
||||
};
|
||||
|
||||
type UploadKind = "proto" | "descriptor-set";
|
||||
|
||||
function descriptorSubtitle(service: GrpcServiceSummary) {
|
||||
return service.package.length > 0
|
||||
? `${service.package}.${service.service}`
|
||||
: service.service;
|
||||
}
|
||||
|
||||
export function GrpcDescriptorPanel({
|
||||
operationId,
|
||||
version,
|
||||
}: GrpcDescriptorPanelProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [uploadError, setUploadError] = useState<string | null>(null);
|
||||
|
||||
const servicesQuery = useQuery({
|
||||
queryKey: ["grpc-services", operationId, version],
|
||||
queryFn: () => listGrpcServices(operationId, version),
|
||||
enabled: operationId.length > 0 && version > 0,
|
||||
});
|
||||
|
||||
const uploadMutation = useMutation({
|
||||
mutationFn: async ({
|
||||
file,
|
||||
kind,
|
||||
}: {
|
||||
file: File;
|
||||
kind: UploadKind;
|
||||
}) => {
|
||||
const bytes = await file.arrayBuffer();
|
||||
if (kind === "proto") {
|
||||
return uploadProtoDescriptor(operationId, file.name, bytes);
|
||||
}
|
||||
|
||||
return uploadDescriptorSet(operationId, file.name, bytes);
|
||||
},
|
||||
onSuccess: async () => {
|
||||
setUploadError(null);
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["grpc-services", operationId, version],
|
||||
});
|
||||
},
|
||||
onError: (error) => {
|
||||
setUploadError(
|
||||
error instanceof ApiError ? error.message : "Descriptor upload failed",
|
||||
);
|
||||
},
|
||||
});
|
||||
|
||||
async function handleFileUpload(
|
||||
file: File | undefined,
|
||||
kind: UploadKind,
|
||||
) {
|
||||
if (file === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
setUploadError(null);
|
||||
uploadMutation.mutate({ file, kind });
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="stack-layout">
|
||||
<div className="upload-grid">
|
||||
<label className="field-block">
|
||||
<span>Upload `.proto`</span>
|
||||
<small className="field-hint">
|
||||
Stores the source artifact alongside the current draft version.
|
||||
</small>
|
||||
<input
|
||||
type="file"
|
||||
accept=".proto"
|
||||
onChange={(event) => {
|
||||
void handleFileUpload(event.target.files?.[0], "proto");
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
<label className="field-block">
|
||||
<span>Upload descriptor set</span>
|
||||
<small className="field-hint">
|
||||
Enables unary service discovery and schema extraction for the current version.
|
||||
</small>
|
||||
<input
|
||||
type="file"
|
||||
accept=".bin,.pb,.desc"
|
||||
onChange={(event) => {
|
||||
void handleFileUpload(event.target.files?.[0], "descriptor-set");
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{uploadMutation.isPending ? (
|
||||
<div className="feedback-card">Uploading descriptor artifact...</div>
|
||||
) : null}
|
||||
{uploadError ? (
|
||||
<div className="feedback-card feedback-error">{uploadError}</div>
|
||||
) : null}
|
||||
|
||||
{servicesQuery.data?.services.length ? (
|
||||
<div className="service-grid">
|
||||
{servicesQuery.data.services.map((service) => (
|
||||
<article className="service-card" key={descriptorSubtitle(service)}>
|
||||
<div className="service-card-header">
|
||||
<div>
|
||||
<h3>{service.service}</h3>
|
||||
<p>{descriptorSubtitle(service)}</p>
|
||||
</div>
|
||||
<span className="status-pill status-testing">
|
||||
{service.methods.length} methods
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="service-method-list">
|
||||
{service.methods.map((method) => (
|
||||
<div className="service-method" key={method.name}>
|
||||
<div className="service-method-top">
|
||||
<strong>{method.name}</strong>
|
||||
<span className="protocol-pill protocol-grpc">{method.kind}</span>
|
||||
</div>
|
||||
<div className="result-grid">
|
||||
<div className="result-panel">
|
||||
<h3>Input schema</h3>
|
||||
<pre>{JSON.stringify(method.input_schema, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Output schema</h3>
|
||||
<pre>{JSON.stringify(method.output_schema, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</article>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<div className="feedback-card">
|
||||
Upload a descriptor set to inspect unary services and message schemas.
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,145 +0,0 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
|
||||
import { buildOperationPayload, defaultOperationFormValues } from "./model";
|
||||
|
||||
describe("buildOperationPayload", () => {
|
||||
it("creates a REST operation payload from form values", () => {
|
||||
const payload = buildOperationPayload({
|
||||
...defaultOperationFormValues,
|
||||
restStaticHeadersText: JSON.stringify(
|
||||
{
|
||||
"x-app-source": "crank",
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
executionHeadersText: JSON.stringify(
|
||||
{
|
||||
"x-trace-id": "trace-123",
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
});
|
||||
|
||||
expect(payload.protocol).toBe("rest");
|
||||
expect(payload.target.kind).toBe("rest");
|
||||
expect(payload.target.method).toBe("POST");
|
||||
expect(payload.target.static_headers).toEqual({
|
||||
"x-app-source": "crank",
|
||||
});
|
||||
expect(payload.execution_config.headers).toEqual({
|
||||
"x-trace-id": "trace-123",
|
||||
});
|
||||
expect(payload.input_mapping).toEqual({
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.body.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
});
|
||||
});
|
||||
|
||||
it("creates a GraphQL operation payload from form values", () => {
|
||||
const payload = buildOperationPayload({
|
||||
...defaultOperationFormValues,
|
||||
protocol: "graphql",
|
||||
name: "crm_create_lead_graphql",
|
||||
displayName: "Create Lead (GraphQL)",
|
||||
toolTitle: "Create CRM lead through GraphQL",
|
||||
inputMappingText: JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.variables.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
outputMappingText: JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.response.body.data.createLead.id",
|
||||
target: "$.output.id",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
});
|
||||
|
||||
expect(payload.protocol).toBe("graphql");
|
||||
expect(payload.target.kind).toBe("graphql");
|
||||
expect(payload.target.operation_type).toBe("mutation");
|
||||
expect(payload.target.response_path).toBe("$.response.body.data.createLead");
|
||||
});
|
||||
|
||||
it("creates a gRPC operation payload from form values", () => {
|
||||
const payload = buildOperationPayload({
|
||||
...defaultOperationFormValues,
|
||||
protocol: "grpc",
|
||||
name: "crm_create_lead_grpc",
|
||||
displayName: "Create Lead (gRPC)",
|
||||
toolTitle: "Create CRM lead through gRPC",
|
||||
grpcDescriptorSetB64: "ZGVzY3JpcHRvcg==",
|
||||
inputMappingText: JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.grpc.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
outputMappingText: JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.response.body.id",
|
||||
target: "$.output.id",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
),
|
||||
});
|
||||
|
||||
expect(payload.protocol).toBe("grpc");
|
||||
expect(payload.target.kind).toBe("grpc");
|
||||
expect(payload.target.descriptor_ref).toBe("desc_lead_service");
|
||||
expect(payload.target.descriptor_set_b64).toBe("ZGVzY3JpcHRvcg==");
|
||||
});
|
||||
|
||||
it("throws when JSON fields are invalid", () => {
|
||||
expect(() =>
|
||||
buildOperationPayload({
|
||||
...defaultOperationFormValues,
|
||||
inputSchemaText: "{invalid",
|
||||
}),
|
||||
).toThrow(/Input schema contains invalid JSON/);
|
||||
});
|
||||
|
||||
it("throws when header values are not string maps", () => {
|
||||
expect(() =>
|
||||
buildOperationPayload({
|
||||
...defaultOperationFormValues,
|
||||
executionHeadersText: JSON.stringify({ "x-trace-id": 42 }, null, 2),
|
||||
}),
|
||||
).toThrow(/Execution headers.x-trace-id must be a string value/);
|
||||
});
|
||||
});
|
||||
@@ -1,430 +0,0 @@
|
||||
import { z } from "zod";
|
||||
|
||||
import { safeParseJson } from "../../shared/lib/json";
|
||||
|
||||
const jsonTextSchema = z.string().min(2, "JSON payload is required");
|
||||
|
||||
export const operationFormSchema = z
|
||||
.object({
|
||||
protocol: z.enum(["rest", "graphql", "grpc"]),
|
||||
name: z
|
||||
.string()
|
||||
.min(3, "Name is too short")
|
||||
.regex(/^[a-z0-9_]+$/, "Use lowercase snake_case"),
|
||||
displayName: z.string().min(3, "Display name is too short"),
|
||||
toolTitle: z.string().min(3, "Tool title is too short"),
|
||||
toolDescription: z.string().min(8, "Tool description is too short"),
|
||||
restBaseUrl: z.string(),
|
||||
restMethod: z.enum(["GET", "POST", "PUT", "PATCH", "DELETE"]),
|
||||
restPathTemplate: z.string(),
|
||||
restStaticHeadersText: jsonTextSchema,
|
||||
graphqlEndpoint: z.string(),
|
||||
graphqlOperationType: z.enum(["query", "mutation"]),
|
||||
graphqlOperationName: z.string(),
|
||||
graphqlQueryTemplate: z.string(),
|
||||
graphqlResponsePath: z.string(),
|
||||
grpcServerAddr: z.string(),
|
||||
grpcPackage: z.string(),
|
||||
grpcService: z.string(),
|
||||
grpcMethod: z.string(),
|
||||
grpcDescriptorRef: z.string(),
|
||||
grpcDescriptorSetB64: z.string(),
|
||||
inputSchemaText: jsonTextSchema,
|
||||
outputSchemaText: jsonTextSchema,
|
||||
inputMappingText: jsonTextSchema,
|
||||
outputMappingText: jsonTextSchema,
|
||||
executionHeadersText: jsonTextSchema,
|
||||
executionConfigText: jsonTextSchema,
|
||||
})
|
||||
.superRefine((values, context) => {
|
||||
if (values.protocol === "rest") {
|
||||
if (!z.string().url().safeParse(values.restBaseUrl).success) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["restBaseUrl"],
|
||||
message: "Base URL must be valid",
|
||||
});
|
||||
}
|
||||
|
||||
if (values.restPathTemplate.trim().length === 0) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["restPathTemplate"],
|
||||
message: "Path is required",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (values.protocol === "graphql") {
|
||||
if (!z.string().url().safeParse(values.graphqlEndpoint).success) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["graphqlEndpoint"],
|
||||
message: "Endpoint must be valid",
|
||||
});
|
||||
}
|
||||
|
||||
if (values.graphqlOperationName.trim().length < 2) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["graphqlOperationName"],
|
||||
message: "Operation name is required",
|
||||
});
|
||||
}
|
||||
|
||||
if (values.graphqlQueryTemplate.trim().length < 8) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["graphqlQueryTemplate"],
|
||||
message: "Query template is too short",
|
||||
});
|
||||
}
|
||||
|
||||
if (values.graphqlResponsePath.trim().length < 4) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: ["graphqlResponsePath"],
|
||||
message: "Response path is required",
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (values.protocol === "grpc") {
|
||||
const requiredFields: Array<[keyof typeof values, string]> = [
|
||||
["grpcServerAddr", "Server address is required"],
|
||||
["grpcPackage", "Package is required"],
|
||||
["grpcService", "Service is required"],
|
||||
["grpcMethod", "Method is required"],
|
||||
["grpcDescriptorRef", "Descriptor reference is required"],
|
||||
["grpcDescriptorSetB64", "Descriptor set base64 is required"],
|
||||
];
|
||||
|
||||
for (const [fieldName, message] of requiredFields) {
|
||||
if (values[fieldName].trim().length === 0) {
|
||||
context.addIssue({
|
||||
code: "custom",
|
||||
path: [fieldName],
|
||||
message,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
export type OperationFormValues = z.infer<typeof operationFormSchema>;
|
||||
|
||||
function parseStringMap(raw: string, fieldName: string) {
|
||||
const value = safeParseJson<Record<string, unknown>>(raw, fieldName);
|
||||
|
||||
if (value === null || Array.isArray(value) || typeof value !== "object") {
|
||||
throw new Error(`${fieldName} must be a JSON object`);
|
||||
}
|
||||
|
||||
for (const [key, entry] of Object.entries(value)) {
|
||||
if (typeof entry !== "string") {
|
||||
throw new Error(`${fieldName}.${key} must be a string value`);
|
||||
}
|
||||
}
|
||||
|
||||
return value as Record<string, string>;
|
||||
}
|
||||
|
||||
function defaultInputSchemaText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
type: "object",
|
||||
required: true,
|
||||
nullable: false,
|
||||
fields: {
|
||||
email: {
|
||||
type: "string",
|
||||
required: true,
|
||||
nullable: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultOutputSchemaText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
type: "object",
|
||||
required: true,
|
||||
nullable: false,
|
||||
fields: {
|
||||
id: {
|
||||
type: "string",
|
||||
required: true,
|
||||
nullable: false,
|
||||
},
|
||||
},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultRestInputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.body.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultRestOutputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.response.body.id",
|
||||
target: "$.output.id",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultGraphqlInputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.variables.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultGraphqlOutputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.response.body.data.createLead.id",
|
||||
target: "$.output.id",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultGrpcInputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.mcp.email",
|
||||
target: "$.request.grpc.email",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultGrpcOutputMappingText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
rules: [
|
||||
{
|
||||
source: "$.response.body.id",
|
||||
target: "$.output.id",
|
||||
required: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
function defaultExecutionConfigText() {
|
||||
return JSON.stringify(
|
||||
{
|
||||
timeout_ms: 10000,
|
||||
headers: {},
|
||||
},
|
||||
null,
|
||||
2,
|
||||
);
|
||||
}
|
||||
|
||||
export const defaultOperationFormValues: OperationFormValues = {
|
||||
protocol: "rest",
|
||||
name: "crm_create_lead",
|
||||
displayName: "Create Lead",
|
||||
toolTitle: "Create CRM lead",
|
||||
toolDescription: "Creates a CRM lead from MCP input fields.",
|
||||
restBaseUrl: "https://api.example.com",
|
||||
restMethod: "POST",
|
||||
restPathTemplate: "/v1/leads",
|
||||
restStaticHeadersText: JSON.stringify({}, null, 2),
|
||||
graphqlEndpoint: "https://api.example.com/graphql",
|
||||
graphqlOperationType: "mutation",
|
||||
graphqlOperationName: "CreateLead",
|
||||
graphqlQueryTemplate: `mutation CreateLead($email: String!) {
|
||||
createLead(email: $email) {
|
||||
id
|
||||
status
|
||||
}
|
||||
}`,
|
||||
graphqlResponsePath: "$.response.body.data.createLead",
|
||||
grpcServerAddr: "https://grpc.example.com",
|
||||
grpcPackage: "crm.v1",
|
||||
grpcService: "LeadService",
|
||||
grpcMethod: "CreateLead",
|
||||
grpcDescriptorRef: "desc_lead_service",
|
||||
grpcDescriptorSetB64: "",
|
||||
inputSchemaText: defaultInputSchemaText(),
|
||||
outputSchemaText: defaultOutputSchemaText(),
|
||||
inputMappingText: defaultRestInputMappingText(),
|
||||
outputMappingText: defaultRestOutputMappingText(),
|
||||
executionHeadersText: JSON.stringify({}, null, 2),
|
||||
executionConfigText: defaultExecutionConfigText(),
|
||||
};
|
||||
|
||||
export function getProtocolPreset(
|
||||
protocol: OperationFormValues["protocol"],
|
||||
): Partial<OperationFormValues> {
|
||||
switch (protocol) {
|
||||
case "rest":
|
||||
return {
|
||||
name: "crm_create_lead",
|
||||
displayName: "Create Lead",
|
||||
toolTitle: "Create CRM lead",
|
||||
toolDescription: "Creates a CRM lead from MCP input fields.",
|
||||
inputMappingText: defaultRestInputMappingText(),
|
||||
outputMappingText: defaultRestOutputMappingText(),
|
||||
restStaticHeadersText: JSON.stringify({}, null, 2),
|
||||
executionHeadersText: JSON.stringify({}, null, 2),
|
||||
};
|
||||
case "graphql":
|
||||
return {
|
||||
name: "crm_create_lead_graphql",
|
||||
displayName: "Create Lead (GraphQL)",
|
||||
toolTitle: "Create CRM lead through GraphQL",
|
||||
toolDescription:
|
||||
"Executes a fixed GraphQL mutation and returns the selected lead payload.",
|
||||
inputMappingText: defaultGraphqlInputMappingText(),
|
||||
outputMappingText: defaultGraphqlOutputMappingText(),
|
||||
executionHeadersText: JSON.stringify({}, null, 2),
|
||||
};
|
||||
case "grpc":
|
||||
return {
|
||||
name: "crm_create_lead_grpc",
|
||||
displayName: "Create Lead (gRPC)",
|
||||
toolTitle: "Create CRM lead through gRPC",
|
||||
toolDescription:
|
||||
"Executes a unary gRPC method using a descriptor-driven request contract.",
|
||||
inputMappingText: defaultGrpcInputMappingText(),
|
||||
outputMappingText: defaultGrpcOutputMappingText(),
|
||||
executionHeadersText: JSON.stringify({}, null, 2),
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
export function buildOperationPayload(rawValues: OperationFormValues) {
|
||||
const values = operationFormSchema.parse(rawValues);
|
||||
const inputSchema = safeParseJson(values.inputSchemaText, "Input schema");
|
||||
const outputSchema = safeParseJson(values.outputSchemaText, "Output schema");
|
||||
const inputMapping = safeParseJson(values.inputMappingText, "Input mapping");
|
||||
const outputMapping = safeParseJson(values.outputMappingText, "Output mapping");
|
||||
const executionHeaders = parseStringMap(
|
||||
values.executionHeadersText,
|
||||
"Execution headers",
|
||||
);
|
||||
const executionConfig = safeParseJson<Record<string, unknown>>(
|
||||
values.executionConfigText,
|
||||
"Execution config",
|
||||
);
|
||||
const normalizedExecutionConfig = {
|
||||
...executionConfig,
|
||||
headers: executionHeaders,
|
||||
};
|
||||
|
||||
const basePayload = {
|
||||
name: values.name,
|
||||
display_name: values.displayName,
|
||||
input_schema: inputSchema,
|
||||
output_schema: outputSchema,
|
||||
input_mapping: inputMapping,
|
||||
output_mapping: outputMapping,
|
||||
execution_config: normalizedExecutionConfig,
|
||||
tool_description: {
|
||||
title: values.toolTitle,
|
||||
description: values.toolDescription,
|
||||
tags: [values.protocol],
|
||||
examples: [],
|
||||
},
|
||||
};
|
||||
|
||||
switch (values.protocol) {
|
||||
case "rest":
|
||||
return {
|
||||
...basePayload,
|
||||
protocol: "rest",
|
||||
target: {
|
||||
kind: "rest",
|
||||
base_url: values.restBaseUrl,
|
||||
method: values.restMethod,
|
||||
path_template: values.restPathTemplate,
|
||||
static_headers: parseStringMap(
|
||||
values.restStaticHeadersText,
|
||||
"REST static headers",
|
||||
),
|
||||
},
|
||||
};
|
||||
case "graphql":
|
||||
return {
|
||||
...basePayload,
|
||||
protocol: "graphql",
|
||||
target: {
|
||||
kind: "graphql",
|
||||
endpoint: values.graphqlEndpoint,
|
||||
operation_type: values.graphqlOperationType,
|
||||
operation_name: values.graphqlOperationName,
|
||||
query_template: values.graphqlQueryTemplate,
|
||||
response_path: values.graphqlResponsePath,
|
||||
},
|
||||
};
|
||||
case "grpc":
|
||||
return {
|
||||
...basePayload,
|
||||
protocol: "grpc",
|
||||
target: {
|
||||
kind: "grpc",
|
||||
server_addr: values.grpcServerAddr,
|
||||
package: values.grpcPackage,
|
||||
service: values.grpcService,
|
||||
method: values.grpcMethod,
|
||||
descriptor_ref: values.grpcDescriptorRef,
|
||||
descriptor_set_b64: values.grpcDescriptorSetB64,
|
||||
},
|
||||
};
|
||||
}
|
||||
}
|
||||
@@ -1,540 +0,0 @@
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useEffect, useMemo, useRef } from "react";
|
||||
import { useForm } from "react-hook-form";
|
||||
import { createPortal } from "react-dom";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
import { createOperation } from "../../entities/operation/api";
|
||||
import { ApiError } from "../../shared/api/client";
|
||||
import {
|
||||
buildOperationPayload,
|
||||
defaultOperationFormValues,
|
||||
getProtocolPreset,
|
||||
operationFormSchema,
|
||||
type OperationFormValues,
|
||||
} from "./model";
|
||||
|
||||
type OperationFieldName = keyof OperationFormValues;
|
||||
|
||||
type FieldConfig = {
|
||||
name: OperationFieldName;
|
||||
label: string;
|
||||
description?: string;
|
||||
wide?: boolean;
|
||||
rows?: number;
|
||||
code?: boolean;
|
||||
};
|
||||
|
||||
const protocolCards = [
|
||||
{
|
||||
protocol: "rest",
|
||||
title: "REST / HTTP",
|
||||
description:
|
||||
"One HTTP method and one path template, with body, query and header mapping.",
|
||||
},
|
||||
{
|
||||
protocol: "graphql",
|
||||
title: "GraphQL",
|
||||
description:
|
||||
"One fixed query or mutation with stable variables and a typed response shape.",
|
||||
},
|
||||
{
|
||||
protocol: "grpc",
|
||||
title: "gRPC (unary)",
|
||||
description:
|
||||
"One unary method backed by a descriptor-set contract and typed request payload.",
|
||||
},
|
||||
] as const satisfies Array<{
|
||||
protocol: OperationFormValues["protocol"];
|
||||
title: string;
|
||||
description: string;
|
||||
}>;
|
||||
|
||||
const commonFields: FieldConfig[] = [
|
||||
{ name: "name", label: "Tool name" },
|
||||
{ name: "displayName", label: "Display name" },
|
||||
{ name: "toolTitle", label: "Tool title" },
|
||||
{
|
||||
name: "toolDescription",
|
||||
label: "Description",
|
||||
description: "LLM-facing description for the tool runtime contract.",
|
||||
rows: 4,
|
||||
wide: true,
|
||||
},
|
||||
];
|
||||
|
||||
const restFields: FieldConfig[] = [
|
||||
{ name: "restBaseUrl", label: "Base URL", wide: true },
|
||||
{ name: "restPathTemplate", label: "Path template" },
|
||||
{ name: "restMethod", label: "HTTP method" },
|
||||
];
|
||||
|
||||
const graphqlFields: FieldConfig[] = [
|
||||
{ name: "graphqlEndpoint", label: "GraphQL endpoint", wide: true },
|
||||
{ name: "graphqlOperationType", label: "Operation type" },
|
||||
{ name: "graphqlOperationName", label: "Operation name" },
|
||||
{
|
||||
name: "graphqlResponsePath",
|
||||
label: "Response path",
|
||||
description: "Stable extraction root inside the response payload.",
|
||||
wide: true,
|
||||
},
|
||||
{
|
||||
name: "graphqlQueryTemplate",
|
||||
label: "Query template",
|
||||
description: "Fixed GraphQL document exposed as one MCP tool.",
|
||||
rows: 12,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
];
|
||||
|
||||
const grpcFields: FieldConfig[] = [
|
||||
{ name: "grpcServerAddr", label: "Server address", wide: true },
|
||||
{ name: "grpcPackage", label: "Package" },
|
||||
{ name: "grpcService", label: "Service" },
|
||||
{ name: "grpcMethod", label: "Method" },
|
||||
{
|
||||
name: "grpcDescriptorRef",
|
||||
label: "Descriptor reference",
|
||||
description: "Stable descriptor identifier stored with the operation.",
|
||||
wide: true,
|
||||
},
|
||||
{
|
||||
name: "grpcDescriptorSetB64",
|
||||
label: "Descriptor set base64",
|
||||
description: "Compiled descriptor-set contents used for runtime invocation.",
|
||||
rows: 10,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
];
|
||||
|
||||
const schemaFields: FieldConfig[] = [
|
||||
{
|
||||
name: "inputSchemaText",
|
||||
label: "Input schema",
|
||||
rows: 14,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
{
|
||||
name: "outputSchemaText",
|
||||
label: "Output schema",
|
||||
rows: 14,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
];
|
||||
|
||||
const mappingFields: FieldConfig[] = [
|
||||
{
|
||||
name: "inputMappingText",
|
||||
label: "Input → Request mapping",
|
||||
rows: 12,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
{
|
||||
name: "outputMappingText",
|
||||
label: "Response → Output mapping",
|
||||
rows: 12,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
];
|
||||
|
||||
const headerFields: FieldConfig[] = [
|
||||
{
|
||||
name: "executionHeadersText",
|
||||
label: "Execution headers",
|
||||
description: "Shared transport headers for REST, GraphQL and gRPC requests.",
|
||||
rows: 8,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
{
|
||||
name: "executionConfigText",
|
||||
label: "Execution config",
|
||||
description: "Timeouts, auth profile reference and protocol options.",
|
||||
rows: 10,
|
||||
wide: true,
|
||||
code: true,
|
||||
},
|
||||
];
|
||||
|
||||
function protocolSummary(protocol: OperationFormValues["protocol"]) {
|
||||
switch (protocol) {
|
||||
case "rest":
|
||||
return "One tool maps to one HTTP method and one path template.";
|
||||
case "graphql":
|
||||
return "One tool maps to one fixed GraphQL query or mutation.";
|
||||
case "grpc":
|
||||
return "One tool maps to one unary gRPC method backed by a descriptor set.";
|
||||
}
|
||||
}
|
||||
|
||||
function descriptorRefFromFileName(fileName: string) {
|
||||
const normalized = fileName
|
||||
.replace(/\.[^/.]+$/, "")
|
||||
.replace(/[^a-zA-Z0-9]+/g, "_")
|
||||
.replace(/^_+|_+$/g, "")
|
||||
.toLowerCase();
|
||||
|
||||
return normalized.length === 0 ? "desc_uploaded" : `desc_${normalized}`;
|
||||
}
|
||||
|
||||
function bytesToBase64(buffer: ArrayBuffer) {
|
||||
const bytes = new Uint8Array(buffer);
|
||||
let binary = "";
|
||||
|
||||
for (let index = 0; index < bytes.length; index += 0x8000) {
|
||||
binary += String.fromCharCode(...bytes.subarray(index, index + 0x8000));
|
||||
}
|
||||
|
||||
return window.btoa(binary);
|
||||
}
|
||||
|
||||
type OperationFormProps = {
|
||||
actionBarContainerId?: string;
|
||||
};
|
||||
|
||||
export function OperationForm({ actionBarContainerId }: OperationFormProps) {
|
||||
const navigate = useNavigate();
|
||||
const form = useForm<OperationFormValues>({
|
||||
defaultValues: defaultOperationFormValues,
|
||||
resolver: zodResolver(operationFormSchema),
|
||||
});
|
||||
const activeProtocol = form.watch("protocol");
|
||||
const previousProtocolRef = useRef(activeProtocol);
|
||||
|
||||
useEffect(() => {
|
||||
if (previousProtocolRef.current === activeProtocol) {
|
||||
return;
|
||||
}
|
||||
|
||||
const preset = getProtocolPreset(activeProtocol);
|
||||
for (const [fieldName, value] of Object.entries(preset)) {
|
||||
form.setValue(fieldName as OperationFieldName, value);
|
||||
}
|
||||
|
||||
previousProtocolRef.current = activeProtocol;
|
||||
}, [activeProtocol, form]);
|
||||
|
||||
const creationMutation = useMutation({
|
||||
mutationFn: async (values: OperationFormValues) =>
|
||||
createOperation(buildOperationPayload(values)),
|
||||
onSuccess: (data) => {
|
||||
navigate(`/operations/${data.operation_id}`);
|
||||
},
|
||||
});
|
||||
|
||||
const protocolFields = useMemo(() => {
|
||||
switch (activeProtocol) {
|
||||
case "rest":
|
||||
return restFields;
|
||||
case "graphql":
|
||||
return graphqlFields;
|
||||
case "grpc":
|
||||
return grpcFields;
|
||||
}
|
||||
}, [activeProtocol]);
|
||||
|
||||
const actionBarContainer =
|
||||
actionBarContainerId === undefined ? null : document.getElementById(actionBarContainerId);
|
||||
|
||||
async function handleDescriptorFileChange(file: File | undefined) {
|
||||
if (file === undefined) {
|
||||
return;
|
||||
}
|
||||
|
||||
const encoded = bytesToBase64(await file.arrayBuffer());
|
||||
form.setValue("grpcDescriptorSetB64", encoded, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
});
|
||||
|
||||
if (form.getValues("grpcDescriptorRef").trim().length === 0) {
|
||||
form.setValue("grpcDescriptorRef", descriptorRefFromFileName(file.name), {
|
||||
shouldDirty: true,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
function fieldError(name: OperationFieldName) {
|
||||
const error = form.formState.errors[name];
|
||||
return typeof error?.message === "string" ? error.message : undefined;
|
||||
}
|
||||
|
||||
function renderSelect(field: FieldConfig) {
|
||||
const message = fieldError(field.name);
|
||||
|
||||
return (
|
||||
<label
|
||||
className={field.wide ? "field-block field-block-wide" : "field-block"}
|
||||
key={field.name}
|
||||
>
|
||||
<span>{field.label}</span>
|
||||
{field.description ? <small className="field-hint">{field.description}</small> : null}
|
||||
<select className="select" {...form.register(field.name)}>
|
||||
{field.name === "restMethod" ? (
|
||||
<>
|
||||
<option value="GET">GET</option>
|
||||
<option value="POST">POST</option>
|
||||
<option value="PUT">PUT</option>
|
||||
<option value="PATCH">PATCH</option>
|
||||
<option value="DELETE">DELETE</option>
|
||||
</>
|
||||
) : null}
|
||||
{field.name === "graphqlOperationType" ? (
|
||||
<>
|
||||
<option value="query">query</option>
|
||||
<option value="mutation">mutation</option>
|
||||
</>
|
||||
) : null}
|
||||
</select>
|
||||
{message ? <small className="field-error">{message}</small> : null}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
function renderField(field: FieldConfig) {
|
||||
if (field.name === "restMethod" || field.name === "graphqlOperationType") {
|
||||
return renderSelect(field);
|
||||
}
|
||||
|
||||
const message = fieldError(field.name);
|
||||
const blockClassName = field.wide ? "field-block field-block-wide" : "field-block";
|
||||
|
||||
if (field.rows !== undefined) {
|
||||
return (
|
||||
<label className={blockClassName} key={field.name}>
|
||||
<span>{field.label}</span>
|
||||
{field.description ? <small className="field-hint">{field.description}</small> : null}
|
||||
{field.code ? (
|
||||
<div className="code-editor-shell">
|
||||
<div className="code-editor-toolbar">
|
||||
<div className="code-editor-dots">
|
||||
<span />
|
||||
<span />
|
||||
<span />
|
||||
</div>
|
||||
<small>json / contract</small>
|
||||
</div>
|
||||
<textarea
|
||||
className="textarea textarea-code"
|
||||
rows={field.rows}
|
||||
{...form.register(field.name)}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<textarea rows={field.rows} {...form.register(field.name)} />
|
||||
)}
|
||||
{message ? <small className="field-error">{message}</small> : null}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<label className={blockClassName} key={field.name}>
|
||||
<span>{field.label}</span>
|
||||
{field.description ? <small className="field-hint">{field.description}</small> : null}
|
||||
<input type="text" className="input" {...form.register(field.name)} />
|
||||
{message ? <small className="field-error">{message}</small> : null}
|
||||
</label>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<form
|
||||
className="builder-stack"
|
||||
id="operation-create-form"
|
||||
onSubmit={form.handleSubmit((values) => {
|
||||
creationMutation.mutate(values);
|
||||
})}
|
||||
>
|
||||
<div className="builder-content">
|
||||
<section className="builder-card">
|
||||
<header className="builder-card-header">
|
||||
<div>
|
||||
<h2>1 — Protocol</h2>
|
||||
<p>One tool maps to exactly one upstream method.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div className="builder-card-body">
|
||||
<div className="proto-grid">
|
||||
{protocolCards.map((card) => {
|
||||
const isSelected = activeProtocol === card.protocol;
|
||||
const selectedClassName = isSelected
|
||||
? `proto-card selected-${card.protocol === "graphql" ? "gql" : card.protocol}`
|
||||
: "proto-card";
|
||||
|
||||
return (
|
||||
<button
|
||||
className={selectedClassName}
|
||||
key={card.protocol}
|
||||
onClick={() => {
|
||||
form.setValue("protocol", card.protocol, {
|
||||
shouldDirty: true,
|
||||
shouldValidate: true,
|
||||
});
|
||||
}}
|
||||
type="button"
|
||||
>
|
||||
<div className="proto-card-top">
|
||||
<div className={`proto-icon pi-${card.protocol === "graphql" ? "gql" : card.protocol}`}>
|
||||
{card.protocol === "graphql" ? "GQL" : card.protocol.toUpperCase()}
|
||||
</div>
|
||||
<div className="proto-radio" />
|
||||
</div>
|
||||
<div className="proto-card-copy">
|
||||
<h3>{card.title}</h3>
|
||||
<p>{card.description}</p>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="builder-card">
|
||||
<header className="builder-card-header">
|
||||
<div>
|
||||
<h2>2 — Tool identity</h2>
|
||||
<p>Name and description visible to the LLM at runtime.</p>
|
||||
</div>
|
||||
<span className="status-pill status-draft">draft</span>
|
||||
</header>
|
||||
<div className="builder-card-body">
|
||||
<div className="form-grid">{commonFields.map(renderField)}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="builder-card">
|
||||
<header className="builder-card-header">
|
||||
<div>
|
||||
<h2>3 — Upstream target</h2>
|
||||
<p>Protocol-specific target configuration exposed through one MCP tool.</p>
|
||||
</div>
|
||||
<span className={`protocol-pill protocol-${activeProtocol}`}>{activeProtocol}</span>
|
||||
</header>
|
||||
<div className="builder-card-body">
|
||||
<div className="form-grid">
|
||||
{protocolFields.map(renderField)}
|
||||
{activeProtocol === "grpc" ? (
|
||||
<label className="field-block field-block-wide">
|
||||
<span>Descriptor set file</span>
|
||||
<small className="field-hint">
|
||||
Upload a compiled descriptor-set file to autofill the base64 payload.
|
||||
</small>
|
||||
<input
|
||||
className="input"
|
||||
type="file"
|
||||
accept=".bin,.pb,.desc"
|
||||
onChange={(event) => {
|
||||
void handleDescriptorFileChange(event.target.files?.[0]);
|
||||
}}
|
||||
/>
|
||||
</label>
|
||||
) : null}
|
||||
{activeProtocol === "rest"
|
||||
? renderField({
|
||||
name: "restStaticHeadersText",
|
||||
label: "Static headers",
|
||||
description:
|
||||
"Always sent for this REST target before dynamic request headers are merged.",
|
||||
rows: 8,
|
||||
wide: true,
|
||||
code: true,
|
||||
})
|
||||
: null}
|
||||
</div>
|
||||
|
||||
<div className="info-banner">
|
||||
<div className="info-dot" />
|
||||
<p>
|
||||
Headers and auth stay separate from path and payload mapping. Configure shared
|
||||
transport headers in the execution section below.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="builder-card">
|
||||
<header className="builder-card-header">
|
||||
<div>
|
||||
<h2>4 — Contract schemas</h2>
|
||||
<p>Protocol-agnostic schemas for MCP input and output payloads.</p>
|
||||
</div>
|
||||
</header>
|
||||
<div className="builder-card-body">
|
||||
<div className="form-grid">{schemaFields.map(renderField)}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="builder-card">
|
||||
<header className="builder-card-header">
|
||||
<div>
|
||||
<h2>5 — Mapping and execution</h2>
|
||||
<p>
|
||||
Translate MCP input to request fields, then map upstream output back to tool
|
||||
output.
|
||||
</p>
|
||||
</div>
|
||||
</header>
|
||||
<div className="builder-card-body">
|
||||
<div className="section-divider">
|
||||
<span className="section-divider-label">Input → Request</span>
|
||||
<div className="section-divider-line" />
|
||||
</div>
|
||||
<div className="form-grid">{mappingFields.slice(0, 1).map(renderField)}</div>
|
||||
|
||||
<div className="section-divider">
|
||||
<span className="section-divider-label">Response → Output</span>
|
||||
<div className="section-divider-line" />
|
||||
</div>
|
||||
<div className="form-grid">{mappingFields.slice(1).map(renderField)}</div>
|
||||
|
||||
<div className="section-divider">
|
||||
<span className="section-divider-label">Headers And Runtime</span>
|
||||
<div className="section-divider-line" />
|
||||
</div>
|
||||
<div className="form-grid">{headerFields.map(renderField)}</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{creationMutation.error ? (
|
||||
<div className="feedback-card feedback-error">
|
||||
{creationMutation.error instanceof ApiError
|
||||
? creationMutation.error.message
|
||||
: "Failed to create operation"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</form>
|
||||
|
||||
{actionBarContainer
|
||||
? createPortal(
|
||||
<div className="sticky-action-bar">
|
||||
<div className="sticky-action-copy">
|
||||
<span className="status-pill status-testing">ready to publish later</span>
|
||||
<p>{protocolSummary(activeProtocol)}</p>
|
||||
</div>
|
||||
<button
|
||||
className="button-primary button-primary-strong"
|
||||
type="submit"
|
||||
form="operation-create-form"
|
||||
disabled={creationMutation.isPending}
|
||||
>
|
||||
{creationMutation.isPending ? "Creating..." : "Create operation"}
|
||||
</button>
|
||||
</div>,
|
||||
actionBarContainer,
|
||||
)
|
||||
: null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -1,53 +0,0 @@
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
|
||||
import { publishOperation } from "../../entities/operation/api";
|
||||
import { ApiError } from "../../shared/api/client";
|
||||
|
||||
type PublishOperationPanelProps = {
|
||||
operationId: string;
|
||||
version: number;
|
||||
};
|
||||
|
||||
export function PublishOperationPanel({
|
||||
operationId,
|
||||
version,
|
||||
}: PublishOperationPanelProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const publishMutation = useMutation({
|
||||
mutationFn: async () => publishOperation(operationId, version),
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({ queryKey: ["operations"] });
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["operation-summary", operationId],
|
||||
});
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["operation-version", operationId, version],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="stack-layout">
|
||||
<button
|
||||
className="button-primary"
|
||||
type="button"
|
||||
onClick={() => publishMutation.mutate()}
|
||||
>
|
||||
{publishMutation.isPending ? "Publishing..." : "Publish operation"}
|
||||
</button>
|
||||
{publishMutation.data ? (
|
||||
<div className="feedback-card feedback-success">
|
||||
Published version {String(publishMutation.data.published_version)} at{" "}
|
||||
{String(publishMutation.data.published_at)}
|
||||
</div>
|
||||
) : null}
|
||||
{publishMutation.error ? (
|
||||
<div className="feedback-card feedback-error">
|
||||
{publishMutation.error instanceof ApiError
|
||||
? publishMutation.error.message
|
||||
: "Publish failed"}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,104 +0,0 @@
|
||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
import {
|
||||
uploadInputJsonSample,
|
||||
uploadOutputJsonSample,
|
||||
} from "../../entities/operation/api";
|
||||
import { ApiError } from "../../shared/api/client";
|
||||
import { safeParseJson } from "../../shared/lib/json";
|
||||
|
||||
type SampleUploadPanelProps = {
|
||||
operationId: string;
|
||||
};
|
||||
|
||||
export function SampleUploadPanel({ operationId }: SampleUploadPanelProps) {
|
||||
const queryClient = useQueryClient();
|
||||
const [inputSampleText, setInputSampleText] = useState(
|
||||
JSON.stringify({ email: "user@example.com", name: "Ada" }, null, 2),
|
||||
);
|
||||
const [outputSampleText, setOutputSampleText] = useState(
|
||||
JSON.stringify({ id: "lead_123", status: "created" }, null, 2),
|
||||
);
|
||||
|
||||
const createUploadMutation = (
|
||||
mutationKey: "input" | "output",
|
||||
submitFn: (payload: unknown) => Promise<unknown>,
|
||||
) =>
|
||||
useMutation({
|
||||
mutationKey: ["sample-upload", operationId, mutationKey],
|
||||
mutationFn: submitFn,
|
||||
onSuccess: async () => {
|
||||
await queryClient.invalidateQueries({
|
||||
queryKey: ["operation-version", operationId],
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
const inputMutation = createUploadMutation("input", async () =>
|
||||
uploadInputJsonSample(
|
||||
operationId,
|
||||
safeParseJson(inputSampleText, "Input sample"),
|
||||
),
|
||||
);
|
||||
const outputMutation = createUploadMutation("output", async () =>
|
||||
uploadOutputJsonSample(
|
||||
operationId,
|
||||
safeParseJson(outputSampleText, "Output sample"),
|
||||
),
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="split-layout">
|
||||
<div className="stack-layout">
|
||||
<label className="field-block">
|
||||
<span>Input sample</span>
|
||||
<textarea
|
||||
rows={10}
|
||||
value={inputSampleText}
|
||||
onChange={(event) => setInputSampleText(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button-secondary"
|
||||
onClick={() => inputMutation.mutate(undefined)}
|
||||
type="button"
|
||||
>
|
||||
{inputMutation.isPending ? "Uploading..." : "Upload input sample"}
|
||||
</button>
|
||||
{inputMutation.error ? (
|
||||
<small className="field-error">
|
||||
{inputMutation.error instanceof ApiError
|
||||
? inputMutation.error.message
|
||||
: "Failed to upload input sample"}
|
||||
</small>
|
||||
) : null}
|
||||
</div>
|
||||
|
||||
<div className="stack-layout">
|
||||
<label className="field-block">
|
||||
<span>Output sample</span>
|
||||
<textarea
|
||||
rows={10}
|
||||
value={outputSampleText}
|
||||
onChange={(event) => setOutputSampleText(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button-secondary"
|
||||
onClick={() => outputMutation.mutate(undefined)}
|
||||
type="button"
|
||||
>
|
||||
{outputMutation.isPending ? "Uploading..." : "Upload output sample"}
|
||||
</button>
|
||||
{outputMutation.error ? (
|
||||
<small className="field-error">
|
||||
{outputMutation.error instanceof ApiError
|
||||
? outputMutation.error.message
|
||||
: "Failed to upload output sample"}
|
||||
</small>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import type { DraftGenerationResult, OperationRecord } from "../../entities/operation/types";
|
||||
|
||||
type SchemaViewerPanelProps = {
|
||||
operationRecord?: OperationRecord;
|
||||
draftResult?: DraftGenerationResult;
|
||||
};
|
||||
|
||||
export function SchemaViewerPanel({
|
||||
operationRecord,
|
||||
draftResult,
|
||||
}: SchemaViewerPanelProps) {
|
||||
const inputSchema = draftResult?.input_schema ?? operationRecord?.snapshot.input_schema;
|
||||
const outputSchema =
|
||||
draftResult?.output_schema ?? operationRecord?.snapshot.output_schema;
|
||||
const inputMapping =
|
||||
draftResult?.input_mapping ?? operationRecord?.snapshot.input_mapping;
|
||||
const outputMapping =
|
||||
draftResult?.output_mapping ?? operationRecord?.snapshot.output_mapping;
|
||||
|
||||
return (
|
||||
<div className="result-grid">
|
||||
<div className="result-panel">
|
||||
<h3>Input schema</h3>
|
||||
<pre>{JSON.stringify(inputSchema, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Output schema</h3>
|
||||
<pre>{JSON.stringify(outputSchema, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Input mapping</h3>
|
||||
<pre>{JSON.stringify(inputMapping, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Output mapping</h3>
|
||||
<pre>{JSON.stringify(outputMapping, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import { useMutation } from "@tanstack/react-query";
|
||||
import { useState } from "react";
|
||||
|
||||
import { runOperationTest } from "../../entities/operation/api";
|
||||
import { ApiError } from "../../shared/api/client";
|
||||
import { safeParseJson } from "../../shared/lib/json";
|
||||
|
||||
type TestRunPanelProps = {
|
||||
operationId: string;
|
||||
version: number;
|
||||
};
|
||||
|
||||
export function TestRunPanel({ operationId, version }: TestRunPanelProps) {
|
||||
const [inputText, setInputText] = useState(
|
||||
JSON.stringify({ email: "user@example.com" }, null, 2),
|
||||
);
|
||||
|
||||
const testMutation = useMutation({
|
||||
mutationFn: async () =>
|
||||
runOperationTest(
|
||||
operationId,
|
||||
version,
|
||||
safeParseJson(inputText, "Test input"),
|
||||
),
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="stack-layout">
|
||||
<label className="field-block">
|
||||
<span>Test input</span>
|
||||
<textarea
|
||||
rows={10}
|
||||
value={inputText}
|
||||
onChange={(event) => setInputText(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
<button
|
||||
className="button-primary"
|
||||
type="button"
|
||||
onClick={() => testMutation.mutate()}
|
||||
>
|
||||
{testMutation.isPending ? "Running..." : "Run test"}
|
||||
</button>
|
||||
|
||||
{testMutation.error ? (
|
||||
<div className="feedback-card feedback-error">
|
||||
{testMutation.error instanceof ApiError
|
||||
? testMutation.error.message
|
||||
: "Test run failed"}
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{testMutation.data ? (
|
||||
<div className="result-grid">
|
||||
<div className="result-panel">
|
||||
<h3>Request preview</h3>
|
||||
<pre>{JSON.stringify(testMutation.data.request_preview, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Response preview</h3>
|
||||
<pre>{JSON.stringify(testMutation.data.response_preview, null, 2)}</pre>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,14 +0,0 @@
|
||||
import React from "react";
|
||||
import ReactDOM from "react-dom/client";
|
||||
|
||||
import { AppProviders } from "./app/providers";
|
||||
import { AppRouter } from "./app/router";
|
||||
import "./styles.css";
|
||||
|
||||
ReactDOM.createRoot(document.getElementById("root")!).render(
|
||||
<React.StrictMode>
|
||||
<AppProviders>
|
||||
<AppRouter />
|
||||
</AppProviders>
|
||||
</React.StrictMode>,
|
||||
);
|
||||
@@ -1,5 +0,0 @@
|
||||
import { OperationForm } from "../../features/operation-form/operation-form";
|
||||
|
||||
export function OperationCreatePage() {
|
||||
return <OperationForm actionBarContainerId="app-layout-main" />;
|
||||
}
|
||||
@@ -1,290 +0,0 @@
|
||||
import { useMutation, useQuery } from "@tanstack/react-query";
|
||||
import { useParams } from "react-router-dom";
|
||||
|
||||
import {
|
||||
exportOperationYaml,
|
||||
generateDraft,
|
||||
getOperation,
|
||||
getOperationVersion,
|
||||
importOperationYaml,
|
||||
listAuthProfiles,
|
||||
} from "../../entities/operation/api";
|
||||
import type { OperationTarget } from "../../entities/operation/types";
|
||||
import { GrpcDescriptorPanel } from "../../features/grpc-descriptor/panel";
|
||||
import { PublishOperationPanel } from "../../features/publish-operation/panel";
|
||||
import { SampleUploadPanel } from "../../features/sample-upload/panel";
|
||||
import { SchemaViewerPanel } from "../../features/schema-viewer/panel";
|
||||
import { TestRunPanel } from "../../features/test-run/panel";
|
||||
import { PageSection } from "../../shared/ui/page-section";
|
||||
|
||||
function describeTarget(target: OperationTarget) {
|
||||
switch (target.kind) {
|
||||
case "rest":
|
||||
return [
|
||||
["Base URL", target.base_url],
|
||||
["Method", target.method],
|
||||
["Path", target.path_template],
|
||||
] as const;
|
||||
case "graphql":
|
||||
return [
|
||||
["Endpoint", target.endpoint],
|
||||
["Operation", `${target.operation_type} ${target.operation_name}`],
|
||||
["Response path", target.response_path],
|
||||
] as const;
|
||||
case "grpc":
|
||||
return [
|
||||
["Server", target.server_addr],
|
||||
["Service", `${target.package}.${target.service}/${target.method}`],
|
||||
["Descriptor ref", target.descriptor_ref],
|
||||
] as const;
|
||||
}
|
||||
}
|
||||
|
||||
function readObjectRecord(value: unknown) {
|
||||
if (value === null || typeof value !== "object" || Array.isArray(value)) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return value as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function readExecutionHeaders(value: unknown) {
|
||||
const config = readObjectRecord(value);
|
||||
const headers = config.headers;
|
||||
|
||||
if (headers === null || typeof headers !== "object" || Array.isArray(headers)) {
|
||||
return {};
|
||||
}
|
||||
|
||||
return headers as Record<string, unknown>;
|
||||
}
|
||||
|
||||
function draftSubtitle(target: OperationTarget) {
|
||||
switch (target.kind) {
|
||||
case "rest":
|
||||
return "Upload request and response JSON samples, then infer schema and mapping drafts.";
|
||||
case "graphql":
|
||||
return "Upload stable request and response samples for the fixed GraphQL operation contract.";
|
||||
case "grpc":
|
||||
return "Upload JSON samples or inspect descriptor-driven schemas before refining mappings.";
|
||||
}
|
||||
}
|
||||
|
||||
export function OperationDetailPage() {
|
||||
const { operationId = "" } = useParams();
|
||||
const summaryQuery = useQuery({
|
||||
queryKey: ["operation-summary", operationId],
|
||||
queryFn: () => getOperation(operationId),
|
||||
enabled: operationId.length > 0,
|
||||
});
|
||||
const currentVersion = summaryQuery.data?.current_draft_version ?? 0;
|
||||
const versionQuery = useQuery({
|
||||
queryKey: ["operation-version", operationId, currentVersion],
|
||||
queryFn: () => getOperationVersion(operationId, currentVersion),
|
||||
enabled: operationId.length > 0 && currentVersion > 0,
|
||||
});
|
||||
const authProfilesQuery = useQuery({
|
||||
queryKey: ["auth-profiles"],
|
||||
queryFn: listAuthProfiles,
|
||||
});
|
||||
const draftMutation = useMutation({
|
||||
mutationFn: async () => generateDraft(operationId),
|
||||
});
|
||||
const exportMutation = useMutation({
|
||||
mutationFn: async () => exportOperationYaml(operationId, currentVersion),
|
||||
});
|
||||
const importMutation = useMutation({
|
||||
mutationFn: async (yamlText: string) => importOperationYaml(yamlText, "upsert"),
|
||||
});
|
||||
|
||||
const snapshot = versionQuery.data?.snapshot;
|
||||
const exportedYaml = exportMutation.data;
|
||||
const targetRows = snapshot ? describeTarget(snapshot.target) : [];
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<PageSection
|
||||
title={summaryQuery.data?.display_name ?? "Operation"}
|
||||
subtitle={
|
||||
summaryQuery.data
|
||||
? `${summaryQuery.data.name} · ${summaryQuery.data.protocol} · draft v${currentVersion}`
|
||||
: "Loading operation metadata..."
|
||||
}
|
||||
>
|
||||
{summaryQuery.data ? (
|
||||
<div className="detail-hero">
|
||||
<div className="summary-grid">
|
||||
<div className="summary-card">
|
||||
<span>Status</span>
|
||||
<strong>{summaryQuery.data.status}</strong>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<span>Published version</span>
|
||||
<strong>{summaryQuery.data.latest_published_version ?? "none"}</strong>
|
||||
</div>
|
||||
<div className="summary-card">
|
||||
<span>Updated</span>
|
||||
<strong>{new Date(summaryQuery.data.updated_at).toLocaleString()}</strong>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{snapshot ? (
|
||||
<div className="target-grid">
|
||||
{targetRows.map(([label, value]) => (
|
||||
<div className="target-card" key={label}>
|
||||
<span>{label}</span>
|
||||
<strong>{value}</strong>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
) : null}
|
||||
</PageSection>
|
||||
|
||||
{snapshot ? (
|
||||
<PageSection
|
||||
title="Target Contract"
|
||||
subtitle="The runtime transport details below are the fixed contract exposed as one MCP tool."
|
||||
>
|
||||
<div className="metadata-grid">
|
||||
<div className="result-panel">
|
||||
<h3>Tool description</h3>
|
||||
<dl className="key-value-list">
|
||||
<div>
|
||||
<dt>Title</dt>
|
||||
<dd>{snapshot.tool_description.title}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Tags</dt>
|
||||
<dd>{snapshot.tool_description.tags.join(", ") || "none"}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<p className="body-copy">{snapshot.tool_description.description}</p>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Execution config</h3>
|
||||
<pre>{JSON.stringify(snapshot.execution_config, null, 2)}</pre>
|
||||
</div>
|
||||
<div className="result-panel">
|
||||
<h3>Transport headers</h3>
|
||||
<pre>{JSON.stringify(readExecutionHeaders(snapshot.execution_config), null, 2)}</pre>
|
||||
</div>
|
||||
{snapshot.target.kind === "rest" ? (
|
||||
<div className="result-panel">
|
||||
<h3>REST static headers</h3>
|
||||
<pre>{JSON.stringify(snapshot.target.static_headers ?? {}, null, 2)}</pre>
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</PageSection>
|
||||
) : null}
|
||||
|
||||
{snapshot?.target.kind === "grpc" ? (
|
||||
<PageSection
|
||||
title="gRPC Discovery"
|
||||
subtitle="Descriptor artifacts and discovered unary methods for the current draft version."
|
||||
>
|
||||
<GrpcDescriptorPanel operationId={operationId} version={currentVersion} />
|
||||
</PageSection>
|
||||
) : null}
|
||||
|
||||
<PageSection
|
||||
title="Samples And Draft"
|
||||
subtitle={snapshot ? draftSubtitle(snapshot.target) : "Prepare schema and mapping drafts."}
|
||||
actions={
|
||||
<button
|
||||
className="button-primary"
|
||||
onClick={() => draftMutation.mutate()}
|
||||
type="button"
|
||||
>
|
||||
{draftMutation.isPending ? "Generating..." : "Generate draft"}
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<SampleUploadPanel operationId={operationId} />
|
||||
<SchemaViewerPanel
|
||||
operationRecord={versionQuery.data}
|
||||
draftResult={draftMutation.data}
|
||||
/>
|
||||
</PageSection>
|
||||
|
||||
<div className="detail-columns">
|
||||
<PageSection
|
||||
title="Test Run"
|
||||
subtitle="Run the current draft version through the runtime before publishing."
|
||||
>
|
||||
<TestRunPanel operationId={operationId} version={currentVersion} />
|
||||
</PageSection>
|
||||
|
||||
<PageSection
|
||||
title="Publish"
|
||||
subtitle="Promote the current draft version into the active MCP tool catalog."
|
||||
>
|
||||
<PublishOperationPanel operationId={operationId} version={currentVersion} />
|
||||
</PageSection>
|
||||
</div>
|
||||
|
||||
<div className="detail-columns">
|
||||
<PageSection
|
||||
title="YAML Export And Reimport"
|
||||
subtitle="Export the current version, inspect the YAML, then upsert it through the same backend contract."
|
||||
actions={
|
||||
<button
|
||||
className="button-secondary"
|
||||
type="button"
|
||||
onClick={() => exportMutation.mutate()}
|
||||
>
|
||||
{exportMutation.isPending ? "Exporting..." : "Export YAML"}
|
||||
</button>
|
||||
}
|
||||
>
|
||||
<div className="stack-layout">
|
||||
{exportedYaml ? (
|
||||
<>
|
||||
<pre className="yaml-panel">{exportedYaml}</pre>
|
||||
<div className="button-row">
|
||||
<button
|
||||
className="button-primary"
|
||||
type="button"
|
||||
onClick={() => importMutation.mutate(exportedYaml)}
|
||||
>
|
||||
{importMutation.isPending ? "Importing..." : "Upsert from YAML"}
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<p className="body-copy">
|
||||
Export YAML to inspect the current operation snapshot and transport contract.
|
||||
</p>
|
||||
)}
|
||||
{importMutation.data ? (
|
||||
<div className="feedback-card feedback-success">
|
||||
Imported version {String(importMutation.data.version)} in{" "}
|
||||
{String(importMutation.data.import_mode)} mode.
|
||||
</div>
|
||||
) : null}
|
||||
</div>
|
||||
</PageSection>
|
||||
|
||||
<PageSection
|
||||
title="Auth Profiles"
|
||||
subtitle="Profiles currently available to the admin backend and execution config."
|
||||
>
|
||||
<div className="operation-grid">
|
||||
{(authProfilesQuery.data?.items ?? []).map((profile) => (
|
||||
<div className="operation-card" key={profile.id}>
|
||||
<div className="operation-card-top">
|
||||
<span className="status-pill status-testing">{profile.kind}</span>
|
||||
</div>
|
||||
<h3>{profile.name}</h3>
|
||||
<p className="operation-name">{profile.id}</p>
|
||||
<pre>{JSON.stringify(profile.config, null, 2)}</pre>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</PageSection>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,160 +0,0 @@
|
||||
import { useDeferredValue, useMemo, useState } from "react";
|
||||
import { useQuery } from "@tanstack/react-query";
|
||||
import { Link } from "react-router-dom";
|
||||
|
||||
import { listOperations } from "../../entities/operation/api";
|
||||
import { PageSection } from "../../shared/ui/page-section";
|
||||
|
||||
export function OperationListPage() {
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
const deferredSearchTerm = useDeferredValue(searchTerm);
|
||||
const operationsQuery = useQuery({
|
||||
queryKey: ["operations"],
|
||||
queryFn: listOperations,
|
||||
});
|
||||
|
||||
const filteredItems = useMemo(() => {
|
||||
const items = operationsQuery.data?.items ?? [];
|
||||
const normalizedSearchTerm = deferredSearchTerm.trim().toLowerCase();
|
||||
|
||||
if (!normalizedSearchTerm) {
|
||||
return items;
|
||||
}
|
||||
|
||||
return items.filter((item) =>
|
||||
`${item.name} ${item.display_name} ${item.protocol} ${item.status}`
|
||||
.toLowerCase()
|
||||
.includes(normalizedSearchTerm),
|
||||
);
|
||||
}, [deferredSearchTerm, operationsQuery.data?.items]);
|
||||
|
||||
const metrics = useMemo(() => {
|
||||
const items = operationsQuery.data?.items ?? [];
|
||||
|
||||
return {
|
||||
total: items.length,
|
||||
published: items.filter((item) => item.status === "published").length,
|
||||
drafts: items.filter((item) => item.status === "draft").length,
|
||||
protocols: Array.from(new Set(items.map((item) => item.protocol))).length,
|
||||
};
|
||||
}, [operationsQuery.data?.items]);
|
||||
|
||||
return (
|
||||
<div className="page-stack">
|
||||
<PageSection
|
||||
title="Operations"
|
||||
subtitle="Browse draft and published MCP tools exposed through the admin backend."
|
||||
actions={
|
||||
<Link className="button-primary" to="/operations/new">
|
||||
New operation
|
||||
</Link>
|
||||
}
|
||||
>
|
||||
<div className="hero-grid">
|
||||
<div className="hero-card hero-card-accent">
|
||||
<p className="eyebrow">Catalog health</p>
|
||||
<h3>{metrics.total} tools registered</h3>
|
||||
<p className="body-copy">
|
||||
Published and draft operations share one operator surface and one
|
||||
MCP publication path.
|
||||
</p>
|
||||
</div>
|
||||
<div className="hero-card">
|
||||
<div className="hero-metrics">
|
||||
<div>
|
||||
<span>Published</span>
|
||||
<strong>{metrics.published}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Drafts</span>
|
||||
<strong>{metrics.drafts}</strong>
|
||||
</div>
|
||||
<div>
|
||||
<span>Protocols</span>
|
||||
<strong>{metrics.protocols}</strong>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="toolbar-row">
|
||||
<label className="field-block field-inline">
|
||||
<span>Search</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="name, protocol or status"
|
||||
value={searchTerm}
|
||||
onChange={(event) => setSearchTerm(event.target.value)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div className="toolbar-meta">
|
||||
<span className="workspace-badge">{filteredItems.length} visible</span>
|
||||
<span className="workspace-badge">
|
||||
{operationsQuery.data?.items.length ?? 0} total
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{operationsQuery.isLoading ? (
|
||||
<div className="empty-state">
|
||||
<h3>Loading operations</h3>
|
||||
<p>Fetching the current registry snapshot from the admin backend.</p>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{operationsQuery.data && filteredItems.length === 0 ? (
|
||||
<div className="empty-state">
|
||||
<h3>No matching operations</h3>
|
||||
<p>
|
||||
Adjust the search term or create a new contract for REST, GraphQL
|
||||
or unary gRPC.
|
||||
</p>
|
||||
<Link className="button-secondary" to="/operations/new">
|
||||
Create operation
|
||||
</Link>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{operationsQuery.data && filteredItems.length > 0 ? (
|
||||
<div className="operation-grid">
|
||||
{filteredItems.map((item) => (
|
||||
<Link className="operation-card" key={item.id} to={`/operations/${item.id}`}>
|
||||
<div className="operation-card-top">
|
||||
<span className={`protocol-pill protocol-${item.protocol}`}>
|
||||
{item.protocol}
|
||||
</span>
|
||||
<span className={`status-pill status-${item.status}`}>
|
||||
{item.status}
|
||||
</span>
|
||||
</div>
|
||||
<div className="operation-card-header">
|
||||
<h3>{item.display_name}</h3>
|
||||
<p className="operation-name">{item.name}</p>
|
||||
</div>
|
||||
<dl className="key-value-list">
|
||||
<div>
|
||||
<dt>Draft</dt>
|
||||
<dd>{item.current_draft_version}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Published</dt>
|
||||
<dd>{item.latest_published_version ?? "none"}</dd>
|
||||
</div>
|
||||
<div>
|
||||
<dt>Updated</dt>
|
||||
<dd>{new Date(item.updated_at).toLocaleString()}</dd>
|
||||
</div>
|
||||
</dl>
|
||||
<div className="card-link-row">
|
||||
<span>Open workspace</span>
|
||||
<strong>→</strong>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : null}
|
||||
</PageSection>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,91 +0,0 @@
|
||||
export class ApiError extends Error {
|
||||
readonly status: number;
|
||||
|
||||
constructor(message: string, status: number) {
|
||||
super(message);
|
||||
this.name = "ApiError";
|
||||
this.status = status;
|
||||
}
|
||||
}
|
||||
|
||||
type RequestInitWithJson = RequestInit & {
|
||||
json?: unknown;
|
||||
};
|
||||
|
||||
async function request<TResponse>(
|
||||
input: string,
|
||||
init: RequestInitWithJson = {},
|
||||
): Promise<TResponse> {
|
||||
const headers = new Headers(init.headers);
|
||||
const body =
|
||||
init.json === undefined ? init.body : JSON.stringify(init.json, null, 2);
|
||||
|
||||
if (init.json !== undefined) {
|
||||
headers.set("Content-Type", "application/json");
|
||||
}
|
||||
|
||||
const response = await fetch(input, {
|
||||
...init,
|
||||
headers,
|
||||
body,
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
let message = `${response.status} ${response.statusText}`;
|
||||
|
||||
try {
|
||||
const errorPayload = (await response.json()) as {
|
||||
error?: { message?: string };
|
||||
};
|
||||
message = errorPayload.error?.message ?? message;
|
||||
} catch {
|
||||
message = `${response.status} ${response.statusText}`;
|
||||
}
|
||||
|
||||
throw new ApiError(message, response.status);
|
||||
}
|
||||
|
||||
const contentType = response.headers.get("Content-Type") ?? "";
|
||||
if (contentType.includes("application/yaml")) {
|
||||
return (await response.text()) as TResponse;
|
||||
}
|
||||
|
||||
return (await response.json()) as TResponse;
|
||||
}
|
||||
|
||||
export function getJson<TResponse>(input: string) {
|
||||
return request<TResponse>(input);
|
||||
}
|
||||
|
||||
export function getText(input: string) {
|
||||
return request<string>(input);
|
||||
}
|
||||
|
||||
export function postJson<TResponse>(input: string, json?: unknown) {
|
||||
return request<TResponse>(input, {
|
||||
method: "POST",
|
||||
json,
|
||||
});
|
||||
}
|
||||
|
||||
export function postText<TResponse>(input: string, text: string) {
|
||||
return request<TResponse>(input, {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/yaml",
|
||||
},
|
||||
body: text,
|
||||
});
|
||||
}
|
||||
|
||||
export function postBytes<TResponse>(
|
||||
input: string,
|
||||
bytes: ArrayBuffer,
|
||||
headers?: Record<string, string>,
|
||||
) {
|
||||
return request<TResponse>(input, {
|
||||
method: "POST",
|
||||
headers,
|
||||
body: bytes,
|
||||
});
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
export function safeParseJson<TValue>(raw: string, fieldName: string): TValue {
|
||||
try {
|
||||
return JSON.parse(raw) as TValue;
|
||||
} catch (error) {
|
||||
throw new Error(
|
||||
`${fieldName} contains invalid JSON: ${error instanceof Error ? error.message : "unknown error"}`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export function prettyJson(value: unknown): string {
|
||||
return JSON.stringify(value, null, 2);
|
||||
}
|
||||
@@ -1,136 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
import { NavLink, useLocation } from "react-router-dom";
|
||||
|
||||
type AppShellProps = {
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
function routeMeta(pathname: string) {
|
||||
if (pathname === "/operations/new") {
|
||||
return {
|
||||
section: "Operations",
|
||||
title: "New Operation",
|
||||
heading: "Create tool contract",
|
||||
subtitle:
|
||||
"Define a single upstream endpoint and expose it as one MCP tool. Choose a protocol, fill the contract and map fields.",
|
||||
};
|
||||
}
|
||||
|
||||
if (pathname.startsWith("/operations/")) {
|
||||
return {
|
||||
section: "Operations",
|
||||
title: "Operation Workspace",
|
||||
heading: "Refine operation contract",
|
||||
subtitle:
|
||||
"Inspect target metadata, validate mappings, run tests and publish the active draft version.",
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
section: "Operations",
|
||||
title: "Catalog",
|
||||
heading: "Operation catalog",
|
||||
subtitle:
|
||||
"Track draft and published tool contracts across REST, GraphQL and unary gRPC.",
|
||||
};
|
||||
}
|
||||
|
||||
export function AppShell({ children }: AppShellProps) {
|
||||
const location = useLocation();
|
||||
const meta = routeMeta(location.pathname);
|
||||
|
||||
return (
|
||||
<div className="layout-shell">
|
||||
<aside className="layout-sidebar">
|
||||
<div className="sidebar-logo">
|
||||
<div className="logo-mark">
|
||||
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.4">
|
||||
<path d="M12 2 2 7l10 5 10-5-10-5Z" />
|
||||
<path d="m2 12 10 5 10-5" />
|
||||
<path d="m2 17 10 5 10-5" />
|
||||
</svg>
|
||||
</div>
|
||||
<div className="logo-text">
|
||||
<strong>Crank</strong>
|
||||
<span>Tool Console</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-section">
|
||||
<p className="sidebar-label">Workspace</p>
|
||||
<nav className="sidebar-nav">
|
||||
<NavLink
|
||||
end
|
||||
to="/operations"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "nav-link nav-link-active" : "nav-link"
|
||||
}
|
||||
>
|
||||
<div className="nav-copy">
|
||||
<strong>Operations</strong>
|
||||
<span>Catalog, status and search across all tools.</span>
|
||||
</div>
|
||||
<span className="nav-badge">live</span>
|
||||
</NavLink>
|
||||
|
||||
<NavLink
|
||||
to="/operations/new"
|
||||
className={({ isActive }) =>
|
||||
isActive ? "nav-link nav-link-active" : "nav-link"
|
||||
}
|
||||
>
|
||||
<div className="nav-copy">
|
||||
<strong>New Operation</strong>
|
||||
<span>Create a new protocol-specific tool contract.</span>
|
||||
</div>
|
||||
</NavLink>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-divider" />
|
||||
|
||||
<div className="sidebar-section">
|
||||
<p className="sidebar-label">Protocols</p>
|
||||
<div className="sidebar-pill-row">
|
||||
<span className="protocol-pill protocol-rest">REST</span>
|
||||
<span className="protocol-pill protocol-graphql">GraphQL</span>
|
||||
<span className="protocol-pill protocol-grpc">gRPC</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="sidebar-footer">
|
||||
<div className="sidebar-user-avatar" />
|
||||
<div className="sidebar-user-copy">
|
||||
<strong>Operator</strong>
|
||||
<span>Admin</span>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
<div className="layout-main" id="app-layout-main">
|
||||
<header className="topbar">
|
||||
<div className="breadcrumb">
|
||||
<span>{meta.section}</span>
|
||||
<span className="breadcrumb-separator">/</span>
|
||||
<strong>{meta.title}</strong>
|
||||
</div>
|
||||
<div className="topbar-actions">
|
||||
<span className="workspace-badge">MCP request-response</span>
|
||||
<span className="workspace-badge">JSONPath mappings</span>
|
||||
<span className="workspace-badge">YAML import/export</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main className="main-content" id="app-main-content">
|
||||
<div className="main-content-inner">
|
||||
<div className="page-header">
|
||||
<h1>{meta.heading}</h1>
|
||||
<p>{meta.subtitle}</p>
|
||||
</div>
|
||||
{children}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,28 +0,0 @@
|
||||
import { ReactNode } from "react";
|
||||
|
||||
type PageSectionProps = {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
actions?: ReactNode;
|
||||
children: ReactNode;
|
||||
};
|
||||
|
||||
export function PageSection({
|
||||
title,
|
||||
subtitle,
|
||||
actions,
|
||||
children,
|
||||
}: PageSectionProps) {
|
||||
return (
|
||||
<section className="page-section">
|
||||
<header className="section-header">
|
||||
<div>
|
||||
<h2>{title}</h2>
|
||||
{subtitle ? <p>{subtitle}</p> : null}
|
||||
</div>
|
||||
{actions ? <div className="section-actions">{actions}</div> : null}
|
||||
</header>
|
||||
{children}
|
||||
</section>
|
||||
);
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,20 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2022",
|
||||
"useDefineForClassFields": true,
|
||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
||||
"allowJs": false,
|
||||
"skipLibCheck": true,
|
||||
"esModuleInterop": true,
|
||||
"allowSyntheticDefaultImports": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"resolveJsonModule": true,
|
||||
"isolatedModules": true,
|
||||
"noEmit": true,
|
||||
"jsx": "react-jsx"
|
||||
},
|
||||
"include": ["src"]
|
||||
}
|
||||
@@ -1,7 +0,0 @@
|
||||
{
|
||||
"files": [],
|
||||
"references": [
|
||||
{ "path": "./tsconfig.app.json" },
|
||||
{ "path": "./tsconfig.node.json" }
|
||||
]
|
||||
}
|
||||
@@ -1,10 +0,0 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"composite": true,
|
||||
"skipLibCheck": true,
|
||||
"module": "ESNext",
|
||||
"moduleResolution": "Bundler",
|
||||
"allowSyntheticDefaultImports": true
|
||||
},
|
||||
"include": ["vite.config.ts"]
|
||||
}
|
||||
@@ -1,18 +0,0 @@
|
||||
import react from "@vitejs/plugin-react";
|
||||
import { defineConfig } from "vitest/config";
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [react()],
|
||||
server: {
|
||||
port: 3000,
|
||||
proxy: {
|
||||
"/api/admin": {
|
||||
target: "http://127.0.0.1:3001",
|
||||
changeOrigin: true,
|
||||
},
|
||||
},
|
||||
},
|
||||
test: {
|
||||
environment: "jsdom",
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user