feat: task detail UI cleanup

Author: jonathanlab

package.json

@@ -59,7 +59,8 @@
     "yaml": "^2.8.1"
   },
   "dependencies": {
-    "@posthog/agent": "^1.3.1",
+    "@phosphor-icons/react": "^2.1.10",
+    "@posthog/agent": "^1.4.0",
     "@radix-ui/react-icons": "^1.3.2",
     "@radix-ui/themes": "^3.2.1",
     "@tanstack/react-query": "^5.90.2",

pnpm-lock.yaml

@@ -16,8 +16,9 @@ interface ComboboxProps {
   searchPlaceholder?: string;
   emptyMessage?: string;
   size?: "1" | "2" | "3";
-  variant?: "classic" | "surface" | "soft" | "ghost";
+  variant?: "classic" | "surface" | "soft" | "ghost" | "outline";
   renderItem?: (item: ComboboxItem) => ReactNode;
+  icon?: ReactNode;
   side?: "top" | "bottom" | "left" | "right";
   align?: "start" | "center" | "end";
 }
@@ -32,6 +33,7 @@ export function Combobox({
   size = "2",
   variant = "surface",
   renderItem,
+  icon,
   side = "bottom",
   align = "start",
 }: ComboboxProps) {
@@ -54,7 +56,10 @@ export function Combobox({
       <Popover.Trigger>
         <Button variant={variant} size={size} color="gray">
           <Flex justify="between" align="center" gap="2" width="100%">
-            <Text size={size}>{displayValue}</Text>
+            <Flex align="center" gap="2">
+              {icon}
+              <Text size={size}>{displayValue}</Text>
+            </Flex>
             <ChevronDownIcon />
           </Flex>
         </Button>

src/renderer/components/Combobox.tsx

@@ -1,5 +1,13 @@
 import { TrashIcon } from "@radix-ui/react-icons";
-import { Box, Code, Flex, Heading, IconButton, Text } from "@radix-ui/themes";
+import {
+  Box,
+  Code,
+  ContextMenu,
+  Flex,
+  Heading,
+  IconButton,
+  Text,
+} from "@radix-ui/themes";
 import { useEffect, useRef } from "react";
 import { formatTime, type LogEntry } from "../types/log";
 import { DiffView } from "./log/DiffView";
@@ -38,40 +46,23 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
     );
   }
 
-  return (
-    <Flex direction="column" height="100%">
-      <Box p="4" className="border-gray-6 border-b">
-        <Flex align="center" justify="between">
-          <Heading size="3">Activity Log</Heading>
-          <Flex align="center" gap="2">
-            {isRunning && (
-              <Flex align="center" gap="2">
-                <Box
-                  width="8px"
-                  height="8px"
-                  className="animate-pulse rounded-full bg-green-9"
-                />
-                <Text size="2" color="gray">
-                  Running
-                </Text>
-              </Flex>
-            )}
-            {logs.length > 0 && onClearLogs && (
-              <IconButton
-                size="1"
-                variant="ghost"
-                color="gray"
-                onClick={onClearLogs}
-                title="Clear logs"
-              >
-                <TrashIcon />
-              </IconButton>
-            )}
-          </Flex>
-        </Flex>
-      </Box>
+  const handleCopyLogs = () => {
+    const logsText = logs
+      .map((log) => {
+        if (typeof log === "string") return log;
+        if (log.type === "output") return log.content;
+        if (log.type === "error") return `Error: ${log.content}`;
+        return "";
+      })
+      .join("\n");
+    navigator.clipboard.writeText(logsText);
+  };
 
-      <Box ref={scrollRef} flexGrow="1" overflowY="auto" p="4">
+  return (
+    <ContextMenu.Root>
+      <ContextMenu.Trigger>
+        <Flex direction="column" height="100%">
+          <Box ref={scrollRef} flexGrow="1" overflowY="auto" p="4">
         {logs.map((log, index) => {
           const key =
             typeof log === "string"
@@ -222,7 +213,17 @@ export function LogView({ logs, isRunning, onClearLogs }: LogViewProps) {
               );
           }
         })}
-      </Box>
-    </Flex>
+          </Box>
+        </Flex>
+      </ContextMenu.Trigger>
+      <ContextMenu.Content>
+        <ContextMenu.Item onClick={handleCopyLogs}>Copy</ContextMenu.Item>
+        {onClearLogs && (
+          <ContextMenu.Item onClick={onClearLogs} color="red">
+            Clear
+          </ContextMenu.Item>
+        )}
+      </ContextMenu.Content>
+    </ContextMenu.Root>
   );
 }