kandev/apps/web/components/task/simple/components/run-error-entry.tsx

"use client";

import { useState } from "react";
import {
  IconAlertTriangle,
  IconChevronDown,
  IconPlayerPlay,
  IconRefresh,
} from "@tabler/icons-react";
import { Button } from "@kandev/ui/button";
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@kandev/ui/collapsible";
import { useAppStore } from "@/components/state-provider";
import { selectOfficeAgentProfiles } from "@/lib/state/slices/office/selectors";
import { getWebSocketClient } from "@/lib/ws/connection";
import { formatRelativeTime } from "@/lib/utils";
import { AgentAvatar } from "@/app/office/components/agent-avatar";
import { RemediationLink } from "@/components/task/remediation-link";
import type { RunError } from "@/app/office/tasks/[id]/types";
import type { TaskRepository } from "@/lib/types/http";
import { ManagedRuntimeNpmRunError } from "./managed-runtime-npm-run-error";
import { isLaunchErrorCategory, TaskLaunchErrorEntry } from "./task-launch-error-entry";
import { useTranslation } from "react-i18next";

type RunErrorEntryProps = {
  taskId: string;
  workspaceId?: string;
  repositories?: TaskRepository[];
  error: RunError;
};

function TypedRunLaunchErrorEntry({
  taskId,
  workspaceId,
  repositories,
  error,
  preview,
}: RunErrorEntryProps & { preview: string }) {
  return (
    <TaskLaunchErrorEntry
      taskId={taskId}
      workspaceId={workspaceId ?? ""}
      repositories={repositories}
      error={{
        session_id: error.sessionId,
        task_repository_id: error.taskRepositoryId,
        stamp: error.errorStamp ?? "",
        occurred_at: error.failedAt,
        preview,
        category: error.failureCode,
        recovery_actions: error.recoveryActions,
      }}
    />
  );
}

function LegacyRunErrorEntry({
  agentName,
  error,
  onRecover,
}: {
  agentName: string;
  error: RunError;
  onRecover: (action: "resume" | "fresh_start") => Promise<void>;
}) {
  const { t } = useTranslation();
  const [showDetails, setShowDetails] = useState(false);

  return (
    <div className="flex gap-3 py-3 border-b border-border/50">
      <AgentAvatar name={agentName} size="md" />
      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 flex-wrap">
          <span className="font-medium text-sm">{agentName}</span>
          <span className="inline-flex items-center gap-1 text-xs text-red-600 dark:text-red-400">
            <IconAlertTriangle className="h-3.5 w-3.5" />
            {t("task:stoppedWithAnError")}
          </span>
          <span className="text-xs text-muted-foreground">
            {formatRelativeTime(error.failedAt)}
          </span>
        </div>
        <p className="mt-1 text-sm text-muted-foreground">{t("task:theAgentStoppedWithAnError")}</p>
        {error.rawPayload && (
          <Collapsible open={showDetails} onOpenChange={setShowDetails} className="mt-2">
            <CollapsibleTrigger className="flex items-center gap-1 text-xs text-muted-foreground cursor-pointer hover:text-foreground transition-colors">
              <IconChevronDown
                className={`h-3.5 w-3.5 transition-transform ${showDetails ? "rotate-180" : ""}`}
              />
              {t("task:showDetails")}
            </CollapsibleTrigger>
            <CollapsibleContent>
              <pre
                className="mt-1 text-[11px] font-mono text-muted-foreground bg-muted/50 rounded p-2 overflow-auto max-h-[300px] whitespace-pre-wrap break-words"
                data-testid="run-error-raw-payload"
              >
                {error.rawPayload}
              </pre>
            </CollapsibleContent>
          </Collapsible>
        )}
        <div className="mt-2 flex items-center gap-2 flex-wrap">
          <RemediationLink url={error.remediationUrl} />
          <Button
            variant="outline"
            size="sm"
            className="h-7 text-xs cursor-pointer gap-1.5"
            onClick={() => onRecover("resume")}
            data-testid="run-error-resume-button"
          >
            <IconRefresh className="h-3 w-3" />
            {t("task:resumeSession")}
          </Button>
          <Button
            variant="outline"
            size="sm"
            className="h-7 text-xs cursor-pointer gap-1.5"
            onClick={() => onRecover("fresh_start")}
            data-testid="run-error-fresh-button"
          >
            <IconPlayerPlay className="h-3 w-3" />
            {t("task:startFreshSession")}
          </Button>
        </div>
      </div>
    </div>
  );
}

/**
 * Top-level chat entry rendered when an office session is in FAILED
 * state. Replaces the legacy red action-message banner: shows a short
 * generic header, a Show details collapsible exposing the verbatim
 * raw payload (for bug reports), and the Resume / Start fresh
 * buttons. Click handlers wire to the existing `session.recover` WS
 * request so the recovery semantics are unchanged.
 */
export function RunErrorEntry({
  taskId,
  workspaceId = "",
  repositories,
  error,
}: RunErrorEntryProps) {
  const { t } = useTranslation();
  const agentName = useAppStore(
    (s) =>
      selectOfficeAgentProfiles(s).find((a) => a.id === error.agentProfileId)?.name ??
      t("task:agent"),
  );

  if (isLaunchErrorCategory(error.failureCode) && error.errorStamp) {
    return (
      <TypedRunLaunchErrorEntry
        taskId={taskId}
        workspaceId={workspaceId}
        repositories={repositories}
        error={error}
        preview={error.message ?? t("task:launchErrorSessionPreview")}
      />
    );
  }

  const handleRecover = async (action: "resume" | "fresh_start" | "runtime_retry") => {
    const client = getWebSocketClient();
    if (!client) return;
    try {
      await client.request("session.recover", {
        task_id: taskId,
        session_id: error.sessionId,
        action,
      });
    } catch {
      // No-op — the chat will reflect any subsequent state via WS.
    }
  };

  if (error.failureCode === "managed_runtime_npm_resolution") {
    return (
      <ManagedRuntimeNpmRunError
        error={error}
        agentName={agentName}
        onRetry={() => handleRecover("runtime_retry")}
      />
    );
  }

  return <LegacyRunErrorEntry agentName={agentName} error={error} onRecover={handleRecover} />;
}