feat: edit workflow contracts in console

web/apps/console/src/styles/global.css

@@ -1978,6 +1978,89 @@ tbody tr:hover {
   margin: 0;
 }
 
+.workflow-contract-inspector,
+.workflow-schema-fields-form,
+.workflow-output-bindings,
+.workflow-outcomes-form {
+  display: grid;
+  gap: 0.75rem;
+  min-width: 0;
+}
+
+.workflow-contract-inspector {
+  padding: 0.75rem;
+  border: 1px solid var(--color-border);
+  background: #fff;
+}
+
+.workflow-contract-inspector h2,
+.workflow-contract-inspector h3,
+.workflow-contract-inspector h4 {
+  margin: 0;
+}
+
+.workflow-contract-inspector__status,
+.workflow-contract-inspector__impact {
+  padding: 0.55rem 0.65rem;
+  border-left: 3px solid var(--color-signal-amber);
+  background: #fff8e8;
+  color: var(--color-ink);
+  font-size: 0.8rem;
+}
+
+.workflow-schema-field,
+.workflow-output-bindings fieldset {
+  display: grid;
+  gap: 0.55rem;
+  min-width: 0;
+  padding: 0.7rem;
+  border: 1px solid var(--color-border);
+}
+
+.workflow-schema-field > label,
+.workflow-schema-field__state > label,
+.workflow-contract-entry label,
+.workflow-output-bindings fieldset > label,
+.workflow-outcomes-form label {
+  display: grid;
+  gap: 0.25rem;
+  color: var(--color-slate);
+  font-size: 0.76rem;
+  font-weight: 650;
+}
+
+.workflow-schema-field__state,
+.workflow-schema-field__children {
+  display: grid;
+  gap: 0.55rem;
+  padding-left: 0.65rem;
+  border-left: 2px solid var(--color-signal-green);
+}
+
+.workflow-schema-field--unsupported {
+  border-color: var(--color-signal-amber);
+  background: #fffaf0;
+}
+
+.workflow-schema-field pre,
+.workflow-output-bindings textarea {
+  max-width: 100%;
+  overflow: auto;
+}
+
+.workflow-contract-entry,
+.workflow-output-bindings__actions,
+.workflow-outcomes-form > div {
+  display: flex;
+  align-items: end;
+  gap: 0.5rem;
+}
+
+.workflow-contract-entry label,
+.workflow-outcomes-form label {
+  flex: 1;
+}
+
 .selected-capability-inspector {
   display: grid;
   align-content: start;