feat(web): add icons/emoji to selectors, sync bot enable status and plugin list in sidebar

- Bot adapter selector: show adapter icon in trigger and dropdown items
- Knowledge engine selector: show plugin icon derived from plugin_id
- Pipeline binding selector: show pipeline emoji in trigger and dropdown items
- Knowledge base selectors (single/multi): show KB emoji in all views
- Sidebar bot entries: show green/gray status dot on adapter icon for enable/disable state
- Sidebar plugin list: sync after install/uninstall from all entry points (PluginInstalledComponent, plugins page, marketplace page)
- Pipeline form: add cursor-pointer to left-side tab list buttons
- Clean up unused onBotDeleted prop from BotForm

web/src/app/home/bots/BotDetailContent.tsx

@@ -144,7 +144,6 @@ export default function BotDetailContent({ id }: { id: string }) {
             <BotForm
               initBotId={undefined}
               onFormSubmit={handleFormSubmit}
-              onBotDeleted={handleBotDeleted}
               onNewBotCreated={handleNewBotCreated}
             />
           </div>
@@ -238,7 +237,6 @@ export default function BotDetailContent({ id }: { id: string }) {
               <BotForm
                 initBotId={id}
                 onFormSubmit={handleFormSubmit}
-                onBotDeleted={handleBotDeleted}
                 onNewBotCreated={handleNewBotCreated}
                 onDirtyChange={setFormDirty}
               />

web/src/app/home/bots/components/bot-form/BotForm.tsx

@@ -65,13 +65,11 @@ const getFormSchema = (t: (key: string) => string) =>
 export default function BotForm({
   initBotId,
   onFormSubmit,
-  onBotDeleted,
   onNewBotCreated,
   onDirtyChange,
 }: {
   initBotId?: string;
   onFormSubmit: (value: z.infer<ReturnType<typeof getFormSchema>>) => void;
-  onBotDeleted: () => void;
   onNewBotCreated: (botId: string) => void;
   onDirtyChange?: (dirty: boolean) => void;
 }) {
@@ -234,6 +232,7 @@ export default function BotForm({
         return {
           label: item.name,
           value: item.uuid ?? '',
+          emoji: item.emoji,
         };
       }),
     );
@@ -461,13 +460,40 @@ export default function BotForm({
                     <FormControl>
                       <Select onValueChange={field.onChange} {...field}>
                         <SelectTrigger>
-                          <SelectValue placeholder={t('bots.selectPipeline')} />
+                          {field.value ? (
+                            (() => {
+                              const pipeline = pipelineNameList.find(
+                                (p) => p.value === field.value,
+                              );
+                              return (
+                                <div className="flex items-center gap-2">
+                                  {pipeline?.emoji && (
+                                    <span className="text-sm shrink-0">
+                                      {pipeline.emoji}
+                                    </span>
+                                  )}
+                                  <span>{pipeline?.label ?? field.value}</span>
+                                </div>
+                              );
+                            })()
+                          ) : (
+                            <SelectValue
+                              placeholder={t('bots.selectPipeline')}
+                            />
+                          )}
                         </SelectTrigger>
                         <SelectContent>
                           <SelectGroup>
                             {pipelineNameList.map((item) => (
                               <SelectItem key={item.value} value={item.value}>
-                                {item.label}
+                                <div className="flex items-center gap-2">
+                                  {item.emoji && (
+                                    <span className="text-sm shrink-0">
+                                      {item.emoji}
+                                    </span>
+                                  )}
+                                  <span>{item.label}</span>
+                                </div>
                               </SelectItem>
                             ))}
                           </SelectGroup>
@@ -508,13 +534,35 @@ export default function BotForm({
                       value={field.value}
                     >
                       <SelectTrigger className="w-[240px]">
-                        <SelectValue placeholder={t('bots.selectAdapter')} />
+                        {field.value ? (
+                          <div className="flex items-center gap-2">
+                            <img
+                              src={httpClient.getAdapterIconURL(field.value)}
+                              alt=""
+                              className="h-5 w-5 rounded"
+                            />
+                            <span>
+                              {adapterNameList.find(
+                                (a) => a.value === field.value,
+                              )?.label ?? field.value}
+                            </span>
+                          </div>
+                        ) : (
+                          <SelectValue placeholder={t('bots.selectAdapter')} />
+                        )}
                       </SelectTrigger>
                       <SelectContent>
                         <SelectGroup>
                           {adapterNameList.map((item) => (
                             <SelectItem key={item.value} value={item.value}>
-                              {item.label}
+                              <div className="flex items-center gap-2">
+                                <img
+                                  src={httpClient.getAdapterIconURL(item.value)}
+                                  alt=""
+                                  className="h-5 w-5 rounded"
+                                />
+                                <span>{item.label}</span>
+                              </div>
                             </SelectItem>
                           ))}
                         </SelectGroup>

web/src/app/home/bots/components/bot-form/ChooseEntity.ts

@@ -6,4 +6,5 @@ export interface IChooseAdapterEntity {
 export interface IPipelineEntity {
   label: string;
   value: string;
+  emoji?: string;
 }

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

@@ -541,7 +541,25 @@ export default function DynamicFormItemComponent({
       return (
         <Select value={field.value} onValueChange={field.onChange}>
           <SelectTrigger className="bg-[#ffffff] dark:bg-[#2a2a2e]">
-            <SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
+            {field.value && field.value !== '__none__' ? (
+              (() => {
+                const selectedKb = knowledgeBases.find(
+                  (kb) => kb.uuid === field.value,
+                );
+                return (
+                  <div className="flex items-center gap-2">
+                    {selectedKb?.emoji && (
+                      <span className="text-sm shrink-0">
+                        {selectedKb.emoji}
+                      </span>
+                    )}
+                    <span>{selectedKb?.name ?? field.value}</span>
+                  </div>
+                );
+              })()
+            ) : (
+              <SelectValue placeholder={t('knowledge.selectKnowledgeBase')} />
+            )}
           </SelectTrigger>
           <SelectContent>
             <SelectGroup>
@@ -553,7 +571,12 @@ export default function DynamicFormItemComponent({
                 <SelectLabel>{engineName}</SelectLabel>
                 {kbs.map((base) => (
                   <SelectItem key={base.uuid} value={base.uuid ?? ''}>
-                    {base.name}
+                    <div className="flex items-center gap-2">
+                      {base.emoji && (
+                        <span className="text-sm shrink-0">{base.emoji}</span>
+                      )}
+                      <span>{base.name}</span>
+                    </div>
                   </SelectItem>
                 ))}
               </SelectGroup>
@@ -597,6 +620,11 @@ export default function DynamicFormItemComponent({
                       <div className="flex items-center gap-2 flex-1">
                         <div className="flex-1 min-w-0">
                           <div className="font-medium flex items-center gap-2">
+                            {currentKb.emoji && (
+                              <span className="text-sm shrink-0">
+                                {currentKb.emoji}
+                              </span>
+                            )}
                             {currentKb.name}
                             {currentKb.knowledge_engine?.name && (
                               <span className="text-xs px-2 py-0.5 rounded-full bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-300">
@@ -686,7 +714,14 @@ export default function DynamicFormItemComponent({
                             aria-label={`Select ${base.name}`}
                           />
                           <div className="flex-1">
-                            <div className="font-medium">{base.name}</div>
+                            <div className="font-medium flex items-center gap-2">
+                              {base.emoji && (
+                                <span className="text-sm shrink-0">
+                                  {base.emoji}
+                                </span>
+                              )}
+                              {base.name}
+                            </div>
                             {base.description && (
                               <div className="text-sm text-muted-foreground">
                                 {base.description}

web/src/app/home/components/home-sidebar/HomeSidebar.tsx

@@ -77,6 +77,7 @@ import {
   CollapsibleTrigger,
 } from '@/components/ui/collapsible';
 import { ChevronRight, Plus } from 'lucide-react';
+import { cn } from '@/lib/utils';
 import { useSidebarData, SidebarEntityItem } from './SidebarDataContext';
 
 // Compare two version strings, returns true if v1 > v2
@@ -316,6 +317,7 @@ function NavItems({
         const canCreate = CREATABLE_CATEGORIES.includes(config.id);
         const isCollapseOnly = COLLAPSIBLE_ONLY_CATEGORIES.includes(config.id);
         const isPlugin = config.id === 'plugins';
+        const isBot = config.id === 'bots';
         const isActive =
           selectedChild?.id === config.id ||
           pathname === routePrefix ||
@@ -391,9 +393,9 @@ function NavItems({
                               >
                                 <a
                                   href={itemRoute}
-                                  className={
+                                  className={cn(
-                                    isPlugin && !item.debug ? 'pr-6' : ''
+                                    isPlugin && !item.debug ? 'pr-6' : '',
-                                  }
+                                  )}
                                   onClick={(e) => {
                                     e.preventDefault();
                                     router.push(itemRoute);
@@ -404,11 +406,23 @@ function NavItems({
                                       {item.emoji}
                                     </span>
                                   ) : item.iconURL ? (
-                                    <img
+                                    <span className="relative shrink-0">
-                                      src={item.iconURL}
+                                      <img
-                                      alt=""
+                                        src={item.iconURL}
-                                      className="size-4 rounded shrink-0"
+                                        alt=""
-                                    />
+                                        className="size-4 rounded"
+                                      />
+                                      {isBot && (
+                                        <span
+                                          className={cn(
+                                            'absolute -bottom-0.5 -right-0.5 size-2 rounded-full border-2 border-sidebar',
+                                            item.enabled === false
+                                              ? 'bg-muted-foreground/40'
+                                              : 'bg-green-500',
+                                          )}
+                                        />
+                                      )}
+                                    </span>
                                   ) : null}
                                   <span className="truncate">{item.name}</span>
                                   {item.debug && (

web/src/app/home/components/home-sidebar/SidebarDataContext.tsx

@@ -18,6 +18,8 @@ export interface SidebarEntityItem {
   emoji?: string;
   iconURL?: string;
   updatedAt?: string; // ISO timestamp for sorting by most recently edited
+  // Bot-specific fields
+  enabled?: boolean;
   // Plugin-specific fields
   installSource?: string;
   installInfo?: Record<string, unknown>;
@@ -63,6 +65,7 @@ export function SidebarDataProvider({
           name: bot.name,
           iconURL: httpClient.getAdapterIconURL(bot.adapter),
           updatedAt: bot.updated_at,
+          enabled: bot.enable ?? true,
         })),
       );
     } catch (error) {

web/src/app/home/knowledge/components/kb-form/KBForm.tsx

@@ -310,19 +310,58 @@ export default function KBForm({
                       value={field.value}
                     >
                       <SelectTrigger className="w-full bg-[#ffffff] dark:bg-[#2a2a2e]">
-                        <SelectValue
+                        {field.value ? (
-                          placeholder={t('knowledge.selectKnowledgeEngine')}
+                          (() => {
-                        />
+                            const [author, name] = field.value.split('/');
+                            const engine = ragEngines.find(
+                              (e) => e.plugin_id === field.value,
+                            );
+                            return (
+                              <div className="flex items-center gap-2">
+                                <img
+                                  src={httpClient.getPluginIconURL(
+                                    author,
+                                    name,
+                                  )}
+                                  alt=""
+                                  className="h-5 w-5 rounded"
+                                />
+                                <span>
+                                  {engine
+                                    ? extractI18nObject(engine.name)
+                                    : field.value}
+                                </span>
+                              </div>
+                            );
+                          })()
+                        ) : (
+                          <SelectValue
+                            placeholder={t('knowledge.selectKnowledgeEngine')}
+                          />
+                        )}
                       </SelectTrigger>
                       <SelectContent className="fixed z-[1000]">
-                        {ragEngines.map((engine) => (
+                        {ragEngines.map((engine) => {
-                          <SelectItem
+                          const [author, name] = engine.plugin_id.split('/');
-                            key={engine.plugin_id}
+                          return (
-                            value={engine.plugin_id}
+                            <SelectItem
-                          >
+                              key={engine.plugin_id}
-                            {extractI18nObject(engine.name)}
+                              value={engine.plugin_id}
-                          </SelectItem>
+                            >
-                        ))}
+                              <div className="flex items-center gap-2">
+                                <img
+                                  src={httpClient.getPluginIconURL(
+                                    author,
+                                    name,
+                                  )}
+                                  alt=""
+                                  className="h-5 w-5 rounded"
+                                />
+                                <span>{extractI18nObject(engine.name)}</span>
+                              </div>
+                            </SelectItem>
+                          );
+                        })}
                       </SelectContent>
                     </Select>
                   </FormControl>

web/src/app/home/market/page.tsx

@@ -16,6 +16,7 @@ import { systemInfo } from '@/app/infra/http/HttpClient';
 import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { PluginV4 } from '@/app/infra/entities/plugin';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 
 enum PluginInstallStatus {
   ASK_CONFIRM = 'ask_confirm',
@@ -39,6 +40,7 @@ export default function MarketplacePage() {
 
 function MarketplaceContent() {
   const { t } = useTranslation();
+  const { refreshPlugins } = useSidebarData();
   const [modalOpen, setModalOpen] = useState(false);
   const [installInfo, setInstallInfo] = useState<Record<string, string>>({});
   const [pluginInstallStatus, setPluginInstallStatus] =
@@ -83,6 +85,7 @@ function MarketplaceContent() {
               alreadySuccess = true;
             }
             setModalOpen(false);
+            refreshPlugins();
           }
         }
       });

web/src/app/home/pipelines/components/pipeline-form/PipelineFormComponent.tsx

@@ -456,7 +456,7 @@ export default function PipelineFormComponent({
                             type="button"
                             onClick={() => setActiveSection(section.name)}
                             className={cn(
-                              'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left',
+                              'w-full flex items-center gap-2 px-3 py-2 rounded-md text-sm font-medium transition-colors text-left cursor-pointer',
                               activeSection === section.name
                                 ? 'bg-accent text-accent-foreground'
                                 : 'text-muted-foreground hover:bg-muted hover:text-foreground',

web/src/app/home/plugins/components/plugin-installed/PluginInstalledComponent.tsx

@@ -22,6 +22,7 @@ import { useTranslation } from 'react-i18next';
 import { extractI18nObject } from '@/i18n/I18nProvider';
 import { toast } from 'sonner';
 import { useAsyncTask, AsyncTaskStatus } from '@/hooks/useAsyncTask';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 
 export interface PluginInstalledComponentRef {
   refreshPluginList: () => void;
@@ -37,6 +38,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
   (props, ref) => {
     const { t } = useTranslation();
     const router = useRouter();
+    const { refreshPlugins } = useSidebarData();
     const [pluginList, setPluginList] = useState<PluginCardVO[]>([]);
     const [showOperationModal, setShowOperationModal] = useState(false);
     const [operationType, setOperationType] = useState<PluginOperationType>(
@@ -54,6 +56,7 @@ const PluginInstalledComponent = forwardRef<PluginInstalledComponentRef>(
         toast.success(successMessage);
         setShowOperationModal(false);
         getPluginList();
+        refreshPlugins();
       },
       onError: () => {
         // Error is already handled in the hook state

web/src/app/home/plugins/page.tsx

@@ -51,6 +51,7 @@ import { toast } from 'sonner';
 import { useTranslation } from 'react-i18next';
 import { systemInfo } from '@/app/infra/http/HttpClient';
 import { ApiRespPluginSystemStatus } from '@/app/infra/entities/api';
+import { useSidebarData } from '@/app/home/components/home-sidebar/SidebarDataContext';
 
 enum PluginInstallStatus {
   WAIT_INPUT = 'wait_input',
@@ -93,6 +94,7 @@ export default function PluginConfigPage() {
 function PluginListView() {
   const { t } = useTranslation();
   const router = useRouter();
+  const { refreshPlugins } = useSidebarData();
   const [modalOpen, setModalOpen] = useState(false);
   const [installSource, setInstallSource] = useState<string>('local');
   const [installInfo] = useState<Record<string, any>>({}); // eslint-disable-line @typescript-eslint/no-explicit-any
@@ -167,6 +169,7 @@ function PluginListView() {
             resetGithubState();
             setModalOpen(false);
             pluginInstalledRef.current?.refreshPluginList();
+            refreshPlugins();
           }
         }
       });