nexu-io
diff --git a/‎apps/web/src/components/ChatComposer.tsx‎
Lines changed: 30 additions & 20 deletions b/‎apps/web/src/components/ChatComposer.tsx‎
Lines changed: 30 additions & 20 deletions
diff --git a/‎apps/web/src/components/ComposerPluginPreview.tsx‎
Lines changed: 111 additions & 0 deletions b/‎apps/web/src/components/ComposerPluginPreview.tsx‎
Lines changed: 111 additions & 0 deletions
@@ -55,6 +55,8 @@ import { buildVisualAnnotationAttachment, commentTargetDisplayName } from '../co
 import { Icon, type IconName } from "./Icon";
 import { SessionModeToggle } from './SessionModeToggle';
 import { ComposerPlusMenu } from './ComposerPlusMenu';
+import { ComposerPluginPreview } from './ComposerPluginPreview';
+import { computeToolboxDetailPosition } from './composer-detail-position';
 import { PluginDetailsModal } from "./PluginDetailsModal";
 import { PluginsSection, type PluginsSectionHandle } from "./PluginsSection";
 import { BUILT_IN_PETS, CUSTOM_PET_ID } from "./pet/pets";
@@ -3345,14 +3347,15 @@ function DesignToolboxPanel({
   }
   function showToolboxDetail(key: string, rect: DOMRect, node: ReactNode) {
     cancelDetailClose();
-    const detailWidth = 264;
-    const gap = 8;
-    const toRight = rect.right + gap;
-    const left =
-      toRight + detailWidth > window.innerWidth - 8
-        ? rect.left - gap - detailWidth
-        : toRight;
-    setToolboxDetail({ key, left, top: rect.top, node });
+    // Plugin rows render a tall visual preview; the helper clamps both axes
+    // into the viewport so the fixed panel never lands off-screen on a
+    // narrow pane (see computeToolboxDetailPosition).
+    const { left, top } = computeToolboxDetailPosition(
+      rect,
+      { width: window.innerWidth, height: window.innerHeight },
+      { detailWidth: 264, gap: 8, margin: 8, estimatedHeight: 340 },
+    );
+    setToolboxDetail({ key, left, top, node });
   }
   function scheduleToolboxDetailClose(key: string) {
     cancelDetailClose();
@@ -3448,18 +3451,25 @@ function DesignToolboxPanel({
                   }
                 }}
                 detail={
-                  <>
-                    <div className="plus-menu__detail-title">{resource.title}</div>
-                    {resource.subtitle ? (
-                      <div className="plus-menu__detail-desc">{resource.subtitle}</div>
-                    ) : null}
-                    <div className="plus-menu__detail-skill">
-                      {designToolboxResourceKindLabel(resource.kind, t)}
-                    </div>
-                    <div className="plus-menu__detail-badge">
-                      {active ? t('chat.designToolbox.selected') : resource.badge}
-                    </div>
-                  </>
+                  // Plugin rows reuse the rich visual preview (poster /
+                  // sandboxed example iframe + meta); every other kind keeps
+                  // the compact text detail since it has no preview asset.
+                  resource.kind === 'plugin' ? (
+                    <ComposerPluginPreview record={resource.plugin} locale={locale} />
+                  ) : (
+                    <>
+                      <div className="plus-menu__detail-title">{resource.title}</div>
+                      {resource.subtitle ? (
+                        <div className="plus-menu__detail-desc">{resource.subtitle}</div>
+                      ) : null}
+                      <div className="plus-menu__detail-skill">
+                        {designToolboxResourceKindLabel(resource.kind, t)}
+                      </div>
+                      <div className="plus-menu__detail-badge">
+                        {active ? t('chat.designToolbox.selected') : resource.badge}
+                      </div>
+                    </>
+                  )
                 }
               />
             );
 
@@ -0,0 +1,111 @@
+// Hover preview panel for the composer "+" → Plugins flyout.
+//
+// The plugin list shows only a sparkle + name; committing to a plugin
+// from a bare name is a guess. This panel is the second-level surface
+// that fills in the gap: hovering (or arrow-defaulting to) a plugin
+// renders its live preview hero plus the title, a localized kind tag,
+// the trust badge, and the description, so the choice is informed before
+// the user clicks.
+//
+// It reuses the plugins-home preview stack (`inferPluginPreview` +
+// `PreviewSurface`) so the hero looks identical to the gallery tile,
+// and the localization helpers so the copy follows the active locale.
+
+import { useMemo } from 'react';
+import type { InstalledPluginRecord } from '@open-design/contracts';
+import { useT } from '../i18n';
+import { PreviewSurface } from './plugins-home/cards/PreviewSurface';
+import { extractCategories } from './plugins-home/facets';
+import {
+  localizePluginDescription,
+  localizePluginTitle,
+} from './plugins-home/localization';
+import { inferPluginPreview } from './plugins-home/preview';
+import { TrustBadge } from './TrustBadge';
+
+// Map a plugin's primary facet (from `extractCategories`) to its localized
+// chip label — the same taxonomy as the home Community filters, so the
+// preview's "kind" tag reads identically to those chips.
+function pluginKindLabel(
+  slug: string | undefined,
+  t: ReturnType<typeof useT>,
+): string | null {
+  switch (slug) {
+    case 'prototype':
+      return t('homeHero.chip.prototype');
+    case 'live-artifact':
+      return t('homeHero.chip.liveArtifact');
+    case 'deck':
+      return t('pluginsHome.facet.slides');
+    case 'image':
+      return t('homeHero.chip.image');
+    case 'video':
+      return t('homeHero.chip.video');
+    case 'hyperframes':
+      return t('homeHero.chip.hyperframes');
+    case 'audio':
+      return t('homeHero.chip.audio');
+    default:
+      return null;
+  }
+}
+
+// Design-system plugins aren't one of the home Community facets, so
+// `extractCategories` returns nothing for them. Detect them the same way
+// the preview classifier does (mode / tag) so they still get a kind tag.
+function isDesignSystemRecord(record: InstalledPluginRecord): boolean {
+  const od = record.manifest?.od as { mode?: unknown } | undefined;
+  if (typeof od?.mode === 'string' && od.mode.toLowerCase() === 'design-system') {
+    return true;
+  }
+  return (record.manifest?.tags ?? []).some(
+    (tag) => tag.toLowerCase() === 'design-system',
+  );
+}
+
+export function ComposerPluginPreview({
+  record,
+  locale,
+}: {
+  record: InstalledPluginRecord;
+  locale: string;
+}) {
+  const t = useT();
+  const preview = useMemo(() => inferPluginPreview(record), [record]);
+  const title = localizePluginTitle(locale, record);
+  const description = localizePluginDescription(locale, record);
+  const kindLabel = useMemo(() => {
+    const facet = pluginKindLabel(extractCategories(record)[0], t);
+    if (facet) return facet;
+    return isDesignSystemRecord(record) ? t('entry.navDesignSystems') : null;
+  }, [record, t]);
+
+  return (
+    <div className="plus-menu__preview" data-plugin-id={record.id}>
+      <div className="plus-menu__preview-meta">
+        <div className="plus-menu__preview-title-row">
+          <span className="plus-menu__preview-title" title={title}>
+            {title}
+          </span>
+          {kindLabel ? (
+            <span className="plus-menu__preview-kind">{kindLabel}</span>
+          ) : null}
+          <TrustBadge trust={record.trust} />
+        </div>
+        {description ? (
+          <p className="plus-menu__preview-desc">{description}</p>
+        ) : null}
+      </div>
+      <div className="plus-menu__preview-hero">
+        {/* `eager` mounts media/iframe immediately — the panel is already a
+            deliberate hover, so there is no off-screen cost to defer. */}
+        <PreviewSurface
+          pluginId={record.id}
+          pluginTitle={title}
+          preview={preview}
+          eager
+        />
+      </div>
+    </div>
+  );
+}