From 209b3e1485cf17e3c66f596077060afdc947b9ba Mon Sep 17 00:00:00 2001 From: github-ops Date: Wed, 24 Jun 2026 21:51:13 +0000 Subject: [PATCH] Polish approval and import UI --- apps/ui/css/openapi-import.css | 12 +++-- apps/ui/css/wizard.css | 28 ++++++++++ apps/ui/html/api-keys.html | 40 ++++++++++----- apps/ui/html/wizard/step3-rest.html | 79 +++++++++++++++++++++++++++++ apps/ui/html/wizard/step5.html | 79 ----------------------------- apps/ui/tests/e2e/wizard.spec.js | 2 +- 6 files changed, 142 insertions(+), 98 deletions(-) diff --git a/apps/ui/css/openapi-import.css b/apps/ui/css/openapi-import.css index e47917d..bf12041 100644 --- a/apps/ui/css/openapi-import.css +++ b/apps/ui/css/openapi-import.css @@ -40,7 +40,7 @@ overflow: hidden; border: 1px solid var(--border); border-radius: 22px; - background: var(--bg-surface); + background: var(--bg-canvas); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); } @@ -50,7 +50,7 @@ gap: 18px; padding: 22px 24px; border-bottom: 1px solid var(--border); - background: var(--bg-surface); + background: var(--bg-canvas); } .openapi-import-header h2 { @@ -67,12 +67,16 @@ .openapi-import-body { overflow: auto; padding: 20px 24px 24px; - background: var(--bg-surface); + background: var(--bg-canvas); } .openapi-import-upload { display: grid; gap: 12px; + padding: 16px; + border: 1px solid var(--border-subtle); + border-radius: 16px; + background: var(--bg-surface); } .openapi-file-label { @@ -90,7 +94,7 @@ padding: 14px; border: 1px solid var(--border); border-radius: 14px; - background: var(--bg-overlay); + background: #0d1117; color: var(--text-primary); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; diff --git a/apps/ui/css/wizard.css b/apps/ui/css/wizard.css index 8c1f109..d3842b8 100644 --- a/apps/ui/css/wizard.css +++ b/apps/ui/css/wizard.css @@ -222,8 +222,24 @@ .mapping-row-remove { width: 32px; height: 32px; + display: inline-flex; + align-items: center; + justify-content: center; + border: 1px solid var(--red-border); + border-radius: 8px; + background: var(--red-bg); + color: var(--red); font-size: 18px; line-height: 1; + font-weight: 800; + transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.15s; +} + +.mapping-row-remove:hover { + border-color: rgba(248, 81, 73, 0.45); + background: rgba(248, 81, 73, 0.16); + color: #ff7b72; + transform: translateY(-1px); } .mapping-builder-actions { @@ -1306,6 +1322,18 @@ box-shadow: none !important; } +.form-group > .code-textarea { + border: 1px solid var(--border) !important; + border-radius: 8px !important; + background: #0d1117 !important; + box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.015); +} + +.form-group > .code-textarea:focus { + border-color: var(--accent) !important; + box-shadow: 0 0 0 3px var(--accent-ring), inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important; +} + /* ── Section divider ── */ .section-divider { display: flex; diff --git a/apps/ui/html/api-keys.html b/apps/ui/html/api-keys.html index 523ed66..74c5d63 100644 --- a/apps/ui/html/api-keys.html +++ b/apps/ui/html/api-keys.html @@ -44,6 +44,19 @@ background: var(--accent); color: #fff; } + .key-kind-header-control { + display: flex; + align-items: center; + gap: 10px; + flex-wrap: wrap; + justify-content: flex-end; + } + .key-kind-header-hint { + flex-basis: 100%; + max-width: 520px; + margin: 0; + text-align: right; + } .approval-warning-callout { display: flex; gap: 10px; @@ -63,8 +76,10 @@ @media (max-width: 720px) { #keys-table-wrap { display: none; } .keys-card-list { display: grid; } + .key-kind-header-control { justify-content: stretch; width: 100%; } .key-kind-tabs { width: 100%; } .key-kind-tab { flex: 1; } + .key-kind-header-hint { text-align: left; } } @@ -139,10 +154,17 @@

These keys connect an MCP client to the MCP server and are issued for a specific agent.

- +
+
+ + +
+ +
+
@@ -157,16 +179,6 @@ -
-
-
- - -
-
-
-
-
diff --git a/apps/ui/html/wizard/step3-rest.html b/apps/ui/html/wizard/step3-rest.html index faf4a07..9036727 100644 --- a/apps/ui/html/wizard/step3-rest.html +++ b/apps/ui/html/wizard/step3-rest.html @@ -90,4 +90,83 @@
+
+
+
+ + + + +
+
+
Подтверждение человеком
+
Включайте для действий, которые нельзя выполнять без явного решения пользователя.
+
+
+
+ + + +
+
+
diff --git a/apps/ui/html/wizard/step5.html b/apps/ui/html/wizard/step5.html index ee02296..1899738 100644 --- a/apps/ui/html/wizard/step5.html +++ b/apps/ui/html/wizard/step5.html @@ -126,85 +126,6 @@ tls: -
-
-
- - - - -
-
-
Подтверждение человеком
-
Включайте для действий, которые нельзя выполнять без явного решения пользователя.
-
-
-
- - - -
-
-
Проверка и публикация
diff --git a/apps/ui/tests/e2e/wizard.spec.js b/apps/ui/tests/e2e/wizard.spec.js index de42528..38d9fd7 100644 --- a/apps/ui/tests/e2e/wizard.spec.js +++ b/apps/ui/tests/e2e/wizard.spec.js @@ -828,8 +828,8 @@ test('wizard edit mode preserves explicit request mapping targets on save', asyn await expect(page.locator('#tool-input-mapping')).toHaveValue(/query\.base/); await expect(page.locator('#tool-input-mapping')).toHaveValue(/path\.date/); await expect(page.locator('#tool-input-mapping')).toHaveValue(/transform: to_string/); + await page.evaluate(() => window.CrankWizardShell.doGoToStep(3)); await expect(page.locator('#approval-required')).toBeChecked(); - await page.evaluate(() => window.CrankWizardShell.doGoToStep(5)); await expect(page.locator('#approval-config-fields')).toBeVisible(); await expect(page.locator('#approval-risk-level')).toHaveValue('financial'); await expect(page.locator('#approval-ttl-seconds')).toHaveValue('180');