dsh-remote-vs 0.0.0-stage → 0.8.3

package/src/client/changes/ChangesDock.tsx

@@ -0,0 +1,348 @@
+/**
+ * The session change panel above the composer (the Cursor-style review list).
+ *
+ * Placement is the point: `conversation.input.dock` is the one full-width seat
+ * the shell renders directly above the composer card — the todo, goal and queue
+ * panels already live there — so the list is visible while the user types the
+ * next instruction instead of being scrolled away in the conversation.
+ *
+ * Data comes from the plugin's own ledger (`/api/dsh-remote/changes`), not from
+ * DSH's `workspaceChanges`: that recorder cannot see a routed session at all
+ * (its git baseline is parsed with host path semantics and its scratch index is
+ * written with `node:fs`), which the probe measured as 58 remote sessions with
+ * zero change events.
+ *
+ * Clicking a row opens the file in the remote editor and hands the editor the
+ * same hunks, so the changed lines are painted in place.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { api } from '../api.ts'
+import {
+  applyChangeSet,
+  bootstrap,
+  followSessionWorkspace,
+  openRemoteFileInBinding,
+  refreshAll,
+  remoteOpenBindings,
+  sessionRepoSubdir,
+  setFollowSession,
+  useExplorer,
+  workspaceMatchesSession,
+} from '../store.tsx'
+import { bindingForChangedFile } from '../remote-file-open-target.ts'
+import { useRemoteChatTarget } from '../use-remote-chat-target.ts'
+import type { RemoteChangedFile, RemoteChangesSummary } from '../../protocol.ts'
+import { EMPTY_CHANGE_SET, changeSetFromHunks, type ChangeSet } from './model.ts'
+import { setUndoContext } from './undo-context.ts'
+import { FileIcon } from '../vsc/kit.tsx'
+import './changes.css'
+
+/** How often an open panel re-reads the ledger (the host refreshes it per turn). */
+const POLL_MS = 3000
+
+/**
+ * How many polls between two follow retries (5 × 3 s = one probe every 15 s).
+ *
+ * The follow is one cheap HTTP call and it is retried until it resolves, so it
+ * must NOT ride the ledger's 3 s cadence: a session whose workspace cannot be
+ * resolved would otherwise cost a probe per poll, forever.
+ */
+const FOLLOW_RETRY_TICKS = 5
+
+/**
+ * Props the composer dock hands us.
+ *
+ * Typed narrowly on purpose: the slot's full owner/standard prop surface comes
+ * from `dsh-client-ui-conversation`, and depending on that package for types
+ * drags a second DSH chain into this repo (same reason `conversation.view` is
+ * soft-typed in index.tsx). Everything else is read from the plugin's own store.
+ */
+export interface ChangesDockProps {
+  /** `SessionSnapshot` (the client contract names it `sessionId`, not `id`). */
+  session?: { sessionId?: string; id?: string }
+  sessionId?: string
+}
+
+/** One row's status, spelled out for the tooltip (the row itself shows counts). */
+function statusWord(file: RemoteChangedFile, t: (key: string) => string): string {
+  if (file.status === 'A') return t('changes.statusAdded')
+  if (file.status === 'D') return t('changes.statusDeleted')
+  if (file.status === 'R') return t('changes.statusRenamed')
+  return t('changes.statusModified')
+}
+
+/** Split a display path into its directory prefix and file name. */
+function splitDisplay(display: string): { dir: string; name: string } {
+  const at = display.lastIndexOf('/')
+  return at < 0 ? { dir: '', name: display } : { dir: display.slice(0, at + 1), name: display.slice(at + 1) }
+}
+
+export function ChangesDock(props: ChangesDockProps): React.ReactNode {
+  const explorer = useExplorer()
+  // The dock is a second surface of the same store as the explorer, and it can
+  // mount without the explorer ever being opened — without this the workspace
+  // list would be empty and a click could not resolve its binding.
+  useEffect(() => {
+    if (explorer.ctx !== undefined) bootstrap(explorer.ctx)
+  }, [explorer.ctx])
+  const t = explorer.t
+  const sessionId = props.sessionId ?? props.session?.sessionId ?? props.session?.id
+  /**
+   * The last answer, TAGGED with the session it belongs to.
+   *
+   * One panel serves whichever session is on screen, so an untagged summary
+   * survives a session switch and keeps describing the previous conversation —
+   * which is exactly how a stale "computing…" from another session appeared in
+   * a session whose own ledger had not even been created yet.
+   */
+  const [data, setData] = useState<{ id: string; summary: RemoteChangesSummary | null } | null>(null)
+  const [error, setError] = useState<string | undefined>(undefined)
+  // Collapsed by default: the header already carries the file count and the totals,
+  // and the list is one click away — a turn that touched twenty files should not
+  // push the composer off the screen.
+  const [collapsed, setCollapsed] = useState(true)
+  const [busy, setBusy] = useState<string | undefined>(undefined)
+  const alive = useRef(true)
+  const currentSession = useRef(sessionId)
+  currentSession.current = sessionId
+  // The Source Control panel's repository directory, resolved at call time: it is
+  // the user's explicit answer to "which repository in this workspace", and it
+  // outranks the host's one-level guess. A ref (not a value) so a change made
+  // while this panel is open is picked up by the next poll.
+  //
+  // It is stored PER BINDING, so it may only be sent while the sidebar's
+  // selection can be PROVEN to be THIS session's binding (see the store's
+  // `sessionRepoSubdir`). Otherwise the host is told to `cd` into
+  // `session root + another workspace's sub-directory`, answers `session
+  // directory is missing on the host` (exit 90), the panel never gets a summary
+  // and repeats the same wrong guess on the next poll — the reported loop. `''`
+  // is always a truthful instruction (session root + the host's own
+  // unique-candidate probe); a foreign directory never is.
+  const repoSubdirOf = (): string => sessionRepoSubdir(sessionId)
+
+  const load = useCallback(async (force = false): Promise<void> => {
+    if (sessionId === undefined || sessionId === '') return
+    const asked = sessionId
+    try {
+      const next = await api.changes.list(asked, force, repoSubdirOf())
+      // Two guards: the panel may be gone, and the user may have switched
+      // sessions while this was in flight — a late answer for the old session
+      // must not be filed under the new one.
+      if (!alive.current || currentSession.current !== asked) return
+      setData({ id: asked, summary: next })
+      setError(undefined)
+    } catch (problem) {
+      if (!alive.current || currentSession.current !== asked) return
+      setError(problem instanceof Error ? problem.message : String(problem))
+    }
+  }, [sessionId])
+  const summary = data !== null && data.id === sessionId ? data.summary : null
+
+  useEffect(() => {
+    alive.current = true
+    void load()
+    const timer = window.setInterval(() => { void load() }, POLL_MS)
+    return () => {
+      alive.current = false
+      window.clearInterval(timer)
+    }
+  }, [load])
+
+  // Keep the revert affordance pointed at the workspace this panel lists. It is
+  // written on every summary so a rebound workspace cannot leave a stale root
+  // behind, and cleared on unmount so an affordance in another session's editor
+  // can never act on this one.
+  useEffect(() => {
+    if (sessionId === undefined || summary === null || summary.root === '') return
+    setUndoContext({ sessionId, alias: summary.alias, root: summary.root })
+  }, [sessionId, summary])
+
+  useEffect(() => () => { setUndoContext(undefined) }, [])
+
+  /**
+   * Register this session and start the follow — with no help from the sidebar.
+   *
+   * The follow used to be driven only by surfaces that already HELD evidence
+   * (the sidebar's workspace membership, this panel's own summary). Before the
+   * panel's FIRST successful scan neither exists, so the session's workspace
+   * stayed unknown while the panel still had to name a repository directory:
+   * it sent the selected workspace's sub-directory, the host answered exit 90,
+   * no summary arrived, and the next poll repeated it. The store now resolves
+   * the session's own cwd (available from the first paint) and the panel
+   * retries on a SLOW timer, so a resolution that needs the workspace table to
+   * land is picked up without a probe per poll.
+   */
+  useEffect(() => {
+    setFollowSession(sessionId)
+    if (sessionId === undefined || sessionId === '') return
+    void followSessionWorkspace({ sessionId })
+    let ticks = 0
+    const timer = window.setInterval(() => {
+      ticks += 1
+      if (ticks % FOLLOW_RETRY_TICKS !== 0) return
+      // Resolved — or the user picked a workspace by hand, which stands: stop
+      // probing entirely rather than re-asking a settled question.
+      if (workspaceMatchesSession()) {
+        window.clearInterval(timer)
+        return
+      }
+      void followSessionWorkspace({ sessionId })
+    }, POLL_MS)
+    return () => { window.clearInterval(timer) }
+  }, [sessionId])
+
+  // The binding table arrives asynchronously (the bootstrap above), and a follow
+  // attempted before it landed resolves nothing. Retry the moment it does,
+  // instead of waiting out the slow timer.
+  useEffect(() => {
+    if (sessionId === undefined || sessionId === '') return
+    void followSessionWorkspace({ sessionId })
+  }, [sessionId, explorer.ready, explorer.workspaces, explorer.aliasPaths])
+
+  /**
+   * Follow the session's workspace from the panel's own evidence.
+   *
+   * The panel holds the host's alias + remote root for THIS session, so it can
+   * point the sidebar (and the editor's workspace selector, which reads the same
+   * store) at the right binding even when the cwd probe found nothing — and it
+   * is the surface that is mounted whenever a conversation is. Only the session
+   * actually on screen may steer the selector, and only once per session (the
+   * store's policy), so a parked dock cannot move it.
+   */
+  const chatTarget = useRemoteChatTarget(explorer.ctx)
+  useEffect(() => {
+    if (sessionId === undefined || summary === null || summary.root === '') return
+    if (chatTarget.sessionId === undefined || chatTarget.sessionId !== sessionId) return
+    void followSessionWorkspace({ sessionId, alias: summary.alias, remoteRoot: summary.root })
+  }, [sessionId, summary, chatTarget.sessionId])
+
+  /** Open one listed file in the remote editor with its change marks. */
+  const openChanged = useCallback(async (file: RemoteChangedFile): Promise<void> => {
+    if (sessionId === undefined || summary === null) return
+    setBusy(file.path)
+    try {
+      const diff = await api.changes.diff(sessionId, file.path, repoSubdirOf())
+      if (!alive.current) return
+      const stamp = `${file.path}@${summary.at}@${summary.turn}`
+      const set: ChangeSet = diff !== null && diff.kind === 'text'
+        ? changeSetFromHunks(diff.hunks, stamp)
+        : { ...EMPTY_CHANGE_SET, stamp }
+      // The store may still be loading its workspace table on a cold page, so a
+      // miss is worth one refresh before giving up on the click. Read through
+      // the snapshot accessor, not the render-time props, so the retry actually
+      // sees what the load wrote.
+      //
+      // Resolved by the session's REMOTE root, never by the alias alone: one
+      // alias carries several bindings (P710 and Z700 both live on
+      // `ssh_xiray_new`), and the alias-only form picked whichever came first —
+      // the file opened while the tree and the selector stayed on the other
+      // workspace. That was the reported bug.
+      let binding = bindingForChangedFile(remoteOpenBindings(), summary, file.path)
+      if (binding === undefined) {
+        refreshAll()
+        await new Promise(resolve => { window.setTimeout(resolve, 300) })
+        binding = bindingForChangedFile(remoteOpenBindings(), summary, file.path)
+      }
+      if (binding === undefined) {
+        explorer.info(t('changes.noWorkspace'))
+        return
+      }
+      openRemoteFileInBinding(binding.id, file.path, set.hunks[0] === undefined ? {} : { line: set.hunks[0] })
+      // The tab id is deterministic (store.openFile builds it the same way), so
+      // the marks can be attached without waiting for the file read to settle.
+      applyChangeSet(`file:${binding.alias}:${file.path}`, set)
+    } catch (problem) {
+      if (alive.current) explorer.info(`${t('changes.diffFailed')}: ${problem instanceof Error ? problem.message : String(problem)}`)
+    } finally {
+      if (alive.current) setBusy(undefined)
+    }
+  }, [explorer, sessionId, summary, t])
+
+  const files = summary?.files ?? []
+  const activeTab = explorer.tabs.find(candidate => candidate.id === explorer.activeTabId)
+  const visible = useMemo(() => {
+    if (summary === null) return false
+    return files.length > 0 || summary.pending === true || summary.unavailable !== undefined
+  }, [files.length, summary])
+
+  if (sessionId === undefined || sessionId === '') return null
+  if (!visible && error === undefined) return null
+
+  const stale = activeTab?.changeStale === true
+  const title = files.length > 0 ? `${t('changes.title')} · ${files.length}` : t('changes.title')
+
+  return (
+    <div className="rvs-changes" data-collapsed={collapsed ? '1' : '0'}>
+      <div className="rvs-changes-head">
+        <button
+          type="button"
+          className="rvs-changes-toggle"
+          aria-expanded={!collapsed}
+          onClick={() => { setCollapsed(value => !value) }}
+          title={t('changes.toggle')}
+        >
+          <span className="rvs-changes-chevron" aria-hidden="true">{collapsed ? '▸' : '▾'}</span>
+          <span className="rvs-changes-title">{title}</span>
+        </button>
+        {files.length > 0 && (
+          <span className="rvs-changes-totals">
+            <span className="rvs-chg-add">+{summary?.added ?? 0}</span>
+            <span className="rvs-chg-del">−{summary?.deleted ?? 0}</span>
+          </span>
+        )}
+        {summary?.pending === true && <span className="rvs-changes-pending">{t('changes.pending')}</span>}
+        <span className="rvs-changes-spacer" />
+        {stale && <span className="rvs-changes-stale" title={t('changes.staleHint')}>{t('changes.stale')}</span>}
+        <button
+          type="button"
+          className="rvs-changes-refresh"
+          onClick={() => { void load(true) }}
+          title={t('changes.refresh')}
+        >⟳</button>
+      </div>
+      {!collapsed && (
+        <div className="rvs-changes-body">
+          {error !== undefined && <div className="rvs-changes-note rvs-changes-error">{t('changes.failed')}: {error}</div>}
+          {summary?.unavailable !== undefined && (
+            <div className="rvs-changes-note">{t('changes.unavailable')} · {summary.unavailable}</div>
+          )}
+          {files.length === 0 && summary?.unavailable === undefined && summary?.pending !== true && (
+            <div className="rvs-changes-note">{t('changes.empty')}</div>
+          )}
+          {files.map(file => {
+            const { dir, name } = splitDisplay(file.display)
+            return (
+              <button
+                type="button"
+                key={file.path}
+                className={`rvs-chg-row${busy === file.path ? ' rvs-chg-loading' : ''}`}
+                title={`${file.path}\n${statusWord(file, t)}`}
+                onClick={() => { void openChanged(file) }}
+              >
+                <span className="rvs-chg-icon" aria-hidden="true"><FileIcon path={file.display} size={14} /></span>
+                <span className="rvs-chg-path">
+                  <span className="rvs-chg-dir">{dir}</span>
+                  <span className="rvs-chg-name">{name}</span>
+                </span>
+                <span className="rvs-chg-counts">
+                  {file.oversized === true
+                    ? <span className="rvs-chg-note">{t('changes.oversized')}</span>
+                    : file.binary === true
+                      ? <span className="rvs-chg-note">{t('changes.binary')}</span>
+                      : (
+                        <>
+                          <span className="rvs-chg-add">+{file.added}</span>
+                          <span className="rvs-chg-del">−{file.deleted}</span>
+                        </>
+                        )}
+                </span>
+              </button>
+            )
+          })}
+          {summary?.truncated === true && <div className="rvs-changes-note">{t('changes.truncated')}</div>}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/client/changes/changes.css

@@ -0,0 +1,230 @@
+/**
+ * Session change panel (above the composer).
+ *
+ * Scoped under `.rvs-changes` — this surface renders OUTSIDE `.rvs-root` (it is
+ * a composer dock, not part of the explorer), so it cannot borrow that block's
+ * custom properties and states every colour with a shell token plus a literal
+ * fallback. Light theme is the `body:not([data-ds-dark-theme])` override, the
+ * same convention the rest of this plugin's stylesheet uses.
+ */
+
+.rvs-changes {
+  --rvs-chg-fg: var(--dsw-alias-label-primary, #e6e6e6);
+  --rvs-chg-fg2: var(--dsw-alias-label-secondary, #b9b9b9);
+  --rvs-chg-fg3: var(--dsw-alias-label-tertiary, #8b8b8b);
+  --rvs-chg-border: var(--dsw-alias-border-l1, rgba(127, 127, 127, .28));
+  --rvs-chg-hover: var(--dsw-alias-interactive-bg-hover, rgba(127, 127, 127, .14));
+  --rvs-chg-surface: var(--dsw-alias-bg-layer-2, rgba(127, 127, 127, .07));
+  --rvs-chg-add: #4ec9b0;
+  --rvs-chg-del: #f14c4c;
+  --rvs-chg-mod: #e2b714;
+  --rvs-chg-info: #58a6ff;
+
+  box-sizing: border-box;
+  /*
+   * 与输入卡左右对齐。
+   *
+   * 这个面板是 composerStack 的直接子元素，而输入卡住在自己的包装层里
+   * （`.uV2eYG_root`：左右各 `--dsh-composer-side-clearance`），卡片本身
+   * `width:100%; max-width: var(--dsh-composer-card-max-width)` 且居中。所以这里
+   * 必须自己把那圈内缩和上限抄一遍，否则就是「面板通栏、输入卡内缩」。
+   * 两个变量都由 shell 定义在 `.wSkVaW_body` 上（嵌入态有另一组值），回退值只
+   * 兜住宿主没有这套变量的老版本。
+   */
+  width: calc(100% - 2 * var(--dsh-composer-side-clearance, 16px));
+  max-width: var(--dsh-composer-card-max-width, 920px);
+  /* composerStack 本身已有 gap，这里不要再叠下边距。 */
+  margin: 0 auto;
+  border: 1px solid var(--rvs-chg-border);
+  border-radius: 8px;
+  background-color: var(--rvs-chg-surface);
+  color: var(--rvs-chg-fg);
+  font-size: 12px;
+  line-height: 20px;
+  overflow: hidden;
+}
+
+.rvs-changes-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-height: 28px;
+  padding: 2px 6px 2px 4px;
+}
+
+.rvs-changes-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  padding: 2px 4px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+}
+
+.rvs-changes-toggle:hover { background-color: var(--rvs-chg-hover); }
+
+.rvs-changes-chevron {
+  width: 10px;
+  color: var(--rvs-chg-fg3);
+  font-size: 10px;
+}
+
+.rvs-changes-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.rvs-changes-totals,
+.rvs-chg-counts {
+  display: inline-flex;
+  gap: 6px;
+  font-variant-numeric: tabular-nums;
+  font-size: 11px;
+}
+
+.rvs-chg-add { color: var(--rvs-chg-add); }
+.rvs-chg-del { color: var(--rvs-chg-del); }
+
+.rvs-changes-pending,
+.rvs-changes-stale {
+  color: var(--rvs-chg-fg3);
+  font-size: 11px;
+  white-space: nowrap;
+}
+
+.rvs-changes-stale { color: var(--rvs-chg-mod); }
+
+.rvs-changes-spacer { flex: 1 1 auto; }
+
+.rvs-changes-nav {
+  display: inline-flex;
+  gap: 2px;
+}
+
+.rvs-changes-nav button,
+.rvs-changes-refresh {
+  width: 20px;
+  height: 20px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--rvs-chg-fg2);
+  font-size: 12px;
+  line-height: 20px;
+  text-align: center;
+  cursor: pointer;
+}
+
+.rvs-changes-nav button:hover,
+.rvs-changes-refresh:hover {
+  background-color: var(--rvs-chg-hover);
+  color: var(--rvs-chg-fg);
+}
+
+.rvs-changes-body {
+  display: flex;
+  flex-direction: column;
+  max-height: 216px;
+  overflow-y: auto;
+  padding: 0 4px 4px;
+}
+
+/*
+ * One file per row: type icon, path, counts at the far right.
+ *
+ * Every part is nowrap and the path is the only flexible one, so a long remote
+ * path ellipsizes in the middle of the row instead of pushing the counts out of
+ * view or wrapping the row into a paragraph (which is what a row of inline
+ * <button>s does without this rule).
+ */
+.rvs-chg-row {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  min-height: 24px;
+  padding: 1px 6px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  line-height: 18px;
+  text-align: left;
+  white-space: nowrap;
+  cursor: pointer;
+}
+
+.rvs-chg-row:hover { background-color: var(--rvs-chg-hover); }
+
+.rvs-chg-row.rvs-chg-loading { opacity: .55; }
+
+/* File-type icon: the host's icon theme when the shell provides one, else the
+   plugin's own SVG set (see vsc/kit.tsx FileIcon). */
+.rvs-chg-icon {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+}
+
+.rvs-chg-path {
+  flex: 1 1 auto;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  /* Paths are remote POSIX spellings: keep the leading slash where it belongs
+     even in a container whose direction the host skin may have changed. */
+  unicode-bidi: plaintext;
+}
+
+.rvs-chg-dir { color: var(--rvs-chg-fg3); }
+
+.rvs-chg-name { color: var(--rvs-chg-fg); }
+
+.rvs-chg-counts {
+  display: inline-flex;
+  flex: 0 0 auto;
+  gap: 8px;
+  margin-left: auto;
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+
+/* "binary" / "too large": the two cases where no line counts exist. */
+.rvs-chg-note {
+  color: var(--rvs-chg-fg3);
+  font-size: 11px;
+}
+
+.rvs-changes-note {
+  padding: 4px 6px;
+  color: var(--rvs-chg-fg3);
+  font-size: 11px;
+}
+
+.rvs-changes-error { color: var(--rvs-chg-del); }
+
+body:not([data-ds-dark-theme]) .rvs-changes {
+  --rvs-chg-fg: var(--dsw-alias-label-primary, #1f2328);
+  --rvs-chg-fg2: var(--dsw-alias-label-secondary, #4d5358);
+  --rvs-chg-fg3: var(--dsw-alias-label-tertiary, #6e7781);
+  --rvs-chg-border: var(--dsw-alias-border-l1, rgba(31, 35, 40, .16));
+  --rvs-chg-hover: var(--dsw-alias-interactive-bg-hover, rgba(31, 35, 40, .07));
+  --rvs-chg-surface: var(--dsw-alias-bg-layer-2, rgba(31, 35, 40, .04));
+  --rvs-chg-add: #1a7f37;
+  --rvs-chg-del: #cf222e;
+  --rvs-chg-mod: #9a6700;
+  --rvs-chg-info: #0969da;
+}