dsh-context-compression-improved 0.1.1 → 0.2.0

package/packages/selector/src/client/CompressionProfileSelector.module.css

@@ -0,0 +1,170 @@
+.settingsSection {
+  display: flex;
+  max-width: 720px;
+  flex-direction: column;
+  gap: 12px;
+  color: var(--dsw-alias-label-primary);
+}
+
+.settingsTitle {
+  margin: 0;
+  color: var(--dsw-alias-label-primary);
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.settingsDescription {
+  margin: 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.root {
+  width: 100%;
+}
+
+.profileGrid {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+}
+
+.profileCard {
+  min-height: 112px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.profileCard:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); }
+.profileCard[aria-pressed="true"] { border-color: var(--dsw-alias-label-primary); }
+.profileCard:active:not(:disabled) { transform: scale(.99); }
+.profileCard:disabled { cursor: default; opacity: .6; }
+.profileCard:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.profileCardTop { display: flex; align-items: center; gap: 8px; }
+.profileCardTitle { font-size: 14px; font-weight: 500; line-height: 20px; }
+.profileCurrent { padding: 1px 6px; border-radius: 999px; background: var(--dsw-alias-label-primary); color: var(--dsw-alias-bg-base); font-size: 10px; line-height: 14px; }
+.profileCardDetail { color: var(--dsw-alias-label-secondary); font-size: 12px; line-height: 18px; }
+
+.button {
+  width: 100%;
+  min-height: 34px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 10px;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  text-align: left;
+}
+
+.button:hover { background: var(--dsw-alias-interactive-bg-hover); }
+.button:disabled { cursor: default; opacity: .6; }
+
+.copy { flex: 1; min-width: 0; }
+.label { font-size: 11px; line-height: 14px; color: var(--dsw-alias-label-tertiary); }
+.value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; line-height: 17px; }
+.chevron { flex: none; color: var(--dsw-alias-label-secondary); }
+
+.menuCopy { display: flex; min-width: 220px; flex-direction: column; gap: 2px; }
+.menuTitle { font-size: 13px; line-height: 17px; }
+.menuDetail { max-width: 290px; white-space: normal; font-size: 11px; line-height: 15px; color: var(--dsw-alias-label-tertiary); }
+
+.error {
+  padding: 4px 8px 0;
+  color: var(--dsw-alias-state-error-primary);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.unavailable {
+  padding: 4px 8px 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.settingsHint {
+  padding: 4px 8px 0;
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.pricing {
+  padding: 4px 8px 0;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.custom {
+  margin-top: 16px;
+  padding: 16px 0 0;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.customTitle { margin: 0 0 6px; font-size: 13px; line-height: 17px; }
+.customNote { margin: 4px 0; color: var(--dsw-alias-label-tertiary); font-size: 11px; line-height: 15px; }
+
+.stage {
+  margin: 12px 0 0;
+  padding: 12px 0 0;
+  border: 0;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+}
+
+.stageToggle { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; line-height: 16px; }
+.fieldGrid { display: grid; grid-template-columns: 1fr; gap: 8px; }
+.field { display: flex; min-width: 0; flex-direction: column; gap: 4px; margin-top: 8px; color: var(--dsw-alias-label-secondary); font-size: 11px; line-height: 15px; }
+.field input, .field select {
+  width: 100%;
+  min-width: 0;
+  min-height: 30px;
+  box-sizing: border-box;
+  padding: 4px 6px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 7px;
+  background: var(--dsw-alias-bg-base);
+  color: var(--dsw-alias-label-primary);
+}
+.field input:focus-visible, .field select:focus-visible, .actions button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
+.actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
+.actions button { min-height: 30px; padding: 4px 8px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 7px; background: transparent; color: var(--dsw-alias-label-primary); }
+.actions button:active:not(:disabled) { transform: scale(.98); }
+.actions button:disabled { opacity: .6; }
+
+@media (max-width: 560px) {
+  .profileGrid { grid-template-columns: 1fr; }
+}
+
+.autoCompact {
+  margin-top: 24px;
+  padding: 16px;
+  border: 1px solid rgba(128, 128, 128, 0.35);
+  border-radius: 8px;
+}
+
+.autoCompactTitle {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.autoCompactRisk {
+  margin: 8px 0 0;
+  font-size: 12px;
+  opacity: 0.9;
+}

package/packages/selector/src/client/CompressionProfileSelector.tsx

@@ -0,0 +1,79 @@
+/**
+ * CompressionProfileSelector — thin re-export hub.
+ *
+ * Component implementations now live in dedicated modules to keep the
+ * god-module under control. This file preserves the public API surface so
+ * existing consumers see no change.
+ *
+ * @module dsh-context-compression-improved/client/CompressionProfileSelector
+ */
+
+import type { SettingsScope } from '@deepseek-ai/dsh-client-runtime/client'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import {
+  COMPRESSION_PROFILES,
+  isCustomCompressionPolicy,
+  type CompressionProfile,
+  type CustomCompressionPolicy,
+  type ContextCompressionSettings,
+  type PresetOptionsSettings,
+} from '../profiles.ts'
+
+export { COMPRESSION_PROFILES, isCustomCompressionPolicy }
+export type { CompressionProfile, CustomCompressionPolicy, ContextCompressionSettings, PresetOptionsSettings }
+
+export interface CompressionSelectorInjected {
+  hooks: { compression: SettingsScope<ContextCompressionSettings> }
+  select: (profile: CompressionProfile) => Promise<void>
+  saveCustom: (custom: CustomCompressionPolicy) => Promise<void>
+  resetCustom: () => Promise<void>
+  saveAutoCompact: (thresholdPercent: number) => Promise<void>
+  saveCodeSkeleton: (enabled: boolean) => Promise<void>
+  /** Patch of `presetOptions` members; an explicit `undefined` clears that field. */
+  savePresetOptions: (options: import('./preset-options.ts').PresetOptionsPatch) => Promise<void>
+}
+
+export type CompressionProfileSelectorProps =
+  PropsRuntime<'settings.section'>
+  & PropsLocale<'context-compression'>
+  & InjectFace<CompressionSelectorInjected>
+
+// Re-export sub-components from dedicated modules.
+export {
+  ContextCompressionSettingsSection,
+  SettingsCompressionProfileControls,
+} from './settings-section.tsx'
+
+export {
+  CompressionProfileControls,
+  AutoCompactThresholdControls,
+  CodeSkeletonControls,
+} from './CompressionProfileControls.tsx'
+
+export {
+  EstimatorControls,
+  EstimatorInactiveNotice,
+  ESTIMATOR_CATALOG_ROUTES,
+} from './EstimatorControls.tsx'
+
+export {
+  CustomPolicyEditor,
+  StageFields,
+  editableCustom,
+} from './CustomPolicyEditor.tsx'
+
+// Imported for the wrapper component below; re-exported above.
+import { CompressionProfileControls } from './CompressionProfileControls.tsx'
+
+/** Full-page Settings surface backed by the same durable selector state. */
+export function CompressionProfileSelector({
+  ...props
+}: CompressionProfileSelectorProps) {
+  return <CompressionProfileControls {...props} showCustomEditor={false} />
+}
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    'context-compression': import('./locales.ts').ContextCompressionLocaleKey
+  }
+}

package/packages/selector/src/client/CustomPolicyEditor.tsx

@@ -0,0 +1,216 @@
+/**
+ * CustomPolicyEditor: full custom compression policy editor with StageFields.
+ *
+ * Extracted from CompressionProfileSelector.tsx to reduce god-module size.
+ *
+ * @module dsh-context-compression-improved/client/CustomPolicyEditor
+ */
+
+import type { ContextCompressionLocaleKey } from './locales.ts'
+import css from './CompressionProfileSelector.module.css'
+import {
+  isCustomCompressionPolicy,
+  type CustomCompressionBudget,
+  type CustomCompressionPolicy,
+  type CustomCompressionPolicyV3,
+  type CustomHistoryPolicy,
+} from '../profiles.ts'
+
+interface CustomPolicyEditorProps {
+  value: CustomCompressionPolicyV3
+  disabled: boolean
+  setValue: (value: CustomCompressionPolicyV3) => void
+  save: () => Promise<void>
+  reset: () => Promise<void>
+  settle: (operation: () => Promise<void>) => void
+  t: (key: ContextCompressionLocaleKey) => string
+}
+
+export function CustomPolicyEditor({ value, disabled, setValue, save, reset, settle, t }: CustomPolicyEditorProps) {
+  const valid = isCustomCompressionPolicy(value)
+  const unitStep = value.unit === 'tokens' ? 1 : 0.01
+  const unitMax = value.unit === 'tokens' ? undefined : 100
+  const unitBounds = unitMax === undefined ? {} : { max: unitMax }
+  const setBudget = (
+    stage: 'fresh' | 'aggregate',
+    patch: Partial<CustomCompressionBudget>,
+  ): void => {
+    setValue({ ...value, [stage]: { ...value[stage], ...patch } })
+  }
+  const setHistory = (patch: Partial<CustomHistoryPolicy>): void => {
+    setValue({ ...value, history: { ...value.history, ...patch } })
+  }
+  return (
+    <section className={css.custom} aria-labelledby="context-compression-custom-title">
+      <h3 id="context-compression-custom-title" className={css.customTitle}>{t('custom.title')}</h3>
+      <p className={css.customNote}>{t('custom.sessionScope')}</p>
+      <p className={css.customNote}>{t('custom.measurement')}</p>
+      <label className={css.field}>
+        <span>{t('custom.unit')}</span>
+        <select
+          value={value.unit}
+          disabled={disabled}
+          onChange={(event) => {
+            setValue({
+              ...value,
+              unit: event.currentTarget.value as CustomCompressionPolicy['unit'],
+            })
+          }}
+        >
+          <option value="tokens">{t('custom.unit.tokens')}</option>
+          <option value="context-percent">{t('custom.unit.contextPercent')}</option>
+        </select>
+      </label>
+      <StageFields
+        t={t}
+        title={t('custom.fresh.enabled')}
+        enabled={value.fresh.enabled}
+        disabled={disabled}
+        onEnabled={(enabled) => { setBudget('fresh', { enabled }) }}
+        fields={[
+          { label: t('custom.fresh.trigger'), value: value.fresh.trigger, set: (trigger) => { setBudget('fresh', { trigger }) }, ...unitBounds },
+          { label: t('custom.fresh.target'), value: value.fresh.target, set: (target) => { setBudget('fresh', { target }) }, ...unitBounds },
+        ]}
+        step={unitStep}
+      />
+      <StageFields
+        t={t}
+        title={t('custom.aggregate.enabled')}
+        enabled={value.aggregate.enabled}
+        disabled={disabled}
+        onEnabled={(enabled) => { setBudget('aggregate', { enabled }) }}
+        fields={[
+          { label: t('custom.aggregate.trigger'), value: value.aggregate.trigger, set: (trigger) => { setBudget('aggregate', { trigger }) }, ...unitBounds },
+          { label: t('custom.aggregate.target'), value: value.aggregate.target, set: (target) => { setBudget('aggregate', { target }) }, ...unitBounds },
+        ]}
+        step={unitStep}
+      />
+      <StageFields
+        t={t}
+        title={t('custom.history.enabled')}
+        enabled={value.history.enabled}
+        disabled={disabled}
+        onEnabled={(enabled) => { setHistory({ enabled }) }}
+        fields={[
+          { label: t('custom.history.trigger'), value: value.history.trigger, set: (trigger) => { setHistory({ trigger }) }, ...unitBounds },
+          { label: t('custom.history.keepRecentToolCalls'), value: value.history.keepRecentToolCalls, set: (keepRecentToolCalls) => { setHistory({ keepRecentToolCalls }) }, integer: true, allowZero: true },
+          { label: t('custom.history.keepRecentTokens'), value: value.history.keepRecentTokens, set: (keepRecentTokens) => { setHistory({ keepRecentTokens }) }, allowZero: true, ...unitBounds },
+          { label: t('custom.history.minReclaim'), value: value.history.minReclaim, set: (minReclaim) => { setHistory({ minReclaim }) }, ...unitBounds },
+        ]}
+        step={unitStep}
+        fieldsEnabled={value.history.enabled || value.tailTrim.enabled}
+      />
+      <label className={css.field}>
+        <span>{t('custom.prefixPolicy')}</span>
+        <select
+          value={value.prefixPolicy}
+          disabled={disabled || !value.history.enabled}
+          onChange={(event) => {
+            setValue({
+              ...value,
+              prefixPolicy: event.currentTarget.value as CustomCompressionPolicy['prefixPolicy'],
+            })
+          }}
+        >
+          <option value="preserve">{t('custom.prefixPolicy.preserve')}</option>
+          <option value="pressure-break">{t('custom.prefixPolicy.pressureBreak')}</option>
+        </select>
+      </label>
+      <div className={css.customNote}>{t('custom.experimental')}</div>
+      <StageFields
+        t={t}
+        title={t('custom.tailTrim.enabled')}
+        enabled={value.tailTrim.enabled}
+        disabled={disabled}
+        onEnabled={(enabled) => {
+          setValue({ ...value, tailTrim: { ...value.tailTrim, enabled } })
+        }}
+        fields={[{
+          label: t('custom.tailTrim.trigger'),
+          value: value.tailTrim.trigger,
+          set: (trigger) => {
+            setValue({ ...value, tailTrim: { ...value.tailTrim, trigger } })
+          },
+          ...unitBounds,
+        }]}
+        step={unitStep}
+      />
+      <p className={css.customNote}>{t('custom.tailTrim.warning')}</p>
+      {valid ? null : <div className={css.error} role="alert">{t('custom.invalid')}</div>}
+      <div className={css.actions}>
+        <button type="button" disabled={disabled || !valid} onClick={() => { settle(save) }}>{t('custom.save')}</button>
+        <button type="button" disabled={disabled} onClick={() => { settle(reset) }}>{t('custom.reset')}</button>
+      </div>
+    </section>
+  )
+}
+
+interface StageNumberField {
+  label: string
+  value: number
+  set: (value: number) => void
+  integer?: boolean
+  allowZero?: boolean
+  max?: number
+}
+
+export function StageFields({ title, enabled, disabled, onEnabled, fields, step, fieldsEnabled = enabled, t }: {
+  title: string
+  enabled: boolean
+  disabled: boolean
+  onEnabled: (enabled: boolean) => void
+  fields: readonly StageNumberField[]
+  step: number
+  fieldsEnabled?: boolean
+  t: (key: ContextCompressionLocaleKey) => string
+}) {
+  return (
+    <fieldset className={css.stage} disabled={disabled}>
+      <legend>{title}</legend>
+      <label className={css.field}>
+        <span>{t('custom.enabled')}</span>
+        <select aria-label={title} value={enabled ? 'on' : 'off'}
+          onChange={(event) => { onEnabled(event.currentTarget.value === 'on') }}>
+          <option value="on">{t('custom.enabled.on')}</option>
+          <option value="off">{t('custom.enabled.off')}</option>
+        </select>
+      </label>
+      <div className={css.fieldGrid}>
+        {fields.map(field => (
+          <label className={css.field} key={field.label}>
+            <span>{field.label}</span>
+            <input
+              type="number"
+              value={field.value}
+              min={field.allowZero === true ? 0 : field.integer === true ? 1 : step}
+              max={field.max}
+              step={field.integer === true ? 1 : step}
+              disabled={!fieldsEnabled || disabled}
+              onChange={(event) => { field.set(Number(event.currentTarget.value)) }}
+            />
+          </label>
+        ))}
+      </div>
+    </fieldset>
+  )
+}
+
+/** Convert a legacy custom policy to V3 format. */
+export function editableCustom(value: CustomCompressionPolicy): CustomCompressionPolicyV3 {
+  if (value.version === 3) return structuredClone(value)
+  return {
+    version: 3,
+    unit: value.unit,
+    fresh: structuredClone(value.fresh),
+    aggregate: structuredClone(value.aggregate),
+    history: {
+      enabled: value.history.enabled,
+      trigger: value.history.trigger,
+      keepRecentToolCalls: 10,
+      keepRecentTokens: value.history.keepRecent,
+      minReclaim: value.history.minReclaim,
+    },
+    prefixPolicy: value.prefixPolicy,
+    tailTrim: value.version === 1 ? { enabled: false, trigger: 700_000 } : structuredClone(value.tailTrim),
+  }
+}