From 5d7850a180f5c692ee01e00f3ab08f32a29dedf3 Mon Sep 17 00:00:00 2001 From: 7418 <7418@openclaw.ai> Date: Thu, 12 Mar 2026 01:02:28 +0800 Subject: [PATCH] =?UTF-8?q?refactor:=20complete=20UI=20governance=20?= =?UTF-8?q?=E2=80=94=20lint=20rules,=20icon/color=20unification,=20compone?= =?UTF-8?q?nt=20splits?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Design pattern & component consistency governance across 120 files: ESLint governance (eslint.config.mjs): - Enforce ui/ components over native HTML controls (warn) - Ban Lucide imports (error), require Phosphor via ui/icon.tsx (warn) - Component file size limit 500 lines (warn, skip blanks+comments) - Patterns layer isolation (error: no hooks/lib imports) - Exclude 资料/ from lint scope Icon unification (ui/icon.tsx): - Unified barrel export with 86+ Phosphor icons - Decoupled types/index.ts from icon library (generic IconComponent type) - Separated command data (lib/constants/commands.ts) from icons (command-icons.ts) Color token system (globals.css): - Added semantic status tokens: success/warning/error/info with muted/foreground/border variants - Migrated 39 files from raw green/red/orange/amber/blue to semantic tokens - grep-based lint:colors script covers green/emerald/red/orange/yellow/amber/blue Component splits (all under 500 lines): - MessageInput 1659→444: MessageInputParts, SlashCommandPopover, 7 hooks, 2 libs - ChatView ~850→419: useStreamSubscription, useAssistantTrigger - ProviderManager 1081→406: provider-presets, PresetConnectDialog, useProviderModels - AppShell 527→470: useUpdateChecker - AssistantWorkspaceSection 908→499: WorkspaceTabPanels/ConfirmDialogs/StatusCards - ChatListPanel 677→484: SessionListItem, ProjectGroupHeader, chat-list-utils Other: - Migrated 80 native HTML controls to ui/ components across 38 files - Fixed 22 hook dependency / set-state-in-effect issues - Cleaned 7 dead code warnings - Rebuilt better-sqlite3 for ARM architecture - Added handover doc: docs/handover/ui-governance.md Lint status: 0 errors 0 warnings on touched files; typecheck pass; 374/374 tests pass. Co-Authored-By: Claude Opus 4.6 --- docs/handover/README.md | 1 + docs/handover/ui-governance.md | 139 ++ docs/research/README.md | 1 + eslint.config.mjs | 37 + package.json | 1 + .../unit/message-input-interactions.test.ts | 778 +++++++++ src/app/bridge/page.tsx | 2 +- src/app/chat/[id]/page.tsx | 23 +- src/app/chat/page.tsx | 8 +- src/app/design-system/page.tsx | 2 +- src/app/gallery/page.tsx | 13 +- src/app/globals.css | 51 + src/app/settings/page.tsx | 2 +- src/components/bridge/BridgeLayout.tsx | 11 +- src/components/bridge/BridgeSection.tsx | 8 +- .../bridge/DiscordBridgeSection.tsx | 2 +- src/components/bridge/FeishuBridgeSection.tsx | 2 +- src/components/bridge/QqBridgeSection.tsx | 2 +- .../bridge/TelegramBridgeSection.tsx | 4 +- .../chat/ChatPermissionSelector.tsx | 18 +- src/components/chat/ChatView.tsx | 444 +---- src/components/chat/CliToolsPopover.tsx | 120 +- src/components/chat/ContextUsageIndicator.tsx | 9 +- .../chat/EffortSelectorDropdown.tsx | 50 +- src/components/chat/FileCard.tsx | 2 +- src/components/chat/FolderPicker.tsx | 9 +- src/components/chat/ImageGenCard.tsx | 10 +- src/components/chat/ImageGenConfirmation.tsx | 32 +- src/components/chat/ImageGenToggle.tsx | 10 +- src/components/chat/ImageLightbox.tsx | 17 +- src/components/chat/ImageThumbnail.tsx | 10 +- src/components/chat/MessageInput.tsx | 1544 ++--------------- src/components/chat/MessageInputParts.tsx | 199 +++ src/components/chat/MessageItem.tsx | 25 +- src/components/chat/MessageList.tsx | 35 +- src/components/chat/ModelSelectorDropdown.tsx | 85 +- src/components/chat/PermissionPrompt.tsx | 87 +- src/components/chat/SlashCommandButton.tsx | 2 +- src/components/chat/SlashCommandPopover.tsx | 201 +-- src/components/chat/StreamingMessage.tsx | 16 +- src/components/chat/ToolCallBlock.tsx | 42 +- .../chat/batch-image-gen/BatchContextSync.tsx | 27 +- .../BatchExecutionDashboard.tsx | 49 +- .../batch-image-gen/BatchExecutionItem.tsx | 14 +- .../BatchPlanInlinePreview.tsx | 20 +- .../chat/batch-image-gen/BatchPlanRow.tsx | 25 +- .../cli-tools/CliToolBatchDescribeDialog.tsx | 9 +- src/components/cli-tools/CliToolCard.tsx | 10 +- .../cli-tools/CliToolDetailDialog.tsx | 10 +- .../cli-tools/CliToolInstallDialog.tsx | 6 +- src/components/cli-tools/CliToolsManager.tsx | 6 +- src/components/gallery/GalleryDetail.tsx | 33 +- src/components/gallery/GalleryGrid.tsx | 4 +- src/components/gallery/TagManager.tsx | 32 +- src/components/layout/AppShell.tsx | 234 +-- src/components/layout/ChatListPanel.tsx | 370 +--- src/components/layout/ConnectionStatus.tsx | 29 +- src/components/layout/DocPreview.tsx | 22 +- src/components/layout/ErrorBoundary.tsx | 24 +- src/components/layout/Header.tsx | 2 +- src/components/layout/ImportSessionDialog.tsx | 2 +- src/components/layout/InstallWizard.tsx | 36 +- src/components/layout/NavRail.tsx | 8 +- src/components/layout/ProjectGroupHeader.tsx | 117 ++ src/components/layout/RightPanel.tsx | 2 +- src/components/layout/SessionListItem.tsx | 217 +++ src/components/layout/SplitColumn.tsx | 2 +- src/components/layout/UpdateDialog.tsx | 2 +- src/components/layout/chat-list-utils.ts | 76 + src/components/patterns/CommandList.tsx | 184 ++ src/components/patterns/StatusBanner.tsx | 8 +- src/components/patterns/index.ts | 10 + src/components/plugins/McpManager.tsx | 10 +- src/components/plugins/McpServerEditor.tsx | 4 +- src/components/plugins/McpServerList.tsx | 10 +- src/components/plugins/PluginCard.tsx | 2 +- src/components/plugins/PluginDetail.tsx | 2 +- src/components/plugins/PluginList.tsx | 2 +- src/components/project/FilePreview.tsx | 9 +- src/components/project/FileTree.tsx | 2 +- src/components/project/TaskCard.tsx | 21 +- src/components/project/TaskList.tsx | 8 +- src/components/settings/AppearanceSection.tsx | 2 +- .../settings/AssistantWorkspaceSection.tsx | 529 +----- .../settings/CliSettingsSection.tsx | 6 +- src/components/settings/GeneralSection.tsx | 14 +- .../settings/PresetConnectDialog.tsx | 503 ++++++ src/components/settings/ProviderForm.tsx | 11 +- src/components/settings/ProviderManager.tsx | 832 +-------- src/components/settings/SettingsLayout.tsx | 11 +- src/components/settings/UsageStatsSection.tsx | 15 +- .../settings/WorkspaceConfirmDialogs.tsx | 199 +++ .../settings/WorkspaceStatusCards.tsx | 95 + .../settings/WorkspaceTabPanels.tsx | 200 +++ src/components/settings/provider-presets.tsx | 316 ++++ src/components/settings/workspace-types.ts | 40 + src/components/skills/CreateSkillDialog.tsx | 28 +- .../skills/InstallProgressDialog.tsx | 6 +- src/components/skills/MarketplaceBrowser.tsx | 4 +- .../skills/MarketplaceSkillCard.tsx | 4 +- .../skills/MarketplaceSkillDetail.tsx | 4 +- src/components/skills/SkillEditor.tsx | 8 +- src/components/skills/SkillListItem.tsx | 3 +- src/components/skills/SkillsManager.tsx | 18 +- src/components/ui/icon.tsx | 89 +- src/hooks/useAssistantTrigger.ts | 153 ++ src/hooks/useChatCommands.ts | 85 + src/hooks/useCliToolsFetch.ts | 161 ++ src/hooks/useCommandBadge.ts | 41 + src/hooks/usePopoverState.ts | 189 ++ src/hooks/useProviderModels.ts | 77 + src/hooks/useSlashCommands.ts | 254 +++ src/hooks/useStreamSubscription.ts | 110 ++ src/hooks/useUpdateChecker.ts | 164 ++ src/lib/constants/command-icons.ts | 32 + src/lib/constants/commands.ts | 28 + src/lib/constants/image-agent-prompt.ts | 41 + src/lib/file-utils.ts | 25 + src/lib/message-input-logic.ts | 272 +++ src/types/index.ts | 52 + 120 files changed, 6075 insertions(+), 4260 deletions(-) create mode 100644 docs/handover/ui-governance.md create mode 100644 src/__tests__/unit/message-input-interactions.test.ts create mode 100644 src/components/chat/MessageInputParts.tsx create mode 100644 src/components/layout/ProjectGroupHeader.tsx create mode 100644 src/components/layout/SessionListItem.tsx create mode 100644 src/components/layout/chat-list-utils.ts create mode 100644 src/components/patterns/CommandList.tsx create mode 100644 src/components/settings/PresetConnectDialog.tsx create mode 100644 src/components/settings/WorkspaceConfirmDialogs.tsx create mode 100644 src/components/settings/WorkspaceStatusCards.tsx create mode 100644 src/components/settings/WorkspaceTabPanels.tsx create mode 100644 src/components/settings/provider-presets.tsx create mode 100644 src/components/settings/workspace-types.ts create mode 100644 src/hooks/useAssistantTrigger.ts create mode 100644 src/hooks/useChatCommands.ts create mode 100644 src/hooks/useCliToolsFetch.ts create mode 100644 src/hooks/useCommandBadge.ts create mode 100644 src/hooks/usePopoverState.ts create mode 100644 src/hooks/useProviderModels.ts create mode 100644 src/hooks/useSlashCommands.ts create mode 100644 src/hooks/useStreamSubscription.ts create mode 100644 src/hooks/useUpdateChecker.ts create mode 100644 src/lib/constants/command-icons.ts create mode 100644 src/lib/constants/commands.ts create mode 100644 src/lib/constants/image-agent-prompt.ts create mode 100644 src/lib/file-utils.ts create mode 100644 src/lib/message-input-logic.ts diff --git a/docs/handover/README.md b/docs/handover/README.md index 6193f2f..56c07fb 100644 --- a/docs/handover/README.md +++ b/docs/handover/README.md @@ -13,3 +13,4 @@ | assistant-workspace.md | 助理工作区：人格/记忆文件、对话式引导、自动触发、确定性落盘 | | theme-system.md | 主题家族系统：两层架构、JSON schema、代码高亮三条渲染链、12 个主题清单 | | cli-tools.md | CLI 工具管理：静态 catalog、系统检测、一键安装、AI 描述、聊天上下文注入、输入框选择器 | +| ui-governance.md | 设计模式治理：四层架构、ESLint 规则、图标/颜色统一、组件拆分记录、新增文件清单 | diff --git a/docs/handover/ui-governance.md b/docs/handover/ui-governance.md new file mode 100644 index 0000000..dceaaa3 --- /dev/null +++ b/docs/handover/ui-governance.md @@ -0,0 +1,139 @@ +# 设计模式与组件一致性治理 + +> 完成时间：2026-03-12 | 涉及 92 个文件 | 净减 ~2,900 行 + +## 治理目标 + +在保留现有视觉语言的前提下，建立统一的组件分层规则、消灭跨层重复模式、拆分超大组件、通过 ESLint 静态约束防止退化。 + +## 分层架构 + +``` +src/components/ui/ → 纯 primitives（Button, Input, Select, Dialog…） +src/components/patterns/ → 复用展示模式（SettingsCard, FieldRow, StatusBanner…），零副作用 +src/components/{feature}/ → 组合 hooks + patterns + 业务状态 +src/app/ → 页面装配 +src/hooks/ → 数据获取、状态管理 +src/lib/constants/ → 纯数据常量，不引用 UI 层 +``` + +## 已完成的治理项 + +### 1. ESLint 治理规则 (`eslint.config.mjs`) + +| 规则 | 级别 | 作用域 | 说明 | +|------|------|--------|------| +| 禁止原生 HTML 控件 | warn | 业务组件 + app 层 | ` +

{sessionWorkingDir || projectName}

@@ -239,12 +242,14 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {

{sessionTitle}

- + )} diff --git a/src/app/chat/page.tsx b/src/app/chat/page.tsx index 886e083..eae153e 100644 --- a/src/app/chat/page.tsx +++ b/src/app/chat/page.tsx @@ -24,15 +24,15 @@ interface ToolResultInfo { export default function NewChatPage() { const router = useRouter(); - const { setWorkingDirectory, setPanelOpen, setPendingApprovalSessionId } = usePanel(); + const { setPendingApprovalSessionId } = usePanel(); const [messages, setMessages] = useState([]); const [streamingContent, setStreamingContent] = useState(''); const [isStreaming, setIsStreaming] = useState(false); const [toolUses, setToolUses] = useState([]); const [toolResults, setToolResults] = useState([]); const [statusText, setStatusText] = useState(); - const [workingDir, setWorkingDir] = useState(''); - const [mode, setMode] = useState('code'); + const [workingDir] = useState(''); + const [mode] = useState('code'); const [currentModel, setCurrentModel] = useState('sonnet'); const [currentProviderId, setCurrentProviderId] = useState(''); const [pendingPermission, setPendingPermission] = useState(null); @@ -419,8 +419,6 @@ export default function NewChatPage() { setCurrentModel(model); }} workingDirectory={workingDir} - mode={mode} - onModeChange={setMode} effort={selectedEffort} onEffortChange={setSelectedEffort} /> diff --git a/src/app/design-system/page.tsx b/src/app/design-system/page.tsx index 61a9c3b..5e9cd4f 100644 --- a/src/app/design-system/page.tsx +++ b/src/app/design-system/page.tsx @@ -28,7 +28,7 @@ import { Plus, MagnifyingGlass, Copy, -} from "@phosphor-icons/react"; +} from "@/components/ui/icon"; function Section({ title, children }: { title: string; children: React.ReactNode }) { return ( diff --git a/src/app/gallery/page.tsx b/src/app/gallery/page.tsx index d1b68ab..3b3f674 100644 --- a/src/app/gallery/page.tsx +++ b/src/app/gallery/page.tsx @@ -1,9 +1,10 @@ 'use client'; import { useState, useEffect, useCallback, useRef } from 'react'; -import { PaintBrush, SortDescending, Funnel, SpinnerGap, Heart } from '@phosphor-icons/react'; +import { PaintBrush, SortDescending, Funnel, SpinnerGap, Heart } from '@/components/ui/icon'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; +import { Input } from '@/components/ui/input'; import { GalleryGrid, type GalleryItem } from '@/components/gallery/GalleryGrid'; import { GalleryDetail } from '@/components/gallery/GalleryDetail'; import { useTranslation } from '@/hooks/useTranslation'; @@ -148,7 +149,7 @@ export default function GalleryPage() { > {t('gallery.favoritesOnly' as TranslationKey)} @@ -186,20 +187,20 @@ export default function GalleryPage() { - setDateFrom(e.target.value)} - className="h-7 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:ring-1 focus:ring-ring" + className="h-7 w-auto px-2 text-xs" /> - setDateTo(e.target.value)} - className="h-7 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:ring-1 focus:ring-ring" + className="h-7 w-auto px-2 text-xs" /> {(dateFrom || dateTo) && ( + ))} diff --git a/src/components/bridge/BridgeSection.tsx b/src/components/bridge/BridgeSection.tsx index 5f94ca3..d57815f 100644 --- a/src/components/bridge/BridgeSection.tsx +++ b/src/components/bridge/BridgeSection.tsx @@ -13,7 +13,7 @@ import { SelectTrigger, SelectValue, } from "@/components/ui/select"; -import { SpinnerGap, CheckCircle, Warning, TelegramLogo, ChatTeardrop, GameController, ChatsCircle } from "@phosphor-icons/react"; +import { SpinnerGap, CheckCircle, Warning, TelegramLogo, ChatTeardrop, GameController, ChatsCircle } from "@/components/ui/icon"; import { useTranslation } from "@/hooks/useTranslation"; import { useBridgeStatus } from "@/hooks/useBridgeStatus"; import { SettingsCard } from "@/components/patterns/SettingsCard"; @@ -215,7 +215,7 @@ export function BridgeSection() {
@@ -360,7 +360,7 @@ export function BridgeSection() {
@@ -375,7 +375,7 @@ export function BridgeSection() {

)} {adapter.error && ( -

+

{t("bridge.adapterLastError")}: {adapter.error}

)} diff --git a/src/components/bridge/DiscordBridgeSection.tsx b/src/components/bridge/DiscordBridgeSection.tsx index ae2d9b9..bf4a0af 100644 --- a/src/components/bridge/DiscordBridgeSection.tsx +++ b/src/components/bridge/DiscordBridgeSection.tsx @@ -11,7 +11,7 @@ import { SelectValue, } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; -import { SpinnerGap, CheckCircle, Warning } from "@phosphor-icons/react"; +import { SpinnerGap, CheckCircle, Warning } from "@/components/ui/icon"; import { useTranslation } from "@/hooks/useTranslation"; import { SettingsCard } from "@/components/patterns/SettingsCard"; import { FieldRow } from "@/components/patterns/FieldRow"; diff --git a/src/components/bridge/FeishuBridgeSection.tsx b/src/components/bridge/FeishuBridgeSection.tsx index 3ea31b4..7cdd170 100644 --- a/src/components/bridge/FeishuBridgeSection.tsx +++ b/src/components/bridge/FeishuBridgeSection.tsx @@ -11,7 +11,7 @@ import { SelectValue, } from "@/components/ui/select"; import { Switch } from "@/components/ui/switch"; -import { SpinnerGap, CheckCircle, Warning } from "@phosphor-icons/react"; +import { SpinnerGap, CheckCircle, Warning } from "@/components/ui/icon"; import { useTranslation } from "@/hooks/useTranslation"; import { SettingsCard } from "@/components/patterns/SettingsCard"; import { FieldRow } from "@/components/patterns/FieldRow"; diff --git a/src/components/bridge/QqBridgeSection.tsx b/src/components/bridge/QqBridgeSection.tsx index 2f85c95..ef00ef2 100644 --- a/src/components/bridge/QqBridgeSection.tsx +++ b/src/components/bridge/QqBridgeSection.tsx @@ -4,7 +4,7 @@ import { useState, useCallback, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { Switch } from "@/components/ui/switch"; -import { SpinnerGap, CheckCircle, Warning } from "@phosphor-icons/react"; +import { SpinnerGap, CheckCircle, Warning } from "@/components/ui/icon"; import { useTranslation } from "@/hooks/useTranslation"; import { SettingsCard } from "@/components/patterns/SettingsCard"; import { FieldRow } from "@/components/patterns/FieldRow"; diff --git a/src/components/bridge/TelegramBridgeSection.tsx b/src/components/bridge/TelegramBridgeSection.tsx index 60205f7..0f9cf6b 100644 --- a/src/components/bridge/TelegramBridgeSection.tsx +++ b/src/components/bridge/TelegramBridgeSection.tsx @@ -3,7 +3,7 @@ import { useState, useCallback, useEffect } from "react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; -import { SpinnerGap, CheckCircle, Warning } from "@phosphor-icons/react"; +import { SpinnerGap, CheckCircle, Warning } from "@/components/ui/icon"; import { useTranslation } from "@/hooks/useTranslation"; import { SettingsCard } from "@/components/patterns/SettingsCard"; import { StatusBanner } from "@/components/patterns/StatusBanner"; @@ -21,7 +21,7 @@ const DEFAULT_SETTINGS: TelegramBridgeSettings = { }; export function TelegramBridgeSection() { - const [settings, setSettings] = useState(DEFAULT_SETTINGS); + const [, setSettings] = useState(DEFAULT_SETTINGS); const [botToken, setBotToken] = useState(""); const [chatId, setChatId] = useState(""); const [allowedUsers, setAllowedUsers] = useState(""); diff --git a/src/components/chat/ChatPermissionSelector.tsx b/src/components/chat/ChatPermissionSelector.tsx index 25b650f..615ca1f 100644 --- a/src/components/chat/ChatPermissionSelector.tsx +++ b/src/components/chat/ChatPermissionSelector.tsx @@ -18,7 +18,8 @@ import { AlertDialogHeader, AlertDialogTitle, } from '@/components/ui/alert-dialog'; -import { Lock, LockOpen, CaretDown } from '@phosphor-icons/react'; +import { Button } from '@/components/ui/button'; +import { Lock, LockOpen, CaretDown } from '@/components/ui/icon'; interface ChatPermissionSelectorProps { sessionId?: string; @@ -70,16 +71,17 @@ export function ChatPermissionSelector({ <> - + handleSelect('default')}> @@ -95,7 +97,7 @@ export function ChatPermissionSelector({ {t('permission.default')} handleSelect('full_access')}> - + {t('permission.fullAccess')} diff --git a/src/components/chat/ChatView.tsx b/src/components/chat/ChatView.tsx index 753b990..db0229c 100644 --- a/src/components/chat/ChatView.tsx +++ b/src/components/chat/ChatView.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useState, useCallback, useEffect, useRef, useMemo } from 'react'; +import { useState, useCallback, useEffect, useRef } from 'react'; import { useRouter } from 'next/navigation'; import type { Message, MessagesResponse, FileAttachment, SessionStreamSnapshot } from '@/types'; import { MessageList } from './MessageList'; @@ -9,20 +9,21 @@ import { ChatComposerActionBar } from './ChatComposerActionBar'; import { ChatPermissionSelector } from './ChatPermissionSelector'; import { ContextUsageIndicator } from './ContextUsageIndicator'; import { ImageGenToggle } from './ImageGenToggle'; +import { Button } from '@/components/ui/button'; import { usePanel } from '@/hooks/usePanel'; -import { getLocalDateString } from '@/lib/utils'; import { useTranslation } from '@/hooks/useTranslation'; import { PermissionPrompt } from './PermissionPrompt'; import { BatchExecutionDashboard, BatchContextSync } from './batch-image-gen'; -import { setLastGeneratedImages, transferPendingToMessage } from '@/lib/image-ref-store'; +import { setLastGeneratedImages } from '@/lib/image-ref-store'; +import { useChatCommands } from '@/hooks/useChatCommands'; +import { useAssistantTrigger } from '@/hooks/useAssistantTrigger'; +import { useStreamSubscription } from '@/hooks/useStreamSubscription'; import { startStream, stopStream, - subscribe, getSnapshot, getRewindPoints, respondToPermission, - clearSnapshot, } from '@/lib/stream-session-manager'; interface ChatViewProps { @@ -36,7 +37,7 @@ interface ChatViewProps { } export function ChatView({ sessionId, initialMessages = [], initialHasMore = false, modelName, initialMode, providerId, initialPermissionProfile }: ChatViewProps) { - const { setStreamingSessionId, workingDirectory, setWorkingDirectory, setPanelOpen, setPendingApprovalSessionId } = usePanel(); + const { setStreamingSessionId, workingDirectory, setPendingApprovalSessionId } = usePanel(); const { t } = useTranslation(); const router = useRouter(); const [messages, setMessages] = useState(initialMessages); @@ -48,55 +49,30 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal const [loadingMore, setLoadingMore] = useState(false); const loadingMoreRef = useRef(false); const [mode, setMode] = useState(initialMode || 'code'); - // Parent components (page.tsx, SplitColumn) guarantee that session metadata is - // loaded before ChatView mounts, so modelName/providerId reflect the session's - // actual values. Fall back to localStorage only when genuinely empty (old/imported - // sessions that never had a model saved). const [currentModel, setCurrentModel] = useState(() => modelName || (typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-model') : null) || 'sonnet'); const [currentProviderId, setCurrentProviderId] = useState(() => providerId || (typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-provider-id') : null) || ''); - // Effort level selected in MessageInput — lifted here so it enters the stream chain const [selectedEffort, setSelectedEffort] = useState(undefined); - // Thinking mode from app settings const [thinkingMode, setThinkingMode] = useState('adaptive'); - // Sync model/provider when session data loads (props update after async fetch). - // Only override when the session actually has a saved model/provider — empty string - // means "not yet loaded" or "old session without model"; in that case keep current - // value (which was properly initialized from localStorage on mount). - useEffect(() => { - if (modelName) { - setCurrentModel(modelName); - } - }, [modelName]); - useEffect(() => { - if (providerId) { - setCurrentProviderId(providerId); - } - }, [providerId]); + // Sync model/provider when session data loads + useEffect(() => { if (modelName) setCurrentModel(modelName); }, [modelName]); + useEffect(() => { if (providerId) setCurrentProviderId(providerId); }, [providerId]); // Fetch thinking mode from app settings useEffect(() => { fetch('/api/settings/app') .then(r => r.ok ? r.json() : null) - .then(data => { - if (data?.settings?.thinking_mode) { - setThinkingMode(data.settings.thinking_mode); - } - }) + .then(data => { if (data?.settings?.thinking_mode) setThinkingMode(data.settings.thinking_mode); }) .catch(() => {}); }, []); - useEffect(() => { - if (initialPermissionProfile) { - setPermissionProfile(initialPermissionProfile); - } - }, [initialPermissionProfile]); + useEffect(() => { if (initialPermissionProfile) setPermissionProfile(initialPermissionProfile); }, [initialPermissionProfile]); // Stream snapshot from the manager — drives all streaming UI const [streamSnapshot, setStreamSnapshot] = useState( () => getSnapshot(sessionId) ); - // Derive rendering state from snapshot (backward-compatible with MessageList props) + // Derive rendering state from snapshot const isStreaming = streamSnapshot?.phase === 'active'; const streamingContent = streamSnapshot?.streamingContent ?? ''; const toolUses = streamSnapshot?.toolUses ?? []; @@ -107,16 +83,13 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal const permissionResolved = streamSnapshot?.permissionResolved ?? null; const rewindPoints = getRewindPoints(sessionId); - // Pending image generation notices — flushed into the next user message so the LLM knows about generated images + // Pending image generation notices const pendingImageNoticesRef = useRef([]); - // Ref for sendMessage to allow self-referencing in timeout auto-retry const sendMessageRef = useRef<(content: string, files?: FileAttachment[]) => Promise>(undefined); - // Init metadata from SDK (tools, slash_commands, skills) — populated on first status event const initMetaRef = useRef<{ tools?: unknown; slash_commands?: unknown; skills?: unknown } | null>(null); const handleModeChange = useCallback((newMode: string) => { setMode(newMode); - // Persist mode to database and notify chat list if (sessionId) { fetch(`/api/chat/sessions/${sessionId}`, { method: 'PATCH', @@ -126,19 +99,17 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal window.dispatchEvent(new CustomEvent('session-updated')); }).catch(() => { /* silent */ }); - // Try to switch SDK permission mode in real-time (works if streaming) fetch('/api/chat/mode', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ sessionId, mode: newMode }), - }).catch(() => { /* silent — will apply on next message */ }); + }).catch(() => { /* silent */ }); } }, [sessionId]); const handleProviderModelChange = useCallback((newProviderId: string, model: string) => { setCurrentProviderId(newProviderId); setCurrentModel(model); - // Persist immediately so switching chats preserves the selection fetch(`/api/chat/sessions/${sessionId}`, { method: 'PATCH', headers: { 'Content-Type': 'application/json' }, @@ -146,97 +117,15 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal }).catch(() => {}); }, [sessionId]); - // Subscribe to stream-session-manager for this session. - // On unmount we only unsubscribe — we do NOT abort the stream. - useEffect(() => { - // Restore snapshot if stream is already active (e.g., user switched away and back) - const existing = getSnapshot(sessionId); - if (existing) { - setStreamSnapshot(existing); - if (existing.phase === 'active') { - setStreamingSessionId(sessionId); - } - if (existing.pendingPermission && !existing.permissionResolved) { - setPendingApprovalSessionId(sessionId); - } - // If stream completed while this ChatView was unmounted, consume finalMessageContent now. - // Re-fetch messages from DB to avoid duplicates (backend already persisted the reply). - if (existing.phase !== 'active' && existing.finalMessageContent) { - // Completion processing (onboarding/checkin) is handled server-side only - // in the chat API's finally block — no frontend duplicate needed. - fetch(`/api/chat/sessions/${sessionId}/messages?limit=50`) - .then(res => res.ok ? res.json() : null) - .then(data => { - if (data?.messages) { - setMessages(data.messages); - } - }) - .catch(() => { - // Fallback: append locally if DB fetch fails - const assistantMessage: Message = { - id: 'temp-assistant-' + Date.now(), - session_id: sessionId, - role: 'assistant', - content: existing.finalMessageContent!, - created_at: new Date().toISOString(), - token_usage: existing.tokenUsage ? JSON.stringify(existing.tokenUsage) : null, - }; - transferPendingToMessage(assistantMessage.id); - setMessages((prev) => [...prev, assistantMessage]); - }); - clearSnapshot(sessionId); - } - } else { - setStreamSnapshot(null); - } + // ── Extracted hooks ── - const unsubscribe = subscribe(sessionId, (event) => { - setStreamSnapshot(event.snapshot); - - // Sync panel state - if (event.type === 'phase-changed') { - if (event.snapshot.phase === 'active') { - setStreamingSessionId(sessionId); - } else { - setStreamingSessionId(''); - setPendingApprovalSessionId(''); - } - } - if (event.type === 'permission-request') { - setPendingApprovalSessionId(sessionId); - } - if (event.type === 'completed') { - setStreamingSessionId(''); - setPendingApprovalSessionId(''); - - // Append the final assistant message to the messages list - const finalContent = event.snapshot.finalMessageContent; - if (finalContent) { - // Completion processing (onboarding/checkin) is handled server-side only. - - const assistantMessage: Message = { - id: 'temp-assistant-' + Date.now(), - session_id: sessionId, - role: 'assistant', - content: finalContent, - created_at: new Date().toISOString(), - token_usage: event.snapshot.tokenUsage ? JSON.stringify(event.snapshot.tokenUsage) : null, - }; - // Transfer pending reference images to this message ID - transferPendingToMessage(assistantMessage.id); - setMessages((prev) => [...prev, assistantMessage]); - } - - // Clear the snapshot from the manager since we've consumed it - clearSnapshot(sessionId); - } - }); - - return () => { - unsubscribe(); - // Do NOT abort — stream continues in the manager - }; - }, [sessionId, setStreamingSessionId, setPendingApprovalSessionId]); + useStreamSubscription({ + sessionId, + setStreamSnapshot, + setStreamingSessionId, + setPendingApprovalSessionId, + setMessages, + }); const initializedRef = useRef(false); useEffect(() => { @@ -246,142 +135,31 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal } }, [initialMessages]); - // Sync mode when session data loads - useEffect(() => { - if (initialMode) { - setMode(initialMode); - } - }, [initialMode]); + useEffect(() => { if (initialMode) setMode(initialMode); }, [initialMode]); + useEffect(() => { setHasMore(initialHasMore); }, [initialHasMore]); - // Sync hasMore when initial data loads - useEffect(() => { - setHasMore(initialHasMore); - }, [initialHasMore]); + const buildThinkingConfig = useCallback((): { type: string } | undefined => { + if (!thinkingMode || thinkingMode === 'adaptive') return { type: 'adaptive' }; + if (thinkingMode === 'enabled') return { type: 'enabled' }; + if (thinkingMode === 'disabled') return { type: 'disabled' }; + return undefined; + }, [thinkingMode]); - // Auto-trigger assistant project hooks (onboarding/check-in) - // Uses autoTrigger flag so the backend skips saving user message and title update. - // Works for both fresh sessions (onboarding) and reused sessions (check-in). - const assistantTriggerFiredRef = useRef(false); - const checkAssistantTrigger = useCallback(async () => { - // Don't trigger if already streaming or already triggered in this mount - if (isStreaming || assistantTriggerFiredRef.current) return; + const checkAssistantTrigger = useAssistantTrigger({ + sessionId, + workingDirectory, + isStreaming, + mode, + currentModel, + currentProviderId, + initialMessages, + handleModeChange, + buildThinkingConfig, + sendMessageRef, + initMetaRef, + }); - try { - const res = await fetch('/api/settings/workspace'); - if (!res.ok) return; - const data = await res.json(); - if (!data.path) return; - - // Check if this session's working directory matches workspace path - if (workingDirectory !== data.path) return; - - const state = data.state; - if (!state) return; - - // Check hookTriggeredSessionId: if this session already has a trigger in progress - // AND there are existing messages (conversation started), skip to avoid re-triggering. - // If the session has no messages, the previous trigger may have failed — allow retry. - if (state.hookTriggeredSessionId === sessionId && initialMessages.length > 0) return; - - const today = getLocalDateString(); - const needsOnboarding = !state.onboardingComplete; - const needsCheckIn = state.onboardingComplete && state.lastCheckInDate !== today; - - if (!needsOnboarding && !needsCheckIn) return; - - // ── Compensation: check if a past message already contains a completion fence ── - // This handles the case where the server-side detection also missed (e.g. crash/restart) - // and the frontend is about to re-trigger onboarding unnecessarily. - if (needsOnboarding && initialMessages.length > 0) { - try { - const { extractCompletion } = await import('@/lib/onboarding-completion'); - // Scan assistant messages from newest to oldest for an unprocessed completion - for (let i = initialMessages.length - 1; i >= 0; i--) { - const msg = initialMessages[i]; - if (msg.role !== 'assistant') continue; - const completion = extractCompletion(msg.content); - if (completion?.type === 'onboarding') { - console.log('[ChatView] Found unprocessed onboarding completion in message history, compensating...'); - const resp = await fetch('/api/workspace/onboarding', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ answers: completion.answers, sessionId }), - }); - if (resp.ok) { - await fetch('/api/workspace/hook-triggered', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ sessionId: '__clear__' }), - }).catch(() => {}); - console.log('[ChatView] Onboarding compensation succeeded, skipping re-trigger'); - return; // Don't re-trigger onboarding - } - break; // Found fence but processing failed — fall through to re-trigger - } - } - } catch (e) { - console.error('[ChatView] Onboarding compensation check failed:', e); - } - } - - // For daily check-in, only trigger in the most recent session for this workspace. - // This prevents older sessions from hijacking the check-in when reopened. - if (needsCheckIn) { - const latestRes = await fetch(`/api/workspace/latest-session?workingDirectory=${encodeURIComponent(data.path)}`); - if (latestRes.ok) { - const { sessionId: latestSessionId } = await latestRes.json(); - if (latestSessionId && latestSessionId !== sessionId) return; - } - } - - // Mark fired so we don't re-trigger on focus/re-render - assistantTriggerFiredRef.current = true; - - // Mark in persistent state to prevent duplicate triggers across page reloads - await fetch('/api/workspace/hook-triggered', { - method: 'POST', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ sessionId }), - }); - - // Use autoTrigger: the message is invisible (no user bubble, no title update) - const triggerMsg = needsOnboarding - ? '请开始助理引导设置。' - : '请开始每日问询。'; - startStream({ - sessionId, - content: triggerMsg, - mode, - model: currentModel, - providerId: currentProviderId, - autoTrigger: true, - thinking: buildThinkingConfig(), - onModeChanged: (sdkMode) => { - const uiMode = sdkMode === 'plan' ? 'plan' : 'code'; - handleModeChange(uiMode); - }, - sendMessageFn: (retryContent: string, retryFiles?: FileAttachment[]) => { - sendMessageRef.current?.(retryContent, retryFiles); - }, - onInitMeta: (meta) => { - initMetaRef.current = meta; - console.log('[ChatView] SDK init meta received:', meta); - }, - }); - } catch (e) { - console.error('[ChatView] Assistant auto-trigger failed:', e); - } - }, [sessionId, workingDirectory, isStreaming, mode, currentModel, currentProviderId, handleModeChange]); - - useEffect(() => { - // Small delay to let the session fully initialize - const timer = setTimeout(checkAssistantTrigger, 500); - return () => clearTimeout(timer); - }, [checkAssistantTrigger]); - - // Detect workspace mismatch: only show banner when this session was previously - // an assistant workspace session (has .assistant data) but the path has since changed. - // Normal project chats should never see this banner. + // Detect workspace mismatch useEffect(() => { if (!workingDirectory) return; let cancelled = false; @@ -393,8 +171,6 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal if (cancelled) return; if (data.path && workingDirectory !== data.path) { - // Only show banner if this session's workingDirectory was itself an assistant workspace - // (i.e., it has .assistant/state.json). Regular project chats skip the banner. const inspectRes = await fetch(`/api/workspace/inspect?path=${encodeURIComponent(workingDirectory)}`); if (!inspectRes.ok || cancelled) return; const inspectData = await inspectRes.json(); @@ -413,8 +189,7 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal return () => { cancelled = true; }; }, [workingDirectory]); - // Listen for workspace-switched events (from AssistantWorkspaceSection). - // Only show banner if this session's workingDirectory was the OLD assistant workspace. + // Listen for workspace-switched events useEffect(() => { const handler = (e: Event) => { const detail = (e as CustomEvent).detail; @@ -430,7 +205,6 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal try { const model = typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-model') || '' : ''; const provider_id = typeof window !== 'undefined' ? localStorage.getItem('codepilot:last-provider-id') || '' : ''; - // Prefer reusing the latest assistant session (checkin mode) rather than always creating a new onboarding session const res = await fetch('/api/workspace/session', { method: 'POST', headers: { 'Content-Type': 'application/json' }, @@ -447,12 +221,10 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal }, [router]); const loadEarlierMessages = useCallback(async () => { - // Use ref as atomic lock to prevent double-fetch from rapid clicks if (loadingMoreRef.current || !hasMore || messages.length === 0) return; loadingMoreRef.current = true; setLoadingMore(true); try { - // Use _rowid of the earliest message as cursor const earliest = messages[0]; const earliestRowId = (earliest as Message & { _rowid?: number })._rowid; if (!earliestRowId) return; @@ -469,12 +241,8 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal } }, [sessionId, messages, hasMore]); - // Stop streaming — delegates to manager - const stopStreaming = useCallback(() => { - stopStream(sessionId); - }, [sessionId]); + const stopStreaming = useCallback(() => { stopStream(sessionId); }, [sessionId]); - // Permission response — delegates to manager const handlePermissionResponse = useCallback( async (decision: 'allow' | 'allow_session' | 'deny', updatedInput?: Record, denyMessage?: string) => { setPendingApprovalSessionId(''); @@ -483,30 +251,17 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal [sessionId, setPendingApprovalSessionId] ); - // Build SDK thinking config from settings - const buildThinkingConfig = useCallback((): { type: string } | undefined => { - if (!thinkingMode || thinkingMode === 'adaptive') return { type: 'adaptive' }; - if (thinkingMode === 'enabled') return { type: 'enabled' }; - if (thinkingMode === 'disabled') return { type: 'disabled' }; - return undefined; - }, [thinkingMode]); - - // Send message — delegates stream management to the manager const sendMessage = useCallback( async (content: string, files?: FileAttachment[], systemPromptAppend?: string, displayOverride?: string) => { if (isStreaming) return; - // Use displayOverride for UI if provided (e.g. image-gen skill injection hides the skill prompt) const displayUserContent = displayOverride || content; - - // Build display content: embed file metadata as HTML comment for MessageItem to parse let displayContent = displayUserContent; if (files && files.length > 0) { const fileMeta = files.map(f => ({ id: f.id, name: f.name, type: f.type, size: f.size })); displayContent = `${displayUserContent}`; } - // Optimistic: add user message to UI immediately const userMessage: Message = { id: 'temp-' + Date.now(), session_id: sessionId, @@ -517,15 +272,11 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal }; setMessages((prev) => [...prev, userMessage]); - // Flush pending image notices const notices = pendingImageNoticesRef.current.length > 0 ? [...pendingImageNoticesRef.current] : undefined; - if (notices) { - pendingImageNoticesRef.current = []; - } + if (notices) pendingImageNoticesRef.current = []; - // Delegate to stream session manager startStream({ sessionId, content, @@ -554,87 +305,11 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal [sessionId, isStreaming, mode, currentModel, currentProviderId, selectedEffort, buildThinkingConfig, handleModeChange] ); - // Keep sendMessageRef in sync so timeout auto-retry can call it sendMessageRef.current = sendMessage; - const handleCommand = useCallback((command: string) => { - switch (command) { - case '/help': { - const helpMessage: Message = { - id: 'cmd-' + Date.now(), - session_id: sessionId, - role: 'assistant', - content: `## Available Commands\n\n### Instant Commands\n- **/help** — Show this help message\n- **/clear** — Clear conversation history\n- **/cost** — Show token usage statistics\n\n### Prompt Commands (shown as badge, add context then send)\n- **/compact** — Compress conversation context\n- **/doctor** — Diagnose project health\n- **/init** — Initialize CLAUDE.md for project\n- **/review** — Review code quality\n- **/terminal-setup** — Configure terminal settings\n- **/memory** — Edit project memory file\n\n### Custom Skills\nSkills from \`~/.claude/commands/\` and project \`.claude/commands/\` are also available via \`/\`.\n\n**Tips:**\n- Type \`/\` to browse commands and skills\n- Type \`@\` to mention files\n- Use Shift+Enter for new line\n- Select a project folder to enable file operations`, - created_at: new Date().toISOString(), - token_usage: null, - }; - setMessages(prev => [...prev, helpMessage]); - break; - } - case '/clear': - setMessages([]); - // Also clear database messages and reset SDK session - if (sessionId) { - fetch(`/api/chat/sessions/${sessionId}`, { - method: 'PATCH', - headers: { 'Content-Type': 'application/json' }, - body: JSON.stringify({ clear_messages: true }), - }).catch(() => { /* silent */ }); - } - break; - case '/cost': { - // Aggregate token usage from all messages in this session - let totalInput = 0; - let totalOutput = 0; - let totalCacheRead = 0; - let totalCacheCreation = 0; - let totalCost = 0; - let turnCount = 0; + const handleCommand = useChatCommands({ sessionId, messages, setMessages, sendMessage }); - for (const msg of messages) { - if (msg.token_usage) { - try { - const usage = typeof msg.token_usage === 'string' ? JSON.parse(msg.token_usage) : msg.token_usage; - totalInput += usage.input_tokens || 0; - totalOutput += usage.output_tokens || 0; - totalCacheRead += usage.cache_read_input_tokens || 0; - totalCacheCreation += usage.cache_creation_input_tokens || 0; - if (usage.cost_usd) totalCost += usage.cost_usd; - turnCount++; - } catch { /* skip */ } - } - } - - const totalTokens = totalInput + totalOutput; - let content: string; - - if (turnCount === 0) { - content = `## Token Usage\n\nNo token usage data yet. Send a message first.`; - } else { - content = `## Token Usage\n\n| Metric | Count |\n|--------|-------|\n| Input tokens | ${totalInput.toLocaleString()} |\n| Output tokens | ${totalOutput.toLocaleString()} |\n| Cache read | ${totalCacheRead.toLocaleString()} |\n| Cache creation | ${totalCacheCreation.toLocaleString()} |\n| **Total tokens** | **${totalTokens.toLocaleString()}** |\n| Turns | ${turnCount} |${totalCost > 0 ? `\n| **Estimated cost** | **$${totalCost.toFixed(4)}** |` : ''}`; - } - - const costMessage: Message = { - id: 'cmd-' + Date.now(), - session_id: sessionId, - role: 'assistant', - content, - created_at: new Date().toISOString(), - token_usage: null, - }; - setMessages(prev => [...prev, costMessage]); - break; - } - default: - // This shouldn't be reached since non-immediate commands are handled via badge - sendMessage(command); - } - }, [sessionId, sendMessage]); - - // Listen for image generation completion — persist notice to DB and queue for next user message. - // The notice is NOT sent as a separate LLM turn (avoids permission popups). - // Instead it's flushed into the next user message via pendingImageNoticesRef. - // MessageItem hides messages matching this prefix so the user doesn't see them. + // Listen for image generation completion useEffect(() => { const handler = (e: Event) => { const detail = (e as CustomEvent).detail; @@ -645,15 +320,12 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal const pathInfo = paths.length > 0 ? `\nGenerated image file paths:\n${paths.map((p: string) => `- ${p}`).join('\n')}` : ''; const notice = `[Image generation completed]\n- Prompt: "${detail.prompt}"\n- Aspect ratio: ${detail.aspectRatio}\n- Resolution: ${detail.resolution}${pathInfo}`; - // Store generated image paths so subsequent edits can use them as reference if (paths.length > 0) { setLastGeneratedImages(paths); } - // Queue for next user message so the LLM gets the context pendingImageNoticesRef.current.push(notice); - // Also persist to DB for history reload const dbNotice = `[__IMAGE_GEN_NOTICE__ prompt: "${detail.prompt}", aspect ratio: ${detail.aspectRatio}, resolution: ${detail.resolution}${paths.length > 0 ? `, file path: ${paths.join(', ')}` : ''}]`; fetch('/api/chat/messages', { method: 'POST', @@ -669,16 +341,16 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal
{/* Workspace mismatch banner */} {workspaceMismatchPath && ( -
- +
+ {t('assistant.switchedBanner', { path: workspaceMismatchPath })} - +
)} - {/* Permission prompt — rendered outside MessageList so it's always visible at bottom */} + {/* Permission prompt */} - {/* Batch image generation panels — shown above the input area */} + {/* Batch image generation panels */} @@ -721,8 +393,6 @@ export function ChatView({ sessionId, initialMessages = [], initialHasMore = fal providerId={currentProviderId} onProviderModelChange={handleProviderModelChange} workingDirectory={workingDirectory} - mode={mode} - onModeChange={handleModeChange} onAssistantTrigger={checkAssistantTrigger} effort={selectedEffort} onEffortChange={setSelectedEffort} diff --git a/src/components/chat/CliToolsPopover.tsx b/src/components/chat/CliToolsPopover.tsx index fba4fd3..06d1e3f 100644 --- a/src/components/chat/CliToolsPopover.tsx +++ b/src/components/chat/CliToolsPopover.tsx @@ -1,17 +1,21 @@ 'use client'; import { useCallback } from 'react'; -import { Terminal } from '@phosphor-icons/react'; -import { cn } from '@/lib/utils'; +import { Terminal } from '@/components/ui/icon'; import { useTranslation } from '@/hooks/useTranslation'; import type { TranslationKey } from '@/i18n'; +import type { CliToolItem } from '@/types'; +import { + CommandList, + CommandListSearch, + CommandListItems, + CommandListItem, + CommandListEmpty, + CommandListFooter, + CommandListFooterAction, +} from '@/components/patterns'; -export interface CliToolItem { - id: string; - name: string; - version: string | null; - summary: string; -} +export type { CliToolItem } from '@/types'; interface CliToolsPopoverProps { popoverRef: React.RefObject; @@ -63,66 +67,54 @@ export function CliToolsPopover({ }, [selectedIndex, filtered, onSetSelectedIndex, onCliSelect, onClosePopover, onFocusTextarea]); return ( -
-
- + + { onSetCliFilter(e.target.value); onSetSelectedIndex(0); }} + onChange={(val) => { onSetCliFilter(val); onSetSelectedIndex(0); }} onKeyDown={handleSearchKeyDown} - className="w-full bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-none" /> -
-
- {filtered.length > 0 ? ( - filtered.map((tool, idx) => ( - - )) - ) : ( -
-

{t('cliTools.noToolsDetected' as TranslationKey)}

- -
- )} -
- {/* Footer: manage CLI tools */} -
- -
+ + {filtered.length > 0 ? ( + filtered.map((tool, idx) => ( + { el?.scrollIntoView({ block: 'nearest' }); } : undefined} + onClick={() => onCliSelect(tool)} + onMouseEnter={() => onSetSelectedIndex(idx)} + > + + {tool.name} + {tool.version && ( + v{tool.version} + )} + {tool.summary && ( + {tool.summary} + )} + + )) + ) : ( + +

{t('cliTools.noToolsDetected' as TranslationKey)}

+ { onClosePopover(); window.location.href = '/cli-tools'; }}> + + {t('cliTools.goInstall' as TranslationKey)} + + + + )} + + {/* Footer: manage CLI tools */} + + { onClosePopover(); window.location.href = '/cli-tools'; }}> + + {t('cliTools.manageCli' as TranslationKey)} + + +
); } diff --git a/src/components/chat/ContextUsageIndicator.tsx b/src/components/chat/ContextUsageIndicator.tsx index 262a3e2..c396b10 100644 --- a/src/components/chat/ContextUsageIndicator.tsx +++ b/src/components/chat/ContextUsageIndicator.tsx @@ -3,6 +3,7 @@ import type { Message } from '@/types'; import { useContextUsage } from '@/hooks/useContextUsage'; import { useTranslation } from '@/hooks/useTranslation'; +import { Button } from '@/components/ui/button'; import { HoverCard, HoverCardTrigger, @@ -32,15 +33,15 @@ export function ContextUsageIndicator({ messages, modelName }: ContextUsageIndic // Color based on usage ratio — used portion is dark gray by default let strokeColor = 'text-muted-foreground'; if (usage.hasData) { - if (usage.ratio > 0.8) strokeColor = 'text-red-500'; - else if (usage.ratio > 0.6) strokeColor = 'text-yellow-500'; + if (usage.ratio > 0.8) strokeColor = 'text-status-error-foreground'; + else if (usage.ratio > 0.6) strokeColor = 'text-status-warning-foreground'; else strokeColor = 'text-zinc-600 dark:text-zinc-400'; } return ( - + {!usage.hasData ? ( diff --git a/src/components/chat/EffortSelectorDropdown.tsx b/src/components/chat/EffortSelectorDropdown.tsx index c336305..3e07f91 100644 --- a/src/components/chat/EffortSelectorDropdown.tsx +++ b/src/components/chat/EffortSelectorDropdown.tsx @@ -1,11 +1,16 @@ 'use client'; import { useRef, useState, useEffect } from 'react'; -import { CaretDown } from '@phosphor-icons/react'; +import { CaretDown } from '@/components/ui/icon'; import { cn } from '@/lib/utils'; import { useTranslation } from '@/hooks/useTranslation'; import type { TranslationKey } from '@/i18n'; import { PromptInputButton } from '@/components/ai-elements/prompt-input'; +import { + CommandList, + CommandListItem, + CommandListGroup, +} from '@/components/patterns'; interface EffortSelectorDropdownProps { selectedEffort: string; @@ -46,29 +51,26 @@ export function EffortSelectorDropdown({ {effortMenuOpen && ( -
-
- {t('messageInput.effort.label' as TranslationKey)} -
-
- {levels.map((level) => ( - - ))} -
-
+ + +
+ {levels.map((level) => ( + { + onEffortChange(level); + setEffortMenuOpen(false); + }} + className="justify-between" + > + {t(`messageInput.effort.${level}` as TranslationKey)} + {selectedEffort === level && ✓} + + ))} +
+ + )}
); diff --git a/src/components/chat/FileCard.tsx b/src/components/chat/FileCard.tsx index 7d289df..0dbb57f 100644 --- a/src/components/chat/FileCard.tsx +++ b/src/components/chat/FileCard.tsx @@ -1,6 +1,6 @@ 'use client'; -import { File } from "@phosphor-icons/react"; +import { File } from "@/components/ui/icon"; import { formatFileSize } from '@/types'; interface FileCardProps { diff --git a/src/components/chat/FolderPicker.tsx b/src/components/chat/FolderPicker.tsx index aad458f..4cafbdb 100644 --- a/src/components/chat/FolderPicker.tsx +++ b/src/components/chat/FolderPicker.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useEffect, useCallback } from 'react'; -import { Folder, FolderOpen, ArrowRight, CaretUp } from "@phosphor-icons/react"; +import { Folder, FolderOpen, ArrowRight, CaretUp } from "@/components/ui/icon"; import { Button } from '@/components/ui/button'; import { Dialog, @@ -172,15 +172,16 @@ export function FolderPicker({ open, onOpenChange, onSelect, initialPath }: Fold ) : (
{directories.map((dir) => ( - + ))}
)} diff --git a/src/components/chat/ImageGenCard.tsx b/src/components/chat/ImageGenCard.tsx index 359579f..b8db1e6 100644 --- a/src/components/chat/ImageGenCard.tsx +++ b/src/components/chat/ImageGenCard.tsx @@ -1,7 +1,7 @@ 'use client'; import { useState, useCallback } from 'react'; -import { DownloadSimple, ArrowsCounterClockwise, PaintBrush } from '@phosphor-icons/react'; +import { DownloadSimple, ArrowsCounterClockwise, PaintBrush } from '@/components/ui/icon'; import { cn } from '@/lib/utils'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; @@ -91,11 +91,11 @@ export function ImageGenCard({ {/* Image grid */}
{images.map((img, i) => ( - + ))}
diff --git a/src/components/chat/ImageGenConfirmation.tsx b/src/components/chat/ImageGenConfirmation.tsx index 53fa028..bbb60a1 100644 --- a/src/components/chat/ImageGenConfirmation.tsx +++ b/src/components/chat/ImageGenConfirmation.tsx @@ -3,6 +3,7 @@ import { useState, useCallback, useEffect, useRef } from 'react'; import { cn } from '@/lib/utils'; import { Button } from '@/components/ui/button'; +import { Textarea } from '@/components/ui/textarea'; import { ImageGenCard } from './ImageGenCard'; import { useTranslation } from '@/hooks/useTranslation'; import { usePanel } from '@/hooks/usePanel'; @@ -71,7 +72,7 @@ export function ImageGenConfirmation({ } catch { // ignore } - }, [initialPrompt]); + }, [initialPrompt, sessionId]); const handleStop = useCallback(() => { if (abortRef.current) { @@ -193,7 +194,7 @@ export function ImageGenConfirmation({ } finally { abortRef.current = null; } - }, [prompt, aspectRatio, resolution, initialPrompt, sessionId, referenceImages]); + }, [prompt, aspectRatio, resolution, initialPrompt, sessionId, messageId, referenceImages]); const handleRegenerate = useCallback(() => { setResult(null); @@ -203,7 +204,7 @@ export function ImageGenConfirmation({ } catch { // ignore } - }, [initialPrompt]); + }, [initialPrompt, sessionId]); // ── Completed: show result only ── if (status === 'completed' && result && result.images.length > 0) { @@ -258,14 +259,13 @@ export function ImageGenConfirmation({ -