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

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,15 +30,29 @@ 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: 'ログアウトしますか？',
+  accountMenuLogoutConfirmDescription: 'ChatCode CLI からログアウトしますか？続行するには再度ログインする必要があります。',
   accountMenuLabel: 'アカウントメニュー',
   updateMenu: '更新を確認 / 今すぐ更新',
   updateNav: '更新',

package/src/client/locales.ts

@@ -37,15 +37,29 @@ export const zh = {
   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: '退出登录？',
+  accountMenuLogoutConfirmDescription: '确定要退出 ChatCode CLI 吗？退出后需要重新登录才能继续使用。',
   accountMenuLabel: '账户菜单',
   updateMenu: '检查更新 / 一键更新',
   updateNav: '更新',
@@ -529,15 +543,29 @@ export const en: Record<keyof typeof zh, string> = {
   pluginMarketUser: 'User',
   pluginMarketInstalled: 'Plugin installed.',
   pluginMarketUninstalled: 'Plugin uninstalled.',
-  pluginMarketSubtitle: 'Browse marketplaces and install plugins for your project or user.',
+  pluginMarketSubtitle: 'Browse marketplaces, choose a project directory, or install for your user.',
+  pluginMarketChooseProject: 'Choose project directory',
+  pluginMarketProjectHint: 'Choose a target project folder when installing for a project.',
+  pluginMarketChoosingDirectory: 'Choosing directory…',
+  pluginMarketInstalledAt: 'Plugin installed at: {path}',
+  pluginMarketInstallPath: '{scope} installation directory: {path}',
+  pluginMarketDirectoryPath: 'Directory path',
+  pluginMarketOpenDirectory: 'Open directory',
+  pluginMarketSelectDirectory: 'Select this directory',
+  pluginMarketHomeDirectory: 'Home',
+  pluginMarketDirectoryTruncated: 'Only some folders are shown. Enter the full path to open your project.',
   pluginMarketSearch: 'Search marketplaces or plugins',
   pluginMarketDefault: 'Default',
   pluginMarketBrowse: 'Browse plugins',
   pluginMarketNoDescription: 'No description',
   pluginMarketInstalling: 'Installing…',
   pluginMarketUninstalling: 'Uninstalling…',
+  pluginMarketInstallProgress: 'Installing {name}, please wait…',
+  pluginMarketUninstallProgress: 'Uninstalling {name}, please wait…',
   accountMenuSettings: 'Settings',
   accountMenuLogout: 'Log out',
+  accountMenuLogoutConfirmTitle: 'Log out?',
+  accountMenuLogoutConfirmDescription: 'Are you sure you want to log out of ChatCode CLI? You will need to sign in again to continue.',
   accountMenuLabel: 'Account menu',
   updateMenu: 'Check for updates / Update now',
   updateNav: 'Update',
@@ -1034,9 +1062,44 @@ import { zhHK as zhHKDict } from './locales-zh-HK.ts'
 import { zhTW as zhTWDict } from './locales-zh-TW.ts'
 import { zhMO as zhMODict } from './locales-zh-MO.ts'
 
-// English fallback for the new account/model surfaces until third-language translations are supplied.
+// English fallback for the new account/model/marketplace surfaces until third-language translations are supplied.
 // Keep this list explicit so the dictionary parity check still catches other missing keys.
 const accountAndModelFallback = {
+  pluginMarketTitle: en.pluginMarketTitle,
+  pluginMarketProjectDirectory: en.pluginMarketProjectDirectory,
+  pluginMarketInstalledTab: en.pluginMarketInstalledTab,
+  pluginMarketRefresh: en.pluginMarketRefresh,
+  pluginMarketLoading: en.pluginMarketLoading,
+  pluginMarketRefreshing: en.pluginMarketRefreshing,
+  pluginMarketEmpty: en.pluginMarketEmpty,
+  pluginMarketBack: en.pluginMarketBack,
+  pluginMarketInstall: en.pluginMarketInstall,
+  pluginMarketUninstall: en.pluginMarketUninstall,
+  pluginMarketProject: en.pluginMarketProject,
+  pluginMarketUser: en.pluginMarketUser,
+  pluginMarketInstalled: en.pluginMarketInstalled,
+  pluginMarketUninstalled: en.pluginMarketUninstalled,
+  pluginMarketSubtitle: en.pluginMarketSubtitle,
+  pluginMarketChooseProject: en.pluginMarketChooseProject,
+  pluginMarketProjectHint: en.pluginMarketProjectHint,
+  pluginMarketChoosingDirectory: en.pluginMarketChoosingDirectory,
+  pluginMarketInstalledAt: en.pluginMarketInstalledAt,
+  pluginMarketInstallPath: en.pluginMarketInstallPath,
+  pluginMarketDirectoryPath: en.pluginMarketDirectoryPath,
+  pluginMarketOpenDirectory: en.pluginMarketOpenDirectory,
+  pluginMarketSelectDirectory: en.pluginMarketSelectDirectory,
+  pluginMarketHomeDirectory: en.pluginMarketHomeDirectory,
+  pluginMarketDirectoryTruncated: en.pluginMarketDirectoryTruncated,
+  pluginMarketSearch: en.pluginMarketSearch,
+  pluginMarketDefault: en.pluginMarketDefault,
+  pluginMarketBrowse: en.pluginMarketBrowse,
+  pluginMarketNoDescription: en.pluginMarketNoDescription,
+  pluginMarketInstalling: en.pluginMarketInstalling,
+  pluginMarketUninstalling: en.pluginMarketUninstalling,
+  pluginMarketInstallProgress: en.pluginMarketInstallProgress,
+  pluginMarketUninstallProgress: en.pluginMarketUninstallProgress,
+  accountMenuLogoutConfirmTitle: en.accountMenuLogoutConfirmTitle,
+  accountMenuLogoutConfirmDescription: en.accountMenuLogoutConfirmDescription,
   chatcodeGateChecking: en.chatcodeGateChecking,
   chatcodeGateUnverified: en.chatcodeGateUnverified,
   chatcodeGatePending: en.chatcodeGatePending,

package/src/client/sidebar.module.css

@@ -442,13 +442,11 @@
   box-sizing: border-box;
   gap: 8px;
   width: 100%;
-  min-height: 52px;
-  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
+  min-height: 44px;
+  padding: 8px 12px max(8px, env(safe-area-inset-bottom));
   border-radius: 0;
   background: var(--dsw-alias-bg-layer-1);
-  font-family: var(--dsw-font-family-body);
-  font-size: var(--dsw-font-size-body-sm);
-  line-height: var(--dsw-font-line-height-body-sm);
+  font: var(--dsw-font-xs-13);
   transition: background var(--ds-transition-duration-slow) var(--ds-ease-in-out);
 }
 
@@ -466,18 +464,21 @@
 .accountAvatar {
   position: relative;
   display: grid;
-  width: 28px;
-  height: 28px;
+  box-sizing: border-box;
+  width: 24px;
+  height: 24px;
   flex: none;
   place-items: center;
   border-radius: 50%;
   background: var(--dsw-alias-bg-layer-3);
   border: 1px solid var(--dsw-alias-border-l2);
   color: var(--dsw-alias-fg-accent);
+  font: var(--dsw-font-xxs-12);
   font-weight: 600;
 }
 
 .accountName {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -490,10 +491,10 @@
   left: 8px;
   display: grid;
   box-sizing: border-box;
-  width: min(252px, calc(100% - 16px));
-  padding: 10px 8px 8px;
+  width: min(224px, calc(100% - 16px));
+  padding: 8px 6px 6px;
   border: 1px solid var(--dsw-alias-border-l2);
-  border-radius: 12px;
+  border-radius: 10px;
   background: var(--dsw-alias-bg-layer-2);
   z-index: 1;
 }
@@ -502,16 +503,15 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 36px;
-  padding: 0 8px 8px;
-  font-family: var(--dsw-font-family-body);
-  font-size: var(--dsw-font-size-body-sm);
-  line-height: var(--dsw-font-line-height-body-sm);
+  min-width: 0;
+  min-height: 28px;
+  padding: 0 6px 6px;
+  font: var(--dsw-font-xs-13);
 }
 
 .accountMenuDivider {
   height: 1px;
-  margin: 0 4px 6px;
+  margin: 0 4px 4px;
   background: var(--dsw-alias-border-l2);
 }
 
@@ -519,12 +519,12 @@
   display: flex;
   align-items: center;
   gap: 8px;
-  min-height: 32px;
-  padding: 0 10px;
+  min-height: 30px;
+  padding: 0 8px;
   border-radius: 7px;
   background: transparent;
   text-align: left;
-  font: var(--dsw-font-s-14);
+  font: var(--dsw-font-xs-13);
 }
 
 .accountItem:hover {
@@ -546,6 +546,68 @@
   border-color: var(--dsw-alias-bg-layer-1);
 }
 
+/* The native top layer is viewport-centered even though the account rail is positioned. */
+.accountLogoutDialog {
+  box-sizing: border-box;
+  width: min(400px, calc(100vw - 32px));
+  max-width: calc(100vw - 32px);
+  max-height: calc(100dvh - 32px);
+  margin: auto;
+  padding: 24px;
+  overflow: auto;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 16px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-fg-base);
+  font: var(--dsw-font-s-14);
+}
+
+.accountLogoutDialog::backdrop {
+  background: var(--dsw-alias-bg-mask-1);
+}
+
+.accountLogoutTitle {
+  margin: 0;
+  font: var(--dsw-font-base-strong-16);
+}
+
+.accountLogoutDescription {
+  margin: 12px 0 24px;
+  color: var(--dsw-alias-label-secondary);
+}
+
+.accountLogoutActions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: 8px;
+}
+
+.accountLogoutActions button {
+  min-height: 34px;
+  padding: 6px 14px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-layer-2);
+  color: var(--dsw-alias-fg-base);
+  font: var(--dsw-font-xs-13);
+  cursor: pointer;
+}
+
+.accountLogoutActions button:hover {
+  background: var(--dsw-alias-bg-hover);
+}
+
+.accountLogoutActions button:focus-visible {
+  outline: 2px solid var(--dsw-alias-border-accent);
+  outline-offset: 2px;
+}
+
+.accountLogoutActions .accountLogoutConfirm {
+  border-color: var(--dsw-alias-state-error-primary);
+  color: var(--dsw-alias-state-error-primary);
+}
+
 /* The compatibility action cluster used when the host exposes no native
    right-sidebar affordance. It stays pinned to the viewport corner, sitting
    flush in the 34px tab strip (28px buttons at top: 3) whose right end it