Add Configuration Actions tab for shell and script action definitions.

Admins can manage built-in and custom actions with placeholders, ENV vars, and actions.create/update/delete permissions.

webui/src/App.css

@@ -133,7 +133,7 @@
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
-  max-width: 40rem;
+  width: 100%;
 }
 
 .profile-section {
@@ -300,14 +300,14 @@
 
 .config-tab-panel {
   min-width: 0;
-  max-width: 40rem;
+  width: 100%;
 }
 
 .config-field {
   display: flex;
   flex-direction: column;
   gap: 0.4rem;
-  max-width: 28rem;
+  max-width: 36rem;
 }
 
 .config-field label {
@@ -347,7 +347,6 @@
 
 .config-empty {
   margin: 0;
-  max-width: 36rem;
   line-height: 1.5;
   color: var(--ctp-subtext1);
 }
@@ -432,7 +431,6 @@
   margin: 0;
   font-size: 0.85rem;
   line-height: 1.4;
-  max-width: 40rem;
   word-break: break-word;
 }
 
@@ -448,7 +446,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
-  max-width: 36rem;
+  width: 100%;
+  max-width: 48rem;
 }
 
 .resource-add-form .field {
@@ -566,14 +565,14 @@
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
-  max-width: 40rem;
+  width: 100%;
 }
 
 .security-panel {
   display: flex;
   flex-direction: column;
   gap: 0.9rem;
-  max-width: 40rem;
+  width: 100%;
 }
 
 .groups-list {
@@ -652,11 +651,13 @@
   cursor: pointer;
 }
 
+.groups-edit:disabled,
 .groups-delete:disabled {
   opacity: 0.45;
   cursor: not-allowed;
 }
 
+.groups-edit:disabled:hover,
 .groups-delete:disabled:hover {
   background: transparent;
   color: var(--ctp-text);
@@ -732,11 +733,198 @@
   background: var(--ctp-mauve-hover);
 }
 
+.groups-save:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.groups-save:disabled:hover {
+  background: var(--ctp-mauve);
+  filter: none;
+}
+
 .groups-save:focus-visible {
   outline: 2px solid var(--ctp-mauve);
   outline-offset: 2px;
 }
 
+.actions-panel {
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  width: 100%;
+}
+
+.actions-layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 1.25rem;
+}
+
+.actions-list {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+.actions-list-header {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.75rem;
+}
+
+.actions-list-header .config-hint {
+  margin: 0;
+}
+
+.actions-body-preview {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
+    monospace;
+  font-size: 0.8rem;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.actions-placeholders {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  flex: 0 0 24.75rem;
+  max-width: 27rem;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--ctp-surface1);
+  border-radius: 0.35rem;
+  background: var(--ctp-mantle);
+  position: sticky;
+  top: 1rem;
+}
+
+@media (max-width: 52rem) {
+  .actions-layout {
+    flex-direction: column;
+  }
+
+  .actions-placeholders {
+    flex: 1 1 auto;
+    max-width: none;
+    width: 100%;
+    position: static;
+  }
+}
+
+.actions-placeholders-intro {
+  margin: 0;
+}
+
+.actions-placeholder-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+}
+
+.actions-placeholder-list li {
+  display: flex;
+  flex-direction: column;
+  gap: 0.15rem;
+  font-size: 0.85rem;
+  color: var(--ctp-subtext0);
+}
+
+.actions-placeholder-list code {
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
+    monospace;
+  color: var(--ctp-text);
+  font-size: 0.85rem;
+}
+
+.actions-placeholder-example {
+  color: var(--ctp-overlay1);
+  font-size: 0.8rem;
+}
+
+.actions-type-modal {
+  width: min(28rem, 100%);
+}
+
+.actions-editor-modal {
+  width: min(36rem, 100%);
+  max-height: min(90vh, 40rem);
+  overflow: auto;
+}
+
+.actions-type-choices {
+  display: flex;
+  flex-direction: column;
+  gap: 0.65rem;
+  margin: 0.75rem 0 1rem;
+}
+
+.actions-type-choice {
+  appearance: none;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.35rem;
+  text-align: left;
+  width: 100%;
+  padding: 0.75rem 0.9rem;
+  border: 1px solid var(--ctp-surface1);
+  border-radius: 0.35rem;
+  background: var(--ctp-surface0);
+  color: var(--ctp-text);
+  font: inherit;
+  cursor: pointer;
+}
+
+.actions-type-choice:hover {
+  border-color: var(--ctp-mauve);
+  background: var(--ctp-mantle);
+}
+
+.actions-type-choice:focus-visible {
+  outline: 2px solid var(--ctp-mauve);
+  outline-offset: 2px;
+}
+
+.actions-type-choice strong {
+  font-size: 0.95rem;
+}
+
+.actions-type-choice span {
+  font-size: 0.85rem;
+  color: var(--ctp-subtext0);
+  line-height: 1.4;
+}
+
+.actions-script-input {
+  resize: vertical;
+  min-height: 8rem;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas,
+    monospace;
+  font-size: 0.85rem;
+}
+
+.actions-env-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  margin-bottom: 0.5rem;
+}
+
+.actions-env-row {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto;
+  gap: 0.4rem;
+  align-items: center;
+}
+
 .config-actions {
   display: flex;
   flex-wrap: wrap;
@@ -744,7 +932,7 @@
   gap: 0.6rem;
   padding-top: 1rem;
   border-top: 1px solid var(--ctp-surface1);
-  max-width: 40rem;
+  width: 100%;
 }
 
 .config-action-revert,