dsh-audiogen 0.2.0 → 0.3.2

package/src/client/settings-card.module.css

@@ -1,8 +1,10 @@
 /**
- * dsh-imagegen settings card styles. Mirrors the official plugin-config card
+ * dsh-audiogen settings card styles. Mirrors the official plugin-config card
  * chrome (@deepseek-ai/dsh-client-ui-settings-plugins PluginCard + fields) so
  * the card reads as a sibling of the bash / agent-loop / web-search cards;
- * colors ride the dsh --dsw-* tokens.
+ * colors ride the dsh --dsw-* tokens. The channel section follows the DSH
+ * "模型" settings design language: provider rows, equal-width add actions and
+ * the inline channel editor (provider select, API key, 自定义设置, 模型目录).
  */
 
 .card {
@@ -95,32 +97,6 @@
   padding-bottom: 8px;
 }
 
-.versionRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 12px 0;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
-}
-
-.versionLabel {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-primary);
-}
-
-.versionValue {
-  padding: 1px 8px;
-  border-radius: 999px;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-secondary);
-  font-family: var(--dsw-font-family-mono, monospace);
-  font-size: 12px;
-  line-height: 1.5;
-}
-
 /* --- fields (mirror of the official plugin-config fields) --------------------- */
 
 .field {
@@ -149,23 +125,6 @@
   color: var(--dsw-alias-label-primary);
 }
 
-.badges {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.badge {
-  border-radius: 999px;
-  padding: 1px 8px;
-  font-size: 11px;
-  line-height: 17px;
-  white-space: nowrap;
-  font-weight: 500;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-secondary);
-}
-
 .reset {
   border: none;
   background: none;
@@ -188,6 +147,7 @@
 
 .input,
 .select {
+  box-sizing: border-box;
   height: 34px;
   padding: 0 12px;
   border: 1px solid var(--dsw-alias-border-l2);
@@ -211,66 +171,7 @@
   cursor: default;
 }
 
-.inputInvalid {
-  height: 34px;
-  padding: 0 12px;
-  border: 1px solid var(--dsw-alias-label-error);
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-3);
-  font: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-primary);
-  outline: none;
-}
-
-.textarea,
-.textareaInvalid {
-  min-height: 70px;
-  resize: vertical;
-  padding: 8px 12px;
-  border-radius: 8px;
-  background: var(--dsw-alias-bg-layer-3);
-  font: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-primary);
-  outline: none;
-}
-
-.textarea { border: 1px solid var(--dsw-alias-border-l2); }
-.textareaInvalid { border: 1px solid var(--dsw-alias-label-error); }
-.textarea:focus-visible { border-color: var(--dsw-alias-brand-primary); }
-.textarea:disabled { color: var(--dsw-alias-label-tertiary); cursor: default; }
-
-.hint,
-.invalid {
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.5;
-}
-
-.hint {
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.invalid {
-  color: var(--dsw-alias-label-error);
-}
-
-.readOnly,
-.notExposed {
-  margin: 12px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.sectionDivider {
-  height: 1px;
-  margin: 18px 0 14px;
-  background: var(--dsw-alias-border-l2);
-}
+/* --- section chrome ---------------------------------------------------------- */
 
 .sectionTitle {
   margin: 0;
@@ -286,10 +187,6 @@
   line-height: 1.5;
 }
 
-.modelSection {
-  padding: 2px 0 14px;
-}
-
 .sectionHeader {
   display: flex;
   align-items: flex-start;
@@ -301,381 +198,158 @@
   max-width: 430px;
 }
 
-.modelSummary {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  margin-top: 12px;
-}
-
-.modelChip {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-  gap: 5px;
-  padding: 3px 5px 3px 8px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
-  background: var(--dsw-alias-bg-layer-3);
-  color: var(--dsw-alias-label-primary);
-  font-family: var(--dsw-font-family-mono, monospace);
+.readOnly {
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
 }
 
-.modelChip > span {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.link {
+  color: var(--dsw-alias-brand-primary);
+  text-decoration: none;
 }
 
-.modelChip button {
-  appearance: none;
-  border: 0;
-  border-radius: 4px;
-  width: 18px;
-  height: 18px;
-  padding: 0;
-  background: transparent;
-  color: var(--dsw-alias-label-tertiary);
-  font: inherit;
-  line-height: 18px;
-  cursor: pointer;
+.link:hover {
+  text-decoration: underline;
 }
 
-.modelChip button:hover:not(:disabled) { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-module-platform); }
-.modelChip button:disabled { cursor: default; opacity: 0.45; }
+/* --- channel rows (provider list) --------------------------------------------- */
 
-.addModel {
-  appearance: none;
-  min-height: 28px;
-  border: 1px dashed var(--dsw-alias-border-l2);
-  border-radius: 6px;
-  padding: 0 9px;
-  background: transparent;
-  color: var(--dsw-alias-label-secondary);
-  font: inherit;
-  font-size: 12px;
-  cursor: pointer;
+.channelSection {
+  padding: 6px 0 2px;
 }
 
-.addModel:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); }
-.addModel:disabled { opacity: 0.45; cursor: default; }
+.channelEmpty {
+  margin: 10px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+}
 
-.manualModelRow {
+.channelList {
+  list-style: none;
+  margin: 10px 0 0;
+  padding: 0;
   display: flex;
-  gap: 8px;
-  margin-top: 10px;
+  flex-direction: column;
+  gap: 6px;
 }
 
-.manualModelRow .input { min-width: 0; flex: 1; }
-
-.disclosure {
-  width: 100%;
-  appearance: none;
+.channelRow {
   display: flex;
   align-items: center;
-  gap: 8px;
-  border: 0;
-  border-top: 1px solid var(--dsw-alias-border-l2);
-  padding: 13px 0;
-  background: none;
-  color: var(--dsw-alias-label-primary);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 500;
-  text-align: left;
-  cursor: pointer;
+  gap: 10px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  padding: 8px 10px;
+  background: var(--dsw-alias-bg-layer-3);
+}
+
+.channelRow[data-action] {
+  flex-wrap: wrap;
+}
+
+.channelDotReady,
+.channelDotWarn {
+  flex: none;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
 }
 
-.disclosure > span:nth-child(2) { margin-left: auto; color: var(--dsw-alias-label-tertiary); font-size: 12px; font-weight: 400; }
-.disclosure > span:last-child { color: var(--dsw-alias-label-tertiary); }
-.disclosure:focus-visible { outline: 2px solid var(--dsw-alias-brand-primary); outline-offset: 2px; }
+.channelDotReady {
+  background: var(--dsw-color-success, #2fbf71);
+}
 
-.optionalContent {
-  padding: 0 0 8px;
+.channelDotWarn {
+  background: var(--dsw-color-danger, #e5484d);
 }
 
-.inlineDisclosure {
+.channelMain {
   appearance: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 12px;
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
   padding: 0;
   border: 0;
   background: none;
-  color: var(--dsw-alias-label-secondary);
   font: inherit;
-  font-size: 12px;
+  text-align: left;
   cursor: pointer;
 }
 
-.inlineDisclosure:hover { color: var(--dsw-alias-label-primary); }
+.channelName {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 1.4;
+  color: var(--dsw-alias-label-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 
-.modelFetchRow {
+.channelMeta {
   display: flex;
-  gap: 8px;
   align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 8px;
 }
 
-.modelFetch,
-.modelChoices {
-  min-height: 32px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 7px;
-  background: var(--dsw-alias-bg-layer-3);
-  color: var(--dsw-alias-label-secondary);
-  font: inherit;
-  font-size: 12px;
+.channelHost {
+  font-size: 11px;
+  line-height: 1.5;
+  color: var(--dsw-alias-label-tertiary);
+  font-family: var(--dsw-font-family-mono, monospace);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  max-width: 180px;
 }
 
-.modelFetch { padding: 0 10px; cursor: pointer; }
-.modelFetch:hover:not(:disabled) { color: var(--dsw-alias-brand-primary); border-color: var(--dsw-alias-brand-primary); }
-.modelFetch:disabled { opacity: 0.5; cursor: default; }
-.modelChoices { min-width: 0; flex: 1; padding: 0 8px; }
-
-.modelCandidateList {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px 10px;
-  margin-top: 10px;
+.channelBadge {
+  border-radius: 999px;
+  padding: 0 7px;
+  font-size: 11px;
+  line-height: 17px;
+  white-space: nowrap;
+  font-weight: 500;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
 }
 
-.modelCandidateLabel {
-  width: 100%;
-  color: var(--dsw-alias-label-tertiary);
-  font-size: 12px;
+.channelBadge[data-warn] {
+  color: var(--dsw-alias-label-error);
 }
 
-.modelCandidate {
+.channelAction {
   appearance: none;
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  min-width: 0;
-  color: var(--dsw-alias-label-secondary);
+  flex: none;
+  border: 0;
+  background: none;
+  padding: 4px 8px;
+  border-radius: 6px;
+  font: inherit;
   font-size: 12px;
   line-height: 1.5;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
-  padding: 3px 6px;
-  border: 1px solid transparent;
-  border-radius: 5px;
-  background: var(--dsw-alias-bg-layer-3);
-  font: inherit;
 }
 
-.modelCandidate input { margin: 0; }
-.modelCandidate[data-selected] { border-color: var(--dsw-alias-border-l2); color: var(--dsw-alias-label-primary); }
+.channelAction:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-module-platform);
+}
 
-/* --- footer (mirror of the official card footer) ------------------------------ */
+.channelAction[data-danger] {
+  color: var(--dsw-alias-label-error);
+}
 
-.footer {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  gap: 8px;
-  padding: 12px 0 4px;
-  border-top: 1px solid var(--dsw-alias-border-l2);
-}
-
-.failed {
-  flex: 1;
-  min-width: 0;
-  margin: 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-error);
-}
-
-.discard,
-.save {
-  appearance: none;
-  border: 1px solid transparent;
-  border-radius: 8px;
-  padding: 5px 14px;
-  font: inherit;
-  font-size: 13px;
-  line-height: 1.5;
-  cursor: pointer;
-}
-
-.discard {
-  border-color: var(--dsw-alias-border-l2);
-  background: none;
-  color: var(--dsw-alias-label-secondary);
-}
-
-.discard:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
-  border-color: var(--dsw-alias-label-dimmed);
-}
-
-.save {
-  background: var(--dsw-alias-label-primary);
-  color: var(--dsw-alias-bg-layer-3);
-}
-
-.discard:disabled,
-.save:disabled {
-  opacity: 0.4;
-  cursor: default;
-}
-
-.discard:focus-visible,
-.save:focus-visible {
-  outline: 2px solid var(--dsw-alias-brand-primary);
-  outline-offset: 1px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .card, .chevron, .chevronOpen {
-    transition: none;
-  }
-}
-
-/* --- channel list ------------------------------------------------------------------ */
-
-.channelSection {
-  padding: 6px 0 2px;
-}
-
-.channelEmpty {
-  margin: 10px 0 0;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.channelList {
-  list-style: none;
-  margin: 10px 0 0;
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.channelRow {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
-  padding: 8px 10px;
-  background: var(--dsw-alias-bg-layer-3);
-}
-
-.channelRow[data-action] {
-  flex-wrap: wrap;
-}
-
-.channelDotReady,
-.channelDotWarn {
-  flex: none;
-  width: 9px;
-  height: 9px;
-  border-radius: 50%;
-}
-
-.channelDotReady {
-  background: var(--dsw-color-success, #2fbf71);
-}
-
-.channelDotWarn {
-  background: var(--dsw-color-danger, #e5484d);
-}
-
-.channelMain {
-  appearance: none;
-  flex: 1;
-  min-width: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  padding: 0;
-  border: 0;
-  background: none;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
-}
-
-.channelName {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--dsw-alias-label-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.channelMeta {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px 8px;
-}
-
-.channelHost {
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-tertiary);
-  font-family: var(--dsw-font-family-mono, monospace);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 180px;
-}
-
-.channelBadge {
-  border-radius: 999px;
-  padding: 0 7px;
-  font-size: 11px;
-  line-height: 17px;
-  white-space: nowrap;
-  font-weight: 500;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-secondary);
-}
-
-.channelBadge[data-warn] {
-  color: var(--dsw-alias-label-error);
-}
-
-.channelBadge[data-default] {
-  background: var(--dsw-alias-bg-module-poped, var(--dsw-alias-bg-module-platform));
-  color: var(--dsw-alias-brand-primary);
-}
-
-.channelAction {
-  appearance: none;
-  flex: none;
-  border: 0;
-  background: none;
-  padding: 4px 8px;
-  border-radius: 6px;
-  font: inherit;
-  font-size: 12px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-secondary);
-  cursor: pointer;
-}
-
-.channelAction:hover:not(:disabled) {
-  color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-module-platform);
-}
-
-.channelAction[data-danger] {
-  color: var(--dsw-alias-label-error);
-}
-
-.channelAction:disabled {
-  opacity: 0.45;
-  cursor: default;
+.channelAction:disabled {
+  opacity: 0.45;
+  cursor: default;
 }
 
 .channelDanger {
@@ -708,17 +382,22 @@
   color: var(--dsw-alias-label-error);
 }
 
+/* The two ways to gain a channel: equal-width siblings spanning the same width
+   as the rows above, dashed like every other "nothing here yet" affordance. */
 .channelAddRow {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 10px;
   margin-top: 10px;
 }
 
 .channelAdd {
   appearance: none;
-  min-height: 30px;
-  border: 1px dashed var(--dsw-alias-border-l2);
-  border-radius: 8px;
+  flex: 1 1 0;
+  min-width: 180px;
+  min-height: 44px;
+  border: 1px dashed var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: 12px;
   padding: 0 12px;
   background: transparent;
   color: var(--dsw-alias-label-secondary);
@@ -737,115 +416,178 @@
   cursor: default;
 }
 
-.spacer {
-  flex: 1;
-}
-
-/* --- editor dialog ------------------------------------------------------------------- */
+/* --- channel editor ----------------------------------------------------------- */
 
-.editorBackdrop {
-  position: fixed;
-  inset: 0;
-  z-index: 120;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: 9vh 16px 16px;
-  background: color-mix(in srgb, var(--dsw-alias-bg-layer-1, #000) 45%, transparent);
+.editorWrap {
+  margin-top: 10px;
 }
 
-.editorPanel {
-  width: min(560px, 100%);
-  max-height: 82vh;
-  overflow-y: auto;
+.channelEditor {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 14px;
-  background: var(--dsw-alias-bg-layer-2);
-  box-shadow: 0 18px 50px rgb(0 0 0 / 0.35);
-  padding: 16px;
+  border-radius: 12px;
+  background: var(--dsw-alias-bg-module-platform);
+  padding: 14px 16px;
 }
 
 .editorHeader {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 12px;
-  padding-bottom: 10px;
-  border-bottom: 1px solid var(--dsw-alias-border-l2);
+  align-items: baseline;
+  gap: 8px;
+  padding-bottom: 4px;
 }
 
-.editorClose {
-  appearance: none;
-  flex: none;
-  width: 26px;
-  height: 26px;
-  border: 0;
-  border-radius: 6px;
-  background: none;
+.editorTitle {
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: 600;
+  color: var(--dsw-alias-label-primary);
+}
+
+.editorTag {
+  font-size: 12px;
+  line-height: 18px;
   color: var(--dsw-alias-label-tertiary);
-  font: inherit;
-  font-size: 16px;
-  line-height: 26px;
+}
+
+/* 自定义设置 disclosure */
+.customSettings {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  padding-top: 10px;
+  margin-top: 6px;
+}
+
+.customSettingsSummary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: fit-content;
+  padding: 2px 4px;
+  margin-left: -4px;
+  border-radius: 6px;
   cursor: pointer;
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+  list-style: none;
+}
+
+.customSettingsSummary::-webkit-details-marker {
+  display: none;
+}
+
+.customSettingsSummary::before {
+  content: '';
+  width: 5px;
+  height: 5px;
+  border-right: 1.5px solid currentcolor;
+  border-bottom: 1.5px solid currentcolor;
+  transform: rotate(-45deg) translate(-1px, -1px);
+  transition: transform 120ms ease;
+}
+
+.customSettings[open] > .customSettingsSummary::before {
+  transform: rotate(45deg) translate(-1px, -1px);
 }
 
-.editorClose:hover {
+.customSettingsSummary:hover {
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-alias-bg-module-platform);
 }
 
-.editorField {
+.customSettingsSummary:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
+}
+
+.customSettingsBody {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-top: 10px;
+}
+
+/* --- model catalog ------------------------------------------------------------ */
+
+.modelCatalog {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-top: 6px;
+  padding-top: 12px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.modelCatalogHead {
   display: flex;
-  flex-direction: column;
-  gap: 6px;
-  padding: 12px 0 0;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+}
+
+.modelCatalogTitle {
+  display: block;
+  font-size: 13px;
+  line-height: 1.5;
+  font-weight: 500;
+  color: var(--dsw-alias-label-primary);
 }
 
-.editorDivider {
-  height: 1px;
-  margin: 14px 0 4px;
-  background: var(--dsw-alias-border-l2);
+.modelCatalogMeta {
+  display: block;
+  margin-top: 1px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+  line-height: 1.5;
 }
 
-.editorSectionHeader {
-  display: flex;
+.linkButton {
+  box-sizing: border-box;
+  display: inline-flex;
   align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  padding: 10px 0 4px;
+  height: 28px;
+  padding: 0 10px;
+  border: none;
+  border-radius: 14px;
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font: inherit;
+  font-size: 12px;
+  line-height: 18px;
+  cursor: pointer;
 }
 
-.editorSectionHeader .label {
-  flex: 1;
+.linkButton:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover, var(--dsw-alias-bg-module-platform));
+  color: var(--dsw-alias-label-secondary);
 }
 
-.editorTools {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  margin-top: 10px;
+.linkButton:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
 }
 
-.editorFooter {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding-top: 12px;
-  border-top: 1px solid var(--dsw-alias-border-l2);
+.linkButton:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
-.detectOk {
+.modelEmpty {
   margin: 0;
+  padding: 12px;
+  border: 1px dashed var(--dsw-alias-border-l3, var(--dsw-alias-border-l2));
+  border-radius: 8px;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
   font-size: 12px;
-  line-height: 1.5;
-  color: var(--dsw-color-success, var(--dsw-alias-label-secondary));
+  line-height: 18px;
 }
 
-/* --- model catalog rows ---------------------------------------------------------------- */
-
 .modelRows {
   list-style: none;
-  margin: 8px 0 0;
+  margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
@@ -853,72 +595,43 @@
 }
 
 .modelRow {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
-  padding: 8px 10px;
-  background: var(--dsw-alias-bg-layer-3);
-}
-
-.modelRowInputs {
-  flex: 1;
-  min-width: 0;
-  display: flex;
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr) auto auto;
   align-items: center;
   gap: 6px;
 }
 
-.modelRowInputs .input {
-  flex: 1;
+.modelInput {
   min-width: 0;
+  height: 32px;
 }
 
 .modelArrow {
-  flex: none;
   color: var(--dsw-alias-label-tertiary);
   font-size: 12px;
 }
 
-.modelRowBadges {
-  flex: none;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-.modelBadge {
-  border-radius: 999px;
-  padding: 0 7px;
-  font-size: 11px;
-  line-height: 17px;
-  white-space: nowrap;
-  background: var(--dsw-alias-bg-module-platform);
-  color: var(--dsw-alias-label-tertiary);
-}
-
-.modelBadge[data-verified] {
-  color: var(--dsw-color-success, var(--dsw-alias-label-secondary));
-}
-
-.modelBadge[data-warn] {
-  color: var(--dsw-alias-label-error);
+.modelCategorySelect {
+  min-width: 0;
+  max-width: 108px;
+  height: 32px;
+  padding: 0 6px;
+  cursor: pointer;
 }
 
 .modelRowRemove {
   appearance: none;
   flex: none;
-  width: 20px;
-  height: 20px;
+  width: 24px;
+  height: 24px;
   border: 0;
-  border-radius: 4px;
+  border-radius: 6px;
   padding: 0;
   background: transparent;
   color: var(--dsw-alias-label-tertiary);
   font: inherit;
-  line-height: 20px;
+  font-size: 14px;
+  line-height: 24px;
   cursor: pointer;
 }
 
@@ -932,92 +645,196 @@
   cursor: default;
 }
 
-.modelCandidate > .modelBadge {
-  flex: none;
+.modelCatalogTools {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.addModel {
+  appearance: none;
+  min-height: 30px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  padding: 0 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  cursor: pointer;
+}
+
+.addModel:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
 }
 
-/* --- preset picker ---------------------------------------------------------------------- */
+.addModel:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
 
-.channelControls {
-  position: relative;
+.modelBadge {
+  flex: none;
+  border-radius: 999px;
+  padding: 0 7px;
+  font-size: 11px;
+  line-height: 17px;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-tertiary);
 }
 
-.presetInline {
-  position: absolute;
-  left: 0;
-  bottom: calc(100% + 8px);
-  z-index: 10;
-  width: min(420px, calc(100vw - 48px));
-  max-height: min(440px, 60vh);
-  overflow-y: auto;
+.detectOk {
   margin: 0;
-  padding: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: var(--dsw-color-success, var(--dsw-alias-label-secondary));
+}
+
+/* discovered-model candidate picker */
+.candidatePanel {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
   border: 1px solid var(--dsw-alias-border-l2);
   border-radius: 10px;
-  background: var(--dsw-alias-bg-layer-2);
-  box-shadow: 0 12px 30px rgb(0 0 0 / 0.3);
+  background: var(--dsw-alias-bg-layer-3);
+  padding: 10px 12px;
 }
 
-.presetInlineHeader {
+.candidateHead {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 12px;
 }
 
-.presetList {
+.candidateTitle {
+  font-size: 12px;
+  line-height: 18px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.candidateList {
+  list-style: none;
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 8px;
-  margin-top: 12px;
+  gap: 4px;
+  max-height: 220px;
+  overflow-y: auto;
 }
 
-.presetRow {
-  appearance: none;
+.candidate {
   display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: 3px;
-  width: 100%;
-  border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 10px;
-  padding: 10px 12px;
-  background: var(--dsw-alias-bg-layer-3);
-  color: inherit;
-  font: inherit;
-  text-align: left;
-  cursor: pointer;
+  align-items: center;
 }
 
-.presetRow:hover:not(:disabled) {
-  border-color: var(--dsw-alias-brand-primary);
+.candidateLabel {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  min-width: 0;
+  padding: 4px 2px;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 1.5;
+  cursor: pointer;
 }
 
-.presetRow[data-custom] {
-  border-style: dashed;
+.candidateLabel input {
+  margin: 0;
 }
 
-.presetRow:disabled {
-  opacity: 0.5;
+.candidateLabel:has(input:disabled) {
+  opacity: 0.55;
   cursor: default;
 }
 
-.presetName {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.4;
-  color: var(--dsw-alias-label-primary);
+.candidateId {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--dsw-font-family-mono, monospace);
 }
 
-.presetMeta {
-  font-size: 11px;
-  line-height: 1.5;
-  color: var(--dsw-alias-label-tertiary);
-  font-family: var(--dsw-font-family-mono, monospace);
+.candidateActions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
 }
 
-.presetHint {
+/* --- footer (mirror of the official card footer) ------------------------------ */
+
+.footer,
+.editorFooter {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 8px;
+  padding: 12px 0 4px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.editorFooter {
+  margin-top: 8px;
+}
+
+.failed {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
   font-size: 12px;
   line-height: 1.5;
+  color: var(--dsw-alias-label-error);
+}
+
+.discard,
+.save {
+  appearance: none;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font: inherit;
+  font-size: 13px;
+  line-height: 1.5;
+  cursor: pointer;
+}
+
+.discard {
+  border-color: var(--dsw-alias-border-l2);
+  background: none;
   color: var(--dsw-alias-label-secondary);
 }
+
+.discard:hover:not(:disabled) {
+  color: var(--dsw-alias-label-primary);
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
+.save {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
+}
+
+.discard:disabled,
+.save:disabled {
+  opacity: 0.4;
+  cursor: default;
+}
+
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .card, .chevron, .chevronOpen {
+    transition: none;
+  }
+}