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

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

@@ -40,6 +40,10 @@ export declare const zh: {
     pluginMarketChooseProject: string;
     pluginMarketProjectHint: string;
     pluginMarketChoosingDirectory: string;
+    pluginMarketAwaitingConfirmation: string;
+    pluginMarketConfirmProjectInstall: string;
+    pluginMarketConfirmProjectDescription: string;
+    pluginMarketConfirmInstall: string;
     pluginMarketInstalledAt: string;
     pluginMarketInstallPath: string;
     pluginMarketDirectoryPath: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@chatcode/cco-better-sidebar",
-  "version": "0.18.0-rc.6",
+  "version": "0.18.0-rc.7",
   "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

@@ -9,6 +9,7 @@
 .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)); }
+.confirmPath { margin: 0; padding: 12px; border: 1px solid var(--dsw-alias-border-l2); border-radius: 8px; color: var(--dsw-alias-label-primary); overflow-wrap: anywhere; white-space: pre-wrap; }
 .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; }

package/src/client/PluginMarketView.tsx

@@ -1,6 +1,6 @@
 /** Two catalog levels with project/user actions directly on plugin cards. */
 import { useEffect, useRef, useState, useSyncExternalStore } from 'react'
-import { Button, Input, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
+import { Button, Input, Modal, Pill } from '@deepseek-ai/dsh-client-ui-primitives'
 import { api, type SessionScope } from './api.ts'
 import { t } from './locales.ts'
 import { IconChevronLeftOutline14, IconChevronRightOutline14, IconRefreshOutline14 } from './icons.tsx'
@@ -9,6 +9,8 @@ import type { InstalledMarketplacePlugin, MarketplacePlugin, PluginMarketScope }
 import css from './PluginMarketView.module.css'
 import { PluginProjectPicker, type PluginProjectRequest } from './PluginProjectPicker.tsx'
 
+interface ProjectInstallConfirmation { name: string; path: string; finish: (confirmed: boolean) => void }
+
 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)
@@ -16,7 +18,9 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
   const [query, setQuery] = 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; name: string; scope: PluginMarketScope; uninstall: boolean; choosing?: boolean }>()
+  const [working, setWorking] = useState<{ id: string; name: string; scope: PluginMarketScope; uninstall: boolean; confirming?: boolean }>()
+  const [confirmation, setConfirmation] = useState<ProjectInstallConfirmation>()
+  const confirmationRef = useRef<ProjectInstallConfirmation>()
   const [selection, setSelection] = useState<{ key: string; path: string }>()
   const [picker, setPicker] = useState<PluginProjectRequest>()
   const pickerRef = useRef<PluginProjectRequest>()
@@ -37,7 +41,7 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
   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 operating = !!working && !working.choosing
+  const operating = !!working && !working.confirming
   const blocked = loading || snapshot.refresh?.status === 'error' || !!working
 
   useEffect(() => {
@@ -49,9 +53,15 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
   useEffect(() => { if (focusBack.current) { breadcrumbNode.current?.querySelector('button')?.focus(); focusBack.current = false } }, [marketId])
 
   useEffect(() => { setMessage(undefined) }, [scopeKey])
+  useEffect(() => {
+    confirmationRef.current?.finish(false)
+    confirmationRef.current = undefined
+    setConfirmation(undefined)
+  }, [scopeKey, visible])
   useEffect(() => () => {
     pickerRef.current?.controller.abort()
     pickerRef.current?.finish(null)
+    confirmationRef.current?.finish(false)
   }, [])
   useEffect(() => {
     if (!visible) return
@@ -88,6 +98,17 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
     pickerRef.current = undefined
     setPicker(undefined)
   }
+  const confirmProjectInstall = (name: string, path: string): Promise<boolean> => new Promise(finish => {
+    const request = { name, path, finish }
+    confirmationRef.current = request
+    setConfirmation(request)
+  })
+  const finishConfirmation = (confirmed: boolean): void => {
+    const request = confirmationRef.current
+    confirmationRef.current = undefined
+    setConfirmation(undefined)
+    request?.finish(confirmed)
+  }
   const chooseProject = async (): Promise<void> => {
     if (pending.current || blocked) return
     pending.current = true
@@ -106,18 +127,20 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
     const key = scopeKey
     const record = installed.find(item => item.id === plugin.id && item.scope === installScope)
     const present = !!record
+    if (installScope === 'project' && !present && !projectPath) {
+      setMessage({ text: t('pluginMarketProjectHint'), error: true })
+      return
+    }
     pending.current = true
     mutationVersion.current++
     const operation = { id: plugin.id, name: plugin.name, scope: installScope, uninstall: present }
-    setWorking({ ...operation, choosing: installScope === 'project' && !present })
+    setWorking({ ...operation, confirming: installScope === 'project' && !present })
     setMessage(undefined)
     try {
       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 })
+        const confirmed = await confirmProjectInstall(plugin.name, target!)
+        if (!confirmed || latestScope.current !== key) return
         setWorking(operation)
       }
       let installedPath = ''
@@ -203,7 +226,7 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
               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) }}>
                 {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')}
+                {t(busy ? working?.confirming ? 'pluginMarketAwaitingConfirmation' : working?.uninstall ? 'pluginMarketUninstalling' : 'pluginMarketInstalling' : present ? 'pluginMarketUninstall' : 'pluginMarketInstall')} · {t(installScope === 'project' ? 'pluginMarketProject' : 'pluginMarketUser')}
               </Button>
             })}
           </div>
@@ -211,6 +234,10 @@ export function PluginMarketView({ scope, visible, catalog }: { scope: SessionSc
       })}
     </div>
     {!loading && hasData && (showMarkets ? filteredMarkets : filteredPlugins).length === 0 ? <p className={css.state}>{t('pluginMarketEmpty')}</p> : null}
+    {confirmation ? <Modal open title={t('pluginMarketConfirmProjectInstall')} description={t('pluginMarketConfirmProjectDescription', { name: confirmation.name })} closeLabel={t('cancel')} onClose={() => finishConfirmation(false)} className={css.projectPicker}
+      footer={<><Button variant="outline" data-modal-autofocus onClick={() => finishConfirmation(false)}>{t('cancel')}</Button><Button variant="primary" onClick={() => finishConfirmation(true)}>{t('pluginMarketConfirmInstall')}</Button></>}>
+      <p className={css.confirmPath}>{confirmation.path}</p>
+    </Modal> : 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/locales-ja.ts

@@ -34,6 +34,10 @@ export const ja: Record<string, string> = {
   pluginMarketChooseProject: 'プロジェクトディレクトリを選択',
   pluginMarketProjectHint: 'プロジェクトにインストールする場合は対象フォルダーを選択してください。',
   pluginMarketChoosingDirectory: 'ディレクトリを選択中…',
+  pluginMarketAwaitingConfirmation: '確認待ち…',
+  pluginMarketConfirmProjectInstall: 'プロジェクトへのインストールを確認',
+  pluginMarketConfirmProjectDescription: '{name} を以下のプロジェクトディレクトリにインストールします。変更する場合はキャンセルし、ページ上部でディレクトリを選択してください。',
+  pluginMarketConfirmInstall: 'インストールを確認',
   pluginMarketInstalledAt: 'プラグインのインストール先：{path}',
   pluginMarketInstallPath: '{scope}のインストール先：{path}',
   pluginMarketDirectoryPath: 'ディレクトリパス',

package/src/client/locales.ts

@@ -41,6 +41,10 @@ export const zh = {
   pluginMarketChooseProject: '选择项目目录',
   pluginMarketProjectHint: '安装到项目时，请先选择目标项目文件夹。',
   pluginMarketChoosingDirectory: '正在选择目录…',
+  pluginMarketAwaitingConfirmation: '等待确认…',
+  pluginMarketConfirmProjectInstall: '确认项目级安装',
+  pluginMarketConfirmProjectDescription: '将把 {name} 安装到以下项目目录。如需更改，请取消后在顶部选择项目目录。',
+  pluginMarketConfirmInstall: '确认安装',
   pluginMarketInstalledAt: '插件已安装到：{path}',
   pluginMarketInstallPath: '{scope}安装目录：{path}',
   pluginMarketDirectoryPath: '目录路径',
@@ -547,6 +551,10 @@ export const en: Record<keyof typeof zh, string> = {
   pluginMarketChooseProject: 'Choose project directory',
   pluginMarketProjectHint: 'Choose a target project folder when installing for a project.',
   pluginMarketChoosingDirectory: 'Choosing directory…',
+  pluginMarketAwaitingConfirmation: 'Awaiting confirmation…',
+  pluginMarketConfirmProjectInstall: 'Confirm project installation',
+  pluginMarketConfirmProjectDescription: '{name} will be installed in the project directory below. To change it, cancel and choose a project directory at the top of the page.',
+  pluginMarketConfirmInstall: 'Confirm installation',
   pluginMarketInstalledAt: 'Plugin installed at: {path}',
   pluginMarketInstallPath: '{scope} installation directory: {path}',
   pluginMarketDirectoryPath: 'Directory path',
@@ -1083,6 +1091,10 @@ const accountAndModelFallback = {
   pluginMarketChooseProject: en.pluginMarketChooseProject,
   pluginMarketProjectHint: en.pluginMarketProjectHint,
   pluginMarketChoosingDirectory: en.pluginMarketChoosingDirectory,
+  pluginMarketAwaitingConfirmation: en.pluginMarketAwaitingConfirmation,
+  pluginMarketConfirmProjectInstall: en.pluginMarketConfirmProjectInstall,
+  pluginMarketConfirmProjectDescription: en.pluginMarketConfirmProjectDescription,
+  pluginMarketConfirmInstall: en.pluginMarketConfirmInstall,
   pluginMarketInstalledAt: en.pluginMarketInstalledAt,
   pluginMarketInstallPath: en.pluginMarketInstallPath,
   pluginMarketDirectoryPath: en.pluginMarketDirectoryPath,