dsh-context-compression-improved 0.1.1 → 0.2.1

package/packages/selector/lib/style.css

@@ -0,0 +1,308 @@
+.WcpPCW_settingsSection {
+  max-width: 720px;
+  color: var(--dsw-alias-label-primary);
+  flex-direction: column;
+  gap: 12px;
+  display: flex;
+}
+
+.WcpPCW_settingsTitle {
+  color: var(--dsw-alias-label-primary);
+  margin: 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 24px;
+}
+
+.WcpPCW_settingsDescription {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 0;
+  font-size: 14px;
+  line-height: 22px;
+}
+
+.WcpPCW_root {
+  width: 100%;
+}
+
+.WcpPCW_profileGrid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: 10px;
+  display: grid;
+}
+
+.WcpPCW_profileCard {
+  border: 1px solid var(--dsw-alias-border-l2);
+  min-height: 112px;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border-radius: 10px;
+  flex-direction: column;
+  gap: 8px;
+  padding: 14px;
+  display: flex;
+}
+
+.WcpPCW_profileCard:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.WcpPCW_profileCard[aria-pressed="true"] {
+  border-color: var(--dsw-alias-label-primary);
+}
+
+.WcpPCW_profileCard:active:not(:disabled) {
+  transform: scale(.99);
+}
+
+.WcpPCW_profileCard:disabled {
+  cursor: default;
+  opacity: .6;
+}
+
+.WcpPCW_profileCard:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+.WcpPCW_profileCardTop {
+  align-items: center;
+  gap: 8px;
+  display: flex;
+}
+
+.WcpPCW_profileCardTitle {
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 20px;
+}
+
+.WcpPCW_profileCurrent {
+  background: var(--dsw-alias-label-primary);
+  color: var(--dsw-alias-bg-base);
+  border-radius: 999px;
+  padding: 1px 6px;
+  font-size: 10px;
+  line-height: 14px;
+}
+
+.WcpPCW_profileCardDetail {
+  color: var(--dsw-alias-label-secondary);
+  font-size: 12px;
+  line-height: 18px;
+}
+
+.WcpPCW_button {
+  border: 1px solid var(--dsw-alias-border-l2);
+  width: 100%;
+  min-height: 34px;
+  color: var(--dsw-alias-label-primary);
+  cursor: pointer;
+  text-align: left;
+  background: none;
+  border-radius: 10px;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 8px;
+  display: flex;
+}
+
+.WcpPCW_button:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.WcpPCW_button:disabled {
+  cursor: default;
+  opacity: .6;
+}
+
+.WcpPCW_copy {
+  flex: 1;
+  min-width: 0;
+}
+
+.WcpPCW_label {
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 14px;
+}
+
+.WcpPCW_value {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 13px;
+  line-height: 17px;
+  overflow: hidden;
+}
+
+.WcpPCW_chevron {
+  color: var(--dsw-alias-label-secondary);
+  flex: none;
+}
+
+.WcpPCW_menuCopy {
+  flex-direction: column;
+  gap: 2px;
+  min-width: 220px;
+  display: flex;
+}
+
+.WcpPCW_menuTitle {
+  font-size: 13px;
+  line-height: 17px;
+}
+
+.WcpPCW_menuDetail {
+  white-space: normal;
+  max-width: 290px;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_error {
+  color: var(--dsw-alias-state-error-primary);
+  padding: 4px 8px 0;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_unavailable {
+  color: var(--dsw-alias-label-tertiary);
+  padding: 4px 8px 0;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_settingsHint {
+  color: var(--dsw-alias-label-secondary);
+  padding: 4px 8px 0;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_pricing {
+  color: var(--dsw-alias-label-tertiary);
+  padding: 4px 8px 0;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_custom {
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin-top: 16px;
+  padding: 16px 0 0;
+}
+
+.WcpPCW_customTitle {
+  margin: 0 0 6px;
+  font-size: 13px;
+  line-height: 17px;
+}
+
+.WcpPCW_customNote {
+  color: var(--dsw-alias-label-tertiary);
+  margin: 4px 0;
+  font-size: 11px;
+  line-height: 15px;
+}
+
+.WcpPCW_stage {
+  border: 0;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  margin: 12px 0 0;
+  padding: 12px 0 0;
+}
+
+.WcpPCW_stageToggle {
+  align-items: center;
+  gap: 6px;
+  font-size: 12px;
+  line-height: 16px;
+  display: inline-flex;
+}
+
+.WcpPCW_fieldGrid {
+  grid-template-columns: 1fr;
+  gap: 8px;
+  display: grid;
+}
+
+.WcpPCW_field {
+  min-width: 0;
+  color: var(--dsw-alias-label-secondary);
+  flex-direction: column;
+  gap: 4px;
+  margin-top: 8px;
+  font-size: 11px;
+  line-height: 15px;
+  display: flex;
+}
+
+.WcpPCW_field input, .WcpPCW_field select {
+  box-sizing: border-box;
+  border: 1px solid var(--dsw-alias-border-l2);
+  background: var(--dsw-alias-bg-base);
+  width: 100%;
+  min-width: 0;
+  min-height: 30px;
+  color: var(--dsw-alias-label-primary);
+  border-radius: 7px;
+  padding: 4px 6px;
+}
+
+.WcpPCW_field input:focus-visible, .WcpPCW_field select:focus-visible, .WcpPCW_actions button:focus-visible {
+  outline-offset: 2px;
+  outline: 2px solid;
+}
+
+.WcpPCW_actions {
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 10px;
+  display: flex;
+}
+
+.WcpPCW_actions button {
+  border: 1px solid var(--dsw-alias-border-l2);
+  min-height: 30px;
+  color: var(--dsw-alias-label-primary);
+  background: none;
+  border-radius: 7px;
+  padding: 4px 8px;
+}
+
+.WcpPCW_actions button:active:not(:disabled) {
+  transform: scale(.98);
+}
+
+.WcpPCW_actions button:disabled {
+  opacity: .6;
+}
+
+@media (width <= 560px) {
+  .WcpPCW_profileGrid {
+    grid-template-columns: 1fr;
+  }
+}
+
+.WcpPCW_autoCompact {
+  border: 1px solid #80808059;
+  border-radius: 8px;
+  margin-top: 24px;
+  padding: 16px;
+}
+
+.WcpPCW_autoCompactTitle {
+  margin: 0 0 8px;
+  font-size: 15px;
+  font-weight: 600;
+}
+
+.WcpPCW_autoCompactRisk {
+  opacity: .9;
+  margin: 8px 0 0;
+  font-size: 12px;
+}

package/packages/selector/package.json

@@ -0,0 +1,115 @@
+{
+  "name": "dsh-context-compression-improved",
+  "version": "0.1.1",
+  "description": "One-install context-compression selector bundle for DeepSeek Harness",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./invariant": {
+      "types": "./lib/invariant.d.ts",
+      "default": "./lib/invariant.js"
+    },
+    "./pruner": {
+      "types": "./lib/pruner.d.ts",
+      "default": "./lib/pruner.js"
+    },
+    "./client": {
+      "types": "./lib/client.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "lib/**/*.js",
+    "lib/**/*.d.ts",
+    "cordis.patch.yml",
+    "dsh.plugin.json",
+    "screenshots.json",
+    "assets",
+    "README.md",
+    "README.zh.md",
+    "LICENSE",
+    "THIRD_PARTY_NOTICES.md"
+  ],
+  "dsh": {
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-workspace"
+      ],
+      "platform": "web"
+    },
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    }
+  },
+  "scripts": {
+    "bundle": "tsdown --config tsdown.config.ts && tsdown --config tsdown.client.config.ts",
+    "prepack": "pnpm run bundle",
+    "typecheck": "tsc --noEmit -p tsconfig.json",
+    "test": "vitest run --root ../.. --config vitest.config.ts --project runtime --project selector-host --project selector-client",
+    "pack:dry-run": "npm pack --dry-run"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/drscrewdriver/dsh-context-compression-improved.git",
+    "directory": "packages/selector"
+  },
+  "homepage": "https://github.com/drscrewdriver/dsh-context-compression-improved#readme",
+  "bugs": {
+    "url": "https://github.com/drscrewdriver/dsh-context-compression-improved/issues"
+  },
+  "author": "WilliamShi666",
+  "engines": {
+    "node": "^22.19.0 || >=24.0.0",
+    "dsh": ">=0.1.1-rc.2 <0.2.0-0"
+  },
+  "keywords": [
+    "deepseek",
+    "harness",
+    "context",
+    "compression",
+    "plugin"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public",
+    "tag": "latest"
+  },
+  "dependencies": {
+    "@huggingface/tokenizers": "0.1.3",
+    "js-yaml": "^4.3.2"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/cordis": ">=4.0.1 <5",
+    "@deepseek-ai/cordis-plugin-include": ">=1.0.6 <2",
+    "@deepseek-ai/cordis-plugin-loader": ">=1.0.2 <2",
+    "@deepseek-ai/dsh-agent": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-agent-presets": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-command-compact": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-compaction": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-compaction-basic": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-locale": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-runtime": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-ui-primitives": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-ui-settings": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-ui-slots": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-client-ui-workspace": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-invariants": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-llm": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-session": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-settings": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-system-prompt": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-token-meter": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/dsh-tools": ">=0.1.1-rc.2 <0.2.0",
+    "@deepseek-ai/schemastery": ">=3.18.1 <4",
+    "react": ">=18 <19"
+  }
+}

package/{screenshots.json → packages/selector/screenshots.json}

@@ -1,6 +1,6 @@
-{
-  "screenshots": [
-    "assets/screenshots/context-compression-selector-settings.png",
-    "assets/screenshots/context-compression-selector-profiles.jpg"
-  ]
-}
+{
+  "screenshots": [
+    "assets/screenshots/context-compression-selector-settings.png",
+    "assets/screenshots/context-compression-selector-profiles.jpg"
+  ]
+}

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

@@ -0,0 +1,229 @@
+/**
+ * CompressionProfileControls: dropdown selector for compression profiles,
+ * plus AutoCompactThresholdControls and CodeSkeletonControls sub-components.
+ *
+ * Extracted from CompressionProfileSelector.tsx to reduce god-module size.
+ *
+ * @module dsh-context-compression-improved/client/CompressionProfileControls
+ */
+
+import { useEffect, useId, useState } from 'react'
+import { IconChevronDownOutline14, Menu } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { ContextCompressionLocaleKey } from './locales.ts'
+import css from './CompressionProfileSelector.module.css'
+import {
+  AUTO_COMPACT_THRESHOLD_LIMITS,
+  COMPRESSION_PROFILES,
+  isValidAutoCompactThresholdPercent,
+  type CompressionProfile,
+  type CustomCompressionPolicyV3,
+} from '../profiles.ts'
+import type { CompressionProfileSelectorProps } from './CompressionProfileSelector.tsx'
+import { CustomPolicyEditor, editableCustom } from './CustomPolicyEditor.tsx'
+
+export function CompressionProfileControls({
+  useCompression, useSessions, select, saveCustom, resetCustom, t, showCustomEditor,
+}: CompressionProfileSelectorProps & { showCustomEditor: boolean }) {
+  const state = useCompression(snapshot => snapshot)
+  const currentPreset = useSessions((sessions) => {
+    const current = sessions.current
+    return current === undefined ? undefined : sessions.byId[current]?.agentPreset
+  })
+  // A profile is Host-global. A cold Session may not have reported a live
+  // capability yet, so only Minimal blocks initial configuration.
+  const contextCompressionAvailable = currentPreset !== 'minimal'
+  const [open, setOpen] = useState(false)
+  const [saving, setSaving] = useState(false)
+  const [saveError, setSaveError] = useState<string | null>(null)
+  const [draft, setDraft] = useState<CustomCompressionPolicyV3 | null>(null)
+  const unavailableId = useId()
+  const current = state.value?.profile ?? 'balanced'
+  useEffect(() => {
+    if (state.status === 'ready' && state.writable && contextCompressionAvailable) return
+    setOpen(false)
+  }, [contextCompressionAvailable, state.status, state.writable])
+  useEffect(() => {
+    const custom = state.value?.custom
+    setDraft(current === 'custom' && custom !== undefined ? editableCustom(custom) : null)
+  }, [current, state.value?.custom])
+  if (state.status === 'unavailable') return null
+  const busy = state.status === 'loading' || saving
+  const label = busy ? t('status.loading') : t(`profile.${current}`)
+  return (
+    <div className={css.root}>
+      <Menu
+        open={open && contextCompressionAvailable}
+        onClose={() => { setOpen(false) }}
+        selectedId={current}
+        items={COMPRESSION_PROFILES.map(profile => ({
+          id: profile,
+          label: (
+            <span className={css.menuCopy}>
+              <span className={css.menuTitle}>{t(`profile.${profile}`)}</span>
+              <span className={css.menuDetail}>{t(`detail.${profile}`)}</span>
+            </span>
+          ),
+        }))}
+        onSelect={(id) => {
+          setOpen(false)
+          if (id === current || !COMPRESSION_PROFILES.includes(id as CompressionProfile)) return
+          setSaveError(null)
+          setSaving(true)
+          void select(id as CompressionProfile).then(
+            () => { setSaving(false) },
+            (error: unknown) => {
+              setSaving(false)
+              setSaveError(error instanceof Error && error.message !== '' ? error.message : t('status.saveFailed'))
+            },
+          )
+        }}
+        align="start"
+        portal
+        anchor={(
+          <button
+            type="button"
+            className={css.button}
+            aria-haspopup="menu"
+            aria-expanded={open && contextCompressionAvailable}
+            aria-describedby={contextCompressionAvailable ? undefined : unavailableId}
+            disabled={busy || !state.writable || !contextCompressionAvailable}
+            onClick={() => { setOpen(value => !value) }}
+          >
+            <span className={css.copy}>
+              <span className={css.label}>{t('label')}</span>
+              <span className={css.value}>{label}</span>
+            </span>
+            <IconChevronDownOutline14 className={css.chevron} />
+          </button>
+        )}
+      />
+      {contextCompressionAvailable ? null : (
+        <div id={unavailableId} className={css.unavailable} role="status">
+          {t('status.minimalUnavailable')}
+        </div>
+      )}
+      <div className={css.pricing}>{t('pricing.disclosure')}</div>
+      <div className={css.settingsHint}>
+        {t('autoCompact.summaryHint').replace('{percent}', String(state.value?.autoCompact?.thresholdPercent ?? AUTO_COMPACT_THRESHOLD_LIMITS.default))}
+      </div>
+      {current !== 'custom' || showCustomEditor ? null : (
+        <div className={css.settingsHint}>{t('custom.settingsHint')}</div>
+      )}
+      {current !== 'custom' || draft === null || !showCustomEditor ? null : (
+        <CustomPolicyEditor
+          value={draft}
+          disabled={busy || !state.writable || !contextCompressionAvailable}
+          setValue={setDraft}
+          save={() => saveCustom(structuredClone(draft))}
+          reset={resetCustom}
+          settle={(operation) => {
+            setSaveError(null)
+            setSaving(true)
+            void operation().then(
+              () => { setSaving(false) },
+              (error: unknown) => {
+                setSaving(false)
+                setSaveError(error instanceof Error && error.message !== '' ? error.message : t('status.saveFailed'))
+              },
+            )
+          }}
+          t={t}
+        />
+      )}
+      {saveError === null ? null : <div className={css.error} role="alert">{saveError}</div>}
+    </div>
+  )
+}
+
+interface AutoCompactThresholdControlsProps {
+  value: number
+  disabled: boolean
+  save: (thresholdPercent: number) => Promise<void>
+  settle: (operation: () => Promise<void>) => void
+  t: (key: ContextCompressionLocaleKey) => string
+}
+
+/**
+ * The authoritative Auto Compact threshold editor for the context-compression
+ * section. A typed number input and its save path are kept deliberately simple;
+ * values outside the recommended 70–85 band warn without blocking.
+ */
+export function AutoCompactThresholdControls({ value, disabled, save, settle, t }: AutoCompactThresholdControlsProps) {
+  const [draft, setDraft] = useState(String(value))
+  useEffect(() => { setDraft(String(value)) }, [value])
+  const parsed = Number(draft)
+  // Number inputs legally produce value-equivalent drafts such as '8e1';
+  // only the parsed value needs to be a valid threshold.
+  const valid = isValidAutoCompactThresholdPercent(parsed)
+  const risk = !valid
+    ? 'autoCompact.invalid'
+    : parsed < 70 ? 'autoCompact.riskLow'
+      : parsed > 85 ? 'autoCompact.riskHigh'
+        : undefined
+  return (
+    <section className={css.autoCompact} aria-labelledby="context-compression-autocompact-title">
+      <h3 id="context-compression-autocompact-title" className={css.autoCompactTitle}>{t('autoCompact.title')}</h3>
+      <p className={css.customNote}>{t('autoCompact.description')}</p>
+      <label className={css.field}>
+        <span>{t('autoCompact.inputLabel')}</span>
+        <input
+          type="number"
+          value={draft}
+          min={AUTO_COMPACT_THRESHOLD_LIMITS.min}
+          max={AUTO_COMPACT_THRESHOLD_LIMITS.max}
+          step={AUTO_COMPACT_THRESHOLD_LIMITS.step}
+          disabled={disabled}
+          aria-invalid={!valid}
+          onChange={(event) => { setDraft(event.currentTarget.value) }}
+        />
+      </label>
+      {risk === undefined ? null : (
+        <div className={risk === 'autoCompact.invalid' ? css.error : css.autoCompactRisk} role={risk === 'autoCompact.invalid' ? 'alert' : 'note'}>
+          {t(risk)}
+        </div>
+      )}
+      <div className={css.actions}>
+        <button
+          type="button"
+          disabled={disabled || !valid || parsed === value}
+          onClick={() => { settle(() => save(parsed)) }}
+        >
+          {t('autoCompact.save')}
+        </button>
+      </div>
+    </section>
+  )
+}
+
+interface CodeSkeletonControlsProps {
+  value: boolean
+  disabled: boolean
+  save: (enabled: boolean) => Promise<void>
+  settle: (operation: () => Promise<void>) => void
+  t: (key: ContextCompressionLocaleKey) => string
+}
+
+/**
+ * The authoritative code-skeleton reducer gate for the context-compression
+ * section. Deliberately minimal — an on/off select plus its own save path —
+ * because the gate is orthogonal to every profile and carries no parameters.
+ */
+export function CodeSkeletonControls({ value, disabled, save, settle, t }: CodeSkeletonControlsProps) {
+  return (
+    <section className={css.autoCompact} aria-labelledby="context-compression-codeskeleton-title">
+      <h3 id="context-compression-codeskeleton-title" className={css.autoCompactTitle}>{t('codeSkeleton.title')}</h3>
+      <p className={css.customNote}>{t('codeSkeleton.description')}</p>
+      <label className={css.field}>
+        <span>{t('codeSkeleton.enabled')}</span>
+        <select
+          value={value ? 'on' : 'off'}
+          disabled={disabled}
+          onChange={(event) => { settle(() => save(event.currentTarget.value === 'on')) }}
+        >
+          <option value="on">{t('codeSkeleton.enabled.on')}</option>
+          <option value="off">{t('codeSkeleton.enabled.off')}</option>
+        </select>
+      </label>
+    </section>
+  )
+}