@linxin666/dsh-remote-web-ui 0.4.2 → 0.4.4

package/src/client/remote.module.css

@@ -19,9 +19,9 @@
 }
 
 /* Trigger: the 36px rail circle, or a fully rounded (pill) full-row button
-   in wide mode — both maximally rounded so the footer action pair shares one
-   shape family (#1035); the seat's owner (ui-sidebar) lays out the
-   geometry. */
+   in wide mode — both maximally rounded so the seat's occupants (this
+   trigger, the dsh-update trigger, the usage card) share one shape family
+   (#1035); the seat's owner (ui-sidebar) lays out the geometry. */
 .trigger {
   position: relative;
   flex: none;
@@ -40,52 +40,18 @@
   transition: background-color 120ms ease, color 120ms ease, box-shadow 120ms ease;
 }
 
-.trigger[data-update-available] {
-  color: var(--dsw-alias-brand-primary);
-}
-
-.trigger[data-update-available]::after {
-  position: absolute;
-  top: 4px;
-  right: 4px;
-  width: 8px;
-  height: 8px;
-  box-sizing: border-box;
-  border: 2px solid var(--dsw-alias-bg-layer-1);
-  border-radius: 50%;
-  background: var(--dsw-alias-brand-primary);
-  content: '';
-  pointer-events: none;
-}
-
 .trigger[data-wide='wide'] {
   flex: 1 1 auto;
   justify-content: flex-start;
   width: auto;
   min-width: 0;
-  /* Pill: maximal rounding, same shape family as the 36px rail circle next
-     to it (the update trigger) — one consistent footer-action look (#1035). */
+  /* Pill: maximal rounding, the same shape family as the 36px rail circle
+     beside it — one consistent footer-action look (#1035). */
   border-radius: 999px;
   gap: 8px;
   padding: 0 10px;
 }
 
-.trigger[data-update-available][data-wide='wide'] {
-  flex: none;
-  gap: 6px;
-}
-
-.trigger[data-update-available][data-wide='wide']::after {
-  display: none;
-}
-
-.updateBadgeText {
-  font-size: 13px;
-  font-weight: 500;
-  line-height: 1;
-  white-space: nowrap;
-}
-
 .trigger:hover:not(:disabled) {
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);
@@ -768,9 +734,9 @@
   }
 }
 
-/* Footer seat row: the update trigger sits LEFT of the remote trigger in wide
-   mode; the rail stacks them with the update circle below the remote circle
-   (mirroring the settings circle keeping its bottom anchor). */
+/* Footer seat row: this plugin's own occupant (the remote trigger) sits in
+   the shared sidebar.footer.action seat; the rail marker lets the seat stack
+   its occupants in the 56px icon column (see the rail rule below). */
 .entryRow {
   flex: none;
   display: flex;
@@ -788,12 +754,13 @@
 
    The official Settings trigger owns a whole row while the footer actions
    stack above it, so the trigger's right half sits empty. On the wide column
-   the two share one line (the Settings trigger, then the update and remote
-   triggers) and every other foot
-   child (the usage glance card, another plugin's block) keeps a full row of
-   its own above them. The rail (data-sidebar-collapsed on the frame) keeps
-   the shell's stacked foot, where the circles stack by design. The shell owns
-   the container classes; the semantic suffixes survive its rebuilds. */
+   the two share one line (the Settings trigger, then the footer-action
+   occupants — this trigger, the dsh-update trigger, another plugin's control)
+   and every other foot child (the usage glance card, another plugin's block)
+   keeps a full row of its own above them. The rail (data-sidebar-collapsed on
+   the frame) keeps the shell's stacked foot, where the circles stack by
+   design. The shell owns the container classes; the semantic suffixes survive
+   its rebuilds. */
 :global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footArea'] {
   flex-direction: row;
   flex-wrap: wrap;
@@ -805,8 +772,42 @@
   min-width: 0;
 }
 
-:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='settingsArea'] {
+:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footArea'] > [class*='footerActions'] {
+  /* The seat's own slot host is already `display: contents`, so the seat's box
+     is what decided its occupants' layout. That made this plugin's rule fatal
+     to a SHARED container (issue #1710): the moment any other plugin registered
+     into `sidebar.footer.action` — the reporter had a 339px balance stack and a
+     context panel — the seat became a tall column, and the settings trigger,
+     which is a shell element this plugin does not own, was squeezed to 102px and
+     vertically centred inside it (`y534 = 351 + (417-50)/2`).
+     Dropping the box hands every occupant back to the foot's own wrapping
+     layout, where each one is sized on its own merits. */
+  display: contents;
+}
+
+/* A registrant that is not one of the family's own footer entries (an
+   icon-sized row) takes a full line of its own above the bottom row. This is
+   the shell's own intent for the seat, and it is what keeps a tall third-party
+   block from displacing the settings trigger. */
+:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footerActions'] > [data-slot='sidebar.footer.action'] > :not([data-dsh-part='entry']):not([class*='entryRow']) {
+  flex: 1 1 100%;
   order: 1;
+  min-width: 0;
+}
+
+/* The family's own footer entries keep their intrinsic width and close the
+   bottom row, sharing it with the settings trigger. `data-dsh-part="entry"` is
+   the family contract for these triggers (dsh-update, dsh-session-id); the
+   remote trigger marks its row with its own class. */
+:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footerActions'] > [data-slot='sidebar.footer.action'] > [data-dsh-part='entry'],
+:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footerActions'] > [data-slot='sidebar.footer.action'] > [class*='entryRow'] {
+  flex: 0 0 auto;
+  order: 4;
+  min-width: 0;
+}
+
+:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='settingsArea'] {
+  order: 3;
   /* Content-sized basis: the trigger's own width forces it onto the line after
      a full-width sibling, then flex-shrink gives the actions their space. */
   flex: 1 1 auto;
@@ -814,14 +815,6 @@
   min-width: 0;
 }
 
-:global([data-dsh-frame]:not([data-sidebar-collapsed])) [class*='footerActions'] {
-  order: 2;
-  flex: none;
-  width: auto;
-  min-width: 0;
-  align-items: center;
-}
-
 /* ── Collapsed rail foot seat ────────────────────────────────────────────
 
    The shell renders `sidebar.footer.action` as a centered horizontal row
@@ -839,146 +832,3 @@
   align-items: center;
   gap: 4px;
 }
-
-/* ── update panel extras ─────────────────────────────────────────────── */
-
-.updateStatus {
-  margin: 0;
-  font-weight: 600;
-}
-
-.updateDetail {
-  margin: 6px 0 0;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 13px;
-}
-
-.updateError {
-  margin: 0;
-  color: var(--dsw-alias-text-danger, var(--dsw-alias-label-primary));
-  font-weight: 600;
-}
-
-.updateOutput {
-  max-height: 180px;
-  margin: 10px 0 0;
-  overflow: auto;
-  padding: 10px 12px;
-  border-radius: 10px;
-  background: var(--dsw-alias-bg-layer-1);
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  line-height: 18px;
-  white-space: pre-wrap;
-  word-break: break-all;
-}
-
-.updateList {
-  margin: 12px 0 0;
-  padding: 0;
-  list-style: none;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.updateListItem {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 12px;
-  font-size: 13px;
-}
-
-.updateListName {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  color: var(--dsw-alias-label-primary);
-}
-
-.updateListVersions {
-  flex: none;
-  color: var(--dsw-alias-label-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-.updateNotes {
-  margin-top: 14px;
-}
-
-.updateNotesTitle {
-  margin: 0 0 8px;
-  font-size: 14px;
-  font-weight: 600;
-}
-
-.updateNoteSection {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin-top: 10px;
-}
-
-.updateNoteHeading {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--dsw-alias-label-secondary);
-}
-
-.updateNoteList {
-  margin: 0;
-  padding-left: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  font-size: 13px;
-}
-
-.updateNoteItem {
-  color: var(--dsw-alias-label-primary);
-  overflow-wrap: anywhere;
-}
-
-.updateVersions {
-  margin-top: 12px;
-}
-
-.updateVersionsSummary {
-  cursor: pointer;
-  color: var(--dsw-alias-label-secondary);
-  font-size: 12px;
-  user-select: none;
-}
-
-.updateActions {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 16px;
-}
-
-.updateRetry {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  border-radius: 10px;
-  padding: 8px 14px;
-  background: var(--dsw-alias-interactive-bg-hover);
-  color: var(--dsw-alias-label-primary);
-  font-size: 13px;
-  cursor: pointer;
-  transition: background-color 120ms ease, color 120ms ease;
-}
-
-.updateRetry:hover {
-  background: var(--dsw-alias-interactive-bg-active);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .updateRetry {
-    transition: none;
-  }
-}

package/src/client/settings-entry-form.ts

@@ -0,0 +1,142 @@
+// Generated by scripts/sync-shared.mjs from shared/client/settings/settings-entry-form.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+// Generated by scripts/sync-shared.mjs from shared/client/settings/settings-entry-form.ts. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Family settings form bound to the profile entry id a Host actually serves.
+ *
+ * Under the 0.1.7 settings model a form is addressed by PROFILE ENTRY ID, while
+ * a family card knows only its own settings namespace. The family binder
+ * (`ctx.get('webUiSettings')`, published by dsh-web-settings) resolves one onto
+ * the other and is the preferred transport; this module is the fallback for a
+ * page that serves no binder — the group plugin is not installed, or its client
+ * half has not applied yet (the aggregate mounts its children in order, and a
+ * child still waiting on its own injects publishes nothing).
+ *
+ * The shared describe mirror is the only local evidence of which row id this
+ * profile serves, but it answers asynchronously: at plugin activation it usually
+ * holds nothing yet. A one-shot guess therefore cannot be right for every
+ * deployment, and the form is bound once per session:
+ *
+ * - binding the bare namespace made every save answer `No configurable plugin
+ *   entry "<namespace>"` on an aggregate install (the namespace is not an entry
+ *   id there), which the card reported as "the deployment did not accept these
+ *   values";
+ * - binding the aggregate row id would break a standalone install, whose row id
+ *   is the namespace or the package's own `ui-*` row.
+ *
+ * So the fallback starts on the most likely row and REBINDS the moment the
+ * mirror names one of this package's rows. Until the mirror answers, the form
+ * reports the binding it holds (usually `loading`), which the card renders as an
+ * unavailable form rather than a doomed one.
+ */
+import type { ConfigForm, ConfigFormSnapshot, ConfigForms } from '@deepseek-ai/dsh-client-ui-settings/client'
+
+/** Options of {@link createServedEntryForm}. */
+export interface ServedEntryFormOptions<T> {
+  /** The shared configuration forms service (`ctx.configForms`). */
+  forms: ConfigForms
+  /**
+   * Profile entry ids this package's rows carry, most likely first: the
+   * aggregate's generated row, the package's own standalone row, then the bare
+   * namespace. The first is the fallback while the mirror has no answer; the
+   * last is the answer when the mirror serves none of them.
+   */
+  entryIds: readonly string[]
+}
+
+/** The snapshot a form reports before the Host has answered with this entry. */
+function pendingSnapshot<T>(): ConfigFormSnapshot<T> {
+  return {
+    status: 'loading',
+    value: undefined,
+    base: undefined,
+    user: undefined,
+    revision: undefined,
+    writable: false,
+    mode: 'host',
+  }
+}
+
+/**
+ * Create a settings form bound to the profile entry id this Host serves, and
+ * rebound whenever the shared describe mirror names a different one of this
+ * package's rows.
+ * @param options - the shared forms service and this package's candidate row ids.
+ * @returns a form delegating to the currently resolved entry's own form.
+ */
+export function createServedEntryForm<T>(options: ServedEntryFormOptions<T>): ConfigForm<T> {
+  const { forms, entryIds } = options
+  const fallbackId = entryIds[0]
+  const namespaceId = entryIds[entryIds.length - 1]
+  const listeners = new Set<() => void>()
+  let boundId: string | undefined
+  let bound: ConfigForm<T> | undefined
+  let offBound: (() => void) | undefined
+  let snapshot: ConfigFormSnapshot<T> = pendingSnapshot<T>()
+
+  /** Republish: the delegated snapshot when one is bound, the pending one otherwise. */
+  const publish = (): void => {
+    if (bound !== undefined) snapshot = bound.getSnapshot()
+    for (const listener of [...listeners]) listener()
+  }
+
+  /**
+   * The entry id the mirror currently justifies. An unanswered or empty mirror
+   * is not evidence of absence, so it keeps the first candidate; a mirror that
+   * answers without any of this package's rows leaves the namespace itself.
+   * @returns the entry id to bind.
+   */
+  const resolve = (): string => {
+    let served: readonly string[] | undefined
+    try {
+      served = forms.describe().getSnapshot().view?.namespaces.map(row => row.ns)
+    } catch {
+      // A mirror that refuses the read is unanswered too, not absent.
+      served = undefined
+    }
+    if (served === undefined || served.length === 0) return fallbackId
+    return entryIds.find(id => served.includes(id)) ?? namespaceId
+  }
+
+  /** Bind (or rebind) the resolved entry's form; a no-op while it is unchanged. */
+  const bind = (): void => {
+    const target = resolve()
+    if (target === boundId) return
+    offBound?.()
+    offBound = undefined
+    let form: ConfigForm<T>
+    try {
+      form = forms.get<T>(target)
+    } catch {
+      // A service that refuses the id stays unbound; the next mirror answer
+      // retries rather than pinning a wrong entry for the session.
+      boundId = undefined
+      return
+    }
+    boundId = target
+    bound = form
+    offBound = form.subscribe(() => { publish() })
+    publish()
+  }
+
+  // The mirror subscription lives for the page: the card owns its form for the
+  // session, and the ConfigForm contract carries no disposer to hang it on. The
+  // callback is cheap (a resolve plus a no-op while the id is unchanged). A
+  // mirror without a subscription seat keeps the initial binding.
+  try {
+    forms.describe().subscribe(() => { bind() })
+  } catch {
+    // A describe face that refuses the subscription: the initial binding stands.
+  }
+  bind()
+
+  return {
+    getSnapshot: () => snapshot,
+    subscribe: (listener) => {
+      listeners.add(listener)
+      return () => { listeners.delete(listener) }
+    },
+    set: (field, value) => bound?.set(field, value) ?? Promise.resolve(false),
+    unset: (field) => bound?.unset(field) ?? Promise.resolve(false),
+    mutate: (ops, expectedRevision) => bound?.mutate(ops, expectedRevision) ?? Promise.resolve(false),
+  }
+}