@shendeguize/dsh-agent-sidecar 0.1.0 → 0.1.1

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

@@ -20,6 +20,11 @@ export const DETAIL_STRINGS = {
     listenOn: '监听中',
     listenOff: '监听',
     listenHint: '开启后新事件将实时追加并高亮',
+    refresh: '刷新',
+    refreshing: '刷新中…',
+    refreshHint: '手动拉取最新时间线窗口',
+    copyIdTitle: '点击复制会话 ID',
+    copied: '已复制',
     untitled: '(无标题)',
     unknownProject: '未知项目',
     /** Design §5.3 / SKILL.md wording: statuses are inferred observations. */
@@ -58,6 +63,12 @@ export const DETAIL_STRINGS = {
   gap: {
     label: '缺口:可能有 {n} 条事件未捕获(256 队列上限或未持久化)',
   },
+  /** Kind filter chips (UX-03): protocol noise hidden by default, honestly counted. */
+  filter: {
+    conversation: '只看对话',
+    all: '全部事件',
+    hiddenNotice: '已隐藏 {n} 条协议事件',
+  },
   /** Timeline list chrome. */
   timeline: {
     loadMore: '加载更多历史',
@@ -69,6 +80,8 @@ export const DETAIL_STRINGS = {
     seq: 'seq {n}',
     hiddenNotice: '为保持流畅,较早的 {n} 条已折叠',
     showAll: '全部显示',
+    /** Aggregated row for an adjacent run of empty streaming chunks (UX-03). */
+    chunkRun: '{n} 个流式分块',
   },
   /** Loading / empty / error body states. */
   states: {

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

@@ -41,6 +41,12 @@
   flex-direction: column;
   gap: 12px;
   min-width: 0;
+  /* Own the scroll like the board/project roots do (UX-12): without a
+   * bounded height the inner timeline's overflow-y can never engage, and
+   * the UX-04 landing / listen-mode tail pinning would silently no-op. */
+  height: 100%;
+  overflow-y: auto;
+  box-sizing: border-box;
   padding: 12px;
 }
 
@@ -69,11 +75,38 @@
   cursor: not-allowed;
 }
 
-/* dsh deep-query tools section under the timeline. */
+/* dsh deep-query tools: collapsible segment between the actions row and
+ * the timeline (UX-09 — previously buried below a possibly very long
+ * list, outside the viewport on long sessions). */
 .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(--dsw-alias-border-l1, rgba(0, 0, 0, 0.08));
+  border-radius: 8px;
+  padding: 8px 12px;
+}
+
+.toolsToggle {
+  align-self: flex-start;
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  font-family: inherit;
+  color: var(--dsw-alias-label-secondary, #57606a);
+  background: transparent;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+}
+
+.toolsToggle:hover {
+  color: var(--dsw-alias-label-primary, #1f2328);
+}
+
+.toolsToggleGlyph {
+  flex: none;
+  font-size: 10px;
+  color: var(--dsw-alias-label-tertiary, #6e7781);
 }

package/src/client/detail-view.tsx

@@ -34,7 +34,7 @@ import { SearchStore } from './search-glue.ts'
 import { AnalysisStore } from './analysis-glue.ts'
 import { ProjectsStore } from './project-glue.ts'
 import type { SidecarController } from './controller.ts'
-import type { InjectMode } from './inject/logic.ts'
+import { isDeliveredResult, type InjectMode } from './inject/logic.ts'
 import type { InjectActions } from './inject-glue.ts'
 import { t } from './locales/index.ts'
 import css from './detail-view.module.css'
@@ -97,6 +97,7 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
   const [analysisStore] = useState(() => integration.createAnalysisStore())
   const [injectOpen, setInjectOpen] = useState(false)
   const [analysisOpen, setAnalysisOpen] = useState(false)
+  const [toolsOpen, setToolsOpen] = useState(false)
 
   useEffect(() => {
     void detailStore.open()
@@ -130,6 +131,30 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
   const closeInject = (): void => { setInjectOpen(false) }
   const title = detail.header.title.trim()
 
+  // UX-05 observation loop, part 1: a delivered execute refetches the
+  // newest timeline window at once, so closing the panel never lands on a
+  // stale pre-injection timeline. Wraps (not replaces) the integration
+  // callback — the two-phase flow and the owner's onDelivered hook (board
+  // snapshot refresh) stay untouched.
+  const injectActions: InjectActions | undefined =
+    injectIntegration === undefined
+      ? undefined
+      : {
+          onPrepare: injectIntegration.actions.onPrepare,
+          onExecute: async (req) => {
+            const result = await injectIntegration.actions.onExecute(req)
+            if (isDeliveredResult(result)) void detailStore.refreshNewest()
+            return result
+          },
+        }
+
+  // UX-05 part 2: the delivered result page offers「开启监听观察反应」—
+  // flip listen mode on (if off) and hand the view back to the timeline.
+  const observeReaction = (): void => {
+    if (!detailStore.getState().listening) detailStore.toggleListen()
+    closeInject()
+  }
+
   return (
     <div className={css['detailRoot']} data-testid="agent-sidecar-detail-view">
       <div className={css['actionsRow']}>
@@ -155,6 +180,50 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         </button>
       </div>
 
+      {/* Collapsible dsh deep-query tools ABOVE the timeline (UX-09):
+          discoverable without scrolling past a long event list. */}
+      <div className={css['toolsSection']} data-testid="agent-sidecar-detail-tools">
+        <button
+          type="button"
+          className={css['toolsToggle']}
+          aria-expanded={toolsOpen}
+          onClick={() => { setToolsOpen((open) => !open) }}
+        >
+          <span className={css['toolsToggleGlyph']} aria-hidden>
+            {toolsOpen ? '▾' : '▸'}
+          </span>
+          {t('detail.tools.title')}
+          <span className={css['toolsToggleGlyph']}>
+            {toolsOpen ? t('detail.tools.hide') : t('detail.tools.show')}
+          </span>
+        </button>
+        {toolsOpen && (
+          <>
+            <LineageTree
+              trace={detail.lineage.trace}
+              available={detail.lineage.available}
+              reason={detail.lineage.reason}
+              detail={detail.lineage.detail}
+              currentSessionId={sessionId}
+              onSelectSession={props.onSelectSession}
+              loading={detail.lineage.loading}
+              error={detail.lineage.error}
+            />
+            <SearchPanel
+              query={search.query}
+              project={search.project}
+              mode={search.mode}
+              items={search.items}
+              loading={search.loading}
+              error={search.error}
+              onQueryChange={(query) => { searchStore.setQuery(query) }}
+              onSubmit={() => { void searchStore.submit() }}
+              onSelectSession={props.onSelectSession}
+            />
+          </>
+        )}
+      </div>
+
       <SessionDetail
         sessionId={sessionId}
         header={detail.header}
@@ -163,8 +232,10 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         error={detail.error}
         hasMore={detail.hasMore}
         listening={detail.listening}
+        refreshing={detail.refreshing}
         onLoadMore={() => { void detailStore.loadMore() }}
         onToggleListen={() => { detailStore.toggleListen() }}
+        onRefresh={() => { void detailStore.refreshNewest() }}
         onClose={props.onClose}
       />
 
@@ -181,31 +252,7 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
         />
       )}
 
-      <div className={css['toolsSection']} data-testid="agent-sidecar-detail-tools">
-        <LineageTree
-          trace={detail.lineage.trace}
-          available={detail.lineage.available}
-          reason={detail.lineage.reason}
-          detail={detail.lineage.detail}
-          currentSessionId={sessionId}
-          onSelectSession={props.onSelectSession}
-          loading={detail.lineage.loading}
-          error={detail.lineage.error}
-        />
-        <SearchPanel
-          query={search.query}
-          project={search.project}
-          mode={search.mode}
-          items={search.items}
-          loading={search.loading}
-          error={search.error}
-          onQueryChange={(query) => { searchStore.setQuery(query) }}
-          onSubmit={() => { void searchStore.submit() }}
-          onSelectSession={props.onSelectSession}
-        />
-      </div>
-
-      {injectIntegration !== undefined && injectOpen && (
+      {injectIntegration !== undefined && injectActions !== undefined && injectOpen && (
         <div className={overlay['backdrop']} role="presentation" onClick={closeInject}>
           <div
             className={overlay['dialog']}
@@ -221,9 +268,10 @@ export function SidecarDetailView(props: SidecarDetailViewProps): ReactElement {
                 ...(title !== '' ? { title } : {}),
               }}
               defaultMode={injectIntegration.getDefaultMode()}
-              onPrepare={injectIntegration.actions.onPrepare}
-              onExecute={injectIntegration.actions.onExecute}
+              onPrepare={injectActions.onPrepare}
+              onExecute={injectActions.onExecute}
               onClose={closeInject}
+              onObserve={observeReaction}
             />
           </div>
         </div>

package/src/client/dsh-tools/dsh-tools.module.css

@@ -169,10 +169,12 @@
   outline-offset: 1px;
 }
 
-/* Current-session highlight (the row the user is inspecting). */
+/* Current-session highlight (the row the user is inspecting). Brand tint
+ * rides the real brand-primary token — brand-secondary/tertiary do not
+ * exist in the dsh token table (UX-15). */
 .node[data-current='true'] {
   border-color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.08));
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 8%, transparent);
   cursor: default;
 }
 
@@ -333,7 +335,7 @@
 
 .matchTag[data-kind='full-text'] {
   color: var(--dsw-alias-brand-primary, #4d6bfe);
-  border-color: var(--dsw-alias-brand-secondary, rgba(77, 107, 254, 0.32));
+  border-color: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 32%, transparent);
   background: transparent;
 }
 
@@ -368,7 +370,7 @@
 
 .snippetMark {
   color: var(--dsw-alias-brand-primary, #4d6bfe);
-  background: var(--dsw-alias-brand-tertiary, rgba(77, 107, 254, 0.12));
+  background: color-mix(in srgb, var(--dsw-alias-brand-primary, #4d6bfe) 12%, transparent);
   border-radius: 2px;
   font-weight: 600;
 }