dsh-zen-remote 1.0.2 → 1.1.0

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

@@ -24,6 +24,7 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
    list in misc.css.ts. */
 [data-mobile-nav="header-back"],
 [data-mobile-nav="header-viewrow"],
+[data-mobile-nav="header-activity"],
 [data-mobile-nav="header-info"],
 [data-mobile-nav="header-workbench"],
 /* The workbench close pill's default-hidden used to live in compat.css.ts —
@@ -266,6 +267,48 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
   [data-phase] header [data-slot="conversation.session.header.utilities"] > * {
     display: none !important;
   }
+  /* Native background-task / subagent entries: kept mounted, but parked as
+     ZERO-WIDTH INVISIBLE ANCHORS at the right end of the view-switch band.
+     Our activity pill is the visible control and forwards the tap to the
+     official trigger, so the official popover — a child of this root — still
+     mounts and positions from here.
+
+     Why not just leave them visible in the header: each is ~103px wide while
+     headerActions' grid column is 92px, and flex children that cannot shrink
+     simply overflow — measured at 375px the subagent entry ran x=60..163
+     straight across the centred title at x=100..275.
+
+     Why not display:none them either: the menu lives inside the root, so
+     hiding the root takes the popover with it and the pill would have
+     nothing to open. Hide the TRIGGER (below) and keep the root as a box. */
+  [data-phase] header [data-slot="conversation.session.header.actions"] > [class$="_root"]:has(> button[class$="_trigger"]) {
+    display: block !important;
+    position: absolute !important;
+    right: 0 !important;
+    top: 100% !important;
+    width: 0 !important;
+    height: 28px !important;
+    overflow: visible !important;
+    order: 0 !important;
+  }
+  /* The official trigger never shows — the pill replaced it. Programmatic
+     .click() still reaches React's handler on a display:none button. */
+  [data-phase] header [data-slot="conversation.session.header.actions"] > [class$="_root"] > button[class$="_trigger"] {
+    display: none !important;
+  }
+  /* Anchor the popover to the RIGHT edge and clamp it to the viewport. The
+     root now sits at the right edge with zero width, so the official
+     \`left: 0\` would start the 336px panel off-screen; layout.css.ts's
+     \`left: 8px\` re-anchor was written for a viewport-width containing block
+     that this element is not. Right-anchoring is the one that holds for both
+     (2026-08-20: the old pairing put the panel 29px past the right edge). */
+  [data-phase] header [data-slot="conversation.session.header.actions"] [class$="_menu"] {
+    left: auto !important;
+    right: 0 !important;
+    width: min(336px, calc(100vw - 32px)) !important;
+    max-width: none !important;
+    max-height: min(420px, calc(100dvh - 140px)) !important;
+  }
   /* The agent-preset mode badge specifically survives the blanket hide
      above: layout.css.ts's shared <=1023px block targets it directly
      (header [class$="_label"]:has(> svg) { display: block !important }),
@@ -283,6 +326,12 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
   [data-phase] header [data-slot="conversation.session.header.actions"] > [data-mobile-nav="header-viewrow"] {
     display: flex !important;
   }
+  /* Our own chip lives in the same slot, so the blanket hide above swallows
+     it unless it is named here too (it was, on the first build: the chip
+     rendered with the right counts and painted nothing). */
+  [data-phase] header [data-slot="conversation.session.header.actions"] > [data-mobile-nav="header-activity"] {
+    display: inline-flex !important;
+  }
   [data-phase] header [data-slot="conversation.session.header.utilities"] > [data-mobile-nav="header-info"],
   [data-phase] header [data-slot="conversation.session.header.utilities"] > [data-mobile-nav="header-workbench"] {
     display: inline-flex !important;
@@ -360,6 +409,80 @@ export const HEADER_CSS = `/* ---------- session header five-piece reflow (< 768
      display:contents on titleCluster does not break that search — so
      top:100% sits directly under the title regardless of the title row's
      actual height, with no hardcoded offset to keep in sync. */
+  /* Activity chip (subagents / background tasks) rides the right end of the
+     same band. It is a SIBLING of the switch button, not a child — that
+     button spans the full row, so nesting would make every tap on the chip
+     switch views too — and it shares titleRow as its containing block, so
+     top:100% lands both on the same 28px line. z-index puts it above the
+     row it overlaps. */
+  [data-mobile-nav="header-activity"] {
+    position: absolute;
+    right: 0;
+    top: 100%;
+    z-index: 1;
+    display: inline-flex;
+    align-items: center;
+    gap: 9px;
+    height: 28px;
+    padding: 0 2px 0 10px;
+    border: none;
+    background: transparent;
+    color: var(--dsw-alias-label-secondary, rgba(0, 0, 0, .5));
+    font-family: inherit;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [data-mobile-nav="activity-pill"] {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    height: 28px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: inherit;
+    font-family: inherit;
+    font-size: 12px;
+    line-height: 18px;
+    cursor: pointer;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+  }
+  [data-mobile-nav="activity-pill"]:active {
+    opacity: .55;
+  }
+  [data-mobile-nav="activity-count"] {
+    font-variant-numeric: tabular-nums;
+  }
+  /* Steady green = everything settled. */
+  [data-mobile-nav="activity-dot"] {
+    display: block;
+    width: 6px;
+    height: 6px;
+    margin-left: 1px;
+    border-radius: 50%;
+    background: var(--dsw-alias-state-success-primary, #16a34a);
+  }
+  /* A job that failed or was killed is not a success — never paint it green. */
+  [data-activity-state="warning"] [data-mobile-nav="activity-dot"] {
+    background: var(--dsw-alias-state-warn-primary, #d97706);
+  }
+  /* Pulsing blue = still running. Same state palette as the session dot. */
+  [data-activity-state="running"] [data-mobile-nav="activity-dot"] {
+    background: var(--dsw-alias-state-business-primary, #4f6ef7);
+    animation: dsh-zen-activity-pulse 1.4s ease-in-out infinite;
+  }
+  @keyframes dsh-zen-activity-pulse {
+    0%, 100% { opacity: 1; transform: scale(1); }
+    50% { opacity: .45; transform: scale(.72); }
+  }
+  @media (prefers-reduced-motion: reduce) {
+    [data-activity-state="running"] [data-mobile-nav="activity-dot"] {
+      animation: none;
+    }
+  }
+
   [data-mobile-nav="header-viewrow"] {
     position: absolute;
     left: 0;

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

@@ -101,14 +101,19 @@ export const HOME_CSS = `/* ---------- phone app shell (< 768px) ---------- */
        values, not source-read guesses, are what actually matter here —
        --dsw-alias-bg-base/-layer-1/-layer-2 all resolve to the exact same
        color in the LIGHT theme (neutral-bluish-00, i.e. plain white); they
-       only diverge in dark mode. A layer-* token would have made the page
-       and its cards indistinguishable in light mode specifically — the
-       opposite of what was asked. --dsw-specific-sidebar-fill differs from
-       bg-base in BOTH themes (bluish-50 vs -00 light, bluish-900 vs -950
-       dark) and is the exact token dsh-better-sidebar's own panel already
-       uses for this same "secondary surface next to bg-base content"
-       role, so it is the correct reuse rather than a new hardcoded gray. */
-    background: var(--dsw-specific-sidebar-fill, #f5f5f5);
+       only diverge in dark mode.
+
+       2026-08-20: the page and the CARDS swapped tokens. This surface used
+       to be --dsw-specific-sidebar-fill, which made the list page a
+       different shade from the session page — measured on-device in dark
+       theme, rgb(27,27,28) here against rgb(21,21,23) there, a visible step
+       every time you opened a session. The page now takes bg-base, the same
+       token the session page and <body> resolve to, so the two screens are
+       literally the same colour; the cards took sidebar-fill in exchange, so
+       the contrast that separates a row from the page is preserved — it
+       just runs the other way (raised card on a base page, the more
+       conventional reading of the two anyway). */
+    background: var(--dsw-alias-bg-base, #ffffff);
     color: var(--dsw-alias-label-primary, inherit);
     padding-top: var(--mnav-sat);
     transform: translateX(0);
@@ -226,7 +231,10 @@ export const HOME_CSS = `/* ---------- phone app shell (< 768px) ---------- */
     padding: 14px 16px;
     border: none;
     border-radius: 22px;
-    background: var(--dsw-alias-bg-base, #ffffff);
+    /* The page's old colour (see the swap note on [data-mobile-nav="home"]):
+       differs from bg-base in BOTH themes, and is the token
+       dsh-better-sidebar's panel already uses for a secondary surface. */
+    background: var(--dsw-specific-sidebar-fill, #f5f5f5);
     color: inherit;
     font-family: inherit;
     text-align: left;
@@ -329,7 +337,8 @@ export const HOME_CSS = `/* ---------- phone app shell (< 768px) ---------- */
     margin: 12px 16px;
     padding: 48px 24px;
     border-radius: 22px;
-    background: var(--dsw-alias-bg-base, #ffffff);
+    /* Stands in for the rows, so it carries the rows' surface. */
+    background: var(--dsw-specific-sidebar-fill, #f5f5f5);
     color: var(--dsw-alias-label-secondary, rgba(0, 0, 0, .5));
     font-size: 15px;
     text-align: center;