dsh-zen-remote 1.0.0

package/src/client/session-dot.ts

@@ -0,0 +1,17 @@
+import type { SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
+import type { StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
+
+/**
+ * Status dot state of one session, matching the official sidebar semantics.
+ * Shared by the home-screen row dots (MobileHome.tsx) and the session
+ * header's running indicator (effects/header-status.ts), which reads it
+ * outside React — see that module for why.
+ * @param row - session summary.
+ * @returns the dot state, or undefined when the row needs no dot.
+ */
+export function dotState(row: SessionSummary): StateDotState | undefined {
+  if (row.pendingInteraction !== undefined) return 'warning'
+  if (row.running) return 'ongoing'
+  if (row.completed === true) return 'done'
+  return undefined
+}

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

@@ -0,0 +1,167 @@
+// base — split from src/client/mobile.css.ts (2026-08-16), order preserved.
+// Do not reorder: styles/index.ts concatenates in this exact order.
+
+export const BASE_CSS = `
+/* ---------- safe-area variables (S2.1, 2026-08-17) ----------
+   Every safe-area use in this stylesheet reads --mnav-sat / --mnav-sab
+   instead of env() directly. Same computed value by default, but the
+   indirection gives one place to override: ?mobile-nav-inset=54 (client/
+   debug.ts) writes a fake inset onto the root element, so a desktop CDP
+   run can regress notch layout — env(safe-area-inset-*) is hard 0 in every
+   desktop browser, which is exactly why the header and the workbench
+   panel shipped broken to a real iPhone. */
+:root {
+  --mnav-sat: env(safe-area-inset-top, 0px);
+  --mnav-sab: env(safe-area-inset-bottom, 0px);
+}
+
+/* ---------- base control styles (rendered at any width, hidden where unused) ---------- */
+
+[data-mobile-nav="toggle"],
+[data-mobile-nav="files"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  flex: none;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary, inherit);
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="toggle"]:hover,
+[data-mobile-nav="files"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="toggle"]:focus-visible,
+[data-mobile-nav="files"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 1px;
+}
+
+/* Drawer footer actions: the relocated Session log download plus the Files
+   action that opens the dsh-web-ui explorer sheet. */
+[data-mobile-nav="drawer-actions"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+[data-mobile-nav="session-log"],
+[data-mobile-nav="explorer"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 34px;
+  padding: 0 12px;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 12px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary, inherit);
+  font-family: inherit;
+  font-size: 13px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="session-log"]:hover:not(:disabled),
+[data-mobile-nav="explorer"]:hover {
+  background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+}
+[data-mobile-nav="session-log"]:disabled {
+  color: var(--dsw-alias-label-dimmed, rgba(0, 0, 0, .35));
+  cursor: default;
+}
+
+/* Floating fallback button (hero / blank phases without a session header).
+   The top clears the camera band below the status bar; when the client has
+   set viewport-fit=cover the safe-area inset moves it below the notch too. */
+[data-mobile-nav="fab"] {
+  position: absolute;
+  top: calc(var(--mnav-sat) + 72px);
+  left: 10px;
+  z-index: 21;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 38px;
+  height: 38px;
+  padding: 0;
+  border: 1px solid var(--dsw-alias-border-l1, rgba(0, 0, 0, .12));
+  border-radius: 50%;
+  background: var(--dsw-alias-button-floating-fill, #ffffff);
+  color: var(--dsw-alias-label-primary, inherit);
+  cursor: pointer;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .18);
+  -webkit-tap-highlight-color: transparent;
+}
+[data-mobile-nav="fab"]:hover {
+  background: var(--dsw-alias-button-floating-hover, rgba(0, 0, 0, .08));
+}
+[data-mobile-nav="fab"]:focus-visible {
+  outline: 2px solid var(--dsw-alias-state-business-primary, #4f6ef7);
+  outline-offset: 2px;
+}
+
+/* Dimmed backdrop under the open drawer; above every column, below the drawer. */
+[data-mobile-nav="backdrop"] {
+  position: absolute;
+  inset: 0;
+  z-index: 30;
+  background: rgba(0, 0, 0, .45);
+  cursor: pointer;
+  animation: dsh-mobile-nav-fade .2s var(--ds-ease-in-out, ease-in-out);
+  -webkit-tap-highlight-color: transparent;
+}
+@keyframes dsh-mobile-nav-fade {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+/* Settings sheet entrance: the official dialog mounts with no animation at
+   all, so it snaps in. Fade + slight rise/scale reads as a proper sheet. */
+@keyframes dsh-mobile-nav-sheet-in {
+  from {
+    opacity: 0;
+    transform: translateY(14px) scale(.98);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+/* Preview sheet rise: the aionui preview column opens as a bottom sheet. */
+@keyframes dsh-mobile-nav-sheet-up {
+  from {
+    opacity: 0;
+    transform: translateY(28px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ---------- beta-notice suppression (ALL widths — deliberate exception) ----
+   User-directed (2026-08-17): hide DSH's beta/preview notices everywhere,
+   including desktop. This is the ONE place this plugin intentionally breaks
+   its own ">=1024px strict no-op" rule — do not "fix" it back.
+   Selector notes:
+   - The hero "预览版" badge only carries a hashed class; per repo convention
+     the stable part is the suffix (_previewBadge), matched with [class$=].
+   - The first-run "内测声明" modal is hidden via its ARIA label. The label is
+     LOCALIZED — zh is covered; if the UI runs in another language the dialog
+     shows (harmless, dismiss by hand). Hiding targets the presentation
+     wrapper via :has() so the modal's backdrop cannot linger invisibly and
+     block taps; the app never requires acknowledging this dialog to work. */
+[class$="_previewBadge"] {
+  display: none !important;
+}
+[role="presentation"]:has(> [role="dialog"][aria-label="内测声明"]),
+[role="dialog"][aria-label="内测声明"] {
+  display: none !important;
+}
+`

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

@@ -0,0 +1,224 @@
+// chips — S5 (2026-08-17): the home-screen plugin-entry chips row, its
+// customize sheet, the settings gear button, and the settings/usage-stats
+// dialog portal fix. Appended LAST in index.ts (after home.css.ts) so its
+// `display` overrides win any tie against the phone shell's blanket
+// `[data-mobile-nav="frame"] > :first-child { display: none }` rule — though
+// the extra `:has()` clause already outranks it on specificity alone.
+
+export const CHIPS_CSS = `/* ---------- chips row + settings entry (S5) ---------- */
+
+@media (max-width: 767px) {
+  /* --- settings dialog / usage-stats panel / scheduled-tasks dialog portal fix ---
+     dsh-client-ui-settings-general's SettingsRoot (trigger button +
+     position:fixed;z-index:1000 modal), dsh-usage-stats' sidebar-footer
+     badge (position:fixed panel), and @opendsh/dsh-plugin-scheduled-tasks'
+     "定时任务" trigger (position:fixed;z-index:120 \`.dshst-overlay\`,
+     verified against 0.2.0 — real-device report 2026-08-17: chip click
+     produced no visible window) all mount as PLAIN CHILDREN of the sidebar
+     tree — not a React portal to document.body — inside
+     sidebar.settings / sidebar.footer.action
+     (dsh-client-ui-sidebar's SidebarRoot: footArea > settingsArea /
+     footerActions). home.css.ts sets the sidebar ROOT
+     (\`[data-mobile-nav="frame"] > :first-child\`) to display:none on the
+     phone breakpoint (the app shell replaced the drawer) — and display:none
+     removes the WHOLE subtree from the render tree, including
+     position:fixed descendants, which cannot escape it the way they escape
+     a merely-offscreen or opacity:0 ancestor. A \`.click()\` on the (still
+     DOM-present) hidden trigger still flips its component-local \`open\`
+     state and mounts the aria-modal dialog (synthetic dispatch bypasses
+     hit-testing — S2.1 precedent), but nothing paints without this fix.
+
+     Un-hiding the WHOLE sidebar would surface the session tree / new-session
+     button underneath the dialog, so this is scoped to exactly the sidebar
+     root plus its OWN direct children that are not on the path to
+     footArea: display:contents on the root removes its own box (no
+     duplicate page background/padding, no grid-column reflow) while
+     letting footArea/footerActions/settingsArea resume their OWN official
+     (non-none) display — logoRow / newSession / regionArea are hidden
+     explicitly instead. :has() matches against the DOM tree regardless of
+     the scope element's own computed display, so this reads correctly even
+     though the whole subtree started at display:none (same precedent as
+     every other :has()-gated rule in this stylesheet, e.g. the settings
+     sheet adaptation below, which depends on exactly this becoming
+     visible).
+
+     \`:first-child\` is a layout-column WRAPPER
+     (\`pI_x6G_sidebarCol\`, dsh-client-ui-layout's AppFrame grid cell), not
+     SidebarRoot's own div — SidebarRoot (\`hHd-Xa_root\`) sits one more empty
+     unstyled div below it (measured 2026-08-17: sidebarCol > div (no
+     class) > div.hHd-Xa_root > logoRow/newSession/regionArea/footArea).
+     display:contents on sidebarCol lets that whole chain resume its own
+     official (non-none) display with no other rule needed, but the
+     "hide the other three" selectors below must therefore be DESCENDANT
+     (unscoped depth), not direct-child \`>\`, or they silently match
+     nothing — confirmed live: an earlier \`>\`-only version left
+     logoRow/newSession/regionArea at \`display: flex\`, which is only
+     hidden from view by being fully underneath the usage-stats panel's
+     opaque body, not by this rule. */
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) {
+    display: contents !important;
+  }
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_logoRow"],
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_newSession"],
+  [data-mobile-nav="frame"] > :first-child:has([aria-modal="true"], [data-usage-stats-panel], .dshst-overlay) [class$="_regionArea"] {
+    display: none !important;
+  }
+
+  /* Home-top settings gear: 44pt touch target, pushed to the row's end by
+     its own auto margin (home-top itself stays a plain flex row). */
+  [data-mobile-nav="home-settings"] {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+    margin-left: auto;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: var(--dsw-alias-label-secondary, inherit);
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [data-mobile-nav="home-settings"]:active {
+    background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+    border-radius: 50%;
+  }
+
+  /* Plugin-entry chips row: one horizontally-scrolling line of 34px pills
+     between the workspace title and the session list (prototype spec). A
+     thin scrollbar is the overflow affordance (AGENTS.md: an early
+     no-scrollbar version silently cut off the last tab with no way to
+     discover more content). */
+  [data-mobile-nav="chip-row"] {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 0 16px 10px;
+    overflow-x: auto;
+    overscroll-behavior: contain;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-width: thin;
+  }
+  [data-mobile-nav="chip-row"]::-webkit-scrollbar {
+    height: 2px;
+  }
+  [data-mobile-nav="chip-row"]::-webkit-scrollbar-thumb {
+    background: var(--dsw-alias-border-l2, rgba(0, 0, 0, .16));
+    border-radius: 2px;
+  }
+  [data-mobile-nav="chip"],
+  [data-mobile-nav="chip-more"] {
+    flex: none;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    height: 34px;
+    padding: 0 14px;
+    border: none;
+    border-radius: 17px;
+    background: var(--dsw-alias-bg-base, #ffffff);
+    color: var(--dsw-alias-label-primary, inherit);
+    font-family: inherit;
+    font-size: 13px;
+    font-weight: 500;
+    white-space: nowrap;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
+  }
+  [data-mobile-nav="chip-more"] {
+    padding: 0 9px;
+  }
+  [data-mobile-nav="chip"]:active,
+  [data-mobile-nav="chip-more"]:active {
+    background: var(--dsw-alias-interactive-bg-hover, rgba(0, 0, 0, .06));
+  }
+
+  /* Harvested chip icon (S5.1): the cloned <svg> keeps whatever width/height
+     the source plugin gave it (18px for the one verified live example) —
+     force it down to the same 16px box every hand-registered chip icon
+     uses, CSS wins over the presentational SVG attributes. */
+  [data-mobile-nav="chip-harvest-icon"] {
+    display: inline-flex;
+    flex: none;
+  }
+  [data-mobile-nav="chip-harvest-icon"] svg {
+    display: block;
+    width: 16px;
+    height: 16px;
+  }
+
+  /* Customize sheet: toggle rows inside the SAME home-sheet-layer/mask/sheet
+     chrome the workspace switcher declares in home.css.ts — S6's
+     drag-to-close and mask-click-close bind to
+     \`[data-mobile-nav="home-sheet"]\` generically (effects/gestures.ts), so
+     this second use of the marker needs no new gesture wiring. */
+  [data-mobile-nav="chip-toggle-row"] {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    width: 100%;
+    /* Real-device fix: without border-box this row's used width is
+       100% (of the sheet's own already-padded content box) PLUS the
+       12px+12px padding below, overflowing the sheet by 24px and
+       shoving the flex:none toggle off its right edge (2026-08-17
+       report: "开关跑到屏幕外"). home-sheet-item next door in
+       home.css.ts has the identical width:100%+padding shape and the
+       same latent bug, just with no trailing element to visibly clip. */
+    box-sizing: border-box;
+    min-height: 48px;
+    padding: 0 12px;
+    color: inherit;
+  }
+  [data-mobile-nav="chip-toggle-label"] {
+    flex: 1 1 auto;
+    min-width: 0;
+    font-size: 15px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  [data-mobile-nav="chip-toggle"] {
+    flex: none;
+    position: relative;
+    width: 42px;
+    height: 26px;
+    border: none;
+    border-radius: 13px;
+    background: var(--dsw-alias-border-l2, rgba(0, 0, 0, .16));
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    transition: background .15s var(--ds-ease-in-out, ease-in-out);
+  }
+  [data-mobile-nav="chip-toggle"]::after {
+    content: '';
+    position: absolute;
+    top: 2px;
+    left: 2px;
+    width: 22px;
+    height: 22px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
+    transition: transform .15s var(--ds-ease-in-out, ease-in-out);
+  }
+  [data-mobile-nav="chip-toggle"][aria-checked="true"] {
+    background: var(--dsw-alias-button-primary-fill, #1a1a1a);
+  }
+  [data-mobile-nav="chip-toggle"][aria-checked="true"]::after {
+    transform: translateX(16px);
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-mobile-nav="chip-toggle"],
+    [data-mobile-nav="chip-toggle"]::after {
+      transition: none !important;
+    }
+  }
+}
+`