Function StreamErrorMessageBase

src/browser/features/Messages/StreamErrorMessage.tsx:28–162

(props)

}

const StreamErrorMessageBase: React.FC<StreamErrorMessageBaseProps> = (props) => {
  const message = props.message;
  const className = props.className;
  const compactRetryAction = props.compactRetryAction;
  const compactionDetails = props.compactionDetails;

  const debugAction = (
    <Tooltip>
      <TooltipTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          onClick={() => {
            window.dispatchEvent(createCustomEvent(CUSTOM_EVENTS.OPEN_DEBUG_LLM_REQUEST));
          }}
          aria-label="Open last LLM request debug modal"
          className="text-error/80 hover:text-error h-6 w-6"
        >
          <Bug className="h-3.5 w-3.5" />
        </Button>
      </TooltipTrigger>
      <TooltipContent align="center">
        <div className="flex items-center gap-2">
          <span>Debug last LLM request</span>
          <code className="bg-foreground/5 text-foreground/80 border-foreground/10 rounded-sm border px-1.5 py-0.5 font-mono text-[10px]">
            /debug-llm-request
          </code>
        </div>
      </TooltipContent>
    </Tooltip>
  );

  // Runtime unavailable gets a distinct, friendlier presentation.
  // This is a permanent failure (container/runtime doesn't exist), not a transient stream error.
  // The backend sends "Container unavailable..." for Docker or "Runtime unavailable..." for others.
  if (message.errorType === "runtime_not_ready") {
    // Extract title from error message (e.g., "Container unavailable" or "Runtime unavailable")
    const title = message.error?.split(".")[0] ?? "Runtime Unavailable";
    return (
      <div className={cn("bg-error-bg border border-error rounded px-5 py-4 my-3", className)}>
        <div className="font-primary text-error mb-2 flex items-center gap-2 text-[13px] font-semibold">
          <AlertTriangle aria-hidden="true" className="h-4 w-4" />
          <span>{title}</span>
          <div className="ml-auto flex items-center">{debugAction}</div>
        </div>
        <div className="text-foreground/80 text-[13px] leading-relaxed">{message.error}</div>
      </div>
    );
  }

  const provider = message.model ? getModelProvider(message.model) : "";
  const isAnthropicOverloaded =
    provider === "anthropic" &&
    message.errorType === "server_error" &&
    /\bHTTP\s*529\b|overloaded/i.test(message.error);
  const isEmptyOutputError = message.errorType === "empty_output";
  const isMaxOutputTokensError = message.errorType === "max_output_tokens";
  // Terminal refusal: distinct from network/empty-output messaging because retrying