feat(agent): add event orchestration surface

web/src/app/home/components/dynamic-form/DynamicFormItemComponent.tsx

@@ -65,6 +65,51 @@ import SettingsDialog, {
   SettingsSection,
 } from '@/app/home/components/settings-dialog/SettingsDialog';
 
+function getPluginComponentIconURL(value?: string): string | null {
+  if (!value?.startsWith('plugin:')) {
+    return null;
+  }
+
+  const match = value.match(/^plugin:([^/]+)\/([^/]+)(?:\/|$)/);
+  if (!match) {
+    return null;
+  }
+
+  return httpClient.getPluginIconURL(match[1], match[2]);
+}
+
+function SelectOptionContent({
+  label,
+  value,
+  showDescription = false,
+}: {
+  label: string;
+  value: string;
+  showDescription?: boolean;
+}) {
+  const iconURL = getPluginComponentIconURL(value);
+
+  return (
+    <div className="flex min-w-0 items-center gap-2">
+      {iconURL && (
+        <img
+          src={iconURL}
+          alt=""
+          className="size-5 shrink-0 rounded object-cover"
+        />
+      )}
+      <div className="min-w-0 flex flex-col">
+        <span className="truncate">{label}</span>
+        {showDescription && (
+          <span className="truncate text-xs text-muted-foreground">
+            {value}
+          </span>
+        )}
+      </div>
+    </div>
+  );
+}
+
 export default function DynamicFormItemComponent({
   config,
   field,
@@ -378,10 +423,20 @@ export default function DynamicFormItemComponent({
       );
 
     case DynamicFormItemType.SELECT:
+      const selectedOption = config.options?.find(
+        (option) => option.name === field.value,
+      );
       return (
-        <Select value={field.value} onValueChange={field.onChange}>
+        <Select value={field.value ?? ''} onValueChange={field.onChange}>
           <SelectTrigger className="w-full max-w-md bg-[#ffffff] dark:bg-[#2a2a2e]">
-            <SelectValue placeholder={t('common.select')} />
+            {selectedOption ? (
+              <SelectOptionContent
+                label={extractI18nObject(selectedOption.label)}
+                value={selectedOption.name}
+              />
+            ) : (
+              <SelectValue placeholder={t('common.select')} />
+            )}
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
@@ -391,7 +446,11 @@ export default function DynamicFormItemComponent({
                   value={option.name}
                   description={option.name}
                 >
-                  {extractI18nObject(option.label)}
+                  <SelectOptionContent
+                    label={extractI18nObject(option.label)}
+                    value={option.name}
+                    showDescription
+                  />
                 </SelectItem>
               ))}
             </SelectGroup>