@dxos/plugin-registry 0.8.3-staging.0fa589b → 0.8.4-main.03d5cd7b56

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';

package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx

@@ -0,0 +1,163 @@
+//
+// Copyright 2026 DXOS.org
+//
+
+import { useAtomValue } from '@effect-atom/atom-react';
+import * as Effect from 'effect/Effect';
+import React, { type ReactNode, useCallback, useMemo, useState } from 'react';
+
+import { type Plugin } from '@dxos/app-framework';
+import { useCapabilities, useOperationInvoker, usePluginManager } from '@dxos/app-framework/ui';
+import { AppCapabilities, LayoutOperation, SettingsOperation } from '@dxos/app-toolkit';
+import { runAndForwardErrors } from '@dxos/effect';
+import { ObservabilityOperation } from '@dxos/plugin-observability';
+import { Input, Panel, ScrollArea, Toolbar, useTranslation } from '@dxos/react-ui';
+import { composable, composableProps } from '@dxos/ui-theme';
+
+import { PluginList, type PluginListProps } from '#components';
+import { getPluginPath, meta } from '#meta';
+
+const matchesFilter = (plugin: Plugin.Plugin, query: string) => {
+  const haystack = `${plugin.meta.name ?? ''} ${plugin.meta.id}`.toLowerCase();
+  return haystack.includes(query);
+};
+
+export type BaseRegistryArticleProps = {
+  /** Article id used as the pivotId when opening a plugin's detail surface. */
+  id: string;
+  /** Plugins to display, pre-sorted by the caller. */
+  plugins: readonly Plugin.Plugin[];
+  /**
+   * Distinguishes the source of toggle events for observability
+   * (e.g. `'registry'` for the public registry surface).
+   */
+  source?: string;
+  /** Rendered in place of the list when no plugins match the current filter. */
+  empty?: ReactNode;
+} & Pick<
+  PluginListProps,
+  | 'installed'
+  | 'installing'
+  | 'updating'
+  | 'updateAvailableIds'
+  | 'extraTagsById'
+  | 'failuresById'
+  | 'onInstall'
+  | 'onUpdate'
+>;
+
+export const BaseRegistryArticle = composable<HTMLDivElement, BaseRegistryArticleProps>(
+  (
+    {
+      id,
+      plugins,
+      source,
+      empty,
+      installed,
+      installing,
+      updating,
+      updateAvailableIds,
+      extraTagsById,
+      failuresById,
+      onInstall,
+      onUpdate,
+      ...props
+    },
+    forwardedRef,
+  ) => {
+    const { t } = useTranslation(meta.id);
+    const manager = usePluginManager();
+    const { invoke, invokePromise } = useOperationInvoker();
+    const allSettings = useCapabilities(AppCapabilities.Settings);
+    const enabled = useAtomValue(manager.enabled);
+    const [filter, setFilter] = useState('');
+
+    const filtered = useMemo(() => {
+      const query = filter.trim().toLowerCase();
+      return query.length === 0 ? plugins : plugins.filter((plugin) => matchesFilter(plugin, query));
+    }, [plugins, filter]);
+
+    const handleChange = useCallback(
+      (pluginId: string, nextEnabled: boolean) =>
+        Effect.gen(function* () {
+          if (nextEnabled) {
+            yield* manager.enable(pluginId);
+          } else {
+            yield* manager.disable(pluginId);
+          }
+          yield* invoke(ObservabilityOperation.SendEvent, {
+            name: 'plugins.toggle',
+            properties: source
+              ? { plugin: pluginId, enabled: nextEnabled, source }
+              : { plugin: pluginId, enabled: nextEnabled },
+          });
+        }).pipe(runAndForwardErrors),
+      [invoke, manager, source],
+    );
+
+    const handleClick = useCallback(
+      (pluginId: string) =>
+        invokePromise(LayoutOperation.Open, {
+          subject: [getPluginPath(pluginId)],
+          pivotId: id,
+          positioning: 'end',
+        }),
+      [invokePromise, id],
+    );
+
+    const hasSettings = useCallback(
+      (pluginId: string) => allSettings.some((setting) => setting.prefix === pluginId),
+      [allSettings],
+    );
+
+    const handleSettings = useCallback(
+      (pluginId: string) => invokePromise(SettingsOperation.Open, { plugin: pluginId }),
+      [invokePromise],
+    );
+
+    return (
+      <Panel.Root {...composableProps(props)} ref={forwardedRef}>
+        <Panel.Toolbar asChild>
+          <Toolbar.Root>
+            <Input.Root>
+              <Input.Label srOnly>{t('filter.label')}</Input.Label>
+              <Input.TextInput
+                placeholder={t('filter.placeholder')}
+                value={filter}
+                onChange={(event) => setFilter(event.target.value)}
+              />
+            </Input.Root>
+          </Toolbar.Root>
+        </Panel.Toolbar>
+        <Panel.Content asChild>
+          <ScrollArea.Root orientation='vertical'>
+            <ScrollArea.Viewport>
+              {filtered.length > 0 ? (
+                <PluginList
+                  plugins={filtered}
+                  enabled={enabled}
+                  installed={installed}
+                  installing={installing}
+                  updating={updating}
+                  updateAvailableIds={updateAvailableIds}
+                  extraTagsById={extraTagsById}
+                  failuresById={failuresById}
+                  onClick={handleClick}
+                  onChange={handleChange}
+                  onInstall={onInstall}
+                  onUpdate={onUpdate}
+                  hasSettings={hasSettings}
+                  onSettings={handleSettings}
+                />
+              ) : (
+                empty
+              )}
+            </ScrollArea.Viewport>
+          </ScrollArea.Root>
+        </Panel.Content>
+      </Panel.Root>
+    );
+  },
+);
+
+BaseRegistryArticle.displayName = 'BaseRegistryArticle';

package/src/containers/BaseRegistryArticle/index.ts

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

package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx

@@ -0,0 +1,87 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+import * as Effect from 'effect/Effect';
+import React, { useCallback, useRef, useState } from 'react';
+
+import { usePluginManager } from '@dxos/app-framework/ui';
+import { runAndForwardErrors } from '@dxos/effect';
+import { Button, Dialog, Input, useTranslation } from '@dxos/react-ui';
+
+import { meta } from '../../meta';
+
+export const LOAD_PLUGIN_DIALOG = `${meta.id}.LoadPluginDialog`;
+
+export const LoadPluginDialog = () => {
+  const manager = usePluginManager();
+  const { t } = useTranslation(meta.id);
+  const [url, setUrl] = useState('');
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const closeRef = useRef<HTMLButtonElement | null>(null);
+
+  const handleLoad = useCallback(() => {
+    const trimmed = url.trim();
+    if (!trimmed) {
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    void Effect.gen(function* () {
+      const plugin = yield* manager.add(trimmed);
+      yield* manager.enable(plugin.meta.id);
+      closeRef.current?.click();
+    }).pipe(
+      Effect.catchAll((err) =>
+        Effect.sync(() => {
+          setError(String(err));
+        }),
+      ),
+      Effect.tap(() => Effect.sync(() => setLoading(false))),
+      runAndForwardErrors,
+    );
+  }, [url, manager]);
+
+  return (
+    <Dialog.Content>
+      <Dialog.Header>
+        <Dialog.Title>{t('load-by-url-dialog.title')}</Dialog.Title>
+        <Dialog.Close asChild>
+          <Dialog.CloseIconButton ref={closeRef} />
+        </Dialog.Close>
+      </Dialog.Header>
+      <Dialog.Body>
+        {/* TODO(burdon): Form section. */}
+        <div className='flex flex-col gap-4'>
+          <Input.Root validationValence={error ? 'error' : undefined}>
+            <Input.Label>{t('plugin-url.label')}</Input.Label>
+            <Input.TextInput
+              placeholder='https://example.com/manifest.json'
+              value={url}
+              onChange={(event) => {
+                setUrl(event.target.value);
+                setError(null);
+              }}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter') {
+                  handleLoad();
+                }
+              }}
+              disabled={loading}
+              autoFocus
+            />
+            {error && <Input.DescriptionAndValidation>{error}</Input.DescriptionAndValidation>}
+          </Input.Root>
+          <div className='flex justify-end'>
+            <Button variant='primary' disabled={!url.trim() || loading} onClick={handleLoad}>
+              {loading ? t('loading.label') : t('load-plugin.label')}
+            </Button>
+          </div>
+        </div>
+      </Dialog.Body>
+    </Dialog.Content>
+  );
+};

package/src/containers/LoadPluginDialog/index.ts

@@ -0,0 +1,5 @@
+//
+// Copyright 2025 DXOS.org
+//
+
+export { LoadPluginDialog as default } from './LoadPluginDialog';