@chatcode/cco-better-sidebar 0.18.0-rc.5 → 0.18.0-rc.6

package/lib/index.js

@@ -6005,20 +6005,50 @@ function buildPluginMarketApi(ctx, cwdOf) {
 		if (scope !== "project" && scope !== "user") throw new SidebarError("bad-request", "scope must be project or user");
 		return scope;
 	};
+	const selectedProject = async (payload) => {
+		if (typeof payload?.projectPath !== "string") throw new SidebarError("bad-request", "请先选择目标项目目录。");
+		const path = requireString(payload, "projectPath");
+		const qualified = process.platform !== "win32" || /^(?:[A-Za-z]:[\\/]|[\\/]{2}[^\\/]+[\\/][^\\/]+)/.test(path);
+		if (!isAbsolute(path) || !qualified || path.includes("\0")) throw new SidebarError("bad-request", "请选择有效的项目目录。");
+		const canonical = await realpath(path);
+		if (!(await stat(canonical)).isDirectory()) throw new SidebarError("bad-request", "请选择项目文件夹。");
+		return canonical;
+	};
+	const picker = () => {
+		const value = ctx.get("directoryPicker", false);
+		if (!value) throw new SidebarError("method-error", "目录选择器未挂载，请启用宿主目录选择插件。", 503);
+		return value.capability();
+	};
 	const contextOf = async (payload) => {
 		const sessionId = payload?.sessionId;
-		if (sessionId === void 0 || sessionId === "") return {
-			sessionId: "",
-			cwd: process.cwd()
-		};
+		if (sessionId === void 0 || sessionId === "") return { sessionId: "" };
 		requireString(payload, "sessionId");
 		return {
 			sessionId,
 			cwd: (await cwdOf(payload)).cwd
 		};
 	};
+	const projectOf = async (payload) => {
+		if (payload?.projectPath !== void 0) return selectedProject(payload);
+		return (await contextOf(payload)).cwd;
+	};
 	return {
 		"plugins.context": contextOf,
+		"plugins.project.pick": async () => {
+			const capability = picker();
+			if (capability.kind === "browse") return { kind: "browse" };
+			const path = await capability.pick(AbortSignal.timeout(12e4));
+			return {
+				kind: "native",
+				path: path === null ? null : await selectedProject({ projectPath: path })
+			};
+		},
+		"plugins.project.directories": async (payload) => {
+			const capability = picker();
+			if (capability.kind !== "browse") throw new SidebarError("method-error", "当前宿主使用系统文件夹选择窗口。");
+			const path = payload?.path;
+			return capability.list(path === void 0 ? void 0 : requireString(payload, "path"), AbortSignal.timeout(15e3));
+		},
 		"plugins.marketplaces": () => service().marketplaces(),
 		"plugins.catalog": async (payload) => {
 			const market = service();
@@ -6029,10 +6059,20 @@ function buildPluginMarketApi(ctx, cwdOf) {
 				warning: ""
 			};
 		},
-		"plugins.installed": async (payload) => service().installed((await contextOf(payload)).cwd),
-		"plugins.install": async (payload) => service().install((await contextOf(payload)).cwd, requireString(payload, "pluginId"), scopeOf(payload)),
+		"plugins.installed": async (payload) => {
+			const project = await projectOf(payload);
+			const records = await service().installed(project ?? process.cwd());
+			return project ? records : records.filter((record) => record.scope === "user");
+		},
+		"plugins.install": async (payload) => {
+			const scope = scopeOf(payload);
+			const project = scope === "project" ? await selectedProject(payload) : await projectOf(payload);
+			return service().install(project ?? process.cwd(), requireString(payload, "pluginId"), scope);
+		},
 		"plugins.uninstall": async (payload) => {
-			await service().uninstall((await contextOf(payload)).cwd, requireString(payload, "pluginId"), scopeOf(payload));
+			const scope = scopeOf(payload);
+			const project = scope === "project" ? await selectedProject(payload) : await projectOf(payload);
+			await service().uninstall(project ?? process.cwd(), requireString(payload, "pluginId"), scope);
 			return { ok: true };
 		}
 	};

package/lib/types/client/PluginProjectPicker.d.ts

@@ -0,0 +1,13 @@
+import type { PluginProjectPick } from '../plugin-market-shared.ts';
+export interface PluginProjectRequest {
+    result: Promise<PluginProjectPick>;
+    controller: AbortController;
+    finish: (path: string | null) => void;
+}
+export declare function PluginProjectPicker({ request, initialPath, onPicked, onCancel, onError }: {
+    request: PluginProjectRequest;
+    initialPath?: string;
+    onPicked: (path: string) => void;
+    onCancel: () => void;
+    onError: (message: string) => void;
+}): JSX.Element | null;

package/lib/types/client/api.d.ts

@@ -1,5 +1,5 @@
 import type { BrowserProbeResult } from './browser.ts';
-import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts';
+import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope, PluginProjectPick, PluginProjectDirectories } from '../plugin-market-shared.ts';
 /** One wire failure. */
 export declare class SidebarApiError extends Error {
     readonly code: string;
@@ -187,16 +187,18 @@ export interface SessionScope {
 export declare const api: {
     pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => Promise<{
         sessionId: string;
-        cwd: string;
+        cwd?: string;
     }>;
+    pluginProjectPick: (signal?: AbortSignal) => Promise<PluginProjectPick>;
+    pluginProjectDirectories: (path?: string, signal?: AbortSignal) => Promise<PluginProjectDirectories>;
     pluginMarketplaces: (signal?: AbortSignal) => Promise<MarketplaceCatalog>;
     pluginCatalog: (marketplaceId: string, signal?: AbortSignal) => Promise<MarketplacePlugin[] | {
         plugins: MarketplacePlugin[];
         warning: string;
     }>;
-    pluginsInstalled: (scope: SessionScope, signal?: AbortSignal) => Promise<InstalledMarketplacePlugin[]>;
-    pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => Promise<InstalledMarketplacePlugin>;
-    pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => Promise<{
+    pluginsInstalled: (scope: SessionScope, signal?: AbortSignal, projectPath?: string) => Promise<InstalledMarketplacePlugin[]>;
+    pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => Promise<InstalledMarketplacePlugin>;
+    pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => Promise<{
         ok: true;
     }>;
     chatcodeStatus: (signal?: AbortSignal) => Promise<ChatCodeAuthState>;

package/lib/types/client/locales.d.ts

@@ -37,12 +37,24 @@ export declare const zh: {
     pluginMarketInstalled: string;
     pluginMarketUninstalled: string;
     pluginMarketSubtitle: string;
+    pluginMarketChooseProject: string;
+    pluginMarketProjectHint: string;
+    pluginMarketChoosingDirectory: string;
+    pluginMarketInstalledAt: string;
+    pluginMarketInstallPath: string;
+    pluginMarketDirectoryPath: string;
+    pluginMarketOpenDirectory: string;
+    pluginMarketSelectDirectory: string;
+    pluginMarketHomeDirectory: string;
+    pluginMarketDirectoryTruncated: string;
     pluginMarketSearch: string;
     pluginMarketDefault: string;
     pluginMarketBrowse: string;
     pluginMarketNoDescription: string;
     pluginMarketInstalling: string;
     pluginMarketUninstalling: string;
+    pluginMarketInstallProgress: string;
+    pluginMarketUninstallProgress: string;
     accountMenuSettings: string;
     accountMenuLogout: string;
     accountMenuLogoutConfirmTitle: string;

package/lib/types/plugin-market-shared.d.ts

@@ -27,6 +27,28 @@ export interface PluginCatalog {
     plugins: MarketplacePlugin[];
     warning: string;
 }
+/** Host-owned paths for the remote Web directory browser. */
+export interface PluginProjectDirectories {
+    path: string;
+    home: string;
+    crumbs: Array<{
+        name: string;
+        path: string;
+        hidden: boolean;
+    }>;
+    entries: Array<{
+        name: string;
+        path: string;
+        hidden: boolean;
+    }>;
+    truncated: boolean;
+}
+export type PluginProjectPick = {
+    kind: 'native';
+    path: string | null;
+} | {
+    kind: 'browse';
+};
 export interface PluginMarketService {
     marketplaces(): Promise<MarketplaceCatalog>;
     plugins(marketplaceId: string): Promise<MarketplacePlugin[]>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatcode/cco-better-sidebar",
-  "version": "0.18.0-rc.5",
+  "version": "0.18.0-rc.6",
   "description": "ChatCode CLI Web plugin: a VS Code-like right sidebar (explorer / editor / terminal / git / browser), isolated per conversation session. Exposes a service for other plugins to register sidebar tabs and file viewers.",
   "type": "module",
   "repository": {

package/src/client/PluginMarketView.module.css

@@ -4,6 +4,17 @@
 .title { font-size: 16px; line-height: 24px; font-weight: 600; margin: 0; }
 .subtitle, .project, .meta, .state { font-size: 12px; line-height: 18px; color: var(--dsw-alias-label-tertiary); margin: 2px 0; }
 .project { overflow-wrap: anywhere; }
+.projectRow { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
+.projectRow > p { flex: 1; min-width: min(100%, 200px); }
+.projectRow > button { flex-shrink: 0; }
+.installPath { margin: 4px 0; overflow-wrap: anywhere; color: var(--dsw-alias-label-tertiary); font-size: 12px; line-height: 18px; }
+.projectPicker { width: min(620px, calc(100vw - 32px)); }
+.directoryPath { display: flex; align-items: center; gap: 8px; }
+.directoryPath > span { flex: 1; min-width: 0; }
+.directoryCrumbs { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
+.directoryList { max-height: 320px; overflow: auto; min-height: 100px; }
+.directoryList > button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 6px; background: transparent; color: var(--dsw-alias-label-primary); font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
+.directoryList > button:hover, .directoryList > button:focus-visible { background: var(--dsw-alias-interactive-bg-hover); }
 .toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; margin: 16px 0 12px; }
 .tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
 .tabs button { white-space: nowrap; }
@@ -11,6 +22,9 @@
 .breadcrumb { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; color: var(--dsw-alias-label-secondary); overflow-wrap: anywhere; }
 .breadcrumb button { flex-shrink: 0; white-space: nowrap; }
 .breadcrumb > span:last-child { min-width: 0; }
+.operation { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 10px; padding: 16px; margin: 12px 0; border: 1px solid var(--dsw-alias-state-business-primary); border-radius: 10px; background: var(--dsw-alias-bg-layer-1); color: var(--dsw-alias-state-business-primary); font-weight: 500; }
+.operation > span:first-child { flex-shrink: 0; }
+.operation > span:last-child { min-width: 0; overflow-wrap: anywhere; }
 .warning { padding: 8px 10px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; margin: 10px 0; font-size: 12px; color: var(--dsw-alias-label-secondary); }
 .error, .notice { font-size: 12px; padding: 8px 10px; border-radius: 8px; margin: 10px 0; overflow-wrap: anywhere; }
 .error { color: var(--dsw-alias-state-danger-primary); background: var(--dsw-alias-state-danger-bg); }

package/src/client/PluginMarketView.tsx

@@ -7,30 +7,38 @@ import { IconChevronLeftOutline14, IconChevronRightOutline14, IconRefreshOutline
 import type { PluginMarketCatalog } from './plugin-market-catalog.ts'
 import type { InstalledMarketplacePlugin, MarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts'
 import css from './PluginMarketView.module.css'
+import { PluginProjectPicker, type PluginProjectRequest } from './PluginProjectPicker.tsx'
 
 export function PluginMarketView({ scope, visible, catalog }: { scope: SessionScope; visible: boolean; catalog: PluginMarketCatalog }): JSX.Element {
   const snapshot = useSyncExternalStore(catalog.subscribe, catalog.getSnapshot)
   const [marketId, setMarketId] = useState<string | null>(null)
   const [tab, setTab] = useState<'markets' | 'installed'>('markets')
   const [query, setQuery] = useState('')
-  const [installed, setInstalled] = useState<InstalledMarketplacePlugin[]>([])
-  const [recordsReady, setRecordsReady] = useState(false)
-  const [recordsError, setRecordsError] = useState('')
+  const [recordState, setRecordState] = useState<{ key: string; records: InstalledMarketplacePlugin[]; ready: boolean; error: string }>()
   const [message, setMessage] = useState<{ text: string; error: boolean }>()
-  const [working, setWorking] = useState<{ id: string; scope: PluginMarketScope }>()
+  const [working, setWorking] = useState<{ id: string; name: string; scope: PluginMarketScope; uninstall: boolean; choosing?: boolean }>()
+  const [selection, setSelection] = useState<{ key: string; path: string }>()
+  const [picker, setPicker] = useState<PluginProjectRequest>()
+  const pickerRef = useRef<PluginProjectRequest>()
   const [revision, setRevision] = useState(0)
   const pending = useRef(false)
   const breadcrumbNode = useRef<HTMLDivElement>(null)
   const mutationVersion = useRef(0)
   const focusBack = useRef(false)
   const scopeKey = `${scope.sessionId}\0${scope.cwd ?? ''}`
+  const projectPath = selection?.key === scopeKey ? selection.path : scope.cwd
+  const recordsKey = `${scopeKey}\0${projectPath ?? ''}`
+  const installed = recordState?.key === recordsKey ? recordState.records : []
+  const recordsReady = recordState?.key === recordsKey && recordState.ready
+  const recordsError = recordState?.key === recordsKey ? recordState.error : ''
   const latestScope = useRef(scopeKey)
   latestScope.current = scopeKey
   const markets = snapshot.markets?.data?.marketplaces ?? []
   const market = markets.find(item => item.id === marketId)
   const catalogEntry = tab === 'markets' && marketId ? snapshot.plugins[marketId] : snapshot.markets
   const loading = snapshot.refresh?.status === 'loading' || (tab === 'markets' && (!catalogEntry || catalogEntry.status === 'loading'))
-  const blocked = loading || snapshot.refresh?.status === 'error'
+  const operating = !!working && !working.choosing
+  const blocked = loading || snapshot.refresh?.status === 'error' || !!working
 
   useEffect(() => {
     if (!visible) return
@@ -40,9 +48,11 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
   useEffect(() => { setQuery('') }, [tab, marketId])
   useEffect(() => { if (focusBack.current) { breadcrumbNode.current?.querySelector('button')?.focus(); focusBack.current = false } }, [marketId])
 
-  useEffect(() => {
-    setInstalled([]); setRecordsReady(false); setRecordsError(''); setMessage(undefined)
-  }, [scopeKey])
+  useEffect(() => { setMessage(undefined) }, [scopeKey])
+  useEffect(() => () => {
+    pickerRef.current?.controller.abort()
+    pickerRef.current?.finish(null)
+  }, [])
   useEffect(() => {
     if (!visible) return
     const controller = new AbortController()
@@ -53,10 +63,10 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
       reading = true
       const version = mutationVersion.current
       try {
-        const records = await api.pluginsInstalled(scope, controller.signal)
-        if (active && !pending.current && version === mutationVersion.current) { setInstalled(records); setRecordsReady(true); setRecordsError('') }
+        const records = await api.pluginsInstalled(scope, controller.signal, projectPath)
+        if (active && !pending.current && version === mutationVersion.current) setRecordState({ key: recordsKey, records, ready: true, error: '' })
       } catch (cause) {
-        if (active && version === mutationVersion.current) setRecordsError(cause instanceof Error ? cause.message : String(cause))
+        if (active && version === mutationVersion.current) setRecordState(previous => ({ key: recordsKey, records: previous?.key === recordsKey ? previous.records : [], ready: previous?.key === recordsKey && previous.ready, error: cause instanceof Error ? cause.message : String(cause) }))
       } finally { reading = false }
     }
     void read()
@@ -64,28 +74,70 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
     // Remote catalogs are never polled or refreshed by navigation.
     const timer = setInterval(() => { void read() }, 2000)
     return () => { active = false; clearInterval(timer); controller.abort() }
-  }, [scopeKey, visible, revision])
+  }, [recordsKey, visible, revision])
+
+  const chooseDirectory = (): Promise<string | null> => new Promise(finish => {
+    const controller = new AbortController()
+    const request = { result: api.pluginProjectPick(controller.signal), controller, finish }
+    pickerRef.current = request
+    setPicker(request)
+  })
+  const finishPicker = (path: string | null): void => {
+    pickerRef.current?.finish(path)
+    pickerRef.current?.controller.abort()
+    pickerRef.current = undefined
+    setPicker(undefined)
+  }
+  const chooseProject = async (): Promise<void> => {
+    if (pending.current || blocked) return
+    pending.current = true
+    mutationVersion.current++
+    setMessage(undefined)
+    const key = scopeKey
+    try {
+      const path = await chooseDirectory()
+      if (path && latestScope.current === key) setSelection({ key, path })
+    } finally { pending.current = false; setRevision(value => value + 1) }
+  }
 
   const perform = async (plugin: MarketplacePlugin, installScope: PluginMarketScope): Promise<void> => {
     const refreshStatus = catalog.getSnapshot().refresh?.status
     if (pending.current || !recordsReady || blocked || refreshStatus === 'loading' || refreshStatus === 'error') return
     const key = scopeKey
-    const present = installed.some(item => item.id === plugin.id && item.scope === installScope)
+    const record = installed.find(item => item.id === plugin.id && item.scope === installScope)
+    const present = !!record
     pending.current = true
     mutationVersion.current++
-    setWorking({ id: plugin.id, scope: installScope })
+    const operation = { id: plugin.id, name: plugin.name, scope: installScope, uninstall: present }
+    setWorking({ ...operation, choosing: installScope === 'project' && !present })
     setMessage(undefined)
     try {
-      if (present) await api.pluginUninstall(scope, plugin.id, installScope)
-      else await api.pluginInstall(scope, plugin.id, installScope)
-      const records = await api.pluginsInstalled(scope)
+      let target = record?.scope === 'project' ? record.projectPath : projectPath
+      if (installScope === 'project' && !present) {
+        const chosen = await chooseDirectory()
+        if (!chosen || latestScope.current !== key) return
+        target = chosen
+        setSelection({ key, path: target })
+        setWorking(operation)
+      }
+      let installedPath = ''
+      if (present) await api.pluginUninstall(scope, plugin.id, installScope, target)
+      else {
+        const result = await api.pluginInstall(scope, plugin.id, installScope, target)
+        installedPath = result.installPath
+        if (installScope === 'project') {
+          target = result.projectPath
+          if (latestScope.current === key) setSelection({ key, path: target })
+        }
+      }
+      const records = await api.pluginsInstalled(scope, undefined, target)
       if (latestScope.current === key) {
-        setInstalled(records); setRecordsReady(true); setRecordsError('')
-        setMessage({ text: t(present ? 'pluginMarketUninstalled' : 'pluginMarketInstalled'), error: false })
+        setRecordState({ key: `${key}\0${target ?? ''}`, records, ready: true, error: '' })
+        setMessage({ text: present ? t('pluginMarketUninstalled') : t('pluginMarketInstalledAt', { path: installedPath }), error: false })
       }
     } catch (cause) {
       if (latestScope.current === key) setMessage({ text: cause instanceof Error ? cause.message : String(cause), error: true })
-    } finally { pending.current = false; setWorking(undefined) }
+    } finally { pending.current = false; setWorking(undefined); setRevision(value => value + 1) }
   }
   const refresh = (): void => {
     if (loading || pending.current) return
@@ -104,12 +156,15 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
   const warning = [snapshot.markets?.data?.warning, marketId ? snapshot.plugins[marketId]?.warning : ''].filter(Boolean).join('\n')
   const hasData = tab === 'installed' ? recordsReady : !!catalogEntry?.data
 
-  return <section className={css.root} aria-label={t('pluginMarketTitle')} aria-busy={loading} data-chatcode-plugin-market>
+  return <section className={css.root} aria-label={t('pluginMarketTitle')} aria-busy={loading || operating} data-chatcode-plugin-market>
     <header className={css.head}>
       <div><h2 className={css.title}>{t('pluginMarketTitle')}</h2><p className={css.subtitle}>{t('pluginMarketSubtitle')}</p></div>
       <Input disabled={blocked} value={query} onChange={event => setQuery(event.target.value)} placeholder={t('pluginMarketSearch')} aria-label={t('pluginMarketSearch')} />
     </header>
-    {scope.cwd ? <p className={css.project}>{t('pluginMarketProjectDirectory', { path: scope.cwd })}</p> : null}
+    <div className={css.projectRow}>
+      <p className={css.project}>{projectPath ? t('pluginMarketProjectDirectory', { path: projectPath }) : t('pluginMarketProjectHint')}</p>
+      <Button size="sm" variant="outline" disabled={blocked || !!working || !!picker} onClick={() => { void chooseProject() }}>{t('pluginMarketChooseProject')}</Button>
+    </div>
     <div className={css.toolbar}>
       <div className={css.tabs}>
         <Button size="sm" variant="ghost" disabled={blocked} aria-pressed={tab === 'markets'} onClick={() => setTab('markets')}>{t('pluginMarketTitle')}</Button>
@@ -117,6 +172,10 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
       </div>
       <Button size="sm" variant="outline" aria-label={t('pluginMarketRefresh')} disabled={snapshot.markets?.status === 'loading' || loading || !!working} onClick={refresh}><span aria-hidden="true" className={loading ? css.spinning : undefined}><IconRefreshOutline14 /></span>{t(loading ? 'pluginMarketRefreshing' : 'pluginMarketRefresh')}</Button>
     </div>
+    {operating ? <div className={css.operation} role="status">
+      <span className={css.spinning} aria-hidden="true"><IconRefreshOutline14 /></span>
+      <span>{t(working.uninstall ? 'pluginMarketUninstallProgress' : 'pluginMarketInstallProgress', { name: working.name })}</span>
+    </div> : null}
     {warning && tab === 'markets' ? <p className={css.warning} role="status">{warning}</p> : null}
     {error ? <p className={css.error} role="status">{error}</p> : null}
     {message ? <p className={message.error ? css.error : css.notice} role="status">{message.text}</p> : null}
@@ -125,7 +184,7 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
       <span aria-hidden="true">/</span><span>{market?.name ?? marketId}</span>
     </div> : null}
     {loading ? <p className={css.state} role="status">{t(hasData ? 'pluginMarketRefreshing' : 'pluginMarketLoading')}</p> : null}
-    <div className={css.grid} aria-busy={loading}>
+    <div className={css.grid} aria-busy={loading || operating}>
       {showMarkets ? filteredMarkets.map(item => <button key={item.id} type="button" disabled={blocked} className={`${css.card} ${css.marketCard}`} onClick={() => { focusBack.current = true; setMarketId(item.id) }}>
         <div className={css.cardHead}><h3>{item.name}</h3>{item.official ? <Pill>{t('pluginMarketDefault')}</Pill> : null}</div>
         <p className={css.description}>{item.description || t('pluginMarketNoDescription')}</p>
@@ -137,12 +196,14 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
           <div className={css.cardHead}><h3>{item.name}</h3>{records.length ? <Pill>{t('pluginMarketInstalledTab')}</Pill> : null}</div>
           <p className={css.description}>{item.description || t('pluginMarketNoDescription')}</p>
           <p className={css.meta}>{marketName}{tab === 'installed' && records[0]?.version ? ` · ${records[0].version}` : ''}</p>
+          {records.map(record => <p key={record.scope} className={css.installPath}>{t('pluginMarketInstallPath', { scope: t(record.scope === 'project' ? 'pluginMarketProject' : 'pluginMarketUser'), path: record.installPath })}</p>)}
           <div className={css.actions}>
             {(['project', 'user'] as const).map(installScope => {
               const present = records.some(record => record.scope === installScope)
               const busy = working?.id === item.id && working.scope === installScope
               return <Button key={installScope} size="sm" variant={installScope === 'project' && !present ? 'primary' : 'outline'} className={installScope === 'project' && !present ? css.projectInstall : undefined} disabled={blocked || !!working || !recordsReady} onClick={() => { void perform(item, installScope) }}>
-                {t(busy ? present ? 'pluginMarketUninstalling' : 'pluginMarketInstalling' : present ? 'pluginMarketUninstall' : 'pluginMarketInstall')} · {t(installScope === 'project' ? 'pluginMarketProject' : 'pluginMarketUser')}
+                {busy && operating ? <span className={css.spinning} aria-hidden="true"><IconRefreshOutline14 /></span> : null}
+                {t(busy ? working?.choosing ? 'pluginMarketChoosingDirectory' : working?.uninstall ? 'pluginMarketUninstalling' : 'pluginMarketInstalling' : present ? 'pluginMarketUninstall' : 'pluginMarketInstall')} · {t(installScope === 'project' ? 'pluginMarketProject' : 'pluginMarketUser')}
               </Button>
             })}
           </div>
@@ -150,5 +211,6 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
       })}
     </div>
     {!loading && hasData && (showMarkets ? filteredMarkets : filteredPlugins).length === 0 ? <p className={css.state}>{t('pluginMarketEmpty')}</p> : null}
+    {picker ? <PluginProjectPicker request={picker} initialPath={projectPath} onPicked={finishPicker} onCancel={() => finishPicker(null)} onError={text => { setMessage({ text, error: true }); finishPicker(null) }} /> : null}
   </section>
 }

package/src/client/PluginProjectPicker.tsx

@@ -0,0 +1,73 @@
+/** Native chooser first; the host browse backend supplies the remote Web dialog. */
+import { useEffect, useRef, useState } from 'react'
+import { Button, Input, Modal } from '@deepseek-ai/dsh-client-ui-primitives'
+import { api } from './api.ts'
+import { t } from './locales.ts'
+import { IconFolderOpen16 } from './icons.tsx'
+import type { PluginProjectDirectories, PluginProjectPick } from '../plugin-market-shared.ts'
+import css from './PluginMarketView.module.css'
+
+export interface PluginProjectRequest {
+  result: Promise<PluginProjectPick>
+  controller: AbortController
+  finish: (path: string | null) => void
+}
+
+export function PluginProjectPicker({ request, initialPath, onPicked, onCancel, onError }: {
+  request: PluginProjectRequest
+  initialPath?: string
+  onPicked: (path: string) => void
+  onCancel: () => void
+  onError: (message: string) => void
+}): JSX.Element | null {
+  const [browse, setBrowse] = useState(false)
+  const [path, setPath] = useState(initialPath ?? '')
+  const [draft, setDraft] = useState(initialPath ?? '')
+  const [listing, setListing] = useState<PluginProjectDirectories>()
+  const [loading, setLoading] = useState(true)
+  const [error, setError] = useState('')
+  const [revision, setRevision] = useState(0)
+  const callbacks = useRef({ onPicked, onCancel, onError })
+  callbacks.current = { onPicked, onCancel, onError }
+  useEffect(() => {
+    let active = true
+    void request.result.then(result => {
+      if (!active) return
+      if (result.kind === 'browse') setBrowse(true)
+      else if (result.path === null) callbacks.current.onCancel()
+      else callbacks.current.onPicked(result.path)
+    }).catch(cause => { if (active) callbacks.current.onError(cause instanceof Error ? cause.message : String(cause)) })
+    return () => { active = false }
+  }, [request])
+  useEffect(() => {
+    if (!browse) return
+    const controller = new AbortController()
+    let active = true
+    setLoading(true); setListing(undefined); setError('')
+    void api.pluginProjectDirectories(path || undefined, controller.signal).then(value => {
+      if (active) { setListing(value); setDraft(value.path); setLoading(false) }
+    }).catch(cause => {
+      if (active) { setError(cause instanceof Error ? cause.message : String(cause)); setLoading(false) }
+    })
+    return () => { active = false; controller.abort() }
+  }, [browse, path, revision])
+  const navigate = (next: string): void => { setLoading(true); setListing(undefined); setPath(next); setRevision(value => value + 1) }
+  if (!browse) return null
+  return <Modal open title={t('pluginMarketChooseProject')} description={t('pluginMarketProjectHint')} closeLabel={t('cancel')} onClose={onCancel} className={css.projectPicker}
+    footer={<><Button variant="outline" onClick={onCancel}>{t('cancel')}</Button><Button variant="primary" disabled={loading || !listing} onClick={() => { if (listing) onPicked(listing.path) }}>{t('pluginMarketSelectDirectory')}</Button></>}>
+    <form className={css.directoryPath} onSubmit={event => { event.preventDefault(); navigate(draft) }}>
+      <Input data-modal-autofocus disabled={loading} aria-label={t('pluginMarketDirectoryPath')} value={draft} onChange={event => setDraft(event.target.value)} />
+      <Button type="submit" variant="outline" disabled={loading}>{t('pluginMarketOpenDirectory')}</Button>
+    </form>
+    <nav className={css.directoryCrumbs} aria-label={t('pluginMarketDirectoryPath')}>
+      <Button size="sm" variant="ghost" disabled={loading} onClick={() => navigate('')}>{t('pluginMarketHomeDirectory')}</Button>
+      {listing?.crumbs.map(crumb => <Button key={crumb.path} size="sm" variant="ghost" disabled={loading} onClick={() => navigate(crumb.path)}>{crumb.name}</Button>)}
+    </nav>
+    {error ? <p className={css.error} role="alert">{error}</p> : null}
+    {loading ? <p className={css.state} role="status">{t('pluginMarketLoading')}</p> : null}
+    <div className={css.directoryList} aria-busy={loading}>
+      {listing?.entries.map(entry => <button key={entry.path} type="button" onClick={() => navigate(entry.path)}><IconFolderOpen16 />{entry.name}</button>)}
+    </div>
+    {listing?.truncated ? <p className={css.state}>{t('pluginMarketDirectoryTruncated')}</p> : null}
+  </Modal>
+}

package/src/client/api.ts

@@ -8,7 +8,7 @@
  */
 import { encodeHtmlUrl } from '../html-route.ts'
 import type { BrowserProbeResult } from './browser.ts'
-import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope } from '../plugin-market-shared.ts'
+import type { MarketplaceCatalog, MarketplacePlugin, InstalledMarketplacePlugin, PluginMarketScope, PluginProjectPick, PluginProjectDirectories } from '../plugin-market-shared.ts'
 
 /** One wire failure. */
 export class SidebarApiError extends Error {
@@ -288,12 +288,14 @@ function gitPayload(scope: SessionScope, worktree: string | undefined, extra: Re
 
 /** The sidebar API surface (session scope threaded through every call). */
 export const api = {
-  pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => call<{ sessionId: string; cwd: string }>('plugins.context', scopePayload(scope, {}), signal),
+  pluginMarketContext: (scope: SessionScope, signal?: AbortSignal) => call<{ sessionId: string; cwd?: string }>('plugins.context', scopePayload(scope, {}), signal),
+  pluginProjectPick: (signal?: AbortSignal) => call<PluginProjectPick>('plugins.project.pick', {}, signal),
+  pluginProjectDirectories: (path?: string, signal?: AbortSignal) => call<PluginProjectDirectories>('plugins.project.directories', { path }, signal),
   pluginMarketplaces: (signal?: AbortSignal) => call<MarketplaceCatalog>('plugins.marketplaces', {}, signal),
   pluginCatalog: (marketplaceId: string, signal?: AbortSignal) => call<MarketplacePlugin[] | { plugins: MarketplacePlugin[]; warning: string }>('plugins.catalog', { marketplaceId, includeMetadata: true }, signal),
-  pluginsInstalled: (scope: SessionScope, signal?: AbortSignal) => call<InstalledMarketplacePlugin[]>('plugins.installed', scopePayload(scope, {}), signal),
-  pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => call<InstalledMarketplacePlugin>('plugins.install', scopePayload(scope, { pluginId, scope: installScope })),
-  pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope) => call<{ ok: true }>('plugins.uninstall', scopePayload(scope, { pluginId, scope: installScope })),
+  pluginsInstalled: (scope: SessionScope, signal?: AbortSignal, projectPath?: string) => call<InstalledMarketplacePlugin[]>('plugins.installed', scopePayload(scope, { projectPath }), signal),
+  pluginInstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => call<InstalledMarketplacePlugin>('plugins.install', scopePayload(scope, { pluginId, scope: installScope, projectPath })),
+  pluginUninstall: (scope: SessionScope, pluginId: string, installScope: PluginMarketScope, projectPath?: string) => call<{ ok: true }>('plugins.uninstall', scopePayload(scope, { pluginId, scope: installScope, projectPath })),
   chatcodeStatus: (signal?: AbortSignal) => call<ChatCodeAuthState>('chatcode.status', {}, signal),
   chatcodeStart: () => call<{ sessionId: string; url: string }>('chatcode.start', {}),
   chatcodeCancel: (sessionId: string) => call<{ ok: true }>('chatcode.cancel', { sessionId }),

package/src/client/locales-ja.ts

@@ -30,13 +30,25 @@ export const ja: Record<string, string> = {
   pluginMarketUser: 'ユーザー',
   pluginMarketInstalled: 'プラグインをインストールしました。',
   pluginMarketUninstalled: 'プラグインをアンインストールしました。',
-  pluginMarketSubtitle: 'マーケットを参照し、プロジェクトまたはユーザー環境にインストールします。',
+  pluginMarketSubtitle: 'マーケットを参照し、プロジェクトディレクトリを選ぶかユーザー環境にインストールします。',
+  pluginMarketChooseProject: 'プロジェクトディレクトリを選択',
+  pluginMarketProjectHint: 'プロジェクトにインストールする場合は対象フォルダーを選択してください。',
+  pluginMarketChoosingDirectory: 'ディレクトリを選択中…',
+  pluginMarketInstalledAt: 'プラグインのインストール先：{path}',
+  pluginMarketInstallPath: '{scope}のインストール先：{path}',
+  pluginMarketDirectoryPath: 'ディレクトリパス',
+  pluginMarketOpenDirectory: 'ディレクトリを開く',
+  pluginMarketSelectDirectory: 'このディレクトリを選択',
+  pluginMarketHomeDirectory: 'ホーム',
+  pluginMarketDirectoryTruncated: '一部のフォルダーのみ表示しています。完全なパスを入力してプロジェクトを開けます。',
   pluginMarketSearch: 'マーケットやプラグインを検索',
   pluginMarketDefault: 'デフォルト',
   pluginMarketBrowse: 'プラグインを見る',
   pluginMarketNoDescription: '説明なし',
   pluginMarketInstalling: 'インストール中…',
   pluginMarketUninstalling: 'アンインストール中…',
+  pluginMarketInstallProgress: '{name} をインストールしています。しばらくお待ちください…',
+  pluginMarketUninstallProgress: '{name} をアンインストールしています。しばらくお待ちください…',
   accountMenuSettings: '設定',
   accountMenuLogout: 'ログアウト',
   accountMenuLogoutConfirmTitle: 'ログアウトしますか？',