@dsh-xhl/dsh-git-gui 0.1.3 → 0.1.5

package/README.md

@@ -75,7 +75,7 @@ If you do want a `link:` dev loop, run `scripts/link-host-deps.ps1` after every
 
 ## Where to start
 
-After installing the plugin, open the DeepSeek Harness Web UI and click the added button in the bottom-left corner to open the sidebar. Then just enjoy the version control.
+After installing the plugin, open the DeepSeek Harness Web UI and click the Git button (with a changed-files count badge) in the top-right corner of the conversation header to open the floating panel. On the hero / new-chat page (before a conversation exists) the same button is shown pinned to the same top-right spot.
 
 ## Structure
 
@@ -85,7 +85,7 @@ Host (Node):  GitService (@Remote, namespace `git`, Typert SRC mode → git/* en
                ├─ parse.js    porcelain v2 / unified diff / log / refs / stash parsing
                └─ activity.js session/event → (session, turn, tool, file) timeline (Stage 2)
 
-Client (Browser): sidebar.footer.action entry button (uncommitted-count badge) + shell.overlay floating panel
+Client (Browser): conversation.session.header.utilities entry button (uncommitted-count badge) + shell.overlay floating panel + hero-page floating button
                ├─ control.js  session cwd synchronization + polling + operation runner + confirmation dialogs
                ├─ v-*.js      view components (React.createElement, no JSX)
                └─ styles.js   theme tokens (--dsw-alias-*) and styles, adaptive to light/dark mode

package/lib/client.js

@@ -325,8 +325,20 @@ function icon(pathData, size) {
   }, h('path', { d: pathData }))
 }
 
+/** Inline SVG icon (fill = currentColor, iconfont-style 1024 viewBox). */
+function fillIcon(pathData, size) {
+  return h('svg', {
+    className: 'gg-icon',
+    width: size ?? 14,
+    height: size ?? 14,
+    viewBox: '0 0 1024 1024',
+    fill: 'currentColor',
+    'aria-hidden': 'true',
+  }, h('path', { d: pathData }))
+}
+
 const ICONS = {
-  git: icon('M10.5 2.5 4 9m6.5-6.5 3 3m-3-3L8 0.5 16 8.5 7.5 17 0 9.5l8-8m6.5 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Zm-13 0a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z', 16),
+  git: fillIcon('M110.933333 451.84 357.546667 204.8 429.653333 277.333333C419.413333 313.6 436.053333 353.28 469.333333 372.48L469.333333 608.853333C443.733333 623.36 426.666667 651.093333 426.666667 682.666667 426.666667 729.6 465.066667 768 512 768 558.933333 768 597.333333 729.6 597.333333 682.666667 597.333333 651.093333 580.266667 623.36 554.666667 608.853333L554.666667 401.493333 642.986667 490.666667C640 497.066667 640 504.32 640 512 640 558.933333 678.4 597.333333 725.333333 597.333333 772.266667 597.333333 810.666667 558.933333 810.666667 512 810.666667 465.066667 772.266667 426.666667 725.333333 426.666667 717.653333 426.666667 710.4 426.666667 704 429.653333L594.346667 320C605.44 280.32 584.96 236.8 545.28 220.16 526.933333 213.333333 507.733333 211.626667 490.666667 216.32L418.133333 144.213333 451.84 110.933333C485.12 77.226667 538.88 77.226667 572.16 110.933333L913.066667 451.84C946.773333 485.12 946.773333 538.88 913.066667 572.16L572.16 913.066667C538.88 946.773333 485.12 946.773333 451.84 913.066667L110.933333 572.16C77.226667 538.88 77.226667 485.12 110.933333 451.84Z', 16),
   refresh: icon('M13.5 8a5.5 5.5 0 1 1-1.6-3.9M13.5 1.5v3h-3', 13),
   close: icon('M4 4l8 8M12 4l-8 8', 13),
   check: icon('M2.5 8.5 6 12l7.5-8', 13),
@@ -346,7 +358,7 @@ const ICONS = {
   globe: icon('M8 14.5a6.5 6.5 0 1 0 0-13 6.5 6.5 0 0 0 0 13ZM1.5 8h13M8 1.5c1.8 1.8 2.7 4 2.7 6.5s-.9 4.7-2.7 6.5C6.2 12.7 5.3 10.5 5.3 8S6.2 3.3 8 1.5Z', 14),
 }
 
-module.exports = { h, cx, icon, ICONS, React }
+module.exports = { h, cx, icon, fillIcon, ICONS, React }
 
 },
 "./i18n.js": function (module, exports, require) {
@@ -606,7 +618,7 @@ module.exports = { t, lang }
 
 const { startController } = require('./control')
 const { makeGitApi } = require('./api')
-const { FooterButton } = require('./v-footer')
+const { HeaderButton, HeroGitButton } = require('./v-header')
 const { GitPanel } = require('./v-panel')
 const { css } = require('./styles')
 const PKG_ID = require('./pkg-id')
@@ -631,17 +643,27 @@ function apply(ctx) {
   startController(api)
 
   ctx.effect(() => {
-    const disposeFooter = ctx.slots.inject('sidebar.footer.action', () => ctx.slots.register(
-      { name: 'sidebar.footer.action', id: 'dsh-git-gui', order: 20 },
-      (props) => FooterButton(props),
-    ))
-    const disposePanel = ctx.slots.inject('shell.overlay', () => ctx.slots.register(
-      { name: 'shell.overlay', id: 'dsh-git-gui' },
-      (props) => GitPanel(props),
+    const disposeHeader = ctx.slots.inject('conversation.session.header.utilities', () => ctx.slots.register(
+      { name: 'conversation.session.header.utilities', id: 'dsh-git-gui', order: 20 },
+      (props) => HeaderButton(props),
     ))
+    const disposeOverlay = ctx.slots.inject('shell.overlay', () => {
+      const disposePanel = ctx.slots.register(
+        { name: 'shell.overlay', id: 'dsh-git-gui' },
+        (props) => GitPanel(props),
+      )
+      const disposeHero = ctx.slots.register(
+        { name: 'shell.overlay', id: 'dsh-git-gui-hero', order: 90 },
+        (props) => HeroGitButton(props),
+      )
+      return () => {
+        disposePanel()
+        disposeHero()
+      }
+    })
     return () => {
-      disposeFooter()
-      disposePanel()
+      disposeHeader()
+      disposeOverlay()
     }
   })
 }
@@ -1059,25 +1081,37 @@ body[data-ds-dark-theme] { --gg-on-accent: #10141b; }
 .gg-toast-err { border-color: var(--dsw-alias-state-error-primary); color: var(--dsw-alias-state-error-primary); }
 .gg-toast-warn { border-color: var(--dsw-alias-state-warn-primary); color: var(--dsw-alias-state-warn-primary); }
 
-/* sidebar footer entry */
-.gg-footer-btn {
-  display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0;
-  border: none; background: transparent; cursor: pointer;
-  color: var(--dsw-alias-label-secondary); font: inherit; font-size: 12px;
-  padding: 0 6px; height: 36px; border-radius: 8px; position: relative;
-}
-.gg-footer-btn:hover { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
-.gg-footer-btn.gg-active { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
-.gg-footer-icon { display: inline-flex; align-items: center; justify-content: center; }
-.gg-footer-marks { display: inline-flex; gap: 3px; align-items: center; }
-.gg-badge {
+/* conversation header entry (top-right) */
+.gg-header-btn {
+  position: relative;
+  display: inline-flex; align-items: center; justify-content: center;
+  width: 28px; height: 28px;
+  border: .5px solid var(--dsw-alias-border-l3);
+  border-radius: 14px;
+  background: transparent;
+  cursor: pointer;
+  color: var(--dsw-alias-label-secondary);
+  padding: 0;
+}
+.gg-header-btn:hover:not(:disabled) { background: var(--dsw-alias-interactive-bg-hover); color: var(--dsw-alias-label-primary); }
+.gg-header-btn:active:not(:disabled) { background: var(--dsw-alias-interactive-bg-active); }
+.gg-header-btn.gg-active { color: var(--dsw-alias-label-primary); background: var(--dsw-alias-interactive-bg-hover); }
+.gg-header-icon { display: inline-flex; align-items: center; justify-content: center; }
+.gg-header-btn .gg-badge {
+  position: absolute; top: -4px; right: -4px;
   min-width: 15px; height: 15px; padding: 0 4px; border-radius: 999px;
   background: var(--dsw-alias-brand-primary); color: var(--gg-on-accent);
   font-size: 10px; font-weight: 700;
   display: inline-flex; align-items: center; justify-content: center;
   box-sizing: border-box;
 }
-.gg-badge-err { background: var(--dsw-alias-state-error-primary); }
+.gg-header-btn .gg-badge-err { background: var(--dsw-alias-state-error-primary); }
+
+/* hero / blank-session floating entry: pinned over the conversation column's
+   top-right corner while the column is in its hero phase. No explicit
+   z-index keeps it below the plugin's own floating panel and sibling overlay
+   entries (modal, notices) — mirroring the file-editor hero FAB. */
+.gg-hero-fab { position: fixed; pointer-events: auto; }
 
 .gg-icon { flex: none; }
 `
@@ -1333,56 +1367,124 @@ function FilesView() {
 module.exports = { FilesView }
 
 },
-"./v-footer.js": function (module, exports, require) {
-/**
- * Sidebar footer entry: a Git button with a changed-files badge.
- * Registered into `sidebar.footer.action` (list / root scope).
- */
-const { h, cx, ICONS, React } = require('./dom')
-const { useStore, setState } = require('./store')
-const { t } = require('./i18n')
-const { applySession } = require('./control')
-
-function changedCount(status) {
-  if (!status || !status.files) return 0
-  return status.files.length
-}
-
-function FooterButton(props) {
-  const sessions = props.useSessions((s) => s)
-  React.useEffect(() => {
-    applySession(sessions)
-  }, [sessions])
-  const open = useStore((s) => s.open)
-  const count = useStore((s) => changedCount(s.status))
-  const statusError = useStore((s) => s.statusError)
-  const check = useStore((s) => s.check)
-  const wide = props.wide === true
-
-  const title = t('panel.title')
-  const onClick = () => setState({ open: !open })
-
-  const badge = count > 0
-    ? h('span', { className: 'gg-badge', title: `${count}` }, count > 99 ? '99+' : String(count))
-    : null
-  const dot = !badge && statusError && check?.repo === true
-    ? h('span', { className: 'gg-badge gg-badge-err', title: statusError }, '!')
-    : null
-
-  return h('button', {
-    type: 'button',
-    className: cx('gg-footer-btn', open && 'gg-active'),
-    title,
-    onClick,
-    'aria-label': title,
-  },
-    h('span', { className: 'gg-footer-icon' }, ICONS.git),
-    wide && h('span', { className: 'gg-footer-label' }, 'Git'),
-    (badge || dot) && h('span', { className: 'gg-footer-marks' }, badge, dot),
-  )
-}
-
-module.exports = { FooterButton }
+"./v-header.js": function (module, exports, require) {
+/**
+ * Conversation header entry: a single compact Git button with a
+ * changed-files badge (角标), registered into
+ * `conversation.session.header.utilities` (session scope, top-right).
+ * A hero twin is rendered by the plugin itself through the generic
+ * `shell.overlay` layer, pinned to the same spot while the conversation
+ * column is in its hero phase (no session / blank-session hero), where the
+ * session header utilities are absent or deliberately hidden.
+ */
+const { h, cx, ICONS, React } = require('./dom')
+const { useStore, setState } = require('./store')
+const { t } = require('./i18n')
+const { applySession } = require('./control')
+
+function changedCount(status) {
+  if (!status || !status.files) return 0
+  return status.files.length
+}
+
+/**
+ * The compact Git icon button + badge. Pure presentational: reads only the
+ * plugin's own store (stable hooks), so it can be mounted both in the
+ * session header utilities and in the hero overlay twin without depending on
+ * framework-scoped session hooks (whose availability can change across
+ * renders in the hero, which would trip React's rules-of-hooks check).
+ */
+function GitButton() {
+  const open = useStore((s) => s.open)
+  const count = useStore((s) => changedCount(s.status))
+  const statusError = useStore((s) => s.statusError)
+  const check = useStore((s) => s.check)
+
+  const title = t('panel.title')
+  const onClick = () => setState({ open: !open })
+
+  const badge = count > 0
+    ? h('span', { className: 'gg-badge', title: `${count}` }, count > 99 ? '99+' : String(count))
+    : null
+  const dot = !badge && statusError && check?.repo === true
+    ? h('span', { className: 'gg-badge gg-badge-err', title: statusError }, '!')
+    : null
+
+  return h('button', {
+    type: 'button',
+    className: cx('gg-header-btn', open && 'gg-active'),
+    title,
+    onClick,
+    'aria-label': title,
+  },
+    h('span', { className: 'gg-header-icon' }, ICONS.git),
+    badge,
+    dot,
+  )
+}
+
+/**
+ * Session header entry: binds the active session's workspace to the plugin
+ * store via the session-scoped `useSessions` hook, then renders GitButton.
+ * `useSessions` is required here (session-scoped slot always provides it).
+ */
+function HeaderButton(props) {
+  const sessions = props.useSessions((s) => s)
+  React.useEffect(() => {
+    if (sessions) applySession(sessions)
+  }, [sessions])
+  return h(GitButton)
+}
+
+/**
+ * Hero / blank-session floating Git entry: the same compact button, mounted
+ * through the generic `shell.overlay` layer and pinned to the conversation
+ * column's top-right corner — the spot where the header utilities sit once a
+ * conversation has records. Renders nothing while the column is not in its
+ * `hero` phase (so it never overlaps the in-chat header button or the
+ * floating panel). It deliberately does NOT subscribe to the framework
+ * sessions hook — in the hero there may be no session at all, and a hook
+ * whose presence flips between renders would trip React's rules-of-hooks
+ * invariant (#310). The plugin store already holds the last-known workspace,
+ * which is what the button's badge reflects.
+ */
+function HeroGitButton() {
+  const [pos, setPos] = React.useState(null)
+
+  React.useEffect(() => {
+    const update = () => {
+      const column = document.querySelector('[data-phase]')
+      if (column === null || column.getAttribute('data-phase') !== 'hero') {
+        setPos(null)
+        return
+      }
+      const rect = column.getBoundingClientRect()
+      if (rect.width === 0 || rect.height === 0) {
+        setPos(null)
+        return
+      }
+      // Mirror the session header utilities placement: the header pads
+      // 12px top / 28px right and centers the 28px-tall group in its 32px
+      // title row (→ 14px top), so the floating icon sits exactly where the
+      // in-chat icon does.
+      const top = rect.top + 14
+      const right = window.innerWidth - rect.right + 28
+      setPos((current) => current !== null && current.top === top && current.right === right ? current : { top, right })
+    }
+    const timer = window.setInterval(update, 400)
+    window.addEventListener('resize', update)
+    update()
+    return () => {
+      window.clearInterval(timer)
+      window.removeEventListener('resize', update)
+    }
+  }, [])
+
+  if (pos === null) return null
+  return h('div', { className: 'gg-hero-fab', style: { top: `${pos.top}px`, right: `${pos.right}px` } }, h(GitButton))
+}
+
+module.exports = { HeaderButton, HeroGitButton, GitButton }
 
 },
 "./v-log.js": function (module, exports, require) {

package/package.json

@@ -1,68 +1,68 @@
-{
-  "name": "@dsh-xhl/dsh-git-gui",
-  "version": "0.1.3",
-  "description": "Git GUI panel for the DeepSeek Harness web surface: visualize working-tree changes (including every modification the agent makes), stage/commit/branch/merge/log/pull/push/stash/revert — all from the browser.",
-  "type": "module",
-  "main": "lib/index.js",
-  "exports": {
-    ".": {
-      "default": "./lib/index.js"
-    },
-    "./client": {
-      "default": "./lib/client.js"
-    },
-    "./cordis.patch.yml": "./cordis.patch.yml",
-    "./package.json": "./package.json"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/wojiaoxiaomayun/dsh-git-gui.git"
-  },
-  "files": [
-    "lib/index.js",
-    "lib/service.js",
-    "lib/runner.js",
-    "lib/parse.js",
-    "lib/activity.js",
-    "lib/client.js",
-    "scripts/build-client.mjs",
-    "package.json",
-    "README.md",
-    "cordis.patch.yml",
-    "cordis.patch.example.yml"
-  ],
-  "dsh": {
-    "bundle": {
-      "patch": "./cordis.patch.yml"
-    },
-    "client": {
-      "platform": "web",
-      "inject": [
-        "@deepseek-ai/dsh-client-connection",
-        "@deepseek-ai/dsh-client-runtime",
-        "@deepseek-ai/dsh-client-ui-sidebar"
-      ]
-    }
-  },
-  "scripts": {
-    "build:client": "node scripts/build-client.mjs",
-    "watch:client": "node scripts/build-client.mjs --watch",
-    "test": "node --test",
-    "prepack": "node scripts/build-client.mjs"
-  },
-  "peerDependencies": {
-    "@deepseek-ai/dsh-llm": "^0.1.0-rc.6",
-    "@deepseek-ai/dsh-typert-protocol": "^0.1.0-rc.6"
-  },
-  "devDependencies": {
-    "@deepseek-ai/cordis": "^4.0.1",
-    "@deepseek-ai/dsh-llm": "0.1.0-rc.6",
-    "@deepseek-ai/dsh-typert-protocol": "0.1.0-rc.6",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1"
-  },
-  "license": "MIT",
-  "publishConfig": {
-    "access": "public"
-  }
-}
+{
+  "name": "@dsh-xhl/dsh-git-gui",
+  "version": "0.1.5",
+  "description": "Git GUI panel for the DeepSeek Harness web surface: visualize working-tree changes (including every modification the agent makes), stage/commit/branch/merge/log/pull/push/stash/revert — all from the browser.",
+  "type": "module",
+  "main": "lib/index.js",
+  "exports": {
+    ".": {
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "default": "./lib/client.js"
+    },
+    "./cordis.patch.yml": "./cordis.patch.yml",
+    "./package.json": "./package.json"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/wojiaoxiaomayun/dsh-git-gui.git"
+  },
+  "files": [
+    "lib/index.js",
+    "lib/service.js",
+    "lib/runner.js",
+    "lib/parse.js",
+    "lib/activity.js",
+    "lib/client.js",
+    "scripts/build-client.mjs",
+    "package.json",
+    "README.md",
+    "cordis.patch.yml",
+    "cordis.patch.example.yml"
+  ],
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "platform": "web",
+      "inject": [
+        "@deepseek-ai/dsh-client-connection",
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-ui-conversation"
+      ]
+    }
+  },
+  "scripts": {
+    "build:client": "node scripts/build-client.mjs",
+    "watch:client": "node scripts/build-client.mjs --watch",
+    "test": "node --test",
+    "prepack": "node scripts/build-client.mjs"
+  },
+  "peerDependencies": {
+    "@deepseek-ai/dsh-llm": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-typert-protocol": "^0.1.0-rc.6"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-llm": "0.1.0-rc.6",
+    "@deepseek-ai/dsh-typert-protocol": "0.1.0-rc.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}