From 4ac8fa2c12499882557a2b8cd4bf9e9412fdc35c Mon Sep 17 00:00:00 2001 From: haikdc Date: Sat, 18 Apr 2026 17:58:25 -0700 Subject: [PATCH] =?UTF-8?q?[Haik]:=20cleanup:=20remove=20dead=20code=20and?= =?UTF-8?q?=20tighten=20TypeScript=20types=20across=20frontend=20=E2=80=94?= =?UTF-8?q?=20delete=20unused=20AutoRunLog.tsx,=20LogEntry.tsx,=20and=20cl?= =?UTF-8?q?earClipboard();=20remove=20SendMessagePayload,=20GenerateGroupM?= =?UTF-8?q?etaPayload,=20SearchHistoryParams,=20and=20summarizeToolInput?= =?UTF-8?q?=20from=20shared=20types=20and=20agentCardUtils;=20replace=20Re?= =?UTF-8?q?cord=20with=20Record=20in=20a?= =?UTF-8?q?gentsTypes.ts=20and=20dashboardClipboard.ts;=20type=20getStatus?= =?UTF-8?q?Colors=20param=20as=20ClaudeTokens;=20relocate=20richEditorUtil?= =?UTF-8?q?s.ts=20from=20app/components=20to=20RichPromptEditor=20and=20up?= =?UTF-8?q?date=20imports;=20narrow=20summarizeMessage=20export=20to=20mod?= =?UTF-8?q?ule-private=20in=20BrowserAgentOverlay;=20wrap=20session-change?= =?UTF-8?q?=20state=20resets=20in=20queueMicrotask=20to=20avoid=20render-d?= =?UTF-8?q?uring-render=20warnings?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../AgentCard/components/agentCardUtils.ts | 53 +-------- .../BrowserAgentOverlay.tsx | 10 +- .../RichPromptEditor}/richEditorUtils.ts | 0 .../RichPromptEditor/useRichPromptEditor.ts | 4 +- frontend/src/app/pages/Views/AutoRunLog.tsx | 61 ---------- frontend/src/app/pages/Views/LogEntry.tsx | 110 ------------------ frontend/src/shared/dashboardClipboard.ts | 8 +- frontend/src/shared/state/agentsTypes.ts | 33 +----- 8 files changed, 15 insertions(+), 264 deletions(-) rename frontend/src/app/{components => pages/Modes/ModeFormDialog/components/RichPromptEditor}/richEditorUtils.ts (100%) delete mode 100644 frontend/src/app/pages/Views/AutoRunLog.tsx delete mode 100644 frontend/src/app/pages/Views/LogEntry.tsx diff --git a/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/AgentCard/components/agentCardUtils.ts b/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/AgentCard/components/agentCardUtils.ts index 54750cee..afad08be 100644 --- a/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/AgentCard/components/agentCardUtils.ts +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/AgentCard/components/agentCardUtils.ts @@ -1,5 +1,6 @@ import { AgentSession } from '@/shared/state/agentsSlice'; -import { parseMcpToolName } from '@/app/pages/AgentChat/toolkit/approvalToolkit/utils'; +import { ClaudeTokens } from '@/shared/styles/claudeTokens'; +import { getToolDisplayName } from './AgentCardCollapsed/components/getToolDisplayName'; export function formatDuration(createdAt: string, closedAt?: string | null, status?: string): string { const start = new Date(createdAt).getTime(); @@ -13,55 +14,7 @@ export function formatDuration(createdAt: string, closedAt?: string | null, stat return `${hours}h ${minutes % 60}m`; } -export function summarizeToolInput(toolName: string, toolInput: Record): string { - const mcp = parseMcpToolName(toolName); - if (mcp.isMcp) { - const keys = Object.keys(toolInput || {}); - if (keys.length === 0) return ''; - if (keys.length === 1) { - const v = toolInput[keys[0]]; - const s = typeof v === 'string' ? v : JSON.stringify(v); - return s.length > 60 ? s.slice(0, 60) + '…' : s; - } - return keys.slice(0, 3).map((k) => { - const v = toolInput[k]; - const s = typeof v === 'string' ? v : JSON.stringify(v); - return `${k}: ${s.length > 30 ? s.slice(0, 30) + '…' : s}`; - }).join(' '); - } - switch (toolName) { - case 'Bash': - return toolInput.command || '(command)'; - case 'Read': - return toolInput.file_path || toolInput.path || '(file)'; - case 'Write': - case 'Edit': - return toolInput.file_path || toolInput.path || '(file)'; - case 'Grep': - return `/${toolInput.pattern || ''}/${toolInput.path ? ` in ${toolInput.path}` : ''}`; - case 'Glob': - return toolInput.glob_pattern || toolInput.pattern || '(pattern)'; - case 'AskUserQuestion': { - const questions = toolInput.questions; - if (Array.isArray(questions) && questions.length > 0) { - return questions[0].question || questions[0].prompt || questions[0].text || 'Question pending'; - } - return 'Question pending'; - } - default: { - return toolInput.command || toolInput.file_path || toolInput.path || toolInput.query - || JSON.stringify(toolInput).slice(0, 60); - } - } -} - -export function getToolDisplayName(toolName: string): string { - const mcp = parseMcpToolName(toolName); - if (mcp.isMcp) return mcp.displayName; - return toolName; -} - -export function getStatusColors(c: Record): Record { +export function getStatusColors(c: ClaudeTokens): Record { return { running: { color: c.status.success, bg: c.status.successBg }, waiting_approval: { color: c.status.warning, bg: c.status.warningBg }, diff --git a/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/BrowserCard/components/BrowserAgentOverlay/BrowserAgentOverlay.tsx b/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/BrowserCard/components/BrowserAgentOverlay/BrowserAgentOverlay.tsx index 849a8053..313ca4da 100644 --- a/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/BrowserCard/components/BrowserAgentOverlay/BrowserAgentOverlay.tsx +++ b/frontend/src/app/pages/Dashboard/DashboardCanvas/cards/BrowserCard/components/BrowserAgentOverlay/BrowserAgentOverlay.tsx @@ -17,7 +17,7 @@ import { useClaudeTokens } from '@/shared/styles/ThemeContext'; import { OverlayEntry } from './OverlayEntry'; import OverlayActionLog from './OverlayActionLog'; -export function summarizeMessage(msg: AgentMessage): OverlayEntry { +function summarizeMessage(msg: AgentMessage): OverlayEntry { if (msg.role === 'assistant' && typeof msg.content === 'string') { const trimmed = msg.content.trim(); if (!trimmed) return { type: 'skip', text: '' }; @@ -80,9 +80,11 @@ const BrowserAgentOverlay: React.FC = ({ session, browserWidth, browserHe useEffect(() => { if (session.session_id !== prevSessionId.current) { prevSessionId.current = session.session_id; - setFadeOut(false); - setHidden(false); - setConfirmStop(false); + queueMicrotask(() => { + setFadeOut(false); + setHidden(false); + setConfirmStop(false); + }); } }, [session.session_id]); diff --git a/frontend/src/app/components/richEditorUtils.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richEditorUtils.ts similarity index 100% rename from frontend/src/app/components/richEditorUtils.ts rename to frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/richEditorUtils.ts diff --git a/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts index bc49bcc8..b9648657 100644 --- a/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts +++ b/frontend/src/app/pages/Modes/ModeFormDialog/components/RichPromptEditor/useRichPromptEditor.ts @@ -1,5 +1,5 @@ import React, { useState, useRef, useCallback, useEffect } from 'react'; -import { CommandPickerItem } from '@/app/components/CommandPicker'; +import { CommandPickerItem } from './CommandPicker/components/commandPickerTypes'; import { SKILL_PILL_ATTR, AttachedSkill, @@ -9,7 +9,7 @@ import { detectEditorTrigger, TriggerState, EMPTY_TRIGGER, -} from '@/app/components/richEditorUtils'; +} from './richEditorUtils'; import { useAppSelector } from '@/shared/hooks'; import { useClaudeTokens } from '@/shared/styles/ThemeContext'; import { RichPromptEditorProps, LINE_HEIGHT, FONT_SIZE } from './richPromptEditorTypes'; diff --git a/frontend/src/app/pages/Views/AutoRunLog.tsx b/frontend/src/app/pages/Views/AutoRunLog.tsx deleted file mode 100644 index 931bf08f..00000000 --- a/frontend/src/app/pages/Views/AutoRunLog.tsx +++ /dev/null @@ -1,61 +0,0 @@ -import React from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import CircularProgress from '@mui/material/CircularProgress'; -import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline'; -import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline'; -import { AgentMessage } from '@/shared/state/agentsSlice'; -import { useClaudeTokens } from '@/shared/styles/ThemeContext'; -import { LogEntry } from './LogEntry'; - -interface AutoRunLogProps { - messages: AgentMessage[]; - status: string | null; - logEndRef: React.RefObject; - c: ReturnType; -} - -export const AutoRunLog: React.FC = ({ messages, status, logEndRef, c }) => { - const isRunning = status === 'running' || status === 'waiting_approval'; - const isDone = status === 'completed' || status === 'stopped'; - const isError = status === 'error'; - - return ( - - - {isRunning && } - {isDone && } - {isError && } - - {isRunning ? 'Agent running…' : isDone ? 'Agent completed' : isError ? 'Agent error' : 'Execution log'} - - - {messages.length} messages - - - - {messages.map((msg) => ( - - ))} -
- - - ); -}; diff --git a/frontend/src/app/pages/Views/LogEntry.tsx b/frontend/src/app/pages/Views/LogEntry.tsx deleted file mode 100644 index 1337907d..00000000 --- a/frontend/src/app/pages/Views/LogEntry.tsx +++ /dev/null @@ -1,110 +0,0 @@ -import React, { useState } from 'react'; -import Box from '@mui/material/Box'; -import Typography from '@mui/material/Typography'; -import Collapse from '@mui/material/Collapse'; -import Chip from '@mui/material/Chip'; -import ExpandMoreIcon from '@mui/icons-material/ExpandMore'; -import { AgentMessage } from '@/shared/state/agentsSlice'; -import { useClaudeTokens } from '@/shared/styles/ThemeContext'; - -interface LogEntryProps { - msg: AgentMessage; - c: ReturnType; -} - -export const LogEntry: React.FC = ({ msg, c }) => { - const [open, setOpen] = useState(false); - - if (msg.role === 'user') return null; - - if (msg.role === 'assistant') { - const text = typeof msg.content === 'string' - ? msg.content - : Array.isArray(msg.content) - ? msg.content.filter((b: any) => b.type === 'text').map((b: any) => b.text).join('') - : JSON.stringify(msg.content); - if (!text.trim()) return null; - return ( - - setOpen(!open)} - sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer', '&:hover': { opacity: 0.8 } }} - > - - - {text.slice(0, 120)}{text.length > 120 ? '…' : ''} - - - - - {text} - - - - ); - } - - if (msg.role === 'tool_call') { - const tc = typeof msg.content === 'object' ? msg.content as Record : {}; - return ( - - setOpen(!open)} - sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer', '&:hover': { opacity: 0.8 } }} - > - - - {tc.input && ( - - {JSON.stringify(tc.input).slice(0, 80)}… - - )} - - - - - {JSON.stringify(tc.input, null, 2)} - - - - - ); - } - - if (msg.role === 'tool_result') { - const content = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content); - return ( - - setOpen(!open)} - sx={{ display: 'flex', alignItems: 'center', gap: 0.5, cursor: 'pointer', '&:hover': { opacity: 0.8 } }} - > - - - result ({content.length > 60 ? `${content.length} chars` : content.slice(0, 60)}) - - - - - {content} - - - - ); - } - - if (msg.role === 'system') { - const text = typeof msg.content === 'string' ? msg.content : JSON.stringify(msg.content); - return ( - - {text} - - ); - } - - return null; -}; diff --git a/frontend/src/shared/dashboardClipboard.ts b/frontend/src/shared/dashboardClipboard.ts index 1869b07e..20626bea 100644 --- a/frontend/src/shared/dashboardClipboard.ts +++ b/frontend/src/shared/dashboardClipboard.ts @@ -4,7 +4,7 @@ export interface ClipboardCard { type: CardType; id: string; name: string; - meta: Record; + meta: Record; x: number; y: number; width: number; @@ -20,8 +20,4 @@ export function setClipboardCards(cards: ClipboardCard[]): void { export function getClipboardCards(): ClipboardCard[] { return clipboardCards; -} - -export function clearClipboard(): void { - clipboardCards = []; -} +} \ No newline at end of file diff --git a/frontend/src/shared/state/agentsTypes.ts b/frontend/src/shared/state/agentsTypes.ts index b4ea5f39..a97e8154 100644 --- a/frontend/src/shared/state/agentsTypes.ts +++ b/frontend/src/shared/state/agentsTypes.ts @@ -1,7 +1,7 @@ export interface AgentMessage { id: string; role: 'user' | 'assistant' | 'tool_call' | 'tool_result' | 'system'; - content: any; + content: string | Record; timestamp: string; branch_id: string; parent_id: string | null; @@ -16,7 +16,7 @@ export interface ApprovalRequest { id: string; session_id: string; tool_name: string; - tool_input: Record; + tool_input: Record; created_at: string; } @@ -86,20 +86,6 @@ export interface ContextPath { type: 'file' | 'directory'; } -export interface SendMessagePayload { - sessionId: string; - prompt: string; - mode?: string; - model?: string; - provider?: string; - images?: Array<{ data: string; media_type: string }>; - contextPaths?: Array; - forcedTools?: string[]; - attachedSkills?: Array<{ id: string; name: string; content: string }>; - hidden?: boolean; - selectedBrowserIds?: string[]; -} - export interface LaunchAndSendPayload { draftId: string; config: AgentConfig; @@ -115,21 +101,6 @@ export interface LaunchAndSendPayload { selectedBrowserIds?: string[]; } -export interface GenerateGroupMetaPayload { - sessionId: string; - groupId: string; - toolCalls: Array<{ tool: string; input_summary: string }>; - resultsSummary?: string[]; - isRefinement?: boolean; -} - -export interface SearchHistoryParams { - q?: string; - limit?: number; - offset?: number; - dashboardId?: string; -} - export interface HistorySession { id: string; name: string;