dsh-git-ui 0.0.1 → 0.0.2

package/src/client/GitCenter.tsx

@@ -0,0 +1,261 @@
+/**
+ * Git center — the IDE-style management panel for one session's repository.
+ *
+ * Phase 1 ships the Changes view: grouped file lists (staged / unstaged /
+ * untracked) with per-file and bulk stage / unstage / discard actions, and a
+ * commit box (message + optional selected paths). The panel is a platform
+ * `Modal` (headless, width overridden) so it never participates in header
+ * layout; operation results ride back through the controller and the view
+ * updates from the returned snapshot.
+ *
+ * Discard is destructive (tracked changes only in Phase 1) and therefore
+ * two-step: the button arms itself and requires a second click within 3s.
+ */
+import { useEffect, useMemo, useState } from 'react'
+import type { JSX } from 'react'
+import { Button, Modal, Toast } from '@deepseek-ai/dsh-client-ui-primitives'
+import type { GitAction, GitActionResult, GitChange, GitSnapshot } from '../host/types.ts'
+import type { GitKey } from './locales.ts'
+import * as css from './styles.ts'
+
+/** One change-row action callback; all are disabled while busy. */
+interface RowActions {
+  readonly onToggle: (path: string) => void
+  readonly onStage: (path: string) => void
+  readonly onUnstage: (path: string) => void
+  readonly onDiscard: (path: string) => void
+}
+
+export interface GitCenterProps {
+  readonly open: boolean
+  readonly onClose: () => void
+  readonly snapshot: GitSnapshot
+  readonly run: (action: GitAction) => Promise<GitActionResult>
+  readonly t: (key: GitKey) => string
+}
+
+type Feedback = { readonly kind: 'error'; readonly text: string } | null
+
+/** One transient success toast (keyed by seq so repeats restart the cycle). */
+interface ToastState {
+  readonly text: string
+  readonly seq: number
+}
+
+/** Change row with checkbox (commit selection) and per-file actions. */
+function ChangeRow({
+  change, checked, busy, actions, t,
+}: {
+  change: GitChange
+  checked: boolean
+  busy: boolean
+  actions: RowActions
+  t: (key: GitKey) => string
+}): JSX.Element {
+  const untracked = change.status === 'untracked'
+  return (
+    <div className="dsh-git-ui__row" style={css.centerRow}>
+      <input
+        type="checkbox"
+        style={css.changeCheckbox}
+        checked={checked}
+        disabled={busy}
+        onChange={() => { actions.onToggle(change.path) }}
+        aria-label={change.path}
+      />
+      <span style={css.changeChip} title={change.status}>
+        {CHIP_LETTERS[change.status] ?? '•'}
+      </span>
+      <span style={css.changePathText} title={change.path}>{change.path}</span>
+      {change.staged
+        ? <Button size="sm" disabled={busy} onClick={() => actions.onUnstage(change.path)}>{t('center.unstage')}</Button>
+        : <Button size="sm" disabled={busy} onClick={() => actions.onStage(change.path)}>{t('center.stage')}</Button>}
+      {!untracked && (
+        <Button size="sm" disabled={busy} onClick={() => actions.onDiscard(change.path)}>{t('center.discard')}</Button>
+      )}
+    </div>
+  )
+}
+
+const CHIP_LETTERS: Record<string, string> = {
+  added: 'A', modified: 'M', deleted: 'D', renamed: 'R',
+  untracked: '?', conflicted: '!', typechange: 'T',
+}
+
+/**
+ * The management panel. Rendered by GitPill inside the platform Modal; the
+ * snapshot prop comes from the live controller view, so every successful
+ * operation re-renders this component with fresh state.
+ */
+export function GitCenter({
+  open, onClose, snapshot, run, t,
+}: GitCenterProps): JSX.Element | null {
+  const [selected, setSelected] = useState<ReadonlySet<string>>(new Set())
+  const [message, setMessage] = useState('')
+  const [busy, setBusy] = useState(false)
+  const [feedback, setFeedback] = useState<Feedback>(null)
+  const [toast, setToast] = useState<ToastState | null>(null)
+  const [armed, setArmed] = useState<string | 'all' | null>(null)
+
+  // Auto-disarm the destructive confirm after 3s.
+  useEffect(() => {
+    if (armed === null) return
+    const timer = setTimeout(() => setArmed(null), 3000)
+    return () => clearTimeout(timer)
+  }, [armed])
+
+  const staged = useMemo(() => snapshot.changes.filter((c) => c.staged), [snapshot])
+  const unstaged = useMemo(() => snapshot.changes.filter((c) => !c.staged && c.status !== 'untracked'), [snapshot])
+  const untracked = useMemo(() => snapshot.changes.filter((c) => c.status === 'untracked'), [snapshot])
+  const hasTrackedChanges = staged.length + unstaged.length > 0
+
+  const toggle = (path: string): void => {
+    setSelected((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) next.delete(path)
+      else next.add(path)
+      return next
+    })
+  }
+
+  const doRun = async (action: GitAction, successText: string): Promise<void> => {
+    if (busy) return
+    setBusy(true)
+    setFeedback(null)
+    const result = await run(action)
+    setBusy(false)
+    setArmed(null)
+    if (result.ok) {
+      setSelected(new Set())
+      setMessage('')
+      // Transient system toast (holds ~3s, fades, unmounts itself).
+      setToast({ text: successText, seq: Date.now() })
+    } else {
+      // Persistent panel-level error banner with a dismiss button.
+      setFeedback({ kind: 'error', text: result.error.message ?? result.error.code })
+    }
+  }
+
+  const armDiscard = (target: string | 'all'): void => {
+    setArmed((prev) => (prev === target ? null : target))
+  }
+
+  const discardTarget = (path: string): void => {
+    if (armed === path) void doRun({ kind: 'discard', paths: [path] }, t('center.done'))
+    else armDiscard(path)
+  }
+
+  const discardAll = (): void => {
+    if (armed === 'all') void doRun({ kind: 'discard-all' }, t('center.done'))
+    else armDiscard('all')
+  }
+
+  const commit = (): void => {
+    const text = message.trim()
+    if (text === '' || busy) return
+    const paths = selected.size > 0 ? [...selected] : undefined
+    void doRun({ kind: 'commit', message: text, ...(paths === undefined ? {} : { paths }) }, t('center.done'))
+  }
+
+  const actions: RowActions = {
+    onToggle: toggle,
+    onStage: (path) => void doRun({ kind: 'stage', paths: [path] }, t('center.done')),
+    onUnstage: (path) => void doRun({ kind: 'unstage', paths: [path] }, t('center.done')),
+    onDiscard: discardTarget,
+  }
+
+  return (
+    <Modal open={open} onClose={onClose} title={t('center.title')} closeLabel={t('popup.refresh')} headless className="dsh-git-ui__center">
+      <div style={css.centerShell}>
+        <div style={css.centerHeader}>
+          <h2 style={css.centerTitle} title={snapshot.root}>{snapshot.branch ?? '(detached)'} — {t('center.title')}</h2>
+          <Button size="sm" onClick={onClose} aria-label={t('popup.refresh')}>✕</Button>
+        </div>
+
+        <div style={css.centerBody}>
+          {feedback !== null && (
+            <div style={css.feedbackError} role="alert">
+              <span style={{ flex: 1 }}>{feedback.text}</span>
+              <button type="button" style={css.feedbackClose} onClick={() => setFeedback(null)} aria-label={t('popup.refresh')}>✕</button>
+            </div>
+          )}
+
+          <div style={css.toolRow}>
+            <Button size="sm" disabled={busy || (unstaged.length === 0 && untracked.length === 0)} onClick={() => void doRun({ kind: 'stage-all' }, t('center.done'))}>
+              {t('center.stageAll')}
+            </Button>
+            <Button size="sm" disabled={busy || staged.length === 0} onClick={() => void doRun({ kind: 'unstage-all' }, t('center.done'))}>
+              {t('center.unstageAll')}
+            </Button>
+            <Button size="sm" disabled={busy || !hasTrackedChanges} onClick={discardAll}>
+              {armed === 'all' ? t('center.confirmDiscard') : t('center.discardAll')}
+            </Button>
+          </div>
+
+          {snapshot.changes.length === 0
+            ? <div style={css.emptyNote}>{t('center.empty')}</div>
+            : (
+              <>
+                {staged.length > 0 && <GroupedList title={t('center.staged')} changes={staged} checked={selected} busy={busy} actions={actions} t={t} />}
+                {unstaged.length > 0 && <GroupedList title={t('center.unstaged')} changes={unstaged} checked={selected} busy={busy} actions={actions} t={t} />}
+                {untracked.length > 0 && <GroupedList title={t('center.untracked')} changes={untracked} checked={selected} busy={busy} actions={actions} t={t} />}
+              </>
+            )}
+        </div>
+
+        <div style={css.commitBox}>
+          <textarea
+            className="dsh-git-ui__commit-input"
+            style={css.commitInput}
+            placeholder={t('center.commitMessage')}
+            value={message}
+            disabled={busy}
+            onChange={(e) => setMessage(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) commit()
+            }}
+          />
+          <div style={css.commitFooter}>
+            <span style={css.commitHint}>
+              {selected.size > 0 ? t('center.commitSelected').replace('{count}', String(selected.size)) : t('center.commitHint')}
+            </span>
+            <Button variant="primary" size="sm" disabled={busy || message.trim() === ''} onClick={commit}>
+              {busy ? t('center.busy') : t('center.commit')}
+            </Button>
+          </div>
+        </div>
+      </div>
+      {toast !== null && (
+        <Toast key={toast.seq} text={toast.text} onDone={() => setToast(null)} />
+      )}
+    </Modal>
+  )
+}
+
+/** One group of change rows (staged / unstaged / untracked). */
+function GroupedList({
+  title, changes, checked, busy, actions, t,
+}: {
+  title: string
+  changes: readonly GitChange[]
+  checked: ReadonlySet<string>
+  busy: boolean
+  actions: RowActions
+  t: (key: GitKey) => string
+}): JSX.Element {
+  return (
+    <>
+      <div style={css.groupTitle}>{title}</div>
+      {changes.map((change) => (
+        <ChangeRow
+          key={change.path}
+          change={change}
+          checked={checked.has(change.path)}
+          busy={busy}
+          actions={actions}
+          t={t}
+        />
+      ))}
+    </>
+  )
+}

package/src/client/GitPill.tsx

@@ -16,6 +16,8 @@ import { createPortal } from 'react-dom'
 import type { JSX } from 'react'
 import { completedTurnCount, type TurnSignalSnapshot } from './turn-signal.ts'
 import type { GitObservable, GitView } from './controller.ts'
+import { GitCenter } from './GitCenter.tsx'
+import type { GitAction, GitActionResult } from '../host/types.ts'
 import type { GitKey } from './locales.ts'
 import * as css from './styles.ts'
 
@@ -31,6 +33,8 @@ export interface GitInjected {
   }
   /** Force an immediate re-check (same path as polling). */
   refresh: () => Promise<void>
+  /** Execute one management action (host returns a fresh snapshot). */
+  run: (action: GitAction) => Promise<GitActionResult>
 }
 
 /** Selector hook shape the slot runtime binds from `hooks.git`. */
@@ -122,10 +126,11 @@ function DegradedPill({ label, title, t }: { label: string; title?: string; t: (
 
 /** Popup body (rendered inside the portaled card): root, counts, commits, changes, refresh. */
 function GitPopupBody({
-  view, refresh, t,
+  view, refresh, openCenter, t,
 }: {
   view: GitView & { state: 'ready' }
   refresh: () => Promise<void>
+  openCenter: () => void
   t: (key: GitKey) => string
 }): JSX.Element {
   const now = Date.now()
@@ -178,7 +183,12 @@ function GitPopupBody({
         )}
       <div style={css.footerRow}>
         <span style={css.checkedAt}>{t('popup.checkedAt').replace('{time}', new Date(s.checkedAt).toLocaleTimeString())}</span>
-        <PopRefresher refresh={refresh} t={t} />
+        <span style={{ display: 'inline-flex', gap: 4, alignItems: 'center' }}>
+          <button type="button" className="dsh-git-ui__refresh" style={css.refreshButton} onClick={openCenter}>
+            {t('center.open')}
+          </button>
+          <PopRefresher refresh={refresh} t={t} />
+        </span>
       </div>
     </>
   )
@@ -207,9 +217,10 @@ const POPUP_GUTTER = 6
 const VIEW_GUTTER = 8
 
 /**
- * The header utility entry: a branch pill that opens a portaled detail popup.
+ * The header utility entry: a branch pill that opens a portaled detail popup
+ * and the Git center management panel.
  */
-export function GitPill({ useGit, useSession, refresh, t }: GitPillProps): JSX.Element | null {
+export function GitPill({ useGit, useSession, refresh, run, t }: GitPillProps): JSX.Element | null {
   // The selector hook requires a selector function (with-selector calls it
   // unconditionally); identity selection reads the whole view snapshot.
   const view = useGit((view) => view)
@@ -238,6 +249,7 @@ export function GitPill({ useGit, useSession, refresh, t }: GitPillProps): JSX.E
   const wrapRef = useRef<HTMLSpanElement>(null)
   const popRef = useRef<HTMLDivElement>(null)
   const [open, setOpen] = useState(false)
+  const [centerOpen, setCenterOpen] = useState(false)
   const [pos, setPos] = useState<{ top: number; left: number } | null>(null)
 
   useEffect(() => {
@@ -345,10 +357,22 @@ export function GitPill({ useGit, useSession, refresh, t }: GitPillProps): JSX.E
           role="dialog"
           aria-label={t('popup.title')}
         >
-          <GitPopupBody view={display} refresh={refresh} t={t} />
+          <GitPopupBody
+            view={display}
+            refresh={refresh}
+            openCenter={() => { setOpen(false); setPos(null); setCenterOpen(true) }}
+            t={t}
+          />
         </div>,
         document.body,
       )}
+      <GitCenter
+        open={centerOpen}
+        onClose={() => setCenterOpen(false)}
+        snapshot={display.snapshot}
+        run={run}
+        t={t}
+      />
     </span>
   )
 }

package/src/client/controller.ts

@@ -5,7 +5,7 @@
  * connection reset, `dispose()` on slot teardown (clears the timer and
  * rejects nothing — in-flight work settles into a withdrawn view).
  */
-import type { GitSnapshot, GitSnapshotFailure, GitSnapshotRequest, GitSnapshotResult } from '../host/types.ts'
+import type { GitActionResult, GitActionRequest, GitSnapshot, GitSnapshotFailure, GitSnapshotRequest, GitSnapshotResult } from '../host/types.ts'
 
 /** The observable view contract components consume (useSyncExternalStore shape). */
 export interface GitObservable<V> {
@@ -35,6 +35,7 @@ export type GitRemoteEnvelope<T> =
 /** Structural face of the mounted gitInfo Remote namespace. */
 export interface GitRemoteLike {
   snapshot(request: GitSnapshotRequest): Promise<GitRemoteEnvelope<GitSnapshotResult>>
+  run(request: GitActionRequest): Promise<GitRemoteEnvelope<GitActionResult>>
 }
 
 /** Failure codes that mean "no working directory to watch" — degrade to a
@@ -126,6 +127,52 @@ export class GitController implements GitObservable<GitView> {
     void this.refresh()
   }
 
+  /**
+   * Run one management action. On success the host returns a fresh snapshot
+   * which becomes the view immediately (no waiting for the next poll); the
+   * returned result lets the caller show operation feedback. Shares the
+   * single-flight slot with refresh, so an action never overlaps a poll.
+   */
+  run(action: GitActionRequest['action']): Promise<GitActionResult> {
+    if (this.inflight !== undefined) return this.inflight.then(() => this.run(action))
+    if (this.disposed) return Promise.resolve({ ok: false, error: { code: 'git-error', message: 'controller disposed' } })
+    // Deliberately no loading view here: an operation must not blank the
+    // pill/panel while it runs — the UI shows its own busy state, and a
+    // failure keeps the current view for context.
+    const promise = this.remote.run({ sessionId: this.sessionId, action })
+      .then((result) => {
+        if (this.disposed) return { ok: false, error: { code: 'git-error', message: 'controller disposed' } } as GitActionResult
+        if (!result.ok) {
+          const detail = [result.error.code, result.error.message].filter(Boolean).join(': ')
+          this.setView({ state: 'error', error: { code: 'git-unavailable', detail: detail || 'rpc failure' } })
+          return { ok: false, error: { code: 'git-error', message: detail || 'rpc failure' } } as GitActionResult
+        }
+        const inner = result.value
+        if (inner.ok) {
+          this.pollMs = inner.snapshot.refreshIntervalMs
+          this.setView({ state: 'ready', snapshot: inner.snapshot })
+        } else if (TERMINAL_CODES.has(inner.error.code)) {
+          this.setView({ state: 'no-cwd' })
+        }
+        // Other failures keep the current view (context for the panel); the
+        // error rides back to the caller for display.
+        return inner
+      })
+      .catch((error: unknown) => {
+        const message = error instanceof Error ? error.message : String(error)
+        if (!this.disposed) {
+          this.setView({ state: 'error', error: { code: 'git-unavailable', detail: 'transport failure' } })
+        }
+        return { ok: false, error: { code: 'git-error', message } } as GitActionResult
+      })
+      .finally(() => {
+        this.inflight = undefined
+        if (!this.disposed) this.schedulePoll()
+      })
+    this.inflight = promise.then(() => undefined)
+    return promise
+  }
+
   /** Tear down: stop the timer; in-flight work settles into a no-op. */
   dispose(): void {
     this.disposed = true

package/src/client/index.ts

@@ -116,7 +116,7 @@ export async function apply(ctx: ClientContext): Promise<void> {
             // `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) is always
+            // so the same controller (and its bound refresh/run) is always
             // handed out per session.
             let face = faces.get(sessionId)
             if (face === undefined) {
@@ -124,6 +124,7 @@ export async function apply(ctx: ClientContext): Promise<void> {
               face = {
                 hooks: { git: controller as GitInjected['hooks']['git'] },
                 refresh: () => controller.refresh(),
+                run: (action) => controller.run(action),
               }
               faces.set(sessionId, face)
             }

package/src/client/locales.ts

@@ -20,6 +20,25 @@ export const zh = {
   'popup.checkedAt': '检查于 {time}',
   'popup.empty': '工作区干净',
   'popup.emptyCommits': '暂无提交',
+  'center.open': '打开 Git 中心',
+  'center.title': 'Git 中心',
+  'center.staged': '已暂存',
+  'center.unstaged': '未暂存',
+  'center.untracked': '未跟踪',
+  'center.stage': '暂存',
+  'center.unstage': '取消暂存',
+  'center.discard': '丢弃',
+  'center.discardAll': '全部丢弃',
+  'center.confirmDiscard': '确认丢弃？',
+  'center.stageAll': '全部暂存',
+  'center.unstageAll': '取消全部暂存',
+  'center.commitMessage': '提交信息',
+  'center.commit': '提交',
+  'center.commitHint': '勾选文件时仅提交所选；未勾选时提交全部已暂存内容',
+  'center.commitSelected': '已选 {count} 个文件',
+  'center.empty': '工作区干净，无需操作',
+  'center.done': '操作成功',
+  'center.busy': '执行中…',
   'time.justNow': '刚刚',
   'time.minutesAgo': '{n} 分钟前',
   'time.hoursAgo': '{n} 小时前',
@@ -48,6 +67,25 @@ export const en: Record<GitKey, string> = {
   'popup.checkedAt': 'Checked at {time}',
   'popup.empty': 'Working tree clean',
   'popup.emptyCommits': 'No commits yet',
+  'center.open': 'Open Git center',
+  'center.title': 'Git center',
+  'center.staged': 'staged',
+  'center.unstaged': 'unstaged',
+  'center.untracked': 'untracked',
+  'center.stage': 'Stage',
+  'center.unstage': 'Unstage',
+  'center.discard': 'Discard',
+  'center.discardAll': 'Discard all',
+  'center.confirmDiscard': 'Confirm?',
+  'center.stageAll': 'Stage all',
+  'center.unstageAll': 'Unstage all',
+  'center.commitMessage': 'Commit message',
+  'center.commit': 'Commit',
+  '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.done': 'Done',
+  'center.busy': 'Working…',
   'time.justNow': 'just now',
   'time.minutesAgo': '{n}m ago',
   'time.hoursAgo': '{n}h ago',

package/src/client/remote.ts

@@ -61,6 +61,39 @@ export const gitSnapshotRequestSchema = z.object({
   sessionId: z.string(),
 })
 
+/** One management action (mirrors `GitAction` in src/host/types.ts). */
+export const gitActionSchema = z.discriminatedUnion('kind', [
+  z.object({ kind: z.literal('stage'), paths: z.array(z.string()) }),
+  z.object({ kind: z.literal('stage-all') }),
+  z.object({ kind: z.literal('unstage'), paths: z.array(z.string()) }),
+  z.object({ kind: z.literal('unstage-all') }),
+  z.object({ kind: z.literal('discard'), paths: z.array(z.string()) }),
+  z.object({ kind: z.literal('discard-all') }),
+  z.object({
+    kind: z.literal('commit'),
+    message: z.string(),
+    paths: z.array(z.string()).optional(),
+  }),
+])
+
+export const gitOperationErrorSchema = z.object({
+  code: z.enum([
+    'session-not-found', 'cwd-unavailable', 'path-not-found',
+    'not-a-git-repo', 'invalid-path', 'git-error', 'timeout',
+  ]),
+  message: z.string().optional(),
+})
+
+export const gitActionResultSchema = z.discriminatedUnion('ok', [
+  z.object({ ok: z.literal(true), snapshot: gitSnapshotSchema, output: z.string().optional() }),
+  z.object({ ok: z.literal(false), error: gitOperationErrorSchema }),
+])
+
+export const gitActionRequestSchema = z.object({
+  sessionId: z.string(),
+  action: gitActionSchema,
+})
+
 /** The contribution mounted into `ctx.remote` by the client plugin body. */
 export const gitInfoRemote: TypertRemoteContribution = {
   package: 'dsh-git-ui',
@@ -93,5 +126,30 @@ export const gitInfoRemote: TypertRemoteContribution = {
         schema: gitSnapshotResultSchema,
       },
     },
+    {
+      id: 'dsh-git-ui#gitInfo/run',
+      service: 'gitInfo',
+      namespace: 'gitInfo',
+      method: 'run',
+      invocation: { kind: 'direct' },
+      cancellation: { parameter: 'signal' },
+      parameters: [
+        {
+          name: 'request',
+          wire: 'request',
+          source: 'json',
+          codec: {
+            mode: 'strict',
+            typeSymbol: 'dsh-git-ui/types#GitActionRequest',
+            schema: gitActionRequestSchema,
+          },
+        },
+      ],
+      result: {
+        mode: 'strict',
+        typeSymbol: 'dsh-git-ui/types#GitActionResult',
+        schema: gitActionResultSchema,
+      },
+    },
   ],
 }