From e20a73c83af4bedde90dd5bfe1205522b50e27a4 Mon Sep 17 00:00:00 2001
From: RockChinQ <rockchinq@gmail.com>
Date: Thu, 27 Aug 2026 15:14:53 +0800
Subject: [PATCH] style(agents): distinguish agent capabilities from events

---
 .../components/ProcessorTypeDiagram.tsx       | 59 ++++++++++++++-----
 web/src/i18n/locales/en-US.ts                 |  2 +-
 web/src/i18n/locales/ja-JP.ts                 |  2 +-
 web/src/i18n/locales/zh-Hans.ts               |  2 +-
 4 files changed, 46 insertions(+), 19 deletions(-)

diff --git a/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx b/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
index 3e83ac235..e28ddc6fa 100644
--- a/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
+++ b/web/src/app/home/agents/components/ProcessorTypeDiagram.tsx
@@ -22,6 +22,40 @@ function ArrowMarker({ id }: { id: string }) {
   );
 }
 
+function CapabilityIcon({
+  kind,
+  x,
+  y,
+}: {
+  kind: 'model' | 'tool' | 'action';
+  x: number;
+  y: number;
+}) {
+  return (
+    <g
+      transform={`translate(${x - 9} ${y - 9})`}
+      fill="none"
+      stroke={LANGBOT_CYAN}
+      strokeWidth="1.7"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      {kind === 'model' && (
+        <>
+          <path d="m7 1 1.4 4.1L12.5 6.5 8.4 8 7 12 5.6 8 1.5 6.5l4.1-1.4L7 1Z" />
+          <path d="m14.5 10 .7 2.3 2.3.7-2.3.8-.7 2.2-.8-2.2-2.2-.8 2.2-.7.8-2.3Z" />
+        </>
+      )}
+      {kind === 'tool' && (
+        <path d="M12.8 2.1a4.1 4.1 0 0 0-5.2 5.2L2 12.9a2.1 2.1 0 1 0 3 3l5.6-5.6a4.1 4.1 0 0 0 5.2-5.2l-2.7 2.7-2.8-2.8 2.5-2.9Z" />
+      )}
+      {kind === 'action' && (
+        <path d="M10.5 1 3 10.5h6L8 17l7.5-9.5h-6L10.5 1Z" />
+      )}
+    </g>
+  );
+}
+
 function AgentDiagram() {
   const { t } = useTranslation();
   const arrowId = `agent-arrow-${useId().replace(/:/g, '')}`;
@@ -31,9 +65,9 @@ function AgentDiagram() {
     { label: t('agents.diagramFeedback'), y: 395 },
   ];
   const outputs = [
-    { label: t('agents.diagramModel'), y: 155 },
-    { label: t('agents.diagramTools'), y: 275 },
-    { label: t('agents.diagramActions'), y: 395 },
+    { kind: 'model' as const, label: t('agents.diagramModel'), y: 155 },
+    { kind: 'tool' as const, label: t('agents.diagramTools'), y: 275 },
+    { kind: 'action' as const, label: t('agents.diagramActions'), y: 395 },
   ];
 
   return (
@@ -121,7 +155,7 @@ function AgentDiagram() {
         fontSize="13"
         fontWeight="600"
       >
-        {t('agents.diagramAgentInitiated')}
+        {t('agents.diagramAgentCanUse')}
       </text>
 
       {outputs.map((item) => (
@@ -129,10 +163,10 @@ function AgentDiagram() {
           <path
             d={`M436 310 C468 310 474 ${item.y + 29} 538 ${item.y + 29}`}
             fill="none"
-            stroke={LANGBOT_BLUE}
-            strokeWidth="2"
-            opacity="0.38"
-            markerEnd={`url(#${arrowId})`}
+            stroke={LANGBOT_CYAN}
+            strokeWidth="1.8"
+            strokeDasharray="5 6"
+            opacity="0.48"
           />
           <rect
             x="538"
@@ -153,14 +187,7 @@ function AgentDiagram() {
             stroke={LANGBOT_CYAN}
             strokeOpacity="0.5"
           />
-          <path
-            d={`M559 ${item.y + 29}h12m-4-4 4 4-4 4`}
-            fill="none"
-            stroke={LANGBOT_CYAN}
-            strokeWidth="1.7"
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
+          <CapabilityIcon kind={item.kind} x={565} y={item.y + 29} />
           <text
             x="584"
             y={item.y + 34}
diff --git a/web/src/i18n/locales/en-US.ts b/web/src/i18n/locales/en-US.ts
index 6347fee28..071d3f238 100644
--- a/web/src/i18n/locales/en-US.ts
+++ b/web/src/i18n/locales/en-US.ts
@@ -723,7 +723,7 @@ const enUS = {
       'A Pipeline handles message events only and runs each step in the order you configure.',
     pipelineDiagramFlow: 'Messages move through a fixed sequence',
     diagramEvents: 'Platform events',
-    diagramAgentInitiated: 'Initiated by Agent',
+    diagramAgentCanUse: 'Available to Agent',
     diagramMessages: 'Messages',
     diagramMembers: 'Members',
     diagramFeedback: 'Feedback',
diff --git a/web/src/i18n/locales/ja-JP.ts b/web/src/i18n/locales/ja-JP.ts
index 8f581a6f6..40a247a25 100644
--- a/web/src/i18n/locales/ja-JP.ts
+++ b/web/src/i18n/locales/ja-JP.ts
@@ -736,7 +736,7 @@ const jaJP = {
       'Pipeline はメッセージイベントのみを、設定した固定ステップの順番で処理します。',
     pipelineDiagramFlow: 'メッセージを固定フローで順番に処理',
     diagramEvents: 'イベント',
-    diagramAgentInitiated: 'Agent が実行',
+    diagramAgentCanUse: 'Agent が利用可能',
     diagramMessages: 'メッセージ',
     diagramMembers: 'メンバー',
     diagramFeedback: 'フィードバック',
diff --git a/web/src/i18n/locales/zh-Hans.ts b/web/src/i18n/locales/zh-Hans.ts
index d14b1e228..6900344c4 100644
--- a/web/src/i18n/locales/zh-Hans.ts
+++ b/web/src/i18n/locales/zh-Hans.ts
@@ -692,7 +692,7 @@ const zhHans = {
       'Pipeline 只处理消息事件，并严格按照你编排的固定步骤依次执行。',
     pipelineDiagramFlow: '消息沿固定流程依次处理',
     diagramEvents: '平台事件',
-    diagramAgentInitiated: 'Agent 主动发起',
+    diagramAgentCanUse: 'Agent 可使用',
     diagramMessages: '消息',
     diagramMembers: '群成员',
     diagramFeedback: '反馈',