dsh-git-ui 0.0.2 → 0.1.1

package/src/client/index.ts

@@ -1,150 +1,54 @@
 /**
- * Git status widget — client half entry.
+ * dsh-git-ui client 入口：Cordis 约定字段 + 委托。
  *
- * The bundle is a ModuleLoader closure: `factory(require)` returns the plugin
- * shape `{ name, inject, apply }`; the framework activates it once the listed
- * services exist.
- *
- * Service-access contract (verified against cordis 0.1.0-rc.x): the gitInfo
- * namespace service is provided by OUR OWN `ctx.remote.$mount(gitInfoRemote)`
- * inside apply, so the main fiber can never declare `remote.gitInfo` in its
- * `inject` — cordis would wait for the service before running apply, and the
- * service only appears once apply runs (deadlock). Conversely, accessing
- * `ctx.remote.gitInfo` without the inject declaration throws cordis's
- * "cannot get property ... without inject". The consumer therefore lives in a
- * CHILD fiber created after the mount: its inject declares `remote.gitInfo`,
- * and by the time it activates the service already exists — no wait, no
- * access violation. (In-repo plugins like ui-message-feedback can inject
- * their namespace directly because a separate assembly package mounts it; a
- * standalone plugin mounts its own.)
+ * 导出 Cordis 插件约定字段（`inject` / `name` / `apply`）；`apply` 内部
+ * 将 Cordis Context 适配为 `ClientPlatform` 接口后委托给纯业务函数。
+ * dsh 适配逻辑在 `adapters/dsh/client-adapter.ts`。
  */
-import type { TypertRemoteContribution } from '@deepseek-ai/dsh-typert-protocol'
-import { GitController, type GitView, type GitObservable, type GitRemoteLike } from './controller.ts'
+import { createElement, type ReactNode } from 'react'
+import { GitPill, type GitPillProps } from './GitPill.tsx'
+import { UIPrimitivesProvider } from '../contracts/ui-context.tsx'
+import { dshUIPrimitives } from '../adapters/dsh/ui-primitives.ts'
+import { adaptDshClientContext, type DshClientContext } from '../adapters/dsh/client-adapter.ts'
+import { activatePlugin, type PluginDependencies } from '../contracts/plugin-activation.ts'
+import { GitController } from './controller.ts'
 import { gitInfoRemote } from './remote.ts'
-import { GitPill, type GitInjected } from './GitPill.tsx'
 import { en, zh } from './locales.ts'
 
-/** Structural face of the browser plugin context (host-provided). */
-interface ClientContext {
-  get<T = unknown>(key: string): T | undefined
-  /** Subscribe to an application event (auto-cleaned on fiber dispose). */
-  on(event: string, listener: (...args: never[]) => void): (() => void) | void
-  /** Register a side effect with auto-cleanup on fiber dispose. */
-  effect(callback: () => void | (() => void | Promise<void>), label?: string): void
-  /** Register a nested cordis plugin (fiber) under this context. */
-  plugin(definition: {
-    readonly name: string
-    readonly inject: readonly string[]
-    apply: (ctx: ClientContext) => void | Promise<void>
-  }): Promise<unknown>
-  /** The typed Client Remote mount + mounted namespaces. */
-  remote: {
-    $mount(contribution: TypertRemoteContribution): Promise<() => Promise<void>>
-    gitInfo: GitRemoteLike
-  }
-  /** The slot registry (ui-slots). */
-  slots: {
-    inject(slotName: string, provider: () => (() => void) | void): void
-    register(
-      options: {
-        readonly name: string
-        readonly id: string
-        readonly order?: number
-        readonly locale?: string
-        readonly inject: (sessionId: string) => GitInjected
-      },
-      component: unknown,
-    ): () => void
-  }
-  /** The locale service (ui-locale). */
-  locale: {
-    register(namespace: string, dictionaries: { readonly zh: Record<string, string>; readonly en: Record<string, string> }): void
-  }
-  [key: string]: unknown
-}
-
 /**
- * Required services: slot registry, Remote base (gateway client), and copy.
+ * Cordis 插件约定：声明需要的服务。
  *
- * `remote.gitInfo` is deliberately NOT listed here — see the module comment:
- * the namespace is mounted by our own apply, so injecting it would deadlock.
- * The child fiber that consumes it declares it instead (after the mount).
+ * `remote.gitInfo` 不在此列出——它由我们自己的 apply 挂载，
+ * 若在 inject 中声明会导致死锁（服务在 apply 执行后才存在）。
  */
 export const inject = ['slots', 'remote', 'locale'] as const
 
-/** Plugin identity: the factory handoff returns this plus the exports above. */
+/** 插件标识。 */
 export const name = 'dsh-git-ui'
 
-/**
- * Plugin body: register copy, mount the gitInfo Remote, then host the header
- * utility in a child fiber that may legitimately access `remote.gitInfo`.
- */
-export async function apply(ctx: ClientContext): Promise<void> {
-  ctx.effect(() => ctx.locale.register('git', { zh, en }), 'dsh-git-ui: dictionaries')
-
-  // Mount first — the namespace service only exists after this resolves.
-  await ctx.remote.$mount(gitInfoRemote)
-
-  const controllers = new Map<string, GitController>()
-  const faces = new Map<string, GitInjected>()
+/** 插件入口使用的 UI 基础组件实现（dsh 宿主提供）。 */
+const uiPrimitives = dshUIPrimitives
 
-  // Consumer fiber: `remote.gitInfo` is declared in ITS inject list, so the
-  // access inside the controller factory is legal; the service is already
-  // provided by the mount above, so activation does not wait (no deadlock).
-  const child = ctx.plugin({
-    name: 'dsh-git-ui:git',
-    inject: ['slots', 'remote.gitInfo'],
-    apply: (sub) => {
-      const controllerFor = (sessionId: string): GitController => {
-        let controller = controllers.get(sessionId)
-        if (controller === undefined) {
-          controller = new GitController(sub.remote.gitInfo, sessionId)
-          controllers.set(sessionId, controller)
-        }
-        return controller
-      }
-
-      sub.slots.inject('conversation.session.header.utilities', () => {
-        const dispose = sub.slots.register({
-          name: 'conversation.session.header.utilities',
-          id: 'git',
-          order: 10,
-          locale: 'git',
-          inject: (sessionId): GitInjected => {
-            // Per-session stable face: the slot runtime may re-invoke the
-            // inject factory on every render, and components depend on the
-            // `refresh` reference staying stable (a fresh arrow function per
-            // call would re-run mount effects and loop: refresh → view
-            // change → re-render → new refresh → refresh …). Cache the face
-            // so the same controller (and its bound refresh/run) is always
-            // handed out per session.
-            let face = faces.get(sessionId)
-            if (face === undefined) {
-              const controller = controllerFor(sessionId)
-              face = {
-                hooks: { git: controller as GitInjected['hooks']['git'] },
-                refresh: () => controller.refresh(),
-                run: (action) => controller.run(action),
-              }
-              faces.set(sessionId, face)
-            }
-            return face
-          },
-        }, GitPill)
-        return () => {
-          dispose()
-          for (const controller of controllers.values()) controller.dispose()
-          controllers.clear()
-          faces.clear()
-        }
-      })
-    },
-  })
-  await child
+/** 包裹 GitPill，注入 UI 基础组件上下文。 */
+function GitPillWithUI(props: GitPillProps): ReactNode {
+  return createElement(UIPrimitivesProvider, { value: uiPrimitives }, createElement(GitPill, props))
+}
 
-  // A reconnect can only invalidate what was already read; a cold Session
-  // stays cold until something asks for it.
-  ctx.on('connection/reset', () => {
-    for (const controller of controllers.values()) controller.resync()
-  })
+/**
+ * Cordis 插件入口：适配 Context 后委托给纯业务函数。
+ *
+ * dsh 升级导致插件 API 变更时，只需更新 `adapters/dsh/client-adapter.ts`
+ * 中的 `DshClientContext` 接口和 `adaptDshClientContext` 实现。
+ */
+export async function apply(ctx: DshClientContext): Promise<void> {
+  const platform = adaptDshClientContext(ctx)
+  
+  // 提供插件依赖
+  const deps: PluginDependencies = {
+    remoteContribution: gitInfoRemote,
+    locales: { zh, en },
+    createController: (remote, sessionId) => new GitController(remote, sessionId),
+  }
+  
+  await activatePlugin(platform, deps, GitPillWithUI)
 }

package/src/client/locales.ts

@@ -21,6 +21,8 @@ export const zh = {
   'popup.empty': '工作区干净',
   'popup.emptyCommits': '暂无提交',
   'center.open': '打开 Git 中心',
+  'error.localChangesBlock': '无法切换分支：工作区有未提交的变更会被目标分支覆盖。请先提交或暂存（stash）这些变更，然后再切换。',
+  'error.handleChanges': '处理变更',
   'center.title': 'Git 中心',
   'center.staged': '已暂存',
   'center.unstaged': '未暂存',
@@ -37,12 +39,72 @@ export const zh = {
   'center.commitHint': '勾选文件时仅提交所选；未勾选时提交全部已暂存内容',
   'center.commitSelected': '已选 {count} 个文件',
   'center.empty': '工作区干净，无需操作',
+  'center.untrackedFiles': '未进行版本管理的文件',
+  'center.selectFileDiff': '选择文件以对照查看更改',
   'center.done': '操作成功',
   'center.busy': '执行中…',
+  'center.changes': '变更',
+  'center.history': '历史',
+  'center.branches': '分支',
+  'center.noCommits': '暂无提交',
+  'history.commit': '提交',
+  'history.hash': '哈希',
+  'history.author': '作者',
+  'history.time': '时间',
+  'history.allBranches': '全部分支',
+  'history.tags': '标签',
+  'history.search': '搜索文本或哈希',
+  'history.branch': '分支',
+  'history.allUsers': '全部用户',
+  'history.allTime': '全部时间',
+  'history.today': '今天',
+  'history.last7d': '近 7 天',
+  'history.last30d': '近 30 天',
+  'history.last90d': '近 90 天',
+  'right.selectCommit': '选择要查看更改的提交',
+  'right.commitDetails': '提交详细信息',
+  'right.files': '文件变更',
+  'right.expandAll': '全部展开',
+  'right.collapseAll': '全部收起',
+  'history.searchTree': '分支或标签',
+  'center.close': '关闭',
+  'center.selectCommit': '选择一条提交以查看详情与差异',
+  'center.loading': '加载…',
+  'center.commitFull': '提交信息',
+  'center.diffEmpty': '无文件变更',
+  'center.createBranch': '新建分支',
+  'center.branchName': '分支名',
+  'center.branchFrom': '基于',
+  'center.createAndSwitch': '创建并切换',
+  'center.switchTo': '切换',
+  'center.localBranches': '本地分支',
+  'center.remoteBranches': '远程分支',
+  'center.currentBranch': '当前分支',
   'time.justNow': '刚刚',
   'time.minutesAgo': '{n} 分钟前',
   'time.hoursAgo': '{n} 小时前',
   'time.daysAgo': '{n} 天前',
+  'time.today': '今天',
+  'time.yesterday': '昨天',
+  'changes.groupStaged': '已暂存更改',
+  'changes.groupUnstaged': '更改',
+  'changes.groupUnversioned': '未版本控制的文件',
+  'changes.actionDiff': '对照查看',
+  'changes.dir': '目录（不可对照查看）',
+  'changes.selectAll': '全选',
+  'diff.baseStaged': '暂存区',
+  'diff.baseWorktree': '工作区',
+  'diff.prev': '上一个更改',
+  'diff.next': '下一个更改',
+  'diff.truncated': '差异过大，仅显示前 {count} 行',
+  'diff.foldCollapsed': '… {n} 行未变更',
+  'diff.binary': '二进制文件，无法显示差异',
+  'changes.listTruncated': '仅显示前 {count} 个，共 {total} 个变更',
+  'right.noMessage': '无提交信息',
+  'history.noResults': '未找到匹配的提交',
+  'center.fetch': '拉取远程',
+  'center.fetching': '拉取中…',
+  'center.fetchDone': '已同步远程',
 } satisfies Record<string, string>
 
 export type GitKey = keyof typeof zh
@@ -68,6 +130,8 @@ export const en: Record<GitKey, string> = {
   'popup.empty': 'Working tree clean',
   'popup.emptyCommits': 'No commits yet',
   'center.open': 'Open Git center',
+  'error.localChangesBlock': 'Cannot switch branches: uncommitted local changes would be overwritten. Commit or stash them first.',
+  'error.handleChanges': 'Review changes',
   'center.title': 'Git center',
   'center.staged': 'staged',
   'center.unstaged': 'unstaged',
@@ -84,10 +148,70 @@ export const en: Record<GitKey, string> = {
   'center.commitHint': 'Selected files are committed; otherwise everything staged is committed',
   'center.commitSelected': '{count} file(s) selected',
   'center.empty': 'Working tree clean — nothing to do',
+  'center.untrackedFiles': 'Unversioned files',
+  'center.selectFileDiff': 'Select a file to compare changes',
   'center.done': 'Done',
   'center.busy': 'Working…',
+  'center.changes': 'Changes',
+  'center.history': 'History',
+  'center.branches': 'Branches',
+  'center.noCommits': 'No commits yet',
+  'history.commit': 'Commit',
+  'history.hash': 'Hash',
+  'history.author': 'Author',
+  'history.time': 'Time',
+  'history.allBranches': 'All branches',
+  'history.tags': 'Tags',
+  'history.search': 'Text or hash',
+  'history.branch': 'Branch',
+  'history.allUsers': 'All users',
+  'history.allTime': 'All time',
+  'history.today': 'Today',
+  'history.last7d': 'Last 7 days',
+  'history.last30d': 'Last 30 days',
+  'history.last90d': 'Last 90 days',
+  'right.selectCommit': 'Select a commit to view its changes',
+  'right.commitDetails': 'Commit details',
+  'right.files': 'Changed files',
+  'right.expandAll': 'Expand all',
+  'right.collapseAll': 'Collapse all',
+  'history.searchTree': 'Branch or tag',
+  'center.close': 'Close',
+  'center.selectCommit': 'Select a commit to view details and diffs',
+  'center.loading': 'Loading…',
+  'center.commitFull': 'Commit details',
+  'center.diffEmpty': 'No file changes',
+  'center.createBranch': 'New branch',
+  'center.branchName': 'Branch name',
+  'center.branchFrom': 'From',
+  'center.createAndSwitch': 'Create & switch',
+  'center.switchTo': 'Switch',
+  'center.localBranches': 'Local branches',
+  'center.remoteBranches': 'Remote branches',
+  'center.currentBranch': 'Current branch',
   'time.justNow': 'just now',
   'time.minutesAgo': '{n}m ago',
   'time.hoursAgo': '{n}h ago',
   'time.daysAgo': '{n}d ago',
+  'time.today': 'Today',
+  'time.yesterday': 'Yesterday',
+  'changes.groupStaged': 'Staged Changes',
+  'changes.groupUnstaged': 'Changes',
+  'changes.groupUnversioned': 'Unversioned Files',
+  'changes.actionDiff': 'Show diff',
+  'changes.dir': 'Directory (no diff)',
+  'changes.selectAll': 'Select all',
+  'diff.baseStaged': 'Staged',
+  'diff.baseWorktree': 'Worktree',
+  'diff.prev': 'Previous change',
+  'diff.next': 'Next change',
+  'diff.truncated': 'Diff too large, showing first {count} lines',
+  'diff.foldCollapsed': '… {n} unchanged lines',
+  'diff.binary': 'Binary file — diff unavailable',
+  'changes.listTruncated': 'Showing first {count} of {total} changes',
+  'right.noMessage': 'No commit message',
+  'history.noResults': 'No matching commits found',
+  'center.fetch': 'Fetch remote',
+  'center.fetching': 'Fetching…',
+  'center.fetchDone': 'Remote synced',
 }

package/src/client/popup-close.ts

@@ -0,0 +1,19 @@
+/**
+ * popup 外部点击关闭判定（纯函数，不依赖 React——测试环境无宿主提供的 react）。
+ *
+ * 回归：popup 头部 SelectMenu 下拉 portaled 到 body（class `dsh-git-ui__select-menu`），
+ * 点击其选项时 mousedown target 不在 popup 卡片内——旧实现误判为「点击外部」，
+ * popup 在分支切换未及完成时关闭（分支看起来「没切换 + pill 自动关闭」）。
+ */
+
+/**
+ * 外部 mousedown 是否应关闭 popup。命中 wrapper / popup 卡片、或其内部
+ * portaled 浮层（`dsh-git-ui__select-menu`）视为内部交互，不关闭；其余外部点击关闭。
+ */
+export function shouldClosePopup(target: EventTarget | null, wrap: Node | null, pop: Node | null): boolean {
+  if (target === null || !(target instanceof Node)) return true
+  if (wrap !== null && wrap.contains(target)) return false
+  if (pop !== null && pop.contains(target)) return false
+  if (target instanceof Element && target.closest('.dsh-git-ui__select-menu') !== null) return false
+  return true
+}

package/src/client/remote.ts

@@ -8,7 +8,7 @@
  * sync by parsing host-typed samples through these schemas.
  */
 import { z } from 'zod'
-import type { TypertRemoteContribution } from '@deepseek-ai/dsh-typert-protocol'
+import type { RemoteContribution } from '../contracts/client-platform.ts'
 
 export const gitCommitSchema = z.object({
   hash: z.string(),
@@ -18,10 +18,28 @@ export const gitCommitSchema = z.object({
   dateIso: z.string(),
 })
 
+/** GraphCommit：带父提交哈希与 ref 装饰的提交（图渲染 + 分支胶囊）。 */
+export const gitGraphCommitSchema = z.object({
+  hash: z.string(),
+  shortHash: z.string(),
+  subject: z.string(),
+  author: z.string(),
+  dateIso: z.string(),
+  parents: z.array(z.string()),
+  refs: z.array(z.object({
+    kind: z.enum(['branch', 'remote', 'tag']),
+    name: z.string(),
+    head: z.boolean(),
+  })),
+})
+
 export const gitChangeSchema = z.object({
   path: z.string(),
   status: z.enum(['added', 'modified', 'deleted', 'renamed', 'untracked', 'conflicted', 'typechange']),
   staged: z.boolean(),
+  // host 权威目录标记：zod z.object 默认 strip 未知键，漏声明会在 wire 边界
+  // 剥掉该字段——展示层目录识别（GitChange.isDirectory）将整体失效。
+  isDirectory: z.boolean(),
 })
 
 export const gitSnapshotSchema = z.object({
@@ -74,12 +92,19 @@ export const gitActionSchema = z.discriminatedUnion('kind', [
     message: z.string(),
     paths: z.array(z.string()).optional(),
   }),
+  z.object({ kind: z.literal('branch-create'), name: z.string(), from: z.string().optional() }),
+  z.object({ kind: z.literal('branch-checkout'), name: z.string() }),
+  z.object({ kind: z.literal('branch-delete'), name: z.string(), force: z.boolean().optional() }),
+  z.object({ kind: z.literal('fetch') }),
 ])
 
 export const gitOperationErrorSchema = z.object({
+  // 与 host GitOperationErrorCode 保持一致：zod z.enum 手工镜像枚举，缺一项
+  // 会在 strict 解码时 reject，把可预期业务错误改写为晦涩的 git-error。
   code: z.enum([
     'session-not-found', 'cwd-unavailable', 'path-not-found',
-    'not-a-git-repo', 'invalid-path', 'git-error', 'timeout',
+    'not-a-git-repo', 'invalid-path', 'invalid-name', 'git-error', 'timeout',
+    'local-changes-block',
   ]),
   message: z.string().optional(),
 })
@@ -94,8 +119,40 @@ export const gitActionRequestSchema = z.object({
   action: gitActionSchema,
 })
 
+/** 一条只读查询（镜像 src/host/types.ts 的 GitQuery）。 */
+export const gitQuerySchema = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('history'), limit: z.number(), skip: z.number(), ref: z.string().optional(), search: z.string().optional(), author: z.string().optional(), since: z.string().optional() }),
+  z.object({ kind: z.literal('diff'), path: z.string(), base: z.enum(['worktree', 'staged']) }),
+  z.object({ kind: z.literal('show'), ref: z.string() }),
+  z.object({ kind: z.literal('branches') }),
+  z.object({ kind: z.literal('tags') }),
+  z.object({ kind: z.literal('authors') }),
+])
+
+const gitFileStatSchema = z.object({ path: z.string(), status: z.enum(['added', 'modified', 'deleted', 'renamed', 'untracked', 'conflicted', 'typechange']) })
+const gitBranchSchema = z.object({ name: z.string(), shortHash: z.string().nullable(), ahead: z.number().optional(), behind: z.number().optional() })
+
+export const gitQueryResultSchema = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('history'), commits: z.array(gitGraphCommitSchema), total: z.number() }),
+  z.object({ kind: z.literal('diff'), path: z.string(), text: z.string() }),
+  z.object({ kind: z.literal('show'), ref: z.string(), commit: gitCommitSchema.nullable(), body: z.string(), stats: z.array(gitFileStatSchema) }),
+  z.object({ kind: z.literal('branches'), current: z.string().nullable(), defaultBranch: z.string().nullable(), local: z.array(gitBranchSchema), remote: z.array(gitBranchSchema) }),
+  z.object({ kind: z.literal('tags'), tags: z.array(gitBranchSchema) }),
+  z.object({ kind: z.literal('authors'), authors: z.array(z.string()) }),
+])
+
+export const gitQueryResponseSchema = z.discriminatedUnion('ok', [
+  z.object({ ok: z.literal(true), value: gitQueryResultSchema }),
+  z.object({ ok: z.literal(false), error: gitOperationErrorSchema }),
+])
+
+export const gitQueryRequestSchema = z.object({
+  sessionId: z.string(),
+  query: gitQuerySchema,
+})
+
 /** The contribution mounted into `ctx.remote` by the client plugin body. */
-export const gitInfoRemote: TypertRemoteContribution = {
+export const gitInfoRemote: RemoteContribution = {
   package: 'dsh-git-ui',
   descriptors: [
     {
@@ -151,5 +208,30 @@ export const gitInfoRemote: TypertRemoteContribution = {
         schema: gitActionResultSchema,
       },
     },
+    {
+      id: 'dsh-git-ui#gitInfo/query',
+      service: 'gitInfo',
+      namespace: 'gitInfo',
+      method: 'query',
+      invocation: { kind: 'direct' },
+      cancellation: { parameter: 'signal' },
+      parameters: [
+        {
+          name: 'request',
+          wire: 'request',
+          source: 'json',
+          codec: {
+            mode: 'strict',
+            typeSymbol: 'dsh-git-ui/types#GitQueryRequest',
+            schema: gitQueryRequestSchema,
+          },
+        },
+      ],
+      result: {
+        mode: 'strict',
+        typeSymbol: 'dsh-git-ui/types#GitQueryResponse',
+        schema: gitQueryResponseSchema,
+      },
+    },
   ],
 }

package/src/client/select-menu.tsx

@@ -0,0 +1,113 @@
+/**
+ * 自绘下拉选择器（平台 Menu 规范）：取代原生 select，明暗主题与系统样式统一。
+ * 从 GitCenter.tsx 提取为共享组件，供 GitPill 分支管理复用。
+ */
+import { useEffect, useLayoutEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
+import type { CSSProperties, JSX } from 'react'
+import * as css from './styles.ts'
+
+export interface SelectMenuProps {
+  value: string
+  options: readonly { value: string; label: string }[]
+  onSelect: (value: string) => void
+  ariaLabel: string
+  /** 按钮自定义样式（默认 toolbarSelect；头部内联用时传无框变体）。 */
+  buttonStyle?: CSSProperties
+}
+
+export function SelectMenu({
+  value, options, onSelect, ariaLabel, buttonStyle,
+}: SelectMenuProps): JSX.Element {
+  const [open, setOpen] = useState(false)
+  const [pos, setPos] = useState<{ top: number; left: number; width: number } | null>(null)
+  const btnRef = useRef<HTMLButtonElement>(null)
+  const menuRef = useRef<HTMLDivElement>(null)
+  const current = options.find((o) => o.value === value)
+
+  useLayoutEffect(() => {
+    if (!open) {
+      setPos(null)
+      return
+    }
+    const place = (): void => {
+      const r = btnRef.current?.getBoundingClientRect()
+      if (r) setPos({ top: r.bottom + 4, left: r.left, width: Math.max(r.width, 140) })
+    }
+    place()
+    window.addEventListener('resize', place)
+    return () => window.removeEventListener('resize', place)
+  }, [open])
+
+  useEffect(() => {
+    if (!open) return
+    const onDown = (e: MouseEvent): void => {
+      const target = e.target as Node
+      if (btnRef.current?.contains(target) ?? false) return
+      if (menuRef.current?.contains(target) ?? false) return
+      setOpen(false)
+    }
+    const onKey = (e: KeyboardEvent): void => { if (e.key === 'Escape') setOpen(false) }
+    document.addEventListener('mousedown', onDown)
+    document.addEventListener('keydown', onKey)
+    return () => {
+      document.removeEventListener('mousedown', onDown)
+      document.removeEventListener('keydown', onKey)
+    }
+  }, [open])
+
+  return (
+    <>
+      <button
+        ref={btnRef}
+        type="button"
+        className="dsh-git-ui__toolbar-select"
+        style={buttonStyle ?? css.toolbarSelect}
+        aria-label={ariaLabel}
+        aria-haspopup="listbox"
+        aria-expanded={open}
+        onClick={() => setOpen(!open)}
+      >
+        <span style={css.selectLabel}>{current?.label ?? ''}</span>
+        <span
+          aria-hidden="true"
+          style={{
+            display: 'inline-flex',
+            flex: 'none',
+            transition: 'transform var(--ds-transition-duration-fast) var(--ds-ease-in-out)',
+            transform: open ? 'rotate(180deg)' : 'none',
+          }}
+        >
+          <svg width={10} height={10} viewBox="0 0 10 10">
+            <path d="M1.5 3 L5 7 L8.5 3" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round" />
+          </svg>
+        </span>
+      </button>
+      {open && pos !== null && createPortal(
+        <div
+          ref={menuRef}
+          role="listbox"
+          aria-label={ariaLabel}
+          className="dsh-git-ui__select-menu"
+          style={{ ...css.selectMenu, top: pos.top, left: pos.left, minWidth: pos.width }}
+        >
+          {options.map((o) => (
+            <button
+              key={o.value}
+              type="button"
+              role="option"
+              aria-selected={o.value === value}
+              style={o.value === value ? { ...css.selectOption, ...css.selectOptionActive } : css.selectOption}
+              className="dsh-git-ui__row"
+              onClick={() => { onSelect(o.value); setOpen(false) }}
+            >
+              <span style={{ ...css.treeCaret, visibility: o.value === value ? 'visible' : 'hidden' }} aria-hidden="true">✓</span>
+              <span style={css.selectLabel}>{o.label}</span>
+            </button>
+          ))}
+        </div>,
+        document.body,
+      )}
+    </>
+  )
+}