feat: localize remaining alpine ui views
This commit is contained in:
a.tolmachev
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
|
||||
<div class="nav-right">
|
||||
<button class="nav-hamburger" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
<button class="nav-hamburger" data-i18n-title="nav.menu" data-i18n-aria-label="nav.menu" aria-label="Menu"><span></span><span></span><span></span></button>
|
||||
|
||||
<div class="nav-kbd">
|
||||
<svg width="12" height="12"><use href="../../icons/general/grid.svg#icon"/></svg>
|
||||
@@ -69,11 +69,11 @@
|
||||
<div class="nav-divider"></div>
|
||||
|
||||
<div class="user-menu">
|
||||
<div class="nav-avatar" title="Account">AT</div>
|
||||
<div class="nav-avatar" data-i18n-title="nav.account" title="Account">AT</div>
|
||||
<div class="user-dropdown">
|
||||
<div class="user-dropdown-header">
|
||||
<div class="user-dropdown-name">Operator</div>
|
||||
<div class="user-dropdown-role">Admin · acme-workspace</div>
|
||||
<div class="user-dropdown-name">Crank</div>
|
||||
<div class="user-dropdown-role">—</div>
|
||||
</div>
|
||||
<button class="user-dropdown-item" data-action="settings-link">
|
||||
<svg width="13" height="13"><use href="../../icons/general/settings.svg#icon"/></svg>
|
||||
@@ -141,7 +141,7 @@
|
||||
<div class="step-item active">
|
||||
<div class="step-indicator">1</div>
|
||||
<div class="step-content">
|
||||
<div class="step-number">Step 1</div>
|
||||
<div class="step-number" data-step="1">Step 1</div>
|
||||
<div class="step-name" data-i18n="wizard.step_name.protocol">Protocol</div>
|
||||
<div class="step-status-text" data-i18n="wizard.status.in_progress">In progress</div>
|
||||
</div>
|
||||
@@ -150,7 +150,7 @@
|
||||
<div class="step-item pending">
|
||||
<div class="step-indicator">2</div>
|
||||
<div class="step-content">
|
||||
<div class="step-number">Step 2</div>
|
||||
<div class="step-number" data-step="2">Step 2</div>
|
||||
<div class="step-name" data-i18n="wizard.step_name.upstream">Upstream target</div>
|
||||
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
||||
</div>
|
||||
@@ -159,7 +159,7 @@
|
||||
<div class="step-item pending" id="sidebar-step-3">
|
||||
<div class="step-indicator">3</div>
|
||||
<div class="step-content">
|
||||
<div class="step-number">Step 3</div>
|
||||
<div class="step-number" data-step="3">Step 3</div>
|
||||
<div class="step-name" id="sidebar-step-3-name">Request config</div>
|
||||
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
||||
</div>
|
||||
@@ -168,7 +168,7 @@
|
||||
<div class="step-item pending">
|
||||
<div class="step-indicator">4</div>
|
||||
<div class="step-content">
|
||||
<div class="step-number">Step 4</div>
|
||||
<div class="step-number" data-step="4">Step 4</div>
|
||||
<div class="step-name" data-i18n="wizard.step_name.tool">Tool config</div>
|
||||
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
||||
</div>
|
||||
@@ -177,7 +177,7 @@
|
||||
<div class="step-item pending">
|
||||
<div class="step-indicator">5</div>
|
||||
<div class="step-content">
|
||||
<div class="step-number">Step 5</div>
|
||||
<div class="step-number" data-step="5">Step 5</div>
|
||||
<div class="step-name" data-i18n="wizard.step_name.mapping">Mapping</div>
|
||||
<div class="step-status-text" data-i18n="wizard.status.not_started">Not started</div>
|
||||
</div>
|
||||
@@ -221,7 +221,7 @@
|
||||
|
||||
<div class="action-bar-spacer"></div>
|
||||
|
||||
<span class="step-counter">Step <strong>1</strong> of 5</span>
|
||||
<span class="step-counter" data-step-counter>Step <strong>1</strong> of 5</span>
|
||||
|
||||
<button id="btn-continue" class="btn btn-continue" type="button">
|
||||
<span data-i18n="wizard.button.continue">Continue</span>
|
||||
|
||||
@@ -23,8 +23,8 @@
|
||||
<path d="M12 3a15.3 15.3 0 010 18M12 3a15.3 15.3 0 000 18"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="protocol-card-name">REST / HTTP</div>
|
||||
<div class="protocol-card-tagline">Standard HTTP verbs over a RESTful endpoint. The most broadly supported option.</div>
|
||||
<div class="protocol-card-name" data-i18n="wizard.step1.rest_name">REST / HTTP</div>
|
||||
<div class="protocol-card-tagline" data-i18n="wizard.step1.rest_tagline">Standard HTTP verbs over a RESTful endpoint. The most broadly supported option.</div>
|
||||
<div class="protocol-card-tags">
|
||||
<span class="protocol-tag">GET</span>
|
||||
<span class="protocol-tag">POST</span>
|
||||
@@ -49,11 +49,11 @@
|
||||
<circle cx="2.5" cy="7.5" r="1.5" fill="#bc8cff"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="protocol-card-name">GraphQL</div>
|
||||
<div class="protocol-card-tagline">Query and mutate a GraphQL schema. Supports queries and mutations over one fixed operation.</div>
|
||||
<div class="protocol-card-name" data-i18n="wizard.step1.graphql_name">GraphQL</div>
|
||||
<div class="protocol-card-tagline" data-i18n="wizard.step1.graphql_tagline">Query and mutate a GraphQL schema. Supports queries and mutations over one fixed operation.</div>
|
||||
<div class="protocol-card-tags">
|
||||
<span class="protocol-tag">Query</span>
|
||||
<span class="protocol-tag">Mutation</span>
|
||||
<span class="protocol-tag" data-i18n="wizard.step1.query">Query</span>
|
||||
<span class="protocol-tag" data-i18n="wizard.step1.mutation">Mutation</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -68,10 +68,10 @@
|
||||
<path d="M10 8h4M10 12h4M10 16h4"/>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="protocol-card-name">gRPC</div>
|
||||
<div class="protocol-card-tagline">High-performance binary RPC over HTTP/2. Ideal for low-latency internal services.</div>
|
||||
<div class="protocol-card-name" data-i18n="wizard.step1.grpc_name">gRPC</div>
|
||||
<div class="protocol-card-tagline" data-i18n="wizard.step1.grpc_tagline">High-performance binary RPC over HTTP/2. Ideal for low-latency internal services.</div>
|
||||
<div class="protocol-card-tags">
|
||||
<span class="protocol-tag">Unary</span>
|
||||
<span class="protocol-tag" data-i18n="wizard.step1.unary">Unary</span>
|
||||
<span class="protocol-tag">Protobuf</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -21,10 +21,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Upstream</div>
|
||||
<div class="config-card-subtitle">Shared host, base URL, and authentication</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step2.upstream_title">Upstream</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step2.upstream_subtitle">Shared host, base URL, and authentication</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color: var(--error, #f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color: var(--error, #f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 12px; padding: 16px;">
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
<div class="upstream-combobox" id="upstream-combobox">
|
||||
<div class="upstream-combobox-trigger" id="upstream-combobox-trigger" onclick="toggleUpstreamDropdown(event)">
|
||||
<div class="upstream-combobox-value" id="upstream-combobox-value">
|
||||
<span class="upstream-combobox-placeholder">Select an upstream…</span>
|
||||
<span class="upstream-combobox-placeholder" data-i18n="wizard.step2.upstream_placeholder">Select an upstream…</span>
|
||||
</div>
|
||||
<svg class="upstream-combobox-chevron" width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 6l4 4 4-4"/>
|
||||
@@ -45,7 +45,7 @@
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="1.8" stroke-linecap="round">
|
||||
<circle cx="7" cy="7" r="5"/><path d="M12 12l2.5 2.5"/>
|
||||
</svg>
|
||||
<input class="upstream-search-input" id="upstream-search" type="text" placeholder="Search by name or URL…" oninput="filterUpstreams(this.value)" autocomplete="off" spellcheck="false">
|
||||
<input class="upstream-search-input" id="upstream-search" type="text" data-i18n-ph="wizard.step2.search_placeholder" placeholder="Search by name or URL…" oninput="filterUpstreams(this.value)" autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="upstream-dropdown-list" id="upstream-dropdown-list">
|
||||
<!-- populated by JS -->
|
||||
@@ -58,7 +58,7 @@
|
||||
<div class="upstream-preview-name" id="upstream-preview-name"></div>
|
||||
<div class="upstream-preview-url" id="upstream-preview-url"></div>
|
||||
<span class="upstream-auth-badge" id="upstream-preview-badge"></span>
|
||||
<button class="upstream-preview-change" onclick="openUpstreamDropdown()">Change</button>
|
||||
<button class="upstream-preview-change" onclick="openUpstreamDropdown()" data-i18n="wizard.step2.change">Change</button>
|
||||
</div>
|
||||
|
||||
<!-- Register new upstream trigger row -->
|
||||
@@ -69,7 +69,7 @@
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="2.2" stroke-linecap="round">
|
||||
<path d="M8 3v10M3 8h10"/>
|
||||
</svg>
|
||||
<span>Register new upstream</span>
|
||||
<span data-i18n="wizard.step2.register_new">Register new upstream</span>
|
||||
</div>
|
||||
|
||||
<!-- Register new upstream form (kept as-is per design) -->
|
||||
@@ -77,18 +77,18 @@
|
||||
<div class="upstream-new-form-inner">
|
||||
<div class="form-row" style="grid-template-columns: 1fr 2fr;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Name <span class="form-label-required">required</span></label>
|
||||
<label class="form-label"><span data-i18n="wizard.step2.name">Name</span> <span class="form-label-required" data-i18n="workspace_setup.required">required</span></label>
|
||||
<input class="form-input" id="new-upstream-name" type="text" placeholder="e.g. acme-api" autocomplete="off" spellcheck="false">
|
||||
<div class="form-hint">Unique identifier for this upstream.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step2.unique_hint">Unique identifier for this upstream.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Base URL <span class="form-label-required">required</span></label>
|
||||
<label class="form-label"><span data-i18n="wizard.step2.base_url">Base URL</span> <span class="form-label-required" data-i18n="workspace_setup.required">required</span></label>
|
||||
<input class="form-input input-mono" id="new-upstream-url" type="text" placeholder="https://api.example.com" autocomplete="off" spellcheck="false">
|
||||
<div class="form-hint">Root URL — no trailing slash. Supports <code style="font-family:monospace;font-size:11px;color:var(--accent);">${secrets.*}</code>.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step2.base_url_hint">Root URL — no trailing slash. Supports ${secrets.*}.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Auth headers</label>
|
||||
<label class="form-label" data-i18n="wizard.step2.auth_headers">Auth headers</label>
|
||||
<div class="code-block" style="border-radius: 6px;">
|
||||
<div class="code-toolbar">
|
||||
<div class="code-dots"><span></span><span></span><span></span></div>
|
||||
@@ -98,11 +98,11 @@
|
||||
"Authorization": "${secrets.API_KEY}"
|
||||
}</textarea>
|
||||
</div>
|
||||
<div class="form-hint">These headers are sent on every request to this upstream. Use secrets for credentials.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step2.auth_headers_hint">These headers are sent on every request to this upstream. Use secrets for credentials.</div>
|
||||
</div>
|
||||
<div style="display:flex; gap:8px; margin-top:4px;">
|
||||
<button class="btn-primary-sm" onclick="saveNewUpstream(event)">Save upstream</button>
|
||||
<button class="btn-ghost-sm" onclick="cancelNewUpstream(event)">Cancel</button>
|
||||
<button class="btn-primary-sm" onclick="saveNewUpstream(event)" data-i18n="wizard.step2.save_upstream">Save upstream</button>
|
||||
<button class="btn-ghost-sm" onclick="cancelNewUpstream(event)" data-i18n="btn.cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -119,19 +119,19 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Endpoint</div>
|
||||
<div class="config-card-subtitle">Path and HTTP method for this specific operation</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step2.endpoint_title">Endpoint</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step2.endpoint_subtitle">Path and HTTP method for this specific operation</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color: var(--error, #f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color: var(--error, #f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Path template
|
||||
<span class="form-label-required">required</span>
|
||||
<span data-i18n="wizard.step2.path_template">Path template</span>
|
||||
<span class="form-label-required" data-i18n="workspace_setup.required">required</span>
|
||||
</label>
|
||||
<input class="form-input input-mono" id="endpoint-path" type="text" value="/v1/leads" autocomplete="off" spellcheck="false">
|
||||
<div class="form-hint">Appended to the upstream base URL. Use <code style="font-family:monospace;font-size:11px;color:var(--accent);">{param}</code> for path variables.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step2.path_hint">Appended to the upstream base URL. Use {param} for path variables.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -18,20 +18,20 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Operation type</div>
|
||||
<div class="config-card-subtitle">GraphQL operation kind — subscriptions are not supported</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.graphql.type_title">Operation type</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.graphql.type_subtitle">GraphQL operation kind — subscriptions are not supported</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body">
|
||||
<div class="gql-type-grid">
|
||||
<button class="gql-type-card active" data-gql-type="query" onclick="selectGqlType(this)">
|
||||
<div class="gql-type-keyword">query</div>
|
||||
<div class="gql-type-desc">Fetch data without side-effects</div>
|
||||
<div class="gql-type-desc" data-i18n="wizard.step3.graphql.query_desc">Fetch data without side-effects</div>
|
||||
</button>
|
||||
<button class="gql-type-card" data-gql-type="mutation" onclick="selectGqlType(this)">
|
||||
<div class="gql-type-keyword">mutation</div>
|
||||
<div class="gql-type-desc">Create, update or delete data</div>
|
||||
<div class="gql-type-desc" data-i18n="wizard.step3.graphql.mutation_desc">Create, update or delete data</div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -47,10 +47,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Query document</div>
|
||||
<div class="config-card-subtitle">GraphQL document with typed variable declarations</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.graphql.doc_title">Query document</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.graphql.doc_subtitle">GraphQL document with typed variable declarations</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 0; padding: 0;">
|
||||
<div class="code-block" style="border-radius: 0; border: none;">
|
||||
@@ -82,10 +82,8 @@
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Variables are mapped in step 5</div>
|
||||
<div class="info-callout-text">
|
||||
Declare all variables in the query document using the <code style="font-family:monospace;font-size:11px;color:var(--accent);">$variable: Type</code> syntax. In step 5 you will map MCP input fields to these variables. Crank serialises the final <code style="font-family:monospace;font-size:11px;color:var(--accent);">{"query","variables"}</code> payload automatically.
|
||||
</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step3.graphql.variables_title">Variables are mapped in step 5</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step3.graphql.variables_body">Declare all variables in the query document using the $variable: Type syntax. In step 5 you will map MCP input fields to these variables. Crank serializes the final {"query","variables"} payload automatically.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -12,15 +12,15 @@
|
||||
<div class="grpc-source-tabs">
|
||||
<button class="grpc-source-btn active" data-source="proto" onclick="selectGrpcSource('proto')">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6z"/><path d="M9 2v4h4"/></svg>
|
||||
Proto file
|
||||
<span data-i18n="wizard.step3.grpc.source_proto">Proto file</span>
|
||||
</button>
|
||||
<button class="grpc-source-btn" data-source="reflection" onclick="selectGrpcSource('reflection')">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4"/></svg>
|
||||
Descriptor set
|
||||
<span data-i18n="wizard.step3.grpc.source_reflection">Descriptor set</span>
|
||||
</button>
|
||||
<button class="grpc-source-btn" data-source="manual" onclick="selectGrpcSource('manual')">
|
||||
<svg width="12" height="12" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M11 2l3 3-8 8H3v-3l8-8z"/></svg>
|
||||
Manual
|
||||
<span data-i18n="wizard.step3.grpc.source_manual">Manual</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -32,10 +32,10 @@
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6z"/><path d="M9 2v4h4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Proto definition</div>
|
||||
<div class="config-card-subtitle">Upload or paste your .proto file</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.grpc.proto_title">Proto definition</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.grpc.proto_subtitle">Upload or paste your .proto file</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 12px; padding: 16px;">
|
||||
<div class="proto-dropzone" id="proto-dropzone"
|
||||
@@ -47,19 +47,19 @@
|
||||
<path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/><line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<div class="proto-dropzone-title">Drop <code style="font-family:monospace;font-size:12px;">.proto</code> file here</div>
|
||||
<div class="proto-dropzone-sub">or click to browse</div>
|
||||
<div class="proto-dropzone-title" data-i18n="wizard.step3.grpc.drop_title">Drop .proto file here</div>
|
||||
<div class="proto-dropzone-sub" data-i18n="wizard.step3.grpc.drop_subtitle">or click to browse</div>
|
||||
<input type="file" id="proto-file-input" accept=".proto" style="display:none" onchange="handleProtoFile(event)">
|
||||
</div>
|
||||
<div class="proto-file-info" id="proto-file-info" style="display:none">
|
||||
<svg width="15" height="15" viewBox="0 0 16 16" fill="none" stroke="var(--accent)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M9 2H4a1 1 0 00-1 1v10a1 1 0 001 1h8a1 1 0 001-1V6z"/><path d="M9 2v4h4"/></svg>
|
||||
<span class="proto-file-name" id="proto-file-name"></span>
|
||||
<span class="proto-file-size" id="proto-file-size"></span>
|
||||
<button class="proto-file-change" onclick="resetProto()">Change file</button>
|
||||
<button class="proto-file-change" onclick="resetProto()" data-i18n="wizard.step3.grpc.change_file">Change file</button>
|
||||
</div>
|
||||
<div style="display:flex; align-items:center; gap:10px;">
|
||||
<div style="flex:1; height:1px; background:var(--border-subtle);"></div>
|
||||
<button class="btn-ghost-sm" onclick="toggleProtoPaste()" id="proto-paste-btn">Paste content</button>
|
||||
<button class="btn-ghost-sm" onclick="toggleProtoPaste()" id="proto-paste-btn" data-i18n="wizard.step3.grpc.paste_content">Paste content</button>
|
||||
<div style="flex:1; height:1px; background:var(--border-subtle);"></div>
|
||||
</div>
|
||||
<div id="proto-paste-area" style="display:none">
|
||||
@@ -72,8 +72,8 @@
|
||||
placeholder='syntax = "proto3"; package acme; service ContactService { rpc GetContact (GetContactRequest) returns (Contact) {} }' spellcheck="false"></textarea>
|
||||
</div>
|
||||
<div style="display:flex; gap: 8px; margin-top: 8px;">
|
||||
<button class="btn-primary-sm" onclick="parseProtoPasted()">Parse proto</button>
|
||||
<button class="btn-ghost-sm" onclick="cancelProtoPaste()">Cancel</button>
|
||||
<button class="btn-primary-sm" onclick="parseProtoPasted()" data-i18n="wizard.step3.grpc.parse_proto">Parse proto</button>
|
||||
<button class="btn-ghost-sm" onclick="cancelProtoPaste()" data-i18n="btn.cancel">Cancel</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -82,14 +82,14 @@
|
||||
<div class="info-callout" id="proto-streaming-notice" style="margin-bottom:20px;display:none">
|
||||
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Streaming methods excluded</div>
|
||||
<div class="info-callout-text"><span id="proto-streaming-count">0</span> streaming method(s) found and hidden — not compatible with MCP tool calls.</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
|
||||
<div class="info-callout-text" id="proto-streaming-text"><span id="proto-streaming-count">0</span> streaming method(s) found and hidden — not compatible with MCP tool calls.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card" style="margin-bottom: 20px;">
|
||||
<div class="config-card-header">
|
||||
<div><div class="config-card-title">Select method</div><div class="config-card-subtitle" id="proto-services-summary"></div></div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<div><div class="config-card-title" data-i18n="wizard.step3.grpc.select_method">Select method</div><div class="config-card-subtitle" id="proto-services-summary"></div></div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="padding: 0 16px 16px; gap: 0;">
|
||||
<div id="proto-services-list"></div>
|
||||
@@ -106,8 +106,8 @@
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2M3.1 3.1l1.4 1.4M11.5 11.5l1.4 1.4M3.1 12.9l1.4-1.4M11.5 4.5l1.4-1.4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Descriptor-driven discovery</div>
|
||||
<div class="config-card-subtitle">Use the saved draft and a descriptor set to discover services through the backend</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.grpc.discovery_live_title">Descriptor-driven discovery</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.grpc.discovery_live_subtitle">Use the saved draft and a descriptor set to discover services through the backend</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 14px; padding: 16px;">
|
||||
@@ -115,30 +115,30 @@
|
||||
<div class="grpc-reflect-upstream">
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-muted)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><rect x="1" y="3" width="6" height="10" rx="1"/><rect x="9" y="3" width="6" height="10" rx="1"/></svg>
|
||||
<div class="grpc-reflect-upstream-info">
|
||||
<span class="grpc-reflect-upstream-name" id="grpc-reflect-upstream-name">No upstream selected</span>
|
||||
<span class="grpc-reflect-upstream-url" id="grpc-reflect-upstream-url">Select an upstream in step 2 first</span>
|
||||
<span class="grpc-reflect-upstream-name" id="grpc-reflect-upstream-name" data-i18n="wizard.step3.grpc.no_upstream">No upstream selected</span>
|
||||
<span class="grpc-reflect-upstream-url" id="grpc-reflect-upstream-url" data-i18n="wizard.step3.grpc.select_upstream_first">Select an upstream in step 2 first</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Idle -->
|
||||
<div id="grpc-reflect-idle">
|
||||
<button class="btn-primary-sm" onclick="startReflection()">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="margin-right:4px"><circle cx="8" cy="8" r="2.5"/><path d="M8 1v2M8 13v2M1 8h2M13 8h2"/></svg>
|
||||
Open live descriptor tools
|
||||
<span data-i18n="wizard.step3.grpc.open_tools">Open live descriptor tools</span>
|
||||
</button>
|
||||
</div>
|
||||
<!-- Loading -->
|
||||
<div id="grpc-reflect-loading" style="display:none">
|
||||
<div class="grpc-reflect-status">
|
||||
<div class="grpc-reflect-spinner"></div>
|
||||
<span id="grpc-reflect-status-text">Connecting…</span>
|
||||
<span id="grpc-reflect-status-text" data-i18n="wizard.step3.grpc.connecting">Connecting…</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Error -->
|
||||
<div id="grpc-reflect-error" style="display:none">
|
||||
<div class="grpc-reflect-error-row">
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="var(--error,#f87171)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7"/><path d="M8 5v3M8 10.5v.5"/></svg>
|
||||
<span id="grpc-reflect-error-text">Live descriptor discovery is handled in step 5.</span>
|
||||
<button class="proto-file-change" onclick="startReflection()">Retry</button>
|
||||
<span id="grpc-reflect-error-text" data-i18n="wizard.step3.grpc.live_step5">Live descriptor discovery is handled in step 5.</span>
|
||||
<button class="proto-file-change" onclick="startReflection()" data-i18n="wizard.step3.grpc.retry">Retry</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -147,14 +147,14 @@
|
||||
<div class="info-callout" id="reflect-streaming-notice" style="margin-bottom:20px;display:none">
|
||||
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><polygon points="8,1 15,14 1,14" fill="none"/><path d="M8 6v4M8 11.5v.5"/></svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Streaming methods excluded</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step3.grpc.streaming_excluded">Streaming methods excluded</div>
|
||||
<div class="info-callout-text"><span id="reflect-streaming-count">0</span> streaming method(s) discovered and hidden.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card" style="margin-bottom: 20px;">
|
||||
<div class="config-card-header">
|
||||
<div><div class="config-card-title">Select method</div><div class="config-card-subtitle" id="reflect-services-summary"></div></div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<div><div class="config-card-title" data-i18n="wizard.step3.grpc.select_method">Select method</div><div class="config-card-subtitle" id="reflect-services-summary"></div></div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="padding: 0 16px 16px; gap: 0;">
|
||||
<div id="reflect-services-list"></div>
|
||||
@@ -171,27 +171,27 @@
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8h12M10 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Method route</div>
|
||||
<div class="config-card-subtitle">Full gRPC path to the unary method</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.grpc.manual_title">Method route</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.grpc.manual_subtitle">Full gRPC path to the unary method</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">gRPC route <span class="form-label-required">required</span></label>
|
||||
<label class="form-label"><span data-i18n="wizard.step3.grpc.route">gRPC route</span> <span class="form-label-required" data-i18n="workspace_setup.required">required</span></label>
|
||||
<input class="form-input input-mono" id="grpc-manual-route" type="text" placeholder="/package.ServiceName/MethodName" autocomplete="off" spellcheck="false" oninput="grpcManualRouteInput(this.value)">
|
||||
<div class="form-hint">Format: <code style="font-family:monospace;font-size:11px;color:var(--accent);">/[package.]ServiceName/MethodName</code></div>
|
||||
<div class="form-hint" data-i18n="wizard.step3.grpc.route_hint">Format: /[package.]ServiceName/MethodName</div>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Request type <span class="form-label-optional">(optional)</span></label>
|
||||
<label class="form-label"><span data-i18n="wizard.step3.grpc.request_type">Request type</span> <span class="form-label-optional" data-i18n="workspace_setup.optional">(optional)</span></label>
|
||||
<input class="form-input input-mono" id="grpc-manual-req-type" type="text" placeholder="GetContactRequest" autocomplete="off" spellcheck="false" oninput="grpcManualTypeInput()">
|
||||
<div class="form-hint">Protobuf message name, for documentation.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step3.grpc.proto_doc_hint">Protobuf message name, for documentation.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Response type <span class="form-label-optional">(optional)</span></label>
|
||||
<label class="form-label"><span data-i18n="wizard.step3.grpc.response_type">Response type</span> <span class="form-label-optional" data-i18n="workspace_setup.optional">(optional)</span></label>
|
||||
<input class="form-input input-mono" id="grpc-manual-res-type" type="text" placeholder="Contact" autocomplete="off" spellcheck="false" oninput="grpcManualTypeInput()">
|
||||
<div class="form-hint">Protobuf message name, for documentation.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step3.grpc.proto_doc_hint">Protobuf message name, for documentation.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -199,8 +199,8 @@
|
||||
<div class="info-callout" style="margin-bottom: 20px;">
|
||||
<svg class="info-callout-icon" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="8" r="7"/><path d="M8 11V8M8 5v-.5"/></svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Input and output schemas are defined in step 4</div>
|
||||
<div class="info-callout-text">In manual mode you only need the route. The MCP tool input/output schemas — which the LLM uses to call this tool — are configured in the next step regardless of Protobuf definitions.</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step3.grpc.schema_title">Input and output schemas are defined in step 4</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step3.grpc.schema_body">In manual mode you only need the route. The MCP tool input/output schemas — which the LLM uses to call this tool — are configured in the next step regardless of Protobuf definitions.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /grpc-src-manual -->
|
||||
@@ -212,27 +212,27 @@
|
||||
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="var(--text-secondary)" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"><path d="M2 8h12M10 4l4 4-4 4"/></svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Method signature</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.grpc.signature_title">Method signature</div>
|
||||
<div class="config-card-subtitle" id="grpc-method-subtitle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px; padding: 16px;">
|
||||
<div class="proto-path-row">
|
||||
<span class="proto-path-label">gRPC route</span>
|
||||
<span class="proto-path-label" data-i18n="wizard.step3.grpc.route_label">gRPC route</span>
|
||||
<code class="proto-path-value" id="grpc-path-value"></code>
|
||||
</div>
|
||||
<div class="proto-sig-grid" id="grpc-detail-sig">
|
||||
<div class="proto-sig-col">
|
||||
<div class="proto-sig-col-header">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M2 8h12M8 3l5 5-5 5"/></svg>
|
||||
Request <code class="proto-type-badge" id="grpc-req-type"></code>
|
||||
<span data-i18n="wizard.step3.grpc.request_label">Request</span> <code class="proto-type-badge" id="grpc-req-type"></code>
|
||||
</div>
|
||||
<div class="proto-field-list" id="grpc-req-fields"></div>
|
||||
</div>
|
||||
<div class="proto-sig-col">
|
||||
<div class="proto-sig-col-header">
|
||||
<svg width="11" height="11" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M14 8H2M8 3l-5 5 5 5"/></svg>
|
||||
Response <code class="proto-type-badge" id="grpc-res-type"></code>
|
||||
<span data-i18n="wizard.step3.grpc.response_label">Response</span> <code class="proto-type-badge" id="grpc-res-type"></code>
|
||||
</div>
|
||||
<div class="proto-field-list" id="grpc-res-fields"></div>
|
||||
</div>
|
||||
|
||||
@@ -18,32 +18,32 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">HTTP method</div>
|
||||
<div class="config-card-subtitle">Verb sent to the upstream on every tool invocation</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.rest.method_title">HTTP method</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.rest.method_subtitle">Verb sent to the upstream on every tool invocation</div>
|
||||
</div>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);">Required</span>
|
||||
<span class="config-card-optional" style="color:var(--error,#f87171);" data-i18n="wizard.required">Required</span>
|
||||
</div>
|
||||
<div class="config-card-body">
|
||||
<div class="method-grid">
|
||||
<button class="method-card" data-method="GET" onclick="selectMethod(this)">
|
||||
<span class="method-name">GET</span>
|
||||
<span class="method-desc">Read</span>
|
||||
<span class="method-desc" data-i18n="wizard.step3.rest.read">Read</span>
|
||||
</button>
|
||||
<button class="method-card active" data-method="POST" onclick="selectMethod(this)">
|
||||
<span class="method-name">POST</span>
|
||||
<span class="method-desc">Create</span>
|
||||
<span class="method-desc" data-i18n="wizard.step3.rest.create">Create</span>
|
||||
</button>
|
||||
<button class="method-card" data-method="PUT" onclick="selectMethod(this)">
|
||||
<span class="method-name">PUT</span>
|
||||
<span class="method-desc">Replace</span>
|
||||
<span class="method-desc" data-i18n="wizard.step3.rest.replace">Replace</span>
|
||||
</button>
|
||||
<button class="method-card" data-method="PATCH" onclick="selectMethod(this)">
|
||||
<span class="method-name">PATCH</span>
|
||||
<span class="method-desc">Update</span>
|
||||
<span class="method-desc" data-i18n="wizard.step3.rest.update">Update</span>
|
||||
</button>
|
||||
<button class="method-card" data-method="DELETE" onclick="selectMethod(this)">
|
||||
<span class="method-name">DELETE</span>
|
||||
<span class="method-desc">Remove</span>
|
||||
<span class="method-desc" data-i18n="wizard.step3.rest.remove">Remove</span>
|
||||
</button>
|
||||
</div>
|
||||
<div class="method-callout" id="method-callout-rest" style="display:none;"></div>
|
||||
@@ -60,31 +60,31 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Request format</div>
|
||||
<div class="config-card-subtitle">Content negotiation and serialisation</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step3.rest.format_title">Request format</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step3.rest.format_subtitle">Content negotiation and serialisation</div>
|
||||
</div>
|
||||
<span class="config-card-optional">Optional</span>
|
||||
<span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Content-Type</label>
|
||||
<label class="form-label" data-i18n="wizard.step3.rest.content_type">Content-Type</label>
|
||||
<select class="form-select">
|
||||
<option selected>application/json</option>
|
||||
<option>application/x-www-form-urlencoded</option>
|
||||
<option>multipart/form-data</option>
|
||||
<option>text/plain</option>
|
||||
</select>
|
||||
<div class="form-hint">How the request body is encoded when sent to the upstream.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step3.rest.content_type_hint">How the request body is encoded when sent to the upstream.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Accept</label>
|
||||
<label class="form-label" data-i18n="wizard.step3.rest.accept">Accept</label>
|
||||
<select class="form-select">
|
||||
<option selected>application/json</option>
|
||||
<option>text/plain</option>
|
||||
<option>*/*</option>
|
||||
</select>
|
||||
<div class="form-hint">Accepted response content types from the upstream server.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step3.rest.accept_hint">Accepted response content types from the upstream server.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -16,47 +16,47 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Tool identity</div>
|
||||
<div class="config-card-subtitle">Machine-readable name and LLM-facing description</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step4.identity_title">Tool identity</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step4.identity_subtitle">Machine-readable name and LLM-facing description</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 20px;">
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Tool name
|
||||
<span class="form-label-required">required</span>
|
||||
<span data-i18n="wizard.step4.tool_name">Tool name</span>
|
||||
<span class="form-label-required" data-i18n="workspace_setup.required">required</span>
|
||||
</label>
|
||||
<input id="tool-name" class="form-input input-mono" type="text" value="create_crm_lead" autocomplete="off" spellcheck="false">
|
||||
<div class="form-hint">Machine-readable identifier used in MCP tool calls. Only lowercase letters, numbers and underscores. Cannot be changed after publishing.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step4.tool_name_hint">Machine-readable identifier used in MCP tool calls. Only lowercase letters, numbers and underscores. Cannot be changed after publishing.</div>
|
||||
</div>
|
||||
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Display name
|
||||
<span class="form-label-required">required</span>
|
||||
<span data-i18n="wizard.step4.display_name">Display name</span>
|
||||
<span class="form-label-required" data-i18n="workspace_setup.required">required</span>
|
||||
</label>
|
||||
<input id="tool-display-name" class="form-input" type="text" value="Create CRM Lead" autocomplete="off">
|
||||
<div class="form-hint">Human-readable name shown in the console and audit log.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step4.display_name_hint">Human-readable name shown in the console and audit log.</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Tool title
|
||||
<span class="form-label-optional">(optional)</span>
|
||||
<span data-i18n="wizard.step4.tool_title">Tool title</span>
|
||||
<span class="form-label-optional" data-i18n="workspace_setup.optional">(optional)</span>
|
||||
</label>
|
||||
<input id="tool-title" class="form-input" type="text" value="Create a new CRM lead record" autocomplete="off">
|
||||
<div class="form-hint">Short imperative sentence shown in the MCP tool manifest.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step4.tool_title_hint">Short imperative sentence shown in the MCP tool manifest.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label class="form-label">
|
||||
Description
|
||||
<span class="form-label-required">required</span>
|
||||
<span data-i18n="wizard.step4.description">Description</span>
|
||||
<span class="form-label-required" data-i18n="workspace_setup.required">required</span>
|
||||
</label>
|
||||
<textarea id="tool-description" class="form-textarea" rows="5">Creates a new lead record in the CRM from the provided contact details. Use this tool when the user wants to add a new prospect or contact. Returns the new lead ID and creation timestamp on success.</textarea>
|
||||
<div class="form-hint">LLM-facing description. Be precise — this is the primary signal the model uses to decide whether to invoke this tool.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step4.description_hint">LLM-facing description. Be precise — this is the primary signal the model uses to decide whether to invoke this tool.</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -68,10 +68,8 @@
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Writing effective descriptions</div>
|
||||
<div class="info-callout-text">
|
||||
Start with a verb ("Creates", "Fetches", "Updates"). Mention key input requirements. Describe what a successful response looks like. Avoid vague phrasing like "handles" or "manages". See <a href="#">description best practices →</a>
|
||||
</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step4.description_title">Writing effective descriptions</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step4.description_body">Start with a verb ("Creates", "Fetches", "Updates"). Mention key input requirements. Describe what a successful response looks like. Avoid vague phrasing like "handles" or "manages". See description best practices →</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -84,10 +82,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Input schema</div>
|
||||
<div class="config-card-subtitle">Parameters the LLM passes when calling this tool</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step4.input_schema_title">Input schema</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step4.input_schema_subtitle">Parameters the LLM passes when calling this tool</div>
|
||||
</div>
|
||||
<span class="config-card-optional">JSON Schema draft-07</span>
|
||||
<span class="config-card-optional" data-i18n="wizard.step4.schema_draft">JSON Schema draft-07</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 0; padding: 0;">
|
||||
<div class="code-block" style="border-radius: 0; border: none;">
|
||||
@@ -122,10 +120,10 @@
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Output schema</div>
|
||||
<div class="config-card-subtitle">Shape of the data returned to the LLM after a successful call</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step4.output_schema_title">Output schema</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step4.output_schema_subtitle">Shape of the data returned to the LLM after a successful call</div>
|
||||
</div>
|
||||
<span class="config-card-optional">JSON Schema draft-07</span>
|
||||
<span class="config-card-optional" data-i18n="wizard.step4.schema_draft">JSON Schema draft-07</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 0; padding: 0;">
|
||||
<div class="code-block" style="border-radius: 0; border: none;">
|
||||
@@ -153,10 +151,8 @@
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Schemas are protocol-agnostic</div>
|
||||
<div class="info-callout-text">
|
||||
These schemas describe the MCP contract, not the upstream wire format. Field mapping in Step 5 translates between the two. You can upload a sample JSON response to auto-generate the output schema.
|
||||
</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step4.protocol_agnostic_title">Schemas are protocol-agnostic</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step4.protocol_agnostic_body">These schemas describe the MCP contract, not the upstream wire format. Field mapping in Step 5 translates between the two. You can upload a sample JSON response to auto-generate the output schema.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /step-pane-4 -->
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
</div>
|
||||
|
||||
<div class="section-divider" style="margin-bottom: 16px;">
|
||||
<span class="section-divider-label">Input → Request</span>
|
||||
<span class="section-divider-label" data-i18n="wizard.step5.input_request">Input → Request</span>
|
||||
<div class="section-divider-line"></div>
|
||||
</div>
|
||||
|
||||
@@ -31,7 +31,7 @@ source: "$.input.source"</textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-divider" style="margin-bottom: 16px;">
|
||||
<span class="section-divider-label">Response → Output</span>
|
||||
<span class="section-divider-label" data-i18n="wizard.step5.output_response">Response → Output</span>
|
||||
<div class="section-divider-line"></div>
|
||||
</div>
|
||||
|
||||
@@ -51,7 +51,7 @@ owner_id: "$.response.data.owner.id"</textarea>
|
||||
</div>
|
||||
|
||||
<div class="section-divider" style="margin-bottom: 16px;">
|
||||
<span class="section-divider-label">Execution</span>
|
||||
<span class="section-divider-label" data-i18n="wizard.step5.execution">Execution</span>
|
||||
<div class="section-divider-line"></div>
|
||||
</div>
|
||||
|
||||
@@ -64,10 +64,10 @@ owner_id: "$.response.data.owner.id"</textarea>
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Execution config</div>
|
||||
<div class="config-card-subtitle">Timeouts, retry policy and auth profile reference</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.exec_title">Execution config</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.exec_subtitle">Timeouts, retry policy and auth profile reference</div>
|
||||
</div>
|
||||
<span class="config-card-optional">Optional</span>
|
||||
<span class="config-card-optional" data-i18n="wizard.optional">Optional</span>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 0; padding: 0;">
|
||||
<div class="code-block" style="border-radius: 0; border: none;">
|
||||
@@ -88,7 +88,7 @@ tls:
|
||||
</div>
|
||||
|
||||
<div class="section-divider" style="margin-bottom: 16px;">
|
||||
<span class="section-divider-label">Live validation and publishing</span>
|
||||
<span class="section-divider-label" data-i18n="wizard.step5.live_title">Live validation and publishing</span>
|
||||
<div class="section-divider-line"></div>
|
||||
</div>
|
||||
|
||||
@@ -98,7 +98,7 @@ tls:
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title" id="wizard-live-status-title">Draft actions</div>
|
||||
<div class="info-callout-title" id="wizard-live-status-title" data-i18n="wizard.step5.draft_actions">Draft actions</div>
|
||||
<div class="info-callout-text" id="wizard-live-status-text"></div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -109,8 +109,8 @@ tls:
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Live actions save the draft first</div>
|
||||
<div class="info-callout-text">Sample uploads, test runs, YAML actions, publish and gRPC descriptor discovery all persist the current draft before calling the backend.</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step5.live_save_title">Live actions save the draft first</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step5.live_save_body">Sample uploads, test runs, YAML actions, publish and gRPC descriptor discovery all persist the current draft before calling the backend.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -123,14 +123,14 @@ tls:
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Samples and draft generation</div>
|
||||
<div class="config-card-subtitle">Persist input/output samples, then generate schemas and mappings from real payloads.</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.samples_title">Samples and draft generation</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.samples_subtitle">Persist input/output samples, then generate schemas and mappings from real payloads.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Input sample</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.input_sample">Input sample</label>
|
||||
<textarea id="wizard-input-sample" class="form-textarea code-textarea" rows="9" spellcheck="false">{
|
||||
"first_name": "Ada",
|
||||
"last_name": "Lovelace",
|
||||
@@ -138,7 +138,7 @@ tls:
|
||||
}</textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Output sample</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.output_sample">Output sample</label>
|
||||
<textarea id="wizard-output-sample" class="form-textarea code-textarea" rows="9" spellcheck="false">{
|
||||
"id": "lead_123",
|
||||
"status": "created"
|
||||
@@ -146,9 +146,9 @@ tls:
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button id="wizard-upload-input-sample" class="btn-primary-sm" type="button">Save input sample</button>
|
||||
<button id="wizard-upload-output-sample" class="btn-ghost-sm" type="button">Save output sample</button>
|
||||
<button id="wizard-generate-draft" class="btn-ghost-sm" type="button">Generate draft from samples</button>
|
||||
<button id="wizard-upload-input-sample" class="btn-primary-sm" type="button" data-i18n="wizard.step5.save_input_sample">Save input sample</button>
|
||||
<button id="wizard-upload-output-sample" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.save_output_sample">Save output sample</button>
|
||||
<button id="wizard-generate-draft" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.generate_draft">Generate draft from samples</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -161,13 +161,13 @@ tls:
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Test run</div>
|
||||
<div class="config-card-subtitle">Run the current draft against the upstream before publishing it.</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.test_title">Test run</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.test_subtitle">Run the current draft against the upstream before publishing it.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Test input payload</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.test_input_payload">Test input payload</label>
|
||||
<textarea id="wizard-test-input" class="form-textarea code-textarea" rows="8" spellcheck="false">{
|
||||
"first_name": "Ada",
|
||||
"last_name": "Lovelace",
|
||||
@@ -175,21 +175,21 @@ tls:
|
||||
}</textarea>
|
||||
</div>
|
||||
<div style="display:flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button id="wizard-run-test" class="btn-primary-sm" type="button">Run test</button>
|
||||
<button id="wizard-copy-test-response" class="btn-ghost-sm" type="button">Use response as output sample</button>
|
||||
<button id="wizard-run-test" class="btn-primary-sm" type="button" data-i18n="wizard.step5.run_test">Run test</button>
|
||||
<button id="wizard-copy-test-response" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.use_response_output">Use response as output sample</button>
|
||||
</div>
|
||||
<div class="form-row">
|
||||
<div class="form-group">
|
||||
<label class="form-label">Request preview</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.request_preview">Request preview</label>
|
||||
<textarea id="wizard-test-request-preview" class="form-textarea code-textarea" rows="8" spellcheck="false" readonly></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Response preview</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.response_preview">Response preview</label>
|
||||
<textarea id="wizard-test-response-preview" class="form-textarea code-textarea" rows="8" spellcheck="false" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">Errors</label>
|
||||
<label class="form-label" data-i18n="wizard.step5.errors">Errors</label>
|
||||
<textarea id="wizard-test-errors" class="form-textarea code-textarea" rows="4" spellcheck="false" readonly></textarea>
|
||||
</div>
|
||||
</div>
|
||||
@@ -204,16 +204,16 @@ tls:
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">gRPC descriptor set</div>
|
||||
<div class="config-card-subtitle">Upload a compiled descriptor set and discover unary methods from the saved draft.</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.grpc_descriptor_title">gRPC descriptor set</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.grpc_descriptor_subtitle">Upload a compiled descriptor set and discover unary methods from the saved draft.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div style="display:flex; gap: 8px; align-items:center; flex-wrap: wrap;">
|
||||
<input id="wizard-descriptor-set-input" type="file" accept=".bin,.pb,.desc,.protoset,application/octet-stream" style="display:none">
|
||||
<button id="wizard-select-descriptor-set" class="btn-ghost-sm" type="button">Choose descriptor set</button>
|
||||
<button id="wizard-upload-descriptor-set" class="btn-primary-sm" type="button">Upload and discover services</button>
|
||||
<span id="wizard-descriptor-set-name" style="color: var(--text-muted); font-size: 12px;">No descriptor set selected</span>
|
||||
<button id="wizard-select-descriptor-set" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.choose_descriptor">Choose descriptor set</button>
|
||||
<button id="wizard-upload-descriptor-set" class="btn-primary-sm" type="button" data-i18n="wizard.step5.upload_discover">Upload and discover services</button>
|
||||
<span id="wizard-descriptor-set-name" style="color: var(--text-muted); font-size: 12px;" data-i18n="wizard.step5.no_descriptor">No descriptor set selected</span>
|
||||
</div>
|
||||
<div id="wizard-descriptor-services-summary" class="form-hint"></div>
|
||||
<div id="wizard-descriptor-services-list" style="display:grid; gap: 10px;"></div>
|
||||
@@ -228,20 +228,20 @@ tls:
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">YAML import and export</div>
|
||||
<div class="config-card-subtitle">Move operation drafts between environments without leaving the wizard.</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.yaml_title">YAML import and export</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.yaml_subtitle">Move operation drafts between environments without leaving the wizard.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 16px;">
|
||||
<div style="display:flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button id="wizard-export-yaml" class="btn-ghost-sm" type="button">Export YAML</button>
|
||||
<button id="wizard-import-yaml-file-trigger" class="btn-ghost-sm" type="button">Load YAML file</button>
|
||||
<button id="wizard-import-yaml" class="btn-primary-sm" type="button">Import YAML</button>
|
||||
<button id="wizard-export-yaml" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.export_yaml">Export YAML</button>
|
||||
<button id="wizard-import-yaml-file-trigger" class="btn-ghost-sm" type="button" data-i18n="wizard.step5.load_yaml_file">Load YAML file</button>
|
||||
<button id="wizard-import-yaml" class="btn-primary-sm" type="button" data-i18n="wizard.step5.import_yaml">Import YAML</button>
|
||||
<input id="wizard-import-yaml-file" type="file" accept=".yaml,.yml,text/yaml" style="display:none">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label">YAML document</label>
|
||||
<textarea id="wizard-import-yaml-text" class="form-textarea code-textarea" rows="10" spellcheck="false" placeholder="Paste exported YAML here to create or upsert an operation."></textarea>
|
||||
<label class="form-label" data-i18n="wizard.step5.yaml_document">YAML document</label>
|
||||
<textarea id="wizard-import-yaml-text" class="form-textarea code-textarea" rows="10" spellcheck="false" data-i18n-ph="wizard.step5.yaml_placeholder" placeholder="Paste exported YAML here to create or upsert an operation."></textarea>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -254,14 +254,14 @@ tls:
|
||||
</svg>
|
||||
</div>
|
||||
<div>
|
||||
<div class="config-card-title">Publish</div>
|
||||
<div class="config-card-subtitle">Save the current draft and expose it to published agents.</div>
|
||||
<div class="config-card-title" data-i18n="wizard.step5.publish_title">Publish</div>
|
||||
<div class="config-card-subtitle" data-i18n="wizard.step5.publish_subtitle">Save the current draft and expose it to published agents.</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-card-body" style="gap: 12px;">
|
||||
<div class="form-hint">Publishing uses the current draft version from this wizard session.</div>
|
||||
<div class="form-hint" data-i18n="wizard.step5.publish_hint">Publishing uses the current draft version from this wizard session.</div>
|
||||
<div style="display:flex; gap: 8px; flex-wrap: wrap;">
|
||||
<button id="wizard-publish-operation" class="btn-primary-sm" type="button">Publish operation</button>
|
||||
<button id="wizard-publish-operation" class="btn-primary-sm" type="button" data-i18n="wizard.step5.publish_action">Publish operation</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -272,10 +272,8 @@ tls:
|
||||
<path d="M8 11V8M8 5v-.5"/>
|
||||
</svg>
|
||||
<div class="info-callout-body">
|
||||
<div class="info-callout-title">Operation stays editable in this wizard</div>
|
||||
<div class="info-callout-text">
|
||||
Saving creates or updates the current draft in place. Use the live actions above to upload samples, test the draft, export or import YAML, and publish when the upstream contract is ready.
|
||||
</div>
|
||||
<div class="info-callout-title" data-i18n="wizard.step5.editable_title">Operation stays editable in this wizard</div>
|
||||
<div class="info-callout-text" data-i18n="wizard.step5.editable_body">Saving creates or updates the current draft in place. Use the live actions above to upload samples, test the draft, export or import YAML, and publish when the upstream contract is ready.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /step-pane-5 -->
|
||||
|
||||
Reference in New Issue
Block a user