dsh-brief-sidebar 0.9.2 → 0.9.3

package/lib/types/client/locales.d.ts

@@ -61,6 +61,9 @@ export declare const zh: {
     'recall.supersededTag': string;
     'recall.noBody': string;
     'section.skillUsage': string;
+    'section.references': string;
+    'references.tabSkills': string;
+    'references.tabMemory': string;
     'skillUsage.empty': string;
     'skillUsage.emptyHint': string;
     'skillUsage.uses': string;

package/lib/types/client/summary/ReferenceSection.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from 'react';
+import type { Context } from '@deepseek-ai/cordis';
+import type { FeedbackFetch } from './recall-feedback';
+export interface ReferenceSectionProps {
+    /** The DSH locale lookup, passed down from `apply`. */
+    t: (key: string) => string;
+    /** The client root context (the tab body's only way to reach services). */
+    ctx?: Context;
+    /** The session this tab is scoped to. */
+    scope?: {
+        readonly sessionId?: string;
+    };
+    /** The rating transport, handed straight to the recall pane. */
+    fetchImpl?: FeedbackFetch;
+}
+/** Which pane is showing. Two values, no third tab by design. */
+export type ReferenceTab = 'skills' | 'memory';
+/**
+ * The references section. All hooks run before any early return, so the tab
+ * strip can disappear (no capability at all) without ever changing hook order.
+ *
+ * @param props - translation, client context, session scope, rating transport.
+ */
+export declare function ReferenceSection(props: ReferenceSectionProps): ReactNode;

package/lib/types/client/summary/SkillUsageSection.d.ts

@@ -9,6 +9,12 @@ export interface SkillUsageSectionProps {
     scope?: {
         readonly sessionId?: string;
     };
+    /**
+     * Drop the section header. The references tab already says “技能”, so
+     * repeating it as a heading inside the pane is noise; standalone renders
+     * (and every existing test) keep the default `false`.
+     */
+    hideHeader?: boolean;
 }
 /**
  * The skill-usage section. The subscription is unconditional (a plain listener,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-brief-sidebar",
-  "version": "0.9.2",
+  "version": "0.9.3",
   "description": "DSH web plugin (dsh-better-sidebar consumer): render the session brief — the todo list (the `todos` projection board) plus the artifact list (a live produced-files feed, codeplan artifacts marked) — as a summary tab in the right sidebar, and shadow the official composer-band todo panel so the board is the single visible carrier. Read-only.",
   "type": "module",
   "main": "lib/index.mjs",

package/src/client/SummaryTab.tsx

@@ -2,11 +2,13 @@
  * The summary tab body: the session's at-a-glance state, composed of sections.
  *
  * Section order: 进展 (the todos board) → 产物 (produced files, codeplan
- * artifacts marked inline) → 技能引用 (which skills this session loaded) →
- * 本会话召回 (what prime-memory injected into this session and compaction has
- * not overwritten) → 记忆槽位 (hand-pinned resident conventions, off by default).
- * Each section owns its own data chain and its own gating contract; this
- * component owns only the shell.
+ * artifacts marked inline) → 引用 (two switchable tabs: 技能 and 记忆).
+ * The reference tabs replaced three stacked sections: which skills entered the
+ * session, what prime-memory injected and compaction has not overwritten, and
+ * the hand-pinned resident slots — all three answer "what is in this session's
+ * context", and stacking them pushed the board off a narrow sidebar. Each pane
+ * keeps its own data chain and its own gating contract; this component owns
+ * only the shell.
  *
  * Two better-sidebar contracts are honoured:
  *
@@ -24,9 +26,7 @@ import type { Context } from '@deepseek-ai/cordis'
 import { TodoSection } from './TodoBoardTab'
 import type { TodoScope } from './TodoBoardTab'
 import { DeliverablesSection } from './summary/DeliverablesSection'
-import { SkillUsageSection } from './summary/SkillUsageSection'
-import { MemorySlotsSection } from './summary/MemorySlotsSection'
-import { MemoryRecallSection } from './summary/MemoryRecallSection'
+import { ReferenceSection } from './summary/ReferenceSection'
 
 export interface SummaryTabProps {
   /** The DSH locale lookup, passed down from `apply`. */
@@ -69,16 +69,10 @@ export function SummaryTab(props: SummaryTabProps): ReactNode {
     createElement('div', { style: SCROLL_STYLE },
       createElement(TodoSection, { key: 'progress', t, ctx, scope }),
       createElement(DeliverablesSection, { key: 'deliverables', t, ctx, scope }),
-      // 技能引用：本会话通过宿主 `skill` 工具载入过哪些技能（`dshSummarySkillUsage`
-      // 投影，本插件自己的 host 半注册）。与记忆两栏正交：这里讲“拉过哪些说明书”，
-      // 下面两栏讲“模型看到了哪些记忆”。只读，无开关，投影缺席即整段隐藏。
-      createElement(SkillUsageSection, { key: 'skill-usage', t, ctx, scope }),
-      // 本会话召回（固定最底）：入口开关（configForms `showMemoryRecall`，默认开）
-      // 与能力存在（dsh-prime-memory 的 `memoryRecall` 投影）缺一即整段隐藏。
-      // 这是"模型此刻看到哪些记忆"的诚实视图：非常驻，压缩后即清空。
-      createElement(MemoryRecallSection, { key: 'memory-recall', t, ctx, scope }),
-      // 记忆槽位分区：手动 pin 的常驻约定（`memorySlots` 投影），默认关。
-      createElement(MemorySlotsSection, { key: 'memory-slots', t, ctx, scope }),
+      // 引用：技能页（`dshSummarySkillUsage`，本插件自己的 host 半注册）与记忆页
+      // （`memoryRecall` / `memorySlots`，由 dsh-prime-memory 提供，各有开关）并列，
+      // 可点击或用左右方向键切换。两个页签都空时整节隐藏（无能力 ≠ 空态）。
+      createElement(ReferenceSection, { key: 'references', t, ctx, scope }),
     ),
   )
 }

package/src/client/locales.ts

@@ -63,6 +63,9 @@ export const zh = {
   'recall.supersededTag': '已被摘要取代',
   'recall.noBody': '（本帧没有这条记忆的全文）',
   'section.skillUsage': '技能引用',
+  'section.references': '引用',
+  'references.tabSkills': '技能',
+  'references.tabMemory': '记忆',
   'skillUsage.empty': '本会话还没载入过技能',
   'skillUsage.emptyHint': '模型用 skill 工具载入、或你直接点用某个技能后，技能名会实时出现在这里。',
   'skillUsage.uses': '{count} 次',
@@ -129,6 +132,9 @@ export const en: Record<BriefKey, string> = {
   'recall.supersededTag': 'replaced by summary',
   'recall.noBody': '(this frame carries no full body for this record)',
   'section.skillUsage': 'Skill references',
+  'section.references': 'References',
+  'references.tabSkills': 'Skills',
+  'references.tabMemory': 'Memory',
   'skillUsage.empty': 'No skills loaded in this session',
   'skillUsage.emptyHint': 'Skills show up here once the model loads one with the `skill` tool, or you invoke one directly.',
   'skillUsage.uses': '{count}x',
@@ -192,6 +198,9 @@ export const ja: Record<BriefKey, string> = {
   'recall.supersededTag': '要約に置換済み',
   'recall.noBody': 'このフレームには全文が含まれていない',
   'section.skillUsage': 'スキル参照',
+  'section.references': '参照',
+  'references.tabSkills': 'スキル',
+  'references.tabMemory': 'メモリ',
   'skillUsage.empty': 'このセッションではスキルを読み込んでいません',
   'skillUsage.emptyHint': 'モデルが skill ツールで読み込むか、あなたがスキルを直接起動すると、ここにリアルタイムで表示されます。',
   'skillUsage.uses': '{count} 回',
@@ -255,6 +264,9 @@ export const ko: Record<BriefKey, string> = {
   'recall.supersededTag': '요약에 대체됨',
   'recall.noBody': '이 프레임에는 이 기록의 전문이 없습니다',
   'section.skillUsage': '스킬 참조',
+  'section.references': '참조',
+  'references.tabSkills': '스킬',
+  'references.tabMemory': '메모리',
   'skillUsage.empty': '이 세션에서 스킬을 불러오지 않았습니다',
   'skillUsage.emptyHint': '모델이 skill 도구로 불러오거나 당신이 스킬을 직접 실행하면 여기에 실시간으로 나타납니다.',
   'skillUsage.uses': '{count}회',
@@ -318,6 +330,9 @@ export const fr: Record<BriefKey, string> = {
   'recall.supersededTag': 'remplacé par le résumé',
   'recall.noBody': '(aucun texte complet pour cette entrée dans cette trame)',
   'section.skillUsage': 'Références de compétences',
+  'section.references': 'Références',
+  'references.tabSkills': 'Compétences',
+  'references.tabMemory': 'Mémoire',
   'skillUsage.empty': 'Aucune compétence chargée dans cette session',
   'skillUsage.emptyHint': 'Les compétences apparaissent ici dès que le modèle en charge une via l’outil `skill`, ou quand vous en lancez une directement.',
   'skillUsage.uses': '{count}×',
@@ -381,6 +396,9 @@ export const de: Record<BriefKey, string> = {
   'recall.supersededTag': 'durch Zusammenfassung ersetzt',
   'recall.noBody': '(dieser Rahmen enthält keinen vollständigen Text für diesen Eintrag)',
   'section.skillUsage': 'Skill-Referenzen',
+  'section.references': 'Referenzen',
+  'references.tabSkills': 'Skills',
+  'references.tabMemory': 'Speicher',
   'skillUsage.empty': 'In dieser Sitzung wurden keine Skills geladen',
   'skillUsage.emptyHint': 'Skills erscheinen hier, sobald das Modell einen über das `skill`-Tool lädt oder du einen direkt aufrufst.',
   'skillUsage.uses': '{count}x',
@@ -444,6 +462,9 @@ export const it: Record<BriefKey, string> = {
   'recall.supersededTag': 'sostituito dal riassunto',
   'recall.noBody': '(questo frame non contiene il testo completo di questa voce)',
   'section.skillUsage': 'Riferimenti alle skill',
+  'section.references': 'Riferimenti',
+  'references.tabSkills': 'Skill',
+  'references.tabMemory': 'Memoria',
   'skillUsage.empty': 'Nessuna skill caricata in questa sessione',
   'skillUsage.emptyHint': 'Le skill compaiono qui quando il modello ne carica una con il tool `skill` o quando ne avvii una direttamente.',
   'skillUsage.uses': '{count}x',
@@ -507,6 +528,9 @@ export const ru: Record<BriefKey, string> = {
   'recall.supersededTag': 'заменено сводкой',
   'recall.noBody': 'В этом кадре нет полного текста этой записи',
   'section.skillUsage': 'Отсылки к скиллам',
+  'section.references': 'Отсылки',
+  'references.tabSkills': 'Навыки',
+  'references.tabMemory': 'Память',
   'skillUsage.empty': 'В этой сессии скиллы не загружались',
   'skillUsage.emptyHint': 'Навыки появятся здесь, когда модель загрузит их через инструмент `skill` или вы вызовете навык напрямую.',
   'skillUsage.uses': '{count} раз',
@@ -570,6 +594,9 @@ export const es: Record<BriefKey, string> = {
   'recall.supersededTag': 'reemplazado por el resumen',
   'recall.noBody': '(este fotograma no trae el texto completo de este registro)',
   'section.skillUsage': 'Referencias de skills',
+  'section.references': 'Referencias',
+  'references.tabSkills': 'Skills',
+  'references.tabMemory': 'Memoria',
   'skillUsage.empty': 'Esta sesión no ha cargado ningún skill',
   'skillUsage.emptyHint': 'Las skills aparecen aquí cuando el modelo carga una con la herramienta `skill` o cuando invocas una directamente.',
   'skillUsage.uses': '{count}x',

package/src/client/summary/ReferenceSection.tsx

@@ -0,0 +1,193 @@
+/**
+ * The references section: 技能与记忆并列成两个可左右切换的页签。
+ *
+ * Why a tab strip instead of three stacked sections: the two lists answer the
+ * same question — "what entered this session's context" — from two different
+ * providers (this plugin's own skill fold, and prime-memory's recall/slots).
+ * Stacked, they pushed the board and the produced files off screen on a narrow
+ * sidebar; side by side, each gets the full width when the reader actually
+ * wants it.
+ *
+ * Two decisions worth knowing when editing this file:
+ *
+ * 1. **The inactive pane stays mounted and is hidden with `display:none`.**
+ *    The recall pane carries real interaction state (selected row, pending
+ *    rating, the expanded history group); unmounting it would silently reset
+ *    what the human just did every time they glanced at the skills tab. The
+ *    cost is that a hidden pane keeps re-rendering on projection frames —
+ *    bounded, because the whole tab still renders nothing while `visible` is
+ *    false (see `SummaryTab`).
+ * 2. **The parent repeats its children's gates.** A section that hides itself
+ *    leaves the tab strip pointing at an empty pane, so the availability
+ *    question is answered here with the SAME readers and resolvers the children
+ *    use. `tests/reference-section.spec.tsx` pins both sides against the same
+ *    fixtures — if a child gate ever drifts from this one, that test goes red
+ *    rather than the UI growing a dead tab.
+ *
+ * Colours come from `--dsw-alias-*` tokens only (skin contract).
+ */
+import { createElement } from 'react'
+import { useCallback, useState } from 'react'
+import type { CSSProperties, KeyboardEvent, ReactNode } from 'react'
+import type { Context } from '@deepseek-ai/cordis'
+import { SKILL_USAGE_KEY } from '../../projection/keys'
+import { useProjectionValue } from '../use-projection'
+import { readSkillUsage } from './skill-usage'
+import { MEMORY_RECALL_KEY, readRecall } from './memory-recall'
+import { MEMORY_SLOTS_KEY, readSlots } from './memory-slots'
+import { resolveShowMemoryRecall, resolveShowMemorySlots } from '../scope-face'
+import { useConfigFlag } from './use-config-flag'
+import { SkillUsageSection } from './SkillUsageSection'
+import { MemoryRecallSection } from './MemoryRecallSection'
+import { MemorySlotsSection } from './MemorySlotsSection'
+import type { FeedbackFetch } from './recall-feedback'
+
+export interface ReferenceSectionProps {
+  /** The DSH locale lookup, passed down from `apply`. */
+  t: (key: string) => string
+  /** The client root context (the tab body's only way to reach services). */
+  ctx?: Context
+  /** The session this tab is scoped to. */
+  scope?: { readonly sessionId?: string }
+  /** The rating transport, handed straight to the recall pane. */
+  fetchImpl?: FeedbackFetch
+}
+
+/** Which pane is showing. Two values, no third tab by design. */
+export type ReferenceTab = 'skills' | 'memory'
+
+const SECTION_STYLE: CSSProperties = {
+  flexShrink: 0,
+  borderBottom: '1px solid var(--dsw-alias-border-secondary)',
+}
+
+const HEADER_STYLE: CSSProperties = {
+  padding: '10px 12px 0',
+  color: 'var(--dsw-alias-label-secondary)',
+  fontSize: 12,
+  fontWeight: 600,
+}
+
+/** The tab strip: flush-left, same gutter as section headers. */
+const TABS_STYLE: CSSProperties = {
+  display: 'flex',
+  gap: 4,
+  padding: '6px 12px 0',
+}
+
+/** One tab. Selected gets a hairline of secondary label; never a colour literal. */
+const TAB_STYLE: CSSProperties = {
+  background: 'none',
+  border: 'none',
+  borderBottom: '1px solid transparent',
+  font: 'inherit',
+  fontSize: 12,
+  color: 'var(--dsw-alias-label-tertiary)',
+  cursor: 'pointer',
+  padding: '4px 8px 6px',
+}
+
+const TAB_ACTIVE_STYLE: CSSProperties = {
+  ...TAB_STYLE,
+  borderBottom: '1px solid var(--dsw-alias-label-secondary)',
+  color: 'var(--dsw-alias-label-primary)',
+  fontWeight: 600,
+}
+
+const ORDER: readonly ReferenceTab[] = ['skills', 'memory']
+
+/**
+ * The references section. All hooks run before any early return, so the tab
+ * strip can disappear (no capability at all) without ever changing hook order.
+ *
+ * @param props - translation, client context, session scope, rating transport.
+ */
+export function ReferenceSection(props: ReferenceSectionProps): ReactNode {
+  const { t, ctx, scope, fetchImpl } = props
+  const [tab, setTab] = useState<ReferenceTab>('skills')
+
+  // The same three reads the children make, used only to decide whether the
+  // strip has anything to point at.
+  const skillsLive = readSkillUsage(useProjectionValue(ctx, scope?.sessionId, SKILL_USAGE_KEY)) !== undefined
+  const recallFrame = readRecall(useProjectionValue(ctx, scope?.sessionId, MEMORY_RECALL_KEY))
+  const slotsFrame = readSlots(useProjectionValue(ctx, scope?.sessionId, MEMORY_SLOTS_KEY))
+  const recallOn = useConfigFlag(ctx, resolveShowMemoryRecall) !== false
+  const slotsOn = useConfigFlag(ctx, resolveShowMemorySlots) === true
+  const memoryLive = (recallFrame !== undefined && recallOn) || (slotsFrame !== undefined && slotsOn)
+
+  const onTabsKeyDown = useCallback((event: KeyboardEvent<HTMLDivElement>): void => {
+    // 左右方向键换页：页签条只有两个成员，环绕即可，不需要 Home/End。
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') return
+    event.preventDefault()
+    const at = ORDER.indexOf(tab)
+    const step = event.key === 'ArrowRight' ? 1 : ORDER.length - 1
+    setTab(ORDER[(at + step) % ORDER.length])
+  }, [tab])
+
+  // Nothing to reference — no provider in the composition, or both switched off.
+  if (!skillsLive && !memoryLive) return null
+
+  const tabButton = (id: ReferenceTab, label: string): ReactNode => createElement(
+    'button',
+    {
+      key: id,
+      type: 'button',
+      role: 'tab',
+      id: `dsh-brief-reference-tab-${id}`,
+      'aria-selected': active === id,
+      'aria-controls': `dsh-brief-reference-pane-${id}`,
+      style: active === id ? TAB_ACTIVE_STYLE : TAB_STYLE,
+      'data-dsh-brief-sidebar': `reference-tab-${id}`,
+      onClick: () => { setTab(id) },
+    },
+    label,
+  )
+
+  // 只剩记忆一侧时默认页得跟着换：否则开场就是一个隐藏的空技能页。
+  const active: ReferenceTab = tab === 'skills' && !skillsLive ? 'memory' : tab
+
+  return createElement(
+    'div',
+    { style: SECTION_STYLE, 'data-dsh-brief-sidebar': 'references-section' },
+    createElement('div', { style: HEADER_STYLE }, t('section.references')),
+    createElement(
+      'div',
+      {
+        role: 'tablist',
+        'aria-label': t('section.references'),
+        style: TABS_STYLE,
+        onKeyDown: onTabsKeyDown,
+        'data-dsh-brief-sidebar': 'reference-tabs',
+      },
+      skillsLive && tabButton('skills', t('references.tabSkills')),
+      // 两个页签各自条件化：只有一侧能力时不该留个点了就空的页签。
+      memoryLive && tabButton('memory', t('references.tabMemory')),
+    ),
+    skillsLive && createElement(
+      'div',
+      {
+        role: 'tabpanel',
+        id: 'dsh-brief-reference-pane-skills',
+        'aria-labelledby': 'dsh-brief-reference-tab-skills',
+        hidden: active !== 'skills',
+        style: active === 'skills' ? undefined : { display: 'none' },
+        'data-dsh-brief-sidebar': 'reference-pane-skills',
+      },
+      createElement(SkillUsageSection, { t, ctx, scope, hideHeader: true }),
+    ),
+    memoryLive && createElement(
+      'div',
+      {
+        role: 'tabpanel',
+        id: 'dsh-brief-reference-pane-memory',
+        'aria-labelledby': 'dsh-brief-reference-tab-memory',
+        hidden: active !== 'memory',
+        style: active === 'memory' ? undefined : { display: 'none' },
+        'data-dsh-brief-sidebar': 'reference-pane-memory',
+      },
+      // 两条记忆链各有自己的标题：召回与常驻槽位是不同事实，合成一节会糊掉。
+      createElement(MemoryRecallSection, { t, ctx, scope, fetchImpl }),
+      createElement(MemorySlotsSection, { t, ctx, scope }),
+    ),
+  )
+}

package/src/client/summary/SkillUsageSection.tsx

@@ -43,6 +43,12 @@ export interface SkillUsageSectionProps {
   ctx?: Context
   /** The session this tab is scoped to. */
   scope?: { readonly sessionId?: string }
+  /**
+   * Drop the section header. The references tab already says “技能”, so
+   * repeating it as a heading inside the pane is noise; standalone renders
+   * (and every existing test) keep the default `false`.
+   */
+  hideHeader?: boolean
 }
 
 const SECTION_STYLE: CSSProperties = {
@@ -121,7 +127,7 @@ const EMPTY_STYLE: CSSProperties = {
  * @param props - translation, client context, session scope.
  */
 export function SkillUsageSection(props: SkillUsageSectionProps): ReactNode {
-  const { t, ctx, scope } = props
+  const { t, ctx, scope, hideHeader = false } = props
   const [availableOpen, setAvailableOpen] = useState(false)
 
   const view = readSkillUsage(useProjectionValue(ctx, scope?.sessionId, SKILL_USAGE_KEY))
@@ -137,7 +143,7 @@ export function SkillUsageSection(props: SkillUsageSectionProps): ReactNode {
   return createElement(
     'div',
     { style: SECTION_STYLE, 'data-dsh-brief-sidebar': 'skill-usage-section' },
-    createElement('div', { style: HEADER_STYLE }, t('section.skillUsage')),
+    !hideHeader && createElement('div', { style: HEADER_STYLE }, t('section.skillUsage')),
     view.session.length === 0 && createElement(
       'div',
       { style: EMPTY_STYLE },