@civilization/dsh-git-workbench 0.0.0-stage → 0.4.1

package/src/client/GitBranchPill.module.css

@@ -0,0 +1,292 @@
+/* Status bar Git branch pill and popover branch switcher (unified DSH design) */
+
+.anchor {
+  position: relative;
+  display: inline-flex;
+  min-width: 0;
+  font-size: calc(var(--dsh-content-font-size-secondary, 13px) - 1px);
+  line-height: calc(20px + var(--dsh-content-font-delta-secondary, 0px));
+}
+
+.pill {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  box-sizing: border-box;
+  max-width: 100%;
+  padding: 1px 8px;
+  border: none;
+  border-radius: var(--dsw-radius-sm);
+  background: transparent;
+  color: var(--dsw-alias-label-tertiary);
+  font: inherit;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  line-height: inherit;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.pill:hover,
+.pill[aria-expanded='true'] {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.icon {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.pill:hover .icon,
+.pill[aria-expanded='true'] .icon {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.branchName {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 0 4px;
+  border-radius: var(--dsw-radius-xs, 3px);
+  font-size: 11px;
+  line-height: 14px;
+  font-weight: 500;
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+}
+
+.badgeAhead {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.badgeBehind {
+  color: var(--dsw-alias-state-warn-primary);
+}
+
+/* Branch switch popover panel (wrapped in MenuSurface) */
+.popover {
+  position: fixed;
+  z-index: 1100;
+  width: 310px;
+  max-height: 440px;
+  display: flex;
+  flex-direction: column;
+  box-sizing: border-box;
+  border: 0;
+  border-radius: var(--dsw-radius-lg);
+  --dsw-elevation-stroke-color: var(--dsw-alias-border-l1);
+  box-shadow: var(--dsw-elevation-prominent);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  line-height: 18px;
+  overflow: hidden;
+  cursor: default;
+  animation: popoverFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes popoverFadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(4px) scale(0.98);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
+.header {
+  padding: 8px 10px 6px;
+  border-bottom: 0.5px solid var(--dsw-alias-border-l2);
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.searchRow {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-alias-interactive-bg-hover);
+  border: 0.5px solid var(--dsw-alias-border-l2);
+}
+
+.searchIcon {
+  width: 13px;
+  height: 13px;
+  color: var(--dsw-alias-label-tertiary);
+  flex: none;
+}
+
+.searchInput {
+  flex: 1;
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  outline: none;
+}
+
+.searchInput::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.actionBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.toolBtnGroup {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.toolBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px;
+  border: 0.5px solid var(--dsw-alias-border-l2);
+  border-radius: var(--dsw-radius-sm);
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-secondary);
+  font-size: 11px;
+  font-family: inherit;
+  font-weight: 500;
+  cursor: pointer;
+  transition: background 0.15s ease, color 0.15s ease;
+}
+
+.toolBtn:hover {
+  background: var(--dsw-alias-interactive-bg-active);
+  color: var(--dsw-alias-label-primary);
+}
+
+.btnIcon {
+  width: 12px;
+  height: 12px;
+  flex: none;
+}
+
+.newBranchBox {
+  display: flex;
+  gap: 6px;
+  margin-top: 2px;
+}
+
+.newBranchInput {
+  flex: 1;
+  padding: 4px 8px;
+  border-radius: var(--dsw-radius-sm);
+  border: 0.5px solid var(--dsw-alias-state-business-primary);
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+  font-size: 12px;
+  outline: none;
+}
+
+.newBranchInput::placeholder {
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.branchList {
+  flex: 1;
+  overflow-y: auto;
+  padding: 4px;
+}
+
+.groupLabel {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 8px 3px;
+  font-size: 11px;
+  font-weight: 500;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.branchItem {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 5px 8px;
+  border-radius: var(--dsw-radius-sm);
+  border: none;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  font: inherit;
+  font-size: 12px;
+  text-align: left;
+  cursor: pointer;
+  transition: background 0.12s ease, color 0.12s ease;
+}
+
+.branchItem:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+.currentBranch {
+  background: var(--dsw-alias-interactive-bg-active);
+  color: var(--dsw-alias-state-business-primary);
+  font-weight: 500;
+}
+
+.currentBranch:hover {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.branchItemLeft {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+  flex: 1;
+}
+
+.itemIcon {
+  width: 13px;
+  height: 13px;
+  flex: none;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.currentBranch .itemIcon {
+  color: var(--dsw-alias-state-business-primary);
+}
+
+.itemText {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.checkMark {
+  width: 14px;
+  height: 14px;
+  color: var(--dsw-alias-state-business-primary);
+  flex: none;
+}
+
+.emptyTip {
+  padding: 16px 8px;
+  text-align: center;
+  color: var(--dsw-alias-label-tertiary);
+  font-size: 12px;
+}

package/src/client/GitBranchPill.tsx

@@ -0,0 +1,368 @@
+/**
+ * Status bar Git branch pill and popover branch switcher (IDEA / VS Code style).
+ * Injected into the 'conversation.composer.dock' slot at order: -1.
+ */
+
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import type { KeyboardEvent, MouseEvent } from 'react'
+import { createPortal } from 'react-dom'
+import type { GitBranchesSummary, GitStatusSummary } from '../types.ts'
+import css from './GitBranchPill.module.css'
+
+const MenuSurface = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ children, className, style, ...rest }, ref) => (
+    <div ref={ref} className={className} style={style} role="dialog" {...rest}>
+      {children}
+    </div>
+  ),
+)
+MenuSurface.displayName = 'MenuSurface'
+
+function IconBranchOutlineRegular({ className }: { className?: string }): React.ReactElement {
+  return (
+    <svg className={className} width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+      <path d="M11.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zm-2.25.75a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.492 2.492 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25zM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zM3.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0z" />
+    </svg>
+  )
+}
+
+function IconCheckOutlineRegular({ className }: { className?: string }): React.ReactElement {
+  return (
+    <svg className={className} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+      <polyline points="3 8 7 12 13 4" />
+    </svg>
+  )
+}
+
+function IconPlusOutlineRegular({ className }: { className?: string }): React.ReactElement {
+  return (
+    <svg className={className} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round">
+      <line x1="8" y1="3" x2="8" y2="13" />
+      <line x1="3" y1="8" x2="13" y2="8" />
+    </svg>
+  )
+}
+
+function IconRefreshOutlineRegular({ className }: { className?: string }): React.ReactElement {
+  return (
+    <svg className={className} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round">
+      <path d="M2.5 8a5.5 5.5 0 1 0 1.6-3.9L2 6" />
+      <path d="M2 2v4h4" />
+    </svg>
+  )
+}
+
+function IconSearchOutlineRegular({ className }: { className?: string }): React.ReactElement {
+  return (
+    <svg className={className} width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round">
+      <circle cx="7" cy="7" r="4.5" />
+      <line x1="10.5" y1="10.5" x2="14" y2="14" />
+    </svg>
+  )
+}
+
+
+export interface GitBranchPillProps {
+  getStatus?: ((sessionId?: string) => Promise<GitStatusSummary>) | undefined
+  getBranches?: ((sessionId?: string) => Promise<GitBranchesSummary>) | undefined
+  checkout?: (
+    (sessionId: string | undefined, branch: string, create?: boolean) => Promise<{ success: boolean; message?: string }>
+  ) | undefined
+  pull?: ((sessionId?: string) => Promise<{ success: boolean; message?: string }>) | undefined
+  push?: ((sessionId?: string) => Promise<{ success: boolean; message?: string }>) | undefined
+  sessionId?: string | undefined
+}
+
+/**
+ * Git Branch Pill rendered in the Composer Dock.
+ */
+export const GitBranchPill = memo(function GitBranchPill({
+  getStatus,
+  getBranches,
+  checkout,
+  pull,
+  push,
+  sessionId,
+}: GitBranchPillProps) {
+  const [status, setStatus] = useState<GitStatusSummary | null>(null)
+  const [branches, setBranches] = useState<GitBranchesSummary | null>(null)
+  const [open, setOpen] = useState(false)
+  const [filter, setFilter] = useState('')
+  const [creatingBranch, setCreatingBranch] = useState(false)
+  const [newBranchName, setNewBranchName] = useState('')
+  const [switching, setSwitching] = useState(false)
+
+  const anchorRef = useRef<HTMLSpanElement>(null)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const [popoverPos, setPopoverPos] = useState<{ bottom: number; left: number } | null>(null)
+
+  // Fetch status and branches from injected actions
+  const refresh = useCallback(async () => {
+    if (!getStatus || !getBranches) return
+
+    try {
+      const [statusRes, branchRes] = await Promise.all([
+        getStatus(sessionId),
+        getBranches(sessionId),
+      ])
+      setStatus(statusRes)
+      setBranches(branchRes)
+    } catch {
+      // safe fallback on communication errors
+    }
+  }, [getStatus, getBranches, sessionId])
+
+  useEffect(() => {
+    void refresh()
+    const timer = setInterval(() => { void refresh() }, 5000)
+    return () => { clearInterval(timer) }
+  }, [refresh])
+
+  // Recalculate popover position relative to anchor button
+  const updatePosition = useCallback(() => {
+    if (!anchorRef.current) return
+    const rect = anchorRef.current.getBoundingClientRect()
+    setPopoverPos({
+      bottom: window.innerHeight - rect.top + 6,
+      left: Math.max(8, Math.min(rect.left, window.innerWidth - 330)),
+    })
+  }, [])
+
+  const handleToggle = useCallback((e: MouseEvent) => {
+    e.stopPropagation()
+    if (!open) {
+      updatePosition()
+      void refresh()
+    }
+    setOpen(prev => !prev)
+    setCreatingBranch(false)
+    setFilter('')
+  }, [open, refresh, updatePosition])
+
+  // Dismiss popover on outside click or escape
+  useEffect(() => {
+    if (!open) return
+    const onPointerDown = (e: PointerEvent) => {
+      const target = e.target as Node | null
+      if (popoverRef.current?.contains(target) || anchorRef.current?.contains(target)) return
+      setOpen(false)
+    }
+    const onKeyDown = (e: globalThis.KeyboardEvent) => {
+      if (e.key === 'Escape') setOpen(false)
+    }
+
+    document.addEventListener('pointerdown', onPointerDown)
+    document.addEventListener('keydown', onKeyDown)
+    return () => {
+      document.removeEventListener('pointerdown', onPointerDown)
+      document.removeEventListener('keydown', onKeyDown)
+    }
+  }, [open])
+
+  // Checkout branch
+  const handleCheckout = useCallback(async (branchName: string, create = false) => {
+    if (!checkout || switching) return
+
+    setSwitching(true)
+    try {
+      const res = await checkout(sessionId, branchName, create)
+      if (res.success) {
+        setOpen(false)
+        setCreatingBranch(false)
+        setNewBranchName('')
+        await refresh()
+      } else {
+        alert(res.message ?? 'Checkout failed')
+      }
+    } finally {
+      setSwitching(false)
+    }
+  }, [checkout, refresh, sessionId, switching])
+
+  // Create new branch
+  const handleCreateBranchKeyDown = useCallback((e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      const trimmed = newBranchName.trim()
+      if (trimmed) void handleCheckout(trimmed, true)
+    } else if (e.key === 'Escape') {
+      setCreatingBranch(false)
+    }
+  }, [handleCheckout, newBranchName])
+
+  // Pull
+  const handlePull = useCallback(async () => {
+    if (!pull) return
+    await pull(sessionId)
+    await refresh()
+  }, [pull, refresh, sessionId])
+
+  // Push
+  const handlePush = useCallback(async () => {
+    if (!push) return
+    await push(sessionId)
+    await refresh()
+  }, [push, refresh, sessionId])
+
+  // Filtered branches
+  const filteredLocal = useMemo(() => {
+    if (!branches?.local) return []
+    const q = filter.trim().toLowerCase()
+    return q ? branches.local.filter(b => b.name.toLowerCase().includes(q)) : branches.local
+  }, [branches?.local, filter])
+
+  const filteredRemote = useMemo(() => {
+    if (!branches?.remote) return []
+    const q = filter.trim().toLowerCase()
+    return q ? branches.remote.filter(b => b.name.toLowerCase().includes(q)) : branches.remote
+  }, [branches?.remote, filter])
+
+  if (status && !status.isRepo) {
+    return null
+  }
+
+  const currentBranchName = status?.branch || 'master'
+
+  return (
+    <span ref={anchorRef} className={css.anchor} data-composer-stat="git-branch">
+      <button
+        type="button"
+        className={css.pill}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        title={`Git Branch: ${currentBranchName}`}
+        onClick={handleToggle}
+      >
+        <IconBranchOutlineRegular className={css.icon} />
+        <span className={css.branchName}>{currentBranchName}</span>
+        {status !== null && status.ahead > 0 && <span className={`${css.badge} ${css.badgeAhead}`}>↑{status.ahead}</span>}
+        {status !== null && status.behind > 0 && <span className={`${css.badge} ${css.badgeBehind}`}>↓{status.behind}</span>}
+      </button>
+
+      {open && popoverPos && createPortal(
+        <MenuSurface
+          ref={popoverRef}
+          className={css.popover}
+          style={{ bottom: `${popoverPos.bottom}px`, left: `${popoverPos.left}px` }}
+        >
+          <div className={css.header}>
+            <div className={css.searchRow}>
+              <IconSearchOutlineRegular className={css.searchIcon} />
+              <input
+                autoFocus
+                className={css.searchInput}
+                placeholder="搜索或过滤分支..."
+                value={filter}
+                onChange={(e) => { setFilter(e.target.value) }}
+              />
+            </div>
+
+            <div className={css.actionBar}>
+              <button
+                type="button"
+                className={css.toolBtn}
+                title="新建分支"
+                onClick={() => { setCreatingBranch(prev => !prev) }}
+              >
+                <IconPlusOutlineRegular className={css.btnIcon} />
+                <span>新建分支</span>
+              </button>
+              <div className={css.toolBtnGroup}>
+                <button
+                  type="button"
+                  className={css.toolBtn}
+                  title="拉取 (Pull)"
+                  onClick={() => { void handlePull() }}
+                >
+                  Pull
+                </button>
+                <button
+                  type="button"
+                  className={css.toolBtn}
+                  title="推送 (Push)"
+                  onClick={() => { void handlePush() }}
+                >
+                  Push
+                </button>
+                <button
+                  type="button"
+                  className={css.toolBtn}
+                  title="刷新状态"
+                  onClick={() => { void refresh() }}
+                >
+                  <IconRefreshOutlineRegular className={css.btnIcon} />
+                </button>
+              </div>
+            </div>
+
+            {creatingBranch && (
+              <div className={css.newBranchBox}>
+                <input
+                  autoFocus
+                  className={css.newBranchInput}
+                  placeholder="新分支名称 (按 Enter 创建)..."
+                  value={newBranchName}
+                  onChange={(e) => { setNewBranchName(e.target.value) }}
+                  onKeyDown={handleCreateBranchKeyDown}
+                />
+              </div>
+            )}
+          </div>
+
+          <div className={css.branchList}>
+            {/* Local Branches */}
+            <div className={css.groupLabel}>本地分支 ({filteredLocal.length})</div>
+            {filteredLocal.map(b => (
+              <button
+                key={b.name}
+                type="button"
+                className={`${css.branchItem} ${b.isCurrent ? css.currentBranch : ''}`}
+                disabled={switching}
+                onClick={() => {
+                  if (!b.isCurrent) void handleCheckout(b.name)
+                }}
+              >
+                <div className={css.branchItemLeft}>
+                  <IconBranchOutlineRegular className={css.itemIcon} />
+                  <span className={css.itemText}>{b.name}</span>
+                </div>
+                {b.isCurrent ? (
+                  <IconCheckOutlineRegular className={css.checkMark} />
+                ) : (
+                  b.ahead !== undefined && b.ahead > 0 && <span className={css.badge}>↑{b.ahead}</span>
+                )}
+              </button>
+            ))}
+
+            {/* Remote Branches */}
+            {filteredRemote.length > 0 && (
+              <>
+                <div className={css.groupLabel} style={{ marginTop: '6px' }}>
+                  远程分支 ({filteredRemote.length})
+                </div>
+                {filteredRemote.map(b => (
+                  <button
+                    key={b.name}
+                    type="button"
+                    className={css.branchItem}
+                    disabled={switching}
+                    onClick={() => { void handleCheckout(b.name) }}
+                  >
+                    <div className={css.branchItemLeft}>
+                      <IconBranchOutlineRegular className={css.itemIcon} />
+                      <span className={css.itemText}>{b.name}</span>
+                    </div>
+                  </button>
+                ))}
+              </>
+            )}
+
+            {filteredLocal.length === 0 && filteredRemote.length === 0 && (
+              <div className={css.emptyTip}>未找到匹配的分支</div>
+            )}
+          </div>
+        </MenuSurface>,
+        document.body,
+      )}
+    </span>
+  )
+})

package/src/client/GitTitle.tsx

@@ -0,0 +1,27 @@
+/**
+ * The Git tab's chip title in the right-sidebar header.
+ */
+
+import type { ReactNode } from 'react'
+import css from './GitBody.module.css'
+
+export interface GitTitleProps {
+  useTabInfo: () => { tab: { title: string } }
+}
+
+/**
+ * Git chip title component with branch glyph and title text.
+ * @param props - Slot props including tab info hook.
+ * @returns React node for tab chip.
+ */
+export function GitTitle({ useTabInfo }: GitTitleProps): ReactNode {
+  const { tab } = useTabInfo()
+  return (
+    <span className={css.titleContainer}>
+      <svg className={css.titleIcon} width="14" height="14" viewBox="0 0 16 16" fill="currentColor">
+        <path d="M11.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zm-2.25.75a2.25 2.25 0 1 1 3 2.122V6A2.5 2.5 0 0 1 10 8.5H6a1 1 0 0 0-1 1v1.128a2.251 2.251 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.5 0v1.836A2.492 2.492 0 0 1 6 7h4a1 1 0 0 0 1-1v-.628A2.25 2.25 0 0 1 9.5 3.25zM4.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5zM3.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0z" />
+      </svg>
+      <span className={css.titleText}>{tab.title}</span>
+    </span>
+  )
+}