feat(ui): show live action status on Kanban task cards #792
Conversation
|
Note Other AI code review bot(s) detectedCodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review. 📝 WalkthroughWalkthroughAdds live tool-action propagation and UI: backend emits richer tool-input logs, frontend parses tool log lines into Changes
Sequence Diagram(s)sequenceDiagram
participant Backend as Backend (agent)
participant Logger as Task Logger
participant IPC as Main IPC
participant Parser as AgentEvents.parseExecutionPhase
participant Renderer as TaskCard UI
Backend->>Logger: emit "[Tool: <ToolName>]: <details>" log line
Logger->>IPC: forward execution-progress/log event
IPC->>Parser: pass log line / progress
Parser->>IPC: return executionProgress.message (e.g., "Reading spec.md")
IPC->>Renderer: deliver updated executionProgress and mapped status
Renderer->>Renderer: getToolStyleFromMessage(message) -> icon, color
Renderer->>Renderer: render pulsing badge with icon and message on TaskCard
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
Summary of ChangesHello @arcker, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! This pull request enhances the user interface by integrating live agent action statuses directly into Kanban task cards. This change aims to significantly improve the user experience by providing real-time updates on agent activities, thereby reducing the need to consult detailed logs. The implementation involves a new helper function to dynamically style these status messages based on the agent's current tool or action, ensuring a clear and intuitive visual representation of progress. Highlights
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable UI enhancement by displaying the live agent action on Kanban task cards. The implementation is solid and directly addresses the goal of improving visibility into task progress. I've provided a couple of suggestions to refactor parts of the implementation for better maintainability and to follow best practices, particularly around making the tool styling data-driven and removing unnecessary non-null assertions in the React component.
| function getToolStyleFromMessage(message: string): { icon: typeof FileText; color: string } | null { | ||
| const lowerMessage = message.toLowerCase(); | ||
| if (lowerMessage.startsWith("reading")) { | ||
| return { icon: FileText, color: "text-blue-500 bg-blue-500/10" }; | ||
| } | ||
| if (lowerMessage.startsWith("searching files") || lowerMessage.startsWith("globbing")) { | ||
| return { icon: FolderSearch, color: "text-amber-500 bg-amber-500/10" }; | ||
| } | ||
| if (lowerMessage.startsWith("searching code") || lowerMessage.startsWith("grep")) { | ||
| return { icon: Search, color: "text-green-500 bg-green-500/10" }; | ||
| } | ||
| if (lowerMessage.startsWith("editing")) { | ||
| return { icon: Pencil, color: "text-purple-500 bg-purple-500/10" }; | ||
| } | ||
| if (lowerMessage.startsWith("writing")) { | ||
| return { icon: FileCode, color: "text-cyan-500 bg-cyan-500/10" }; | ||
| } | ||
| if (lowerMessage.startsWith("running") || lowerMessage.startsWith("executing")) { | ||
| return { icon: Terminal, color: "text-orange-500 bg-orange-500/10" }; | ||
| } | ||
| return null; | ||
| } |
There was a problem hiding this comment.
This function can be made more maintainable and readable by using a data-driven approach instead of a long chain of if statements. This makes it easier to add or modify tool styles in the future.
I'd recommend defining the toolStyles array as a constant outside of this function to avoid recreating it on every render.
function getToolStyleFromMessage(message: string): { icon: typeof FileText; color: string } | null {
const lowerMessage = message.toLowerCase();
const toolStyles: { keywords: string[]; icon: typeof FileText; color: string }[] = [
{ keywords: ["reading"], icon: FileText, color: "text-blue-500 bg-blue-500/10" },
{ keywords: ["searching files", "globbing"], icon: FolderSearch, color: "text-amber-500 bg-amber-500/10" },
{ keywords: ["searching code", "grep"], icon: Search, color: "text-green-500 bg-green-500/10" },
{ keywords: ["editing"], icon: Pencil, color: "text-purple-500 bg-purple-500/10" },
{ keywords: ["writing"], icon: FileCode, color: "text-cyan-500 bg-cyan-500/10" },
{ keywords: ["running", "executing"], icon: Terminal, color: "text-orange-500 bg-orange-500/10" },
];
const style = toolStyles.find(s => s.keywords.some(keyword => lowerMessage.startsWith(keyword)));
return style ? { icon: style.icon, color: style.color } : null;
}
| (() => { | ||
| const toolStyle = getToolStyleFromMessage(task.executionProgress!.message!); | ||
| const Icon = toolStyle?.icon || Loader2; | ||
| const colorClass = toolStyle?.color || "text-muted-foreground bg-muted/50"; | ||
| return ( | ||
| <div className={cn("mt-2 flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px]", colorClass)}> | ||
| <Icon className="h-3 w-3 shrink-0 animate-pulse" /> | ||
| <span className="truncate" title={task.executionProgress!.message}> | ||
| {task.executionProgress!.message} | ||
| </span> | ||
| </div> | ||
| ); | ||
| })() |
There was a problem hiding this comment.
The non-null assertion operators (!) are unnecessary here. The conditional render task.executionProgress?.message already ensures that task.executionProgress.message is a string within this block, so you can rely on TypeScript's type narrowing. This makes the code safer and cleaner.
Additionally, while the IIFE pattern works, extracting this logic into a separate, small component would improve readability and separation of concerns. For now, I've suggested a minimal refactor to remove the unsafe assertions and improve clarity.
(() => {
const message = task.executionProgress.message;
const toolStyle = getToolStyleFromMessage(message);
const Icon = toolStyle?.icon || Loader2;
const colorClass = toolStyle?.color || "text-muted-foreground bg-muted/50";
return (
<div className={cn("mt-2 flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px]", colorClass)}>
<Icon className="h-3 w-3 shrink-0 animate-pulse" />
<span className="truncate" title={message}>
{message}
</span>
</div>
);
})()
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In @apps/frontend/src/renderer/components/TaskCard.tsx:
- Around line 47-69: Extract the literal pattern strings used in
getToolStyleFromMessage into named constants (e.g., READ_PATTERNS = ["reading"],
FILE_SEARCH_PATTERNS = ["searching files", "globbing"], CODE_SEARCH_PATTERNS =
["searching code", "grep"], etc.), then update getToolStyleFromMessage to
iterate those pattern arrays (using toLowerCase and startsWith) and return the
same icon/color mappings; this centralizes patterns for easier additions/tests
and keeps the function logic unchanged aside from referencing the new constants.
- Around line 481-496: The IIFE in the JSX for live action status should be
replaced with a useMemo to improve readability and avoid recalculating each
render: compute toolStyle, Icon and colorClass via useMemo (depend on
task.executionProgress?.message, isRunning, isStuck) using
getToolStyleFromMessage and defaulting Icon to Loader2 and colorClass to
"text-muted-foreground bg-muted/50", then render the computed values directly in
JSX without non-null assertions; update references to
task.executionProgress.message, getToolStyleFromMessage, Icon and colorClass in
the TaskCard component accordingly.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
apps/frontend/src/renderer/components/TaskCard.tsx
🧰 Additional context used
📓 Path-based instructions (3)
apps/frontend/src/**/*.{ts,tsx,jsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Always use i18n translation keys for all user-facing text in the frontend instead of hardcoded strings
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
apps/frontend/src/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use
useTranslation()hook with namespace prefixes (e.g., 'navigation:items.key') for accessing translation strings in React components
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧠 Learnings (2)
📚 Learning: 2025-12-30T16:38:36.314Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-12-30T16:38:36.314Z
Learning: Applies to apps/frontend/src/**/*.{ts,tsx} : Use `useTranslation()` hook with namespace prefixes (e.g., 'navigation:items.key') for accessing translation strings in React components
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
📚 Learning: 2026-01-04T23:59:45.209Z
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings) can be deferred for future i18n cleanup passes. Do not fix such issues in PRs that do not introduce new i18n violations, especially in frontend TSX components (e.g., apps/frontend/**/*.tsx). If a PR adds new i18n violations, address them in that PR.
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧬 Code graph analysis (1)
apps/frontend/src/renderer/components/TaskCard.tsx (2)
apps/frontend/src/main/agent/agent-manager.ts (1)
isRunning(330-332)apps/frontend/src/renderer/lib/utils.ts (1)
cn(7-9)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
- GitHub Check: CodeQL (javascript-typescript)
- GitHub Check: CodeQL (python)
🔇 Additional comments (2)
apps/frontend/src/renderer/components/TaskCard.tsx (2)
3-3: LGTM! Icon imports are appropriate for the new feature.The additional lucide-react icons (FileText, Search, FolderSearch, Terminal, Pencil) are properly imported and used for tool-specific status indicators.
97-97: LGTM! Memoization correctly updated for live status.Adding the execution message to the comparison ensures the TaskCard re-renders when the agent's current action changes, which is essential for the live status display.
AndyMik90
left a comment
AndyMik90
left a comment
There was a problem hiding this comment.
🤖 Auto Claude PR Review
Merge Verdict: 🔴 BLOCKED
🔴 Blocked - Merge conflicts must be resolved before merge.
Blocked: PR has merge conflicts with base branch. Resolve conflicts before merge.
Risk Assessment
| Factor | Level | Notes |
|---|---|---|
| Complexity | Low | Based on lines changed |
| Security Impact | None | Based on security findings |
| Scope Coherence | Good | Based on structural review |
🚨 Blocking Issues (Must Fix)
- Merge Conflicts: PR has conflicts with base branch that must be resolved
Findings Summary
- Low: 4 issue(s)
Generated by Auto Claude PR Review
Findings (4 selected of 4 total)
🔵 [28bb407b555e] [LOW] Pattern matching uses startsWith() which assumes specific message format
📁 apps/frontend/src/renderer/components/TaskCard.tsx:64
The getToolStyleFromMessage() function uses startsWith() for pattern matching, which assumes execution messages always begin with the tool type (e.g., 'Reading', 'Searching'). If messages are ever prefixed with metadata like '[Step 1/3]' or timestamps, the matching would fail. However, cross-validation with logic-reviewer confirmed this degrades gracefully - unmatched patterns return null and the UI shows a default Loader2 icon with muted colors.
Suggested fix:
Consider using includes() with word boundaries for more flexible matching: `new RegExp(`\\b${pattern}\\b`, 'i').test(message)`. Alternatively, add a code comment documenting that messages must start with the tool type pattern.
🔵 [d2d915299d47] [LOW] Helper function returns null requiring defensive coding at call sites
📁 apps/frontend/src/renderer/components/TaskCard.tsx:62
getToolStyleFromMessage() returns null for unmatched patterns, requiring the calling code (line 169-170) to use nullish coalescing operators to provide defaults. While this works correctly, returning a default object directly from the helper would simplify call sites and improve type safety.
Suggested fix:
Refactor to return a default: `return match ? { icon: match.icon, color: match.color } : { icon: Loader2, color: 'text-muted-foreground bg-muted/50' };` This eliminates null checks at call sites.
🔵 [6b5e0a440e0e] [LOW] TOOL_STYLES and helper could be extracted for reuse in other components
📁 apps/frontend/src/renderer/components/TaskCard.tsx:47
The execution progress message is also displayed in TaskSelector.tsx and TaskProgress.tsx. If those components need similar icon/color treatment in the future, TOOL_STYLES and getToolStyleFromMessage would need to be duplicated. Proactively extracting to a shared utility would prevent future duplication.
Suggested fix:
Consider extracting TOOL_STYLES and getToolStyleFromMessage to a shared file like `apps/frontend/src/renderer/lib/execution-tools.ts` for potential reuse.
🔵 [3210685dd915] [LOW] First pattern match wins - document this design decision
📁 apps/frontend/src/renderer/components/TaskCard.tsx:64
The find() method returns the first matching pattern. If a message contains multiple tools (e.g., 'Searching files and editing config.ts'), only the first action's icon is shown. This is likely correct behavior for sequential agent execution but could benefit from a clarifying comment.
Suggested fix:
Add a comment explaining the design decision: `// Returns first match - agent executes tools sequentially, so first action is most relevant`
This review was generated by Auto Claude.
|
|
arcker
force-pushed
the
feat/kanban-live-status-791
branch
from
68c6c4a to
4fd2a0b
Compare
Display the current agent action (Reading, Editing, Running, etc.) directly on the task card with tool-specific color coding. - Add helper function to detect tool type from message - Add live status UI below progress indicator - Update memo comparator to include message changes - Color coding matches existing log colors: - Reading: blue - Searching files: amber - Searching code: green - Editing: purple - Writing: cyan - Running/Executing: orange Fixes AndyMik90#791 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Replace if-else chain with data-driven TOOL_STYLES array - Replace IIFE with useMemo for liveActionStatus (better readability/perf) - Remove non-null assertions by using nullish coalescing (??) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <[email protected]>
- Show live tool status in ALL phases, not just coding/qa - Remove truncation to display full file paths and commands - Hide status label on terminal phases (complete/failed) - Fix tool input extraction in QA fixer/reviewer (chr(39) bug) - Use useMemo for liveActionStatus computation Co-Authored-By: Claude Opus 4.5 <[email protected]>
arcker
force-pushed
the
feat/kanban-live-status-791
branch
from
4fd2a0b to
ff9a327
Compare
Codecov Report❌ Patch coverage is 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Actionable comments posted: 5
🤖 Fix all issues with AI agents
In `@apps/backend/agents/session.py`:
- Around line 395-396: There is trailing whitespace in the agents.session module
causing the ruff format check to fail; remove the trailing whitespace (or run
the formatter) so the file conforms to ruff formatting rules—e.g., open the
agents.session (session.py) module, delete the extra whitespace at the end of
the file (the blank/trailing characters around the end of the module) and run
`ruff format agents/session.py` (or `ruff format`) to ensure the pipeline
passes.
In `@apps/backend/qa/fixer.py`:
- Around line 164-166: Remove the orphaned debug comment "# DEBUG: Print what
keys are in inp" in apps/backend/qa/fixer.py; if you actually need the runtime
info, replace the comment with a proper debug statement that logs the keys of
the variable inp (e.g., using the module logger or a debug print) instead of
leaving the stray comment.
- Around line 167-197: The fixer module currently truncates "file_path" before
assigning tool_input_display, causing inconsistency with reviewer.py and
session.py; update the handling in the block that inspects inp (the "file_path"
branch) to stop truncating and instead set tool_input_display = inp["file_path"]
(i.e., show the full path verbatim) so the behavior matches the other agent
modules; keep the existing truncation rules for other keys (e.g., "command",
"pattern", "url", "query") unchanged.
In `@apps/backend/qa/reviewer.py`:
- Around line 228-238: Run ruff format on apps/backend/qa/reviewer.py to fix
style issues and then correct the invalid quoting in the tool_input_display
branch: replace the problematic f"/{inp["pattern"]}/" with f"/{inp['pattern']}/"
(or escape the inner quotes) so the f-string is valid, ensure consistent quoting
across the other branches that reference inp keys, and re-run ruff format to
satisfy the ruff format check.
In `@apps/backend/task_logger/logger.py`:
- Around line 440-446: The assignment to short_input is redundant; in the print
block guarded by print_to_console use display_input directly instead of creating
short_input: remove the line that sets short_input = display_input and change
the conditional that prints the input to print(f"\n[Tool: {tool_name}]
{display_input}", flush=True) while leaving the surrounding logic
(print_to_console, display_input presence check, and tool_name) unchanged.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (6)
apps/backend/agents/session.pyapps/backend/qa/fixer.pyapps/backend/qa/reviewer.pyapps/backend/task_logger/logger.pyapps/frontend/src/main/agent/agent-events.tsapps/frontend/src/main/ipc-handlers/agent-events-handlers.ts
🧰 Additional context used
📓 Path-based instructions (3)
apps/frontend/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/frontend/src/**/*.{tsx,ts}: Use i18n translation keys for all user-facing text in the frontend. All labels, buttons, messages must use translation keys from react-i18next with namespace:section.key format (e.g., 'navigation:items.githubPRs').
Never use hardcoded strings for UI text in JSX/TSX files. Always use translation keys via useTranslation() hook.
Files:
apps/frontend/src/main/ipc-handlers/agent-events-handlers.tsapps/frontend/src/main/agent/agent-events.ts
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/main/ipc-handlers/agent-events-handlers.tsapps/frontend/src/main/agent/agent-events.ts
apps/backend/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
apps/backend/**/*.py: Always use the Claude Agent SDK (claude-agent-sdk package) for AI interactions, never use the Anthropic API directly. Use create_client() from core.client module for client setup.
Use Graphiti memory system (mandatory) for cross-session context and knowledge graph management. Access via get_graphiti_memory() from integrations.graphiti.memory module.
Files:
apps/backend/qa/fixer.pyapps/backend/task_logger/logger.pyapps/backend/qa/reviewer.pyapps/backend/agents/session.py
⚙️ CodeRabbit configuration file
apps/backend/**/*.py: Focus on Python best practices, type hints, and async patterns.
Check for proper error handling and security considerations.
Verify compatibility with Python 3.12+.
Files:
apps/backend/qa/fixer.pyapps/backend/task_logger/logger.pyapps/backend/qa/reviewer.pyapps/backend/agents/session.py
🧠 Learnings (1)
📓 Common learnings
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:48.743Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings that should be localized) can be deferred to future i18n cleanup passes rather than requiring immediate fixes in PRs that don't introduce new i18n violations.
🧬 Code graph analysis (1)
apps/frontend/src/main/agent/agent-events.ts (1)
apps/backend/task_logger/logger.py (1)
log(227-272)
🪛 GitHub Actions: Lint
apps/backend/qa/fixer.py
[error] 1-1: ruff format check failed. 3 files would be reformatted, 455 files already formatted. Run 'ruff format' to fix code style issues.
apps/backend/qa/reviewer.py
[error] 1-1: ruff format check failed. 3 files would be reformatted, 455 files already formatted. Run 'ruff format' to fix code style issues.
apps/backend/agents/session.py
[error] 1-1: ruff format check failed. 3 files would be reformatted, 455 files already formatted. Run 'ruff format' to fix code style issues.
🔇 Additional comments (4)
apps/frontend/src/main/ipc-handlers/agent-events-handlers.ts (1)
285-294: LGTM!The
phaseToStatusmapping is well-structured and correctly translates execution phases to task statuses. The mapping covers all expected phases and handles theidlephase by returningnullto prevent unnecessary status updates.apps/backend/agents/session.py (1)
398-410: LGTM - Tool input display logic is correct.The tool input extraction correctly handles various input types with appropriate formatting:
file_path,command,path,url→ displayed verbatimpattern→ wrapped in slashes (/pattern/)query→ wrapped in quotes ("query")This aligns with the PR objective of showing live action status on Kanban task cards. Note that the task logger already handles truncation (lines 410-412 in logger.py), so displaying verbatim here is appropriate as the downstream truncation will apply.
apps/frontend/src/main/agent/agent-events.ts (2)
129-139: Hardcoded user-facing strings follow existing file patterns.The new verb mappings (e.g., "Reading", "Editing", "Searching files") are consistent with the existing hardcoded messages throughout this file (lines 48-117). Based on learnings, pre-existing i18n issues can be deferred to a future i18n cleanup pass, so this is acceptable for now.
120-146: Live tool action detection logic is well-structured.The regex correctly matches the expected tool patterns, the verb mapping provides meaningful user-facing messages, and the fallback handles unknown tools gracefully. Preserving
currentPhasewhile updating only the message is the right approach for live status updates.Two minor observations:
Unnecessary blank lines (142-143): These appear to be accidental whitespace.
Consistency with truncation: Line 117 truncates error messages to 200 characters. Consider applying similar truncation to
detailshere for consistency, though the UI reportedly handles long messages with tooltips.🧹 Remove unnecessary blank lines
const verb = toolVerbs[toolName] || ('Using ' + toolName); - - - + const message = details ? (verb + ' ' + details) : (verb + '...');Likely an incorrect or invalid review comment.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| if inp: | ||
| if "file_path" in inp: | ||
| fp = inp["file_path"] | ||
| if len(fp) > 50: | ||
| fp = "..." + fp[-47:] | ||
| if len(fp) > 80: | ||
| fp = "..." + fp[-77:] | ||
| tool_input_display = fp | ||
| elif "command" in inp: | ||
| cmd = inp["command"] | ||
| if len(cmd) > 50: | ||
| cmd = cmd[:47] + "..." | ||
| if len(cmd) > 80: | ||
| cmd = cmd[:77] + "..." | ||
| tool_input_display = cmd | ||
| elif "pattern" in inp: | ||
| pat = inp["pattern"] | ||
| if len(pat) > 60: | ||
| pat = pat[:57] + "..." | ||
| tool_input_display = f"/{pat}/" | ||
| elif "path" in inp: | ||
| p = inp["path"] | ||
| if len(p) > 80: | ||
| p = "..." + p[-77:] | ||
| tool_input_display = p | ||
| elif "url" in inp: | ||
| url = inp["url"] | ||
| if len(url) > 80: | ||
| url = url[:77] + "..." | ||
| tool_input_display = url | ||
| elif "query" in inp: | ||
| q = inp["query"] | ||
| if len(q) > 60: | ||
| q = q[:57] + "..." | ||
| tool_input_display = f'"{q}"' |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🏁 Script executed:
# First, let's check if these files exist and examine fixer.py around the mentioned lines
echo "=== Checking file_path handling in fixer.py (around line 170) ==="
sed -n '165,180p' apps/backend/qa/fixer.py | cat -n
echo -e "\n=== Checking file_path handling in reviewer.py (around line 228) ==="
sed -n '220,235p' apps/backend/qa/reviewer.py | cat -n
echo -e "\n=== Checking file_path handling in session.py (around line 400) ==="
sed -n '395,410p' apps/backend/agents/session.py | cat -nRepository: AndyMik90/Auto-Claude
Length of output: 3025
🏁 Script executed:
# Search more broadly for all file_path handling with context
echo "=== All file_path assignments in fixer.py ==="
rg -n "file_path" apps/backend/qa/fixer.py -B 2 -A 2
echo -e "\n=== All file_path assignments in reviewer.py ==="
rg -n "file_path" apps/backend/qa/reviewer.py -B 2 -A 2
echo -e "\n=== All file_path assignments in session.py ==="
rg -n "file_path" apps/backend/agents/session.py -B 2 -A 2Repository: AndyMik90/Auto-Claude
Length of output: 1195
Align file_path truncation behavior across agent modules.
fixer.py truncates file_path to 80 characters when displaying tool inputs, while reviewer.py and session.py show file_path verbatim. This inconsistency means the same tool input displays differently depending on which agent is running, creating a confusing user experience. Standardize the truncation approach across all three modules.
🤖 Prompt for AI Agents
In `@apps/backend/qa/fixer.py` around lines 167 - 197, The fixer module currently
truncates "file_path" before assigning tool_input_display, causing inconsistency
with reviewer.py and session.py; update the handling in the block that inspects
inp (the "file_path" branch) to stop truncating and instead set
tool_input_display = inp["file_path"] (i.e., show the full path verbatim) so the
behavior matches the other agent modules; keep the existing truncation rules for
other keys (e.g., "command", "pattern", "url", "query") unchanged.
Co-Authored-By: Claude Opus 4.5 <[email protected]>
![sentry[bot]](https://avatars.githubusercontent.com/u/1396951?s=60&v=4){kind=small}
| const TOOL_STYLES: Array<{ | ||
| patterns: string[]; | ||
| icon: typeof FileText; | ||
| color: string; | ||
| }> = [ | ||
| { patterns: ['reading'], icon: FileText, color: 'text-blue-500 bg-blue-500/10' }, | ||
| { patterns: ['searching files', 'globbing'], icon: FolderSearch, color: 'text-amber-500 bg-amber-500/10' }, | ||
| { patterns: ['searching code', 'grep'], icon: Search, color: 'text-green-500 bg-green-500/10' }, | ||
| { patterns: ['editing'], icon: Pencil, color: 'text-purple-500 bg-purple-500/10' }, | ||
| { patterns: ['writing'], icon: FileCode, color: 'text-cyan-500 bg-cyan-500/10' }, | ||
| { patterns: ['running', 'executing'], icon: Terminal, color: 'text-orange-500 bg-orange-500/10' }, |
This comment was marked as outdated.
This comment was marked as outdated.
Sorry, something went wrong.
Addresses Sentry bot feedback - patterns now match messages from agent-events.ts: - 'searching' for Grep - 'searching web' for WebSearch - 'fetching' for WebFetch Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@apps/frontend/src/renderer/components/TaskCard.tsx`:
- Around line 532-540: The live-action message currently uses "break-all" which
displays full text; per the PR objective change the span inside the
liveActionStatus block to truncate the message and show the full text in a
tooltip: replace the span's "break-all leading-tight" with truncation classes
(e.g., "truncate" and a max-width or container-constrained class) and wrap or
attach a Tooltip component (or native title attribute) that renders
liveActionStatus.message for the full text; locate the render block where
isRunning && !isStuck && liveActionStatus and update the span and tooltip
handling accordingly so long messages stay one-line and the tooltip shows the
full content.
- Around line 90-97: The unguarded console.log inside the TaskCard memo
comparison (the block comparing prevTask.executionProgress?.message and
nextTask.executionProgress?.message) will spam production logs; wrap that
logging in the same DEBUG guard used for the later guarded logs (the guarded
block around lines 118-128) or remove it entirely—e.g., only call console.log
(or switch to a debug logger) when the existing debug flag/condition is true so
the message check remains but logging is suppressed in production.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (1)
apps/frontend/src/renderer/components/TaskCard.tsx
🧰 Additional context used
📓 Path-based instructions (2)
apps/frontend/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/frontend/src/**/*.{tsx,ts}: Use i18n translation keys for all user-facing text in the frontend. All labels, buttons, messages must use translation keys from react-i18next with namespace:section.key format (e.g., 'navigation:items.githubPRs').
Never use hardcoded strings for UI text in JSX/TSX files. Always use translation keys via useTranslation() hook.
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧠 Learnings (3)
📚 Learning: 2026-01-12T13:47:32.539Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-12T13:47:32.539Z
Learning: Applies to apps/frontend/src/**/*.{tsx,ts} : Never use hardcoded strings for UI text in JSX/TSX files. Always use translation keys via useTranslation() hook.
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
📚 Learning: 2026-01-12T13:47:32.539Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-12T13:47:32.539Z
Learning: Applies to apps/frontend/src/**/*.{tsx,ts} : Use i18n translation keys for all user-facing text in the frontend. All labels, buttons, messages must use translation keys from react-i18next with namespace:section.key format (e.g., 'navigation:items.githubPRs').
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
📚 Learning: 2026-01-04T23:59:45.209Z
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings) can be deferred for future i18n cleanup passes. Do not fix such issues in PRs that do not introduce new i18n violations, especially in frontend TSX components (e.g., apps/frontend/**/*.tsx). If a PR adds new i18n violations, address them in that PR.
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧬 Code graph analysis (1)
apps/frontend/src/renderer/components/TaskCard.tsx (1)
.design-system/src/lib/utils.ts (1)
cn(4-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Seer Code Review
- GitHub Check: CodeQL (python)
- GitHub Check: CodeQL (javascript-typescript)
🔇 Additional comments (4)
apps/frontend/src/renderer/components/TaskCard.tsx (4)
47-71: LGTM! Well-structured data-driven tool style detection.The data-driven approach with
TOOL_STYLESarray and the comment about pattern ordering addresses prior review feedback and the Sentry-reported pattern matching issues. The more specific patterns ("searching files", "searching web") correctly precede the generic "searching" pattern.
107-107: Good addition to memo comparator.Including
executionProgress.messageensures the card re-renders when the live status message changes, which is essential for the live action status feature.
142-142: Appropriate expansion ofisRunningto includeai_reviewstatus.This ensures live action status displays during the AI review phase, which is when the agent is actively working.
175-188: Well-structured memoization for live action status.Good refactor from the previous IIFE pattern to
useMemo. The terminal phase filtering (complete/failed) and fallback handling are correct.
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| {/* Live action status - shows current tool activity */} | ||
| {isRunning && !isStuck && liveActionStatus && ( | ||
| <div className={cn("mt-2 flex items-start gap-1.5 rounded-md px-2 py-1.5 text-xs", liveActionStatus.colorClass)}> | ||
| <liveActionStatus.icon className="h-3.5 w-3.5 shrink-0 animate-pulse mt-0.5" /> | ||
| <span className="break-all leading-tight"> | ||
| {liveActionStatus.message} | ||
| </span> | ||
| </div> | ||
| )} |
There was a problem hiding this comment.
Minor: Implementation differs from PR objective regarding truncation/tooltip.
The PR objective specifies "A truncated action message with a tooltip for full text", but this implementation uses break-all to show the full message. This is a valid UX choice but could make cards tall with long messages.
If truncation with tooltip is preferred per the original requirements:
💡 Optional: Restore truncation with tooltip
- <div className={cn("mt-2 flex items-start gap-1.5 rounded-md px-2 py-1.5 text-xs", liveActionStatus.colorClass)}>
- <liveActionStatus.icon className="h-3.5 w-3.5 shrink-0 animate-pulse mt-0.5" />
- <span className="break-all leading-tight">
+ <div className={cn("mt-2 flex items-center gap-1.5 rounded-md px-2 py-1 text-[10px]", liveActionStatus.colorClass)}>
+ <liveActionStatus.icon className="h-3 w-3 shrink-0 animate-pulse" />
+ <span className="truncate" title={liveActionStatus.message}>
{liveActionStatus.message}
</span>
</div>🤖 Prompt for AI Agents
In `@apps/frontend/src/renderer/components/TaskCard.tsx` around lines 532 - 540,
The live-action message currently uses "break-all" which displays full text; per
the PR objective change the span inside the liveActionStatus block to truncate
the message and show the full text in a tooltip: replace the span's "break-all
leading-tight" with truncation classes (e.g., "truncate" and a max-width or
container-constrained class) and wrap or attach a Tooltip component (or native
title attribute) that renders liveActionStatus.message for the full text; locate
the render block where isRunning && !isStuck && liveActionStatus and update the
span and tooltip handling accordingly so long messages stay one-line and the
tooltip shows the full content.
- Remove unguarded debug console.log in TaskCard memo (spam fix) - Add line-clamp-3 with tooltip for live status (max 3 lines) - Remove orphaned DEBUG comment in fixer.py - Remove redundant short_input variable in logger.py Co-Authored-By: Claude Opus 4.5 <[email protected]>
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Fix all issues with AI agents
In `@apps/frontend/src/renderer/components/TaskCard.tsx`:
- Around line 47-71: TOOL_STYLES currently holds only patterns/icon/color and
the UI prints liveActionStatus.message directly; add i18n keys and use them
instead: extend TOOL_STYLES entries with a labelKey (e.g. "toolActions.reading",
"toolActions.searchingFiles", etc.), add corresponding entries under toolActions
in apps/frontend/src/shared/i18n/locales/en/tasks.json, update
getToolStyleFromMessage to return the matched style.labelKey along with
icon/color, and in the component use the existing useTranslation('tasks') hook
to render t(matched.labelKey) instead of printing liveActionStatus.message.
♻️ Duplicate comments (1)
apps/backend/qa/fixer.py (1)
165-195: LGTM — new tool input key handlers are correctly implemented.The truncation logic is sound:
- Paths and file paths show the trailing portion (more meaningful for nested paths)
- Commands and URLs show the leading portion (captures the important prefix)
- Pattern uses
/…/format consistent with regex conventions- Query uses quotes for visual distinction
The arithmetic is correct (80−3=77, 60−3=57 for the ellipsis).
Optional: The repeated truncation pattern could be extracted into a small helper (e.g.,
truncate_start(s, max_len)/truncate_end(s, max_len)), but current form is acceptable for clarity.♻️ Optional helper extraction
def _truncate_end(s: str, max_len: int = 80) -> str: """Truncate string, keeping end portion.""" if len(s) > max_len: return "..." + s[-(max_len - 3):] return s def _truncate_start(s: str, max_len: int = 80) -> str: """Truncate string, keeping start portion.""" if len(s) > max_len: return s[:(max_len - 3)] + "..." return s
Note: The inconsistency with
reviewer.pyandsession.py(which showfile_pathverbatim) was flagged in a prior review and remains open. Consider aligning truncation behavior across all agent modules in a follow-up.
📜 Review details
Configuration used: Path: .coderabbit.yaml
Review profile: ASSERTIVE
Plan: Pro
📒 Files selected for processing (3)
apps/backend/qa/fixer.pyapps/backend/task_logger/logger.pyapps/frontend/src/renderer/components/TaskCard.tsx
🧰 Additional context used
📓 Path-based instructions (3)
apps/backend/**/*.py
📄 CodeRabbit inference engine (CLAUDE.md)
apps/backend/**/*.py: Always use the Claude Agent SDK (claude-agent-sdk package) for AI interactions, never use the Anthropic API directly. Use create_client() from core.client module for client setup.
Use Graphiti memory system (mandatory) for cross-session context and knowledge graph management. Access via get_graphiti_memory() from integrations.graphiti.memory module.
Files:
apps/backend/task_logger/logger.pyapps/backend/qa/fixer.py
⚙️ CodeRabbit configuration file
apps/backend/**/*.py: Focus on Python best practices, type hints, and async patterns.
Check for proper error handling and security considerations.
Verify compatibility with Python 3.12+.
Files:
apps/backend/task_logger/logger.pyapps/backend/qa/fixer.py
apps/frontend/src/**/*.{tsx,ts}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/frontend/src/**/*.{tsx,ts}: Use i18n translation keys for all user-facing text in the frontend. All labels, buttons, messages must use translation keys from react-i18next with namespace:section.key format (e.g., 'navigation:items.githubPRs').
Never use hardcoded strings for UI text in JSX/TSX files. Always use translation keys via useTranslation() hook.
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
apps/frontend/**/*.{ts,tsx}
⚙️ CodeRabbit configuration file
apps/frontend/**/*.{ts,tsx}: Review React patterns and TypeScript type safety.
Check for proper state management and component composition.
Files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧠 Learnings (4)
📓 Common learnings
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:48.743Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings that should be localized) can be deferred to future i18n cleanup passes rather than requiring immediate fixes in PRs that don't introduce new i18n violations.
📚 Learning: 2026-01-12T13:47:32.539Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-12T13:47:32.539Z
Learning: Applies to apps/frontend/src/**/*.{tsx,ts} : Never use hardcoded strings for UI text in JSX/TSX files. Always use translation keys via useTranslation() hook.
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
📚 Learning: 2026-01-12T13:47:32.539Z
Learnt from: CR
Repo: AndyMik90/Auto-Claude PR: 0
File: CLAUDE.md:0-0
Timestamp: 2026-01-12T13:47:32.539Z
Learning: Applies to apps/frontend/src/**/*.{tsx,ts} : Use i18n translation keys for all user-facing text in the frontend. All labels, buttons, messages must use translation keys from react-i18next with namespace:section.key format (e.g., 'navigation:items.githubPRs').
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
📚 Learning: 2026-01-04T23:59:45.209Z
Learnt from: MikeeBuilds
Repo: AndyMik90/Auto-Claude PR: 661
File: apps/frontend/src/renderer/components/onboarding/OllamaModelSelector.tsx:176-189
Timestamp: 2026-01-04T23:59:45.209Z
Learning: In the AndyMik90/Auto-Claude repository, pre-existing i18n issues (hardcoded user-facing strings) can be deferred for future i18n cleanup passes. Do not fix such issues in PRs that do not introduce new i18n violations, especially in frontend TSX components (e.g., apps/frontend/**/*.tsx). If a PR adds new i18n violations, address them in that PR.
Applied to files:
apps/frontend/src/renderer/components/TaskCard.tsx
🧬 Code graph analysis (1)
apps/frontend/src/renderer/components/TaskCard.tsx (1)
.design-system/src/lib/utils.ts (1)
cn(4-6)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Seer Code Review
- GitHub Check: CodeQL (javascript-typescript)
- GitHub Check: CodeQL (python)
🔇 Additional comments (6)
apps/backend/task_logger/logger.py (1)
440-445: LGTM!The live status display implementation is clean and correctly uses
display_inputdirectly, addressing the previous review feedback about the redundantshort_inputvariable. The conditional logic appropriately handles both cases (with and without tool input), and the input is already truncated upstream (lines 410-412) to prevent excessively long console output.apps/frontend/src/renderer/components/TaskCard.tsx (5)
3-3: LGTM!The import additions are appropriate and all icons are used in the
TOOL_STYLESmapping.
90-107: LGTM!Adding
executionProgress?.messageto the comparator is necessary to trigger re-renders when the execution message changes, enabling the live status feature.
134-134: LGTM!Including
'ai_review'in the running state is correct, as the agent is actively processing during that phase.
167-179: LGTM!The memoization is correct with appropriate dependencies. The terminal phase check (
complete/failed) prevents stale status display, and the fallback toLoader2with muted styling handles unrecognized message patterns gracefully.
524-535: Implementation addresses prior feedback with line-clamp-3 and tooltip.The
line-clamp-3approach withtitleattribute for full text on hover is a reasonable UX choice that balances visibility with card height management. This aligns with the commit message noting "added line-clamp-3 with tooltip for live status."
✏️ Tip: You can disable this entire section by setting review_details to false in your review settings.
| // Data-driven tool styles for live action status | ||
| // Order matters: more specific patterns must come before general ones (first match wins) | ||
| const TOOL_STYLES: Array<{ | ||
| patterns: string[]; | ||
| icon: typeof FileText; | ||
| color: string; | ||
| }> = [ | ||
| { patterns: ['reading'], icon: FileText, color: 'text-blue-500 bg-blue-500/10' }, | ||
| { patterns: ['searching files', 'globbing'], icon: FolderSearch, color: 'text-amber-500 bg-amber-500/10' }, | ||
| { patterns: ['searching web'], icon: Globe, color: 'text-indigo-500 bg-indigo-500/10' }, | ||
| { patterns: ['searching'], icon: Search, color: 'text-green-500 bg-green-500/10' }, | ||
| { patterns: ['fetching'], icon: Globe, color: 'text-indigo-500 bg-indigo-500/10' }, | ||
| { patterns: ['editing'], icon: Pencil, color: 'text-purple-500 bg-purple-500/10' }, | ||
| { patterns: ['writing'], icon: FileCode, color: 'text-cyan-500 bg-cyan-500/10' }, | ||
| { patterns: ['running', 'executing'], icon: Terminal, color: 'text-orange-500 bg-orange-500/10' }, | ||
| ]; | ||
|
|
||
| // Helper to detect tool type from execution message and return styling | ||
| function getToolStyleFromMessage(message: string): { icon: typeof FileText; color: string } | null { | ||
| const lowerMessage = message.toLowerCase(); | ||
| const match = TOOL_STYLES.find(style => | ||
| style.patterns.some(pattern => lowerMessage.startsWith(pattern)) | ||
| ); | ||
| return match ? { icon: match.icon, color: match.color } : null; | ||
| } |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
find . -type f -name "*.ts" -o -name "*.js" | grep -E "(agent|event|progress)" | head -20Repository: AndyMik90/Auto-Claude
Length of output: 1107
🏁 Script executed:
rg -l "executionProgress\|execution.*message" --type=ts --type=jsRepository: AndyMik90/Auto-Claude
Length of output: 47
🏁 Script executed:
rg -n "message.*=.*['\"]" apps/backend --type=ts -A 2 -B 2 | head -100Repository: AndyMik90/Auto-Claude
Length of output: 47
🏁 Script executed:
cat apps/frontend/src/main/agent/agent-events.tsRepository: AndyMik90/Auto-Claude
Length of output: 8839
🏁 Script executed:
cat apps/frontend/src/main/agent/parsers/execution-phase-parser.tsRepository: AndyMik90/Auto-Claude
Length of output: 7106
🏁 Script executed:
cat apps/frontend/src/renderer/components/TaskCard.tsxRepository: AndyMik90/Auto-Claude
Length of output: 25631
🏁 Script executed:
grep -n "patterns\|TOOL_STYLES\|getToolStyle" apps/frontend/src/renderer/components/TaskCard.tsx | head -30Repository: AndyMik90/Auto-Claude
Length of output: 1245
🏁 Script executed:
rg -n "liveActionStatus\|execution.*message" apps/frontend/src/renderer/components/TaskCard.tsx -A 3 -B 3Repository: AndyMik90/Auto-Claude
Length of output: 47
🏁 Script executed:
# Check if messages are being translated elsewhere
rg -n "execution|progress.*message" apps/frontend/src --type=tsx --type=ts | grep -i "translat\|i18n" | head -20Repository: AndyMik90/Auto-Claude
Length of output: 92
🏁 Script executed:
# Verify the exact message format generated by tools
rg -n "toolVerbs\|verb.*=" apps/frontend/src/main/agent/agent-events.ts -A 15Repository: AndyMik90/Auto-Claude
Length of output: 47
🏁 Script executed:
# Check the liveActionStatus usage in TaskCard.tsx to see how messages are displayed
sed -n '170,180p' apps/frontend/src/renderer/components/TaskCard.tsxRepository: AndyMik90/Auto-Claude
Length of output: 537
🏁 Script executed:
# Look for the actual message display in JSX
rg -n "liveActionStatus\.message" apps/frontend/src/renderer/components/TaskCard.tsx -B 2 -A 2Repository: AndyMik90/Auto-Claude
Length of output: 530
🏁 Script executed:
# Check if there's any message translation happening on backend
rg -n "message.*=" apps/frontend/src/main/agent/agent-events.ts | head -20Repository: AndyMik90/Auto-Claude
Length of output: 143
🏁 Script executed:
# Check if there's a translation for execution messages
rg -n "Reading|Searching|Editing|Writing|Fetching|Running" apps/frontend/src/locales -r json | head -20Repository: AndyMik90/Auto-Claude
Length of output: 130
🏁 Script executed:
# Check constants file for any i18n pattern
rg -n "EXECUTION\|PHASE" apps/frontend/src/shared/constants -A 5 | head -40Repository: AndyMik90/Auto-Claude
Length of output: 47
🏁 Script executed:
# Find locales/translations directory
find apps/frontend -type d -name "locales" -o -name "translations" -o -name "i18n"Repository: AndyMik90/Auto-Claude
Length of output: 132
🏁 Script executed:
# Check where translation files are stored
fd -t d "locales|translations|i18n" apps/Repository: AndyMik90/Auto-Claude
Length of output: 134
🏁 Script executed:
# Look for .json translation files
fd -t f "\.json$" apps/frontend | grep -E "(en|fr|locale|translation|i18n)" | head -20Repository: AndyMik90/Auto-Claude
Length of output: 1076
🏁 Script executed:
# Check tasks.json for tool-related translations
cat apps/frontend/src/shared/i18n/locales/en/tasks.jsonRepository: AndyMik90/Auto-Claude
Length of output: 9136
🏁 Script executed:
# Also check common.json
cat apps/frontend/src/shared/i18n/locales/en/common.jsonRepository: AndyMik90/Auto-Claude
Length of output: 16322
🏁 Script executed:
# Confirm the exact display location and context
sed -n '520,540p' apps/frontend/src/renderer/components/TaskCard.tsxRepository: AndyMik90/Auto-Claude
Length of output: 885
Add i18n translations for tool action messages; pattern matching is correct but user-facing strings lack translation keys.
The pattern matching logic and order are correct—backend messages properly match TOOL_STYLES patterns via case-insensitive startsWith() checks with appropriate specificity ordering.
However, the code violates the coding guideline requiring all user-facing text in frontend components use i18n translation keys. Lines 532 displays liveActionStatus.message (e.g., "Reading...", "Searching files...") as hardcoded strings without translation. These must use the useTranslation('tasks') hook already imported on line 114.
Add translation keys for tool actions to apps/frontend/src/shared/i18n/locales/en/tasks.json under a new toolActions namespace, then wrap the message display with the translation call.
🤖 Prompt for AI Agents
In `@apps/frontend/src/renderer/components/TaskCard.tsx` around lines 47 - 71,
TOOL_STYLES currently holds only patterns/icon/color and the UI prints
liveActionStatus.message directly; add i18n keys and use them instead: extend
TOOL_STYLES entries with a labelKey (e.g. "toolActions.reading",
"toolActions.searchingFiles", etc.), add corresponding entries under toolActions
in apps/frontend/src/shared/i18n/locales/en/tasks.json, update
getToolStyleFromMessage to return the matched style.labelKey along with
icon/color, and in the component use the existing useTranslation('tasks') hook
to render t(matched.labelKey) instead of printing liveActionStatus.message.
3 participants
Summary
Display the current agent action directly on Kanban task cards, eliminating the need to open logs to see what's happening.
Changes
getToolStyleFromMessage()helper to detect tool type from execution messageVisual Preview
Test plan
Fixes #791
🤖 Generated with Claude Code
Summary by CodeRabbit
New Features
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.