dsh-advisor-plugin 0.2.1

package/src/client/AdvisorCard.tsx

@@ -0,0 +1,253 @@
+/**
+ * AdvisorCard —— 设置页"插件"栏里的 Advisor 卡片（浏览器半）。
+ *
+ * 交互：provider 分组的模型单选列表（再次点击取消选择）+ 推理档位下拉 +
+ * 保存/放弃。数据与动作全部由 controller 通过 slot inject 面注入；
+ * 本组件纯渲染，样式内联（不依赖 css module 构建）。
+ */
+
+import type { AdvisorCardFace, AdvisorCardState } from './controller.js'
+import type { LocaleKey } from './locales.js'
+
+/** 组件收到的 props：face 里的 hooks 被渲染器绑定成 use 选择器 hook */
+export type AdvisorCardProps = Omit<AdvisorCardFace, 'hooks'> & {
+  useAdvisorCard: <S>(selector: (s: AdvisorCardState) => S) => S
+  t: (key: LocaleKey) => string
+}
+
+/** 巡逻模式区块（自动检测跑偏） */
+function PatrolSection(props: AdvisorCardProps & {
+  enabled: boolean
+  everySteps: number
+  immuneTurns: number
+  investigate: boolean
+  disabled: boolean
+}) {
+  const { t } = props
+  return (
+    <div style={{ ...style.card, background: 'rgba(128,128,128,.06)' }}>
+      <h4 style={{ ...style.title, fontSize: 13 }}>{t('patrolTitle')}</h4>
+      <p style={style.description}>{t('patrolDescription')}</p>
+      <div style={style.effortRow}>
+        <span>{t('patrolToggle')}</span>
+        <button
+          type="button"
+          role="switch"
+          aria-checked={props.enabled}
+          aria-label={t('patrolToggle')}
+          disabled={props.disabled}
+          onClick={props.togglePatrol}
+          style={{
+            ...style.button,
+            width: 40, height: 22, borderRadius: 11, padding: 0, position: 'relative',
+            background: props.enabled ? '#16a34a' : 'rgba(128,128,128,.4)', border: 'none',
+          }}
+        >
+          <span style={{
+            position: 'absolute', top: 2, left: props.enabled ? 20 : 2,
+            width: 18, height: 18, borderRadius: 9, background: '#fff', transition: 'left .15s',
+          }} />
+        </button>
+      </div>
+      {props.enabled
+        ? (
+          <div>
+            <div style={style.effortRow}>
+              <label htmlFor="advisor-patrol-steps">{t('patrolEverySteps')}</label>
+              <input
+                id="advisor-patrol-steps"
+                type="number"
+                min={2}
+                max={500}
+                value={props.everySteps}
+                disabled={props.disabled}
+                onChange={(event) => { props.setPatrolEverySteps(Number(event.target.value)) }}
+                style={{ width: 64 }}
+              />
+            </div>
+            <div style={style.effortRow}>
+              <label htmlFor="advisor-patrol-immune">{t('patrolImmuneTurns')}</label>
+              <input
+                id="advisor-patrol-immune"
+                type="number"
+                min={0}
+                max={20}
+                value={props.immuneTurns}
+                disabled={props.disabled}
+                onChange={(event) => { props.setPatrolImmuneTurns(Number(event.target.value)) }}
+                style={{ width: 64 }}
+              />
+            </div>
+            <div style={{ ...style.effortRow, marginTop: 8 }}>
+              <span>{t('investigateToggle')}</span>
+              <button
+                type="button"
+                role="switch"
+                aria-checked={props.investigate}
+                aria-label={t('investigateToggle')}
+                disabled={props.disabled}
+                onClick={props.toggleInvestigate}
+                style={{
+                  ...style.button,
+                  width: 40, height: 22, borderRadius: 11, padding: 0, position: 'relative',
+                  background: props.investigate ? '#16a34a' : 'rgba(128,128,128,.4)', border: 'none',
+                }}
+              >
+                <span style={{
+                  position: 'absolute', top: 2, left: props.investigate ? 20 : 2,
+                  width: 18, height: 18, borderRadius: 9, background: '#fff', transition: 'left .15s',
+                }} />
+              </button>
+            </div>
+            <p style={{ ...style.notice, marginTop: -2 }}>{t('investigateHint')}</p>
+          </div>
+        )
+        : null}
+      <p style={{ ...style.notice, marginTop: -2 }}>{t('patrolEveryStepsHint')}</p>
+    </div>
+  )
+}
+
+const EFFORT_OPTIONS = ['', 'off', 'minimal', 'low', 'medium', 'high', 'xhigh', 'max'] as const
+
+// 内联样式（跟随设置页朴素风格，避免 css module 构建依赖）
+const style = {
+  card: { border: '1px solid rgba(128,128,128,.35)', borderRadius: 8, padding: '14px 16px', display: 'flex', flexDirection: 'column', gap: 10 } as const,
+  title: { fontSize: 14, fontWeight: 600, margin: 0 } as const,
+  description: { fontSize: 12, opacity: 0.75, margin: 0, lineHeight: 1.6 } as const,
+  current: { fontSize: 12, margin: 0 } as const,
+  groupTitle: { fontSize: 12, fontWeight: 600, opacity: 0.85, margin: '8px 0 2px' } as const,
+  row: { display: 'flex', alignItems: 'center', gap: 8, padding: '3px 0', fontSize: 13 } as const,
+  modelName: { display: 'flex', flexDirection: 'column' } as const,
+  route: { fontSize: 11, opacity: 0.65 } as const,
+  badge: { fontSize: 11, color: '#b45309' } as const,
+  notice: { fontSize: 12, opacity: 0.7, margin: 0 } as const,
+  error: { fontSize: 12, color: '#b91c1c', display: 'flex', gap: 8, alignItems: 'center' } as const,
+  effortRow: { display: 'flex', alignItems: 'center', gap: 8, fontSize: 13, marginTop: 6 } as const,
+  actions: { display: 'flex', gap: 8, alignItems: 'center', marginTop: 4 } as const,
+  button: { fontSize: 13, padding: '4px 14px', borderRadius: 6, cursor: 'pointer' } as const,
+  primary: { background: '#2563eb', color: '#fff', border: 'none' } as const,
+  secondary: { background: 'transparent', border: '1px solid rgba(128,128,128,.5)' } as const,
+  status: { fontSize: 12 } as const,
+  list: { maxHeight: 260, overflowY: 'auto', border: '1px solid rgba(128,128,128,.25)', borderRadius: 6, padding: '4px 10px' } as const,
+}
+
+export function AdvisorCard(props: AdvisorCardProps) {
+  const state = props.useAdvisorCard(s => s)
+  // 档位选项：目录声明了支持面 → 只列支持的；未声明 → 全档位（host 自动降级兜底）
+  const effortOptions: readonly string[] = state.efforts.known
+    ? ['', ...state.efforts.levels]
+    : EFFORT_OPTIONS
+  const disabled = !state.writable || state.saving
+  const armed = state.effective.provider !== '' && state.effective.model !== ''
+
+  return (
+    <div style={style.card}>
+      <h3 style={style.title}>{props.t('title')}</h3>
+      <p style={style.description}>{props.t('description')}</p>
+
+      <p style={style.current}>
+        {props.t('armed')}：
+        {armed
+          ? <strong>{`${state.effective.provider}/${state.effective.model}${state.effective.effort === '' ? '' : ` (${state.effective.effort})`}`}</strong>
+          : props.t('offCurrent')}
+      </p>
+
+      {!state.writable ? <p style={style.notice}>{props.t('readonly')}</p> : null}
+
+      {state.catalogStatus === 'loading' ? <p style={style.notice}>{props.t('loading')}</p> : null}
+      {state.catalogStatus === 'error'
+        ? (
+          <div style={style.error}>
+            <span>{props.t('loadFailed')}</span>
+            <button type="button" style={{ ...style.button, ...style.secondary }} disabled={disabled} onClick={props.retryCatalog}>
+              {props.t('retry')}
+            </button>
+          </div>
+        )
+        : null}
+      {state.catalogPartial ? <p style={style.notice}>{props.t('partial')}</p> : null}
+
+      {state.groups.length > 0
+        ? (
+          <div>
+            <p style={style.notice}>{props.t('choose')}</p>
+            <div style={style.list}>
+              {state.groups.map(group => (
+                <div key={group.id}>
+                  <div style={style.groupTitle}>{group.name}</div>
+                  {group.candidates.map(candidate => (
+                    <label key={candidate.key} style={style.row}>
+                      <input
+                        type="radio"
+                        name="advisor-route"
+                        checked={candidate.selected}
+                        disabled={disabled}
+                        onChange={() => { props.pickRoute(candidate.key) }}
+                      />
+                      <span style={style.modelName}>
+                        <span>{candidate.modelName}</span>
+                        <span style={style.route}>{`${candidate.provider}/${candidate.model}`}</span>
+                      </span>
+                      {!candidate.available ? <span style={style.badge}>{props.t('unavailable')}</span> : null}
+                    </label>
+                  ))}
+                </div>
+              ))}
+            </div>
+          </div>
+        )
+        : state.catalogStatus === 'ready' ? <p style={style.notice}>{props.t('empty')}</p> : null}
+
+      <div style={style.effortRow}>
+        <label htmlFor="advisor-effort">{props.t('effort')}</label>
+        <select
+          id="advisor-effort"
+          value={state.effective.effort}
+          disabled={disabled}
+          onChange={(event) => { props.setEffort(event.target.value) }}
+        >
+          {/* 已声明支持面的模型只列支持的档位；未声明的列全档位（host 侧自动降级兜底） */}
+          {effortOptions.map(option => (
+            <option key={option} value={option}>
+              {option === '' ? props.t('effortDefault') : option}
+            </option>
+          ))}
+        </select>
+      </div>
+      <p style={{ ...style.notice, marginTop: -4 }}>
+        {state.efforts.known ? props.t('effortHintKnown') : props.t('effortHint')}
+      </p>
+
+      <PatrolSection
+        {...props}
+        enabled={state.patrol.enabled}
+        everySteps={state.patrol.everySteps}
+        immuneTurns={state.patrol.immuneTurns}
+        investigate={state.patrol.investigate}
+        disabled={disabled}
+      />
+
+      <div style={style.actions}>
+        <button
+          type="button"
+          style={{ ...style.button, ...style.primary }}
+          disabled={disabled || !state.dirty}
+          onClick={props.save}
+        >
+          {props.t('save')}
+        </button>
+        <button
+          type="button"
+          style={{ ...style.button, ...style.secondary }}
+          disabled={disabled || !state.dirty}
+          onClick={props.discard}
+        >
+          {props.t('discard')}
+        </button>
+        {state.saving ? <span style={style.status}>{props.t('saving')}</span> : null}
+        {state.failed ? <span style={{ ...style.status, color: '#b91c1c' }}>{props.t('saveFailed')}</span> : null}
+      </div>
+    </div>
+  )
+}

package/src/client/AdvisorToolRow.tsx

@@ -0,0 +1,83 @@
+/**
+ * AdvisorToolRow —— `advisor` 工具在会话消息流里的专属行（keyed
+ * `tool.call.toolview` 槽，官方给插件自有工具预留的定制点）。
+ *
+ * 折叠态：🧭 标题 + 进行中/完成/失败状态 + 审查模型路由；
+ * 展开态：审查建议全文（或错误说明）——用户点开即见"真的调了
+ * advisor、建议是什么"。
+ */
+
+import { useState } from 'react'
+import type { LocaleKey } from './locales.js'
+
+/** 会话工具块的最小结构（RunningToolCall / settled result 的并集子集） */
+interface AdvisorBlock {
+  kind?: unknown
+  callId?: unknown
+  call?: { argsRaw?: unknown } | undefined
+  argsRaw?: unknown
+  content?: readonly { type?: unknown, text?: unknown }[] | undefined
+  isError?: boolean | undefined
+  error?: { name?: unknown, code?: unknown, message?: unknown } | undefined
+}
+
+export type AdvisorToolRowProps = {
+  callId?: string
+  toolName?: string
+  block?: AdvisorBlock
+  cwd?: string
+  home?: string
+  openFile?: (path: string) => void
+  inspect?: () => void
+  t?: (key: LocaleKey) => string
+}
+
+const style = {
+  row: { display: 'flex', flexDirection: 'column', gap: 4, margin: '6px 0', border: '1px solid rgba(37,99,235,.35)', borderRadius: 8, overflow: 'hidden' } as const,
+  head: { display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', cursor: 'pointer', background: 'rgba(37,99,235,.08)', border: 'none', font: 'inherit', textAlign: 'left', width: '100%' } as const,
+  title: { fontWeight: 600, fontSize: 13, color: '#1d4ed8' } as const,
+  state: { fontSize: 12, opacity: 0.75 } as const,
+  badge: { fontSize: 11, padding: '1px 8px', borderRadius: 8, flex: 'none' } as const,
+  badgeRun: { background: 'rgba(37,99,235,.15)', color: '#1d4ed8' } as const,
+  badgeOk: { background: 'rgba(22,163,74,.15)', color: '#15803d' } as const,
+  badgeErr: { background: 'rgba(185,28,28,.12)', color: '#b91c1c' } as const,
+  body: { padding: '8px 12px', fontSize: 13, lineHeight: 1.65, whiteSpace: 'pre-wrap', borderTop: '1px solid rgba(37,99,235,.2)', maxHeight: 320, overflowY: 'auto' } as const,
+}
+
+function blockOutput(block: AdvisorBlock | undefined): { text: string, isError: boolean } {
+  if (block === undefined) return { text: '', isError: false }
+  const parts: string[] = []
+  for (const b of block.content ?? []) {
+    if (b?.type === 'text' && typeof b.text === 'string') parts.push(b.text)
+    else if (b !== undefined && b !== null) parts.push(JSON.stringify(b, null, 2))
+  }
+  if (parts.length === 0 && block.error !== undefined) {
+    const e = block.error
+    parts.push(`${typeof e.name === 'string' ? e.name : 'Error'}: ${typeof e.code === 'string' ? e.code : ''} ${typeof e.message === 'string' ? e.message : ''}`.trim())
+  }
+  return { text: parts.join('\n').trim(), isError: block.isError === true }
+}
+
+export function AdvisorToolRow(props: AdvisorToolRowProps) {
+  const t = props.t ?? ((key: LocaleKey) => key)
+  const [expanded, setExpanded] = useState(false)
+  const block = props.block ?? {}
+  const done = block.kind !== undefined
+  const { text, isError } = done ? blockOutput(block) : { text: '', isError: false }
+  const badge = !done
+    ? { label: t('toolRunning'), css: style.badgeRun }
+    : isError
+      ? { label: t('toolFailed'), css: style.badgeErr }
+      : { label: t('toolDone'), css: style.badgeOk }
+  const canExpand = done && text !== ''
+  return (
+    <div style={style.row}>
+      <button type="button" style={style.head} onClick={() => { if (canExpand) setExpanded(v => !v) }}>
+        <span style={style.title}>🧭 Advisor {t('toolTitle')}</span>
+        <span style={{ ...style.badge, ...badge.css }}>{badge.label}</span>
+        <span style={style.state}>{!done ? t('toolConsulting') : canExpand ? (expanded ? t('toolCollapse') : t('toolExpand')) : ''}</span>
+      </button>
+      {expanded && canExpand ? <div style={style.body}>{text}</div> : null}
+    </div>
+  )
+}

package/src/client/PatrolNodeView.tsx

@@ -0,0 +1,85 @@
+/**
+ * PatrolNodeView —— 巡逻裁决在会话消息流里的 🧭 卡片（keyed
+ * `conversation.chat.node` 槽，key 'advisor-patrol'——该 kind 只有本
+ * 插件的 definition 会物化，槽格子无官方占位）。
+ *
+ * 三种形态：ON-TRACK 低调灰卡（默认收起，视野完整但不打扰）、
+ * 纠偏琥珀卡、叫停红卡。后两者展开即裁决全文——用户点开就见
+ * "巡逻真的判了什么、为什么"。unclear 不写事件，天然不出卡片。
+ */
+
+import { useState } from 'react'
+import type { PatrolNodeState } from './patrol-chat.js'
+import type { LocaleKey } from './locales.js'
+
+export type PatrolNodeViewProps = {
+  node?: { data?: PatrolNodeState } | undefined
+  t?: (key: LocaleKey) => string
+}
+
+/** 卡片配色（正常灰 / 纠偏琥珀 / 叫停红） */
+interface Accent {
+  readonly border: string
+  readonly head: string
+  readonly title: string
+  readonly badge: { background: string, color: string }
+}
+
+const ACCENT_ON_TRACK: Accent = {
+  border: 'rgba(107,114,128,.35)',
+  head: 'rgba(107,114,128,.06)',
+  title: '#4b5563',
+  badge: { background: 'rgba(107,114,128,.14)', color: '#4b5563' },
+}
+
+const ACCENT_CORRECTION: Accent = {
+  border: 'rgba(217,119,6,.45)',
+  head: 'rgba(217,119,6,.09)',
+  title: '#b45309',
+  badge: { background: 'rgba(217,119,6,.16)', color: '#b45309' },
+}
+
+const ACCENT_STOP: Accent = {
+  border: 'rgba(185,28,28,.4)',
+  head: 'rgba(185,28,28,.07)',
+  title: '#b91c1c',
+  badge: { background: 'rgba(185,28,28,.12)', color: '#b91c1c' },
+}
+
+const style = {
+  row: (accent: Accent) => ({ display: 'flex', flexDirection: 'column', gap: 4, margin: '6px 0', border: `1px solid ${accent.border}`, borderRadius: 8, overflow: 'hidden' } as const),
+  head: (accent: Accent) => ({ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 12px', cursor: 'pointer', background: accent.head, border: 'none', font: 'inherit', textAlign: 'left', width: '100%' } as const),
+  title: (accent: Accent) => ({ fontWeight: 600, fontSize: 13, color: accent.title } as const),
+  badge: { fontSize: 11, padding: '1px 8px', borderRadius: 8, flex: 'none' } as const,
+  meta: { fontSize: 12, opacity: 0.7 } as const,
+  body: { padding: '8px 12px', fontSize: 13, lineHeight: 1.65, whiteSpace: 'pre-wrap', borderTop: '1px solid rgba(120,113,108,.25)', maxHeight: 320, overflowY: 'auto' } as const,
+}
+
+export function PatrolNodeView(props: PatrolNodeViewProps) {
+  const t = props.t ?? ((key: LocaleKey) => key)
+  const [expanded, setExpanded] = useState(false)
+  const data = props.node?.data
+  if (data === undefined) return null
+  const onTrack = data.verdict === 'on-track'
+  const accent = onTrack ? ACCENT_ON_TRACK : data.verdict === 'stop' ? ACCENT_STOP : ACCENT_CORRECTION
+  const badge = onTrack ? t('patrolVerdictOnTrack') : data.verdict === 'stop' ? t('patrolVerdictStop') : t('patrolVerdictCorrection')
+  const title = onTrack ? t('patrolCheckTitle') : t('patrolCardTitle')
+  const canExpand = data.detail.trim() !== ''
+  const fmtTok = (n: number): string => (n >= 1000 ? `${Math.round(n / 100) / 10}k` : String(n))
+  const usageText = data.usage === undefined
+    ? ''
+    : ` · ↓${fmtTok(data.usage.input)}${data.usage.cacheRead !== undefined && data.usage.cacheRead > 0 ? `(缓存${fmtTok(data.usage.cacheRead)})` : ''} ↑${fmtTok(data.usage.output)} tok`
+  // 冷却降级标记：concern 在 immuneTurns 窗口内只出了卡片、未注入执行模型
+  const downgradedTag = data.downgraded === true ? ` · ${t('patrolDowngradedTag')}` : ''
+  return (
+    <div style={style.row(accent)}>
+      <button type="button" style={style.head(accent)} onClick={() => { if (canExpand) setExpanded(v => !v) }}>
+        <span style={style.title(accent)}>{`🧭 Advisor ${title}`}</span>
+        <span style={{ ...style.badge, ...accent.badge }}>{badge}</span>
+        <span style={style.meta}>{`${data.reviewer} · ${t('patrolCardStepPrefix')}${data.step}${t('patrolCardStepSuffix')} · ${Math.round(data.patrolMs / 100) / 10}s${usageText}${downgradedTag}`}</span>
+        <span style={style.meta}>{canExpand ? (expanded ? t('patrolCollapse') : t('patrolExpand')) : ''}</span>
+      </button>
+      {expanded && canExpand ? <div style={style.body}>{data.detail}</div> : null}
+    </div>
+  )
+}