dsh-zen-remote 2.3.8 → 2.3.10

package/src/client/styles/layout.css.ts

@@ -42,6 +42,20 @@ export const LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
     padding-top: var(--mnav-sat) !important;
   }
 
+  /* DSH 0.2.2-rc.1+: AppFrame pins centerCol to grid-area: 1/2 (column 2,
+     which is 0px wide in our 1-column mobile grid) and inserts a
+     [data-sidebar-mask] div before sidebarCol when viewport < 768. Pin
+     centerCol to column 1 so it fills the 1fr track, hide the host mask
+     (MobileNavOverlay renders its own backdrop on tablet, and MobileHome
+     replaces the drawer on phone), and match sidebarCol by its stable class
+     suffix alongside :first-child. */
+  [data-mobile-nav="frame"] > [class$="_centerCol"] {
+    grid-area: 1 / 1 !important;
+  }
+  [data-mobile-nav="frame"] > [data-sidebar-mask] {
+    display: none !important;
+  }
+
   /* The sidebar column (first grid child) becomes a left drawer. The drawer
      hugs the sidebar content exactly (the wide sidebar carries an inline
      width, ~280px): a fixed 92vw box would leave a white strip where the
@@ -52,7 +66,8 @@ export const LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
      before) left 14px of the drawer plus a long 32px-blur shadow gradient
      visible along the left edge of the main UI. No box-shadow at all: the
      dimmed backdrop already separates drawer from content. */
-  [data-mobile-nav="frame"] > :first-child {
+  [data-mobile-nav="frame"] > :first-child,
+  [data-mobile-nav="frame"] > [class$="_sidebarCol"] {
     position: absolute !important;
     inset: 0 auto 0 0 !important;
     width: max-content !important;
@@ -92,6 +107,31 @@ export const LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
     padding-top: var(--mnav-sat) !important;
     padding-bottom: var(--mnav-sab) !important;
   }
+  /* Right sidebar start/guide page (dsh-client-ui-sidebar-right GuideBody):
+     the host sets .Dv5QdW_tabBody { height: 100%; overflow: hidden } and
+     .F6Huca_guide { min-height: 100%; justify-content: center } with no
+     overflow-y. When many tab entries are registered (e.g. better-sidebar +
+     plugins), the centered flex column overflows equally out the top and
+     bottom of the locked 100%-height box — clipping the leading entries
+     ("文件", "Git") above y=0 with no way to scroll. Make the guide itself
+     the scroll container and replace justify-content:center with auto
+     margins on the first item and ::after so short lists stay centered
+     while long lists start cleanly at the top and scroll end-to-end. */
+  [data-sidebar-right-guide] {
+    flex: 1 1 0 !important;
+    min-height: 0 !important;
+    justify-content: flex-start !important;
+    overflow-y: auto !important;
+    -webkit-overflow-scrolling: touch;
+    padding-top: 24px !important;
+    padding-bottom: 24px !important;
+  }
+  [data-sidebar-right-guide] > :first-child {
+    margin-top: auto !important;
+  }
+  [data-sidebar-right-guide]::after {
+    margin-bottom: auto !important;
+  }
 
   /* Expanded state (frame without data-sidebar-collapsed) slides the drawer in.
      The open state must be transform:none — NOT translateX(0): an identity
@@ -102,7 +142,8 @@ export const LAYOUT_CSS = `/* ---------- mobile-only layout ---------- */
      overflow:hidden drawer to scrollLeft=102, and every static child (plus the
      fixed overlay) shifts 102px off-screen. With transform:none the overlay is
      viewport-anchored: it dims the full screen and the sheet sits at left:8. */
-  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > :first-child {
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > :first-child,
+  [data-mobile-nav="frame"]:not([data-sidebar-collapsed]) > [class$="_sidebarCol"] {
     transform: none !important;
   }
 

package/src/client/wizard/GatewayWizard.tsx

@@ -33,11 +33,13 @@ import {
   CLIENT_CONFIG_ROUTE,
   CLIENT_RECONNECT_ROUTE,
   CLIENT_STATUS_ROUTE,
+  awaitClientStatusReady,
   claimDeviceNameOf,
   clientStatusLineOf,
   deriveClientStatusView,
   deriveSettingsView,
   normalizePairingCode,
+  shouldReloadAfterClientActivation,
 } from '../../client-data/settings-form.ts'
 import { qrMatrix } from '../../client-data/qr.ts'
 import {
@@ -761,6 +763,12 @@ export function GatewayWizard(props: GatewayWizardProps): ReactNode {
   const runClientClaim = async (): Promise<void> => {
     setFormError(null)
     setClientClaimFail(null)
+    // UX-1: the facts that decide the post-pairing reload — whether the page
+    // opened as an already-effective client, and whether the backend's
+    // stream interceptor was already active (from the last client/status
+    // diagnostics). Captured BEFORE the role switch and the claim below.
+    const wasEffectiveClient = effectiveClient
+    const streamInterceptAlreadyActive = clientView?.intercept?.installed === true
     const trimmedUrl = clientServerUrl.trim()
     const normalizedCode = normalizePairingCode(clientPairCode)
     if (trimmedUrl === '' || !/^https?:\/\//i.test(trimmedUrl)) {
@@ -801,7 +809,21 @@ export function GatewayWizard(props: GatewayWizardProps): ReactNode {
       if (body?.ok === true && typeof body.token === 'string' && body.token !== '') {
         const urlToWrite = typeof body.serverUrl === 'string' && body.serverUrl !== '' ? body.serverUrl : trimmedUrl
         const echoed = typeof body.deviceName === 'string' && body.deviceName.trim() !== '' ? body.deviceName.trim() : deviceName
-        await config.writeClientPairing(urlToWrite, body.token, echoed)
+        const landed = await config.writeClientPairing(urlToWrite, body.token, echoed)
+        if (landed && shouldReloadAfterClientActivation({
+          wasEffectiveClient,
+          nowClientRole: true,
+          savedOrPaired: true,
+          streamInterceptAlreadyActive,
+        })) {
+          // UX-1: this was the FIRST client activation while the page's three
+          // resident global streams were opened unwrapped — wait out the
+          // backend's row-reload window, then reload so the streams reopen
+          // wrapped and the server's shared sessions enter the sidebar.
+          await awaitClientStatusReady()
+          window.location.reload()
+          return
+        }
         setClientPairCode('')
         await loadClientStatus()
         setStep('verify')

package/src/client-data/new-session.ts

@@ -0,0 +1,30 @@
+/**
+ * UX-3 — what tapping the phone home screen's "+ 新建会话" FAB should do.
+ *
+ * Entering a blank session with NO workspace leaves the phone dangling in
+ * the hero's inert "choose a workspace" state (the host's `marshal-main`
+ * belongs to no workspace, so the "all" filter often resolves to
+ * `undefined`). Decide BEFORE entering:
+ *
+ * - a workspace is already selected → start there;
+ * - exactly one workspace exists (or none at all) → start with it
+ *   (`undefined` keeps a no-workspace host usable);
+ * - several workspaces and none selected → the FAB opens the same
+ *   bottom-sheet workspace drawer the title bar uses, and the session only
+ *   starts once one is picked.
+ *
+ * Pure: no DOM, no imports — MobileHome calls it inside the FAB's onClick
+ * and test/permission-sheet.test.cjs drives it directly.
+ */
+export type NewSessionAction<W extends string> =
+  | { kind: 'start'; workspaceId: W | undefined }
+  | { kind: 'pick-workspace' }
+
+export function decideNewSessionAction<W extends string>(
+  selectedWorkspaceId: W | undefined,
+  workspaceIds: readonly W[],
+): NewSessionAction<W> {
+  if (selectedWorkspaceId !== undefined) return { kind: 'start', workspaceId: selectedWorkspaceId }
+  if (workspaceIds.length <= 1) return { kind: 'start', workspaceId: workspaceIds[0] }
+  return { kind: 'pick-workspace' }
+}

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

@@ -433,6 +433,63 @@ export function shouldFollowServerDeviceName(deviceName: string, rowName: string
   return deviceName !== '' && deviceName !== rowName && !hasDraft
 }
 
+// --- UX-1: reload after the FIRST client activation ---------------------------
+
+/**
+ * Whether one successful client-side activation (a staged-save role switch, a
+ * first pairing) needs a page reload: the backend's restart-watcher only
+ * installs the stream interceptor when the row reloads into client mode, and
+ * the page's three resident global streams were opened under whatever gateway
+ * object was current AT LOAD TIME. Without a reload they stay unwrapped and
+ * the server's remote sessions never enter the merged sidebar lists.
+ *
+ * - A write that did not land, or a save that is not heading to `client`,
+ *   never reloads.
+ * - A host→client switch always reloads: the streams predate the interceptor.
+ * - An already-client page reloads only when the diagnostics say the
+ *   interceptor was NOT yet active (`streamInterceptAlreadyActive === false`).
+ *   `undefined` — an older server that answers no diagnostics — is UNKNOWN and
+ *   stays on the safe no-reload side (a re-pairing must not needlessly reload).
+ */
+export interface ClientActivationReloadInput {
+  /** Whether the page was ALREADY an effective client before this operation. */
+  wasEffectiveClient: boolean
+  /** Whether the role after the operation is (or is switching to) client. */
+  nowClientRole: boolean
+  /** Whether this operation actually landed (the save / pairing write). */
+  savedOrPaired: boolean
+  /** The client/status diagnostics' interceptor flag before the operation
+   * (derived by the caller); `undefined` when unknown. */
+  streamInterceptAlreadyActive?: boolean
+}
+
+export function shouldReloadAfterClientActivation(input: ClientActivationReloadInput): boolean {
+  if (!input.savedOrPaired || !input.nowClientRole) return false
+  if (!input.wasEffectiveClient) return true
+  if (input.streamInterceptAlreadyActive === false) return true
+  return false
+}
+
+/**
+ * Poll {@link CLIENT_STATUS_ROUTE} until the backend answers ok — the bounded
+ * wait before the post-activation reload, covering the restart-watcher's row
+ * reload window (the route 404s / fails while the row restarts). Resolves
+ * after `maxMs` regardless, so the reload always fires. Injectable fetch and
+ * timings keep the check script fast; defaults are the page's 3 s / 250 ms.
+ */
+export async function awaitClientStatusReady(fetchFn: typeof fetch = fetch, maxMs = 3000, intervalMs = 250): Promise<void> {
+  const deadline = Date.now() + maxMs
+  while (true) {
+    try {
+      if ((await fetchFn(CLIENT_STATUS_ROUTE)).ok) return
+    } catch {
+      // the row is mid-reload; keep polling
+    }
+    if (Date.now() >= deadline) return
+    await new Promise((resolve) => setTimeout(resolve, intervalMs))
+  }
+}
+
 /**
  * Latest-wins sequencing for the status loads: every request takes a ticket,
  * and only the newest ticket may still apply its result. An earlier request