feat: enhance conversation components with task handling and UI improvements

- Added a new ToolInputOneLine component for displaying input parameters in a concise format. - Updated AssistantConversationContent to include an Eye icon for viewing task details and improved layout for better readability. - Enhanced ConversationItem to check for related task calls, preventing unnecessary rendering. - Modified SidechainConversationModal to display message count and improved task view button styling. - Updated i18n messages for new features and improved translations.
2025-12-26 17:54:23 +01:00 · 2025-10-20 04:45:56 +09:00
parent 0047b6b2a2
commit 93dc63a7f3
11 changed files with 432 additions and 222 deletions
--- a/src/app/projects/[projectId]/components/newChat/NewChat.tsx
+++ b/src/app/projects/[projectId]/components/newChat/NewChat.tsx
@@ -44,7 +44,7 @@ export const NewChat: FC<{
      placeholder={getPlaceholder()}
      buttonText={<Trans id="chat.button.start" message="Start Chat" />}
      minHeight="min-h-[200px]"
-      containerClassName="p-6"
+      containerClassName="px-0 py-6"
      buttonSize="lg"
    />
  );
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { Trans } from "@lingui/react";
-import { ChevronDown, Lightbulb, Wrench } from "lucide-react";
+import { ChevronDown, Eye, Lightbulb, Wrench } from "lucide-react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import type { FC } from "react";
@@ -11,14 +11,7 @@ import {
  oneLight,
 } from "react-syntax-highlighter/dist/esm/styles/prism";
 import z from "zod";
-import { Badge } from "@/components/ui/badge";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
+import { Card, CardHeader, CardTitle } from "@/components/ui/card";
 import {
  Collapsible,
  CollapsibleContent,
@@ -30,8 +23,9 @@ import { Button } from "../../../../../../../components/ui/button";
 import type { SidechainConversation } from "../../../../../../../lib/conversation-schema";
 import { MarkdownContent } from "../../../../../../components/MarkdownContent";
 import { SidechainConversationModal } from "../conversationModal/SidechainConversationModal";
+import { ToolInputOneLine } from "./ToolInputOneLine";

-const taskToolInputSchema = z.object({
+export const taskToolInputSchema = z.object({
  prompt: z.string(),
 });

@@ -74,11 +68,11 @@ export const AssistantConversationContent: FC<{
            </CardHeader>
          </CollapsibleTrigger>
          <CollapsibleContent>
-            <CardContent className="py-0 px-4">
+            <div className="py-2 px-4">
              <div className="text-sm text-muted-foreground whitespace-pre-wrap font-mono">
                {content.thinking}
              </div>
-            </CardContent>
+            </div>
          </CollapsibleContent>
        </Collapsible>
      </Card>
@@ -117,8 +111,16 @@ export const AssistantConversationContent: FC<{
          }))}
          getToolResult={getToolResult}
          trigger={
-            <Button variant="outline" size="sm">
-              View Log
+            <Button
+              variant="ghost"
+              size="sm"
+              className="h-auto py-1.5 px-3 text-xs hover:bg-blue-100 dark:hover:bg-blue-900/30 rounded-none flex items-center gap-1"
+            >
+              <Eye className="h-3 w-3" />
+              <Trans
+                id="assistant.tool.view_task_details"
+                message="View Task"
+              />
            </Button>
          }
        />
@@ -126,95 +128,100 @@ export const AssistantConversationContent: FC<{
    })();

    return (
-      <Card className="border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20 gap-2 py-3 mb-2">
-        <CardHeader className="py-0 px-4">
-          <div className="flex items-center gap-2">
-            <Wrench className="h-4 w-4 text-blue-600 dark:text-blue-400" />
-            <CardTitle className="text-sm font-medium">
-              <Trans id="assistant.tool_use" message="Tool Use" />
-            </CardTitle>
-            <Badge
-              variant="outline"
-              className="border-blue-300 text-blue-700 dark:border-blue-700 dark:text-blue-300"
-            >
-              {content.name}
-            </Badge>
-          </div>
-          <CardDescription className="text-xs">
-            Tool execution with ID: {content.id}
-          </CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-2 py-0 px-4">
-          <Collapsible>
+      <Card className="border-blue-200 bg-blue-50/50 dark:border-blue-800 dark:bg-blue-950/20 mb-2 p-0 overflow-hidden">
+        <Collapsible>
+          <div className="flex items-center min-w-0">
            <CollapsibleTrigger asChild>
-              <div className="flex items-center justify-between cursor-pointer hover:bg-muted/50 rounded p-2 -mx-2 transition-all duration-200 group">
-                <h4 className="text-xs font-medium text-muted-foreground group-hover:text-foreground">
+              <div className="flex-1 min-w-0 cursor-pointer hover:bg-blue-100/50 dark:hover:bg-blue-900/20 transition-all duration-200 px-3 py-1.5 group">
+                <div className="flex items-center gap-2 min-w-0">
+                  <Wrench className="h-4 w-4 text-blue-600 dark:text-blue-400 flex-shrink-0" />
+                  <div className="w-full min-w-0 text-sm font-medium group-hover:text-foreground transition-colors overflow-hidden text-ellipsis whitespace-nowrap">
+                    {content.name}
+                    {Object.keys(content.input).length > 0 && (
+                      <span className="font-normal">
+                        {" "}
+                        (
+                        <ToolInputOneLine input={content.input} />)
+                      </span>
+                    )}
+                  </div>
+                  <ChevronDown className="h-4 w-4 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180 flex-shrink-0" />
+                </div>
+              </div>
+            </CollapsibleTrigger>
+            {taskModal && (
+              <div className="flex-shrink-0 border-l border-blue-200 dark:border-blue-800 flex items-center">
+                {taskModal}
+              </div>
+            )}
+          </div>
+          <CollapsibleContent>
+            <div className="space-y-3 py-3 px-4 border-t border-blue-200 dark:border-blue-800">
+              <div>
+                <h4 className="text-xs font-medium text-muted-foreground mb-1">
+                  <Trans id="assistant.tool.tool_id" message="Tool ID" />
+                </h4>
+                <code className="text-xs bg-background/50 px-2 py-1 rounded border border-blue-200 dark:border-blue-800 font-mono">
+                  {content.id}
+                </code>
+              </div>
+              <div>
+                <h4 className="text-xs font-medium text-muted-foreground mb-2">
                  <Trans
                    id="assistant.tool.input_parameters"
                    message="Input Parameters"
                  />
                </h4>
-                <ChevronDown className="h-3 w-3 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180" />
+                <SyntaxHighlighter
+                  style={syntaxTheme}
+                  language="json"
+                  PreTag="div"
+                  className="text-xs rounded"
+                >
+                  {JSON.stringify(content.input, null, 2)}
+                </SyntaxHighlighter>
              </div>
-            </CollapsibleTrigger>
-            <CollapsibleContent>
-              <SyntaxHighlighter
-                style={syntaxTheme}
-                language="json"
-                PreTag="div"
-                className="text-xs"
-              >
-                {JSON.stringify(content.input, null, 2)}
-              </SyntaxHighlighter>
-            </CollapsibleContent>
-          </Collapsible>
-          {toolResult && (
-            <Collapsible>
-              <CollapsibleTrigger asChild>
-                <div className="flex items-center justify-between cursor-pointer hover:bg-muted/50 rounded p-2 -mx-2 transition-all duration-200 group">
-                  <h4 className="text-xs font-medium text-muted-foreground group-hover:text-foreground">
+              {toolResult && (
+                <div>
+                  <h4 className="text-xs font-medium text-muted-foreground mb-2">
                    <Trans id="assistant.tool.result" message="Tool Result" />
                  </h4>
-                  <ChevronDown className="h-3 w-3 text-muted-foreground transition-transform duration-200 group-data-[state=open]:rotate-180" />
+                  <div className="bg-background rounded border p-3">
+                    {typeof toolResult.content === "string" ? (
+                      <pre className="text-xs overflow-x-auto whitespace-pre-wrap break-words">
+                        {toolResult.content}
+                      </pre>
+                    ) : (
+                      toolResult.content.map((item) => {
+                        if (item.type === "image") {
+                          return (
+                            <Image
+                              key={item.source.data}
+                              src={`data:${item.source.media_type};base64,${item.source.data}`}
+                              alt="Tool Result"
+                            />
+                          );
+                        }
+                        if (item.type === "text") {
+                          return (
+                            <pre
+                              key={item.text}
+                              className="text-xs overflow-x-auto whitespace-pre-wrap break-words"
+                            >
+                              {item.text}
+                            </pre>
+                          );
+                        }
+                        item satisfies never;
+                        throw new Error("Unexpected tool result content type");
+                      })
+                    )}
+                  </div>
                </div>
-              </CollapsibleTrigger>
-              <CollapsibleContent>
-                <div className="bg-background rounded border p-2 mt-1">
-                  {typeof toolResult.content === "string" ? (
-                    <pre className="text-xs overflow-x-auto whitespace-pre-wrap break-words">
-                      {toolResult.content}
-                    </pre>
-                  ) : (
-                    toolResult.content.map((item) => {
-                      if (item.type === "image") {
-                        return (
-                          <Image
-                            key={item.source.data}
-                            src={`data:${item.source.media_type};base64,${item.source.data}`}
-                            alt="Tool Result"
-                          />
-                        );
-                      }
-                      if (item.type === "text") {
-                        return (
-                          <pre
-                            key={item.text}
-                            className="text-xs overflow-x-auto whitespace-pre-wrap break-words"
-                          >
-                            {item.text}
-                          </pre>
-                        );
-                      }
-                      item satisfies never;
-                      throw new Error("Unexpected tool result content type");
-                    })
-                  )}
-                </div>
-              </CollapsibleContent>
-            </Collapsible>
-          )}
-          {taskModal}
-        </CardContent>
+              )}
+            </div>
+          </CollapsibleContent>
+        </Collapsible>
      </Card>
    );
  }
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationItem.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationItem.tsx
@@ -20,12 +20,14 @@ export const ConversationItem: FC<{
    prompt: string,
  ) => SidechainConversation | undefined;
  getSidechainConversations: (rootUuid: string) => SidechainConversation[];
+  existsRelatedTaskCall: (prompt: string) => boolean;
 }> = ({
  conversation,
  getToolResult,
  isRootSidechain,
  getSidechainConversationByPrompt,
  getSidechainConversations,
+  existsRelatedTaskCall,
 }) => {
  if (conversation.type === "summary") {
    return (
@@ -56,6 +58,16 @@ export const ConversationItem: FC<{
      return null;
    }

+    if (conversation.type !== "user") {
+      return null;
+    }
+
+    const prompt = conversation.message.content;
+
+    if (typeof prompt === "string" && existsRelatedTaskCall(prompt) === true) {
+      return null;
+    }
+
    return (
      <SidechainConversationModal
        conversation={conversation}
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ConversationList.tsx
@@ -130,6 +130,7 @@ export const ConversationList: FC<ConversationListProps> = ({
    isRootSidechain,
    getSidechainConversations,
    getSidechainConversationByPrompt,
+    existsRelatedTaskCall,
  } = useSidechain(validConversations);

  return (
@@ -152,6 +153,7 @@ export const ConversationList: FC<ConversationListProps> = ({
            isRootSidechain={isRootSidechain}
            getSidechainConversations={getSidechainConversations}
            getSidechainConversationByPrompt={getSidechainConversationByPrompt}
+            existsRelatedTaskCall={existsRelatedTaskCall}
          />
        );

--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ToolInputOneLine.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/ToolInputOneLine.tsx
@@ -0,0 +1,27 @@
+import type { FC } from "react";
+
+export const ToolInputOneLine: FC<{
+  input: Record<string, unknown>;
+}> = ({ input }) => {
+  const entries = Object.entries(input);
+  if (entries.length === 0) return null;
+
+  return (
+    <span>
+      {entries.map(([key, value], index) => {
+        const valueStr =
+          typeof value === "string"
+            ? value
+            : JSON.stringify(value).replace(/^"|"$/g, "");
+
+        return (
+          <span key={key}>
+            {index > 0 && <span className="text-muted-foreground">, </span>}
+            <span className="text-muted-foreground">{key}=</span>
+            <span>{valueStr}</span>
+          </span>
+        );
+      })}
+    </span>
+  );
+};
--- a/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx
@@ -1,7 +1,9 @@
 "use client";

-import { Eye } from "lucide-react";
+import { Trans } from "@lingui/react";
+import { Eye, MessageSquare } from "lucide-react";
 import type { FC } from "react";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
  Dialog,
@@ -47,8 +49,8 @@ export const SidechainConversationModal: FC<
  SidechainConversationModalProps
 > = ({ conversation, sidechainConversations, trigger, getToolResult }) => {
  const title = sidechainTitle(sidechainConversations);
-
  const rootUuid = conversation.uuid;
+  const messageCount = sidechainConversations.length;

  return (
    <Dialog>
@@ -57,29 +59,60 @@ export const SidechainConversationModal: FC<
          <Button
            variant="outline"
            size="sm"
-            className="w-full mb-3 items-center justify-start"
+            className="w-full my-2 items-center justify-start hover:bg-accent transition-colors"
            data-testid="sidechain-task-button"
          >
-            <div className="flex items-center gap-2 overflow-hidden">
-              <Eye className="h-4 w-4 flex-shrink-0" />
-              <span className="overflow-hidden text-ellipsis">
-                View Task: {title}
+            <div className="flex items-center gap-2 overflow-hidden w-full">
+              <Eye className="h-4 w-4 flex-shrink-0 text-primary" />
+              <span className="overflow-hidden text-ellipsis text-left flex-1">
+                <Trans id="assistant.tool.view_task" message="View Task" />:{" "}
+                {title}
              </span>
+              <Badge
+                variant="secondary"
+                className="ml-auto flex-shrink-0 text-xs"
+              >
+                {messageCount}
+              </Badge>
            </div>
          </Button>
        )}
      </DialogTrigger>
      <DialogContent
-        className="w-[95vw] md:w-[90vw] max-h-[80vh] overflow-hidden flex flex-col px-2 md:px-8"
+        className="w-[95vw] md:w-[90vw] lg:w-[85vw] max-w-[1400px] h-[85vh] max-h-[85vh] flex flex-col p-0"
        data-testid="sidechain-task-modal"
      >
-        <DialogHeader>
-          <DialogTitle>
-            {title.length > 100 ? `${title.slice(0, 100)}...` : title}
-          </DialogTitle>
-          <DialogDescription>Root UUID: {rootUuid}</DialogDescription>
+        <DialogHeader className="px-6 py-4 border-b bg-muted/30">
+          <div className="flex items-start gap-3">
+            <div className="flex-shrink-0 mt-1">
+              <div className="h-10 w-10 rounded-lg bg-primary/10 flex items-center justify-center">
+                <MessageSquare className="h-5 w-5 text-primary" />
+              </div>
+            </div>
+            <div className="flex-1 min-w-0">
+              <DialogTitle className="text-lg font-semibold leading-tight mb-1">
+                {title.length > 120 ? `${title.slice(0, 120)}...` : title}
+              </DialogTitle>
+              <DialogDescription className="text-xs flex items-center gap-2 flex-wrap">
+                <span className="flex items-center gap-1">
+                  <Trans id="assistant.tool.task_id" message="Task ID" />:{" "}
+                  <code className="px-1.5 py-0.5 bg-muted rounded text-[10px] font-mono">
+                    {rootUuid.slice(0, 8)}
+                  </code>
+                </span>
+                <span className="text-muted-foreground">•</span>
+                <span>
+                  <Trans
+                    id="assistant.tool.message_count"
+                    message="{count} messages"
+                    values={{ count: messageCount }}
+                  />
+                </span>
+              </DialogDescription>
+            </div>
+          </div>
        </DialogHeader>
-        <div className="flex-1 overflow-auto">
+        <div className="flex-1 overflow-auto px-6 py-4">
          <ConversationList
            conversations={sidechainConversations}
            getToolResult={getToolResult}
--- a/src/app/projects/[projectId]/sessions/[sessionId]/hooks/useSidechain.ts
+++ b/src/app/projects/[projectId]/sessions/[sessionId]/hooks/useSidechain.ts
@@ -3,11 +3,15 @@ import type {
  Conversation,
  SidechainConversation,
 } from "@/lib/conversation-schema";
+import { taskToolInputSchema } from "../components/conversationList/AssistantConversationContent";

 export const useSidechain = (conversations: Conversation[]) => {
-  const sidechainConversations = conversations.filter(
-    (conv) => conv.type !== "summary" && conv.type !== "file-history-snapshot",
-  );
+  const sidechainConversations = conversations
+    .filter(
+      (conv) =>
+        conv.type !== "summary" && conv.type !== "file-history-snapshot",
+    )
+    .filter((conv) => conv.isSidechain === true);

  const conversationMap = useMemo(() => {
    return new Map<string, SidechainConversation>(
@@ -28,6 +32,30 @@ export const useSidechain = (conversations: Conversation[]) => {
    );
  }, [sidechainConversations]);

+  const taskToolCallPromptSet = useMemo(() => {
+    return new Set<string>(
+      conversations
+        .filter((conv) => conv.type === "assistant")
+        .flatMap((conv) => [
+          ...conv.message.content.filter(
+            (content) => content.type === "tool_use",
+          ),
+        ])
+        .flatMap((content) => {
+          if (content.name !== "Task") {
+            return [];
+          }
+
+          const input = taskToolInputSchema.safeParse(content.input);
+          if (input.success === false) {
+            return [];
+          }
+
+          return [input.data.prompt];
+        }),
+    );
+  }, [conversations]);
+
  const getRootConversationRecursive = useCallback(
    (conversation: SidechainConversation): SidechainConversation => {
      if (conversation.parentUuid === null) {
@@ -45,13 +73,9 @@ export const useSidechain = (conversations: Conversation[]) => {
  );

  const sidechainConversationGroups = useMemo(() => {
-    const filtered = sidechainConversations.filter(
-      (conv) => conv.isSidechain === true,
-    );
-
    const groups = new Map<string, SidechainConversation[]>();

-    for (const conv of filtered) {
+    for (const conv of sidechainConversations) {
      const rootConversation = getRootConversationRecursive(conv);

      if (groups.has(rootConversation.uuid)) {
@@ -92,9 +116,14 @@ export const useSidechain = (conversations: Conversation[]) => {
    [conversationPromptMap],
  );

+  const existsRelatedTaskCall = (prompt: string) => {
+    return taskToolCallPromptSet.has(prompt);
+  };
+
  return {
    isRootSidechain,
    getSidechainConversations,
    getSidechainConversationByPrompt,
+    existsRelatedTaskCall,
  };
 };
--- a/src/lib/i18n/locales/en/messages.json
+++ b/src/lib/i18n/locales/en/messages.json
@@ -23,6 +23,17 @@
    "origin": [["src/components/SettingsControls.tsx", 306]],
    "translation": "Select theme"
  },
+  "Reload MCP servers": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/McpTab.tsx",
+        42
+      ]
+    ],
+    "translation": "Reload MCP servers"
+  },
  "Type your message... (Start with / for commands, @ for files, Enter to send)": {
    "placeholders": {},
    "comments": [],
@@ -68,17 +79,6 @@
    ],
    "translation": "Type your message... (Start with / for commands, @ for files, Shift+Enter to send)"
  },
-  "Reload MCP servers": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/McpTab.tsx",
-        42
-      ]
-    ],
-    "translation": "Reload MCP servers"
-  },
  "Close sidebar": {
    "placeholders": {},
    "comments": [],
@@ -114,6 +114,28 @@
    ],
    "translation": "Type your message here... (Start with / for commands, @ for files, Shift+Enter to send)"
  },
+  "Available files and directories": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/components/chatForm/FileCompletion.tsx",
+        267
+      ]
+    ],
+    "translation": "Available files and directories"
+  },
+  "Available commands": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/components/chatForm/CommandCompletion.tsx",
+        193
+      ]
+    ],
+    "translation": "Available commands"
+  },
  "Uncommitted changes": {
    "placeholders": {},
    "comments": [],
@@ -191,28 +213,6 @@
    ],
    "translation": "Compare to"
  },
-  "Available commands": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/components/chatForm/CommandCompletion.tsx",
-        193
-      ]
-    ],
-    "translation": "Available commands"
-  },
-  "Available files and directories": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/components/chatForm/FileCompletion.tsx",
-        267
-      ]
-    ],
-    "translation": "Available files and directories"
-  },
  "Message input with completion support": {
    "placeholders": {},
    "comments": [],
@@ -221,6 +221,20 @@
    ],
    "translation": "Message input with completion support"
  },
+  "assistant.tool.message_count": {
+    "message": "{count} messages",
+    "placeholders": {
+      "count": ["messageCount"]
+    },
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        105
+      ]
+    ],
+    "translation": "{count} messages"
+  },
  "session.conversation.abort": {
    "message": "Abort",
    "placeholders": {},
@@ -717,7 +731,7 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        152
+        198
      ]
    ],
    "translation": "Input Parameters"
@@ -1274,6 +1288,13 @@
    "origin": [["src/components/SettingsControls.tsx", 316]],
    "translation": "System"
  },
+  "settings.section.system_info": {
+    "message": "System Information",
+    "placeholders": {},
+    "comments": [],
+    "origin": [["src/components/GlobalSidebar.tsx", 102]],
+    "translation": "System Information"
+  },
  "system_info.title": {
    "message": "System Information",
    "placeholders": {},
@@ -1281,12 +1302,17 @@
    "origin": [["src/components/SystemInfoCard.tsx", 109]],
    "translation": "System Information"
  },
-  "settings.section.system_info": {
-    "message": "System Information",
+  "assistant.tool.task_id": {
+    "message": "Task ID",
    "placeholders": {},
    "comments": [],
-    "origin": [["src/components/GlobalSidebar.tsx", 102]],
-    "translation": "System Information"
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        98
+      ]
+    ],
+    "translation": "Task ID"
  },
  "notification.test": {
    "message": "Test",
@@ -1316,7 +1342,7 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        70
+        89
      ]
    ],
    "translation": "Thinking"
@@ -1333,6 +1359,18 @@
    ],
    "translation": "This conversation entry failed to parse correctly. This might indicate a format change or parsing issue."
  },
+  "assistant.tool.tool_id": {
+    "translation": "Tool ID",
+    "message": "Tool ID",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
+        190
+      ]
+    ]
+  },
  "assistant.tool.result": {
    "message": "Tool Result",
    "placeholders": {},
@@ -1340,23 +1378,11 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        176
+        215
      ]
    ],
    "translation": "Tool Result"
  },
-  "assistant.tool_use": {
-    "message": "Tool Use",
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        134
-      ]
-    ],
-    "translation": "Tool Use"
-  },
  "system_info.feature.can_use_tool.title": {
    "message": "Tool Use Permission Control",
    "placeholders": {},
@@ -1455,6 +1481,30 @@
    "origin": [["src/app/projects/components/ProjectList.tsx", 78]],
    "translation": "View Conversations"
  },
+  "assistant.tool.view_task": {
+    "message": "View Task",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        68
+      ]
+    ],
+    "translation": "View Task"
+  },
+  "assistant.tool.view_task_details": {
+    "message": "View Task",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
+        145
+      ]
+    ],
+    "translation": "View Task"
+  },
  "project.error.description": {
    "message": "We encountered an error while loading this project",
    "placeholders": {},
--- a/src/lib/i18n/locales/en/messages.ts
+++ b/src/lib/i18n/locales/en/messages.ts
--- a/src/lib/i18n/locales/ja/messages.json
+++ b/src/lib/i18n/locales/ja/messages.json
@@ -23,6 +23,17 @@
    "origin": [["src/components/SettingsControls.tsx", 306]],
    "translation": "テーマを選択"
  },
+  "Reload MCP servers": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/McpTab.tsx",
+        42
+      ]
+    ],
+    "translation": "MCPサーバーを再読み込み"
+  },
  "Type your message... (Start with / for commands, @ for files, Enter to send)": {
    "placeholders": {},
    "comments": [],
@@ -68,17 +79,6 @@
    ],
    "translation": "メッセージを入力... （/でコマンド、@でファイル、Shift+Enterで送信）"
  },
-  "Reload MCP servers": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/sessions/[sessionId]/components/sessionSidebar/McpTab.tsx",
-        42
-      ]
-    ],
-    "translation": "MCPサーバーを再読み込み"
-  },
  "Close sidebar": {
    "placeholders": {},
    "comments": [],
@@ -114,6 +114,28 @@
    ],
    "translation": "ここにメッセージを入力... （/でコマンド、@でファイル、Shift+Enterで送信）"
  },
+  "Available files and directories": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/components/chatForm/FileCompletion.tsx",
+        267
+      ]
+    ],
+    "translation": "利用可能なファイルとディレクトリ"
+  },
+  "Available commands": {
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/components/chatForm/CommandCompletion.tsx",
+        193
+      ]
+    ],
+    "translation": "利用可能なコマンド"
+  },
  "Uncommitted changes": {
    "placeholders": {},
    "comments": [],
@@ -191,28 +213,6 @@
    ],
    "translation": "比較先"
  },
-  "Available commands": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/components/chatForm/CommandCompletion.tsx",
-        193
-      ]
-    ],
-    "translation": "利用可能なコマンド"
-  },
-  "Available files and directories": {
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/components/chatForm/FileCompletion.tsx",
-        267
-      ]
-    ],
-    "translation": "利用可能なファイルとディレクトリ"
-  },
  "Message input with completion support": {
    "placeholders": {},
    "comments": [],
@@ -221,6 +221,20 @@
    ],
    "translation": "補完機能付きメッセージ入力"
  },
+  "assistant.tool.message_count": {
+    "message": "{count} messages",
+    "placeholders": {
+      "count": ["messageCount"]
+    },
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        105
+      ]
+    ],
+    "translation": "{count}件のメッセージ"
+  },
  "session.conversation.abort": {
    "message": "Abort",
    "placeholders": {},
@@ -717,7 +731,7 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        152
+        198
      ]
    ],
    "translation": "入力パラメータ"
@@ -1274,6 +1288,13 @@
    "origin": [["src/components/SettingsControls.tsx", 316]],
    "translation": "システム"
  },
+  "settings.section.system_info": {
+    "message": "System Information",
+    "placeholders": {},
+    "comments": [],
+    "origin": [["src/components/GlobalSidebar.tsx", 102]],
+    "translation": "システム情報"
+  },
  "system_info.title": {
    "message": "System Information",
    "placeholders": {},
@@ -1281,12 +1302,17 @@
    "origin": [["src/components/SystemInfoCard.tsx", 109]],
    "translation": "システム情報"
  },
-  "settings.section.system_info": {
-    "message": "System Information",
+  "assistant.tool.task_id": {
+    "message": "Task ID",
    "placeholders": {},
    "comments": [],
-    "origin": [["src/components/GlobalSidebar.tsx", 102]],
-    "translation": "システム情報"
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        98
+      ]
+    ],
+    "translation": "タスクID"
  },
  "notification.test": {
    "message": "Test",
@@ -1316,7 +1342,7 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        70
+        89
      ]
    ],
    "translation": "思考中"
@@ -1333,6 +1359,18 @@
    ],
    "translation": "この会話エントリの解析に失敗しました。フォーマットの変更または解析の問題が考えられます。"
  },
+  "assistant.tool.tool_id": {
+    "translation": "ツールID",
+    "message": "Tool ID",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
+        190
+      ]
+    ]
+  },
  "assistant.tool.result": {
    "message": "Tool Result",
    "placeholders": {},
@@ -1340,23 +1378,11 @@
    "origin": [
      [
        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        176
+        215
      ]
    ],
    "translation": "ツール実行結果"
  },
-  "assistant.tool_use": {
-    "message": "Tool Use",
-    "placeholders": {},
-    "comments": [],
-    "origin": [
-      [
-        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
-        134
-      ]
-    ],
-    "translation": "ツール使用"
-  },
  "system_info.feature.can_use_tool.title": {
    "message": "Tool Use Permission Control",
    "placeholders": {},
@@ -1455,6 +1481,30 @@
    "origin": [["src/app/projects/components/ProjectList.tsx", 78]],
    "translation": "会話を表示"
  },
+  "assistant.tool.view_task": {
+    "message": "View Task",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationModal/SidechainConversationModal.tsx",
+        68
+      ]
+    ],
+    "translation": "タスクを表示"
+  },
+  "assistant.tool.view_task_details": {
+    "message": "View Task",
+    "placeholders": {},
+    "comments": [],
+    "origin": [
+      [
+        "src/app/projects/[projectId]/sessions/[sessionId]/components/conversationList/AssistantConversationContent.tsx",
+        145
+      ]
+    ],
+    "translation": "タスクを確認"
+  },
  "project.error.description": {
    "message": "We encountered an error while loading this project",
    "placeholders": {},
--- a/src/lib/i18n/locales/ja/messages.ts
+++ b/src/lib/i18n/locales/ja/messages.ts