dsh-auto-review 0.4.0

package/src/client/ReviewPanel.tsx

@@ -0,0 +1,164 @@
+/**
+ * The session-header review panel: a button in the conversation header that
+ * opens a popover with this session's auto-review state — the on/off switch,
+ * budgets, cumulative statistics (including hard-disable rejections), the
+ * circuit trip, recent verdicts, and one-shot approve buttons for recent
+ * denials. Data arrives through the `autoReview` session projection;
+ * switches and approves execute the `/auto-review` command through the
+ * commands Remote.
+ * @module dsh-auto-review/client/ReviewPanel
+ */
+
+import { useRef, useState, type ReactNode } from 'react'
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { AutoReviewProjection } from '../projection-types.ts'
+import { presentVerdict } from './present.ts'
+import { NS } from './locales.ts'
+
+/** Registration-side injected face: the approve action for one recent denial. */
+export interface ReviewPanelInjected {
+  /** Approve the n-th most recent denial (1 = most recent); resolves with the command result text. */
+  approve: (n: number) => Promise<string>
+  /** Switch the session's auto-review on/off (`/auto-review on|off`); resolves with the command result text. */
+  setEnabled: (enabled: boolean) => Promise<string>
+}
+
+/** Full component props assembled by the session-header slot renderer. */
+export type ReviewPanelProps =
+  PropsRuntime<'conversation.session.header.actions'>
+  & PropsLocale<typeof NS>
+  & InjectFace<ReviewPanelInjected>
+
+/** Compact verdict-row badge label for the panel. */
+function verdictBadge(
+  value: AutoReviewProjection | undefined,
+  t: ReviewPanelProps['t'],
+): ReactNode {
+  if (value === undefined) return t('unavailable')
+  const fallback = (kind: string): string => t('fallbackLabel').replace('{kind}', kind)
+  const labels = {
+    allow: t('decisionAllow'),
+    deny: t('decisionDeny'),
+    fallback,
+    escalation: t('escalationLabel'),
+  }
+  return value.recent.map(verdict => presentVerdict(verdict, labels)).map(row => (
+    <div key={row.reviewId} data-dsh-auto-review-verdict>
+      <span data-dsh-auto-review-muted>{row.toolName}</span>
+      <span data-dsh-auto-review={`tone-${row.tone}`}>{row.label}</span>
+      <span data-dsh-auto-review-muted>{row.detail}</span>
+    </div>
+  ))
+}
+
+/**
+ * Render the review panel action.
+ * @param props - framework kit (sessionId, useProjection), locale, and the approve face.
+ * @returns the header button with its popover.
+ */
+export function ReviewPanel({ useProjection, approve, setEnabled, t }: ReviewPanelProps): ReactNode {
+  const value = useProjection('autoReview')
+  const [open, setOpen] = useState(false)
+  const [notice, setNotice] = useState<string | null>(null)
+  const anchor = useRef<HTMLDivElement | null>(null)
+  const toggle = (): void => setOpen(previous => !previous)
+  const runApprove = async (n: number): Promise<void> => {
+    try {
+      const text = await approve(n)
+      setNotice(t('approveResult').replace('{text}', text))
+    } catch (error: unknown) {
+      setNotice(t('approveFailed').replace('{text}', error instanceof Error ? error.message : String(error)))
+    }
+  }
+  const runSwitch = async (enabled: boolean): Promise<void> => {
+    try {
+      const text = await setEnabled(enabled)
+      setNotice(t('switchedResult').replace('{text}', text))
+    } catch (error: unknown) {
+      setNotice(t('switchFailed').replace('{text}', error instanceof Error ? error.message : String(error)))
+    }
+  }
+  return (
+    <div data-dsh-auto-review ref={anchor}>
+      <button type="button" data-dsh-auto-review-button onClick={toggle}>
+        {t('label')}
+      </button>
+      {open && (
+        <div data-dsh-auto-review-panel>
+          <div data-dsh-auto-review-title>{t('title')}</div>
+          {value === undefined
+            ? <div data-dsh-auto-review-muted>{t('unavailable')}</div>
+            : (
+              <div>
+                <div data-dsh-auto-review-row>
+                  <span>{t('state')}</span>
+                  <span>{value.enabled ? t('stateOn') : t('stateOff')}</span>
+                </div>
+                <div data-dsh-auto-review-row>
+                  <span>{t('enable')} / {t('disable')}</span>
+                  <span>
+                    <button
+                      type="button"
+                      data-dsh-auto-review-switch
+                      disabled={value.enabled}
+                      onClick={() => void runSwitch(true)}
+                    >
+                      {t('enable')}
+                    </button>
+                    <button
+                      type="button"
+                      data-dsh-auto-review-switch
+                      disabled={!value.enabled}
+                      onClick={() => void runSwitch(false)}
+                    >
+                      {t('disable')}
+                    </button>
+                  </span>
+                </div>
+                <div data-dsh-auto-review-row>
+                  <span>{t('verdicts')}</span>
+                  <span>{value.verdictsUsed}</span>
+                </div>
+                <div data-dsh-auto-review-row>
+                  <span>{t('failures')}</span>
+                  <span>{value.failuresUsed}</span>
+                </div>
+                <div data-dsh-auto-review-row>
+                  <span>{t('allTime')}</span>
+                  <span>
+                    {value.allows} {t('allows')} · {value.denies} {t('denies')} · {value.fallbacks} {t('fallbacks')} · {value.neverRejects} {t('neverRejects')} · {t('avg')} {value.avgDurationMs} {t('ms')}
+                  </span>
+                </div>
+                {value.circuit !== null && (
+                  <div data-dsh-auto-review-circuit>
+                    {t('circuit')} — {t('circuitDetail')
+                      .replace('{kind}', value.circuit.trip.kind)
+                      .replace('{count}', String(value.circuit.trip.count))
+                      .replace('{action}', value.circuit.action)}
+                  </div>
+                )}
+                {value.recentDenies.length > 0 && (
+                  <div data-dsh-auto-review-section>
+                    <div data-dsh-auto-review-title>{t('denyList')}</div>
+                    {value.recentDenies.map((deny, index) => (
+                      <div key={deny.reviewId} data-dsh-auto-review-row>
+                        <span data-dsh-auto-review-muted>{deny.toolName}</span>
+                        <button type="button" data-dsh-auto-review-approve onClick={() => void runApprove(index + 1)}>
+                          {t('approve')} #{index + 1}
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+                <div data-dsh-auto-review-section>
+                  <div data-dsh-auto-review-title>{t('recent')}</div>
+                  {value.recent.length === 0 ? <div data-dsh-auto-review-muted>{t('empty')}</div> : verdictBadge(value, t)}
+                </div>
+              </div>
+            )}
+          {notice !== null && <div data-dsh-auto-review-muted>{notice}</div>}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/index.ts

@@ -0,0 +1,72 @@
+/**
+ * `dsh-auto-review`, browser half: registers the locale dictionaries, the
+ * scoped stylesheet, and the session-header review panel action. All data
+ * arrives through the `autoReview` session projection; the approve buttons
+ * execute the `/auto-review approve [n]` command through the commands
+ * Remote namespace.
+ *
+ * @module dsh-auto-review/client
+ */
+
+import type { ClientContext, SessionId } from '@deepseek-ai/dsh-client-runtime/client'
+import type {} from '@deepseek-ai/dsh-client-locale/client'
+// Type-only: pulls the 'conversation.session.header.actions' SlotMap
+// declaration into this program so the registration typechecks.
+import type {} from '@deepseek-ai/dsh-client-ui-conversation/client'
+// Type-only: merges the commands namespace onto ctx.remote.
+import type {} from '@deepseek-ai/dsh-api-remotes/client'
+import type {} from '../projection-types.ts'
+import { ReviewPanel, type ReviewPanelInjected } from './ReviewPanel.tsx'
+import { en, NS, zh, type ReviewPanelLocaleKey } from './locales.ts'
+import { installPanelStyles } from './styles.ts'
+
+declare module '@deepseek-ai/dsh-client-ui-slots' {
+  interface LocaleNamespaceMap {
+    /** Review panel copy. */
+    'autoReviewPanel': ReviewPanelLocaleKey
+  }
+}
+
+export type { ReviewPanelProps, ReviewPanelInjected } from './ReviewPanel.tsx'
+export type { ReviewPanelLocaleKey } from './locales.ts'
+export { presentVerdict, type PresentedVerdict, type VerdictTone } from './present.ts'
+
+/** Plugin name: matches the package name, the graph row id, and the bundle id. */
+export const name = 'dsh-auto-review'
+
+/** Services the panel reads; `remote.commands` is mounted by the api-remotes client. */
+export const inject = ['slots', 'locale', 'remote', 'remote.commands']
+
+/**
+ * Browser plugin body: dictionaries, the scoped stylesheet, and the
+ * session-header action registration.
+ * @param ctx - client root context.
+ */
+export function apply(ctx: ClientContext): void {
+  ctx.effect(() => ctx.locale.register(NS, { zh, en }), 'dsh-auto-review: dictionaries')
+  ctx.effect(() => installPanelStyles(), 'dsh-auto-review: stylesheet')
+  ctx.slots.inject(
+    'conversation.session.header.actions',
+    () => ctx.slots.register({
+      name: 'conversation.session.header.actions',
+      id: 'auto-review',
+      order: 40,
+      locale: NS,
+      inject: (sessionId: SessionId): ReviewPanelInjected => {
+        const executeCommand = async (line: string): Promise<string> => {
+          const result = await ctx.remote.commands.execute(sessionId, line)
+          if (!result.ok) throw new Error(`${result.error.code}: ${result.error.message}`)
+          if (result.value === undefined) throw new Error('unknown command: /auto-review')
+          const command = result.value.result
+          if (command === undefined) throw new Error('/auto-review produced no command result')
+          const text = command.text ?? ''
+          return command.kind === 'success' ? text : `${command.kind}: ${text}`
+        }
+        return {
+          approve: async (n: number): Promise<string> => executeCommand(`/auto-review approve ${n}`),
+          setEnabled: async (enabled: boolean): Promise<string> => executeCommand(`/auto-review ${enabled ? 'on' : 'off'}`),
+        }
+      },
+    }, ReviewPanel),
+  )
+}

package/src/client/locales.ts

@@ -0,0 +1,87 @@
+/**
+ * Copy dictionaries for the auto-review session-header panel (en/zh — the
+ * harness locale registry accepts these two UI language codes today).
+ * @module dsh-auto-review/client/locales
+ */
+
+/** Simplified Chinese dictionary and key source of truth. */
+export const zh = {
+  label: 'AI 审查',
+  title: 'AI 自动审查',
+  state: '状态',
+  stateOn: '已开启',
+  stateOff: '已关闭',
+  enable: '开启',
+  disable: '关闭',
+  verdicts: '本回合 AI 裁决',
+  failures: '本回合失败',
+  allTime: '累计',
+  allows: '放行',
+  denies: '拒绝',
+  fallbacks: '失败',
+  neverRejects: '硬禁用拒绝',
+  avg: '平均耗时',
+  circuit: '拒绝熔断器已触发',
+  circuitDetail: '触发类型：{kind}，计数 {count}，动作 {action}',
+  empty: '本会话暂无 AI 审查裁决。',
+  recent: '最近裁决',
+  denyList: '可批准的重试',
+  approve: '批准重试',
+  approveResult: '已授权：{text}',
+  approveFailed: '批准失败：{text}',
+  switchedResult: '已切换：{text}',
+  switchFailed: '切换失败：{text}',
+  unavailable: '审查面板不可用（宿主未提供会话投影能力）。',
+  decisionAllow: '放行',
+  decisionDeny: '拒绝',
+  fallbackLabel: '失败（{kind}）',
+  escalationLabel: '风险策略升级',
+  riskLow: '低风险',
+  riskMedium: '中风险',
+  riskHigh: '高风险',
+  ms: 'ms',
+} satisfies Record<string, string>
+
+/** Auto-review panel locale key union. */
+export type ReviewPanelLocaleKey = keyof typeof zh
+
+/** English dictionary checked against the Chinese key set. */
+export const en: Record<ReviewPanelLocaleKey, string> = {
+  label: 'AI Review',
+  title: 'AI Auto-Review',
+  state: 'State',
+  stateOn: 'ON',
+  stateOff: 'OFF',
+  enable: 'Enable',
+  disable: 'Disable',
+  verdicts: 'AI verdicts this turn',
+  failures: 'Failures this turn',
+  allTime: 'All-time',
+  allows: 'allows',
+  denies: 'denies',
+  fallbacks: 'fallbacks',
+  neverRejects: 'never rejects',
+  avg: 'avg',
+  circuit: 'Rejection circuit breaker tripped',
+  circuitDetail: '{kind}: {count} denials, action {action}',
+  empty: 'No AI review verdicts in this session yet.',
+  recent: 'Recent verdicts',
+  denyList: 'Approvable retries',
+  approve: 'Approve retry',
+  approveResult: 'Authorized: {text}',
+  approveFailed: 'Approve failed: {text}',
+  switchedResult: 'Switched: {text}',
+  switchFailed: 'Switch failed: {text}',
+  unavailable: 'The review panel is unavailable (the host does not provide the session-projection capability).',
+  decisionAllow: 'allow',
+  decisionDeny: 'deny',
+  fallbackLabel: 'fallback ({kind})',
+  escalationLabel: 'risk-policy escalation',
+  riskLow: 'low risk',
+  riskMedium: 'medium risk',
+  riskHigh: 'high risk',
+  ms: 'ms',
+}
+
+/** Dictionary namespace owned by this plugin. */
+export const NS = 'autoReviewPanel'

package/src/client/present.ts

@@ -0,0 +1,58 @@
+/**
+ * Pure presentation for the review panel: verdict rows and badges as plain
+ * strings and tone codes — no I/O, clock, or randomness. The component
+ * owns layout and interaction; this module owns the text.
+ * @module dsh-auto-review/client/present
+ */
+
+import type { AutoReviewVerdictView } from '../projection-types.ts'
+
+/** Badge tones the component maps to scoped styles. */
+export type VerdictTone = 'allow' | 'deny' | 'fallback' | 'escalation'
+
+/** One presented verdict row. */
+export interface PresentedVerdict {
+  readonly reviewId: string
+  readonly toolName: string
+  readonly label: string
+  readonly detail: string
+  readonly tone: VerdictTone
+}
+
+/** Present one verdict row (the component supplies the localized label texts). */
+export function presentVerdict(
+  verdict: AutoReviewVerdictView,
+  labels: {
+    readonly allow: string
+    readonly deny: string
+    readonly fallback: (kind: string) => string
+    readonly escalation: string
+  },
+): PresentedVerdict {
+  if (verdict.fallback !== undefined) {
+    return {
+      reviewId: verdict.reviewId,
+      toolName: verdict.toolName,
+      label: labels.fallback(verdict.fallback),
+      detail: `${verdict.durationMs} ms`,
+      tone: 'fallback',
+    }
+  }
+  if (verdict.escalation === 'risk-policy') {
+    return {
+      reviewId: verdict.reviewId,
+      toolName: verdict.toolName,
+      label: labels.escalation,
+      detail: verdict.reason ?? '',
+      tone: 'escalation',
+    }
+  }
+  const label = verdict.decision === 'deny' ? labels.deny : labels.allow
+  return {
+    reviewId: verdict.reviewId,
+    toolName: verdict.toolName,
+    label,
+    detail: verdict.reason ?? `${verdict.durationMs} ms`,
+    tone: verdict.decision === 'deny' ? 'deny' : 'allow',
+  }
+}

package/src/client/styles.ts

@@ -0,0 +1,131 @@
+/**
+ * Scoped stylesheet for the review panel. Standalone bundles cannot use the
+ * in-repo CSS-module pipeline, so the panel injects one `<style>` element
+ * whose selectors are all scoped under `[data-dsh-auto-review]`.
+ * @module dsh-auto-review/client/styles
+ */
+
+const STYLE_ID = 'dsh-auto-review-panel-styles'
+
+const CSS = `
+[data-dsh-auto-review] {
+  --ar-allow: var(--dsw-color-success, #16a34a);
+  --ar-deny: var(--dsw-color-danger, #dc2626);
+  --ar-fallback: var(--dsw-color-warning, #d97706);
+  --ar-escalation: var(--dsw-color-warning, #d97706);
+  --ar-border: var(--dsw-color-border, rgba(128, 128, 128, 0.3));
+  --ar-bg: var(--dsw-color-surface, #ffffff);
+  --ar-fg: var(--dsw-color-text, #1f2328);
+  --ar-muted: var(--dsw-color-text-muted, #6b7280);
+  font-family: inherit;
+  color: var(--ar-fg);
+}
+[data-dsh-auto-review-panel] {
+  position: absolute;
+  z-index: 40;
+  min-width: 320px;
+  max-width: 420px;
+  max-height: 70vh;
+  overflow-y: auto;
+  background: var(--ar-bg);
+  border: 1px solid var(--ar-border);
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
+  padding: 12px;
+  font-size: 12px;
+  line-height: 1.5;
+}
+[data-dsh-auto-review-button] {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  background: transparent;
+  border: 1px solid var(--ar-border);
+  border-radius: 6px;
+  padding: 3px 8px;
+  font-size: 12px;
+  color: var(--ar-fg);
+}
+[data-dsh-auto-review-button]:hover {
+  background: rgba(128, 128, 128, 0.12);
+}
+[data-dsh-auto-review-section] {
+  margin: 8px 0;
+  border-top: 1px solid var(--ar-border);
+  padding-top: 8px;
+}
+[data-dsh-auto-review-title] {
+  font-weight: 600;
+  margin-bottom: 6px;
+}
+[data-dsh-auto-review-row] {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 2px 0;
+  align-items: baseline;
+}
+[data-dsh-auto-review-muted] {
+  color: var(--ar-muted);
+}
+[data-dsh-auto-review-verdict] {
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  padding: 3px 0;
+  border-bottom: 1px dashed var(--ar-border);
+}
+[data-dsh-auto-review-tone-allow] { color: var(--ar-allow); }
+[data-dsh-auto-review-tone-deny] { color: var(--ar-deny); }
+[data-dsh-auto-review-tone-fallback] { color: var(--ar-fallback); }
+[data-dsh-auto-review-tone-escalation] { color: var(--ar-escalation); }
+[data-dsh-auto-review-approve] {
+  cursor: pointer;
+  border: 1px solid var(--ar-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ar-fg);
+  padding: 1px 6px;
+  font-size: 11px;
+}
+[data-dsh-auto-review-approve]:hover {
+  background: rgba(128, 128, 128, 0.12);
+}
+[data-dsh-auto-review-switch] {
+  cursor: pointer;
+  border: 1px solid var(--ar-border);
+  border-radius: 4px;
+  background: transparent;
+  color: var(--ar-fg);
+  padding: 1px 6px;
+  font-size: 11px;
+}
+[data-dsh-auto-review-switch] + [data-dsh-auto-review-switch] {
+  margin-left: 4px;
+}
+[data-dsh-auto-review-switch]:hover:not(:disabled) {
+  background: rgba(128, 128, 128, 0.12);
+}
+[data-dsh-auto-review-approve]:disabled,
+[data-dsh-auto-review-switch]:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+[data-dsh-auto-review-circuit] {
+  color: var(--ar-deny);
+  font-weight: 600;
+}
+`
+
+/** Install the scoped stylesheet once per plugin fiber. */
+export function installPanelStyles(): () => void {
+  if (document.getElementById(STYLE_ID) !== null) return () => undefined
+  const element = document.createElement('style')
+  element.id = STYLE_ID
+  element.textContent = CSS
+  document.head.appendChild(element)
+  return () => {
+    element.remove()
+  }
+}