WorkspaceStatusIndicator.tsx

import { useWorkspaceSidebarState } from "@/browser/stores/WorkspaceStore";
import { ModelDisplay } from "@/browser/features/Messages/ModelDisplay";
import { EmojiIcon } from "@/browser/components/icons/EmojiIcon/EmojiIcon";
import { CircleHelp, ExternalLinkIcon, Loader2 } from "lucide-react";
import { memo, useEffect, useRef, useState } from "react";
import { Tooltip, TooltipTrigger, TooltipContent } from "../Tooltip/Tooltip";

export const WorkspaceStatusIndicator = memo<{
  workspaceId: string;
  fallbackModel: string;
  /** When true the workspace is still being provisioned (show "starting…"). Passed as
   *  a prop so this component doesn't need to subscribe to the full WorkspaceContext. */
  isCreating?: boolean;
}>(({ workspaceId, fallbackModel, isCreating }) => {
  const {
    canInterrupt,
    isStarting,
    awaitingUserQuestion,
    currentModel,
    pendingStreamModel,
    agentStatus,
  } = useWorkspaceSidebarState(workspaceId);

  const phase: "starting" | "streaming" | null = canInterrupt
    ? "streaming"
    : isStarting || isCreating
      ? "starting"
      : null;

  const previousPhaseRef = useRef<typeof phase>(phase);
  const [isCollapsingPhaseSlot, setIsCollapsingPhaseSlot] = useState(false);
  const phaseSlotBlocked = awaitingUserQuestion || Boolean(agentStatus);
  const shouldCollapsePhaseSlot =
    isCollapsingPhaseSlot || (previousPhaseRef.current === "starting" && phase === "streaming");
  const showPhaseSlot = !phaseSlotBlocked && (phase === "starting" || shouldCollapsePhaseSlot);

  useEffect(() => {
    const previousPhase = previousPhaseRef.current;
    previousPhaseRef.current = phase;

    if (phaseSlotBlocked) {
      setIsCollapsingPhaseSlot(false);
      return;
    }

    if (previousPhase === "starting" && phase === "streaming") {
      setIsCollapsingPhaseSlot(true);
      return;
    }

    if (phase !== "streaming") {
      setIsCollapsingPhaseSlot(false);
    }
  }, [phase, phaseSlotBlocked]);

  // Let the CSS transition decide when the handoff slot can disappear so the JS logic
  // does not need a mirrored timeout that can drift from the rendered duration.
  const handlePhaseSlotTransitionEnd = () => {
    if (phase === "streaming" && isCollapsingPhaseSlot) {
      setIsCollapsingPhaseSlot(false);
    }
  };

  // Show prompt when ask_user_question is pending - make it prominent
  if (awaitingUserQuestion) {
    return (
      <div className="bg-plan-mode-alpha text-plan-mode-light flex min-w-0 items-center gap-1.5 rounded px-1.5 py-0.5 text-xs">
        <CircleHelp aria-hidden="true" className="h-3 w-3 shrink-0" />
        <span className="min-w-0 truncate font-medium">Mux has a few questions</span>
      </div>
    );
  }

  // Todo-derived status can outlive the stream that produced it. Once the turn is idle,
  // keep refresh-style status icons static so unfinished work does not look actively running.
  const agentStatusSpinOverride = canInterrupt || isStarting || isCreating ? undefined : false;

  if (agentStatus) {
    return (
      <div className="text-muted flex min-w-0 items-center gap-1.5 text-xs">
        {agentStatus.emoji && (
          <EmojiIcon
            emoji={agentStatus.emoji}
            spin={agentStatusSpinOverride}
            className="h-3 w-3 shrink-0"
          />
        )}
        <span className="min-w-0 truncate">{agentStatus.message}</span>
        {agentStatus.url && (
          <Tooltip>
            <TooltipTrigger asChild>
              {/* Plain <a> instead of Button to keep the icon compact.
                  !min-h-0 !min-w-0 override the global 44px mobile touch-target
                  rule (globals.css) that forces all <a>/<button> to min 44×44px
                  on pointer:coarse — this inline icon doesn't need a full tap target.
                  stopPropagation prevents the parent workspace-select and DnD
                  handlers from swallowing the tap. */}
              <a
                href={agentStatus.url}
                target="_blank"
                rel="noopener noreferrer"
                className="inline-flex h-4 !min-h-0 w-4 !min-w-0 shrink-0 items-center justify-center [&_svg]:size-3"
                onClick={(e) => e.stopPropagation()}
                onPointerDown={(e) => e.stopPropagation()}
              >
                <ExternalLinkIcon />
              </a>
            </TooltipTrigger>
            <TooltipContent align="center">{agentStatus.url}</TooltipContent>
          </Tooltip>
        )}
      </div>
    );
  }

  if (!phase) {
    return null;
  }

  const modelToShow =
    phase === "starting"
      ? (pendingStreamModel ?? fallbackModel)
      : (currentModel ?? pendingStreamModel ?? fallbackModel);
  const suffix = phase === "starting" ? "- starting..." : "- streaming...";

  return (
    <div className="text-muted flex min-w-0 items-center text-xs">
      {/* Keep the old steady-state layout, but hold the spinner slot just long enough to
          animate the start -> stream handoff instead of flashing the label left. */}
      {showPhaseSlot && (
        <span
          className={
            phase === "starting"
              ? "mr-1.5 inline-flex w-3 shrink-0 overflow-hidden opacity-100"
              : "mr-0 inline-flex w-0 shrink-0 overflow-hidden opacity-0 transition-[margin,width,opacity] duration-150 ease-out"
          }
          data-phase-slot
          onTransitionEnd={handlePhaseSlotTransitionEnd}
        >
          <Loader2
            aria-hidden="true"
            className={
              phase === "starting" ? "h-3 w-3 shrink-0 animate-spin opacity-70" : "h-3 w-3 shrink-0"
            }
          />
        </span>
      )}
      {modelToShow ? (
        <div className="flex min-w-0 items-center gap-1.5">
          <span className="min-w-0 truncate">
            <ModelDisplay modelString={modelToShow} showTooltip={false} />
          </span>
          <span className="shrink-0 opacity-70">{suffix}</span>
        </div>
      ) : (
        <span className="min-w-0 truncate">
          {phase === "starting" ? "Assistant - starting..." : "Assistant - streaming..."}
        </span>
      )}
    </div>
  );
});
WorkspaceStatusIndicator.displayName = "WorkspaceStatusIndicator";