@linxin666/dsh-client-ui-task-board 0.1.12 → 0.1.14

package/lib/types/client/apply-guard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Cross-module-instance apply guard for the task-board client bundle.
+ *
+ * The client factory can run more than once in a single page lifetime (for
+ * example when a stale bundle is mixed with a rebuilt one while `dsh web` is
+ * restarted). Without a guard, every factory run mounts its own sidebar entry
+ * and board view, so the shell ends up showing two "task board" rows.
+ *
+ * The flag lives on globalThis so separate module instances (independent
+ * factory runs) still share one guard. First claim wins; later claims become
+ * no-ops until the claim is released (fiber unload / hot-reload) or the page
+ * reloads.
+ */
+declare global {
+    var __dshTaskboardApplied: boolean | undefined;
+}
+/** Claims the plugin apply slot. Returns true when this call won the slot. */
+export declare function claimTaskboardApply(): boolean;
+/**
+ * Releases the claim. Called from the client fiber cleanup so that a
+ * hot-reloaded bundle (the loader unloads the old plugin fiber and invokes
+ * the rebuilt one in the same page) can claim again instead of being
+ * silently dropped.
+ */
+export declare function releaseTaskboardApply(): void;

package/lib/types/core/store.d.ts

@@ -7,9 +7,26 @@ export interface TaskStore {
     save(tasks: readonly TaskRecord[]): void;
     /** Drop the persisted ledger (leaves the in-memory state alone). */
     clear(): void;
+    /**
+     * Subscribe to ledger changes written by ANOTHER tab of the same origin
+     * (browser storage events). The board controller reloads the ledger on
+     * such a change, so a task deleted in one tab cannot keep firing (or be
+     * written back) from the stale in-memory copy of another tab. No-op when
+     * the backend has no cross-instance channel (in-memory store).
+     */
+    subscribeExternal?(listener: () => void): () => void;
 }
 /** Storage key for the task ledger document. */
 export declare const DEFAULT_STORAGE_KEY = "dsh.taskBoard.v1";
+/** Structural shape of the storage event fired in sibling tabs (DOM-free). */
+export interface StorageChangeEvent {
+    key: string | null;
+}
+/** The event-target face the store needs for cross-tab notifications. */
+export interface StorageEvents {
+    addEventListener(type: 'storage', listener: (event: StorageChangeEvent) => void): void;
+    removeEventListener(type: 'storage', listener: (event: StorageChangeEvent) => void): void;
+}
 /** A task record is structurally valid if it round-trips through the UI. */
 export declare function isTaskRecord(value: unknown): value is TaskRecord;
 /** Parse + validate a persisted ledger document; invalid rows are dropped. */
@@ -18,14 +35,25 @@ export declare function parseLedger(raw: string | null): TaskRecord[];
 export declare class LocalStorageTaskStore implements TaskStore {
     private readonly key;
     private readonly storage;
+    private readonly events;
     /**
      * @param key - storage key for the ledger document.
      * @param storage - storage backend (defaults to the global localStorage; tests inject fakes).
+     * @param events - storage-event target for cross-tab notifications (defaults
+     *   to the browser global; undefined in non-browser runtimes, where the
+     *   subscription becomes a no-op).
      */
-    constructor(key?: string, storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined);
+    constructor(key?: string, storage?: Pick<Storage, 'getItem' | 'setItem' | 'removeItem'> | undefined, events?: StorageEvents | undefined);
     load(): TaskRecord[];
     save(tasks: readonly TaskRecord[]): void;
     clear(): void;
+    /**
+     * Cross-tab change subscription (see {@link TaskStore.subscribeExternal}).
+     * The browser fires the storage event in every OTHER tab of the same origin
+     * when one tab writes; a null key means the whole storage was cleared. Both
+     * cases reload the ledger here; unrelated keys are ignored.
+     */
+    subscribeExternal(listener: () => void): () => void;
 }
 /** In-memory backend (tests, and a fallback when storage is unavailable). */
 export declare class InMemoryTaskStore implements TaskStore {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@linxin666/dsh-client-ui-task-board",
   "description": "Task board for the dsh web GUI: a sidebar entry plus a multi-column kanban view with local persistence, task details, and real execution through dsh sessions (session.prompt). Hot-pluggable — mounted via ~/.dsh/cordis.patch.yml + a profile node_modules symlink, no dsh source changes.",
-  "version": "0.1.12",
+  "version": "0.1.14",
   "type": "module",
   "main": "lib/index.js",
   "types": "lib/types/index.d.ts",
@@ -35,10 +35,6 @@
     }
   },
   "peerDependencies": {
-    "@deepseek-ai/dsh-client-connection": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
     "react": "^18.2.0"
   },
   "dependencies": {
@@ -59,7 +55,6 @@
     "lightningcss": "1.32.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "schemastery": "^3.18.0",
     "tsdown": "0.22.2",
     "typescript": "~5.7.2",
     "vitest": "^3.0.0"

package/src/client/PluginSettingsCard.tsx

@@ -41,13 +41,14 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
   if (!state.available) return null
   const title = props.t(props.titleKey)
   const blocked = !state.dirty || state.invalid || state.saving
+  const cardClass = open ? `${css.cardOpen} ${css.card}` : css.card
   // The namespace exists but the Host does not serve it to this client (the
   // official settings allowlist omits third-party namespaces): show a card
   // that explains the gap instead of vanishing, so a missing card never
   // reads as a missing plugin.
   if (!state.exposed) {
     return (
-      <li className={css.card}>
+      <li className={cardClass}>
         <button
           type="button"
           className={css.header}
@@ -59,7 +60,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
             <span className={css.name}>{title}</span>
             <span className={css.description}>{props.t(props.descriptionKey)}</span>
           </span>
-          <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 14 14"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+            className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+          >
+            <path
+              d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+              fill="currentColor"
+            />
+          </svg>
         </button>
         {open
           ? (
@@ -72,7 +85,7 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
     )
   }
   return (
-    <li className={css.card}>
+    <li className={cardClass}>
       <button
         type="button"
         className={css.header}
@@ -85,7 +98,19 @@ export function PluginSettingsCard(props: PluginSettingsCardProps) {
           <span className={css.description}>{props.t(props.descriptionKey)}</span>
         </span>
         {state.dirty ? <span className={css.pending}>{props.t('settings.unsaved')}</span> : null}
-        <span className={open ? css.chevronOpen : css.chevron}>▾</span>
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
       </button>
       {open
         ? (
@@ -234,4 +259,4 @@ export function BooleanField(props: FieldProps & {
       <p className={css.hint}>{props.hint}</p>
     </div>
   )
-}
+}

package/src/client/apply-guard.ts

@@ -0,0 +1,35 @@
+/**
+ * Cross-module-instance apply guard for the task-board client bundle.
+ *
+ * The client factory can run more than once in a single page lifetime (for
+ * example when a stale bundle is mixed with a rebuilt one while `dsh web` is
+ * restarted). Without a guard, every factory run mounts its own sidebar entry
+ * and board view, so the shell ends up showing two "task board" rows.
+ *
+ * The flag lives on globalThis so separate module instances (independent
+ * factory runs) still share one guard. First claim wins; later claims become
+ * no-ops until the claim is released (fiber unload / hot-reload) or the page
+ * reloads.
+ */
+
+declare global {
+  // eslint-disable-next-line no-var
+  var __dshTaskboardApplied: boolean | undefined
+}
+
+/** Claims the plugin apply slot. Returns true when this call won the slot. */
+export function claimTaskboardApply(): boolean {
+  if (globalThis.__dshTaskboardApplied === true) return false
+  globalThis.__dshTaskboardApplied = true
+  return true
+}
+
+/**
+ * Releases the claim. Called from the client fiber cleanup so that a
+ * hot-reloaded bundle (the loader unloads the old plugin fiber and invokes
+ * the rebuilt one in the same page) can claim again instead of being
+ * silently dropped.
+ */
+export function releaseTaskboardApply(): void {
+  globalThis.__dshTaskboardApplied = undefined
+}

package/src/client/board-mount.tsx

@@ -3,8 +3,11 @@
  *
  * The `conversation` slot is single-occupant (ui-conversation) and external
  * plugins cannot declare slots, so the board takes over the center column at
- * the DOM level: a container is appended inside the `[data-pane="conversation"]`
- * grid item (an extra trailing child React never manages), and a stylesheet
+ * the DOM level: a container is appended inside the center column
+ * (`[class*="centerCol"]`, the dsh 0.1.0-rc.6 AppFrame layout; previously
+ * `[data-pane="conversation"]` on older shells — the mount selector keeps both)
+ * as an extra trailing child
+ * React never manages, and a stylesheet
  * rule hides the conversation content while the board is active. Toggling is
  * a data attribute on <html> — no React involvement, so the conversation
  * subtree underneath stays mounted and stateful.
@@ -17,7 +20,7 @@ import css from './board.module.css'
 /** The injected board container (kept in the DOM, hidden when inactive). */
 export const BOARD_VIEW_SELECTOR = '[data-dsh-taskboard-view]'
 
-const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"]'
+const CONVERSATION_COLUMN_SELECTOR = '[data-pane="conversation"], [class*="centerCol"]'
 const ACTIVE_ATTR = 'data-dsh-taskboard-active'
 /** The sibling panel's activation attribute (ssh), removed when this panel opens. */
 const OTHER_ACTIVE_ATTR = 'data-dsh-ssh-active'

package/src/client/board.module.css

@@ -6,7 +6,8 @@
 
 /* --- center-column takeover (global rules, attribute-scoped) ----------------- */
 
-[data-pane='conversation'] {
+[data-pane='conversation'],
+[class*='centerCol'] {
   position: relative;
 }
 

package/src/client/index.ts

@@ -20,6 +20,7 @@ import { BoardController } from '../core/controller.ts'
 import { ExecutionService } from '../core/execution.ts'
 import { SchedulerService } from '../core/scheduler.ts'
 import { LocalStorageTaskStore } from '../core/store.ts'
+import { claimTaskboardApply, releaseTaskboardApply } from './apply-guard.ts'
 import { mountBoard } from './board-mount.tsx'
 import { mountSidebarEntry } from './sidebar-entry.ts'
 import { TaskBoardSettingsCard, TaskBoardSettingsCardController, type TaskBoardSettings } from './TaskBoardSettingsCard.tsx'
@@ -74,6 +75,16 @@ export const inject = ['slots', 'sessions', 'workspaces', 'connection', 'setting
  * @param ctx - client root context (services: sessions, workspaces).
  */
 export function apply(ctx: ClientContext): void {
+  // A duplicated client injection (module factory executed twice in one page
+  // lifetime) would otherwise mount a second sidebar entry and board view.
+  // First application wins; later calls become no-ops (see apply-guard.ts).
+  if (!claimTaskboardApply()) return
+
+  // Release the claim when this fiber unloads (the loader supports plugin
+  // unloads / hot-reloads), so a rebuilt bundle can claim again in the same
+  // page instead of being silently dropped.
+  ctx.effect(() => releaseTaskboardApply, 'task-board: apply claim')
+
   ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'task-board: dictionaries')
 
   // Plugin configuration card: one staged form over the `task-board` settings

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

@@ -1,60 +1,83 @@
+/* Plugin settings card chrome + staged form fields.
+ * Aligned with the official ui-settings-plugins PluginCard / fields CSS:
+ * same semantic tokens, radius, typography and states so family cards read
+ * as siblings of the built-in Shell / Agent loop / Web search cards. */
+
 .card {
-  list-style: none;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 8px;
   background: var(--dsw-alias-bg-layer-3);
-  overflow: hidden;
+  border-radius: 12px;
+  list-style: none;
   transition: border-color 0.16s, background 0.16s;
 }
 
+.card:hover {
+  border-color: var(--dsw-alias-label-dimmed);
+}
+
 .cardOpen {
   background: var(--dsw-alias-bg-layer-2);
   border-color: var(--dsw-alias-label-dimmed);
 }
 
 .header {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  appearance: none;
   width: 100%;
-  padding: 10px 14px;
-  border: 0;
-  background: transparent;
-  cursor: pointer;
-  text-align: left;
   font: inherit;
+  color: inherit;
+  text-align: left;
+  cursor: pointer;
+  background: transparent;
+  border: 0;
+  border-radius: 12px;
+  align-items: center;
+  gap: 12px;
+  padding: 14px 16px;
+  display: flex;
 }
 
-.header:hover {
-  background: var(--dsw-alias-interactive-bg-hover);
+.header:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: -2px;
 }
 
 .headText {
-  display: flex;
   flex-direction: column;
-  gap: 2px;
   flex: 1;
+  gap: 4px;
   min-width: 0;
+  display: flex;
 }
 
 .name {
-  font-weight: 600;
   color: var(--dsw-alias-label-primary);
+  font-size: 15px;
+  font-weight: 600;
+  line-height: 1.4;
 }
 
 .description {
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .pending {
-  font-size: 12px;
-  color: var(--dsw-alias-state-warn-primary);
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
+  border-radius: 999px;
+  flex: none;
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .chevron {
-  transition: transform 120ms ease;
   color: var(--dsw-alias-label-tertiary);
+  flex: none;
+  transition: transform 0.16s;
 }
 
 .chevronOpen {
@@ -62,51 +85,59 @@
 }
 
 .body {
-  padding: 0 14px 14px;
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 0 16px;
+  padding-bottom: 8px;
 }
 
 .readOnly {
-  margin: 0;
-  font-size: 12px;
   color: var(--dsw-alias-label-tertiary);
+  margin: 12px 0 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .notExposed {
-  margin: 0;
+  color: var(--dsw-alias-state-warn-primary);
+  margin: 12px 0 0;
   font-size: 12px;
   line-height: 1.5;
-  color: var(--dsw-alias-state-warn-primary);
 }
 
 .footer {
-  display: flex;
-  align-items: center;
+  border-top: 1px solid var(--dsw-alias-border-l2);
   justify-content: flex-end;
+  align-items: center;
   gap: 8px;
+  padding: 12px 0 4px;
+  display: flex;
 }
 
 .failed {
-  margin: 0 auto 0 0;
+  min-width: 0;
+  color: var(--dsw-alias-label-error);
+  flex: 1;
+  margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
+  line-height: 1.5;
 }
 
 .discard,
 .save {
-  padding: 5px 12px;
-  border-radius: 6px;
+  appearance: none;
   font: inherit;
-  font-size: 13px;
   cursor: pointer;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  padding: 5px 14px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
 .discard {
-  border: 1px solid var(--dsw-alias-border-l2);
-  background: transparent;
+  border-color: var(--dsw-alias-border-l2);
   color: var(--dsw-alias-label-secondary);
+  background: transparent;
 }
 
 .discard:hover:not(:disabled) {
@@ -115,154 +146,153 @@
 }
 
 .save {
-  border: 1px solid var(--dsw-alias-button-info-fill);
-  background: var(--dsw-alias-button-info-fill);
-  color: var(--dsw-alias-label-primary-foreground);
-}
-
-.save:hover:not(:disabled) {
-  border-color: var(--dsw-alias-button-info-hover);
-  background: var(--dsw-alias-button-info-hover);
-}
-
-.discard:active:not(:disabled),
-.save:active:not(:disabled) {
-  transform: translateY(1px);
-}
-
-.discard:focus-visible:not(:disabled),
-.save:focus-visible:not(:disabled) {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-layer-3);
 }
 
 .discard:disabled,
 .save:disabled {
-  opacity: 0.5;
+  opacity: 0.4;
   cursor: default;
 }
 
+.discard:focus-visible,
+.save:focus-visible {
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 1px;
+}
+
 .field {
-  display: flex;
   flex-direction: column;
-  gap: 4px;
+  gap: 6px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.field + .field {
+  border-top: 1px solid var(--dsw-alias-border-l2);
 }
 
 .head {
-  display: flex;
   align-items: center;
   gap: 8px;
+  display: flex;
 }
 
 .label {
+  min-width: 0;
+  color: var(--dsw-alias-label-primary);
+  flex: 1;
   font-size: 13px;
   font-weight: 500;
-  color: var(--dsw-alias-label-primary);
+  line-height: 1.5;
 }
 
 .badges {
-  display: flex;
   align-items: center;
-  gap: 6px;
+  gap: 8px;
+  display: inline-flex;
 }
 
 .badge {
-  font-size: 11px;
-  padding: 1px 6px;
+  white-space: nowrap;
+  background: var(--dsw-alias-bg-module-platform);
+  color: var(--dsw-alias-label-secondary);
   border-radius: 999px;
-  background: var(--dsw-alias-interactive-bg-hover-accent);
-  color: var(--dsw-alias-state-business-primary);
+  padding: 1px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  line-height: 17px;
 }
 
 .reset {
-  font-size: 11px;
-  border: 0;
-  background: transparent;
-  color: var(--dsw-alias-state-business-primary);
+  font: inherit;
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
+  background: transparent;
+  border: none;
   padding: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 .reset:hover:not(:disabled) {
-  text-decoration: underline;
+  color: var(--dsw-alias-label-primary);
 }
 
-.reset:active:not(:disabled) {
-  text-decoration: underline;
-  opacity: 0.8;
+.reset:disabled {
+  cursor: default;
 }
 
 .reset:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
-}
-
-.reset:disabled {
-  opacity: 0.5;
-  cursor: default;
+  outline: 2px solid var(--dsw-alias-brand-primary);
+  outline-offset: 2px;
 }
 
 .input,
 .select {
-  padding: 6px 8px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 6px;
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
   font: inherit;
-  font-size: 13px;
   color: var(--dsw-alias-label-primary);
-  background: var(--dsw-specific-input-major);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
 }
 
-.inputInvalid {
-  padding: 6px 8px;
-  border: 1px solid var(--dsw-alias-state-error-primary);
-  border-radius: 6px;
-  font: inherit;
-  font-size: 13px;
-  color: var(--dsw-alias-label-primary);
+.input:focus-visible,
+.select:focus-visible {
+  border-color: var(--dsw-alias-brand-primary);
+  outline: none;
 }
 
 .input:disabled,
 .select:disabled {
-  opacity: 0.6;
+  color: var(--dsw-alias-label-tertiary);
+  cursor: default;
 }
 
-.hint {
-  margin: 0;
-  font-size: 12px;
-  color: var(--dsw-alias-label-secondary);
+.inputInvalid {
+  border: 1px solid var(--dsw-alias-label-error);
+  background: var(--dsw-alias-bg-layer-3);
+  height: 34px;
+  font: inherit;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 8px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.inputInvalid:focus-visible {
+  outline: 2px solid var(--dsw-alias-label-error);
+  outline-offset: 1px;
+  border-color: var(--dsw-alias-label-error);
 }
 
 .invalid {
+  color: var(--dsw-alias-label-error);
   margin: 0;
   font-size: 12px;
-  color: var(--dsw-alias-state-error-primary);
-}
-
-/* --- polish: header keyboard focus / press, unified motion, reduced-motion --- */
-.header:focus-visible {
-  outline: 2px solid var(--dsw-alias-state-business-primary);
-  outline-offset: -2px;
-}
-
-.header:active {
-  background: var(--dsw-alias-interactive-bg-hover);
+  line-height: 1.5;
 }
 
-.header,
-.discard,
-.save,
-.reset {
-  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease, transform 120ms ease;
+.hint {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 0;
+  font-size: 12px;
+  line-height: 1.5;
 }
 
 @media (prefers-reduced-motion: reduce) {
   .card,
   .header,
   .chevron,
+  .chevronOpen,
   .discard,
-  .save,
-  .reset {
+  .save {
     transition: none;
   }
 }