From 9d1f5347c2bc290885f77034d8c215b416cbba1a Mon Sep 17 00:00:00 2001
From: "a.tolmachev" <a.tolmachev@tbank.ru>
Date: Thu, 26 Mar 2026 01:18:53 +0300
Subject: [PATCH] feat: align operator UI with design concept

---
 TASKS.md                                      |   12 +-
 .../operation-form/operation-form.tsx         |  422 ++++--
 apps/ui/src/pages/operation-create/page.tsx   |   46 +-
 apps/ui/src/shared/ui/app-shell.tsx           |  147 +-
 apps/ui/src/styles.css                        | 1244 +++++++++++------
 5 files changed, 1201 insertions(+), 670 deletions(-)

diff --git a/TASKS.md b/TASKS.md
index e699058..f56d12d 100644
--- a/TASKS.md
+++ b/TASKS.md
@@ -2,17 +2,17 @@
 
 ## Current
 
-### `feat/header-fields`
+### `feat/ui-concept-alignment`
 
 Status: completed
 
 DoD:
 
-- форма создания явно поддерживает настройку headers, а не прячет их только в сыром JSON
-- `execution headers` доступны для всех протоколов
-- `static headers` доступны для REST target
-- detail view показывает сохраненные headers
-- UI build и tests остаются зелеными
+- shell и create flow визуально опираются на утвержденный concept
+- sidebar, topbar и page header выглядят как единая продуктовая система
+- create page больше не выглядит как длинная сырая форма, а как step-based contract builder
+- кодовые JSON и mapping поля имеют отдельную визуальную подачу
+- UI build и tests остаются зелеными после выравнивания под concept
 
 ## Next
 
diff --git a/apps/ui/src/features/operation-form/operation-form.tsx b/apps/ui/src/features/operation-form/operation-form.tsx
index d654928..3ef4902 100644
--- a/apps/ui/src/features/operation-form/operation-form.tsx
+++ b/apps/ui/src/features/operation-form/operation-form.tsx
@@ -22,103 +22,155 @@ type FieldConfig = {
   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: "Tool description",
-    description: "LLM-facing description for the MCP tool.",
+    label: "Description",
+    description: "LLM-facing description for the tool runtime contract.",
     rows: 4,
     wide: true,
   },
 ];
 
 const restFields: FieldConfig[] = [
-  { name: "restBaseUrl", label: "Base URL" },
-  { name: "restMethod", label: "HTTP method" },
+  { name: "restBaseUrl", label: "Base URL", wide: true },
   { name: "restPathTemplate", label: "Path template" },
-  {
-    name: "restStaticHeadersText",
-    label: "Static headers",
-    description: "Always sent for this REST target before dynamic request headers are merged.",
-    rows: 8,
-    wide: true,
-  },
+  { name: "restMethod", label: "HTTP method" },
 ];
 
 const graphqlFields: FieldConfig[] = [
-  { name: "graphqlEndpoint", label: "GraphQL endpoint" },
+  { name: "graphqlEndpoint", label: "GraphQL endpoint", wide: true },
   { name: "graphqlOperationType", label: "Operation type" },
   { name: "graphqlOperationName", label: "Operation name" },
   {
-    name: "graphqlQueryTemplate",
-    label: "Query template",
-    description: "A fixed query or mutation document exposed as a single MCP tool.",
-    rows: 10,
+    name: "graphqlResponsePath",
+    label: "Response path",
+    description: "Stable extraction root inside the response payload.",
     wide: true,
   },
   {
-    name: "graphqlResponsePath",
-    label: "Response path",
-    description: "JSONPath-like extraction root inside response preview.",
+    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" },
+  { 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 together with the operation.",
+    description: "Stable descriptor identifier stored with the operation.",
+    wide: true,
   },
   {
     name: "grpcDescriptorSetB64",
     label: "Descriptor set base64",
-    description: "Use a descriptor-set file to prefill this field before creation.",
-    rows: 8,
+    description: "Compiled descriptor-set contents used for runtime invocation.",
+    rows: 10,
     wide: true,
+    code: true,
   },
 ];
 
 const schemaFields: FieldConfig[] = [
-  { name: "inputSchemaText", label: "Input schema", rows: 12, wide: true },
-  { name: "outputSchemaText", label: "Output schema", rows: 12, wide: true },
+  {
+    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 mapping", rows: 12, wide: true },
-  { name: "outputMappingText", label: "Output mapping", rows: 12, wide: true },
+  {
+    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 available for REST, GraphQL and gRPC requests.",
+    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 MCP tool maps to one HTTP method and one path template.";
+      return "One tool maps to one HTTP method and one path template.";
     case "graphql":
-      return "One MCP tool maps to one fixed GraphQL query or mutation with stable variables and response shape.";
+      return "One tool maps to one fixed GraphQL query or mutation.";
     case "grpc":
-      return "One MCP tool maps to one unary gRPC method backed by a descriptor set embedded at creation time.";
+      return "One tool maps to one unary gRPC method backed by a descriptor set.";
   }
 }
 
@@ -202,53 +254,13 @@ export function OperationForm() {
     }
   }
 
-  function renderField(field: FieldConfig) {
-    const fieldError = form.formState.errors[field.name];
-    const message =
-      typeof fieldError?.message === "string" ? fieldError.message : undefined;
+  function fieldError(name: OperationFieldName) {
+    const error = form.formState.errors[name];
+    return typeof error?.message === "string" ? error.message : undefined;
+  }
 
-    if (
-      field.name === "restMethod" ||
-      field.name === "graphqlOperationType" ||
-      field.name === "protocol"
-    ) {
-      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 {...form.register(field.name)}>
-            {field.name === "protocol" ? (
-              <>
-                <option value="rest">REST</option>
-                <option value="graphql">GraphQL</option>
-                <option value="grpc">gRPC</option>
-              </>
-            ) : null}
-            {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>
-      );
-    }
-
-    const isTextarea = field.rows !== undefined;
+  function renderSelect(field: FieldConfig) {
+    const message = fieldError(field.name);
 
     return (
       <label
@@ -257,11 +269,70 @@ export function OperationForm() {
       >
         <span>{field.label}</span>
         {field.description ? <small className="field-hint">{field.description}</small> : null}
-        {isTextarea ? (
-          <textarea rows={field.rows} {...form.register(field.name)} />
-        ) : (
-          <input type="text" {...form.register(field.name)} />
-        )}
+        <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>
     );
@@ -269,56 +340,155 @@ export function OperationForm() {
 
   return (
     <form
-      className="stack-layout"
+      className="builder-stack"
       onSubmit={form.handleSubmit((values) => {
         creationMutation.mutate(values);
       })}
     >
-      <div className="protocol-selector-card">
-        <div className="form-grid">
-          {renderField({ name: "protocol", label: "Protocol" })}
-          <div className="protocol-brief">
-            <span className={`protocol-pill protocol-${activeProtocol}`}>{activeProtocol}</span>
-            <p>{protocolSummary(activeProtocol)}</p>
+      <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>
-      </div>
+      </section>
 
-      <div className="form-grid">{commonFields.map(renderField)}</div>
+      <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>
 
-      <div className="page-subsection">
-        <div className="page-subsection-header">
-          <h3>Target</h3>
-          <p>Protocol-specific transport configuration exposed through one MCP tool.</p>
-        </div>
-        <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
-                type="file"
-                accept=".bin,.pb,.desc"
-                onChange={(event) => {
-                  void handleDescriptorFileChange(event.target.files?.[0]);
-                }}
-              />
-            </label>
-          ) : null}
-        </div>
-      </div>
+      <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="page-subsection">
-        <div className="page-subsection-header">
-          <h3>Contract</h3>
-          <p>Schemas and mapping stay JSON-based regardless of the upstream protocol.</p>
+          <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>
-        <div className="form-grid">{schemaFields.map(renderField)}</div>
-        <div className="form-grid">{mappingFields.map(renderField)}</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">
@@ -328,8 +498,12 @@ export function OperationForm() {
         </div>
       ) : null}
 
-      <div className="button-row">
-        <button className="button-primary" type="submit" disabled={creationMutation.isPending}>
+      <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" disabled={creationMutation.isPending}>
           {creationMutation.isPending ? "Creating..." : "Create operation"}
         </button>
       </div>
diff --git a/apps/ui/src/pages/operation-create/page.tsx b/apps/ui/src/pages/operation-create/page.tsx
index 2a53e38..1539d91 100644
--- a/apps/ui/src/pages/operation-create/page.tsx
+++ b/apps/ui/src/pages/operation-create/page.tsx
@@ -1,53 +1,9 @@
 import { OperationForm } from "../../features/operation-form/operation-form";
-import { PageSection } from "../../shared/ui/page-section";
-
-const protocolCards = [
-  {
-    protocol: "rest",
-    title: "REST",
-    description:
-      "One tool maps to one method and one path, with body, query and header mapping.",
-  },
-  {
-    protocol: "graphql",
-    title: "GraphQL",
-    description:
-      "One tool maps to one fixed query or mutation with stable variables and response shape.",
-  },
-  {
-    protocol: "grpc",
-    title: "gRPC",
-    description:
-      "One tool maps to one unary method backed by a descriptor-set contract.",
-  },
-] as const;
 
 export function OperationCreatePage() {
   return (
     <div className="page-stack">
-      <PageSection
-        title="Create Operation"
-        subtitle="Create one MCP tool from one fixed REST, GraphQL or unary gRPC contract."
-      >
-        <div className="hero-grid">
-          {protocolCards.map((card) => (
-            <article className="hero-card" key={card.protocol}>
-              <span className={`protocol-pill protocol-${card.protocol}`}>
-                {card.protocol}
-              </span>
-              <h3>{card.title}</h3>
-              <p className="body-copy">{card.description}</p>
-            </article>
-          ))}
-        </div>
-      </PageSection>
-
-      <PageSection
-        title="Contract Builder"
-        subtitle="Define the operator-facing tool contract first, then map it to the upstream target."
-      >
-        <OperationForm />
-      </PageSection>
+      <OperationForm />
     </div>
   );
 }
diff --git a/apps/ui/src/shared/ui/app-shell.tsx b/apps/ui/src/shared/ui/app-shell.tsx
index fbd810a..7f46509 100644
--- a/apps/ui/src/shared/ui/app-shell.tsx
+++ b/apps/ui/src/shared/ui/app-shell.tsx
@@ -1,108 +1,133 @@
-import { NavLink, useLocation } from "react-router-dom";
 import { ReactNode } from "react";
+import { NavLink, useLocation } from "react-router-dom";
 
 type AppShellProps = {
   children: ReactNode;
 };
 
-function pageTitle(pathname: string) {
-  if (pathname.startsWith("/operations/new")) {
+function routeMeta(pathname: string) {
+  if (pathname === "/operations/new") {
     return {
-      title: "Create tool contract",
+      section: "Operations",
+      title: "New Operation",
+      heading: "Create tool contract",
       subtitle:
-        "Configure one fixed upstream contract and publish it as one MCP tool.",
+        "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 {
-      title: "Operation workspace",
+      section: "Operations",
+      title: "Operation Workspace",
+      heading: "Refine operation contract",
       subtitle:
-        "Refine target metadata, validate mappings and publish the current draft.",
+        "Inspect target metadata, validate mappings, run tests and publish the active draft version.",
     };
   }
 
   return {
-    title: "Operation catalog",
+    section: "Operations",
+    title: "Catalog",
+    heading: "Operation catalog",
     subtitle:
-      "Track draft and published tools across REST, GraphQL and unary gRPC.",
+      "Track draft and published tool contracts across REST, GraphQL and unary gRPC.",
   };
 }
 
 export function AppShell({ children }: AppShellProps) {
   const location = useLocation();
-  const currentPage = pageTitle(location.pathname);
+  const meta = routeMeta(location.pathname);
 
   return (
     <div className="layout-shell">
       <aside className="layout-sidebar">
-        <div className="brand-block">
-          <p className="eyebrow">RMCP Console</p>
-          <h1>Tool Console</h1>
-          <p className="brand-copy">
-            Low-code operator surface for REST, GraphQL and unary gRPC tool
-            onboarding, draft generation and publish flow.
-          </p>
+        <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>MCPaaS</strong>
+            <span>Tool Console</span>
+          </div>
         </div>
 
-        <nav className="sidebar-nav">
-          <p className="nav-section-title">Workspace</p>
-          <NavLink
-            to="/operations"
-            className={({ isActive }) =>
-              isActive ? "nav-link nav-link-active" : "nav-link"
-            }
-          >
-            <strong>Operations</strong>
-            <span>Catalog, status, search and entry points.</span>
-          </NavLink>
-          <NavLink
-            to="/operations/new"
-            className={({ isActive }) =>
-              isActive ? "nav-link nav-link-active" : "nav-link"
-            }
-          >
-            <strong>New Operation</strong>
-            <span>Create a protocol-specific contract and publishable tool.</span>
-          </NavLink>
-        </nav>
+        <div className="sidebar-section">
+          <p className="sidebar-label">Workspace</p>
+          <nav className="sidebar-nav">
+            <NavLink
+              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>
 
-        <div className="sidebar-meta">
-          <div className="sidebar-card">
-            <p className="eyebrow">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>
+            <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-card">
-            <p className="eyebrow">Lifecycle</p>
-            <div className="sidebar-pill-row">
-              <span className="status-pill status-draft">draft</span>
-              <span className="status-pill status-published">published</span>
-            </div>
+        <div className="sidebar-footer">
+          <div className="sidebar-user-avatar" />
+          <div className="sidebar-user-copy">
+            <strong>Operator</strong>
+            <span>Admin</span>
           </div>
         </div>
       </aside>
 
-      <main className="layout-main">
-        <header className="workspace-header">
-          <div>
-            <p className="eyebrow">Operator Workspace</p>
-            <h2>{currentPage.title}</h2>
-            <p>{currentPage.subtitle}</p>
+      <div className="layout-main">
+        <header className="topbar">
+          <div className="breadcrumb">
+            <span>{meta.section}</span>
+            <span className="breadcrumb-separator">/</span>
+            <strong>{meta.title}</strong>
           </div>
-          <div className="workspace-badges">
+          <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>
 
-        {children}
-      </main>
+        <main className="main-content">
+          <div className="page-header">
+            <h1>{meta.heading}</h1>
+            <p>{meta.subtitle}</p>
+          </div>
+          {children}
+        </main>
+      </div>
     </div>
   );
 }
diff --git a/apps/ui/src/styles.css b/apps/ui/src/styles.css
index 8da77c1..9204989 100644
--- a/apps/ui/src/styles.css
+++ b/apps/ui/src/styles.css
@@ -1,20 +1,70 @@
+@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap");
+
 :root {
-  font-family:
-    "IBM Plex Sans", "Segoe UI", sans-serif;
+  font-family: "Inter", system-ui, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-  color: #1e1a17;
-  background:
-    radial-gradient(circle at top left, rgba(234, 165, 91, 0.18), transparent 28%),
-    radial-gradient(circle at 82% 10%, rgba(15, 117, 103, 0.18), transparent 24%),
-    linear-gradient(180deg, #f7f1e8 0%, #f2ece2 100%);
+  color: #101828;
+  background: #f0f2f5;
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+
+  --bg: #f0f2f5;
+  --surface: #ffffff;
+  --surface-2: #f7f8fa;
+  --border: #e4e7ec;
+  --border-2: #d0d5dd;
+
+  --text-1: #101828;
+  --text-2: #344054;
+  --text-3: #667085;
+  --text-4: #98a2b3;
+
+  --teal: #0d9488;
+  --teal-dark: #0f766e;
+  --teal-bg: #f0fdfa;
+  --teal-border: #99f6e4;
+
+  --rest-c: #059669;
+  --rest-bg: #ecfdf5;
+  --rest-border: #a7f3d0;
+
+  --gql-c: #d946ef;
+  --gql-bg: #fdf4ff;
+  --gql-border: #f0abfc;
+
+  --grpc-c: #6366f1;
+  --grpc-bg: #eef2ff;
+  --grpc-border: #c7d2fe;
+
+  --draft-c: #b45309;
+  --draft-bg: #fffbeb;
+  --pub-c: #065f46;
+  --pub-bg: #ecfdf5;
+
+  --sidebar-bg: #0d1117;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-text: #e6edf3;
+  --sidebar-muted: #7d8590;
+  --sidebar-hover: rgba(255, 255, 255, 0.05);
+  --sidebar-active-bg: rgba(13, 148, 136, 0.18);
+  --sidebar-active-border: rgba(13, 148, 136, 0.5);
+
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 14px;
+  --radius-xl: 18px;
+
+  --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
+  --shadow: 0 1px 3px rgba(16, 24, 40, 0.1), 0 1px 2px rgba(16, 24, 40, 0.06);
+  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, 0.1), 0 2px 4px -2px rgba(16, 24, 40, 0.06);
 }
 
-* {
+*,
+*::before,
+*::after {
   box-sizing: border-box;
 }
 
@@ -46,310 +96,796 @@ button {
 
 .layout-shell {
   display: grid;
-  grid-template-columns: 320px 1fr;
+  grid-template-columns: 240px 1fr;
   min-height: 100vh;
 }
 
 .layout-sidebar {
-  padding: 32px 28px;
-  border-right: 1px solid rgba(30, 26, 23, 0.08);
-  background:
-    linear-gradient(180deg, rgba(255, 248, 239, 0.94), rgba(246, 238, 228, 0.86)),
-    rgba(255, 250, 244, 0.78);
-  backdrop-filter: blur(18px);
-}
-
-.layout-main {
-  padding: 32px;
-}
-
-.workspace-header {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 20px;
-  margin-bottom: 28px;
+  flex-direction: column;
+  background: var(--sidebar-bg);
+  border-right: 1px solid var(--sidebar-border);
+  position: sticky;
+  top: 0;
+  height: 100vh;
+  overflow-y: auto;
 }
 
-.workspace-header h2 {
-  margin: 4px 0 8px;
-  font-size: clamp(2rem, 4vw, 3rem);
-  line-height: 0.94;
-}
-
-.workspace-header p {
-  margin: 0;
-  max-width: 760px;
-  color: #62534b;
-}
-
-.workspace-badges {
+.sidebar-logo {
   display: flex;
-  gap: 10px;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-}
-
-.workspace-badge {
-  display: inline-flex;
   align-items: center;
-  min-height: 34px;
-  padding: 0 14px;
-  border-radius: 999px;
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  background: rgba(255, 254, 250, 0.78);
-  color: #5e514a;
-  font-size: 0.82rem;
-  font-weight: 600;
+  gap: 10px;
+  padding: 20px 16px 16px;
+  border-bottom: 1px solid var(--sidebar-border);
 }
 
-.brand-block {
+.logo-mark {
+  width: 32px;
+  height: 32px;
+  border-radius: 8px;
+  background: linear-gradient(135deg, #0d9488, #0891b2);
+  color: #ffffff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.logo-mark svg {
+  width: 18px;
+  height: 18px;
+}
+
+.logo-text {
   display: grid;
-  gap: 12px;
-  margin-bottom: 32px;
+  gap: 1px;
 }
 
-.brand-block h1 {
-  margin: 0;
-  font-size: clamp(2rem, 4vw, 3.2rem);
-  line-height: 0.96;
+.logo-text strong {
+  font-size: 13px;
+  font-weight: 700;
+  color: var(--sidebar-text);
+  letter-spacing: -0.01em;
 }
 
-.eyebrow {
-  margin: 0;
-  font-size: 0.78rem;
-  letter-spacing: 0.18em;
+.logo-text span {
+  font-size: 11px;
+  color: var(--sidebar-muted);
+}
+
+.sidebar-section {
+  padding: 16px 8px 8px;
+}
+
+.sidebar-label {
+  margin: 0 0 6px;
+  padding: 0 8px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  color: #9a6540;
-}
-
-.brand-copy {
-  margin: 0;
-  color: #554941;
+  color: var(--sidebar-muted);
 }
 
 .sidebar-nav {
   display: grid;
-  gap: 12px;
-}
-
-.nav-section-title {
-  margin: 0 0 4px;
-  color: #8d5e3d;
-  font-size: 0.76rem;
-  font-weight: 700;
-  letter-spacing: 0.16em;
-  text-transform: uppercase;
+  gap: 4px;
 }
 
 .nav-link {
-  display: grid;
-  gap: 4px;
-  padding: 14px 16px;
-  border-radius: 20px;
-  background: rgba(255, 255, 255, 0.72);
-  border: 1px solid rgba(30, 26, 23, 0.08);
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px;
+  border-radius: var(--radius);
+  border: 1px solid transparent;
+  color: var(--sidebar-muted);
+  transition: all 0.15s;
 }
 
-.nav-link strong {
-  font-size: 0.96rem;
-}
-
-.nav-link span {
-  font-size: 0.84rem;
-  color: #6a5b53;
+.nav-link:hover {
+  background: var(--sidebar-hover);
+  color: var(--sidebar-text);
 }
 
 .nav-link-active {
-  background: linear-gradient(135deg, #0f7567, #19735d);
-  color: white;
-  border-color: transparent;
-  box-shadow: 0 20px 38px rgba(12, 84, 73, 0.18);
+  background: var(--sidebar-active-bg);
+  border-color: var(--sidebar-active-border);
+  color: #2dd4bf;
 }
 
-.nav-link-active span {
-  color: rgba(255, 255, 255, 0.82);
-}
-
-.sidebar-meta {
-  margin-top: 28px;
+.nav-copy {
   display: grid;
-  gap: 14px;
+  gap: 3px;
+  min-width: 0;
 }
 
-.sidebar-card {
-  display: grid;
-  gap: 10px;
-  padding: 16px;
-  border-radius: 22px;
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  background: rgba(255, 255, 255, 0.62);
+.nav-copy strong {
+  font-size: 13.5px;
+  font-weight: 600;
+}
+
+.nav-copy span {
+  font-size: 12px;
+  color: inherit;
+  opacity: 0.8;
+}
+
+.nav-badge {
+  margin-left: auto;
+  background: rgba(255, 255, 255, 0.08);
+  color: var(--sidebar-muted);
+  font-size: 11px;
+  font-weight: 600;
+  padding: 1px 6px;
+  border-radius: 99px;
+}
+
+.nav-link-active .nav-badge {
+  background: rgba(45, 212, 191, 0.15);
+  color: #2dd4bf;
+}
+
+.sidebar-divider {
+  height: 1px;
+  background: var(--sidebar-border);
+  margin: 8px 16px;
 }
 
 .sidebar-pill-row {
   display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  padding: 0 8px;
+}
+
+.sidebar-footer {
+  display: flex;
+  align-items: center;
   gap: 10px;
+  padding: 14px 16px;
+  border-top: 1px solid var(--sidebar-border);
+  margin-top: auto;
+}
+
+.sidebar-user-avatar {
+  width: 28px;
+  height: 28px;
+  border-radius: 999px;
+  background: linear-gradient(135deg, #0d9488, #6366f1);
+  flex-shrink: 0;
+}
+
+.sidebar-user-copy {
+  display: grid;
+  gap: 1px;
+}
+
+.sidebar-user-copy strong {
+  font-size: 12.5px;
+  color: var(--sidebar-text);
+}
+
+.sidebar-user-copy span {
+  font-size: 11px;
+  color: var(--sidebar-muted);
+}
+
+.layout-main {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.topbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+  height: 56px;
+  padding: 0 28px;
+  background: var(--surface);
+  border-bottom: 1px solid var(--border);
+  position: sticky;
+  top: 0;
+  z-index: 10;
+}
+
+.breadcrumb {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--text-3);
+}
+
+.breadcrumb strong {
+  color: var(--text-2);
+  font-weight: 500;
+}
+
+.breadcrumb-separator {
+  color: var(--border-2);
+}
+
+.topbar-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
   flex-wrap: wrap;
 }
 
-.page-stack {
+.main-content {
+  padding: 28px;
+  flex: 1;
+}
+
+.page-header {
+  margin-bottom: 24px;
+}
+
+.page-header h1 {
+  margin: 0 0 4px;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--text-1);
+}
+
+.page-header p {
+  margin: 0;
+  color: var(--text-3);
+  font-size: 13.5px;
+}
+
+.workspace-badge,
+.protocol-pill,
+.status-pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  white-space: nowrap;
+}
+
+.workspace-badge {
+  border: 1px solid var(--border);
+  background: var(--surface-2);
+  color: var(--text-3);
+}
+
+.protocol-rest {
+  color: var(--rest-c);
+  background: var(--rest-bg);
+  border: 1px solid var(--rest-border);
+}
+
+.protocol-graphql {
+  color: var(--gql-c);
+  background: var(--gql-bg);
+  border: 1px solid var(--gql-border);
+}
+
+.protocol-grpc {
+  color: var(--grpc-c);
+  background: var(--grpc-bg);
+  border: 1px solid var(--grpc-border);
+}
+
+.status-draft {
+  color: var(--draft-c);
+  background: var(--draft-bg);
+}
+
+.status-published {
+  color: var(--pub-c);
+  background: var(--pub-bg);
+}
+
+.status-testing,
+.status-archived {
+  color: var(--text-2);
+  background: var(--surface-2);
+}
+
+.page-stack,
+.stack-layout,
+.builder-stack,
+.service-grid,
+.service-method-list {
   display: grid;
-  gap: 24px;
+  gap: 16px;
+}
+
+.page-section,
+.builder-card,
+.operation-card,
+.summary-card,
+.feedback-card,
+.result-panel,
+.hero-card,
+.service-card,
+.empty-state {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-xl);
+  box-shadow: var(--shadow-sm);
 }
 
 .page-section {
-  border-radius: 28px;
-  padding: 28px;
-  background: rgba(255, 255, 255, 0.78);
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  box-shadow: 0 24px 60px rgba(45, 38, 32, 0.08);
+  padding: 20px 24px;
 }
 
-.section-header {
+.section-header,
+.builder-card-header {
   display: flex;
-  align-items: start;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 20px;
+  gap: 12px;
+  margin-bottom: 16px;
 }
 
-.section-header h2 {
-  margin: 0 0 6px;
-  font-size: 1.35rem;
+.section-header h2,
+.builder-card-header h2 {
+  margin: 0 0 2px;
+  font-size: 15px;
+  font-weight: 600;
 }
 
-.section-header p {
+.section-header p,
+.builder-card-header p {
   margin: 0;
-  color: #66574e;
-  max-width: 720px;
+  color: var(--text-3);
+  font-size: 13px;
 }
 
 .section-actions {
   display: flex;
   align-items: center;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.builder-card-body {
+  display: grid;
+  gap: 16px;
+}
+
+.proto-grid {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 12px;
 }
 
-.stack-layout {
+.proto-card {
+  border: 2px solid var(--border);
+  border-radius: var(--radius-lg);
+  padding: 16px;
+  cursor: pointer;
+  transition: all 0.15s;
   display: grid;
-  gap: 16px;
+  gap: 10px;
+  background: var(--surface);
 }
 
-.split-layout {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 20px;
+.proto-card:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
 
-.form-grid {
+.selected-rest {
+  border-color: var(--rest-c);
+  background: var(--rest-bg);
+  box-shadow: 0 0 0 1px var(--rest-c), var(--shadow-md);
+}
+
+.selected-gql {
+  border-color: var(--gql-c);
+  background: var(--gql-bg);
+  box-shadow: 0 0 0 1px var(--gql-c), var(--shadow-md);
+}
+
+.selected-grpc {
+  border-color: var(--grpc-c);
+  background: var(--grpc-bg);
+  box-shadow: 0 0 0 1px var(--grpc-c), var(--shadow-md);
+}
+
+.proto-card-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.proto-card-copy {
   display: grid;
+  gap: 4px;
+  text-align: left;
+}
+
+.proto-card-copy h3 {
+  margin: 0;
+  font-size: 14px;
+}
+
+.proto-card-copy p {
+  margin: 0;
+  font-size: 12.5px;
+  color: var(--text-3);
+}
+
+.proto-icon {
+  height: 28px;
+  padding: 0 8px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 800;
+  letter-spacing: 0.07em;
+}
+
+.pi-rest {
+  background: var(--rest-bg);
+  color: var(--rest-c);
+  border: 1px solid var(--rest-border);
+}
+
+.pi-gql {
+  background: var(--gql-bg);
+  color: var(--gql-c);
+  border: 1px solid var(--gql-border);
+}
+
+.pi-grpc {
+  background: var(--grpc-bg);
+  color: var(--grpc-c);
+  border: 1px solid var(--grpc-border);
+}
+
+.proto-radio {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  border: 2px solid var(--border-2);
+  background: var(--surface);
+}
+
+.selected-rest .proto-radio,
+.selected-gql .proto-radio,
+.selected-grpc .proto-radio {
+  position: relative;
+}
+
+.selected-rest .proto-radio {
+  border-color: var(--rest-c);
+  background: var(--rest-c);
+}
+
+.selected-gql .proto-radio {
+  border-color: var(--gql-c);
+  background: var(--gql-c);
+}
+
+.selected-grpc .proto-radio {
+  border-color: var(--grpc-c);
+  background: var(--grpc-c);
+}
+
+.selected-rest .proto-radio::after,
+.selected-gql .proto-radio::after,
+.selected-grpc .proto-radio::after {
+  content: "";
+  position: absolute;
+  inset: 4px;
+  border-radius: 50%;
+  background: #ffffff;
+}
+
+.form-grid,
+.split-layout,
+.detail-columns,
+.summary-grid,
+.target-grid,
+.metadata-grid,
+.upload-grid,
+.result-grid,
+.hero-grid,
+.operation-grid {
+  display: grid;
+  gap: 14px;
+}
+
+.form-grid,
+.split-layout,
+.detail-columns,
+.result-grid {
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
+}
+
+.summary-grid,
+.target-grid,
+.metadata-grid,
+.upload-grid,
+.hero-grid,
+.operation-grid {
+  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
 }
 
 .field-block {
   display: grid;
-  gap: 8px;
+  gap: 5px;
+  align-content: start;
 }
 
 .field-block span {
-  font-size: 0.92rem;
+  font-size: 12.5px;
   font-weight: 600;
-  color: #52453e;
+  color: var(--text-2);
 }
 
 .field-hint {
-  color: #796b63;
-  font-size: 0.84rem;
-}
-
-.field-block input,
-.field-block textarea,
-.field-block select {
-  width: 100%;
-  border: 1px solid rgba(30, 26, 23, 0.14);
-  border-radius: 16px;
-  padding: 14px 16px;
-  background: rgba(255, 254, 252, 0.92);
-  color: #1e1a17;
-}
-
-.field-inline {
-  max-width: 420px;
-  margin-bottom: 18px;
+  font-size: 11.5px;
+  color: var(--text-4);
 }
 
 .field-block-wide {
   grid-column: 1 / -1;
 }
 
-.field-error {
-  color: #a1422c;
+.input,
+.select,
+.field-block input,
+.field-block textarea,
+.field-block select {
+  width: 100%;
+  border: 1px solid var(--border-2);
+  border-radius: var(--radius);
+  padding: 8px 12px;
+  font-size: 13.5px;
+  color: var(--text-1);
+  background: var(--surface);
+  transition: border-color 0.15s, box-shadow 0.15s;
+  outline: none;
+}
+
+.input:focus,
+.select:focus,
+.field-block input:focus,
+.field-block textarea:focus,
+.field-block select:focus {
+  border-color: var(--teal);
+  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.12);
+}
+
+.select,
+.field-block select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23667085' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 32px;
+}
+
+.field-block textarea,
+.textarea {
+  resize: vertical;
+  min-height: 80px;
+  line-height: 1.55;
+}
+
+.code-editor-shell {
+  border: 1px solid var(--border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+}
+
+.code-editor-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 14px;
+  background: #1e2330;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
+}
+
+.code-editor-toolbar small {
+  color: #8b949e;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.code-editor-dots {
+  display: flex;
+  gap: 5px;
+}
+
+.code-editor-dots span {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.code-editor-dots span:nth-child(1) {
+  background: #ff5f56;
+}
+
+.code-editor-dots span:nth-child(2) {
+  background: #ffbd2e;
+}
+
+.code-editor-dots span:nth-child(3) {
+  background: #27c93f;
+}
+
+.textarea-code {
+  border: 0;
+  border-radius: 0;
+  min-height: 180px;
+  padding: 16px;
+  background: #161b22;
+  color: #c9d1d9;
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 12.5px;
+  line-height: 1.65;
+}
+
+.textarea-code:focus {
+  box-shadow: none;
+}
+
+.info-banner {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 14px;
+  border-radius: var(--radius);
+  background: var(--teal-bg);
+  border: 1px solid var(--teal-border);
+  color: #134e4a;
+  font-size: 12.5px;
+}
+
+.info-banner p {
+  margin: 0;
+}
+
+.info-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 999px;
+  background: var(--teal);
+  margin-top: 4px;
+  flex-shrink: 0;
+}
+
+.section-divider {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin: 4px 0;
+}
+
+.section-divider-label {
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--text-4);
+  white-space: nowrap;
+}
+
+.section-divider-line {
+  flex: 1;
+  height: 1px;
+  background: var(--border);
 }
 
 .button-row {
   display: flex;
-  gap: 12px;
+  gap: 10px;
   flex-wrap: wrap;
 }
 
-.body-copy {
-  margin: 0;
-  color: #5c4f48;
-}
-
 .button-primary,
 .button-secondary {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-height: 46px;
-  padding: 0 18px;
-  border-radius: 999px;
+  gap: 6px;
+  padding: 9px 16px;
+  border-radius: var(--radius);
+  font-size: 13.5px;
+  font-weight: 600;
   border: none;
+  transition: all 0.15s;
 }
 
 .button-primary {
-  background: linear-gradient(135deg, #0f7567, #19735d);
-  color: white;
-  box-shadow: 0 18px 32px rgba(12, 84, 73, 0.18);
+  background: var(--teal);
+  color: #ffffff;
+  box-shadow: 0 1px 2px rgba(13, 148, 136, 0.3);
+}
+
+.button-primary:hover {
+  background: var(--teal-dark);
+  box-shadow: 0 4px 8px rgba(13, 148, 136, 0.3);
+}
+
+.button-primary-strong {
+  padding: 11px 22px;
+  font-size: 14px;
 }
 
 .button-secondary {
-  background: #ede1d1;
-  color: #2e2722;
+  background: var(--surface);
+  color: var(--text-2);
+  border: 1px solid var(--border-2);
+  box-shadow: var(--shadow-sm);
 }
 
-.operation-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-  gap: 18px;
+.button-secondary:hover {
+  background: var(--surface-2);
 }
 
-.hero-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
+.sticky-action-bar {
+  position: sticky;
+  bottom: 0;
+  z-index: 30;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   gap: 16px;
+  padding: 12px 20px;
+  border-radius: var(--radius-xl);
+  background: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(16px);
+  border: 1px solid var(--border);
+  box-shadow: var(--shadow);
+}
+
+.sticky-action-copy {
+  display: grid;
+  gap: 6px;
+}
+
+.sticky-action-copy p {
+  margin: 0;
+  color: var(--text-3);
+  font-size: 12.5px;
+}
+
+.field-error {
+  color: #a1422c;
+  font-size: 12px;
+}
+
+.body-copy {
+  margin: 0;
+  color: var(--text-3);
 }
 
 .hero-card {
+  padding: 18px;
   display: grid;
-  gap: 12px;
-  padding: 22px;
-  border-radius: 24px;
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  background: rgba(255, 252, 246, 0.92);
+  gap: 10px;
 }
 
-.hero-card-accent {
-  background:
-    radial-gradient(circle at top right, rgba(15, 117, 103, 0.12), transparent 34%),
-    linear-gradient(180deg, rgba(248, 242, 233, 0.98), rgba(255, 252, 246, 0.92));
-}
-
-.hero-card h3 {
+.hero-card h3,
+.operation-card h3,
+.result-panel h3,
+.service-card h3,
+.empty-state h3 {
   margin: 0;
-  font-size: 1.3rem;
+  font-size: 14px;
+  font-weight: 600;
 }
 
 .hero-metrics {
@@ -360,19 +896,19 @@ button {
 
 .hero-metrics div {
   display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 
 .hero-metrics span {
-  color: #71625b;
-  font-size: 0.82rem;
+  color: var(--text-4);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
 }
 
 .hero-metrics strong {
-  font-size: 1.7rem;
-  line-height: 1;
+  font-size: 22px;
 }
 
 .toolbar-row {
@@ -383,133 +919,68 @@ button {
   flex-wrap: wrap;
 }
 
+.field-inline {
+  max-width: 420px;
+}
+
 .toolbar-meta {
   display: flex;
-  gap: 10px;
+  gap: 8px;
   flex-wrap: wrap;
 }
 
-.empty-state {
-  display: grid;
-  gap: 12px;
-  justify-items: start;
-  padding: 26px;
-  border-radius: 24px;
-  border: 1px dashed rgba(30, 26, 23, 0.18);
-  background: rgba(253, 249, 243, 0.74);
-}
-
-.empty-state h3 {
-  margin: 0;
-  font-size: 1.15rem;
-}
-
-.empty-state p {
-  margin: 0;
-  color: #65574f;
-}
-
 .operation-card,
 .summary-card,
-.feedback-card,
-.result-panel {
-  border-radius: 22px;
-  background: rgba(255, 252, 247, 0.9);
-  border: 1px solid rgba(30, 26, 23, 0.08);
+.result-panel,
+.service-card,
+.empty-state {
+  padding: 18px;
 }
 
 .operation-card {
-  padding: 20px;
   display: grid;
   gap: 12px;
-  transition:
-    transform 0.16s ease,
-    box-shadow 0.16s ease;
+  transition: transform 0.15s, box-shadow 0.15s;
 }
 
 .operation-card:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 18px 40px rgba(37, 31, 28, 0.08);
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
 }
 
-.operation-card-top {
+.operation-card-top,
+.service-card-header,
+.service-method-top {
   display: flex;
   justify-content: space-between;
   gap: 12px;
-}
-
-.operation-card h3 {
-  margin: 0;
-  font-size: 1.15rem;
+  align-items: flex-start;
 }
 
 .operation-card-header {
   display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 
 .operation-name {
   margin: 0;
-  color: #65574f;
-  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
-  font-size: 0.9rem;
+  color: var(--text-3);
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 12.5px;
 }
 
 .card-link-row {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  margin-top: 4px;
-  color: #0f7567;
+  color: var(--teal);
   font-weight: 700;
-}
-
-.protocol-pill,
-.status-pill {
-  display: inline-flex;
-  align-items: center;
-  min-height: 30px;
-  padding: 0 12px;
-  border-radius: 999px;
-  font-size: 0.8rem;
-  font-weight: 700;
-  text-transform: uppercase;
-}
-
-.protocol-rest {
-  background: rgba(15, 117, 103, 0.12);
-  color: #0f7567;
-}
-
-.protocol-graphql {
-  background: rgba(181, 92, 41, 0.12);
-  color: #b55c29;
-}
-
-.protocol-grpc {
-  background: rgba(77, 74, 140, 0.12);
-  color: #4d4a8c;
-}
-
-.status-draft {
-  background: rgba(224, 184, 67, 0.18);
-  color: #845d0e;
-}
-
-.status-published {
-  background: rgba(57, 153, 92, 0.16);
-  color: #1c6a3e;
-}
-
-.status-testing,
-.status-archived {
-  background: rgba(102, 87, 78, 0.14);
-  color: #5a4d46;
+  font-size: 12.5px;
 }
 
 .key-value-list {
   display: grid;
-  gap: 10px;
+  gap: 8px;
   margin: 0;
 }
 
@@ -522,60 +993,31 @@ button {
 .key-value-list dt,
 .key-value-list dd {
   margin: 0;
+  color: var(--text-3);
 }
 
-.summary-grid {
+.summary-card {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
-  gap: 16px;
-}
-
-.detail-hero {
-  display: grid;
-  gap: 18px;
-}
-
-.detail-columns {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 24px;
-}
-
-.target-grid,
-.metadata-grid,
-.upload-grid,
-.service-grid {
-  display: grid;
-  gap: 16px;
-}
-
-.target-grid,
-.metadata-grid,
-.upload-grid {
-  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
-}
-
-.target-card {
-  border-radius: 22px;
-  padding: 18px;
-  background: linear-gradient(180deg, rgba(245, 239, 231, 0.95), rgba(255, 251, 246, 0.92));
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  display: grid;
-  gap: 6px;
+  gap: 4px;
 }
 
+.summary-card span,
 .target-card span {
-  color: #75675f;
-  font-size: 0.84rem;
+  color: var(--text-4);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
   text-transform: uppercase;
-  letter-spacing: 0.08em;
 }
 
+.summary-card strong,
 .target-card strong {
-  font-size: 0.96rem;
+  color: var(--text-1);
+  font-size: 14px;
   word-break: break-word;
 }
 
+.detail-hero,
 .page-subsection {
   display: grid;
   gap: 16px;
@@ -586,157 +1028,91 @@ button {
   gap: 4px;
 }
 
-.page-subsection-header h3,
-.service-card h3 {
+.page-subsection-header h3 {
   margin: 0;
+  font-size: 14px;
 }
 
 .page-subsection-header p,
-.service-card p {
+.service-card p,
+.empty-state p {
   margin: 0;
-  color: #6b5d55;
+  color: var(--text-3);
 }
 
-.protocol-selector-card {
-  border-radius: 24px;
-  padding: 20px;
-  background: linear-gradient(135deg, rgba(15, 117, 103, 0.08), rgba(234, 165, 91, 0.12));
-  border: 1px solid rgba(30, 26, 23, 0.08);
-}
-
-.protocol-brief {
-  display: grid;
-  align-content: start;
-  gap: 12px;
-}
-
-.protocol-brief p {
-  margin: 0;
-  color: #4e443f;
-}
-
-.summary-card {
-  padding: 18px;
+.target-card {
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: var(--surface-2);
+  border: 1px solid var(--border);
   display: grid;
   gap: 6px;
 }
 
-.summary-card span {
-  color: #6b5d55;
-  font-size: 0.88rem;
-}
-
-.summary-card strong {
-  font-size: 1rem;
-}
-
 .feedback-card {
   padding: 14px 16px;
 }
 
 .feedback-success {
-  border-color: rgba(28, 106, 62, 0.14);
-  background: rgba(243, 252, 246, 0.92);
+  border-color: rgba(6, 95, 70, 0.2);
+  background: #ecfdf5;
 }
 
 .feedback-error {
-  border-color: rgba(161, 66, 44, 0.18);
-  background: rgba(255, 246, 243, 0.92);
-}
-
-.result-grid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 16px;
-}
-
-.result-panel {
-  padding: 18px;
-  overflow: hidden;
-}
-
-.service-card {
-  border-radius: 24px;
-  padding: 20px;
-  background: rgba(255, 252, 247, 0.92);
-  border: 1px solid rgba(30, 26, 23, 0.08);
-  display: grid;
-  gap: 18px;
-}
-
-.service-card-header,
-.service-method-top {
-  display: flex;
-  align-items: start;
-  justify-content: space-between;
-  gap: 12px;
-}
-
-.service-method-list {
-  display: grid;
-  gap: 18px;
-}
-
-.service-method {
-  display: grid;
-  gap: 12px;
-}
-
-.result-panel h3 {
-  margin-top: 0;
+  border-color: rgba(185, 28, 28, 0.15);
+  background: #fef2f2;
 }
 
 pre {
   margin: 0;
   white-space: pre-wrap;
   word-break: break-word;
-  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;
-  font-size: 0.84rem;
-  line-height: 1.55;
+  font-family: "JetBrains Mono", "Fira Code", monospace;
+  font-size: 12px;
+  line-height: 1.6;
 }
 
 .yaml-panel {
-  padding: 18px;
-  border-radius: 20px;
-  background: rgba(34, 30, 28, 0.96);
-  color: #f6efe6;
+  padding: 16px;
+  border-radius: var(--radius-lg);
+  background: #161b22;
+  color: #c9d1d9;
 }
 
-@media (max-width: 1080px) {
+@media (max-width: 1160px) {
   .layout-shell {
     grid-template-columns: 1fr;
   }
 
   .layout-sidebar {
-    border-right: none;
-    border-bottom: 1px solid rgba(30, 26, 23, 0.08);
+    position: static;
+    height: auto;
   }
 
-  .workspace-header {
-    flex-direction: column;
+  .topbar {
+    padding: 0 20px;
+  }
+
+  .main-content {
+    padding: 20px;
   }
 }
 
 @media (max-width: 820px) {
-  .layout-main {
-    padding: 20px;
-  }
-
-  .page-section {
-    padding: 20px;
+  .topbar,
+  .section-header,
+  .builder-card-header,
+  .toolbar-row,
+  .sticky-action-bar {
+    flex-direction: column;
+    align-items: stretch;
   }
 
   .form-grid,
   .split-layout,
+  .detail-columns,
   .result-grid,
-  .detail-columns {
-    grid-template-columns: 1fr;
-  }
-
-  .section-header {
-    flex-direction: column;
-  }
-
+  .proto-grid,
   .hero-metrics {
     grid-template-columns: 1fr;
   }