@lijian-ui/dsh-file-manager 0.1.20

package/package.json

@@ -0,0 +1,85 @@
+{
+  "name": "@lijian-ui/dsh-file-manager",
+  "description": "DSH web GUI right-panel system: a pixel-faithful re-implementation of FileManager's Explorer + Preview columns (file tree, filename search, git changes, multi-tab preview of 10+ formats) driven by real host-side fs/git services, hot-pluggable via a profile bundle without any dsh source changes",
+  "version": "0.1.20",
+  "type": "module",
+  "main": "lib/index.js",
+  "types": "lib/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/types/index.d.ts",
+      "default": "./lib/index.js"
+    },
+    "./client": {
+      "types": "./lib/types/client/index.d.ts",
+      "default": "./lib/client.js"
+    },
+    "./src/*": "./src/*",
+    "./package.json": "./package.json"
+  },
+  "dsh": {
+    "bundle": {
+      "patch": "./cordis.patch.yml"
+    },
+    "client": {
+      "inject": [
+        "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
+        "@deepseek-ai/dsh-client-ui-conversation",
+        "@deepseek-ai/dsh-client-ui-settings",
+        "@deepseek-ai/dsh-client-ui-input-trigger"
+      ],
+      "platform": "web"
+    }
+  },
+  "scripts": {
+    "build": "tsc -b && node scripts/copy-mermaid.mjs && tsdown",
+    "prepare": "node scripts/copy-mermaid.mjs && tsdown",
+    "watch": "tsdown --watch",
+    "test": "vitest run",
+    "typecheck": "tsc -b --pretty false"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "devDependencies": {
+    "@deepseek-ai/cordis": "^4.0.1",
+    "@deepseek-ai/dsh-client-locale": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-runtime": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-conversation": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-primitives": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-input-trigger": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-client-ui-slots": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-host-webserver": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-settings": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-subprocess": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-system-prompt": "^0.1.0-rc.6",
+    "@deepseek-ai/dsh-workspace": "^0.1.0-rc.6",
+    "schemastery": "^3.18.0",
+    "@types/node": "^22.20.0",
+    "@types/react": "~18.3.1",
+    "@types/react-dom": "^18.3.5",
+    "jsdom": "29.1.1",
+    "lightningcss": "^1.32.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "tsdown": "0.22.2",
+    "typescript": "~5.7.2",
+    "vite-tsconfig-paths": "^6.1.1",
+    "vitest": "^4.1.8",
+    "mermaid": "11.16.1"
+  },
+  "files": [
+    "lib",
+    "src",
+    "cordis.patch.yml",
+    "README.md",
+    "README.zh.md"
+  ],
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zhu1090093659/dsh-web-ui.git"
+  }
+}

package/src/client/FileManagerSettingsCard.tsx

@@ -0,0 +1,117 @@
+/**
+ * The filemgr settings card: the total on/off switch (issue #307).
+ * Registers into the `web-ui.plugin.item` slot the Web UI Plugins group
+ * renders, bound to the `filemgr` settings namespace through the family
+ * settings bridge (or the official settings scope when the deployment exposes
+ * the namespace directly). Turning the panel off unmounts the right-panel
+ * columns, the floating expand button, the /filemgr/* routes and the
+ * workspace fs watch + git polling behind them.
+ * @module @lijian-ui/dsh-file-manager/client/FileManagerSettingsCard
+ */
+
+import type { InjectFace, PropsLocale, PropsRuntime } from '@deepseek-ai/dsh-client-ui-slots'
+import type { SettingsScope, SnapshotStore } from '@deepseek-ai/dsh-client-runtime/client'
+import { PluginSettingsCard, BooleanField } from './PluginSettingsCard.tsx'
+import { CardForm, booleanField, type CardActions, type CardShell, type FieldState as CardFieldState } from './settings-form.ts'
+
+/** The filemgr fields this card edits (the namespace's full schema). */
+export interface FileManagerPanelSettings {
+  /** Whether the right-panel system (columns, floating button, routes, watch/polling) is mounted at all; default on. */
+  enabled?: boolean
+}
+
+/** What the filemgr card renders. */
+export interface FileManagerSettingsCardState extends CardShell {
+  enabled: CardFieldState
+}
+
+/** The registration-side face the card's slot entry injects. */
+export interface FileManagerSettingsCardFace extends CardActions {
+  hooks: {
+    /** Card snapshot bound by the renderer as useFilemgrSettingsCard. */
+    filemgrSettingsCard: SnapshotStore<FileManagerSettingsCardState>
+  }
+}
+
+/** Bridges the `filemgr` scope onto the card's staged form. */
+export class FileManagerSettingsCardController {
+  private readonly form: CardForm<FileManagerPanelSettings>
+  private readonly store: SnapshotStore<FileManagerSettingsCardState>
+
+  /** @param scope - the bound settings scope for the `filemgr` namespace. */
+  constructor(scope: SettingsScope<FileManagerPanelSettings>) {
+    this.form = new CardForm(scope, [
+      booleanField('enabled'),
+    ])
+    this.store = this.form.bind(() => this.projection())
+  }
+
+  private projection(): FileManagerSettingsCardState {
+    return {
+      ...this.form.shell(),
+      enabled: this.form.field('enabled'),
+    }
+  }
+
+  /**
+   * Build the face the card's slot registration injects.
+   * @returns the card's snapshot and its form actions.
+   */
+  inject(): FileManagerSettingsCardFace {
+    return { hooks: { filemgrSettingsCard: this.store }, ...this.form.actions() }
+  }
+
+  /**
+   * Release the card's scope subscription and bound stores; the slot
+   * disposer calls this on teardown.
+   */
+  dispose(): void {
+    this.form.dispose()
+  }
+}
+
+/** Props the renderer binds for the filemgr card. */
+export type FileManagerSettingsCardProps =
+  PropsRuntime<'web-ui.plugin.item'>
+  & PropsLocale<'filemgr'>
+  & InjectFace<FileManagerSettingsCardFace>
+
+/**
+ * Render the filemgr card.
+ * @param props - locale copy, the card snapshot, and its form actions.
+ * @returns the card.
+ */
+export function FileManagerSettingsCard(props: FileManagerSettingsCardProps) {
+  const { t } = props
+  const state = props.useFilemgrSettingsCard(snapshot => snapshot)
+  const disabled = !state.writable
+  const fieldProps = {
+    overriddenLabel: t('settings.overridden'),
+    resetLabel: t('settings.reset'),
+    invalidLabel: t('settings.invalidNumber'),
+    disabled,
+  }
+  return (
+    <PluginSettingsCard
+      t={t}
+      titleKey="settings.title"
+      descriptionKey="settings.description"
+      state={state}
+      onSave={props.save}
+      onDiscard={props.discard}
+    >
+      <BooleanField
+        id="settings-filemgr-enabled"
+        label={t('settings.enabled')}
+        hint={t('settings.enabledHint')}
+        inheritLabel={t('settings.inherit')}
+        onLabel={t('settings.on')}
+        offLabel={t('settings.off')}
+        {...fieldProps}
+        {...state.enabled}
+        onEdit={(text) => { props.edit('enabled', text) }}
+        onReset={() => { props.resetField('enabled') }}
+      />
+    </PluginSettingsCard>
+  )
+}

package/src/client/PluginSettingsCard.tsx

@@ -0,0 +1,337 @@
+// Generated by scripts/sync-shared.mjs from shared/client/settings/PluginSettingsCard.tsx. Do not edit this copy; edit the shared source and run "node scripts/sync-shared.mjs".
+/**
+ * Family-shared chrome for plugin settings cards: a disclosure header naming
+ * the plugin and what its settings govern, the controls inside, and the save
+ * that writes them. Renders nothing while the namespace is unavailable — a
+ * deployment that does not compose the owning plugin should show no trace of
+ * it. Inlined into each consumer's client bundle; mirrors the official
+ * ui-plugin-config PluginCard in a self-contained slice.
+ */
+
+import { useState, type ReactNode } from 'react'
+import type { CardShell } from './settings-form.ts'
+import css from './settings-card.module.css'
+
+/** Copy keys the card chrome itself reads; every consumer locale carries this shared vocabulary. */
+export const CARD_COPY_KEYS = [
+  'settings.collapse',
+  'settings.expand',
+  'settings.notExposed',
+  'settings.unsaved',
+  'settings.readOnly',
+  'settings.saveFailed',
+  'settings.discard',
+  'settings.save',
+  'settings.saving',
+] as const
+
+/** Copy key the card chrome itself reads. */
+export type CardCopyKey = (typeof CARD_COPY_KEYS)[number]
+
+/** Key domain for the plugin's own copy (inferred per consumer). */
+export type SettingsCardKey<TKey extends string = string> = TKey | CardCopyKey
+
+/** Card chrome shared by every plugin settings card. */
+export interface PluginSettingsCardProps<TKey extends string = string> {
+  /** Locale reader for this card's copy. */
+  t: (key: SettingsCardKey<TKey>, params?: Record<string, string | number>) => string
+  /** Locale key of the plugin's name. */
+  titleKey: TKey
+  /** Locale key of the line describing what this plugin's settings govern. */
+  descriptionKey: TKey
+  /** The card's form state: availability, writability, and what a save would do. */
+  state: CardShell
+  /** Write every staged edit. */
+  onSave: () => void
+  /** Drop every staged edit. */
+  onDiscard: () => void
+  /**
+   * Render the controls expanded on arrival (still collapsible). Defaults to
+   * true: promoted first-level sections show their settings immediately.
+   */
+  defaultOpen?: boolean
+  /**
+   * Render without the collapse affordance: a static header and an always
+   * visible body. Used by first-level settings sections whose nav entry
+   * already provides the selection.
+   */
+  alwaysOpen?: boolean
+  /** The plugin's controls. */
+  children: ReactNode
+}
+
+/**
+ * Render one plugin settings card.
+ * @param props - the plugin's copy keys, its form state, and its controls.
+ * @returns the card, or nothing while the namespace is still loading.
+ */
+export function PluginSettingsCard<TKey extends string = string>(props: PluginSettingsCardProps<TKey>) {
+  const [open, setOpen] = useState(props.defaultOpen ?? true)
+  const { state, alwaysOpen } = props
+  if (!state.available) return null
+  const title = props.t(props.titleKey)
+  const description = props.t(props.descriptionKey)
+  const blocked = !state.dirty || state.invalid || state.saving
+  const expanded = alwaysOpen === true || open
+  const cardClass = expanded ? `${css.cardOpen} ${css.card}` : css.card
+  // With alwaysOpen the nav entry already provides the selection, so the
+  // header is a static title row instead of a disclosure button.
+  const header = alwaysOpen === true
+    ? (
+      <div className={css.headerStatic}>
+        <span className={css.headText}>
+          <span className={css.name} title={title}>{title}</span>
+          <span className={css.description} title={description}>{description}</span>
+        </span>
+        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
+      </div>
+    )
+    : (
+      <button
+        type="button"
+        className={css.header}
+        aria-expanded={open}
+        aria-label={`${props.t(open ? 'settings.collapse' : 'settings.expand')}: ${title}`}
+        onClick={() => { setOpen(!open) }}
+      >
+        <span className={css.headText}>
+          <span className={css.name} title={title}>{title}</span>
+          <span className={css.description} title={description}>{description}</span>
+        </span>
+        {state.dirty ? <span className={css.pending} title={props.t('settings.unsaved')}>{props.t('settings.unsaved')}</span> : null}
+        <svg
+          width="14"
+          height="14"
+          viewBox="0 0 14 14"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          className={open ? `${css.chevron} ${css.chevronOpen}` : css.chevron}
+        >
+          <path
+            d="M11.8486 5.5L11.4238 5.92383L8.69727 8.65137C8.44157 8.90706 8.21562 9.13382 8.01172 9.29785C7.79912 9.46883 7.55595 9.61756 7.25 9.66602C7.08435 9.69222 6.91565 9.69222 6.75 9.66602C6.44405 9.61756 6.20088 9.46883 5.98828 9.29785C5.78438 9.13382 5.55843 8.90706 5.30273 8.65137L2.57617 5.92383L2.15137 5.5L3 4.65137L3.42383 5.07617L6.15137 7.80273C6.42595 8.07732 6.59876 8.24849 6.74023 8.3623C6.87291 8.46904 6.92272 8.47813 6.9375 8.48047C6.97895 8.48703 7.02105 8.48703 7.0625 8.48047C7.07728 8.47813 7.12709 8.46904 7.25977 8.3623C7.40124 8.24849 7.57405 8.07732 7.84863 7.80273L10.5762 5.07617L11 4.65137L11.8486 5.5Z"
+            fill="currentColor"
+          />
+        </svg>
+      </button>
+    )
+  // The namespace exists but the Host does not serve it to this client (the
+  // official settings allowlist omits third-party namespaces): show a card
+  // that explains the gap instead of vanishing, so a missing card never
+  // reads as a missing plugin.
+  if (!state.exposed) {
+    return (
+      <li className={cardClass}>
+        {header}
+        {expanded
+          ? (
+            <div className={css.body}>
+              <p className={css.notExposed} role="status">{props.t('settings.notExposed')}</p>
+            </div>
+          )
+          : null}
+      </li>
+    )
+  }
+  return (
+    <li className={cardClass}>
+      {header}
+      {expanded
+        ? (
+          <div className={css.body}>
+            {!state.writable ? <p className={css.readOnly} role="status">{props.t('settings.readOnly')}</p> : null}
+            {props.children}
+            <div className={css.footer}>
+              {state.failed
+                ? (
+                  <p className={css.failed} role="status">
+                    {props.t('settings.saveFailed')}{state.failedReason ? ' - ' + state.failedReason : ''}
+                  </p>
+                )
+                : null}
+              <button
+                type="button"
+                className={css.discard}
+                disabled={!state.dirty || state.saving}
+                onClick={props.onDiscard}
+              >
+                {props.t('settings.discard')}
+              </button>
+              <button
+                type="button"
+                className={css.save}
+                disabled={blocked}
+                onClick={props.onSave}
+              >
+                {props.t(!state.saving ? 'settings.save' : 'settings.saving')}
+              </button>
+            </div>
+          </div>
+        )
+        : null}
+    </li>
+  )
+}
+
+/** Props every field control needs regardless of its value type. */
+export interface FieldProps {
+  /** Stable id associating the label with its control. */
+  id: string
+  /** Visible label. */
+  label: string
+  /** One-line explanation rendered under the control. */
+  hint: string
+  /** Draft text this control renders. */
+  text: string
+  /** True when saving would leave a user-layer entry for this field. */
+  overridden: boolean
+  /** True when the draft is not a value this field accepts. */
+  invalid: boolean
+  /** Copy for the overridden badge. */
+  overriddenLabel: string
+  /** Copy for the reset control. */
+  resetLabel: string
+  /** Copy shown in place of the hint while the draft is invalid. */
+  invalidLabel: string
+  /** Disables every control (read-only document, or an unavailable namespace). */
+  disabled: boolean
+  /** Stage draft text. */
+  onEdit: (text: string) => void
+  /** Stage a clear so the field re-inherits the composition layer. */
+  onReset: () => void
+}
+
+/** A staged value field. `numeric` only hints the keypad: which drafts a field accepts is decided by its spec. */
+export function ValueField(props: FieldProps & {
+  /** Hints a numeric keypad without narrowing what the control accepts. */
+  numeric?: boolean
+  /** Placeholder shown while the draft is empty. */
+  placeholder?: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <input
+        id={props.id}
+        className={props.invalid ? css.inputInvalid : css.input}
+        type="text"
+        {...props.numeric === true ? { inputMode: 'numeric' as const } : {}}
+        {...props.invalid ? { 'aria-invalid': true } : {}}
+        value={props.text}
+        placeholder={props.placeholder ?? ''}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      />
+      <p className={props.invalid ? css.invalid : css.hint}>
+        {props.invalid ? props.invalidLabel : props.hint}
+      </p>
+    </div>
+  )
+}
+
+/** A staged boolean field: 继承 / 开 / 关. */
+export function BooleanField(props: FieldProps & {
+  /** Copy for the inherit option. */
+  inheritLabel: string
+  /** Copy for the on option. */
+  onLabel: string
+  /** Copy for the off option. */
+  offLabel: string
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <select
+        id={props.id}
+        className={css.select}
+        value={props.text}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        <option value="">{props.inheritLabel}</option>
+        <option value="true">{props.onLabel}</option>
+        <option value="false">{props.offLabel}</option>
+      </select>
+      <p className={css.hint}>{props.hint}</p>
+    </div>
+  )
+}
+
+/** A staged enumerated field rendered as a select. */
+export function ChoiceField(props: FieldProps & {
+  /** Copy for the inherit option (draft text is the empty string). */
+  inheritLabel: string
+  /** Choices rendered in order; `value` is the draft/stored text. */
+  choices: ReadonlyArray<{ value: string; label: string }>
+}) {
+  return (
+    <div className={css.field}>
+      <div className={css.head}>
+        <label className={css.label} htmlFor={props.id}>{props.label}</label>
+        {props.overridden
+          ? (
+            <span className={css.badges}>
+              <span className={css.badge}>{props.overriddenLabel}</span>
+              <button
+                type="button"
+                className={css.reset}
+                disabled={props.disabled}
+                onClick={props.onReset}
+              >
+                {props.resetLabel}
+              </button>
+            </span>
+          )
+          : null}
+      </div>
+      <select
+        id={props.id}
+        className={css.select}
+        value={props.text}
+        disabled={props.disabled}
+        onChange={(event) => { props.onEdit(event.target.value) }}
+      >
+        <option value="">{props.inheritLabel}</option>
+        {props.choices.map(choice => (
+          <option key={choice.value} value={choice.value}>{choice.label}</option>
+        ))}
+      </select>
+      <p className={props.invalid ? css.invalid : css.hint}>
+        {props.invalid ? props.invalidLabel : props.hint}
+      </p>
+    </div>
+  )
+}

package/src/client/api.ts

@@ -0,0 +1,141 @@
+/**
+ * Browser client for the host /filemgr/* routes: typed JSON envelope
+ * calls plus the SSE change subscription. Same-origin relative fetch (the
+ * page and the routes share the webserver).
+ * @module dsh-filemgr/client/api
+ */
+
+import type {
+  DirListing, FileRead, GitBatchResult, GitStatusView, PanelEnvelope, PanelError, SearchView,
+} from '../core/types.ts'
+
+/** Transport failure (fetch threw or the response was not JSON). */
+const TRANSPORT_ERROR: PanelError = { code: 'internal', message: 'panel route unavailable' }
+
+/** POST one JSON payload and decode the envelope; never throws. */
+async function post<T>(path: string, payload: Record<string, unknown>): Promise<PanelEnvelope<T>> {
+  let response: Response
+  try {
+    response = await fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(payload),
+    })
+  } catch {
+    return { ok: false, error: TRANSPORT_ERROR }
+  }
+  try {
+    const envelope = await response.json() as unknown
+    if (typeof envelope !== 'object' || envelope === null) return { ok: false, error: TRANSPORT_ERROR }
+    const record = envelope as Record<string, unknown>
+    if (record.ok === true) return { ok: true, value: record.value as T }
+    return { ok: false, error: (record.error as PanelError | undefined) ?? TRANSPORT_ERROR }
+  } catch {
+    return { ok: false, error: TRANSPORT_ERROR }
+  }
+}
+
+/** Typed panel operations over the wire. */
+export class PanelApi {
+  /** List one directory of the project root (rel path; '' = root). */
+  list(root: string, path: string): Promise<PanelEnvelope<DirListing>> {
+    return post('/filemgr/list', { root, path })
+  }
+
+  /** Read one file (text or image data URL). */
+  read(root: string, path: string, asImage: boolean): Promise<PanelEnvelope<FileRead>> {
+    return post('/filemgr/read', { root, path, asImage })
+  }
+
+  /** Write text content back with an optional mtime conflict base. */
+  write(root: string, path: string, content: string, baseMtime?: number): Promise<PanelEnvelope<{ mtime: number }>> {
+    return post('/filemgr/write', { root, path, content, baseMtime })
+  }
+
+  /** Filename search under the root. */
+  search(root: string, query: string): Promise<PanelEnvelope<SearchView>> {
+    return post('/filemgr/search', { root, query })
+  }
+
+  /** Delete a path (untracked discard). */
+  delete(root: string, path: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/delete', { root, path })
+  }
+
+  /** Reveal a path in the OS file manager (selecting the entry). */
+  reveal(root: string, path: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/reveal', { root, path })
+  }
+
+  /** Open a path with the OS default app. */
+  openWithDefault(root: string, path: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/open-with-default', { root, path })
+  }
+
+  /** Rename a path (newName is a bare name, no separators). */
+  rename(root: string, path: string, newName: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/rename', { root, path, newName })
+  }
+
+  /** Create a directory at a relative path (parent must exist). */
+  mkdir(root: string, path: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/mkdir', { root, path })
+  }
+
+  /** Create an empty file at a relative path (refuses to overwrite). */
+  newFile(root: string, path: string): Promise<PanelEnvelope<{ ok: true }>> {
+    return post('/filemgr/new-file', { root, path })
+  }
+
+  /** The repo status view; null when the root is not a repository. */
+  gitStatus(root: string): Promise<PanelEnvelope<GitStatusView | null>> {
+    return post('/filemgr/git-status', { root })
+  }
+
+  /** The unified diff text of one path (staged = index vs HEAD). */
+  gitDiff(root: string, path: string, staged: boolean): Promise<PanelEnvelope<{ content: string }>> {
+    return post('/filemgr/git-diff', { root, path, staged })
+  }
+
+  /** Stage paths. */
+  gitStage(root: string, paths: string[]): Promise<PanelEnvelope<GitBatchResult>> {
+    return post('/filemgr/git-stage', { root, paths })
+  }
+
+  /** Unstage paths. */
+  gitUnstage(root: string, paths: string[]): Promise<PanelEnvelope<GitBatchResult>> {
+    return post('/filemgr/git-unstage', { root, paths })
+  }
+
+  /** Discard paths (worktree side; untracked paths are deleted). */
+  gitDiscard(root: string, paths: string[]): Promise<PanelEnvelope<GitBatchResult>> {
+    return post('/filemgr/git-discard', { root, paths })
+  }
+}
+
+/** One SSE change event pushed by the host. */
+export type PanelChangeEvent =
+  | { kind: 'fs' }
+  | { kind: 'git'; status: GitStatusView }
+  | { kind: 'gitUnavailable' }
+
+/**
+ * Subscribe to host-pushed changes for one project root (fs watch events and
+ * git status polls). Reconnects are handled by the EventSource; the caller
+ * re-subscribes when the root changes.
+ * @param root - project root to watch.
+ * @param onChange - fired on every pushed change.
+ * @returns the disposer closing the stream.
+ */
+export function subscribePanelEvents(root: string, onChange: (event: PanelChangeEvent) => void): () => void {
+  const source = new EventSource(`/filemgr/events?root=${encodeURIComponent(root)}`)
+  source.addEventListener('change', (raw) => {
+    try {
+      const event = JSON.parse((raw as MessageEvent).data as string) as PanelChangeEvent
+      onChange(event)
+    } catch {
+      // malformed push; ignore
+    }
+  })
+  return () => { source.close() }
+}