@shendeguize/dsh-agent-sidecar 0.1.0 → 0.2.0

package/src/client/detail/logic.ts

@@ -109,6 +109,30 @@ export function formatRelativeTime(thenMs: number, nowMs: number): string {
   return formatTemplate(DETAIL_STRINGS.time.daysAgo, { n: Math.floor(delta / DAY_MS) })
 }
 
+function pad2(n: number): string {
+  return n < 10 ? `0${n}` : String(n)
+}
+
+/**
+ * Absolute short timestamp for the time column (UX-13): the same local
+ * calendar day renders「HH:mm」, anything older (or a different day)
+ * renders「MM-DD HH:mm」— so a column of same-age rows stays tellable
+ * apart, unlike the coarse relative buckets. The format rule is
+ * copy-implemented to match the board column (no cross-surface import);
+ * the full ISO timestamp stays in the hover title.
+ */
+export function formatEventTime(thenMs: number, nowMs: number): string {
+  if (!Number.isFinite(thenMs) || !Number.isFinite(nowMs)) return ''
+  const then = new Date(thenMs)
+  const now = new Date(nowMs)
+  const hhmm = `${pad2(then.getHours())}:${pad2(then.getMinutes())}`
+  const sameDay =
+    then.getFullYear() === now.getFullYear() &&
+    then.getMonth() === now.getMonth() &&
+    then.getDate() === now.getDate()
+  return sameDay ? hhmm : `${pad2(then.getMonth() + 1)}-${pad2(then.getDate())} ${hhmm}`
+}
+
 // ---------------------------------------------------------------------------
 // Event-kind classification (icon + label).
 // ---------------------------------------------------------------------------
@@ -137,26 +161,43 @@ const KIND_GLYPHS: Record<TimelineKindToken, string> = {
   other: '•',
 }
 
+/** One path segment → family token, or null when it names no family. */
+function segmentToken(segment: string): TimelineKindToken | null {
+  if (segment === 'user') return 'user'
+  if (segment === 'assistant') return 'assistant'
+  if (segment === 'thinking' || segment === 'reasoning') return 'thinking'
+  if (segment === 'tool_call' || segment === 'tool-call' || segment === 'toolcall') {
+    return 'toolCall'
+  }
+  if (segment === 'tool_result' || segment === 'tool-result' || segment === 'toolresult') {
+    return 'toolResult'
+  }
+  if (segment.startsWith('turn_') || segment === 'turn') return 'turn'
+  if (segment.startsWith('step_') || segment === 'step') return 'step'
+  if (segment === 'error') return 'error'
+  return null
+}
+
 /**
- * Map a raw event kind onto the glyph/label vocabulary. Covers both the
- * sidecar normalized kinds — user/assistant/thinking/tool_call/tool_result
- * plus the turn_ and step_ prefixes (sidecar/model.py) — and dsh native
- * slash-path types (`message/user` style); everything else is honestly
- * 'other'.
+ * Map a raw event kind onto the glyph/label vocabulary. Covers the sidecar
+ * normalized kinds — user/assistant/thinking/tool_call/tool_result plus
+ * the turn_ and step_ prefixes (sidecar/model.py) — and dsh native
+ * slash-path types in BOTH orders: `message/user` style (family last) and
+ * the observed `user/message` / `assistant/chunk` / `turn/start` style
+ * (family first; live-data fact, UX-03 — without it the conversation
+ * filter would misfile real dsh user messages as protocol noise). The
+ * last segment stays authoritative; the first is only a fallback.
+ * Everything else is honestly 'other'.
  */
 export function classifyKind(kind: string): TimelineKindToken {
   const k = kind.trim().toLowerCase()
-  const last = k.includes('/') ? (k.split('/').pop() ?? k) : k
-  if (last === 'user') return 'user'
-  if (last === 'assistant') return 'assistant'
-  if (last === 'thinking' || last === 'reasoning') return 'thinking'
-  if (last === 'tool_call' || last === 'tool-call' || last === 'toolcall') return 'toolCall'
-  if (last === 'tool_result' || last === 'tool-result' || last === 'toolresult') {
-    return 'toolResult'
+  const segments = k.split('/')
+  const last = segmentToken(segments[segments.length - 1] ?? k)
+  if (last !== null) return last
+  if (segments.length > 1) {
+    const first = segmentToken(segments[0] ?? '')
+    if (first !== null) return first
   }
-  if (last.startsWith('turn_') || last === 'turn') return 'turn'
-  if (last.startsWith('step_') || last === 'step') return 'step'
-  if (last === 'error') return 'error'
   return 'other'
 }
 
@@ -500,18 +541,26 @@ export function applyListenPage(vm: TimelineVM, page: TimelinePageWire): Timelin
 // Gap detection + row derivation.
 // ---------------------------------------------------------------------------
 
-/** One rendered timeline row: a real event or an honesty gap marker. */
+/** One rendered event row (extracted so aggregation can carry members). */
+export interface TimelineEventRowVM {
+  type: 'event'
+  key: string
+  entry: TimelineEntryVM
+  /** Absolute short time label (see {@link formatEventTime}). */
+  timeLabel: string
+  /** Hover title: ISO timestamp + raw kind + origin (+ seq) + relative age. */
+  hoverTitle: string
+  /** True when this entry arrived in the latest listen merge. */
+  isNew: boolean
+}
+
+/**
+ * One rendered timeline row: a real event, an honesty gap marker, or an
+ * aggregated run of adjacent empty streaming chunks (UX-03 — the members
+ * are carried verbatim so the view can expand the run without data loss).
+ */
 export type TimelineRowVM =
-  | {
-      type: 'event'
-      key: string
-      entry: TimelineEntryVM
-      relativeTime: string
-      /** Hover title: ISO timestamp + raw kind + origin (+ seq). */
-      hoverTitle: string
-      /** True when this entry arrived in the latest listen merge. */
-      isNew: boolean
-    }
+  | TimelineEventRowVM
   | {
       type: 'gap'
       key: string
@@ -519,6 +568,22 @@ export type TimelineRowVM =
       missingCount: number
       label: string
     }
+  | {
+      type: 'chunks'
+      key: string
+      /** Raw wire kind shared by every member of the run. */
+      kindRaw: string
+      count: number
+      /** 「N 个流式分块」 */
+      label: string
+      /** Time label of the newest member. */
+      timeLabel: string
+      hoverTitle: string
+      /** True when any member arrived in the latest listen merge. */
+      isNew: boolean
+      /** The collapsed rows, verbatim, for lossless expansion. */
+      members: TimelineEventRowVM[]
+    }
 
 function isoOrEmpty(ts: number): string {
   if (!Number.isFinite(ts)) return ''
@@ -529,11 +594,12 @@ function isoOrEmpty(ts: number): string {
   }
 }
 
-function eventHoverTitle(entry: TimelineEntryVM): string {
+function eventHoverTitle(entry: TimelineEntryVM, nowMs: number): string {
   const parts = [isoOrEmpty(entry.ts), entry.kindRaw, entry.origin]
   if (entry.seq !== null) {
     parts.push(formatTemplate(DETAIL_STRINGS.timeline.seq, { n: entry.seq }))
   }
+  parts.push(formatRelativeTime(entry.ts, nowMs))
   return parts.filter((p) => p !== '').join(' · ')
 }
 
@@ -572,14 +638,139 @@ export function buildTimelineRows(vm: TimelineVM, nowMs: number): TimelineRowVM[
       type: 'event',
       key: entry.key,
       entry,
-      relativeTime: formatRelativeTime(entry.ts, nowMs),
-      hoverTitle: eventHoverTitle(entry),
+      timeLabel: formatEventTime(entry.ts, nowMs),
+      hoverTitle: eventHoverTitle(entry, nowMs),
       isNew: newKeys.has(entry.key),
     })
   }
   return rows
 }
 
+// ---------------------------------------------------------------------------
+// Kind filter + chunk-run aggregation (UX-03: signal over protocol noise).
+// ---------------------------------------------------------------------------
+
+/** Kind-filter modes; pure UI state owned by the component. */
+export type TimelineFilterMode = 'conversation' | 'all'
+
+/** The kinds that count as conversation (review UX-03 vocabulary). */
+export const CONVERSATION_KINDS: ReadonlySet<TimelineKindToken> = new Set([
+  'user',
+  'assistant',
+  'error',
+])
+
+export interface FilteredRows {
+  rows: TimelineRowVM[]
+  /** Exactly how many event rows the filter removed (honest count). */
+  hiddenCount: number
+}
+
+/**
+ * Kind filter over derived rows: 'conversation' keeps user/assistant/error
+ * events only; 'all' passes everything through. Gap markers ALWAYS stay —
+ * honesty rows are not noise and hiding them could fake a clean timeline.
+ * Runs BEFORE {@link aggregateChunkRows} (gaps are detected on the full
+ * entry list upstream, so filtering can never fabricate a gap).
+ */
+export function filterTimelineRows(
+  rows: readonly TimelineRowVM[],
+  mode: TimelineFilterMode,
+): FilteredRows {
+  if (mode === 'all') return { rows: [...rows], hiddenCount: 0 }
+  const out: TimelineRowVM[] = []
+  let hiddenCount = 0
+  for (const row of rows) {
+    if (row.type === 'event' && !CONVERSATION_KINDS.has(row.entry.kind)) {
+      hiddenCount += 1
+      continue
+    }
+    out.push(row)
+  }
+  return { rows: out, hiddenCount }
+}
+
+/**
+ * True for a protocol streaming-chunk entry: an empty one-line summary and
+ * a chunk-flavored kind (`assistant/chunk` style, matched on the last
+ * slash segment). These are the rows that drowned real conversation in
+ * the walkthrough (18 of 38 rows, review UX-03).
+ */
+export function isStreamChunkEntry(entry: TimelineEntryVM): boolean {
+  if (entry.summary !== '') return false
+  const k = entry.kindRaw.trim().toLowerCase()
+  const last = k.includes('/') ? (k.split('/').pop() ?? k) : k
+  return last === 'chunk' || last.endsWith('_chunk') || last.endsWith('-chunk')
+}
+
+/**
+ * Collapse each maximal run of ≥2 adjacent same-kind streaming-chunk rows
+ * into one 'chunks' row carrying the members verbatim (lossless — the view
+ * offers 展开). Gap markers and any non-chunk row break a run, so the
+ * aggregation can never paper over a seq discontinuity. Single chunks stay
+ * as plain rows (a 1-run header would add noise, not remove it).
+ */
+export function aggregateChunkRows(rows: readonly TimelineRowVM[]): TimelineRowVM[] {
+  const out: TimelineRowVM[] = []
+  let run: TimelineEventRowVM[] = []
+
+  const flush = (): void => {
+    if (run.length >= 2) {
+      const first = run[0]!
+      const last = run[run.length - 1]!
+      out.push({
+        type: 'chunks',
+        key: `chunks:${first.key}`,
+        kindRaw: first.entry.kindRaw,
+        count: run.length,
+        label: formatTemplate(DETAIL_STRINGS.timeline.chunkRun, { n: run.length }),
+        timeLabel: last.timeLabel,
+        hoverTitle: `${first.entry.kindRaw} ×${run.length}`,
+        isNew: run.some((r) => r.isNew),
+        members: run,
+      })
+    } else {
+      out.push(...run)
+    }
+    run = []
+  }
+
+  for (const row of rows) {
+    const chunk = row.type === 'event' && isStreamChunkEntry(row.entry)
+    if (chunk) {
+      const sameKind = run.length === 0 || run[run.length - 1]!.entry.kindRaw === row.entry.kindRaw
+      if (!sameKind) flush()
+      run.push(row as TimelineEventRowVM)
+      continue
+    }
+    flush()
+    out.push(row)
+  }
+  flush()
+  return out
+}
+
+// ---------------------------------------------------------------------------
+// Viewport landing rule (UX-04: open on the newest events).
+// ---------------------------------------------------------------------------
+
+/**
+ * Whether the view should pin its scroll position to the newest rows:
+ * on the first non-empty render (initial landing — understanding the
+ * current context needs the latest events, review UX-04), and on every
+ * append while listen mode is on. Loading older history must never yank
+ * the viewport (`positioned` stays true after the first landing).
+ */
+export function shouldStickToLatest(input: {
+  entryCount: number
+  /** True once the initial landing already happened. */
+  positioned: boolean
+  listening: boolean
+}): boolean {
+  if (input.entryCount === 0) return false
+  return !input.positioned || input.listening
+}
+
 // ---------------------------------------------------------------------------
 // Segmented rendering bound (perf stopgap; no full virtualization, see task
 // report — page sizes already bound growth, this bounds pathological cases).

package/src/client/detail/strings.ts

@@ -1,98 +1,87 @@
-/**
- * Centralized user-facing strings for the session-detail view (design §5.1
- * view 2, §5.3 honesty wording). Deliberately a module-local table — NOT
- * part of the main locale registry (locales/zh.ts / locales/en.ts): the
- * locale tables are owned by parallel tasks and the S7 integration wave
- * folds this table in centrally. Same posture as board/strings.ts.
- *
- * Chinese is the primary UI language. Templates use `{name}` placeholders
- * resolved by `formatTemplate` in `logic.ts`.
- *
- * Pure data module: no imports, no logic.
- *
- * @module
- */
+import { createLocaleView } from '../locales/view.ts'
 
-export const DETAIL_STRINGS = {
-  /** Header block (session meta + controls). */
+/** Dynamic session-detail vocabulary; templates are interpolated by `formatTemplate`. */
+export const DETAIL_STRINGS = createLocaleView({
   header: {
-    close: '返回看板',
-    listenOn: '监听中',
-    listenOff: '监听',
-    listenHint: '开启后新事件将实时追加并高亮',
-    untitled: '(无标题)',
-    unknownProject: '未知项目',
-    /** Design §5.3 / SKILL.md wording: statuses are inferred observations. */
-    observedDisclaimer: '状态为从持久化数据推断的观察值,可能滞后',
+    close: 'detail.header.close',
+    listenOn: 'detail.header.listenOn',
+    listenOff: 'detail.header.listenOff',
+    listenHint: 'detail.header.listenHint',
+    refresh: 'detail.header.refresh',
+    refreshing: 'detail.header.refreshing',
+    refreshHint: 'detail.header.refreshHint',
+    copyIdTitle: 'detail.header.copyIdTitle',
+    copied: 'detail.header.copied',
+    untitled: 'detail.header.untitled',
+    unknownProject: 'detail.header.unknownProject',
+    observedDisclaimer: 'detail.header.observedDisclaimer',
   },
-  /** Session status badge labels (observed values, see disclaimer). */
   status: {
-    working: '工作中',
-    waiting: '等待中',
-    idle: '空闲',
-    dead: '已结束',
-    unknown: '未知',
+    working: 'detail.status.working',
+    waiting: 'detail.status.waiting',
+    idle: 'detail.status.idle',
+    dead: 'detail.status.dead',
+    unknown: 'detail.status.unknown',
   },
-  /** Timeline source badges (provenance of the merged page, honest labels). */
   sources: {
-    title: '数据来源',
-    dshLive: 'dsh 实时',
-    dshCold: 'dsh 冷读',
-    sidecarReplay: 'sidecar 重放',
-    sidecarBuffer: 'sidecar 缓冲',
-    none: '来源未知',
+    title: 'detail.sources.title',
+    dshLive: 'detail.sources.dshLive',
+    dshCold: 'detail.sources.dshCold',
+    sidecarReplay: 'detail.sources.sidecarReplay',
+    sidecarBuffer: 'detail.sources.sidecarBuffer',
+    none: 'detail.sources.none',
   },
-  /** Normalized event-kind labels; unknown kinds keep their raw text. */
   kind: {
-    user: '用户消息',
-    assistant: '助手回复',
-    thinking: '思考',
-    toolCall: '工具调用',
-    toolResult: '工具结果',
-    turn: '回合',
-    step: '步骤',
-    error: '错误',
-    other: '事件',
+    user: 'detail.kind.user',
+    assistant: 'detail.kind.assistant',
+    thinking: 'detail.kind.thinking',
+    toolCall: 'detail.kind.toolCall',
+    toolResult: 'detail.kind.toolResult',
+    turn: 'detail.kind.turn',
+    step: 'detail.kind.step',
+    error: 'detail.kind.error',
+    other: 'detail.kind.other',
   },
-  /** Seq-discontinuity marker row (design §4.b.3 honest presentation). */
   gap: {
-    label: '缺口:可能有 {n} 条事件未捕获(256 队列上限或未持久化)',
+    label: 'detail.gap.label',
+  },
+  filter: {
+    conversation: 'detail.filter.conversation',
+    all: 'detail.filter.all',
+    hiddenNotice: 'detail.filter.hiddenNotice',
   },
-  /** Timeline list chrome. */
   timeline: {
-    loadMore: '加载更多历史',
-    loadingMore: '加载中…',
-    noMore: '已到时间线起点',
-    expand: '展开',
-    collapse: '收起',
-    newBadge: '新',
-    seq: 'seq {n}',
-    hiddenNotice: '为保持流畅,较早的 {n} 条已折叠',
-    showAll: '全部显示',
+    loadMore: 'detail.timeline.loadMore',
+    loadingMore: 'detail.timeline.loadingMore',
+    noMore: 'detail.timeline.noMore',
+    expand: 'detail.timeline.expand',
+    collapse: 'detail.timeline.collapse',
+    newBadge: 'detail.timeline.newBadge',
+    seq: 'detail.timeline.seq',
+    hiddenNotice: 'detail.timeline.hiddenNotice',
+    showAll: 'detail.timeline.showAll',
+    chunkRun: 'detail.timeline.chunkRun',
   },
-  /** Loading / empty / error body states. */
   states: {
-    loadingTitle: '正在加载时间线…',
-    emptyTitle: '暂无事件',
-    emptyHint: '该会话还没有可展示的规范化事件。',
-    errorTitle: '时间线加载失败',
-    /** Fallback template when the reason code has no friendly mapping. */
-    errorFallback: '错误码:{reason}',
+    loadingTitle: 'detail.states.loadingTitle',
+    emptyTitle: 'detail.states.emptyTitle',
+    emptyHint: 'detail.states.emptyHint',
+    errorTitle: 'detail.states.errorTitle',
+    errorFallback: 'detail.states.errorFallback',
     errors: {
-      session_not_found: '会话不存在或已不可见',
-      invalid_cursor: '分页游标无效,请重新打开详情',
-      fusion_not_wired: '当前 host 未启用时间线能力',
-      network_error: '网络错误,无法联系 dsh host',
-      request_timeout: '请求超时',
+      session_not_found: 'detail.states.errors.session_not_found',
+      invalid_cursor: 'detail.states.errors.invalid_cursor',
+      fusion_not_wired: 'detail.states.errors.fusion_not_wired',
+      network_error: 'detail.states.errors.network_error',
+      request_timeout: 'detail.states.errors.request_timeout',
     },
   },
-  /** Relative time templates (coarse buckets, matches the board wording). */
   time: {
-    justNow: '刚刚',
-    minutesAgo: '{n} 分钟前',
-    hoursAgo: '{n} 小时前',
-    daysAgo: '{n} 天前',
+    justNow: 'detail.time.justNow',
+    minutesAgo: 'detail.time.minutesAgo',
+    hoursAgo: 'detail.time.hoursAgo',
+    daysAgo: 'detail.time.daysAgo',
   },
-} as const
+} as const)
 
 export type DetailStrings = typeof DETAIL_STRINGS

package/src/client/detail-glue.ts

@@ -83,6 +83,8 @@ export interface DetailGlueState {
   error: string | null
   hasMore: boolean
   listening: boolean
+  /** True while a manual newest-window refresh is in flight (UX-07). */
+  refreshing: boolean
   /** True once the initial load succeeded (timeline usable). */
   ready: boolean
   lineage: LineageSliceState
@@ -137,6 +139,7 @@ export class DetailStore {
   private paging = false
   private listenInFlight = false
   private listenQueued = false
+  private refreshInFlight = false
   private lineageStarted = false
 
   constructor(sessionId: string, options: DetailStoreOptions = {}) {
@@ -152,6 +155,7 @@ export class DetailStore {
       error: null,
       hasMore: false,
       listening: false,
+      refreshing: false,
       ready: false,
       lineage: INITIAL_LINEAGE,
     }
@@ -241,6 +245,35 @@ export class DetailStore {
     if (listening) this.scheduleListenRefetch()
   }
 
+  /**
+   * Manual newest-window refetch with visible feedback (UX-07), also fired
+   * once after a delivered injection (UX-05 observation loop). Unlike the
+   * silent best-effort listen refetch, it reports in-flight state and
+   * surfaces a failure reason (rendered as the inline banner). Appended
+   * entries get the listen-merge highlight. Coalesced: at most one manual
+   * refresh in flight, extra calls are dropped.
+   */
+  async refreshNewest(): Promise<void> {
+    if (this.disposed || !this.state.ready || this.refreshInFlight) return
+    this.refreshInFlight = true
+    this.setState({ refreshing: true, error: null })
+    try {
+      const page = await this.fetchPageFn(this.state.sessionId, {
+        ...(this.listenLimit !== undefined ? { limit: this.listenLimit } : {}),
+      })
+      if (this.disposed) return
+      this.setState({
+        timeline: applyListenPage(this.state.timeline, page),
+        refreshing: false,
+      })
+    } catch (err) {
+      if (this.disposed) return
+      this.setState({ refreshing: false, error: reasonOf(err) })
+    } finally {
+      this.refreshInFlight = false
+    }
+  }
+
   /**
    * SSE `state` frame hook (one call per controller notification). Refreshes
    * the header from the live board card when given, and in listen mode

package/src/client/detail-view.module.css

@@ -1,11 +1,3 @@
-/*
- * Detail-view container + board-tab view-switcher chrome (T5.10b, design
- * §5.1): every color rides a --dsw-alias-* design token with a neutral
- * fallback. Same posture as board.module.css / dsh-tools.module.css.
- */
-
-/* ------------------------------------------------ board-tab view switcher */
-
 .switcherBar {
   display: flex;
   align-items: center;
@@ -19,28 +11,29 @@
   border-radius: 999px;
   border: 1px solid transparent;
   background: transparent;
-  color: var(--dsw-alias-label-secondary, #57606a);
+  color: var(--dsw-alias-label-secondary);
   cursor: pointer;
 }
 
 .switcherButton:hover {
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
+  background: var(--dsw-alias-bg-layer-1);
 }
 
 .switcherButton[data-active='true'] {
   font-weight: 600;
-  color: var(--dsw-alias-label-primary, #1f2328);
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-  border-color: var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
+  color: var(--dsw-alias-label-primary);
+  background: var(--dsw-alias-bg-layer-2);
+  border-color: var(--dsw-alias-border-l2);
 }
 
-/* --------------------------------------------------- detail-view chrome */
-
 .detailRoot {
   display: flex;
   flex-direction: column;
   gap: 12px;
   min-width: 0;
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
   padding: 12px;
 }
 
@@ -48,32 +41,47 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  flex-wrap: wrap;
 }
 
-.actionButton {
-  font-size: 12px;
-  padding: 3px 12px;
-  border-radius: 6px;
-  border: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.12));
-  background: var(--dsw-alias-bg-layer-1, rgba(0, 0, 0, 0.02));
-  color: var(--dsw-alias-label-primary, #1f2328);
-  cursor: pointer;
-}
-
-.actionButton:hover {
-  background: var(--dsw-alias-bg-layer-2, rgba(0, 0, 0, 0.04));
-}
-
-.actionButton:disabled {
-  opacity: 0.5;
-  cursor: not-allowed;
+.analysisDisabledReason {
+  max-width: 360px;
+  font-size: 11px;
+  line-height: 16px;
+  color: var(--agsc-fg-secondary);
 }
 
-/* dsh deep-query tools section under the timeline. */
 .toolsSection {
   display: flex;
   flex-direction: column;
   gap: 16px;
-  border-top: 1px solid var(--dsw-alias-border-l2, rgba(0, 0, 0, 0.08));
-  padding-top: 12px;
+  border: 1px solid var(--agsc-border);
+  border-radius: var(--agsc-radius-control);
+  padding: 8px 12px;
+}
+
+.toolsToggle {
+  align-self: flex-start;
+}
+
+.toolsToggleGlyph {
+  flex: none;
+  font-size: 10px;
+  color: var(--agsc-fg-dimmed);
+}
+
+.injectDialog {
+  gap: 0;
+  width: min(560px, 100%);
+  max-height: min(85vh, 720px);
+  padding: 0;
+  overflow: auto;
+}
+
+.injectDialog > [data-dsh-part='inject-panel'] {
+  width: 100%;
+  max-width: none;
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
 }