@dxos/plugin-registry 0.8.4-main.dedc0f3 → 0.8.4-main.dfabb4ec29

package/src/components/PluginFailureBadge/PluginFailureBadge.tsx

@@ -0,0 +1,68 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React from 'react';
+
+import { type PluginManager } from '@dxos/app-framework';
+import { IconButton, Popover, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '#meta';
+
+// Mirrors react-ui `Icon`'s `size` prop literal subset; kept inline so we don't
+// have to add `@dxos/ui-types` as a dep just for one type alias.
+type IconSize = 4 | 5 | 6 | 8;
+
+export type PluginFailureBadgeProps = {
+  failure: PluginManager.PluginFailure;
+  /** Optional override for the trigger icon's tailwind classes. */
+  iconClassNames?: string;
+  /** Visual size of the warning icon (passed through to react-ui `<Icon />`). */
+  size?: IconSize;
+};
+
+/**
+ * Compact warning glyph rendered next to a plugin's name when it has failed
+ * to load or activate. Clicking the icon opens a popover that names the phase
+ * (load / activation), the reason (timeout / error), and the underlying error
+ * message — enough for an operator to tell "remote host is offline" apart
+ * from "the plugin crashed".
+ */
+export const PluginFailureBadge = ({ failure, iconClassNames, size = 4 }: PluginFailureBadgeProps) => {
+  const { t } = useTranslation(meta.id);
+
+  const phaseLabel = failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label');
+  const reasonLabel =
+    failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label');
+
+  return (
+    <Popover.Root>
+      <Popover.Trigger asChild>
+        <IconButton
+          variant='ghost'
+          iconOnly
+          noTooltip
+          icon='ph--warning--bold'
+          size={size}
+          iconClassNames={iconClassNames}
+          label={t('failure-badge.label')}
+          data-testid={`pluginFailureBadge.${failure.id}`}
+          // Don't bubble up to row click handlers (e.g. the card's `onClick`
+          // that opens the details pane). The popover is the action here.
+          onClick={(event) => event.stopPropagation()}
+        />
+      </Popover.Trigger>
+      <Popover.Content>
+        <Popover.Viewport>
+          <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
+            <p className='font-medium text-sm'>
+              {t('failure-title.label', { phase: phaseLabel, reason: reasonLabel })}
+            </p>
+            <p className='text-description text-sm break-words'>{failure.error.message}</p>
+          </div>
+        </Popover.Viewport>
+        <Popover.Arrow />
+      </Popover.Content>
+    </Popover.Root>
+  );
+};

package/src/components/PluginFailureBadge/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './PluginFailureBadge';

package/src/components/PluginList/PluginItem.tsx

@@ -0,0 +1,226 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import React, { type MouseEvent, useCallback, useMemo } from 'react';
+
+import { type Plugin, type PluginManager } from '@dxos/app-framework';
+import {
+  Button,
+  type ChromaticPalette,
+  Icon,
+  IconButton,
+  Input,
+  Link,
+  ListItem,
+  type NeutralPalette,
+  Tag,
+  useTranslation,
+} from '@dxos/react-ui';
+import { mx } from '@dxos/ui-theme';
+import { getStyles } from '@dxos/ui-theme';
+
+import { meta } from '#meta';
+import { type RegistryTagType } from '#types';
+
+import { PluginFailureBadge } from '../PluginFailureBadge';
+
+export type PluginItemProps = {
+  plugin: Plugin.Plugin;
+  /** Ids of plugins currently installed (loaded into the manager). */
+  installed?: readonly string[];
+  /** Ids of plugins whose install is in flight. */
+  installing?: readonly string[];
+  enabled?: readonly string[];
+  /**
+   * Derived tags (e.g. `registry`, `local`) to display alongside the plugin's own meta.tags.
+   * Not persisted to plugin meta; computed per-render by the container.
+   */
+  extraTags?: readonly string[];
+  onClick?: (id: string) => void;
+  onChange?: (id: string, enabled: boolean) => void;
+  /**
+   * Install handler. When provided and the plugin is not installed, an Install button
+   * is rendered in place of the enable switch.
+   */
+  onInstall?: (id: string) => void;
+  /**
+   * When true and plugin is installed, shows an Update button instead of the enable switch.
+   */
+  hasUpdate?: boolean;
+  /** Called when the user clicks the Update button. */
+  onUpdate?: (id: string) => void;
+  /** Ids of plugins whose update is currently in flight. */
+  updating?: readonly string[];
+  hasSettings?: (id: string) => boolean;
+  onSettings?: (id: string) => void;
+  /**
+   * Failure record for this plugin, if any. When present a warning badge is
+   * rendered next to the plugin name; clicking it opens a popover with the
+   * phase, reason, and error message.
+   */
+  failure?: PluginManager.PluginFailure;
+};
+
+export const PluginItem = ({
+  plugin,
+  installed,
+  installing,
+  enabled = [],
+  extraTags,
+  onClick,
+  onChange,
+  onInstall,
+  hasUpdate,
+  onUpdate,
+  updating,
+  hasSettings: hasSettingsProp,
+  onSettings,
+  failure,
+}: PluginItemProps) => {
+  const { t } = useTranslation(meta.id);
+  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
+  const displayTags = useMemo(() => {
+    if (!extraTags || extraTags.length === 0) {
+      return tags ?? [];
+    }
+    const set = new Set<string>(tags ?? []);
+    for (const tag of extraTags) {
+      set.add(tag);
+    }
+    return Array.from(set);
+  }, [tags, extraTags]);
+  const isEnabled = enabled.includes(id);
+  const isInstalled = installed ? installed.includes(id) : true;
+  const isInstalling = installing?.includes(id) ?? false;
+  const isUpdating = updating?.includes(id) ?? false;
+  const showInstallButton = !!onInstall && !isInstalled;
+  const showUpdateButton = !!onUpdate && isInstalled && !!hasUpdate;
+  const inputId = `${id}-input`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const handleClick = useCallback(() => onClick?.(id), [id, onClick]);
+
+  const handleChange = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      onChange?.(id, !isEnabled);
+    },
+    [id, isEnabled, onChange],
+  );
+
+  const handleInstall = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      onInstall?.(id);
+    },
+    [id, onInstall],
+  );
+
+  const handleUpdate = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      onUpdate?.(id);
+    },
+    [id, onUpdate],
+  );
+
+  const hasSettings = hasSettingsProp?.(id) ?? false;
+  const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
+  const styles = getStyles(iconHue);
+  const gridCols = 'grid grid-cols-[5rem_1fr]';
+  const gridRows = 'grid grid-rows-[40px_1fr_min-content_40px]';
+
+  return (
+    <ListItem.Root
+      key={id}
+      labelId={labelId}
+      data-testid={`pluginList.${id}`}
+      aria-describedby={descriptionId}
+      classNames={mx(gridCols, 'h-[14rem] w-full gap-3 pe-2 bg-modal-surface rounded-md overflow-hidden')}
+    >
+      <div className={mx(gridRows, 'justify-center rounded-l-md', styles.surface)}>
+        <Icon
+          classNames={mx('row-start-2 cursor-pointer', styles.surfaceText)}
+          icon={icon}
+          size={14}
+          onClick={handleClick}
+        />
+      </div>
+
+      <div className={mx(gridRows)}>
+        <div className='flex items-center gap-2 overflow-hidden cursor-pointer' onClick={handleClick}>
+          <span className='text-lg truncate'>{name ?? id}</span>
+          {failure && <PluginFailureBadge failure={failure} />}
+        </div>
+
+        <div>
+          <p className={mx('text-description', 'line-clamp-4 min-w-0')}>{description}</p>
+        </div>
+
+        <div className='flex -ms-0.5 overflow-x-auto scrollbar-none'>
+          {displayTags.map((tag) => (
+            <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
+              {tag}
+            </Tag>
+          ))}
+        </div>
+
+        <div className='flex gap-2 items-center text-sm'>
+          <IconButton
+            aria-describedby={descriptionId}
+            classNames='cursor-pointer'
+            icon='ph--gear--regular'
+            label={t('plugin-settings.label')}
+            iconOnly
+            size={4}
+            onClick={handleSettings}
+            disabled={!hasSettings}
+          />
+
+          <Link aria-describedby={descriptionId} classNames='text-description cursor-pointer' onClick={handleClick}>
+            {t('details.label')}
+          </Link>
+
+          <div className='grow' />
+          <div className='pe-1'>
+            {isUpdating ? (
+              <Button aria-describedby={descriptionId} density='fine' variant='primary' disabled>
+                {t('updating.label')}
+              </Button>
+            ) : showUpdateButton ? (
+              <Button aria-describedby={descriptionId} density='fine' variant='primary' onClick={handleUpdate}>
+                {t('update.label')}
+              </Button>
+            ) : showInstallButton ? (
+              <Button
+                aria-describedby={descriptionId}
+                density='fine'
+                variant='primary'
+                disabled={isInstalling}
+                onClick={handleInstall}
+              >
+                {isInstalling ? t('installing.label') : t('install.label')}
+              </Button>
+            ) : (
+              <Input.Root id={inputId}>
+                <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
+              </Input.Root>
+            )}
+          </div>
+        </div>
+      </div>
+    </ListItem.Root>
+  );
+};
+
+const tagColors: Record<RegistryTagType, ChromaticPalette | NeutralPalette> = {
+  new: 'rose',
+  beta: 'teal',
+  labs: 'blue',
+  popular: 'green',
+  featured: 'pink',
+  experimental: 'amber',
+  registry: 'indigo',
+  local: 'neutral',
+};

package/src/components/PluginList/PluginList.stories.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import { type Meta, type StoryObj } from '@storybook/react-vite';
+import React, { useState } from 'react';
+
+import { type Plugin, Plugin as PluginNS } from '@dxos/app-framework';
+import { random } from '@dxos/random';
+import { ScrollArea } from '@dxos/react-ui';
+import { withLayout, withTheme } from '@dxos/react-ui/testing';
+import { getHashHue } from '@dxos/ui-theme';
+
+import { translations } from '#translations';
+import { RegistryTagType } from '#types';
+
+import { PluginList } from './PluginList';
+
+random.seed(1);
+
+const icons = [
+  'ph--bug--regular',
+  'ph--compass--regular',
+  'ph--kanban--regular',
+  'ph--table--regular',
+  'ph--gear--regular',
+  'ph--github-logo--regular',
+];
+
+const DefaultStory = () => {
+  const [plugins] = useState<Plugin.Plugin[]>(
+    random.helpers.multiple(
+      () =>
+        PluginNS.define({
+          id: `org.dxos.plugin.plugin-${random.string.uuid()}`,
+          name: `${random.commerce.productName()}`,
+          description: random.lorem.sentences(Math.ceil(Math.random() * 3)),
+          tags: random.helpers.uniqueArray(RegistryTagType.literals as any, Math.floor(Math.random() * 3)),
+          icon: random.helpers.arrayElement(icons),
+          iconHue: getHashHue(random.string.uuid()),
+          homePage: random.datatype.boolean({ probability: 0.5 }) ? random.internet.url() : undefined,
+          source: random.internet.url(),
+        }).pipe(PluginNS.make)(),
+      { count: 32 },
+    ),
+  );
+  const [enabled, setEnabled] = useState<string[]>([]);
+
+  const handleChange = (id: string, enabled: boolean) => {
+    setEnabled((plugins) => (enabled ? [...plugins, id] : plugins.filter((plugin) => plugin === id)));
+  };
+
+  return (
+    <ScrollArea.Root orientation='vertical'>
+      <ScrollArea.Viewport>
+        <PluginList plugins={plugins} enabled={enabled} onChange={handleChange} hasSettings={() => true} />
+      </ScrollArea.Viewport>
+    </ScrollArea.Root>
+  );
+};
+
+const meta = {
+  title: 'plugins/plugin-registry/components/PluginList',
+  component: PluginList,
+  render: DefaultStory,
+  parameters: {
+    translations,
+  },
+} satisfies Meta<typeof PluginList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  decorators: [withTheme(), withLayout({ layout: 'column', classNames: 'bg-deck-surface' })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};
+
+export const FullScreen: Story = {
+  decorators: [withTheme(), withLayout({ scroll: true })],
+  parameters: {
+    layout: 'fullscreen',
+  },
+};

package/src/components/PluginList/PluginList.tsx

@@ -0,0 +1,52 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import React from 'react';
+
+import { type Plugin, type PluginManager } from '@dxos/app-framework';
+import { List } from '@dxos/react-ui';
+
+import { PluginItem, type PluginItemProps } from './PluginItem';
+
+export type PluginListProps = Omit<PluginItemProps, 'plugin' | 'extraTags' | 'hasUpdate' | 'failure'> & {
+  plugins?: readonly Plugin.Plugin[];
+  /**
+   * Map from plugin id → extra tags to display (e.g. `registry`, `local`).
+   * Computed by the container; not persisted to plugin meta.
+   */
+  extraTagsById?: Record<string, readonly string[]>;
+  /**
+   * Set of plugin ids for which a newer version is available in the catalog.
+   * Causes each matching item to render an Update button instead of the enable switch.
+   */
+  updateAvailableIds?: ReadonlySet<string>;
+  /**
+   * Map from plugin id → most recent failure record. Used to render a warning
+   * badge next to the plugin name. Sourced from `PluginManager.failed`.
+   */
+  failuresById?: Record<string, PluginManager.PluginFailure>;
+};
+
+export const PluginList = ({
+  plugins = [],
+  extraTagsById,
+  updateAvailableIds,
+  failuresById,
+  ...props
+}: PluginListProps) => {
+  return (
+    <List classNames='grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] auto-rows-[max-content] gap-4 p-4'>
+      {plugins.map((plugin) => (
+        <PluginItem
+          key={plugin.meta.id}
+          plugin={plugin}
+          extraTags={extraTagsById?.[plugin.meta.id]}
+          hasUpdate={updateAvailableIds?.has(plugin.meta.id)}
+          failure={failuresById?.[plugin.meta.id]}
+          {...props}
+        />
+      ))}
+    </List>
+  );
+};

package/src/components/PluginList/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+export * from './PluginList';

package/src/components/RegistrySettings/RegistrySettings.tsx

@@ -0,0 +1,120 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import React, { useCallback, useState } from 'react';
+
+import { type AppSurface } from '@dxos/app-toolkit/ui';
+import { log } from '@dxos/log';
+import { Button, Input, Message, useTranslation } from '@dxos/react-ui';
+import { Settings as SettingsForm } from '@dxos/react-ui-form';
+
+import { meta } from '#meta';
+
+import { type RegistrySettings as RegistrySettingsType } from '../../types';
+
+export type RegistrySettingsProps = AppSurface.SettingsArticleProps<
+  RegistrySettingsType,
+  {
+    activeDevPluginIds: readonly string[];
+    onEnableDev: (url: string) => Promise<void>;
+    onDisableDev: (id: string) => Promise<void>;
+  }
+>;
+
+/**
+ * Settings panel for `@dxos/plugin-registry`. The dev-plugin section lets a
+ * plugin author point Composer at a local Vite dev server (defaults to
+ * `localhost:3967`) and toggle the dev plugin on/off persistently — boot will
+ * re-attach it on the next reload, surviving HMR-triggered reloads. If the
+ * dev server is offline at boot, the toggle stays on and a warning is logged
+ * (the manager's `failed` atom also surfaces a badge on the plugin list).
+ */
+export const RegistrySettings = ({
+  settings,
+  onSettingsChange,
+  activeDevPluginIds,
+  onEnableDev,
+  onDisableDev,
+}: RegistrySettingsProps) => {
+  const { t } = useTranslation(meta.id);
+  const [busy, setBusy] = useState(false);
+  const enabled = !!settings.devPluginEnabled;
+  const url = settings.devPluginUrl ?? '';
+  const trimmedUrl = url.trim();
+  const loadedDevId = activeDevPluginIds[0];
+
+  const handleToggle = useCallback(async () => {
+    if (busy || !onSettingsChange) {
+      return;
+    }
+    setBusy(true);
+    try {
+      if (enabled && loadedDevId) {
+        await onDisableDev(loadedDevId);
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: false }));
+      } else if (enabled) {
+        // Toggle is on but no dev plugin is currently loaded (boot-time load
+        // failed or hasn't finished). Treat the click as "turn it off."
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: false }));
+      } else {
+        if (!trimmedUrl) {
+          return;
+        }
+        // Optimistically persist intent so the next reload retries even if
+        // the page closes mid-load.
+        onSettingsChange((current) => ({ ...current, devPluginEnabled: true }));
+        try {
+          await onEnableDev(trimmedUrl);
+        } catch (error) {
+          // Per product direction: leave the intent on, log the failure. The
+          // user explicitly turns it off if they're done iterating.
+          log.warn('dev plugin enable failed', { url: trimmedUrl, error });
+        }
+      }
+    } finally {
+      setBusy(false);
+    }
+  }, [busy, enabled, loadedDevId, onSettingsChange, onDisableDev, onEnableDev, trimmedUrl]);
+
+  // Button label tracks the persisted intent, not the current load state, so
+  // a transient "intent on but not loaded" combination still reads as
+  // "Disable Dev Plugin" — clicking it turns the intent off cleanly.
+  const buttonLabel = busy
+    ? t('dev-plugin.busy.label')
+    : enabled
+      ? t('dev-plugin.disable.label')
+      : t('dev-plugin.enable.label');
+
+  return (
+    <SettingsForm.Viewport>
+      <SettingsForm.Section title={t('dev-plugin.section.title')}>
+        <Message.Root valence='neutral'>
+          <Message.Content>{t('dev-plugin.description')}</Message.Content>
+        </Message.Root>
+        <SettingsForm.Item title={t('dev-plugin.url.label')} description={t('dev-plugin.url.description')}>
+          <Input.TextInput
+            classNames='ms-2'
+            disabled={!onSettingsChange || enabled || busy}
+            value={url}
+            onChange={(event) => onSettingsChange?.((current) => ({ ...current, devPluginUrl: event.target.value }))}
+          />
+        </SettingsForm.Item>
+        <SettingsForm.Item title={t('dev-plugin.toggle.label')} description={t('dev-plugin.toggle.description')}>
+          <Button
+            variant={enabled ? undefined : 'primary'}
+            disabled={busy || (!enabled && !trimmedUrl)}
+            onClick={() => void handleToggle()}
+          >
+            {buttonLabel}
+          </Button>
+        </SettingsForm.Item>
+        {enabled && !loadedDevId && !busy && (
+          <Message.Root valence='warning'>
+            <Message.Content>{t('dev-plugin.not-loaded.message')}</Message.Content>
+          </Message.Root>
+        )}
+      </SettingsForm.Section>
+    </SettingsForm.Viewport>
+  );
+};

package/src/components/RegistrySettings/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+export * from './RegistrySettings';

package/src/components/index.ts

@@ -3,5 +3,6 @@
 //
 
 export * from './PluginDetail';
+export * from './PluginFailureBadge';
 export * from './PluginList';
-export * from './RegistryContainer';
+export * from './RegistrySettings';