dsh-zen-remote 1.1.11 → 1.1.13

package/src/client/index.tsx

@@ -1,4 +1,4 @@
-import type { ClientContext, SessionId, WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
+import type { ClientContext, SessionId, WorkspaceId } from './compat/types.ts'
 import { MobileNavToggle } from './MobileNavToggle.tsx'
 import { MobileNavOverlay } from './MobileNavOverlay.tsx'
 import { MobileDrawerFooter } from './MobileDrawerFooter.tsx'
@@ -17,6 +17,7 @@ import { installHeaderStatusDot } from './effects/header-status.ts'
 import { installGestures } from './effects/gestures.ts'
 import { installTurnFold } from './effects/turn-fold.ts'
 import { installModalBack } from './effects/modal-back.ts'
+import { installModelSheetExtras } from './effects/model-sheet-extras.ts'
 import { installNativeTriggerOverlay } from './effects/native-trigger-overlay.ts'
 import { installWelcomeNoticeOptOut } from './effects/welcome-notice.ts'
 import { installKeyboardGuard } from './effects/keyboard-guard.ts'
@@ -34,6 +35,23 @@ declare module '@deepseek-ai/dsh-client-ui-slots' {
 /** Required services (cordis fiber inject — the loader passes all module exports as an object plugin). */
 export const inject = ['slots', 'layout', 'locale', 'sessionLogDownload', 'sessions', 'workspaces']
 
+/**
+ * 0.1.2 把新建会话和归档会话的界面级操作挪到了 uiWorkspace 服务；
+ * 0.1.1 没有这个服务，那两个操作还在 ctx.workspaces 上。这里按存在探测，
+ * 不把 uiWorkspace 写进 inject（写了 0.1.1 就永远不激活）。
+ * 类型用本地最小接口，不 import 那个 dsh-client-ui-workspace 包
+ * ——0.1.1 装不到。
+ */
+interface UiWorkspaceLike {
+  startSession(workspaceId?: WorkspaceId): void
+  archiveSession(sessionId: SessionId): Promise<void>
+}
+
+/** 0.1.1 的 ctx.workspaces 上还有 startSession；0.1.2 的类型里没有了。 */
+interface LegacyWorkspacesLike {
+  startSession(workspaceId?: WorkspaceId): void
+}
+
 /**
  * Mobile-adaptive shell, browser half: injects the mobile stylesheet, then
  * contributes the directory toggle to the session header and the backdrop +
@@ -89,6 +107,9 @@ export function apply(ctx: ClientContext): void {
   installTurnFold(ctx)
   installModalBack(ctx)
   installNativeTriggerOverlay(ctx)
+  // Third-party composer entries (speed chip, vision toggle) move into the
+  // model sheet — the row has no width to spare and both are model settings.
+  installModelSheetExtras(ctx)
 
   // "内测声明" first-run notice: keep it visible (CSS-hiding it leaked the
   // dialog's #root inert lock — see effects/welcome-notice.ts) and offer a
@@ -163,7 +184,13 @@ export function apply(ctx: ClientContext): void {
       forkSession: (id: SessionId) => ctx.sessions.fork({ sessionId: id }),
       openSession: (id: SessionId) => ctx.sessions.open(id),
       renameSession: (id: SessionId, title: string) => ctx.sessions.binding(id)?.session.rename(title),
-      archiveSession: (id: SessionId) => ctx.workspaces.archiveSession(id),
+      // 0.1.2 的界面级归档在 uiWorkspace（顺带清当前选中）；懒查——回调是用户
+      // 点击才跑，那时服务必已注册。本插件的 inject 不包含 uiWorkspace（0.1.1
+      // 没有它），所以启动时不能查一次就用：可能早于它注册。
+      archiveSession: (id: SessionId) => {
+        const ui = ctx.get('uiWorkspace') as UiWorkspaceLike | undefined
+        return ui === undefined ? ctx.workspaces.archiveSession(id) : ui.archiveSession(id)
+      },
       downloadSessionLog: (id: SessionId) => ctx.sessionLogDownload.download(id),
     }),
   }, MobileSessionInfo))
@@ -215,11 +242,26 @@ export function apply(ctx: ClientContext): void {
     store: nav,
     inject: () => ({
       openSession: (id: SessionId) => ctx.sessions.open(id),
-      startSession: (workspaceId?: WorkspaceId) => ctx.workspaces.startSession(workspaceId),
+      // uiWorkspace 懒查：回调是用户点击才跑，服务那时必已注册（inject 不含
+      // uiWorkspace，启动时可能先于它注册，不能启动查一次就用）。0.1.1 上恒
+      // undefined，退回 ctx.workspaces.startSession——0.1.1 专用分支，0.1.2 的
+      // 类型里该方法已不存在，故对类型做 LegacyWorkspacesLike cast，运行时走不到。
+      startSession: (workspaceId?: WorkspaceId) => {
+        const ui = ctx.get('uiWorkspace') as UiWorkspaceLike | undefined
+        return ui === undefined
+          ? (ctx.workspaces as unknown as LegacyWorkspacesLike).startSession(workspaceId)
+          : ui.startSession(workspaceId)
+      },
       // S5 session-log chip — the same service call MobileDrawerFooter uses.
       downloadSessionLog: (id: SessionId) => ctx.sessionLogDownload.download(id),
-      // Row swipe action — the same binding MobileSessionInfo archives with.
-      archiveSession: (id: SessionId) => ctx.workspaces.archiveSession(id),
+      // Row swipe action — the same binding MobileSessionInfo archives with;
+      // on 0.1.2 the uiWorkspace variant also clears the current selection
+      // when the archived session is the one selected. Same lazy lookup as
+      // the session-info sheet's archive binding above.
+      archiveSession: (id: SessionId) => {
+        const ui = ctx.get('uiWorkspace') as UiWorkspaceLike | undefined
+        return ui === undefined ? ctx.workspaces.archiveSession(id) : ui.archiveSession(id)
+      },
     }),
   }, MobileHome))
 
@@ -240,7 +282,10 @@ export function apply(ctx: ClientContext): void {
     order: 5,
     locale: NS,
     inject: () => ({
-      downloadSessionLog: (sessionId: string) => ctx.sessionLogDownload.download(sessionId),
+      // The footer slot contract hands the id over as a loose string;
+      // download() wants the branded SessionId — pure type-layer narrowing
+      // (runtime value is a session id either way, same as MobileHome.tsx).
+      downloadSessionLog: (sessionId: string) => ctx.sessionLogDownload.download(sessionId as SessionId),
       toggleSidebar: () => ctx.layout.toggleSidebar(),
     }),
   }, MobileDrawerFooter))
@@ -254,3 +299,22 @@ import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
 import type {} from '@deepseek-ai/dsh-client-ui-sidebar/client'
 import type {} from '@deepseek-ai/dsh-client-locale/client'
 import type {} from '@deepseek-ai/dsh-session-log-export/client'
+// 0.1.2-only package: augments GlobalStandardProps with
+// useSessions/useSessionPendingInteraction and SessionStandardProps with
+// sessionId/useSession/useProjection, and declares the `ctx.uiSession`
+// service. 0.1.1 has no such package — but this is `import type`, so the
+// build output carries no trace of it and the runtime is unaffected.
+import type {} from '@deepseek-ai/dsh-client-ui-session/client'
+// 0.1.2-only controller packages: their `/client` type entries merge
+// `ctx.sessions` / `ctx.workspaces` onto the cordis Context (0.1.1 declared
+// both from dsh-client-runtime). Type-only again — nothing to load at
+// runtime, so a 0.1.1 installation is unaffected.
+import type {} from '@deepseek-ai/dsh-api-session-controller/client'
+import type {} from '@deepseek-ai/dsh-api-workspace-controller/client'
+// 0.1.2-only, type-only: the renderer declares `ctx.slots` on the cordis
+// Context (the service this plugin registers every slot through) and
+// `dsh-subagent/client` types the subagent catalog rows the session header
+// reads (SessionListState.subagentsByParent). 0.1.1 had both declared in the
+// dsh-client-runtime bundle that no longer exists.
+import type {} from '@deepseek-ai/dsh-client-ui-renderer/client'
+import type {} from '@deepseek-ai/dsh-subagent/client'

package/src/client/nav-store.ts

@@ -1,5 +1,5 @@
-import { defineStore } from '@deepseek-ai/dsh-client-runtime/client'
-import type { WorkspaceId } from '@deepseek-ai/dsh-client-runtime/client'
+import { defineStore } from './compat/store.ts'
+import type { WorkspaceId } from './compat/types.ts'
 
 /** The two levels of the phone page stack. */
 export type MobileView = 'home' | 'session'

package/src/client/session-dot.ts

@@ -1,4 +1,5 @@
-import type { SessionSummary } from '@deepseek-ai/dsh-client-runtime/client'
+import { hasPendingInteraction } from './compat/types.ts'
+import type { MobileSessionRow } from './compat/types.ts'
 import type { StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
 
 /**
@@ -6,11 +7,19 @@ import type { StateDotState } from '@deepseek-ai/dsh-client-ui-primitives'
  * 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.
+ *
+ * Pending interaction has two version-specific sources: `pending` is the
+ * 0.1.2 source (the uiSession service / useSessionPendingInteraction map,
+ * which this dot's caller resolves), and `hasPendingInteraction(row)` is the
+ * 0.1.1 source (the row's own field). Each version hits exactly one of the
+ * two: on 0.1.2 the row field is gone so the row check is always false, and
+ * on 0.1.1 `pending` is always false because the caller has no uiSession.
+ * @param row - session row.
+ * @param pending - whether the uiSession pending map has this row (0.1.2).
  * @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'
+export function dotState(row: MobileSessionRow, pending?: boolean): StateDotState | undefined {
+  if (pending === true || hasPendingInteraction(row)) return 'warning'
   if (row.running) return 'ongoing'
   if (row.completed === true) return 'done'
   return undefined

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

@@ -877,22 +877,39 @@ export const COMPAT_CSS = `  /* ---------- dsh-web-ui family compatibility -----
 
   /* ---------- dsh-vision-router: composer vision toggle (2026-08-26) ----------
      THIRD-PARTY COMPAT RULE — dsh-vision-router registers a Vision mode
-     toggle into conversation.input.right (lib/client-presentation-boundary-
-     main.js, slot id "vision-router-mode-toggle"): a bordered pill with
-     THREE text spans (an eye emoji, the localized label, and a check mark
-     while active) sized by INLINE styles — minHeight 28, padding 4px 8px,
-     fontSize 12, white-space nowrap — roughly 90px of unshrinkable width.
+     toggle into conversation.input.right (slot id
+     "vision-router-mode-toggle"): a bordered pill sized by INLINE styles —
+     minHeight 28, padding 4px 8px, fontSize 12, white-space nowrap —
+     roughly 90px of unshrinkable width.
+
+     Its children changed shape in 2.1.x (re-measured on the real UI
+     2026-09-04, plugin 2.1.1). Both forms are handled:
+       - text form (<= 2.0.x): <span>👁</span><span>label</span> plus a
+         <span>✓</span> while active;
+       - svg form (2.1.x, lib/client-presentation-boundary.js): a 14px eye
+         <svg>, <span>label</span>, plus a SECOND 12px check <svg> while
+         active.
+     The 2.1.1 update is what the user hit: the label span was still hidden
+     but the new eye svg was not, so it rendered NEXT TO our ::before eye —
+     two eyes in a 28px button — and the active check svg had nothing hiding
+     it at all, eating width the phone row does not have.
 
      The phone composer row is nowrap by design (composer.css.ts section 1)
      and the model seat is its only shrinkable item, so that pill squeezes
      the model name out of the row (user report, 2026-08-26).
 
      Phone treatment: a 28x28 round icon button in the attach button's
-     language (same size, same neutral fill). All three spans are hidden and
-     ONE 16px eye is drawn by a CSS mask on ::before with currentColor — the
-     same survives-React-re-render reasoning as the auto-approve shield
-     below: the button re-renders on every state flip, so a DOM-injected
-     icon would need an observer while generated content does not. The
+     language (same size, same neutral fill), showing exactly ONE 16px eye
+     and nothing else. Every span is hidden (label, and the text form's
+     emoji and check); of the svg form's icons only the first survives, the
+     trailing check svg is hidden by a sibling combinator so the count is
+     never assumed. Our own ::before eye is now a FALLBACK, gated on
+     :has(svg) so it draws only for the text form — the plugin ships its own
+     icon from 2.1.x on, and drawing over it is what produced the double
+     eye. Generated content rather than a DOM-injected icon, for the same
+     survives-React-re-render reason as the auto-approve shield below: the
+     button re-renders on every state flip, so an injected node would need
+     an observer while ::before does not. The
      accessible name is unaffected: the button ships aria-label + title with
      the full enable/disable copy, and aria-pressed keeps conveying the
      state; visually the plugin's own inline styles still flip border +
@@ -935,12 +952,27 @@ export const COMPAT_CSS = `  /* ---------- dsh-web-ui family compatibility -----
       background: var(--dsw-specific-selector, rgba(127, 127, 127, .12)) !important;
       box-shadow: none !important;
     }
-    /* Eye emoji + label + active check: all three spans out. */
+    /* Text form: emoji + label + active check are all spans — all out. */
     [data-slot="conversation.composer.bar"] [data-vision-router-mode-toggle] > span {
       display: none !important;
     }
+    /* Svg form (2.1.x): the first svg IS the eye, so keep it and match the
+       row's other icons at 16px. */
+    [data-slot="conversation.composer.bar"] [data-vision-router-mode-toggle] > svg:first-of-type {
+      width: 16px !important;
+      height: 16px !important;
+    }
+    /* ...and drop every svg after it — today that is the active-state check
+       mark. A sibling combinator rather than :nth-child(2): the count is the
+       plugin's business, this only says "one icon, the first one". */
+    [data-slot="conversation.composer.bar"] [data-vision-router-mode-toggle] > svg ~ svg {
+      display: none !important;
+    }
     /* The one svg: eye outline + iris as a currentColor mask — brand while
        active, dimmed with the button by the plugin's own disabled opacity. */
+    [data-slot="conversation.composer.bar"] [data-vision-router-mode-toggle]:has(svg)::before {
+      content: none !important;
+    }
     [data-slot="conversation.composer.bar"] [data-vision-router-mode-toggle]::before {
       content: '';
       width: 16px;

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

@@ -65,12 +65,28 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   }
   ${ROW} > [class$="_tools"] > [class$="_modes"] {
     order: 3 !important;
-    flex: 0 1 auto !important;
-    min-width: 0 !important;
+    /* Rigid on purpose. This seat holds the permission chip, whose own
+       wrapper (the plugin's element inside _modes) is \`flex: 0 0 auto\` and
+       will NOT follow the seat down — so a shrinkable seat does not make the
+       chip narrower, it just slices the seat out from under a chip that
+       stays 44px wide, and the overflow lands on top of the model pill.
+       Measured 2026-09-04 on DSH 0.1.2 at 390px: seat 90-120 (29.7px) with
+       the chip still 90-134, model starting at 125 — a 9px overlap, exactly
+       the "the two chips touch" report. With the seat rigid: seat 90-134,
+       model 139-246, overlap 0; and at 320px the model pill shrinks to 52px
+       and still nothing overlaps.
+       This also restores what section 1 says out loud — the model pill is
+       the ONLY shrinkable item in the row. \`min-width: 0\` is gone with the
+       shrink: it only ever mattered as the companion of \`flex: 0 1\`. */
+    flex: 0 0 auto !important;
     gap: 6px !important;
   }
-  /* The model seat carries the elastic gap: everything after it is pushed to
-     the right edge, so no spacer element is needed. */
+  /* The elastic gap used to live here as \`margin-right: auto\`, which broke
+     the moment a session had no model pill: a subagent session has none, so
+     the gap vanished and the stop / send buttons bunched up in the middle of
+     the row instead of sitting at the right edge (reported 2026-09-06). The
+     gap belongs to the RIGHT group, not to the last item of the left one —
+     see the two rules below the order list. */
   ${MODEL} {
     order: 4 !important;
     /* A definite flex-basis (not auto) breaks the circular sizing between
@@ -81,7 +97,6 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     flex: 0 1 min(48vw, 200px) !important;
     min-width: 0 !important;
     max-width: min(48vw, 200px) !important;
-    margin-right: auto !important;
   }
   /* Third-party input.right entries park next to the ring rather than
      landing at order 0 (= far left) once the groups are flattened. */
@@ -96,6 +111,22 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   ${ROW} > [class$="_trailing"] > [class$="_primary"] {
     order: 7 !important;
   }
+  /* The elastic gap. It sits in front of whichever of the two right-hand
+     items comes first, so the group hugs the right edge no matter what the
+     left side happens to contain — with a model pill, without one (subagent
+     sessions), with or without the third-party entries at order 5.
+     Both get \`margin-left: auto\` and the last rule takes it back off the
+     send button whenever a ring precedes it: two auto margins would SHARE
+     the free space and open a second gap between the ring and send. A
+     sibling combinator answers "is there a ring before me" without assuming
+     anything about the host's nesting. */
+  ${ROW} > [class$="_trailing"] > span[class$="_root"],
+  ${ROW} > [class$="_trailing"] > [class$="_primary"] {
+    margin-left: auto !important;
+  }
+  ${ROW} > [class$="_trailing"] > span[class$="_root"] ~ [class$="_primary"] {
+    margin-left: 0 !important;
+  }
 
   /* --- 3. permission as icon-only pill; model as name+effort pill ---
      (real-device round 2, 2026-08-17; model pill reworked 2026-08-25:
@@ -216,6 +247,115 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     border-radius: 12px !important;
     font-size: 15px !important;
   }
+  /* --- 4a. third-party composer entries live in the model sheet ---
+     effects/model-sheet-extras.ts parks the \`conversation.input.right\`
+     container inside the model menu while that menu is open and puts it back
+     when it closes; these rules are the two halves of that trip.
+
+     In the row: hidden, but ONLY once the effect has marked the container as
+     one it manages. Keying the hide off the marker rather than off "not
+     currently parked" is what makes the failure direction safe — if the
+     effect declines to act (nothing in the slot but the vision toggle, so
+     nothing worth moving) or never runs at all, the marker is absent, this
+     rule does not match, and the controls stay exactly where the host put
+     them. The inverse spelling hid them in the row whenever they were not in
+     the sheet, which in those same cases left them reachable from neither
+     place (caught in review, 2026-09-06).
+     Hiding by ancestor rather than by a display rule on the container itself
+     is what lets the parked copy style itself freely — same element, two
+     homes, two rule sets. \`!important\` because the slot container carries an
+     inline \`display: contents\`. */
+  ${ROW} > [class$="_trailing"] > [data-slot="conversation.input.right"][data-zen-sheet-extras] {
+    display: none !important;
+  }
+  /* Parked in the sheet: a column of full-width rows in the sheet's own
+     language, so a relocated control reads as a sibling of 模型 and 推理等级
+     rather than a chip that wandered in. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] {
+    display: flex !important;
+    flex-direction: column !important;
+    gap: 2px !important;
+    width: 100% !important;
+  }
+  /* Undo the row's compaction on every parked control: back to full width and
+     the 48px the sheet's own cells use. \`> * > *\` reaches both shapes without
+     naming either plugin — subscriptions wraps its trigger in a positioning
+     div, vision-router puts its button straight in the slot. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > *,
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * > button {
+    width: 100% !important;
+    max-width: none !important;
+    min-width: 0 !important;
+    justify-content: flex-start !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] button {
+    box-sizing: border-box !important;
+    min-height: 48px !important;
+    height: auto !important;
+    padding: 0 12px !important;
+    gap: 10px !important;
+    border-radius: 12px !important;
+    border: none !important;
+    background: transparent !important;
+    font-size: 15px !important;
+    /* Both plugins center their chip label, which is right for a pill in the
+       row and wrong for a full-width row: the sheet's own cells start their
+       label at the left edge. justify-content covers the flex triggers,
+       text-align the ones that are not flex containers. */
+    text-align: left !important;
+    justify-content: flex-start !important;
+  }
+  /* Order comes from the row (compat.css.ts puts the vision toggle at 5 so it
+     parks beside the context ring), and that rule still matches in here — the
+     sheet is a DOM descendant of the composer bar even though it paints as a
+     fixed layer. Reset it so the sheet follows DOM order instead of
+     inheriting a decision that was about a different layout. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] > * {
+    order: 0 !important;
+  }
+  /* The vision toggle is squeezed to a 28px icon in the row (compat.css.ts);
+     in the sheet it is a row, so its label comes back and the icon leads. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > span {
+    display: inline !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [data-vision-router-mode-toggle] > svg:first-of-type {
+    width: 18px !important;
+    height: 18px !important;
+  }
+  /* The speed chip opens a menu of its own, anchored \`bottom: 100%\` to its
+     trigger. Inside the sheet — which is \`overflow: hidden\` so its rounded
+     top clips its content — that menu would be cut off. Same escape section 4
+     uses for the host's two menus: position: fixed leaves the clip behind
+     (the sheet sets \`transform: none\`, so nothing between here and the
+     viewport captures fixed positioning) and it lands as its own sheet on top
+     of this one. */
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] {
+    position: fixed !important;
+    left: 0 !important;
+    right: 0 !important;
+    bottom: 0 !important;
+    top: auto !important;
+    margin: 0 !important;
+    width: 100% !important;
+    min-width: 0 !important;
+    max-width: none !important;
+    max-height: min(70dvh, 520px) !important;
+    box-sizing: border-box !important;
+    border-radius: 16px 16px 0 0 !important;
+    border-bottom: none !important;
+    padding: 8px 8px calc(8px + var(--mnav-sab)) !important;
+    /* Above the model sheet it sits on (60, section 4), below the session-info
+       sheet's 70 (info.css.ts) — it is a child of the model sheet, not a peer
+       of the page's own layers. */
+    z-index: 61 !important;
+    box-shadow: 0 -8px 32px rgba(0, 0, 0, .18) !important;
+  }
+  ${MODEL} > [class$="_menu"] > [data-zen-sheet-extras] [role="menu"] [role="menuitemradio"] {
+    min-height: 48px !important;
+    border-radius: 12px !important;
+    font-size: 15px !important;
+  }
+
   /* --- 4b. the official scroll-to-bottom button must not poke through the
      sheet (real-device follow-up, 2026-08-17) ---
      ChatView's own "jump to latest" button (aria-label t("chat.toBottom"))
@@ -250,6 +390,17 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
   [class$="_composerSeat"] {
     --dsh-composer-text-max-height: 124px;
   }
+  /* Pull the text in from the card's left border. Upstream insets the editing
+     host by 16px while the control row below it starts 8px in (row padding,
+     section 1), so the placeholder sat noticeably further out than the
+     buttons under it and the field read as over-padded on a phone (reported
+     2026-09-06). 12px squares it with the 12px of clear space on the right,
+     giving the text a symmetric box, and closes most of the gap with the
+     button row. Anchored on the editing host's own contract attribute rather
+     than a hashed class. */
+  [data-slot="conversation.composer.bar"] [data-composer-input] {
+    padding-left: 12px !important;
+  }
 
   /* --- 6. no divider above OR below the message list ---
      Instead of a rule the messages butt against, they fade near both edges.
@@ -341,7 +492,13 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
      composer. Anchored on the official data-testid, a stable contract
      marker rather than a hashed class name. */
   [data-slot="conversation.input.dock"] > [data-testid="todo-panel"] {
-    flex: 1 1 auto !important;
+    /* A whole line to itself. It shared line 0 with the pills until the goal
+       bar turned up (2026-09-06): two full-width things on one nowrap line
+       meant the to-do header shrank to a stub and the goal bar ran off the
+       right edge. Both are status strips you read at a glance, so they stack
+       — see the line policy in 7c. */
+    flex: 1 0 100% !important;
+    order: 1 !important;
     min-width: 0 !important;
     max-width: none !important;
     min-height: 0 !important;
@@ -368,7 +525,7 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     display: flex !important;
     flex: 1 0 100% !important;
     flex-wrap: wrap !important;
-    order: 2 !important;
+    order: 4 !important;
     align-items: center !important;
     gap: 6px !important;
     max-width: none !important;
@@ -403,12 +560,12 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
      sits closest to the input it will be sent from. The rail only wraps
      while one of the two full-width entries exists, so a session with
      neither keeps the original single scrolling chip line. */
-  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"]) {
+  [data-slot="conversation.input.dock"]:has(> [data-queue-dock], > [data-mobile-nav="attach-chips"], > [data-testid="todo-panel"], > [data-goal-bar]) {
     flex-wrap: wrap !important;
   }
   [data-slot="conversation.input.dock"] > [data-queue-dock] {
     flex: 1 0 100% !important;
-    order: 1 !important;
+    order: 3 !important;
     max-width: none !important;
     min-height: 0 !important;
     max-height: none !important;
@@ -419,6 +576,24 @@ export const COMPOSER_CSS = `/* ---------- phone composer (< 768px) ---------- *
     font-size: 13px !important;
     line-height: normal !important;
   }
+  /* dsh-client-ui-goal's status strip (its own \`data-goal-bar\` marker; it
+     registers into this dock at order 10). Fourth thing here that is not a
+     pill: a row carrying the objective text plus pause / edit / delete
+     buttons, so the 26px cage clipped its buttons off the right edge and the
+     nowrap line pushed what was left off screen (reported 2026-09-06). Same
+     treatment the queue gets — a line of its own, official geometry back. */
+  [data-slot="conversation.input.dock"] > [data-goal-bar] {
+    flex: 1 0 100% !important;
+    order: 2 !important;
+    max-width: none !important;
+    min-height: 0 !important;
+    max-height: none !important;
+    border-radius: 12px !important;
+    overflow: visible !important;
+    font-size: 13px !important;
+    line-height: normal !important;
+  }
+
   /* The panel is the dock's only child; upstream rounds its top corners only
      and drops the bottom border, because there it is half-hidden behind the
      card. On its own line it is a free-standing strip, so close it up. */

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

@@ -34,6 +34,27 @@ export const INFO_CSS = `/* ---------- session-info sheet (< 768px) ---------- *
     display: block !important;
   }
 
+  /* The sheet renders inside the header, and \`[data-phase] header\` is a
+     stacking context of its own (position: relative + z-index: 2, set in
+     header.css.ts so the header's fade strip paints over the scroller). A
+     child's z-index is scoped to that context, so the z:70 below competes not
+     with the page but with the header's own 2 — and the host's composer seat
+     (.wSkVaW_composerSeat, z:7, from dsh-client-ui-conversation) outranks
+     it. Measured live on DSH 0.1.2, 2026-09-04: with the sheet open, the
+     topmost element over the composer band was the composer's own trigger
+     button, i.e. the input row painted THROUGH the card.
+     Promote the header itself for exactly as long as the sheet is mounted —
+     MobileSessionInfo returns null when closed (\`if (!open) return null\`),
+     so the header drops back to 2 on close (verified: 70 while open, 2
+     after). Descendant :has(), never \`>\`: the utilities slot wrapper is
+     \`display: contents\` and the host owns the depth (AGENTS.md — do not
+     encode host DOM depth in a selector).
+     Not raising the seat's own z-index instead: it belongs to the host and
+     is shared with the scroll-to-bottom button and the composer sheets. */
+  [data-phase] header:has([data-mobile-nav="info-layer"]) {
+    z-index: 70;
+  }
+
   [data-mobile-nav="info-layer"] {
     position: fixed;
     inset: 0;