@jetcrab/pi-desk 1.1.1-dev → 1.1.5-dev

package/src/client/l2_biz/pi-settings/l2-pi-settings.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { PlusIcon } from 'lucide-react'
+import { LoaderCircleIcon, PlusIcon } from 'lucide-react'
 import { useId, useMemo } from 'react'
 import type { BrowserBeforeLeaveHandler } from '@jetcrab/pi-desk-sdk/browser'
 import { useL4AppSocket } from '@client/l4_foundation/realtime/app-socket/l4-app-socket'
@@ -43,14 +43,12 @@ export function L2PiSettings({
     )
   }, [projects, focusedCwd])
   const scopeLabel =
-    state.cwd === null
+    state.displayCwd === null
       ? t('全局')
-      : `${scopeOptions.find((project) => project.cwd === state.cwd)?.projectName ?? t('当前项目')} · ${state.cwd}`
+      : `${scopeOptions.find((project) => project.cwd === state.displayCwd)?.projectName ?? t('当前项目')} · ${state.displayCwd}`
   const editing = Boolean(state.editor && state.mcp)
-  const empty = Boolean(
-    state.mcp && !state.loading && !state.loadError && !editing && state.rows.length === 0
-  )
   const busy = state.pending || Boolean(state.check?.loading)
+  const disabled = busy || !state.ready
   const selectedName = state.editor?.kind === 'manual' ? state.editor.draft.originalName : null
   const addManually = (): void => {
     void state.navigate(() => state.startManual(null))
@@ -64,35 +62,30 @@ export function L2PiSettings({
   return (
     <section aria-label="MCP" className="@container/mcp flex h-full min-h-0 min-w-0 flex-col">
       {state.dialog}
-      <header
-        className={cn(
-          'grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b p-4',
-          !empty && '@min-[40rem]/mcp:grid-cols-[auto_minmax(0,1fr)_auto]'
-        )}
-      >
-        <h2 className="text-xl font-semibold">MCP</h2>
-        {!empty && (
-          <div className="col-start-2 flex flex-wrap justify-end gap-2 @min-[40rem]/mcp:col-start-3 @min-[40rem]/mcp:self-end">
-            <Button disabled={busy || state.loading || !state.mcp} onClick={addManually}>
-              <PlusIcon aria-hidden="true" />
-              {t('添加服务')}
-            </Button>
-            <Button
-              variant="outline"
-              disabled={busy || state.loading || !state.mcp}
-              onClick={importJson}
-            >
-              {t('导入 JSON')}
-            </Button>
-          </div>
-        )}
+      <header className="grid shrink-0 grid-cols-[minmax(0,1fr)_auto] items-center gap-3 border-b p-4 @min-[40rem]/mcp:grid-cols-[auto_minmax(0,1fr)_auto]">
+        <h2 className="flex items-center gap-2 text-xl font-semibold">
+          MCP
+          <span className="inline-flex size-4">
+            {state.loading && (
+              <LoaderCircleIcon
+                role="status"
+                aria-label={t('正在读取配置…')}
+                className="size-4 animate-spin text-muted-foreground"
+              />
+            )}
+          </span>
+        </h2>
+        <div className="col-start-2 flex flex-wrap justify-end gap-2 @min-[40rem]/mcp:col-start-3 @min-[40rem]/mcp:self-end">
+          <Button disabled={disabled} onClick={addManually}>
+            <PlusIcon aria-hidden="true" />
+            {t('添加服务')}
+          </Button>
+          <Button variant="outline" disabled={disabled} onClick={importJson}>
+            {t('导入 JSON')}
+          </Button>
+        </div>
         {/* Select 尾随隐藏输入，space-y 会给选择框追加底部间距；并排工具栏中需清除。 */}
-        <div
-          className={cn(
-            'col-span-2 row-start-2 w-full @min-[40rem]/mcp:col-span-1 @min-[40rem]/mcp:col-start-2 @min-[40rem]/mcp:row-start-1 @min-[40rem]/mcp:max-w-80 @min-[40rem]/mcp:justify-self-end @min-[40rem]/mcp:[&_[data-slot=select-trigger]]:mb-0',
-            empty && '@min-[40rem]/mcp:w-56'
-          )}
-        >
+        <div className="col-span-2 row-start-2 w-full @min-[40rem]/mcp:col-span-1 @min-[40rem]/mcp:col-start-2 @min-[40rem]/mcp:row-start-1 @min-[40rem]/mcp:max-w-80 @min-[40rem]/mcp:justify-self-end @min-[40rem]/mcp:[&_[data-slot=select-trigger]]:mb-0">
           <L2PiSettingsSelect
             id={`${id}-scope`}
             label={t('配置范围')}
@@ -106,8 +99,7 @@ export function L2PiSettings({
               }))
             ]}
             onChange={(value) => {
-              if (value !== (state.cwd ?? ''))
-                void state.navigate(() => state.setCwd(value || null))
+              void state.setCwd(value || null)
             }}
           />
         </div>
@@ -132,19 +124,20 @@ export function L2PiSettings({
           ))}
         </div>
       )}
-      {state.loadError ? (
+      {state.loadError && (
         <div className="space-y-3 p-4">
           <L2PiSettingsError message={state.loadError} />
           <Button variant="outline" onClick={state.retry} disabled={state.loading}>
             {t('重试')}
           </Button>
         </div>
-      ) : state.loading && !editing ? (
+      )}
+      {state.loading && !state.mcp ? (
         <p role="status" className="p-4 text-sm text-muted-foreground">
           {t('正在读取配置…')}
         </p>
       ) : state.mcp ? (
-        <div className="flex min-h-0 min-w-0 flex-1">
+        <div aria-busy={state.loading} className="flex min-h-0 min-w-0 flex-1">
           {state.editor?.kind !== 'json' && state.rows.length > 0 && (
             <div
               className={cn(
@@ -162,7 +155,7 @@ export function L2PiSettings({
               <L2McpSettingsList
                 rows={state.rows}
                 selectedName={selectedName}
-                pending={busy}
+                pending={disabled}
                 onSelect={(row) => {
                   if (selectedName === row.name) return
                   void state.navigate(() =>
@@ -179,11 +172,12 @@ export function L2PiSettings({
               key={state.editor.kind === 'manual' ? (selectedName ?? 'new') : 'json'}
               editor={state.editor}
               scopeLabel={scopeLabel}
-              project={state.cwd !== null}
+              project={state.displayCwd !== null}
               projectTrusted={state.mcp.projectTrusted}
               local={state.mcp.local}
               inherited={state.mcp.inherited}
-              pending={busy}
+              pending={disabled}
+              saving={state.pending}
               error={state.error}
               check={state.check?.name === selectedName ? state.check : null}
               onDraft={state.updateDraft}
@@ -200,7 +194,7 @@ export function L2PiSettings({
               onDismissCheck={state.dismissCheck}
             />
           ) : state.rows.length === 0 ? (
-            <L2McpSettingsEmpty pending={busy} onAdd={addManually} onImport={importJson} />
+            <L2McpSettingsEmpty pending={disabled} onAdd={addManually} onImport={importJson} />
           ) : null}
         </div>
       ) : null}

package/src/client/l2_biz/pi-settings/views/l2-mcp-settings-editor.tsx

@@ -27,6 +27,7 @@ export function L2McpSettingsEditor({
   local,
   inherited,
   pending,
+  saving,
   error,
   onDraft,
   onJson,
@@ -45,6 +46,7 @@ export function L2McpSettingsEditor({
   local: Record<string, L2McpServerConfig>
   inherited: Record<string, L2McpServerConfig>
   pending: boolean
+  saving: boolean
   error: { field: string; message: string } | null
   onDraft: (patch: Partial<L2McpDraft>) => void
   onJson: (text: string) => void
@@ -402,7 +404,7 @@ export function L2McpSettingsEditor({
               (!editor.preview || (collisions.length > 0 && !editor.overwrite)))
           }
         >
-          {t(check?.loading ? '正在测试连接…' : pending ? '保存中…' : '保存')}
+          {t(check?.loading ? '正在测试连接…' : saving ? '保存中…' : '保存')}
         </Button>
       </footer>
     </form>

package/src/client/l2_biz/pi-settings/views/l2-mcp-settings-list.tsx

@@ -28,7 +28,7 @@ export function L2McpSettingsList({
               disabled={pending}
               onClick={() => onSelect(row)}
               className={cn(
-                'flex w-full min-w-0 cursor-pointer items-center gap-3 p-4 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-default disabled:opacity-50',
+                'flex w-full min-w-0 cursor-pointer items-center gap-3 p-4 text-left outline-none transition-colors hover:bg-accent focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring disabled:cursor-default',
                 selectedName === row.name && 'bg-accent'
               )}
             >

package/src/client/l2_biz/plugin-host/hooks/l2-use-plugin-catalog.ts

@@ -185,7 +185,6 @@ export function useL2PluginCatalog(
     const epoch = ++detailEpoch.current
     setDetailLoading(true)
     setDetailError(null)
-    setDetail(null)
     setInstallErrors((current) => {
       const next = { ...current }
       delete next[item.name]
@@ -203,6 +202,9 @@ export function useL2PluginCatalog(
   }
   const openDetail = (item: L2PluginCatalogItem): void => {
     setSelection(item)
+    setDetail(null)
+    setDownloadMode('default')
+    setDownloadRegistry('')
     void loadDetail(item)
   }
   const closeDetail = (): void => {

package/src/client/l2_biz/plugin-host/hooks/l2-use-plugin-download-source.ts

@@ -21,7 +21,10 @@ interface PluginDownloadSourceState {
   retry: () => Promise<void>
 }
 
-export function useL2PluginDownloadSource(biz: L2PluginManagementBiz): PluginDownloadSourceState {
+export function useL2PluginDownloadSource(
+  biz: L2PluginManagementBiz,
+  onSaved: () => void
+): PluginDownloadSourceState {
   const { t } = useTranslation('pluginManagement')
   const [settings, setSettings] = useState<L2PluginCatalogSettings | null>(null)
   const [mode, setMode] = useState<L2PluginDownloadSource['mode']>('auto')
@@ -85,6 +88,7 @@ export function useL2PluginDownloadSource(biz: L2PluginManagementBiz): PluginDow
       if (mounted.current) {
         setSettings(next)
         setMode(next.downloadSource.mode)
+        onSaved()
       }
     } catch (cause) {
       failedRequest.current = 'save'

package/src/client/l2_biz/plugin-host/l2-plugin-capability-details.tsx

@@ -396,14 +396,20 @@ function ToolParameters({ tool }: { tool: L2PluginManagementToolDetail }): React
         ) : (
           <p className="text-xs text-muted-foreground">{t('noArguments')}</p>
         )}
-        <details className="mt-3">
-          <summary className="cursor-pointer text-sm text-muted-foreground">
+        <Collapsible className="mt-3">
+          <CollapsibleTrigger className="group flex min-h-8 cursor-pointer items-center gap-2 text-sm text-muted-foreground outline-none focus-visible:ring-2 focus-visible:ring-ring">
+            <ChevronRightIcon
+              aria-hidden="true"
+              className="size-3.5 shrink-0 transition-transform group-aria-expanded:rotate-90"
+            />
             {t('rawSchema')}
-          </summary>
-          <pre className="mt-2 whitespace-pre-wrap break-words rounded-lg bg-muted p-3 font-mono text-sm leading-[1.6]">
-            {JSON.stringify(tool.parameters, null, 2)}
-          </pre>
-        </details>
+          </CollapsibleTrigger>
+          <CollapsibleContent keepMounted>
+            <pre className="mt-2 whitespace-pre-wrap break-words rounded-lg bg-muted p-3 font-mono text-sm leading-[1.6]">
+              {JSON.stringify(tool.parameters, null, 2)}
+            </pre>
+          </CollapsibleContent>
+        </Collapsible>
       </div>
     </div>
   )
@@ -416,9 +422,13 @@ function ToolsSection({ detail }: { detail: L2PluginManagementDetail }): React.J
     <Section title={t('toolCapabilities')} description={t('toolDescription')}>
       <div className="space-y-2">
         {detail.tools.map((tool, index) => (
-          <details key={`${tool.name}:${index}`} className="border-b py-3 last:border-b-0">
-            <summary className="cursor-pointer text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring">
-              <div className="inline-flex min-w-0 flex-wrap items-center gap-2">
+          <Collapsible key={`${tool.name}:${index}`} className="border-b py-3 last:border-b-0">
+            <CollapsibleTrigger className="group w-full cursor-pointer text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring">
+              <ChevronRightIcon
+                aria-hidden="true"
+                className="mr-2 inline-block size-3.5 shrink-0 transition-transform group-aria-expanded:rotate-90"
+              />
+              <span className="inline-flex min-w-0 flex-wrap items-center gap-2">
                 <code className="font-semibold">{tool.name}</code>
                 {tool.label && tool.label !== tool.name ? (
                   <span className="text-xs text-muted-foreground">{tool.label}</span>
@@ -429,34 +439,36 @@ function ToolsSection({ detail }: { detail: L2PluginManagementDetail }): React.J
                     {t('overridesBuiltin')}
                   </span>
                 ) : null}
-              </div>
-              <p className="mt-1.5 break-words text-sm leading-5 text-muted-foreground">
+              </span>
+              <span className="mt-1.5 block break-words text-sm leading-5 text-muted-foreground">
                 {tool.description || t('noDescription')}
-              </p>
-            </summary>
-            <ToolParameters tool={tool} />
-            {tool.promptSnippet || tool.promptGuidelines.length > 0 ? (
-              <div className="mt-3 space-y-2">
-                <div className="flex flex-wrap items-center gap-2">
-                  <p className="text-xs font-medium">{t('systemPrompts')}</p>
-                  {tool.state !== 'active' ? (
-                    <span className="text-sm text-muted-foreground">{t('inactivePrompt')}</span>
+              </span>
+            </CollapsibleTrigger>
+            <CollapsibleContent keepMounted>
+              <ToolParameters tool={tool} />
+              {tool.promptSnippet || tool.promptGuidelines.length > 0 ? (
+                <div className="mt-3 space-y-2">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <p className="text-xs font-medium">{t('systemPrompts')}</p>
+                    {tool.state !== 'active' ? (
+                      <span className="text-sm text-muted-foreground">{t('inactivePrompt')}</span>
+                    ) : null}
+                  </div>
+                  {tool.promptSnippet ? (
+                    <PromptTextBlock title="Available tools" text={tool.promptSnippet} />
+                  ) : null}
+                  {tool.promptGuidelines.length > 0 ? (
+                    <PromptTextBlock
+                      title={`Guidelines · ${tool.promptGuidelines.length}`}
+                      text={tool.promptGuidelines
+                        .map((guideline, guidelineIndex) => `${guidelineIndex + 1}. ${guideline}`)
+                        .join('\n\n')}
+                    />
                   ) : null}
                 </div>
-                {tool.promptSnippet ? (
-                  <PromptTextBlock title="Available tools" text={tool.promptSnippet} />
-                ) : null}
-                {tool.promptGuidelines.length > 0 ? (
-                  <PromptTextBlock
-                    title={`Guidelines · ${tool.promptGuidelines.length}`}
-                    text={tool.promptGuidelines
-                      .map((guideline, guidelineIndex) => `${guidelineIndex + 1}. ${guideline}`)
-                      .join('\n\n')}
-                  />
-                ) : null}
-              </div>
-            ) : null}
-          </details>
+              ) : null}
+            </CollapsibleContent>
+          </Collapsible>
         ))}
       </div>
     </Section>
@@ -474,11 +486,15 @@ function ResourceContent({
 }): React.JSX.Element {
   const { t } = useTranslation('pluginManagement')
   return (
-    <details className="mt-3">
-      <summary className="cursor-pointer py-2 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
+    <Collapsible className="mt-3">
+      <CollapsibleTrigger className="group flex min-h-8 w-full cursor-pointer items-center gap-2 py-2 text-left text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
+        <ChevronRightIcon
+          aria-hidden="true"
+          className="size-3.5 shrink-0 transition-transform group-aria-expanded:rotate-90"
+        />
         {title}
-      </summary>
-      <div className="border-t">
+      </CollapsibleTrigger>
+      <CollapsibleContent keepMounted className="border-t">
         <div className="flex justify-end px-2 pt-1">
           <CopyTextButton text={content} label={t('copyNamed', { name: title })} />
         </div>
@@ -486,8 +502,8 @@ function ResourceContent({
           {content}
         </pre>
         {truncated ? <p className="py-2 text-sm text-status-warning">{t('truncated')}</p> : null}
-      </div>
-    </details>
+      </CollapsibleContent>
+    </Collapsible>
   )
 }
 

package/src/client/l2_biz/plugin-host/l2-plugin-management-controls.tsx

@@ -6,6 +6,7 @@ import type { L2PluginManagementItem } from '@common/l2_biz/plugin/l2-plugin-man
 import { selectL4LocalizedText } from '@common/l4_foundation/locale/l4-localized-text'
 import { useL4Region } from '@client/l4_foundation/locale/l4-region-provider'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
+import { Switch } from '@client/l4_foundation/ui/shadcn/switch'
 
 export type L2PluginManagementControlAction =
   'reload' | 'update' | 'remove' | 'retry' | 'retry-browser' | 'enable' | 'disable'
@@ -14,7 +15,6 @@ interface L2PluginManagementControlsProps {
   plugin: L2PluginManagementItem
   displayName: string
   browserError: string | null
-  requestError?: string | null
   disabled: boolean
   pending: boolean
   browserRetryPending: boolean
@@ -25,142 +25,115 @@ export function L2PluginManagementControls({
   plugin,
   displayName,
   browserError,
-  requestError,
   disabled,
   pending,
   browserRetryPending,
   onAction
 }: L2PluginManagementControlsProps): React.JSX.Element {
   const { t } = useTranslation('pluginManagement')
-  const { locale } = useL4Region()
   const phase = plugin.operation?.phase
-  const unfinished = Boolean(plugin.operation && phase !== 'failed')
   const enabled = plugin.status !== 'disabled'
-  const failed = plugin.status === 'failed' || browserError !== null
-  const sourceError = plugin.error ? selectL4LocalizedText(plugin.error.message, locale) : null
-  const status = unfinished
-    ? t(`phase_${phase}`)
-    : failed
-      ? t('notLoaded')
-      : enabled
-        ? t('enabled')
-        : t('disabled')
   return (
-    <div className="space-y-2">
-      <div className="flex flex-wrap items-center gap-2">
-        {unfinished || pending || failed ? (
-          <span
-            role="status"
-            className={`inline-flex items-center gap-1.5 rounded-md bg-muted px-2 py-1 text-xs ${failed && !unfinished ? 'text-destructive' : 'text-muted-foreground'}`}
-          >
-            {unfinished && phase !== 'waiting' ? (
-              <LoaderCircleIcon className="size-3.5 animate-spin" />
-            ) : null}
-            {pending && !unfinished ? t('submitting') : status}
-          </span>
-        ) : null}
-        {plugin.kind === 'extension' ? (
-          <span className="text-xs text-muted-foreground">{t('localExtension')}</span>
-        ) : null}
+    <div className="flex shrink-0 flex-wrap items-center gap-3">
+      {pending ? (
+        <span
+          role="status"
+          className="inline-flex items-center gap-1.5 text-sm text-muted-foreground"
+        >
+          {phase !== 'waiting' ? <LoaderCircleIcon className="size-4 animate-spin" /> : null}
+          {t(phase && phase !== 'failed' ? `phase_${phase}` : 'submitting')}
+        </span>
+      ) : plugin.updateAvailable && plugin.kind !== 'extension' && phase !== 'failed' ? (
+        <Button size="sm" disabled={disabled} onClick={() => onAction('update')}>
+          {t('update')}
+        </Button>
+      ) : null}
+      {phase === 'failed' ? (
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={disabled || pending}
+          onClick={() => onAction('retry')}
+        >
+          {t('retry')}
+        </Button>
+      ) : browserError && plugin.pluginName ? (
         <Button
-          type="button"
           size="sm"
           variant="outline"
-          role="switch"
-          aria-checked={enabled}
+          disabled={disabled || browserRetryPending}
+          onClick={() => onAction('retry-browser')}
+        >
+          {t('retryView')}
+        </Button>
+      ) : null}
+      <label className="flex min-h-8 cursor-pointer items-center gap-2 text-sm text-muted-foreground">
+        <Switch
+          checked={enabled}
           aria-label={t('togglePlugin', { name: displayName })}
           disabled={disabled || pending}
-          onClick={() => onAction(enabled ? 'disable' : 'enable')}
+          onCheckedChange={(checked) => onAction(checked ? 'enable' : 'disable')}
+        />
+        {t(enabled ? 'enabled' : 'disabled')}
+      </label>
+      {plugin.kind !== 'extension' ? (
+        <Button
+          size="icon-sm"
+          variant="ghost"
+          className="text-muted-foreground hover:text-destructive"
+          aria-label={t('removeNamed', { name: displayName })}
+          title={t('remove')}
+          disabled={disabled || pending}
+          onClick={() => onAction('remove')}
         >
-          <span
-            aria-hidden="true"
-            className={`flex h-4 w-7 items-center rounded-full p-0.5 ${enabled ? 'bg-primary' : 'bg-muted-foreground'}`}
-          >
-            <span
-              className={`size-3 rounded-full bg-primary-foreground transition-transform ${enabled ? 'translate-x-3' : ''}`}
-            />
-          </span>
-          {t(enabled ? 'enabled' : 'disabled')}
+          <Trash2Icon />
         </Button>
-        {plugin.updateAvailable && plugin.kind !== 'extension' ? (
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={disabled || pending}
-            onClick={() => onAction('update')}
-          >
-            {t('update')}
-          </Button>
-        ) : null}
-        {plugin.kind !== 'extension' ? (
-          <Button
-            size="sm"
-            variant="ghost"
-            className="text-muted-foreground hover:text-destructive"
-            disabled={disabled || pending}
-            onClick={() => onAction('remove')}
-          >
-            <Trash2Icon data-icon="inline-start" />
-            {t('remove')}
-          </Button>
-        ) : null}
-        {phase === 'failed' ? (
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={disabled || pending}
-            onClick={() => onAction('retry')}
-          >
-            {t('retry')}
-          </Button>
-        ) : null}
-        {browserError && plugin.pluginName ? (
-          <Button
-            size="sm"
-            variant="outline"
-            disabled={disabled || browserRetryPending}
-            onClick={() => onAction('retry-browser')}
-          >
-            {t('retryView')}
-          </Button>
-        ) : null}
-        <details className="text-sm">
-          <summary className="cursor-pointer rounded-lg px-2 py-1.5 outline-none hover:bg-accent focus-visible:ring-2 focus-visible:ring-ring">
-            {t('more')}
-          </summary>
-          <Button
-            size="sm"
-            variant="ghost"
-            className="mt-1"
-            disabled={disabled || (pending && phase !== 'waiting')}
-            aria-label={t('reloadSource', { name: displayName })}
-            onClick={() => onAction('reload')}
-          >
-            {t('reloadOne')}
-          </Button>
-        </details>
-      </div>
-      {plugin.operation?.message ? (
+      ) : null}
+    </div>
+  )
+}
+
+export function L2PluginManagementFeedback({
+  plugin,
+  requestError,
+  browserError
+}: {
+  plugin: L2PluginManagementItem
+  requestError?: string
+  browserError: string | null
+}): React.JSX.Element | null {
+  const { t } = useTranslation('pluginManagement')
+  const { locale } = useL4Region()
+  const phase = plugin.operation?.phase
+  const messages = [
+    requestError,
+    phase === 'failed' ? plugin.operation?.message : null,
+    plugin.error ? selectL4LocalizedText(plugin.error.message, locale) : null,
+    browserError,
+    plugin.updateError ? t('itemCheckFailed', { error: plugin.updateError }) : null
+  ].filter(
+    (message, index, all): message is string => Boolean(message) && all.indexOf(message) === index
+  )
+  if (!messages.length && phase !== 'waiting' && plugin.status !== 'failed') return null
+  return (
+    <div className="space-y-1">
+      {messages.map((message) => (
         <p
-          className={`whitespace-pre-wrap text-sm [overflow-wrap:anywhere] ${phase === 'failed' ? 'text-destructive' : 'text-muted-foreground'}`}
+          key={message}
+          role="alert"
+          className="whitespace-pre-wrap text-sm text-destructive [overflow-wrap:anywhere]"
         >
+          {message}
+        </p>
+      ))}
+      {!messages.length && plugin.status === 'failed' ? (
+        <p className="text-sm text-destructive">{t('notLoaded')}</p>
+      ) : null}
+      {phase === 'waiting' && plugin.operation?.message ? (
+        <p role="status" className="text-sm text-muted-foreground [overflow-wrap:anywhere]">
           {plugin.operation.message}
         </p>
       ) : null}
-      {[requestError, sourceError, browserError]
-        .filter(
-          (message, index, all) =>
-            message && all.indexOf(message) === index && message !== plugin.operation?.message
-        )
-        .map((message) => (
-          <p
-            key={message}
-            role="alert"
-            className="whitespace-pre-wrap text-sm text-destructive [overflow-wrap:anywhere]"
-          >
-            {message}
-          </p>
-        ))}
     </div>
   )
 }