@dxos/plugin-registry 0.8.4-main.74a063c4e0 → 0.8.4-main.765dc60934

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (192) hide show
  1. package/LICENSE +102 -5
  2. package/dist/lib/neutral/RegistryPlugin.mjs +27 -0
  3. package/dist/lib/neutral/RegistryPlugin.mjs.map +7 -0
  4. package/dist/lib/{browser/cli/index.mjs → neutral/RegistryPlugin.node.mjs} +29 -95
  5. package/dist/lib/neutral/RegistryPlugin.node.mjs.map +7 -0
  6. package/dist/lib/neutral/chunk-A6F6X6M4.mjs +31 -0
  7. package/dist/lib/neutral/chunk-A6F6X6M4.mjs.map +7 -0
  8. package/dist/lib/neutral/chunk-XK2JMH3H.mjs +33 -0
  9. package/dist/lib/neutral/chunk-XK2JMH3H.mjs.map +7 -0
  10. package/dist/lib/neutral/index.mjs +23 -0
  11. package/dist/lib/neutral/index.mjs.map +7 -0
  12. package/dist/lib/neutral/meta.json +1 -0
  13. package/dist/lib/neutral/open-plugin-registry-II735N76.mjs +15 -0
  14. package/dist/lib/neutral/open-plugin-registry-II735N76.mjs.map +7 -0
  15. package/dist/lib/neutral/plugin.mjs +18 -0
  16. package/dist/lib/neutral/plugin.mjs.map +7 -0
  17. package/dist/lib/neutral/translations.mjs +67 -0
  18. package/dist/lib/neutral/translations.mjs.map +7 -0
  19. package/dist/types/src/RegistryPlugin.d.ts +1 -0
  20. package/dist/types/src/RegistryPlugin.d.ts.map +1 -1
  21. package/dist/types/src/{cli/plugin.d.ts → RegistryPlugin.node.d.ts} +2 -1
  22. package/dist/types/src/RegistryPlugin.node.d.ts.map +1 -0
  23. package/dist/types/src/RegistryPlugin.test.d.ts +2 -0
  24. package/dist/types/src/RegistryPlugin.test.d.ts.map +1 -0
  25. package/dist/types/src/capabilities/app-graph-builder.d.ts.map +1 -1
  26. package/dist/types/src/capabilities/dev-plugin-loader.d.ts +11 -0
  27. package/dist/types/src/capabilities/dev-plugin-loader.d.ts.map +1 -0
  28. package/dist/types/src/capabilities/index.d.ts +11 -1
  29. package/dist/types/src/capabilities/index.d.ts.map +1 -1
  30. package/dist/types/src/capabilities/operation-handler.d.ts +1 -1
  31. package/dist/types/src/capabilities/operation-handler.d.ts.map +1 -1
  32. package/dist/types/src/capabilities/react-surface.d.ts.map +1 -1
  33. package/dist/types/src/capabilities/settings.d.ts +14 -0
  34. package/dist/types/src/capabilities/settings.d.ts.map +1 -0
  35. package/dist/types/src/{cli/commands → commands}/disable.d.ts +2 -2
  36. package/dist/types/src/commands/disable.d.ts.map +1 -0
  37. package/dist/types/src/{cli/commands → commands}/enable.d.ts +2 -2
  38. package/dist/types/src/commands/enable.d.ts.map +1 -0
  39. package/dist/types/src/commands/index.d.ts.map +1 -0
  40. package/dist/types/src/commands/list.d.ts +7 -0
  41. package/dist/types/src/commands/list.d.ts.map +1 -0
  42. package/dist/types/src/commands/util.d.ts.map +1 -0
  43. package/dist/types/src/components/DisableDependentsAlert/DisableDependentsAlert.d.ts +24 -0
  44. package/dist/types/src/components/DisableDependentsAlert/DisableDependentsAlert.d.ts.map +1 -0
  45. package/dist/types/src/components/DisableDependentsAlert/index.d.ts +2 -0
  46. package/dist/types/src/components/DisableDependentsAlert/index.d.ts.map +1 -0
  47. package/dist/types/src/components/PluginDetail/PluginDetail.d.ts +63 -6
  48. package/dist/types/src/components/PluginDetail/PluginDetail.d.ts.map +1 -1
  49. package/dist/types/src/components/PluginDetail/PluginDetail.stories.d.ts +55 -24
  50. package/dist/types/src/components/PluginDetail/PluginDetail.stories.d.ts.map +1 -1
  51. package/dist/types/src/components/PluginFailureBadge/PluginFailureBadge.d.ts +20 -0
  52. package/dist/types/src/components/PluginFailureBadge/PluginFailureBadge.d.ts.map +1 -0
  53. package/dist/types/src/components/PluginFailureBadge/index.d.ts +2 -0
  54. package/dist/types/src/components/PluginFailureBadge/index.d.ts.map +1 -0
  55. package/dist/types/src/components/PluginList/PluginItem.d.ts +29 -2
  56. package/dist/types/src/components/PluginList/PluginItem.d.ts.map +1 -1
  57. package/dist/types/src/components/PluginList/PluginList.d.ts +18 -3
  58. package/dist/types/src/components/PluginList/PluginList.d.ts.map +1 -1
  59. package/dist/types/src/components/PluginList/PluginList.stories.d.ts +55 -20
  60. package/dist/types/src/components/PluginList/PluginList.stories.d.ts.map +1 -1
  61. package/dist/types/src/components/RegistrySettings/RegistrySettings.d.ts +18 -0
  62. package/dist/types/src/components/RegistrySettings/RegistrySettings.d.ts.map +1 -0
  63. package/dist/types/src/components/RegistrySettings/index.d.ts +2 -0
  64. package/dist/types/src/components/RegistrySettings/index.d.ts.map +1 -0
  65. package/dist/types/src/components/index.d.ts +3 -0
  66. package/dist/types/src/components/index.d.ts.map +1 -1
  67. package/dist/types/src/containers/BaseRegistryArticle/BaseRegistryArticle.d.ts +20 -0
  68. package/dist/types/src/containers/BaseRegistryArticle/BaseRegistryArticle.d.ts.map +1 -0
  69. package/dist/types/src/containers/BaseRegistryArticle/index.d.ts +2 -0
  70. package/dist/types/src/containers/BaseRegistryArticle/index.d.ts.map +1 -0
  71. package/dist/types/src/containers/LoadPluginDialog/LoadPluginDialog.d.ts.map +1 -1
  72. package/dist/types/src/containers/PluginArticle/PluginArticle.d.ts.map +1 -1
  73. package/dist/types/src/containers/PublicRegistryArticle/PublicRegistryArticle.d.ts +8 -0
  74. package/dist/types/src/containers/PublicRegistryArticle/PublicRegistryArticle.d.ts.map +1 -0
  75. package/dist/types/src/containers/PublicRegistryArticle/index.d.ts +2 -0
  76. package/dist/types/src/containers/PublicRegistryArticle/index.d.ts.map +1 -0
  77. package/dist/types/src/containers/RegistryArticle/RegistryArticle.d.ts +14 -0
  78. package/dist/types/src/containers/RegistryArticle/RegistryArticle.d.ts.map +1 -0
  79. package/dist/types/src/containers/RegistryArticle/index.d.ts +2 -0
  80. package/dist/types/src/containers/RegistryArticle/index.d.ts.map +1 -0
  81. package/dist/types/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.d.ts +13 -0
  82. package/dist/types/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.d.ts.map +1 -0
  83. package/dist/types/src/containers/RegistrySettingsContainer/index.d.ts +2 -0
  84. package/dist/types/src/containers/RegistrySettingsContainer/index.d.ts.map +1 -0
  85. package/dist/types/src/containers/index.d.ts +3 -1
  86. package/dist/types/src/containers/index.d.ts.map +1 -1
  87. package/dist/types/src/hooks/index.d.ts +5 -0
  88. package/dist/types/src/hooks/index.d.ts.map +1 -0
  89. package/dist/types/src/hooks/use-auto-tags.d.ts +20 -0
  90. package/dist/types/src/hooks/use-auto-tags.d.ts.map +1 -0
  91. package/dist/types/src/hooks/use-disable-confirmation.d.ts +19 -0
  92. package/dist/types/src/hooks/use-disable-confirmation.d.ts.map +1 -0
  93. package/dist/types/src/hooks/use-registry-plugins.d.ts +15 -0
  94. package/dist/types/src/hooks/use-registry-plugins.d.ts.map +1 -0
  95. package/dist/types/src/hooks/use-update-available.d.ts +18 -0
  96. package/dist/types/src/hooks/use-update-available.d.ts.map +1 -0
  97. package/dist/types/src/index.d.ts +1 -1
  98. package/dist/types/src/index.d.ts.map +1 -1
  99. package/dist/types/src/meta.d.ts +2 -0
  100. package/dist/types/src/meta.d.ts.map +1 -1
  101. package/dist/types/src/operations/index.d.ts +1 -1
  102. package/dist/types/src/operations/index.d.ts.map +1 -1
  103. package/dist/types/src/operations/open-plugin-registry.d.ts +1 -1
  104. package/dist/types/src/operations/open-plugin-registry.d.ts.map +1 -1
  105. package/dist/types/src/plugin.d.ts +4 -0
  106. package/dist/types/src/plugin.d.ts.map +1 -0
  107. package/dist/types/src/storage.d.ts.map +1 -0
  108. package/dist/types/src/translations.d.ts +54 -20
  109. package/dist/types/src/translations.d.ts.map +1 -1
  110. package/dist/types/src/types.d.ts +30 -1
  111. package/dist/types/src/types.d.ts.map +1 -1
  112. package/dist/types/tsconfig.tsbuildinfo +1 -1
  113. package/package.json +47 -34
  114. package/src/{cli/plugin.ts → RegistryPlugin.node.ts} +2 -0
  115. package/src/RegistryPlugin.test.ts +24 -0
  116. package/src/RegistryPlugin.tsx +11 -4
  117. package/src/capabilities/app-graph-builder.ts +68 -17
  118. package/src/capabilities/dev-plugin-loader.ts +39 -0
  119. package/src/capabilities/index.ts +3 -1
  120. package/src/capabilities/operation-handler.ts +1 -1
  121. package/src/capabilities/react-surface.tsx +88 -38
  122. package/src/capabilities/settings.ts +34 -0
  123. package/src/components/DisableDependentsAlert/DisableDependentsAlert.tsx +69 -0
  124. package/src/components/DisableDependentsAlert/index.ts +5 -0
  125. package/src/components/PluginDetail/PluginDetail.stories.tsx +3 -2
  126. package/src/components/PluginDetail/PluginDetail.tsx +203 -15
  127. package/src/components/PluginFailureBadge/PluginFailureBadge.tsx +68 -0
  128. package/src/components/PluginFailureBadge/index.ts +5 -0
  129. package/src/components/PluginList/PluginItem.tsx +113 -11
  130. package/src/components/PluginList/PluginList.stories.tsx +1 -1
  131. package/src/components/PluginList/PluginList.tsx +32 -4
  132. package/src/components/RegistrySettings/RegistrySettings.tsx +120 -0
  133. package/src/components/RegistrySettings/index.ts +5 -0
  134. package/src/components/index.ts +3 -0
  135. package/src/containers/BaseRegistryArticle/BaseRegistryArticle.tsx +178 -0
  136. package/src/containers/BaseRegistryArticle/index.ts +5 -0
  137. package/src/containers/LoadPluginDialog/LoadPluginDialog.tsx +6 -3
  138. package/src/containers/PluginArticle/PluginArticle.tsx +360 -10
  139. package/src/containers/PublicRegistryArticle/PublicRegistryArticle.tsx +192 -0
  140. package/src/containers/PublicRegistryArticle/index.ts +5 -0
  141. package/src/containers/RegistryArticle/RegistryArticle.tsx +53 -0
  142. package/src/containers/RegistryArticle/index.ts +5 -0
  143. package/src/containers/RegistrySettingsContainer/RegistrySettingsContainer.tsx +59 -0
  144. package/src/containers/RegistrySettingsContainer/index.ts +5 -0
  145. package/src/containers/index.ts +3 -1
  146. package/src/hooks/index.ts +8 -0
  147. package/src/hooks/use-auto-tags.ts +51 -0
  148. package/src/hooks/use-disable-confirmation.ts +58 -0
  149. package/src/hooks/use-registry-plugins.ts +29 -0
  150. package/src/hooks/use-update-available.ts +31 -0
  151. package/src/index.ts +1 -1
  152. package/src/meta.ts +5 -0
  153. package/src/operations/index.ts +1 -1
  154. package/src/operations/open-plugin-registry.ts +1 -1
  155. package/src/plugin.ts +11 -0
  156. package/src/translations.ts +44 -4
  157. package/src/types.ts +33 -1
  158. package/dist/lib/browser/cli/index.mjs.map +0 -7
  159. package/dist/lib/browser/index.mjs +0 -71
  160. package/dist/lib/browser/index.mjs.map +0 -7
  161. package/dist/lib/browser/meta.json +0 -1
  162. package/dist/lib/node-esm/cli/index.mjs +0 -221
  163. package/dist/lib/node-esm/cli/index.mjs.map +0 -7
  164. package/dist/lib/node-esm/index.mjs +0 -73
  165. package/dist/lib/node-esm/index.mjs.map +0 -7
  166. package/dist/lib/node-esm/meta.json +0 -1
  167. package/dist/types/src/cli/commands/disable.d.ts.map +0 -1
  168. package/dist/types/src/cli/commands/enable.d.ts.map +0 -1
  169. package/dist/types/src/cli/commands/index.d.ts.map +0 -1
  170. package/dist/types/src/cli/commands/list.d.ts +0 -7
  171. package/dist/types/src/cli/commands/list.d.ts.map +0 -1
  172. package/dist/types/src/cli/commands/util.d.ts.map +0 -1
  173. package/dist/types/src/cli/index.d.ts +0 -3
  174. package/dist/types/src/cli/index.d.ts.map +0 -1
  175. package/dist/types/src/cli/plugin.d.ts.map +0 -1
  176. package/dist/types/src/cli/storage.d.ts.map +0 -1
  177. package/dist/types/src/containers/PluginRegistry/PluginRegistry.d.ts +0 -14
  178. package/dist/types/src/containers/PluginRegistry/PluginRegistry.d.ts.map +0 -1
  179. package/dist/types/src/containers/PluginRegistry/index.d.ts +0 -2
  180. package/dist/types/src/containers/PluginRegistry/index.d.ts.map +0 -1
  181. package/src/cli/index.ts +0 -6
  182. package/src/containers/PluginRegistry/PluginRegistry.tsx +0 -94
  183. package/src/containers/PluginRegistry/index.ts +0 -5
  184. /package/dist/types/src/{cli/commands → commands}/index.d.ts +0 -0
  185. /package/dist/types/src/{cli/commands → commands}/util.d.ts +0 -0
  186. /package/dist/types/src/{cli/storage.d.ts → storage.d.ts} +0 -0
  187. /package/src/{cli/commands → commands}/disable.ts +0 -0
  188. /package/src/{cli/commands → commands}/enable.ts +0 -0
  189. /package/src/{cli/commands → commands}/index.ts +0 -0
  190. /package/src/{cli/commands → commands}/list.ts +0 -0
  191. /package/src/{cli/commands → commands}/util.ts +0 -0
  192. /package/src/{cli/storage.ts → storage.ts} +0 -0
@@ -0,0 +1,69 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ import React from 'react';
6
+
7
+ import { AlertDialog, Button, useTranslation } from '@dxos/react-ui';
8
+
9
+ import { meta } from '#meta';
10
+
11
+ export type DisableDependentsAlertProps = {
12
+ /** Id of the plugin the user requested to disable. */
13
+ pluginId: string;
14
+ /** Ids of the currently-enabled dependents that would also be disabled. */
15
+ dependents: readonly string[];
16
+ /**
17
+ * Resolves a plugin id to its display name. The component delegates this so
18
+ * the parent can choose how to source names (typically the registered
19
+ * `Plugin.Meta.name`). Falls back to the id when omitted.
20
+ */
21
+ onResolvePluginName?: (pluginId: string) => string;
22
+ onConfirm: () => void;
23
+ };
24
+
25
+ /**
26
+ * Confirmation prompt shown when a user toggles off a plugin that has
27
+ * currently-enabled dependents. Rendered inside the layout's dialog surface
28
+ * (via `LayoutOperation.UpdateDialog` with `type: 'alert'`), which provides
29
+ * the `AlertDialog.Root` / `Overlay` wrappers — this component renders only
30
+ * the content. `onConfirm` runs the cascade disable and closes the dialog;
31
+ * cancel is handled by the layout's open-change wiring.
32
+ */
33
+ export const DisableDependentsAlert = ({
34
+ pluginId,
35
+ dependents,
36
+ onResolvePluginName,
37
+ onConfirm,
38
+ }: DisableDependentsAlertProps) => {
39
+ const { t } = useTranslation(meta.id);
40
+ const resolveName = onResolvePluginName ?? ((id: string) => id);
41
+ return (
42
+ <AlertDialog.Content>
43
+ <AlertDialog.Body>
44
+ <AlertDialog.Title>{t('disable-dependents-dialog.title')}</AlertDialog.Title>
45
+ <AlertDialog.Description>
46
+ {t('disable-dependents-dialog.description', { plugin: resolveName(pluginId) })}
47
+ </AlertDialog.Description>
48
+ <ul className='mt-2 list-disc pl-6 text-sm text-description'>
49
+ {dependents.map((dependentId) => (
50
+ <li key={dependentId} title={dependentId}>
51
+ {resolveName(dependentId)}
52
+ </li>
53
+ ))}
54
+ </ul>
55
+ </AlertDialog.Body>
56
+ <AlertDialog.ActionBar>
57
+ <div className='grow' />
58
+ <AlertDialog.Cancel asChild>
59
+ <Button>{t('cancel.label')}</Button>
60
+ </AlertDialog.Cancel>
61
+ <AlertDialog.Action asChild>
62
+ <Button variant='primary' onClick={onConfirm}>
63
+ {t('disable-dependents-dialog.confirm.label')}
64
+ </Button>
65
+ </AlertDialog.Action>
66
+ </AlertDialog.ActionBar>
67
+ </AlertDialog.Content>
68
+ );
69
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ export * from './DisableDependentsAlert';
@@ -8,7 +8,8 @@ import { Plugin } from '@dxos/app-framework';
8
8
  import { random } from '@dxos/random';
9
9
  import { withLayout, withTheme } from '@dxos/react-ui/testing';
10
10
 
11
- import { translations } from '../../translations';
11
+ import { translations } from '#translations';
12
+
12
13
  import { PluginDetail } from './PluginDetail';
13
14
 
14
15
  const meta = {
@@ -28,7 +29,7 @@ type Story = StoryObj<typeof meta>;
28
29
  export const Default: Story = {
29
30
  args: {
30
31
  plugin: Plugin.define({
31
- id: 'example.com/plugin/test-plugin',
32
+ id: 'com.example.plugin.test',
32
33
  name: 'Test Plugin',
33
34
  description: random.lorem.paragraphs(2),
34
35
  icon: 'ph--bug--regular',
@@ -4,20 +4,107 @@
4
4
 
5
5
  import React from 'react';
6
6
 
7
- import { type Plugin } from '@dxos/app-framework';
8
- import { Icon, Input, Link, ScrollArea, useTranslation } from '@dxos/react-ui';
7
+ import { type Plugin, type PluginManager, type Registry } from '@dxos/app-framework';
8
+ import { Button, Icon, Input, Link, ScrollArea, Select, Tag, useTranslation } from '@dxos/react-ui';
9
9
  import { composable, composableProps, getStyles, mx } from '@dxos/ui-theme';
10
10
 
11
11
  import { meta } from '#meta';
12
12
 
13
+ import { PluginFailureBadge } from '../PluginFailureBadge';
14
+
13
15
  export type PluginDetailProps = {
14
16
  plugin: Plugin.Plugin;
15
17
  enabled?: boolean;
18
+ /** True while an in-flight install is running. Disables the install button. */
19
+ installing?: boolean;
20
+ /** True while an in-flight update is running. Disables the update button. */
21
+ updating?: boolean;
22
+ /** True when the catalog has a newer version than the one installed. */
23
+ hasUpdate?: boolean;
24
+ /** Currently installed version tag (used to mark the matching select option). */
25
+ installedVersionTag?: string;
26
+ /** Currently selected version tag in the picker. */
27
+ selectedVersionTag?: string;
28
+ /** Available versions of this plugin from the catalog. When non-empty, a version picker is shown. */
29
+ versions?: readonly Registry.PluginVersion[];
30
+ /**
31
+ * Ids of plugins this plugin declares as dependencies (direct only). Rendered
32
+ * under a "Requires" heading so the user can see what enabling this plugin
33
+ * will auto-enable.
34
+ */
35
+ dependencies?: readonly string[];
36
+ /**
37
+ * Ids of plugins that declare this plugin as a dependency (direct only).
38
+ * Rendered under a "Required by" heading so the user understands the
39
+ * downstream impact of disabling this plugin.
40
+ */
41
+ dependents?: readonly string[];
42
+ /**
43
+ * Failure record for this plugin, if any. When present a warning badge is
44
+ * rendered next to the plugin name in the header.
45
+ */
46
+ failure?: PluginManager.PluginFailure;
16
47
  onEnabledChange?: (enabled: boolean) => void;
48
+ /**
49
+ * When provided, the plugin is not installed and an Install button is shown
50
+ * in place of the enable Switch.
51
+ */
52
+ onInstall?: () => void;
53
+ /** Called when the user clicks Install on the version picker. */
54
+ onInstallVersion?: () => void;
55
+ /**
56
+ * Called when the user activates a dependency / dependent chip. When
57
+ * provided, chips are rendered as buttons that fire this handler with the
58
+ * target plugin id; when omitted, chips are non-interactive labels.
59
+ */
60
+ onNavigateToPlugin?: (pluginId: string) => void;
61
+ /**
62
+ * Resolves a plugin id to its display name for dependency / dependent
63
+ * chip labels. The component delegates the lookup to the parent so each
64
+ * surface can decide how to source names (e.g. `Plugin.Meta.name` from the
65
+ * registered plugin set). When omitted, chips render the raw id.
66
+ */
67
+ onResolvePluginName?: (pluginId: string) => string;
68
+ /**
69
+ * When provided, an Uninstall button is rendered. Leave undefined for core
70
+ * or non-removable plugins.
71
+ */
72
+ onUninstall?: () => void;
73
+ /**
74
+ * When provided and the plugin is installed with a newer catalog version available,
75
+ * an Update button is shown in place of the enable Switch.
76
+ */
77
+ onUpdate?: () => void;
78
+ /** Called when the user selects a different version in the picker. */
79
+ onVersionChange?: (tag: string) => void;
17
80
  };
18
81
 
19
82
  export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
20
- ({ plugin, enabled, onEnabledChange, ...props }, forwardedRef) => {
83
+ (
84
+ {
85
+ plugin,
86
+ enabled,
87
+ installing,
88
+ updating,
89
+ hasUpdate,
90
+ installedVersionTag,
91
+ selectedVersionTag,
92
+ versions,
93
+ dependencies,
94
+ dependents,
95
+ failure,
96
+ onEnabledChange,
97
+ onInstall,
98
+ onInstallVersion,
99
+ onNavigateToPlugin,
100
+ onResolvePluginName,
101
+ onUninstall,
102
+ onUpdate,
103
+ onVersionChange,
104
+ ...props
105
+ },
106
+ forwardedRef,
107
+ ) => {
21
108
  const { t } = useTranslation(meta.id);
22
109
  const {
23
110
  id,
@@ -34,28 +121,37 @@ export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
34
121
  return (
35
122
  <ScrollArea.Root {...composableProps(props)} orientation='vertical' ref={forwardedRef}>
36
123
  <ScrollArea.Viewport>
37
- <div role='none' className='dx-document grid grid-cols-[min-content_1fr] gap-4 p-4'>
38
- <div role='none'>
39
- <Icon classNames={mx('p-1 rounded-md', styles.fill, styles.surfaceText)} icon={icon} size={14} />
124
+ <div className='dx-document grid grid-cols-[min-content_1fr] gap-4 p-4'>
125
+ <div>
126
+ <Icon classNames={mx('p-1 rounded-md', styles.fill, styles.foreground)} icon={icon} size={14} />
40
127
  </div>
41
- <div role='none' className='flex flex-col gap-6'>
42
- <div role='none' className='grid grid-cols-[1fr_min-content] gap-x-3 w-full pt-1'>
43
- <h2 className='text-xl'>{name}</h2>
44
- <Input.Root>
45
- <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
46
- </Input.Root>
128
+ <div className='flex flex-col gap-6'>
129
+ <div className='grid grid-cols-[1fr_min-content] gap-x-3 w-full pt-1'>
130
+ <div className='flex items-center gap-2'>
131
+ <h2 className='text-xl'>{name}</h2>
132
+ {failure && <PluginFailureBadge failure={failure} size={5} />}
133
+ </div>
134
+ {onInstall ? (
135
+ <Button density='fine' variant='primary' disabled={installing} onClick={onInstall}>
136
+ {installing ? t('installing.label') : t('install.label')}
137
+ </Button>
138
+ ) : (
139
+ <Input.Root>
140
+ <Input.Switch classNames='self-center' checked={enabled} onCheckedChange={onEnabledChange} />
141
+ </Input.Root>
142
+ )}
47
143
  <p className='pt-0.5 text-sm text-description'>{id}</p>
48
144
  </div>
49
- <div role='none'>
145
+ <div>
50
146
  <p className='text-description'>{description}</p>
51
147
  </div>
52
148
  {screenshots && screenshots.length > 0 && (
53
- <div role='none' className='flex flex-col gap-2'>
149
+ <div className='flex flex-col gap-2'>
54
150
  <h2>Preview</h2>
55
151
  <img src={screenshots[0]} alt={name} className='aspect-video object-fit' />
56
152
  </div>
57
153
  )}
58
- <div role='none' className='flex flex-col gap-2'>
154
+ <div className='flex flex-col gap-2'>
59
155
  <h2>Resources</h2>
60
156
  <div className='flex gap-2'>
61
157
  {homePage && (
@@ -73,6 +169,86 @@ export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
73
169
  )}
74
170
  </div>
75
171
  </div>
172
+ {((dependencies && dependencies.length > 0) || (dependents && dependents.length > 0)) && (
173
+ <div className='flex flex-col gap-2'>
174
+ {dependencies && dependencies.length > 0 && (
175
+ <>
176
+ <h2>{t('dependencies.label')}</h2>
177
+ <div className='flex flex-wrap gap-1'>
178
+ {dependencies.map((depId) => (
179
+ <PluginChip
180
+ key={depId}
181
+ id={depId}
182
+ name={onResolvePluginName?.(depId) ?? depId}
183
+ onClick={onNavigateToPlugin}
184
+ />
185
+ ))}
186
+ </div>
187
+ </>
188
+ )}
189
+ {dependents && dependents.length > 0 && (
190
+ <>
191
+ <h2>{t('dependents.label')}</h2>
192
+ <div className='flex flex-wrap gap-1'>
193
+ {dependents.map((dependentId) => (
194
+ <PluginChip
195
+ key={dependentId}
196
+ id={dependentId}
197
+ name={onResolvePluginName?.(dependentId) ?? dependentId}
198
+ onClick={onNavigateToPlugin}
199
+ />
200
+ ))}
201
+ </div>
202
+ </>
203
+ )}
204
+ </div>
205
+ )}
206
+ {versions && versions.length > 0 && (
207
+ <div className='flex flex-col gap-2'>
208
+ <h2>{t('versions.label')}</h2>
209
+ <div className='flex gap-2 items-center'>
210
+ <Select.Root value={selectedVersionTag} onValueChange={onVersionChange}>
211
+ <Select.TriggerButton classNames='min-w-32' />
212
+ <Select.Portal>
213
+ <Select.Content>
214
+ <Select.Viewport>
215
+ {versions.map((versionEntry) => (
216
+ <Select.Option key={versionEntry.tag} value={versionEntry.tag}>
217
+ {versionEntry.tag}
218
+ {installedVersionTag === versionEntry.tag ? ` (${t('installed.label')})` : ''}
219
+ </Select.Option>
220
+ ))}
221
+ </Select.Viewport>
222
+ </Select.Content>
223
+ </Select.Portal>
224
+ </Select.Root>
225
+ {onInstallVersion && (
226
+ <Button
227
+ density='fine'
228
+ variant='primary'
229
+ disabled={installing || selectedVersionTag === installedVersionTag}
230
+ onClick={onInstallVersion}
231
+ >
232
+ {installing ? t('installing.label') : t('install-version.label')}
233
+ </Button>
234
+ )}
235
+ </div>
236
+ </div>
237
+ )}
238
+ {(onUninstall || (hasUpdate && onUpdate) || updating) && (
239
+ <div className='flex gap-2'>
240
+ {updating ? (
241
+ <Button variant='primary' disabled>
242
+ {t('updating.label')}
243
+ </Button>
244
+ ) : hasUpdate && onUpdate ? (
245
+ <Button variant='primary' onClick={onUpdate}>
246
+ {t('update.label')}
247
+ </Button>
248
+ ) : null}
249
+ {onUninstall && <Button onClick={onUninstall}>{t('uninstall.label')}</Button>}
250
+ </div>
251
+ )}
76
252
  </div>
77
253
  </div>
78
254
  </ScrollArea.Viewport>
@@ -82,3 +258,15 @@ export const PluginDetail = composable<HTMLDivElement, PluginDetailProps>(
82
258
  );
83
259
 
84
260
  PluginDetail.displayName = 'PluginDetail';
261
+
262
+ /**
263
+ * Renders a single dependency / dependent reference using the shared `Tag`
264
+ * primitive. When `onClick` is provided the chip fires the handler with the
265
+ * canonical plugin id; the id is also surfaced via `title` so it stays one
266
+ * hover away even when the chip shows the friendlier `name`.
267
+ */
268
+ const PluginChip = ({ id, name, onClick }: { id: string; name: string; onClick?: (pluginId: string) => void }) => (
269
+ <Tag title={id} onClick={onClick ? () => onClick(id) : undefined}>
270
+ {name}
271
+ </Tag>
272
+ );
@@ -0,0 +1,68 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ import React from 'react';
6
+
7
+ import { type PluginManager } from '@dxos/app-framework';
8
+ import { IconButton, Popover, useTranslation } from '@dxos/react-ui';
9
+
10
+ import { meta } from '#meta';
11
+
12
+ // Mirrors react-ui `Icon`'s `size` prop literal subset; kept inline so we don't
13
+ // have to add `@dxos/ui-types` as a dep just for one type alias.
14
+ type IconSize = 4 | 5 | 6 | 8;
15
+
16
+ export type PluginFailureBadgeProps = {
17
+ failure: PluginManager.PluginFailure;
18
+ /** Optional override for the trigger icon's tailwind classes. */
19
+ iconClassNames?: string;
20
+ /** Visual size of the warning icon (passed through to react-ui `<Icon />`). */
21
+ size?: IconSize;
22
+ };
23
+
24
+ /**
25
+ * Compact warning glyph rendered next to a plugin's name when it has failed
26
+ * to load or activate. Clicking the icon opens a popover that names the phase
27
+ * (load / activation), the reason (timeout / error), and the underlying error
28
+ * message — enough for an operator to tell "remote host is offline" apart
29
+ * from "the plugin crashed".
30
+ */
31
+ export const PluginFailureBadge = ({ failure, iconClassNames, size = 4 }: PluginFailureBadgeProps) => {
32
+ const { t } = useTranslation(meta.id);
33
+
34
+ const phaseLabel = failure.phase === 'load' ? t('failure-phase-load.label') : t('failure-phase-activation.label');
35
+ const reasonLabel =
36
+ failure.reason === 'timeout' ? t('failure-reason-timeout.label') : t('failure-reason-error.label');
37
+
38
+ return (
39
+ <Popover.Root>
40
+ <Popover.Trigger asChild>
41
+ <IconButton
42
+ variant='ghost'
43
+ iconOnly
44
+ noTooltip
45
+ icon='ph--warning--bold'
46
+ size={size}
47
+ iconClassNames={iconClassNames}
48
+ label={t('failure-badge.label')}
49
+ data-testid={`pluginFailureBadge.${failure.id}`}
50
+ // Don't bubble up to row click handlers (e.g. the card's `onClick`
51
+ // that opens the details pane). The popover is the action here.
52
+ onClick={(event) => event.stopPropagation()}
53
+ />
54
+ </Popover.Trigger>
55
+ <Popover.Content>
56
+ <Popover.Viewport>
57
+ <div className='px-3 py-2 min-w-[18rem] max-w-[28rem] flex flex-col gap-1'>
58
+ <p className='font-medium text-sm'>
59
+ {t('failure-title.label', { phase: phaseLabel, reason: reasonLabel })}
60
+ </p>
61
+ <p className='text-description text-sm break-words'>{failure.error.message}</p>
62
+ </div>
63
+ </Popover.Viewport>
64
+ <Popover.Arrow />
65
+ </Popover.Content>
66
+ </Popover.Root>
67
+ );
68
+ };
@@ -0,0 +1,5 @@
1
+ //
2
+ // Copyright 2026 DXOS.org
3
+ //
4
+
5
+ export * from './PluginFailureBadge';
@@ -2,37 +2,100 @@
2
2
  // Copyright 2025 DXOS.org
3
3
  //
4
4
 
5
- import React, { type MouseEvent, useCallback } from 'react';
5
+ import React, { type MouseEvent, useCallback, useMemo } from 'react';
6
6
 
7
- import { type Plugin } from '@dxos/app-framework';
8
- import { type ChromaticPalette, Icon, IconButton, Input, Link, ListItem, Tag, useTranslation } from '@dxos/react-ui';
7
+ import { type Plugin, type PluginManager } from '@dxos/app-framework';
8
+ import {
9
+ Button,
10
+ type ChromaticPalette,
11
+ Icon,
12
+ IconButton,
13
+ Input,
14
+ Link,
15
+ ListItem,
16
+ type NeutralPalette,
17
+ Tag,
18
+ useTranslation,
19
+ } from '@dxos/react-ui';
9
20
  import { mx } from '@dxos/ui-theme';
10
21
  import { getStyles } from '@dxos/ui-theme';
11
22
 
12
23
  import { meta } from '#meta';
13
24
  import { type RegistryTagType } from '#types';
14
25
 
26
+ import { PluginFailureBadge } from '../PluginFailureBadge';
27
+
15
28
  export type PluginItemProps = {
16
29
  plugin: Plugin.Plugin;
30
+ /** Ids of plugins currently installed (loaded into the manager). */
17
31
  installed?: readonly string[];
32
+ /** Ids of plugins whose install is in flight. */
33
+ installing?: readonly string[];
18
34
  enabled?: readonly string[];
35
+ /**
36
+ * Derived tags (e.g. `registry`, `local`) to display alongside the plugin's own meta.tags.
37
+ * Not persisted to plugin meta; computed per-render by the container.
38
+ */
39
+ extraTags?: readonly string[];
19
40
  onClick?: (id: string) => void;
20
41
  onChange?: (id: string, enabled: boolean) => void;
42
+ /**
43
+ * Install handler. When provided and the plugin is not installed, an Install button
44
+ * is rendered in place of the enable switch.
45
+ */
46
+ onInstall?: (id: string) => void;
47
+ /**
48
+ * When true and plugin is installed, shows an Update button instead of the enable switch.
49
+ */
50
+ hasUpdate?: boolean;
51
+ /** Called when the user clicks the Update button. */
52
+ onUpdate?: (id: string) => void;
53
+ /** Ids of plugins whose update is currently in flight. */
54
+ updating?: readonly string[];
21
55
  hasSettings?: (id: string) => boolean;
22
56
  onSettings?: (id: string) => void;
57
+ /**
58
+ * Failure record for this plugin, if any. When present a warning badge is
59
+ * rendered next to the plugin name; clicking it opens a popover with the
60
+ * phase, reason, and error message.
61
+ */
62
+ failure?: PluginManager.PluginFailure;
23
63
  };
24
64
 
25
65
  export const PluginItem = ({
26
66
  plugin,
67
+ installed,
68
+ installing,
27
69
  enabled = [],
70
+ extraTags,
28
71
  onClick,
29
72
  onChange,
73
+ onInstall,
74
+ hasUpdate,
75
+ onUpdate,
76
+ updating,
30
77
  hasSettings: hasSettingsProp,
31
78
  onSettings,
79
+ failure,
32
80
  }: PluginItemProps) => {
33
81
  const { t } = useTranslation(meta.id);
34
82
  const { id, name, description, tags, icon = 'ph--circle--regular', iconHue = 'neutral' } = plugin.meta;
83
+ const displayTags = useMemo(() => {
84
+ if (!extraTags || extraTags.length === 0) {
85
+ return tags ?? [];
86
+ }
87
+ const set = new Set<string>(tags ?? []);
88
+ for (const tag of extraTags) {
89
+ set.add(tag);
90
+ }
91
+ return Array.from(set);
92
+ }, [tags, extraTags]);
35
93
  const isEnabled = enabled.includes(id);
94
+ const isInstalled = installed ? installed.includes(id) : true;
95
+ const isInstalling = installing?.includes(id) ?? false;
96
+ const isUpdating = updating?.includes(id) ?? false;
97
+ const showInstallButton = !!onInstall && !isInstalled;
98
+ const showUpdateButton = !!onUpdate && isInstalled && !!hasUpdate;
36
99
  const inputId = `${id}-input`;
37
100
  const labelId = `${id}-label`;
38
101
  const descriptionId = `${id}-description`;
@@ -46,6 +109,22 @@ export const PluginItem = ({
46
109
  [id, isEnabled, onChange],
47
110
  );
48
111
 
112
+ const handleInstall = useCallback(
113
+ (event: MouseEvent) => {
114
+ event.stopPropagation();
115
+ onInstall?.(id);
116
+ },
117
+ [id, onInstall],
118
+ );
119
+
120
+ const handleUpdate = useCallback(
121
+ (event: MouseEvent) => {
122
+ event.stopPropagation();
123
+ onUpdate?.(id);
124
+ },
125
+ [id, onUpdate],
126
+ );
127
+
49
128
  const hasSettings = hasSettingsProp?.(id) ?? false;
50
129
  const handleSettings = useCallback(() => onSettings?.(id), [id, onSettings]);
51
130
  const styles = getStyles(iconHue);
@@ -62,7 +141,7 @@ export const PluginItem = ({
62
141
  >
63
142
  <div className={mx(gridRows, 'justify-center rounded-l-md', styles.surface)}>
64
143
  <Icon
65
- classNames={mx('row-start-2 cursor-pointer', styles.surfaceText)}
144
+ classNames={mx('row-start-2 cursor-pointer', styles.foreground)}
66
145
  icon={icon}
67
146
  size={14}
68
147
  onClick={handleClick}
@@ -70,8 +149,9 @@ export const PluginItem = ({
70
149
  </div>
71
150
 
72
151
  <div className={mx(gridRows)}>
73
- <div className='flex items-center overflow-hidden cursor-pointer' onClick={handleClick}>
152
+ <div className='flex items-center gap-2 overflow-hidden cursor-pointer' onClick={handleClick}>
74
153
  <span className='text-lg truncate'>{name ?? id}</span>
154
+ {failure && <PluginFailureBadge failure={failure} />}
75
155
  </div>
76
156
 
77
157
  <div>
@@ -79,7 +159,7 @@ export const PluginItem = ({
79
159
  </div>
80
160
 
81
161
  <div className='flex -ms-0.5 overflow-x-auto scrollbar-none'>
82
- {tags?.map((tag) => (
162
+ {displayTags.map((tag) => (
83
163
  <Tag key={tag} palette={tagColors[tag as RegistryTagType]} classNames='text-xs uppercase font-thin'>
84
164
  {tag}
85
165
  </Tag>
@@ -91,7 +171,7 @@ export const PluginItem = ({
91
171
  aria-describedby={descriptionId}
92
172
  classNames='cursor-pointer'
93
173
  icon='ph--gear--regular'
94
- label={t('settings.label')}
174
+ label={t('plugin-settings.label')}
95
175
  iconOnly
96
176
  size={4}
97
177
  onClick={handleSettings}
@@ -104,9 +184,29 @@ export const PluginItem = ({
104
184
 
105
185
  <div className='grow' />
106
186
  <div className='pe-1'>
107
- <Input.Root id={inputId}>
108
- <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
109
- </Input.Root>
187
+ {isUpdating ? (
188
+ <Button aria-describedby={descriptionId} density='fine' variant='primary' disabled>
189
+ {t('updating.label')}
190
+ </Button>
191
+ ) : showUpdateButton ? (
192
+ <Button aria-describedby={descriptionId} density='fine' variant='primary' onClick={handleUpdate}>
193
+ {t('update.label')}
194
+ </Button>
195
+ ) : showInstallButton ? (
196
+ <Button
197
+ aria-describedby={descriptionId}
198
+ density='fine'
199
+ variant='primary'
200
+ disabled={isInstalling}
201
+ onClick={handleInstall}
202
+ >
203
+ {isInstalling ? t('installing.label') : t('install.label')}
204
+ </Button>
205
+ ) : (
206
+ <Input.Root id={inputId}>
207
+ <Input.Switch classNames='self-center' checked={isEnabled} onClick={handleChange} />
208
+ </Input.Root>
209
+ )}
110
210
  </div>
111
211
  </div>
112
212
  </div>
@@ -114,11 +214,13 @@ export const PluginItem = ({
114
214
  );
115
215
  };
116
216
 
117
- const tagColors: Record<RegistryTagType, ChromaticPalette> = {
217
+ const tagColors: Record<RegistryTagType, ChromaticPalette | NeutralPalette> = {
118
218
  new: 'rose',
119
219
  beta: 'teal',
120
220
  labs: 'blue',
121
221
  popular: 'green',
122
222
  featured: 'pink',
123
223
  experimental: 'amber',
224
+ registry: 'indigo',
225
+ local: 'neutral',
124
226
  };
@@ -11,9 +11,9 @@ import { ScrollArea } from '@dxos/react-ui';
11
11
  import { withLayout, withTheme } from '@dxos/react-ui/testing';
12
12
  import { getHashHue } from '@dxos/ui-theme';
13
13
 
14
+ import { translations } from '#translations';
14
15
  import { RegistryTagType } from '#types';
15
16
 
16
- import { translations } from '../../translations';
17
17
  import { PluginList } from './PluginList';
18
18
 
19
19
  random.seed(1);