dsh-my-observability 0.1.0

package/lib/client.src.js

@@ -0,0 +1,62 @@
+/**
+ * dsh-my-observability — client half (browser). SOURCE TEMPLATE.
+ *
+ * 提供两个侧边栏页签：
+ *  - 轨迹回放（dsh-my-observability:replay）：按时间轴查看 agent 行为
+ *    （agent 状态 / 模型流 / 工具调用与结果），支持会话切换与类型过滤，
+ *    数据来自 server 端事件审计（/observability/api/events）；
+ *  - Git 工具 + 增量 diff 审查（dsh-my-observability:git）：仓库状态与
+ *    差异查看、类型化提交（Conventional Commits）、提交前规则引擎 +
+ *    可选 AI 审查（/observability/api/git/* 与 /observability/api/review）。
+ *
+ * 面板可见（visible）时轮询（REPLAY_POLL_MS），隐藏时暂停（省请求）。
+ * 样式走 DSH 语义 token（--dsw-alias-* / --dsw-font-*），随 activation
+ * 注入、fiber teardown 卸载（HMR/禁用无残留）。
+ *
+ * BUILD NOTE: 本文件是模板源码，不是 DSH 实际服务的文件。scripts/build.mjs
+ * 将四个片段文件（lib/parts/i18n.js / replay.js / git.js / styles.js，均为
+ * 无 import/export 的纯函数声明文本）经下方 __PART_*__ 占位符（函数式
+ * replaceAll，避免 $&/$1 特殊解释）拼接进 factory 作用域，写出
+ * lib/client.js —— 即 DSH 实际服务的产物。产物必须提交；CI 只对产物执行
+ * node --check（见 scripts/test-all.sh / .github/workflows/ci.yml）。
+ */
+window.__ModuleLoader__.load({
+  id: 'dsh-my-observability',
+  factory: (require) => {
+    var module = { exports: {} }
+    var exports = module.exports
+    Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' })
+    const { createElement, useEffect, useState } = require('react')
+
+    // ── parts（scripts/build.mjs 拼接；顺序固定）───────────────────────
+    /*__PART_I18N__*/
+    /*__PART_REPLAY__*/
+    /*__PART_GIT__*/
+    /*__PART_STYLES__*/
+
+    // ── 插件体：样式注入 + 两个页签注册 ────────────────────────────────
+    exports.inject = ['betterSidebar']
+
+    exports.apply = function apply(ctx) {
+      ctx.effect(() => injectStyles(), 'dsh-my-observability: styles')
+      const service = ctx.betterSidebar
+      if (service === undefined) return
+      ctx.effect(() => service.registerTab({
+        id: 'dsh-my-observability:replay',
+        title: () => strings.replayTitle(),
+        order: 40,
+        single: true,
+        component: (props) => createElement(ReplayPanel, props),
+      }), 'dsh-my-observability: replay tab registration')
+      ctx.effect(() => service.registerTab({
+        id: 'dsh-my-observability:git',
+        title: () => strings.gitTitle(),
+        order: 41,
+        single: true,
+        component: (props) => createElement(GitPanel, props),
+      }), 'dsh-my-observability: git tab registration')
+    }
+
+    return module.exports
+  },
+})

package/lib/constants.js

@@ -0,0 +1,7 @@
+/**
+ * dsh-my-observability — shared constants.
+ */
+export const MAX_ARG_KEYS = 10
+export const MAX_TEXT_LEN = 200
+export const REVIEW_TIMEOUT_MS = 60000
+export const GIT_TIMEOUT_MS = 30000

package/lib/diff.js

@@ -0,0 +1,86 @@
+/**
+ * dsh-my-observability — unified diff parser (pure functions).
+ *
+ * 解析 `git diff` 输出的 unified diff 文本，提取每个变更文件的新增/删除
+ * 行（含行号）与二进制标记，供规则审查引擎消费。全部为纯函数，可独立
+ * 测试。
+ */
+
+/** 解析 diff 文本：{ files, binary }。 */
+export function parseDiff(text) {
+  if (typeof text !== 'string' || text === '') return { files: [], binary: false }
+  const files = []
+  let current = null
+  let hunkLine = 0
+  let binary = false
+  for (const line of text.split('\n')) {
+    const kind = classifyLine(line)
+    if (kind === 'file') {
+      current = { path: pathOf(line), insertions: 0, deletions: 0, addedLines: [], binary: false }
+      files.push(current)
+      hunkLine = 0
+      continue
+    }
+    if (current === null) continue
+    const applied = applyLine(current, kind, line, hunkLine)
+    hunkLine = applied.hunkLine
+    if (applied.binary) binary = true
+  }
+  return { files, binary }
+}
+
+/** 应用一行到当前文件（返回新的 hunkLine 与 binary 标记）。 */
+function applyLine(current, kind, line, hunkLine) {
+  if (kind === 'binary') {
+    current.binary = true
+    return { hunkLine, binary: true }
+  }
+  if (kind === 'hunk') return { hunkLine: hunkLineOf(line) }
+  if (kind === 'added') {
+    current.insertions += 1
+    current.addedLines.push({ line: hunkLine, text: line.slice(1) })
+    return { hunkLine: hunkLine + 1 }
+  }
+  if (kind === 'deleted') {
+    current.deletions += 1
+    return { hunkLine }
+  }
+  if (kind === 'context') return { hunkLine: hunkLine + 1 }
+  return { hunkLine }
+}
+
+/** diff 行分类（file/binary/hunk/added/deleted/context/other）。 */
+function classifyLine(line) {
+  if (line.startsWith('diff --git ')) return 'file'
+  if (line.startsWith('Binary files ')) return 'binary'
+  if (line.startsWith('@@ ')) return 'hunk'
+  if (line.startsWith('+') && !line.startsWith('+++')) return 'added'
+  if (line.startsWith('-') && !line.startsWith('---')) return 'deleted'
+  if (line.startsWith(' ')) return 'context'
+  return 'other'
+}
+
+/** 文件路径：`diff --git a/x b/y` → y（b/ 前缀剥除）。 */
+function pathOf(line) {
+  const parts = line.split(' ')
+  const b = parts[parts.length - 1] ?? ''
+  return b.startsWith('b/') ? b.slice(2) : b
+}
+
+/** hunk 起始行号：`@@ -1,3 +10,4 @@` → 10（新文件侧）。 */
+function hunkLineOf(line) {
+  const match = /@@ -\d+(?:,\d+)? \+(\d+)(?:,\d+)? @@/.exec(line)
+  return match !== null ? Number(match[1]) : 0
+}
+
+/** 是否为测试文件（路径含 test/spec 标记）。 */
+export function isTestFile(path) {
+  return /(^|\/)(test|tests|__tests__|spec)(\/|$)/.test(path)
+    || /\.(test|spec)\./.test(path)
+}
+
+/** 是否为源码文件（排除纯文档/配置类；无扩展名视为源码）。 */
+export function isSourceFile(path) {
+  if (isTestFile(path)) return false
+  return !/\.(md|txt|json|yml|yaml|lock|png|jpg|jpeg|gif|svg|ico|woff2?|ttf|eot)$/.test(path)
+}

package/lib/fence.js

@@ -0,0 +1,60 @@
+/**
+ * dsh-my-observability — Host-header trust fence（与 /api 网关一致的契约）。
+ *
+ * 判断请求是否来自可信方：host 必须为 loopback 或受信权威（trustedHosts），
+ * 且 sec-fetch-site 不得为 cross-site、origin（若存在）必须与 host 同源。
+ */
+
+/** 请求是否通过信任围栏（loopback 或受信权威 + 同源校验）。 */
+export function isTrustedApiRequest(request, trustedHosts) {
+  const host = header(request.headers, 'host')
+  if (host === undefined) return false
+  const hostUrl = parseAuthority(host)
+  if (hostUrl === undefined) return false
+  if (!isLoopbackHostname(hostUrl.hostname) && !isTrustedAuthority(hostUrl, trustedHosts)) return false
+  if (header(request.headers, 'sec-fetch-site') === 'cross-site') return false
+  const origin = header(request.headers, 'origin')
+  if (origin === undefined) return true
+  try {
+    return new URL(origin).host === hostUrl.host
+  } catch {
+    return false
+  }
+}
+
+/** 读取字符串型请求头（非字符串视为缺失）。 */
+export function header(headers, name) {
+  const value = headers[name]
+  return typeof value === 'string' ? value : undefined
+}
+
+function parseAuthority(authority) {
+  try {
+    return new URL(`http://${authority}`)
+  } catch {
+    return undefined
+  }
+}
+
+function isLoopbackHostname(hostname) {
+  if (hostname === 'localhost' || hostname === '[::1]') return true
+  const parts = hostname.split('.')
+  return parts.length === 4
+    && parts[0] === '127'
+    && parts.every((part) => /^\d{1,3}$/.test(part) && Number(part) <= 255)
+}
+
+function canonicalAuthority(entry, entryUrl) {
+  const port = entryUrl.port !== '' ? entryUrl.port : new URL(`https://${entry}`).port
+  return port === '' ? entryUrl.hostname : `${entryUrl.hostname}:${port}`
+}
+
+function isTrustedAuthority(hostUrl, trustedHosts) {
+  return trustedHosts.some((entry) => {
+    const entryUrl = parseAuthority(entry)
+    if (entryUrl === undefined) return false
+    return canonicalAuthority(entry, entryUrl) === entryUrl.hostname
+      ? entryUrl.hostname === hostUrl.hostname
+      : entryUrl.host === hostUrl.host
+  })
+}

package/lib/git.js

@@ -0,0 +1,142 @@
+/**
+ * dsh-my-observability — structured Git operations.
+ *
+ * 结构化 Git 工具：类型化提交（Conventional Commits）+ 状态/差异查询。
+ *  - formatCommitMessage：纯函数，生成 `<type>(<scope>): <description>` 消息
+ *  - parseCommitRequest：校验提交请求（type 枚举 / scope 格式 / 描述必填）
+ *  - gitStatus / gitDiff / gitCommit：execFile 执行 git（不经 shell），
+ *    路径必须为存在的 git 仓库（rev-parse 校验），全部带超时与输出上限
+ *
+ * 提交流程：git add -A → git commit -m <完整消息>（单参数传入，消息由
+ * 服务端生成，不拼接用户输入到 shell）。
+ */
+import { execFile } from 'node:child_process'
+import { statSync } from 'node:fs'
+import { GIT_TIMEOUT_MS } from './constants.js'
+
+/** Conventional Commits 类型枚举。 */
+export const COMMIT_TYPES = ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']
+
+/** 生成类型化提交消息（纯函数，可独立测试）。 */
+export function formatCommitMessage({ type, scope, description, body }) {
+  const head = scope !== undefined && scope !== '' ? `${type}(${scope}): ${description}` : `${type}: ${description}`
+  return body !== undefined && body !== '' ? `${head}\n\n${body}` : head
+}
+
+/** 校验并规整提交请求；非法返回 undefined（type/scope/description 规则见上）。 */
+export function parseCommitRequest(payload) {
+  if (!isObject(payload)) return undefined
+  if (!COMMIT_TYPES.includes(payload.type)) return undefined
+  const description = stringOf(payload.description).trim()
+  if (description === '') return undefined
+  const scope = stringOf(payload.scope).trim()
+  if (scope !== '' && !/^[a-z0-9-]+$/.test(scope)) return undefined
+  if (payload.body !== undefined && typeof payload.body !== 'string') return undefined
+  return { type: payload.type, scope, description, body: stringOf(payload.body).trim() }
+}
+
+function isObject(value) {
+  return value !== null && typeof value === 'object'
+}
+
+function stringOf(value) {
+  return typeof value === 'string' ? value : ''
+}
+
+/** 路径是否为存在的 git 仓库（目录存在且 git rev-parse 成功）。 */
+export async function isGitRepo(repoPath) {
+  if (typeof repoPath !== 'string' || repoPath === '') return false
+  try {
+    if (!statSync(repoPath).isDirectory()) return false
+  } catch {
+    return false
+  }
+  const result = await runGit(repoPath, ['rev-parse', '--git-dir'])
+  return result.ok
+}
+
+/** 执行 git 命令（不经 shell；超时 + 输出上限；失败返回 { ok:false, error }）。 */
+function runGit(repoPath, args) {
+  return new Promise((resolve) => {
+    execFile('git', args, {
+      cwd: repoPath,
+      timeout: GIT_TIMEOUT_MS,
+      maxBuffer: 16 * 1024 * 1024,
+    }, (error, stdout, stderr) => {
+      if (error !== null) {
+        const message = typeof stderr === 'string' && stderr.trim() !== '' ? stderr.trim() : error.message
+        resolve({ ok: false, error: { message } })
+        return
+      }
+      resolve({ ok: true, stdout, stderr })
+    })
+  })
+}
+
+/** 仓库状态：分支 + 变更清单（status --short --branch 解析）。 */
+export async function gitStatus(repoPath) {
+  if (!(await isGitRepo(repoPath))) return { ok: false, error: { message: 'not a git repository' } }
+  const result = await runGit(repoPath, ['status', '--short', '--branch'])
+  if (!result.ok) return result
+  const lines = result.stdout.split('\n').filter((line) => line !== '')
+  const branch = parseBranch(lines[0] ?? '')
+  const changes = lines.slice(1).map(parseChangeLine)
+  return {
+    ok: true,
+    branch,
+    changes,
+    stagedCount: changes.filter((change) => change.staged).length,
+    unstagedCount: changes.filter((change) => !change.staged).length,
+    clean: changes.length === 0,
+  }
+}
+
+/** 分支行解析：`## main...origin/main [ahead 1]` → main。 */
+function parseBranch(line) {
+  if (!line.startsWith('## ')) return ''
+  const head = line.slice(3).split('...')[0].trim()
+  return head
+}
+
+/** 变更行解析：`XY path`（X=暂存区状态，Y=工作区状态；`??`=未跟踪）。 */
+function parseChangeLine(line) {
+  const status = line.slice(0, 2)
+  const path = line.slice(3)
+  const staged = status[0] !== ' ' && status[0] !== '?'
+  return { status, path, staged }
+}
+
+/** 差异文本：git diff（工作区）或 git diff --staged（暂存区）。 */
+export async function gitDiff(repoPath, staged) {
+  if (!(await isGitRepo(repoPath))) return { ok: false, error: { message: 'not a git repository' } }
+  const args = staged ? ['diff', '--staged'] : ['diff']
+  const result = await runGit(repoPath, args)
+  if (!result.ok) return result
+  return { ok: true, text: result.stdout }
+}
+
+/** 类型化提交：git add -A → git commit -m <消息>；返回 hash + 提交摘要。 */
+export async function gitCommit(repoPath, request) {
+  if (!(await isGitRepo(repoPath))) return { ok: false, error: { message: 'not a git repository' } }
+  const parsed = parseCommitRequest(request)
+  if (parsed === undefined) return { ok: false, error: { message: 'invalid commit request' } }
+  const message = formatCommitMessage(parsed)
+  const addResult = await runGit(repoPath, ['add', '-A'])
+  if (!addResult.ok) return addResult
+  const commitResult = await runGit(repoPath, ['commit', '-m', message])
+  if (!commitResult.ok) return commitResult
+  const hash = parseCommitHash(commitResult.stdout)
+  return { ok: true, hash, message, summary: commitSummary(commitResult.stdout) }
+}
+
+/** 从 commit 输出提取 hash（`[main abc1234] ...`）。 */
+function parseCommitHash(stdout) {
+  const match = /\[[^\]]+\s+([0-9a-f]{7,40})\]/.exec(stdout)
+  return match !== null ? match[1] : ''
+}
+
+/** 提交摘要：输出首行（`[main abc1234] message`）。 */
+function commitSummary(stdout) {
+  const first = stdout.split('\n')[0].trim()
+  return first.length > 120 ? `${first.slice(0, 120)}…` : first
+}

package/lib/index.js

@@ -0,0 +1,48 @@
+/**
+ * dsh-my-observability — host half.
+ *
+ * 可观测性 + Git 工程工具：
+ *  1. 事件审计：监听 agent/status、llm/stream、tools/* 事件，记录审计
+ *     日志（agent 行为可追溯），按会话隔离、重启后恢复（持久化
+ *     $DSH_HOME/observability/audit.json，防抖 + 原子写）；
+ *  2. 轨迹回放：/observability/api 查询接口供侧边栏时间轴面板消费；
+ *  3. 结构化 Git：类型化提交（Conventional Commits）+ 状态/差异查询；
+ *  4. 增量 diff 审查：提交前规则引擎审查 + 可选 AI agent 增强。
+ *
+ * 模块结构：
+ *  - fence.js    — Host-header 信任围栏（loopback / trustedHosts / 同源）
+ *  - store.js    — 审计事件存储（会话隔离 / 重启恢复 / 上限 / 原子持久化）
+ *  - audit.js    — 事件监听（agent/status、llm/stream、tools/pre-execute、tools/execute）
+ *  - git.js      — 结构化 Git 操作（类型化提交 / status / diff）
+ *  - diff.js     — unified diff 解析（纯函数）
+ *  - review.js   — 增量 diff 审查规则引擎（纯函数）
+ *  - ai.js       — 可选 AI 审查增强（agents.create，失败降级）
+ *  - routes.js   — /observability/api 路由
+ */
+import { createStore } from './store.js'
+import { attachAuditListeners } from './audit.js'
+import { registerObservabilityRoutes } from './routes.js'
+
+export const name = 'dsh-my-observability'
+
+export const inject = ['webServer']
+
+export function apply(ctx, config) {
+  // ── 配置（应用层 config 覆盖，默认全部开启）─────────────────────────
+  const options = {
+    aiReview: config?.aiReview !== false,
+    aiTimeoutMs: Number.isFinite(config?.aiTimeoutMs) && config.aiTimeoutMs > 0 ? config.aiTimeoutMs : 60000,
+  }
+
+  // ── 审计存储：会话隔离 + 持久化 + 重启恢复 ──────────────────────────
+  const store = createStore(ctx)
+
+  // ── 事件监听（只读观察；waterfall 一律透传 next()）──────────────────
+  attachAuditListeners(ctx, store.record)
+
+  // ── 路由（查询 / git 工具 / diff 审查）──────────────────────────────
+  registerObservabilityRoutes(ctx, store, options)
+
+  // ── 卸载冲刷：清防抖定时器 + 立即落盘 ───────────────────────────────
+  ctx.effect(() => store.dispose, 'dsh-my-observability: persistence teardown')
+}

package/lib/parts/git.js

@@ -0,0 +1,240 @@
+    // ── Git 工具 + 增量 diff 审查面板 ──────────────────────────────────
+    const REPO_KEY = 'dsh-my-observability:repo'
+    const COMMIT_TYPES = ['feat', 'fix', 'docs', 'style', 'refactor', 'test', 'chore']
+
+    function loadRepoKey() {
+      try {
+        const value = window.localStorage.getItem(REPO_KEY)
+        return typeof value === 'string' ? value : ''
+      } catch {
+        return ''
+      }
+    }
+
+    function saveRepoKey(repo) {
+      try {
+        window.localStorage.setItem(REPO_KEY, repo)
+      } catch {
+        // storage is best-effort
+      }
+    }
+
+    /** 状态条：分支 + 变更计数。 */
+    function StatusBar({ status }) {
+      if (status === null) return null
+      const parts = [`${strings.branch()} ${status.branch}`]
+      if (status.clean) parts.push(strings.clean())
+      else {
+        if (status.stagedCount > 0) parts.push(`${status.stagedCount} ${strings.staged()}`)
+        if (status.unstagedCount > 0) parts.push(`${status.unstagedCount} ${strings.unstaged()}`)
+      }
+      return createElement('div', { className: 'dso-status' }, parts.join(' · '))
+    }
+
+    /** 差异文本预览。 */
+    function DiffView({ diff }) {
+      return createElement('div', { className: 'dso-section' },
+        createElement('div', { className: 'dso-section-title' }, strings.diffTitle()),
+        createElement('pre', { className: 'dso-diff' }, diff !== '' ? diff : strings.emptyDiff()),
+      )
+    }
+
+    /** 严重级别 → 中文。 */
+    function severityText(severity) {
+      if (severity === 'error') return strings.severityError()
+      if (severity === 'warning') return strings.severityWarning()
+      return strings.severityInfo()
+    }
+
+    /** AI 结论文本（未启用/失败/成功三态，尽力而为）。 */
+    function aiTextOf(ai) {
+      if (ai === undefined || ai === null || !ai.enabled) return ''
+      if (ai.failed) return `${strings.aiFailed()}（${ai.note ?? ''}）`
+      return ai.verdict === 'approve' ? strings.aiVerdictApprove() : strings.aiVerdictChanges()
+    }
+
+    /** 审查报告：问题列表 + AI 结论。 */
+    function ReviewReport({ report }) {
+      if (report === null) return null
+      const issues = report.issues || []
+      const rows = issues.map((issue, index) => createElement('div', {
+        key: index,
+        className: `dso-issue dso-issue-${issue.severity}`,
+      },
+        createElement('span', { className: 'dso-issue-sev' }, severityText(issue.severity)),
+        createElement('span', { className: 'dso-issue-rule' },
+          `${issue.rule}${issue.file !== '' ? ` ${issue.file}:${issue.line}` : ''}`,
+        ),
+        createElement('span', { className: 'dso-issue-msg' }, issue.message),
+      ))
+      const aiText = aiTextOf(report.ai)
+      return createElement('div', { className: 'dso-section' },
+        createElement('div', { className: 'dso-section-title' }, strings.reviewResult()),
+        issues.length === 0 ? createElement('div', { className: 'dso-review-ok' }, strings.reviewPass()) : null,
+        rows,
+        aiText !== '' ? createElement('div', { className: 'dso-ai' }, aiText) : null,
+      )
+    }
+
+    /** 提交表单字段（type/scope/description/body + 提交按钮）。 */
+    function CommitFields({ form, update, busy, submit }) {
+      return createElement('div', { className: 'dso-form' },
+        createElement('select', { className: 'dso-select dso-type', value: form.type, onChange: update('type') },
+          COMMIT_TYPES.map((type) => createElement('option', { key: type, value: type }, type)),
+        ),
+        createElement('input', {
+          className: 'dso-input',
+          placeholder: strings.commitScope(),
+          value: form.scope,
+          onChange: update('scope'),
+        }),
+        createElement('input', {
+          className: 'dso-input',
+          placeholder: strings.commitDesc(),
+          value: form.description,
+          onChange: update('description'),
+        }),
+        createElement('textarea', {
+          className: 'dso-input dso-textarea',
+          placeholder: strings.commitBody(),
+          value: form.body,
+          onChange: update('body'),
+        }),
+        createElement('div', { className: 'dso-actions' },
+          createElement('button', {
+            className: 'dso-btn dso-btn-primary',
+            disabled: busy,
+            onClick: submit,
+          }, strings.commit()),
+        ),
+      )
+    }
+
+    /** 类型化提交表单：type/scope/description/body → POST /git/commit。 */
+    function CommitForm({ repo, onCommitted }) {
+      const [form, setForm] = useState({ type: 'feat', scope: '', description: '', body: '' })
+      const [busy, setBusy] = useState(false)
+      const [feedback, setFeedback] = useState('')
+      const update = (key) => (e) => setForm({ ...form, [key]: e.target.value })
+      const submit = async () => {
+        if (form.description.trim() === '') {
+          setFeedback(strings.commitError())
+          return
+        }
+        setBusy(true)
+        try {
+          const value = await apiJson('/observability/api/git/commit', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ repoPath: repo, ...form }),
+          })
+          setFeedback(`${strings.committed()}：${value.hash} ${value.message}`)
+          setForm({ ...form, scope: '', description: '', body: '' })
+          onCommitted()
+        } catch (err) {
+          setFeedback(`${strings.commitError()}：${err instanceof Error ? err.message : String(err)}`)
+        } finally {
+          setBusy(false)
+        }
+      }
+      return createElement('div', { className: 'dso-section' },
+        createElement('div', { className: 'dso-section-title' }, strings.commitTitle()),
+        createElement(CommitFields, { form, update, busy, submit }),
+        feedback !== '' ? createElement('div', { className: 'dso-feedback' }, feedback) : null,
+      )
+    }
+
+    /** 仓库路径行：输入 + 加载按钮。 */
+    function RepoRow({ repo, onRepoChange, onLoad }) {
+      return createElement('div', { className: 'dso-repo-row' },
+        createElement('input', {
+          className: 'dso-input dso-repo-input',
+          placeholder: strings.repoPlaceholder(),
+          value: repo,
+          onChange: (e) => onRepoChange(e.target.value),
+        }),
+        createElement('button', { className: 'dso-btn', onClick: onLoad }, strings.loadRepo()),
+      )
+    }
+
+    /** 操作按钮组：diff / staged diff / 审查。 */
+    function GitActions({ onDiff, onReview }) {
+      return createElement('div', { className: 'dso-actions' },
+        createElement('button', { className: 'dso-btn', onClick: () => onDiff(false) }, strings.showDiff()),
+        createElement('button', { className: 'dso-btn', onClick: () => onDiff(true) }, strings.showStagedDiff()),
+        createElement('button', { className: 'dso-btn dso-btn-primary', onClick: onReview }, strings.review()),
+      )
+    }
+
+    /** 拉取仓库状态（错误写入 setError）。 */
+    async function fetchStatus(path, setStatus, setError) {
+      if (path === '') return
+      try {
+        setStatus(await apiJson(`/observability/api/git/status?repo=${encodeURIComponent(path)}`))
+        setError('')
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    }
+
+    /** 拉取差异文本（staged 切换；错误写入 setError）。 */
+    async function fetchDiff(path, staged, setDiff, setError) {
+      if (path === '') return
+      try {
+        const value = await apiJson(`/observability/api/git/diff?repo=${encodeURIComponent(path)}&staged=${staged ? 1 : 0}`)
+        setDiff(value.text)
+        setError('')
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    }
+
+    /** 运行提交前审查（错误写入 setError）。 */
+    async function runReview(path, setReport, setError) {
+      if (path === '') return
+      try {
+        setReport(await apiJson('/observability/api/review', {
+          method: 'POST',
+          headers: { 'content-type': 'application/json' },
+          body: JSON.stringify({ repoPath: path }),
+        }))
+        setError('')
+      } catch (err) {
+        setError(err instanceof Error ? err.message : String(err))
+      }
+    }
+
+    /** Git 面板主组件：仓库状态 / diff / 审查 / 类型化提交。 */
+    function GitPanel() {
+      const [repo, setRepo] = useState(loadRepoKey)
+      const [status, setStatus] = useState(null)
+      const [diff, setDiff] = useState('')
+      const [report, setReport] = useState(null)
+      const [error, setError] = useState('')
+
+      const onCommitted = async () => {
+        setDiff('')
+        setReport(null)
+        await fetchStatus(repo, setStatus, setError)
+      }
+
+      return createElement('div', { className: 'dso-panel' },
+        createElement(RepoRow, {
+          repo,
+          onRepoChange: (value) => {
+            setRepo(value)
+            saveRepoKey(value)
+          },
+          onLoad: () => fetchStatus(repo, setStatus, setError),
+        }),
+        error !== '' ? createElement('div', { className: 'dso-empty' }, error) : null,
+        createElement(StatusBar, { status }),
+        createElement(GitActions, {
+          onDiff: (staged) => fetchDiff(repo, staged, setDiff, setError),
+          onReview: () => runReview(repo, setReport, setError),
+        }),
+        createElement(DiffView, { diff }),
+        createElement(ReviewReport, { report }),
+        createElement(CommitForm, { repo, onCommitted }),
+      )
+    }