feat: 第一个可以用的 ink 组件抽象 (#158)

src/tools/AgentTool/UI.tsx

@@ -8,8 +8,7 @@ import {
   CtrlOToExpand,
   SubAgentProvider,
 } from 'src/components/CtrlOToExpand.js'
-import { Byline } from 'src/components/design-system/Byline.js'
-import { KeyboardShortcutHint } from 'src/components/design-system/KeyboardShortcutHint.js'
+import { Byline, KeyboardShortcutHint } from '@anthropic/ink'
 import type { z } from 'zod/v4'
 import { AgentProgressLine } from '../../components/AgentProgressLine.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
@@ -18,7 +17,7 @@ import { Markdown } from '../../components/Markdown.js'
 import { Message as MessageComponent } from '../../components/Message.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { ToolUseLoader } from '../../components/ToolUseLoader.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getDumpPromptsPath } from '../../services/api/dumpPrompts.js'
 import { findToolByName, type Tools } from '../../Tool.js'
 import type { Message, ProgressMessage } from '../../types/message.js'

src/tools/AskUserQuestionTool/AskUserQuestionTool.tsx

@@ -8,7 +8,7 @@ import { MessageResponse } from 'src/components/MessageResponse.js'
 import { BLACK_CIRCLE } from 'src/constants/figures.js'
 import { getModeColor } from 'src/utils/permissions/PermissionMode.js'
 import { z } from 'zod/v4'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Tool } from '../../Tool.js'
 import { buildTool, type ToolDef } from '../../Tool.js'
 import { lazySchema } from '../../utils/lazySchema.js'

src/tools/BashTool/BashToolResultMessage.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 import { removeSandboxViolationTags } from 'src/utils/sandbox/sandbox-ui-utils.js'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { OutputLine } from '../../components/shell/OutputLine.js'
 import { ShellTimeDisplay } from '../../components/shell/ShellTimeDisplay.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Out as BashOut } from './BashTool.js'
 
 type Props = {

src/tools/BashTool/UI.tsx

@@ -1,10 +1,10 @@
 import type { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
 import * as React from 'react'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { ShellProgressMessage } from '../../components/shell/ShellProgressMessage.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useKeybinding } from '../../keybindings/useKeybinding.js'
 import { useShortcutDisplay } from '../../keybindings/useShortcutDisplay.js'
 import { useAppStateStore, useSetAppState } from '../../state/AppState.js'

src/tools/BriefTool/UI.tsx

@@ -2,7 +2,7 @@ import figures from 'figures'
 import React from 'react'
 import { Markdown } from '../../components/Markdown.js'
 import { BLACK_CIRCLE } from '../../constants/figures.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ProgressMessage } from '../../types/message.js'
 import { getDisplayPath } from '../../utils/file.js'
 import { formatFileSize } from '../../utils/format.js'

src/tools/ConfigTool/UI.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { jsonStringify } from '../../utils/slowOperations.js'
 import type { Input, Output } from './ConfigTool.js'
 

src/tools/EnterPlanModeTool/UI.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { BLACK_CIRCLE } from 'src/constants/figures.js'
 import { getModeColor } from 'src/utils/permissions/PermissionMode.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import type { ThemeName } from '../../utils/theme.js'

src/tools/EnterWorktreeTool/UI.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import type { ThemeName } from '../../utils/theme.js'

src/tools/ExitPlanModeTool/UI.tsx

@@ -4,7 +4,7 @@ import { MessageResponse } from 'src/components/MessageResponse.js'
 import { RejectedPlanMessage } from 'src/components/messages/UserToolResultMessage/RejectedPlanMessage.js'
 import { BLACK_CIRCLE } from 'src/constants/figures.js'
 import { getModeColor } from 'src/utils/permissions/PermissionMode.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { getDisplayPath } from '../../utils/file.js'

src/tools/ExitWorktreeTool/UI.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import type { ThemeName } from '../../utils/theme.js'

src/tools/FileEditTool/UI.tsx

@@ -7,8 +7,9 @@ import { MessageResponse } from 'src/components/MessageResponse.js'
 import { extractTag } from 'src/utils/messages.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { FileEditToolUpdatedMessage } from '../../components/FileEditToolUpdatedMessage.js'
+
+import { Text } from '@anthropic/ink'
 import { FilePathLink } from '../../components/FilePathLink.js'
-import { Text } from '../../ink.js'
 import type { Tools } from '../../Tool.js'
 import type { Message, ProgressMessage } from '../../types/message.js'
 import { adjustHunkLineNumbers, CONTEXT_LINES } from '../../utils/diff.js'

src/tools/FileReadTool/UI.tsx

@@ -2,9 +2,10 @@ import type { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs
 import * as React from 'react'
 import { extractTag } from 'src/utils/messages.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
-import { FilePathLink } from '../../components/FilePathLink.js'
+
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
+import { FilePathLink } from '../../components/FilePathLink.js'
 import { FILE_NOT_FOUND_CWD_NOTE, getDisplayPath } from '../../utils/file.js'
 import { formatFileSize } from '../../utils/format.js'
 import { getPlansDirectory } from '../../utils/plans.js'

src/tools/FileWriteTool/UI.tsx

@@ -9,10 +9,11 @@ import { CtrlOToExpand } from '../../components/CtrlOToExpand.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { FileEditToolUpdatedMessage } from '../../components/FileEditToolUpdatedMessage.js'
 import { FileEditToolUseRejectedMessage } from '../../components/FileEditToolUseRejectedMessage.js'
-import { FilePathLink } from '../../components/FilePathLink.js'
+
 import { HighlightedCode } from '../../components/HighlightedCode.js'
 import { useTerminalSize } from '../../hooks/useTerminalSize.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
+import { FilePathLink } from '../../components/FilePathLink.js'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { getCwd } from '../../utils/cwd.js'

src/tools/GlobTool/UI.tsx

@@ -4,7 +4,7 @@ import { MessageResponse } from 'src/components/MessageResponse.js'
 import { extractTag } from 'src/utils/messages.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { TOOL_SUMMARY_MAX_LENGTH } from '../../constants/toolLimits.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { FILE_NOT_FOUND_CWD_NOTE, getDisplayPath } from '../../utils/file.js'
 import { truncate } from '../../utils/format.js'
 import { GrepTool } from '../GrepTool/GrepTool.js'

src/tools/GrepTool/UI.tsx

@@ -4,7 +4,7 @@ import { CtrlOToExpand } from '../../components/CtrlOToExpand.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { TOOL_SUMMARY_MAX_LENGTH } from '../../constants/toolLimits.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { FILE_NOT_FOUND_CWD_NOTE, getDisplayPath } from '../../utils/file.js'

src/tools/LSPTool/UI.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { CtrlOToExpand } from '../../components/CtrlOToExpand.js'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { getDisplayPath } from '../../utils/file.js'
 import { extractTag } from '../../utils/messages.js'
 import type { Input, Output } from './LSPTool.js'

src/tools/ListMcpResourcesTool/UI.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { OutputLine } from '../../components/shell/OutputLine.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { jsonStringify } from '../../utils/slowOperations.js'

src/tools/MCPTool/UI.tsx

@@ -2,19 +2,19 @@ import { feature } from 'bun:bundle'
 import figures from 'figures'
 import * as React from 'react'
 import type { z } from 'zod/v4'
-import { ProgressBar } from '../../components/design-system/ProgressBar.js'
+import { ProgressBar } from '@anthropic/ink'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import {
   linkifyUrlsInText,
   OutputLine,
 } from '../../components/shell/OutputLine.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Ansi, Box, Text } from '../../ink.js'
+import { Ansi, Box, Text, stringWidth } from '@anthropic/ink'
+import { createHyperlink } from '../../utils/hyperlink.js'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import type { MCPProgress } from '../../types/tools.js'
 import { formatNumber } from '../../utils/format.js'
-import { createHyperlink } from '../../utils/hyperlink.js'
+
 import {
   getContentSizeEstimate,
   type MCPToolResult,

src/tools/NotebookEditTool/UI.tsx

@@ -5,11 +5,12 @@ import { extractTag } from 'src/utils/messages.js'
 import type { ThemeName } from 'src/utils/theme.js'
 import type { z } from 'zod/v4'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
-import { FilePathLink } from '../../components/FilePathLink.js'
+
 import { HighlightedCode } from '../../components/HighlightedCode.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { NotebookEditToolUseRejectedMessage } from '../../components/NotebookEditToolUseRejectedMessage.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
+import { FilePathLink } from '../../components/FilePathLink.js'
 import type { Tools } from '../../Tool.js'
 import { getDisplayPath } from '../../utils/file.js'
 import type { inputSchema, Output } from './NotebookEditTool.js'

src/tools/PowerShellTool/UI.tsx

@@ -1,12 +1,12 @@
 import type { ToolResultBlockParam } from '@anthropic-ai/sdk/resources/index.mjs'
 import * as React from 'react'
-import { KeyboardShortcutHint } from '../../components/design-system/KeyboardShortcutHint.js'
+import { KeyboardShortcutHint } from '@anthropic/ink'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { OutputLine } from '../../components/shell/OutputLine.js'
 import { ShellProgressMessage } from '../../components/shell/ShellProgressMessage.js'
 import { ShellTimeDisplay } from '../../components/shell/ShellTimeDisplay.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Tool } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import type { PowerShellProgress } from '../../types/tools.js'

src/tools/ReadMcpResourceTool/UI.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import type { z } from 'zod/v4'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { OutputLine } from '../../components/shell/OutputLine.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { jsonStringify } from '../../utils/slowOperations.js'

src/tools/RemoteTriggerTool/UI.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { countCharInString } from '../../utils/stringUtils.js'
 import type { Input, Output } from './RemoteTriggerTool.js'
 

src/tools/ScheduleCronTool/UI.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { truncate } from '../../utils/format.js'
 import type { CreateOutput } from './CronCreateTool.js'
 import type { DeleteOutput } from './CronDeleteTool.js'

src/tools/SendMessageTool/UI.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Text } from '../../ink.js'
+import { Text } from '@anthropic/ink'
 import { jsonParse } from '../../utils/slowOperations.js'
 import type { Input, SendMessageToolOutput } from './SendMessageTool.js'
 

src/tools/SkillTool/UI.tsx

@@ -5,10 +5,10 @@ import { FallbackToolUseErrorMessage } from 'src/components/FallbackToolUseError
 import { FallbackToolUseRejectedMessage } from 'src/components/FallbackToolUseRejectedMessage.js'
 import type { z } from 'zod/v4'
 import type { Command } from '../../commands.js'
-import { Byline } from '../../components/design-system/Byline.js'
+import { Byline } from '@anthropic/ink'
 import { Message as MessageComponent } from '../../components/Message.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { Tools } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { buildSubagentLookups, EMPTY_LOOKUPS } from '../../utils/messages.js'

src/tools/SkillTool/prompt.ts

@@ -6,7 +6,7 @@ import {
   getSlashCommandToolSkills,
 } from 'src/commands.js'
 import { COMMAND_NAME_TAG } from '../../constants/xml.js'
-import { stringWidth } from '../../ink/stringWidth.js'
+import { stringWidth } from '@anthropic/ink'
 import {
   type AnalyticsMetadata_I_VERIFIED_THIS_IS_NOT_CODE_OR_FILEPATHS,
   logEvent,

src/tools/TaskOutputTool/TaskOutputTool.tsx

@@ -3,7 +3,7 @@ import { z } from 'zod/v4'
 import { FallbackToolUseErrorMessage } from '../../components/FallbackToolUseErrorMessage.js'
 import { FallbackToolUseRejectedMessage } from '../../components/FallbackToolUseRejectedMessage.js'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import { useShortcutDisplay } from '../../keybindings/useShortcutDisplay.js'
 import type { TaskType } from '../../Task.js'
 import type { Tool } from '../../Tool.js'

src/tools/TaskStopTool/UI.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
-import { stringWidth } from '../../ink/stringWidth.js'
-import { Text } from '../../ink.js'
+import { Text, stringWidth } from '@anthropic/ink'
 import { truncateToWidthNoEllipsis } from '../../utils/format.js'
 import type { Output } from './TaskStopTool.js'
 

src/tools/WebFetchTool/UI.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { TOOL_SUMMARY_MAX_LENGTH } from '../../constants/toolLimits.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ToolProgressData } from '../../Tool.js'
 import type { ProgressMessage } from '../../types/message.js'
 import { formatFileSize, truncate } from '../../utils/format.js'

src/tools/WebSearchTool/UI.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { MessageResponse } from '../../components/MessageResponse.js'
 import { TOOL_SUMMARY_MAX_LENGTH } from '../../constants/toolLimits.js'
-import { Box, Text } from '../../ink.js'
+import { Box, Text } from '@anthropic/ink'
 import type { ProgressMessage } from '../../types/message.js'
 import { truncate } from '../../utils/format.js'
 import type {