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

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

@@ -26,6 +26,7 @@ export type PluginManagementAction =
   | { kind: 'reload'; mode?: 'normal' | 'basic' }
 
 interface PluginManagementOptions {
+  basicMode?: boolean
   biz: L2PluginManagementBiz
   snapshot: L2PluginManagementSnapshot | null
   onSnapshot: (snapshot: L2PluginManagementSnapshot) => void
@@ -104,6 +105,7 @@ interface PluginManagementState {
 }
 
 export function useL2PluginManagement({
+  basicMode = false,
   biz,
   snapshot,
   onSnapshot,
@@ -172,21 +174,24 @@ export function useL2PluginManagement({
     const available = targets.filter((source) => !busySource(source))
     busy.forEach((source) => setError(pluginRequestKey(source), t('sourceBusy')))
     if (!available.length) return
-    if (busy.length && available.length > 32) {
-      setError('list', t('batchLimit'))
-      return
-    }
     const keys = available.map(pluginRequestKey)
     setRequest('check', true)
     keys.forEach((key) => setRequest(key, true))
     setLoading(true)
     setError('list', null)
     try {
-      await readSnapshot({
-        checkUpdates: true,
-        ...(sources || busy.length ? { sources: available } : {}),
-        ...(tag ? { tag } : {})
-      })
+      if (sources || busy.length) {
+        for (let offset = 0; offset < available.length; offset += 32) {
+          await readSnapshot({
+            checkUpdates: true,
+            sources: available.slice(offset, offset + 32),
+            ...(tag ? { tag } : {})
+          })
+          if (!mounted.current) break
+        }
+      } else {
+        await readSnapshot({ checkUpdates: true, ...(tag ? { tag } : {}) })
+      }
     } catch (cause) {
       setError('list', cause instanceof Error ? cause.message : t('updateCheckFailed'))
     } finally {
@@ -204,8 +209,21 @@ export function useL2PluginManagement({
       setLoading(true)
       void biz
         .list(false)
-        .then((next) => {
-          if (active && request === listRequest.current) onSnapshot(next)
+        .then(async (next) => {
+          if (!active || request !== listRequest.current) return
+          onSnapshot(next)
+          const unchecked = next.plugins.some(
+            (plugin) =>
+              plugin.kind === 'package' &&
+              /^(npm:|git:|https?:|git@)/.test(plugin.source) &&
+              plugin.updateAvailable === null &&
+              !plugin.updateError &&
+              !plugin.operation
+          )
+          if (!basicMode && unchecked) {
+            const checked = await biz.list(true)
+            if (active && request === listRequest.current) onSnapshot(checked)
+          }
         })
         .catch((cause: unknown) => {
           if (active)
@@ -221,7 +239,7 @@ export function useL2PluginManagement({
       detailRequest.current += 1
       listRequest.current += 1
     }
-  }, [biz, onSnapshot, t])
+  }, [biz, onSnapshot, t, basicMode])
 
   const executeBatch = async (input: L2PluginManagementBatchRequest): Promise<void> => {
     const sources = input.action === 'add' ? input.items.map((item) => item.source) : input.sources
@@ -236,19 +254,51 @@ export function useL2PluginManagement({
       setError(key, null)
     })
     setConfirmation(null)
+    let remaining = [...available]
     try {
-      const request =
-        input.action === 'add'
-          ? { ...input, items: input.items.filter((item) => available.includes(item.source)) }
-          : { ...input, sources: available }
-      const response = await biz.batch(request)
-      if (!mounted.current) return
-      listRequest.current += 1
-      onSnapshot(response.snapshot)
-      response.results.forEach((result) => setError(pluginRequestKey(result.source), result.error))
+      let current = await biz.list()
+      const deadline = Date.now() + 15 * 60_000
+      while (remaining.length) {
+        const pending = current.plugins.filter(
+          (plugin) => plugin.operation && plugin.operation.phase !== 'failed'
+        )
+        const capacity = input.action === 'tag' ? 32 : Math.max(0, 32 - pending.length)
+        if (!capacity) {
+          if (
+            pending.some((plugin) => plugin.operation?.phase === 'waiting') ||
+            Date.now() >= deadline
+          ) {
+            remaining.forEach((source) => setError(pluginRequestKey(source), t('batchWaiting')))
+            break
+          }
+          await new Promise<void>((resolve) => setTimeout(resolve, 750))
+          current = await biz.list()
+          if (mounted.current) {
+            listRequest.current += 1
+            onSnapshot(current)
+          }
+          continue
+        }
+        const chunk = remaining.slice(0, capacity)
+        const request =
+          input.action === 'add'
+            ? { ...input, items: input.items.filter((item) => chunk.includes(item.source)) }
+            : { ...input, sources: chunk }
+        const response = await biz.batch(request)
+        current = response.snapshot
+        if (mounted.current) {
+          listRequest.current += 1
+          onSnapshot(current)
+        }
+        response.results.forEach((result) =>
+          setError(pluginRequestKey(result.source), result.error)
+        )
+        chunk.forEach((source) => setRequest(pluginRequestKey(source), false))
+        remaining = remaining.slice(chunk.length)
+      }
     } catch (cause) {
       const message = cause instanceof Error ? cause.message : t('batchFailed')
-      keys.forEach((key) => setError(key, message))
+      remaining.forEach((source) => setError(pluginRequestKey(source), message))
     } finally {
       keys.forEach((key) => setRequest(key, false))
     }

package/src/client/l2_biz/plugin-host/views/l2-plugin-catalog-detail.tsx

@@ -1,5 +1,6 @@
 'use client'
 
+import { ChevronDownIcon } from 'lucide-react'
 import { useTranslation } from 'react-i18next'
 import type {
   L2PluginCatalogDetail,
@@ -8,8 +9,21 @@ import type {
 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 {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger
+} from '@client/l4_foundation/ui/shadcn/collapsible'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@client/l4_foundation/ui/shadcn/select'
 import { L2PluginReadme } from './l2-plugin-readme'
 import { L2PluginDownloadSourceSelector } from './l2-plugin-download-source'
+import { L2PluginManagementChannel } from './l2-plugin-management-channel'
 
 interface CatalogDetailProps {
   detail: L2PluginCatalogDetail
@@ -20,6 +34,8 @@ interface CatalogDetailProps {
   updateAvailable: boolean
   error: string | null
   operationMessage?: string | null
+  channel: string
+  onChannel: (channel: string) => void
   downloadMode: L2PluginDownloadSource['mode'] | 'default'
   downloadRegistry: string
   onDownloadMode: (mode: CatalogDetailProps['downloadMode']) => void
@@ -46,60 +62,57 @@ export function L2PluginCatalogDetailView(props: CatalogDetailProps): React.JSX.
   const selectedVersionInstalled = props.installed && props.installedVersion === detail.version
   const homepage = safeLink(detail.homepage)
   const repository = safeLink(detail.repository)
+  const versions = [...new Set([detail.version, ...detail.versions])]
   return (
     <div className="min-w-0 space-y-5">
       <div className="space-y-3">
         <div className="flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-          {detail.official ? (
-            <span className="rounded-md bg-secondary px-2 py-1 text-secondary-foreground">
-              {t('official')}
-            </span>
-          ) : null}
+          <span>v{detail.version}</span>
           <span>{t(`kind_${detail.kind}`)}</span>
-          <span className="[overflow-wrap:anywhere]">
-            {detail.publisher ?? t('unknownPublisher')}
-          </span>
+          {detail.publisher ? (
+            <span className="[overflow-wrap:anywhere]">{detail.publisher}</span>
+          ) : null}
         </div>
-        <p className="text-sm text-muted-foreground [overflow-wrap:anywhere]">
-          {detail.description
-            ? selectL4LocalizedText(detail.description, locale)
-            : t('noPluginDescription')}
-        </p>
-        <label className="flex flex-wrap items-center gap-2 text-sm">
-          {t('version')}
-          <select
-            value={detail.version}
-            onChange={(event) => props.onVersion(event.target.value)}
-            className="min-h-8 min-w-0 max-w-full rounded-lg border border-input bg-background px-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-          >
-            {[...new Set([detail.version, ...detail.versions])].map((version) => (
-              <option key={version} value={version}>
-                {version}
-              </option>
-            ))}
-          </select>
-        </label>
-        <p className="text-sm text-muted-foreground">
-          {t(
-            detail.compatible === true
-              ? 'compatible'
-              : detail.compatible === false
-                ? 'incompatible'
-                : 'compatibilityUnknown'
-          )}
-        </p>
-        {detail.compatibilityNote ? (
+        {detail.description ? (
           <p className="text-sm text-muted-foreground [overflow-wrap:anywhere]">
-            {detail.compatibilityNote}
+            {selectL4LocalizedText(detail.description, locale)}
+          </p>
+        ) : null}
+        {detail.compatible === false ? (
+          <p role="alert" className="text-sm text-destructive">
+            {t('incompatible')}
+            {detail.compatibilityNote ? ` · ${detail.compatibilityNote}` : ''}
           </p>
         ) : null}
-        <div className="flex flex-wrap gap-3 text-sm">
+        <div className="flex flex-wrap items-center gap-3">
+          {props.pending ? (
+            <span role="status" className="text-sm text-muted-foreground">
+              {props.operationMessage ?? t('submitting')}
+            </span>
+          ) : selectedVersionInstalled ? (
+            <>
+              <span className="text-sm text-muted-foreground">{t('alreadyInstalled')}</span>
+              {props.updateAvailable ? (
+                <Button size="sm" disabled={props.disabled} onClick={props.onUpdate}>
+                  {t('update')}
+                </Button>
+              ) : null}
+            </>
+          ) : (
+            <Button
+              size="sm"
+              disabled={props.disabled || detail.compatible === false}
+              onClick={props.onInstall}
+            >
+              {t(props.installed ? 'installVersion' : 'install')}
+            </Button>
+          )}
           {homepage ? (
             <a
               href={homepage}
               target="_blank"
               rel="noopener noreferrer"
-              className="underline underline-offset-4"
+              className="text-sm underline underline-offset-4"
             >
               {t('homepage')}
             </a>
@@ -109,53 +122,68 @@ export function L2PluginCatalogDetailView(props: CatalogDetailProps): React.JSX.
               href={repository}
               target="_blank"
               rel="noopener noreferrer"
-              className="underline underline-offset-4"
+              className="text-sm underline underline-offset-4"
             >
               {t('repository')}
             </a>
           ) : null}
         </div>
-        {!selectedVersionInstalled ? (
-          <L2PluginDownloadSourceSelector
-            id="plugin-detail-download"
-            mode={props.downloadMode}
-            registry={props.downloadRegistry}
-            override
-            onMode={props.onDownloadMode}
-            onRegistry={props.onDownloadRegistry}
-          />
-        ) : null}
-        <div className="flex flex-wrap items-center gap-2">
-          {props.pending ? (
-            <span role="status" className="text-sm text-muted-foreground">
-              {props.operationMessage ?? t('submitting')}
-            </span>
-          ) : selectedVersionInstalled ? (
-            <>
-              <span className="text-sm text-muted-foreground">{t('alreadyInstalled')}</span>
-              {props.updateAvailable ? (
-                <Button
-                  size="sm"
-                  variant="outline"
-                  disabled={props.disabled}
-                  onClick={props.onUpdate}
-                >
-                  {t('update')}
-                </Button>
-              ) : null}
-            </>
-          ) : (
-            <Button size="sm" disabled={props.disabled} onClick={props.onInstall}>
-              {t(props.installed ? 'installVersion' : 'install')}
-            </Button>
-          )}
-        </div>
         {props.error ? (
           <p role="alert" className="text-sm text-destructive [overflow-wrap:anywhere]">
             {props.error}
           </p>
         ) : null}
       </div>
+      <Collapsible className="rounded-lg border">
+        <CollapsibleTrigger className="group flex min-h-9 w-full items-center justify-between px-3 text-sm font-medium outline-none focus-visible:ring-2 focus-visible:ring-ring">
+          {t('advancedOptions')}
+          <ChevronDownIcon className="size-4 transition-transform group-aria-expanded:rotate-180" />
+        </CollapsibleTrigger>
+        <CollapsibleContent keepMounted className="hidden data-open:block">
+          <div className="space-y-3 px-3 pb-3">
+            <div className="flex flex-wrap items-center gap-2 text-sm">
+              <span>{t('installChannel')}</span>
+              <L2PluginManagementChannel
+                value={props.channel}
+                label={t('installChannel')}
+                placeholder={t('defaultChannel')}
+                disabled={props.pending}
+                onChange={props.onChannel}
+              />
+              <Select
+                value={detail.version}
+                items={versions.map((value) => ({ value, label: value }))}
+                onOpenChange={(open, details) => {
+                  if (open && props.pending) details.cancel()
+                }}
+                onValueChange={(value) => {
+                  if (value && !props.pending) props.onVersion(value)
+                }}
+              >
+                <SelectTrigger aria-label={t('version')} aria-disabled={props.pending}>
+                  <SelectValue />
+                </SelectTrigger>
+                <SelectContent positionerClassName="z-[160]">
+                  {versions.map((value) => (
+                    <SelectItem key={value} value={value} disabled={props.pending}>
+                      {value}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
+            </div>
+            <L2PluginDownloadSourceSelector
+              id="plugin-detail-download"
+              mode={props.downloadMode}
+              registry={props.downloadRegistry}
+              override
+              saving={props.pending}
+              onMode={props.onDownloadMode}
+              onRegistry={props.onDownloadRegistry}
+            />
+          </div>
+        </CollapsibleContent>
+      </Collapsible>
       <div className="border-t pt-4">
         <L2PluginReadme key={`${detail.name}@${detail.version}`} readme={detail.readme} />
       </div>

package/src/client/l2_biz/plugin-host/views/l2-plugin-catalog-search.tsx

@@ -10,6 +10,13 @@ import { selectL4LocalizedText } from '@common/l4_foundation/locale/l4-localized
 import { useL4Region } from '@client/l4_foundation/locale/l4-region-provider'
 import { Button } from '@client/l4_foundation/ui/shadcn/button'
 import { Input } from '@client/l4_foundation/ui/shadcn/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
+} from '@client/l4_foundation/ui/shadcn/select'
 import { pluginNpmSpec, pluginRequestKey } from '../l2-use-plugin-management'
 
 interface CatalogSearchProps {
@@ -39,6 +46,7 @@ interface CatalogSearchProps {
   onUpdate: (source: string) => void
   onMore: () => void
   onRetry: () => void
+  onDirectInstall: () => void
 }
 
 export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Element {
@@ -51,7 +59,7 @@ export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Elem
   )
   return (
     <section className="min-w-0 space-y-4" aria-label={t('searchPlugins')}>
-      <div className="space-y-3">
+      <div className="flex flex-wrap items-center gap-2">
         <label htmlFor="plugin-catalog-query" className="sr-only">
           {t('searchPlugins')}
         </label>
@@ -59,40 +67,61 @@ export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Elem
           id="plugin-catalog-query"
           value={props.query}
           placeholder={t('searchPlaceholder')}
+          className="min-w-40 flex-1 basis-56"
           maxLength={200}
           onChange={(event) => props.onQuery(event.target.value)}
           onCompositionStart={props.onCompositionStart}
           onCompositionEnd={props.onCompositionEnd}
         />
-        <div className="flex flex-wrap gap-3">
-          <label className="flex items-center gap-2 text-sm">
-            {t('searchSource')}
-            <select
-              value={props.searchSource}
-              onChange={(event) => props.onSearchSource(event.target.value as 'public' | 'custom')}
-              className="min-h-8 rounded-lg border border-input bg-background px-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              <option value="public">{t('publicNpm')}</option>
-              <option value="custom">{t('customSearchSource')}</option>
-            </select>
-          </label>
-          <label className="flex items-center gap-2 text-sm">
-            {t('pluginKind')}
-            <select
-              value={props.kind}
-              onChange={(event) => props.onKind(event.target.value as CatalogSearchProps['kind'])}
-              className="min-h-8 rounded-lg border border-input bg-background px-2 outline-none focus-visible:ring-2 focus-visible:ring-ring"
-            >
-              {(['all', 'desk', 'pi'] as const).map((kind) => (
-                <option key={kind} value={kind}>
-                  {t(`kind_${kind}`)}
-                </option>
-              ))}
-            </select>
-          </label>
-        </div>
+        <Select
+          value={props.searchSource}
+          items={[
+            { value: 'public', label: t('publicNpm') },
+            { value: 'custom', label: t('customSearchSource') }
+          ]}
+          onValueChange={(value) => {
+            if (value) props.onSearchSource(value)
+          }}
+        >
+          <SelectTrigger aria-label={t('searchSource')}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent positionerClassName="z-[160]">
+            <SelectItem value="public">{t('publicNpm')}</SelectItem>
+            <SelectItem value="custom">{t('customSearchSource')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select
+          value={props.kind}
+          items={(['all', 'desk', 'pi'] as const).map((value) => ({
+            value,
+            label: t(`kind_${value}`)
+          }))}
+          onValueChange={(value) => {
+            if (value) props.onKind(value)
+          }}
+        >
+          <SelectTrigger aria-label={t('pluginKind')}>
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent positionerClassName="z-[160]">
+            {(['all', 'desk', 'pi'] as const).map((value) => (
+              <SelectItem key={value} value={value}>
+                {t(`kind_${value}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+        <Button
+          size="sm"
+          variant="outline"
+          disabled={props.disabled}
+          onClick={props.onDirectInstall}
+        >
+          {t('directInstall')}
+        </Button>
         {props.searchSource === 'custom' ? (
-          <div className="space-y-1">
+          <div className="w-full space-y-1">
             <label htmlFor="plugin-search-registry" className="block text-sm">
               {t('searchRegistryUrl')}
             </label>
@@ -115,7 +144,7 @@ export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Elem
         </div>
       ) : null}
       {props.items.length ? (
-        <div className="divide-y rounded-lg border bg-card">
+        <div className="@container/catalog divide-y rounded-lg border bg-card">
           {props.items.map((item) => {
             const plugin = installed.get(item.name)
             const key = pluginRequestKey(`npm:${item.name}`)
@@ -129,32 +158,42 @@ export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Elem
               props.errors[key] ??
               (plugin?.error ? selectL4LocalizedText(plugin.error.message, locale) : null)
             return (
-              <article key={item.name} className="min-w-0 space-y-2 p-4">
-                <div className="flex flex-wrap items-baseline gap-2">
-                  <Button
-                    variant="link"
-                    className="h-auto min-w-0 max-w-full p-0 text-left text-sm font-semibold whitespace-normal [overflow-wrap:anywhere]"
-                    onClick={() => props.onDetail(item)}
-                  >
-                    {item.name}
-                  </Button>
-                  <span className="text-xs text-muted-foreground">v{item.version}</span>
-                  {item.official ? (
-                    <span className="rounded-md bg-secondary px-1.5 py-0.5 text-xs text-secondary-foreground">
-                      {t('official')}
+              <article
+                key={item.name}
+                aria-label={item.name}
+                className="grid min-w-0 gap-x-4 gap-y-2 px-4 py-3 @xl/catalog:grid-cols-[minmax(0,1fr)_auto]"
+              >
+                <div className="min-w-0 space-y-1">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <Button
+                      variant="link"
+                      className="h-auto min-h-8 min-w-0 max-w-full p-0 text-left text-sm font-semibold whitespace-normal no-underline hover:underline [overflow-wrap:anywhere]"
+                      onClick={() => props.onDetail(item)}
+                    >
+                      {item.name}
+                    </Button>
+                    <span className="text-xs text-muted-foreground">
+                      v{healthy && plugin.version ? plugin.version : item.version}
                     </span>
-                  ) : null}
-                  <span className="text-xs text-muted-foreground">{t(`kind_${item.kind}`)}</span>
+                    {healthy && plugin.updateAvailable ? (
+                      <span className="rounded-md bg-status-success/10 px-2 py-0.5 text-xs font-medium text-status-success">
+                        {plugin.availableVersion
+                          ? t('newVersion', { version: plugin.availableVersion })
+                          : t('updateAvailable')}
+                      </span>
+                    ) : null}
+                    <span className="text-xs text-muted-foreground">{t(`kind_${item.kind}`)}</span>
+                    {item.publisher ? (
+                      <span className="text-xs text-muted-foreground">{item.publisher}</span>
+                    ) : null}
+                  </div>
+                  <p className="line-clamp-2 text-sm text-muted-foreground [overflow-wrap:anywhere]">
+                    {description
+                      ? selectL4LocalizedText(description, locale)
+                      : t('noPluginDescription')}
+                  </p>
                 </div>
-                <p className="text-sm text-muted-foreground [overflow-wrap:anywhere]">
-                  {description
-                    ? selectL4LocalizedText(description, locale)
-                    : t('noPluginDescription')}
-                </p>
-                <div className="flex flex-wrap items-center justify-between gap-2">
-                  <span className="min-w-0 text-xs text-muted-foreground [overflow-wrap:anywhere]">
-                    {item.publisher ?? t('unknownPublisher')}
-                  </span>
+                <div className="flex min-h-8 items-center self-start @xl/catalog:justify-end">
                   {pending ? (
                     <span role="status" className="text-sm text-muted-foreground">
                       {unfinished
@@ -189,12 +228,18 @@ export function L2PluginCatalogSearch(props: CatalogSearchProps): React.JSX.Elem
                   )}
                 </div>
                 {error ? (
-                  <p role="alert" className="text-sm text-destructive [overflow-wrap:anywhere]">
+                  <p
+                    role="alert"
+                    className="text-sm text-destructive [overflow-wrap:anywhere] @xl/catalog:col-span-2"
+                  >
                     {error}
                   </p>
                 ) : null}
                 {plugin?.operation?.phase === 'failed' && plugin.operation.message ? (
-                  <p role="alert" className="text-sm text-destructive [overflow-wrap:anywhere]">
+                  <p
+                    role="alert"
+                    className="text-sm text-destructive [overflow-wrap:anywhere] @xl/catalog:col-span-2"
+                  >
                     {plugin.operation.message}
                   </p>
                 ) : null}