@desplega.ai/agent-swarm 1.20.0 → 1.49.0

package/ui/src/components/TaskDetailPanel.tsx

@@ -1,903 +0,0 @@
-import Box from "@mui/joy/Box";
-import Chip from "@mui/joy/Chip";
-import Divider from "@mui/joy/Divider";
-import IconButton from "@mui/joy/IconButton";
-import { useColorScheme } from "@mui/joy/styles";
-import Tab from "@mui/joy/Tab";
-import TabList from "@mui/joy/TabList";
-import TabPanel from "@mui/joy/TabPanel";
-import Tabs from "@mui/joy/Tabs";
-import Tooltip from "@mui/joy/Tooltip";
-import Typography from "@mui/joy/Typography";
-import { useCallback, useEffect, useRef, useState } from "react";
-import { useAgents, useTask, useTaskSessionLogs, useTaskUsage } from "../hooks/queries";
-import { formatCompactNumber, formatCurrency, formatRelativeTime } from "../lib/utils";
-import SessionLogPanel from "./SessionLogPanel";
-import StatusBadge from "./StatusBadge";
-
-interface TaskDetailPanelProps {
-  taskId: string;
-  onClose: () => void;
-  expanded?: boolean;
-  onToggleExpand?: () => void;
-}
-
-export default function TaskDetailPanel({
-  taskId,
-  onClose,
-  expanded = false,
-  onToggleExpand,
-}: TaskDetailPanelProps) {
-  const { data: task, isLoading: taskLoading } = useTask(taskId);
-  const { data: agents } = useAgents();
-  const { data: sessionLogs } = useTaskSessionLogs(taskId);
-  const { data: taskUsage } = useTaskUsage(taskId);
-  const { mode } = useColorScheme();
-  const isDark = mode === "dark";
-  const [outputTab, setOutputTab] = useState<"output" | "error">("output");
-  const [outcomesTab, setOutcomesTab] = useState<"output" | "error" | "session">("session");
-  const [copiedField, setCopiedField] = useState<"output" | "error" | null>(null);
-
-  // Track whether we've set the initial tab for this task
-  const initialTabSetRef = useRef<string | null>(null);
-
-  // Set initial tab based on task status
-  useEffect(() => {
-    if (!task || initialTabSetRef.current === taskId) return;
-
-    // Finished tasks → output tab, in-progress tasks → session/logs tab
-    const isFinished = task.status === "completed" || task.status === "failed";
-    setOutcomesTab(isFinished ? "output" : "session");
-    initialTabSetRef.current = taskId;
-  }, [task, taskId]);
-
-  const handleCopy = useCallback(async (content: string, field: "output" | "error") => {
-    try {
-      await navigator.clipboard.writeText(content);
-      setCopiedField(field);
-      setTimeout(() => setCopiedField(null), 2000);
-    } catch (err) {
-      console.error("Failed to copy:", err);
-    }
-  }, []);
-
-  const colors = {
-    amber: isDark ? "#F5A623" : "#D48806",
-    gold: isDark ? "#D4A574" : "#8B6914",
-    rust: isDark ? "#A85454" : "#B54242",
-    blue: "#3B82F6",
-    purple: isDark ? "#9370DB" : "#6B5B95",
-    warmGray: isDark ? "#C9B896" : "#8B7355",
-    tertiary: isDark ? "#8B7355" : "#6B5344",
-    closeBtn: isDark ? "#8B7355" : "#5C4A3D",
-    closeBtnHover: isDark ? "#FFF8E7" : "#1A130E",
-    goldGlow: isDark ? "0 0 8px rgba(212, 165, 116, 0.5)" : "0 0 6px rgba(139, 105, 20, 0.3)",
-    goldSoftBg: isDark ? "rgba(212, 165, 116, 0.1)" : "rgba(139, 105, 20, 0.08)",
-    goldBorder: isDark ? "rgba(212, 165, 116, 0.3)" : "rgba(139, 105, 20, 0.25)",
-    hoverBg: isDark ? "rgba(245, 166, 35, 0.05)" : "rgba(212, 136, 6, 0.05)",
-  };
-
-  const getSourceColor = (source: string) => {
-    switch (source) {
-      case "mcp":
-        return colors.amber;
-      case "slack":
-        return colors.purple;
-      case "api":
-        return colors.blue;
-      default:
-        return colors.tertiary;
-    }
-  };
-
-  const agentName = agents?.find((a) => a.id === task?.agentId)?.name || task?.agentId?.slice(0, 8);
-
-  const getElapsedTime = () => {
-    if (!task) return "—";
-    const start = new Date(task.createdAt).getTime();
-    const end = task.finishedAt ? new Date(task.finishedAt).getTime() : Date.now();
-    const elapsed = end - start;
-
-    const seconds = Math.floor(elapsed / 1000);
-    const minutes = Math.floor(seconds / 60);
-    const hours = Math.floor(minutes / 60);
-
-    if (hours > 0) {
-      return `${hours}h ${minutes % 60}m`;
-    } else if (minutes > 0) {
-      return `${minutes}m ${seconds % 60}s`;
-    }
-    return `${seconds}s`;
-  };
-
-  const panelWidth = expanded ? "100%" : 450;
-
-  const loadingContent = (
-    <Typography sx={{ fontFamily: "code", color: "text.tertiary" }}>Loading task...</Typography>
-  );
-
-  const notFoundContent = (
-    <Typography sx={{ fontFamily: "code", color: "text.tertiary" }}>Task not found</Typography>
-  );
-
-  if (taskLoading || !task) {
-    return (
-      <Box
-        sx={{
-          position: { xs: "fixed", md: "relative" },
-          inset: { xs: 0, md: "auto" },
-          zIndex: { xs: 1300, md: "auto" },
-          width: { xs: "100%", md: panelWidth },
-          height: "100%",
-          bgcolor: "background.surface",
-          border: { xs: "none", md: "1px solid" },
-          borderColor: "neutral.outlinedBorder",
-          borderRadius: { xs: 0, md: "12px" },
-          p: { xs: 2, md: 3 },
-          overflow: "auto",
-        }}
-      >
-        {taskLoading ? loadingContent : notFoundContent}
-      </Box>
-    );
-  }
-
-  const progressLogs = task.logs?.filter((log) => log.eventType === "task_progress") || [];
-  const hasOutput = !!task.output;
-  const hasError = !!task.failureReason;
-  const hasBothOutputAndError = hasOutput && hasError;
-
-  // Details section - task info
-  const DetailsSection = ({ showProgress = true }: { showProgress?: boolean }) => (
-    <Box
-      sx={{
-        p: { xs: 1.5, md: 2 },
-        display: "flex",
-        flexDirection: "column",
-        flex: showProgress ? "0 0 auto" : "1 1 auto",
-        overflow: showProgress ? "visible" : "auto",
-        minHeight: 0,
-      }}
-    >
-      {/* Info fields first */}
-      <Box sx={{ display: "flex", flexDirection: "column", gap: 1.5, flexShrink: 0, mb: 2 }}>
-        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-            Status
-          </Typography>
-          <StatusBadge status={task.status} />
-        </Box>
-
-        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-            Agent
-          </Typography>
-          <Typography
-            sx={{
-              fontFamily: "code",
-              fontSize: "0.8rem",
-              color: task.agentId ? colors.amber : "text.tertiary",
-            }}
-          >
-            {task.agentId ? agentName : "Unassigned"}
-          </Typography>
-        </Box>
-
-        {task.source && (
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-              Source
-            </Typography>
-            <Chip
-              size="sm"
-              variant="soft"
-              sx={{
-                fontFamily: "code",
-                fontSize: "0.65rem",
-                color: getSourceColor(task.source),
-                bgcolor: isDark ? "rgba(100, 100, 100, 0.15)" : "rgba(150, 150, 150, 0.12)",
-                textTransform: "uppercase",
-              }}
-            >
-              {task.source}
-            </Chip>
-          </Box>
-        )}
-
-        {task.taskType && (
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-              Type
-            </Typography>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.8rem", color: "text.secondary" }}>
-              {task.taskType}
-            </Typography>
-          </Box>
-        )}
-
-        {task.tags && task.tags.length > 0 && (
-          <Box>
-            <Typography
-              sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary", mb: 0.5 }}
-            >
-              Tags
-            </Typography>
-            <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
-              {task.tags.map((tag) => (
-                <Chip
-                  key={tag}
-                  size="sm"
-                  variant="soft"
-                  sx={{
-                    fontFamily: "code",
-                    fontSize: "0.65rem",
-                    bgcolor: colors.goldSoftBg,
-                    color: colors.gold,
-                    border: `1px solid ${colors.goldBorder}`,
-                  }}
-                >
-                  {tag}
-                </Chip>
-              ))}
-            </Box>
-          </Box>
-        )}
-
-        {task.priority !== undefined && task.priority !== 50 && (
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-              Priority
-            </Typography>
-            <Typography
-              sx={{
-                fontFamily: "code",
-                fontSize: "0.8rem",
-                color: task.priority > 50 ? colors.amber : "text.secondary",
-              }}
-            >
-              {task.priority}
-            </Typography>
-          </Box>
-        )}
-
-        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-            Elapsed Time
-          </Typography>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.8rem", color: "text.secondary" }}>
-            {getElapsedTime()}
-          </Typography>
-        </Box>
-
-        {/* Task Cost Section */}
-        {taskUsage && taskUsage.sessionCount > 0 && (
-          <Box
-            sx={{
-              bgcolor: colors.goldSoftBg,
-              border: `1px solid ${colors.goldBorder}`,
-              borderRadius: 1,
-              p: 1.5,
-              mt: 1,
-            }}
-          >
-            <Typography
-              sx={{
-                fontFamily: "code",
-                fontSize: "0.6rem",
-                color: "text.tertiary",
-                letterSpacing: "0.05em",
-                mb: 0.5,
-              }}
-            >
-              TASK COST
-            </Typography>
-            <Box sx={{ display: "flex", alignItems: "baseline", gap: 1 }}>
-              <Typography
-                sx={{ fontFamily: "code", fontSize: "1rem", fontWeight: 600, color: colors.amber }}
-              >
-                {formatCurrency(taskUsage.totalCostUsd)}
-              </Typography>
-              <Typography sx={{ fontFamily: "code", fontSize: "0.7rem", color: "text.secondary" }}>
-                {formatCompactNumber(taskUsage.totalTokens)} tokens
-              </Typography>
-            </Box>
-            <Typography
-              sx={{ fontFamily: "code", fontSize: "0.6rem", color: "text.tertiary", mt: 0.5 }}
-            >
-              {taskUsage.sessionCount} session{taskUsage.sessionCount !== 1 ? "s" : ""}
-            </Typography>
-          </Box>
-        )}
-
-        <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-            Created
-          </Typography>
-          <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.secondary" }}>
-            {new Date(task.createdAt).toLocaleString()}
-          </Typography>
-        </Box>
-
-        {task.finishedAt && (
-          <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-              Finished
-            </Typography>
-            <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.secondary" }}>
-              {new Date(task.finishedAt).toLocaleString()}
-            </Typography>
-          </Box>
-        )}
-      </Box>
-
-      {/* Task description */}
-      <Box
-        sx={{
-          p: 1.5,
-          mb: 2,
-          bgcolor: "background.level1",
-          borderRadius: 1,
-          border: "1px solid",
-          borderColor: "neutral.outlinedBorder",
-          flexShrink: 0,
-        }}
-      >
-        <Typography
-          sx={{
-            fontFamily: "code",
-            fontSize: "0.8rem",
-            color: "text.primary",
-            lineHeight: 1.5,
-            wordBreak: "break-word",
-          }}
-        >
-          {task.task}
-        </Typography>
-      </Box>
-
-      {/* Progress Logs - only in collapsed mode */}
-      {showProgress && progressLogs.length > 0 && (
-        <>
-          <Divider sx={{ my: 2, bgcolor: "neutral.outlinedBorder", flexShrink: 0 }} />
-          <Box sx={{ display: "flex", flexDirection: "column" }}>
-            <Typography
-              sx={{
-                fontFamily: "code",
-                fontSize: "0.7rem",
-                color: "text.tertiary",
-                letterSpacing: "0.05em",
-                mb: 1,
-                flexShrink: 0,
-              }}
-            >
-              PROGRESS ({progressLogs.length})
-            </Typography>
-            <Box
-              sx={{
-                display: "flex",
-                flexDirection: "column",
-                gap: 1,
-              }}
-            >
-              {progressLogs.map((log) => (
-                <Box
-                  key={log.id}
-                  sx={{
-                    bgcolor: "background.level1",
-                    p: 1.5,
-                    borderRadius: 1,
-                    border: "1px solid",
-                    borderColor: "neutral.outlinedBorder",
-                    flexShrink: 0,
-                  }}
-                >
-                  <Typography
-                    sx={{
-                      fontFamily: "code",
-                      fontSize: "0.75rem",
-                      color: "text.secondary",
-                      mb: 0.5,
-                    }}
-                  >
-                    {log.newValue || "Progress update"}
-                  </Typography>
-                  <Typography
-                    sx={{
-                      fontFamily: "code",
-                      fontSize: "0.6rem",
-                      color: "text.tertiary",
-                    }}
-                  >
-                    {formatRelativeTime(log.createdAt)}
-                  </Typography>
-                </Box>
-              ))}
-            </Box>
-          </Box>
-        </>
-      )}
-    </Box>
-  );
-
-  // Progress section for expanded view
-  const ProgressSection = () => (
-    <Box sx={{ p: 2, display: "flex", flexDirection: "column", height: "100%" }}>
-      <Typography
-        sx={{
-          fontFamily: "code",
-          fontSize: "0.7rem",
-          color: "text.tertiary",
-          letterSpacing: "0.05em",
-          mb: 1,
-          flexShrink: 0,
-        }}
-      >
-        PROGRESS ({progressLogs.length})
-      </Typography>
-      {progressLogs.length === 0 ? (
-        <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-          No progress updates
-        </Typography>
-      ) : (
-        <Box
-          sx={{
-            display: "flex",
-            flexDirection: "column",
-            gap: 1,
-            flex: 1,
-            overflow: "auto",
-          }}
-        >
-          {progressLogs.map((log) => (
-            <Box
-              key={log.id}
-              sx={{
-                bgcolor: "background.level1",
-                p: 1.5,
-                borderRadius: 1,
-                border: "1px solid",
-                borderColor: "neutral.outlinedBorder",
-                flexShrink: 0,
-              }}
-            >
-              <Typography
-                sx={{
-                  fontFamily: "code",
-                  fontSize: "0.75rem",
-                  color: "text.secondary",
-                  mb: 0.5,
-                }}
-              >
-                {log.newValue || "Progress update"}
-              </Typography>
-              <Typography
-                sx={{
-                  fontFamily: "code",
-                  fontSize: "0.6rem",
-                  color: "text.tertiary",
-                }}
-              >
-                {formatRelativeTime(log.createdAt)}
-              </Typography>
-            </Box>
-          ))}
-        </Box>
-      )}
-    </Box>
-  );
-
-  // Copy button component
-  const CopyButton = ({ content, field }: { content: string; field: "output" | "error" }) => (
-    <Tooltip title={copiedField === field ? "Copied!" : "Copy to clipboard"} placement="left">
-      <IconButton
-        size="sm"
-        variant="plain"
-        onClick={() => handleCopy(content, field)}
-        sx={{
-          color: copiedField === field ? colors.amber : colors.closeBtn,
-          "&:hover": { color: colors.closeBtnHover, bgcolor: colors.hoverBg },
-        }}
-      >
-        {copiedField === field ? "✓" : "⧉"}
-      </IconButton>
-    </Tooltip>
-  );
-
-  // Output content
-  const OutputContent = () => (
-    <Box sx={{ flex: 1, overflow: "auto", p: 2, position: "relative" }}>
-      {hasOutput ? (
-        <>
-          <Box sx={{ position: "absolute", top: 8, right: 8, zIndex: 1 }}>
-            <CopyButton content={task.output!} field="output" />
-          </Box>
-          <Typography
-            sx={{
-              fontFamily: "code",
-              fontSize: "0.75rem",
-              color: colors.gold,
-              lineHeight: 1.6,
-              whiteSpace: "pre-wrap",
-              wordBreak: "break-word",
-              pr: 4,
-            }}
-          >
-            {task.output}
-          </Typography>
-        </>
-      ) : (
-        <Typography sx={{ fontFamily: "code", fontSize: "0.75rem", color: "text.tertiary" }}>
-          No output yet
-        </Typography>
-      )}
-    </Box>
-  );
-
-  // Error content
-  const ErrorContent = () => (
-    <Box sx={{ flex: 1, overflow: "auto", p: 2, position: "relative" }}>
-      <Box sx={{ position: "absolute", top: 8, right: 8, zIndex: 1 }}>
-        <CopyButton content={task.failureReason!} field="error" />
-      </Box>
-      <Typography
-        sx={{
-          fontFamily: "code",
-          fontSize: "0.75rem",
-          color: colors.rust,
-          lineHeight: 1.6,
-          whiteSpace: "pre-wrap",
-          wordBreak: "break-word",
-          pr: 4,
-        }}
-      >
-        {task.failureReason}
-      </Typography>
-    </Box>
-  );
-
-  // Get tab list styles with dynamic selected color
-  const getTabListStyles = (selectedColor: string, hasBorderTop = false) => ({
-    gap: 0.5,
-    bgcolor: "background.level1",
-    borderBottom: "1px solid",
-    borderColor: "neutral.outlinedBorder",
-    borderTop: hasBorderTop ? "1px solid" : "none",
-    px: 1,
-    pt: 0.5,
-    flexShrink: 0,
-    minHeight: 32,
-    "& .MuiTab-root": {
-      fontFamily: "code",
-      fontSize: "0.75rem",
-      letterSpacing: "0.03em",
-      fontWeight: 600,
-      color: "text.tertiary",
-      bgcolor: "transparent",
-      border: "1px solid transparent",
-      borderBottom: "none",
-      borderRadius: "6px 6px 0 0",
-      minHeight: "auto",
-      transition: "all 0.2s ease",
-      "&:hover": {
-        color: "text.secondary",
-        bgcolor: colors.hoverBg,
-      },
-      "&.Mui-selected": {
-        color: selectedColor,
-        bgcolor: "background.surface",
-        borderColor: "neutral.outlinedBorder",
-        borderBottomColor: "background.surface",
-      },
-    },
-  });
-
-  // Collapsed output section
-  const CollapsedOutputSection = () => {
-    if (hasOutput || hasError) {
-      if (hasBothOutputAndError) {
-        return (
-          <Tabs
-            value={outputTab}
-            onChange={(_, value) => setOutputTab(value as "output" | "error")}
-            sx={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}
-          >
-            <TabList sx={getTabListStyles(outputTab === "error" ? colors.rust : colors.gold, true)}>
-              <Tab value="output">OUTPUT</Tab>
-              <Tab value="error">ERROR</Tab>
-            </TabList>
-            <TabPanel value="output" sx={{ p: 0, flex: 1, overflow: "hidden" }}>
-              <OutputContent />
-            </TabPanel>
-            <TabPanel value="error" sx={{ p: 0, flex: 1, overflow: "hidden" }}>
-              <ErrorContent />
-            </TabPanel>
-          </Tabs>
-        );
-      }
-
-      if (hasError) {
-        return (
-          <Box sx={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>
-            <Box
-              sx={{
-                px: 2,
-                py: 1.5,
-                bgcolor: "background.level1",
-                borderTop: "1px solid",
-                borderColor: "neutral.outlinedBorder",
-                flexShrink: 0,
-              }}
-            >
-              <Typography
-                sx={{
-                  fontFamily: "code",
-                  fontSize: "0.7rem",
-                  color: colors.rust,
-                  letterSpacing: "0.05em",
-                }}
-              >
-                ERROR
-              </Typography>
-            </Box>
-            <ErrorContent />
-          </Box>
-        );
-      }
-
-      return (
-        <Box sx={{ display: "flex", flexDirection: "column", flex: 1, overflow: "hidden" }}>
-          <Box
-            sx={{
-              px: 2,
-              py: 1.5,
-              bgcolor: "background.level1",
-              borderTop: "1px solid",
-              borderColor: "neutral.outlinedBorder",
-              flexShrink: 0,
-            }}
-          >
-            <Typography
-              sx={{
-                fontFamily: "code",
-                fontSize: "0.7rem",
-                color: "text.tertiary",
-                letterSpacing: "0.05em",
-              }}
-            >
-              OUTPUT
-            </Typography>
-          </Box>
-          <OutputContent />
-        </Box>
-      );
-    }
-
-    return null;
-  };
-
-  return (
-    <Box
-      sx={{
-        position: { xs: "fixed", md: "relative" },
-        inset: { xs: 0, md: "auto" },
-        zIndex: { xs: 1300, md: "auto" },
-        width: { xs: "100%", md: expanded ? "100%" : 450 },
-        height: { xs: "100%", md: "100%" },
-        bgcolor: "background.surface",
-        border: { xs: "none", md: "1px solid" },
-        borderColor: "neutral.outlinedBorder",
-        borderRadius: { xs: 0, md: "12px" },
-        display: "flex",
-        flexDirection: "column",
-        overflow: "hidden",
-      }}
-    >
-      {/* Header */}
-      <Box
-        sx={{
-          px: { xs: 1.5, md: 2 },
-          py: 1.5,
-          borderBottom: "1px solid",
-          borderColor: "neutral.outlinedBorder",
-          bgcolor: "background.level1",
-          display: "flex",
-          alignItems: "center",
-          justifyContent: "space-between",
-          borderRadius: { xs: 0, md: "12px 12px 0 0" },
-          flexShrink: 0,
-        }}
-      >
-        <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
-          {/* Mobile back button */}
-          <IconButton
-            size="sm"
-            variant="plain"
-            onClick={onClose}
-            sx={{
-              display: { xs: "flex", md: "none" },
-              color: colors.closeBtn,
-              minWidth: 44,
-              minHeight: 44,
-              "&:hover": { color: colors.closeBtnHover, bgcolor: colors.hoverBg },
-            }}
-          >
-            ←
-          </IconButton>
-          <Box
-            sx={{
-              width: 8,
-              height: 10,
-              clipPath: "polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)",
-              bgcolor: colors.gold,
-              boxShadow: colors.goldGlow,
-              display: { xs: "none", md: "block" },
-            }}
-          />
-          <Typography
-            sx={{
-              fontFamily: "display",
-              fontWeight: 600,
-              color: colors.gold,
-              letterSpacing: "0.03em",
-              fontSize: { xs: "0.9rem", md: "1rem" },
-            }}
-          >
-            TASK DETAILS
-          </Typography>
-        </Box>
-        {/* Desktop buttons - hidden on mobile */}
-        <Box sx={{ display: { xs: "none", md: "flex" }, alignItems: "center", gap: 0.5 }}>
-          {onToggleExpand && (
-            <Tooltip
-              title={expanded ? "Collapse panel" : "Expand to full width"}
-              placement="bottom"
-            >
-              <IconButton
-                size="sm"
-                variant="plain"
-                onClick={onToggleExpand}
-                sx={{
-                  color: colors.closeBtn,
-                  "&:hover": { color: colors.closeBtnHover, bgcolor: colors.hoverBg },
-                }}
-              >
-                {expanded ? "⊟" : "⊞"}
-              </IconButton>
-            </Tooltip>
-          )}
-          <Tooltip title="Close panel" placement="bottom">
-            <IconButton
-              size="sm"
-              variant="plain"
-              onClick={onClose}
-              sx={{
-                color: colors.closeBtn,
-                "&:hover": { color: colors.closeBtnHover, bgcolor: colors.hoverBg },
-              }}
-            >
-              ✕
-            </IconButton>
-          </Tooltip>
-        </Box>
-      </Box>
-
-      {/* Content */}
-      <Box
-        sx={{
-          flex: 1,
-          overflow: "hidden",
-          display: "flex",
-          flexDirection: expanded ? { xs: "column", md: "row" } : "column",
-        }}
-      >
-        {expanded ? (
-          <>
-            {/* Column 1: Details */}
-            <Box
-              sx={{
-                width: { xs: "100%", md: 300, lg: 350 },
-                flexShrink: 0,
-                borderRight: { xs: "none", md: "1px solid" },
-                borderBottom: { xs: "1px solid", md: "none" },
-                borderColor: "neutral.outlinedBorder",
-                overflow: "auto",
-                maxHeight: { xs: "40vh", md: "none" },
-              }}
-            >
-              <DetailsSection showProgress={false} />
-            </Box>
-            {/* Column 2: Progress */}
-            <Box
-              sx={{
-                width: { xs: "100%", md: 280, lg: 350 },
-                flexShrink: 0,
-                borderRight: { xs: "none", md: "1px solid" },
-                borderBottom: { xs: "1px solid", md: "none" },
-                borderColor: "neutral.outlinedBorder",
-                overflow: "hidden",
-                display: "flex",
-                flexDirection: "column",
-                maxHeight: { xs: "30vh", md: "none" },
-              }}
-            >
-              <ProgressSection />
-            </Box>
-            {/* Column 3: Outcomes (Output/Error/Session Log) */}
-            <Box
-              sx={{
-                flex: 1,
-                minWidth: 0,
-                display: "flex",
-                flexDirection: "column",
-                overflow: "hidden",
-              }}
-            >
-              <Tabs
-                value={outcomesTab}
-                onChange={(_, value) => setOutcomesTab(value as "output" | "error" | "session")}
-                sx={{ display: "flex", flexDirection: "column", height: "100%" }}
-              >
-                <TabList
-                  sx={getTabListStyles(
-                    outcomesTab === "error"
-                      ? colors.rust
-                      : outcomesTab === "session"
-                        ? colors.blue
-                        : colors.gold,
-                  )}
-                >
-                  <Tab value="output">OUTPUT</Tab>
-                  {hasError && <Tab value="error">ERROR</Tab>}
-                  <Tab value="session">
-                    SESSION
-                    {sessionLogs && sessionLogs.length > 0 && (
-                      <Chip
-                        size="sm"
-                        sx={{
-                          ml: 0.5,
-                          fontFamily: "code",
-                          fontSize: "0.55rem",
-                          minHeight: "auto",
-                          height: 14,
-                          bgcolor: colors.goldSoftBg,
-                          color: colors.gold,
-                        }}
-                      >
-                        {sessionLogs.length}
-                      </Chip>
-                    )}
-                  </Tab>
-                </TabList>
-                <TabPanel value="output" sx={{ p: 0, flex: 1, overflow: "hidden" }}>
-                  <OutputContent />
-                </TabPanel>
-                {hasError && (
-                  <TabPanel value="error" sx={{ p: 0, flex: 1, overflow: "hidden" }}>
-                    <ErrorContent />
-                  </TabPanel>
-                )}
-                <TabPanel
-                  value="session"
-                  sx={{
-                    p: 0,
-                    flex: 1,
-                    overflow: "hidden",
-                    display: "flex",
-                    flexDirection: "column",
-                  }}
-                >
-                  <SessionLogPanel sessionLogs={sessionLogs} />
-                </TabPanel>
-              </Tabs>
-            </Box>
-          </>
-        ) : (
-          <Box sx={{ flex: 1, overflow: "auto", display: "flex", flexDirection: "column" }}>
-            <DetailsSection showProgress={true} />
-            <CollapsedOutputSection />
-          </Box>
-        )}
-      </Box>
-    </Box>
-  );
-}