add version

- Add proper type declarations for emoji-picker custom element
- Define EmojiPickerElement and EmojiClickEvent interfaces
- Replace @ts-ignore with proper TypeScript types
- Separate dataSource initialization into its own useEffect
- Use local emoji data from emoji-picker-element-data

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

package.json

@@ -81,11 +81,12 @@
   },
   "dependencies": {
     "@anthropic-ai/claude-agent-sdk": "patch:@anthropic-ai/claude-agent-sdk@npm%3A0.1.30#~/.yarn/patches/@anthropic-ai-claude-agent-sdk-npm-0.1.30-b50a299674.patch",
-    "@libsql/client": "0.15.15",
-    "@libsql/win32-x64-msvc": "^0.5.22",
+    "@libsql/client": "0.14.0",
+    "@libsql/win32-x64-msvc": "^0.4.7",
     "@napi-rs/system-ocr": "patch:@napi-rs/system-ocr@npm%3A1.0.2#~/.yarn/patches/@napi-rs-system-ocr-npm-1.0.2-59e7a78e8b.patch",
     "@paymoapp/electron-shutdown-handler": "^1.1.2",
     "@strongtz/win32-arm64-msvc": "^0.4.7",
+    "emoji-picker-element-data": "^1.8.0",
     "express": "^5.1.0",
     "font-list": "^2.0.0",
     "graceful-fs": "^4.2.11",
@@ -386,10 +387,10 @@
     "@codemirror/lint": "6.8.5",
     "@codemirror/view": "6.38.1",
     "@langchain/core@npm:^0.3.26": "patch:@langchain/core@npm%3A1.0.2#~/.yarn/patches/@langchain-core-npm-1.0.2-183ef83fe4.patch",
-    "@libsql/client": "0.15.15",
     "atomically@npm:^1.7.0": "patch:atomically@npm%3A1.7.0#~/.yarn/patches/atomically-npm-1.7.0-e742e5293b.patch",
     "esbuild": "^0.25.0",
     "file-stream-rotator@npm:^0.6.1": "patch:file-stream-rotator@npm%3A0.6.1#~/.yarn/patches/file-stream-rotator-npm-0.6.1-eab45fb13d.patch",
+    "libsql@npm:^0.4.4": "patch:libsql@npm%3A0.4.7#~/.yarn/patches/libsql-npm-0.4.7-444e260fb1.patch",
     "node-abi": "4.24.0",
     "openai@npm:^4.77.0": "npm:@cherrystudio/openai@6.5.0",
     "openai@npm:^4.87.3": "npm:@cherrystudio/openai@6.5.0",

src/main/services/agents/services/claudecode/__tests__/transform.test.ts

@@ -25,7 +25,7 @@ describe('stripLocalCommandTags', () => {
 
 describe('Claude → AiSDK transform', () => {
   it('handles tool call streaming lifecycle', () => {
-    const state = new ClaudeStreamState({ agentSessionId: baseStreamMetadata.session_id })
+    const state = new ClaudeStreamState()
     const parts: ReturnType<typeof transformSDKMessageToStreamParts>[number][] = []
 
     const messages: SDKMessage[] = [
@@ -182,14 +182,14 @@ describe('Claude → AiSDK transform', () => {
       (typeof parts)[number],
       { type: 'tool-result' }
     >
-    expect(toolResult.toolCallId).toBe('session-123:tool-1')
+    expect(toolResult.toolCallId).toBe('tool-1')
     expect(toolResult.toolName).toBe('Bash')
     expect(toolResult.input).toEqual({ command: 'ls' })
     expect(toolResult.output).toBe('ok')
   })
 
   it('handles streaming text completion', () => {
-    const state = new ClaudeStreamState({ agentSessionId: baseStreamMetadata.session_id })
+    const state = new ClaudeStreamState()
     const parts: ReturnType<typeof transformSDKMessageToStreamParts>[number][] = []
 
     const messages: SDKMessage[] = [

src/main/services/agents/services/claudecode/claude-stream-state.ts

@@ -10,21 +10,8 @@
  * Every Claude turn gets its own instance. `resetStep` should be invoked once the finish event has
  * been emitted to avoid leaking state into the next turn.
  */
-import { loggerService } from '@logger'
 import type { FinishReason, LanguageModelUsage, ProviderMetadata } from 'ai'
 
-/**
- * Builds a namespaced tool call ID by combining session ID with raw tool call ID.
- * This ensures tool calls from different sessions don't conflict even if they have
- * the same raw ID from the SDK.
- *
- * @param sessionId - The agent session ID
- * @param rawToolCallId - The raw tool call ID from SDK (e.g., "WebFetch_0")
- */
-export function buildNamespacedToolCallId(sessionId: string, rawToolCallId: string): string {
-  return `${sessionId}:${rawToolCallId}`
-}
-
 /**
  * Shared fields for every block that Claude can stream (text, reasoning, tool).
  */
@@ -47,7 +34,6 @@ type ReasoningBlockState = BaseBlockState & {
 type ToolBlockState = BaseBlockState & {
   kind: 'tool'
   toolCallId: string
-  rawToolCallId: string
   toolName: string
   inputBuffer: string
   providerMetadata?: ProviderMetadata
@@ -62,17 +48,12 @@ type PendingUsageState = {
 }
 
 type PendingToolCall = {
-  rawToolCallId: string
   toolCallId: string
   toolName: string
   input: unknown
   providerMetadata?: ProviderMetadata
 }
 
-type ClaudeStreamStateOptions = {
-  agentSessionId: string
-}
-
 /**
  * Tracks the lifecycle of Claude streaming blocks (text, thinking, tool calls)
  * across individual websocket events. The transformer relies on this class to
@@ -80,20 +61,12 @@ type ClaudeStreamStateOptions = {
  * usage/finish metadata once Anthropic closes a message.
  */
 export class ClaudeStreamState {
-  private logger
-  private readonly agentSessionId: string
   private blocksByIndex = new Map<number, BlockState>()
-  private toolIndexByNamespacedId = new Map<string, number>()
+  private toolIndexById = new Map<string, number>()
   private pendingUsage: PendingUsageState = {}
   private pendingToolCalls = new Map<string, PendingToolCall>()
   private stepActive = false
 
-  constructor(options: ClaudeStreamStateOptions) {
-    this.logger = loggerService.withContext('ClaudeStreamState')
-    this.agentSessionId = options.agentSessionId
-    this.logger.silly('ClaudeStreamState', options)
-  }
-
   /** Marks the beginning of a new AiSDK step. */
   beginStep(): void {
     this.stepActive = true
@@ -131,21 +104,19 @@ export class ClaudeStreamState {
   /** Caches tool metadata so subsequent input deltas and results can find it. */
   openToolBlock(
     index: number,
-    params: { rawToolCallId: string; toolName: string; providerMetadata?: ProviderMetadata }
+    params: { toolCallId: string; toolName: string; providerMetadata?: ProviderMetadata }
   ): ToolBlockState {
-    const toolCallId = buildNamespacedToolCallId(this.agentSessionId, params.rawToolCallId)
     const block: ToolBlockState = {
       kind: 'tool',
-      id: toolCallId,
+      id: params.toolCallId,
       index,
-      toolCallId,
-      rawToolCallId: params.rawToolCallId,
+      toolCallId: params.toolCallId,
       toolName: params.toolName,
       inputBuffer: '',
       providerMetadata: params.providerMetadata
     }
     this.blocksByIndex.set(index, block)
-    this.toolIndexByNamespacedId.set(toolCallId, index)
+    this.toolIndexById.set(params.toolCallId, index)
     return block
   }
 
@@ -154,17 +125,13 @@ export class ClaudeStreamState {
   }
 
   getToolBlockById(toolCallId: string): ToolBlockState | undefined {
-    const index = this.toolIndexByNamespacedId.get(toolCallId)
+    const index = this.toolIndexById.get(toolCallId)
     if (index === undefined) return undefined
     const block = this.blocksByIndex.get(index)
     if (!block || block.kind !== 'tool') return undefined
     return block
   }
 
-  getToolBlockByRawId(rawToolCallId: string): ToolBlockState | undefined {
-    return this.getToolBlockById(buildNamespacedToolCallId(this.agentSessionId, rawToolCallId))
-  }
-
   /** Appends streamed text to a text block, returning the updated state when present. */
   appendTextDelta(index: number, text: string): TextBlockState | undefined {
     const block = this.blocksByIndex.get(index)
@@ -191,12 +158,10 @@ export class ClaudeStreamState {
 
   /** Records a tool call to be consumed once its result arrives from the user. */
   registerToolCall(
-    rawToolCallId: string,
+    toolCallId: string,
     payload: { toolName: string; input: unknown; providerMetadata?: ProviderMetadata }
   ): void {
-    const toolCallId = buildNamespacedToolCallId(this.agentSessionId, rawToolCallId)
-    this.pendingToolCalls.set(rawToolCallId, {
-      rawToolCallId,
+    this.pendingToolCalls.set(toolCallId, {
       toolCallId,
       toolName: payload.toolName,
       input: payload.input,
@@ -205,10 +170,10 @@ export class ClaudeStreamState {
   }
 
   /** Retrieves and clears the buffered tool call metadata for the given id. */
-  consumePendingToolCall(rawToolCallId: string): PendingToolCall | undefined {
-    const entry = this.pendingToolCalls.get(rawToolCallId)
+  consumePendingToolCall(toolCallId: string): PendingToolCall | undefined {
+    const entry = this.pendingToolCalls.get(toolCallId)
     if (entry) {
-      this.pendingToolCalls.delete(rawToolCallId)
+      this.pendingToolCalls.delete(toolCallId)
     }
     return entry
   }
@@ -218,12 +183,12 @@ export class ClaudeStreamState {
    * completion so that downstream tool results can reference the original call.
    */
   completeToolBlock(toolCallId: string, input: unknown, providerMetadata?: ProviderMetadata): void {
-    const block = this.getToolBlockByRawId(toolCallId)
     this.registerToolCall(toolCallId, {
-      toolName: block?.toolName ?? 'unknown',
+      toolName: this.getToolBlockById(toolCallId)?.toolName ?? 'unknown',
       input,
       providerMetadata
     })
+    const block = this.getToolBlockById(toolCallId)
     if (block) {
       block.resolvedInput = input
     }
@@ -235,7 +200,7 @@ export class ClaudeStreamState {
     if (!block) return undefined
     this.blocksByIndex.delete(index)
     if (block.kind === 'tool') {
-      this.toolIndexByNamespacedId.delete(block.toolCallId)
+      this.toolIndexById.delete(block.toolCallId)
     }
     return block
   }
@@ -262,7 +227,7 @@ export class ClaudeStreamState {
   /** Drops cached block metadata for the currently active message. */
   resetBlocks(): void {
     this.blocksByIndex.clear()
-    this.toolIndexByNamespacedId.clear()
+    this.toolIndexById.clear()
   }
 
   /** Resets the entire step lifecycle after emitting a terminal frame. */
@@ -271,10 +236,6 @@ export class ClaudeStreamState {
     this.resetPendingUsage()
     this.stepActive = false
   }
-
-  getNamespacedToolCallId(rawToolCallId: string): string {
-    return buildNamespacedToolCallId(this.agentSessionId, rawToolCallId)
-  }
 }
 
 export type { PendingToolCall }

src/main/services/agents/services/claudecode/index.ts

@@ -13,7 +13,6 @@ import { app } from 'electron'
 import type { GetAgentSessionResponse } from '../..'
 import type { AgentServiceInterface, AgentStream, AgentStreamEvent } from '../../interfaces/AgentStreamInterface'
 import { sessionService } from '../SessionService'
-import { buildNamespacedToolCallId } from './claude-stream-state'
 import { promptForToolApproval } from './tool-permissions'
 import { ClaudeStreamState, transformSDKMessageToStreamParts } from './transform'
 
@@ -151,10 +150,7 @@ class ClaudeCodeService implements AgentServiceInterface {
         return { behavior: 'allow', updatedInput: input }
       }
 
-      return promptForToolApproval(toolName, input, {
-        ...options,
-        toolCallId: buildNamespacedToolCallId(session.id, options.toolUseID)
-      })
+      return promptForToolApproval(toolName, input, options)
     }
 
     // Build SDK options from parameters
@@ -350,7 +346,7 @@ class ClaudeCodeService implements AgentServiceInterface {
     const jsonOutput: SDKMessage[] = []
     let hasCompleted = false
     const startTime = Date.now()
-    const streamState = new ClaudeStreamState({ agentSessionId: sessionId })
+    const streamState = new ClaudeStreamState()
 
     try {
       for await (const message of query({ prompt: promptStream, options })) {

src/main/services/agents/services/claudecode/tool-permissions.ts

@@ -37,7 +37,6 @@ type RendererPermissionRequestPayload = {
   requestId: string
   toolName: string
   toolId: string
-  toolCallId: string
   description?: string
   requiresPermissions: boolean
   input: Record<string, unknown>
@@ -207,19 +206,10 @@ const ensureIpcHandlersRegistered = () => {
   })
 }
 
-type PromptForToolApprovalOptions = {
-  signal: AbortSignal
-  suggestions?: PermissionUpdate[]
-
-  // NOTICE: This ID is namespaced with session ID, not the raw SDK tool call ID.
-  // Format: `${sessionId}:${rawToolCallId}`, e.g., `session_123:WebFetch_0`
-  toolCallId: string
-}
-
 export async function promptForToolApproval(
   toolName: string,
   input: Record<string, unknown>,
-  options: PromptForToolApprovalOptions
+  options?: { signal: AbortSignal; suggestions?: PermissionUpdate[] }
 ): Promise<PermissionResult> {
   if (shouldAutoApproveTools) {
     logger.debug('promptForToolApproval auto-approving tool for test', {
@@ -255,7 +245,6 @@ export async function promptForToolApproval(
   logger.info('Requesting user approval for tool usage', {
     requestId,
     toolName,
-    toolCallId: options.toolCallId,
     description: toolMetadata?.description
   })
 
@@ -263,7 +252,6 @@ export async function promptForToolApproval(
     requestId,
     toolName,
     toolId: toolMetadata?.id ?? toolName,
-    toolCallId: options.toolCallId,
     description: toolMetadata?.description,
     requiresPermissions: toolMetadata?.requirePermissions ?? false,
     input: sanitizedInput,
@@ -278,7 +266,6 @@ export async function promptForToolApproval(
   logger.debug('Registering tool permission request', {
     requestId,
     toolName,
-    toolCallId: options.toolCallId,
     requiresPermissions: requestPayload.requiresPermissions,
     timeoutMs: TOOL_APPROVAL_TIMEOUT_MS,
     suggestionCount: sanitizedSuggestions.length
@@ -286,11 +273,7 @@ export async function promptForToolApproval(
 
   return new Promise<PermissionResult>((resolve) => {
     const timeout = setTimeout(() => {
-      logger.info('User tool permission request timed out', {
-        requestId,
-        toolName,
-        toolCallId: options.toolCallId
-      })
+      logger.info('User tool permission request timed out', { requestId, toolName })
       finalizeRequest(requestId, { behavior: 'deny', message: 'Timed out waiting for approval' }, 'timeout')
     }, TOOL_APPROVAL_TIMEOUT_MS)
 
@@ -304,11 +287,7 @@ export async function promptForToolApproval(
 
     if (options?.signal) {
       const abortListener = () => {
-        logger.info('Tool permission request aborted before user responded', {
-          requestId,
-          toolName,
-          toolCallId: options.toolCallId
-        })
+        logger.info('Tool permission request aborted before user responded', { requestId, toolName })
         finalizeRequest(requestId, defaultDenyUpdate, 'aborted')
       }
 

src/main/services/agents/services/claudecode/transform.ts

@@ -243,10 +243,9 @@ function handleAssistantToolUse(
   state: ClaudeStreamState,
   chunks: AgentStreamPart[]
 ): void {
-  const toolCallId = state.getNamespacedToolCallId(block.id)
   chunks.push({
     type: 'tool-call',
-    toolCallId,
+    toolCallId: block.id,
     toolName: block.name,
     input: block.input,
     providerExecuted: true,
@@ -332,11 +331,10 @@ function handleUserMessage(
     if (block.type === 'tool_result') {
       const toolResult = block as ToolResultContent
       const pendingCall = state.consumePendingToolCall(toolResult.tool_use_id)
-      const toolCallId = pendingCall?.toolCallId ?? state.getNamespacedToolCallId(toolResult.tool_use_id)
       if (toolResult.is_error) {
         chunks.push({
           type: 'tool-error',
-          toolCallId,
+          toolCallId: toolResult.tool_use_id,
           toolName: pendingCall?.toolName ?? 'unknown',
           input: pendingCall?.input,
           error: toolResult.content,
@@ -345,7 +343,7 @@ function handleUserMessage(
       } else {
         chunks.push({
           type: 'tool-result',
-          toolCallId,
+          toolCallId: toolResult.tool_use_id,
           toolName: pendingCall?.toolName ?? 'unknown',
           input: pendingCall?.input,
           output: toolResult.content,
@@ -516,7 +514,7 @@ function handleContentBlockStart(
     }
     case 'tool_use': {
       const block = state.openToolBlock(index, {
-        rawToolCallId: contentBlock.id,
+        toolCallId: contentBlock.id,
         toolName: contentBlock.name,
         providerMetadata
       })

src/renderer/src/components/EmojiPicker/index.tsx

@@ -1,33 +1,62 @@
+import 'emoji-picker-element'
+
 import TwemojiCountryFlagsWoff2 from '@renderer/assets/fonts/country-flag-fonts/TwemojiCountryFlags.woff2?url'
 import { useTheme } from '@renderer/context/ThemeProvider'
 import { polyfillCountryFlagEmojis } from 'country-flag-emoji-polyfill'
+import emojiData from 'emoji-picker-element-data/en/emojibase/data.json'
 import type { FC } from 'react'
 import { useEffect, useRef } from 'react'
 
+interface EmojiPickerElement extends HTMLElement {
+  dataSource: typeof emojiData
+}
+
+interface EmojiClickEvent extends CustomEvent {
+  detail: {
+    unicode?: string
+    emoji?: { unicode: string }
+  }
+}
+
 interface Props {
   onEmojiClick: (emoji: string) => void
 }
 
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'emoji-picker': React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement> & { class?: string }, HTMLElement>
+    }
+  }
+}
+
 const EmojiPicker: FC<Props> = ({ onEmojiClick }) => {
   const { theme } = useTheme()
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useRef<EmojiPickerElement>(null)
 
   useEffect(() => {
     polyfillCountryFlagEmojis('Twemoji Mozilla', TwemojiCountryFlagsWoff2)
   }, [])
 
+  // 初始化 dataSource
+  useEffect(() => {
+    if (ref.current) {
+      ref.current.dataSource = emojiData
+    }
+  }, [])
+
+  // 事件监听
   useEffect(() => {
     const refValue = ref.current
 
     if (refValue) {
-      const handleEmojiClick = (event: any) => {
+      const handleEmojiClick = (event: Event) => {
         event.stopPropagation()
-        onEmojiClick(event.detail.unicode || event.detail.emoji.unicode)
+        const emojiEvent = event as EmojiClickEvent
+        onEmojiClick(emojiEvent.detail.unicode || emojiEvent.detail.emoji?.unicode || '')
       }
-      // 添加事件监听器
       refValue.addEventListener('emoji-click', handleEmojiClick)
 
-      // 清理事件监听器
       return () => {
         refValue.removeEventListener('emoji-click', handleEmojiClick)
       }
@@ -35,7 +64,6 @@ const EmojiPicker: FC<Props> = ({ onEmojiClick }) => {
     return
   }, [onEmojiClick])
 
-  // @ts-ignore next-line
   return <emoji-picker ref={ref} class={theme === 'dark' ? 'dark' : 'light'} style={{ border: 'none' }} />
 }
 

src/renderer/src/components/Popups/agent/AgentModal.tsx

@@ -1,4 +1,5 @@
 import { loggerService } from '@logger'
+import ClaudeIcon from '@renderer/assets/images/models/claude.png'
 import { ErrorBoundary } from '@renderer/components/ErrorBoundary'
 import { TopView } from '@renderer/components/TopView'
 import { permissionModeCards } from '@renderer/config/agent'
@@ -8,6 +9,7 @@ import SelectAgentBaseModelButton from '@renderer/pages/home/components/SelectAg
 import type {
   AddAgentForm,
   AgentEntity,
+  AgentType,
   ApiModel,
   BaseAgentForm,
   PermissionMode,
@@ -15,22 +17,30 @@ import type {
   UpdateAgentForm
 } from '@renderer/types'
 import { AgentConfigurationSchema, isAgentType } from '@renderer/types'
-import { Button, Input, Modal, Select } from 'antd'
+import { Avatar, Button, Input, Modal, Select } from 'antd'
 import { AlertTriangleIcon } from 'lucide-react'
 import type { ChangeEvent, FormEvent } from 'react'
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import styled from 'styled-components'
 
+import type { BaseOption } from './shared'
+
 const { TextArea } = Input
 
 const logger = loggerService.withContext('AddAgentPopup')
 
+interface AgentTypeOption extends BaseOption {
+  type: 'type'
+  key: AgentEntity['type']
+  name: AgentEntity['name']
+}
+
 type AgentWithTools = AgentEntity & { tools?: Tool[] }
 
 const buildAgentForm = (existing?: AgentWithTools): BaseAgentForm => ({
   type: existing?.type ?? 'claude-code',
-  name: existing?.name ?? 'Agent',
+  name: existing?.name ?? 'Claude Code',
   description: existing?.description,
   instructions: existing?.instructions,
   model: existing?.model ?? '',
@@ -90,6 +100,54 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
     })
   }, [])
 
+  // add supported agents type here.
+  const agentConfig = useMemo(
+    () =>
+      [
+        {
+          type: 'type',
+          key: 'claude-code',
+          label: 'Claude Code',
+          name: 'Claude Code',
+          avatar: ClaudeIcon
+        }
+      ] as const satisfies AgentTypeOption[],
+    []
+  )
+
+  const agentOptions = useMemo(
+    () =>
+      agentConfig.map((option) => ({
+        value: option.key,
+        label: (
+          <OptionWrapper>
+            <Avatar src={option.avatar} size={24} />
+            <span>{option.label}</span>
+          </OptionWrapper>
+        )
+      })),
+    [agentConfig]
+  )
+
+  const onAgentTypeChange = useCallback(
+    (value: AgentType) => {
+      const prevConfig = agentConfig.find((config) => config.key === form.type)
+      let newName: string | undefined = form.name
+      if (prevConfig && prevConfig.name === form.name) {
+        const newConfig = agentConfig.find((config) => config.key === value)
+        if (newConfig) {
+          newName = newConfig.name
+        }
+      }
+      setForm((prev) => ({
+        ...prev,
+        type: value,
+        name: newName
+      }))
+    },
+    [agentConfig, form.name, form.type]
+  )
+
   const onNameChange = useCallback((e: ChangeEvent<HTMLInputElement>) => {
     setForm((prev) => ({
       ...prev,
@@ -97,12 +155,12 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
     }))
   }, [])
 
-  // const onDescChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
-  //   setForm((prev) => ({
-  //     ...prev,
-  //     description: e.target.value
-  //   }))
-  // }, [])
+  const onDescChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setForm((prev) => ({
+      ...prev,
+      description: e.target.value
+    }))
+  }, [])
 
   const onInstChange = useCallback((e: ChangeEvent<HTMLTextAreaElement>) => {
     setForm((prev) => ({
@@ -276,6 +334,16 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
         <StyledForm onSubmit={onSubmit}>
           <FormContent>
             <FormRow>
+              <FormItem style={{ flex: 1 }}>
+                <Label>{t('agent.type.label')}</Label>
+                <Select
+                  value={form.type}
+                  onChange={onAgentTypeChange}
+                  options={agentOptions}
+                  disabled={isEditing(agent)}
+                  style={{ width: '100%' }}
+                />
+              </FormItem>
               <FormItem style={{ flex: 1 }}>
                 <Label>
                   {t('common.name')} <RequiredMark>*</RequiredMark>
@@ -295,7 +363,7 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
                 avatarSize={24}
                 iconSize={16}
                 buttonStyle={{
-                  padding: '3px 8px',
+                  padding: '8px 12px',
                   width: '100%',
                   border: '1px solid var(--color-border)',
                   borderRadius: 6,
@@ -314,6 +382,7 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
                 onChange={onPermissionModeChange}
                 style={{ width: '100%' }}
                 placeholder={t('agent.settings.tooling.permissionMode.placeholder', 'Select permission mode')}
+                dropdownStyle={{ minWidth: '500px' }}
                 optionLabelProp="label">
                 {permissionModeCards.map((item) => (
                   <Select.Option key={item.mode} value={item.mode} label={t(item.titleKey, item.titleFallback)}>
@@ -369,10 +438,10 @@ const PopupContainer: React.FC<Props> = ({ agent, afterSubmit, resolve }) => {
               <TextArea rows={3} value={form.instructions ?? ''} onChange={onInstChange} />
             </FormItem>
 
-            {/* <FormItem>
+            <FormItem>
               <Label>{t('common.description')}</Label>
-              <TextArea rows={1} value={form.description ?? ''} onChange={onDescChange} />
-            </FormItem> */}
+              <TextArea rows={2} value={form.description ?? ''} onChange={onDescChange} />
+            </FormItem>
           </FormContent>
 
           <FormFooter>
@@ -506,7 +575,14 @@ const FormFooter = styled.div`
   display: flex;
   justify-content: flex-end;
   gap: 8px;
-  padding: 10px;
+  padding-top: 16px;
+  border-top: 1px solid var(--color-border);
+`
+
+const OptionWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
 `
 
 const PermissionOptionWrapper = styled.div`

src/renderer/src/pages/home/Messages/Tools/ToolPermissionRequestCard.tsx

@@ -1,7 +1,7 @@
 import type { PermissionUpdate } from '@anthropic-ai/claude-agent-sdk'
 import { loggerService } from '@logger'
 import { useAppDispatch, useAppSelector } from '@renderer/store'
-import { selectPendingPermission, toolPermissionsActions } from '@renderer/store/toolPermissions'
+import { selectPendingPermissionByToolName, toolPermissionsActions } from '@renderer/store/toolPermissions'
 import type { NormalToolResponse } from '@renderer/types'
 import { Button } from 'antd'
 import { ChevronDown, CirclePlay, CircleX } from 'lucide-react'
@@ -17,7 +17,9 @@ interface Props {
 export function ToolPermissionRequestCard({ toolResponse }: Props) {
   const { t } = useTranslation()
   const dispatch = useAppDispatch()
-  const request = useAppSelector((state) => selectPendingPermission(state.toolPermissions, toolResponse.toolCallId))
+  const request = useAppSelector((state) =>
+    selectPendingPermissionByToolName(state.toolPermissions, toolResponse.tool.name)
+  )
   const [now, setNow] = useState(() => Date.now())
   const [showDetails, setShowDetails] = useState(false)
 

src/renderer/src/pages/settings/AgentSettings/EssentialSettings.tsx

@@ -1,13 +1,21 @@
+import { getAgentTypeAvatar } from '@renderer/config/agent'
 import type { useUpdateAgent } from '@renderer/hooks/agents/useUpdateAgent'
 import type { useUpdateSession } from '@renderer/hooks/agents/useUpdateSession'
+import { getAgentTypeLabel } from '@renderer/i18n/label'
 import type { GetAgentResponse, GetAgentSessionResponse } from '@renderer/types'
+import { isAgentEntity } from '@renderer/types'
+import { Avatar } from 'antd'
 import type { FC } from 'react'
+import { useTranslation } from 'react-i18next'
 
 import { AccessibleDirsSetting } from './AccessibleDirsSetting'
+import { AvatarSetting } from './AvatarSetting'
 import { DescriptionSetting } from './DescriptionSetting'
 import { ModelSetting } from './ModelSetting'
 import { NameSetting } from './NameSetting'
-import { SettingsContainer } from './shared'
+import { SettingsContainer, SettingsItem, SettingsTitle } from './shared'
+
+// const logger = loggerService.withContext('AgentEssentialSettings')
 
 type EssentialSettingsProps =
   | {
@@ -22,10 +30,26 @@ type EssentialSettingsProps =
     }
 
 const EssentialSettings: FC<EssentialSettingsProps> = ({ agentBase, update, showModelSetting = true }) => {
+  const { t } = useTranslation()
+
   if (!agentBase) return null
 
+  const isAgent = isAgentEntity(agentBase)
+
   return (
     <SettingsContainer>
+      {isAgent && (
+        <SettingsItem inline>
+          <SettingsTitle>{t('agent.type.label')}</SettingsTitle>
+          <div className="flex items-center gap-2">
+            <Avatar size={24} src={getAgentTypeAvatar(agentBase.type)} className="h-6 w-6 text-lg" />
+            <span>{(agentBase?.name ?? agentBase?.type) ? getAgentTypeLabel(agentBase.type) : ''}</span>
+          </div>
+        </SettingsItem>
+      )}
+      {isAgent && (
+        <AvatarSetting agent={agentBase} update={update as ReturnType<typeof useUpdateAgent>['updateAgent']} />
+      )}
       <NameSetting base={agentBase} update={update} />
       {showModelSetting && <ModelSetting base={agentBase} update={update} />}
       <AccessibleDirsSetting base={agentBase} update={update} />

src/renderer/src/pages/settings/AgentSettings/NameSetting.tsx

@@ -1,8 +1,6 @@
-import { EmojiAvatarWithPicker } from '@renderer/components/Avatar/EmojiAvatarWithPicker'
 import type { AgentBaseWithId, UpdateAgentBaseForm, UpdateAgentFunctionUnion } from '@renderer/types'
-import { AgentConfigurationSchema, isAgentEntity, isAgentType } from '@renderer/types'
 import { Input } from 'antd'
-import { useCallback, useState } from 'react'
+import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { SettingsItem, SettingsTitle } from './shared'
@@ -15,61 +13,26 @@ export interface NameSettingsProps {
 export const NameSetting = ({ base, update }: NameSettingsProps) => {
   const { t } = useTranslation()
   const [name, setName] = useState<string | undefined>(base?.name?.trim())
-
   const updateName = async (name: UpdateAgentBaseForm['name']) => {
     if (!base) return
     return update({ id: base.id, name: name?.trim() })
   }
-
-  // Avatar logic
-  const isAgent = isAgentEntity(base)
-  const isDefault = isAgent ? isAgentType(base.configuration?.avatar) : false
-  const [emoji, setEmoji] = useState(isAgent && !isDefault ? (base.configuration?.avatar ?? '⭐️') : '⭐️')
-
-  const updateAvatar = useCallback(
-    (avatar: string) => {
-      if (!isAgent || !base) return
-      const parsedConfiguration = AgentConfigurationSchema.parse(base.configuration ?? {})
-      const payload = {
-        id: base.id,
-        configuration: {
-          ...parsedConfiguration,
-          avatar
-        }
-      }
-      update(payload)
-    },
-    [base, update, isAgent]
-  )
-
   if (!base) return null
 
   return (
     <SettingsItem inline>
       <SettingsTitle>{t('common.name')}</SettingsTitle>
-      <div className="flex max-w-70 flex-1 items-center gap-1">
-        {isAgent && (
-          <EmojiAvatarWithPicker
-            emoji={emoji}
-            onPick={(emoji: string) => {
-              setEmoji(emoji)
-              if (isAgent && emoji === base?.configuration?.avatar) return
-              updateAvatar(emoji)
-            }}
-          />
-        )}
-        <Input
-          placeholder={t('common.agent_one') + t('common.name')}
-          value={name}
-          onChange={(e) => setName(e.target.value)}
-          onBlur={() => {
-            if (name !== base.name) {
-              updateName(name)
-            }
-          }}
-          className="flex-1"
-        />
-      </div>
+      <Input
+        placeholder={t('common.agent_one') + t('common.name')}
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        onBlur={() => {
+          if (name !== base.name) {
+            updateName(name)
+          }
+        }}
+        className="max-w-70 flex-1"
+      />
     </SettingsItem>
   )
 }

src/renderer/src/pages/settings/AssistantSettings/AssistantPromptSettings.tsx

@@ -1,5 +1,3 @@
-import 'emoji-picker-element'
-
 import { CloseCircleFilled } from '@ant-design/icons'
 import CodeEditor from '@renderer/components/CodeEditor'
 import EmojiPicker from '@renderer/components/EmojiPicker'

src/renderer/src/pages/settings/MCPSettings/InstallNpxUv.tsx

@@ -109,6 +109,7 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
     <Container>
       <Alert
         type={isUvInstalled ? 'success' : 'warning'}
+        banner
         style={{ borderRadius: 'var(--list-item-border-radius)' }}
         description={
           <VStack>
@@ -139,6 +140,7 @@ const InstallNpxUv: FC<Props> = ({ mini = false }) => {
       />
       <Alert
         type={isBunInstalled ? 'success' : 'warning'}
+        banner
         style={{ borderRadius: 'var(--list-item-border-radius)' }}
         description={
           <VStack>

src/renderer/src/pages/settings/MCPSettings/index.tsx

@@ -140,7 +140,7 @@ const MCPSettings: FC = () => {
             <Route
               path="mcp-install"
               element={
-                <SettingContainer style={{ backgroundColor: 'inherit' }}>
+                <SettingContainer theme={theme}>
                   <InstallNpxUv />
                 </SettingContainer>
               }

src/renderer/src/pages/store/assistants/presets/components/AddAssistantPresetPopup.tsx

@@ -1,5 +1,3 @@
-import 'emoji-picker-element'
-
 import { CheckOutlined, LoadingOutlined, RollbackOutlined, ThunderboltOutlined } from '@ant-design/icons'
 import { loggerService } from '@logger'
 import EmojiPicker from '@renderer/components/EmojiPicker'

src/renderer/src/store/toolPermissions.ts

@@ -6,7 +6,6 @@ export type ToolPermissionRequestPayload = {
   requestId: string
   toolName: string
   toolId: string
-  toolCallId: string
   description?: string
   requiresPermissions: boolean
   input: Record<string, unknown>
@@ -83,12 +82,12 @@ export const selectActiveToolPermission = (state: ToolPermissionsState): ToolPer
   return activeEntries[0]
 }
 
-export const selectPendingPermission = (
+export const selectPendingPermissionByToolName = (
   state: ToolPermissionsState,
-  toolCallId: string
+  toolName: string
 ): ToolPermissionEntry | undefined => {
   const activeEntries = Object.values(state.requests)
-    .filter((entry) => entry.toolCallId === toolCallId)
+    .filter((entry) => entry.toolName === toolName)
     .filter(
       (entry) => entry.status === 'pending' || entry.status === 'submitting-allow' || entry.status === 'submitting-deny'
     )

yarn.lock

@@ -4558,38 +4558,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@libsql/client@npm:0.15.15":
-  version: 0.15.15
-  resolution: "@libsql/client@npm:0.15.15"
+"@libsql/client@npm:0.14.0, @libsql/client@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@libsql/client@npm:0.14.0"
   dependencies:
-    "@libsql/core": "npm:^0.15.14"
+    "@libsql/core": "npm:^0.14.0"
     "@libsql/hrana-client": "npm:^0.7.0"
     js-base64: "npm:^3.7.5"
-    libsql: "npm:^0.5.22"
+    libsql: "npm:^0.4.4"
     promise-limit: "npm:^2.7.0"
-  checksum: 10c0/1ae67280ebe27903ff142b07e2a256c22ef5ada65185286a72823e8eae8d9d2602e0d72e423d3bd64ae57494791bfffff946aa0fc7c2378b55a227ff63f8df69
+  checksum: 10c0/9c6bab468453df765f647422c772af3578f1e108b663a80b99063f47ed3542db26ae0fcdba2e153d72e6d5089c5caeba947a167a6c065b0191a0832621539335
   languageName: node
   linkType: hard
 
-"@libsql/core@npm:^0.15.14":
-  version: 0.15.15
-  resolution: "@libsql/core@npm:0.15.15"
+"@libsql/core@npm:^0.14.0":
+  version: 0.14.0
+  resolution: "@libsql/core@npm:0.14.0"
   dependencies:
     js-base64: "npm:^3.7.5"
-  checksum: 10c0/0a619689c9504f4239d9745882a128b81e2f6c0547352bbb0d36932261c053bbcbea4435a17f91abe61556bb791f2f1203b36c36b2d4b4f369953d7949bdc40e
+  checksum: 10c0/327bb991cf191d5a9a9fc0cc1a17123f7ca88f222187a3bde845fbad8ceaeaa1f139882080e4b2969da57b83e576c52702572e2838d1743c6bff75f95e6f774a
   languageName: node
   linkType: hard
 
-"@libsql/darwin-arm64@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/darwin-arm64@npm:0.5.22"
+"@libsql/darwin-arm64@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/darwin-arm64@npm:0.4.7"
   conditions: os=darwin & cpu=arm64
   languageName: node
   linkType: hard
 
-"@libsql/darwin-x64@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/darwin-x64@npm:0.5.22"
+"@libsql/darwin-x64@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/darwin-x64@npm:0.4.7"
   conditions: os=darwin & cpu=x64
   languageName: node
   linkType: hard
@@ -4623,52 +4623,38 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@libsql/linux-arm-gnueabihf@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-arm-gnueabihf@npm:0.5.22"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@libsql/linux-arm-musleabihf@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-arm-musleabihf@npm:0.5.22"
-  conditions: os=linux & cpu=arm
-  languageName: node
-  linkType: hard
-
-"@libsql/linux-arm64-gnu@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-arm64-gnu@npm:0.5.22"
+"@libsql/linux-arm64-gnu@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/linux-arm64-gnu@npm:0.4.7"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@libsql/linux-arm64-musl@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-arm64-musl@npm:0.5.22"
+"@libsql/linux-arm64-musl@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/linux-arm64-musl@npm:0.4.7"
   conditions: os=linux & cpu=arm64
   languageName: node
   linkType: hard
 
-"@libsql/linux-x64-gnu@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-x64-gnu@npm:0.5.22"
+"@libsql/linux-x64-gnu@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/linux-x64-gnu@npm:0.4.7"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@libsql/linux-x64-musl@npm:0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/linux-x64-musl@npm:0.5.22"
+"@libsql/linux-x64-musl@npm:0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/linux-x64-musl@npm:0.4.7"
   conditions: os=linux & cpu=x64
   languageName: node
   linkType: hard
 
-"@libsql/win32-x64-msvc@npm:0.5.22, @libsql/win32-x64-msvc@npm:^0.5.22":
-  version: 0.5.22
-  resolution: "@libsql/win32-x64-msvc@npm:0.5.22"
-  checksum: 10c0/1bb2730563c603c03a229faa352897685648659d85ba0872dda60cc02abc469fbd55539ffd8b86c81d00230d76292e5a4d2a763fe44c05694612ce6db6e929aa
+"@libsql/win32-x64-msvc@npm:0.4.7, @libsql/win32-x64-msvc@npm:^0.4.7":
+  version: 0.4.7
+  resolution: "@libsql/win32-x64-msvc@npm:0.4.7"
+  checksum: 10c0/2fcb8715b6f0571dec145eaaf3fd53c7c5aa5bf408fe1be9d84b10adc8a909bb6ee60b45e0d7052b0c1722c30ac212356a3f1adcdf7f57d5a59b48f36ca5bdf5
   conditions: os=win32 & cpu=x64
   languageName: node
   linkType: hard
@@ -9967,8 +9953,8 @@ __metadata:
     "@langchain/community": "npm:^1.0.0"
     "@langchain/core": "patch:@langchain/core@npm%3A1.0.2#~/.yarn/patches/@langchain-core-npm-1.0.2-183ef83fe4.patch"
     "@langchain/openai": "patch:@langchain/openai@npm%3A1.0.0#~/.yarn/patches/@langchain-openai-npm-1.0.0-474d0ad9d4.patch"
-    "@libsql/client": "npm:0.15.15"
-    "@libsql/win32-x64-msvc": "npm:^0.5.22"
+    "@libsql/client": "npm:0.14.0"
+    "@libsql/win32-x64-msvc": "npm:^0.4.7"
     "@mistralai/mistralai": "npm:^1.7.5"
     "@modelcontextprotocol/sdk": "npm:^1.17.5"
     "@mozilla/readability": "npm:^0.6.0"
@@ -10088,6 +10074,7 @@ __metadata:
     electron-window-state: "npm:^5.0.3"
     emittery: "npm:^1.0.3"
     emoji-picker-element: "npm:^1.22.1"
+    emoji-picker-element-data: "npm:^1.8.0"
     epub: "patch:epub@npm%3A1.3.0#~/.yarn/patches/epub-npm-1.3.0-8325494ffe.patch"
     eslint: "npm:^9.22.0"
     eslint-plugin-import-zod: "npm:^1.2.0"
@@ -13669,6 +13656,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"emoji-picker-element-data@npm:^1.8.0":
+  version: 1.8.0
+  resolution: "emoji-picker-element-data@npm:1.8.0"
+  checksum: 10c0/c8976b636205a0cc90d2690859a1193add71a948dadf743962b47c338a4c3715768404d0ccbc02156608b44abf41f3e1d51756e06f1bbed9d164dd4cb1752103
+  languageName: node
+  linkType: hard
+
 "emoji-picker-element@npm:^1.22.1":
   version: 1.26.3
   resolution: "emoji-picker-element@npm:1.26.3"
@@ -17281,19 +17275,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"libsql@npm:^0.5.22":
-  version: 0.5.22
-  resolution: "libsql@npm:0.5.22"
+"libsql@npm:0.4.7":
+  version: 0.4.7
+  resolution: "libsql@npm:0.4.7"
   dependencies:
-    "@libsql/darwin-arm64": "npm:0.5.22"
-    "@libsql/darwin-x64": "npm:0.5.22"
-    "@libsql/linux-arm-gnueabihf": "npm:0.5.22"
-    "@libsql/linux-arm-musleabihf": "npm:0.5.22"
-    "@libsql/linux-arm64-gnu": "npm:0.5.22"
-    "@libsql/linux-arm64-musl": "npm:0.5.22"
-    "@libsql/linux-x64-gnu": "npm:0.5.22"
-    "@libsql/linux-x64-musl": "npm:0.5.22"
-    "@libsql/win32-x64-msvc": "npm:0.5.22"
+    "@libsql/darwin-arm64": "npm:0.4.7"
+    "@libsql/darwin-x64": "npm:0.4.7"
+    "@libsql/linux-arm64-gnu": "npm:0.4.7"
+    "@libsql/linux-arm64-musl": "npm:0.4.7"
+    "@libsql/linux-x64-gnu": "npm:0.4.7"
+    "@libsql/linux-x64-musl": "npm:0.4.7"
+    "@libsql/win32-x64-msvc": "npm:0.4.7"
     "@neon-rs/load": "npm:^0.0.4"
     detect-libc: "npm:2.0.2"
   dependenciesMeta:
@@ -17301,10 +17293,6 @@ __metadata:
       optional: true
     "@libsql/darwin-x64":
       optional: true
-    "@libsql/linux-arm-gnueabihf":
-      optional: true
-    "@libsql/linux-arm-musleabihf":
-      optional: true
     "@libsql/linux-arm64-gnu":
       optional: true
     "@libsql/linux-arm64-musl":
@@ -17315,8 +17303,41 @@ __metadata:
       optional: true
     "@libsql/win32-x64-msvc":
       optional: true
-  checksum: 10c0/6c34f08fc7408ebee16708ba12e5def9d1b2a4fa166070c956a120133ba9be68ec532e2d0b76bdc7005ef9ef69bf70d2ba7208ed824c4288c2a3d881edd5eaf6
-  conditions: (os=darwin | os=linux | os=win32) & (cpu=x64 | cpu=arm64 | cpu=wasm32 | cpu=arm)
+  checksum: 10c0/351952440e6bad3477e5f1bb1b9d6570d16e403b894f4a13c5c7e183a1307b2fb04a2fa902728cb8594a259e1726c51c61b822d545bbc88319b126ad15468a87
+  conditions: (os=darwin | os=linux | os=win32) & (cpu=x64 | cpu=arm64 | cpu=wasm32)
+  languageName: node
+  linkType: hard
+
+"libsql@patch:libsql@npm%3A0.4.7#~/.yarn/patches/libsql-npm-0.4.7-444e260fb1.patch":
+  version: 0.4.7
+  resolution: "libsql@patch:libsql@npm%3A0.4.7#~/.yarn/patches/libsql-npm-0.4.7-444e260fb1.patch::version=0.4.7&hash=972e11"
+  dependencies:
+    "@libsql/darwin-arm64": "npm:0.4.7"
+    "@libsql/darwin-x64": "npm:0.4.7"
+    "@libsql/linux-arm64-gnu": "npm:0.4.7"
+    "@libsql/linux-arm64-musl": "npm:0.4.7"
+    "@libsql/linux-x64-gnu": "npm:0.4.7"
+    "@libsql/linux-x64-musl": "npm:0.4.7"
+    "@libsql/win32-x64-msvc": "npm:0.4.7"
+    "@neon-rs/load": "npm:^0.0.4"
+    detect-libc: "npm:2.0.2"
+  dependenciesMeta:
+    "@libsql/darwin-arm64":
+      optional: true
+    "@libsql/darwin-x64":
+      optional: true
+    "@libsql/linux-arm64-gnu":
+      optional: true
+    "@libsql/linux-arm64-musl":
+      optional: true
+    "@libsql/linux-x64-gnu":
+      optional: true
+    "@libsql/linux-x64-musl":
+      optional: true
+    "@libsql/win32-x64-msvc":
+      optional: true
+  checksum: 10c0/6098770dc6c31ae0dbfe0821719d184d9bb353ac92553923096f6e3420d3786f240f0b3858f519af0aeada93beb4aa83cb9a9a1a6aa18d625511b484dcb53d07
+  conditions: (os=darwin | os=linux | os=win32) & (cpu=x64 | cpu=arm64 | cpu=wasm32)
   languageName: node
   linkType: hard